@foxy.io/elements 1.20.2 → 1.21.0-beta.1

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

@@ -0,0 +1,16 @@
+import type { TemplateResult } from 'lit-html';
+import type { Data } from './types';
+import { InternalCard } from '../../internal/InternalCard/InternalCard';
+declare const Base: typeof InternalCard & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+};
+/**
+ * Card element representing an integration (`fx:integration`).
+ *
+ * @element foxy-integration-card
+ * @since 1.21.0
+ */
+export declare class IntegrationCard extends Base<Data> {
+    renderBody(): TemplateResult;
+}
+export {};

package/dist/elements/public/IntegrationCard/IntegrationCard.js

@@ -0,0 +1,59 @@
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { InternalCard } from "../../internal/InternalCard/InternalCard.js";
+import { classMap } from "../../../utils/class-map.js";
+import { html } from 'lit-html';
+const NS = 'integration-card';
+const Base = TranslatableMixin(InternalCard, NS);
+/**
+ * Card element representing an integration (`fx:integration`).
+ *
+ * @element foxy-integration-card
+ * @since 1.21.0
+ */
+export class IntegrationCard extends Base {
+    renderBody() {
+        var _a;
+        const data = this.data;
+        const expires = new Date(((_a = data === null || data === void 0 ? void 0 : data.expires) !== null && _a !== void 0 ? _a : 0) * 1000);
+        const isActive = expires > new Date();
+        return html `
+      <div class="flex flex-wrap gap-xs leading-s">
+        <div class="min-w-full">
+          <div class="flex justify-between gap-s">
+            <span class="font-semibold truncate min-w-0">
+              ${data === null || data === void 0 ? void 0 : data.project_name}&ZeroWidthSpace;
+            </span>
+
+            <foxy-i18n
+              class=${classMap({
+            'whitespace-nowrap font-tnum text-s': true,
+            'text-tertiary': isActive,
+            'text-error': !isActive,
+        })}
+              infer=""
+              key="status_${isActive ? 'active' : 'expired'}"
+              .options=${{ date: expires, month: 'short', day: '2-digit' }}
+            >
+            </foxy-i18n>
+          </div>
+
+          <div class="text-secondary text-s">
+            ${(data === null || data === void 0 ? void 0 : data.project_description) ? data.project_description
+            : html `<foxy-i18n infer="" key="no_description"></foxy-i18n>`}
+          </div>
+        </div>
+
+        <div class="text-secondary text-xs bg-contrast-5 rounded overflow-hidden flex">
+          <span class="font-semibold px-xs bg-contrast-5" lang="en">ID</span>
+          <span class="px-xs"><code>${data === null || data === void 0 ? void 0 : data.client_id}</code>&ZeroWidthSpace;</span>
+        </div>
+
+        <div class="text-secondary text-xs bg-contrast-5 rounded overflow-hidden flex">
+          <span class="font-semibold px-xs bg-contrast-5" lang="en">Email</span>
+          <span class="px-xs"><code>${data === null || data === void 0 ? void 0 : data.added_by_email}</code>&ZeroWidthSpace;</span>
+        </div>
+      </div>
+    `;
+    }
+}
+//# sourceMappingURL=IntegrationCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IntegrationCard.js","sourceRoot":"","sources":["../../../../src/elements/public/IntegrationCard/IntegrationCard.ts"],"names":[],"mappings":"AAGA,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;;;;;GAKG;AACH,MAAM,OAAO,eAAgB,SAAQ,IAAU;IAC7C,UAAU;;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,OAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,mCAAI,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;QACtD,MAAM,QAAQ,GAAG,OAAO,GAAG,IAAI,IAAI,EAAE,CAAC;QAEtC,OAAO,IAAI,CAAA;;;;;gBAKC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY;;;;sBAIZ,QAAQ,CAAC;YACf,oCAAoC,EAAE,IAAI;YAC1C,eAAe,EAAE,QAAQ;YACzB,YAAY,EAAE,CAAC,QAAQ;SACxB,CAAC;;4BAEY,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;yBAClC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE;;;;;;cAM5D,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,mBAAmB,EACzB,CAAC,CAAC,IAAI,CAAC,mBAAmB;YAC1B,CAAC,CAAC,IAAI,CAAA,uDAAuD;;;;;;sCAMrC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS;;;;;sCAKf,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,cAAc;;;KAGrD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst NS = 'integration-card';\nconst Base = TranslatableMixin(InternalCard, NS);\n\n/**\n * Card element representing an integration (`fx:integration`).\n *\n * @element foxy-integration-card\n * @since 1.21.0\n */\nexport class IntegrationCard extends Base<Data> {\n  renderBody(): TemplateResult {\n    const data = this.data;\n    const expires = new Date((data?.expires ?? 0) * 1000);\n    const isActive = expires > new Date();\n\n    return html`\n      <div class=\"flex flex-wrap gap-xs leading-s\">\n        <div class=\"min-w-full\">\n          <div class=\"flex justify-between gap-s\">\n            <span class=\"font-semibold truncate min-w-0\">\n              ${data?.project_name}&ZeroWidthSpace;\n            </span>\n\n            <foxy-i18n\n              class=${classMap({\n                'whitespace-nowrap font-tnum text-s': true,\n                'text-tertiary': isActive,\n                'text-error': !isActive,\n              })}\n              infer=\"\"\n              key=\"status_${isActive ? 'active' : 'expired'}\"\n              .options=${{ date: expires, month: 'short', day: '2-digit' }}\n            >\n            </foxy-i18n>\n          </div>\n\n          <div class=\"text-secondary text-s\">\n            ${data?.project_description\n              ? data.project_description\n              : html`<foxy-i18n infer=\"\" key=\"no_description\"></foxy-i18n>`}\n          </div>\n        </div>\n\n        <div class=\"text-secondary text-xs bg-contrast-5 rounded overflow-hidden flex\">\n          <span class=\"font-semibold px-xs bg-contrast-5\" lang=\"en\">ID</span>\n          <span class=\"px-xs\"><code>${data?.client_id}</code>&ZeroWidthSpace;</span>\n        </div>\n\n        <div class=\"text-secondary text-xs bg-contrast-5 rounded overflow-hidden flex\">\n          <span class=\"font-semibold px-xs bg-contrast-5\" lang=\"en\">Email</span>\n          <span class=\"px-xs\"><code>${data?.added_by_email}</code>&ZeroWidthSpace;</span>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,4 @@
+import '../../internal/InternalCard/index';
+import '../I18n/index';
+import { IntegrationCard } from './IntegrationCard';
+export { IntegrationCard };

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

@@ -0,0 +1,6 @@
+import "../../internal/InternalCard/index.js";
+import "../I18n/index.js";
+import { IntegrationCard } from "./IntegrationCard.js";
+customElements.define('foxy-integration-card', IntegrationCard);
+export { IntegrationCard };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/IntegrationCard/index.ts"],"names":[],"mappings":"AAAA,8CAA2C;AAE3C,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 '../../internal/InternalCard/index';\n\nimport '../I18n/index';\n\nimport { IntegrationCard } from './IntegrationCard';\n\ncustomElements.define('foxy-integration-card', IntegrationCard);\n\nexport { IntegrationCard };\n"]}

package/dist/elements/public/IntegrationCard/types.d.ts

@@ -0,0 +1,3 @@
+import type { Resource } from '@foxy.io/sdk/core';
+import type { Rels } from '@foxy.io/sdk/backend';
+export declare type Data = Resource<Rels.Integration>;

package/dist/elements/public/IntegrationCard/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/elements/public/IntegrationCard/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/IntegrationCard/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\nexport type Data = Resource<Rels.Integration>;\n"]}

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

@@ -0,0 +1,53 @@
+import type { Data } from './types';
+import type { PropertyDeclarations } from 'lit-element';
+import type { TemplateResult } from 'lit-html';
+import type { NucleonV8N } from '../NucleonElement/types';
+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>;
+    private __postResponse;
+    renderBody(): TemplateResult;
+    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

@@ -0,0 +1,212 @@
+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);
+        this.__postResponse = null;
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            __postResponse: { attribute: false },
+        };
+    }
+    static get v8n() {
+        return [({ project_name: v }) => !!v || 'project-name:v8n_required'];
+    }
+    renderBody() {
+        return this.data ? this.__renderSnapshotBody() : this.__renderTemplateBody();
+    }
+    async _fetch(...args) {
+        var _a;
+        const constructor = this.constructor;
+        const response = await new constructor.API(this).fetch(...args);
+        const method = typeof args[0] === 'string' ? (_a = args[1]) === null || _a === void 0 ? void 0 : _a.method : args[0].method;
+        const url = typeof args[0] === 'string' ? args[0] : args[0].url;
+        if (!response.ok)
+            throw response;
+        const json = await response.json();
+        if ((method === null || method === void 0 ? void 0 : method.toUpperCase()) === 'POST' && url === this.parent)
+            this.__postResponse = json;
+        return json;
+    }
+    __renderSnapshotBody() {
+        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 noDescription = html `<foxy-i18n infer="header" key="no_description"></foxy-i18n>`;
+        return html `
+      ${this.renderTemplateOrSlot('header:before')}
+
+      <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.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">
+          ${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 `
+                ${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),
+            })}
+              `
+            : ''}
+          ${this.__renderTableRow({ label: 'Scope', value: html `<code>${data.scope}</code>` })}
+        </tbody>
+      </table>
+
+      ${this.renderTemplateOrSlot('table:after')}
+    `;
+    }
+    __renderCopiableText(text) {
+        return html `
+      <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

@@ -0,0 +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 { 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

@@ -0,0 +1,11 @@
+import '@vaadin/vaadin-button';
+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';
+import { IntegrationForm } from './IntegrationForm';
+export { IntegrationForm };

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

@@ -0,0 +1,13 @@
+import '@vaadin/vaadin-button';
+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";
+import { IntegrationForm } from "./IntegrationForm.js";
+customElements.define('foxy-integration-form', IntegrationForm);
+export { IntegrationForm };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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,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/IntegrationForm/types.d.ts

@@ -0,0 +1,21 @@
+import type { Resource } from '@foxy.io/sdk/core';
+import type { Rels } from '@foxy.io/sdk/backend';
+interface PostResponseRel {
+    curie: 'fx:integration';
+    links: {
+        'self': PostResponseRel;
+        'fx:client': Rels.Client;
+        'fx:store': Rels.Store;
+        'fx:user': Rels.User;
+    };
+    props: {
+        client_id: string;
+        client_secret: string;
+        refresh_token: string;
+        access_token: string;
+        message: string;
+    };
+}
+export declare type Data = Resource<Rels.Integration>;
+export declare type PostResponseData = Resource<PostResponseRel>;
+export {};

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/IntegrationForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\ninterface PostResponseRel {\n  curie: 'fx:integration';\n\n  links: {\n    'self': PostResponseRel;\n    'fx:client': Rels.Client;\n    'fx:store': Rels.Store;\n    'fx:user': Rels.User;\n  };\n\n  props: {\n    client_id: string;\n    client_secret: string;\n    refresh_token: string;\n    access_token: string;\n    message: string;\n  };\n}\n\nexport type Data = Resource<Rels.Integration>;\nexport type PostResponseData = Resource<PostResponseRel>;\n"]}

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

@@ -1,6 +1,6 @@
 import type { PropertyDeclarations } from 'lit-element';
 import type { TemplateResult } from 'lit-html';
-import { Data } from './types';
+import type { Data } from './types';
 import { InternalCard } from '../../internal/InternalCard/InternalCard';
 declare const Base: typeof InternalCard & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
@@ -13,10 +13,32 @@ declare const Base: typeof InternalCard & import("lit-element").Constructor<impo
  */
 export declare class ItemCard extends Base<Data> {
     static get properties(): PropertyDeclarations;
+    localeCodes: string | null;
     private static readonly __placeholder;
-    __currencyDisplay: string;
-    __currency: string;
+    private readonly __transactionTemplateLoaderId;
+    private readonly __defaultTemplateSetLoaderId;
+    private readonly __localeCodesHelperLoaderId;
+    private readonly __transactionLoaderId;
+    private readonly __templateSetLoaderId;
+    private readonly __storeLoaderId;
+    private readonly __cartLoaderId;
     renderBody(): TemplateResult;
-    protected _sendGet(): Promise<Data>;
+    get isBodyReady(): boolean;
+    private get __transactionTemplateHref();
+    private get __defaultTemplateSetHref();
+    private get __localeCodesHelperHref();
+    private get __transactionHref();
+    private get __templateSetHref();
+    private get __storeHref();
+    private get __cartHref();
+    private get __transactionTemplate();
+    private get __defaultTemplateSet();
+    private get __localeCodesHelper();
+    private get __transaction();
+    private get __templateSet();
+    private get __store();
+    private get __cart();
+    private get __currencyDisplay();
+    private get __currencyCode();
 }
 export {};