@foxy.io/elements 1.15.0-beta.8 → 1.16.0-beta.10

package/dist/elements/public/ApiBrowser/internal/InternalApiBrowserResourceForm/InternalApiBrowserResourceForm.js

@@ -0,0 +1,285 @@
+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';
+import { css } from 'lit-element';
+const InvalidValueSymbol = Symbol();
+const ValidValueSymbol = Symbol();
+export class InternalApiBrowserResourceForm extends TranslatableMixin(InternalForm) {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            open: { type: Boolean },
+        };
+    }
+    static get styles() {
+        return [
+            ...super.styles,
+            css `.monospace{
+  font-family:monospace;
+}
+
+.resize-none{
+  resize:none;
+}
+
+.resource{
+  display:grid;
+  grid-template-columns:repeat(auto-fill, minmax(calc(18.75 * var(--lumo-space-m)), 1fr));
+  grid-gap:1px;
+}
+
+.resource > :first-child{
+  grid-column-start:1;
+  grid-column-end:-2;
+}
+
+textarea::selection{
+  background:var(--lumo-contrast-10pct);
+}
+      `,
+        ];
+    }
+    static get v8n() {
+        return [
+            ...super.v8n,
+            v => (typeof v[InvalidValueSymbol] === 'string' ? 'invalid_json' : true),
+        ];
+    }
+    renderBody() {
+        return html `
+      <details
+        class="select-none rounded-t-l rounded-b-l overflow-hidden border border-contrast-10"
+        ?open=${this.open}
+        @toggle=${(evt) => {
+            const details = evt.currentTarget;
+            this.open = details.open;
+        }}
+      >
+        <summary
+          class=${classMap({
+            'ring-inset ring-primary-50 rounded-t-l': true,
+            'focus-outline-none focus-ring-2': true,
+            'rounded-b-l': !this.open,
+        })}
+        >
+          <div
+            class="flex items-center space-x-s p-s pr-m transition-colors cursor-pointer bg-contrast-5 hover-bg-contrast-10"
+          >
+            <foxy-copy-to-clipboard infer="copy-to-clipboard" text=${this.href || this.parent}>
+            </foxy-copy-to-clipboard>
+
+            <span class="font-semibold truncate">${this.__renderTitle()}</span>
+            <span class="flex-1"></span>
+
+            ${this.in({ idle: { snapshot: 'dirty' } }) || this.in({ idle: 'template' })
+            ? html `
+                  <foxy-internal-create-control infer="create" theme="tertiary-inline success">
+                  </foxy-internal-create-control>
+                `
+            : ''}
+            ${this.in({ idle: { snapshot: 'dirty' } }) || this.in({ idle: { template: 'dirty' } })
+            ? html `
+                  <vaadin-button
+                    theme="tertiary-inline contrast"
+                    class="px-xs"
+                    @click=${() => this.undo()}
+                  >
+                    <foxy-i18n infer="" key="undo"></foxy-i18n>
+                  </vaadin-button>
+                `
+            : ''}
+            ${this.in({ idle: 'snapshot' })
+            ? html `
+                  <foxy-internal-delete-control infer="delete" theme="tertiary-inline error">
+                  </foxy-internal-delete-control>
+                `
+            : ''}
+          </div>
+        </summary>
+
+        ${this.open ? this.__renderForm() : ''}
+      </details>
+    `;
+    }
+    updated(changes) {
+        super.updated(changes);
+        this.__setTextAreaHeight();
+    }
+    async _fetch(...args) {
+        try {
+            const request = args[0] instanceof Request ? args[0] : new Request(...args);
+            if (request.method !== 'POST')
+                return await super._fetch(...args);
+            const body = this.form[ValidValueSymbol];
+            return await super._fetch(request.url, { method: 'POST', body });
+        }
+        catch (err) {
+            throw ['invalid_json'];
+        }
+    }
+    __setTextAreaHeight() {
+        const textarea = this.renderRoot.querySelector('textarea');
+        if (textarea) {
+            textarea.style.height = 'auto';
+            textarea.style.height = `${textarea.scrollHeight}px`;
+            textarea.style.overflowY = 'hidden';
+        }
+    }
+    __renderTitle() {
+        if (!this.href) {
+            return html `
+        <span class="text-tertiary">POST</span>
+        <span>${this.parent}</span>
+      `;
+        }
+        let pathname = '';
+        let identifier = '';
+        let search = '';
+        try {
+            const url = new URL(this.href);
+            pathname = url.pathname;
+            if (pathname.startsWith('/'))
+                pathname = pathname.substring(1);
+            const splitPathname = pathname.split('/');
+            pathname = splitPathname.slice(0, splitPathname.length - 1).join('/');
+            if (splitPathname.length > 1) {
+                pathname = `${pathname}/`;
+                identifier = splitPathname[splitPathname.length - 1];
+            }
+            search = url.search;
+        }
+        catch (_a) {
+            pathname = this.href;
+        }
+        return html `
+      ${[
+            html `<span>${pathname}</span>`,
+            html `<span class="text-primary">${identifier}</span>`,
+            html `<span class="text-tertiary">${search}</span>`,
+        ]}
+    `;
+    }
+    __renderForm() {
+        return html `
+      <div class="bg-base">
+        <div class="${this.data ? 'resource' : ''} border-t border-contrast-5 bg-contrast-10">
+          <div class="flex-1 flex bg-base">
+            <div class="monospace bg-contrast-5 leading-s text-s p-m text-tertiary text-right">
+              ${this.__formAsString.split('\n').map((_, index) => html `<div>${index + 1}</div>`)}
+            </div>
+
+            <textarea
+              class=${classMap({
+            'whitespace-pre leading-s text-s focus-outline-none': true,
+            'monospace resize-none p-m block w-full select-text': true,
+            'bg-error-10': this.errors.length > 0,
+            'bg-base': this.errors.length === 0,
+        })}
+              .value=${this.__formAsString}
+              @input=${(evt) => {
+            const textarea = evt.currentTarget;
+            this.__formAsString = textarea.value;
+        }}
+            >
+            </textarea>
+          </div>
+
+          ${this.data
+            ? html `
+                <div class="bg-base">
+                  <ul class="bg-contrast-5 p-xs h-full">
+                    ${this.__links.map(([curie, link]) => this.__renderLink(curie, link.href, link.title))}
+                  </ul>
+                </div>
+              `
+            : ''}
+        </div>
+      </div>
+    `;
+    }
+    get __links() {
+        var _a, _b;
+        const linksAsEntries = Object.entries((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links) !== null && _b !== void 0 ? _b : {});
+        const relevantLinks = linksAsEntries.filter(([curie, link]) => curie !== 'self' && !Array.isArray(link) && !link.templated);
+        try {
+            relevantLinks.sort(([curie1], [curie2]) => curie1.localeCompare(curie2, this.lang));
+        }
+        catch (_c) {
+            relevantLinks.sort(([curie1], [curie2]) => curie1.localeCompare(curie2));
+        }
+        return relevantLinks;
+    }
+    get __formAsString() {
+        const form = this.form;
+        const validValue = form[ValidValueSymbol];
+        const invalidValue = form[InvalidValueSymbol];
+        if (typeof invalidValue === 'string')
+            return invalidValue;
+        if (typeof validValue === 'string')
+            return validValue;
+        return JSON.stringify(form, (key, value) => (key.startsWith('_') ? undefined : value), 2);
+    }
+    set __formAsString(newValue) {
+        this.undo();
+        try {
+            const parsedNewValue = JSON.parse(newValue);
+            if (typeof parsedNewValue === 'object')
+                this.edit(parsedNewValue);
+            this.edit({ [ValidValueSymbol]: newValue });
+        }
+        catch (_a) {
+            this.edit({ [InvalidValueSymbol]: newValue });
+        }
+    }
+    __renderLink(curie, href, title) {
+        return html `
+      <li class="m-xs rounded overflow-hidden transition-colors hover-bg-contrast-5">
+        <foxy-swipe-actions>
+          <button
+            class=${classMap({
+            'rounded leading-none space-y-xs block text-left w-full py-s': true,
+            'ring-inset ring-primary-50': true,
+            'focus-outline-none focus-ring-2 ': true,
+        })}
+            @click=${() => {
+            const evt = new CustomEvent('navigate:get', { bubbles: true, detail: href });
+            this.dispatchEvent(evt);
+        }}
+          >
+            <div class="flex items-center">
+              <div class="flex-1 space-y-xs px-s min-w-0 text-s">
+                <div class="truncate font-semibold">${title || href}</div>
+                <div class="opacity-75 truncate">${curie}</div>
+              </div>
+
+              <iron-icon
+                class="icon-inline text-xl text-tertiary mr-s flex-shrink-0"
+                icon="icons:chevron-right"
+              >
+              </iron-icon>
+            </div>
+          </button>
+
+          <div slot="action" class="h-full flex">
+            <vaadin-button
+              theme="secondary success"
+              class="h-full rounded-none"
+              @click=${() => {
+            const evt = new CustomEvent('navigate:post', { bubbles: true, detail: href });
+            this.dispatchEvent(evt);
+        }}
+            >
+              POST
+            </vaadin-button>
+          </div>
+        </foxy-swipe-actions>
+      </li>
+    `;
+    }
+}
+//# sourceMappingURL=InternalApiBrowserResourceForm.js.map

package/dist/elements/public/ApiBrowser/internal/InternalApiBrowserResourceForm/InternalApiBrowserResourceForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InternalApiBrowserResourceForm.js","sourceRoot":"","sources":["../../../../../../src/elements/public/ApiBrowser/internal/InternalApiBrowserResourceForm/InternalApiBrowserResourceForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\nimport type { NucleonV8N } from '../../../NucleonElement/types';\nimport type { Data } from '../../types';\n\nimport { TranslatableMixin } from '../../../../../mixins/translatable';\nimport { InternalForm } from '../../../../internal/InternalForm/InternalForm';\nimport { classMap } from '../../../../../utils/class-map';\nimport { html } from 'lit-html';\nimport { css } from 'lit-element';\n\nconst InvalidValueSymbol = Symbol() as symbol;\nconst ValidValueSymbol = Symbol() as symbol;\n\nexport class InternalApiBrowserResourceForm extends TranslatableMixin(InternalForm)<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      open: { type: Boolean },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      ...super.styles,\n      css`\n        .monospace {\n          font-family: monospace;\n        }\n\n        .resize-none {\n          resize: none;\n        }\n\n        .resource {\n          display: grid;\n          grid-template-columns: repeat(auto-fill, minmax(calc(18.75 * var(--lumo-space-m)), 1fr));\n          grid-gap: 1px;\n        }\n\n        .resource > :first-child {\n          grid-column-start: 1;\n          grid-column-end: -2;\n        }\n\n        textarea::selection {\n          background: var(--lumo-contrast-10pct);\n        }\n      `,\n    ];\n  }\n\n  static get v8n(): NucleonV8N<any> {\n    return [\n      ...super.v8n,\n      v => (typeof (v as any)[InvalidValueSymbol] === 'string' ? 'invalid_json' : true),\n    ];\n  }\n\n  open = false;\n\n  renderBody(): TemplateResult {\n    return html`\n      <details\n        class=\"select-none rounded-t-l rounded-b-l overflow-hidden border border-contrast-10\"\n        ?open=${this.open}\n        @toggle=${(evt: Event) => {\n          const details = evt.currentTarget as HTMLDetailsElement;\n          this.open = details.open;\n        }}\n      >\n        <summary\n          class=${classMap({\n            'ring-inset ring-primary-50 rounded-t-l': true,\n            'focus-outline-none focus-ring-2': true,\n            'rounded-b-l': !this.open,\n          })}\n        >\n          <div\n            class=\"flex items-center space-x-s p-s pr-m transition-colors cursor-pointer bg-contrast-5 hover-bg-contrast-10\"\n          >\n            <foxy-copy-to-clipboard infer=\"copy-to-clipboard\" text=${this.href || this.parent}>\n            </foxy-copy-to-clipboard>\n\n            <span class=\"font-semibold truncate\">${this.__renderTitle()}</span>\n            <span class=\"flex-1\"></span>\n\n            ${this.in({ idle: { snapshot: 'dirty' } }) || this.in({ idle: 'template' })\n              ? html`\n                  <foxy-internal-create-control infer=\"create\" theme=\"tertiary-inline success\">\n                  </foxy-internal-create-control>\n                `\n              : ''}\n            ${this.in({ idle: { snapshot: 'dirty' } }) || this.in({ idle: { template: 'dirty' } })\n              ? html`\n                  <vaadin-button\n                    theme=\"tertiary-inline contrast\"\n                    class=\"px-xs\"\n                    @click=${() => this.undo()}\n                  >\n                    <foxy-i18n infer=\"\" key=\"undo\"></foxy-i18n>\n                  </vaadin-button>\n                `\n              : ''}\n            ${this.in({ idle: 'snapshot' })\n              ? html`\n                  <foxy-internal-delete-control infer=\"delete\" theme=\"tertiary-inline error\">\n                  </foxy-internal-delete-control>\n                `\n              : ''}\n          </div>\n        </summary>\n\n        ${this.open ? this.__renderForm() : ''}\n      </details>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    this.__setTextAreaHeight();\n  }\n\n  protected async _fetch<TResult = any>(...args: Parameters<Window['fetch']>): Promise<TResult> {\n    try {\n      const request = args[0] instanceof Request ? args[0] : new Request(...args);\n      if (request.method !== 'POST') return await super._fetch(...args);\n\n      const body = (this.form as any)[ValidValueSymbol];\n      return await super._fetch(request.url, { method: 'POST', body });\n    } catch (err) {\n      throw ['invalid_json'];\n    }\n  }\n\n  private __setTextAreaHeight() {\n    const textarea = this.renderRoot.querySelector<HTMLTextAreaElement>('textarea');\n\n    if (textarea) {\n      textarea.style.height = 'auto';\n      textarea.style.height = `${textarea.scrollHeight}px`;\n      textarea.style.overflowY = 'hidden';\n    }\n  }\n\n  private __renderTitle() {\n    if (!this.href) {\n      return html`\n        <span class=\"text-tertiary\">POST</span>\n        <span>${this.parent}</span>\n      `;\n    }\n\n    let pathname = '';\n    let identifier = '';\n    let search = '';\n\n    try {\n      const url = new URL(this.href);\n\n      pathname = url.pathname;\n      if (pathname.startsWith('/')) pathname = pathname.substring(1);\n\n      const splitPathname = pathname.split('/');\n      pathname = splitPathname.slice(0, splitPathname.length - 1).join('/');\n\n      if (splitPathname.length > 1) {\n        pathname = `${pathname}/`;\n        identifier = splitPathname[splitPathname.length - 1];\n      }\n\n      search = url.search;\n    } catch {\n      pathname = this.href;\n    }\n\n    return html`\n      ${[\n        html`<span>${pathname}</span>`,\n        html`<span class=\"text-primary\">${identifier}</span>`,\n        html`<span class=\"text-tertiary\">${search}</span>`,\n      ]}\n    `;\n  }\n\n  private __renderForm() {\n    return html`\n      <div class=\"bg-base\">\n        <div class=\"${this.data ? 'resource' : ''} border-t border-contrast-5 bg-contrast-10\">\n          <div class=\"flex-1 flex bg-base\">\n            <div class=\"monospace bg-contrast-5 leading-s text-s p-m text-tertiary text-right\">\n              ${this.__formAsString.split('\\n').map((_, index) => html`<div>${index + 1}</div>`)}\n            </div>\n\n            <textarea\n              class=${classMap({\n                'whitespace-pre leading-s text-s focus-outline-none': true,\n                'monospace resize-none p-m block w-full select-text': true,\n                'bg-error-10': this.errors.length > 0,\n                'bg-base': this.errors.length === 0,\n              })}\n              .value=${this.__formAsString}\n              @input=${(evt: InputEvent) => {\n                const textarea = evt.currentTarget as HTMLTextAreaElement;\n                this.__formAsString = textarea.value;\n              }}\n            >\n            </textarea>\n          </div>\n\n          ${this.data\n            ? html`\n                <div class=\"bg-base\">\n                  <ul class=\"bg-contrast-5 p-xs h-full\">\n                    ${this.__links.map(([curie, link]) =>\n                      this.__renderLink(curie, link.href, link.title)\n                    )}\n                  </ul>\n                </div>\n              `\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n\n  private get __links() {\n    const linksAsEntries = Object.entries(this.data?._links ?? {});\n    const relevantLinks = linksAsEntries.filter(\n      ([curie, link]) => curie !== 'self' && !Array.isArray(link) && !(link as any).templated\n    );\n\n    try {\n      relevantLinks.sort(([curie1], [curie2]) => curie1.localeCompare(curie2, this.lang));\n    } catch {\n      relevantLinks.sort(([curie1], [curie2]) => curie1.localeCompare(curie2));\n    }\n\n    return relevantLinks;\n  }\n\n  private get __formAsString() {\n    const form = this.form as any;\n    const validValue = form[ValidValueSymbol];\n    const invalidValue = form[InvalidValueSymbol];\n\n    if (typeof invalidValue === 'string') return invalidValue;\n    if (typeof validValue === 'string') return validValue;\n\n    return JSON.stringify(form, (key, value) => (key.startsWith('_') ? undefined : value), 2);\n  }\n\n  private set __formAsString(newValue: string) {\n    this.undo();\n\n    try {\n      const parsedNewValue = JSON.parse(newValue);\n      if (typeof parsedNewValue === 'object') this.edit(parsedNewValue);\n      this.edit({ [ValidValueSymbol]: newValue });\n    } catch {\n      this.edit({ [InvalidValueSymbol]: newValue });\n    }\n  }\n\n  private __renderLink(curie: string, href: string, title?: string) {\n    return html`\n      <li class=\"m-xs rounded overflow-hidden transition-colors hover-bg-contrast-5\">\n        <foxy-swipe-actions>\n          <button\n            class=${classMap({\n              'rounded leading-none space-y-xs block text-left w-full py-s': true,\n              'ring-inset ring-primary-50': true,\n              'focus-outline-none focus-ring-2 ': true,\n            })}\n            @click=${() => {\n              const evt = new CustomEvent('navigate:get', { bubbles: true, detail: href });\n              this.dispatchEvent(evt);\n            }}\n          >\n            <div class=\"flex items-center\">\n              <div class=\"flex-1 space-y-xs px-s min-w-0 text-s\">\n                <div class=\"truncate font-semibold\">${title || href}</div>\n                <div class=\"opacity-75 truncate\">${curie}</div>\n              </div>\n\n              <iron-icon\n                class=\"icon-inline text-xl text-tertiary mr-s flex-shrink-0\"\n                icon=\"icons:chevron-right\"\n              >\n              </iron-icon>\n            </div>\n          </button>\n\n          <div slot=\"action\" class=\"h-full flex\">\n            <vaadin-button\n              theme=\"secondary success\"\n              class=\"h-full rounded-none\"\n              @click=${() => {\n                const evt = new CustomEvent('navigate:post', { bubbles: true, detail: href });\n                this.dispatchEvent(evt);\n              }}\n            >\n              POST\n            </vaadin-button>\n          </div>\n        </foxy-swipe-actions>\n      </li>\n    `;\n  }\n}\n"]}

package/dist/elements/public/ApiBrowser/internal/InternalApiBrowserResourceForm/index.d.ts

@@ -0,0 +1,10 @@
+import '@vaadin/vaadin-button';
+import '@polymer/iron-icons';
+import '@polymer/iron-icon';
+import '../../../../internal/InternalDeleteControl/index';
+import '../../../../internal/InternalCreateControl/index';
+import '../../../../internal/InternalForm/index';
+import '../../../CopyToClipboard/index';
+import '../../../SwipeActions/index';
+import { InternalApiBrowserResourceForm as Form } from './InternalApiBrowserResourceForm';
+export { Form as InternalApiBrowserResourceForm };

package/dist/elements/public/ApiBrowser/internal/InternalApiBrowserResourceForm/index.js

@@ -0,0 +1,12 @@
+import '@vaadin/vaadin-button';
+import '@polymer/iron-icons';
+import '@polymer/iron-icon';
+import "../../../../internal/InternalDeleteControl/index.js";
+import "../../../../internal/InternalCreateControl/index.js";
+import "../../../../internal/InternalForm/index.js";
+import "../../../CopyToClipboard/index.js";
+import "../../../SwipeActions/index.js";
+import { InternalApiBrowserResourceForm as Form } from "./InternalApiBrowserResourceForm.js";
+customElements.define('foxy-internal-api-browser-resource-form', Form);
+export { Form as InternalApiBrowserResourceForm };
+//# sourceMappingURL=index.js.map

package/dist/elements/public/ApiBrowser/internal/InternalApiBrowserResourceForm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/public/ApiBrowser/internal/InternalApiBrowserResourceForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAE5B,6DAA0D;AAC1D,6DAA0D;AAC1D,oDAAiD;AACjD,2CAAwC;AACxC,wCAAqC;AAErC,OAAO,EAAE,8BAA8B,IAAI,IAAI,EAAE,4CAAyC;AAE1F,cAAc,CAAC,MAAM,CAAC,yCAAyC,EAAE,IAAI,CAAC,CAAC;AAEvE,OAAO,EAAE,IAAI,IAAI,8BAA8B,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-button';\nimport '@polymer/iron-icons';\nimport '@polymer/iron-icon';\n\nimport '../../../../internal/InternalDeleteControl/index';\nimport '../../../../internal/InternalCreateControl/index';\nimport '../../../../internal/InternalForm/index';\nimport '../../../CopyToClipboard/index';\nimport '../../../SwipeActions/index';\n\nimport { InternalApiBrowserResourceForm as Form } from './InternalApiBrowserResourceForm';\n\ncustomElements.define('foxy-internal-api-browser-resource-form', Form);\n\nexport { Form as InternalApiBrowserResourceForm };\n"]}

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

@@ -0,0 +1,10 @@
+export declare type Link = {
+    href: string;
+    title: string;
+    templated: boolean;
+};
+export declare type Data = {
+    _links: Record<PropertyKey, Link> & {
+        self: Link;
+    };
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/ApiBrowser/types.ts"],"names":[],"mappings":"","sourcesContent":["export type Link = { href: string; title: string; templated: boolean };\nexport type Data = { _links: Record<PropertyKey, Link> & { self: Link } };\n"]}

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

@@ -1,7 +1,7 @@
-import { Rels } from '@foxy.io/sdk/customer';
-import { Resource } from '@foxy.io/sdk/core';
-import { Renderer } from '../../../mixins/configurable';
 import { AttributeCard } from './AttributeCard';
+import { Rels } from '@foxy.io/sdk/backend';
+import { Renderer } from '../../../mixins/configurable';
+import { Resource } from '@foxy.io/sdk/core';
 export declare type Data = Resource<Rels.Attribute>;
 export declare type Templates = {
     'name:before'?: Renderer<AttributeCard>;

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/AttributeCard/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Rels } from '@foxy.io/sdk/customer';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { Renderer } from '../../../mixins/configurable';\nimport { AttributeCard } from './AttributeCard';\n\nexport type Data = Resource<Rels.Attribute>;\nexport type Templates = {\n  'name:before'?: Renderer<AttributeCard>;\n  'name:after'?: Renderer<AttributeCard>;\n  'value:before'?: Renderer<AttributeCard>;\n  'value:after'?: Renderer<AttributeCard>;\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/AttributeCard/types.ts"],"names":[],"mappings":"","sourcesContent":["import { AttributeCard } from './AttributeCard';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Renderer } from '../../../mixins/configurable';\nimport { Resource } from '@foxy.io/sdk/core';\n\nexport type Data = Resource<Rels.Attribute>;\nexport type Templates = {\n  'name:before'?: Renderer<AttributeCard>;\n  'name:after'?: Renderer<AttributeCard>;\n  'value:before'?: Renderer<AttributeCard>;\n  'value:after'?: Renderer<AttributeCard>;\n};\n"]}

package/dist/elements/public/AttributeForm/AttributeForm.js

@@ -196,6 +196,7 @@ export class AttributeForm extends Base {
         ];
     }
     render() {
+        var _a, _b;
         const { hiddenSelector, data, lang, ns } = this;
         const isBusy = this.in('busy');
         const isFail = this.in('fail');
@@ -236,7 +237,7 @@ export class AttributeForm extends Base {
             class="m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l"
             state=${isFail ? 'error' : isBusy ? 'busy' : 'empty'}
             lang=${lang}
-            ns=${ns}
+            ns="${ns} ${(_b = (_a = customElements.get('foxy-spinner')) === null || _a === void 0 ? void 0 : _a.defaultNS) !== null && _b !== void 0 ? _b : ''}"
           >
           </foxy-spinner>
         </div>

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

@@ -1 +1 @@
-{"version":3,"file":"AttributeForm.js","sourceRoot":"","sources":["../../../../src/elements/public/AttributeForm/AttributeForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Choice, Group, PropertyTable } from '../../private/index';\nimport { Data, Templates, TextFieldParams } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ChoiceChangeEvent } from '../../private/events';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { NucleonV8N } from '../NucleonElement/types';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport memoize from 'lodash-es/memoize';\n\nconst NS = 'attribute-form';\nconst Base = TranslatableMixin(\n  ConfigurableMixin(ThemeableMixin(ScopedElementsMixin(NucleonElement))),\n  NS\n);\n\n/**\n * Form element for creating or editing attributes.\n *\n * @slot name:before - **new in v1.4.0**\n * @slot name:after - **new in v1.4.0**\n * @slot value:before - **new in v1.4.0**\n * @slot value:after - **new in v1.4.0**\n * @slot visibility:before - **new in v1.4.0**\n * @slot visibility:after - **new in v1.4.0**\n * @slot timestamps:before - **new in v1.4.0**\n * @slot timestamps:after - **new in v1.4.0**\n * @slot create:before - **new in v1.4.0**\n * @slot create:after - **new in v1.4.0**\n * @slot delete:before - **new in v1.4.0**\n * @slot delete:after - **new in v1.4.0**\n *\n * @element foxy-attribute-form\n * @since 1.2.0\n */\nexport class AttributeForm extends Base<Data> {\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),\n      'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n      'vaadin-text-field': customElements.get('vaadin-text-field'),\n      'vaadin-text-area': customElements.get('vaadin-text-area'),\n      'x-property-table': PropertyTable,\n      'vaadin-button': customElements.get('vaadin-button'),\n      'x-choice': Choice,\n      'x-group': Group,\n      'foxy-i18n': customElements.get('foxy-i18n'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ value }) => (value && value.length > 0) || 'value_required',\n      ({ value }) => (value && value.length <= 1000) || 'value_too_long',\n      ({ name }) => (name && name.length > 0) || 'name_required',\n      ({ name }) => (name && name.length <= 500) || 'name_too_long',\n    ];\n  }\n\n  templates: Templates = {};\n\n  private static readonly __visibilityOptions = ['private', 'restricted', 'public'] as const;\n\n  private readonly __getValidator = memoize((prefix: string) => () => {\n    return !this.errors.some(err => err.startsWith(prefix));\n  });\n\n  private readonly __bindField = memoize((key: keyof Data) => {\n    return (evt: CustomEvent) => {\n      const target = evt.target as HTMLInputElement;\n      this.edit({ [key]: target.value });\n    };\n  });\n\n  private readonly __maybeRenderTextField = ({ field }: TextFieldParams) => {\n    const bsid = field.replace(/_/, '-');\n    if (this.hiddenSelector.matches(bsid)) return '';\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot(`${bsid}:before`)}\n\n        <vaadin-text-field\n          class=\"w-full\"\n          label=${this.t(field).toString()}\n          value=${ifDefined(this.form?.[field]?.toString())}\n          error-message=${this.__getErrorMessage(field)}\n          data-testid=${field}\n          .checkValidity=${this.__getValidator(field)}\n          ?disabled=${!this.in('idle') || this.disabledSelector.matches(bsid)}\n          ?readonly=${this.readonlySelector.matches(bsid)}\n          @input=${this.__bindField(field)}\n          @keydown=${this.__handleKeyDown}\n        >\n        </vaadin-text-field>\n\n        ${this.renderTemplateOrSlot(`${bsid}:after`)}\n      </div>\n    `;\n  };\n\n  private readonly __renderVisibility = () => {\n    const { disabledSelector, readonlySelector, form, lang, ns } = this;\n    const isBusyOrFailed = !this.in('idle');\n    const isDisabled = isBusyOrFailed || disabledSelector.matches('visibility', true);\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('visibility:before')}\n\n        <x-group frame>\n          <foxy-i18n\n            data-testid=\"visibility-label\"\n            class=${classMap({ 'text-disabled': isDisabled })}\n            lang=${lang}\n            slot=\"header\"\n            key=\"visibility\"\n            ns=${ns}\n          >\n          </foxy-i18n>\n\n          <x-choice\n            data-testid=\"visibility\"\n            lang=${lang}\n            ns=${AttributeForm.defaultNS}\n            .items=${AttributeForm.__visibilityOptions}\n            .value=${(form?.visibility ?? 'private') as any}\n            ?disabled=${isBusyOrFailed || disabledSelector.matches('visibility', true)}\n            ?readonly=${readonlySelector.matches('visibility', true)}\n            @change=${this.__handleChoiceChange}\n          >\n            <foxy-i18n slot=\"private-label\" lang=${lang} key=\"visibility_private\" ns=${ns}>\n            </foxy-i18n>\n\n            <foxy-i18n slot=\"restricted-label\" lang=${lang} key=\"visibility_restricted\" ns=${ns}>\n            </foxy-i18n>\n\n            <foxy-i18n ns=${ns} lang=${lang} slot=\"public-label\" key=\"visibility_public\">\n            </foxy-i18n>\n          </x-choice>\n        </x-group>\n\n        ${this.renderTemplateOrSlot('visibility:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderTimestamps = () => {\n    const items = (['date_modified', 'date_created'] as const).map(field => ({\n      name: this.t(field),\n      value: this.data?.[field]\n        ? this.t('date', { value: new Date(this.data[field] as string) })\n        : '',\n    }));\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('timestamps:before')}\n        <x-property-table .items=${items} data-testid=\"timestamps\"></x-property-table>\n        ${this.renderTemplateOrSlot('timestamps:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderDelete = () => {\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('delete:before')}\n\n        <vaadin-button\n          class=\"w-full\"\n          data-testid=\"delete\"\n          theme=\"error primary\"\n          ?disabled=${!this.in('idle') || this.disabledSelector.matches('delete', true)}\n          @click=${this.__handleDeleteClick}\n        >\n          <foxy-i18n ns=${this.ns} lang=${this.lang} key=\"delete\"></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('delete:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderCreate = () => {\n    const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n    const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n    const isValid = isTemplateValid || isSnapshotValid;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('create:before')}\n\n        <vaadin-button\n          data-testid=\"create\"\n          class=\"w-full\"\n          theme=\"success primary\"\n          ?disabled=${!this.in('idle') || !isValid || this.disabledSelector.matches('create', true)}\n          @click=${() => this.submit()}\n        >\n          <foxy-i18n ns=${this.ns} lang=${this.lang} key=\"create\"></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('create:after')}\n      </div>\n    `;\n  };\n\n  render(): TemplateResult {\n    const { hiddenSelector, data, lang, ns } = this;\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n\n    return html`\n      <foxy-internal-confirm-dialog\n        data-testid=\"confirm\"\n        message=\"delete_prompt\"\n        confirm=\"delete\"\n        cancel=\"cancel\"\n        header=\"delete\"\n        theme=\"primary error\"\n        lang=${lang}\n        ns=${ns}\n        id=\"confirm\"\n        @hide=${this.__handleConfirmHide}\n      >\n      </foxy-internal-confirm-dialog>\n\n      <div class=\"relative\" aria-busy=${this.in('busy')} aria-live=\"polite\">\n        <div class=\"grid grid-cols-1 gap-l\">\n          ${this.__maybeRenderTextField({ field: 'name' })}\n          ${this.__maybeRenderTextField({ field: 'value' })}\n          ${hiddenSelector.matches('visibility', true) ? '' : this.__renderVisibility()}\n          ${hiddenSelector.matches('timestamps', true) || !data ? '' : this.__renderTimestamps()}\n          ${hiddenSelector.matches('delete', true) || !data ? '' : this.__renderDelete()}\n          ${hiddenSelector.matches('create', true) || data ? '' : this.__renderCreate()}\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'transition duration-500 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !isBusy && !isFail,\n          })}\n        >\n          <foxy-spinner\n            layout=\"vertical\"\n            class=\"m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l\"\n            state=${isFail ? 'error' : isBusy ? 'busy' : 'empty'}\n            lang=${lang}\n            ns=${ns}\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.__bindField.cache.clear?.();\n    this.__getValidator.cache.clear?.();\n  }\n\n  private get __confirmDialog(): InternalConfirmDialog {\n    return this.renderRoot.querySelector('#confirm') as InternalConfirmDialog;\n  }\n\n  private __getErrorMessage(prefix: string) {\n    const error = this.errors.find(err => err.startsWith(prefix));\n    return error ? this.t(error.replace(prefix, 'v8n')).toString() : '';\n  }\n\n  private __handleKeyDown(evt: KeyboardEvent) {\n    if (evt.key === 'Enter') this.submit();\n  }\n\n  private __handleChoiceChange(evt: ChoiceChangeEvent) {\n    this.edit({ visibility: evt.detail as Data['visibility'] });\n  }\n\n  private __handleDeleteClick(evt: Event) {\n    this.__confirmDialog.show(evt.currentTarget as HTMLElement);\n  }\n\n  private __handleConfirmHide(evt: DialogHideEvent) {\n    if (!evt.detail.cancelled) this.delete();\n  }\n}\n"]}
+{"version":3,"file":"AttributeForm.js","sourceRoot":"","sources":["../../../../src/elements/public/AttributeForm/AttributeForm.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,+BAA4B;AAEnE,OAAO,EAAqB,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAClF,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhD,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AAGjE,OAAO,EAAE,cAAc,EAAE,4CAAyC;AAElE,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,OAAO,MAAM,mBAAmB,CAAC;AAExC,MAAM,EAAE,GAAG,gBAAgB,CAAC;AAC5B,MAAM,IAAI,GAAG,iBAAiB,CAC5B,iBAAiB,CAAC,cAAc,CAAC,mBAAmB,CAAC,cAAc,CAAC,CAAC,CAAC,EACtE,EAAE,CACH,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,OAAO,aAAc,SAAQ,IAAU;IAA7C;;QAyBE,cAAS,GAAc,EAAE,CAAC;QAIT,mBAAc,GAAG,OAAO,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,GAAG,EAAE;YACjE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;QAC1D,CAAC,CAAC,CAAC;QAEc,gBAAW,GAAG,OAAO,CAAC,CAAC,GAAe,EAAE,EAAE;YACzD,OAAO,CAAC,GAAgB,EAAE,EAAE;gBAC1B,MAAM,MAAM,GAAG,GAAG,CAAC,MAA0B,CAAC;gBAC9C,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;YACrC,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;QAEc,2BAAsB,GAAG,CAAC,EAAE,KAAK,EAAmB,EAAE,EAAE;;YACvE,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;YACrC,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC;gBAAE,OAAO,EAAE,CAAC;YAEjD,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,GAAG,IAAI,SAAS,CAAC;;;;kBAInC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE;kBACxB,SAAS,aAAC,IAAI,CAAC,IAAI,0CAAG,KAAK,2CAAG,QAAQ,GAAG;0BACjC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;wBAC/B,KAAK;2BACF,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;sBAC/B,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC;sBACvD,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC;mBACtC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;qBACrB,IAAI,CAAC,eAAe;;;;UAI/B,IAAI,CAAC,oBAAoB,CAAC,GAAG,IAAI,QAAQ,CAAC;;KAE/C,CAAC;QACJ,CAAC,CAAC;QAEe,uBAAkB,GAAG,GAAG,EAAE;;YACzC,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;YACpE,MAAM,cAAc,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;YACxC,MAAM,UAAU,GAAG,cAAc,IAAI,gBAAgB,CAAC,OAAO,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;YAElF,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,mBAAmB,CAAC;;;;;oBAKpC,QAAQ,CAAC,EAAE,eAAe,EAAE,UAAU,EAAE,CAAC;mBAC1C,IAAI;;;iBAGN,EAAE;;;;;;mBAMA,IAAI;iBACN,aAAa,CAAC,SAAS;qBACnB,aAAa,CAAC,mBAAmB;qBACjC,OAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,mCAAI,SAAS,CAAQ;wBACnC,cAAc,IAAI,gBAAgB,CAAC,OAAO,CAAC,YAAY,EAAE,IAAI,CAAC;wBAC9D,gBAAgB,CAAC,OAAO,CAAC,YAAY,EAAE,IAAI,CAAC;sBAC9C,IAAI,CAAC,oBAAoB;;mDAEI,IAAI,gCAAgC,EAAE;;;sDAGnC,IAAI,mCAAmC,EAAE;;;4BAGnE,EAAE,SAAS,IAAI;;;;;UAKjC,IAAI,CAAC,oBAAoB,CAAC,kBAAkB,CAAC;;KAElD,CAAC;QACJ,CAAC,CAAC;QAEe,uBAAkB,GAAG,GAAG,EAAE;YACzC,MAAM,KAAK,GAAI,CAAC,eAAe,EAAE,cAAc,CAAW,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;;gBAAC,OAAA,CAAC;oBACvE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;oBACnB,KAAK,EAAE,OAAA,IAAI,CAAC,IAAI,0CAAG,KAAK,GACtB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAW,CAAC,EAAE,CAAC;wBACjE,CAAC,CAAC,EAAE;iBACP,CAAC,CAAA;aAAA,CAAC,CAAC;YAEJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,mBAAmB,CAAC;mCACrB,KAAK;UAC9B,IAAI,CAAC,oBAAoB,CAAC,kBAAkB,CAAC;;KAElD,CAAC;QACJ,CAAC,CAAC;QAEe,mBAAc,GAAG,GAAG,EAAE;YACrC,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,eAAe,CAAC;;;;;;sBAM9B,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC;mBACpE,IAAI,CAAC,mBAAmB;;0BAEjB,IAAI,CAAC,EAAE,SAAS,IAAI,CAAC,IAAI;;;UAGzC,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC;;KAE9C,CAAC;QACJ,CAAC,CAAC;QAEe,mBAAc,GAAG,GAAG,EAAE;YACrC,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;YAC5E,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;YAC5E,MAAM,OAAO,GAAG,eAAe,IAAI,eAAe,CAAC;YAEnD,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,eAAe,CAAC;;;;;;sBAM9B,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC;mBAChF,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;;0BAEZ,IAAI,CAAC,EAAE,SAAS,IAAI,CAAC,IAAI;;;UAGzC,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC;;KAE9C,CAAC;QACJ,CAAC,CAAC;IAkFJ,CAAC;IA7PC,MAAM,KAAK,cAAc;QACvB,OAAO;YACL,8BAA8B,EAAE,cAAc,CAAC,GAAG,CAAC,8BAA8B,CAAC;YAClF,uBAAuB,EAAE,cAAc,CAAC,GAAG,CAAC,uBAAuB,CAAC;YACpE,mBAAmB,EAAE,cAAc,CAAC,GAAG,CAAC,mBAAmB,CAAC;YAC5D,kBAAkB,EAAE,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC;YAC1D,kBAAkB,EAAE,aAAa;YACjC,eAAe,EAAE,cAAc,CAAC,GAAG,CAAC,eAAe,CAAC;YACpD,UAAU,EAAE,MAAM;YAClB,SAAS,EAAE,KAAK;YAChB,WAAW,EAAE,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC;YAC5C,cAAc,EAAE,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC;SACnD,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,GAAG;QACZ,OAAO;YACL,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,gBAAgB;YAC9D,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,gBAAgB;YAClE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,eAAe;YAC1D,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,GAAG,CAAC,IAAI,eAAe;SAC9D,CAAC;IACJ,CAAC;IAuJD,MAAM;;QACJ,MAAM,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;QAChD,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;QAC/B,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;QAE/B,OAAO,IAAI,CAAA;;;;;;;;eAQA,IAAI;aACN,EAAE;;gBAEC,IAAI,CAAC,mBAAmB;;;;wCAIA,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;YAE3C,IAAI,CAAC,sBAAsB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;YAC9C,IAAI,CAAC,sBAAsB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;YAC/C,cAAc,CAAC,OAAO,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE;YAC3E,cAAc,CAAC,OAAO,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE;YACpF,cAAc,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE;YAC5E,cAAc,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE;;;;;kBAKrE,QAAQ,CAAC;YACf,2DAA2D,EAAE,IAAI;YACjE,+BAA+B,EAAE,CAAC,MAAM,IAAI,CAAC,MAAM;SACpD,CAAC;;;;;oBAKQ,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;mBAC7C,IAAI;kBACL,EAAE,IAAI,YAAA,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,0CAAE,SAAS,mCAAI,EAAE;;;;;KAKtE,CAAC;IACJ,CAAC;IAED,oBAAoB;;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,MAAA,MAAA,IAAI,CAAC,WAAW,CAAC,KAAK,EAAC,KAAK,mDAAK;QACjC,MAAA,MAAA,IAAI,CAAC,cAAc,CAAC,KAAK,EAAC,KAAK,mDAAK;IACtC,CAAC;IAED,IAAY,eAAe;QACzB,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAA0B,CAAC;IAC5E,CAAC;IAEO,iBAAiB,CAAC,MAAc;QACtC,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;QAC9D,OAAO,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACtE,CAAC;IAEO,eAAe,CAAC,GAAkB;QACxC,IAAI,GAAG,CAAC,GAAG,KAAK,OAAO;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IACzC,CAAC;IAEO,oBAAoB,CAAC,GAAsB;QACjD,IAAI,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,GAAG,CAAC,MAA4B,EAAE,CAAC,CAAC;IAC9D,CAAC;IAEO,mBAAmB,CAAC,GAAU;QACpC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,aAA4B,CAAC,CAAC;IAC9D,CAAC;IAEO,mBAAmB,CAAC,GAAoB;QAC9C,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,SAAS;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IAC3C,CAAC;;AAlOuB,iCAAmB,GAAG,CAAC,SAAS,EAAE,YAAY,EAAE,QAAQ,CAAU,CAAC","sourcesContent":["import { Choice, Group, PropertyTable } from '../../private/index';\nimport { Data, Templates, TextFieldParams } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ChoiceChangeEvent } from '../../private/events';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { NucleonV8N } from '../NucleonElement/types';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport memoize from 'lodash-es/memoize';\n\nconst NS = 'attribute-form';\nconst Base = TranslatableMixin(\n  ConfigurableMixin(ThemeableMixin(ScopedElementsMixin(NucleonElement))),\n  NS\n);\n\n/**\n * Form element for creating or editing attributes.\n *\n * @slot name:before - **new in v1.4.0**\n * @slot name:after - **new in v1.4.0**\n * @slot value:before - **new in v1.4.0**\n * @slot value:after - **new in v1.4.0**\n * @slot visibility:before - **new in v1.4.0**\n * @slot visibility:after - **new in v1.4.0**\n * @slot timestamps:before - **new in v1.4.0**\n * @slot timestamps:after - **new in v1.4.0**\n * @slot create:before - **new in v1.4.0**\n * @slot create:after - **new in v1.4.0**\n * @slot delete:before - **new in v1.4.0**\n * @slot delete:after - **new in v1.4.0**\n *\n * @element foxy-attribute-form\n * @since 1.2.0\n */\nexport class AttributeForm extends Base<Data> {\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),\n      'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n      'vaadin-text-field': customElements.get('vaadin-text-field'),\n      'vaadin-text-area': customElements.get('vaadin-text-area'),\n      'x-property-table': PropertyTable,\n      'vaadin-button': customElements.get('vaadin-button'),\n      'x-choice': Choice,\n      'x-group': Group,\n      'foxy-i18n': customElements.get('foxy-i18n'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ value }) => (value && value.length > 0) || 'value_required',\n      ({ value }) => (value && value.length <= 1000) || 'value_too_long',\n      ({ name }) => (name && name.length > 0) || 'name_required',\n      ({ name }) => (name && name.length <= 500) || 'name_too_long',\n    ];\n  }\n\n  templates: Templates = {};\n\n  private static readonly __visibilityOptions = ['private', 'restricted', 'public'] as const;\n\n  private readonly __getValidator = memoize((prefix: string) => () => {\n    return !this.errors.some(err => err.startsWith(prefix));\n  });\n\n  private readonly __bindField = memoize((key: keyof Data) => {\n    return (evt: CustomEvent) => {\n      const target = evt.target as HTMLInputElement;\n      this.edit({ [key]: target.value });\n    };\n  });\n\n  private readonly __maybeRenderTextField = ({ field }: TextFieldParams) => {\n    const bsid = field.replace(/_/, '-');\n    if (this.hiddenSelector.matches(bsid)) return '';\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot(`${bsid}:before`)}\n\n        <vaadin-text-field\n          class=\"w-full\"\n          label=${this.t(field).toString()}\n          value=${ifDefined(this.form?.[field]?.toString())}\n          error-message=${this.__getErrorMessage(field)}\n          data-testid=${field}\n          .checkValidity=${this.__getValidator(field)}\n          ?disabled=${!this.in('idle') || this.disabledSelector.matches(bsid)}\n          ?readonly=${this.readonlySelector.matches(bsid)}\n          @input=${this.__bindField(field)}\n          @keydown=${this.__handleKeyDown}\n        >\n        </vaadin-text-field>\n\n        ${this.renderTemplateOrSlot(`${bsid}:after`)}\n      </div>\n    `;\n  };\n\n  private readonly __renderVisibility = () => {\n    const { disabledSelector, readonlySelector, form, lang, ns } = this;\n    const isBusyOrFailed = !this.in('idle');\n    const isDisabled = isBusyOrFailed || disabledSelector.matches('visibility', true);\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('visibility:before')}\n\n        <x-group frame>\n          <foxy-i18n\n            data-testid=\"visibility-label\"\n            class=${classMap({ 'text-disabled': isDisabled })}\n            lang=${lang}\n            slot=\"header\"\n            key=\"visibility\"\n            ns=${ns}\n          >\n          </foxy-i18n>\n\n          <x-choice\n            data-testid=\"visibility\"\n            lang=${lang}\n            ns=${AttributeForm.defaultNS}\n            .items=${AttributeForm.__visibilityOptions}\n            .value=${(form?.visibility ?? 'private') as any}\n            ?disabled=${isBusyOrFailed || disabledSelector.matches('visibility', true)}\n            ?readonly=${readonlySelector.matches('visibility', true)}\n            @change=${this.__handleChoiceChange}\n          >\n            <foxy-i18n slot=\"private-label\" lang=${lang} key=\"visibility_private\" ns=${ns}>\n            </foxy-i18n>\n\n            <foxy-i18n slot=\"restricted-label\" lang=${lang} key=\"visibility_restricted\" ns=${ns}>\n            </foxy-i18n>\n\n            <foxy-i18n ns=${ns} lang=${lang} slot=\"public-label\" key=\"visibility_public\">\n            </foxy-i18n>\n          </x-choice>\n        </x-group>\n\n        ${this.renderTemplateOrSlot('visibility:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderTimestamps = () => {\n    const items = (['date_modified', 'date_created'] as const).map(field => ({\n      name: this.t(field),\n      value: this.data?.[field]\n        ? this.t('date', { value: new Date(this.data[field] as string) })\n        : '',\n    }));\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('timestamps:before')}\n        <x-property-table .items=${items} data-testid=\"timestamps\"></x-property-table>\n        ${this.renderTemplateOrSlot('timestamps:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderDelete = () => {\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('delete:before')}\n\n        <vaadin-button\n          class=\"w-full\"\n          data-testid=\"delete\"\n          theme=\"error primary\"\n          ?disabled=${!this.in('idle') || this.disabledSelector.matches('delete', true)}\n          @click=${this.__handleDeleteClick}\n        >\n          <foxy-i18n ns=${this.ns} lang=${this.lang} key=\"delete\"></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('delete:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderCreate = () => {\n    const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n    const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n    const isValid = isTemplateValid || isSnapshotValid;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('create:before')}\n\n        <vaadin-button\n          data-testid=\"create\"\n          class=\"w-full\"\n          theme=\"success primary\"\n          ?disabled=${!this.in('idle') || !isValid || this.disabledSelector.matches('create', true)}\n          @click=${() => this.submit()}\n        >\n          <foxy-i18n ns=${this.ns} lang=${this.lang} key=\"create\"></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('create:after')}\n      </div>\n    `;\n  };\n\n  render(): TemplateResult {\n    const { hiddenSelector, data, lang, ns } = this;\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n\n    return html`\n      <foxy-internal-confirm-dialog\n        data-testid=\"confirm\"\n        message=\"delete_prompt\"\n        confirm=\"delete\"\n        cancel=\"cancel\"\n        header=\"delete\"\n        theme=\"primary error\"\n        lang=${lang}\n        ns=${ns}\n        id=\"confirm\"\n        @hide=${this.__handleConfirmHide}\n      >\n      </foxy-internal-confirm-dialog>\n\n      <div class=\"relative\" aria-busy=${this.in('busy')} aria-live=\"polite\">\n        <div class=\"grid grid-cols-1 gap-l\">\n          ${this.__maybeRenderTextField({ field: 'name' })}\n          ${this.__maybeRenderTextField({ field: 'value' })}\n          ${hiddenSelector.matches('visibility', true) ? '' : this.__renderVisibility()}\n          ${hiddenSelector.matches('timestamps', true) || !data ? '' : this.__renderTimestamps()}\n          ${hiddenSelector.matches('delete', true) || !data ? '' : this.__renderDelete()}\n          ${hiddenSelector.matches('create', true) || data ? '' : this.__renderCreate()}\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'transition duration-500 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !isBusy && !isFail,\n          })}\n        >\n          <foxy-spinner\n            layout=\"vertical\"\n            class=\"m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l\"\n            state=${isFail ? 'error' : isBusy ? 'busy' : 'empty'}\n            lang=${lang}\n            ns=\"${ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.__bindField.cache.clear?.();\n    this.__getValidator.cache.clear?.();\n  }\n\n  private get __confirmDialog(): InternalConfirmDialog {\n    return this.renderRoot.querySelector('#confirm') as InternalConfirmDialog;\n  }\n\n  private __getErrorMessage(prefix: string) {\n    const error = this.errors.find(err => err.startsWith(prefix));\n    return error ? this.t(error.replace(prefix, 'v8n')).toString() : '';\n  }\n\n  private __handleKeyDown(evt: KeyboardEvent) {\n    if (evt.key === 'Enter') this.submit();\n  }\n\n  private __handleChoiceChange(evt: ChoiceChangeEvent) {\n    this.edit({ visibility: evt.detail as Data['visibility'] });\n  }\n\n  private __handleDeleteClick(evt: Event) {\n    this.__confirmDialog.show(evt.currentTarget as HTMLElement);\n  }\n\n  private __handleConfirmHide(evt: DialogHideEvent) {\n    if (!evt.detail.cancelled) this.delete();\n  }\n}\n"]}

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

@@ -1,7 +1,7 @@
-import { Rels } from '@foxy.io/sdk/customer';
-import { Resource } from '@foxy.io/sdk/core';
-import { Renderer } from '../../../mixins/configurable';
 import { AttributeForm } from './AttributeForm';
+import { Rels } from '@foxy.io/sdk/backend';
+import { Renderer } from '../../../mixins/configurable';
+import { Resource } from '@foxy.io/sdk/core';
 export declare type Data = Resource<Rels.Attribute>;
 export declare type TextFieldParams = {
     field: keyof Data;

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/AttributeForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Rels } from '@foxy.io/sdk/customer';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { Renderer } from '../../../mixins/configurable';\nimport { AttributeForm } from './AttributeForm';\n\nexport type Data = Resource<Rels.Attribute>;\nexport type TextFieldParams = { field: keyof Data };\nexport type Templates = {\n  'name:before'?: Renderer<AttributeForm>;\n  'name:after'?: Renderer<AttributeForm>;\n  'value:before'?: Renderer<AttributeForm>;\n  'value:after'?: Renderer<AttributeForm>;\n  'visibility:before'?: Renderer<AttributeForm>;\n  'visibility:after'?: Renderer<AttributeForm>;\n  'timestamps:before'?: Renderer<AttributeForm>;\n  'timestamps:after'?: Renderer<AttributeForm>;\n  'delete:before'?: Renderer<AttributeForm>;\n  'delete:after'?: Renderer<AttributeForm>;\n  'create:before'?: Renderer<AttributeForm>;\n  'create:after'?: Renderer<AttributeForm>;\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/AttributeForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import { AttributeForm } from './AttributeForm';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Renderer } from '../../../mixins/configurable';\nimport { Resource } from '@foxy.io/sdk/core';\n\nexport type Data = Resource<Rels.Attribute>;\nexport type TextFieldParams = { field: keyof Data };\nexport type Templates = {\n  'name:before'?: Renderer<AttributeForm>;\n  'name:after'?: Renderer<AttributeForm>;\n  'value:before'?: Renderer<AttributeForm>;\n  'value:after'?: Renderer<AttributeForm>;\n  'visibility:before'?: Renderer<AttributeForm>;\n  'visibility:after'?: Renderer<AttributeForm>;\n  'timestamps:before'?: Renderer<AttributeForm>;\n  'timestamps:after'?: Renderer<AttributeForm>;\n  'delete:before'?: Renderer<AttributeForm>;\n  'delete:after'?: Renderer<AttributeForm>;\n  'create:before'?: Renderer<AttributeForm>;\n  'create:after'?: Renderer<AttributeForm>;\n};\n"]}

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

@@ -1,19 +1,20 @@
 import { ExtractItem, ItemRenderer, Page } from './types';
 import { PropertyDeclarations, TemplateResult } from 'lit-element';
 import { NucleonElement } from '../NucleonElement/NucleonElement';
-declare const CollectionPage_base: typeof NucleonElement & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost>;
+declare const Base: typeof NucleonElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost>;
 /**
  * Renders an element for each resource in a collection page.
  *
  * @element foxy-collection-page
  * @since 1.1.0
  */
-export declare class CollectionPage<TPage extends Page> extends CollectionPage_base<TPage> {
+export declare class CollectionPage<TPage extends Page> extends Base<TPage> {
     /** @readonly */
     static get properties(): PropertyDeclarations;
     /** Spread directive argument from `@open-wc/lit-helpers` (properties, event listeners and attributes you'd like to pass to the item element). */
     props: Record<string, unknown>;
-    ns: string;
     private __pageFetchEventHandler;
     private __renderItem;
     private __item;

package/dist/elements/public/CollectionPage/CollectionPage.js

@@ -1,21 +1,22 @@
 import { html } from 'lit-element';
+import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { ConfigurableMixin } from "../../../mixins/configurable.js";
 import { FetchEvent } from "../NucleonElement/FetchEvent.js";
 import { NucleonElement } from "../NucleonElement/NucleonElement.js";
 import { repeat } from 'lit-html/directives/repeat';
 import { spread } from '@open-wc/lit-helpers';
+const Base = ConfigurableMixin(TranslatableMixin(NucleonElement));
 /**
  * Renders an element for each resource in a collection page.
  *
  * @element foxy-collection-page
  * @since 1.1.0
  */
-export class CollectionPage extends ConfigurableMixin(NucleonElement) {
+export class CollectionPage extends Base {
     constructor() {
         super();
         /** Spread directive argument from `@open-wc/lit-helpers` (properties, event listeners and attributes you'd like to pass to the item element). */
         this.props = {};
-        this.ns = '';
         this.__pageFetchEventHandler = (evt) => this.__handlePageFetchEvent(evt);
         this.item = 'foxy-null';
     }
@@ -25,7 +26,6 @@ export class CollectionPage extends ConfigurableMixin(NucleonElement) {
             ...super.properties,
             props: { type: Object },
             item: { type: String },
-            ns: { type: String },
         };
     }
     /**
@@ -50,6 +50,7 @@ export class CollectionPage extends ConfigurableMixin(NucleonElement) {
             readonlycontrols=\${ctx.readonlyControls.toString()}
             hiddencontrols=\${ctx.hiddenControls.toString()}
             data-testclass="items"
+            related=\${JSON.stringify(ctx.related)}
             parent=\${ctx.parent}
             group=\${ctx.group}
             href=\${ctx.href}
@@ -102,6 +103,7 @@ export class CollectionPage extends ConfigurableMixin(NucleonElement) {
             disabled: this.disabled,
             readonly: this.readonly,
             previous: (_c = (_b = items[index - 1]) === null || _b === void 0 ? void 0 : _b.data) !== null && _c !== void 0 ? _c : null,
+            related: this.related,
             hidden: this.hidden,
             parent: this.href,
             spread: spread,