@foxy.io/elements 1.18.0-beta.20 → 1.18.0-beta.22

package/dist/elements/public/I18nEditor/I18nEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"I18nEditor.js","sourceRoot":"","sources":["../../../../src/elements/public/I18nEditor/I18nEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { Data, Overrides } from './types';\nimport type { TabsElement } from '@vaadin/vaadin-tabs';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { html } from 'lit-html';\n\nconst NS = 'i18n-editor';\nconst Base = TranslatableMixin(ConfigurableMixin(ThemeableMixin(NucleonElement)), NS);\n\nexport class I18nEditor extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      languageOverrides: { attribute: 'language-overrides' },\n      selectedLanguage: { attribute: 'selected-language' },\n      __selectedTabIndex: { attribute: false },\n    };\n  }\n\n  languageOverrides: string | null = 'https://demo.api/hapi/language_overrides';\n\n  selectedLanguage: string | null = 'english';\n\n  private __selectedTabIndex = 0;\n\n  render(): TemplateResult {\n    const tabs = this.__tabs;\n    const prefix = tabs[this.__selectedTabIndex] as string | undefined;\n    const valuesForLang = this.data?.values[this.selectedLanguage ?? ''] ?? {};\n    const filteredValues: Record<string, string> = {};\n    const isSpinnerVisible = !this.in({ idle: 'snapshot' });\n\n    if (prefix) {\n      if (prefix.includes('_')) {\n        const group = prefix.substring(0, prefix.indexOf('_'));\n        const subGroup = prefix.substring(prefix.indexOf('_') + 1);\n        const values = (valuesForLang[group] as Record<string, Record<string, string>>)[subGroup];\n\n        for (const key in values) {\n          filteredValues[`${group}_${subGroup}_${key}`] = values[key];\n        }\n      } else {\n        for (const key in valuesForLang) {\n          if (key.startsWith(prefix)) filteredValues[key] = valuesForLang[key] as string;\n        }\n      }\n    }\n\n    const overridesLoader = this.__renderOverridesLoader();\n    const overrides = overridesLoader.overrides;\n\n    return html`\n      ${overridesLoader.template}\n\n      <div aria-busy=${this.in('busy')} aria-live=\"polite\" class=\"relative\">\n        <div\n          class=${classMap({\n            'transition-opacity grid grid-cols-1 gap-s': true,\n            'opacity-0 pointer-events-none': isSpinnerVisible,\n          })}\n        >\n          <vaadin-tabs\n            selected=${this.__selectedTabIndex}\n            class=\"-mx-l\"\n            theme=\"minimal\"\n            @selected-changed=${(evt: CustomEvent) => {\n              const tabsElement = evt.currentTarget as TabsElement;\n              this.__selectedTabIndex = tabsElement.selected ?? 0;\n            }}\n          >\n            ${tabs.map(name => {\n              const shortName = name.substring(name.indexOf('_') + 1).replace(/_/g, ' ');\n              const label = html`<span class=\"capitalize\">${shortName}</span>`;\n              return html`<vaadin-tab>${label}</vaadin-tab>`;\n            })}\n          </vaadin-tabs>\n\n          ${repeat(\n            Object.entries(filteredValues),\n            ([keyOrGroup]) => keyOrGroup,\n            ([keyOrGroup, translationOrDictionary]) => {\n              let code: string;\n              let gateway: string | undefined;\n              let override: Overrides['_embedded']['fx:language_overrides'][number] | undefined;\n\n              if (keyOrGroup.startsWith('gateways_')) {\n                code = keyOrGroup.substring(prefix!.length + 1);\n                gateway = prefix!.substring(9);\n                override = overrides.find(o => o.code === code && o.gateway === gateway);\n              } else {\n                code = keyOrGroup;\n                gateway = undefined;\n                override = overrides.find(o => o.code === code);\n              }\n\n              return html`\n                <foxy-internal-i18n-editor-entry\n                  default-value=${translationOrDictionary}\n                  gateway=${ifDefined(gateway)}\n                  parent=${ifDefined(this.languageOverrides ?? void 0)}\n                  code=${code}\n                  infer=\"\"\n                  .data=${override ?? null}\n                >\n                </foxy-internal-i18n-editor-entry>\n              `;\n            }\n          )}\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'transition-opacity absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !isSpinnerVisible,\n          })}\n        >\n          <foxy-spinner\n            layout=${this.in('busy') ? 'no-label' : 'horizontal'}\n            class=\"m-auto\"\n            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\n            infer=\"spinner\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  private get __tabs() {\n    const values = this.selectedLanguage ? this.data?.values[this.selectedLanguage] : undefined;\n\n    const tabs = Object.entries(values ?? {}).reduce((allKeys, [key, value]) => {\n      if (typeof value === 'string') {\n        const prefix = key.substring(0, key.indexOf('_'));\n        allKeys.add(prefix || key);\n      } else {\n        Object.entries(value).forEach(([subKey, subValue]) => {\n          if (Object.keys(subValue).length === 0) return;\n          allKeys.add(`${key}_${subKey}`);\n        });\n      }\n\n      return allKeys;\n    }, new Set<string>());\n\n    return Array.from(tabs);\n  }\n\n  private __renderOverridesLoader() {\n    type Loader = NucleonElement<Overrides>;\n\n    const loaders = Array.from(this.renderRoot.querySelectorAll<Loader>('foxy-nucleon'));\n    const overrides = loaders.reduce(\n      (result, loader) => [...result, ...(loader.data?._embedded['fx:language_overrides'] ?? [])],\n      [] as Resource<Rels.LanguageOverride>[]\n    );\n\n    const firstLoader = loaders[0] as Loader | undefined;\n\n    const loaderTemplates = new Array(Math.ceil((firstLoader?.data?.total_items || 300) / 300))\n      .fill(0)\n      .map((_, index) => {\n        try {\n          const url = new URL(this.languageOverrides ?? '');\n\n          url.searchParams.set('offset', String(index * 300));\n          url.searchParams.set('limit', '300');\n\n          return html`\n            <foxy-nucleon infer=\"\" href=${url.toString()} @update=${() => this.requestUpdate()}>\n            </foxy-nucleon>\n          `;\n        } catch {\n          return undefined;\n        }\n      });\n\n    return {\n      template: html`<div class=\"hidden\">${loaderTemplates}</div>`,\n      overrides,\n      loaders,\n    };\n  }\n}\n"]}
+{"version":3,"file":"I18nEditor.js","sourceRoot":"","sources":["../../../../src/elements/public/I18nEditor/I18nEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { Data, Overrides } from './types';\nimport type { TabsElement } from '@vaadin/vaadin-tabs';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { html } from 'lit-html';\n\nconst NS = 'i18n-editor';\nconst Base = TranslatableMixin(ConfigurableMixin(ThemeableMixin(NucleonElement)), NS);\n\n/**\n * Editor for language string overrides. Loads language strings\n * property helper (`fx:language_strings`) as main resource.\n *\n * @since 1.21.0\n * @element foxy-i18n-editor\n */\nexport class I18nEditor extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      languageOverrides: { attribute: 'language-overrides' },\n      selectedLanguage: { attribute: 'selected-language' },\n      __selectedTabIndex: { attribute: false },\n    };\n  }\n\n  /** URL of the `fx:language_overrides` resource for a template set. */\n  languageOverrides: string | null = null;\n\n  /** Language from the `fx:language_strings` property helper for which the default values will be pulled from. */\n  selectedLanguage: string | null = null;\n\n  private __selectedTabIndex = 0;\n\n  render(): TemplateResult {\n    const tabs = this.__tabs;\n    const prefix = tabs[this.__selectedTabIndex] as string | undefined;\n    const valuesForLang = this.data?.values[this.selectedLanguage ?? ''] ?? {};\n    const filteredValues: Record<string, string> = {};\n    const isSpinnerVisible = !this.in({ idle: 'snapshot' });\n\n    if (prefix) {\n      if (prefix.includes('_')) {\n        const group = prefix.substring(0, prefix.indexOf('_'));\n        const subGroup = prefix.substring(prefix.indexOf('_') + 1);\n        const values = (valuesForLang[group] as Record<string, Record<string, string>>)[subGroup];\n\n        for (const key in values) {\n          filteredValues[`${group}_${subGroup}_${key}`] = values[key];\n        }\n      } else {\n        for (const key in valuesForLang) {\n          if (key.startsWith(prefix)) filteredValues[key] = valuesForLang[key] as string;\n        }\n      }\n    }\n\n    const overridesLoader = this.__renderOverridesLoader();\n    const overrides = overridesLoader.overrides;\n\n    return html`\n      ${overridesLoader.template}\n\n      <div aria-busy=${this.in('busy')} aria-live=\"polite\" class=\"relative\">\n        <div\n          class=${classMap({\n            'transition-opacity grid grid-cols-1 gap-s': true,\n            'opacity-0 pointer-events-none': isSpinnerVisible,\n          })}\n        >\n          <vaadin-tabs\n            selected=${this.__selectedTabIndex}\n            class=\"-mx-l\"\n            theme=\"minimal\"\n            @selected-changed=${(evt: CustomEvent) => {\n              const tabsElement = evt.currentTarget as TabsElement;\n              this.__selectedTabIndex = tabsElement.selected ?? 0;\n            }}\n          >\n            ${tabs.map(name => {\n              const shortName = name.substring(name.indexOf('_') + 1).replace(/_/g, ' ');\n              const label = html`<span class=\"capitalize\">${shortName}</span>`;\n              return html`<vaadin-tab>${label}</vaadin-tab>`;\n            })}\n          </vaadin-tabs>\n\n          ${repeat(\n            Object.entries(filteredValues),\n            ([keyOrGroup]) => keyOrGroup,\n            ([keyOrGroup, defaultValue]) => {\n              let code: string;\n              let gateway: string | undefined;\n              let override: Overrides['_embedded']['fx:language_overrides'][number] | undefined;\n\n              if (keyOrGroup.startsWith('gateways_')) {\n                code = keyOrGroup.substring(prefix!.length + 1);\n                gateway = prefix!.substring(9);\n                override = overrides.find(o => o.code === code && o.gateway === gateway);\n              } else {\n                code = keyOrGroup;\n                gateway = undefined;\n                override = overrides.find(o => o.code === code);\n              }\n\n              return html`\n                <foxy-internal-i18n-editor-entry\n                  default-value=${defaultValue}\n                  gateway=${ifDefined(gateway)}\n                  parent=${ifDefined(this.languageOverrides ?? void 0)}\n                  code=${code}\n                  infer=\"\"\n                  .data=${override ?? null}\n                >\n                </foxy-internal-i18n-editor-entry>\n              `;\n            }\n          )}\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'transition-opacity absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !isSpinnerVisible,\n          })}\n        >\n          <foxy-spinner\n            layout=${this.in('busy') ? 'no-label' : 'horizontal'}\n            class=\"m-auto\"\n            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\n            infer=\"spinner\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  private get __tabs() {\n    const values = this.selectedLanguage ? this.data?.values[this.selectedLanguage] : undefined;\n\n    const tabs = Object.entries(values ?? {}).reduce((allKeys, [key, value]) => {\n      if (typeof value === 'string') {\n        const prefix = key.substring(0, key.indexOf('_'));\n        allKeys.add(prefix || key);\n      } else {\n        Object.entries(value).forEach(([subKey, subValue]) => {\n          if (Object.keys(subValue).length === 0) return;\n          allKeys.add(`${key}_${subKey}`);\n        });\n      }\n\n      return allKeys;\n    }, new Set<string>());\n\n    return Array.from(tabs);\n  }\n\n  private __renderOverridesLoader() {\n    type Loader = NucleonElement<Overrides>;\n\n    const loaders = Array.from(this.renderRoot.querySelectorAll<Loader>('foxy-nucleon'));\n    const overrides = loaders.reduce(\n      (result, loader) => [...result, ...(loader.data?._embedded['fx:language_overrides'] ?? [])],\n      [] as Resource<Rels.LanguageOverride>[]\n    );\n\n    const firstLoader = loaders[0] as Loader | undefined;\n\n    const loaderTemplates = new Array(Math.ceil((firstLoader?.data?.total_items || 300) / 300))\n      .fill(0)\n      .map((_, index) => {\n        try {\n          const url = new URL(this.languageOverrides ?? '');\n\n          url.searchParams.set('offset', String(index * 300));\n          url.searchParams.set('limit', '300');\n\n          return html`\n            <foxy-nucleon infer=\"\" href=${url.toString()} @update=${() => this.requestUpdate()}>\n            </foxy-nucleon>\n          `;\n        } catch {\n          return undefined;\n        }\n      });\n\n    return {\n      template: html`<div class=\"hidden\">${loaderTemplates}</div>`,\n      overrides,\n      loaders,\n    };\n  }\n}\n"]}

package/dist/elements/public/IntegrationForm/IntegrationForm.d.ts

@@ -6,6 +6,33 @@ import { InternalForm } from '../../internal/InternalForm/InternalForm';
 declare const Base: typeof InternalForm & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
 };
+/**
+ * Form element for managing integrations (`fx:integration`).
+ *
+ * @slot project-name:before
+ * @slot project-name:after
+ *
+ * @slot project-description:before
+ * @slot project-description:after
+ *
+ * @slot create:before
+ * @slot create:after
+ *
+ * @slot header:before
+ * @slot header:after
+ *
+ * @slot message:before
+ * @slot message:after
+ *
+ * @slot table:before
+ * @slot table:after
+ *
+ * @slot delete:before
+ * @slot delete:after
+ *
+ * @element foxy-integration-form
+ * @since 1.21.0
+ */
 export declare class IntegrationForm extends Base<Data> {
     static get properties(): PropertyDeclarations;
     static get v8n(): NucleonV8N<Data>;
@@ -14,5 +41,13 @@ export declare class IntegrationForm extends Base<Data> {
     protected _fetch<TResult = Data>(...args: Parameters<Window['fetch']>): Promise<TResult>;
     private __renderSnapshotBody;
     private __renderTemplateBody;
+    private __renderMessage;
+    private __renderHeader;
+    private __renderTable;
+    private __renderCopiableText;
+    private __renderMailToLink;
+    private __renderLink;
+    private __renderTableRow;
+    private __renderTableI18n;
 }
 export {};

package/dist/elements/public/IntegrationForm/IntegrationForm.js

@@ -1,8 +1,36 @@
 import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
+import { classMap } from "../../../utils/class-map.js";
 import { html } from 'lit-html';
 const NS = 'integration-form';
 const Base = TranslatableMixin(InternalForm, NS);
+/**
+ * Form element for managing integrations (`fx:integration`).
+ *
+ * @slot project-name:before
+ * @slot project-name:after
+ *
+ * @slot project-description:before
+ * @slot project-description:after
+ *
+ * @slot create:before
+ * @slot create:after
+ *
+ * @slot header:before
+ * @slot header:after
+ *
+ * @slot message:before
+ * @slot message:after
+ *
+ * @slot table:before
+ * @slot table:after
+ *
+ * @slot delete:before
+ * @slot delete:after
+ *
+ * @element foxy-integration-form
+ * @since 1.21.0
+ */
 export class IntegrationForm extends Base {
     constructor() {
         super(...arguments);
@@ -34,187 +62,151 @@ export class IntegrationForm extends Base {
         return json;
     }
     __renderSnapshotBody() {
-        var _a, _b;
+        const hiddenSelector = this.hiddenSelector;
+        const postResponse = this.__postResponse;
+        return html `
+      ${hiddenSelector.matches('header', true) ? '' : this.__renderHeader()}
+      ${hiddenSelector.matches('message', true) || !postResponse ? '' : this.__renderMessage()}
+      ${hiddenSelector.matches('table') ? '' : this.__renderTable()}
+      <foxy-internal-delete-control infer="delete"></foxy-internal-delete-control>
+    `;
+    }
+    __renderTemplateBody() {
+        return html `
+      <foxy-internal-text-control infer="project-name"></foxy-internal-text-control>
+      <foxy-internal-text-area-control infer="project-description">
+      </foxy-internal-text-area-control>
+      <foxy-internal-create-control infer="create"></foxy-internal-create-control>
+    `;
+    }
+    __renderMessage() {
+        return html `
+      ${this.renderTemplateOrSlot('message:before')}
+
+      <div class="bg-success-10 text-success p-m pb-s space-y-xs leading-s rounded-t-l rounded-b-l">
+        <foxy-i18n infer="message" class="block" key="text"></foxy-i18n>
+        <vaadin-button
+          data-testid="message-action"
+          theme="tertiary contrast"
+          class="p-0"
+          ?disabled=${this.disabledSelector.matches('message', true)}
+          @click=${() => (this.__postResponse = null)}
+        >
+          <foxy-i18n infer="message" key="action"></foxy-i18n>
+        </vaadin-button>
+      </div>
+
+      ${this.renderTemplateOrSlot('message:after')}
+    `;
+    }
+    __renderHeader() {
         const data = this.data;
-        const expires = new Date(((_a = data.expires) !== null && _a !== void 0 ? _a : 0) * 1000);
-        const description = ((_b = data.project_description) === null || _b === void 0 ? void 0 : _b.trim()) || this.t('no_description');
+        const noDescription = html `<foxy-i18n infer="header" key="no_description"></foxy-i18n>`;
         return html `
-      <dl class="grid grid-cols-1 gap-s">
-        <dt class="sr-only">${this.t('title_description')}</dt>
-        <dd class="font-bold truncate text-xl">${data.project_name}&ZeroWidthSpace;</dd>
+      ${this.renderTemplateOrSlot('header:before')}
 
-        <dt class="sr-only">${this.t('subtitle_description')}</dt>
-        <dd class="text-secondary">${description}&ZeroWidthSpace;</dd>
-      </dl>
+      <div class="space-y-xs">
+        <div class="font-bold truncate text-xl">${data.project_name}&ZeroWidthSpace;</div>
+        <div class="text-secondary">${data.project_description || noDescription}</div>
+      </div>
 
-      ${this.__postResponse
-            ? html `
-            <div
-              class="bg-success-10 text-success p-m pb-s space-y-xs leading-s rounded-t-l rounded-b-l"
-            >
-              <foxy-i18n infer="" class="block" key="post_success_message"></foxy-i18n>
-              <vaadin-button
-                theme="tertiary contrast"
-                class="p-0"
-                @click=${() => (this.__postResponse = null)}
-              >
-                <foxy-i18n infer="" key="post_success_action"></foxy-i18n>
-              </vaadin-button>
-            </div>
-          `
-            : ''}
+      ${this.renderTemplateOrSlot('header:after')}
+    `;
+    }
+    __renderTable() {
+        var _a;
+        const data = this.data;
+        const expires = new Date(((_a = data.expires) !== null && _a !== void 0 ? _a : 0) * 1000);
+        const postResponse = this.__postResponse;
+        return html `
+      ${this.renderTemplateOrSlot('table:before')}
 
       <table class="font-lumo text-m leading-m w-full">
         <tbody class="divide-y divide-contrast-10">
-          <tr>
-            <td class="max-w-0 truncate py-s text-secondary w-1-3 pr-m font-semibold">
-              <foxy-i18n infer="" key="added_by"></foxy-i18n>
-            </td>
-            <td class="max-w-0 truncate py-s text-body w-2-3">
-              ${data.added_by_email
+          ${this.__renderTableRow({
+            label: this.__renderTableI18n('added_by'),
+            value: this.__renderMailToLink(data.added_by_email, data.added_by_name),
+        })}
+          ${this.__renderTableRow({
+            label: this.__renderTableI18n('contact'),
+            value: this.__renderMailToLink(data.contact_email, data.contact_name),
+        })}
+          ${this.__renderTableRow({
+            label: this.__renderTableI18n('company'),
+            value: this.__renderLink(data.company_url, data.company_name),
+        })}
+          ${this.__renderTableRow({
+            label: this.__renderTableI18n('expires'),
+            value: this.__renderTableI18n('expires_date', { date: expires }),
+        })}
+          ${this.__renderTableRow({
+            label: 'Client ID',
+            value: this.__renderCopiableText(data.client_id),
+        })}
+          ${postResponse
             ? html `
-                    <a
-                      target="_blank"
-                      class="font-semibold text-primary rounded hover-underline focus-outline-none focus-ring-2 focus-ring-primary-50"
-                      href="mailto:${data.added_by_email}"
-                    >
-                      ${data.added_by_name}
-                    </a>
-                  `
-            : data.added_by_name}
-            </td>
-          </tr>
-
-          <tr>
-            <td class="max-w-0 truncate py-s text-secondary w-1-3 pr-m font-semibold">
-              <foxy-i18n infer="" key="contact"></foxy-i18n>
-            </td>
-            <td class="max-w-0 truncate py-s text-body w-2-3">
-              ${data.contact_email
-            ? html `
-                    <a
-                      target="_blank"
-                      class="font-semibold text-primary rounded hover-underline focus-outline-none focus-ring-2 focus-ring-primary-50"
-                      href="mailto:${data.contact_email}"
-                    >
-                      ${data.contact_name}
-                    </a>
-                  `
-            : data.contact_name}
-            </td>
-          </tr>
-
-          <tr>
-            <td class="max-w-0 truncate py-s text-secondary w-1-3 pr-m font-semibold">
-              <foxy-i18n infer="" key="company"></foxy-i18n>
-            </td>
-            <td class="max-w-0 truncate py-s text-body w-2-3">
-              ${data.company_url
-            ? html `
-                    <a
-                      target="_blank"
-                      class="font-semibold text-primary rounded hover-underline focus-outline-none focus-ring-2 focus-ring-primary-50"
-                      href=${data.company_url}
-                    >
-                      ${data.company_name}
-                    </a>
-                  `
-            : data.company_name}
-            </td>
-          </tr>
-
-          <tr>
-            <td class="max-w-0 truncate py-s text-secondary w-1-3 pr-m font-semibold">
-              <foxy-i18n infer="" key="expires"></foxy-i18n>
-            </td>
-            <td class="max-w-0 truncate py-s text-body w-2-3">
-              <foxy-i18n infer="" key="expires_date" .options=${{ date: expires }}></foxy-i18n>
-            </td>
-          </tr>
-
-          <tr>
-            <td class="max-w-0 truncate py-s text-secondary w-1-3 pr-m font-semibold">Client ID</td>
-            <td class="max-w-0 truncate py-s text-body w-2-3">
-              <div class="flex items-center gap-s">
-                <code class="truncate flex-1">${data.client_id}</code>
-                <foxy-copy-to-clipboard
-                  infer="copy-to-clipboard"
-                  class="inline-block"
-                  text=${data.client_id}
-                >
-                </foxy-copy-to-clipboard>
-              </div>
-            </td>
-          </tr>
-
-          ${this.__postResponse
-            ? html `
-                <tr class="font-semibold text-success">
-                  <td class="max-w-0 truncate py-s w-1-3 pr-m font-semibold">Client secret</td>
-                  <td class="max-w-0 py-s w-2-3">
-                    <div class="flex items-center gap-s">
-                      <code class="truncate flex-1">${this.__postResponse.client_secret}</code>
-                      <foxy-copy-to-clipboard
-                        infer="copy-to-clipboard"
-                        class="inline-block"
-                        text=${this.__postResponse.client_secret}
-                      >
-                      </foxy-copy-to-clipboard>
-                    </div>
-                  </td>
-                </tr>
-
-                <tr class="font-semibold text-success">
-                  <td class="max-w-0 truncate py-s w-1-3 pr-m font-semibold">Refresh token</td>
-                  <td class="max-w-0 py-s w-2-3">
-                    <div class="flex items-center gap-s">
-                      <code class="truncate flex-1">${this.__postResponse.refresh_token}</code>
-                      <foxy-copy-to-clipboard
-                        infer="copy-to-clipboard"
-                        class="inline-block"
-                        text=${this.__postResponse.refresh_token}
-                      >
-                      </foxy-copy-to-clipboard>
-                    </div>
-                  </td>
-                </tr>
-
-                <tr class="font-semibold text-success">
-                  <td class="max-w-0 truncate py-s w-1-3 pr-m font-semibold">Access token</td>
-                  <td class="max-w-0 py-s w-2-3">
-                    <div class="flex items-center gap-s">
-                      <code class="truncate flex-1">${this.__postResponse.access_token}</code>
-                      <foxy-copy-to-clipboard
-                        infer="copy-to-clipboard"
-                        class="inline-block"
-                        text=${this.__postResponse.access_token}
-                      >
-                      </foxy-copy-to-clipboard>
-                    </div>
-                  </td>
-                </tr>
+                ${this.__renderTableRow({
+                highlight: true,
+                label: 'Client secret',
+                value: this.__renderCopiableText(postResponse.client_secret),
+            })}
+                ${this.__renderTableRow({
+                highlight: true,
+                label: 'Refresh token',
+                value: this.__renderCopiableText(postResponse.refresh_token),
+            })}
+                ${this.__renderTableRow({
+                highlight: true,
+                label: 'Access token',
+                value: this.__renderCopiableText(postResponse.access_token),
+            })}
               `
             : ''}
-
-          <tr>
-            <td class="max-w-0 truncate py-s text-secondary w-1-3 pr-m font-semibold">Scope</td>
-            <td class="max-w-0 truncate py-s text-body w-2-3"><code>${data.scope}</code></td>
-          </tr>
+          ${this.__renderTableRow({ label: 'Scope', value: html `<code>${data.scope}</code>` })}
         </tbody>
       </table>
 
-      <foxy-internal-delete-control infer="delete"></foxy-internal-delete-control>
+      ${this.renderTemplateOrSlot('table:after')}
     `;
     }
-    __renderTemplateBody() {
+    __renderCopiableText(text) {
         return html `
-      <foxy-internal-text-control infer="project-name"></foxy-internal-text-control>
-
-      <foxy-internal-text-area-control infer="project-description">
-      </foxy-internal-text-area-control>
-
-      <foxy-internal-create-control infer="create"></foxy-internal-create-control>
+      <div class="flex items-center gap-s">
+        <code class="truncate flex-1">${text}</code>
+        <foxy-copy-to-clipboard infer="copy-to-clipboard" class="inline-block" text=${text}>
+        </foxy-copy-to-clipboard>
+      </div>
     `;
     }
+    __renderMailToLink(email, caption) {
+        if (!email)
+            return html `${caption}`;
+        return this.__renderLink(`mailto:${email}`, caption);
+    }
+    __renderLink(href, caption) {
+        if (!href)
+            return html `${caption}`;
+        return html `
+      <a
+        target="_blank"
+        class="font-semibold text-primary rounded hover-underline focus-outline-none focus-ring-2 focus-ring-primary-50"
+        href=${href}
+      >
+        ${caption}
+      </a>
+    `;
+    }
+    __renderTableRow(params) {
+        const { label, value, highlight = false } = params;
+        return html `
+      <tr class=${classMap({ 'font-semibold text-success': highlight })}>
+        <td class="max-w-0 truncate py-s text-secondary w-1-3 pr-m">${label}</td>
+        <td class="max-w-0 truncate py-s text-body w-2-3">${value}</td>
+      </tr>
+    `;
+    }
+    __renderTableI18n(key, options) {
+        return html `<foxy-i18n infer="table" key=${key} .options=${options}></foxy-i18n>`;
+    }
 }
 //# sourceMappingURL=IntegrationForm.js.map

package/dist/elements/public/IntegrationForm/IntegrationForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntegrationForm.js","sourceRoot":"","sources":["../../../../src/elements/public/IntegrationForm/IntegrationForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Data, PostResponseData } from './types';\nimport type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\nimport type { NucleonV8N } from '../NucleonElement/types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { html } from 'lit-html';\n\nconst NS = 'integration-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\nexport class IntegrationForm extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __postResponse: { attribute: false },\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [({ project_name: v }) => !!v || 'project-name:v8n_required'];\n  }\n\n  private __postResponse: PostResponseData | null = null;\n\n  renderBody(): TemplateResult {\n    return this.data ? this.__renderSnapshotBody() : this.__renderTemplateBody();\n  }\n\n  protected async _fetch<TResult = Data>(...args: Parameters<Window['fetch']>): Promise<TResult> {\n    const constructor = this.constructor as typeof IntegrationForm;\n    const response = await new constructor.API(this).fetch(...args);\n    const method = typeof args[0] === 'string' ? args[1]?.method : args[0].method;\n    const url = typeof args[0] === 'string' ? args[0] : args[0].url;\n\n    if (!response.ok) throw response;\n\n    const json = await response.json();\n    if (method?.toUpperCase() === 'POST' && url === this.parent) this.__postResponse = json;\n\n    return json;\n  }\n\n  private __renderSnapshotBody() {\n    const data = this.data as Data;\n    const expires = new Date((data.expires ?? 0) * 1000);\n    const description = data.project_description?.trim() || this.t('no_description');\n\n    return html`\n      <dl class=\"grid grid-cols-1 gap-s\">\n        <dt class=\"sr-only\">${this.t('title_description')}</dt>\n        <dd class=\"font-bold truncate text-xl\">${data.project_name}&ZeroWidthSpace;</dd>\n\n        <dt class=\"sr-only\">${this.t('subtitle_description')}</dt>\n        <dd class=\"text-secondary\">${description}&ZeroWidthSpace;</dd>\n      </dl>\n\n      ${this.__postResponse\n        ? html`\n            <div\n              class=\"bg-success-10 text-success p-m pb-s space-y-xs leading-s rounded-t-l rounded-b-l\"\n            >\n              <foxy-i18n infer=\"\" class=\"block\" key=\"post_success_message\"></foxy-i18n>\n              <vaadin-button\n                theme=\"tertiary contrast\"\n                class=\"p-0\"\n                @click=${() => (this.__postResponse = null)}\n              >\n                <foxy-i18n infer=\"\" key=\"post_success_action\"></foxy-i18n>\n              </vaadin-button>\n            </div>\n          `\n        : ''}\n\n      <table class=\"font-lumo text-m leading-m w-full\">\n        <tbody class=\"divide-y divide-contrast-10\">\n          <tr>\n            <td class=\"max-w-0 truncate py-s text-secondary w-1-3 pr-m font-semibold\">\n              <foxy-i18n infer=\"\" key=\"added_by\"></foxy-i18n>\n            </td>\n            <td class=\"max-w-0 truncate py-s text-body w-2-3\">\n              ${data.added_by_email\n                ? html`\n                    <a\n                      target=\"_blank\"\n                      class=\"font-semibold text-primary rounded hover-underline focus-outline-none focus-ring-2 focus-ring-primary-50\"\n                      href=\"mailto:${data.added_by_email}\"\n                    >\n                      ${data.added_by_name}\n                    </a>\n                  `\n                : data.added_by_name}\n            </td>\n          </tr>\n\n          <tr>\n            <td class=\"max-w-0 truncate py-s text-secondary w-1-3 pr-m font-semibold\">\n              <foxy-i18n infer=\"\" key=\"contact\"></foxy-i18n>\n            </td>\n            <td class=\"max-w-0 truncate py-s text-body w-2-3\">\n              ${data.contact_email\n                ? html`\n                    <a\n                      target=\"_blank\"\n                      class=\"font-semibold text-primary rounded hover-underline focus-outline-none focus-ring-2 focus-ring-primary-50\"\n                      href=\"mailto:${data.contact_email}\"\n                    >\n                      ${data.contact_name}\n                    </a>\n                  `\n                : data.contact_name}\n            </td>\n          </tr>\n\n          <tr>\n            <td class=\"max-w-0 truncate py-s text-secondary w-1-3 pr-m font-semibold\">\n              <foxy-i18n infer=\"\" key=\"company\"></foxy-i18n>\n            </td>\n            <td class=\"max-w-0 truncate py-s text-body w-2-3\">\n              ${data.company_url\n                ? html`\n                    <a\n                      target=\"_blank\"\n                      class=\"font-semibold text-primary rounded hover-underline focus-outline-none focus-ring-2 focus-ring-primary-50\"\n                      href=${data.company_url}\n                    >\n                      ${data.company_name}\n                    </a>\n                  `\n                : data.company_name}\n            </td>\n          </tr>\n\n          <tr>\n            <td class=\"max-w-0 truncate py-s text-secondary w-1-3 pr-m font-semibold\">\n              <foxy-i18n infer=\"\" key=\"expires\"></foxy-i18n>\n            </td>\n            <td class=\"max-w-0 truncate py-s text-body w-2-3\">\n              <foxy-i18n infer=\"\" key=\"expires_date\" .options=${{ date: expires }}></foxy-i18n>\n            </td>\n          </tr>\n\n          <tr>\n            <td class=\"max-w-0 truncate py-s text-secondary w-1-3 pr-m font-semibold\">Client ID</td>\n            <td class=\"max-w-0 truncate py-s text-body w-2-3\">\n              <div class=\"flex items-center gap-s\">\n                <code class=\"truncate flex-1\">${data.client_id}</code>\n                <foxy-copy-to-clipboard\n                  infer=\"copy-to-clipboard\"\n                  class=\"inline-block\"\n                  text=${data.client_id}\n                >\n                </foxy-copy-to-clipboard>\n              </div>\n            </td>\n          </tr>\n\n          ${this.__postResponse\n            ? html`\n                <tr class=\"font-semibold text-success\">\n                  <td class=\"max-w-0 truncate py-s w-1-3 pr-m font-semibold\">Client secret</td>\n                  <td class=\"max-w-0 py-s w-2-3\">\n                    <div class=\"flex items-center gap-s\">\n                      <code class=\"truncate flex-1\">${this.__postResponse.client_secret}</code>\n                      <foxy-copy-to-clipboard\n                        infer=\"copy-to-clipboard\"\n                        class=\"inline-block\"\n                        text=${this.__postResponse.client_secret}\n                      >\n                      </foxy-copy-to-clipboard>\n                    </div>\n                  </td>\n                </tr>\n\n                <tr class=\"font-semibold text-success\">\n                  <td class=\"max-w-0 truncate py-s w-1-3 pr-m font-semibold\">Refresh token</td>\n                  <td class=\"max-w-0 py-s w-2-3\">\n                    <div class=\"flex items-center gap-s\">\n                      <code class=\"truncate flex-1\">${this.__postResponse.refresh_token}</code>\n                      <foxy-copy-to-clipboard\n                        infer=\"copy-to-clipboard\"\n                        class=\"inline-block\"\n                        text=${this.__postResponse.refresh_token}\n                      >\n                      </foxy-copy-to-clipboard>\n                    </div>\n                  </td>\n                </tr>\n\n                <tr class=\"font-semibold text-success\">\n                  <td class=\"max-w-0 truncate py-s w-1-3 pr-m font-semibold\">Access token</td>\n                  <td class=\"max-w-0 py-s w-2-3\">\n                    <div class=\"flex items-center gap-s\">\n                      <code class=\"truncate flex-1\">${this.__postResponse.access_token}</code>\n                      <foxy-copy-to-clipboard\n                        infer=\"copy-to-clipboard\"\n                        class=\"inline-block\"\n                        text=${this.__postResponse.access_token}\n                      >\n                      </foxy-copy-to-clipboard>\n                    </div>\n                  </td>\n                </tr>\n              `\n            : ''}\n\n          <tr>\n            <td class=\"max-w-0 truncate py-s text-secondary w-1-3 pr-m font-semibold\">Scope</td>\n            <td class=\"max-w-0 truncate py-s text-body w-2-3\"><code>${data.scope}</code></td>\n          </tr>\n        </tbody>\n      </table>\n\n      <foxy-internal-delete-control infer=\"delete\"></foxy-internal-delete-control>\n    `;\n  }\n\n  private __renderTemplateBody() {\n    return html`\n      <foxy-internal-text-control infer=\"project-name\"></foxy-internal-text-control>\n\n      <foxy-internal-text-area-control infer=\"project-description\">\n      </foxy-internal-text-area-control>\n\n      <foxy-internal-create-control infer=\"create\"></foxy-internal-create-control>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"IntegrationForm.js","sourceRoot":"","sources":["../../../../src/elements/public/IntegrationForm/IntegrationForm.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,kBAAkB,CAAC;AAC9B,MAAM,IAAI,GAAG,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,OAAO,eAAgB,SAAQ,IAAU;IAA/C;;QAYU,mBAAc,GAA4B,IAAI,CAAC;IAiLzD,CAAC;IA5LC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,cAAc,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SACrC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,GAAG;QACZ,OAAO,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,2BAA2B,CAAC,CAAC;IACvE,CAAC;IAID,UAAU;QACR,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC/E,CAAC;IAES,KAAK,CAAC,MAAM,CAAiB,GAAG,IAAiC;;QACzE,MAAM,WAAW,GAAG,IAAI,CAAC,WAAqC,CAAC;QAC/D,MAAM,QAAQ,GAAG,MAAM,IAAI,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;QAChE,MAAM,MAAM,GAAG,OAAO,IAAI,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,OAAC,IAAI,CAAC,CAAC,CAAC,0CAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;QAC9E,MAAM,GAAG,GAAG,OAAO,IAAI,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;QAEhE,IAAI,CAAC,QAAQ,CAAC,EAAE;YAAE,MAAM,QAAQ,CAAC;QAEjC,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QACnC,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,QAAO,MAAM,IAAI,GAAG,KAAK,IAAI,CAAC,MAAM;YAAE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAExF,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,oBAAoB;QAC1B,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;QAC3C,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC;QAEzC,OAAO,IAAI,CAAA;QACP,cAAc,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE;QACnE,cAAc,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE;QACtF,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE;;KAE9D,CAAC;IACJ,CAAC;IAEO,oBAAoB;QAC1B,OAAO,IAAI,CAAA;;;;;KAKV,CAAC;IACJ,CAAC;IAEO,eAAe;QACrB,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC;;;;;;;;sBAQ7B,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC;mBACjD,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;;;;;;QAM7C,IAAI,CAAC,oBAAoB,CAAC,eAAe,CAAC;KAC7C,CAAC;IACJ,CAAC;IAEO,cAAc;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAY,CAAC;QAC/B,MAAM,aAAa,GAAG,IAAI,CAAA,6DAA6D,CAAC;QAExF,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,oBAAoB,CAAC,eAAe,CAAC;;;kDAGA,IAAI,CAAC,YAAY;sCAC7B,IAAI,CAAC,mBAAmB,IAAI,aAAa;;;QAGvE,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC;KAC5C,CAAC;IACJ,CAAC;IAEO,aAAa;;QACnB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAY,CAAC;QAC/B,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,OAAC,IAAI,CAAC,OAAO,mCAAI,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;QACrD,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC;QAEzC,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC;;;;YAIrC,IAAI,CAAC,gBAAgB,CAAC;YACtB,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC;YACzC,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,aAAa,CAAC;SACxE,CAAC;YACA,IAAI,CAAC,gBAAgB,CAAC;YACtB,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC;YACxC,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,YAAY,CAAC;SACtE,CAAC;YACA,IAAI,CAAC,gBAAgB,CAAC;YACtB,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC;YACxC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC;SAC9D,CAAC;YACA,IAAI,CAAC,gBAAgB,CAAC;YACtB,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC;YACxC,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;SACjE,CAAC;YACA,IAAI,CAAC,gBAAgB,CAAC;YACtB,KAAK,EAAE,WAAW;YAClB,KAAK,EAAE,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,SAAS,CAAC;SACjD,CAAC;YACA,YAAY;YACZ,CAAC,CAAC,IAAI,CAAA;kBACA,IAAI,CAAC,gBAAgB,CAAC;gBACtB,SAAS,EAAE,IAAI;gBACf,KAAK,EAAE,eAAe;gBACtB,KAAK,EAAE,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,aAAa,CAAC;aAC7D,CAAC;kBACA,IAAI,CAAC,gBAAgB,CAAC;gBACtB,SAAS,EAAE,IAAI;gBACf,KAAK,EAAE,eAAe;gBACtB,KAAK,EAAE,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,aAAa,CAAC;aAC7D,CAAC;kBACA,IAAI,CAAC,gBAAgB,CAAC;gBACtB,SAAS,EAAE,IAAI;gBACf,KAAK,EAAE,cAAc;gBACrB,KAAK,EAAE,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,YAAY,CAAC;aAC5D,CAAC;eACH;YACH,CAAC,CAAC,EAAE;YACJ,IAAI,CAAC,gBAAgB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,CAAA,SAAS,IAAI,CAAC,KAAK,SAAS,EAAE,CAAC;;;;QAItF,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;KAC3C,CAAC;IACJ,CAAC;IAEO,oBAAoB,CAAC,IAAY;QACvC,OAAO,IAAI,CAAA;;wCAEyB,IAAI;sFAC0C,IAAI;;;KAGrF,CAAC;IACJ,CAAC;IAEO,kBAAkB,CAAC,KAAa,EAAE,OAAe;QACvD,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAA,GAAG,OAAO,EAAE,CAAC;QACpC,OAAO,IAAI,CAAC,YAAY,CAAC,UAAU,KAAK,EAAE,EAAE,OAAO,CAAC,CAAC;IACvD,CAAC;IAEO,YAAY,CAAC,IAAY,EAAE,OAAe;QAChD,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAA,GAAG,OAAO,EAAE,CAAC;QAEnC,OAAO,IAAI,CAAA;;;;eAIA,IAAI;;UAET,OAAO;;KAEZ,CAAC;IACJ,CAAC;IAEO,gBAAgB,CAAC,MAA+D;QACtF,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,MAAM,CAAC;QACnD,OAAO,IAAI,CAAA;kBACG,QAAQ,CAAC,EAAE,4BAA4B,EAAE,SAAS,EAAE,CAAC;sEACD,KAAK;4DACf,KAAK;;KAE5D,CAAC;IACJ,CAAC;IAEO,iBAAiB,CAAC,GAAW,EAAE,OAAiB;QACtD,OAAO,IAAI,CAAA,gCAAgC,GAAG,aAAa,OAAO,eAAe,CAAC;IACpF,CAAC;CACF","sourcesContent":["import type { Data, PostResponseData } from './types';\nimport type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\nimport type { NucleonV8N } from '../NucleonElement/types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst NS = 'integration-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\n/**\n * Form element for managing integrations (`fx:integration`).\n *\n * @slot project-name:before\n * @slot project-name:after\n *\n * @slot project-description:before\n * @slot project-description:after\n *\n * @slot create:before\n * @slot create:after\n *\n * @slot header:before\n * @slot header:after\n *\n * @slot message:before\n * @slot message:after\n *\n * @slot table:before\n * @slot table:after\n *\n * @slot delete:before\n * @slot delete:after\n *\n * @element foxy-integration-form\n * @since 1.21.0\n */\nexport class IntegrationForm extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __postResponse: { attribute: false },\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [({ project_name: v }) => !!v || 'project-name:v8n_required'];\n  }\n\n  private __postResponse: PostResponseData | null = null;\n\n  renderBody(): TemplateResult {\n    return this.data ? this.__renderSnapshotBody() : this.__renderTemplateBody();\n  }\n\n  protected async _fetch<TResult = Data>(...args: Parameters<Window['fetch']>): Promise<TResult> {\n    const constructor = this.constructor as typeof IntegrationForm;\n    const response = await new constructor.API(this).fetch(...args);\n    const method = typeof args[0] === 'string' ? args[1]?.method : args[0].method;\n    const url = typeof args[0] === 'string' ? args[0] : args[0].url;\n\n    if (!response.ok) throw response;\n\n    const json = await response.json();\n    if (method?.toUpperCase() === 'POST' && url === this.parent) this.__postResponse = json;\n\n    return json;\n  }\n\n  private __renderSnapshotBody() {\n    const hiddenSelector = this.hiddenSelector;\n    const postResponse = this.__postResponse;\n\n    return html`\n      ${hiddenSelector.matches('header', true) ? '' : this.__renderHeader()}\n      ${hiddenSelector.matches('message', true) || !postResponse ? '' : this.__renderMessage()}\n      ${hiddenSelector.matches('table') ? '' : this.__renderTable()}\n      <foxy-internal-delete-control infer=\"delete\"></foxy-internal-delete-control>\n    `;\n  }\n\n  private __renderTemplateBody() {\n    return html`\n      <foxy-internal-text-control infer=\"project-name\"></foxy-internal-text-control>\n      <foxy-internal-text-area-control infer=\"project-description\">\n      </foxy-internal-text-area-control>\n      <foxy-internal-create-control infer=\"create\"></foxy-internal-create-control>\n    `;\n  }\n\n  private __renderMessage() {\n    return html`\n      ${this.renderTemplateOrSlot('message:before')}\n\n      <div class=\"bg-success-10 text-success p-m pb-s space-y-xs leading-s rounded-t-l rounded-b-l\">\n        <foxy-i18n infer=\"message\" class=\"block\" key=\"text\"></foxy-i18n>\n        <vaadin-button\n          data-testid=\"message-action\"\n          theme=\"tertiary contrast\"\n          class=\"p-0\"\n          ?disabled=${this.disabledSelector.matches('message', true)}\n          @click=${() => (this.__postResponse = null)}\n        >\n          <foxy-i18n infer=\"message\" key=\"action\"></foxy-i18n>\n        </vaadin-button>\n      </div>\n\n      ${this.renderTemplateOrSlot('message:after')}\n    `;\n  }\n\n  private __renderHeader() {\n    const data = this.data as Data;\n    const noDescription = html`<foxy-i18n infer=\"header\" key=\"no_description\"></foxy-i18n>`;\n\n    return html`\n      ${this.renderTemplateOrSlot('header:before')}\n\n      <div class=\"space-y-xs\">\n        <div class=\"font-bold truncate text-xl\">${data.project_name}&ZeroWidthSpace;</div>\n        <div class=\"text-secondary\">${data.project_description || noDescription}</div>\n      </div>\n\n      ${this.renderTemplateOrSlot('header:after')}\n    `;\n  }\n\n  private __renderTable() {\n    const data = this.data as Data;\n    const expires = new Date((data.expires ?? 0) * 1000);\n    const postResponse = this.__postResponse;\n\n    return html`\n      ${this.renderTemplateOrSlot('table:before')}\n\n      <table class=\"font-lumo text-m leading-m w-full\">\n        <tbody class=\"divide-y divide-contrast-10\">\n          ${this.__renderTableRow({\n            label: this.__renderTableI18n('added_by'),\n            value: this.__renderMailToLink(data.added_by_email, data.added_by_name),\n          })}\n          ${this.__renderTableRow({\n            label: this.__renderTableI18n('contact'),\n            value: this.__renderMailToLink(data.contact_email, data.contact_name),\n          })}\n          ${this.__renderTableRow({\n            label: this.__renderTableI18n('company'),\n            value: this.__renderLink(data.company_url, data.company_name),\n          })}\n          ${this.__renderTableRow({\n            label: this.__renderTableI18n('expires'),\n            value: this.__renderTableI18n('expires_date', { date: expires }),\n          })}\n          ${this.__renderTableRow({\n            label: 'Client ID',\n            value: this.__renderCopiableText(data.client_id),\n          })}\n          ${postResponse\n            ? html`\n                ${this.__renderTableRow({\n                  highlight: true,\n                  label: 'Client secret',\n                  value: this.__renderCopiableText(postResponse.client_secret),\n                })}\n                ${this.__renderTableRow({\n                  highlight: true,\n                  label: 'Refresh token',\n                  value: this.__renderCopiableText(postResponse.refresh_token),\n                })}\n                ${this.__renderTableRow({\n                  highlight: true,\n                  label: 'Access token',\n                  value: this.__renderCopiableText(postResponse.access_token),\n                })}\n              `\n            : ''}\n          ${this.__renderTableRow({ label: 'Scope', value: html`<code>${data.scope}</code>` })}\n        </tbody>\n      </table>\n\n      ${this.renderTemplateOrSlot('table:after')}\n    `;\n  }\n\n  private __renderCopiableText(text: string) {\n    return html`\n      <div class=\"flex items-center gap-s\">\n        <code class=\"truncate flex-1\">${text}</code>\n        <foxy-copy-to-clipboard infer=\"copy-to-clipboard\" class=\"inline-block\" text=${text}>\n        </foxy-copy-to-clipboard>\n      </div>\n    `;\n  }\n\n  private __renderMailToLink(email: string, caption: string) {\n    if (!email) return html`${caption}`;\n    return this.__renderLink(`mailto:${email}`, caption);\n  }\n\n  private __renderLink(href: string, caption: string) {\n    if (!href) return html`${caption}`;\n\n    return html`\n      <a\n        target=\"_blank\"\n        class=\"font-semibold text-primary rounded hover-underline focus-outline-none focus-ring-2 focus-ring-primary-50\"\n        href=${href}\n      >\n        ${caption}\n      </a>\n    `;\n  }\n\n  private __renderTableRow(params: { label: unknown; value: unknown; highlight?: boolean }) {\n    const { label, value, highlight = false } = params;\n    return html`\n      <tr class=${classMap({ 'font-semibold text-success': highlight })}>\n        <td class=\"max-w-0 truncate py-s text-secondary w-1-3 pr-m\">${label}</td>\n        <td class=\"max-w-0 truncate py-s text-body w-2-3\">${value}</td>\n      </tr>\n    `;\n  }\n\n  private __renderTableI18n(key: string, options?: unknown) {\n    return html`<foxy-i18n infer=\"table\" key=${key} .options=${options}></foxy-i18n>`;\n  }\n}\n"]}

package/dist/elements/public/IntegrationForm/index.d.ts

@@ -3,6 +3,7 @@ import '../../internal/InternalTextAreaControl/index';
 import '../../internal/InternalDeleteControl/index';
 import '../../internal/InternalCreateControl/index';
 import '../../internal/InternalTextControl/index';
+import '../../internal/InternalSandbox/index';
 import '../../internal/InternalForm/index';
 import '../CopyToClipboard/index';
 import '../I18n/index';

package/dist/elements/public/IntegrationForm/index.js

@@ -3,6 +3,7 @@ import "../../internal/InternalTextAreaControl/index.js";
 import "../../internal/InternalDeleteControl/index.js";
 import "../../internal/InternalCreateControl/index.js";
 import "../../internal/InternalTextControl/index.js";
+import "../../internal/InternalSandbox/index.js";
 import "../../internal/InternalForm/index.js";
 import "../CopyToClipboard/index.js";
 import "../I18n/index.js";

package/dist/elements/public/IntegrationForm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/IntegrationForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAE/B,yDAAsD;AACtD,uDAAoD;AACpD,uDAAoD;AACpD,qDAAkD;AAClD,8CAA2C;AAE3C,qCAAkC;AAClC,0BAAuB;AAEvB,OAAO,EAAE,eAAe,EAAE,6BAA0B;AAEpD,cAAc,CAAC,MAAM,CAAC,uBAAuB,EAAE,eAAe,CAAC,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-button';\n\nimport '../../internal/InternalTextAreaControl/index';\nimport '../../internal/InternalDeleteControl/index';\nimport '../../internal/InternalCreateControl/index';\nimport '../../internal/InternalTextControl/index';\nimport '../../internal/InternalForm/index';\n\nimport '../CopyToClipboard/index';\nimport '../I18n/index';\n\nimport { IntegrationForm } from './IntegrationForm';\n\ncustomElements.define('foxy-integration-form', IntegrationForm);\n\nexport { IntegrationForm };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/IntegrationForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAE/B,yDAAsD;AACtD,uDAAoD;AACpD,uDAAoD;AACpD,qDAAkD;AAClD,iDAA8C;AAC9C,8CAA2C;AAE3C,qCAAkC;AAClC,0BAAuB;AAEvB,OAAO,EAAE,eAAe,EAAE,6BAA0B;AAEpD,cAAc,CAAC,MAAM,CAAC,uBAAuB,EAAE,eAAe,CAAC,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-button';\n\nimport '../../internal/InternalTextAreaControl/index';\nimport '../../internal/InternalDeleteControl/index';\nimport '../../internal/InternalCreateControl/index';\nimport '../../internal/InternalTextControl/index';\nimport '../../internal/InternalSandbox/index';\nimport '../../internal/InternalForm/index';\n\nimport '../CopyToClipboard/index';\nimport '../I18n/index';\n\nimport { IntegrationForm } from './IntegrationForm';\n\ncustomElements.define('foxy-integration-form', IntegrationForm);\n\nexport { IntegrationForm };\n"]}

package/dist/elements/public/ItemCard/ItemCard.js

@@ -101,26 +101,25 @@ export class ItemCard extends Base {
       >
       </foxy-nucleon>
 
-      <div class="flex items-start space-x-m leading-m">
-        <div class="w-l h-l relative flex-shrink-0">
-          <img
-            class="relative w-full h-full object-cover rounded-s"
-            src=${ifDefined((_g = this.data) === null || _g === void 0 ? void 0 : _g.image)}
-            alt=""
-            @error=${(evt) => {
+      <div
+        class="flex items-start leading-xs"
+        style="gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+      >
+        <img
+          class="relative h-s w-s object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs"
+          src=${ifDefined((_g = this.data) === null || _g === void 0 ? void 0 : _g.image)}
+          alt=""
+          @error=${(evt) => {
             const img = evt.currentTarget;
             img.src = ItemCard.__placeholder;
         }}
-          />
-
-          <div class="border border-contrast-10 absolute inset-0 rounded-s"></div>
-        </div>
+        />
 
         <div class="flex-1 min-w-0">
-          <div class="flex-1 h-l flex items-center">
-            <div class="flex-1 leading-s">
+          <div class="flex-1 h-s flex items-center">
+            <div class="flex-1">
               <div class="font-semibold text-m truncate">${(_h = this.data) === null || _h === void 0 ? void 0 : _h.name}</div>
-              <div class="text-secondary text-m truncate">
+              <div class="text-tertiary text-s truncate">
                 ${quantity} &times;
 
                 <foxy-i18n
@@ -165,7 +164,7 @@ export class ItemCard extends Base {
                   ${options.map(option => html `
                       <div
                         data-testclass="option"
-                        class="flex items-center text-m space-x-xs leading-m"
+                        class="flex items-center text-s space-x-xs leading-m"
                       >
                         <div class="flex-1 text-tertiary truncate">
                           ${option.name}: ${option.value}