@foxy.io/elements 1.43.0-beta.3 → 1.43.0-beta.4

package/dist/cdn/{shared-1c252319.js → shared-f2be9863.js}

@@ -1,4 +1,4 @@
-import"./shared-12bab9de.js";import{h as e,G as t,P as o}from"./shared-3e3c5095.js";import{E as i,T as r}from"./shared-03b67a3d.js";import{C as a}from"./shared-2db6b377.js";const s=e`<dom-module id="lumo-checkbox" theme-for="vaadin-checkbox">
+import"./shared-3f4549ba.js";import{h as e,G as t,P as o}from"./shared-5af5ab06.js";import{E as i,T as r}from"./shared-6313b188.js";import{C as a}from"./shared-b15efc37.js";const s=e`<dom-module id="lumo-checkbox" theme-for="vaadin-checkbox">
   <template>
     <style include="lumo-checkbox-style lumo-checkbox-effects">
       /* IE11 only */

package/dist/cdn/{shared-109cfbba.js → shared-f2e8070b.js}

@@ -1 +1 @@
-import"./shared-2db6b377.js";import"./shared-3ffa26c1.js";import{I as e}from"./shared-049295b7.js";import{I as t}from"./shared-3558bfae.js";import"./foxy-copy-to-clipboard.js";import"./foxy-nucleon-element.js";import"./foxy-form-dialog.js";import"./shared-7b5bdf0e.js";import{_ as s,m as i,F as r}from"./shared-7fec42f2.js";import{h as o,s as l}from"./shared-ba5c42c7.js";import{s as a}from"./shared-53e476fd.js";import{g as n}from"./shared-bab2ea2c.js";import{i as d}from"./shared-53e42a77.js";import{c as h}from"./shared-4e709717.js";import{u}from"./shared-da95bb48.js";let c,f=e=>e;let p,y,m,v,x,b,g,$,_=e=>e;customElements.define("foxy-internal-resource-picker-control-form",class extends t{constructor(){super(...arguments),this.selectionProps={}}static get properties(){return s(s({},super.properties),{},{selectionProps:{attribute:!1}})}renderBody(){return o(c||(c=f` <foxy-internal-async-list-control infer="selection" form="foxy-null" hide-delete-button hide-create-button @itemclick="${0}" ...="${0}"> </foxy-internal-async-list-control> `),(e=>{e.preventDefault(),this.edit({selection:e.detail}),this.submit()}),a(this.selectionProps))}}),customElements.define("foxy-internal-resource-picker-control",class extends e{constructor(){super(...arguments),this.getDisplayValueOptions=e=>({resource:e}),this.showCopyIdButton=!1,this.virtualHost=u("internal-resource-picker-control-"),this.getItemUrl=null,this.formProps={},this.filters=[],this.layout=null,this.first=null,this.item=null,this.form=null,this.__getItemRenderer=i((e=>new Function("ctx",`return ctx.html\`\n        <${null!=e?e:"foxy-null"}\n          related=\${JSON.stringify(ctx.related)}\n          parent=\${ctx.parent}\n          infer="card"\n          href=\${ctx.href}\n          ...=\${ctx.spread(ctx.props)}\n        >\n        </${null!=e?e:"foxy-null"}>\``)))}static get properties(){return s(s({},super.properties),{},{getDisplayValueOptions:{attribute:!1},showCopyIdButton:{type:Boolean,attribute:"show-copy-id-button"},virtualHost:{},getItemUrl:{attribute:!1},formProps:{type:Object},filters:{type:Array},layout:{},first:{},item:{},form:{}})}renderControl(){var e;const t=s(s({},this.formProps),{},{".selectionProps":{".filters":this.filters,".first":this.first,".item":this.item}});return o(p||(p=_` <foxy-form-dialog parent="foxy://${0}/select" header="header" infer="dialog" alert .props="${0}" .form="${0}" @fetch="${0}"> </foxy-form-dialog> ${0} `),this.virtualHost,t,null!==(e=this.form)&&void 0!==e?e:"foxy-internal-resource-picker-control-form",this.__handleFetchEvent,"summary-item"===this.layout?this.__renderSummaryItemLayout():this.__renderStandaloneLayout())}updated(e){var t,s;super.updated(e),e.has("item")&&(null===(s=(t=this.__getItemRenderer.cache).clear)||void 0===s||s.call(t))}__clear(){this._value="",this.dispatchEvent(new CustomEvent("clear"))}__renderSummaryItemLayout(){const e=this.renderRoot.querySelector("#value");return o(y||(y=_` <div class="leading-xs"> <div class="flex items-center gap-xs"> <div class="text-m text-body whitespace-nowrap flex-1">${0}</div> <button aria-label="${0}" class="${0}" ?disabled="${0}" @click="${0}"> <div class="truncate min-w-0"> ${0} </div> </button> <button aria-label="${0}" class="${0}" style="width:1em;height:1em" ?disabled="${0}" ?hidden="${0}" @click="${0}"> ${0} </button> </div> <div style="max-width:32rem"> <div class="text-xs text-secondary">${0}</div> <div class="text-xs text-error" ?hidden="${0}"> ${0} </div> </div> </div> <foxy-nucleon infer="" href="${0}" id="value" @update="${0}"> </foxy-nucleon> `),this.label,this.t("select"),h({"text-right min-w-0 transition-colors transition-opacity":!0,"rounded-s focus-outline-none focus-ring-2 focus-ring-primary-50":!0,"text-secondary":this.readonly,"text-disabled":this.disabled,"cursor-pointer text-body hover-opacity-80":!this.disabled&&!this.readonly,"font-medium":!this.readonly}),this.disabled||this.readonly,(e=>{if(this.disabled||this.readonly)return;const t=e.currentTarget,s=this.renderRoot.querySelector("foxy-form-dialog");s.href="",s.show(t)}),this._value?o(m||(m=_` <foxy-i18n infer="" key="value" .options="${0}"> </foxy-i18n> `),(null==e?void 0:e.data)?this.getDisplayValueOptions(e.data):{context:(null==e?void 0:e.in("fail"))?"fail":"busy"}):this.placeholder,this.t("clear"),h({"rounded-full transition-colors":!0,"focus-outline-none focus-ring-2 focus-ring-primary-50":!0,"cursor-pointer text-tertiary hover-text-body":!this.disabled,"cursor-default text-disabled":this.disabled}),this.disabled,this.readonly||!this._value,this.__clear,l(v||(v=_`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /></svg>`)),this.helperText,this.disabled||this.readonly,this._errorMessage,d(this._value||void 0),(()=>this.requestUpdate()))}__renderStandaloneLayout(){var e,t,s,i,r;const l=this.__valueLoader,u="string"==typeof this._value?n(this._value):void 0,c="string"==typeof this._value?null===(e=this.getItemUrl)||void 0===e?void 0:e.call(this,this._value,null!==(t=null==l?void 0:l.data)&&void 0!==t?t:null):void 0;return o(x||(x=_` <div class="block group"> <div class="${0}"> <span class="mr-auto text-l">${0}</span> ${0} ${0} ${0} </div> <div class="text-secondary text-s" ?hidden="${0}">${0}</div> <button class="${0}" style="padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)" ?disabled="${0}" @click="${0}"> <div class="${0}"> <foxy-nucleon class="block" infer="" href="${0}" id="valueLoader" @update="${0}"> ${0} </foxy-nucleon> </div> </button> <div class="mt-xs text-xs leading-xs text-error" ?hidden="${0}"> ${0} </div> </div> `),h({"flex items-center gap-s transition-colors font-medium":!0,"text-disabled":this.disabled}),this.label,c?o(b||(b=_` <a class="text-body rounded transition-opacity hover-opacity-90 focus-outline-none focus-ring-2 focus-ring-primary-50" href="${0}"> <foxy-i18n infer="" key="view"></foxy-i18n> </a> `),c):"",this.showCopyIdButton&&null!==u?o(g||(g=_` <foxy-copy-to-clipboard layout="text" theme="contrast tertiary-inline" infer="copy-id" text="${0}"> </foxy-copy-to-clipboard> `),u):"",this.readonly||!this._value?"":o($||($=_` <vaadin-button theme="error tertiary-inline" ?disabled="${0}" @click="${0}"> <foxy-i18n infer="" key="clear"></foxy-i18n> </vaadin-button> `),this.disabled,this.__clear),!this.helperText,this.helperText,h({"block w-full bg-contrast-5 rounded text-left transition-colors":!0,"focus-outline-none focus-ring-2 focus-ring-primary-50":!0,"cursor-pointer hover-bg-contrast-10":!this.disabled&&!this.readonly,"cursor-default":this.disabled||this.readonly,"mt-s":!!this.label||!!this.helperText}),this.disabled||this.readonly,(e=>{const t=e.currentTarget,s=this.renderRoot.querySelector("foxy-form-dialog");s.href="",s.show(t)}),h({"transition-opacity":!0,"opacity-50":this.disabled}),d(this._value||void 0),(()=>this.requestUpdate()),this.__getItemRenderer(this.item)({html:o,data:null!==(s=null==l?void 0:l.data)&&void 0!==s?s:null,href:this._value||"",related:[],parent:"",props:{},spread:a,simplifyNsLoading:this.simplifyNsLoading,disabled:this.disabled,disabledControls:this.disabledControls,readonly:this.readonly,readonlyControls:this.readonlyControls,hidden:this.hidden,hiddenControls:this.hiddenControls,templates:this.templates,previous:null,next:null,group:null!==(r=null===(i=this.nucleon)||void 0===i?void 0:i.group)&&void 0!==r?r:"",lang:this.lang,ns:this.ns}),!this._errorMessage||this.disabled||this.readonly,this._errorMessage)}__handleFetchEvent(e){if(!(e instanceof r))return;if(e.defaultPrevented)return;const{url:t,method:s}=e.request;return t===`foxy://${this.virtualHost}/select`&&"POST"===s?e.respondWith(this.__handleSelect(e.request)):t===`foxy://${this.virtualHost}/empty`&&"GET"===s?e.respondWith(this.__handleEmpty()):void 0}async __handleSelect(e){const t=await e.clone().json();return this._value=t.selection,new Response(JSON.stringify({_links:{self:{href:`foxy://${this.virtualHost}/empty`}},message:"Resource selected."}))}async __handleEmpty(){return new Response(JSON.stringify({_links:{self:{href:`foxy://${this.virtualHost}/empty`}},message:"Resource selected."}))}get __valueLoader(){return this.renderRoot.querySelector("#valueLoader")}});
+import"./shared-b15efc37.js";import"./shared-8530fbae.js";import{I as e}from"./shared-f7b4a4f6.js";import{I as t}from"./shared-070211c0.js";import"./foxy-copy-to-clipboard.js";import"./foxy-nucleon-element.js";import"./foxy-form-dialog.js";import"./shared-1b4a3e56.js";import{_ as s,m as i,F as r}from"./shared-7fec42f2.js";import{h as o,s as l}from"./shared-ba5c42c7.js";import{s as a}from"./shared-53e476fd.js";import{g as n}from"./shared-bab2ea2c.js";import{i as d}from"./shared-53e42a77.js";import{c as h}from"./shared-4e709717.js";import{u}from"./shared-da95bb48.js";let c,f=e=>e;let p,y,m,v,x,b,g,$,_=e=>e;customElements.define("foxy-internal-resource-picker-control-form",class extends t{constructor(){super(...arguments),this.selectionProps={}}static get properties(){return s(s({},super.properties),{},{selectionProps:{attribute:!1}})}renderBody(){return o(c||(c=f` <foxy-internal-async-list-control infer="selection" form="foxy-null" hide-delete-button hide-create-button @itemclick="${0}" ...="${0}"> </foxy-internal-async-list-control> `),(e=>{e.preventDefault(),this.edit({selection:e.detail}),this.submit()}),a(this.selectionProps))}}),customElements.define("foxy-internal-resource-picker-control",class extends e{constructor(){super(...arguments),this.getDisplayValueOptions=e=>({resource:e}),this.showCopyIdButton=!1,this.virtualHost=u("internal-resource-picker-control-"),this.getItemUrl=null,this.formProps={},this.filters=[],this.layout=null,this.first=null,this.item=null,this.form=null,this.__getItemRenderer=i((e=>new Function("ctx",`return ctx.html\`\n        <${null!=e?e:"foxy-null"}\n          related=\${JSON.stringify(ctx.related)}\n          parent=\${ctx.parent}\n          infer="card"\n          href=\${ctx.href}\n          ...=\${ctx.spread(ctx.props)}\n        >\n        </${null!=e?e:"foxy-null"}>\``)))}static get properties(){return s(s({},super.properties),{},{getDisplayValueOptions:{attribute:!1},showCopyIdButton:{type:Boolean,attribute:"show-copy-id-button"},virtualHost:{},getItemUrl:{attribute:!1},formProps:{type:Object},filters:{type:Array},layout:{},first:{},item:{},form:{}})}renderControl(){var e;const t=s(s({},this.formProps),{},{".selectionProps":{".filters":this.filters,".first":this.first,".item":this.item}});return o(p||(p=_` <foxy-form-dialog parent="foxy://${0}/select" header="header" infer="dialog" alert .props="${0}" .form="${0}" @fetch="${0}"> </foxy-form-dialog> ${0} `),this.virtualHost,t,null!==(e=this.form)&&void 0!==e?e:"foxy-internal-resource-picker-control-form",this.__handleFetchEvent,"summary-item"===this.layout?this.__renderSummaryItemLayout():this.__renderStandaloneLayout())}updated(e){var t,s;super.updated(e),e.has("item")&&(null===(s=(t=this.__getItemRenderer.cache).clear)||void 0===s||s.call(t))}__clear(){this._value="",this.dispatchEvent(new CustomEvent("clear"))}__renderSummaryItemLayout(){const e=this.renderRoot.querySelector("#value");return o(y||(y=_` <div class="leading-xs"> <div class="flex items-center gap-xs"> <div class="text-m text-body whitespace-nowrap flex-1">${0}</div> <button aria-label="${0}" class="${0}" ?disabled="${0}" @click="${0}"> <div class="truncate min-w-0"> ${0} </div> </button> <button aria-label="${0}" class="${0}" style="width:1em;height:1em" ?disabled="${0}" ?hidden="${0}" @click="${0}"> ${0} </button> </div> <div style="max-width:32rem"> <div class="text-xs text-secondary">${0}</div> <div class="text-xs text-error" ?hidden="${0}"> ${0} </div> </div> </div> <foxy-nucleon infer="" href="${0}" id="value" @update="${0}"> </foxy-nucleon> `),this.label,this.t("select"),h({"text-right min-w-0 transition-colors transition-opacity":!0,"rounded-s focus-outline-none focus-ring-2 focus-ring-primary-50":!0,"text-secondary":this.readonly,"text-disabled":this.disabled,"cursor-pointer text-body hover-opacity-80":!this.disabled&&!this.readonly,"font-medium":!this.readonly}),this.disabled||this.readonly,(e=>{if(this.disabled||this.readonly)return;const t=e.currentTarget,s=this.renderRoot.querySelector("foxy-form-dialog");s.href="",s.show(t)}),this._value?o(m||(m=_` <foxy-i18n infer="" key="value" .options="${0}"> </foxy-i18n> `),(null==e?void 0:e.data)?this.getDisplayValueOptions(e.data):{context:(null==e?void 0:e.in("fail"))?"fail":"busy"}):this.placeholder,this.t("clear"),h({"rounded-full transition-colors":!0,"focus-outline-none focus-ring-2 focus-ring-primary-50":!0,"cursor-pointer text-tertiary hover-text-body":!this.disabled,"cursor-default text-disabled":this.disabled}),this.disabled,this.readonly||!this._value,this.__clear,l(v||(v=_`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /></svg>`)),this.helperText,this.disabled||this.readonly,this._errorMessage,d(this._value||void 0),(()=>this.requestUpdate()))}__renderStandaloneLayout(){var e,t,s,i,r;const l=this.__valueLoader,u="string"==typeof this._value?n(this._value):void 0,c="string"==typeof this._value?null===(e=this.getItemUrl)||void 0===e?void 0:e.call(this,this._value,null!==(t=null==l?void 0:l.data)&&void 0!==t?t:null):void 0;return o(x||(x=_` <div class="block group"> <div class="${0}"> <span class="mr-auto text-l">${0}</span> ${0} ${0} ${0} </div> <div class="text-secondary text-s" ?hidden="${0}">${0}</div> <button class="${0}" style="padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)" ?disabled="${0}" @click="${0}"> <div class="${0}"> <foxy-nucleon class="block" infer="" href="${0}" id="valueLoader" @update="${0}"> ${0} </foxy-nucleon> </div> </button> <div class="mt-xs text-xs leading-xs text-error" ?hidden="${0}"> ${0} </div> </div> `),h({"flex items-center gap-s transition-colors font-medium":!0,"text-disabled":this.disabled}),this.label,c?o(b||(b=_` <a class="text-body rounded transition-opacity hover-opacity-90 focus-outline-none focus-ring-2 focus-ring-primary-50" href="${0}"> <foxy-i18n infer="" key="view"></foxy-i18n> </a> `),c):"",this.showCopyIdButton&&null!==u?o(g||(g=_` <foxy-copy-to-clipboard layout="text" theme="contrast tertiary-inline" infer="copy-id" text="${0}"> </foxy-copy-to-clipboard> `),u):"",this.readonly||!this._value?"":o($||($=_` <vaadin-button theme="error tertiary-inline" ?disabled="${0}" @click="${0}"> <foxy-i18n infer="" key="clear"></foxy-i18n> </vaadin-button> `),this.disabled,this.__clear),!this.helperText,this.helperText,h({"block w-full bg-contrast-5 rounded text-left transition-colors":!0,"focus-outline-none focus-ring-2 focus-ring-primary-50":!0,"cursor-pointer hover-bg-contrast-10":!this.disabled&&!this.readonly,"cursor-default":this.disabled||this.readonly,"mt-s":!!this.label||!!this.helperText}),this.disabled||this.readonly,(e=>{const t=e.currentTarget,s=this.renderRoot.querySelector("foxy-form-dialog");s.href="",s.show(t)}),h({"transition-opacity":!0,"opacity-50":this.disabled}),d(this._value||void 0),(()=>this.requestUpdate()),this.__getItemRenderer(this.item)({html:o,data:null!==(s=null==l?void 0:l.data)&&void 0!==s?s:null,href:this._value||"",related:[],parent:"",props:{},spread:a,simplifyNsLoading:this.simplifyNsLoading,disabled:this.disabled,disabledControls:this.disabledControls,readonly:this.readonly,readonlyControls:this.readonlyControls,hidden:this.hidden,hiddenControls:this.hiddenControls,templates:this.templates,previous:null,next:null,group:null!==(r=null===(i=this.nucleon)||void 0===i?void 0:i.group)&&void 0!==r?r:"",lang:this.lang,ns:this.ns}),!this._errorMessage||this.disabled||this.readonly,this._errorMessage)}__handleFetchEvent(e){if(!(e instanceof r))return;if(e.defaultPrevented)return;const{url:t,method:s}=e.request;return t===`foxy://${this.virtualHost}/select`&&"POST"===s?e.respondWith(this.__handleSelect(e.request)):t===`foxy://${this.virtualHost}/empty`&&"GET"===s?e.respondWith(this.__handleEmpty()):void 0}async __handleSelect(e){const t=await e.clone().json();return this._value=t.selection,new Response(JSON.stringify({_links:{self:{href:`foxy://${this.virtualHost}/empty`}},message:"Resource selected."}))}async __handleEmpty(){return new Response(JSON.stringify({_links:{self:{href:`foxy://${this.virtualHost}/empty`}},message:"Resource selected."}))}get __valueLoader(){return this.renderRoot.querySelector("#valueLoader")}});

package/dist/cdn/{shared-13ba9f3a.js → shared-f3590d20.js}

@@ -1,4 +1,4 @@
-import{I as e}from"./shared-049295b7.js";import"./shared-7b5bdf0e.js";import{_ as t}from"./shared-7fec42f2.js";import{d as s,N as r,i as o,c as a,h as i,s as n}from"./shared-ba5c42c7.js";
+import{I as e}from"./shared-f7b4a4f6.js";import"./shared-1b4a3e56.js";import{_ as t}from"./shared-7fec42f2.js";import{d as s,N as r,i as o,c as a,h as i,s as n}from"./shared-ba5c42c7.js";
 /**
  * @license
  * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -12,4 +12,4 @@ import{I as e}from"./shared-049295b7.js";import"./shared-7b5bdf0e.js";import{_ a
  * subject to an additional IP rights grant found at
  * http://polymer.github.io/PATENTS.txt
  */
-const l=new WeakMap,d=s((e=>t=>{if(!(t instanceof r))throw new Error("unsafeHTML can only be used in text bindings");const s=l.get(t);if(void 0!==s&&o(e)&&e===s.value&&t.value===s.fragment)return;const a=document.createElement("template");a.innerHTML=e;const i=document.importNode(a.content,!0);t.setValue(i),l.set(t,{value:e,fragment:i})}));let u,p,c,h,m=e=>e;customElements.define("foxy-internal-summary-control",class extends e{constructor(){super(...arguments),this.unsafeHelperText=!1,this.layout=null,this.count=null,this.open=!1}static get properties(){return t(t({},super.properties),{},{unsafeHelperText:{type:Boolean,attribute:"unsafe-helper-text"},layout:{},count:{type:Number},open:{type:Boolean,reflect:!0}})}static get styles(){return[...super.styles,a(u||(u=m`::slotted(*){min-width:100%}:host(:not([layout=section])) slot::slotted(*){background-color:var(--lumo-contrast-5pct);padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)}details summary>div{border-radius:var(--lumo-border-radius)}details[open] summary>div{border-radius:var(--lumo-border-radius) var(--lumo-border-radius) 0 0}.with-unsafe a{text-decoration:underline;transition:color .1s ease-in-out}.with-unsafe a:hover{color:var(--lumo-primary-text-color)}.with-unsafe a:focus{outline:0;box-shadow:0 0 0 2px var(--lumo-primary-color-50pct);border-radius:var(--lumo-border-radius-s)}`))]}renderLightDom(){}renderControl(){return"details"===this.layout?i(p||(p=m` <details class="rounded overflow-hidden" ?open="${0}" @toggle="${0}"> <summary class="select-none cursor-pointer focus-outline-none group"> <div class="leading-xs bg-contrast-5 group-focus-ring-2 group-focus-ring-inset group-focus-ring-primary-50" style="padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)" ?hidden="${0}"> <p class="flex items-center justify-between gap-s" ?hidden="${0}"> <span> ${0}${0} </span> <span class="flex items-center justify-center transition-colors text-tertiary group-hover-text-body" style="transform:scale(1.35)"> ${0} </span> </p> <p class="text-xs text-secondary with-unsafe" ?hidden="${0}"> ${0} </p> </div> </summary> <div class="overflow-hidden grid" style="gap:1px"> <slot></slot> </div> </details> `),this.open,(e=>{const t=e.currentTarget;this.open=t.open,e.composed||e.bubbles||this.dispatchEvent(new CustomEvent("toggle"))}),!this.label&&!this.helperText,!this.label,this.label,"number"==typeof this.count?` (${this.count})`:"",n(c||(c=m`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1.2em; height: 1.2em"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>`)),!this.helperText,this.unsafeHelperText?d(this.helperText):this.helperText):i(h||(h=m` <div class="leading-s mb-s" ?hidden="${0}"> <p class="font-medium text-body text-l" ?hidden="${0}">${0}</p> <p class="text-s text-secondary with-unsafe" ?hidden="${0}"> ${0} </p> </div> <div class="rounded overflow-hidden grid" style="gap:1px"> <slot></slot> </div> `),!this.label&&!this.helperText,!this.label,this.label,!this.helperText,this.unsafeHelperText?d(this.helperText):this.helperText)}});export{d as u};
+const l=new WeakMap,d=s((e=>t=>{if(!(t instanceof r))throw new Error("unsafeHTML can only be used in text bindings");const s=l.get(t);if(void 0!==s&&o(e)&&e===s.value&&t.value===s.fragment)return;const a=document.createElement("template");a.innerHTML=e;const i=document.importNode(a.content,!0);t.setValue(i),l.set(t,{value:e,fragment:i})}));let u,p,c,h,m=e=>e;customElements.define("foxy-internal-summary-control",class extends e{constructor(){super(...arguments),this.unsafeHelperText=!1,this.layout=null,this.count=null,this.open=!1}static get properties(){return t(t({},super.properties),{},{unsafeHelperText:{type:Boolean,attribute:"unsafe-helper-text"},layout:{},count:{type:Number},open:{type:Boolean,reflect:!0}})}static get styles(){return[...super.styles,a(u||(u=m`::slotted(*){min-width:100%}:host(:not([layout=section])) slot::slotted(*){background-color:var(--lumo-contrast-5pct);padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)}details summary>div{border-radius:var(--lumo-border-radius)}details[open] summary>div{border-radius:var(--lumo-border-radius) var(--lumo-border-radius) 0 0}.with-unsafe a{text-decoration:underline;transition:color .1s ease-in-out}.with-unsafe a:hover{color:var(--lumo-primary-text-color)}.with-unsafe a:focus{outline:0;box-shadow:0 0 0 2px var(--lumo-primary-color-50pct);border-radius:var(--lumo-border-radius-s)}`))]}renderLightDom(){}renderControl(){return"details"===this.layout?i(p||(p=m` <details class="rounded overflow-hidden" ?open="${0}" @toggle="${0}"> <summary class="select-none cursor-pointer focus-outline-none group"> <div class="leading-xs bg-contrast-5 group-focus-ring-2 group-focus-ring-inset group-focus-ring-primary-50" style="padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)" ?hidden="${0}"> <p class="flex items-center justify-between gap-s transition-opacity group-hover-opacity-80" ?hidden="${0}"> <span class="font-medium"> ${0}${0} </span> <span class="flex items-center justify-center" style="transform:scale(1.35)"> ${0} </span> </p> <p class="text-xs text-secondary with-unsafe" ?hidden="${0}"> ${0} </p> </div> </summary> <div class="overflow-hidden grid" style="gap:1px"> <slot></slot> </div> </details> `),this.open,(e=>{const t=e.currentTarget;this.open=t.open,e.composed||e.bubbles||this.dispatchEvent(new CustomEvent("toggle"))}),!this.label&&!this.helperText,!this.label,this.label,"number"==typeof this.count?` (${this.count})`:"",n(c||(c=m`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1.2em; height: 1.2em"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>`)),!this.helperText,this.unsafeHelperText?d(this.helperText):this.helperText):i(h||(h=m` <div class="leading-s mb-s" ?hidden="${0}"> <p class="font-medium text-body text-l" ?hidden="${0}">${0}</p> <p class="text-s text-secondary with-unsafe" ?hidden="${0}"> ${0} </p> </div> <div class="rounded overflow-hidden grid" style="gap:1px"> <slot></slot> </div> `),!this.label&&!this.helperText,!this.label,this.label,!this.helperText,this.unsafeHelperText?d(this.helperText):this.helperText)}});export{d as u};

package/dist/cdn/{shared-049295b7.js → shared-f7b4a4f6.js}

@@ -1 +1 @@
-import"./shared-5212ef4f.js";import"./shared-7b5bdf0e.js";import{_ as e,l as t}from"./shared-7fec42f2.js";import{C as r}from"./shared-c782b9fa.js";import{a as s,T as i,w as n}from"./shared-ddda911c.js";import{h as l,r as o,L as h}from"./shared-ba5c42c7.js";import{I as a}from"./shared-0ea750af.js";import{N as p}from"./shared-da95bb48.js";import{s as u}from"./shared-1da47f50.js";let c,d,_,f,v=e=>e;class y extends(r(s(i(a(h))))){constructor(){super(...arguments),this.nucleon=null}static get inferredProperties(){return[...super.inferredProperties,"nucleon"]}static get properties(){return e(e({},super.properties),{},{nucleon:{attribute:!1}})}inferFromElement(e,t){return"nucleon"===e&&t instanceof p?t:super.inferFromElement(e,t)}applyInferredProperties(e){var t,r;super.applyInferredProperties(e),this.nucleon=null!==(t=e.get("nucleon"))&&void 0!==t?t:null,!1===(null===(r=this.nucleon)||void 0===r?void 0:r.in("idle"))&&(this.disabled=!0)}renderLightDom(){if("string"!=typeof this.infer)return;const e=l(c||(c=v` <slot name="${0}:before" slot="before"></slot> <slot name="${0}:after" slot="after"></slot> `),this.infer,this.infer);o(e,this)}updated(e){super.updated(e),this.renderLightDom()}renderControl(){return l(d||(d=v``))}render(){return this.hidden?l(_||(_=v``)):l(f||(f=v` ${0} ${0} ${0} `),this.renderTemplateOrSlot("before",this.nucleon),this.renderControl(),this.renderTemplateOrSlot("after",this.nucleon))}}function m(e){try{return JSON.parse(e)}catch(e){return null}}customElements.define("foxy-internal-control",y);class b extends y{constructor(){var e;super(...arguments),e=this,this.checkValidityAsync=null,this.jsonTemplate=null,this.jsonPath=null,this.getValue=()=>{var e;const r=t(null===(e=this.nucleon)||void 0===e?void 0:e.form,this.property);if(this.jsonPath){const e=m(r),s=m(this.jsonTemplate);return t(e,this.jsonPath,t(s,this.jsonPath))}return r},this.setValue=e=>{var t,r,s,i,n,l,o,h,a;const[p,...c]=this.property.split(".");if(c.length){const l=null!==(r=null===(t=this.nucleon)||void 0===t?void 0:t.form[p])&&void 0!==r?r:{};if(this.jsonPath){const t=null!==(i=m(null===(s=this.nucleon)||void 0===s?void 0:s.form[p]))&&void 0!==i?i:m(this.jsonTemplate);u(t,this.jsonPath,e),u(l,c,JSON.stringify(t))}else u(l,c,e);null===(n=this.nucleon)||void 0===n||n.edit({[p]:l})}else if(this.jsonPath){const t=null!==(o=m(null===(l=this.nucleon)||void 0===l?void 0:l.form[p]))&&void 0!==o?o:m(this.jsonTemplate);u(t,this.jsonPath,e),null===(h=this.nucleon)||void 0===h||h.edit({[p]:JSON.stringify(t)})}else null===(a=this.nucleon)||void 0===a||a.edit({[p]:e})},this.__debouncedCheckValidityAsync=n((async function(t){var r;const s=await(null===(r=e.checkValidityAsync)||void 0===r?void 0:r.call(e,t));e._value===t&&(e.__asyncError=!0===s?null:null!=s?s:null)}),300),this.__previousValue=null,this.__placeholder=null,this.__helperText=null,this.__asyncError=null,this.__v8nPrefix=null,this.__property=null,this.__label=null}static get properties(){return e(e({},super.properties),{},{checkValidityAsync:{attribute:!1},jsonTemplate:{attribute:"json-template"},placeholder:{type:String,noAccessor:!0},helperText:{type:String,attribute:"helper-text",noAccessor:!0},v8nPrefix:{type:String,attribute:"v8n-prefix",noAccessor:!0},jsonPath:{attribute:"json-path"},getValue:{attribute:!1},setValue:{attribute:!1},property:{type:String,noAccessor:!0},label:{type:String,noAccessor:!0},__asyncError:{attribute:!1}})}get placeholder(){return"string"==typeof this.__placeholder?this.__placeholder:this.t("placeholder")}set placeholder(e){const t=this.__placeholder;this.__placeholder=e,this.requestUpdate("placeholder",t)}get helperText(){return"string"==typeof this.__helperText?this.__helperText:this.t("helper_text")}set helperText(e){const t=this.__helperText;this.__helperText=e,this.requestUpdate("helperText",t)}get v8nPrefix(){return"string"==typeof this.__v8nPrefix?this.__v8nPrefix:"string"==typeof this.infer?`${this.infer}:`:""}set v8nPrefix(e){const t=this.__v8nPrefix;this.__v8nPrefix=e,this.requestUpdate("v8nPrefix",t)}get property(){return"string"==typeof this.__property?this.__property:"string"==typeof this.infer?this.infer.replace(/-/g,"_"):""}set property(e){const t=this.__property;this.__property=e,this.requestUpdate("property",t)}get label(){return"string"==typeof this.__label?this.__label:this.t("label")}set label(e){const t=this.__label;this.__label=e,this.requestUpdate("label",t)}resetPlaceholder(){const e=this.__placeholder;this.__placeholder=null,this.requestUpdate("placeholder",e)}resetHelperText(){const e=this.__helperText;this.__helperText=null,this.requestUpdate("helperText",e)}resetV8nPrefix(){const e=this.__v8nPrefix;this.__v8nPrefix=null,this.requestUpdate("v8nPrefix",e)}resetProperty(){const e=this.__property;this.__property=null,this.requestUpdate("property",e)}resetLabel(){const e=this.__label;this.__label=null,this.requestUpdate("label",e)}reportValidity(){const e=this.ownerDocument.createTreeWalker(this.renderRoot,NodeFilter.SHOW_ELEMENT);do{const t=e.currentNode,r=["reportValidity","validate"];for(const e of r)if(e in t)try{t[e]();break}catch(e){continue}}while(e.nextNode())}get _value(){return this.getValue()}set _value(e){this.__previousValue=this._value,this.__asyncError=null,this._error||this.__previousValue===e||this.__debouncedCheckValidityAsync(e);const t=new CustomEvent("change",{cancelable:!0,detail:e});this.dispatchEvent(t)&&this.setValue(e)}get _error(){var e,t;const r=null===(e=this.nucleon)||void 0===e?void 0:e.errors.find((e=>e.startsWith(this.v8nPrefix)));return null!==(t=null!=r?r:this.__asyncError)&&void 0!==t?t:void 0}get _errorMessage(){return this._error?this.t(this._error.substring(this.v8nPrefix.length)):void 0}get _checkValidity(){return()=>!this._error}}customElements.define("foxy-internal-editable-control",b);export{b as I,y as a};
+import"./shared-5212ef4f.js";import"./shared-1b4a3e56.js";import{_ as e,l as t}from"./shared-7fec42f2.js";import{C as r}from"./shared-c782b9fa.js";import{a as s,T as i,w as n}from"./shared-a89e8a07.js";import{h as l,r as o,L as h}from"./shared-ba5c42c7.js";import{I as a}from"./shared-0ea750af.js";import{N as p}from"./shared-da95bb48.js";import{s as u}from"./shared-1da47f50.js";let c,d,_,f,v=e=>e;class y extends(r(s(i(a(h))))){constructor(){super(...arguments),this.nucleon=null}static get inferredProperties(){return[...super.inferredProperties,"nucleon"]}static get properties(){return e(e({},super.properties),{},{nucleon:{attribute:!1}})}inferFromElement(e,t){return"nucleon"===e&&t instanceof p?t:super.inferFromElement(e,t)}applyInferredProperties(e){var t,r;super.applyInferredProperties(e),this.nucleon=null!==(t=e.get("nucleon"))&&void 0!==t?t:null,!1===(null===(r=this.nucleon)||void 0===r?void 0:r.in("idle"))&&(this.disabled=!0)}renderLightDom(){if("string"!=typeof this.infer)return;const e=l(c||(c=v` <slot name="${0}:before" slot="before"></slot> <slot name="${0}:after" slot="after"></slot> `),this.infer,this.infer);o(e,this)}updated(e){super.updated(e),this.renderLightDom()}renderControl(){return l(d||(d=v``))}render(){return this.hidden?l(_||(_=v``)):l(f||(f=v` ${0} ${0} ${0} `),this.renderTemplateOrSlot("before",this.nucleon),this.renderControl(),this.renderTemplateOrSlot("after",this.nucleon))}}function m(e){try{return JSON.parse(e)}catch(e){return null}}customElements.define("foxy-internal-control",y);class g extends y{constructor(){var e;super(...arguments),e=this,this.checkValidityAsync=null,this.jsonTemplate=null,this.jsonPath=null,this.getValue=()=>{var e;const r=t(null===(e=this.nucleon)||void 0===e?void 0:e.form,this.property);if(this.jsonPath){const e=m(r),s=m(this.jsonTemplate);return t(e,this.jsonPath,t(s,this.jsonPath))}return r},this.setValue=e=>{var t,r,s,i,n,l,o,h,a;const[p,...c]=this.property.split(".");if(c.length){const l=null!==(r=null===(t=this.nucleon)||void 0===t?void 0:t.form[p])&&void 0!==r?r:{};if(this.jsonPath){const t=null!==(i=m(null===(s=this.nucleon)||void 0===s?void 0:s.form[p]))&&void 0!==i?i:m(this.jsonTemplate);u(t,this.jsonPath,e),u(l,c,JSON.stringify(t))}else u(l,c,e);null===(n=this.nucleon)||void 0===n||n.edit({[p]:l})}else if(this.jsonPath){const t=null!==(o=m(null===(l=this.nucleon)||void 0===l?void 0:l.form[p]))&&void 0!==o?o:m(this.jsonTemplate);u(t,this.jsonPath,e),null===(h=this.nucleon)||void 0===h||h.edit({[p]:JSON.stringify(t)})}else null===(a=this.nucleon)||void 0===a||a.edit({[p]:e})},this.__debouncedCheckValidityAsync=n((async function(t){var r;const s=await(null===(r=e.checkValidityAsync)||void 0===r?void 0:r.call(e,t));e._value===t&&(e.__asyncError=!0===s?null:null!=s?s:null)}),300),this.__previousValue=null,this.__placeholder=null,this.__helperText=null,this.__asyncError=null,this.__v8nPrefix=null,this.__property=null,this.__label=null}static get properties(){return e(e({},super.properties),{},{checkValidityAsync:{attribute:!1},jsonTemplate:{attribute:"json-template"},placeholder:{type:String,noAccessor:!0},helperText:{type:String,attribute:"helper-text",noAccessor:!0},v8nPrefix:{type:String,attribute:"v8n-prefix",noAccessor:!0},jsonPath:{attribute:"json-path"},getValue:{attribute:!1},setValue:{attribute:!1},property:{type:String,noAccessor:!0},label:{type:String,noAccessor:!0},__asyncError:{attribute:!1}})}get placeholder(){return"string"==typeof this.__placeholder?this.__placeholder:this.t("placeholder")}set placeholder(e){const t=this.__placeholder;this.__placeholder=e,this.requestUpdate("placeholder",t)}get helperText(){return"string"==typeof this.__helperText?this.__helperText:this.t("helper_text")}set helperText(e){const t=this.__helperText;this.__helperText=e,this.requestUpdate("helperText",t)}get v8nPrefix(){return"string"==typeof this.__v8nPrefix?this.__v8nPrefix:"string"==typeof this.infer?`${this.infer}:`:""}set v8nPrefix(e){const t=this.__v8nPrefix;this.__v8nPrefix=e,this.requestUpdate("v8nPrefix",t)}get property(){return"string"==typeof this.__property?this.__property:"string"==typeof this.infer?this.infer.replace(/-/g,"_"):""}set property(e){const t=this.__property;this.__property=e,this.requestUpdate("property",t)}get label(){return"string"==typeof this.__label?this.__label:this.t("label")}set label(e){const t=this.__label;this.__label=e,this.requestUpdate("label",t)}resetPlaceholder(){const e=this.__placeholder;this.__placeholder=null,this.requestUpdate("placeholder",e)}resetHelperText(){const e=this.__helperText;this.__helperText=null,this.requestUpdate("helperText",e)}resetV8nPrefix(){const e=this.__v8nPrefix;this.__v8nPrefix=null,this.requestUpdate("v8nPrefix",e)}resetProperty(){const e=this.__property;this.__property=null,this.requestUpdate("property",e)}resetLabel(){const e=this.__label;this.__label=null,this.requestUpdate("label",e)}reportValidity(){const e=this.ownerDocument.createTreeWalker(this.renderRoot,NodeFilter.SHOW_ELEMENT);do{const t=e.currentNode,r=["reportValidity","validate"];for(const e of r)if(e in t)try{t[e]();break}catch(e){continue}}while(e.nextNode())}get _value(){return this.getValue()}set _value(e){this.__previousValue=this._value,this.__asyncError=null,this._error||this.__previousValue===e||this.__debouncedCheckValidityAsync(e);const t=new CustomEvent("change",{cancelable:!0,detail:e});this.dispatchEvent(t)&&this.setValue(e)}get _error(){var e,t;const r=null===(e=this.nucleon)||void 0===e?void 0:e.errors.find((e=>e.startsWith(this.v8nPrefix)));return null!==(t=null!=r?r:this.__asyncError)&&void 0!==t?t:void 0}get _errorMessage(){return this._error?this.t(this._error.substring(this.v8nPrefix.length)):void 0}get _checkValidity(){return()=>!this._error}}customElements.define("foxy-internal-editable-control",g);export{g as I,y as a};

package/dist/cdn/{shared-3e0b2588.js → shared-fa482a7d.js}

@@ -1,4 +1,4 @@
-import{h as e}from"./shared-3e3c5095.js";import{N as t}from"./shared-f497cd69.js";
+import{h as e}from"./shared-5af5ab06.js";import{N as t}from"./shared-acee789f.js";
 /**
 @license
 Copyright (c) 2019 Vaadin Ltd.

package/dist/elements/internal/InternalEditableListControl/InternalEditableListControl.js

@@ -72,12 +72,13 @@ div:has(> select)::after{
             'h-m': !isSummaryItem,
         });
         const isAddButtonDisabled = this.disabled || !this.__newItem;
-        const addItem = () => {
+        const addItem = (split = false) => {
             var _a;
             const newValue = [...this._value];
+            const splitBy = split && this.__newItem.includes(',') ? ',' : '\n';
             const unit = (_a = this.renderRoot.querySelector('select')) === null || _a === void 0 ? void 0 : _a.value;
             this.__newItem
-                .split('\n')
+                .split(splitBy)
                 .map(code => code.trim())
                 .filter(code => code.length > 0)
                 .forEach(value => {
@@ -246,8 +247,8 @@ div:has(> select)::after{
                 var _a, _b;
                 evt.preventDefault();
                 this.__newItem = (_b = (_a = evt.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '';
-                if (this.__newItem.includes('\n'))
-                    addItem();
+                if (this.__newItem.includes('\n') || this.__newItem.includes(','))
+                    addItem(true);
             }}
                   @blur=${() => {
                 this.__isErrorVisible = true;

package/dist/elements/internal/InternalEditableListControl/InternalEditableListControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalEditableListControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableListControl/InternalEditableListControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { Item, Option, Unit } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css } from 'lit-element';\nimport { classMap } from '../../../utils/class-map';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { spread } from '@open-wc/lit-helpers';\nimport { live } from 'lit-html/directives/live';\n\nexport class InternalEditableListControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      inputParams: { attribute: false },\n      simpleValue: { type: Boolean, attribute: 'simple-value' },\n      options: { type: Array },\n      layout: {},\n      units: { type: Array },\n      range: {},\n      __isErrorVisible: { attribute: false },\n      __newItem: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      ...super.styles,\n      css`\n        div:has(> select) {\n          position: relative;\n        }\n\n        div:has(> select)::after {\n          content: ' ';\n          position: absolute;\n          top: 50%;\n          margin-top: -2px;\n          right: 10px;\n          width: 0;\n          height: 0;\n          border-left: 5px solid transparent;\n          border-right: 5px solid transparent;\n          border-top: 5px solid currentColor;\n        }\n      `,\n    ];\n  }\n\n  inputParams: Record<string, unknown> = {};\n\n  simpleValue = false;\n\n  options: Option[] = [];\n\n  layout: 'standalone' | 'summary-item' | null = null;\n\n  units: Unit[] = [];\n\n  range: null | 'optional' = null;\n\n  private __isErrorVisible = false;\n\n  private __newItem = '';\n\n  render(): TemplateResult {\n    const isSummaryItem = this.layout === 'summary-item';\n    const isInteractive = !this.disabled && !this.readonly;\n\n    const deleteButtonClass = classMap({\n      'w-xs h-xs rounded-s transition-colors flex-shrink-0': true,\n      'focus-outline-none focus-ring-2 ring-inset ring-error-50': true,\n      'text-tertiary hover-bg-error-10 hover-text-error': !this.disabled,\n      'cursor-default text-disabled': this.disabled,\n      'flex items-center justify-center': !this.readonly,\n      'hidden': this.readonly,\n      'mr-xs': !isSummaryItem,\n    });\n\n    const itemClass = classMap({\n      'transition-colors flex items-center': true,\n      'text-secondary': this.readonly,\n      'text-disabled': this.disabled,\n      'border border-contrast-10 rounded-s': isSummaryItem,\n      'h-m': !isSummaryItem,\n    });\n\n    const isAddButtonDisabled = this.disabled || !this.__newItem;\n\n    const addItem = () => {\n      const newValue = [...this._value];\n      const unit = this.renderRoot.querySelector('select')?.value;\n\n      this.__newItem\n        .split('\\n')\n        .map(code => code.trim())\n        .filter(code => code.length > 0)\n        .forEach(value => {\n          if (!newValue.some(item => item.value === value)) {\n            newValue.push({ value, unit });\n          }\n        });\n\n      this._value = newValue;\n      this.__newItem = '';\n    };\n\n    return html`\n      <div class=\"mb-s\" ?hidden=${!this.label && !this.helperText}>\n        <div class=${classMap({ 'font-medium text-l': !isSummaryItem })}>${this.label}</div>\n        <div\n          class=${classMap({\n            'text-secondary': true,\n            'text-xs': isSummaryItem,\n            'text-s': !isSummaryItem,\n          })}\n          ?hidden=${!this.helperText}\n        >\n          ${this.helperText}\n        </div>\n      </div>\n\n      <div\n        class=${classMap({\n          'bg-contrast-5 rounded': !isSummaryItem,\n          'mt-s': isSummaryItem,\n        })}\n      >\n        <ol\n          class=${classMap({\n            'transition-colors font-medium': true,\n            'divide-y divide-contrast-10': !isSummaryItem,\n            'flex flex-wrap gap-s': isSummaryItem,\n          })}\n        >\n          ${repeat(\n            this._value,\n            item => item.value,\n            (item, index) => {\n              return html`\n                <li\n                  class=${itemClass}\n                  style=\"padding-left: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n                >\n                  <div class=\"flex-1 mr-s\">${item.label ?? item.value}</div>\n\n                  <button\n                    aria-label=${this.t('delete')}\n                    class=${deleteButtonClass}\n                    ?disabled=${this.disabled}\n                    @click=${() => {\n                      this._value = this._value.filter((_, i) => i !== index);\n                    }}\n                  >\n                    <iron-icon icon=\"lumo:cross\" class=\"icon-inline text-xl\"></iron-icon>\n                  </button>\n                </li>\n              `;\n            }\n          )}\n        </ol>\n\n        <div\n          style=\"padding-left: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n          class=${classMap({\n            'transition-colors h-m flex items-center gap-xs': true,\n            'focus-within-ring-2 focus-within-ring-primary-50': !isSummaryItem,\n            'bg-contrast-5 hover-bg-contrast-10': !isSummaryItem && isInteractive,\n            'bg-contrast-5': !isSummaryItem && this.disabled,\n            'flex': !this.readonly,\n            'hidden': this.readonly,\n            'rounded-s border border-contrast-10': isSummaryItem,\n            'mt-s': isSummaryItem && this._value.length > 0,\n            'rounded': !isSummaryItem && this._value.length === 0,\n            'rounded-b': !isSummaryItem && this._value.length > 0,\n          })}\n        >\n          ${this.range\n            ? html`\n                <foxy-i18n infer=\"\" class=\"text-disabled font-medium\" key=\"range_from\"> </foxy-i18n>\n\n                <input\n                  placeholder=${this.placeholder}\n                  class=${classMap({\n                    'bg-transparent appearance-none h-m font-medium focus-outline-none': true,\n                    'text-disabled': this.disabled,\n                  })}\n                  list=\"list\"\n                  ...=${spread(this.inputParams)}\n                  .value=${live(this.__newItem.split('..')[0] ?? '')}\n                  ?disabled=${this.disabled}\n                  ?readonly=${this.readonly}\n                  @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n                  @change=${(evt: Event) => evt.stopPropagation()}\n                  @input=${(evt: InputEvent) => {\n                    const newFrom = (evt.currentTarget as HTMLInputElement).value.trim();\n                    const oldTo = this.__newItem.split('..')[1] ?? '';\n                    this.__newItem = oldTo ? `${newFrom}..${oldTo}` : newFrom;\n                  }}\n                  @paste=${(evt: ClipboardEvent) => {\n                    evt.preventDefault();\n\n                    const newFrom = evt.clipboardData?.getData('text') ?? '';\n                    const oldTo = this.__newItem.split('..')[1] ?? '';\n                    this.__newItem = oldTo ? `${newFrom}..${oldTo}` : newFrom;\n\n                    addItem();\n                  }}\n                  @blur=${() => {\n                    this.__isErrorVisible = true;\n                  }}\n                />\n\n                <foxy-i18n infer=\"\" class=\"text-disabled font-medium\" key=\"range_to\"></foxy-i18n>\n\n                <input\n                  placeholder=${this.placeholder}\n                  class=${classMap({\n                    'bg-transparent appearance-none h-m font-medium focus-outline-none': true,\n                    'text-disabled': this.disabled,\n                  })}\n                  list=\"list\"\n                  ...=${spread(this.inputParams)}\n                  .value=${live(this.__newItem.split('..')[1] ?? '')}\n                  ?disabled=${this.disabled}\n                  ?readonly=${this.readonly}\n                  @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n                  @change=${(evt: Event) => evt.stopPropagation()}\n                  @input=${(evt: InputEvent) => {\n                    const newTo = (evt.currentTarget as HTMLInputElement).value.trim();\n                    const oldFrom = this.__newItem.split('..')[0] ?? '';\n                    this.__newItem = oldFrom ? `${oldFrom}..${newTo}` : newTo;\n                  }}\n                  @paste=${(evt: ClipboardEvent) => {\n                    evt.preventDefault();\n\n                    const newTo = evt.clipboardData?.getData('text') ?? '';\n                    const oldFrom = this.__newItem.split('..')[0] ?? '';\n                    this.__newItem = oldFrom ? `${oldFrom}..${newTo}` : newTo;\n\n                    addItem();\n                  }}\n                  @blur=${() => {\n                    this.__isErrorVisible = true;\n                  }}\n                />\n              `\n            : html`\n                <input\n                  placeholder=${this.placeholder}\n                  class=${classMap({\n                    'w-full bg-transparent appearance-none h-m font-medium focus-outline-none':\n                      true,\n                    'text-disabled': this.disabled,\n                  })}\n                  list=\"list\"\n                  ...=${spread(this.inputParams)}\n                  .value=${live(this.__newItem)}\n                  ?disabled=${this.disabled}\n                  ?readonly=${this.readonly}\n                  @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n                  @change=${(evt: Event) => evt.stopPropagation()}\n                  @input=${(evt: InputEvent) => {\n                    this.__newItem = (evt.currentTarget as HTMLInputElement).value.trim();\n                  }}\n                  @paste=${(evt: ClipboardEvent) => {\n                    evt.preventDefault();\n                    this.__newItem = evt.clipboardData?.getData('text') ?? '';\n                    if (this.__newItem.includes('\\n')) addItem();\n                  }}\n                  @blur=${() => {\n                    this.__isErrorVisible = true;\n                  }}\n                />\n              `}\n\n          <div\n            class=${classMap({\n              'relative': true,\n              'hover-text-base focus-within-text-primary-contrast': !this.disabled,\n              'text-disabled': this.disabled,\n            })}\n            ?hidden=${this.units.length === 0}\n          >\n            <select\n              style=\"min-width: 8rem\"\n              class=${classMap({\n                'transition-colors rounded-s mx-xs px-s': true,\n                'bg-contrast-5 appearance-none h-xs font-medium focus-outline-none': true,\n                'hover-bg-contrast focus-bg-primary': !this.disabled,\n              })}\n              ?disabled=${this.disabled}\n            >\n              ${this.units.map(({ label, value }) => {\n                return html`<option value=${value}>${label ?? value}</option>`;\n              })}\n            </select>\n          </div>\n\n          <datalist id=\"list\">\n            ${this.options.map(({ label, value }) => {\n              if (this._value.some(item => item.value === value)) return;\n              return html`<option value=${value}>${label ?? value}</option>`;\n            })}\n          </datalist>\n\n          <div class=\"mr-xs ml-auto\" ?hidden=${!this.__newItem}>\n            <button\n              aria-label=${this.t('submit')}\n              class=${classMap({\n                'w-xs h-xs flex-shrink-0 ring-inset ring-success-50 focus-outline-none': true,\n                'flex items-center justify-center rounded-s transition-colors': true,\n                'bg-contrast-5 text-disabled cursor-default': isAddButtonDisabled,\n                'bg-contrast-5 text-body cursor-pointer': !isAddButtonDisabled,\n                'hover-bg-success hover-text-success-contrast': !isAddButtonDisabled,\n                'focus-ring-2': !isAddButtonDisabled,\n              })}\n              ?disabled=${isAddButtonDisabled}\n              @click=${addItem}\n            >\n              <iron-icon icon=\"lumo:plus\" class=\"icon-inline text-l\"></iron-icon>\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <div\n        class=${classMap({\n          'mt-s leading-xs text-error': true,\n          'text-xs': isSummaryItem,\n          'text-s': !isSummaryItem,\n        })}\n        ?hidden=${!this.__isErrorVisible || !this._errorMessage || this.disabled || this.readonly}\n      >\n        ${this._errorMessage}\n      </div>\n    `;\n  }\n\n  protected get _value(): Item[] {\n    const value = super._value;\n    if (this.simpleValue) return ((value as string[]) ?? []).map(value => ({ value }));\n    return (value ?? []) as Item[];\n  }\n\n  protected set _value(newValue: Item[]) {\n    if (this.simpleValue) {\n      super._value = newValue.map(({ value }) => value);\n    } else {\n      super._value = newValue;\n    }\n  }\n}\n"]}
+{"version":3,"file":"InternalEditableListControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableListControl/InternalEditableListControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { Item, Option, Unit } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css } from 'lit-element';\nimport { classMap } from '../../../utils/class-map';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { spread } from '@open-wc/lit-helpers';\nimport { live } from 'lit-html/directives/live';\n\nexport class InternalEditableListControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      inputParams: { attribute: false },\n      simpleValue: { type: Boolean, attribute: 'simple-value' },\n      options: { type: Array },\n      layout: {},\n      units: { type: Array },\n      range: {},\n      __isErrorVisible: { attribute: false },\n      __newItem: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      ...super.styles,\n      css`\n        div:has(> select) {\n          position: relative;\n        }\n\n        div:has(> select)::after {\n          content: ' ';\n          position: absolute;\n          top: 50%;\n          margin-top: -2px;\n          right: 10px;\n          width: 0;\n          height: 0;\n          border-left: 5px solid transparent;\n          border-right: 5px solid transparent;\n          border-top: 5px solid currentColor;\n        }\n      `,\n    ];\n  }\n\n  inputParams: Record<string, unknown> = {};\n\n  simpleValue = false;\n\n  options: Option[] = [];\n\n  layout: 'standalone' | 'summary-item' | null = null;\n\n  units: Unit[] = [];\n\n  range: null | 'optional' = null;\n\n  private __isErrorVisible = false;\n\n  private __newItem = '';\n\n  render(): TemplateResult {\n    const isSummaryItem = this.layout === 'summary-item';\n    const isInteractive = !this.disabled && !this.readonly;\n\n    const deleteButtonClass = classMap({\n      'w-xs h-xs rounded-s transition-colors flex-shrink-0': true,\n      'focus-outline-none focus-ring-2 ring-inset ring-error-50': true,\n      'text-tertiary hover-bg-error-10 hover-text-error': !this.disabled,\n      'cursor-default text-disabled': this.disabled,\n      'flex items-center justify-center': !this.readonly,\n      'hidden': this.readonly,\n      'mr-xs': !isSummaryItem,\n    });\n\n    const itemClass = classMap({\n      'transition-colors flex items-center': true,\n      'text-secondary': this.readonly,\n      'text-disabled': this.disabled,\n      'border border-contrast-10 rounded-s': isSummaryItem,\n      'h-m': !isSummaryItem,\n    });\n\n    const isAddButtonDisabled = this.disabled || !this.__newItem;\n\n    const addItem = (split = false) => {\n      const newValue = [...this._value];\n      const splitBy = split && this.__newItem.includes(',') ? ',' : '\\n';\n      const unit = this.renderRoot.querySelector('select')?.value;\n\n      this.__newItem\n        .split(splitBy)\n        .map(code => code.trim())\n        .filter(code => code.length > 0)\n        .forEach(value => {\n          if (!newValue.some(item => item.value === value)) {\n            newValue.push({ value, unit });\n          }\n        });\n\n      this._value = newValue;\n      this.__newItem = '';\n    };\n\n    return html`\n      <div class=\"mb-s\" ?hidden=${!this.label && !this.helperText}>\n        <div class=${classMap({ 'font-medium text-l': !isSummaryItem })}>${this.label}</div>\n        <div\n          class=${classMap({\n            'text-secondary': true,\n            'text-xs': isSummaryItem,\n            'text-s': !isSummaryItem,\n          })}\n          ?hidden=${!this.helperText}\n        >\n          ${this.helperText}\n        </div>\n      </div>\n\n      <div\n        class=${classMap({\n          'bg-contrast-5 rounded': !isSummaryItem,\n          'mt-s': isSummaryItem,\n        })}\n      >\n        <ol\n          class=${classMap({\n            'transition-colors font-medium': true,\n            'divide-y divide-contrast-10': !isSummaryItem,\n            'flex flex-wrap gap-s': isSummaryItem,\n          })}\n        >\n          ${repeat(\n            this._value,\n            item => item.value,\n            (item, index) => {\n              return html`\n                <li\n                  class=${itemClass}\n                  style=\"padding-left: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n                >\n                  <div class=\"flex-1 mr-s\">${item.label ?? item.value}</div>\n\n                  <button\n                    aria-label=${this.t('delete')}\n                    class=${deleteButtonClass}\n                    ?disabled=${this.disabled}\n                    @click=${() => {\n                      this._value = this._value.filter((_, i) => i !== index);\n                    }}\n                  >\n                    <iron-icon icon=\"lumo:cross\" class=\"icon-inline text-xl\"></iron-icon>\n                  </button>\n                </li>\n              `;\n            }\n          )}\n        </ol>\n\n        <div\n          style=\"padding-left: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n          class=${classMap({\n            'transition-colors h-m flex items-center gap-xs': true,\n            'focus-within-ring-2 focus-within-ring-primary-50': !isSummaryItem,\n            'bg-contrast-5 hover-bg-contrast-10': !isSummaryItem && isInteractive,\n            'bg-contrast-5': !isSummaryItem && this.disabled,\n            'flex': !this.readonly,\n            'hidden': this.readonly,\n            'rounded-s border border-contrast-10': isSummaryItem,\n            'mt-s': isSummaryItem && this._value.length > 0,\n            'rounded': !isSummaryItem && this._value.length === 0,\n            'rounded-b': !isSummaryItem && this._value.length > 0,\n          })}\n        >\n          ${this.range\n            ? html`\n                <foxy-i18n infer=\"\" class=\"text-disabled font-medium\" key=\"range_from\"> </foxy-i18n>\n\n                <input\n                  placeholder=${this.placeholder}\n                  class=${classMap({\n                    'bg-transparent appearance-none h-m font-medium focus-outline-none': true,\n                    'text-disabled': this.disabled,\n                  })}\n                  list=\"list\"\n                  ...=${spread(this.inputParams)}\n                  .value=${live(this.__newItem.split('..')[0] ?? '')}\n                  ?disabled=${this.disabled}\n                  ?readonly=${this.readonly}\n                  @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n                  @change=${(evt: Event) => evt.stopPropagation()}\n                  @input=${(evt: InputEvent) => {\n                    const newFrom = (evt.currentTarget as HTMLInputElement).value.trim();\n                    const oldTo = this.__newItem.split('..')[1] ?? '';\n                    this.__newItem = oldTo ? `${newFrom}..${oldTo}` : newFrom;\n                  }}\n                  @paste=${(evt: ClipboardEvent) => {\n                    evt.preventDefault();\n\n                    const newFrom = evt.clipboardData?.getData('text') ?? '';\n                    const oldTo = this.__newItem.split('..')[1] ?? '';\n                    this.__newItem = oldTo ? `${newFrom}..${oldTo}` : newFrom;\n\n                    addItem();\n                  }}\n                  @blur=${() => {\n                    this.__isErrorVisible = true;\n                  }}\n                />\n\n                <foxy-i18n infer=\"\" class=\"text-disabled font-medium\" key=\"range_to\"></foxy-i18n>\n\n                <input\n                  placeholder=${this.placeholder}\n                  class=${classMap({\n                    'bg-transparent appearance-none h-m font-medium focus-outline-none': true,\n                    'text-disabled': this.disabled,\n                  })}\n                  list=\"list\"\n                  ...=${spread(this.inputParams)}\n                  .value=${live(this.__newItem.split('..')[1] ?? '')}\n                  ?disabled=${this.disabled}\n                  ?readonly=${this.readonly}\n                  @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n                  @change=${(evt: Event) => evt.stopPropagation()}\n                  @input=${(evt: InputEvent) => {\n                    const newTo = (evt.currentTarget as HTMLInputElement).value.trim();\n                    const oldFrom = this.__newItem.split('..')[0] ?? '';\n                    this.__newItem = oldFrom ? `${oldFrom}..${newTo}` : newTo;\n                  }}\n                  @paste=${(evt: ClipboardEvent) => {\n                    evt.preventDefault();\n\n                    const newTo = evt.clipboardData?.getData('text') ?? '';\n                    const oldFrom = this.__newItem.split('..')[0] ?? '';\n                    this.__newItem = oldFrom ? `${oldFrom}..${newTo}` : newTo;\n\n                    addItem();\n                  }}\n                  @blur=${() => {\n                    this.__isErrorVisible = true;\n                  }}\n                />\n              `\n            : html`\n                <input\n                  placeholder=${this.placeholder}\n                  class=${classMap({\n                    'w-full bg-transparent appearance-none h-m font-medium focus-outline-none':\n                      true,\n                    'text-disabled': this.disabled,\n                  })}\n                  list=\"list\"\n                  ...=${spread(this.inputParams)}\n                  .value=${live(this.__newItem)}\n                  ?disabled=${this.disabled}\n                  ?readonly=${this.readonly}\n                  @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n                  @change=${(evt: Event) => evt.stopPropagation()}\n                  @input=${(evt: InputEvent) => {\n                    this.__newItem = (evt.currentTarget as HTMLInputElement).value.trim();\n                  }}\n                  @paste=${(evt: ClipboardEvent) => {\n                    evt.preventDefault();\n                    this.__newItem = evt.clipboardData?.getData('text') ?? '';\n                    if (this.__newItem.includes('\\n') || this.__newItem.includes(','))\n                      addItem(true);\n                  }}\n                  @blur=${() => {\n                    this.__isErrorVisible = true;\n                  }}\n                />\n              `}\n\n          <div\n            class=${classMap({\n              'relative': true,\n              'hover-text-base focus-within-text-primary-contrast': !this.disabled,\n              'text-disabled': this.disabled,\n            })}\n            ?hidden=${this.units.length === 0}\n          >\n            <select\n              style=\"min-width: 8rem\"\n              class=${classMap({\n                'transition-colors rounded-s mx-xs px-s': true,\n                'bg-contrast-5 appearance-none h-xs font-medium focus-outline-none': true,\n                'hover-bg-contrast focus-bg-primary': !this.disabled,\n              })}\n              ?disabled=${this.disabled}\n            >\n              ${this.units.map(({ label, value }) => {\n                return html`<option value=${value}>${label ?? value}</option>`;\n              })}\n            </select>\n          </div>\n\n          <datalist id=\"list\">\n            ${this.options.map(({ label, value }) => {\n              if (this._value.some(item => item.value === value)) return;\n              return html`<option value=${value}>${label ?? value}</option>`;\n            })}\n          </datalist>\n\n          <div class=\"mr-xs ml-auto\" ?hidden=${!this.__newItem}>\n            <button\n              aria-label=${this.t('submit')}\n              class=${classMap({\n                'w-xs h-xs flex-shrink-0 ring-inset ring-success-50 focus-outline-none': true,\n                'flex items-center justify-center rounded-s transition-colors': true,\n                'bg-contrast-5 text-disabled cursor-default': isAddButtonDisabled,\n                'bg-contrast-5 text-body cursor-pointer': !isAddButtonDisabled,\n                'hover-bg-success hover-text-success-contrast': !isAddButtonDisabled,\n                'focus-ring-2': !isAddButtonDisabled,\n              })}\n              ?disabled=${isAddButtonDisabled}\n              @click=${addItem}\n            >\n              <iron-icon icon=\"lumo:plus\" class=\"icon-inline text-l\"></iron-icon>\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <div\n        class=${classMap({\n          'mt-s leading-xs text-error': true,\n          'text-xs': isSummaryItem,\n          'text-s': !isSummaryItem,\n        })}\n        ?hidden=${!this.__isErrorVisible || !this._errorMessage || this.disabled || this.readonly}\n      >\n        ${this._errorMessage}\n      </div>\n    `;\n  }\n\n  protected get _value(): Item[] {\n    const value = super._value;\n    if (this.simpleValue) return ((value as string[]) ?? []).map(value => ({ value }));\n    return (value ?? []) as Item[];\n  }\n\n  protected set _value(newValue: Item[]) {\n    if (this.simpleValue) {\n      super._value = newValue.map(({ value }) => value);\n    } else {\n      super._value = newValue;\n    }\n  }\n}\n"]}

package/dist/elements/internal/InternalSummaryControl/InternalSummaryControl.js

@@ -78,14 +78,14 @@ details[open] summary > div{
               style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
               ?hidden=${!this.label && !this.helperText}
             >
-              <p class="flex items-center justify-between gap-s" ?hidden=${!this.label}>
-                <span>
+              <p
+                class="flex items-center justify-between gap-s transition-opacity group-hover-opacity-80"
+                ?hidden=${!this.label}
+              >
+                <span class="font-medium">
                   ${this.label}${typeof this.count === 'number' ? ` (${this.count})` : ''}
                 </span>
-                <span
-                  class="flex items-center justify-center transition-colors text-tertiary group-hover-text-body"
-                  style="transform: scale(1.35)"
-                >
+                <span class="flex items-center justify-center" style="transform: scale(1.35)">
                   ${svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1.2em; height: 1.2em"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>`}
                 </span>
               </p>

package/dist/elements/internal/InternalSummaryControl/InternalSummaryControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalSummaryControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSummaryControl/InternalSummaryControl.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAkB,MAAM,UAAU,CAAC;AAE/C,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,OAAO,sBAAuB,SAAQ,uBAAuB;IAAnE;;QAkDE,qBAAgB,GAAG,KAAK,CAAC;QAEzB,WAAM,GAAiC,IAAI,CAAC;QAE5C,UAAK,GAAkB,IAAI,CAAC;QAE5B,SAAI,GAAG,KAAK,CAAC;IA2Df,CAAC;IAlHC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,gBAAgB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE;YACpE,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACvB,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;SACvC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,KAAK,CAAC,MAAM;YACf,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgCF;SACF,CAAC;IACJ,CAAC;IAUD,cAAc;QACZ,OAAO;IACT,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE;YAC7B,OAAO,IAAI,CAAA;;;kBAGC,IAAI,CAAC,IAAI;oBACP,CAAC,GAAU,EAAE,EAAE;gBACvB,MAAM,OAAO,GAAG,GAAG,CAAC,aAAmC,CAAC;gBACxD,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;gBACzB,IAAI,CAAC,GAAG,CAAC,QAAQ,IAAI,CAAC,GAAG,CAAC,OAAO;oBAAE,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;YACnF,CAAC;;;;;;wBAMa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU;;2EAEoB,CAAC,IAAI,CAAC,KAAK;;oBAElE,IAAI,CAAC,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;;;;;;oBAMrE,GAAG,CAAA,uTAAuT;;;sEAGxQ,CAAC,IAAI,CAAC,UAAU;kBACpE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU;;;;;;;;OAQhF,CAAC;SACH;QAED,OAAO,IAAI,CAAA;4CAC6B,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU;0DACjB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;+DACpB,CAAC,IAAI,CAAC,UAAU;YACnE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU;;;;;;KAM5E,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { CSSResultArray, PropertyDeclarations } from 'lit-element';\nimport { svg, TemplateResult } from 'lit-html';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html';\nimport { html, css } from 'lit-element';\n\nexport class InternalSummaryControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      unsafeHelperText: { type: Boolean, attribute: 'unsafe-helper-text' },\n      layout: {},\n      count: { type: Number },\n      open: { type: Boolean, reflect: true },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      ...super.styles,\n      css`\n        ::slotted(*) {\n          min-width: 100%;\n        }\n\n        :host(:not([layout='section'])) slot::slotted(*) {\n          background-color: var(--lumo-contrast-5pct);\n          padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px);\n        }\n\n        details summary > div {\n          border-radius: var(--lumo-border-radius);\n        }\n\n        details[open] summary > div {\n          border-radius: var(--lumo-border-radius) var(--lumo-border-radius) 0 0;\n        }\n\n        .with-unsafe a {\n          text-decoration: underline;\n          transition: color 0.1s ease-in-out;\n        }\n\n        .with-unsafe a:hover {\n          color: var(--lumo-primary-text-color);\n        }\n\n        .with-unsafe a:focus {\n          outline: none;\n          box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);\n          border-radius: var(--lumo-border-radius-s);\n        }\n      `,\n    ];\n  }\n\n  unsafeHelperText = false;\n\n  layout: null | 'section' | 'details' = null;\n\n  count: number | null = null;\n\n  open = false;\n\n  renderLightDom(): void {\n    return;\n  }\n\n  renderControl(): TemplateResult {\n    if (this.layout === 'details') {\n      return html`\n        <details\n          class=\"rounded overflow-hidden\"\n          ?open=${this.open}\n          @toggle=${(evt: Event) => {\n            const details = evt.currentTarget as HTMLDetailsElement;\n            this.open = details.open;\n            if (!evt.composed && !evt.bubbles) this.dispatchEvent(new CustomEvent('toggle'));\n          }}\n        >\n          <summary class=\"select-none cursor-pointer focus-outline-none group\">\n            <div\n              class=\"leading-xs bg-contrast-5 group-focus-ring-2 group-focus-ring-inset group-focus-ring-primary-50\"\n              style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n              ?hidden=${!this.label && !this.helperText}\n            >\n              <p class=\"flex items-center justify-between gap-s\" ?hidden=${!this.label}>\n                <span>\n                  ${this.label}${typeof this.count === 'number' ? ` (${this.count})` : ''}\n                </span>\n                <span\n                  class=\"flex items-center justify-center transition-colors text-tertiary group-hover-text-body\"\n                  style=\"transform: scale(1.35)\"\n                >\n                  ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1.2em; height: 1.2em\"><path fill-rule=\"evenodd\" d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\" clip-rule=\"evenodd\" /></svg>`}\n                </span>\n              </p>\n              <p class=\"text-xs text-secondary with-unsafe\" ?hidden=${!this.helperText}>\n                ${this.unsafeHelperText ? unsafeHTML(this.helperText) : this.helperText}\n              </p>\n            </div>\n          </summary>\n          <div class=\"overflow-hidden grid\" style=\"gap: 1px\">\n            <slot></slot>\n          </div>\n        </details>\n      `;\n    }\n\n    return html`\n      <div class=\"leading-s mb-s\" ?hidden=${!this.label && !this.helperText}>\n        <p class=\"font-medium text-body text-l\" ?hidden=${!this.label}>${this.label}</p>\n        <p class=\"text-s text-secondary with-unsafe\" ?hidden=${!this.helperText}>\n          ${this.unsafeHelperText ? unsafeHTML(this.helperText) : this.helperText}\n        </p>\n      </div>\n      <div class=\"rounded overflow-hidden grid\" style=\"gap: 1px\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalSummaryControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSummaryControl/InternalSummaryControl.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAkB,MAAM,UAAU,CAAC;AAE/C,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,OAAO,sBAAuB,SAAQ,uBAAuB;IAAnE;;QAkDE,qBAAgB,GAAG,KAAK,CAAC;QAEzB,WAAM,GAAiC,IAAI,CAAC;QAE5C,UAAK,GAAkB,IAAI,CAAC;QAE5B,SAAI,GAAG,KAAK,CAAC;IA2Df,CAAC;IAlHC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,gBAAgB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE;YACpE,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACvB,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;SACvC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,KAAK,CAAC,MAAM;YACf,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgCF;SACF,CAAC;IACJ,CAAC;IAUD,cAAc;QACZ,OAAO;IACT,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE;YAC7B,OAAO,IAAI,CAAA;;;kBAGC,IAAI,CAAC,IAAI;oBACP,CAAC,GAAU,EAAE,EAAE;gBACvB,MAAM,OAAO,GAAG,GAAG,CAAC,aAAmC,CAAC;gBACxD,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;gBACzB,IAAI,CAAC,GAAG,CAAC,QAAQ,IAAI,CAAC,GAAG,CAAC,OAAO;oBAAE,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;YACnF,CAAC;;;;;;wBAMa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU;;;;0BAI7B,CAAC,IAAI,CAAC,KAAK;;;oBAGjB,IAAI,CAAC,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;;;oBAGrE,GAAG,CAAA,uTAAuT;;;sEAGxQ,CAAC,IAAI,CAAC,UAAU;kBACpE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU;;;;;;;;OAQhF,CAAC;SACH;QAED,OAAO,IAAI,CAAA;4CAC6B,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU;0DACjB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;+DACpB,CAAC,IAAI,CAAC,UAAU;YACnE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU;;;;;;KAM5E,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { CSSResultArray, PropertyDeclarations } from 'lit-element';\nimport { svg, TemplateResult } from 'lit-html';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html';\nimport { html, css } from 'lit-element';\n\nexport class InternalSummaryControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      unsafeHelperText: { type: Boolean, attribute: 'unsafe-helper-text' },\n      layout: {},\n      count: { type: Number },\n      open: { type: Boolean, reflect: true },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      ...super.styles,\n      css`\n        ::slotted(*) {\n          min-width: 100%;\n        }\n\n        :host(:not([layout='section'])) slot::slotted(*) {\n          background-color: var(--lumo-contrast-5pct);\n          padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px);\n        }\n\n        details summary > div {\n          border-radius: var(--lumo-border-radius);\n        }\n\n        details[open] summary > div {\n          border-radius: var(--lumo-border-radius) var(--lumo-border-radius) 0 0;\n        }\n\n        .with-unsafe a {\n          text-decoration: underline;\n          transition: color 0.1s ease-in-out;\n        }\n\n        .with-unsafe a:hover {\n          color: var(--lumo-primary-text-color);\n        }\n\n        .with-unsafe a:focus {\n          outline: none;\n          box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);\n          border-radius: var(--lumo-border-radius-s);\n        }\n      `,\n    ];\n  }\n\n  unsafeHelperText = false;\n\n  layout: null | 'section' | 'details' = null;\n\n  count: number | null = null;\n\n  open = false;\n\n  renderLightDom(): void {\n    return;\n  }\n\n  renderControl(): TemplateResult {\n    if (this.layout === 'details') {\n      return html`\n        <details\n          class=\"rounded overflow-hidden\"\n          ?open=${this.open}\n          @toggle=${(evt: Event) => {\n            const details = evt.currentTarget as HTMLDetailsElement;\n            this.open = details.open;\n            if (!evt.composed && !evt.bubbles) this.dispatchEvent(new CustomEvent('toggle'));\n          }}\n        >\n          <summary class=\"select-none cursor-pointer focus-outline-none group\">\n            <div\n              class=\"leading-xs bg-contrast-5 group-focus-ring-2 group-focus-ring-inset group-focus-ring-primary-50\"\n              style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n              ?hidden=${!this.label && !this.helperText}\n            >\n              <p\n                class=\"flex items-center justify-between gap-s transition-opacity group-hover-opacity-80\"\n                ?hidden=${!this.label}\n              >\n                <span class=\"font-medium\">\n                  ${this.label}${typeof this.count === 'number' ? ` (${this.count})` : ''}\n                </span>\n                <span class=\"flex items-center justify-center\" style=\"transform: scale(1.35)\">\n                  ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1.2em; height: 1.2em\"><path fill-rule=\"evenodd\" d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\" clip-rule=\"evenodd\" /></svg>`}\n                </span>\n              </p>\n              <p class=\"text-xs text-secondary with-unsafe\" ?hidden=${!this.helperText}>\n                ${this.unsafeHelperText ? unsafeHTML(this.helperText) : this.helperText}\n              </p>\n            </div>\n          </summary>\n          <div class=\"overflow-hidden grid\" style=\"gap: 1px\">\n            <slot></slot>\n          </div>\n        </details>\n      `;\n    }\n\n    return html`\n      <div class=\"leading-s mb-s\" ?hidden=${!this.label && !this.helperText}>\n        <p class=\"font-medium text-body text-l\" ?hidden=${!this.label}>${this.label}</p>\n        <p class=\"text-s text-secondary with-unsafe\" ?hidden=${!this.helperText}>\n          ${this.unsafeHelperText ? unsafeHTML(this.helperText) : this.helperText}\n        </p>\n      </div>\n      <div class=\"rounded overflow-hidden grid\" style=\"gap: 1px\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -182,10 +182,13 @@ export declare class Donation extends Translatable {
      * Optional target to display the form response.
      */
     target: string;
+    private __fcSessionPollInterval;
     constructor();
     /** Submits the form, emitting a cancelable `submit` event. */
     submit(): void;
     render(): TemplateResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     updated(): void;
     private get __data();
     private get __form();

package/dist/elements/public/Donation/Donation.js

@@ -158,6 +158,7 @@ export class Donation extends Translatable {
          * Optional target to display the form response.
          */
         this.target = '_top';
+        this.__fcSessionPollInterval = null;
     }
     /** @readonly */
     static get scopedElements() {
@@ -354,6 +355,24 @@ export class Donation extends Translatable {
       </section>
     `;
     }
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        if (!((_a = window.FC) === null || _a === void 0 ? void 0 : _a.settings.session_id) && this.__fcSessionPollInterval === null) {
+            this.__fcSessionPollInterval = window.setInterval(() => {
+                var _a, _b;
+                if ((_a = window.FC) === null || _a === void 0 ? void 0 : _a.settings.session_id) {
+                    clearInterval((_b = this.__fcSessionPollInterval) !== null && _b !== void 0 ? _b : void 0);
+                    this.requestUpdate();
+                }
+            }, 1000);
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        clearInterval((_a = this.__fcSessionPollInterval) !== null && _a !== void 0 ? _a : void 0);
+    }
     updated() {
         this.dispatchEvent(new DonationChangeEvent(this.__data));
     }

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

@@ -1 +1 @@
-{"version":3,"file":"Donation.js","sourceRoot":"","sources":["../../../../src/elements/public/Donation/Donation.ts"],"names":[],"mappings":"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","sourcesContent":["import { ScopedElementsMap } from '@open-wc/scoped-elements';\nimport '@vaadin/vaadin-button';\nimport '@vaadin/vaadin-text-field/vaadin-text-area';\nimport { PropertyDeclarations } from 'lit-element';\nimport { html, TemplateResult } from 'lit-html';\nimport { Translatable } from '../../../mixins/translatable';\nimport { parseDuration } from '../../../utils/parse-duration';\nimport { CheckboxChangeEvent, ChoiceChangeEvent, DropdownChangeEvent } from '../../private/events';\nimport { Checkbox, Choice, Dropdown, ErrorScreen, Group, I18N } from '../../private/index';\nimport { DonationChangeEvent } from './DonationChangeEvent';\nimport { DonationSubmitEvent } from './DonationSubmitEvent';\n\ndeclare global {\n  interface Window {\n    FC?: {\n      settings: {\n        session_name: string;\n        session_id: string;\n      };\n    };\n  }\n}\n\ninterface DonationEventsMap {\n  change: typeof DonationChangeEvent;\n  submit: typeof DonationSubmitEvent;\n}\n\n/**\n * A custom element providing customizable donation forms.\n *\n * @fires Donation#change - Instance of `Donation.events.change`. Emitted after user input triggers a change in the form data.\n * @fires Donation#submit - Instance of `Donation.events.submit`. Emitted when the form is submitted. Cancelling this event will stop the submission.\n *\n * @slot amount - Space below the amount selector, if it's visible.\n * @slot designation - Space below the designation selector, if it's visible.\n * @slot comment - Space below the comment field, if it's visible.\n *\n * @element foxy-donation\n * @since 0.3.0\n */\nexport class Donation extends Translatable {\n  /** @readonly */\n  public static get scopedElements(): ScopedElementsMap {\n    return {\n      'vaadin-text-area': customElements.get('vaadin-text-area'),\n      'x-error-screen': ErrorScreen,\n      'vaadin-button': customElements.get('vaadin-button'),\n      'x-dropdown': Dropdown,\n      'x-checkbox': Checkbox,\n      'x-choice': Choice,\n      'x-group': Group,\n      'x-i18n': I18N,\n    };\n  }\n\n  /** @readonly */\n  public static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      currency: { type: String },\n      custom: { type: Array },\n      amount: { type: Number },\n      amounts: { type: Array },\n      frequency: { type: String },\n      frequencies: { type: Array },\n      designation: { type: Array },\n      designations: { type: Array },\n      comment: { type: String },\n      anonymity: { reflect: true, type: Boolean },\n      anonymous: { reflect: true, type: Boolean },\n      image: { type: String },\n      store: { type: String },\n      name: { type: String },\n      code: { type: String },\n      url: { type: String },\n      cart: { type: String },\n      target: { type: String },\n      empty: { type: String },\n    };\n  }\n\n  /** @readonly */\n  public static get events(): DonationEventsMap {\n    return {\n      change: DonationChangeEvent,\n      submit: DonationSubmitEvent,\n    };\n  }\n\n  /**\n   * **Required** 3-letter lowercase currency code.\n   *\n   * **Example:** `\"usd\"`\n   */\n  public currency: null | string = null;\n\n  /**\n   * **Required** donation amount in specified currency. When more than one amount option\n   * is available, this field will contain the selected amount. This value is deliberately not\n   * limited to the predefined options: whatever you set it to will show up in the cart.\n   *\n   * **Example:** `25`\n   */\n  public amount: null | number = null;\n\n  /**\n   * **Required** store domain. This is usually the part after before `.foxycart.com`\n   * and after `https://`, e.g. the `foxy-demo` bit of `https://foxy-demo.foxycart.com`.\n   * Custom domains like `my.domain.example.com` are also supported since v1.6.1.\n   *\n   * **Example:** `\"foxy-demo\"`\n   */\n  public store: null | string = null;\n\n  /**\n   * **Required** product name for this donation. This will show up in the cart when this form is submitted.\n   * See [Products](https://wiki.foxycart.com/v/2.0/products) wiki for more details.\n   *\n   * **Example:** `\"One-time donation\"`\n   */\n  public name: null | string = null;\n\n  /**\n   * Optional parts of the form including a custom (\"other\") option.\n   * Adding `amount` to this array will enable custom amount.\n   *\n   * **Example:** `[\"amount\"]`\n   */\n  public custom: null | 'amount'[] = null;\n\n  /**\n   * Optional donation amount variants. If this property is set, the form will render\n   * the amount selection interface. If this array includes the value of the `amount` property,\n   * it will be pre-selected in the form.\n   *\n   * **Example:** `[25, 50, 75]`\n   */\n  public amounts: null | number[] = null;\n\n  /**\n   * Optional donation frequency string encoded as count (integer) + units (one\n   * of: `d` for days, `w` for weeks, `m` for months, `y` for years). A special\n   * value for twice a month is also supported: `.5m`. If set, the form will\n   * create a subscription with the specified frequency in the cart. This value is deliberately not\n   * limited to the predefined options: whatever you set it to will show up in the cart.\n   *\n   * **Example:** `\"1m\"`\n   */\n  public frequency: null | string = null;\n\n  /**\n   * Optional donation frequency variants in the same format as `frequency`. If this property is set,\n   * the form will render the frequency selection interface. If this array includes\n   * the value of the `frequency` property, it will be pre-selected in the form.\n   *\n   * **Example:** `[\"7d\", \".5m\", \"1y\"]`\n   */\n  public frequencies: null | string[] = null;\n\n  /**\n   * Optional donation designation(s). The form will serialize and pass this value to the cart\n   * on submission. This value is deliberately not limited to the predefined options:\n   * whatever you set it to will show up in the cart.\n   *\n   * **Example:** `\"Medical Care\"`\n   * **Example:** `[\"Medical Care\", \"Daily Meals\"]`\n   */\n  public designation: null | string = null;\n\n  /**\n   * Optional donation designation(s) variants. If this property is set,\n   * the form will render the designation selection interface: multiple choice\n   * if `designation` is an array and a single choice otherwise. All values overlapping\n   * with the `designation` property will be pre-selected in the form.\n   *\n   * **Example:** `[\"Medical Care\", \"Daily Meals\", \"Area of Greatest Need\"]`\n   */\n  public designations: null | string[] = null;\n\n  /**\n   * Optional comment accompanying the donation. If set (even to an empty string),\n   * the form will render a comment field. The value of this property will be updated\n   * as the customer enters their message and will be added to the order as a custom field in the end.\n   *\n   * **Example:** `\"\"`\n   */\n  public comment: null | string = null;\n\n  /**\n   * Optional switch controlling visibility of the anonymity checkbox. If set to `true`, the form\n   * will render the checkbox. All changes in the value are reflected to the attribute.\n   *\n   * **Example:** `true`\n   */\n  public anonymity = false;\n\n  /**\n   * Optional switch marking this donation as anonymous via a custom field when set to `true`. When\n   * the anonymity checkbox is rendered, also checks or unchecks it depending on the value.\n   * All changes in the value are reflected to the attribute.\n   *\n   * **Example:** `true`\n   */\n  public anonymous = false;\n\n  /**\n   * Optional product image URL (absolute path). This property affects cart UI only.\n   * See [Products](https://wiki.foxycart.com/v/2.0/products) wiki for more details.\n   *\n   * **Example:** `\"https://picsum.photos/320\"`\n   */\n  public image: null | string = null;\n\n  /**\n   * Optional product code for this donation. This property affects cart UI only.\n   * See [Products](https://wiki.foxycart.com/v/2.0/products) wiki for more details.\n   *\n   * **Example:** `\"ISBN 978-0-12-345678-9\"`\n   */\n  public code: null | string = null;\n\n  /**\n   * Optional product URL for this donation. Accepts a full URL to the product page, starting\n   * with `http://` or `https://`, or a relative path to the produt from the store's\n   * domain (as configured in the store settings). This property affects cart UI only.\n   * See [Products](https://wiki.foxycart.com/v/2.0/products) wiki for more details.\n   *\n   * **Example:** `\"https://example.com/my-product\"`\n   */\n  public url: null | string = null;\n\n  /**\n   * Optional cart\n   * If set to 'add' will add items to the cart and, on submit, user is redirected to the cart.\n   * If set to 'checkout', the default, on submit user is redirected to checkout directly\n   */\n  public cart = 'checkout';\n\n  /**\n   * Optional empty\n   * If set to 'true' clears the contents of the cart prior to adding the donation to the cart\n   * If set to 'reset' clears the contents of the cart and cookies prior to adding the donation to the cart\n   */\n  public empty?: string;\n\n  /**\n   * Optional target to display the form response.\n   */\n  public target = '_top';\n\n  public constructor() {\n    super('donation');\n  }\n\n  /** Submits the form, emitting a cancelable `submit` event. */\n  public submit(): void {\n    /* istanbul ignore if  */\n    if (this.dispatchEvent(new DonationSubmitEvent())) this.__form.submit();\n  }\n\n  public render(): TemplateResult {\n    if (!this.currency || !this.amount || !this.store || !this.name) {\n      return html`\n        <x-error-screen data-testid=\"error\" type=\"setup_needed\" class=\"relative\"></x-error-screen>\n      `;\n    }\n\n    const domain = this.store.includes('.') ? this.store : `${this.store}.foxycart.com`;\n\n    return html`\n      <form\n        target=\"${this.target}\"\n        class=\"sr-only\"\n        method=\"POST\"\n        action=\"https://${domain}/cart\"\n        data-testid=\"form\"\n      >\n        ${[...this.__data.entries()].map(\n          ([name, value]) => html`<input type=\"hidden\" name=${name} value=${value} />`\n        )}\n      </form>\n\n      <section>\n        ${this.amounts && this.amounts.length > 0\n          ? html`\n              <x-group frame>\n                <x-i18n ns=${this.ns} lang=${this.lang} key=\"amount\" slot=\"header\"></x-i18n>\n                <x-choice\n                  ?custom=${!!this.custom?.includes('amount')}\n                  .getText=${(v: string) => this.__translateAmount(parseFloat(v))}\n                  .items=${this.amounts.map(String)}\n                  .value=${this.amount.toString()}\n                  type=\"number\"\n                  lang=${this.lang}\n                  min=\"1\"\n                  ns=${this.ns}\n                  data-testid=\"amount\"\n                  @change=${(evt: ChoiceChangeEvent) => {\n                    const value = parseFloat(evt.detail as string);\n                    this.amount = isNaN(value) ? /* istanbul ignore next */ 1 : value;\n                  }}\n                >\n                </x-choice>\n              </x-group>\n\n              <slot name=\"amount\" class=\"block my-m\"></slot>\n            `\n          : ''}\n      </section>\n\n      <section>\n        ${this.designations && this.designations.length > 0\n          ? html`\n              <x-dropdown\n                .label=${this._t('designation').toString()}\n                .items=${this.designations}\n                .value=${Array.isArray(this.designation)\n                  ? '${this.designation[0]}: ${this.designation[1]}'\n                  : this.designation}\n                data-testid=\"designation\"\n                @change=${(evt: DropdownChangeEvent) => {\n                  this.designation = evt.detail as string;\n                }}\n              >\n              </x-dropdown>\n\n              <slot name=\"designation\" class=\"block my-m\"></slot>\n            `\n          : ''}\n      </section>\n\n      <section>\n        ${typeof this.comment === 'string'\n          ? html`\n              <vaadin-text-area\n                placeholder=${this._t('comment_placeholder').toString()}\n                value=${this.comment!}\n                label=${this._t('comment_label').toString()}\n                class=\"w-full\"\n                data-testid=\"comment\"\n                @input=${(evt: InputEvent) => {\n                  evt.stopPropagation();\n                  this.comment = (evt.target as HTMLTextAreaElement).value;\n                }}\n              >\n              </vaadin-text-area>\n\n              <slot name=\"comment\" class=\"block my-m\"></slot>\n            `\n          : ''}\n      </section>\n\n      <section>\n        ${this.anonymity\n          ? html`\n              <x-checkbox\n                class=\"my-m\"\n                data-testid=\"anonymity\"\n                ?checked=${this.anonymous}\n                @change=${(evt: CheckboxChangeEvent) => (this.anonymous = evt.detail)}\n              >\n                ${this._t('anonymous')}\n              </x-checkbox>\n            `\n          : ''}\n\n        <div class=\"flex flex-wrap -m-s\">\n          ${this.frequencies && this.frequencies.length > 0\n            ? html`\n                <div class=\"flex-1 p-s\">\n                  <x-dropdown\n                    .value=${this.frequency}\n                    .items=${this.frequencies}\n                    .getText=${this.__translateFrequency.bind(this)}\n                    data-testid=\"frequency\"\n                    @change=${(evt: DropdownChangeEvent) => {\n                      this.frequency = evt.detail as string;\n                    }}\n                  >\n                  </x-dropdown>\n                </div>\n              `\n            : ''}\n\n          <div class=\"flex-1 p-s\">\n            <vaadin-button\n              class=\"w-full\"\n              theme=\"primary\"\n              data-testid=\"submit\"\n              @click=${() => this.submit()}\n            >\n              <x-i18n\n                .opts=${{\n                  amount: this.__translateAmount(this.amount),\n                  frequency: this.frequency ? this.__translateFrequency(this.frequency) : '',\n                }}\n                lang=${this.lang}\n                key=${this.frequency && !this.frequencies?.length ? 'donate_recurrently' : 'donate'}\n                ns=${this.ns}\n              >\n              </x-i18n>\n            </vaadin-button>\n          </div>\n        </div>\n      </section>\n    `;\n  }\n\n  public updated(): void {\n    this.dispatchEvent(new DonationChangeEvent(this.__data));\n  }\n\n  private get __data() {\n    const data = new FormData();\n\n    if (typeof this.designation === 'string') {\n      data.set('Designation', this.designation.trim());\n    }\n\n    if (typeof this.amount === 'number' && typeof this.currency === 'string') {\n      data.set('price', `${this.amount.toFixed(2)}${this.currency}`);\n    }\n\n    if (this.frequency) data.set('sub_frequency', this.frequency);\n    if (typeof this.comment === 'string') data.set('Comment', this.comment.trim());\n    if (typeof this.image === 'string') data.set('image', this.image);\n    if (typeof this.code === 'string') data.set('code', this.code);\n    if (typeof this.name === 'string') data.set('name', this.name.trim());\n    if (typeof this.url === 'string') data.set('url', this.url);\n    if (typeof this.cart === 'string') data.set('cart', this.cart);\n    if (this.empty) data.set('empty', this.empty);\n    if (this.anonymous) data.set('Anonymous', 'true');\n    if (window.FC) data.set(window.FC.settings.session_name, window.FC.settings.session_id);\n\n    data.set('quantity', '1');\n\n    return data;\n  }\n\n  private get __form(): HTMLFormElement {\n    return this.shadowRoot!.querySelector('form')!;\n  }\n\n  private __translateFrequency(frequency: string) {\n    if (!frequency || frequency.match(/^\\s*$/)) return this._t('frequency_once');\n    if (frequency === '.5m') return this._t('frequency_0_5m');\n\n    const { count, units } = parseDuration(frequency);\n    return this._t('frequency', {\n      units: this._t(units, { count }),\n      count,\n    });\n  }\n\n  private __translateAmount(amount: number) {\n    return amount.toLocaleString(this.lang, {\n      minimumFractionDigits: 0,\n      currency: this.currency!,\n      style: 'currency',\n    });\n  }\n}\n"]}
+{"version":3,"file":"Donation.js","sourceRoot":"","sources":["../../../../src/elements/public/Donation/Donation.ts"],"names":[],"mappings":"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","sourcesContent":["import { ScopedElementsMap } from '@open-wc/scoped-elements';\nimport '@vaadin/vaadin-button';\nimport '@vaadin/vaadin-text-field/vaadin-text-area';\nimport { PropertyDeclarations } from 'lit-element';\nimport { html, TemplateResult } from 'lit-html';\nimport { Translatable } from '../../../mixins/translatable';\nimport { parseDuration } from '../../../utils/parse-duration';\nimport { CheckboxChangeEvent, ChoiceChangeEvent, DropdownChangeEvent } from '../../private/events';\nimport { Checkbox, Choice, Dropdown, ErrorScreen, Group, I18N } from '../../private/index';\nimport { DonationChangeEvent } from './DonationChangeEvent';\nimport { DonationSubmitEvent } from './DonationSubmitEvent';\n\ndeclare global {\n  interface Window {\n    FC?: {\n      settings: {\n        session_name: string;\n        session_id: string;\n      };\n    };\n  }\n}\n\ninterface DonationEventsMap {\n  change: typeof DonationChangeEvent;\n  submit: typeof DonationSubmitEvent;\n}\n\n/**\n * A custom element providing customizable donation forms.\n *\n * @fires Donation#change - Instance of `Donation.events.change`. Emitted after user input triggers a change in the form data.\n * @fires Donation#submit - Instance of `Donation.events.submit`. Emitted when the form is submitted. Cancelling this event will stop the submission.\n *\n * @slot amount - Space below the amount selector, if it's visible.\n * @slot designation - Space below the designation selector, if it's visible.\n * @slot comment - Space below the comment field, if it's visible.\n *\n * @element foxy-donation\n * @since 0.3.0\n */\nexport class Donation extends Translatable {\n  /** @readonly */\n  public static get scopedElements(): ScopedElementsMap {\n    return {\n      'vaadin-text-area': customElements.get('vaadin-text-area'),\n      'x-error-screen': ErrorScreen,\n      'vaadin-button': customElements.get('vaadin-button'),\n      'x-dropdown': Dropdown,\n      'x-checkbox': Checkbox,\n      'x-choice': Choice,\n      'x-group': Group,\n      'x-i18n': I18N,\n    };\n  }\n\n  /** @readonly */\n  public static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      currency: { type: String },\n      custom: { type: Array },\n      amount: { type: Number },\n      amounts: { type: Array },\n      frequency: { type: String },\n      frequencies: { type: Array },\n      designation: { type: Array },\n      designations: { type: Array },\n      comment: { type: String },\n      anonymity: { reflect: true, type: Boolean },\n      anonymous: { reflect: true, type: Boolean },\n      image: { type: String },\n      store: { type: String },\n      name: { type: String },\n      code: { type: String },\n      url: { type: String },\n      cart: { type: String },\n      target: { type: String },\n      empty: { type: String },\n    };\n  }\n\n  /** @readonly */\n  public static get events(): DonationEventsMap {\n    return {\n      change: DonationChangeEvent,\n      submit: DonationSubmitEvent,\n    };\n  }\n\n  /**\n   * **Required** 3-letter lowercase currency code.\n   *\n   * **Example:** `\"usd\"`\n   */\n  public currency: null | string = null;\n\n  /**\n   * **Required** donation amount in specified currency. When more than one amount option\n   * is available, this field will contain the selected amount. This value is deliberately not\n   * limited to the predefined options: whatever you set it to will show up in the cart.\n   *\n   * **Example:** `25`\n   */\n  public amount: null | number = null;\n\n  /**\n   * **Required** store domain. This is usually the part after before `.foxycart.com`\n   * and after `https://`, e.g. the `foxy-demo` bit of `https://foxy-demo.foxycart.com`.\n   * Custom domains like `my.domain.example.com` are also supported since v1.6.1.\n   *\n   * **Example:** `\"foxy-demo\"`\n   */\n  public store: null | string = null;\n\n  /**\n   * **Required** product name for this donation. This will show up in the cart when this form is submitted.\n   * See [Products](https://wiki.foxycart.com/v/2.0/products) wiki for more details.\n   *\n   * **Example:** `\"One-time donation\"`\n   */\n  public name: null | string = null;\n\n  /**\n   * Optional parts of the form including a custom (\"other\") option.\n   * Adding `amount` to this array will enable custom amount.\n   *\n   * **Example:** `[\"amount\"]`\n   */\n  public custom: null | 'amount'[] = null;\n\n  /**\n   * Optional donation amount variants. If this property is set, the form will render\n   * the amount selection interface. If this array includes the value of the `amount` property,\n   * it will be pre-selected in the form.\n   *\n   * **Example:** `[25, 50, 75]`\n   */\n  public amounts: null | number[] = null;\n\n  /**\n   * Optional donation frequency string encoded as count (integer) + units (one\n   * of: `d` for days, `w` for weeks, `m` for months, `y` for years). A special\n   * value for twice a month is also supported: `.5m`. If set, the form will\n   * create a subscription with the specified frequency in the cart. This value is deliberately not\n   * limited to the predefined options: whatever you set it to will show up in the cart.\n   *\n   * **Example:** `\"1m\"`\n   */\n  public frequency: null | string = null;\n\n  /**\n   * Optional donation frequency variants in the same format as `frequency`. If this property is set,\n   * the form will render the frequency selection interface. If this array includes\n   * the value of the `frequency` property, it will be pre-selected in the form.\n   *\n   * **Example:** `[\"7d\", \".5m\", \"1y\"]`\n   */\n  public frequencies: null | string[] = null;\n\n  /**\n   * Optional donation designation(s). The form will serialize and pass this value to the cart\n   * on submission. This value is deliberately not limited to the predefined options:\n   * whatever you set it to will show up in the cart.\n   *\n   * **Example:** `\"Medical Care\"`\n   * **Example:** `[\"Medical Care\", \"Daily Meals\"]`\n   */\n  public designation: null | string = null;\n\n  /**\n   * Optional donation designation(s) variants. If this property is set,\n   * the form will render the designation selection interface: multiple choice\n   * if `designation` is an array and a single choice otherwise. All values overlapping\n   * with the `designation` property will be pre-selected in the form.\n   *\n   * **Example:** `[\"Medical Care\", \"Daily Meals\", \"Area of Greatest Need\"]`\n   */\n  public designations: null | string[] = null;\n\n  /**\n   * Optional comment accompanying the donation. If set (even to an empty string),\n   * the form will render a comment field. The value of this property will be updated\n   * as the customer enters their message and will be added to the order as a custom field in the end.\n   *\n   * **Example:** `\"\"`\n   */\n  public comment: null | string = null;\n\n  /**\n   * Optional switch controlling visibility of the anonymity checkbox. If set to `true`, the form\n   * will render the checkbox. All changes in the value are reflected to the attribute.\n   *\n   * **Example:** `true`\n   */\n  public anonymity = false;\n\n  /**\n   * Optional switch marking this donation as anonymous via a custom field when set to `true`. When\n   * the anonymity checkbox is rendered, also checks or unchecks it depending on the value.\n   * All changes in the value are reflected to the attribute.\n   *\n   * **Example:** `true`\n   */\n  public anonymous = false;\n\n  /**\n   * Optional product image URL (absolute path). This property affects cart UI only.\n   * See [Products](https://wiki.foxycart.com/v/2.0/products) wiki for more details.\n   *\n   * **Example:** `\"https://picsum.photos/320\"`\n   */\n  public image: null | string = null;\n\n  /**\n   * Optional product code for this donation. This property affects cart UI only.\n   * See [Products](https://wiki.foxycart.com/v/2.0/products) wiki for more details.\n   *\n   * **Example:** `\"ISBN 978-0-12-345678-9\"`\n   */\n  public code: null | string = null;\n\n  /**\n   * Optional product URL for this donation. Accepts a full URL to the product page, starting\n   * with `http://` or `https://`, or a relative path to the produt from the store's\n   * domain (as configured in the store settings). This property affects cart UI only.\n   * See [Products](https://wiki.foxycart.com/v/2.0/products) wiki for more details.\n   *\n   * **Example:** `\"https://example.com/my-product\"`\n   */\n  public url: null | string = null;\n\n  /**\n   * Optional cart\n   * If set to 'add' will add items to the cart and, on submit, user is redirected to the cart.\n   * If set to 'checkout', the default, on submit user is redirected to checkout directly\n   */\n  public cart = 'checkout';\n\n  /**\n   * Optional empty\n   * If set to 'true' clears the contents of the cart prior to adding the donation to the cart\n   * If set to 'reset' clears the contents of the cart and cookies prior to adding the donation to the cart\n   */\n  public empty?: string;\n\n  /**\n   * Optional target to display the form response.\n   */\n  public target = '_top';\n\n  private __fcSessionPollInterval: number | null = null;\n\n  public constructor() {\n    super('donation');\n  }\n\n  /** Submits the form, emitting a cancelable `submit` event. */\n  public submit(): void {\n    /* istanbul ignore if  */\n    if (this.dispatchEvent(new DonationSubmitEvent())) this.__form.submit();\n  }\n\n  public render(): TemplateResult {\n    if (!this.currency || !this.amount || !this.store || !this.name) {\n      return html`\n        <x-error-screen data-testid=\"error\" type=\"setup_needed\" class=\"relative\"></x-error-screen>\n      `;\n    }\n\n    const domain = this.store.includes('.') ? this.store : `${this.store}.foxycart.com`;\n\n    return html`\n      <form\n        target=\"${this.target}\"\n        class=\"sr-only\"\n        method=\"POST\"\n        action=\"https://${domain}/cart\"\n        data-testid=\"form\"\n      >\n        ${[...this.__data.entries()].map(\n          ([name, value]) => html`<input type=\"hidden\" name=${name} value=${value} />`\n        )}\n      </form>\n\n      <section>\n        ${this.amounts && this.amounts.length > 0\n          ? html`\n              <x-group frame>\n                <x-i18n ns=${this.ns} lang=${this.lang} key=\"amount\" slot=\"header\"></x-i18n>\n                <x-choice\n                  ?custom=${!!this.custom?.includes('amount')}\n                  .getText=${(v: string) => this.__translateAmount(parseFloat(v))}\n                  .items=${this.amounts.map(String)}\n                  .value=${this.amount.toString()}\n                  type=\"number\"\n                  lang=${this.lang}\n                  min=\"1\"\n                  ns=${this.ns}\n                  data-testid=\"amount\"\n                  @change=${(evt: ChoiceChangeEvent) => {\n                    const value = parseFloat(evt.detail as string);\n                    this.amount = isNaN(value) ? /* istanbul ignore next */ 1 : value;\n                  }}\n                >\n                </x-choice>\n              </x-group>\n\n              <slot name=\"amount\" class=\"block my-m\"></slot>\n            `\n          : ''}\n      </section>\n\n      <section>\n        ${this.designations && this.designations.length > 0\n          ? html`\n              <x-dropdown\n                .label=${this._t('designation').toString()}\n                .items=${this.designations}\n                .value=${Array.isArray(this.designation)\n                  ? '${this.designation[0]}: ${this.designation[1]}'\n                  : this.designation}\n                data-testid=\"designation\"\n                @change=${(evt: DropdownChangeEvent) => {\n                  this.designation = evt.detail as string;\n                }}\n              >\n              </x-dropdown>\n\n              <slot name=\"designation\" class=\"block my-m\"></slot>\n            `\n          : ''}\n      </section>\n\n      <section>\n        ${typeof this.comment === 'string'\n          ? html`\n              <vaadin-text-area\n                placeholder=${this._t('comment_placeholder').toString()}\n                value=${this.comment!}\n                label=${this._t('comment_label').toString()}\n                class=\"w-full\"\n                data-testid=\"comment\"\n                @input=${(evt: InputEvent) => {\n                  evt.stopPropagation();\n                  this.comment = (evt.target as HTMLTextAreaElement).value;\n                }}\n              >\n              </vaadin-text-area>\n\n              <slot name=\"comment\" class=\"block my-m\"></slot>\n            `\n          : ''}\n      </section>\n\n      <section>\n        ${this.anonymity\n          ? html`\n              <x-checkbox\n                class=\"my-m\"\n                data-testid=\"anonymity\"\n                ?checked=${this.anonymous}\n                @change=${(evt: CheckboxChangeEvent) => (this.anonymous = evt.detail)}\n              >\n                ${this._t('anonymous')}\n              </x-checkbox>\n            `\n          : ''}\n\n        <div class=\"flex flex-wrap -m-s\">\n          ${this.frequencies && this.frequencies.length > 0\n            ? html`\n                <div class=\"flex-1 p-s\">\n                  <x-dropdown\n                    .value=${this.frequency}\n                    .items=${this.frequencies}\n                    .getText=${this.__translateFrequency.bind(this)}\n                    data-testid=\"frequency\"\n                    @change=${(evt: DropdownChangeEvent) => {\n                      this.frequency = evt.detail as string;\n                    }}\n                  >\n                  </x-dropdown>\n                </div>\n              `\n            : ''}\n\n          <div class=\"flex-1 p-s\">\n            <vaadin-button\n              class=\"w-full\"\n              theme=\"primary\"\n              data-testid=\"submit\"\n              @click=${() => this.submit()}\n            >\n              <x-i18n\n                .opts=${{\n                  amount: this.__translateAmount(this.amount),\n                  frequency: this.frequency ? this.__translateFrequency(this.frequency) : '',\n                }}\n                lang=${this.lang}\n                key=${this.frequency && !this.frequencies?.length ? 'donate_recurrently' : 'donate'}\n                ns=${this.ns}\n              >\n              </x-i18n>\n            </vaadin-button>\n          </div>\n        </div>\n      </section>\n    `;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    if (!window.FC?.settings.session_id && this.__fcSessionPollInterval === null) {\n      this.__fcSessionPollInterval = window.setInterval(() => {\n        if (window.FC?.settings.session_id) {\n          clearInterval(this.__fcSessionPollInterval ?? void 0);\n          this.requestUpdate();\n        }\n      }, 1000);\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    clearInterval(this.__fcSessionPollInterval ?? void 0);\n  }\n\n  public updated(): void {\n    this.dispatchEvent(new DonationChangeEvent(this.__data));\n  }\n\n  private get __data() {\n    const data = new FormData();\n\n    if (typeof this.designation === 'string') {\n      data.set('Designation', this.designation.trim());\n    }\n\n    if (typeof this.amount === 'number' && typeof this.currency === 'string') {\n      data.set('price', `${this.amount.toFixed(2)}${this.currency}`);\n    }\n\n    if (this.frequency) data.set('sub_frequency', this.frequency);\n    if (typeof this.comment === 'string') data.set('Comment', this.comment.trim());\n    if (typeof this.image === 'string') data.set('image', this.image);\n    if (typeof this.code === 'string') data.set('code', this.code);\n    if (typeof this.name === 'string') data.set('name', this.name.trim());\n    if (typeof this.url === 'string') data.set('url', this.url);\n    if (typeof this.cart === 'string') data.set('cart', this.cart);\n    if (this.empty) data.set('empty', this.empty);\n    if (this.anonymous) data.set('Anonymous', 'true');\n    if (window.FC) data.set(window.FC.settings.session_name, window.FC.settings.session_id);\n\n    data.set('quantity', '1');\n\n    return data;\n  }\n\n  private get __form(): HTMLFormElement {\n    return this.shadowRoot!.querySelector('form')!;\n  }\n\n  private __translateFrequency(frequency: string) {\n    if (!frequency || frequency.match(/^\\s*$/)) return this._t('frequency_once');\n    if (frequency === '.5m') return this._t('frequency_0_5m');\n\n    const { count, units } = parseDuration(frequency);\n    return this._t('frequency', {\n      units: this._t(units, { count }),\n      count,\n    });\n  }\n\n  private __translateAmount(amount: number) {\n    return amount.toLocaleString(this.lang, {\n      minimumFractionDigits: 0,\n      currency: this.currency!,\n      style: 'currency',\n    });\n  }\n}\n"]}

package/dist/elements/public/FilterAttributeForm/FilterAttributeForm.js

@@ -2,7 +2,7 @@ import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { encode, decode } from 'html-entities';
 import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { html, svg } from 'lit-html';
+import { html } from 'lit-html';
 const NS = 'filter-attribute-form';
 const Base = TranslatableMixin(InternalForm, NS);
 /**
@@ -47,9 +47,9 @@ export class FilterAttributeForm extends Base {
         var _a;
         const constructor = this.constructor;
         const filterQuery = this.__getValueParam(constructor.filterQueryKey);
-        const hasChanges = this.in({ idle: { snapshot: 'dirty' } });
         const hasValue = !!this.form.value;
         const hasData = !!this.data;
+        const hasChanges = this.in({ idle: { snapshot: 'dirty' } }) || this.in({ idle: { template: 'dirty' } });
         return html `
       <div class="flex gap-s">
         ${this.data
@@ -81,19 +81,6 @@ export class FilterAttributeForm extends Base {
         ${!hasValue || (!filterQuery && !hasData)
             ? ''
             : html `
-              ${hasData && hasChanges
-                ? html `
-                    <vaadin-button
-                      aria-label=${this.t('action.reset')}
-                      theme="contrast icon"
-                      ?disabled=${this.disabled}
-                      @click=${() => this.undo()}
-                    >
-                      ${svg `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 1em; height: 1em; transform: translateY(-0.1em) scale(1.25)"><path stroke-linecap="round" stroke-linejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" /></svg>`}
-                    </vaadin-button>
-                  `
-                : ''}
-
               <vaadin-button
                 theme=${hasData ? (hasChanges ? 'secondary' : 'error') : 'success'}
                 style=${ifDefined(hasData ? void 0 : '--lumo-button-size: auto')}
@@ -115,6 +102,7 @@ export class FilterAttributeForm extends Base {
         options=${JSON.stringify(this.options)}
         infer="filter-query"
         value=${filterQuery}
+        disable-zoom
         @change=${this.__handleFilterQueryChange}
       >
       </foxy-query-builder>
@@ -179,6 +167,7 @@ export class FilterAttributeForm extends Base {
         const constructor = this.constructor;
         const element = evt.currentTarget;
         this.__setValueParam(constructor.filterQueryKey, (_a = element.value) !== null && _a !== void 0 ? _a : '');
+        this.requestUpdate();
     }
 }
 FilterAttributeForm.attributeVisibility = 'restricted';