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

package/dist/elements/public/AppliedCouponCodeCard/AppliedCouponCodeCard.js

@@ -1,10 +1,9 @@
 import { TranslatableMixin } from "../../../mixins/translatable.js";
-import { ResponsiveMixin } from "../../../mixins/responsive.js";
-import { InternalCard } from "../../internal/InternalCard/InternalCard.js";
+import { TwoLineCard } from "../CustomFieldCard/TwoLineCard.js";
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { html } from 'lit-html';
 const NS = 'applied-coupon-code-card';
-const Base = ResponsiveMixin(TranslatableMixin(InternalCard, NS));
+const Base = TranslatableMixin(TwoLineCard, NS);
 /**
  * Card element displaying an applied coupon code.
  *
@@ -17,7 +16,7 @@ export class AppliedCouponCodeCard extends Base {
         this.__couponLoaderId = 'couponLoader';
     }
     renderBody() {
-        var _a, _b, _c;
+        var _a;
         return html `
       <foxy-nucleon
         infer=""
@@ -28,10 +27,10 @@ export class AppliedCouponCodeCard extends Base {
       >
       </foxy-nucleon>
 
-      <div class="leading-s text-m font-lumo sm-flex sm-justify-between">
-        <div class="font-semibold min-w-0 truncate">${(_b = this.data) === null || _b === void 0 ? void 0 : _b.code}&ZeroWidthSpace;</div>
-        <div class="text-tertiary min-w-0 truncate">${(_c = this.__coupon) === null || _c === void 0 ? void 0 : _c.name}&ZeroWidthSpace;</div>
-      </div>
+      ${super.renderBody({
+            title: data => html `${data.code}`,
+            subtitle: () => { var _a; return html `${(_a = this.__coupon) === null || _a === void 0 ? void 0 : _a.name}`; },
+        })}
     `;
     }
     get isBodyReady() {

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

@@ -1 +1 @@
-{"version":3,"file":"AppliedCouponCodeCard.js","sourceRoot":"","sources":["../../../../src/elements/public/AppliedCouponCodeCard/AppliedCouponCodeCard.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,0BAA0B,CAAC;AACtC,MAAM,IAAI,GAAG,eAAe,CAAC,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC,CAAC;AAElE;;;;;GAKG;AACH,MAAM,OAAO,qBAAsB,SAAQ,IAAU;IAArD;;QACU,qBAAgB,GAAG,cAAc,CAAC;IAgC5C,CAAC;IA9BC,UAAU;;QACR,OAAO,IAAI,CAAA;;;;eAIA,SAAS,OAAC,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAC,WAAW,EAAE,IAAI,CAAC;aAChD,IAAI,CAAC,gBAAgB;kBAChB,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;;;;sDAKU,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI;sDACf,MAAA,IAAI,CAAC,QAAQ,0CAAE,IAAI;;KAEpE,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,KAAK,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC9C,CAAC;IAED,IAAY,cAAc;QAExB,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAS,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;IAC5E,CAAC;IAED,IAAY,QAAQ;;QAClB,aAAO,IAAI,CAAC,cAAc,0CAAE,IAAI,CAAC;IACnC,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { NucleonElement } from '../NucleonElement/NucleonElement';\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 { ResponsiveMixin } from '../../../mixins/responsive';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\nconst NS = 'applied-coupon-code-card';\nconst Base = ResponsiveMixin(TranslatableMixin(InternalCard, NS));\n\n/**\n * Card element displaying an applied coupon code.\n *\n * @element foxy-applied-coupon-code-card\n * @since 1.21.0\n */\nexport class AppliedCouponCodeCard extends Base<Data> {\n  private __couponLoaderId = 'couponLoader';\n\n  renderBody(): TemplateResult {\n    return html`\n      <foxy-nucleon\n        infer=\"\"\n        class=\"hidden\"\n        href=${ifDefined(this.data?._links['fx:coupon'].href)}\n        id=${this.__couponLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <div class=\"leading-s text-m font-lumo sm-flex sm-justify-between\">\n        <div class=\"font-semibold min-w-0 truncate\">${this.data?.code}&ZeroWidthSpace;</div>\n        <div class=\"text-tertiary min-w-0 truncate\">${this.__coupon?.name}&ZeroWidthSpace;</div>\n      </div>\n    `;\n  }\n\n  get isBodyReady(): boolean {\n    return super.isBodyReady && !!this.__coupon;\n  }\n\n  private get __couponLoader() {\n    type Loader = NucleonElement<Resource<Rels.Coupon>>;\n    return this.renderRoot.querySelector<Loader>(`#${this.__couponLoaderId}`);\n  }\n\n  private get __coupon() {\n    return this.__couponLoader?.data;\n  }\n}\n"]}
+{"version":3,"file":"AppliedCouponCodeCard.js","sourceRoot":"","sources":["../../../../src/elements/public/AppliedCouponCodeCard/AppliedCouponCodeCard.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,WAAW,EAAE,0CAAuC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,0BAA0B,CAAC;AACtC,MAAM,IAAI,GAAG,iBAAiB,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,OAAO,qBAAsB,SAAQ,IAAU;IAArD;;QACU,qBAAgB,GAAG,cAAc,CAAC;IAgC5C,CAAC;IA9BC,UAAU;;QACR,OAAO,IAAI,CAAA;;;;eAIA,SAAS,OAAC,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAC,WAAW,EAAE,IAAI,CAAC;aAChD,IAAI,CAAC,gBAAgB;kBAChB,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;;;QAIpC,KAAK,CAAC,UAAU,CAAC;YACjB,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,IAAI,EAAE;YACjC,QAAQ,EAAE,GAAG,EAAE,WAAC,OAAA,IAAI,CAAA,GAAG,MAAA,IAAI,CAAC,QAAQ,0CAAE,IAAI,EAAE,CAAA,EAAA;SAC7C,CAAC;KACH,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,KAAK,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC9C,CAAC;IAED,IAAY,cAAc;QAExB,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAS,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;IAC5E,CAAC;IAED,IAAY,QAAQ;;QAClB,aAAO,IAAI,CAAC,cAAc,0CAAE,IAAI,CAAC;IACnC,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { NucleonElement } from '../NucleonElement/NucleonElement';\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 { TwoLineCard } from '../CustomFieldCard/TwoLineCard';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\nconst NS = 'applied-coupon-code-card';\nconst Base = TranslatableMixin(TwoLineCard, NS);\n\n/**\n * Card element displaying an applied coupon code.\n *\n * @element foxy-applied-coupon-code-card\n * @since 1.21.0\n */\nexport class AppliedCouponCodeCard extends Base<Data> {\n  private __couponLoaderId = 'couponLoader';\n\n  renderBody(): TemplateResult {\n    return html`\n      <foxy-nucleon\n        infer=\"\"\n        class=\"hidden\"\n        href=${ifDefined(this.data?._links['fx:coupon'].href)}\n        id=${this.__couponLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      ${super.renderBody({\n        title: data => html`${data.code}`,\n        subtitle: () => html`${this.__coupon?.name}`,\n      })}\n    `;\n  }\n\n  get isBodyReady(): boolean {\n    return super.isBodyReady && !!this.__coupon;\n  }\n\n  private get __couponLoader() {\n    type Loader = NucleonElement<Resource<Rels.Coupon>>;\n    return this.renderRoot.querySelector<Loader>(`#${this.__couponLoaderId}`);\n  }\n\n  private get __coupon() {\n    return this.__couponLoader?.data;\n  }\n}\n"]}

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

@@ -19,7 +19,7 @@ declare const AppliedTaxCard_base: typeof TwoLineCard & import("lit-element").Co
 export declare class AppliedTaxCard extends AppliedTaxCard_base<Data> {
     private __currencyDisplay;
     private __currency;
-    render(): TemplateResult;
+    renderBody(): TemplateResult;
     protected _sendGet(): Promise<Data>;
 }
 export {};

package/dist/elements/public/AppliedTaxCard/AppliedTaxCard.js

@@ -19,8 +19,8 @@ export class AppliedTaxCard extends TranslatableMixin(TwoLineCard, 'applied-tax-
         this.__currencyDisplay = '';
         this.__currency = '';
     }
-    render() {
-        return super.render({
+    renderBody() {
+        return super.renderBody({
             title: data => html `${data.name}`,
             subtitle: data => {
                 return html `

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

@@ -1 +1 @@
-{"version":3,"file":"AppliedTaxCard.js","sourceRoot":"","sources":["../../../../src/elements/public/AppliedTaxCard/AppliedTaxCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAKhD,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,WAAW,EAAE,0CAAuC;AAE7D;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,cAAe,SAAQ,iBAAiB,CAAC,WAAW,EAAE,kBAAkB,CAAO;IAA5F;;QACU,sBAAiB,GAAG,EAAE,CAAC;QAEvB,eAAU,GAAG,EAAE,CAAC;IA+C1B,CAAC;IA7CC,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;gBACf,OAAO,IAAI,CAAA;;sBAEG,IAAI,CAAC,SAAS,CAAC;oBACvB,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,EAAE;oBAC3C,eAAe,EAAE,IAAI,CAAC,iBAAiB;iBACxC,CAAC;mBACK,IAAI,CAAC,IAAI;;iBAEX,IAAI,CAAC,EAAE;;;;;;;sBAOF,IAAI,CAAC,SAAS,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,GAAG,GAAG,EAAE,CAAC;mBAChD,IAAI,CAAC,IAAI;;iBAEX,IAAI,CAAC,EAAE;;;SAGf,CAAC;YACJ,CAAC;SACF,CAAC,CAAC;IACL,CAAC;IAES,KAAK,CAAC,QAAQ;QAItB,MAAM,UAAU,GAAG,MAAM,KAAK,CAAC,QAAQ,EAAE,CAAC;QAC1C,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;YAC7C,KAAK,CAAC,MAAM,CAAc,UAAU,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC;YACnE,KAAK,CAAC,MAAM,CAAQ,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC;SACxD,CAAC,CAAC;QAEH,IAAI,CAAC,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC;QAC5C,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,iCAAiC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;QAErF,OAAO,UAAU,CAAC;IACpB,CAAC;CACF","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { Data } from './types';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { TwoLineCard } from '../CustomFieldCard/TwoLineCard';\n\n/**\n * Basic card displaying an applied tax.\n *\n * @slot title:before\n * @slot title:after\n *\n * @slot subtitle:before\n * @slot subtitle:after\n *\n * @element foxy-applied-tax-card\n * @since 1.11.0\n */\nexport class AppliedTaxCard extends TranslatableMixin(TwoLineCard, 'applied-tax-card')<Data> {\n  private __currencyDisplay = '';\n\n  private __currency = '';\n\n  render(): TemplateResult {\n    return super.render({\n      title: data => html`${data.name}`,\n      subtitle: data => {\n        return html`\n          <foxy-i18n\n            options=${JSON.stringify({\n              amount: `${data.amount} ${this.__currency}`,\n              currencyDisplay: this.__currencyDisplay,\n            })}\n            lang=${this.lang}\n            key=\"price\"\n            ns=${this.ns}\n          >\n          </foxy-i18n>\n\n          <span>&bull;</span>\n\n          <foxy-i18n\n            options=${JSON.stringify({ fraction: data.rate / 100 })}\n            lang=${this.lang}\n            key=\"percent\"\n            ns=${this.ns}\n          >\n          </foxy-i18n>\n        `;\n      },\n    });\n  }\n\n  protected async _sendGet(): Promise<Data> {\n    type Transaction = Resource<Rels.Transaction>;\n    type Store = Resource<Rels.Store>;\n\n    const appliedTax = await super._sendGet();\n    const [transaction, store] = await Promise.all([\n      super._fetch<Transaction>(appliedTax._links['fx:transaction'].href),\n      super._fetch<Store>(appliedTax._links['fx:store'].href),\n    ]);\n\n    this.__currency = transaction.currency_code;\n    this.__currencyDisplay = store.use_international_currency_symbol ? 'code' : 'symbol';\n\n    return appliedTax;\n  }\n}\n"]}
+{"version":3,"file":"AppliedTaxCard.js","sourceRoot":"","sources":["../../../../src/elements/public/AppliedTaxCard/AppliedTaxCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAKhD,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,WAAW,EAAE,0CAAuC;AAE7D;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,cAAe,SAAQ,iBAAiB,CAAC,WAAW,EAAE,kBAAkB,CAAO;IAA5F;;QACU,sBAAiB,GAAG,EAAE,CAAC;QAEvB,eAAU,GAAG,EAAE,CAAC;IA+C1B,CAAC;IA7CC,UAAU;QACR,OAAO,KAAK,CAAC,UAAU,CAAC;YACtB,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,IAAI,EAAE;YACjC,QAAQ,EAAE,IAAI,CAAC,EAAE;gBACf,OAAO,IAAI,CAAA;;sBAEG,IAAI,CAAC,SAAS,CAAC;oBACvB,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,EAAE;oBAC3C,eAAe,EAAE,IAAI,CAAC,iBAAiB;iBACxC,CAAC;mBACK,IAAI,CAAC,IAAI;;iBAEX,IAAI,CAAC,EAAE;;;;;;;sBAOF,IAAI,CAAC,SAAS,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,GAAG,GAAG,EAAE,CAAC;mBAChD,IAAI,CAAC,IAAI;;iBAEX,IAAI,CAAC,EAAE;;;SAGf,CAAC;YACJ,CAAC;SACF,CAAC,CAAC;IACL,CAAC;IAES,KAAK,CAAC,QAAQ;QAItB,MAAM,UAAU,GAAG,MAAM,KAAK,CAAC,QAAQ,EAAE,CAAC;QAC1C,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;YAC7C,KAAK,CAAC,MAAM,CAAc,UAAU,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC;YACnE,KAAK,CAAC,MAAM,CAAQ,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC;SACxD,CAAC,CAAC;QAEH,IAAI,CAAC,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC;QAC5C,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,iCAAiC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;QAErF,OAAO,UAAU,CAAC;IACpB,CAAC;CACF","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { Data } from './types';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { TwoLineCard } from '../CustomFieldCard/TwoLineCard';\n\n/**\n * Basic card displaying an applied tax.\n *\n * @slot title:before\n * @slot title:after\n *\n * @slot subtitle:before\n * @slot subtitle:after\n *\n * @element foxy-applied-tax-card\n * @since 1.11.0\n */\nexport class AppliedTaxCard extends TranslatableMixin(TwoLineCard, 'applied-tax-card')<Data> {\n  private __currencyDisplay = '';\n\n  private __currency = '';\n\n  renderBody(): TemplateResult {\n    return super.renderBody({\n      title: data => html`${data.name}`,\n      subtitle: data => {\n        return html`\n          <foxy-i18n\n            options=${JSON.stringify({\n              amount: `${data.amount} ${this.__currency}`,\n              currencyDisplay: this.__currencyDisplay,\n            })}\n            lang=${this.lang}\n            key=\"price\"\n            ns=${this.ns}\n          >\n          </foxy-i18n>\n\n          <span>&bull;</span>\n\n          <foxy-i18n\n            options=${JSON.stringify({ fraction: data.rate / 100 })}\n            lang=${this.lang}\n            key=\"percent\"\n            ns=${this.ns}\n          >\n          </foxy-i18n>\n        `;\n      },\n    });\n  }\n\n  protected async _sendGet(): Promise<Data> {\n    type Transaction = Resource<Rels.Transaction>;\n    type Store = Resource<Rels.Store>;\n\n    const appliedTax = await super._sendGet();\n    const [transaction, store] = await Promise.all([\n      super._fetch<Transaction>(appliedTax._links['fx:transaction'].href),\n      super._fetch<Store>(appliedTax._links['fx:store'].href),\n    ]);\n\n    this.__currency = transaction.currency_code;\n    this.__currencyDisplay = store.use_international_currency_symbol ? 'code' : 'symbol';\n\n    return appliedTax;\n  }\n}\n"]}

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

@@ -26,30 +26,44 @@ export class AttributeCard extends Base {
             var _a, _b;
             const { data } = this;
             return html `
-      ${this.renderTemplateOrSlot('name:before')}
+      <div>
+        ${this.renderTemplateOrSlot('name:before')}
 
-      <div class="flex items-center space-x-xs font-semibold">
-        <div class="truncate" title=${(_a = data === null || data === void 0 ? void 0 : data.name) !== null && _a !== void 0 ? _a : ''} data-testid="name">
-          ${(_b = data === null || data === void 0 ? void 0 : data.name) !== null && _b !== void 0 ? _b : html `&nbsp;`}
-        </div>
+        <div class="flex items-center space-x-xs font-medium">
+          <div class="truncate" title=${(_a = data === null || data === void 0 ? void 0 : data.name) !== null && _a !== void 0 ? _a : ''} data-testid="name">
+            ${(_b = data === null || data === void 0 ? void 0 : data.name) !== null && _b !== void 0 ? _b : html `&nbsp;`}
+          </div>
 
-        ${data && data.visibility !== 'public'
-                ? html `<iron-icon icon="icons:lock" class="icon-inline"></iron-icon>`
+          ${data && data.visibility !== 'public'
+                ? html `
+                <div class="flex items-center" style="height: 1px">
+                  <iron-icon icon="icons:lock" class="icon-inline"></iron-icon>
+                </div>
+              `
                 : ''}
-      </div>
+        </div>
 
-      ${this.renderTemplateOrSlot('name:after')}
+        ${this.renderTemplateOrSlot('name:after')}
+      </div>
     `;
         };
         this.__renderValue = () => {
             var _a, _b;
             const { data } = this;
             return html `
-      ${this.renderTemplateOrSlot('value:before')}
-      <div class="truncate text-tertiary" title=${(_a = data === null || data === void 0 ? void 0 : data.value) !== null && _a !== void 0 ? _a : ''} data-testid="value">
-        ${(_b = data === null || data === void 0 ? void 0 : data.value) !== null && _b !== void 0 ? _b : html `&nbsp;`}
+      <div>
+        ${this.renderTemplateOrSlot('value:before')}
+
+        <div
+          class="truncate text-tertiary text-s sm-text-m"
+          title=${(_a = data === null || data === void 0 ? void 0 : data.value) !== null && _a !== void 0 ? _a : ''}
+          data-testid="value"
+        >
+          ${(_b = data === null || data === void 0 ? void 0 : data.value) !== null && _b !== void 0 ? _b : html `&nbsp;`}
+        </div>
+
+        ${this.renderTemplateOrSlot('value:after')}
       </div>
-      ${this.renderTemplateOrSlot('value:after')}
     `;
         };
     }
@@ -60,9 +74,9 @@ export class AttributeCard extends Base {
         const isEmpty = this.in({ idle: 'template' });
         return html `
       <div
-        class="relative text-body text-m font-lumo leading-s sm-flex sm-justify-between"
         aria-live="polite"
         aria-busy=${this.in('busy')}
+        class="h-s flex flex-col justify-center relative text-body text-m font-lumo leading-xs sm-flex-row sm-items-center sm-justify-between"
       >
         ${hiddenSelector.matches('name', true) ? '' : this.__renderName()}
         ${hiddenSelector.matches('value', true) ? '' : this.__renderValue()}

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

@@ -1 +1 @@
-{"version":3,"file":"AttributeCard.js","sourceRoot":"","sources":["../../../../src/elements/public/AttributeCard/AttributeCard.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates } from './types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\n\nconst NS = 'attribute-card';\nconst Base = ResponsiveMixin(\n  TranslatableMixin(ConfigurableMixin(ThemeableMixin(NucleonElement)), NS)\n);\n\n/**\n * Basic card displaying an attribute.\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 *\n * @element foxy-attribute-card\n * @since 1.2.0\n */\nexport class AttributeCard extends Base<Data> {\n  templates: Templates = {};\n\n  private readonly __renderName = () => {\n    const { data } = this;\n\n    return html`\n      ${this.renderTemplateOrSlot('name:before')}\n\n      <div class=\"flex items-center space-x-xs font-semibold\">\n        <div class=\"truncate\" title=${data?.name ?? ''} data-testid=\"name\">\n          ${data?.name ?? html`&nbsp;`}\n        </div>\n\n        ${data && data.visibility !== 'public'\n          ? html`<iron-icon icon=\"icons:lock\" class=\"icon-inline\"></iron-icon>`\n          : ''}\n      </div>\n\n      ${this.renderTemplateOrSlot('name:after')}\n    `;\n  };\n\n  private readonly __renderValue = () => {\n    const { data } = this;\n\n    return html`\n      ${this.renderTemplateOrSlot('value:before')}\n      <div class=\"truncate text-tertiary\" title=${data?.value ?? ''} data-testid=\"value\">\n        ${data?.value ?? html`&nbsp;`}\n      </div>\n      ${this.renderTemplateOrSlot('value:after')}\n    `;\n  };\n\n  render(): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n    const isLoaded = this.in({ idle: 'snapshot' });\n    const isEmpty = this.in({ idle: 'template' });\n\n    return html`\n      <div\n        class=\"relative text-body text-m font-lumo leading-s sm-flex sm-justify-between\"\n        aria-live=\"polite\"\n        aria-busy=${this.in('busy')}\n      >\n        ${hiddenSelector.matches('name', true) ? '' : this.__renderName()}\n        ${hiddenSelector.matches('value', true) ? '' : this.__renderValue()}\n\n        <div\n          class=${classMap({\n            'transition duration-250 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': isLoaded,\n          })}\n        >\n          <foxy-spinner\n            data-testid=\"spinner\"\n            class=\"m-auto\"\n            state=${this.in('fail') ? 'error' : isEmpty ? '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":"AttributeCard.js","sourceRoot":"","sources":["../../../../src/elements/public/AttributeCard/AttributeCard.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,cAAc,EAAE,4CAAyC;AAClE,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAE7D,MAAM,EAAE,GAAG,gBAAgB,CAAC;AAC5B,MAAM,IAAI,GAAG,eAAe,CAC1B,iBAAiB,CAAC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,EAAE,EAAE,CAAC,CACzE,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,OAAO,aAAc,SAAQ,IAAU;IAA7C;;QACE,cAAS,GAAc,EAAE,CAAC;QAET,iBAAY,GAAG,GAAG,EAAE;;YACnC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;YAEtB,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;;;wCAGV,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,mCAAI,EAAE;cAC1C,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,mCAAI,IAAI,CAAA,QAAQ;;;YAG5B,IAAI,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ;gBACpC,CAAC,CAAC,IAAI,CAAA;;;;eAIH;gBACH,CAAC,CAAC,EAAE;;;UAGN,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC;;KAE5C,CAAC;QACJ,CAAC,CAAC;QAEe,kBAAa,GAAG,GAAG,EAAE;;YACpC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;YAEtB,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC;;;;kBAIjC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,mCAAI,EAAE;;;YAGvB,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,mCAAI,IAAI,CAAA,QAAQ;;;UAG7B,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;;KAE7C,CAAC;QACJ,CAAC,CAAC;IAkCJ,CAAC;IAhCC,MAAM;;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;QAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QAE9C,OAAO,IAAI,CAAA;;;oBAGK,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;;UAGzB,cAAc,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE;UAC/D,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE;;;kBAGzD,QAAQ,CAAC;YACf,2DAA2D,EAAE,IAAI;YACjE,+BAA+B,EAAE,QAAQ;SAC1C,CAAC;;;;;oBAKQ,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;mBACvD,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 { Data, Templates } from './types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\n\nconst NS = 'attribute-card';\nconst Base = ResponsiveMixin(\n  TranslatableMixin(ConfigurableMixin(ThemeableMixin(NucleonElement)), NS)\n);\n\n/**\n * Basic card displaying an attribute.\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 *\n * @element foxy-attribute-card\n * @since 1.2.0\n */\nexport class AttributeCard extends Base<Data> {\n  templates: Templates = {};\n\n  private readonly __renderName = () => {\n    const { data } = this;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('name:before')}\n\n        <div class=\"flex items-center space-x-xs font-medium\">\n          <div class=\"truncate\" title=${data?.name ?? ''} data-testid=\"name\">\n            ${data?.name ?? html`&nbsp;`}\n          </div>\n\n          ${data && data.visibility !== 'public'\n            ? html`\n                <div class=\"flex items-center\" style=\"height: 1px\">\n                  <iron-icon icon=\"icons:lock\" class=\"icon-inline\"></iron-icon>\n                </div>\n              `\n            : ''}\n        </div>\n\n        ${this.renderTemplateOrSlot('name:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderValue = () => {\n    const { data } = this;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('value:before')}\n\n        <div\n          class=\"truncate text-tertiary text-s sm-text-m\"\n          title=${data?.value ?? ''}\n          data-testid=\"value\"\n        >\n          ${data?.value ?? html`&nbsp;`}\n        </div>\n\n        ${this.renderTemplateOrSlot('value:after')}\n      </div>\n    `;\n  };\n\n  render(): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n    const isLoaded = this.in({ idle: 'snapshot' });\n    const isEmpty = this.in({ idle: 'template' });\n\n    return html`\n      <div\n        aria-live=\"polite\"\n        aria-busy=${this.in('busy')}\n        class=\"h-s flex flex-col justify-center relative text-body text-m font-lumo leading-xs sm-flex-row sm-items-center sm-justify-between\"\n      >\n        ${hiddenSelector.matches('name', true) ? '' : this.__renderName()}\n        ${hiddenSelector.matches('value', true) ? '' : this.__renderValue()}\n\n        <div\n          class=${classMap({\n            'transition duration-250 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': isLoaded,\n          })}\n        >\n          <foxy-spinner\n            data-testid=\"spinner\"\n            class=\"m-auto\"\n            state=${this.in('fail') ? 'error' : isEmpty ? '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/CartForm/CartForm.d.ts

@@ -1,20 +1,125 @@
 import type { PropertyDeclarations } from 'lit-element';
+import type { Templates, Data } from './types';
 import type { TemplateResult } from 'lit-html';
 import type { NucleonV8N } from '../NucleonElement/types';
-import type { Data } from './types';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
 declare const Base: typeof InternalForm & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
 };
+/**
+ * Form element for creating or editing carts (`fx:cart`).
+ *
+ * @slot customer-type:before
+ * @slot customer-type:after
+ *
+ * @slot customer:before
+ * @slot customer:after
+ *
+ * @slot template-set-uri:before
+ * @slot template-set-uri:after
+ *
+ * @slot items:before
+ * @slot items:after
+ *
+ * @slot applied-coupon-codes:before
+ * @slot applied-coupon-codes:after
+ *
+ * @slot custom-fields:before
+ * @slot custom-fields:after
+ *
+ * @slot attributes:before
+ * @slot attributes:after
+ *
+ * @slot billing-first-name:before
+ * @slot billing-first-name:after
+ *
+ * @slot billing-last-name:before
+ * @slot billing-last-name:after
+ *
+ * @slot billing-company:before
+ * @slot billing-company:after
+ *
+ * @slot billing-phone:before
+ * @slot billing-phone:after
+ *
+ * @slot billing-address-one:before
+ * @slot billing-address-one:after
+ *
+ * @slot billing-address-two:before
+ * @slot billing-address-two:after
+ *
+ * @slot billing-country:before
+ * @slot billing-country:after
+ *
+ * @slot billing-region:before
+ * @slot billing-region:after
+ *
+ * @slot billing-city:before
+ * @slot billing-city:after
+ *
+ * @slot billing-postal-code:before
+ * @slot billing-postal-code:after
+ *
+ * @slot shipping-first-name:before
+ * @slot shipping-first-name:after
+ *
+ * @slot shipping-last-name:before
+ * @slot shipping-last-name:after
+ *
+ * @slot shipping-company:before
+ * @slot shipping-company:after
+ *
+ * @slot shipping-phone:before
+ * @slot shipping-phone:after
+ *
+ * @slot shipping-address-one:before
+ * @slot shipping-address-one:after
+ *
+ * @slot shipping-address-two:before
+ * @slot shipping-address-two:after
+ *
+ * @slot shipping-country:before
+ * @slot shipping-country:after
+ *
+ * @slot shipping-region:before
+ * @slot shipping-region:after
+ *
+ * @slot shipping-city:before
+ * @slot shipping-city:after
+ *
+ * @slot shipping-postal-code:before
+ * @slot shipping-postal-code:after
+ *
+ * @slot view-as-customer:before
+ * @slot view-as-customer:after
+ *
+ * @slot delete:before
+ * @slot delete:after
+ *
+ * @slot create:before
+ * @slot create:after
+ *
+ * @element foxy-cart-form
+ * @since 1.21.0
+ */
 export declare class CartForm extends Base<Data> {
     static get properties(): PropertyDeclarations;
     static get v8n(): NucleonV8N<Data>;
+    /** URL of the `fx:item_categories` collection for the store. */
     itemCategories: string | null;
+    /** URL of the `fx:template_sets` collection for the store. */
     templateSets: string | null;
+    /** URL of the `fx:locale_codes` property helper. */
     localeCodes: string | null;
+    /** URL of the `fx:customers` collection for the store. */
     customers: string | null;
+    /** URL of the `fx:countries` property helper. */
     countries: string | null;
+    /** Template render functions mapped to their name. */
+    templates: Templates;
+    /** URL of the `fx:regions` property helper. */
     regions: string | null;
+    /** URL of the `fx:coupons` collection for the store. */
     coupons: string | null;
     private readonly __defaultTemplateSetLoaderId;
     private readonly __localeCodesHelperLoaderId;

package/dist/elements/public/CartForm/CartForm.js

@@ -7,15 +7,120 @@ import set from 'lodash-es/set';
 import get from 'lodash-es/get';
 const NS = 'cart-form';
 const Base = ResponsiveMixin(TranslatableMixin(InternalForm, NS));
+/**
+ * Form element for creating or editing carts (`fx:cart`).
+ *
+ * @slot customer-type:before
+ * @slot customer-type:after
+ *
+ * @slot customer:before
+ * @slot customer:after
+ *
+ * @slot template-set-uri:before
+ * @slot template-set-uri:after
+ *
+ * @slot items:before
+ * @slot items:after
+ *
+ * @slot applied-coupon-codes:before
+ * @slot applied-coupon-codes:after
+ *
+ * @slot custom-fields:before
+ * @slot custom-fields:after
+ *
+ * @slot attributes:before
+ * @slot attributes:after
+ *
+ * @slot billing-first-name:before
+ * @slot billing-first-name:after
+ *
+ * @slot billing-last-name:before
+ * @slot billing-last-name:after
+ *
+ * @slot billing-company:before
+ * @slot billing-company:after
+ *
+ * @slot billing-phone:before
+ * @slot billing-phone:after
+ *
+ * @slot billing-address-one:before
+ * @slot billing-address-one:after
+ *
+ * @slot billing-address-two:before
+ * @slot billing-address-two:after
+ *
+ * @slot billing-country:before
+ * @slot billing-country:after
+ *
+ * @slot billing-region:before
+ * @slot billing-region:after
+ *
+ * @slot billing-city:before
+ * @slot billing-city:after
+ *
+ * @slot billing-postal-code:before
+ * @slot billing-postal-code:after
+ *
+ * @slot shipping-first-name:before
+ * @slot shipping-first-name:after
+ *
+ * @slot shipping-last-name:before
+ * @slot shipping-last-name:after
+ *
+ * @slot shipping-company:before
+ * @slot shipping-company:after
+ *
+ * @slot shipping-phone:before
+ * @slot shipping-phone:after
+ *
+ * @slot shipping-address-one:before
+ * @slot shipping-address-one:after
+ *
+ * @slot shipping-address-two:before
+ * @slot shipping-address-two:after
+ *
+ * @slot shipping-country:before
+ * @slot shipping-country:after
+ *
+ * @slot shipping-region:before
+ * @slot shipping-region:after
+ *
+ * @slot shipping-city:before
+ * @slot shipping-city:after
+ *
+ * @slot shipping-postal-code:before
+ * @slot shipping-postal-code:after
+ *
+ * @slot view-as-customer:before
+ * @slot view-as-customer:after
+ *
+ * @slot delete:before
+ * @slot delete:after
+ *
+ * @slot create:before
+ * @slot create:after
+ *
+ * @element foxy-cart-form
+ * @since 1.21.0
+ */
 export class CartForm extends Base {
     constructor() {
         super(...arguments);
+        /** URL of the `fx:item_categories` collection for the store. */
         this.itemCategories = null;
+        /** URL of the `fx:template_sets` collection for the store. */
         this.templateSets = null;
+        /** URL of the `fx:locale_codes` property helper. */
         this.localeCodes = null;
+        /** URL of the `fx:customers` collection for the store. */
         this.customers = null;
+        /** URL of the `fx:countries` property helper. */
         this.countries = null;
+        /** Template render functions mapped to their name. */
+        this.templates = {};
+        /** URL of the `fx:regions` property helper. */
         this.regions = null;
+        /** URL of the `fx:coupons` collection for the store. */
         this.coupons = null;
         this.__defaultTemplateSetLoaderId = 'defaultTemplateSetLoader';
         this.__localeCodesHelperLoaderId = 'localeCodesLoader';
@@ -84,28 +189,28 @@ export class CartForm extends Base {
     }
     static get v8n() {
         return [
-            ({ billing_first_name: v }) => !v || v.length <= 50 || 'billing_first_name:v8n_too_long',
-            ({ billing_last_name: v }) => !v || v.length <= 50 || 'billing_last_name:v8n_too_long',
-            ({ billing_region: v }) => !v || v.length <= 50 || 'billing_region:v8n_too_long',
-            ({ billing_city: v }) => !v || v.length <= 50 || 'billing_city:v8n_too_long',
-            ({ billing_phone: v }) => !v || v.length <= 50 || 'billing_phone:v8n_too_long',
-            ({ billing_company: v }) => !v || v.length <= 50 || 'billing_company:v8n_too_long',
-            ({ billing_address2: v }) => !v || v.length <= 100 || 'billing_address2:v8n_too_long',
-            ({ billing_address1: v }) => !v || v.length <= 100 || 'billing_address1:v8n_too_long',
-            ({ billing_postal_code: v }) => !v || v.length <= 50 || 'billing_postal_code:v8n_too_long',
-            ({ shipping_first_name: v }) => !v || v.length <= 50 || 'shipping_first_name:v8n_too_long',
-            ({ shipping_last_name: v }) => !v || v.length <= 50 || 'shipping_last_name:v8n_too_long',
-            ({ shipping_region: v }) => !v || v.length <= 50 || 'shipping_region:v8n_too_long',
-            ({ shipping_city: v }) => !v || v.length <= 50 || 'shipping_city:v8n_too_long',
-            ({ shipping_phone: v }) => !v || v.length <= 50 || 'shipping_phone:v8n_too_long',
-            ({ shipping_company: v }) => !v || v.length <= 50 || 'shipping_company:v8n_too_long',
-            ({ shipping_address2: v }) => !v || v.length <= 100 || 'shipping_address2:v8n_too_long',
-            ({ shipping_address1: v }) => !v || v.length <= 100 || 'shipping_address1:v8n_too_long',
-            ({ shipping_postal_code: v }) => !v || v.length <= 50 || 'shipping_postal_code:v8n_too_long',
+            ({ billing_first_name: v }) => !v || v.length <= 50 || 'billing-first-name:v8n_too_long',
+            ({ billing_last_name: v }) => !v || v.length <= 50 || 'billing-last-name:v8n_too_long',
+            ({ billing_region: v }) => !v || v.length <= 50 || 'billing-region:v8n_too_long',
+            ({ billing_city: v }) => !v || v.length <= 50 || 'billing-city:v8n_too_long',
+            ({ billing_phone: v }) => !v || v.length <= 50 || 'billing-phone:v8n_too_long',
+            ({ billing_company: v }) => !v || v.length <= 50 || 'billing-company:v8n_too_long',
+            ({ billing_address2: v }) => !v || v.length <= 100 || 'billing-address-two:v8n_too_long',
+            ({ billing_address1: v }) => !v || v.length <= 100 || 'billing-address-one:v8n_too_long',
+            ({ billing_postal_code: v }) => !v || v.length <= 50 || 'billing-postal-code:v8n_too_long',
+            ({ shipping_first_name: v }) => !v || v.length <= 50 || 'shipping-first-name:v8n_too_long',
+            ({ shipping_last_name: v }) => !v || v.length <= 50 || 'shipping-last-name:v8n_too_long',
+            ({ shipping_region: v }) => !v || v.length <= 50 || 'shipping-region:v8n_too_long',
+            ({ shipping_city: v }) => !v || v.length <= 50 || 'shipping-city:v8n_too_long',
+            ({ shipping_phone: v }) => !v || v.length <= 50 || 'shipping-phone:v8n_too_long',
+            ({ shipping_company: v }) => !v || v.length <= 50 || 'shipping-company:v8n_too_long',
+            ({ shipping_address2: v }) => !v || v.length <= 100 || 'shipping-address-two:v8n_too_long',
+            ({ shipping_address1: v }) => !v || v.length <= 100 || 'shipping-address-one:v8n_too_long',
+            ({ shipping_postal_code: v }) => !v || v.length <= 50 || 'shipping-postal-code:v8n_too_long',
         ];
     }
     renderBody() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         const shippingRegions = Object.values((_a = this.__shippingRegions) !== null && _a !== void 0 ? _a : {});
         const billingRegions = Object.values((_b = this.__billingRegions) !== null && _b !== void 0 ? _b : {});
         const countries = Object.values((_c = this.__countriesHelper) !== null && _c !== void 0 ? _c : {});
@@ -136,14 +241,18 @@ export class CartForm extends Base {
       <foxy-item-card
         locale-codes=${this.localeCodes}
         parent=${ctx.parent}
-        style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
         infer=""
         href=${ctx.href}
         .related=${ctx.related}
       >
       </foxy-item-card>
     `;
-        const currencyDisplay = ((_e = this.__store) === null || _e === void 0 ? void 0 : _e.use_international_currency_symbol) ? 'code' : 'symbol';
+        const store = this.__store;
+        const currencyDisplay = store
+            ? store.use_international_currency_symbol
+                ? 'code'
+                : 'symbol'
+            : void 0;
         let currencyCode = null;
         if ('currency_code' in this.form) {
             // TODO: remove the directive below once the SDK is updated
@@ -152,10 +261,10 @@ export class CartForm extends Base {
         }
         else {
             const allLocaleCodes = this.__localeCodesHelper;
-            const localeCode = (_g = ((_f = this.__templateSet) !== null && _f !== void 0 ? _f : this.__defaultTemplateSet)) === null || _g === void 0 ? void 0 : _g.locale_code;
+            const localeCode = (_f = ((_e = this.__templateSet) !== null && _e !== void 0 ? _e : this.__defaultTemplateSet)) === null || _f === void 0 ? void 0 : _f.locale_code;
             const localeInfo = localeCode ? allLocaleCodes === null || allLocaleCodes === void 0 ? void 0 : allLocaleCodes.values[localeCode] : void 0;
             if (localeInfo)
-                currencyCode = (_j = (_h = /Currency: ([A-Z]{3})/g.exec(localeInfo)) === null || _h === void 0 ? void 0 : _h[1]) !== null && _j !== void 0 ? _j : null;
+                currencyCode = (_h = (_g = /Currency: ([A-Z]{3})/g.exec(localeInfo)) === null || _g === void 0 ? void 0 : _g[1]) !== null && _h !== void 0 ? _h : null;
         }
         return html `
       <foxy-nucleon
@@ -281,7 +390,7 @@ export class CartForm extends Base {
           first=${ifDefined(this.templateSets)}
           class="sm-col-span-2"
           infer="template-set-uri"
-          .selectedItem=${(_k = this.__templateSet) !== null && _k !== void 0 ? _k : null}
+          .selectedItem=${(_j = this.__templateSet) !== null && _j !== void 0 ? _j : null}
         >
         </foxy-internal-async-combo-box-control>
 
@@ -298,7 +407,7 @@ export class CartForm extends Base {
         <foxy-internal-async-list-control
           infer="applied-coupon-codes"
           class="min-w-0 sm-col-span-2"
-          first=${ifDefined((_l = this.data) === null || _l === void 0 ? void 0 : _l._links['fx:applied_coupon_codes'].href)}
+          first=${ifDefined((_k = this.data) === null || _k === void 0 ? void 0 : _k._links['fx:applied_coupon_codes'].href)}
           limit="5"
           item="foxy-applied-coupon-code-card"
           form=${ifDefined(this.data ? 'foxy-applied-coupon-code-form' : void 0)}
@@ -309,7 +418,7 @@ export class CartForm extends Base {
         <foxy-internal-async-list-control
           infer="custom-fields"
           class="min-w-0"
-          first=${ifDefined((_m = this.data) === null || _m === void 0 ? void 0 : _m._links['fx:custom_fields'].href)}
+          first=${ifDefined((_l = this.data) === null || _l === void 0 ? void 0 : _l._links['fx:custom_fields'].href)}
           limit="5"
           item="foxy-custom-field-card"
           form=${ifDefined(this.data ? 'foxy-custom-field-form' : void 0)}
@@ -320,7 +429,7 @@ export class CartForm extends Base {
         <foxy-internal-async-list-control
           infer="attributes"
           class="min-w-0"
-          first=${ifDefined((_o = this.data) === null || _o === void 0 ? void 0 : _o._links['fx:attributes'].href)}
+          first=${ifDefined((_m = this.data) === null || _m === void 0 ? void 0 : _m._links['fx:attributes'].href)}
           limit="5"
           item="foxy-attribute-card"
           form=${ifDefined(this.data ? 'foxy-attribute-form' : void 0)}
@@ -351,10 +460,18 @@ export class CartForm extends Base {
             <foxy-internal-text-control infer="billing-company"></foxy-internal-text-control>
             <foxy-internal-text-control infer="billing-phone"></foxy-internal-text-control>
 
-            <foxy-internal-text-control infer="billing-address1" class="col-span-2">
+            <foxy-internal-text-control
+              property="billing_address1"
+              infer="billing-address-one"
+              class="col-span-2"
+            >
             </foxy-internal-text-control>
 
-            <foxy-internal-text-control infer="billing-address2" class="col-span-2">
+            <foxy-internal-text-control
+              property="billing_address2"
+              infer="billing-address-two"
+              class="col-span-2"
+            >
             </foxy-internal-text-control>
 
             <foxy-internal-select-control infer="billing-country" .options=${countryOptions}>
@@ -391,10 +508,18 @@ export class CartForm extends Base {
             <foxy-internal-text-control infer="shipping-company"></foxy-internal-text-control>
             <foxy-internal-text-control infer="shipping-phone"></foxy-internal-text-control>
 
-            <foxy-internal-text-control infer="shipping-address1" class="col-span-2">
+            <foxy-internal-text-control
+              property="shipping_address1"
+              infer="shipping-address-one"
+              class="col-span-2"
+            >
             </foxy-internal-text-control>
 
-            <foxy-internal-text-control infer="shipping-address2" class="col-span-2">
+            <foxy-internal-text-control
+              property="shipping_address2"
+              infer="shipping-address-two"
+              class="col-span-2"
+            >
             </foxy-internal-text-control>
 
             <foxy-internal-select-control infer="shipping-country" .options=${countryOptions}>
@@ -567,7 +692,7 @@ export class CartForm extends Base {
     }
     __renderTotalOrder(currency, currencyDisplay) {
         const data = this.data;
-        if (!data)
+        if (!data || !currency || !currencyDisplay)
             return html `--`;
         const options = { amount: `${data.total_order} ${currency}`, currencyDisplay };
         return html `<foxy-i18n infer="totals" key="total_order" .options=${options}></foxy-i18n>`;
@@ -575,12 +700,13 @@ export class CartForm extends Base {
     __renderTotals(currency, currencyDisplay) {
         const keys = ['total_item_price', 'total_shipping', 'total_tax'];
         const data = this.data;
+        const isPriceReady = data && currency && currencyDisplay;
         return keys.map(key => {
             const options = { amount: `${data === null || data === void 0 ? void 0 : data[key]} ${currency}`, currencyDisplay };
             return html `
-        <div class="flex justify-between text-m text-secondary">
+        <div data-testid=${key} class="flex justify-between text-m text-secondary">
           <foxy-i18n key=${key} infer="totals"></foxy-i18n>
-          ${data
+          ${isPriceReady
                 ? html `<foxy-i18n infer="totals" key="price" .options=${options}></foxy-i18n>`
                 : html `<span>--</span>`}
         </div>
@@ -589,12 +715,16 @@ export class CartForm extends Base {
     }
     __renderDiscounts(currency, currencyDisplay) {
         var _a, _b;
-        return (_b = (_a = this.__discounts) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b._embedded['fx:discounts'].map(discount => {
+        const discounts = (_b = (_a = this.__discounts) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b._embedded['fx:discounts'];
+        const isPriceReady = currency && currencyDisplay;
+        return discounts === null || discounts === void 0 ? void 0 : discounts.map(discount => {
             const options = { amount: `${discount.amount} ${currency}`, currencyDisplay };
             return html `
-        <div class="flex justify-between text-m text-secondary">
+        <div data-testclass="discount" class="flex justify-between text-m text-secondary">
           <span>${discount.name} &bull; ${discount.code}</span>
-          <foxy-i18n infer="totals" key="price" .options=${options}></foxy-i18n>
+          ${isPriceReady
+                ? html `<foxy-i18n infer="totals" key="price" .options=${options}></foxy-i18n>`
+                : html `<span>--</span>`}
         </div>
       `;
         });