@foxy.io/elements 1.18.0-beta.15 → 1.18.0-beta.17

package/dist/elements/public/I18nEditor/internal/InternalI18nEditorEntry/InternalI18nEditorEntry.js

@@ -0,0 +1,169 @@
+import { ConfigurableMixin } from "../../../../../mixins/configurable.js";
+import { TranslatableMixin } from "../../../../../mixins/translatable.js";
+import { ResponsiveMixin } from "../../../../../mixins/responsive.js";
+import { ThemeableMixin } from "../../../../../mixins/themeable.js";
+import { NucleonElement } from "../../../NucleonElement/NucleonElement.js";
+import { html, css } from 'lit-element';
+import { classMap } from "../../../../../utils/class-map.js";
+const Base = ResponsiveMixin(TranslatableMixin(ConfigurableMixin(ThemeableMixin(NucleonElement))));
+export class InternalI18nEditorEntry extends Base {
+    constructor() {
+        super(...arguments);
+        this.defaultValue = null;
+        this.gateway = null;
+        this.code = null;
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            defaultValue: { attribute: 'default-value' },
+            gateway: {},
+            code: {},
+        };
+    }
+    static get styles() {
+        return [
+            super.styles,
+            css `:host{
+  --button-height:1.703rem;
+}
+
+textarea{
+  -webkit-text-fill-color:var(--lumo-body-text-color);
+}
+
+vaadin-button{
+  height:var(--button-height);
+  --lumo-primary-color-50pct:var(--lumo-success-contrast-color);
+}
+
+.h-bottom-bar{
+  height:calc(var(--button-height) + (var(--lumo-space-xs) * 2));
+}
+
+.h-0{
+  height:0;
+}
+      `,
+        ];
+    }
+    render() {
+        var _a, _b, _c;
+        const value = (_a = this.form.custom_value) !== null && _a !== void 0 ? _a : this.defaultValue;
+        const isSnapshot = this.in({ idle: 'snapshot' });
+        const isTemplate = this.in({ idle: 'template' });
+        const isSnapshotDirty = this.in({ idle: { snapshot: 'dirty' } });
+        const isTemplateDirty = this.in({ idle: { template: 'dirty' } });
+        const isDirty = isSnapshotDirty || isTemplateDirty;
+        const isDisabled = !this.in('idle') || this.disabled;
+        const isReadonly = this.readonly;
+        const isInteractive = !isDisabled && !isReadonly;
+        const isFailed = this.in('fail');
+        return html `
+      <div
+        class=${classMap({
+            'transition-all rounded ring-1 leading-s text-secondary': true,
+            'ring-contrast-10': !isFailed && (!isDirty || isReadonly),
+            'ring-success': !isFailed && isDirty && !isReadonly,
+            'ring-error': isFailed,
+            'opacity-75': isDisabled,
+            'hover-ring-contrast-20': !isFailed && !isDirty && isInteractive,
+            'hover-text-body': !isFailed && isInteractive,
+        })}
+      >
+        <label class="group flex flex-col sm-flex-row">
+          <div class="flex-1 p-xs break-all" style="max-width: 20rem">
+            <span class="inline-block rounded text-s p-xs font-semibold">
+              ${(_c = (_b = this.data) === null || _b === void 0 ? void 0 : _b.code) !== null && _c !== void 0 ? _c : this.code}
+            </span>
+          </div>
+
+          <div class="flex-1 flex">
+            <div class="relative flex-1">
+              <div class="opacity-0 text-s p-s font-semibold break-all">
+                <span class="whitespace-pre-wrap">${value}&ZeroWidthSpace;</span>
+              </div>
+
+              <textarea
+                class=${classMap({
+            'absolute inset-0 p-s resize-none': true,
+            'sm-border-l sm-border-transparent': true,
+            'break-all text-body transition-colors text-s font-semibold': true,
+            'rounded-b sm-rounded-bl-none sm-rounded-tr': isTemplate && !isDirty,
+            'rounded-bl sm-rounded-bl-none': isSnapshot && !isDirty,
+            'sm-rounded-tr': isTemplate && isDirty,
+            'sm-border-contrast-10': isReadonly,
+            'bg-contrast-10': !isReadonly,
+            'group-hover-bg-contrast-20': isInteractive,
+            'focus-outline-none focus-ring-2 focus-ring-inset focus-ring-primary-50': true,
+        })}
+                .value=${value}
+                ?disabled=${isDisabled}
+                ?readonly=${isReadonly}
+                @input=${(evt) => {
+            const textarea = evt.currentTarget;
+            if (this.gateway)
+                this.edit({ gateway: this.gateway });
+            if (this.code)
+                this.edit({ code: this.code });
+            this.edit({ custom_value: textarea.value });
+        }}
+              >
+              </textarea>
+            </div>
+
+            ${isSnapshot
+            ? html `
+                  <button
+                    class=${classMap({
+                'flex-shrink-0 w-m flex items-center justify-center': true,
+                'transition-colors text-tertiary ring-inset': true,
+                'rounded-br sm-rounded-tr': !isDirty,
+                'sm-rounded-tr': isDirty,
+                'bg-contrast-10': !isReadonly,
+                'cursor-default': !isInteractive,
+                'cursor-pointer': isInteractive,
+                'group-hover-bg-contrast-20 hover-text-body': isInteractive,
+                'focus-outline-none focus-ring-2 focus-ring-primary-50': true,
+            })}
+                    title=${this.t('delete_button_title')}
+                    theme="contrast icon"
+                    ?disabled=${isDisabled || isReadonly}
+                    @click=${() => this.delete()}
+                  >
+                    <iron-icon class="icon-inline text-xl" icon="icons:restore"></iron-icon>
+                  </button>
+                `
+            : ''}
+          </div>
+        </label>
+
+        <div
+          class=${classMap({
+            'transition-all bg-success rounded-b overflow-hidden': true,
+            'flex items-center justify-end gap-xs px-xs': true,
+            'h-bottom-bar': isDirty && !isReadonly,
+            'h-0': !isDirty || isReadonly,
+        })}
+        >
+          <vaadin-button
+            theme="primary success small"
+            ?disabled=${!isInteractive}
+            @click=${() => this.undo()}
+          >
+            <foxy-i18n infer="" key="undo_button"></foxy-i18n>
+          </vaadin-button>
+
+          <vaadin-button
+            theme="primary success small"
+            ?disabled=${!isInteractive}
+            @click=${() => this.submit()}
+          >
+            <foxy-i18n infer="" key="save_button"></foxy-i18n>
+          </vaadin-button>
+        </div>
+      </div>
+    `;
+    }
+}
+//# sourceMappingURL=InternalI18nEditorEntry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InternalI18nEditorEntry.js","sourceRoot":"","sources":["../../../../../../src/elements/public/I18nEditor/internal/InternalI18nEditorEntry/InternalI18nEditorEntry.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { Data } from './types';\n\nimport { ConfigurableMixin } from '../../../../../mixins/configurable';\nimport { TranslatableMixin } from '../../../../../mixins/translatable';\nimport { ResponsiveMixin } from '../../../../../mixins/responsive';\nimport { ThemeableMixin } from '../../../../../mixins/themeable';\nimport { NucleonElement } from '../../../NucleonElement/NucleonElement';\nimport { html, css } from 'lit-element';\nimport { classMap } from '../../../../../utils/class-map';\n\nconst Base = ResponsiveMixin(TranslatableMixin(ConfigurableMixin(ThemeableMixin(NucleonElement))));\n\nexport class InternalI18nEditorEntry extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      defaultValue: { attribute: 'default-value' },\n      gateway: {},\n      code: {},\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        :host {\n          --button-height: 1.703rem;\n        }\n\n        textarea {\n          -webkit-text-fill-color: var(--lumo-body-text-color);\n        }\n\n        vaadin-button {\n          height: var(--button-height);\n          --lumo-primary-color-50pct: var(--lumo-success-contrast-color);\n        }\n\n        .h-bottom-bar {\n          height: calc(var(--button-height) + (var(--lumo-space-xs) * 2));\n        }\n\n        .h-0 {\n          height: 0;\n        }\n      `,\n    ];\n  }\n\n  defaultValue: string | null = null;\n\n  gateway: string | null = null;\n\n  code: string | null = null;\n\n  render(): TemplateResult {\n    const value = this.form.custom_value ?? this.defaultValue;\n\n    const isSnapshot = this.in({ idle: 'snapshot' });\n    const isTemplate = this.in({ idle: 'template' });\n    const isSnapshotDirty = this.in({ idle: { snapshot: 'dirty' } });\n    const isTemplateDirty = this.in({ idle: { template: 'dirty' } });\n    const isDirty = isSnapshotDirty || isTemplateDirty;\n\n    const isDisabled = !this.in('idle') || this.disabled;\n    const isReadonly = this.readonly;\n    const isInteractive = !isDisabled && !isReadonly;\n    const isFailed = this.in('fail');\n\n    return html`\n      <div\n        class=${classMap({\n          'transition-all rounded ring-1 leading-s text-secondary': true,\n          'ring-contrast-10': !isFailed && (!isDirty || isReadonly),\n          'ring-success': !isFailed && isDirty && !isReadonly,\n          'ring-error': isFailed,\n          'opacity-75': isDisabled,\n          'hover-ring-contrast-20': !isFailed && !isDirty && isInteractive,\n          'hover-text-body': !isFailed && isInteractive,\n        })}\n      >\n        <label class=\"group flex flex-col sm-flex-row\">\n          <div class=\"flex-1 p-xs break-all\" style=\"max-width: 20rem\">\n            <span class=\"inline-block rounded text-s p-xs font-semibold\">\n              ${this.data?.code ?? this.code}\n            </span>\n          </div>\n\n          <div class=\"flex-1 flex\">\n            <div class=\"relative flex-1\">\n              <div class=\"opacity-0 text-s p-s font-semibold break-all\">\n                <span class=\"whitespace-pre-wrap\">${value}&ZeroWidthSpace;</span>\n              </div>\n\n              <textarea\n                class=${classMap({\n                  'absolute inset-0 p-s resize-none': true,\n                  'sm-border-l sm-border-transparent': true,\n                  'break-all text-body transition-colors text-s font-semibold': true,\n                  'rounded-b sm-rounded-bl-none sm-rounded-tr': isTemplate && !isDirty,\n                  'rounded-bl sm-rounded-bl-none': isSnapshot && !isDirty,\n                  'sm-rounded-tr': isTemplate && isDirty,\n                  'sm-border-contrast-10': isReadonly,\n                  'bg-contrast-10': !isReadonly,\n                  'group-hover-bg-contrast-20': isInteractive,\n                  'focus-outline-none focus-ring-2 focus-ring-inset focus-ring-primary-50': true,\n                })}\n                .value=${value}\n                ?disabled=${isDisabled}\n                ?readonly=${isReadonly}\n                @input=${(evt: InputEvent) => {\n                  const textarea = evt.currentTarget as HTMLTextAreaElement;\n\n                  if (this.gateway) this.edit({ gateway: this.gateway });\n                  if (this.code) this.edit({ code: this.code });\n                  this.edit({ custom_value: textarea.value });\n                }}\n              >\n              </textarea>\n            </div>\n\n            ${isSnapshot\n              ? html`\n                  <button\n                    class=${classMap({\n                      'flex-shrink-0 w-m flex items-center justify-center': true,\n                      'transition-colors text-tertiary ring-inset': true,\n                      'rounded-br sm-rounded-tr': !isDirty,\n                      'sm-rounded-tr': isDirty,\n                      'bg-contrast-10': !isReadonly,\n                      'cursor-default': !isInteractive,\n                      'cursor-pointer': isInteractive,\n                      'group-hover-bg-contrast-20 hover-text-body': isInteractive,\n                      'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n                    })}\n                    title=${this.t('delete_button_title')}\n                    theme=\"contrast icon\"\n                    ?disabled=${isDisabled || isReadonly}\n                    @click=${() => this.delete()}\n                  >\n                    <iron-icon class=\"icon-inline text-xl\" icon=\"icons:restore\"></iron-icon>\n                  </button>\n                `\n              : ''}\n          </div>\n        </label>\n\n        <div\n          class=${classMap({\n            'transition-all bg-success rounded-b overflow-hidden': true,\n            'flex items-center justify-end gap-xs px-xs': true,\n            'h-bottom-bar': isDirty && !isReadonly,\n            'h-0': !isDirty || isReadonly,\n          })}\n        >\n          <vaadin-button\n            theme=\"primary success small\"\n            ?disabled=${!isInteractive}\n            @click=${() => this.undo()}\n          >\n            <foxy-i18n infer=\"\" key=\"undo_button\"></foxy-i18n>\n          </vaadin-button>\n\n          <vaadin-button\n            theme=\"primary success small\"\n            ?disabled=${!isInteractive}\n            @click=${() => this.submit()}\n          >\n            <foxy-i18n infer=\"\" key=\"save_button\"></foxy-i18n>\n          </vaadin-button>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/elements/public/I18nEditor/internal/InternalI18nEditorEntry/index.d.ts

@@ -0,0 +1,6 @@
+import '@vaadin/vaadin-button';
+import '@polymer/iron-icons';
+import '@polymer/iron-icon';
+import '../../../I18n/index';
+import { InternalI18nEditorEntry } from './InternalI18nEditorEntry';
+export { InternalI18nEditorEntry };

package/dist/elements/public/I18nEditor/internal/InternalI18nEditorEntry/index.js

@@ -0,0 +1,8 @@
+import '@vaadin/vaadin-button';
+import '@polymer/iron-icons';
+import '@polymer/iron-icon';
+import "../../../I18n/index.js";
+import { InternalI18nEditorEntry } from "./InternalI18nEditorEntry.js";
+customElements.define('foxy-internal-i18n-editor-entry', InternalI18nEditorEntry);
+export { InternalI18nEditorEntry };
+//# sourceMappingURL=index.js.map

package/dist/elements/public/I18nEditor/internal/InternalI18nEditorEntry/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/public/I18nEditor/internal/InternalI18nEditorEntry/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAE5B,gCAA6B;AAE7B,OAAO,EAAE,uBAAuB,EAAE,qCAAkC;AAEpE,cAAc,CAAC,MAAM,CAAC,iCAAiC,EAAE,uBAAuB,CAAC,CAAC;AAElF,OAAO,EAAE,uBAAuB,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-button';\nimport '@polymer/iron-icons';\nimport '@polymer/iron-icon';\n\nimport '../../../I18n/index';\n\nimport { InternalI18nEditorEntry } from './InternalI18nEditorEntry';\n\ncustomElements.define('foxy-internal-i18n-editor-entry', InternalI18nEditorEntry);\n\nexport { InternalI18nEditorEntry };\n"]}

package/dist/elements/public/I18nEditor/internal/InternalI18nEditorEntry/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.LanguageOverride>;

package/dist/elements/public/I18nEditor/internal/InternalI18nEditorEntry/types.js

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

package/dist/elements/public/I18nEditor/internal/InternalI18nEditorEntry/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../src/elements/public/I18nEditor/internal/InternalI18nEditorEntry/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.LanguageOverride>;\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/I18nEditor/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.LanguageStrings>;\nexport type Overrides = Resource<Rels.LanguageOverrides>;\n"]}

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

@@ -0,0 +1,10 @@
+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;
+};
+export declare class IntegrationCard extends Base<Data> {
+    renderBody(): TemplateResult;
+}
+export {};

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

@@ -0,0 +1,49 @@
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { InternalCard } from "../../internal/InternalCard/InternalCard.js";
+import { html } from 'lit-html';
+const NS = 'integration-card';
+const Base = TranslatableMixin(InternalCard, NS);
+export class IntegrationCard extends Base {
+    renderBody() {
+        var _a, _b;
+        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();
+        const description = ((_b = data === null || data === void 0 ? void 0 : data.project_description) === null || _b === void 0 ? void 0 : _b.trim()) || this.t('no_description');
+        return html `
+      <dl class="flex flex-wrap gap-xs leading-s">
+        <div class="min-w-full">
+          <div class="flex justify-between gap-s">
+            <dt class="sr-only">${this.t('title_description')}</dt>
+            <dd class="font-semibold truncate min-w-0">${data === null || data === void 0 ? void 0 : data.project_name}&ZeroWidthSpace;</dd>
+
+            <dt class="sr-only">${this.t('status_description')}</dt>
+            <dd class="whitespace-nowrap font-tnum">
+              <foxy-i18n
+                class=${isActive ? 'text-tertiary' : 'text-error'}
+                infer=""
+                key="status_${isActive ? 'active' : 'expired'}"
+                .options=${{ date: expires, month: 'short', day: '2-digit' }}
+              >
+              </foxy-i18n>
+            </dd>
+          </div>
+
+          <dt class="sr-only">${this.t('subtitle_description')}</dt>
+          <dd class="text-secondary">${description}&ZeroWidthSpace;</dd>
+        </div>
+
+        <div class="text-secondary text-xs bg-contrast-5 rounded overflow-hidden flex">
+          <dt class="font-semibold px-xs bg-contrast-5" lang="en">ID</dt>
+          <dd class="px-xs"><code>${data === null || data === void 0 ? void 0 : data.client_id}</code>&ZeroWidthSpace;</dd>
+        </div>
+
+        <div class="text-secondary text-xs bg-contrast-5 rounded overflow-hidden flex">
+          <dt class="font-semibold px-xs bg-contrast-5" lang="en">Scope</dt>
+          <dd class="px-xs"><code>${data === null || data === void 0 ? void 0 : data.scope}</code>&ZeroWidthSpace;</dd>
+        </div>
+      </dl>
+    `;
+    }
+}
+//# 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,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,kBAAkB,CAAC;AAC9B,MAAM,IAAI,GAAG,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;AAEjD,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;QACtC,MAAM,WAAW,GAAG,OAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,mBAAmB,0CAAE,IAAI,OAAM,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC;QAElF,OAAO,IAAI,CAAA;;;;kCAImB,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC;yDACJ,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY;;kCAEzC,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC;;;wBAGtC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY;;8BAEnC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;2BAClC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE;;;;;;gCAM5C,IAAI,CAAC,CAAC,CAAC,sBAAsB,CAAC;uCACvB,WAAW;;;;;oCAKd,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS;;;;;oCAKf,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK;;;KAG1C,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 { html } from 'lit-html';\n\nconst NS = 'integration-card';\nconst Base = TranslatableMixin(InternalCard, NS);\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    const description = data?.project_description?.trim() || this.t('no_description');\n\n    return html`\n      <dl class=\"flex flex-wrap gap-xs leading-s\">\n        <div class=\"min-w-full\">\n          <div class=\"flex justify-between gap-s\">\n            <dt class=\"sr-only\">${this.t('title_description')}</dt>\n            <dd class=\"font-semibold truncate min-w-0\">${data?.project_name}&ZeroWidthSpace;</dd>\n\n            <dt class=\"sr-only\">${this.t('status_description')}</dt>\n            <dd class=\"whitespace-nowrap font-tnum\">\n              <foxy-i18n\n                class=${isActive ? 'text-tertiary' : 'text-error'}\n                infer=\"\"\n                key=\"status_${isActive ? 'active' : 'expired'}\"\n                .options=${{ date: expires, month: 'short', day: '2-digit' }}\n              >\n              </foxy-i18n>\n            </dd>\n          </div>\n\n          <dt class=\"sr-only\">${this.t('subtitle_description')}</dt>\n          <dd class=\"text-secondary\">${description}&ZeroWidthSpace;</dd>\n        </div>\n\n        <div class=\"text-secondary text-xs bg-contrast-5 rounded overflow-hidden flex\">\n          <dt class=\"font-semibold px-xs bg-contrast-5\" lang=\"en\">ID</dt>\n          <dd class=\"px-xs\"><code>${data?.client_id}</code>&ZeroWidthSpace;</dd>\n        </div>\n\n        <div class=\"text-secondary text-xs bg-contrast-5 rounded overflow-hidden flex\">\n          <dt class=\"font-semibold px-xs bg-contrast-5\" lang=\"en\">Scope</dt>\n          <dd class=\"px-xs\"><code>${data?.scope}</code>&ZeroWidthSpace;</dd>\n        </div>\n      </dl>\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,18 @@
+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;
+};
+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;
+}
+export {};

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

@@ -0,0 +1,220 @@
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
+import { html } from 'lit-html';
+const NS = 'integration-form';
+const Base = TranslatableMixin(InternalForm, NS);
+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() {
+        var _a, _b;
+        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');
+        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>
+
+        <dt class="sr-only">${this.t('subtitle_description')}</dt>
+        <dd class="text-secondary">${description}&ZeroWidthSpace;</dd>
+      </dl>
+
+      ${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>
+          `
+            : ''}
+
+      <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
+            ? 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>
+              `
+            : ''}
+
+          <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>
+        </tbody>
+      </table>
+
+      <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>
+    `;
+    }
+}
+//# 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":"AAKA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,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,MAAM,OAAO,eAAgB,SAAQ,IAAU;IAA/C;;QAYU,mBAAc,GAA4B,IAAI,CAAC;IA4MzD,CAAC;IAvNC,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,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,WAAW,GAAG,OAAA,IAAI,CAAC,mBAAmB,0CAAE,IAAI,OAAM,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC;QAEjF,OAAO,IAAI,CAAA;;8BAEe,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC;iDACR,IAAI,CAAC,YAAY;;8BAEpC,IAAI,CAAC,CAAC,CAAC,sBAAsB,CAAC;qCACvB,WAAW;;;QAGxC,IAAI,CAAC,cAAc;YACnB,CAAC,CAAC,IAAI,CAAA;;;;;;;;yBAQW,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;;;;;WAKhD;YACH,CAAC,CAAC,EAAE;;;;;;;;;gBASI,IAAI,CAAC,cAAc;YACnB,CAAC,CAAC,IAAI,CAAA;;;;qCAIe,IAAI,CAAC,cAAc;;wBAEhC,IAAI,CAAC,aAAa;;mBAEvB;YACH,CAAC,CAAC,IAAI,CAAC,aAAa;;;;;;;;;gBASpB,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAA;;;;qCAIe,IAAI,CAAC,aAAa;;wBAE/B,IAAI,CAAC,YAAY;;mBAEtB;YACH,CAAC,CAAC,IAAI,CAAC,YAAY;;;;;;;;;gBASnB,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA;;;;6BAIO,IAAI,CAAC,WAAW;;wBAErB,IAAI,CAAC,YAAY;;mBAEtB;YACH,CAAC,CAAC,IAAI,CAAC,YAAY;;;;;;;;;gEAS6B,EAAE,IAAI,EAAE,OAAO,EAAE;;;;;;;;gDAQjC,IAAI,CAAC,SAAS;;;;yBAIrC,IAAI,CAAC,SAAS;;;;;;;YAO3B,IAAI,CAAC,cAAc;YACnB,CAAC,CAAC,IAAI,CAAA;;;;;sDAKoC,IAAI,CAAC,cAAc,CAAC,aAAa;;;;+BAIxD,IAAI,CAAC,cAAc,CAAC,aAAa;;;;;;;;;;;sDAWV,IAAI,CAAC,cAAc,CAAC,aAAa;;;;+BAIxD,IAAI,CAAC,cAAc,CAAC,aAAa;;;;;;;;;;;sDAWV,IAAI,CAAC,cAAc,CAAC,YAAY;;;;+BAIvD,IAAI,CAAC,cAAc,CAAC,YAAY;;;;;;eAMhD;YACH,CAAC,CAAC,EAAE;;;;sEAIsD,IAAI,CAAC,KAAK;;;;;;KAM3E,CAAC;IACJ,CAAC;IAEO,oBAAoB;QAC1B,OAAO,IAAI,CAAA;;;;;;;KAOV,CAAC;IACJ,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 { 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"]}

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

@@ -0,0 +1,10 @@
+import '@vaadin/vaadin-button';
+import '../../internal/InternalTextAreaControl/index';
+import '../../internal/InternalDeleteControl/index';
+import '../../internal/InternalCreateControl/index';
+import '../../internal/InternalTextControl/index';
+import '../../internal/InternalForm/index';
+import '../CopyToClipboard/index';
+import '../I18n/index';
+import { IntegrationForm } from './IntegrationForm';
+export { IntegrationForm };