@foxy.io/elements 1.46.0-beta.1 → 1.46.0-beta.2

package/dist/cdn/foxy-admin-transaction-card.js

@@ -1 +1 @@
-import"./shared-34a87829.js";import"./shared-e2d5673b.js";import"./foxy-nucleon-element.js";import"./shared-3d353eb8.js";import{a as e}from"./shared-47f3f5f5.js";import{C as t}from"./shared-41c9c53f.js";import"./shared-8f9014ff.js";import{g as r}from"./shared-bab2ea2c.js";import{I as o}from"./shared-6740e365.js";import{i as s}from"./shared-53e42a77.js";import{h as i,s as n}from"./shared-ba5c42c7.js";import{c as a}from"./shared-4e709717.js";import"./shared-5a469962.js";import"./shared-66278c21.js";import"./shared-6bf89411.js";import"./shared-d4b77609.js";import"./shared-eb49be2e.js";import"./shared-bf8d95b9.js";import"./foxy-spinner.js";import"./shared-b2cbe727.js";import"./shared-930e68b7.js";import"./shared-9b138652.js";import"./shared-69c98b7b.js";import"./shared-cd96ff03.js";import"./shared-da4f9115.js";import"./shared-9496e995.js";import"./shared-791b4510.js";import"./shared-0e19bda5.js";let d,l,c,f,p,u,h,m,x,v,y=e=>e;const b=t(e(o,"admin-transaction-card"));class _ extends b{renderBody(){var e,t,o,a;const u=null===(e=this.__storeLoader)||void 0===e?void 0:e.data,h=this.data,m=null===(t=null==h?void 0:h._embedded)||void 0===t?void 0:t["fx:folder"],x=null===(o=null==h?void 0:h._embedded)||void 0===o?void 0:o["fx:items"],v=(null==h?void 0:h.display_id)||(h?r(h._links.self.href):""),b=(null==h?void 0:h.status)||"completed",_=null==h?void 0:h.source,g=null==h?void 0:h.type;return i(d||(d=y` <div class="flex items-center gap-xs"> <span class="font-medium">${0}</span> ${0} ${0} ${0} <span class="inline-flex flex-1">&ZeroWidthSpace;</span> ${0} <foxy-i18n options="${0}" infer="" class="text-s text-tertiary" key="time"> </foxy-i18n> </div> <div class="text-s text-secondary truncate"> ${0} ${0} </div> <div class="text-s text-secondary truncate"> ${0} ${0} (${0}) </div> <div class="text-s text-secondary truncate"> <foxy-i18n class="${0}" infer="" key="status_${0}"></foxy-i18n> </div> <foxy-nucleon infer="" class="hidden" href="${0}" id="storeLoader" @update="${0}"> </foxy-nucleon> `),v,m?this.__renderFolderBadge(m):"",_?this.__renderSourceBadge(_):"",(null==h?void 0:h.is_test)?this.__renderTestBadge():"",(null==h?void 0:h.hide_transaction)?i(l||(l=y` <vcf-tooltip for="hidden" theme="light" position="bottom"> <foxy-i18n infer="" key="hidden_hint"></foxy-i18n> </vcf-tooltip> <span class="inline-block text-s text-tertiary rounded-s cursor-default" id="hidden"> ${0} </span> `),n(c||(c=y`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" style="width: 1em; height: 1em;"><path d="M3 2a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3Z" /><path fill-rule="evenodd" d="M3 6h10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6Zm3 2.75A.75.75 0 0 1 6.75 8h2.5a.75.75 0 0 1 0 1.5h-2.5A.75.75 0 0 1 6 8.75Z" clip-rule="evenodd" /></svg>`))):"",JSON.stringify({value:null==h?void 0:h.transaction_date}),"updateinfo"!==g&&"subscription_cancellation"!==g?i(f||(f=y` <foxy-i18n options="${0}" class="whitespace-nowrap" infer="" key="price"> </foxy-i18n> <span>&bull;</span> `),JSON.stringify({currencyDisplay:(null==u?void 0:u.use_international_currency_symbol)?"code":"symbol",amount:`${null==h?void 0:h.total_order} ${null==h?void 0:h.currency_code}`})):"",x?i(p||(p=y` <foxy-i18n options="${0}" infer="" key="summary"> </foxy-i18n> `),JSON.stringify({count_minus_one:x.length-1,context:g,first_item:x[0],count:x.length})):"",null==h?void 0:h.customer_first_name,null==h?void 0:h.customer_last_name,null==h?void 0:h.customer_email,{pending_fraud_review:"text-error",declined:"text-error",rejected:"text-error",problem:"text-error"}[b]||"",b,s(null===(a=this.data)||void 0===a?void 0:a._links["fx:store"].href),(()=>this.requestUpdate()))}get isBodyReady(){var e,t;return super.isBodyReady&&(!(null===(e=this.data)||void 0===e?void 0:e._links["fx:store"])||!!(null===(t=this.__storeLoader)||void 0===t?void 0:t.data))}get __storeLoader(){return this.renderRoot.querySelector("#storeLoader")}__renderFolderBadge(e){var t,r;const o=null!==(t=e.color)&&void 0!==t?t:"",s={red:"bg-folder-red text-white",red_pale:"bg-folder-red-pale text-black",green:"bg-folder-green text-white",green_pale:"bg-folder-green-pale text-black",blue:"bg-folder-blue text-white",blue_pale:"bg-folder-blue-pale text-black",orange:"bg-folder-orange text-white",orange_pale:"bg-folder-orange-pale text-black",violet:"bg-folder-violet text-white",violet_pale:"bg-folder-violet-pale text-black"};return i(u||(u=y` <span class="${0}"> ${0} ${0} </span> `),a({"inline-flex items-center gap-xs text-s rounded-s px-xs":!0,"bg-contrast-5 text-body":!(o in s),[null!==(r=s[o])&&void 0!==r?r:""]:o in s}),n(h||(h=y`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" style="width: 1em; height: 1em;"><path d="M2 3.5A1.5 1.5 0 0 1 3.5 2h2.879a1.5 1.5 0 0 1 1.06.44l1.122 1.12A1.5 1.5 0 0 0 9.62 4H12.5A1.5 1.5 0 0 1 14 5.5v1.401a2.986 2.986 0 0 0-1.5-.401h-9c-.546 0-1.059.146-1.5.401V3.5ZM2 9.5v3A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5v-3A1.5 1.5 0 0 0 12.5 8h-9A1.5 1.5 0 0 0 2 9.5Z" /></svg>`)),(null==e?void 0:e.name)||i(m||(m=y`<foxy-i18n infer="" key="folder_no_name"></foxy-i18n>`)))}__renderSourceBadge(e){const t=e.substring(0,3).toUpperCase();return i(x||(x=y` <span class="cursor-default text-s px-xs bg-contrast-5 rounded-s" id="source"> ${0} </span> <vcf-tooltip for="source" theme="light" position="bottom"> <foxy-i18n infer="" key="source_${0}"></foxy-i18n> </vcf-tooltip> `),t,t)}__renderTestBadge(){return i(v||(v=y` <foxy-i18n infer="" class="inline-block text-s bg-contrast-5 rounded-s px-xs" key="test"> </foxy-i18n> `))}}customElements.define("foxy-admin-transaction-card",_);export{_ as AdminTransactionCard};
+import"./shared-34a87829.js";import"./shared-e2d5673b.js";import"./foxy-nucleon-element.js";import"./shared-3d353eb8.js";import{a as e}from"./shared-47f3f5f5.js";import{C as t}from"./shared-41c9c53f.js";import"./shared-8f9014ff.js";import{g as r}from"./shared-bab2ea2c.js";import{I as o}from"./shared-6740e365.js";import{i as s}from"./shared-53e42a77.js";import{h as i,s as a}from"./shared-ba5c42c7.js";import{c as n}from"./shared-4e709717.js";import"./shared-5a469962.js";import"./shared-66278c21.js";import"./shared-6bf89411.js";import"./shared-d4b77609.js";import"./shared-eb49be2e.js";import"./shared-bf8d95b9.js";import"./foxy-spinner.js";import"./shared-b2cbe727.js";import"./shared-930e68b7.js";import"./shared-9b138652.js";import"./shared-69c98b7b.js";import"./shared-cd96ff03.js";import"./shared-da4f9115.js";import"./shared-9496e995.js";import"./shared-791b4510.js";import"./shared-0e19bda5.js";let d,l,c,f,p,u,h,m,x,v,y=e=>e;const b=t(e(o,"admin-transaction-card"));class _ extends b{renderBody(){var e,t,o,n;const u=null===(e=this.__storeLoader)||void 0===e?void 0:e.data,h=this.data,m=null===(t=null==h?void 0:h._embedded)||void 0===t?void 0:t["fx:folder"],x=null===(o=null==h?void 0:h._embedded)||void 0===o?void 0:o["fx:items"],v=(null==h?void 0:h.display_id)||(h?r(h._links.self.href):""),b=(null==h?void 0:h.status)||"completed",_=null==h?void 0:h.source,g=null==h?void 0:h.type;return i(d||(d=y` <div class="flex items-center gap-xs"> <span class="font-medium">${0}</span> ${0} ${0} ${0} <span class="inline-flex flex-1">&ZeroWidthSpace;</span> ${0} <foxy-i18n options="${0}" infer="" class="text-s text-tertiary" key="time"> </foxy-i18n> </div> <div class="text-s text-secondary truncate"> ${0} ${0} </div> <div class="text-s text-secondary truncate"> ${0} ${0} (${0}) </div> <div class="text-s text-secondary truncate"> <foxy-i18n class="${0}" infer="" key="status_${0}"></foxy-i18n> </div> <foxy-nucleon infer="" class="hidden" href="${0}" id="storeLoader" @update="${0}"> </foxy-nucleon> `),v,m?this.__renderFolderBadge(m):"",_?this.__renderSourceBadge(_):"",(null==h?void 0:h.is_test)?this.__renderTestBadge():"",(null==h?void 0:h.hide_transaction)?i(l||(l=y` <vcf-tooltip for="hidden" theme="light" position="bottom" style="--lumo-base-color:black"> <foxy-i18n infer="" class="whitespace-nowrap" style="color:#fff" key="hidden_hint"> </foxy-i18n> </vcf-tooltip> <span class="inline-block text-s text-tertiary rounded-s cursor-default" id="hidden"> ${0} </span> `),a(c||(c=y`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" style="width: 1em; height: 1em;"><path d="M3 2a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3Z" /><path fill-rule="evenodd" d="M3 6h10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6Zm3 2.75A.75.75 0 0 1 6.75 8h2.5a.75.75 0 0 1 0 1.5h-2.5A.75.75 0 0 1 6 8.75Z" clip-rule="evenodd" /></svg>`))):"",JSON.stringify({value:null==h?void 0:h.transaction_date}),"updateinfo"!==g&&"subscription_cancellation"!==g?i(f||(f=y` <foxy-i18n options="${0}" class="whitespace-nowrap" infer="" key="price"> </foxy-i18n> <span>&bull;</span> `),JSON.stringify({currencyDisplay:(null==u?void 0:u.use_international_currency_symbol)?"code":"symbol",amount:`${null==h?void 0:h.total_order} ${null==h?void 0:h.currency_code}`})):"",x?i(p||(p=y` <foxy-i18n options="${0}" infer="" key="summary"> </foxy-i18n> `),JSON.stringify({count_minus_one:x.length-1,context:g,first_item:x[0],count:x.length})):"",null==h?void 0:h.customer_first_name,null==h?void 0:h.customer_last_name,null==h?void 0:h.customer_email,{pending_fraud_review:"text-error",declined:"text-error",rejected:"text-error",problem:"text-error"}[b]||"",b,s(null===(n=this.data)||void 0===n?void 0:n._links["fx:store"].href),(()=>this.requestUpdate()))}get isBodyReady(){var e,t;return super.isBodyReady&&(!(null===(e=this.data)||void 0===e?void 0:e._links["fx:store"])||!!(null===(t=this.__storeLoader)||void 0===t?void 0:t.data))}get __storeLoader(){return this.renderRoot.querySelector("#storeLoader")}__renderFolderBadge(e){var t,r;const o=null!==(t=e.color)&&void 0!==t?t:"",s={red:"bg-folder-red text-white",red_pale:"bg-folder-red-pale text-black",green:"bg-folder-green text-white",green_pale:"bg-folder-green-pale text-black",blue:"bg-folder-blue text-white",blue_pale:"bg-folder-blue-pale text-black",orange:"bg-folder-orange text-white",orange_pale:"bg-folder-orange-pale text-black",violet:"bg-folder-violet text-white",violet_pale:"bg-folder-violet-pale text-black"};return i(u||(u=y` <span class="${0}"> ${0} ${0} </span> `),n({"inline-flex items-center gap-xs text-s rounded-s px-xs":!0,"bg-contrast-5 text-body":!(o in s),[null!==(r=s[o])&&void 0!==r?r:""]:o in s}),a(h||(h=y`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" style="width: 1em; height: 1em;"><path d="M2 3.5A1.5 1.5 0 0 1 3.5 2h2.879a1.5 1.5 0 0 1 1.06.44l1.122 1.12A1.5 1.5 0 0 0 9.62 4H12.5A1.5 1.5 0 0 1 14 5.5v1.401a2.986 2.986 0 0 0-1.5-.401h-9c-.546 0-1.059.146-1.5.401V3.5ZM2 9.5v3A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5v-3A1.5 1.5 0 0 0 12.5 8h-9A1.5 1.5 0 0 0 2 9.5Z" /></svg>`)),(null==e?void 0:e.name)||i(m||(m=y`<foxy-i18n infer="" key="folder_no_name"></foxy-i18n>`)))}__renderSourceBadge(e){const t=e.substring(0,3).toUpperCase();return i(x||(x=y` <span class="cursor-default text-s px-xs bg-contrast-5 rounded-s" id="source"> ${0} </span> <vcf-tooltip for="source" theme="light" position="bottom" style="--lumo-base-color:black"> <foxy-i18n infer="" class="whitespace-nowrap" style="color:#fff" key="source_${0}"> </foxy-i18n> </vcf-tooltip> `),t,t)}__renderTestBadge(){return i(v||(v=y` <foxy-i18n infer="" class="inline-block text-s bg-contrast-5 rounded-s px-xs" key="test"> </foxy-i18n> `))}}customElements.define("foxy-admin-transaction-card",_);export{_ as AdminTransactionCard};

package/dist/cdn/foxy-store-transaction-folder-form.js

@@ -1 +1 @@
-import"./shared-28ceb7f7.js";import"./shared-64231b81.js";import"./shared-5c8931a0.js";import{I as e}from"./shared-fc155659.js";import{I as r}from"./shared-0b8768db.js";import{_ as t}from"./shared-8f9014ff.js";import{c as s}from"./shared-4e709717.js";import{h as o,s as a}from"./shared-ba5c42c7.js";import{a as i}from"./shared-47f3f5f5.js";import"./shared-3d353eb8.js";import"./shared-930e68b7.js";import"./shared-34a87829.js";import"./shared-5a469962.js";import"./shared-66278c21.js";import"./shared-6bf89411.js";import"./shared-d4b77609.js";import"./shared-eb49be2e.js";import"./shared-bf8d95b9.js";import"./shared-b3fe8c63.js";import"./shared-e55c8dc4.js";import"./shared-27c16d99.js";import"./shared-0e25ac65.js";import"./shared-360196ad.js";import"./shared-53e42a77.js";import"./shared-d0aed1c1.js";import"./shared-1c985317.js";import"./shared-58add5b4.js";import"./shared-69c98b7b.js";import"./shared-41c9c53f.js";import"./foxy-copy-to-clipboard.js";import"./shared-b2cbe727.js";import"./foxy-spinner.js";import"./shared-bab2ea2c.js";import"./shared-9b138652.js";import"./shared-cd96ff03.js";import"./shared-da4f9115.js";import"./shared-9496e995.js";import"./shared-791b4510.js";import"./shared-0e19bda5.js";import"./shared-5212ef4f.js";let l,n,d,c=e=>e;customElements.define("foxy-internal-store-transaction-folder-color-control",class extends r{constructor(){super(...arguments),this.colors={}}static get properties(){return t(t({},super.properties),{},{colors:{type:Object}})}renderControl(){const e=this._value in this.colors?this._value:"";return o(l||(l=c` <div class="flex flex-wrap items-center justify-center gap-s flex-shrink-0"> ${0} </div> `),Object.entries(this.colors).map((([r,t])=>{const a=r===e;return o(n||(n=c` <div class="${0}"> <div style="width:1.25em;height:1.25em;padding:2px" class="${0}"> <div class="${0}"></div> </div> ${0} </div> `),s({"relative p-s -m-s rounded-s":!0,"group transform transition-transform":!0,"focus-within-ring-2 focus-within-ring-primary-50":!0,"cursor-pointer hover-scale-150":!a&&!this.disabled&&!this.readonly}),s({"relative rounded-full transition-all":!0,"ring-1 ring-contrast-10":!a,"ring-2 ring-contrast-80":a&&!this.disabled,"ring-2 ring-contrast-10":a&&this.disabled}),s({"w-full h-full rounded-full transition-opacity":!0,"opacity-25":this.disabled,[t]:!0}),this.readonly?"":o(d||(d=c` <input aria-label="${0}" class="absolute inset-0 block w-full h-full opacity-0" value="${0}" name="color" type="radio" ?disabled="${0}" ?checked="${0}" @change="${0}"> `),this.t(`color_${r||"none"}`),r,this.disabled,a,(()=>this._value=r)))})))}});let h,f,m=e=>e;const p=i(e,"store-transaction-folder-form");class b extends p{renderBody(){const e={red:"bg-folder-red text-white",red_pale:"bg-folder-red-pale text-black",green:"bg-folder-green text-white",green_pale:"bg-folder-green-pale text-black",blue:"bg-folder-blue text-white",blue_pale:"bg-folder-blue-pale text-black",orange:"bg-folder-orange text-white",orange_pale:"bg-folder-orange-pale text-black",violet:"bg-folder-violet text-white",violet_pale:"bg-folder-violet-pale text-black","":"bg-contrast-5 text-body"},r=this.form.color&&this.form.color in e?this.form.color:"";return o(h||(h=m` <foxy-internal-summary-control infer="group-one"> <div class="flex flex-col items-center justify-center gap-m bg-transparent"> <div class="flex items-center p-m rounded-full ${0}"> ${0} </div> <foxy-internal-text-control layout="pill" infer="name"></foxy-internal-text-control> <foxy-internal-store-transaction-folder-color-control infer="color" .colors="${0}"> </foxy-internal-store-transaction-folder-color-control> </div> </foxy-internal-summary-control> <foxy-internal-summary-control infer="group-two"> <foxy-internal-switch-control infer="is-default" .trueAlias="${0}" .falseAlias="${0}"> </foxy-internal-switch-control> </foxy-internal-summary-control> ${0} `),e[r],a(f||(f=m`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="width: 2em; height: 2em;"><path d="M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z" /></svg>`)),e,1,0,super.renderBody())}submit(){this.form.name||this.edit({name:this.t("group-one.name.placeholder")}),super.submit()}async _fetch(...e){try{return await super._fetch(...e)}catch(e){let r;try{r=(await e.json())._embedded["fx:errors"][0].message}catch(r){throw e}throw r.includes("it has transactions in it")?["error:folder_not_empty"]:e}}}customElements.define("foxy-store-transaction-folder-form",b);export{b as StoreTransactionFolderForm};
+import"./shared-28ceb7f7.js";import"./shared-64231b81.js";import"./shared-5c8931a0.js";import{I as e}from"./shared-fc155659.js";import{I as r}from"./shared-0b8768db.js";import{_ as t}from"./shared-8f9014ff.js";import{c as o}from"./shared-4e709717.js";import{h as s,s as a}from"./shared-ba5c42c7.js";import{a as i}from"./shared-47f3f5f5.js";import"./shared-3d353eb8.js";import"./shared-930e68b7.js";import"./shared-34a87829.js";import"./shared-5a469962.js";import"./shared-66278c21.js";import"./shared-6bf89411.js";import"./shared-d4b77609.js";import"./shared-eb49be2e.js";import"./shared-bf8d95b9.js";import"./shared-b3fe8c63.js";import"./shared-e55c8dc4.js";import"./shared-27c16d99.js";import"./shared-0e25ac65.js";import"./shared-360196ad.js";import"./shared-53e42a77.js";import"./shared-d0aed1c1.js";import"./shared-1c985317.js";import"./shared-58add5b4.js";import"./shared-69c98b7b.js";import"./shared-41c9c53f.js";import"./foxy-copy-to-clipboard.js";import"./shared-b2cbe727.js";import"./foxy-spinner.js";import"./shared-bab2ea2c.js";import"./shared-9b138652.js";import"./shared-cd96ff03.js";import"./shared-da4f9115.js";import"./shared-9496e995.js";import"./shared-791b4510.js";import"./shared-0e19bda5.js";import"./shared-5212ef4f.js";let l,n,d,c=e=>e;customElements.define("foxy-internal-store-transaction-folder-color-control",class extends r{constructor(){super(...arguments),this.colors={}}static get properties(){return t(t({},super.properties),{},{colors:{type:Object}})}renderControl(){const e=this._value in this.colors?this._value:"";return s(l||(l=c` <div class="flex gap-s"> <div class="mr-auto">${0}</div> <div class="flex flex-wrap justify-end items-center gap-s"> ${0} </div> </div> `),this.label,Object.entries(this.colors).map((([r,t])=>{const a=r===e;return s(n||(n=c` <div class="${0}"> <div style="width:1em;height:1em;padding:2px" class="${0}"> <div class="${0}"></div> </div> ${0} </div> `),o({"relative p-s -m-s rounded-s flex-shrink-0":!0,"group transform transition-transform":!0,"focus-within-ring-2 focus-within-ring-primary-50":!0,"cursor-pointer hover-scale-150":!a&&!this.disabled&&!this.readonly}),o({"relative rounded-full transition-all":!0,"ring-1 ring-contrast-10":!a,"ring-2 ring-contrast-80":a&&!this.disabled,"ring-2 ring-contrast-10":a&&this.disabled}),o({"w-full h-full rounded-full transition-opacity":!0,"opacity-25":this.disabled,[t]:!0}),this.readonly?"":s(d||(d=c` <input aria-label="${0}" class="${0}" value="${0}" name="color" type="radio" ?disabled="${0}" ?checked="${0}" @change="${0}"> `),this.t(`color_${r||"none"}`),o({"absolute inset-0 block w-full h-full opacity-0":!0,"cursor-pointer":!a&&!this.disabled&&!this.readonly}),r,this.disabled,a,(()=>this._value=r)))})))}});let m,h,f=e=>e;const p=i(e,"store-transaction-folder-form");class b extends p{renderBody(){var e;const r={red:"bg-folder-red text-white",red_pale:"bg-folder-red-pale text-black",green:"bg-folder-green text-white",green_pale:"bg-folder-green-pale text-black",blue:"bg-folder-blue text-white",blue_pale:"bg-folder-blue-pale text-black",orange:"bg-folder-orange text-white",orange_pale:"bg-folder-orange-pale text-black",violet:"bg-folder-violet text-white",violet_pale:"bg-folder-violet-pale text-black","":"bg-contrast-5 text-body"},t=this.form.color&&this.form.color in r?this.form.color:"";return s(m||(m=f` <foxy-internal-summary-control infer="" label="" helper-text=""> <div class="flex flex-col items-center justify-center gap-m bg-transparent"> <div class="flex items-center p-m rounded-full ${0}"> ${0} </div> <p class="text-xl font-medium"> ${0} </p> </div> </foxy-internal-summary-control> <foxy-internal-summary-control infer="group-one"> <foxy-internal-text-control layout="summary-item" infer="name"></foxy-internal-text-control> <foxy-internal-store-transaction-folder-color-control infer="color" .colors="${0}"> </foxy-internal-store-transaction-folder-color-control> </foxy-internal-summary-control> <foxy-internal-summary-control infer="group-two"> <foxy-internal-switch-control infer="is-default" .trueAlias="${0}" .falseAlias="${0}"> </foxy-internal-switch-control> </foxy-internal-summary-control> ${0} `),r[t],a(h||(h=f`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="width: 2em; height: 2em;"><path d="M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z" /></svg>`)),(null===(e=this.form.name)||void 0===e?void 0:e.trim())||this.t("group-one.name.placeholder"),r,1,0,super.renderBody())}submit(){var e;(null===(e=this.form.name)||void 0===e?void 0:e.trim())||this.edit({name:this.t("group-one.name.placeholder")}),super.submit()}async _fetch(...e){try{return await super._fetch(...e)}catch(e){let r;try{r=(await e.json())._embedded["fx:errors"][0].message}catch(r){throw e}throw r.includes("it has transactions in it")?["error:folder_not_empty"]:e}}}customElements.define("foxy-store-transaction-folder-form",b);export{b as StoreTransactionFolderForm};

package/dist/cdn/foxy-subscription-card.js

@@ -1 +1 @@
-import"./shared-34a87829.js";import"./shared-b2cbe727.js";import"./shared-d4b77609.js";import"./shared-5212ef4f.js";import"./foxy-spinner.js";import"./shared-3d353eb8.js";import{_ as s}from"./shared-8f9014ff.js";import{h as t}from"./shared-ba5c42c7.js";import{C as e}from"./shared-41c9c53f.js";import{N as i}from"./shared-9b138652.js";import{R as n,T as r,a}from"./shared-47f3f5f5.js";import{c as o}from"./shared-4e709717.js";import{p as d}from"./shared-8498f274.js";import{a as m,g as l}from"./shared-96e4f603.js";import"./shared-5a469962.js";import"./shared-66278c21.js";import"./shared-6bf89411.js";import"./shared-bf8d95b9.js";import"./shared-eb49be2e.js";import"./shared-930e68b7.js";import"./shared-53e42a77.js";import"./shared-69c98b7b.js";import"./shared-cd96ff03.js";import"./shared-da4f9115.js";import"./shared-9496e995.js";import"./shared-791b4510.js";import"./shared-0e19bda5.js";let c,p=s=>s;const f=e(n(r(a(i,"subscription-card"))));class h extends f{constructor(){super(...arguments),this.settings=null}static get properties(){return s(s({},super.properties),{},{settings:{type:Object}})}render(){var s,e,i,n,r;const a=this.settings?m(this.data,this.settings):l(this.data),d="failed"===a,f=(null==a?void 0:a.startsWith("next_payment"))||!!(null==a?void 0:a.startsWith("will_end")),h=!f&&!d;return t(c||(c=p` <div class="relative text-left"> <div class="${0}"> <div class="${0}"> <iron-icon class="m-auto" icon="${0}"> </iron-icon> </div> <div class="flex-1 min-w-0 leading-xs flex flex-col sm-flex-row sm-items-center"> <div class="order-1 sm-order-0"> <div class="text-body font-medium origin-top-left text-m"> <foxy-i18n data-testid="summary" options="${0}" lang="${0}" key="transaction_summary" ns="${0}"> </foxy-i18n> &#8203; </div> <div class="${0}"> <foxy-i18n data-testid="status" lang="${0}" key="status_${0}" ns="${0}" .options="${0}"> </foxy-i18n> &#8203; </div> </div> <div class="flex-1 leading-xs mb-xs sm-mb-0 sm-text-right order-0 sm-order-1"> <foxy-i18n data-testid="price" options="${0}" class="text-xxs sm-text-l font-tnum tracking-wide sm-tracking-normal uppercase sm-normal-case font-medium text-secondary sm-text-body sm-block" lang="${0}" key="price${0}" ns="${0}"> </foxy-i18n> <span class="text-secondary font-medium sm-font-normal sm-block text-xxs sm-text-s"> <span class="sm-hidden">(</span><span class="hidden sm-inline">*</span><foxy-i18n infer="" key="fees_hint"></foxy-i18n><span class="sm-hidden">)</span> <iron-icon id="hint" icon="icons:info-outline" class="icon-inline"></iron-icon> <vcf-tooltip for="hint" position="bottom"> <span class="text-s"><foxy-i18n infer="" key="fees_explainer"></foxy-i18n></span> </vcf-tooltip> <span> &#8203; </span></span></div> </div> </div> <div data-testid="spinner" class="${0}"> <foxy-spinner state="${0}" class="m-auto" lang="${0}" ns="${0} ${0}"> </foxy-spinner> </div> </div> ${0} `),o({"flex items-start sm-items-center space-x-m transition duration-150 ease-in-out":!0,"opacity-0":!this.in({idle:"snapshot"})}),o({"min-w-0 flex-shrink-0 rounded-full relative flex p-s":!0,"text-success bg-success-10":f,"text-body bg-contrast-5":h,"text-error bg-error-10":d}),d?"error-outline":f?"done":"done-all",JSON.stringify(this.__getSummaryOptions()),this.lang,this.ns,o({"text-m":!0,"text-tertiary":h,"text-success":f,"text-error":d}),this.lang,a,this.ns,this.data,JSON.stringify(this.__getPriceOptions()),this.lang,null===(e=null===(s=this.settings)||void 0===s?void 0:s.cart_display_config.show_sub_frequency)||void 0===e||e?"_"+(".5m"===(null===(i=this.data)||void 0===i?void 0:i.frequency)?"twice_a_month":"recurring"):"",this.ns,o({"pointer-events-none absolute inset-0 flex transition ease-in-out duration-150":!0,"opacity-0":this.in({idle:"snapshot"})}),this.in("fail")?"error":this.in({idle:"template"})?"empty":"busy",this.lang,this.ns,null!==(r=null===(n=customElements.get("foxy-spinner"))||void 0===n?void 0:n.defaultNS)&&void 0!==r?r:"",this.renderTemplateOrSlot())}__getSummaryOptions(){if(null===this.data)return{};const s=this.data._embedded["fx:transaction_template"]._embedded["fx:items"];return{count_minus_one:s.length-1,first_item:s[0],count:s.length}}__getPriceOptions(){if(null===this.data)return{};const t=this.data._embedded["fx:transaction_template"],e=`${t.total_order} ${t.currency_code}`;return s(s({},d(this.data.frequency)),{},{amount:e})}}customElements.define("foxy-subscription-card",h);export{h as SubscriptionCard};
+import"./shared-34a87829.js";import"./shared-b2cbe727.js";import"./shared-d4b77609.js";import"./shared-5212ef4f.js";import"./foxy-spinner.js";import"./shared-3d353eb8.js";import{_ as s}from"./shared-8f9014ff.js";import{h as t}from"./shared-ba5c42c7.js";import{C as e}from"./shared-41c9c53f.js";import{N as i}from"./shared-9b138652.js";import{R as n,T as r,a}from"./shared-47f3f5f5.js";import{c as o}from"./shared-4e709717.js";import{p as d}from"./shared-8498f274.js";import{a as l,g as m}from"./shared-96e4f603.js";import"./shared-5a469962.js";import"./shared-66278c21.js";import"./shared-6bf89411.js";import"./shared-bf8d95b9.js";import"./shared-eb49be2e.js";import"./shared-930e68b7.js";import"./shared-53e42a77.js";import"./shared-69c98b7b.js";import"./shared-cd96ff03.js";import"./shared-da4f9115.js";import"./shared-9496e995.js";import"./shared-791b4510.js";import"./shared-0e19bda5.js";let c,f=s=>s;const p=e(n(r(a(i,"subscription-card"))));class h extends p{constructor(){super(...arguments),this.settings=null}static get properties(){return s(s({},super.properties),{},{settings:{type:Object}})}render(){var s,e,i,n,r;const a=this.settings?l(this.data,this.settings):m(this.data),d="failed"===a,p=(null==a?void 0:a.startsWith("next_payment"))||!!(null==a?void 0:a.startsWith("will_end")),h=!p&&!d;return t(c||(c=f` <div class="relative text-left"> <div class="${0}"> <div class="${0}"> <iron-icon class="m-auto" icon="${0}"> </iron-icon> </div> <div class="flex-1 min-w-0 leading-xs flex flex-col sm-flex-row sm-items-center"> <div class="order-1 sm-order-0"> <div class="text-body font-medium origin-top-left text-m"> <foxy-i18n data-testid="summary" options="${0}" lang="${0}" key="transaction_summary" ns="${0}"> </foxy-i18n> &#8203; </div> <div class="${0}"> <foxy-i18n data-testid="status" lang="${0}" key="status_${0}" ns="${0}" .options="${0}"> </foxy-i18n> &#8203; </div> </div> <div class="flex-1 leading-xs mb-xs sm-mb-0 sm-text-right order-0 sm-order-1"> <foxy-i18n data-testid="price" options="${0}" class="text-xxs sm-text-l font-tnum tracking-wide sm-tracking-normal uppercase sm-normal-case font-medium text-secondary sm-text-body sm-block" lang="${0}" key="price${0}" ns="${0}"> </foxy-i18n> <span class="text-secondary font-medium sm-font-normal sm-block text-xxs sm-text-s"> <span class="sm-hidden">(</span> <span class="hidden sm-inline">*</span> <foxy-i18n infer="" key="fees_hint"></foxy-i18n> <span class="sm-hidden">)</span> <iron-icon id="hint" icon="icons:info-outline" class="icon-inline"></iron-icon> <vcf-tooltip position="bottom" style="--lumo-base-color:black" theme="light" for="hint"> <foxy-i18n infer="" class="text-s whitespace-nowrap" style="color:#fff" key="fees_explainer"> </foxy-i18n> </vcf-tooltip> </span> &#8203; </div> </div> </div> <div data-testid="spinner" class="${0}"> <foxy-spinner state="${0}" class="m-auto" lang="${0}" ns="${0} ${0}"> </foxy-spinner> </div> </div> ${0} `),o({"flex items-start sm-items-center space-x-m transition duration-150 ease-in-out":!0,"opacity-0":!this.in({idle:"snapshot"})}),o({"min-w-0 flex-shrink-0 rounded-full relative flex p-s":!0,"text-success bg-success-10":p,"text-body bg-contrast-5":h,"text-error bg-error-10":d}),d?"error-outline":p?"done":"done-all",JSON.stringify(this.__getSummaryOptions()),this.lang,this.ns,o({"text-m":!0,"text-tertiary":h,"text-success":p,"text-error":d}),this.lang,a,this.ns,this.data,JSON.stringify(this.__getPriceOptions()),this.lang,null===(e=null===(s=this.settings)||void 0===s?void 0:s.cart_display_config.show_sub_frequency)||void 0===e||e?"_"+(".5m"===(null===(i=this.data)||void 0===i?void 0:i.frequency)?"twice_a_month":"recurring"):"",this.ns,o({"pointer-events-none absolute inset-0 flex transition ease-in-out duration-150":!0,"opacity-0":this.in({idle:"snapshot"})}),this.in("fail")?"error":this.in({idle:"template"})?"empty":"busy",this.lang,this.ns,null!==(r=null===(n=customElements.get("foxy-spinner"))||void 0===n?void 0:n.defaultNS)&&void 0!==r?r:"",this.renderTemplateOrSlot())}__getSummaryOptions(){if(null===this.data)return{};const s=this.data._embedded["fx:transaction_template"]._embedded["fx:items"];return{count_minus_one:s.length-1,first_item:s[0],count:s.length}}__getPriceOptions(){if(null===this.data)return{};const t=this.data._embedded["fx:transaction_template"],e=`${t.total_order} ${t.currency_code}`;return s(s({},d(this.data.frequency)),{},{amount:e})}}customElements.define("foxy-subscription-card",h);export{h as SubscriptionCard};

package/dist/cdn/foxy-transaction-card.js

@@ -1 +1 @@
-import"./shared-34a87829.js";import"./shared-5212ef4f.js";import"./shared-e2d5673b.js";import"./shared-3d353eb8.js";import"./shared-8f9014ff.js";import{g as e}from"./shared-bab2ea2c.js";import{C as t}from"./shared-41c9c53f.js";import{a as s}from"./shared-47f3f5f5.js";import{I as i}from"./shared-6740e365.js";import{c as r}from"./shared-4e709717.js";import{h as o}from"./shared-ba5c42c7.js";import"./shared-5a469962.js";import"./shared-66278c21.js";import"./shared-6bf89411.js";import"./shared-d4b77609.js";import"./shared-eb49be2e.js";import"./shared-bf8d95b9.js";import"./foxy-spinner.js";import"./shared-b2cbe727.js";import"./shared-930e68b7.js";import"./shared-53e42a77.js";import"./shared-9b138652.js";import"./shared-69c98b7b.js";import"./shared-cd96ff03.js";import"./shared-da4f9115.js";import"./shared-9496e995.js";import"./shared-791b4510.js";import"./shared-0e19bda5.js";let n,a,d,c,l,p,u,m,f,h,y,v,_,x,b,$,g=e=>e;const j=t(s(i,"transaction-card"));class S extends j{constructor(){super(...arguments),this.__currencyDisplay=""}renderBody(){var e,t;const s=this.hiddenSelector,i=!s.matches("total",!0),d=!s.matches("status",!0);return o(n||(n=g` <div aria-busy="${0}" aria-live="polite" class="relative leading-s font-lumo text-m"> <div class="${0}"> ${0} ${0} ${0} </div> <div class="${0}"> <foxy-spinner data-testid="spinner" state="${0}" class="m-auto" lang="${0}" ns="${0} ${0}"> </foxy-spinner> </div> </div> `),this.in("busy"),r({"transition-opacity":!0,"opacity-0":!this.data}),i||d?o(a||(a=g` <div class="flex items-center justify-between gap-s"> ${0} ${0} </div> `),i?this.__renderIdAndTotal():"",d?this.__renderStatus():""):"",s.matches("description",!0)?"":this.__renderSummary(),s.matches("customer",!0)?"":this.__renderCustomer(),r({"pointer-events-none absolute inset-0 flex transition-opacity":!0,"opacity-0":!!this.data}),this.in("fail")?"error":this.in({idle:"template"})?"empty":"busy",this.lang,this.ns,null!==(t=null===(e=customElements.get("foxy-spinner"))||void 0===e?void 0:e.defaultNS)&&void 0!==t?t:"")}async _sendGet(){var e;const t=await super._sendGet(),s=null===(e=t._links["fx:store"])||void 0===e?void 0:e.href;if("string"==typeof s){const e=await super._fetch(s);this.__currencyDisplay=e.use_international_currency_symbol?"code":"symbol"}else this.__currencyDisplay="symbol";return t}__renderIdAndTotal(){const t=this.data;let s;if(t){const i={amount:`${t.total_order} ${t.currency_code}`,currencyDisplay:this.__currencyDisplay};s=o(d||(d=g` <span class="truncate">ID ${0}</span> ${0} ${0} `),t.display_id||e(t._links.self.href),"updateinfo"!==t.type&&"subscription_cancellation"!==t.type?o(c||(c=g` <span>&bull;</span> <foxy-i18n .options="${0}" infer="" class="whitespace-nowrap" key="price"> </foxy-i18n> `),i):"",(null==t?void 0:t.is_test)?o(l||(l=g` <foxy-i18n infer="" class="inline-block text-xs font-medium uppercase bg-contrast-5 text-tertiary rounded-s p-xs leading-none tracking-wider" key="test"> </foxy-i18n> `)):"")}else s=o(p||(p=g`&ZeroWidthSpace;`));return o(u||(u=g` <div class="min-w-0" data-testid="total"> ${0} <div class="font-medium flex items-center gap-xs">${0}</div> ${0} </div> `),this.renderTemplateOrSlot("total:before"),s,this.renderTemplateOrSlot("total:after"))}__renderStatus(){var e,t,s,i,r,n,a;const d=(null===(e=this.data)||void 0===e?void 0:e.status)||"completed",c=null===(s=null===(t=this.data)||void 0===t?void 0:t.source)||void 0===s?void 0:s.substring(0,3).toUpperCase();return o(m||(m=g` <div class="flex-shrink-0" data-testid="status"> ${0} <div class="text-tertiary text-s flex items-center space-x-xs"> ${0} ${0} <foxy-i18n options="${0}" lang="${0}" key="time" ns="${0}"> </foxy-i18n> <iron-icon data-testid="status-icon" class="icon-inline cursor-default text-l ${0}" id="status" icon="${0}"> </iron-icon> <vcf-tooltip for="status" theme="light" position="top"> <foxy-i18n infer="" key="status_${0}"></foxy-i18n> </vcf-tooltip> </div> ${0} </div> `),this.renderTemplateOrSlot("status:before"),(null===(i=this.data)||void 0===i?void 0:i.hide_transaction)?o(f||(f=g` <vcf-tooltip for="hidden" theme="light" position="top"> <foxy-i18n infer="" key="hidden_hint"></foxy-i18n> </vcf-tooltip> <iron-icon class="icon-inline cursor-default" icon="icons:visibility-off" id="hidden"> </iron-icon> `)):"",c?o(h||(h=g` <vcf-tooltip for="source" theme="light" position="top"> <foxy-i18n infer="" key="source_${0}"></foxy-i18n> </vcf-tooltip> <span class="cursor-default" id="source">${0}</span> `),c,c):"",JSON.stringify({value:null===(r=this.data)||void 0===r?void 0:r.transaction_date}),this.lang,this.ns,null!==(n={authorized:"text-success",completed:"text-success",capturing:"text-success",captured:"text-success",approved:"text-success",pending:"text-success",pending_fraud_review:"text-error",declined:"text-error",rejected:"text-error",problem:"text-error"}[d])&&void 0!==n?n:"text-tertiary",null!==(a={authorized:"icons:done",capturing:"icons:done",captured:"icons:done",approved:"icons:done",pending:"icons:done",completed:"icons:done-all",pending_fraud_review:"icons:info-outline",declined:"icons:highlight-off",rejected:"icons:highlight-off",problem:"icons:info-outline",refunded:"icons:restore",voided:"icons:remove-circle-outline"}[d])&&void 0!==a?a:"icons:schedule",d,this.renderTemplateOrSlot("status:after"))}__renderSummary(){var e,t,s;const i=null===(t=null===(e=this.data)||void 0===e?void 0:e._embedded)||void 0===t?void 0:t["fx:items"],r=null===(s=this.data)||void 0===s?void 0:s.type;let n,a;if(a="updateinfo"===r?"summary_payment_method_change":"subscription_modification"===r?"summary_subscription_modification":"subscription_cancellation"===r?"summary_subscription_cancellation":"summary",i){const e={count_minus_one:i.length-1,first_item:i[0],count:i.length};n=o(y||(y=g`<foxy-i18n .options="${0}" infer="" key="${0}"></foxy-i18n>`),e,a)}else n=o(v||(v=g`&ZeroWidthSpace;`));return o(_||(_=g` <div data-testid="description"> ${0} <div class="text-s text-secondary truncate">${0}</div> ${0} </div> `),this.renderTemplateOrSlot("description:before"),n,this.renderTemplateOrSlot("description:after"))}__renderCustomer(){const e=this.data,t=e?o(x||(x=g`${0} ${0} (${0})`),e.customer_first_name,e.customer_last_name,e.customer_email):o(b||(b=g`&ZeroWidthSpace;`));return o($||($=g` <div data-testid="customer"> ${0} <div class="text-tertiary truncate text-s">${0}</div> ${0} </div> `),this.renderTemplateOrSlot("customer:before"),t,this.renderTemplateOrSlot("customer:after"))}}customElements.define("foxy-transaction-card",S);export{S as TransactionCard};
+import"./shared-34a87829.js";import"./shared-5212ef4f.js";import"./shared-e2d5673b.js";import"./shared-3d353eb8.js";import"./shared-8f9014ff.js";import{g as e}from"./shared-bab2ea2c.js";import{C as t}from"./shared-41c9c53f.js";import{a as s}from"./shared-47f3f5f5.js";import{I as i}from"./shared-6740e365.js";import{c as o}from"./shared-4e709717.js";import{h as r}from"./shared-ba5c42c7.js";import"./shared-5a469962.js";import"./shared-66278c21.js";import"./shared-6bf89411.js";import"./shared-d4b77609.js";import"./shared-eb49be2e.js";import"./shared-bf8d95b9.js";import"./foxy-spinner.js";import"./shared-b2cbe727.js";import"./shared-930e68b7.js";import"./shared-53e42a77.js";import"./shared-9b138652.js";import"./shared-69c98b7b.js";import"./shared-cd96ff03.js";import"./shared-da4f9115.js";import"./shared-9496e995.js";import"./shared-791b4510.js";import"./shared-0e19bda5.js";let n,a,d,c,l,p,u,f,m,h,y,v,_,x,b,$,g=e=>e;const j=t(s(i,"transaction-card"));class S extends j{constructor(){super(...arguments),this.__currencyDisplay=""}renderBody(){var e,t;const s=this.hiddenSelector,i=!s.matches("total",!0),d=!s.matches("status",!0);return r(n||(n=g` <div aria-busy="${0}" aria-live="polite" class="relative leading-s font-lumo text-m"> <div class="${0}"> ${0} ${0} ${0} </div> <div class="${0}"> <foxy-spinner data-testid="spinner" state="${0}" class="m-auto" lang="${0}" ns="${0} ${0}"> </foxy-spinner> </div> </div> `),this.in("busy"),o({"transition-opacity":!0,"opacity-0":!this.data}),i||d?r(a||(a=g` <div class="flex items-center justify-between gap-s"> ${0} ${0} </div> `),i?this.__renderIdAndTotal():"",d?this.__renderStatus():""):"",s.matches("description",!0)?"":this.__renderSummary(),s.matches("customer",!0)?"":this.__renderCustomer(),o({"pointer-events-none absolute inset-0 flex transition-opacity":!0,"opacity-0":!!this.data}),this.in("fail")?"error":this.in({idle:"template"})?"empty":"busy",this.lang,this.ns,null!==(t=null===(e=customElements.get("foxy-spinner"))||void 0===e?void 0:e.defaultNS)&&void 0!==t?t:"")}async _sendGet(){var e;const t=await super._sendGet(),s=null===(e=t._links["fx:store"])||void 0===e?void 0:e.href;if("string"==typeof s){const e=await super._fetch(s);this.__currencyDisplay=e.use_international_currency_symbol?"code":"symbol"}else this.__currencyDisplay="symbol";return t}__renderIdAndTotal(){const t=this.data;let s;if(t){const i={amount:`${t.total_order} ${t.currency_code}`,currencyDisplay:this.__currencyDisplay};s=r(d||(d=g` <span class="truncate">ID ${0}</span> ${0} ${0} `),t.display_id||e(t._links.self.href),"updateinfo"!==t.type&&"subscription_cancellation"!==t.type?r(c||(c=g` <span>&bull;</span> <foxy-i18n .options="${0}" infer="" class="whitespace-nowrap" key="price"> </foxy-i18n> `),i):"",(null==t?void 0:t.is_test)?r(l||(l=g` <foxy-i18n infer="" class="inline-block text-xs font-medium uppercase bg-contrast-5 text-tertiary rounded-s p-xs leading-none tracking-wider" key="test"> </foxy-i18n> `)):"")}else s=r(p||(p=g`&ZeroWidthSpace;`));return r(u||(u=g` <div class="min-w-0" data-testid="total"> ${0} <div class="font-medium flex items-center gap-xs">${0}</div> ${0} </div> `),this.renderTemplateOrSlot("total:before"),s,this.renderTemplateOrSlot("total:after"))}__renderStatus(){var e,t,s,i,o,n,a;const d=(null===(e=this.data)||void 0===e?void 0:e.status)||"completed",c=null===(s=null===(t=this.data)||void 0===t?void 0:t.source)||void 0===s?void 0:s.substring(0,3).toUpperCase();return r(f||(f=g` <div class="flex-shrink-0" data-testid="status"> ${0} <div class="text-tertiary text-s flex items-center space-x-xs"> ${0} ${0} <foxy-i18n options="${0}" lang="${0}" key="time" ns="${0}"> </foxy-i18n> <iron-icon data-testid="status-icon" class="icon-inline cursor-default text-l ${0}" id="status" icon="${0}"> </iron-icon> <vcf-tooltip for="status" theme="light" position="top" style="--lumo-base-color:black"> <foxy-i18n infer="" class="whitespace-nowrap text-s" style="color:#fff" key="status_${0}"> </foxy-i18n> </vcf-tooltip> </div> ${0} </div> `),this.renderTemplateOrSlot("status:before"),(null===(i=this.data)||void 0===i?void 0:i.hide_transaction)?r(m||(m=g` <vcf-tooltip position="top" theme="light" style="--lumo-base-color:black" for="hidden"> <foxy-i18n infer="" class="text-s whitespace-nowrap" style="color:#fff" key="hidden_hint"> </foxy-i18n> </vcf-tooltip> <iron-icon class="icon-inline cursor-default" icon="icons:visibility-off" id="hidden"> </iron-icon> `)):"",c?r(h||(h=g` <vcf-tooltip position="top" theme="light" style="--lumo-base-color:black" for="source"> <foxy-i18n infer="" style="color:#fff" class="whitespace-nowrap text-s" key="source_${0}"> </foxy-i18n> </vcf-tooltip> <span class="cursor-default" id="source">${0}</span> `),c,c):"",JSON.stringify({value:null===(o=this.data)||void 0===o?void 0:o.transaction_date}),this.lang,this.ns,null!==(n={authorized:"text-success",completed:"text-success",capturing:"text-success",captured:"text-success",approved:"text-success",pending:"text-success",pending_fraud_review:"text-error",declined:"text-error",rejected:"text-error",problem:"text-error"}[d])&&void 0!==n?n:"text-tertiary",null!==(a={authorized:"icons:done",capturing:"icons:done",captured:"icons:done",approved:"icons:done",pending:"icons:done",completed:"icons:done-all",pending_fraud_review:"icons:info-outline",declined:"icons:highlight-off",rejected:"icons:highlight-off",problem:"icons:info-outline",refunded:"icons:restore",voided:"icons:remove-circle-outline"}[d])&&void 0!==a?a:"icons:schedule",d,this.renderTemplateOrSlot("status:after"))}__renderSummary(){var e,t,s;const i=null===(t=null===(e=this.data)||void 0===e?void 0:e._embedded)||void 0===t?void 0:t["fx:items"],o=null===(s=this.data)||void 0===s?void 0:s.type;let n,a;if(a="updateinfo"===o?"summary_payment_method_change":"subscription_modification"===o?"summary_subscription_modification":"subscription_cancellation"===o?"summary_subscription_cancellation":"summary",i){const e={count_minus_one:i.length-1,first_item:i[0],count:i.length};n=r(y||(y=g`<foxy-i18n .options="${0}" infer="" key="${0}"></foxy-i18n>`),e,a)}else n=r(v||(v=g`&ZeroWidthSpace;`));return r(_||(_=g` <div data-testid="description"> ${0} <div class="text-s text-secondary truncate">${0}</div> ${0} </div> `),this.renderTemplateOrSlot("description:before"),n,this.renderTemplateOrSlot("description:after"))}__renderCustomer(){const e=this.data,t=e?r(x||(x=g`${0} ${0} (${0})`),e.customer_first_name,e.customer_last_name,e.customer_email):r(b||(b=g`&ZeroWidthSpace;`));return r($||($=g` <div data-testid="customer"> ${0} <div class="text-tertiary truncate text-s">${0}</div> ${0} </div> `),this.renderTemplateOrSlot("customer:before"),t,this.renderTemplateOrSlot("customer:after"))}}customElements.define("foxy-transaction-card",S);export{S as TransactionCard};

package/dist/cdn/translations/store-transaction-folder-form/en.json

@@ -6,11 +6,12 @@
     "label": "",
     "helper_text": "",
     "name": {
-      "label": "Folder name",
+      "label": "Name",
       "helper_text": "",
       "placeholder": "New folder"
     },
     "color": {
+      "label": "Color",
       "color_red": "Red",
       "color_red_pale": "Pale red",
       "color_green": "Green",
@@ -28,8 +29,8 @@
     "label": "",
     "helper_text": "",
     "is-default": {
-      "label": "Make this folder default",
-      "helper_text": "All new transactions will appear in this folder by default. Only one folder can be the default folder.",
+      "label": "Make default",
+      "helper_text": "All new transactions will appear in this folder by default. Only one folder can be the default.",
       "checked": "Yes",
       "unchecked": "No"
     }

package/dist/elements/public/AdminTransactionCard/AdminTransactionCard.js

@@ -41,8 +41,19 @@ export class AdminTransactionCard extends Base {
         <span class="inline-flex flex-1">&ZeroWidthSpace;</span>
 
         ${(data === null || data === void 0 ? void 0 : data.hide_transaction) ? html `
-              <vcf-tooltip for="hidden" theme="light" position="bottom">
-                <foxy-i18n infer="" key="hidden_hint"></foxy-i18n>
+              <vcf-tooltip
+                for="hidden"
+                theme="light"
+                position="bottom"
+                style="--lumo-base-color: black"
+              >
+                <foxy-i18n
+                  infer=""
+                  class="whitespace-nowrap"
+                  style="color: white"
+                  key="hidden_hint"
+                >
+                </foxy-i18n>
               </vcf-tooltip>
               <span class="inline-block text-s text-tertiary rounded-s cursor-default" id="hidden">
                 ${svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" style="width: 1em; height: 1em;"><path d="M3 2a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3Z" /><path fill-rule="evenodd" d="M3 6h10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6Zm3 2.75A.75.75 0 0 1 6.75 8h2.5a.75.75 0 0 1 0 1.5h-2.5A.75.75 0 0 1 6 8.75Z" clip-rule="evenodd" /></svg>`}
@@ -151,8 +162,14 @@ export class AdminTransactionCard extends Base {
       <span class="cursor-default text-s px-xs bg-contrast-5 rounded-s" id="source">
         ${sourceType}
       </span>
-      <vcf-tooltip for="source" theme="light" position="bottom">
-        <foxy-i18n infer="" key="source_${sourceType}"></foxy-i18n>
+      <vcf-tooltip for="source" theme="light" position="bottom" style="--lumo-base-color: black">
+        <foxy-i18n
+          infer=""
+          class="whitespace-nowrap"
+          style="color: white"
+          key="source_${sourceType}"
+        >
+        </foxy-i18n>
       </vcf-tooltip>
     `;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"AdminTransactionCard.js","sourceRoot":"","sources":["../../../../src/elements/public/AdminTransactionCard/AdminTransactionCard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Data } from './types';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { getResourceId } from '@foxy.io/sdk/core';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-html';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'admin-transaction-card';\nconst Base = ConfigurableMixin(TranslatableMixin(InternalCard, NS));\n\n/**\n * Basic card displaying a transaction (`fx:transaction`), for use in Foxy Admin only.\n *\n * @element foxy-admin-transaction-card\n * @since 1.46.0\n */\nexport class AdminTransactionCard extends Base<Data> {\n  renderBody(): TemplateResult {\n    const store = this.__storeLoader?.data;\n    const data = this.data;\n\n    const folder = data?._embedded?.['fx:folder'];\n    const items = data?._embedded?.['fx:items'];\n\n    const displayId = data?.display_id || (data ? getResourceId(data._links.self.href) : '');\n    const status = data?.status || 'completed';\n    const source = data?.source;\n    const type = data?.type;\n\n    const statusColors: Record<string, string> = {\n      pending_fraud_review: 'text-error',\n      declined: 'text-error',\n      rejected: 'text-error',\n      problem: 'text-error',\n    };\n\n    return html`\n      <div class=\"flex items-center gap-xs\">\n        <span class=\"font-medium\">${displayId}</span>\n\n        ${folder ? this.__renderFolderBadge(folder) : ''}\n        ${source ? this.__renderSourceBadge(source) : ''}\n        ${data?.is_test ? this.__renderTestBadge() : ''}\n\n        <span class=\"inline-flex flex-1\">&ZeroWidthSpace;</span>\n\n        ${data?.hide_transaction\n          ? html`\n              <vcf-tooltip for=\"hidden\" theme=\"light\" position=\"bottom\">\n                <foxy-i18n infer=\"\" key=\"hidden_hint\"></foxy-i18n>\n              </vcf-tooltip>\n              <span class=\"inline-block text-s text-tertiary rounded-s cursor-default\" id=\"hidden\">\n                ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"currentColor\" style=\"width: 1em; height: 1em;\"><path d=\"M3 2a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3Z\" /><path fill-rule=\"evenodd\" d=\"M3 6h10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6Zm3 2.75A.75.75 0 0 1 6.75 8h2.5a.75.75 0 0 1 0 1.5h-2.5A.75.75 0 0 1 6 8.75Z\" clip-rule=\"evenodd\" /></svg>`}\n              </span>\n            `\n          : ''}\n\n        <foxy-i18n\n          options=${JSON.stringify({ value: data?.transaction_date })}\n          infer=\"\"\n          class=\"text-s text-tertiary\"\n          key=\"time\"\n        >\n        </foxy-i18n>\n      </div>\n\n      <div class=\"text-s text-secondary truncate\">\n        ${type !== 'updateinfo' && type !== 'subscription_cancellation'\n          ? html`\n              <foxy-i18n\n                options=${JSON.stringify({\n                  currencyDisplay: store?.use_international_currency_symbol ? 'code' : 'symbol',\n                  amount: `${data?.total_order} ${data?.currency_code}`,\n                })}\n                class=\"whitespace-nowrap\"\n                infer=\"\"\n                key=\"price\"\n              >\n              </foxy-i18n>\n              <span>&bull;</span>\n            `\n          : ''}\n        ${items\n          ? html`\n              <foxy-i18n\n                options=${JSON.stringify({\n                  count_minus_one: items.length - 1,\n                  context: type,\n                  first_item: items[0],\n                  count: items.length,\n                })}\n                infer=\"\"\n                key=\"summary\"\n              >\n              </foxy-i18n>\n            `\n          : ''}\n      </div>\n\n      <div class=\"text-s text-secondary truncate\">\n        ${data?.customer_first_name} ${data?.customer_last_name} (${data?.customer_email})\n      </div>\n\n      <div class=\"text-s text-secondary truncate\">\n        <foxy-i18n class=${statusColors[status] || ''} infer=\"\" key=\"status_${status}\"></foxy-i18n>\n      </div>\n\n      <foxy-nucleon\n        infer=\"\"\n        class=\"hidden\"\n        href=${ifDefined(this.data?._links['fx:store'].href)}\n        id=\"storeLoader\"\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n    `;\n  }\n\n  get isBodyReady(): boolean {\n    return super.isBodyReady && (!this.data?._links['fx:store'] || !!this.__storeLoader?.data);\n  }\n\n  private get __storeLoader() {\n    type Loader = NucleonElement<Resource<Rels.Store>>;\n    return this.renderRoot.querySelector<Loader>('#storeLoader');\n  }\n\n  private __renderFolderBadge(folder: Data['_embedded']['fx:folder']) {\n    const color = folder.color ?? '';\n    const knownColors: Record<string, string> = {\n      red: 'bg-folder-red text-white',\n      red_pale: 'bg-folder-red-pale text-black',\n      green: 'bg-folder-green text-white',\n      green_pale: 'bg-folder-green-pale text-black',\n      blue: 'bg-folder-blue text-white',\n      blue_pale: 'bg-folder-blue-pale text-black',\n      orange: 'bg-folder-orange text-white',\n      orange_pale: 'bg-folder-orange-pale text-black',\n      violet: 'bg-folder-violet text-white',\n      violet_pale: 'bg-folder-violet-pale text-black',\n    };\n\n    return html`\n      <span\n        class=${classMap({\n          'inline-flex items-center gap-xs text-s rounded-s px-xs': true,\n          'bg-contrast-5 text-body': !(color in knownColors),\n          [knownColors[color] ?? '']: color in knownColors,\n        })}\n      >\n        ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"currentColor\" style=\"width: 1em; height: 1em;\"><path d=\"M2 3.5A1.5 1.5 0 0 1 3.5 2h2.879a1.5 1.5 0 0 1 1.06.44l1.122 1.12A1.5 1.5 0 0 0 9.62 4H12.5A1.5 1.5 0 0 1 14 5.5v1.401a2.986 2.986 0 0 0-1.5-.401h-9c-.546 0-1.059.146-1.5.401V3.5ZM2 9.5v3A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5v-3A1.5 1.5 0 0 0 12.5 8h-9A1.5 1.5 0 0 0 2 9.5Z\" /></svg>`}\n        ${folder?.name || html`<foxy-i18n infer=\"\" key=\"folder_no_name\"></foxy-i18n>`}\n      </span>\n    `;\n  }\n\n  private __renderSourceBadge(source: Data['source']) {\n    const sourceType = source.substring(0, 3).toUpperCase() as 'MIT' | 'CIT';\n\n    return html`\n      <span class=\"cursor-default text-s px-xs bg-contrast-5 rounded-s\" id=\"source\">\n        ${sourceType}\n      </span>\n      <vcf-tooltip for=\"source\" theme=\"light\" position=\"bottom\">\n        <foxy-i18n infer=\"\" key=\"source_${sourceType}\"></foxy-i18n>\n      </vcf-tooltip>\n    `;\n  }\n\n  private __renderTestBadge() {\n    return html`\n      <foxy-i18n infer=\"\" class=\"inline-block text-s bg-contrast-5 rounded-s px-xs\" key=\"test\">\n      </foxy-i18n>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"AdminTransactionCard.js","sourceRoot":"","sources":["../../../../src/elements/public/AdminTransactionCard/AdminTransactionCard.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD,MAAM,EAAE,GAAG,wBAAwB,CAAC;AACpC,MAAM,IAAI,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC,CAAC;AAEpE;;;;;GAKG;AACH,MAAM,OAAO,oBAAqB,SAAQ,IAAU;IAClD,UAAU;;QACR,MAAM,KAAK,SAAG,IAAI,CAAC,aAAa,0CAAE,IAAI,CAAC;QACvC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAEvB,MAAM,MAAM,SAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,0CAAG,WAAW,CAAC,CAAC;QAC9C,MAAM,KAAK,SAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,0CAAG,UAAU,CAAC,CAAC;QAE5C,MAAM,SAAS,GAAG,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,KAAI,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACzF,MAAM,MAAM,GAAG,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,KAAI,WAAW,CAAC;QAC3C,MAAM,MAAM,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC;QAC5B,MAAM,IAAI,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAC;QAExB,MAAM,YAAY,GAA2B;YAC3C,oBAAoB,EAAE,YAAY;YAClC,QAAQ,EAAE,YAAY;YACtB,QAAQ,EAAE,YAAY;YACtB,OAAO,EAAE,YAAY;SACtB,CAAC;QAEF,OAAO,IAAI,CAAA;;oCAEqB,SAAS;;UAEnC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE;UAC9C,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE;UAC9C,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,EAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,EAAE;;;;UAI7C,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,EACtB,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;kBAgBE,GAAG,CAAA,uXAAuX;;aAE/X;YACH,CAAC,CAAC,EAAE;;;oBAGM,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,EAAE,CAAC;;;;;;;;;UAS3D,IAAI,KAAK,YAAY,IAAI,IAAI,KAAK,2BAA2B;YAC7D,CAAC,CAAC,IAAI,CAAA;;0BAEU,IAAI,CAAC,SAAS,CAAC;gBACvB,eAAe,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,iCAAiC,EAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;gBAC7E,MAAM,EAAE,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,IAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,aAAa,EAAE;aACtD,CAAC;;;;;;;aAOL;YACH,CAAC,CAAC,EAAE;UACJ,KAAK;YACL,CAAC,CAAC,IAAI,CAAA;;0BAEU,IAAI,CAAC,SAAS,CAAC;gBACvB,eAAe,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC;gBACjC,OAAO,EAAE,IAAI;gBACb,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;gBACpB,KAAK,EAAE,KAAK,CAAC,MAAM;aACpB,CAAC;;;;;aAKL;YACH,CAAC,CAAC,EAAE;;;;UAIJ,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,mBAAmB,IAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,kBAAkB,KAAK,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,cAAc;;;;2BAI7D,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE,yBAAyB,MAAM;;;;;;eAMrE,SAAS,OAAC,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAC,UAAU,EAAE,IAAI,CAAC;;kBAE1C,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;;KAGvC,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;;QACb,OAAO,KAAK,CAAC,WAAW,IAAI,CAAC,QAAC,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAC,UAAU,EAAC,IAAI,CAAC,QAAC,IAAI,CAAC,aAAa,0CAAE,IAAI,CAAA,CAAC,CAAC;IAC7F,CAAC;IAED,IAAY,aAAa;QAEvB,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAS,cAAc,CAAC,CAAC;IAC/D,CAAC;IAEO,mBAAmB,CAAC,MAAsC;;QAChE,MAAM,KAAK,SAAG,MAAM,CAAC,KAAK,mCAAI,EAAE,CAAC;QACjC,MAAM,WAAW,GAA2B;YAC1C,GAAG,EAAE,0BAA0B;YAC/B,QAAQ,EAAE,+BAA+B;YACzC,KAAK,EAAE,4BAA4B;YACnC,UAAU,EAAE,iCAAiC;YAC7C,IAAI,EAAE,2BAA2B;YACjC,SAAS,EAAE,gCAAgC;YAC3C,MAAM,EAAE,6BAA6B;YACrC,WAAW,EAAE,kCAAkC;YAC/C,MAAM,EAAE,6BAA6B;YACrC,WAAW,EAAE,kCAAkC;SAChD,CAAC;QAEF,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,wDAAwD,EAAE,IAAI;YAC9D,yBAAyB,EAAE,CAAC,CAAC,KAAK,IAAI,WAAW,CAAC;YAClD,OAAC,WAAW,CAAC,KAAK,CAAC,mCAAI,EAAE,CAAC,EAAE,KAAK,IAAI,WAAW;SACjD,CAAC;;UAEA,GAAG,CAAA,8ZAA8Z;UACja,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,IAAI,CAAA,uDAAuD;;KAEhF,CAAC;IACJ,CAAC;IAEO,mBAAmB,CAAC,MAAsB;QAChD,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAmB,CAAC;QAEzE,OAAO,IAAI,CAAA;;UAEL,UAAU;;;;;;;wBAOI,UAAU;;;;KAI7B,CAAC;IACJ,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAA;;;KAGV,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Data } from './types';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { getResourceId } from '@foxy.io/sdk/core';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-html';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'admin-transaction-card';\nconst Base = ConfigurableMixin(TranslatableMixin(InternalCard, NS));\n\n/**\n * Basic card displaying a transaction (`fx:transaction`), for use in Foxy Admin only.\n *\n * @element foxy-admin-transaction-card\n * @since 1.46.0\n */\nexport class AdminTransactionCard extends Base<Data> {\n  renderBody(): TemplateResult {\n    const store = this.__storeLoader?.data;\n    const data = this.data;\n\n    const folder = data?._embedded?.['fx:folder'];\n    const items = data?._embedded?.['fx:items'];\n\n    const displayId = data?.display_id || (data ? getResourceId(data._links.self.href) : '');\n    const status = data?.status || 'completed';\n    const source = data?.source;\n    const type = data?.type;\n\n    const statusColors: Record<string, string> = {\n      pending_fraud_review: 'text-error',\n      declined: 'text-error',\n      rejected: 'text-error',\n      problem: 'text-error',\n    };\n\n    return html`\n      <div class=\"flex items-center gap-xs\">\n        <span class=\"font-medium\">${displayId}</span>\n\n        ${folder ? this.__renderFolderBadge(folder) : ''}\n        ${source ? this.__renderSourceBadge(source) : ''}\n        ${data?.is_test ? this.__renderTestBadge() : ''}\n\n        <span class=\"inline-flex flex-1\">&ZeroWidthSpace;</span>\n\n        ${data?.hide_transaction\n          ? html`\n              <vcf-tooltip\n                for=\"hidden\"\n                theme=\"light\"\n                position=\"bottom\"\n                style=\"--lumo-base-color: black\"\n              >\n                <foxy-i18n\n                  infer=\"\"\n                  class=\"whitespace-nowrap\"\n                  style=\"color: white\"\n                  key=\"hidden_hint\"\n                >\n                </foxy-i18n>\n              </vcf-tooltip>\n              <span class=\"inline-block text-s text-tertiary rounded-s cursor-default\" id=\"hidden\">\n                ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"currentColor\" style=\"width: 1em; height: 1em;\"><path d=\"M3 2a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3Z\" /><path fill-rule=\"evenodd\" d=\"M3 6h10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6Zm3 2.75A.75.75 0 0 1 6.75 8h2.5a.75.75 0 0 1 0 1.5h-2.5A.75.75 0 0 1 6 8.75Z\" clip-rule=\"evenodd\" /></svg>`}\n              </span>\n            `\n          : ''}\n\n        <foxy-i18n\n          options=${JSON.stringify({ value: data?.transaction_date })}\n          infer=\"\"\n          class=\"text-s text-tertiary\"\n          key=\"time\"\n        >\n        </foxy-i18n>\n      </div>\n\n      <div class=\"text-s text-secondary truncate\">\n        ${type !== 'updateinfo' && type !== 'subscription_cancellation'\n          ? html`\n              <foxy-i18n\n                options=${JSON.stringify({\n                  currencyDisplay: store?.use_international_currency_symbol ? 'code' : 'symbol',\n                  amount: `${data?.total_order} ${data?.currency_code}`,\n                })}\n                class=\"whitespace-nowrap\"\n                infer=\"\"\n                key=\"price\"\n              >\n              </foxy-i18n>\n              <span>&bull;</span>\n            `\n          : ''}\n        ${items\n          ? html`\n              <foxy-i18n\n                options=${JSON.stringify({\n                  count_minus_one: items.length - 1,\n                  context: type,\n                  first_item: items[0],\n                  count: items.length,\n                })}\n                infer=\"\"\n                key=\"summary\"\n              >\n              </foxy-i18n>\n            `\n          : ''}\n      </div>\n\n      <div class=\"text-s text-secondary truncate\">\n        ${data?.customer_first_name} ${data?.customer_last_name} (${data?.customer_email})\n      </div>\n\n      <div class=\"text-s text-secondary truncate\">\n        <foxy-i18n class=${statusColors[status] || ''} infer=\"\" key=\"status_${status}\"></foxy-i18n>\n      </div>\n\n      <foxy-nucleon\n        infer=\"\"\n        class=\"hidden\"\n        href=${ifDefined(this.data?._links['fx:store'].href)}\n        id=\"storeLoader\"\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n    `;\n  }\n\n  get isBodyReady(): boolean {\n    return super.isBodyReady && (!this.data?._links['fx:store'] || !!this.__storeLoader?.data);\n  }\n\n  private get __storeLoader() {\n    type Loader = NucleonElement<Resource<Rels.Store>>;\n    return this.renderRoot.querySelector<Loader>('#storeLoader');\n  }\n\n  private __renderFolderBadge(folder: Data['_embedded']['fx:folder']) {\n    const color = folder.color ?? '';\n    const knownColors: Record<string, string> = {\n      red: 'bg-folder-red text-white',\n      red_pale: 'bg-folder-red-pale text-black',\n      green: 'bg-folder-green text-white',\n      green_pale: 'bg-folder-green-pale text-black',\n      blue: 'bg-folder-blue text-white',\n      blue_pale: 'bg-folder-blue-pale text-black',\n      orange: 'bg-folder-orange text-white',\n      orange_pale: 'bg-folder-orange-pale text-black',\n      violet: 'bg-folder-violet text-white',\n      violet_pale: 'bg-folder-violet-pale text-black',\n    };\n\n    return html`\n      <span\n        class=${classMap({\n          'inline-flex items-center gap-xs text-s rounded-s px-xs': true,\n          'bg-contrast-5 text-body': !(color in knownColors),\n          [knownColors[color] ?? '']: color in knownColors,\n        })}\n      >\n        ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"currentColor\" style=\"width: 1em; height: 1em;\"><path d=\"M2 3.5A1.5 1.5 0 0 1 3.5 2h2.879a1.5 1.5 0 0 1 1.06.44l1.122 1.12A1.5 1.5 0 0 0 9.62 4H12.5A1.5 1.5 0 0 1 14 5.5v1.401a2.986 2.986 0 0 0-1.5-.401h-9c-.546 0-1.059.146-1.5.401V3.5ZM2 9.5v3A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5v-3A1.5 1.5 0 0 0 12.5 8h-9A1.5 1.5 0 0 0 2 9.5Z\" /></svg>`}\n        ${folder?.name || html`<foxy-i18n infer=\"\" key=\"folder_no_name\"></foxy-i18n>`}\n      </span>\n    `;\n  }\n\n  private __renderSourceBadge(source: Data['source']) {\n    const sourceType = source.substring(0, 3).toUpperCase() as 'MIT' | 'CIT';\n\n    return html`\n      <span class=\"cursor-default text-s px-xs bg-contrast-5 rounded-s\" id=\"source\">\n        ${sourceType}\n      </span>\n      <vcf-tooltip for=\"source\" theme=\"light\" position=\"bottom\" style=\"--lumo-base-color: black\">\n        <foxy-i18n\n          infer=\"\"\n          class=\"whitespace-nowrap\"\n          style=\"color: white\"\n          key=\"source_${sourceType}\"\n        >\n        </foxy-i18n>\n      </vcf-tooltip>\n    `;\n  }\n\n  private __renderTestBadge() {\n    return html`\n      <foxy-i18n infer=\"\" class=\"inline-block text-s bg-contrast-5 rounded-s px-xs\" key=\"test\">\n      </foxy-i18n>\n    `;\n  }\n}\n"]}

package/dist/elements/public/StoreTransactionFolderForm/StoreTransactionFolderForm.js

@@ -11,6 +11,7 @@ const Base = TranslatableMixin(InternalForm, NS);
  */
 export class StoreTransactionFolderForm extends Base {
     renderBody() {
+        var _a;
         const colors = {
             'red': 'bg-folder-red text-white',
             'red_pale': 'bg-folder-red-pale text-black',
@@ -26,19 +27,24 @@ export class StoreTransactionFolderForm extends Base {
         };
         const currentColor = this.form.color && this.form.color in colors ? this.form.color : '';
         return html `
-      <foxy-internal-summary-control infer="group-one">
+      <foxy-internal-summary-control infer="" label="" helper-text="">
         <div class="flex flex-col items-center justify-center gap-m bg-transparent">
           <div class="flex items-center p-m rounded-full ${colors[currentColor]}">
             ${svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="width: 2em; height: 2em;"><path d="M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z" /></svg>`}
           </div>
 
-          <foxy-internal-text-control layout="pill" infer="name"></foxy-internal-text-control>
-
-          <foxy-internal-store-transaction-folder-color-control infer="color" .colors=${colors}>
-          </foxy-internal-store-transaction-folder-color-control>
+          <p class="text-xl font-medium">
+            ${((_a = this.form.name) === null || _a === void 0 ? void 0 : _a.trim()) || this.t('group-one.name.placeholder')}
+          </p>
         </div>
       </foxy-internal-summary-control>
 
+      <foxy-internal-summary-control infer="group-one">
+        <foxy-internal-text-control layout="summary-item" infer="name"></foxy-internal-text-control>
+        <foxy-internal-store-transaction-folder-color-control infer="color" .colors=${colors}>
+        </foxy-internal-store-transaction-folder-color-control>
+      </foxy-internal-summary-control>
+
       <foxy-internal-summary-control infer="group-two">
         <foxy-internal-switch-control infer="is-default" .trueAlias=${1} .falseAlias=${0}>
         </foxy-internal-switch-control>
@@ -48,7 +54,8 @@ export class StoreTransactionFolderForm extends Base {
     `;
     }
     submit() {
-        if (!this.form.name)
+        var _a;
+        if (!((_a = this.form.name) === null || _a === void 0 ? void 0 : _a.trim()))
             this.edit({ name: this.t('group-one.name.placeholder') });
         super.submit();
     }

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

@@ -1 +1 @@
-{"version":3,"file":"StoreTransactionFolderForm.js","sourceRoot":"","sources":["../../../../src/elements/public/StoreTransactionFolderForm/StoreTransactionFolderForm.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAErC,MAAM,EAAE,GAAG,+BAA+B,CAAC;AAC3C,MAAM,IAAI,GAAG,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,OAAO,0BAA2B,SAAQ,IAAU;IACxD,UAAU;QACR,MAAM,MAAM,GAA2B;YACrC,KAAK,EAAE,0BAA0B;YACjC,UAAU,EAAE,+BAA+B;YAC3C,OAAO,EAAE,4BAA4B;YACrC,YAAY,EAAE,iCAAiC;YAC/C,MAAM,EAAE,2BAA2B;YACnC,WAAW,EAAE,gCAAgC;YAC7C,QAAQ,EAAE,6BAA6B;YACvC,aAAa,EAAE,kCAAkC;YACjD,QAAQ,EAAE,6BAA6B;YACvC,aAAa,EAAE,kCAAkC;YACjD,EAAE,EAAE,yBAAyB;SAC9B,CAAC;QAEF,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QAEzF,OAAO,IAAI,CAAA;;;2DAG4C,MAAM,CAAC,YAAY,CAAC;cACjE,GAAG,CAAA,kYAAkY;;;;;wFAK3T,MAAM;;;;;;sEAMxB,CAAC,gBAAgB,CAAC;;;;QAIhF,KAAK,CAAC,UAAU,EAAE;KACrB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,4BAA4B,CAAC,EAAE,CAAC,CAAC;QAC/E,KAAK,CAAC,MAAM,EAAE,CAAC;IACjB,CAAC;IAES,KAAK,CAAC,MAAM,CAAiB,GAAG,IAAiC;QACzE,IAAI;YACF,OAAO,MAAM,KAAK,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;SACpC;QAAC,OAAO,GAAG,EAAE;YACZ,IAAI,OAAO,CAAC;YAEZ,IAAI;gBACF,OAAO,GAAG,CAAC,MAAO,GAAgB,CAAC,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;aAC9E;YAAC,WAAM;gBACN,MAAM,GAAG,CAAC;aACX;YAED,IAAI,OAAO,CAAC,QAAQ,CAAC,2BAA2B,CAAC,EAAE;gBACjD,MAAM,CAAC,wBAAwB,CAAC,CAAC;aAClC;iBAAM;gBACL,MAAM,GAAG,CAAC;aACX;SACF;IACH,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { html, svg } from 'lit-html';\n\nconst NS = 'store-transaction-folder-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\n/**\n * Form element for creating and editing store transaction folders (`fx:store_transaction_folder`).\n *\n * @element foxy-store-transaction-folder-form\n * @since 1.46.0\n */\nexport class StoreTransactionFolderForm extends Base<Data> {\n  renderBody(): TemplateResult {\n    const colors: Record<string, string> = {\n      'red': 'bg-folder-red text-white',\n      'red_pale': 'bg-folder-red-pale text-black',\n      'green': 'bg-folder-green text-white',\n      'green_pale': 'bg-folder-green-pale text-black',\n      'blue': 'bg-folder-blue text-white',\n      'blue_pale': 'bg-folder-blue-pale text-black',\n      'orange': 'bg-folder-orange text-white',\n      'orange_pale': 'bg-folder-orange-pale text-black',\n      'violet': 'bg-folder-violet text-white',\n      'violet_pale': 'bg-folder-violet-pale text-black',\n      '': 'bg-contrast-5 text-body',\n    };\n\n    const currentColor = this.form.color && this.form.color in colors ? this.form.color : '';\n\n    return html`\n      <foxy-internal-summary-control infer=\"group-one\">\n        <div class=\"flex flex-col items-center justify-center gap-m bg-transparent\">\n          <div class=\"flex items-center p-m rounded-full ${colors[currentColor]}\">\n            ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" style=\"width: 2em; height: 2em;\"><path d=\"M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z\" /></svg>`}\n          </div>\n\n          <foxy-internal-text-control layout=\"pill\" infer=\"name\"></foxy-internal-text-control>\n\n          <foxy-internal-store-transaction-folder-color-control infer=\"color\" .colors=${colors}>\n          </foxy-internal-store-transaction-folder-color-control>\n        </div>\n      </foxy-internal-summary-control>\n\n      <foxy-internal-summary-control infer=\"group-two\">\n        <foxy-internal-switch-control infer=\"is-default\" .trueAlias=${1} .falseAlias=${0}>\n        </foxy-internal-switch-control>\n      </foxy-internal-summary-control>\n\n      ${super.renderBody()}\n    `;\n  }\n\n  submit(): void {\n    if (!this.form.name) this.edit({ name: this.t('group-one.name.placeholder') });\n    super.submit();\n  }\n\n  protected async _fetch<TResult = Data>(...args: Parameters<Window['fetch']>): Promise<TResult> {\n    try {\n      return await super._fetch(...args);\n    } catch (err) {\n      let message;\n\n      try {\n        message = (await (err as Response).json())._embedded['fx:errors'][0].message;\n      } catch {\n        throw err;\n      }\n\n      if (message.includes('it has transactions in it')) {\n        throw ['error:folder_not_empty'];\n      } else {\n        throw err;\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"StoreTransactionFolderForm.js","sourceRoot":"","sources":["../../../../src/elements/public/StoreTransactionFolderForm/StoreTransactionFolderForm.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAErC,MAAM,EAAE,GAAG,+BAA+B,CAAC;AAC3C,MAAM,IAAI,GAAG,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,OAAO,0BAA2B,SAAQ,IAAU;IACxD,UAAU;;QACR,MAAM,MAAM,GAA2B;YACrC,KAAK,EAAE,0BAA0B;YACjC,UAAU,EAAE,+BAA+B;YAC3C,OAAO,EAAE,4BAA4B;YACrC,YAAY,EAAE,iCAAiC;YAC/C,MAAM,EAAE,2BAA2B;YACnC,WAAW,EAAE,gCAAgC;YAC7C,QAAQ,EAAE,6BAA6B;YACvC,aAAa,EAAE,kCAAkC;YACjD,QAAQ,EAAE,6BAA6B;YACvC,aAAa,EAAE,kCAAkC;YACjD,EAAE,EAAE,yBAAyB;SAC9B,CAAC;QAEF,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QAEzF,OAAO,IAAI,CAAA;;;2DAG4C,MAAM,CAAC,YAAY,CAAC;cACjE,GAAG,CAAA,kYAAkY;;;;cAIrY,OAAA,IAAI,CAAC,IAAI,CAAC,IAAI,0CAAE,IAAI,OAAM,IAAI,CAAC,CAAC,CAAC,4BAA4B,CAAC;;;;;;;sFAOU,MAAM;;;;;sEAKtB,CAAC,gBAAgB,CAAC;;;;QAIhF,KAAK,CAAC,UAAU,EAAE;KACrB,CAAC;IACJ,CAAC;IAED,MAAM;;QACJ,IAAI,QAAC,IAAI,CAAC,IAAI,CAAC,IAAI,0CAAE,IAAI,GAAE;YAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,4BAA4B,CAAC,EAAE,CAAC,CAAC;QACvF,KAAK,CAAC,MAAM,EAAE,CAAC;IACjB,CAAC;IAES,KAAK,CAAC,MAAM,CAAiB,GAAG,IAAiC;QACzE,IAAI;YACF,OAAO,MAAM,KAAK,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;SACpC;QAAC,OAAO,GAAG,EAAE;YACZ,IAAI,OAAO,CAAC;YAEZ,IAAI;gBACF,OAAO,GAAG,CAAC,MAAO,GAAgB,CAAC,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;aAC9E;YAAC,WAAM;gBACN,MAAM,GAAG,CAAC;aACX;YAED,IAAI,OAAO,CAAC,QAAQ,CAAC,2BAA2B,CAAC,EAAE;gBACjD,MAAM,CAAC,wBAAwB,CAAC,CAAC;aAClC;iBAAM;gBACL,MAAM,GAAG,CAAC;aACX;SACF;IACH,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { html, svg } from 'lit-html';\n\nconst NS = 'store-transaction-folder-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\n/**\n * Form element for creating and editing store transaction folders (`fx:store_transaction_folder`).\n *\n * @element foxy-store-transaction-folder-form\n * @since 1.46.0\n */\nexport class StoreTransactionFolderForm extends Base<Data> {\n  renderBody(): TemplateResult {\n    const colors: Record<string, string> = {\n      'red': 'bg-folder-red text-white',\n      'red_pale': 'bg-folder-red-pale text-black',\n      'green': 'bg-folder-green text-white',\n      'green_pale': 'bg-folder-green-pale text-black',\n      'blue': 'bg-folder-blue text-white',\n      'blue_pale': 'bg-folder-blue-pale text-black',\n      'orange': 'bg-folder-orange text-white',\n      'orange_pale': 'bg-folder-orange-pale text-black',\n      'violet': 'bg-folder-violet text-white',\n      'violet_pale': 'bg-folder-violet-pale text-black',\n      '': 'bg-contrast-5 text-body',\n    };\n\n    const currentColor = this.form.color && this.form.color in colors ? this.form.color : '';\n\n    return html`\n      <foxy-internal-summary-control infer=\"\" label=\"\" helper-text=\"\">\n        <div class=\"flex flex-col items-center justify-center gap-m bg-transparent\">\n          <div class=\"flex items-center p-m rounded-full ${colors[currentColor]}\">\n            ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" style=\"width: 2em; height: 2em;\"><path d=\"M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z\" /></svg>`}\n          </div>\n\n          <p class=\"text-xl font-medium\">\n            ${this.form.name?.trim() || this.t('group-one.name.placeholder')}\n          </p>\n        </div>\n      </foxy-internal-summary-control>\n\n      <foxy-internal-summary-control infer=\"group-one\">\n        <foxy-internal-text-control layout=\"summary-item\" infer=\"name\"></foxy-internal-text-control>\n        <foxy-internal-store-transaction-folder-color-control infer=\"color\" .colors=${colors}>\n        </foxy-internal-store-transaction-folder-color-control>\n      </foxy-internal-summary-control>\n\n      <foxy-internal-summary-control infer=\"group-two\">\n        <foxy-internal-switch-control infer=\"is-default\" .trueAlias=${1} .falseAlias=${0}>\n        </foxy-internal-switch-control>\n      </foxy-internal-summary-control>\n\n      ${super.renderBody()}\n    `;\n  }\n\n  submit(): void {\n    if (!this.form.name?.trim()) this.edit({ name: this.t('group-one.name.placeholder') });\n    super.submit();\n  }\n\n  protected async _fetch<TResult = Data>(...args: Parameters<Window['fetch']>): Promise<TResult> {\n    try {\n      return await super._fetch(...args);\n    } catch (err) {\n      let message;\n\n      try {\n        message = (await (err as Response).json())._embedded['fx:errors'][0].message;\n      } catch {\n        throw err;\n      }\n\n      if (message.includes('it has transactions in it')) {\n        throw ['error:folder_not_empty'];\n      } else {\n        throw err;\n      }\n    }\n  }\n}\n"]}

package/dist/elements/public/StoreTransactionFolderForm/internal/InternalStoreTransactionFolderFormColorControl/InternalStoreTransactionFolderFormColorControl.js

@@ -15,52 +15,58 @@ export class InternalStoreTransactionFolderFormColorControl extends InternalEdit
     renderControl() {
         const currentValue = this._value in this.colors ? this._value : '';
         return html `
-      <div class="flex flex-wrap items-center justify-center gap-s flex-shrink-0">
-        ${Object.entries(this.colors).map(([colorName, className]) => {
+      <div class="flex gap-s">
+        <div class="mr-auto">${this.label}</div>
+        <div class="flex flex-wrap justify-end items-center gap-s">
+          ${Object.entries(this.colors).map(([colorName, className]) => {
             const isSelected = colorName === currentValue;
             return html `
-            <div
-              class=${classMap({
-                'relative p-s -m-s rounded-s': true,
+              <div
+                class=${classMap({
+                'relative p-s -m-s rounded-s flex-shrink-0': true,
                 'group transform transition-transform': true,
                 'focus-within-ring-2 focus-within-ring-primary-50': true,
                 'cursor-pointer hover-scale-150': !isSelected && !this.disabled && !this.readonly,
             })}
-            >
-              <div
-                style="width: 1.25em; height: 1.25em; padding: 2px;"
-                class=${classMap({
+              >
+                <div
+                  style="width: 1em; height: 1em; padding: 2px;"
+                  class=${classMap({
                 'relative rounded-full transition-all': true,
                 'ring-1 ring-contrast-10': !isSelected,
                 'ring-2 ring-contrast-80': isSelected && !this.disabled,
                 'ring-2 ring-contrast-10': isSelected && this.disabled,
             })}
-              >
-                <div
-                  class=${classMap({
+                >
+                  <div
+                    class=${classMap({
                 'w-full h-full rounded-full transition-opacity': true,
                 'opacity-25': this.disabled,
                 [className]: true,
             })}
-                ></div>
-              </div>
-              ${this.readonly
+                  ></div>
+                </div>
+                ${this.readonly
                 ? ''
                 : html `
-                    <input
-                      aria-label=${this.t(`color_${colorName || 'none'}`)}
-                      class="absolute inset-0 block w-full h-full opacity-0"
-                      value=${colorName}
-                      name="color"
-                      type="radio"
-                      ?disabled=${this.disabled}
-                      ?checked=${isSelected}
-                      @change=${() => (this._value = colorName)}
-                    />
-                  `}
-            </div>
-          `;
+                      <input
+                        aria-label=${this.t(`color_${colorName || 'none'}`)}
+                        class=${classMap({
+                    'absolute inset-0 block w-full h-full opacity-0': true,
+                    'cursor-pointer': !isSelected && !this.disabled && !this.readonly,
+                })}
+                        value=${colorName}
+                        name="color"
+                        type="radio"
+                        ?disabled=${this.disabled}
+                        ?checked=${isSelected}
+                        @change=${() => (this._value = colorName)}
+                      />
+                    `}
+              </div>
+            `;
         })}
+        </div>
       </div>
     `;
     }

package/dist/elements/public/StoreTransactionFolderForm/internal/InternalStoreTransactionFolderFormColorControl/InternalStoreTransactionFolderFormColorControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalStoreTransactionFolderFormColorControl.js","sourceRoot":"","sources":["../../../../../../src/elements/public/StoreTransactionFolderForm/internal/InternalStoreTransactionFolderFormColorControl/InternalStoreTransactionFolderFormColorControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,gFAA6E;AAC/G,OAAO,EAAE,QAAQ,EAAE,0CAAuC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,OAAO,8CAA+C,SAAQ,uBAAuB;IAA3F;;QAQE,WAAM,GAA2B,EAAE,CAAC;IAwDtC,CAAC;IA/DC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACzB,CAAC;IACJ,CAAC;IAID,aAAa;QACX,MAAM,YAAY,GAAI,IAAI,CAAC,MAAiB,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAE,IAAI,CAAC,MAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;QAE3F,OAAO,IAAI,CAAA;;UAEL,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,EAAE;YAC3D,MAAM,UAAU,GAAG,SAAS,KAAK,YAAY,CAAC;YAE9C,OAAO,IAAI,CAAA;;sBAEC,QAAQ,CAAC;gBACf,6BAA6B,EAAE,IAAI;gBACnC,sCAAsC,EAAE,IAAI;gBAC5C,kDAAkD,EAAE,IAAI;gBACxD,gCAAgC,EAAE,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;aAClF,CAAC;;;;wBAIQ,QAAQ,CAAC;gBACf,sCAAsC,EAAE,IAAI;gBAC5C,yBAAyB,EAAE,CAAC,UAAU;gBACtC,yBAAyB,EAAE,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ;gBACvD,yBAAyB,EAAE,UAAU,IAAI,IAAI,CAAC,QAAQ;aACvD,CAAC;;;0BAGQ,QAAQ,CAAC;gBACf,+CAA+C,EAAE,IAAI;gBACrD,YAAY,EAAE,IAAI,CAAC,QAAQ;gBAC3B,CAAC,SAAS,CAAC,EAAE,IAAI;aAClB,CAAC;;;gBAGJ,IAAI,CAAC,QAAQ;gBACb,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC,IAAI,CAAA;;mCAEa,IAAI,CAAC,CAAC,CAAC,SAAS,SAAS,IAAI,MAAM,EAAE,CAAC;;8BAE3C,SAAS;;;kCAGL,IAAI,CAAC,QAAQ;iCACd,UAAU;gCACX,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;;mBAE5C;;WAER,CAAC;QACJ,CAAC,CAAC;;KAEL,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\n\nimport { InternalEditableControl } from '../../../../internal/InternalEditableControl/InternalEditableControl';\nimport { classMap } from '../../../../../utils/class-map';\nimport { html } from 'lit-html';\n\nexport class InternalStoreTransactionFolderFormColorControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      colors: { type: Object },\n    };\n  }\n\n  colors: Record<string, string> = {};\n\n  renderControl(): TemplateResult {\n    const currentValue = (this._value as string) in this.colors ? (this._value as string) : '';\n\n    return html`\n      <div class=\"flex flex-wrap items-center justify-center gap-s flex-shrink-0\">\n        ${Object.entries(this.colors).map(([colorName, className]) => {\n          const isSelected = colorName === currentValue;\n\n          return html`\n            <div\n              class=${classMap({\n                'relative p-s -m-s rounded-s': true,\n                'group transform transition-transform': true,\n                'focus-within-ring-2 focus-within-ring-primary-50': true,\n                'cursor-pointer hover-scale-150': !isSelected && !this.disabled && !this.readonly,\n              })}\n            >\n              <div\n                style=\"width: 1.25em; height: 1.25em; padding: 2px;\"\n                class=${classMap({\n                  'relative rounded-full transition-all': true,\n                  'ring-1 ring-contrast-10': !isSelected,\n                  'ring-2 ring-contrast-80': isSelected && !this.disabled,\n                  'ring-2 ring-contrast-10': isSelected && this.disabled,\n                })}\n              >\n                <div\n                  class=${classMap({\n                    'w-full h-full rounded-full transition-opacity': true,\n                    'opacity-25': this.disabled,\n                    [className]: true,\n                  })}\n                ></div>\n              </div>\n              ${this.readonly\n                ? ''\n                : html`\n                    <input\n                      aria-label=${this.t(`color_${colorName || 'none'}`)}\n                      class=\"absolute inset-0 block w-full h-full opacity-0\"\n                      value=${colorName}\n                      name=\"color\"\n                      type=\"radio\"\n                      ?disabled=${this.disabled}\n                      ?checked=${isSelected}\n                      @change=${() => (this._value = colorName)}\n                    />\n                  `}\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalStoreTransactionFolderFormColorControl.js","sourceRoot":"","sources":["../../../../../../src/elements/public/StoreTransactionFolderForm/internal/InternalStoreTransactionFolderFormColorControl/InternalStoreTransactionFolderFormColorControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,gFAA6E;AAC/G,OAAO,EAAE,QAAQ,EAAE,0CAAuC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,OAAO,8CAA+C,SAAQ,uBAAuB;IAA3F;;QAQE,WAAM,GAA2B,EAAE,CAAC;IA8DtC,CAAC;IArEC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACzB,CAAC;IACJ,CAAC;IAID,aAAa;QACX,MAAM,YAAY,GAAI,IAAI,CAAC,MAAiB,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAE,IAAI,CAAC,MAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;QAE3F,OAAO,IAAI,CAAA;;+BAEgB,IAAI,CAAC,KAAK;;YAE7B,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,EAAE;YAC3D,MAAM,UAAU,GAAG,SAAS,KAAK,YAAY,CAAC;YAE9C,OAAO,IAAI,CAAA;;wBAEC,QAAQ,CAAC;gBACf,2CAA2C,EAAE,IAAI;gBACjD,sCAAsC,EAAE,IAAI;gBAC5C,kDAAkD,EAAE,IAAI;gBACxD,gCAAgC,EAAE,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;aAClF,CAAC;;;;0BAIQ,QAAQ,CAAC;gBACf,sCAAsC,EAAE,IAAI;gBAC5C,yBAAyB,EAAE,CAAC,UAAU;gBACtC,yBAAyB,EAAE,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ;gBACvD,yBAAyB,EAAE,UAAU,IAAI,IAAI,CAAC,QAAQ;aACvD,CAAC;;;4BAGQ,QAAQ,CAAC;gBACf,+CAA+C,EAAE,IAAI;gBACrD,YAAY,EAAE,IAAI,CAAC,QAAQ;gBAC3B,CAAC,SAAS,CAAC,EAAE,IAAI;aAClB,CAAC;;;kBAGJ,IAAI,CAAC,QAAQ;gBACb,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC,IAAI,CAAA;;qCAEa,IAAI,CAAC,CAAC,CAAC,SAAS,SAAS,IAAI,MAAM,EAAE,CAAC;gCAC3C,QAAQ,CAAC;oBACf,gDAAgD,EAAE,IAAI;oBACtD,gBAAgB,EAAE,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;iBAClE,CAAC;gCACM,SAAS;;;oCAGL,IAAI,CAAC,QAAQ;mCACd,UAAU;kCACX,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;;qBAE5C;;aAER,CAAC;QACJ,CAAC,CAAC;;;KAGP,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\n\nimport { InternalEditableControl } from '../../../../internal/InternalEditableControl/InternalEditableControl';\nimport { classMap } from '../../../../../utils/class-map';\nimport { html } from 'lit-html';\n\nexport class InternalStoreTransactionFolderFormColorControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      colors: { type: Object },\n    };\n  }\n\n  colors: Record<string, string> = {};\n\n  renderControl(): TemplateResult {\n    const currentValue = (this._value as string) in this.colors ? (this._value as string) : '';\n\n    return html`\n      <div class=\"flex gap-s\">\n        <div class=\"mr-auto\">${this.label}</div>\n        <div class=\"flex flex-wrap justify-end items-center gap-s\">\n          ${Object.entries(this.colors).map(([colorName, className]) => {\n            const isSelected = colorName === currentValue;\n\n            return html`\n              <div\n                class=${classMap({\n                  'relative p-s -m-s rounded-s flex-shrink-0': true,\n                  'group transform transition-transform': true,\n                  'focus-within-ring-2 focus-within-ring-primary-50': true,\n                  'cursor-pointer hover-scale-150': !isSelected && !this.disabled && !this.readonly,\n                })}\n              >\n                <div\n                  style=\"width: 1em; height: 1em; padding: 2px;\"\n                  class=${classMap({\n                    'relative rounded-full transition-all': true,\n                    'ring-1 ring-contrast-10': !isSelected,\n                    'ring-2 ring-contrast-80': isSelected && !this.disabled,\n                    'ring-2 ring-contrast-10': isSelected && this.disabled,\n                  })}\n                >\n                  <div\n                    class=${classMap({\n                      'w-full h-full rounded-full transition-opacity': true,\n                      'opacity-25': this.disabled,\n                      [className]: true,\n                    })}\n                  ></div>\n                </div>\n                ${this.readonly\n                  ? ''\n                  : html`\n                      <input\n                        aria-label=${this.t(`color_${colorName || 'none'}`)}\n                        class=${classMap({\n                          'absolute inset-0 block w-full h-full opacity-0': true,\n                          'cursor-pointer': !isSelected && !this.disabled && !this.readonly,\n                        })}\n                        value=${colorName}\n                        name=\"color\"\n                        type=\"radio\"\n                        ?disabled=${this.disabled}\n                        ?checked=${isSelected}\n                        @change=${() => (this._value = colorName)}\n                      />\n                    `}\n              </div>\n            `;\n          })}\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/elements/public/SubscriptionCard/SubscriptionCard.js

@@ -91,9 +91,7 @@ export class SubscriptionCard extends Base {
               </div>
             </div>
 
-            <div
-              class="flex-1 leading-xs mb-xs sm-mb-0 sm-text-right order-0 sm-order-1"
-            >
+            <div class="flex-1 leading-xs mb-xs sm-mb-0 sm-text-right order-0 sm-order-1">
               <foxy-i18n
                 data-testid="price"
                 options=${JSON.stringify(this.__getPriceOptions())}
@@ -104,13 +102,28 @@ export class SubscriptionCard extends Base {
                 ns=${this.ns}
               >
               </foxy-i18n>
+
               <span class="text-secondary font-medium sm-font-normal sm-block text-xxs sm-text-s">
-                <span class="sm-hidden">(</span><span class="hidden sm-inline">*</span><foxy-i18n infer="" key="fees_hint"></foxy-i18n><span class="sm-hidden">)</span>
+                <span class="sm-hidden">(</span>
+                <span class="hidden sm-inline">*</span>
+                <foxy-i18n infer="" key="fees_hint"></foxy-i18n>
+                <span class="sm-hidden">)</span>
                 <iron-icon id="hint" icon="icons:info-outline" class="icon-inline"></iron-icon>
-                <vcf-tooltip for="hint" position="bottom">
-                  <span class="text-s"><foxy-i18n infer="" key="fees_explainer"></foxy-i18n></span>
+                <vcf-tooltip
+                  position="bottom"
+                  style="--lumo-base-color: black"
+                  theme="light"
+                  for="hint"
+                >
+                  <foxy-i18n
+                    infer=""
+                    class="text-s whitespace-nowrap"
+                    style="color: white"
+                    key="fees_explainer"
+                  >
+                  </foxy-i18n>
                 </vcf-tooltip>
-              <span>
+              </span>
               &#8203;
             </div>
           </div>

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

@@ -1 +1 @@
-{"version":3,"file":"SubscriptionCard.js","sourceRoot":"","sources":["../../../../src/elements/public/SubscriptionCard/SubscriptionCard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { Data, Settings } from './types';\n\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { parseFrequency } from '../../../utils/parse-frequency';\n\nimport {\n  getExtendedSubscriptionStatus,\n  getSubscriptionStatus,\n} from '../../../utils/get-subscription-status';\n\nconst NS = 'subscription-card';\nconst Base = ConfigurableMixin(\n  ResponsiveMixin(ThemeableMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/**\n * Card element displaying subscription summary.\n *\n * @element foxy-subscription-card\n * @since 1.4.0\n */\nexport class SubscriptionCard extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      settings: { type: Object },\n    };\n  }\n\n  settings: Settings | null = null;\n\n  render(): TemplateResult {\n    const status = this.settings\n      ? getExtendedSubscriptionStatus(this.data, this.settings)\n      : getSubscriptionStatus(this.data);\n\n    const isRed = status === 'failed';\n    const isGreen = status?.startsWith('next_payment') || !!status?.startsWith('will_end');\n    const isNormal = !isGreen && !isRed;\n\n    return html`\n      <div class=\"relative text-left\">\n        <div\n          class=${classMap({\n            'flex items-start sm-items-center space-x-m transition duration-150 ease-in-out': true,\n            'opacity-0': !this.in({ idle: 'snapshot' }),\n          })}\n        >\n          <div\n            class=${classMap({\n              'min-w-0 flex-shrink-0 rounded-full relative flex p-s': true,\n              'text-success bg-success-10': isGreen,\n              'text-body bg-contrast-5': isNormal,\n              'text-error bg-error-10': isRed,\n            })}\n          >\n            <iron-icon\n              class=\"m-auto\"\n              icon=${isRed ? 'error-outline' : isGreen ? 'done' : 'done-all'}\n            >\n            </iron-icon>\n          </div>\n\n          <div class=\"flex-1 min-w-0 leading-xs flex flex-col sm-flex-row sm-items-center\">\n            <div class=\"order-1 sm-order-0\">\n              <div class=\"text-body font-medium origin-top-left text-m\">\n                <foxy-i18n\n                  data-testid=\"summary\"\n                  options=${JSON.stringify(this.__getSummaryOptions())}\n                  lang=${this.lang}\n                  key=\"transaction_summary\"\n                  ns=${this.ns}\n                >\n                </foxy-i18n>\n                &#8203;\n              </div>\n\n              <div\n                class=${classMap({\n                  'text-m': true,\n                  'text-tertiary': isNormal,\n                  'text-success': isGreen,\n                  'text-error': isRed,\n                })}\n              >\n                <foxy-i18n\n                  data-testid=\"status\"\n                  lang=${this.lang}\n                  key=\"status_${status}\"\n                  ns=${this.ns}\n                  .options=${this.data}\n                >\n                </foxy-i18n>\n                &#8203;\n              </div>\n            </div>\n\n            <div\n              class=\"flex-1 leading-xs mb-xs sm-mb-0 sm-text-right order-0 sm-order-1\"\n            >\n              <foxy-i18n\n                data-testid=\"price\"\n                options=${JSON.stringify(this.__getPriceOptions())}\n                class=\"text-xxs sm-text-l font-tnum tracking-wide sm-tracking-normal uppercase sm-normal-case font-medium text-secondary sm-text-body sm-block\"\n                lang=${this.lang}\n                key=\"price${\n                  this.settings?.cart_display_config.show_sub_frequency ?? true\n                    ? `_${this.data?.frequency === '.5m' ? 'twice_a_month' : 'recurring'}`\n                    : ''\n                }\"\n                ns=${this.ns}\n              >\n              </foxy-i18n>\n              <span class=\"text-secondary font-medium sm-font-normal sm-block text-xxs sm-text-s\">\n                <span class=\"sm-hidden\">(</span><span class=\"hidden sm-inline\">*</span><foxy-i18n infer=\"\" key=\"fees_hint\"></foxy-i18n><span class=\"sm-hidden\">)</span>\n                <iron-icon id=\"hint\" icon=\"icons:info-outline\" class=\"icon-inline\"></iron-icon>\n                <vcf-tooltip for=\"hint\" position=\"bottom\">\n                  <span class=\"text-s\"><foxy-i18n infer=\"\" key=\"fees_explainer\"></foxy-i18n></span>\n                </vcf-tooltip>\n              <span>\n              &#8203;\n            </div>\n          </div>\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'pointer-events-none absolute inset-0 flex transition ease-in-out duration-150': true,\n            'opacity-0': this.in({ idle: 'snapshot' }),\n          })}\n        >\n          <foxy-spinner\n            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\n            class=\"m-auto\"\n            lang=${this.lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n\n      ${this.renderTemplateOrSlot()}\n    `;\n  }\n\n  private __getSummaryOptions() {\n    if (this.data === null) return {};\n    const items = this.data._embedded['fx:transaction_template']._embedded['fx:items'];\n\n    return {\n      count_minus_one: items.length - 1,\n      first_item: items[0],\n      count: items.length,\n    };\n  }\n\n  private __getPriceOptions() {\n    if (this.data === null) return {};\n\n    const cart = this.data._embedded['fx:transaction_template'];\n    const amount = `${cart.total_order} ${cart.currency_code}`;\n    return { ...parseFrequency(this.data.frequency), amount };\n  }\n}\n"]}
+{"version":3,"file":"SubscriptionCard.js","sourceRoot":"","sources":["../../../../src/elements/public/SubscriptionCard/SubscriptionCard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { Data, Settings } from './types';\n\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { parseFrequency } from '../../../utils/parse-frequency';\n\nimport {\n  getExtendedSubscriptionStatus,\n  getSubscriptionStatus,\n} from '../../../utils/get-subscription-status';\n\nconst NS = 'subscription-card';\nconst Base = ConfigurableMixin(\n  ResponsiveMixin(ThemeableMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/**\n * Card element displaying subscription summary.\n *\n * @element foxy-subscription-card\n * @since 1.4.0\n */\nexport class SubscriptionCard extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      settings: { type: Object },\n    };\n  }\n\n  settings: Settings | null = null;\n\n  render(): TemplateResult {\n    const status = this.settings\n      ? getExtendedSubscriptionStatus(this.data, this.settings)\n      : getSubscriptionStatus(this.data);\n\n    const isRed = status === 'failed';\n    const isGreen = status?.startsWith('next_payment') || !!status?.startsWith('will_end');\n    const isNormal = !isGreen && !isRed;\n\n    return html`\n      <div class=\"relative text-left\">\n        <div\n          class=${classMap({\n            'flex items-start sm-items-center space-x-m transition duration-150 ease-in-out': true,\n            'opacity-0': !this.in({ idle: 'snapshot' }),\n          })}\n        >\n          <div\n            class=${classMap({\n              'min-w-0 flex-shrink-0 rounded-full relative flex p-s': true,\n              'text-success bg-success-10': isGreen,\n              'text-body bg-contrast-5': isNormal,\n              'text-error bg-error-10': isRed,\n            })}\n          >\n            <iron-icon\n              class=\"m-auto\"\n              icon=${isRed ? 'error-outline' : isGreen ? 'done' : 'done-all'}\n            >\n            </iron-icon>\n          </div>\n\n          <div class=\"flex-1 min-w-0 leading-xs flex flex-col sm-flex-row sm-items-center\">\n            <div class=\"order-1 sm-order-0\">\n              <div class=\"text-body font-medium origin-top-left text-m\">\n                <foxy-i18n\n                  data-testid=\"summary\"\n                  options=${JSON.stringify(this.__getSummaryOptions())}\n                  lang=${this.lang}\n                  key=\"transaction_summary\"\n                  ns=${this.ns}\n                >\n                </foxy-i18n>\n                &#8203;\n              </div>\n\n              <div\n                class=${classMap({\n                  'text-m': true,\n                  'text-tertiary': isNormal,\n                  'text-success': isGreen,\n                  'text-error': isRed,\n                })}\n              >\n                <foxy-i18n\n                  data-testid=\"status\"\n                  lang=${this.lang}\n                  key=\"status_${status}\"\n                  ns=${this.ns}\n                  .options=${this.data}\n                >\n                </foxy-i18n>\n                &#8203;\n              </div>\n            </div>\n\n            <div class=\"flex-1 leading-xs mb-xs sm-mb-0 sm-text-right order-0 sm-order-1\">\n              <foxy-i18n\n                data-testid=\"price\"\n                options=${JSON.stringify(this.__getPriceOptions())}\n                class=\"text-xxs sm-text-l font-tnum tracking-wide sm-tracking-normal uppercase sm-normal-case font-medium text-secondary sm-text-body sm-block\"\n                lang=${this.lang}\n                key=\"price${this.settings?.cart_display_config.show_sub_frequency ?? true\n                  ? `_${this.data?.frequency === '.5m' ? 'twice_a_month' : 'recurring'}`\n                  : ''}\"\n                ns=${this.ns}\n              >\n              </foxy-i18n>\n\n              <span class=\"text-secondary font-medium sm-font-normal sm-block text-xxs sm-text-s\">\n                <span class=\"sm-hidden\">(</span>\n                <span class=\"hidden sm-inline\">*</span>\n                <foxy-i18n infer=\"\" key=\"fees_hint\"></foxy-i18n>\n                <span class=\"sm-hidden\">)</span>\n                <iron-icon id=\"hint\" icon=\"icons:info-outline\" class=\"icon-inline\"></iron-icon>\n                <vcf-tooltip\n                  position=\"bottom\"\n                  style=\"--lumo-base-color: black\"\n                  theme=\"light\"\n                  for=\"hint\"\n                >\n                  <foxy-i18n\n                    infer=\"\"\n                    class=\"text-s whitespace-nowrap\"\n                    style=\"color: white\"\n                    key=\"fees_explainer\"\n                  >\n                  </foxy-i18n>\n                </vcf-tooltip>\n              </span>\n              &#8203;\n            </div>\n          </div>\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'pointer-events-none absolute inset-0 flex transition ease-in-out duration-150': true,\n            'opacity-0': this.in({ idle: 'snapshot' }),\n          })}\n        >\n          <foxy-spinner\n            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\n            class=\"m-auto\"\n            lang=${this.lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n\n      ${this.renderTemplateOrSlot()}\n    `;\n  }\n\n  private __getSummaryOptions() {\n    if (this.data === null) return {};\n    const items = this.data._embedded['fx:transaction_template']._embedded['fx:items'];\n\n    return {\n      count_minus_one: items.length - 1,\n      first_item: items[0],\n      count: items.length,\n    };\n  }\n\n  private __getPriceOptions() {\n    if (this.data === null) return {};\n\n    const cart = this.data._embedded['fx:transaction_template'];\n    const amount = `${cart.total_order} ${cart.currency_code}`;\n    return { ...parseFrequency(this.data.frequency), amount };\n  }\n}\n"]}

package/dist/elements/public/TransactionCard/TransactionCard.js

@@ -146,8 +146,19 @@ class TransactionCard extends Base {
 
         <div class="text-tertiary text-s flex items-center space-x-xs">
           ${((_d = this.data) === null || _d === void 0 ? void 0 : _d.hide_transaction) ? html `
-                <vcf-tooltip for="hidden" theme="light" position="top">
-                  <foxy-i18n infer="" key="hidden_hint"></foxy-i18n>
+                <vcf-tooltip
+                  position="top"
+                  theme="light"
+                  style="--lumo-base-color: black"
+                  for="hidden"
+                >
+                  <foxy-i18n
+                    infer=""
+                    class="text-s whitespace-nowrap"
+                    style="color: white"
+                    key="hidden_hint"
+                  >
+                  </foxy-i18n>
                 </vcf-tooltip>
                 <iron-icon
                   class="icon-inline cursor-default"
@@ -159,8 +170,19 @@ class TransactionCard extends Base {
             : ''}
           ${source
             ? html `
-                <vcf-tooltip for="source" theme="light" position="top">
-                  <foxy-i18n infer="" key="source_${source}"></foxy-i18n>
+                <vcf-tooltip
+                  position="top"
+                  theme="light"
+                  style="--lumo-base-color: black"
+                  for="source"
+                >
+                  <foxy-i18n
+                    infer=""
+                    style="color: white"
+                    class="whitespace-nowrap text-s"
+                    key="source_${source}"
+                  >
+                  </foxy-i18n>
                 </vcf-tooltip>
                 <span class="cursor-default" id="source">${source}</span>
               `
@@ -182,8 +204,14 @@ class TransactionCard extends Base {
           >
           </iron-icon>
 
-          <vcf-tooltip for="status" theme="light" position="top">
-            <foxy-i18n infer="" key="status_${status}"></foxy-i18n>
+          <vcf-tooltip for="status" theme="light" position="top" style="--lumo-base-color: black">
+            <foxy-i18n
+              infer=""
+              class="whitespace-nowrap text-s"
+              style="color: white"
+              key="status_${status}"
+            >
+            </foxy-i18n>
           </vcf-tooltip>
         </div>
 

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

@@ -1 +1 @@
-{"version":3,"file":"TransactionCard.js","sourceRoot":"","sources":["../../../../src/elements/public/TransactionCard/TransactionCard.ts"],"names":[],"mappings":"AAIA,OAAO,EAAY,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,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,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC,CAAC;AAEpE;;;;;GAKG;AACH,MAAM,eAAgB,SAAQ,IAAU;IAAxC;;QACU,sBAAiB,GAAG,EAAE,CAAC;IAkPjC,CAAC;IAhPC,UAAU;;QACR,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;QAC3C,MAAM,QAAQ,GAAG,CAAC,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QACxD,MAAM,SAAS,GAAG,CAAC,cAAc,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;QAE1D,OAAO,IAAI,CAAA;;oBAEK,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;;;qBAId,QAAQ,CAAC,EAAE,oBAAoB,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YAC1E,QAAQ,IAAI,SAAS;YACrB,CAAC,CAAC,IAAI,CAAA;;oBAEE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,EAAE;oBACzC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE;;eAE3C;YACH,CAAC,CAAC,EAAE;YACJ,cAAc,CAAC,OAAO,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE;YACzE,cAAc,CAAC,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE;;;;kBAIjE,QAAQ,CAAC;YACf,8DAA8D,EAAE,IAAI;YACpE,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;SACzB,CAAC;;;;oBAIQ,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;;mBAE7E,IAAI,CAAC,IAAI;kBACV,IAAI,CAAC,EAAE,IAAI,YAAA,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,0CAAE,SAAS,mCAAI,EAAE;;;;;KAK3E,CAAC;IACJ,CAAC;IAES,KAAK,CAAC,QAAQ;;QACtB,MAAM,WAAW,GAAG,MAAM,KAAK,CAAC,QAAQ,EAAE,CAAC;QAC3C,MAAM,SAAS,SAAG,WAAW,CAAC,MAAM,CAAC,UAAU,CAAC,0CAAE,IAAI,CAAC;QAEvD,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;YACjC,MAAM,KAAK,GAAG,MAAM,KAAK,CAAC,MAAM,CAAuB,SAAS,CAAC,CAAC;YAClE,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,iCAAiC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;SACtF;aAAM;YACL,IAAI,CAAC,iBAAiB,GAAG,QAAQ,CAAC;SACnC;QAED,OAAO,WAAW,CAAC;IACrB,CAAC;IAEO,kBAAkB;QACxB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,OAAuB,CAAC;QAE5B,IAAI,IAAI,EAAE;YACR,MAAM,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YAC3D,MAAM,eAAe,GAAG,IAAI,CAAC,iBAAiB,CAAC;YAC/C,MAAM,OAAO,GAAG,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC;YAE5C,OAAO,GAAG,IAAI,CAAA;oCACgB,IAAI,CAAC,UAAU,IAAI,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;UACjF,IAAI,CAAC,IAAI,KAAK,YAAY,IAAI,IAAI,CAAC,IAAI,KAAK,2BAA2B;gBACvE,CAAC,CAAC,IAAI,CAAA;;oCAEoB,OAAO;;aAE9B;gBACH,CAAC,CAAC,EAAE;UACJ,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,EACb,CAAC,CAAC,IAAI,CAAA;;;;;;;aAOH;gBACH,CAAC,CAAC,EAAE;OACP,CAAC;SACH;aAAM;YACL,OAAO,GAAG,IAAI,CAAA,kBAAkB,CAAC;SAClC;QAED,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC;4DACS,OAAO;UACzD,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;;KAE7C,CAAC;IACJ,CAAC;IAEO,cAAc;;QACpB,MAAM,YAAY,GAA2B;YAC3C,UAAU,EAAE,YAAY;YACxB,SAAS,EAAE,YAAY;YACvB,QAAQ,EAAE,YAAY;YACtB,QAAQ,EAAE,YAAY;YACtB,OAAO,EAAE,YAAY;YAErB,SAAS,EAAE,gBAAgB;YAE3B,oBAAoB,EAAE,oBAAoB;YAC1C,QAAQ,EAAE,qBAAqB;YAC/B,QAAQ,EAAE,qBAAqB;YAC/B,OAAO,EAAE,oBAAoB;YAE7B,QAAQ,EAAE,eAAe;YACzB,MAAM,EAAE,6BAA6B;SACtC,CAAC;QAEF,MAAM,aAAa,GAA2B;YAC5C,UAAU,EAAE,cAAc;YAC1B,SAAS,EAAE,cAAc;YACzB,SAAS,EAAE,cAAc;YACzB,QAAQ,EAAE,cAAc;YACxB,QAAQ,EAAE,cAAc;YACxB,OAAO,EAAE,cAAc;YAEvB,oBAAoB,EAAE,YAAY;YAClC,QAAQ,EAAE,YAAY;YACtB,QAAQ,EAAE,YAAY;YACtB,OAAO,EAAE,YAAY;SACtB,CAAC;QAEF,MAAM,MAAM,GAAG,OAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,KAAI,WAAW,CAAC;QAChD,MAAM,MAAM,eAAG,IAAI,CAAC,IAAI,0CAAE,MAAM,0CAAE,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC;QAEhE,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,eAAe,CAAC;;;YAGxC,OAAA,IAAI,CAAC,IAAI,0CAAE,gBAAgB,EAC3B,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;eAUH;YACH,CAAC,CAAC,EAAE;YACJ,MAAM;YACN,CAAC,CAAC,IAAI,CAAA;;oDAEkC,MAAM;;2DAEC,MAAM;eAClD;YACH,CAAC,CAAC,EAAE;;;sBAGM,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,QAAE,IAAI,CAAC,IAAI,0CAAE,gBAAgB,EAAE,CAAC;mBACzD,IAAI,CAAC,IAAI;;iBAEX,IAAI,CAAC,EAAE;;;;;;uDAM+B,MAAA,aAAa,CAAC,MAAM,CAAC,mCAAI,eAAe;;mBAE5E,MAAA,YAAY,CAAC,MAAM,CAAC,mCAAI,gBAAgB;;;;;8CAKb,MAAM;;;;UAI1C,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC;;KAE9C,CAAC;IACJ,CAAC;IAEO,eAAe;;QACrB,MAAM,KAAK,eAAG,IAAI,CAAC,IAAI,0CAAE,SAAS,0CAAG,UAAU,CAAC,CAAC;QACjD,MAAM,IAAI,SAAG,IAAI,CAAC,IAAI,0CAAE,IAAI,CAAC;QAE7B,IAAI,OAAuB,CAAC;QAC5B,IAAI,GAAW,CAAC;QAEhB,IAAI,IAAI,KAAK,YAAY,EAAE;YACzB,GAAG,GAAG,+BAA+B,CAAC;SACvC;aAAM,IAAI,IAAI,KAAK,2BAA2B,EAAE;YAC/C,GAAG,GAAG,mCAAmC,CAAC;SAC3C;aAAM,IAAI,IAAI,KAAK,2BAA2B,EAAE;YAC/C,GAAG,GAAG,mCAAmC,CAAC;SAC3C;aAAM;YACL,GAAG,GAAG,SAAS,CAAC;SACjB;QAED,IAAI,KAAK,EAAE;YACT,MAAM,OAAO,GAAG;gBACd,eAAe,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC;gBACjC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;gBACpB,KAAK,EAAE,KAAK,CAAC,MAAM;aACpB,CAAC;YAEF,OAAO,GAAG,IAAI,CAAA,uBAAuB,OAAO,iBAAiB,GAAG,eAAe,CAAC;SACjF;aAAM;YACL,OAAO,GAAG,IAAI,CAAA,kBAAkB,CAAC;SAClC;QAED,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,oBAAoB,CAAC;sDACH,OAAO;UACnD,IAAI,CAAC,oBAAoB,CAAC,mBAAmB,CAAC;;KAEnD,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,MAAM,OAAO,GAAG,IAAI;YAClB,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC,cAAc,GAAG;YACvF,CAAC,CAAC,IAAI,CAAA,kBAAkB,CAAC;QAE3B,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;qDACD,OAAO;UAClD,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC;;KAEhD,CAAC;IACJ,CAAC;CACF;AAED,OAAO,EAAE,eAAe,EAAE,CAAC","sourcesContent":["import type { Data } from './types';\nimport type { TemplateResult } from 'lit-html';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\nimport { Resource, getResourceId } from '@foxy.io/sdk/core';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\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 = 'transaction-card';\nconst Base = ConfigurableMixin(TranslatableMixin(InternalCard, NS));\n\n/**\n * Basic card displaying a transaction.\n *\n * @element foxy-transaction-card\n * @since 1.12.0\n */\nclass TransactionCard extends Base<Data> {\n  private __currencyDisplay = '';\n\n  renderBody(): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n    const hasTotal = !hiddenSelector.matches('total', true);\n    const hasStatus = !hiddenSelector.matches('status', true);\n\n    return html`\n      <div\n        aria-busy=${this.in('busy')}\n        aria-live=\"polite\"\n        class=\"relative leading-s font-lumo text-m\"\n      >\n        <div class=${classMap({ 'transition-opacity': true, 'opacity-0': !this.data })}>\n          ${hasTotal || hasStatus\n            ? html`\n                <div class=\"flex items-center justify-between gap-s\">\n                  ${hasTotal ? this.__renderIdAndTotal() : ''}\n                  ${hasStatus ? this.__renderStatus() : ''}\n                </div>\n              `\n            : ''}\n          ${hiddenSelector.matches('description', true) ? '' : this.__renderSummary()}\n          ${hiddenSelector.matches('customer', true) ? '' : this.__renderCustomer()}\n        </div>\n\n        <div\n          class=${classMap({\n            'pointer-events-none absolute inset-0 flex transition-opacity': true,\n            'opacity-0': !!this.data,\n          })}\n        >\n          <foxy-spinner\n            data-testid=\"spinner\"\n            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\n            class=\"m-auto\"\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  protected async _sendGet(): Promise<Data> {\n    const transaction = await super._sendGet();\n    const storeLink = transaction._links['fx:store']?.href;\n\n    if (typeof storeLink === 'string') {\n      const store = await super._fetch<Resource<Rels.Store>>(storeLink);\n      this.__currencyDisplay = store.use_international_currency_symbol ? 'code' : 'symbol';\n    } else {\n      this.__currencyDisplay = 'symbol';\n    }\n\n    return transaction;\n  }\n\n  private __renderIdAndTotal() {\n    const data = this.data;\n    let content: TemplateResult;\n\n    if (data) {\n      const amount = `${data.total_order} ${data.currency_code}`;\n      const currencyDisplay = this.__currencyDisplay;\n      const options = { amount, currencyDisplay };\n\n      content = html`\n        <span class=\"truncate\">ID ${data.display_id || getResourceId(data._links.self.href)}</span>\n        ${data.type !== 'updateinfo' && data.type !== 'subscription_cancellation'\n          ? html`\n              <span>&bull;</span>\n              <foxy-i18n .options=${options} infer=\"\" class=\"whitespace-nowrap\" key=\"price\">\n              </foxy-i18n>\n            `\n          : ''}\n        ${data?.is_test\n          ? html`\n              <foxy-i18n\n                infer=\"\"\n                class=\"inline-block text-xs font-medium uppercase bg-contrast-5 text-tertiary rounded-s p-xs leading-none tracking-wider\"\n                key=\"test\"\n              >\n              </foxy-i18n>\n            `\n          : ''}\n      `;\n    } else {\n      content = html`&ZeroWidthSpace;`;\n    }\n\n    return html`\n      <div class=\"min-w-0\" data-testid=\"total\">\n        ${this.renderTemplateOrSlot('total:before')}\n        <div class=\"font-medium flex items-center gap-xs\">${content}</div>\n        ${this.renderTemplateOrSlot('total:after')}\n      </div>\n    `;\n  }\n\n  private __renderStatus() {\n    const specialIcons: Record<string, string> = {\n      authorized: 'icons:done',\n      capturing: 'icons:done',\n      captured: 'icons:done',\n      approved: 'icons:done',\n      pending: 'icons:done',\n\n      completed: 'icons:done-all',\n\n      pending_fraud_review: 'icons:info-outline',\n      declined: 'icons:highlight-off',\n      rejected: 'icons:highlight-off',\n      problem: 'icons:info-outline',\n\n      refunded: 'icons:restore',\n      voided: 'icons:remove-circle-outline',\n    };\n\n    const specialColors: Record<string, string> = {\n      authorized: 'text-success',\n      completed: 'text-success',\n      capturing: 'text-success',\n      captured: 'text-success',\n      approved: 'text-success',\n      pending: 'text-success',\n\n      pending_fraud_review: 'text-error',\n      declined: 'text-error',\n      rejected: 'text-error',\n      problem: 'text-error',\n    };\n\n    const status = this.data?.status || 'completed';\n    const source = this.data?.source?.substring(0, 3).toUpperCase();\n\n    return html`\n      <div class=\"flex-shrink-0\" data-testid=\"status\">\n        ${this.renderTemplateOrSlot('status:before')}\n\n        <div class=\"text-tertiary text-s flex items-center space-x-xs\">\n          ${this.data?.hide_transaction\n            ? html`\n                <vcf-tooltip for=\"hidden\" theme=\"light\" position=\"top\">\n                  <foxy-i18n infer=\"\" key=\"hidden_hint\"></foxy-i18n>\n                </vcf-tooltip>\n                <iron-icon\n                  class=\"icon-inline cursor-default\"\n                  icon=\"icons:visibility-off\"\n                  id=\"hidden\"\n                >\n                </iron-icon>\n              `\n            : ''}\n          ${source\n            ? html`\n                <vcf-tooltip for=\"source\" theme=\"light\" position=\"top\">\n                  <foxy-i18n infer=\"\" key=\"source_${source}\"></foxy-i18n>\n                </vcf-tooltip>\n                <span class=\"cursor-default\" id=\"source\">${source}</span>\n              `\n            : ''}\n\n          <foxy-i18n\n            options=${JSON.stringify({ value: this.data?.transaction_date })}\n            lang=${this.lang}\n            key=\"time\"\n            ns=${this.ns}\n          >\n          </foxy-i18n>\n\n          <iron-icon\n            data-testid=\"status-icon\"\n            class=\"icon-inline cursor-default text-l ${specialColors[status] ?? 'text-tertiary'}\"\n            id=\"status\"\n            icon=${specialIcons[status] ?? 'icons:schedule'}\n          >\n          </iron-icon>\n\n          <vcf-tooltip for=\"status\" theme=\"light\" position=\"top\">\n            <foxy-i18n infer=\"\" key=\"status_${status}\"></foxy-i18n>\n          </vcf-tooltip>\n        </div>\n\n        ${this.renderTemplateOrSlot('status:after')}\n      </div>\n    `;\n  }\n\n  private __renderSummary() {\n    const items = this.data?._embedded?.['fx:items'];\n    const type = this.data?.type;\n\n    let content: TemplateResult;\n    let key: string;\n\n    if (type === 'updateinfo') {\n      key = 'summary_payment_method_change';\n    } else if (type === 'subscription_modification') {\n      key = 'summary_subscription_modification';\n    } else if (type === 'subscription_cancellation') {\n      key = 'summary_subscription_cancellation';\n    } else {\n      key = 'summary';\n    }\n\n    if (items) {\n      const options = {\n        count_minus_one: items.length - 1,\n        first_item: items[0],\n        count: items.length,\n      };\n\n      content = html`<foxy-i18n .options=${options} infer=\"\" key=${key}></foxy-i18n>`;\n    } else {\n      content = html`&ZeroWidthSpace;`;\n    }\n\n    return html`\n      <div data-testid=\"description\">\n        ${this.renderTemplateOrSlot('description:before')}\n        <div class=\"text-s text-secondary truncate\">${content}</div>\n        ${this.renderTemplateOrSlot('description:after')}\n      </div>\n    `;\n  }\n\n  private __renderCustomer() {\n    const data = this.data;\n    const content = data\n      ? html`${data.customer_first_name} ${data.customer_last_name} (${data.customer_email})`\n      : html`&ZeroWidthSpace;`;\n\n    return html`\n      <div data-testid=\"customer\">\n        ${this.renderTemplateOrSlot('customer:before')}\n        <div class=\"text-tertiary truncate text-s\">${content}</div>\n        ${this.renderTemplateOrSlot('customer:after')}\n      </div>\n    `;\n  }\n}\n\nexport { TransactionCard };\n"]}
+{"version":3,"file":"TransactionCard.js","sourceRoot":"","sources":["../../../../src/elements/public/TransactionCard/TransactionCard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Data } from './types';\nimport type { TemplateResult } from 'lit-html';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\nimport { Resource, getResourceId } from '@foxy.io/sdk/core';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\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 = 'transaction-card';\nconst Base = ConfigurableMixin(TranslatableMixin(InternalCard, NS));\n\n/**\n * Basic card displaying a transaction.\n *\n * @element foxy-transaction-card\n * @since 1.12.0\n */\nclass TransactionCard extends Base<Data> {\n  private __currencyDisplay = '';\n\n  renderBody(): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n    const hasTotal = !hiddenSelector.matches('total', true);\n    const hasStatus = !hiddenSelector.matches('status', true);\n\n    return html`\n      <div\n        aria-busy=${this.in('busy')}\n        aria-live=\"polite\"\n        class=\"relative leading-s font-lumo text-m\"\n      >\n        <div class=${classMap({ 'transition-opacity': true, 'opacity-0': !this.data })}>\n          ${hasTotal || hasStatus\n            ? html`\n                <div class=\"flex items-center justify-between gap-s\">\n                  ${hasTotal ? this.__renderIdAndTotal() : ''}\n                  ${hasStatus ? this.__renderStatus() : ''}\n                </div>\n              `\n            : ''}\n          ${hiddenSelector.matches('description', true) ? '' : this.__renderSummary()}\n          ${hiddenSelector.matches('customer', true) ? '' : this.__renderCustomer()}\n        </div>\n\n        <div\n          class=${classMap({\n            'pointer-events-none absolute inset-0 flex transition-opacity': true,\n            'opacity-0': !!this.data,\n          })}\n        >\n          <foxy-spinner\n            data-testid=\"spinner\"\n            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\n            class=\"m-auto\"\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  protected async _sendGet(): Promise<Data> {\n    const transaction = await super._sendGet();\n    const storeLink = transaction._links['fx:store']?.href;\n\n    if (typeof storeLink === 'string') {\n      const store = await super._fetch<Resource<Rels.Store>>(storeLink);\n      this.__currencyDisplay = store.use_international_currency_symbol ? 'code' : 'symbol';\n    } else {\n      this.__currencyDisplay = 'symbol';\n    }\n\n    return transaction;\n  }\n\n  private __renderIdAndTotal() {\n    const data = this.data;\n    let content: TemplateResult;\n\n    if (data) {\n      const amount = `${data.total_order} ${data.currency_code}`;\n      const currencyDisplay = this.__currencyDisplay;\n      const options = { amount, currencyDisplay };\n\n      content = html`\n        <span class=\"truncate\">ID ${data.display_id || getResourceId(data._links.self.href)}</span>\n        ${data.type !== 'updateinfo' && data.type !== 'subscription_cancellation'\n          ? html`\n              <span>&bull;</span>\n              <foxy-i18n .options=${options} infer=\"\" class=\"whitespace-nowrap\" key=\"price\">\n              </foxy-i18n>\n            `\n          : ''}\n        ${data?.is_test\n          ? html`\n              <foxy-i18n\n                infer=\"\"\n                class=\"inline-block text-xs font-medium uppercase bg-contrast-5 text-tertiary rounded-s p-xs leading-none tracking-wider\"\n                key=\"test\"\n              >\n              </foxy-i18n>\n            `\n          : ''}\n      `;\n    } else {\n      content = html`&ZeroWidthSpace;`;\n    }\n\n    return html`\n      <div class=\"min-w-0\" data-testid=\"total\">\n        ${this.renderTemplateOrSlot('total:before')}\n        <div class=\"font-medium flex items-center gap-xs\">${content}</div>\n        ${this.renderTemplateOrSlot('total:after')}\n      </div>\n    `;\n  }\n\n  private __renderStatus() {\n    const specialIcons: Record<string, string> = {\n      authorized: 'icons:done',\n      capturing: 'icons:done',\n      captured: 'icons:done',\n      approved: 'icons:done',\n      pending: 'icons:done',\n\n      completed: 'icons:done-all',\n\n      pending_fraud_review: 'icons:info-outline',\n      declined: 'icons:highlight-off',\n      rejected: 'icons:highlight-off',\n      problem: 'icons:info-outline',\n\n      refunded: 'icons:restore',\n      voided: 'icons:remove-circle-outline',\n    };\n\n    const specialColors: Record<string, string> = {\n      authorized: 'text-success',\n      completed: 'text-success',\n      capturing: 'text-success',\n      captured: 'text-success',\n      approved: 'text-success',\n      pending: 'text-success',\n\n      pending_fraud_review: 'text-error',\n      declined: 'text-error',\n      rejected: 'text-error',\n      problem: 'text-error',\n    };\n\n    const status = this.data?.status || 'completed';\n    const source = this.data?.source?.substring(0, 3).toUpperCase();\n\n    return html`\n      <div class=\"flex-shrink-0\" data-testid=\"status\">\n        ${this.renderTemplateOrSlot('status:before')}\n\n        <div class=\"text-tertiary text-s flex items-center space-x-xs\">\n          ${this.data?.hide_transaction\n            ? html`\n                <vcf-tooltip\n                  position=\"top\"\n                  theme=\"light\"\n                  style=\"--lumo-base-color: black\"\n                  for=\"hidden\"\n                >\n                  <foxy-i18n\n                    infer=\"\"\n                    class=\"text-s whitespace-nowrap\"\n                    style=\"color: white\"\n                    key=\"hidden_hint\"\n                  >\n                  </foxy-i18n>\n                </vcf-tooltip>\n                <iron-icon\n                  class=\"icon-inline cursor-default\"\n                  icon=\"icons:visibility-off\"\n                  id=\"hidden\"\n                >\n                </iron-icon>\n              `\n            : ''}\n          ${source\n            ? html`\n                <vcf-tooltip\n                  position=\"top\"\n                  theme=\"light\"\n                  style=\"--lumo-base-color: black\"\n                  for=\"source\"\n                >\n                  <foxy-i18n\n                    infer=\"\"\n                    style=\"color: white\"\n                    class=\"whitespace-nowrap text-s\"\n                    key=\"source_${source}\"\n                  >\n                  </foxy-i18n>\n                </vcf-tooltip>\n                <span class=\"cursor-default\" id=\"source\">${source}</span>\n              `\n            : ''}\n\n          <foxy-i18n\n            options=${JSON.stringify({ value: this.data?.transaction_date })}\n            lang=${this.lang}\n            key=\"time\"\n            ns=${this.ns}\n          >\n          </foxy-i18n>\n\n          <iron-icon\n            data-testid=\"status-icon\"\n            class=\"icon-inline cursor-default text-l ${specialColors[status] ?? 'text-tertiary'}\"\n            id=\"status\"\n            icon=${specialIcons[status] ?? 'icons:schedule'}\n          >\n          </iron-icon>\n\n          <vcf-tooltip for=\"status\" theme=\"light\" position=\"top\" style=\"--lumo-base-color: black\">\n            <foxy-i18n\n              infer=\"\"\n              class=\"whitespace-nowrap text-s\"\n              style=\"color: white\"\n              key=\"status_${status}\"\n            >\n            </foxy-i18n>\n          </vcf-tooltip>\n        </div>\n\n        ${this.renderTemplateOrSlot('status:after')}\n      </div>\n    `;\n  }\n\n  private __renderSummary() {\n    const items = this.data?._embedded?.['fx:items'];\n    const type = this.data?.type;\n\n    let content: TemplateResult;\n    let key: string;\n\n    if (type === 'updateinfo') {\n      key = 'summary_payment_method_change';\n    } else if (type === 'subscription_modification') {\n      key = 'summary_subscription_modification';\n    } else if (type === 'subscription_cancellation') {\n      key = 'summary_subscription_cancellation';\n    } else {\n      key = 'summary';\n    }\n\n    if (items) {\n      const options = {\n        count_minus_one: items.length - 1,\n        first_item: items[0],\n        count: items.length,\n      };\n\n      content = html`<foxy-i18n .options=${options} infer=\"\" key=${key}></foxy-i18n>`;\n    } else {\n      content = html`&ZeroWidthSpace;`;\n    }\n\n    return html`\n      <div data-testid=\"description\">\n        ${this.renderTemplateOrSlot('description:before')}\n        <div class=\"text-s text-secondary truncate\">${content}</div>\n        ${this.renderTemplateOrSlot('description:after')}\n      </div>\n    `;\n  }\n\n  private __renderCustomer() {\n    const data = this.data;\n    const content = data\n      ? html`${data.customer_first_name} ${data.customer_last_name} (${data.customer_email})`\n      : html`&ZeroWidthSpace;`;\n\n    return html`\n      <div data-testid=\"customer\">\n        ${this.renderTemplateOrSlot('customer:before')}\n        <div class=\"text-tertiary truncate text-s\">${content}</div>\n        ${this.renderTemplateOrSlot('customer:after')}\n      </div>\n    `;\n  }\n}\n\nexport { TransactionCard };\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@foxy.io/elements",
   "type": "module",
-  "version": "1.46.0-beta.1",
+  "version": "1.46.0-beta.2",
   "description": "E-commerce web components by Foxy.",
   "repository": {
     "type": "git",