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

package/dist/elements/public/CustomFieldCard/TwoLineCard.js

@@ -29,7 +29,7 @@ export class TwoLineCard extends Base {
       <div data-testid="subtitle">
         ${this.renderTemplateOrSlot('subtitle:before')}
 
-        <div class="text-tertiary truncate">
+        <div class="text-tertiary truncate text-s sm-text-m">
           ${this.data ? content === null || content === void 0 ? void 0 : content(this.data) : ''}&ZeroWidthSpace;
         </div>
 

package/dist/elements/public/CustomFieldCard/TwoLineCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"TwoLineCard.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomFieldCard/TwoLineCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAY,wCAAqC;AAC3E,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhD,OAAO,EAAE,cAAc,EAAE,4CAAyC;AAElE,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAgB7D,MAAM,IAAI,GAAG,eAAe,CAAC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;AAEhF,MAAM,OAAO,WAA2C,SAAQ,IAAW;IAA3E;;QASE,cAAS,GAAqB,EAAE,CAAC;QAEjC,SAAI,GAAG,EAAE,CAAC;QAEV,OAAE,GAAG,EAAE,CAAC;QAES,kBAAa,GAAG,CAAC,OAA2B,EAAE,EAAE;YAC/D,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC;;;YAGvC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE;;;UAGvC,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;;KAE7C,CAAC;QACJ,CAAC,CAAC;QAEe,qBAAgB,GAAG,CAAC,OAA2B,EAAE,EAAE;YAClE,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;;;YAG1C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE;;;UAGvC,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC;;KAEhD,CAAC;QACJ,CAAC,CAAC;IAgCJ,CAAC;IAxEC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACtB,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACrB,CAAC;IACJ,CAAC;IAoCD,MAAM,CAAC,OAA8B;;QACnC,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;QAE3C,OAAO,IAAI,CAAA;;;oBAGK,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;;UAGvC,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC;UAC/E,cAAc,CAAC,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC;;;kBAGhF,QAAQ,CAAC;YACf,2DAA2D,EAAE,IAAI;YACjE,+BAA+B,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;SAC7C,CAAC;;;;;oBAKQ,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;mBAC7E,IAAI,CAAC,IAAI;kBACV,IAAI,CAAC,EAAE,IAAI,YAAA,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,0CAAE,SAAS,mCAAI,EAAE;;;;;KAK3E,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { ConfigurableMixin, Renderer } from '../../../mixins/configurable';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { HALJSONResource } from '../NucleonElement/types';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { PropertyDeclarations } from 'lit-element';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { classMap } from '../../../utils/class-map';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\n\nexport type TemplateFn<TData extends HALJSONResource> = (data: TData) => TemplateResult;\n\nexport type Templates<TData extends HALJSONResource> = {\n  'title:before'?: Renderer<TData>;\n  'title:after'?: Renderer<TData>;\n  'subtitle:before'?: Renderer<TData>;\n  'subtitle:after'?: Renderer<TData>;\n};\n\nexport type RenderOptions<TData extends HALJSONResource> = {\n  title: TemplateFn<TData>;\n  subtitle: TemplateFn<TData>;\n};\n\nconst Base = ResponsiveMixin(ConfigurableMixin(ThemeableMixin(NucleonElement)));\n\nexport class TwoLineCard<TData extends HALJSONResource> extends Base<TData> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      lang: { type: String },\n      ns: { type: String },\n    };\n  }\n\n  templates: Templates<TData> = {};\n\n  lang = '';\n\n  ns = '';\n\n  private readonly __renderTitle = (content?: TemplateFn<TData>) => {\n    return html`\n      <div data-testid=\"title\">\n        ${this.renderTemplateOrSlot('title:before')}\n\n        <div class=\"font-semibold truncate\">\n          ${this.data ? content?.(this.data) : ''}&ZeroWidthSpace;\n        </div>\n\n        ${this.renderTemplateOrSlot('title:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderSubtitle = (content?: TemplateFn<TData>) => {\n    return html`\n      <div data-testid=\"subtitle\">\n        ${this.renderTemplateOrSlot('subtitle:before')}\n\n        <div class=\"text-tertiary truncate\">\n          ${this.data ? content?.(this.data) : ''}&ZeroWidthSpace;\n        </div>\n\n        ${this.renderTemplateOrSlot('subtitle:after')}\n      </div>\n    `;\n  };\n\n  render(options?: RenderOptions<TData>): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n\n    return html`\n      <div\n        aria-live=\"polite\"\n        aria-busy=${!this.data && this.in('busy')}\n        class=\"relative text-body text-m font-lumo leading-s sm-flex sm-justify-between\"\n      >\n        ${hiddenSelector.matches('title', true) ? '' : this.__renderTitle(options?.title)}\n        ${hiddenSelector.matches('subtitle', true) ? '' : this.__renderSubtitle(options?.subtitle)}\n\n        <div\n          class=${classMap({\n            'transition duration-250 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !!this.data,\n          })}\n        >\n          <foxy-spinner\n            data-testid=\"spinner\"\n            class=\"m-auto\"\n            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\n            lang=${this.lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"TwoLineCard.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomFieldCard/TwoLineCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAY,wCAAqC;AAC3E,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhD,OAAO,EAAE,cAAc,EAAE,4CAAyC;AAElE,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAgB7D,MAAM,IAAI,GAAG,eAAe,CAAC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;AAEhF,MAAM,OAAO,WAA2C,SAAQ,IAAW;IAA3E;;QASE,cAAS,GAAqB,EAAE,CAAC;QAEjC,SAAI,GAAG,EAAE,CAAC;QAEV,OAAE,GAAG,EAAE,CAAC;QAES,kBAAa,GAAG,CAAC,OAA2B,EAAE,EAAE;YAC/D,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC;;;YAGvC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE;;;UAGvC,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;;KAE7C,CAAC;QACJ,CAAC,CAAC;QAEe,qBAAgB,GAAG,CAAC,OAA2B,EAAE,EAAE;YAClE,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;;;YAG1C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE;;;UAGvC,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC;;KAEhD,CAAC;QACJ,CAAC,CAAC;IAgCJ,CAAC;IAxEC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACtB,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACrB,CAAC;IACJ,CAAC;IAoCD,MAAM,CAAC,OAA8B;;QACnC,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;QAE3C,OAAO,IAAI,CAAA;;;oBAGK,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;;UAGvC,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC;UAC/E,cAAc,CAAC,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC;;;kBAGhF,QAAQ,CAAC;YACf,2DAA2D,EAAE,IAAI;YACjE,+BAA+B,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;SAC7C,CAAC;;;;;oBAKQ,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;mBAC7E,IAAI,CAAC,IAAI;kBACV,IAAI,CAAC,EAAE,IAAI,YAAA,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,0CAAE,SAAS,mCAAI,EAAE;;;;;KAK3E,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { ConfigurableMixin, Renderer } from '../../../mixins/configurable';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { HALJSONResource } from '../NucleonElement/types';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { PropertyDeclarations } from 'lit-element';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { classMap } from '../../../utils/class-map';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\n\nexport type TemplateFn<TData extends HALJSONResource> = (data: TData) => TemplateResult;\n\nexport type Templates<TData extends HALJSONResource> = {\n  'title:before'?: Renderer<TData>;\n  'title:after'?: Renderer<TData>;\n  'subtitle:before'?: Renderer<TData>;\n  'subtitle:after'?: Renderer<TData>;\n};\n\nexport type RenderOptions<TData extends HALJSONResource> = {\n  title: TemplateFn<TData>;\n  subtitle: TemplateFn<TData>;\n};\n\nconst Base = ResponsiveMixin(ConfigurableMixin(ThemeableMixin(NucleonElement)));\n\nexport class TwoLineCard<TData extends HALJSONResource> extends Base<TData> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      lang: { type: String },\n      ns: { type: String },\n    };\n  }\n\n  templates: Templates<TData> = {};\n\n  lang = '';\n\n  ns = '';\n\n  private readonly __renderTitle = (content?: TemplateFn<TData>) => {\n    return html`\n      <div data-testid=\"title\">\n        ${this.renderTemplateOrSlot('title:before')}\n\n        <div class=\"font-semibold truncate\">\n          ${this.data ? content?.(this.data) : ''}&ZeroWidthSpace;\n        </div>\n\n        ${this.renderTemplateOrSlot('title:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderSubtitle = (content?: TemplateFn<TData>) => {\n    return html`\n      <div data-testid=\"subtitle\">\n        ${this.renderTemplateOrSlot('subtitle:before')}\n\n        <div class=\"text-tertiary truncate text-s sm-text-m\">\n          ${this.data ? content?.(this.data) : ''}&ZeroWidthSpace;\n        </div>\n\n        ${this.renderTemplateOrSlot('subtitle:after')}\n      </div>\n    `;\n  };\n\n  render(options?: RenderOptions<TData>): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n\n    return html`\n      <div\n        aria-live=\"polite\"\n        aria-busy=${!this.data && this.in('busy')}\n        class=\"relative text-body text-m font-lumo leading-s sm-flex sm-justify-between\"\n      >\n        ${hiddenSelector.matches('title', true) ? '' : this.__renderTitle(options?.title)}\n        ${hiddenSelector.matches('subtitle', true) ? '' : this.__renderSubtitle(options?.subtitle)}\n\n        <div\n          class=${classMap({\n            'transition duration-250 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !!this.data,\n          })}\n        >\n          <foxy-spinner\n            data-testid=\"spinner\"\n            class=\"m-auto\"\n            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\n            lang=${this.lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -1,10 +1,23 @@
 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> & {
+import { TwoLineCard } from '../CustomFieldCard/TwoLineCard';
+declare const Base: typeof TwoLineCard & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
 };
+/**
+ * Card element displaying an email template (`fx:email_template`).
+ *
+ * @slot title:before
+ * @slot title:after
+ *
+ * @slot subtitle:before
+ * @slot subtitle:after
+ *
+ * @element foxy-email-template-card
+ * @since 1.21.0
+ */
 export declare class EmailTemplateCard extends Base<Data> {
-    renderBody(): TemplateResult;
+    render(): TemplateResult;
+    private __getType;
 }
 export {};

package/dist/elements/public/EmailTemplateCard/EmailTemplateCard.js

@@ -1,31 +1,41 @@
 import { TranslatableMixin } from "../../../mixins/translatable.js";
-import { InternalCard } from "../../internal/InternalCard/InternalCard.js";
+import { TwoLineCard } from "../CustomFieldCard/TwoLineCard.js";
 import { html } from 'lit-html';
 const NS = 'email-template-card';
-const Base = TranslatableMixin(InternalCard, NS);
+const Base = TranslatableMixin(TwoLineCard, NS);
+/**
+ * Card element displaying an email template (`fx:email_template`).
+ *
+ * @slot title:before
+ * @slot title:after
+ *
+ * @slot subtitle:before
+ * @slot subtitle:after
+ *
+ * @element foxy-email-template-card
+ * @since 1.21.0
+ */
 export class EmailTemplateCard extends Base {
-    renderBody() {
-        const data = this.data;
-        const type = (data === null || data === void 0 ? void 0 : data.content_html_url) && data.content_html_url
-            ? 'type_custom_url'
-            : (data === null || data === void 0 ? void 0 : data.content_html) && data.content_text
-                ? 'type_custom_text'
-                : (data === null || data === void 0 ? void 0 : data.content_html) || (data === null || data === void 0 ? void 0 : data.content_html_url) || (data === null || data === void 0 ? void 0 : data.content_text) || (data === null || data === void 0 ? void 0 : data.content_text_url)
-                    ? 'type_mixed'
-                    : 'type_default';
-        return html `
-      <div class="flex justify-between gap-s">
-        <foxy-i18n
-          class="font-semibold truncate flex-shrink-0"
-          infer=""
-          key="title"
-          .options=${this.data}
-        >
-        </foxy-i18n>
-
-        <foxy-i18n class="truncate text-tertiary" infer="" key=${type}></foxy-i18n>
-      </div>
-    `;
+    render() {
+        return super.render({
+            title: data => html `${data.description}`,
+            subtitle: data => html `<foxy-i18n infer="" key=${this.__getType(data)}></foxy-i18n>`,
+        });
+    }
+    __getType(data) {
+        const { content_html_url: htmlUrl, content_text_url: textUrl } = data;
+        const { content_html: html, content_text: text } = data;
+        if (text && !textUrl && !html && !htmlUrl)
+            return 'type_custom_text';
+        if (html && !htmlUrl && !text && !textUrl)
+            return 'type_custom_html';
+        if (htmlUrl && !textUrl && !html && !text)
+            return 'type_custom_html_url';
+        if (textUrl && !htmlUrl && !text && !html)
+            return 'type_custom_text_url';
+        if (html || htmlUrl || text || textUrl)
+            return 'type_mixed';
+        return 'type_default';
     }
 }
 //# sourceMappingURL=EmailTemplateCard.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmailTemplateCard.js","sourceRoot":"","sources":["../../../../src/elements/public/EmailTemplateCard/EmailTemplateCard.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,qBAAqB,CAAC;AACjC,MAAM,IAAI,GAAG,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;AAEjD,MAAM,OAAO,iBAAkB,SAAQ,IAAU;IAC/C,UAAU;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,MAAM,IAAI,GACR,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,KAAI,IAAI,CAAC,gBAAgB;YAC7C,CAAC,CAAC,iBAAiB;YACnB,CAAC,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,KAAI,IAAI,CAAC,YAAY;gBACzC,CAAC,CAAC,kBAAkB;gBACpB,CAAC,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,MAClB,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAA,KACtB,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,CAAA,KAClB,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAA;oBACxB,CAAC,CAAC,YAAY;oBACd,CAAC,CAAC,cAAc,CAAC;QAErB,OAAO,IAAI,CAAA;;;;;;qBAMM,IAAI,CAAC,IAAI;;;;iEAImC,IAAI;;KAEhE,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 = 'email-template-card';\nconst Base = TranslatableMixin(InternalCard, NS);\n\nexport class EmailTemplateCard extends Base<Data> {\n  renderBody(): TemplateResult {\n    const data = this.data;\n    const type =\n      data?.content_html_url && data.content_html_url\n        ? 'type_custom_url'\n        : data?.content_html && data.content_text\n        ? 'type_custom_text'\n        : data?.content_html ||\n          data?.content_html_url ||\n          data?.content_text ||\n          data?.content_text_url\n        ? 'type_mixed'\n        : 'type_default';\n\n    return html`\n      <div class=\"flex justify-between gap-s\">\n        <foxy-i18n\n          class=\"font-semibold truncate flex-shrink-0\"\n          infer=\"\"\n          key=\"title\"\n          .options=${this.data}\n        >\n        </foxy-i18n>\n\n        <foxy-i18n class=\"truncate text-tertiary\" infer=\"\" key=${type}></foxy-i18n>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"EmailTemplateCard.js","sourceRoot":"","sources":["../../../../src/elements/public/EmailTemplateCard/EmailTemplateCard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,WAAW,EAAE,0CAAuC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,qBAAqB,CAAC;AACjC,MAAM,IAAI,GAAG,iBAAiB,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AAEhD;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,iBAAkB,SAAQ,IAAU;IAC/C,MAAM;QACJ,OAAO,KAAK,CAAC,MAAM,CAAC;YAClB,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,WAAW,EAAE;YACxC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,2BAA2B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,eAAe;SACrF,CAAC,CAAC;IACL,CAAC;IAEO,SAAS,CAAC,IAAU;QAC1B,MAAM,EAAE,gBAAgB,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACtE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAExD,IAAI,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO,kBAAkB,CAAC;QACrE,IAAI,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO,kBAAkB,CAAC;QACrE,IAAI,OAAO,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI;YAAE,OAAO,sBAAsB,CAAC;QACzE,IAAI,OAAO,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI;YAAE,OAAO,sBAAsB,CAAC;QACzE,IAAI,IAAI,IAAI,OAAO,IAAI,IAAI,IAAI,OAAO;YAAE,OAAO,YAAY,CAAC;QAE5D,OAAO,cAAc,CAAC;IACxB,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { TwoLineCard } from '../CustomFieldCard/TwoLineCard';\nimport { html } from 'lit-html';\n\nconst NS = 'email-template-card';\nconst Base = TranslatableMixin(TwoLineCard, NS);\n\n/**\n * Card element displaying an email template (`fx:email_template`).\n *\n * @slot title:before\n * @slot title:after\n *\n * @slot subtitle:before\n * @slot subtitle:after\n *\n * @element foxy-email-template-card\n * @since 1.21.0\n */\nexport class EmailTemplateCard extends Base<Data> {\n  render(): TemplateResult {\n    return super.render({\n      title: data => html`${data.description}`,\n      subtitle: data => html`<foxy-i18n infer=\"\" key=${this.__getType(data)}></foxy-i18n>`,\n    });\n  }\n\n  private __getType(data: Data) {\n    const { content_html_url: htmlUrl, content_text_url: textUrl } = data;\n    const { content_html: html, content_text: text } = data;\n\n    if (text && !textUrl && !html && !htmlUrl) return 'type_custom_text';\n    if (html && !htmlUrl && !text && !textUrl) return 'type_custom_html';\n    if (htmlUrl && !textUrl && !html && !text) return 'type_custom_html_url';\n    if (textUrl && !htmlUrl && !text && !html) return 'type_custom_text_url';\n    if (html || htmlUrl || text || textUrl) return 'type_mixed';\n\n    return 'type_default';\n  }\n}\n"]}

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

@@ -1,6 +1,5 @@
-import '@polymer/iron-icons/editor-icons';
-import '@polymer/iron-icon';
-import '../../internal/InternalCard/index';
+import '../../internal/InternalSandbox/index';
+import '../Spinner/index';
 import '../I18n/index';
 import { EmailTemplateCard } from './EmailTemplateCard';
 export { EmailTemplateCard };

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

@@ -1,6 +1,5 @@
-import '@polymer/iron-icons/editor-icons';
-import '@polymer/iron-icon';
-import "../../internal/InternalCard/index.js";
+import "../../internal/InternalSandbox/index.js";
+import "../Spinner/index.js";
 import "../I18n/index.js";
 import { EmailTemplateCard } from "./EmailTemplateCard.js";
 customElements.define('foxy-email-template-card', EmailTemplateCard);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/EmailTemplateCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAE5B,8CAA2C;AAE3C,0BAAuB;AAEvB,OAAO,EAAE,iBAAiB,EAAE,+BAA4B;AAExD,cAAc,CAAC,MAAM,CAAC,0BAA0B,EAAE,iBAAiB,CAAC,CAAC;AAErE,OAAO,EAAE,iBAAiB,EAAE,CAAC","sourcesContent":["import '@polymer/iron-icons/editor-icons';\nimport '@polymer/iron-icon';\n\nimport '../../internal/InternalCard/index';\n\nimport '../I18n/index';\n\nimport { EmailTemplateCard } from './EmailTemplateCard';\n\ncustomElements.define('foxy-email-template-card', EmailTemplateCard);\n\nexport { EmailTemplateCard };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/EmailTemplateCard/index.ts"],"names":[],"mappings":"AAAA,iDAA8C;AAE9C,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,iBAAiB,EAAE,+BAA4B;AAExD,cAAc,CAAC,MAAM,CAAC,0BAA0B,EAAE,iBAAiB,CAAC,CAAC;AAErE,OAAO,EAAE,iBAAiB,EAAE,CAAC","sourcesContent":["import '../../internal/InternalSandbox/index';\n\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { EmailTemplateCard } from './EmailTemplateCard';\n\ncustomElements.define('foxy-email-template-card', EmailTemplateCard);\n\nexport { EmailTemplateCard };\n"]}

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

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

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

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

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

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

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

@@ -23,7 +23,7 @@ export declare class ItemCard extends Base<Data> {
     private readonly __storeLoaderId;
     private readonly __cartLoaderId;
     renderBody(): TemplateResult;
-    protected get _isBodyReady(): boolean;
+    get isBodyReady(): boolean;
     private get __transactionTemplateHref();
     private get __defaultTemplateSetHref();
     private get __localeCodesHelperHref();

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

@@ -210,9 +210,9 @@ export class ItemCard extends Base {
       </div>
     `;
     }
-    get _isBodyReady() {
+    get isBodyReady() {
         const isLoaded = !!this.__currencyDisplay && !!this.__currencyCode;
-        return super._isBodyReady && isLoaded;
+        return super.isBodyReady && isLoaded;
     }
     get __transactionTemplateHref() {
         var _a, _b, _c;

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

@@ -1 +1 @@
-{"version":3,"file":"ItemCard.js","sourceRoot":"","sources":["../../../../src/elements/public/ItemCard/ItemCard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\nconst NS = 'item-card';\nconst Base = ConfigurableMixin(TranslatableMixin(InternalCard, NS));\n\n/**\n * Basic card displaying an item.\n *\n * @element foxy-item-card\n * @since 1.17.0\n */\nexport class ItemCard extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      localeCodes: { type: String, attribute: 'locale-codes' },\n    };\n  }\n\n  localeCodes: string | null = null;\n\n  private static readonly __placeholder =\n    'data:image/svg+xml,%3Csvg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Crect width=\"40\" height=\"40\" fill=\"%23E8E8E8\"/%3E%3Cpath d=\"M31.5143 0H24.5476L0 24.5476V31.5143L11.7046 19.8097L11.9841 17.0782C12.0983 15.9624 13.0131 15.1154 14.1038 15.1154H15.7373V12.1923C15.7373 10.9815 16.6915 10 17.8687 10H21.5143L31.5143 0Z\" fill=\"white\"/%3E%3Cpath d=\"M11.5434 21.3852L0 32.9285V39.8953L11.5822 28.3131C11.172 27.8663 10.9438 27.2444 11.012 26.5782L11.5434 21.3852Z\" fill=\"white\"/%3E%3Cpath d=\"M12.4305 28.879L1.30951 40H8.27631L19.2763 29H13.1316C12.8853 29 12.6495 28.9573 12.4305 28.879Z\" fill=\"white\"/%3E%3Cpath d=\"M28.3113 19.965L28.0159 17.0782C27.9116 16.0591 27.1395 15.2642 26.1754 15.1341L40 1.3095V8.27627L28.3113 19.965Z\" fill=\"white\"/%3E%3Cpath d=\"M20.6905 29L9.69049 40H16.6572L27.9755 28.6817C27.6541 28.8832 27.2756 29 26.8684 29H20.6905Z\" fill=\"white\"/%3E%3Cpath d=\"M28.6572 28C28.9128 27.5952 29.0415 27.1003 28.988 26.5782L28.4426 21.2479L40 9.69053V16.6572L28.6572 28Z\" fill=\"white\"/%3E%3Cpath d=\"M25.0381 40H18.0715L40 18.0715V25.0381L25.0381 40Z\" fill=\"white\"/%3E%3Cpath d=\"M26.4524 40H33.4191L40 33.4191V26.4524L26.4524 40Z\" fill=\"white\"/%3E%3Cpath d=\"M40 40H34.8333L40 34.8333V40Z\" fill=\"white\"/%3E%3Cpath d=\"M16.1666 0H23.1334L0 23.1334V16.1666L16.1666 0Z\" fill=\"white\"/%3E%3Cpath d=\"M14.7524 0H7.78571L0 7.78573V14.7524L14.7524 0Z\" fill=\"white\"/%3E%3Cpath d=\"M0 0H6.37152L0 6.37151V0Z\" fill=\"white\"/%3E%3Cpath d=\"M21.467 11.4615H17.8687C17.4763 11.4615 17.1582 11.7887 17.1582 12.1923V15.1154H22.8418V12.1923C22.8418 11.7887 22.5237 11.4615 22.1313 11.4615H21.467Z\" fill=\"white\"/%3E%3Cpath d=\"M24.7798 15.1154H24.2627V12.1923C24.2627 11.227 23.6562 10.4075 22.8138 10.1148L32.9286 0H39.89L24.7798 15.1154Z\" fill=\"white\"/%3E%3C/svg%3E';\n\n  private readonly __transactionTemplateLoaderId = 'transactionTemplateLoader';\n\n  private readonly __defaultTemplateSetLoaderId = 'defaultTemplateSetLoader';\n\n  private readonly __localeCodesHelperLoaderId = 'localeCodesLoader';\n\n  private readonly __transactionLoaderId = 'transactionLoader';\n\n  private readonly __templateSetLoaderId = 'templateSetLoader';\n\n  private readonly __storeLoaderId = 'storeLoader';\n\n  private readonly __cartLoaderId = 'cartLoader';\n\n  renderBody(): TemplateResult {\n    const quantity = this.data?.quantity ?? 0;\n    const options = this.data?._embedded?.['fx:item_options'];\n    const price = this.data?.price ?? 0;\n\n    const currencyDisplay = this.__currencyDisplay;\n    const currencyCode = this.__currencyCode;\n    const totalPrice = quantity * price;\n\n    return html`\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__transactionTemplateHref)}\n        id=${this.__transactionTemplateLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__defaultTemplateSetHref)}\n        id=${this.__defaultTemplateSetLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__localeCodesHelperHref)}\n        id=${this.__localeCodesHelperLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__transactionHref)}\n        id=${this.__transactionLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__templateSetHref)}\n        id=${this.__templateSetLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__storeHref)}\n        id=${this.__storeLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__cartHref)}\n        id=${this.__cartLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <div class=\"flex items-start space-x-m leading-m\">\n        <div class=\"w-l h-l relative flex-shrink-0\">\n          <img\n            class=\"relative w-full h-full object-cover rounded-s\"\n            src=${ifDefined(this.data?.image)}\n            alt=\"\"\n            @error=${(evt: Event) => {\n              const img = evt.currentTarget as HTMLImageElement;\n              img.src = ItemCard.__placeholder;\n            }}\n          />\n\n          <div class=\"border border-contrast-10 absolute inset-0 rounded-s\"></div>\n        </div>\n\n        <div class=\"flex-1 min-w-0\">\n          <div class=\"flex-1 h-l flex items-center\">\n            <div class=\"flex-1 leading-s\">\n              <div class=\"font-semibold text-m truncate\">${this.data?.name}</div>\n              <div class=\"text-secondary text-m truncate\">\n                ${quantity} &times;\n\n                <foxy-i18n\n                  options=${JSON.stringify({\n                    amount: `${price} ${currencyCode}`,\n                    currencyDisplay,\n                  })}\n                  key=\"price\"\n                  infer=\"\"\n                >\n                </foxy-i18n>\n\n                &equals;\n\n                <foxy-i18n\n                  options=${JSON.stringify({\n                    amount: `${totalPrice} ${currencyCode}`,\n                    currencyDisplay,\n                  })}\n                  key=\"price\"\n                  infer=\"\"\n                >\n                </foxy-i18n>\n              </div>\n            </div>\n\n            ${this.data?.subscription_frequency &&\n            !this.hiddenSelector.matches('autorenew-icon', true)\n              ? html`\n                  <div\n                    class=\"w-xs h-xs flex items-center justify-center rounded-full bg-contrast-5\"\n                  >\n                    <iron-icon icon=\"icons:autorenew\" class=\"icon-inline text-s\"></iron-icon>\n                  </div>\n                `\n              : ''}\n          </div>\n\n          ${options && options.length > 0\n            ? html`\n                <div class=\"mt-s\">\n                  ${options.map(\n                    option => html`\n                      <div\n                        data-testclass=\"option\"\n                        class=\"flex items-center text-m space-x-xs leading-m\"\n                      >\n                        <div class=\"flex-1 text-tertiary truncate\">\n                          ${option.name}: ${option.value}\n                        </div>\n                        ${option.price_mod\n                          ? html`\n                              <div\n                                class=\"${option.price_mod > 0\n                                  ? 'text-success'\n                                  : 'text-error'} rounded px-xs truncate\"\n                              >\n                                <foxy-i18n\n                                  options=${JSON.stringify({\n                                    amount: `${option.price_mod} ${currencyCode}`,\n                                    currencyDisplay: currencyDisplay,\n                                  })}\n                                  key=\"price\"\n                                  infer=\"\"\n                                >\n                                </foxy-i18n>\n                              </div>\n                            `\n                          : ''}\n                        ${option.weight_mod\n                          ? html`\n                              <div\n                                class=\"${option.price_mod > 0\n                                  ? 'text-success'\n                                  : 'text-error'} rounded px-xs truncate\"\n                              >\n                                ${option.weight_mod}\n                                <foxy-i18n key=\"wgt\" infer=\"\"></foxy-i18n>\n                              </div>\n                            `\n                          : ''}\n                      </div>\n                    `\n                  )}\n                </div>\n              `\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n\n  protected get _isBodyReady(): boolean {\n    const isLoaded = !!this.__currencyDisplay && !!this.__currencyCode;\n    return super._isBodyReady && isLoaded;\n  }\n\n  private get __transactionTemplateHref() {\n    try {\n      const links = this.data?._links as Partial<Record<string, { href: string }>> | undefined;\n      const url = new URL(links?.['fx:subscription']?.href ?? '');\n      url.searchParams.set('zoom', 'transaction_template');\n      return url.toString();\n    } catch {\n      //\n    }\n  }\n\n  private get __defaultTemplateSetHref() {\n    const templateSetUri = (this.__cart ?? this.__transactionTemplate)?.template_set_uri;\n\n    if (templateSetUri === '') {\n      try {\n        const url = new URL(this.__store?._links['fx:template_sets'].href ?? '');\n        url.searchParams.set('code', 'DEFAULT');\n        return url.toString();\n      } catch {\n        //\n      }\n    }\n  }\n\n  private get __localeCodesHelperHref() {\n    if (this.__defaultTemplateSetHref || this.__templateSetHref) {\n      return this.localeCodes ?? void 0;\n    }\n  }\n\n  private get __transactionHref() {\n    return this.data?._links['fx:transaction']?.href;\n  }\n\n  private get __templateSetHref() {\n    const cart = this.__cart ?? this.__transactionTemplate;\n    // TODO: remove the directive below once SDK is updated\n    // @ts-expect-error SDK types are incomplete\n    const currencyCode = cart?.currency_code as string | undefined;\n\n    if (!currencyCode) return cart?.template_set_uri || void 0;\n  }\n\n  private get __storeHref() {\n    return this.data?._links['fx:store']?.href;\n  }\n\n  private get __cartHref() {\n    const links = this.data?._links as Partial<Record<string, { href: string }>> | undefined;\n    return links?.['fx:cart']?.href;\n  }\n\n  private get __transactionTemplate() {\n    type Loader = NucleonElement<Resource<Rels.Subscription, { zoom: 'transaction_template' }>>;\n    const selector = `#${this.__transactionTemplateLoaderId}`;\n    const loader = this.renderRoot.querySelector<Loader>(selector);\n    return loader?.data?._embedded['fx:transaction_template'] ?? null;\n  }\n\n  private get __defaultTemplateSet() {\n    type Loader = NucleonElement<Resource<Rels.TemplateSets>>;\n    const selector = `#${this.__defaultTemplateSetLoaderId}`;\n    const loader = this.renderRoot.querySelector<Loader>(selector);\n    return loader?.data?._embedded['fx:template_sets'][0] ?? null;\n  }\n\n  private get __localeCodesHelper() {\n    type Loader = NucleonElement<Resource<Rels.LocaleCodes>>;\n    const selector = `#${this.__localeCodesHelperLoaderId}`;\n    return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n  }\n\n  private get __transaction() {\n    type Loader = NucleonElement<Resource<Rels.Transaction>>;\n    const selector = `#${this.__transactionLoaderId}`;\n    return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n  }\n\n  private get __templateSet() {\n    type Loader = NucleonElement<Resource<Rels.TemplateSet>>;\n    const selector = `#${this.__templateSetLoaderId}`;\n    return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n  }\n\n  private get __store() {\n    type Loader = NucleonElement<Resource<Rels.Store>>;\n    const selector = `#${this.__storeLoaderId}`;\n    return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n  }\n\n  private get __cart() {\n    type Loader = NucleonElement<Resource<Rels.Cart>>;\n    const selector = `#${this.__cartLoaderId}`;\n    return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n  }\n\n  private get __currencyDisplay() {\n    const useCode = this.__store?.use_international_currency_symbol;\n\n    if (useCode === true) return 'code';\n    if (useCode === false) return 'symbol';\n    if (this.data && !this.data._links['fx:store']) return 'symbol';\n  }\n\n  private get __currencyCode() {\n    const transaction = this.__transaction;\n\n    if (transaction) {\n      return transaction.currency_code;\n    } else {\n      const cart = this.__cart ?? this.__transactionTemplate;\n\n      if (cart && 'currency_code' in cart) {\n        // TODO: remove the directive below once the SDK is updated\n        // @ts-expect-error SDK types are incomplete\n        return cart.currency_code as string;\n      } else {\n        const allLocaleCodes = this.__localeCodesHelper;\n        const localeCode = (this.__templateSet ?? this.__defaultTemplateSet)?.locale_code;\n        const localeInfo = localeCode ? allLocaleCodes?.values[localeCode] : void 0;\n\n        if (localeInfo) return /Currency: ([A-Z]{3})/g.exec(localeInfo)?.[1];\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"ItemCard.js","sourceRoot":"","sources":["../../../../src/elements/public/ItemCard/ItemCard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\nconst NS = 'item-card';\nconst Base = ConfigurableMixin(TranslatableMixin(InternalCard, NS));\n\n/**\n * Basic card displaying an item.\n *\n * @element foxy-item-card\n * @since 1.17.0\n */\nexport class ItemCard extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      localeCodes: { type: String, attribute: 'locale-codes' },\n    };\n  }\n\n  localeCodes: string | null = null;\n\n  private static readonly __placeholder =\n    'data:image/svg+xml,%3Csvg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Crect width=\"40\" height=\"40\" fill=\"%23E8E8E8\"/%3E%3Cpath d=\"M31.5143 0H24.5476L0 24.5476V31.5143L11.7046 19.8097L11.9841 17.0782C12.0983 15.9624 13.0131 15.1154 14.1038 15.1154H15.7373V12.1923C15.7373 10.9815 16.6915 10 17.8687 10H21.5143L31.5143 0Z\" fill=\"white\"/%3E%3Cpath d=\"M11.5434 21.3852L0 32.9285V39.8953L11.5822 28.3131C11.172 27.8663 10.9438 27.2444 11.012 26.5782L11.5434 21.3852Z\" fill=\"white\"/%3E%3Cpath d=\"M12.4305 28.879L1.30951 40H8.27631L19.2763 29H13.1316C12.8853 29 12.6495 28.9573 12.4305 28.879Z\" fill=\"white\"/%3E%3Cpath d=\"M28.3113 19.965L28.0159 17.0782C27.9116 16.0591 27.1395 15.2642 26.1754 15.1341L40 1.3095V8.27627L28.3113 19.965Z\" fill=\"white\"/%3E%3Cpath d=\"M20.6905 29L9.69049 40H16.6572L27.9755 28.6817C27.6541 28.8832 27.2756 29 26.8684 29H20.6905Z\" fill=\"white\"/%3E%3Cpath d=\"M28.6572 28C28.9128 27.5952 29.0415 27.1003 28.988 26.5782L28.4426 21.2479L40 9.69053V16.6572L28.6572 28Z\" fill=\"white\"/%3E%3Cpath d=\"M25.0381 40H18.0715L40 18.0715V25.0381L25.0381 40Z\" fill=\"white\"/%3E%3Cpath d=\"M26.4524 40H33.4191L40 33.4191V26.4524L26.4524 40Z\" fill=\"white\"/%3E%3Cpath d=\"M40 40H34.8333L40 34.8333V40Z\" fill=\"white\"/%3E%3Cpath d=\"M16.1666 0H23.1334L0 23.1334V16.1666L16.1666 0Z\" fill=\"white\"/%3E%3Cpath d=\"M14.7524 0H7.78571L0 7.78573V14.7524L14.7524 0Z\" fill=\"white\"/%3E%3Cpath d=\"M0 0H6.37152L0 6.37151V0Z\" fill=\"white\"/%3E%3Cpath d=\"M21.467 11.4615H17.8687C17.4763 11.4615 17.1582 11.7887 17.1582 12.1923V15.1154H22.8418V12.1923C22.8418 11.7887 22.5237 11.4615 22.1313 11.4615H21.467Z\" fill=\"white\"/%3E%3Cpath d=\"M24.7798 15.1154H24.2627V12.1923C24.2627 11.227 23.6562 10.4075 22.8138 10.1148L32.9286 0H39.89L24.7798 15.1154Z\" fill=\"white\"/%3E%3C/svg%3E';\n\n  private readonly __transactionTemplateLoaderId = 'transactionTemplateLoader';\n\n  private readonly __defaultTemplateSetLoaderId = 'defaultTemplateSetLoader';\n\n  private readonly __localeCodesHelperLoaderId = 'localeCodesLoader';\n\n  private readonly __transactionLoaderId = 'transactionLoader';\n\n  private readonly __templateSetLoaderId = 'templateSetLoader';\n\n  private readonly __storeLoaderId = 'storeLoader';\n\n  private readonly __cartLoaderId = 'cartLoader';\n\n  renderBody(): TemplateResult {\n    const quantity = this.data?.quantity ?? 0;\n    const options = this.data?._embedded?.['fx:item_options'];\n    const price = this.data?.price ?? 0;\n\n    const currencyDisplay = this.__currencyDisplay;\n    const currencyCode = this.__currencyCode;\n    const totalPrice = quantity * price;\n\n    return html`\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__transactionTemplateHref)}\n        id=${this.__transactionTemplateLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__defaultTemplateSetHref)}\n        id=${this.__defaultTemplateSetLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__localeCodesHelperHref)}\n        id=${this.__localeCodesHelperLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__transactionHref)}\n        id=${this.__transactionLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__templateSetHref)}\n        id=${this.__templateSetLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__storeHref)}\n        id=${this.__storeLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__cartHref)}\n        id=${this.__cartLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <div class=\"flex items-start space-x-m leading-m\">\n        <div class=\"w-l h-l relative flex-shrink-0\">\n          <img\n            class=\"relative w-full h-full object-cover rounded-s\"\n            src=${ifDefined(this.data?.image)}\n            alt=\"\"\n            @error=${(evt: Event) => {\n              const img = evt.currentTarget as HTMLImageElement;\n              img.src = ItemCard.__placeholder;\n            }}\n          />\n\n          <div class=\"border border-contrast-10 absolute inset-0 rounded-s\"></div>\n        </div>\n\n        <div class=\"flex-1 min-w-0\">\n          <div class=\"flex-1 h-l flex items-center\">\n            <div class=\"flex-1 leading-s\">\n              <div class=\"font-semibold text-m truncate\">${this.data?.name}</div>\n              <div class=\"text-secondary text-m truncate\">\n                ${quantity} &times;\n\n                <foxy-i18n\n                  options=${JSON.stringify({\n                    amount: `${price} ${currencyCode}`,\n                    currencyDisplay,\n                  })}\n                  key=\"price\"\n                  infer=\"\"\n                >\n                </foxy-i18n>\n\n                &equals;\n\n                <foxy-i18n\n                  options=${JSON.stringify({\n                    amount: `${totalPrice} ${currencyCode}`,\n                    currencyDisplay,\n                  })}\n                  key=\"price\"\n                  infer=\"\"\n                >\n                </foxy-i18n>\n              </div>\n            </div>\n\n            ${this.data?.subscription_frequency &&\n            !this.hiddenSelector.matches('autorenew-icon', true)\n              ? html`\n                  <div\n                    class=\"w-xs h-xs flex items-center justify-center rounded-full bg-contrast-5\"\n                  >\n                    <iron-icon icon=\"icons:autorenew\" class=\"icon-inline text-s\"></iron-icon>\n                  </div>\n                `\n              : ''}\n          </div>\n\n          ${options && options.length > 0\n            ? html`\n                <div class=\"mt-s\">\n                  ${options.map(\n                    option => html`\n                      <div\n                        data-testclass=\"option\"\n                        class=\"flex items-center text-m space-x-xs leading-m\"\n                      >\n                        <div class=\"flex-1 text-tertiary truncate\">\n                          ${option.name}: ${option.value}\n                        </div>\n                        ${option.price_mod\n                          ? html`\n                              <div\n                                class=\"${option.price_mod > 0\n                                  ? 'text-success'\n                                  : 'text-error'} rounded px-xs truncate\"\n                              >\n                                <foxy-i18n\n                                  options=${JSON.stringify({\n                                    amount: `${option.price_mod} ${currencyCode}`,\n                                    currencyDisplay: currencyDisplay,\n                                  })}\n                                  key=\"price\"\n                                  infer=\"\"\n                                >\n                                </foxy-i18n>\n                              </div>\n                            `\n                          : ''}\n                        ${option.weight_mod\n                          ? html`\n                              <div\n                                class=\"${option.price_mod > 0\n                                  ? 'text-success'\n                                  : 'text-error'} rounded px-xs truncate\"\n                              >\n                                ${option.weight_mod}\n                                <foxy-i18n key=\"wgt\" infer=\"\"></foxy-i18n>\n                              </div>\n                            `\n                          : ''}\n                      </div>\n                    `\n                  )}\n                </div>\n              `\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n\n  get isBodyReady(): boolean {\n    const isLoaded = !!this.__currencyDisplay && !!this.__currencyCode;\n    return super.isBodyReady && isLoaded;\n  }\n\n  private get __transactionTemplateHref() {\n    try {\n      const links = this.data?._links as Partial<Record<string, { href: string }>> | undefined;\n      const url = new URL(links?.['fx:subscription']?.href ?? '');\n      url.searchParams.set('zoom', 'transaction_template');\n      return url.toString();\n    } catch {\n      //\n    }\n  }\n\n  private get __defaultTemplateSetHref() {\n    const templateSetUri = (this.__cart ?? this.__transactionTemplate)?.template_set_uri;\n\n    if (templateSetUri === '') {\n      try {\n        const url = new URL(this.__store?._links['fx:template_sets'].href ?? '');\n        url.searchParams.set('code', 'DEFAULT');\n        return url.toString();\n      } catch {\n        //\n      }\n    }\n  }\n\n  private get __localeCodesHelperHref() {\n    if (this.__defaultTemplateSetHref || this.__templateSetHref) {\n      return this.localeCodes ?? void 0;\n    }\n  }\n\n  private get __transactionHref() {\n    return this.data?._links['fx:transaction']?.href;\n  }\n\n  private get __templateSetHref() {\n    const cart = this.__cart ?? this.__transactionTemplate;\n    // TODO: remove the directive below once SDK is updated\n    // @ts-expect-error SDK types are incomplete\n    const currencyCode = cart?.currency_code as string | undefined;\n\n    if (!currencyCode) return cart?.template_set_uri || void 0;\n  }\n\n  private get __storeHref() {\n    return this.data?._links['fx:store']?.href;\n  }\n\n  private get __cartHref() {\n    const links = this.data?._links as Partial<Record<string, { href: string }>> | undefined;\n    return links?.['fx:cart']?.href;\n  }\n\n  private get __transactionTemplate() {\n    type Loader = NucleonElement<Resource<Rels.Subscription, { zoom: 'transaction_template' }>>;\n    const selector = `#${this.__transactionTemplateLoaderId}`;\n    const loader = this.renderRoot.querySelector<Loader>(selector);\n    return loader?.data?._embedded['fx:transaction_template'] ?? null;\n  }\n\n  private get __defaultTemplateSet() {\n    type Loader = NucleonElement<Resource<Rels.TemplateSets>>;\n    const selector = `#${this.__defaultTemplateSetLoaderId}`;\n    const loader = this.renderRoot.querySelector<Loader>(selector);\n    return loader?.data?._embedded['fx:template_sets'][0] ?? null;\n  }\n\n  private get __localeCodesHelper() {\n    type Loader = NucleonElement<Resource<Rels.LocaleCodes>>;\n    const selector = `#${this.__localeCodesHelperLoaderId}`;\n    return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n  }\n\n  private get __transaction() {\n    type Loader = NucleonElement<Resource<Rels.Transaction>>;\n    const selector = `#${this.__transactionLoaderId}`;\n    return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n  }\n\n  private get __templateSet() {\n    type Loader = NucleonElement<Resource<Rels.TemplateSet>>;\n    const selector = `#${this.__templateSetLoaderId}`;\n    return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n  }\n\n  private get __store() {\n    type Loader = NucleonElement<Resource<Rels.Store>>;\n    const selector = `#${this.__storeLoaderId}`;\n    return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n  }\n\n  private get __cart() {\n    type Loader = NucleonElement<Resource<Rels.Cart>>;\n    const selector = `#${this.__cartLoaderId}`;\n    return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n  }\n\n  private get __currencyDisplay() {\n    const useCode = this.__store?.use_international_currency_symbol;\n\n    if (useCode === true) return 'code';\n    if (useCode === false) return 'symbol';\n    if (this.data && !this.data._links['fx:store']) return 'symbol';\n  }\n\n  private get __currencyCode() {\n    const transaction = this.__transaction;\n\n    if (transaction) {\n      return transaction.currency_code;\n    } else {\n      const cart = this.__cart ?? this.__transactionTemplate;\n\n      if (cart && 'currency_code' in cart) {\n        // TODO: remove the directive below once the SDK is updated\n        // @ts-expect-error SDK types are incomplete\n        return cart.currency_code as string;\n      } else {\n        const allLocaleCodes = this.__localeCodesHelper;\n        const localeCode = (this.__templateSet ?? this.__defaultTemplateSet)?.locale_code;\n        const localeInfo = localeCode ? allLocaleCodes?.values[localeCode] : void 0;\n\n        if (localeInfo) return /Currency: ([A-Z]{3})/g.exec(localeInfo)?.[1];\n      }\n    }\n  }\n}\n"]}

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

@@ -1,8 +1,22 @@
 import type { TemplateResult } from 'lit-html';
 import type { Data } from './types';
-import { InternalCard } from '../../internal/InternalCard/InternalCard';
-declare const ItemCategoryCard_base: typeof InternalCard;
-export declare class ItemCategoryCard extends ItemCategoryCard_base<Data> {
-    renderBody(): TemplateResult;
+import { TwoLineCard } from '../CustomFieldCard/TwoLineCard';
+declare const Base: typeof TwoLineCard & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+};
+/**
+ * Card element representing an item category (`fx:item_category`).
+ *
+ * @slot title:before
+ * @slot title:after
+ *
+ * @slot subtitle:before
+ * @slot subtitle:after
+ *
+ * @element foxy-item-category-card
+ * @since 1.21.0
+ */
+export declare class ItemCategoryCard extends Base<Data> {
+    render(): TemplateResult;
 }
 export {};

package/dist/elements/public/ItemCategoryCard/ItemCategoryCard.js

@@ -1,17 +1,26 @@
-import { ResponsiveMixin } from "../../../mixins/responsive.js";
-import { InternalCard } from "../../internal/InternalCard/InternalCard.js";
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { TwoLineCard } from "../CustomFieldCard/TwoLineCard.js";
 import { html } from 'lit-html';
-export class ItemCategoryCard extends ResponsiveMixin(InternalCard) {
-    renderBody() {
-        const data = this.data;
-        return html `
-      <div class="leading-s sm-flex sm-justify-between sm-gap-s">
-        <div class="font-semibold truncate flex-shrink-0">${data === null || data === void 0 ? void 0 : data.name}&ZeroWidthSpace;</div>
-        ${(data === null || data === void 0 ? void 0 : data.name) !== (data === null || data === void 0 ? void 0 : data.code)
-            ? html `<div class="truncate text-tertiary text-s sm-text-m">${data === null || data === void 0 ? void 0 : data.code}</div>`
-            : ''}
-      </div>
-    `;
+const NS = 'item-category-card';
+const Base = TranslatableMixin(TwoLineCard, NS);
+/**
+ * Card element representing an item category (`fx:item_category`).
+ *
+ * @slot title:before
+ * @slot title:after
+ *
+ * @slot subtitle:before
+ * @slot subtitle:after
+ *
+ * @element foxy-item-category-card
+ * @since 1.21.0
+ */
+export class ItemCategoryCard extends Base {
+    render() {
+        return super.render({
+            title: data => html `${data.name}`,
+            subtitle: data => html `${data.code}`,
+        });
     }
 }
 //# sourceMappingURL=ItemCategoryCard.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ItemCategoryCard.js","sourceRoot":"","sources":["../../../../src/elements/public/ItemCategoryCard/ItemCategoryCard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,OAAO,gBAAiB,SAAQ,eAAe,CAAC,YAAY,CAAO;IACvE,UAAU;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAEvB,OAAO,IAAI,CAAA;;4DAE6C,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI;UAC5D,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,OAAK,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAA;YACzB,CAAC,CAAC,IAAI,CAAA,wDAAwD,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,QAAQ;YAChF,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { html } from 'lit-html';\n\nexport class ItemCategoryCard extends ResponsiveMixin(InternalCard)<Data> {\n  renderBody(): TemplateResult {\n    const data = this.data;\n\n    return html`\n      <div class=\"leading-s sm-flex sm-justify-between sm-gap-s\">\n        <div class=\"font-semibold truncate flex-shrink-0\">${data?.name}&ZeroWidthSpace;</div>\n        ${data?.name !== data?.code\n          ? html`<div class=\"truncate text-tertiary text-s sm-text-m\">${data?.code}</div>`\n          : ''}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ItemCategoryCard.js","sourceRoot":"","sources":["../../../../src/elements/public/ItemCategoryCard/ItemCategoryCard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,WAAW,EAAE,0CAAuC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,oBAAoB,CAAC;AAChC,MAAM,IAAI,GAAG,iBAAiB,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AAEhD;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,gBAAiB,SAAQ,IAAU;IAC9C,MAAM;QACJ,OAAO,KAAK,CAAC,MAAM,CAAC;YAClB,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,IAAI,EAAE;YACjC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,IAAI,EAAE;SACrC,CAAC,CAAC;IACL,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { TwoLineCard } from '../CustomFieldCard/TwoLineCard';\nimport { html } from 'lit-html';\n\nconst NS = 'item-category-card';\nconst Base = TranslatableMixin(TwoLineCard, NS);\n\n/**\n * Card element representing an item category (`fx:item_category`).\n *\n * @slot title:before\n * @slot title:after\n *\n * @slot subtitle:before\n * @slot subtitle:after\n *\n * @element foxy-item-category-card\n * @since 1.21.0\n */\nexport class ItemCategoryCard extends Base<Data> {\n  render(): TemplateResult {\n    return super.render({\n      title: data => html`${data.name}`,\n      subtitle: data => html`${data.code}`,\n    });\n  }\n}\n"]}

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

@@ -1,3 +1,4 @@
-import '../../internal/InternalCard/index';
+import '../../internal/InternalSandbox/index';
+import '../Spinner/index';
 import { ItemCategoryCard } from './ItemCategoryCard';
 export { ItemCategoryCard };

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

@@ -1,4 +1,5 @@
-import "../../internal/InternalCard/index.js";
+import "../../internal/InternalSandbox/index.js";
+import "../Spinner/index.js";
 import { ItemCategoryCard } from "./ItemCategoryCard.js";
 customElements.define('foxy-item-category-card', ItemCategoryCard);
 export { ItemCategoryCard };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/ItemCategoryCard/index.ts"],"names":[],"mappings":"AAAA,8CAA2C;AAE3C,OAAO,EAAE,gBAAgB,EAAE,8BAA2B;AAEtD,cAAc,CAAC,MAAM,CAAC,yBAAyB,EAAE,gBAAgB,CAAC,CAAC;AAEnE,OAAO,EAAE,gBAAgB,EAAE,CAAC","sourcesContent":["import '../../internal/InternalCard/index';\n\nimport { ItemCategoryCard } from './ItemCategoryCard';\n\ncustomElements.define('foxy-item-category-card', ItemCategoryCard);\n\nexport { ItemCategoryCard };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/ItemCategoryCard/index.ts"],"names":[],"mappings":"AAAA,iDAA8C;AAE9C,6BAA0B;AAE1B,OAAO,EAAE,gBAAgB,EAAE,8BAA2B;AAEtD,cAAc,CAAC,MAAM,CAAC,yBAAyB,EAAE,gBAAgB,CAAC,CAAC;AAEnE,OAAO,EAAE,gBAAgB,EAAE,CAAC","sourcesContent":["import '../../internal/InternalSandbox/index';\n\nimport '../Spinner/index';\n\nimport { ItemCategoryCard } from './ItemCategoryCard';\n\ncustomElements.define('foxy-item-category-card', ItemCategoryCard);\n\nexport { ItemCategoryCard };\n"]}

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

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

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

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

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

@@ -1,10 +1,27 @@
 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> & {
+import { TwoLineCard } from '../CustomFieldCard/TwoLineCard';
+declare const Base: typeof TwoLineCard & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
 };
+/**
+ * Card element representing a `fx:payment_preset` resource of Payments API.
+ *
+ * _Payments API is a client-side virtual API layer built on top of hAPI
+ * in an attempt to streamline access to stores' payment method settings
+ * that is currently a bit quirky due to the legacy functionality. To use
+ * this element with hAPI, wrap it into a foxy-payments-api node._
+ *
+ * @slot title:before
+ * @slot title:after
+ *
+ * @slot subtitle:before
+ * @slot subtitle:after
+ *
+ * @element foxy-payments-api-payment-preset-card
+ * @since 1.21.0
+ */
 export declare class PaymentsApiPaymentPresetCard extends Base<Data> {
-    renderBody(): TemplateResult;
+    render(): TemplateResult;
 }
 export {};