@foxy.io/elements 1.15.0-beta.7 → 1.15.0-beta.8

package/dist/cdn/foxy-coupon-codes-form.js

@@ -1 +1 @@
-import"./shared-5a54a9bc.js";import"./shared-60126eee.js";import"./shared-46ee137f.js";import"./shared-9221e6b2.js";import"./foxy-spinner.js";import"./shared-11708514.js";import{h as e}from"./shared-63eaded9.js";import{C as t}from"./shared-df730f90.js";import{E as s}from"./shared-09069d7c.js";import{G as i}from"./shared-02945b27.js";import{N as o}from"./shared-39e3ae67.js";import{T as n,S as r,a}from"./shared-e68b9c83.js";import{c as l}from"./shared-4e709717.js";import"./shared-8b20bc23.js";import"./shared-ff79f3f9.js";import"./shared-5535f38f.js";import"./shared-6d45a07b.js";import"./shared-07134f93.js";import"./shared-b710881a.js";import"./shared-7f0a9790.js";import"./shared-7684cb05.js";import"./shared-756034e4.js";let d,c,m,h,p=e=>e;const u=t(n(r(a(o,"coupon-codes-form"))));class f extends u{constructor(){super(...arguments),this.templates={}}static get scopedElements(){return{"vaadin-button":customElements.get("vaadin-button"),"iron-icon":customElements.get("iron-icon"),"foxy-internal-sandbox":customElements.get("foxy-internal-sandbox"),"foxy-spinner":customElements.get("foxy-spinner"),"foxy-i18n":customElements.get("foxy-i18n"),"x-editable-list":s,"x-group":i}}static get v8n(){return[({coupon_codes:e})=>e&&e.length>0||"coupon_codes_required"]}render(){var t,s;const{hiddenSelector:i,lang:o,ns:n}=this,r=this.in("busy"),a=this.in("fail"),c=this.in({idle:"snapshot"}),m=this.in({idle:"template"}),h="transition-opacity duration-500",u="opacity-0 pointer-events-none";return e(d||(d=p` <div class="relative"> <div class="${0}"> ${0} ${0} </div> <div class="${0}"> <div class="mx-auto flex mb-m w-l h-l rounded-t-l rounded-b-l bg-success"> <iron-icon icon="icons:done-all" class="m-auto text-success-contrast"></iron-icon> </div> <foxy-i18n class="block" lang="${0}" key="import_codes_done" ns="${0}"></foxy-i18n> </div> <div class="${0}"> <foxy-spinner layout="vertical" class="m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l" state="${0}" lang="${0}" ns="${0} ${0}"> </foxy-spinner> </div> </div> `),l({"relative space-y-m":!0,[h]:!0,[u]:c}),i.matches("codes",!0)?"":this.__renderCodes(),i.matches("import",!0)?"":this.__renderImport(),l({"absolute inset-0 flex flex-col items-center justify-center":!0,"text-center text-m text-secondary leading-m":!0,[h]:!0,[u]:!c}),o,n,l({"absolute inset-0 flex":!0,[h]:!0,[u]:!r&&!a}),a?"error":m?"empty":"busy",o,n,null!==(s=null===(t=customElements.get("foxy-spinner"))||void 0===t?void 0:t.defaultNS)&&void 0!==s?s:"")}__renderCodes(){var t;const s=null!==(t=this.form.coupon_codes)&&void 0!==t?t:[],i=s.length>16?s.slice(-16):s,o=s.length>16?s.slice(0,-16):[],n=i.map((t=>{let s;try{const e=new URL(this.parent);e.searchParams.set("code",t),s=e.toString()}catch(e){s=this.parent}return{value:t,label:e(c||(c=p` <foxy-internal-coupon-codes-form-list-item group="${0}" href="${0}" lang="${0}" ns="${0}"> </foxy-internal-coupon-codes-form-list-item> `),this.group,s,this.lang,this.ns)}}));return e(m||(m=p` <div> ${0} <x-group class="mb-xs" frame> <foxy-i18n slot="header" lang="${0}" key="code_plural" ns="${0}"></foxy-i18n> <x-editable-list lang="${0}" ns="${0}" ?disabled="${0}" ?readonly="${0}" .items="${0}" @change="${0}" @paste="${0}"> <div class="ml-m py-s border-b border-contrast-10 font-lumo" ?hidden="${0}"> <foxy-i18n options="${0}" class="block text-body text-m mb-xs" lang="${0}" key="hidden_codes_header" ns="${0}"> </foxy-i18n> <foxy-i18n class="block text-xs text-tertiary" lang="${0}" key="hidden_codes_explainer" ns="${0}"> </foxy-i18n> </div> </x-editable-list> </x-group> <foxy-i18n class="block text-xs text-tertiary leading-s" lang="${0}" key="code_import_hint" ns="${0}"> </foxy-i18n> ${0} </div> `),this.renderTemplateOrSlot("codes:before"),this.lang,this.ns,this.lang,this.ns,!this.in("idle")||this.disabledSelector.matches("codes",!0),this.readonlySelector.matches("codes",!0),n,(e=>{const t=e.currentTarget,s=new Set([...o,...t.items.map((e=>e.value))]);this.edit({coupon_codes:[...s]})}),(e=>{var t,i;e.preventDefault();const o=(null!==(i=null===(t=e.clipboardData)||void 0===t?void 0:t.getData("text"))&&void 0!==i?i:"").split(" ").map((e=>e.trim())).filter((e=>e.length>0));this.edit({coupon_codes:Array.from(new Set([...s,...o]))})}),0===o.length,JSON.stringify({count:o.length}),this.lang,this.ns,this.lang,this.ns,this.lang,this.ns,this.renderTemplateOrSlot("codes:after"))}__renderImport(){const t=this.in({idle:{template:{dirty:"valid"}}}),s=this.in({idle:{snapshot:{dirty:"valid"}}}),i=t||s;return e(h||(h=p` <div> ${0} <vaadin-button class="w-full mb-xs" theme="primary success" ?disabled="${0}" @click="${0}"> <foxy-i18n ns="${0}" key="import" lang="${0}"></foxy-i18n> </vaadin-button> ${0} </div> `),this.renderTemplateOrSlot("import:before"),!i||!this.in("idle")||this.disabledSelector.matches("import",!0),this.submit,this.ns,this.lang,this.renderTemplateOrSlot("import:after"))}}let x,y,b=e=>e;const g=a(n(o));customElements.define("foxy-coupon-codes-form",f),customElements.define("foxy-internal-coupon-codes-form-list-item",class extends g{render(){var t,s;let i;try{i=null!==(t=new URL(this.href).searchParams.get("code"))&&void 0!==t?t:""}catch(t){return e(x||(x=b``))}let o,n="text-tertiary bg-contrast-5",r="text-body";return this.in("fail")?o="loading_error":this.in("busy")?o="loading_busy":0===(null===(s=this.data)||void 0===s?void 0:s.returned_items)?(n="text-success bg-success-10",o="unique"):(n="text-error bg-error-10",o="duplicate",r="text-error"),e(y||(y=b` <div class="flex justify-between items-center font-lumo leading-m"> <div class="text-m ${0}">${0}</div> <foxy-i18n class="text-xs font-medium px-xs rounded ${0}" lang="${0}" key="${0}" ns="${0}"> </foxy-i18n> </div> `),r,i,n,this.lang,o,this.ns)}});export{f as CouponCodesForm};
+import"./shared-5a54a9bc.js";import"./shared-60126eee.js";import"./shared-46ee137f.js";import"./shared-9221e6b2.js";import"./foxy-spinner.js";import"./shared-11708514.js";import{h as e}from"./shared-63eaded9.js";import{C as t}from"./shared-df730f90.js";import{E as s}from"./shared-09069d7c.js";import{G as i}from"./shared-02945b27.js";import{N as o}from"./shared-39e3ae67.js";import{T as n,S as r,a}from"./shared-e68b9c83.js";import{c as d}from"./shared-4e709717.js";import"./shared-8b20bc23.js";import"./shared-ff79f3f9.js";import"./shared-5535f38f.js";import"./shared-6d45a07b.js";import"./shared-07134f93.js";import"./shared-b710881a.js";import"./shared-7f0a9790.js";import"./shared-7684cb05.js";import"./shared-756034e4.js";let l,c,m,h,p=e=>e;const u=t(n(r(a(o,"coupon-codes-form"))));class f extends u{constructor(){super(...arguments),this.templates={}}static get scopedElements(){return{"vaadin-button":customElements.get("vaadin-button"),"iron-icon":customElements.get("iron-icon"),"foxy-internal-sandbox":customElements.get("foxy-internal-sandbox"),"foxy-spinner":customElements.get("foxy-spinner"),"foxy-i18n":customElements.get("foxy-i18n"),"x-editable-list":s,"x-group":i}}static get v8n(){return[({coupon_codes:e})=>e&&e.length>0||"coupon_codes_required"]}render(){var t,s;const{hiddenSelector:i,lang:o,ns:n}=this,r=this.in("busy"),a=this.in("fail"),c=this.in({idle:"snapshot"}),m=this.in({idle:"template"}),h="transition-opacity duration-500",u="opacity-0 pointer-events-none";return e(l||(l=p` <div class="relative"> <div class="${0}"> ${0} ${0} </div> <div class="${0}"> <div class="mx-auto flex mb-m w-l h-l rounded-t-l rounded-b-l bg-success"> <iron-icon icon="icons:done-all" class="m-auto text-success-contrast"></iron-icon> </div> <foxy-i18n class="block" lang="${0}" key="import_codes_done" ns="${0}"></foxy-i18n> </div> <div data-testid="spinner" class="${0}"> <foxy-spinner layout="vertical" class="m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l" state="${0}" lang="${0}" ns="${0} ${0}"> </foxy-spinner> </div> </div> `),d({"relative space-y-m":!0,[h]:!0,[u]:c}),i.matches("codes",!0)?"":this.__renderCodes(),i.matches("import",!0)?"":this.__renderImport(),d({"absolute inset-0 flex flex-col items-center justify-center":!0,"text-center text-m text-secondary leading-m":!0,[h]:!0,[u]:!c}),o,n,d({"absolute inset-0 flex":!0,[h]:!0,[u]:!r&&!a}),a?"error":m?"empty":"busy",o,n,null!==(s=null===(t=customElements.get("foxy-spinner"))||void 0===t?void 0:t.defaultNS)&&void 0!==s?s:"")}__renderCodes(){var t;const s=null!==(t=this.form.coupon_codes)&&void 0!==t?t:[],i=s.length>16?s.slice(-16):s,o=s.length>16?s.slice(0,-16):[],n=i.map((t=>{let s;try{const e=new URL(this.parent);e.searchParams.set("code",t),s=e.toString()}catch(e){s=this.parent}return{value:t,label:e(c||(c=p` <foxy-internal-coupon-codes-form-list-item group="${0}" href="${0}" lang="${0}" ns="${0}"> </foxy-internal-coupon-codes-form-list-item> `),this.group,s,this.lang,this.ns)}}));return e(m||(m=p` <div data-testid="codes"> ${0} <x-group class="mb-xs" frame> <foxy-i18n slot="header" lang="${0}" key="code_plural" ns="${0}"></foxy-i18n> <x-editable-list data-testid="codes:list" lang="${0}" ns="${0}" ?disabled="${0}" ?readonly="${0}" .items="${0}" @change="${0}" @paste="${0}"> <div class="ml-m py-s border-b border-contrast-10 font-lumo" ?hidden="${0}"> <foxy-i18n options="${0}" class="block text-body text-m mb-xs" lang="${0}" key="hidden_codes_header" ns="${0}"> </foxy-i18n> <foxy-i18n class="block text-xs text-tertiary" lang="${0}" key="hidden_codes_explainer" ns="${0}"> </foxy-i18n> </div> </x-editable-list> </x-group> <foxy-i18n class="block text-xs text-tertiary leading-s" lang="${0}" key="code_import_hint" ns="${0}"> </foxy-i18n> ${0} </div> `),this.renderTemplateOrSlot("codes:before"),this.lang,this.ns,this.lang,this.ns,!this.in("idle")||this.disabledSelector.matches("codes",!0),this.readonlySelector.matches("codes",!0),n,(e=>{const t=e.currentTarget,s=new Set([...o,...t.items.map((e=>e.value))]);this.edit({coupon_codes:[...s]})}),(e=>{var t,i;e.preventDefault();const o=(null!==(i=null===(t=e.clipboardData)||void 0===t?void 0:t.getData("text"))&&void 0!==i?i:"").split(/\s/).map((e=>e.trim())).filter((e=>e.length>0));this.edit({coupon_codes:Array.from(new Set([...s,...o]))})}),0===o.length,JSON.stringify({count:o.length}),this.lang,this.ns,this.lang,this.ns,this.lang,this.ns,this.renderTemplateOrSlot("codes:after"))}__renderImport(){const t=this.in({idle:{template:{dirty:"valid"}}}),s=this.in({idle:{snapshot:{dirty:"valid"}}}),i=t||s;return e(h||(h=p` <div> ${0} <vaadin-button data-testid="import" class="w-full mb-xs" theme="primary success" ?disabled="${0}" @click="${0}"> <foxy-i18n ns="${0}" key="import" lang="${0}"></foxy-i18n> </vaadin-button> ${0} </div> `),this.renderTemplateOrSlot("import:before"),!i||!this.in("idle")||this.disabledSelector.matches("import",!0),(()=>this.submit()),this.ns,this.lang,this.renderTemplateOrSlot("import:after"))}}let x,y,b=e=>e;const g=a(n(o));customElements.define("foxy-coupon-codes-form",f),customElements.define("foxy-internal-coupon-codes-form-list-item",class extends g{render(){var t,s;let i;try{i=null!==(t=new URL(this.href).searchParams.get("code"))&&void 0!==t?t:""}catch(t){return e(x||(x=b``))}let o,n="text-tertiary bg-contrast-5",r="text-body";return this.in("fail")?o="loading_error":this.in("busy")?o="loading_busy":0===(null===(s=this.data)||void 0===s?void 0:s.returned_items)?(n="text-success bg-success-10",o="unique"):(n="text-error bg-error-10",o="duplicate",r="text-error"),e(y||(y=b` <div class="flex justify-between items-center font-lumo leading-m"> <div class="text-m ${0}">${0}</div> <foxy-i18n class="text-xs font-medium px-xs rounded ${0}" lang="${0}" key="${0}" ns="${0}"> </foxy-i18n> </div> `),r,i,n,this.lang,o,this.ns)}});export{f as CouponCodesForm};

package/dist/cdn/foxy-generate-codes-form.js

@@ -1 +1 @@
-import"./shared-65dfd512.js";import"./shared-a040d79d.js";import"./shared-5a54a9bc.js";import"./shared-9221e6b2.js";import"./foxy-spinner.js";import"./shared-11708514.js";import{h as e}from"./shared-63eaded9.js";import{C as t}from"./shared-df730f90.js";import{N as r}from"./shared-39e3ae67.js";import{T as s,a}from"./shared-e68b9c83.js";import{c as i}from"./shared-4e709717.js";import"./shared-8b20bc23.js";import"./shared-ff79f3f9.js";import"./shared-46ee137f.js";import"./shared-60126eee.js";import"./shared-5535f38f.js";import"./shared-6d45a07b.js";import"./shared-7f0a9790.js";import"./shared-7684cb05.js";import"./shared-756034e4.js";let n,d,l,o,c,h,m=e=>e;const u=t(s(a(r,"generate-codes-form")));class f extends u{constructor(){super(...arguments),this.templates={}}static get v8n(){return[({number_of_codes:e})=>e&&e>0||"number_of_codes_required",({current_balance:e})=>!e||e>=0||"current_balance_negative",({length:e})=>e&&e>0||"length_required"]}render(){var t,r;const{hiddenSelector:s,lang:a,ns:d}=this,l=this.in("busy"),o=this.in("fail"),c=this.in({idle:"snapshot"}),h=this.in({idle:"template"}),u="transition-opacity duration-500",f="opacity-0 pointer-events-none";return e(n||(n=m` <div aria-busy="${0}" aria-live="polite" class="relative"> <div class="${0}"> ${0} ${0} ${0} ${0} ${0} </div> <div class="${0}"> <div class="mx-auto flex mb-m w-l h-l rounded-t-l rounded-b-l bg-success"> <iron-icon icon="icons:done-all" class="m-auto text-success-contrast"></iron-icon> </div> <foxy-i18n class="block" lang="${0}" key="generate_codes_done" ns="${0}"></foxy-i18n> </div> <div data-testid="spinner" class="${0}"> <foxy-spinner layout="vertical" class="m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l" state="${0}" lang="${0}" ns="${0} ${0}"> </foxy-spinner> </div> </div> `),l,i({"grid grid-cols-2 gap-m":!0,[u]:!0,[f]:c}),s.matches("length",!0)?"":this.__renderLength(),s.matches("number-of-codes",!0)?"":this.__renderNumberOfCodes(),s.matches("current-balance",!0)?"":this.__renderCurrentBalance(),s.matches("prefix",!0)?"":this.__renderPrefix(),s.matches("generate",!0)?"":this.__renderGenerate(),i({"absolute inset-0 flex flex-col items-center justify-center":!0,"text-center text-m text-secondary leading-m":!0,[u]:!0,[f]:!c}),a,d,i({"absolute inset-0 flex":!0,[u]:!0,[f]:!l&&!o}),o?"error":h?"empty":"busy",a,d,null!==(r=null===(t=customElements.get("foxy-spinner"))||void 0===t?void 0:t.defaultNS)&&void 0!==r?r:"")}__getErrorMessage(e){const t=this.errors.find((t=>t.startsWith(e)));return t?this.t(t.replace(e,"v8n")):""}__getValidator(e){return()=>!this.errors.some((t=>t.startsWith(e)))}__renderLength(){const t=this.in({idle:"template"});return e(d||(d=m` <div> ${0} <vaadin-integer-field error-message="${0}" data-testid="length" label="${0}" class="w-full" min="1" ?disabled="${0}" ?readonly="${0}" prevent-invalid-input has-controls .checkValidity="${0}" .value="${0}" @keydown="${0}" @change="${0}"> </vaadin-integer-field> ${0} </div> `),this.renderTemplateOrSlot("length:before"),this.__getErrorMessage("length"),this.t("length"),!t||this.disabledSelector.matches("length",!0),this.readonlySelector.matches("length",!0),this.__getValidator("length"),t?this.form.length:"",(e=>"Enter"===e.key&&this.submit()),(e=>{const t=e.currentTarget;this.edit({length:parseInt(t.value)})}),this.renderTemplateOrSlot("length:after"))}__renderNumberOfCodes(){const t=this.in({idle:"template"});return e(l||(l=m` <div> ${0} <vaadin-integer-field error-message="${0}" data-testid="number-of-codes" label="${0}" class="w-full" min="1" ?disabled="${0}" ?readonly="${0}" prevent-invalid-input has-controls .checkValidity="${0}" .value="${0}" @keydown="${0}" @change="${0}"> </vaadin-integer-field> ${0} </div> `),this.renderTemplateOrSlot("number-of-codes:before"),this.__getErrorMessage("number_of_codes"),this.t("number_of_codes"),!t||this.disabledSelector.matches("number-of-codes",!0),this.readonlySelector.matches("number-of-codes",!0),this.__getValidator("number_of_codes"),t?this.form.number_of_codes:"",(e=>"Enter"===e.key&&this.submit()),(e=>{const t=e.currentTarget;this.edit({number_of_codes:parseInt(t.value)})}),this.renderTemplateOrSlot("number-of-codes:after"))}__renderCurrentBalance(){var t;const r=this.in({idle:"template"});return e(o||(o=m` <div> ${0} <vaadin-integer-field error-message="${0}" data-testid="current-balance" label="${0}" class="w-full col-span-2" min="0" ?disabled="${0}" ?readonly="${0}" prevent-invalid-input has-controls .checkValidity="${0}" .value="${0}" @keydown="${0}" @change="${0}"> </vaadin-integer-field> ${0} </div> `),this.renderTemplateOrSlot("current-balance:before"),this.__getErrorMessage("current_balance"),this.t("balance"),!r||this.disabledSelector.matches("current-balance",!0),this.readonlySelector.matches("current-balance",!0),this.__getValidator("current_balance"),r?null!==(t=this.form.current_balance)&&void 0!==t?t:0:"",(e=>"Enter"===e.key&&this.submit()),(e=>{const t=e.currentTarget;this.edit({current_balance:parseInt(t.value)})}),this.renderTemplateOrSlot("current-balance:after"))}__renderPrefix(){const t=this.in({idle:"template"});return e(c||(c=m` <div> ${0} <vaadin-text-field helper-text="${0}" data-testid="prefix" label="${0}" class="col-span-2" min="1" ?disabled="${0}" ?readonly="${0}" clear-button-visible .value="${0}" @keydown="${0}" @change="${0}"> </vaadin-text-field> ${0} </div> `),this.renderTemplateOrSlot("prefix:before"),this.t("leave_empty_for_random_codes"),this.t("prefix"),!t||this.disabledSelector.matches("prefix",!0),this.readonlySelector.matches("prefix",!0),t?this.form.prefix:"",(e=>"Enter"===e.key&&this.submit()),(e=>{const t=e.currentTarget;this.edit({prefix:t.value})}),this.renderTemplateOrSlot("prefix:after"))}__renderGenerate(){const t=this.in({idle:{template:{dirty:"valid"}}});return e(h||(h=m` <div> ${0} <vaadin-button data-testid="generate" class="col-span-2" theme="success primary" ?disabled="${0}" @click="${0}"> <foxy-i18n lang="${0}" key="generate" ns="${0}"></foxy-i18n> </vaadin-button> ${0} </div> `),this.renderTemplateOrSlot("generate:before"),!t||this.disabledSelector.matches("generate",!0),(()=>this.submit()),this.lang,this.ns,this.renderTemplateOrSlot("generate:after"))}}customElements.define("foxy-generate-codes-form",f);export{f as GenerateCodesForm};
+import"./shared-65dfd512.js";import"./shared-a040d79d.js";import"./shared-5a54a9bc.js";import"./shared-9221e6b2.js";import"./foxy-spinner.js";import"./shared-11708514.js";import{h as e}from"./shared-63eaded9.js";import{C as t}from"./shared-df730f90.js";import{N as r}from"./shared-39e3ae67.js";import{T as s,a}from"./shared-e68b9c83.js";import{c as i}from"./shared-4e709717.js";import"./shared-8b20bc23.js";import"./shared-ff79f3f9.js";import"./shared-46ee137f.js";import"./shared-60126eee.js";import"./shared-5535f38f.js";import"./shared-6d45a07b.js";import"./shared-7f0a9790.js";import"./shared-7684cb05.js";import"./shared-756034e4.js";let n,l,d,o,c,h,m=e=>e;const u=t(s(a(r,"generate-codes-form")));class f extends u{constructor(){super(...arguments),this.templates={}}static get v8n(){return[({number_of_codes:e})=>e&&e>0||"number_of_codes_required",({current_balance:e})=>!e||e>=0||"current_balance_negative",({length:e})=>e&&e>0||"length_required"]}render(){var t,r;const{hiddenSelector:s,lang:a,ns:l}=this,d=this.in("busy"),o=this.in("fail"),c=this.in({idle:"snapshot"}),h=this.in({idle:"template"}),u="transition-opacity duration-500",f="opacity-0 pointer-events-none";return e(n||(n=m` <div aria-busy="${0}" aria-live="polite" class="relative"> <div class="${0}"> ${0} ${0} ${0} ${0} ${0} </div> <div class="${0}"> <div class="mx-auto flex mb-m w-l h-l rounded-t-l rounded-b-l bg-success"> <iron-icon icon="icons:done-all" class="m-auto text-success-contrast"></iron-icon> </div> <foxy-i18n class="block" lang="${0}" key="generate_codes_done" ns="${0}"></foxy-i18n> </div> <div data-testid="spinner" class="${0}"> <foxy-spinner layout="vertical" class="m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l" state="${0}" lang="${0}" ns="${0} ${0}"> </foxy-spinner> </div> </div> `),d,i({"grid grid-cols-2 gap-m":!0,[u]:!0,[f]:c}),s.matches("length",!0)?"":this.__renderLength(),s.matches("number-of-codes",!0)?"":this.__renderNumberOfCodes(),s.matches("current-balance",!0)?"":this.__renderCurrentBalance(),s.matches("prefix",!0)?"":this.__renderPrefix(),s.matches("generate",!0)?"":this.__renderGenerate(),i({"absolute inset-0 flex flex-col items-center justify-center":!0,"text-center text-m text-secondary leading-m":!0,[u]:!0,[f]:!c}),a,l,i({"absolute inset-0 flex":!0,[u]:!0,[f]:!d&&!o}),o?"error":h?"empty":"busy",a,l,null!==(r=null===(t=customElements.get("foxy-spinner"))||void 0===t?void 0:t.defaultNS)&&void 0!==r?r:"")}__getErrorMessage(e){const t=this.errors.find((t=>t.startsWith(e)));return t?this.t(t.replace(e,"v8n")):""}__getValidator(e){return()=>!this.errors.some((t=>t.startsWith(e)))}__renderLength(){const t=this.in({idle:"template"});return e(l||(l=m` <div> ${0} <vaadin-integer-field error-message="${0}" data-testid="length" label="${0}" class="w-full" min="1" ?disabled="${0}" ?readonly="${0}" prevent-invalid-input has-controls .checkValidity="${0}" .value="${0}" @keydown="${0}" @change="${0}"> </vaadin-integer-field> ${0} </div> `),this.renderTemplateOrSlot("length:before"),this.__getErrorMessage("length"),this.t("length"),!t||this.disabledSelector.matches("length",!0),this.readonlySelector.matches("length",!0),this.__getValidator("length"),t?this.form.length:"",(e=>"Enter"===e.key&&this.submit()),(e=>{const t=e.currentTarget;this.edit({length:parseInt(t.value)})}),this.renderTemplateOrSlot("length:after"))}__renderNumberOfCodes(){const t=this.in({idle:"template"});return e(d||(d=m` <div> ${0} <vaadin-integer-field error-message="${0}" data-testid="number-of-codes" label="${0}" class="w-full" min="1" ?disabled="${0}" ?readonly="${0}" prevent-invalid-input has-controls .checkValidity="${0}" .value="${0}" @keydown="${0}" @change="${0}"> </vaadin-integer-field> ${0} </div> `),this.renderTemplateOrSlot("number-of-codes:before"),this.__getErrorMessage("number_of_codes"),this.t("number_of_codes"),!t||this.disabledSelector.matches("number-of-codes",!0),this.readonlySelector.matches("number-of-codes",!0),this.__getValidator("number_of_codes"),t?this.form.number_of_codes:"",(e=>"Enter"===e.key&&this.submit()),(e=>{const t=e.currentTarget;this.edit({number_of_codes:parseInt(t.value)})}),this.renderTemplateOrSlot("number-of-codes:after"))}__renderCurrentBalance(){var t;const r=this.in({idle:"template"});return e(o||(o=m` <div class="col-span-2"> ${0} <vaadin-integer-field error-message="${0}" data-testid="current-balance" label="${0}" class="w-full" min="0" ?disabled="${0}" ?readonly="${0}" prevent-invalid-input has-controls .checkValidity="${0}" .value="${0}" @keydown="${0}" @change="${0}"> </vaadin-integer-field> ${0} </div> `),this.renderTemplateOrSlot("current-balance:before"),this.__getErrorMessage("current_balance"),this.t("balance"),!r||this.disabledSelector.matches("current-balance",!0),this.readonlySelector.matches("current-balance",!0),this.__getValidator("current_balance"),r?null!==(t=this.form.current_balance)&&void 0!==t?t:0:"",(e=>"Enter"===e.key&&this.submit()),(e=>{const t=e.currentTarget;this.edit({current_balance:parseInt(t.value)})}),this.renderTemplateOrSlot("current-balance:after"))}__renderPrefix(){const t=this.in({idle:"template"});return e(c||(c=m` <div class="col-span-2"> ${0} <vaadin-text-field helper-text="${0}" data-testid="prefix" label="${0}" class="w-full" min="1" ?disabled="${0}" ?readonly="${0}" clear-button-visible .value="${0}" @keydown="${0}" @change="${0}"> </vaadin-text-field> ${0} </div> `),this.renderTemplateOrSlot("prefix:before"),this.t("leave_empty_for_random_codes"),this.t("prefix"),!t||this.disabledSelector.matches("prefix",!0),this.readonlySelector.matches("prefix",!0),t?this.form.prefix:"",(e=>"Enter"===e.key&&this.submit()),(e=>{const t=e.currentTarget;this.edit({prefix:t.value})}),this.renderTemplateOrSlot("prefix:after"))}__renderGenerate(){const t=this.in({idle:{template:{dirty:"valid"}}});return e(h||(h=m` <div class="col-span-2 mt-m"> ${0} <vaadin-button data-testid="generate" class="w-full" theme="success primary" ?disabled="${0}" @click="${0}"> <foxy-i18n lang="${0}" key="generate" ns="${0}"></foxy-i18n> </vaadin-button> ${0} </div> `),this.renderTemplateOrSlot("generate:before"),!t||this.disabledSelector.matches("generate",!0),(()=>this.submit()),this.lang,this.ns,this.renderTemplateOrSlot("generate:after"))}}customElements.define("foxy-generate-codes-form",f);export{f as GenerateCodesForm};

package/dist/cdn/foxy-gift-card-codes-form.js

@@ -1 +1 @@
-import"./shared-65dfd512.js";import"./shared-a040d79d.js";import"./shared-5a54a9bc.js";import"./shared-60126eee.js";import"./shared-46ee137f.js";import"./shared-9221e6b2.js";import"./foxy-spinner.js";import"./shared-11708514.js";import{h as e}from"./shared-63eaded9.js";import{C as t}from"./shared-df730f90.js";import{E as s}from"./shared-09069d7c.js";import{G as r}from"./shared-02945b27.js";import{N as i}from"./shared-39e3ae67.js";import{T as n,S as a,a as o}from"./shared-e68b9c83.js";import{c as l}from"./shared-4e709717.js";import"./shared-8b20bc23.js";import"./shared-ff79f3f9.js";import"./shared-5535f38f.js";import"./shared-6d45a07b.js";import"./shared-07134f93.js";import"./shared-b710881a.js";import"./shared-7f0a9790.js";import"./shared-7684cb05.js";import"./shared-756034e4.js";let d,c,m,h,f,u=e=>e;const p=t(n(a(o(i,"gift-card-codes-form"))));class g extends p{constructor(){super(...arguments),this.templates={}}static get scopedElements(){return{"vaadin-integer-field":customElements.get("vaadin-integer-field"),"vaadin-button":customElements.get("vaadin-button"),"iron-icon":customElements.get("iron-icon"),"foxy-internal-sandbox":customElements.get("foxy-internal-sandbox"),"foxy-spinner":customElements.get("foxy-spinner"),"foxy-i18n":customElements.get("foxy-i18n"),"x-editable-list":s,"x-group":r}}static get v8n(){return[({gift_card_codes:e})=>e&&e.length>0||"gift_card_codes_required",({current_balance:e})=>!e||e>=0||"current_balance_negative"]}render(){var t,s;const{hiddenSelector:r,lang:i,ns:n}=this,a=this.in("busy"),o=this.in("fail"),c=this.in({idle:"snapshot"}),m=this.in({idle:"template"}),h="transition-opacity duration-500",f="opacity-0 pointer-events-none";return e(d||(d=u` <div class="relative"> <div class="${0}"> ${0} ${0} ${0} </div> <div class="${0}"> <div class="mx-auto flex mb-m w-l h-l rounded-t-l rounded-b-l bg-success"> <iron-icon icon="icons:done-all" class="m-auto text-success-contrast"></iron-icon> </div> <foxy-i18n class="block" lang="${0}" key="import_codes_done" ns="${0}"></foxy-i18n> </div> <div class="${0}"> <foxy-spinner layout="vertical" class="m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l" state="${0}" lang="${0}" ns="${0} ${0}"> </foxy-spinner> </div> </div> `),l({"relative space-y-m":!0,[h]:!0,[f]:c}),r.matches("codes",!0)?"":this.__renderCodes(),r.matches("current-balance",!0)?"":this.__renderCurrentBalance(),r.matches("import",!0)?"":this.__renderImport(),l({"absolute inset-0 flex flex-col items-center justify-center":!0,"text-center text-m text-secondary leading-m":!0,[h]:!0,[f]:!c}),i,n,l({"absolute inset-0 flex":!0,[h]:!0,[f]:!a&&!o}),o?"error":m?"empty":"busy",i,n,null!==(s=null===(t=customElements.get("foxy-spinner"))||void 0===t?void 0:t.defaultNS)&&void 0!==s?s:"")}__getErrorMessage(e){const t=this.errors.find((t=>t.startsWith(e)));return t?this.t(t.replace(e,"v8n")):""}__getValidator(e){return()=>!this.errors.some((t=>t.startsWith(e)))}__renderCodes(){var t;const s=null!==(t=this.form.gift_card_codes)&&void 0!==t?t:[],r=s.length>16?s.slice(-16):s,i=s.length>16?s.slice(0,-16):[],n=r.map((t=>{let s;try{const e=new URL(this.parent);e.searchParams.set("code",t),s=e.toString()}catch(e){s=this.parent}return{value:t,label:e(c||(c=u` <foxy-internal-gift-card-codes-form-list-item group="${0}" href="${0}" lang="${0}" ns="${0}"> </foxy-internal-gift-card-codes-form-list-item> `),this.group,s,this.lang,this.ns)}}));return e(m||(m=u` <div> ${0} <x-group class="mb-xs" frame> <foxy-i18n slot="header" lang="${0}" key="code_plural" ns="${0}"></foxy-i18n> <x-editable-list lang="${0}" ns="${0}" ?disabled="${0}" ?readonly="${0}" .items="${0}" @change="${0}" @paste="${0}"> <div class="ml-m py-s border-b border-contrast-10 font-lumo" ?hidden="${0}"> <foxy-i18n options="${0}" class="block text-body text-m mb-xs" lang="${0}" key="hidden_codes_header" ns="${0}"> </foxy-i18n> <foxy-i18n class="block text-xs text-tertiary" lang="${0}" key="hidden_codes_explainer" ns="${0}"> </foxy-i18n> </div> </x-editable-list> </x-group> <foxy-i18n class="block text-xs text-tertiary leading-s" lang="${0}" key="code_import_hint" ns="${0}"> </foxy-i18n> ${0} </div> `),this.renderTemplateOrSlot("codes:before"),this.lang,this.ns,this.lang,this.ns,!this.in("idle")||this.disabledSelector.matches("codes",!0),this.readonlySelector.matches("codes",!0),n,(e=>{const t=e.currentTarget,s=new Set([...i,...t.items.map((e=>e.value))]);this.edit({gift_card_codes:[...s]})}),(e=>{var t,r;e.preventDefault();const i=(null!==(r=null===(t=e.clipboardData)||void 0===t?void 0:t.getData("text"))&&void 0!==r?r:"").split(" ").map((e=>e.trim())).filter((e=>e.length>0));this.edit({gift_card_codes:Array.from(new Set([...s,...i]))})}),0===i.length,JSON.stringify({count:i.length}),this.lang,this.ns,this.lang,this.ns,this.lang,this.ns,this.renderTemplateOrSlot("codes:after"))}__renderCurrentBalance(){var t;const s=this.in({idle:"template"});return e(h||(h=u` <div> ${0} <vaadin-integer-field error-message="${0}" label="${0}" class="w-full" min="0" ?disabled="${0}" ?readonly="${0}" prevent-invalid-input has-controls .checkValidity="${0}" .value="${0}" @change="${0}"> </vaadin-integer-field> ${0} </div> `),this.renderTemplateOrSlot("current-balance:before"),this.__getErrorMessage("current_balance"),this.t("balance"),!s||this.disabledSelector.matches("current-balance",!0),this.readonlySelector.matches("current-balance",!0),this.__getValidator("current_balance"),s?null!==(t=this.form.current_balance)&&void 0!==t?t:0:"",(e=>{const t=e.currentTarget;this.edit({current_balance:parseInt(t.value)})}),this.renderTemplateOrSlot("current-balance:after"))}__renderImport(){const t=this.in({idle:{template:{dirty:"valid"}}}),s=this.in({idle:{snapshot:{dirty:"valid"}}}),r=t||s;return e(f||(f=u` <div> ${0} <vaadin-button class="w-full mb-xs" theme="primary success" ?disabled="${0}" @click="${0}"> <foxy-i18n ns="${0}" key="import" lang="${0}"></foxy-i18n> </vaadin-button> ${0} </div> `),this.renderTemplateOrSlot("import:before"),!r||!this.in("idle")||this.disabledSelector.matches("import",!0),this.submit,this.ns,this.lang,this.renderTemplateOrSlot("import:after"))}}let x,b,y=e=>e;const v=o(n(i));customElements.define("foxy-gift-card-codes-form",g),customElements.define("foxy-internal-gift-card-codes-form-list-item",class extends v{render(){var t,s;let r;try{r=null!==(t=new URL(this.href).searchParams.get("code"))&&void 0!==t?t:""}catch(t){return e(x||(x=y``))}let i,n="text-tertiary bg-contrast-5",a="text-body";return this.in("fail")?i="loading_error":this.in("busy")?i="loading_busy":0===(null===(s=this.data)||void 0===s?void 0:s.returned_items)?(n="text-success bg-success-10",i="unique"):(n="text-error bg-error-10",i="duplicate",a="text-error"),e(b||(b=y` <div class="flex justify-between items-center font-lumo leading-m"> <div class="text-m ${0}">${0}</div> <foxy-i18n class="text-xs font-medium px-xs rounded ${0}" lang="${0}" key="${0}" ns="${0}"> </foxy-i18n> </div> `),a,r,n,this.lang,i,this.ns)}});export{g as GiftCardCodesForm};
+import"./shared-65dfd512.js";import"./shared-a040d79d.js";import"./shared-5a54a9bc.js";import"./shared-60126eee.js";import"./shared-46ee137f.js";import"./shared-9221e6b2.js";import"./foxy-spinner.js";import"./shared-11708514.js";import{h as e}from"./shared-63eaded9.js";import{C as t}from"./shared-df730f90.js";import{E as s}from"./shared-09069d7c.js";import{G as r}from"./shared-02945b27.js";import{N as i}from"./shared-39e3ae67.js";import{T as a,S as n,a as o}from"./shared-e68b9c83.js";import{c as d}from"./shared-4e709717.js";import"./shared-8b20bc23.js";import"./shared-ff79f3f9.js";import"./shared-5535f38f.js";import"./shared-6d45a07b.js";import"./shared-07134f93.js";import"./shared-b710881a.js";import"./shared-7f0a9790.js";import"./shared-7684cb05.js";import"./shared-756034e4.js";let l,c,m,h,f,u=e=>e;const p=t(a(n(o(i,"gift-card-codes-form"))));class g extends p{constructor(){super(...arguments),this.templates={}}static get scopedElements(){return{"vaadin-integer-field":customElements.get("vaadin-integer-field"),"vaadin-button":customElements.get("vaadin-button"),"iron-icon":customElements.get("iron-icon"),"foxy-internal-sandbox":customElements.get("foxy-internal-sandbox"),"foxy-spinner":customElements.get("foxy-spinner"),"foxy-i18n":customElements.get("foxy-i18n"),"x-editable-list":s,"x-group":r}}static get v8n(){return[({gift_card_codes:e})=>e&&e.length>0||"gift_card_codes_required",({current_balance:e})=>!e||e>=0||"current_balance_negative"]}render(){var t,s;const{hiddenSelector:r,lang:i,ns:a}=this,n=this.in("busy"),o=this.in("fail"),c=this.in({idle:"snapshot"}),m=this.in({idle:"template"}),h="transition-opacity duration-500",f="opacity-0 pointer-events-none";return e(l||(l=u` <div class="relative"> <div class="${0}"> ${0} ${0} ${0} </div> <div class="${0}"> <div class="mx-auto flex mb-m w-l h-l rounded-t-l rounded-b-l bg-success"> <iron-icon icon="icons:done-all" class="m-auto text-success-contrast"></iron-icon> </div> <foxy-i18n class="block" lang="${0}" key="import_codes_done" ns="${0}"></foxy-i18n> </div> <div data-testid="spinner" class="${0}"> <foxy-spinner layout="vertical" class="m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l" state="${0}" lang="${0}" ns="${0} ${0}"> </foxy-spinner> </div> </div> `),d({"relative space-y-m":!0,[h]:!0,[f]:c}),r.matches("codes",!0)?"":this.__renderCodes(),r.matches("current-balance",!0)?"":this.__renderCurrentBalance(),r.matches("import",!0)?"":this.__renderImport(),d({"absolute inset-0 flex flex-col items-center justify-center":!0,"text-center text-m text-secondary leading-m":!0,[h]:!0,[f]:!c}),i,a,d({"absolute inset-0 flex":!0,[h]:!0,[f]:!n&&!o}),o?"error":m?"empty":"busy",i,a,null!==(s=null===(t=customElements.get("foxy-spinner"))||void 0===t?void 0:t.defaultNS)&&void 0!==s?s:"")}__getErrorMessage(e){const t=this.errors.find((t=>t.startsWith(e)));return t?this.t(t.replace(e,"v8n")):""}__getValidator(e){return()=>!this.errors.some((t=>t.startsWith(e)))}__renderCodes(){var t;const s=null!==(t=this.form.gift_card_codes)&&void 0!==t?t:[],r=s.length>16?s.slice(-16):s,i=s.length>16?s.slice(0,-16):[],a=r.map((t=>{let s;try{const e=new URL(this.parent);e.searchParams.set("code",t),s=e.toString()}catch(e){s=this.parent}return{value:t,label:e(c||(c=u` <foxy-internal-gift-card-codes-form-list-item group="${0}" href="${0}" lang="${0}" ns="${0}"> </foxy-internal-gift-card-codes-form-list-item> `),this.group,s,this.lang,this.ns)}}));return e(m||(m=u` <div data-testid="codes"> ${0} <x-group class="mb-xs" frame> <foxy-i18n slot="header" lang="${0}" key="code_plural" ns="${0}"></foxy-i18n> <x-editable-list data-testid="codes:list" lang="${0}" ns="${0}" ?disabled="${0}" ?readonly="${0}" .items="${0}" @change="${0}" @paste="${0}"> <div class="ml-m py-s border-b border-contrast-10 font-lumo" ?hidden="${0}"> <foxy-i18n options="${0}" class="block text-body text-m mb-xs" lang="${0}" key="hidden_codes_header" ns="${0}"> </foxy-i18n> <foxy-i18n class="block text-xs text-tertiary" lang="${0}" key="hidden_codes_explainer" ns="${0}"> </foxy-i18n> </div> </x-editable-list> </x-group> <foxy-i18n class="block text-xs text-tertiary leading-s" lang="${0}" key="code_import_hint" ns="${0}"> </foxy-i18n> ${0} </div> `),this.renderTemplateOrSlot("codes:before"),this.lang,this.ns,this.lang,this.ns,!this.in("idle")||this.disabledSelector.matches("codes",!0),this.readonlySelector.matches("codes",!0),a,(e=>{const t=e.currentTarget,s=new Set([...i,...t.items.map((e=>e.value))]);this.edit({gift_card_codes:[...s]})}),(e=>{var t,r;e.preventDefault();const i=(null!==(r=null===(t=e.clipboardData)||void 0===t?void 0:t.getData("text"))&&void 0!==r?r:"").split(/\s/).map((e=>e.trim())).filter((e=>e.length>0));this.edit({gift_card_codes:Array.from(new Set([...s,...i]))})}),0===i.length,JSON.stringify({count:i.length}),this.lang,this.ns,this.lang,this.ns,this.lang,this.ns,this.renderTemplateOrSlot("codes:after"))}__renderCurrentBalance(){var t;const s=this.in({idle:"template"});return e(h||(h=u` <div> ${0} <vaadin-integer-field error-message="${0}" data-testid="current-balance" label="${0}" class="w-full" min="0" ?disabled="${0}" ?readonly="${0}" prevent-invalid-input has-controls .checkValidity="${0}" .value="${0}" @keydown="${0}" @change="${0}"> </vaadin-integer-field> ${0} </div> `),this.renderTemplateOrSlot("current-balance:before"),this.__getErrorMessage("current_balance"),this.t("balance"),!s||this.disabledSelector.matches("current-balance",!0),this.readonlySelector.matches("current-balance",!0),this.__getValidator("current_balance"),s?null!==(t=this.form.current_balance)&&void 0!==t?t:0:"",(e=>"Enter"===e.key&&this.submit()),(e=>{const t=e.currentTarget;this.edit({current_balance:parseInt(t.value)})}),this.renderTemplateOrSlot("current-balance:after"))}__renderImport(){const t=this.in({idle:{template:{dirty:"valid"}}}),s=this.in({idle:{snapshot:{dirty:"valid"}}}),r=t||s;return e(f||(f=u` <div> ${0} <vaadin-button data-testid="import" class="w-full mb-xs" theme="primary success" ?disabled="${0}" @click="${0}"> <foxy-i18n ns="${0}" key="import" lang="${0}"></foxy-i18n> </vaadin-button> ${0} </div> `),this.renderTemplateOrSlot("import:before"),!r||!this.in("idle")||this.disabledSelector.matches("import",!0),(()=>this.submit()),this.ns,this.lang,this.renderTemplateOrSlot("import:after"))}}let b,x,y=e=>e;const v=o(a(i));customElements.define("foxy-gift-card-codes-form",g),customElements.define("foxy-internal-gift-card-codes-form-list-item",class extends v{render(){var t,s;let r;try{r=null!==(t=new URL(this.href).searchParams.get("code"))&&void 0!==t?t:""}catch(t){return e(b||(b=y``))}let i,a="text-tertiary bg-contrast-5",n="text-body";return this.in("fail")?i="loading_error":this.in("busy")?i="loading_busy":0===(null===(s=this.data)||void 0===s?void 0:s.returned_items)?(a="text-success bg-success-10",i="unique"):(a="text-error bg-error-10",i="duplicate",n="text-error"),e(x||(x=y` <div class="flex justify-between items-center font-lumo leading-m"> <div class="text-m ${0}">${0}</div> <foxy-i18n class="text-xs font-medium px-xs rounded ${0}" lang="${0}" key="${0}" ns="${0}"> </foxy-i18n> </div> `),n,r,a,this.lang,i,this.ns)}});export{g as GiftCardCodesForm};

package/dist/elements/public/CouponCodesForm/CouponCodesForm.js

@@ -78,6 +78,7 @@ export class CouponCodesForm extends Base {
         </div>
 
         <div
+          data-testid="spinner"
           class=${classMap({
             'absolute inset-0 flex': true,
             [transition]: true,
@@ -126,13 +127,14 @@ export class CouponCodesForm extends Base {
             };
         });
         return html `
-      <div>
+      <div data-testid="codes">
         ${this.renderTemplateOrSlot('codes:before')}
 
         <x-group class="mb-xs" frame>
           <foxy-i18n slot="header" lang=${this.lang} key="code_plural" ns=${this.ns}></foxy-i18n>
 
           <x-editable-list
+            data-testid="codes:list"
             lang=${this.lang}
             ns=${this.ns}
             ?disabled=${!this.in('idle') || this.disabledSelector.matches('codes', true)}
@@ -148,7 +150,7 @@ export class CouponCodesForm extends Base {
             evt.preventDefault();
             const text = (_b = (_a = evt.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '';
             const pastedCodes = text
-                .split(' ')
+                .split(/\s/)
                 .map(code => code.trim())
                 .filter(code => code.length > 0);
             this.edit({ coupon_codes: Array.from(new Set([...codes, ...pastedCodes])) });
@@ -199,10 +201,11 @@ export class CouponCodesForm extends Base {
         ${this.renderTemplateOrSlot('import:before')}
 
         <vaadin-button
+          data-testid="import"
           class="w-full mb-xs"
           theme="primary success"
           ?disabled=${!isValid || !this.in('idle') || this.disabledSelector.matches('import', true)}
-          @click=${this.submit}
+          @click=${() => this.submit()}
         >
           <foxy-i18n ns=${this.ns} key="import" lang=${this.lang}></foxy-i18n>
         </vaadin-button>

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

@@ -1 +1 @@
-{"version":3,"file":"CouponCodesForm.js","sourceRoot":"","sources":["../../../../src/elements/public/CouponCodesForm/CouponCodesForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { EditableList } from '../../private/EditableList/EditableList';\nimport { Group } from '../../private/Group/Group';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { NucleonV8N } from '../NucleonElement/types';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'coupon-codes-form';\nconst Base = ConfigurableMixin(\n  ThemeableMixin(ScopedElementsMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/**\n * Form element for importing coupon codes (`fx:coupon_codes`).\n *\n * @slot codes:before\n * @slot codes:after\n *\n * @slot import:before\n * @slot import:after\n *\n * @element foxy-coupon-codes-form\n * @since 1.15.0\n */\nexport class CouponCodesForm extends Base<Data> {\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'vaadin-button': customElements.get('vaadin-button'),\n      'iron-icon': customElements.get('iron-icon'),\n\n      'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n      'foxy-i18n': customElements.get('foxy-i18n'),\n\n      'x-editable-list': EditableList,\n      'x-group': Group,\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [({ coupon_codes: v }) => (v && v.length > 0) || 'coupon_codes_required'];\n  }\n\n  templates: Templates = {};\n\n  render(): TemplateResult {\n    const { hiddenSelector, lang, ns } = this;\n\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n    const isSnapshot = this.in({ idle: 'snapshot' });\n    const isTemplate = this.in({ idle: 'template' });\n\n    const transition = 'transition-opacity duration-500';\n    const hidden = 'opacity-0 pointer-events-none';\n\n    return html`\n      <div class=\"relative\">\n        <div\n          class=${classMap({\n            'relative space-y-m': true,\n            [transition]: true,\n            [hidden]: isSnapshot,\n          })}\n        >\n          ${hiddenSelector.matches('codes', true) ? '' : this.__renderCodes()}\n          ${hiddenSelector.matches('import', true) ? '' : this.__renderImport()}\n        </div>\n\n        <div\n          class=${classMap({\n            'absolute inset-0 flex flex-col items-center justify-center': true,\n            'text-center text-m text-secondary leading-m': true,\n            [transition]: true,\n            [hidden]: !isSnapshot,\n          })}\n        >\n          <div class=\"mx-auto flex mb-m w-l h-l rounded-t-l rounded-b-l bg-success\">\n            <iron-icon icon=\"icons:done-all\" class=\"m-auto text-success-contrast\"></iron-icon>\n          </div>\n\n          <foxy-i18n class=\"block\" lang=${lang} key=\"import_codes_done\" ns=${ns}></foxy-i18n>\n        </div>\n\n        <div\n          class=${classMap({\n            'absolute inset-0 flex': true,\n            [transition]: true,\n            [hidden]: !isBusy && !isFail,\n          })}\n        >\n          <foxy-spinner\n            layout=\"vertical\"\n            class=\"m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l\"\n            state=${isFail ? 'error' : isTemplate ? 'empty' : 'busy'}\n            lang=${lang}\n            ns=\"${ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  private __renderCodes() {\n    const maxVisible = 16;\n    const codes = this.form.coupon_codes ?? [];\n\n    const visibleCodes = codes.length > maxVisible ? codes.slice(-maxVisible) : codes;\n    const hiddenCodes = codes.length > maxVisible ? codes.slice(0, -maxVisible) : [];\n\n    const items = visibleCodes.map(code => {\n      let href: string;\n\n      try {\n        const url = new URL(this.parent);\n        url.searchParams.set('code', code);\n        href = url.toString();\n      } catch {\n        href = this.parent;\n      }\n\n      return {\n        value: code,\n        label: html`\n          <foxy-internal-coupon-codes-form-list-item\n            group=${this.group}\n            href=${href}\n            lang=${this.lang}\n            ns=${this.ns}\n          >\n          </foxy-internal-coupon-codes-form-list-item>\n        `,\n      };\n    });\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('codes:before')}\n\n        <x-group class=\"mb-xs\" frame>\n          <foxy-i18n slot=\"header\" lang=${this.lang} key=\"code_plural\" ns=${this.ns}></foxy-i18n>\n\n          <x-editable-list\n            lang=${this.lang}\n            ns=${this.ns}\n            ?disabled=${!this.in('idle') || this.disabledSelector.matches('codes', true)}\n            ?readonly=${this.readonlySelector.matches('codes', true)}\n            .items=${items}\n            @change=${(evt: CustomEvent) => {\n              const list = evt.currentTarget as EditableList;\n              const newCodes = new Set([...hiddenCodes, ...list.items.map(item => item.value)]);\n              this.edit({ coupon_codes: [...newCodes] });\n            }}\n            @paste=${(evt: ClipboardEvent) => {\n              evt.preventDefault();\n\n              const text = evt.clipboardData?.getData('text') ?? '';\n              const pastedCodes = text\n                .split(' ')\n                .map(code => code.trim())\n                .filter(code => code.length > 0);\n\n              this.edit({ coupon_codes: Array.from(new Set([...codes, ...pastedCodes])) });\n            }}\n          >\n            <div\n              class=\"ml-m py-s border-b border-contrast-10 font-lumo\"\n              ?hidden=${hiddenCodes.length === 0}\n            >\n              <foxy-i18n\n                options=${JSON.stringify({ count: hiddenCodes.length })}\n                class=\"block text-body text-m mb-xs\"\n                lang=${this.lang}\n                key=\"hidden_codes_header\"\n                ns=${this.ns}\n              >\n              </foxy-i18n>\n\n              <foxy-i18n\n                class=\"block text-xs text-tertiary\"\n                lang=${this.lang}\n                key=\"hidden_codes_explainer\"\n                ns=${this.ns}\n              >\n              </foxy-i18n>\n            </div>\n          </x-editable-list>\n        </x-group>\n\n        <foxy-i18n\n          class=\"block text-xs text-tertiary leading-s\"\n          lang=${this.lang}\n          key=\"code_import_hint\"\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n\n        ${this.renderTemplateOrSlot('codes:after')}\n      </div>\n    `;\n  }\n\n  private __renderImport() {\n    const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n    const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n    const isValid = isTemplateValid || isSnapshotValid;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('import:before')}\n\n        <vaadin-button\n          class=\"w-full mb-xs\"\n          theme=\"primary success\"\n          ?disabled=${!isValid || !this.in('idle') || this.disabledSelector.matches('import', true)}\n          @click=${this.submit}\n        >\n          <foxy-i18n ns=${this.ns} key=\"import\" lang=${this.lang}></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('import:after')}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"CouponCodesForm.js","sourceRoot":"","sources":["../../../../src/elements/public/CouponCodesForm/CouponCodesForm.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAClF,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,YAAY,EAAE,mDAAgD;AACvE,OAAO,EAAE,KAAK,EAAE,qCAAkC;AAClD,OAAO,EAAE,cAAc,EAAE,4CAAyC;AAElE,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD,MAAM,EAAE,GAAG,mBAAmB,CAAC;AAC/B,MAAM,IAAI,GAAG,iBAAiB,CAC5B,cAAc,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,CAAC,CAC3E,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,eAAgB,SAAQ,IAAU;IAA/C;;QAmBE,cAAS,GAAc,EAAE,CAAC;IAyL5B,CAAC;IA3MC,MAAM,KAAK,cAAc;QACvB,OAAO;YACL,eAAe,EAAE,cAAc,CAAC,GAAG,CAAC,eAAe,CAAC;YACpD,WAAW,EAAE,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC;YAE5C,uBAAuB,EAAE,cAAc,CAAC,GAAG,CAAC,uBAAuB,CAAC;YACpE,cAAc,EAAE,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC;YAClD,WAAW,EAAE,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC;YAE5C,iBAAiB,EAAE,YAAY;YAC/B,SAAS,EAAE,KAAK;SACjB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,GAAG;QACZ,OAAO,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,uBAAuB,CAAC,CAAC;IACnF,CAAC;IAID,MAAM;;QACJ,MAAM,EAAE,cAAc,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;QAE1C,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;QAC/B,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;QAC/B,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QACjD,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QAEjD,MAAM,UAAU,GAAG,iCAAiC,CAAC;QACrD,MAAM,MAAM,GAAG,+BAA+B,CAAC;QAE/C,OAAO,IAAI,CAAA;;;kBAGG,QAAQ,CAAC;YACf,oBAAoB,EAAE,IAAI;YAC1B,CAAC,UAAU,CAAC,EAAE,IAAI;YAClB,CAAC,MAAM,CAAC,EAAE,UAAU;SACrB,CAAC;;YAEA,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE;YACjE,cAAc,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE;;;;kBAI7D,QAAQ,CAAC;YACf,4DAA4D,EAAE,IAAI;YAClE,6CAA6C,EAAE,IAAI;YACnD,CAAC,UAAU,CAAC,EAAE,IAAI;YAClB,CAAC,MAAM,CAAC,EAAE,CAAC,UAAU;SACtB,CAAC;;;;;;0CAM8B,IAAI,+BAA+B,EAAE;;;;;kBAK7D,QAAQ,CAAC;YACf,uBAAuB,EAAE,IAAI;YAC7B,CAAC,UAAU,CAAC,EAAE,IAAI;YAClB,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,MAAM;SAC7B,CAAC;;;;;oBAKQ,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;mBACjD,IAAI;kBACL,EAAE,IAAI,YAAA,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,0CAAE,SAAS,mCAAI,EAAE;;;;;KAKtE,CAAC;IACJ,CAAC;IAEO,aAAa;;QACnB,MAAM,UAAU,GAAG,EAAE,CAAC;QACtB,MAAM,KAAK,SAAG,IAAI,CAAC,IAAI,CAAC,YAAY,mCAAI,EAAE,CAAC;QAE3C,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QAClF,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAEjF,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACpC,IAAI,IAAY,CAAC;YAEjB,IAAI;gBACF,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBACjC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;gBACnC,IAAI,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;aACvB;YAAC,WAAM;gBACN,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC;aACpB;YAED,OAAO;gBACL,KAAK,EAAE,IAAI;gBACX,KAAK,EAAE,IAAI,CAAA;;oBAEC,IAAI,CAAC,KAAK;mBACX,IAAI;mBACJ,IAAI,CAAC,IAAI;iBACX,IAAI,CAAC,EAAE;;;SAGf;aACF,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC;;;0CAGT,IAAI,CAAC,IAAI,yBAAyB,IAAI,CAAC,EAAE;;;;mBAIhE,IAAI,CAAC,IAAI;iBACX,IAAI,CAAC,EAAE;wBACA,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC;wBAChE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC;qBAC/C,KAAK;sBACJ,CAAC,GAAgB,EAAE,EAAE;YAC7B,MAAM,IAAI,GAAG,GAAG,CAAC,aAA6B,CAAC;YAC/C,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAClF,IAAI,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;QAC7C,CAAC;qBACQ,CAAC,GAAmB,EAAE,EAAE;;YAC/B,GAAG,CAAC,cAAc,EAAE,CAAC;YAErB,MAAM,IAAI,eAAG,GAAG,CAAC,aAAa,0CAAE,OAAO,CAAC,MAAM,oCAAK,EAAE,CAAC;YACtD,MAAM,WAAW,GAAG,IAAI;iBACrB,KAAK,CAAC,IAAI,CAAC;iBACX,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;iBACxB,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAEnC,IAAI,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,KAAK,EAAE,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAC/E,CAAC;;;;wBAIW,WAAW,CAAC,MAAM,KAAK,CAAC;;;0BAGtB,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;;uBAEhD,IAAI,CAAC,IAAI;;qBAEX,IAAI,CAAC,EAAE;;;;;;uBAML,IAAI,CAAC,IAAI;;qBAEX,IAAI,CAAC,EAAE;;;;;;;;;iBASX,IAAI,CAAC,IAAI;;eAEX,IAAI,CAAC,EAAE;;;;UAIZ,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;;KAE7C,CAAC;IACJ,CAAC;IAEO,cAAc;QACpB,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;QAC5E,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;QAC5E,MAAM,OAAO,GAAG,eAAe,IAAI,eAAe,CAAC;QAEnD,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,eAAe,CAAC;;;;;;sBAM9B,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC;mBAChF,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;;0BAEZ,IAAI,CAAC,EAAE,sBAAsB,IAAI,CAAC,IAAI;;;UAGtD,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC;;KAE9C,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { Data, Templates } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { EditableList } from '../../private/EditableList/EditableList';\nimport { Group } from '../../private/Group/Group';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { NucleonV8N } from '../NucleonElement/types';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'coupon-codes-form';\nconst Base = ConfigurableMixin(\n  ThemeableMixin(ScopedElementsMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/**\n * Form element for importing coupon codes (`fx:coupon_codes`).\n *\n * @slot codes:before\n * @slot codes:after\n *\n * @slot import:before\n * @slot import:after\n *\n * @element foxy-coupon-codes-form\n * @since 1.15.0\n */\nexport class CouponCodesForm extends Base<Data> {\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'vaadin-button': customElements.get('vaadin-button'),\n      'iron-icon': customElements.get('iron-icon'),\n\n      'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n      'foxy-i18n': customElements.get('foxy-i18n'),\n\n      'x-editable-list': EditableList,\n      'x-group': Group,\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [({ coupon_codes: v }) => (v && v.length > 0) || 'coupon_codes_required'];\n  }\n\n  templates: Templates = {};\n\n  render(): TemplateResult {\n    const { hiddenSelector, lang, ns } = this;\n\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n    const isSnapshot = this.in({ idle: 'snapshot' });\n    const isTemplate = this.in({ idle: 'template' });\n\n    const transition = 'transition-opacity duration-500';\n    const hidden = 'opacity-0 pointer-events-none';\n\n    return html`\n      <div class=\"relative\">\n        <div\n          class=${classMap({\n            'relative space-y-m': true,\n            [transition]: true,\n            [hidden]: isSnapshot,\n          })}\n        >\n          ${hiddenSelector.matches('codes', true) ? '' : this.__renderCodes()}\n          ${hiddenSelector.matches('import', true) ? '' : this.__renderImport()}\n        </div>\n\n        <div\n          class=${classMap({\n            'absolute inset-0 flex flex-col items-center justify-center': true,\n            'text-center text-m text-secondary leading-m': true,\n            [transition]: true,\n            [hidden]: !isSnapshot,\n          })}\n        >\n          <div class=\"mx-auto flex mb-m w-l h-l rounded-t-l rounded-b-l bg-success\">\n            <iron-icon icon=\"icons:done-all\" class=\"m-auto text-success-contrast\"></iron-icon>\n          </div>\n\n          <foxy-i18n class=\"block\" lang=${lang} key=\"import_codes_done\" ns=${ns}></foxy-i18n>\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'absolute inset-0 flex': true,\n            [transition]: true,\n            [hidden]: !isBusy && !isFail,\n          })}\n        >\n          <foxy-spinner\n            layout=\"vertical\"\n            class=\"m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l\"\n            state=${isFail ? 'error' : isTemplate ? 'empty' : 'busy'}\n            lang=${lang}\n            ns=\"${ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  private __renderCodes() {\n    const maxVisible = 16;\n    const codes = this.form.coupon_codes ?? [];\n\n    const visibleCodes = codes.length > maxVisible ? codes.slice(-maxVisible) : codes;\n    const hiddenCodes = codes.length > maxVisible ? codes.slice(0, -maxVisible) : [];\n\n    const items = visibleCodes.map(code => {\n      let href: string;\n\n      try {\n        const url = new URL(this.parent);\n        url.searchParams.set('code', code);\n        href = url.toString();\n      } catch {\n        href = this.parent;\n      }\n\n      return {\n        value: code,\n        label: html`\n          <foxy-internal-coupon-codes-form-list-item\n            group=${this.group}\n            href=${href}\n            lang=${this.lang}\n            ns=${this.ns}\n          >\n          </foxy-internal-coupon-codes-form-list-item>\n        `,\n      };\n    });\n\n    return html`\n      <div data-testid=\"codes\">\n        ${this.renderTemplateOrSlot('codes:before')}\n\n        <x-group class=\"mb-xs\" frame>\n          <foxy-i18n slot=\"header\" lang=${this.lang} key=\"code_plural\" ns=${this.ns}></foxy-i18n>\n\n          <x-editable-list\n            data-testid=\"codes:list\"\n            lang=${this.lang}\n            ns=${this.ns}\n            ?disabled=${!this.in('idle') || this.disabledSelector.matches('codes', true)}\n            ?readonly=${this.readonlySelector.matches('codes', true)}\n            .items=${items}\n            @change=${(evt: CustomEvent) => {\n              const list = evt.currentTarget as EditableList;\n              const newCodes = new Set([...hiddenCodes, ...list.items.map(item => item.value)]);\n              this.edit({ coupon_codes: [...newCodes] });\n            }}\n            @paste=${(evt: ClipboardEvent) => {\n              evt.preventDefault();\n\n              const text = evt.clipboardData?.getData('text') ?? '';\n              const pastedCodes = text\n                .split(/\\s/)\n                .map(code => code.trim())\n                .filter(code => code.length > 0);\n\n              this.edit({ coupon_codes: Array.from(new Set([...codes, ...pastedCodes])) });\n            }}\n          >\n            <div\n              class=\"ml-m py-s border-b border-contrast-10 font-lumo\"\n              ?hidden=${hiddenCodes.length === 0}\n            >\n              <foxy-i18n\n                options=${JSON.stringify({ count: hiddenCodes.length })}\n                class=\"block text-body text-m mb-xs\"\n                lang=${this.lang}\n                key=\"hidden_codes_header\"\n                ns=${this.ns}\n              >\n              </foxy-i18n>\n\n              <foxy-i18n\n                class=\"block text-xs text-tertiary\"\n                lang=${this.lang}\n                key=\"hidden_codes_explainer\"\n                ns=${this.ns}\n              >\n              </foxy-i18n>\n            </div>\n          </x-editable-list>\n        </x-group>\n\n        <foxy-i18n\n          class=\"block text-xs text-tertiary leading-s\"\n          lang=${this.lang}\n          key=\"code_import_hint\"\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n\n        ${this.renderTemplateOrSlot('codes:after')}\n      </div>\n    `;\n  }\n\n  private __renderImport() {\n    const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n    const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n    const isValid = isTemplateValid || isSnapshotValid;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('import:before')}\n\n        <vaadin-button\n          data-testid=\"import\"\n          class=\"w-full mb-xs\"\n          theme=\"primary success\"\n          ?disabled=${!isValid || !this.in('idle') || this.disabledSelector.matches('import', true)}\n          @click=${() => this.submit()}\n        >\n          <foxy-i18n ns=${this.ns} key=\"import\" lang=${this.lang}></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('import:after')}\n      </div>\n    `;\n  }\n}\n"]}

package/dist/elements/public/GenerateCodesForm/GenerateCodesForm.js

@@ -170,14 +170,14 @@ export class GenerateCodesForm extends Base {
         var _a;
         const isTemplate = this.in({ idle: 'template' });
         return html `
-      <div>
+      <div class="col-span-2">
         ${this.renderTemplateOrSlot('current-balance:before')}
 
         <vaadin-integer-field
           error-message=${this.__getErrorMessage('current_balance')}
           data-testid="current-balance"
           label=${this.t('balance')}
-          class="w-full col-span-2"
+          class="w-full"
           min="0"
           ?disabled=${!isTemplate || this.disabledSelector.matches('current-balance', true)}
           ?readonly=${this.readonlySelector.matches('current-balance', true)}
@@ -200,14 +200,14 @@ export class GenerateCodesForm extends Base {
     __renderPrefix() {
         const isTemplate = this.in({ idle: 'template' });
         return html `
-      <div>
+      <div class="col-span-2">
         ${this.renderTemplateOrSlot('prefix:before')}
 
         <vaadin-text-field
           helper-text=${this.t('leave_empty_for_random_codes')}
           data-testid="prefix"
           label=${this.t('prefix')}
-          class="col-span-2"
+          class="w-full"
           min="1"
           ?disabled=${!isTemplate || this.disabledSelector.matches('prefix', true)}
           ?readonly=${this.readonlySelector.matches('prefix', true)}
@@ -228,12 +228,12 @@ export class GenerateCodesForm extends Base {
     __renderGenerate() {
         const isValidTemplate = this.in({ idle: { template: { dirty: 'valid' } } });
         return html `
-      <div>
+      <div class="col-span-2 mt-m">
         ${this.renderTemplateOrSlot('generate:before')}
 
         <vaadin-button
           data-testid="generate"
-          class="col-span-2"
+          class="w-full"
           theme="success primary"
           ?disabled=${!isValidTemplate || this.disabledSelector.matches('generate', true)}
           @click=${() => this.submit()}

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

@@ -1 +1 @@
-{"version":3,"file":"GenerateCodesForm.js","sourceRoot":"","sources":["../../../../src/elements/public/GenerateCodesForm/GenerateCodesForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates } from './types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { IntegerFieldElement } from '@vaadin/vaadin-text-field/vaadin-integer-field';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { NucleonV8N } from '../NucleonElement/types';\nimport { TextFieldElement } from '@vaadin/vaadin-text-field/vaadin-text-field';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'generate-codes-form';\nconst Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement, NS)));\n\n/**\n * Form element for generating codes for coupons or gift cards (`fx:generate_codes`).\n *\n * @slot length:before\n * @slot length:after\n *\n * @slot number-of-codes:before\n * @slot number-of-codes:after\n *\n * @slot prefix:before\n * @slot prefix:after\n *\n * @slot current-balance:before\n * @slot current-balance:after\n *\n * @slot generate:before\n * @slot generate:after\n *\n * @element foxy-generate-codes-form\n * @since 1.15.0\n */\nexport class GenerateCodesForm extends Base<Data> {\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ number_of_codes: v }) => (v && v > 0) || 'number_of_codes_required',\n      ({ current_balance: v }) => !v || v >= 0 || 'current_balance_negative',\n      ({ length: v }) => (v && v > 0) || 'length_required',\n    ];\n  }\n\n  templates: Templates = {};\n\n  render(): TemplateResult {\n    const { hiddenSelector, lang, ns } = this;\n\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n    const isSnapshot = this.in({ idle: 'snapshot' });\n    const isTemplate = this.in({ idle: 'template' });\n\n    const transition = 'transition-opacity duration-500';\n    const hidden = 'opacity-0 pointer-events-none';\n\n    return html`\n      <div aria-busy=${isBusy} aria-live=\"polite\" class=\"relative\">\n        <div\n          class=${classMap({\n            'grid grid-cols-2 gap-m': true,\n            [transition]: true,\n            [hidden]: isSnapshot,\n          })}\n        >\n          ${hiddenSelector.matches('length', true) ? '' : this.__renderLength()}\n          ${hiddenSelector.matches('number-of-codes', true) ? '' : this.__renderNumberOfCodes()}\n          ${hiddenSelector.matches('current-balance', true) ? '' : this.__renderCurrentBalance()}\n          ${hiddenSelector.matches('prefix', true) ? '' : this.__renderPrefix()}\n          ${hiddenSelector.matches('generate', true) ? '' : this.__renderGenerate()}\n        </div>\n\n        <div\n          class=${classMap({\n            'absolute inset-0 flex flex-col items-center justify-center': true,\n            'text-center text-m text-secondary leading-m': true,\n            [transition]: true,\n            [hidden]: !isSnapshot,\n          })}\n        >\n          <div class=\"mx-auto flex mb-m w-l h-l rounded-t-l rounded-b-l bg-success\">\n            <iron-icon icon=\"icons:done-all\" class=\"m-auto text-success-contrast\"></iron-icon>\n          </div>\n\n          <foxy-i18n class=\"block\" lang=${lang} key=\"generate_codes_done\" ns=${ns}></foxy-i18n>\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'absolute inset-0 flex': true,\n            [transition]: true,\n            [hidden]: !isBusy && !isFail,\n          })}\n        >\n          <foxy-spinner\n            layout=\"vertical\"\n            class=\"m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l\"\n            state=${isFail ? 'error' : isTemplate ? 'empty' : 'busy'}\n            lang=${lang}\n            ns=\"${ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  private __getErrorMessage(prefix: string) {\n    const error = this.errors.find(err => err.startsWith(prefix));\n    return error ? this.t(error.replace(prefix, 'v8n')) : '';\n  }\n\n  private __getValidator(prefix: string) {\n    return () => !this.errors.some(err => err.startsWith(prefix));\n  }\n\n  private __renderLength() {\n    const isTemplate = this.in({ idle: 'template' });\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('length:before')}\n\n        <vaadin-integer-field\n          error-message=${this.__getErrorMessage('length')}\n          data-testid=\"length\"\n          label=${this.t('length')}\n          class=\"w-full\"\n          min=\"1\"\n          ?disabled=${!isTemplate || this.disabledSelector.matches('length', true)}\n          ?readonly=${this.readonlySelector.matches('length', true)}\n          prevent-invalid-input\n          has-controls\n          .checkValidity=${this.__getValidator('length')}\n          .value=${isTemplate ? this.form.length : ''}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n          @change=${(evt: CustomEvent) => {\n            const field = evt.currentTarget as IntegerFieldElement;\n            this.edit({ length: parseInt(field.value) });\n          }}\n        >\n        </vaadin-integer-field>\n\n        ${this.renderTemplateOrSlot('length:after')}\n      </div>\n    `;\n  }\n\n  private __renderNumberOfCodes() {\n    const isTemplate = this.in({ idle: 'template' });\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('number-of-codes:before')}\n\n        <vaadin-integer-field\n          error-message=${this.__getErrorMessage('number_of_codes')}\n          data-testid=\"number-of-codes\"\n          label=${this.t('number_of_codes')}\n          class=\"w-full\"\n          min=\"1\"\n          ?disabled=${!isTemplate || this.disabledSelector.matches('number-of-codes', true)}\n          ?readonly=${this.readonlySelector.matches('number-of-codes', true)}\n          prevent-invalid-input\n          has-controls\n          .checkValidity=${this.__getValidator('number_of_codes')}\n          .value=${isTemplate ? this.form.number_of_codes : ''}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n          @change=${(evt: CustomEvent) => {\n            const field = evt.currentTarget as IntegerFieldElement;\n            this.edit({ number_of_codes: parseInt(field.value) });\n          }}\n        >\n        </vaadin-integer-field>\n\n        ${this.renderTemplateOrSlot('number-of-codes:after')}\n      </div>\n    `;\n  }\n\n  private __renderCurrentBalance() {\n    const isTemplate = this.in({ idle: 'template' });\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('current-balance:before')}\n\n        <vaadin-integer-field\n          error-message=${this.__getErrorMessage('current_balance')}\n          data-testid=\"current-balance\"\n          label=${this.t('balance')}\n          class=\"w-full col-span-2\"\n          min=\"0\"\n          ?disabled=${!isTemplate || this.disabledSelector.matches('current-balance', true)}\n          ?readonly=${this.readonlySelector.matches('current-balance', true)}\n          prevent-invalid-input\n          has-controls\n          .checkValidity=${this.__getValidator('current_balance')}\n          .value=${isTemplate ? this.form.current_balance ?? 0 : ''}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n          @change=${(evt: CustomEvent) => {\n            const field = evt.currentTarget as IntegerFieldElement;\n            this.edit({ current_balance: parseInt(field.value) });\n          }}\n        >\n        </vaadin-integer-field>\n\n        ${this.renderTemplateOrSlot('current-balance:after')}\n      </div>\n    `;\n  }\n\n  private __renderPrefix() {\n    const isTemplate = this.in({ idle: 'template' });\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('prefix:before')}\n\n        <vaadin-text-field\n          helper-text=${this.t('leave_empty_for_random_codes')}\n          data-testid=\"prefix\"\n          label=${this.t('prefix')}\n          class=\"col-span-2\"\n          min=\"1\"\n          ?disabled=${!isTemplate || this.disabledSelector.matches('prefix', true)}\n          ?readonly=${this.readonlySelector.matches('prefix', true)}\n          clear-button-visible\n          .value=${isTemplate ? this.form.prefix : ''}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n          @change=${(evt: CustomEvent) => {\n            const field = evt.currentTarget as TextFieldElement;\n            this.edit({ prefix: field.value });\n          }}\n        >\n        </vaadin-text-field>\n\n        ${this.renderTemplateOrSlot('prefix:after')}\n      </div>\n    `;\n  }\n\n  private __renderGenerate() {\n    const isValidTemplate = this.in({ idle: { template: { dirty: 'valid' } } });\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('generate:before')}\n\n        <vaadin-button\n          data-testid=\"generate\"\n          class=\"col-span-2\"\n          theme=\"success primary\"\n          ?disabled=${!isValidTemplate || this.disabledSelector.matches('generate', true)}\n          @click=${() => this.submit()}\n        >\n          <foxy-i18n lang=${this.lang} key=\"generate\" ns=${this.ns}></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('generate:after')}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"GenerateCodesForm.js","sourceRoot":"","sources":["../../../../src/elements/public/GenerateCodesForm/GenerateCodesForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates } from './types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { IntegerFieldElement } from '@vaadin/vaadin-text-field/vaadin-integer-field';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { NucleonV8N } from '../NucleonElement/types';\nimport { TextFieldElement } from '@vaadin/vaadin-text-field/vaadin-text-field';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'generate-codes-form';\nconst Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement, NS)));\n\n/**\n * Form element for generating codes for coupons or gift cards (`fx:generate_codes`).\n *\n * @slot length:before\n * @slot length:after\n *\n * @slot number-of-codes:before\n * @slot number-of-codes:after\n *\n * @slot prefix:before\n * @slot prefix:after\n *\n * @slot current-balance:before\n * @slot current-balance:after\n *\n * @slot generate:before\n * @slot generate:after\n *\n * @element foxy-generate-codes-form\n * @since 1.15.0\n */\nexport class GenerateCodesForm extends Base<Data> {\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ number_of_codes: v }) => (v && v > 0) || 'number_of_codes_required',\n      ({ current_balance: v }) => !v || v >= 0 || 'current_balance_negative',\n      ({ length: v }) => (v && v > 0) || 'length_required',\n    ];\n  }\n\n  templates: Templates = {};\n\n  render(): TemplateResult {\n    const { hiddenSelector, lang, ns } = this;\n\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n    const isSnapshot = this.in({ idle: 'snapshot' });\n    const isTemplate = this.in({ idle: 'template' });\n\n    const transition = 'transition-opacity duration-500';\n    const hidden = 'opacity-0 pointer-events-none';\n\n    return html`\n      <div aria-busy=${isBusy} aria-live=\"polite\" class=\"relative\">\n        <div\n          class=${classMap({\n            'grid grid-cols-2 gap-m': true,\n            [transition]: true,\n            [hidden]: isSnapshot,\n          })}\n        >\n          ${hiddenSelector.matches('length', true) ? '' : this.__renderLength()}\n          ${hiddenSelector.matches('number-of-codes', true) ? '' : this.__renderNumberOfCodes()}\n          ${hiddenSelector.matches('current-balance', true) ? '' : this.__renderCurrentBalance()}\n          ${hiddenSelector.matches('prefix', true) ? '' : this.__renderPrefix()}\n          ${hiddenSelector.matches('generate', true) ? '' : this.__renderGenerate()}\n        </div>\n\n        <div\n          class=${classMap({\n            'absolute inset-0 flex flex-col items-center justify-center': true,\n            'text-center text-m text-secondary leading-m': true,\n            [transition]: true,\n            [hidden]: !isSnapshot,\n          })}\n        >\n          <div class=\"mx-auto flex mb-m w-l h-l rounded-t-l rounded-b-l bg-success\">\n            <iron-icon icon=\"icons:done-all\" class=\"m-auto text-success-contrast\"></iron-icon>\n          </div>\n\n          <foxy-i18n class=\"block\" lang=${lang} key=\"generate_codes_done\" ns=${ns}></foxy-i18n>\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'absolute inset-0 flex': true,\n            [transition]: true,\n            [hidden]: !isBusy && !isFail,\n          })}\n        >\n          <foxy-spinner\n            layout=\"vertical\"\n            class=\"m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l\"\n            state=${isFail ? 'error' : isTemplate ? 'empty' : 'busy'}\n            lang=${lang}\n            ns=\"${ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  private __getErrorMessage(prefix: string) {\n    const error = this.errors.find(err => err.startsWith(prefix));\n    return error ? this.t(error.replace(prefix, 'v8n')) : '';\n  }\n\n  private __getValidator(prefix: string) {\n    return () => !this.errors.some(err => err.startsWith(prefix));\n  }\n\n  private __renderLength() {\n    const isTemplate = this.in({ idle: 'template' });\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('length:before')}\n\n        <vaadin-integer-field\n          error-message=${this.__getErrorMessage('length')}\n          data-testid=\"length\"\n          label=${this.t('length')}\n          class=\"w-full\"\n          min=\"1\"\n          ?disabled=${!isTemplate || this.disabledSelector.matches('length', true)}\n          ?readonly=${this.readonlySelector.matches('length', true)}\n          prevent-invalid-input\n          has-controls\n          .checkValidity=${this.__getValidator('length')}\n          .value=${isTemplate ? this.form.length : ''}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n          @change=${(evt: CustomEvent) => {\n            const field = evt.currentTarget as IntegerFieldElement;\n            this.edit({ length: parseInt(field.value) });\n          }}\n        >\n        </vaadin-integer-field>\n\n        ${this.renderTemplateOrSlot('length:after')}\n      </div>\n    `;\n  }\n\n  private __renderNumberOfCodes() {\n    const isTemplate = this.in({ idle: 'template' });\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('number-of-codes:before')}\n\n        <vaadin-integer-field\n          error-message=${this.__getErrorMessage('number_of_codes')}\n          data-testid=\"number-of-codes\"\n          label=${this.t('number_of_codes')}\n          class=\"w-full\"\n          min=\"1\"\n          ?disabled=${!isTemplate || this.disabledSelector.matches('number-of-codes', true)}\n          ?readonly=${this.readonlySelector.matches('number-of-codes', true)}\n          prevent-invalid-input\n          has-controls\n          .checkValidity=${this.__getValidator('number_of_codes')}\n          .value=${isTemplate ? this.form.number_of_codes : ''}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n          @change=${(evt: CustomEvent) => {\n            const field = evt.currentTarget as IntegerFieldElement;\n            this.edit({ number_of_codes: parseInt(field.value) });\n          }}\n        >\n        </vaadin-integer-field>\n\n        ${this.renderTemplateOrSlot('number-of-codes:after')}\n      </div>\n    `;\n  }\n\n  private __renderCurrentBalance() {\n    const isTemplate = this.in({ idle: 'template' });\n\n    return html`\n      <div class=\"col-span-2\">\n        ${this.renderTemplateOrSlot('current-balance:before')}\n\n        <vaadin-integer-field\n          error-message=${this.__getErrorMessage('current_balance')}\n          data-testid=\"current-balance\"\n          label=${this.t('balance')}\n          class=\"w-full\"\n          min=\"0\"\n          ?disabled=${!isTemplate || this.disabledSelector.matches('current-balance', true)}\n          ?readonly=${this.readonlySelector.matches('current-balance', true)}\n          prevent-invalid-input\n          has-controls\n          .checkValidity=${this.__getValidator('current_balance')}\n          .value=${isTemplate ? this.form.current_balance ?? 0 : ''}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n          @change=${(evt: CustomEvent) => {\n            const field = evt.currentTarget as IntegerFieldElement;\n            this.edit({ current_balance: parseInt(field.value) });\n          }}\n        >\n        </vaadin-integer-field>\n\n        ${this.renderTemplateOrSlot('current-balance:after')}\n      </div>\n    `;\n  }\n\n  private __renderPrefix() {\n    const isTemplate = this.in({ idle: 'template' });\n\n    return html`\n      <div class=\"col-span-2\">\n        ${this.renderTemplateOrSlot('prefix:before')}\n\n        <vaadin-text-field\n          helper-text=${this.t('leave_empty_for_random_codes')}\n          data-testid=\"prefix\"\n          label=${this.t('prefix')}\n          class=\"w-full\"\n          min=\"1\"\n          ?disabled=${!isTemplate || this.disabledSelector.matches('prefix', true)}\n          ?readonly=${this.readonlySelector.matches('prefix', true)}\n          clear-button-visible\n          .value=${isTemplate ? this.form.prefix : ''}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n          @change=${(evt: CustomEvent) => {\n            const field = evt.currentTarget as TextFieldElement;\n            this.edit({ prefix: field.value });\n          }}\n        >\n        </vaadin-text-field>\n\n        ${this.renderTemplateOrSlot('prefix:after')}\n      </div>\n    `;\n  }\n\n  private __renderGenerate() {\n    const isValidTemplate = this.in({ idle: { template: { dirty: 'valid' } } });\n\n    return html`\n      <div class=\"col-span-2 mt-m\">\n        ${this.renderTemplateOrSlot('generate:before')}\n\n        <vaadin-button\n          data-testid=\"generate\"\n          class=\"w-full\"\n          theme=\"success primary\"\n          ?disabled=${!isValidTemplate || this.disabledSelector.matches('generate', true)}\n          @click=${() => this.submit()}\n        >\n          <foxy-i18n lang=${this.lang} key=\"generate\" ns=${this.ns}></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('generate:after')}\n      </div>\n    `;\n  }\n}\n"]}

package/dist/elements/public/GiftCardCodesForm/GiftCardCodesForm.js

@@ -86,6 +86,7 @@ export class GiftCardCodesForm extends Base {
         </div>
 
         <div
+          data-testid="spinner"
           class=${classMap({
             'absolute inset-0 flex': true,
             [transition]: true,
@@ -141,13 +142,14 @@ export class GiftCardCodesForm extends Base {
             };
         });
         return html `
-      <div>
+      <div data-testid="codes">
         ${this.renderTemplateOrSlot('codes:before')}
 
         <x-group class="mb-xs" frame>
           <foxy-i18n slot="header" lang=${this.lang} key="code_plural" ns=${this.ns}></foxy-i18n>
 
           <x-editable-list
+            data-testid="codes:list"
             lang=${this.lang}
             ns=${this.ns}
             ?disabled=${!this.in('idle') || this.disabledSelector.matches('codes', true)}
@@ -163,7 +165,7 @@ export class GiftCardCodesForm extends Base {
             evt.preventDefault();
             const text = (_b = (_a = evt.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '';
             const pastedCodes = text
-                .split(' ')
+                .split(/\s/)
                 .map(code => code.trim())
                 .filter(code => code.length > 0);
             this.edit({ gift_card_codes: Array.from(new Set([...codes, ...pastedCodes])) });
@@ -214,6 +216,7 @@ export class GiftCardCodesForm extends Base {
 
         <vaadin-integer-field
           error-message=${this.__getErrorMessage('current_balance')}
+          data-testid="current-balance"
           label=${this.t('balance')}
           class="w-full"
           min="0"
@@ -223,6 +226,7 @@ export class GiftCardCodesForm extends Base {
           has-controls
           .checkValidity=${this.__getValidator('current_balance')}
           .value=${isTemplate ? (_a = this.form.current_balance) !== null && _a !== void 0 ? _a : 0 : ''}
+          @keydown=${(evt) => evt.key === 'Enter' && this.submit()}
           @change=${(evt) => {
             const field = evt.currentTarget;
             this.edit({ current_balance: parseInt(field.value) });
@@ -243,10 +247,11 @@ export class GiftCardCodesForm extends Base {
         ${this.renderTemplateOrSlot('import:before')}
 
         <vaadin-button
+          data-testid="import"
           class="w-full mb-xs"
           theme="primary success"
           ?disabled=${!isValid || !this.in('idle') || this.disabledSelector.matches('import', true)}
-          @click=${this.submit}
+          @click=${() => this.submit()}
         >
           <foxy-i18n ns=${this.ns} key="import" lang=${this.lang}></foxy-i18n>
         </vaadin-button>

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

@@ -1 +1 @@
-{"version":3,"file":"GiftCardCodesForm.js","sourceRoot":"","sources":["../../../../src/elements/public/GiftCardCodesForm/GiftCardCodesForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { EditableList } from '../../private/EditableList/EditableList';\nimport { Group } from '../../private/Group/Group';\nimport { IntegerFieldElement } from '@vaadin/vaadin-text-field/vaadin-integer-field';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { NucleonV8N } from '../NucleonElement/types';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'gift-card-codes-form';\nconst Base = ConfigurableMixin(\n  ThemeableMixin(ScopedElementsMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/**\n * Form element for importing gift card codes (`fx:gift_card_codes`).\n *\n * @slot codes:before\n * @slot codes:after\n *\n * @slot current-balance:before\n * @slot current-balance:after\n *\n * @slot import:before\n * @slot import:after\n *\n * @element foxy-gift-card-codes-form\n * @since 1.15.0\n */\nexport class GiftCardCodesForm extends Base<Data> {\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'vaadin-integer-field': customElements.get('vaadin-integer-field'),\n      'vaadin-button': customElements.get('vaadin-button'),\n      'iron-icon': customElements.get('iron-icon'),\n\n      'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n      'foxy-i18n': customElements.get('foxy-i18n'),\n\n      'x-editable-list': EditableList,\n      'x-group': Group,\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ gift_card_codes: v }) => (v && v.length > 0) || 'gift_card_codes_required',\n      ({ current_balance: v }) => !v || v >= 0 || 'current_balance_negative',\n    ];\n  }\n\n  templates: Templates = {};\n\n  render(): TemplateResult {\n    const { hiddenSelector, lang, ns } = this;\n\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n    const isSnapshot = this.in({ idle: 'snapshot' });\n    const isTemplate = this.in({ idle: 'template' });\n\n    const transition = 'transition-opacity duration-500';\n    const hidden = 'opacity-0 pointer-events-none';\n\n    return html`\n      <div class=\"relative\">\n        <div\n          class=${classMap({\n            'relative space-y-m': true,\n            [transition]: true,\n            [hidden]: isSnapshot,\n          })}\n        >\n          ${hiddenSelector.matches('codes', true) ? '' : this.__renderCodes()}\n          ${hiddenSelector.matches('current-balance', true) ? '' : this.__renderCurrentBalance()}\n          ${hiddenSelector.matches('import', true) ? '' : this.__renderImport()}\n        </div>\n\n        <div\n          class=${classMap({\n            'absolute inset-0 flex flex-col items-center justify-center': true,\n            'text-center text-m text-secondary leading-m': true,\n            [transition]: true,\n            [hidden]: !isSnapshot,\n          })}\n        >\n          <div class=\"mx-auto flex mb-m w-l h-l rounded-t-l rounded-b-l bg-success\">\n            <iron-icon icon=\"icons:done-all\" class=\"m-auto text-success-contrast\"></iron-icon>\n          </div>\n\n          <foxy-i18n class=\"block\" lang=${lang} key=\"import_codes_done\" ns=${ns}></foxy-i18n>\n        </div>\n\n        <div\n          class=${classMap({\n            'absolute inset-0 flex': true,\n            [transition]: true,\n            [hidden]: !isBusy && !isFail,\n          })}\n        >\n          <foxy-spinner\n            layout=\"vertical\"\n            class=\"m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l\"\n            state=${isFail ? 'error' : isTemplate ? 'empty' : 'busy'}\n            lang=${lang}\n            ns=\"${ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  private __getErrorMessage(prefix: string) {\n    const error = this.errors.find(err => err.startsWith(prefix));\n    return error ? this.t(error.replace(prefix, 'v8n')) : '';\n  }\n\n  private __getValidator(prefix: string) {\n    return () => !this.errors.some(err => err.startsWith(prefix));\n  }\n\n  private __renderCodes() {\n    const maxVisible = 16;\n    const codes = this.form.gift_card_codes ?? [];\n\n    const visibleCodes = codes.length > maxVisible ? codes.slice(-maxVisible) : codes;\n    const hiddenCodes = codes.length > maxVisible ? codes.slice(0, -maxVisible) : [];\n\n    const items = visibleCodes.map(code => {\n      let href: string;\n\n      try {\n        const url = new URL(this.parent);\n        url.searchParams.set('code', code);\n        href = url.toString();\n      } catch {\n        href = this.parent;\n      }\n\n      return {\n        value: code,\n        label: html`\n          <foxy-internal-gift-card-codes-form-list-item\n            group=${this.group}\n            href=${href}\n            lang=${this.lang}\n            ns=${this.ns}\n          >\n          </foxy-internal-gift-card-codes-form-list-item>\n        `,\n      };\n    });\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('codes:before')}\n\n        <x-group class=\"mb-xs\" frame>\n          <foxy-i18n slot=\"header\" lang=${this.lang} key=\"code_plural\" ns=${this.ns}></foxy-i18n>\n\n          <x-editable-list\n            lang=${this.lang}\n            ns=${this.ns}\n            ?disabled=${!this.in('idle') || this.disabledSelector.matches('codes', true)}\n            ?readonly=${this.readonlySelector.matches('codes', true)}\n            .items=${items}\n            @change=${(evt: CustomEvent) => {\n              const list = evt.currentTarget as EditableList;\n              const newCodes = new Set([...hiddenCodes, ...list.items.map(item => item.value)]);\n              this.edit({ gift_card_codes: [...newCodes] });\n            }}\n            @paste=${(evt: ClipboardEvent) => {\n              evt.preventDefault();\n\n              const text = evt.clipboardData?.getData('text') ?? '';\n              const pastedCodes = text\n                .split(' ')\n                .map(code => code.trim())\n                .filter(code => code.length > 0);\n\n              this.edit({ gift_card_codes: Array.from(new Set([...codes, ...pastedCodes])) });\n            }}\n          >\n            <div\n              class=\"ml-m py-s border-b border-contrast-10 font-lumo\"\n              ?hidden=${hiddenCodes.length === 0}\n            >\n              <foxy-i18n\n                options=${JSON.stringify({ count: hiddenCodes.length })}\n                class=\"block text-body text-m mb-xs\"\n                lang=${this.lang}\n                key=\"hidden_codes_header\"\n                ns=${this.ns}\n              >\n              </foxy-i18n>\n\n              <foxy-i18n\n                class=\"block text-xs text-tertiary\"\n                lang=${this.lang}\n                key=\"hidden_codes_explainer\"\n                ns=${this.ns}\n              >\n              </foxy-i18n>\n            </div>\n          </x-editable-list>\n        </x-group>\n\n        <foxy-i18n\n          class=\"block text-xs text-tertiary leading-s\"\n          lang=${this.lang}\n          key=\"code_import_hint\"\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n\n        ${this.renderTemplateOrSlot('codes:after')}\n      </div>\n    `;\n  }\n\n  private __renderCurrentBalance() {\n    const isTemplate = this.in({ idle: 'template' });\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('current-balance:before')}\n\n        <vaadin-integer-field\n          error-message=${this.__getErrorMessage('current_balance')}\n          label=${this.t('balance')}\n          class=\"w-full\"\n          min=\"0\"\n          ?disabled=${!isTemplate || this.disabledSelector.matches('current-balance', true)}\n          ?readonly=${this.readonlySelector.matches('current-balance', true)}\n          prevent-invalid-input\n          has-controls\n          .checkValidity=${this.__getValidator('current_balance')}\n          .value=${isTemplate ? this.form.current_balance ?? 0 : ''}\n          @change=${(evt: CustomEvent) => {\n            const field = evt.currentTarget as IntegerFieldElement;\n            this.edit({ current_balance: parseInt(field.value) });\n          }}\n        >\n        </vaadin-integer-field>\n\n        ${this.renderTemplateOrSlot('current-balance:after')}\n      </div>\n    `;\n  }\n\n  private __renderImport() {\n    const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n    const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n    const isValid = isTemplateValid || isSnapshotValid;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('import:before')}\n\n        <vaadin-button\n          class=\"w-full mb-xs\"\n          theme=\"primary success\"\n          ?disabled=${!isValid || !this.in('idle') || this.disabledSelector.matches('import', true)}\n          @click=${this.submit}\n        >\n          <foxy-i18n ns=${this.ns} key=\"import\" lang=${this.lang}></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('import:after')}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"GiftCardCodesForm.js","sourceRoot":"","sources":["../../../../src/elements/public/GiftCardCodesForm/GiftCardCodesForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { EditableList } from '../../private/EditableList/EditableList';\nimport { Group } from '../../private/Group/Group';\nimport { IntegerFieldElement } from '@vaadin/vaadin-text-field/vaadin-integer-field';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { NucleonV8N } from '../NucleonElement/types';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'gift-card-codes-form';\nconst Base = ConfigurableMixin(\n  ThemeableMixin(ScopedElementsMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/**\n * Form element for importing gift card codes (`fx:gift_card_codes`).\n *\n * @slot codes:before\n * @slot codes:after\n *\n * @slot current-balance:before\n * @slot current-balance:after\n *\n * @slot import:before\n * @slot import:after\n *\n * @element foxy-gift-card-codes-form\n * @since 1.15.0\n */\nexport class GiftCardCodesForm extends Base<Data> {\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'vaadin-integer-field': customElements.get('vaadin-integer-field'),\n      'vaadin-button': customElements.get('vaadin-button'),\n      'iron-icon': customElements.get('iron-icon'),\n\n      'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n      'foxy-i18n': customElements.get('foxy-i18n'),\n\n      'x-editable-list': EditableList,\n      'x-group': Group,\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ gift_card_codes: v }) => (v && v.length > 0) || 'gift_card_codes_required',\n      ({ current_balance: v }) => !v || v >= 0 || 'current_balance_negative',\n    ];\n  }\n\n  templates: Templates = {};\n\n  render(): TemplateResult {\n    const { hiddenSelector, lang, ns } = this;\n\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n    const isSnapshot = this.in({ idle: 'snapshot' });\n    const isTemplate = this.in({ idle: 'template' });\n\n    const transition = 'transition-opacity duration-500';\n    const hidden = 'opacity-0 pointer-events-none';\n\n    return html`\n      <div class=\"relative\">\n        <div\n          class=${classMap({\n            'relative space-y-m': true,\n            [transition]: true,\n            [hidden]: isSnapshot,\n          })}\n        >\n          ${hiddenSelector.matches('codes', true) ? '' : this.__renderCodes()}\n          ${hiddenSelector.matches('current-balance', true) ? '' : this.__renderCurrentBalance()}\n          ${hiddenSelector.matches('import', true) ? '' : this.__renderImport()}\n        </div>\n\n        <div\n          class=${classMap({\n            'absolute inset-0 flex flex-col items-center justify-center': true,\n            'text-center text-m text-secondary leading-m': true,\n            [transition]: true,\n            [hidden]: !isSnapshot,\n          })}\n        >\n          <div class=\"mx-auto flex mb-m w-l h-l rounded-t-l rounded-b-l bg-success\">\n            <iron-icon icon=\"icons:done-all\" class=\"m-auto text-success-contrast\"></iron-icon>\n          </div>\n\n          <foxy-i18n class=\"block\" lang=${lang} key=\"import_codes_done\" ns=${ns}></foxy-i18n>\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'absolute inset-0 flex': true,\n            [transition]: true,\n            [hidden]: !isBusy && !isFail,\n          })}\n        >\n          <foxy-spinner\n            layout=\"vertical\"\n            class=\"m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l\"\n            state=${isFail ? 'error' : isTemplate ? 'empty' : 'busy'}\n            lang=${lang}\n            ns=\"${ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  private __getErrorMessage(prefix: string) {\n    const error = this.errors.find(err => err.startsWith(prefix));\n    return error ? this.t(error.replace(prefix, 'v8n')) : '';\n  }\n\n  private __getValidator(prefix: string) {\n    return () => !this.errors.some(err => err.startsWith(prefix));\n  }\n\n  private __renderCodes() {\n    const maxVisible = 16;\n    const codes = this.form.gift_card_codes ?? [];\n\n    const visibleCodes = codes.length > maxVisible ? codes.slice(-maxVisible) : codes;\n    const hiddenCodes = codes.length > maxVisible ? codes.slice(0, -maxVisible) : [];\n\n    const items = visibleCodes.map(code => {\n      let href: string;\n\n      try {\n        const url = new URL(this.parent);\n        url.searchParams.set('code', code);\n        href = url.toString();\n      } catch {\n        href = this.parent;\n      }\n\n      return {\n        value: code,\n        label: html`\n          <foxy-internal-gift-card-codes-form-list-item\n            group=${this.group}\n            href=${href}\n            lang=${this.lang}\n            ns=${this.ns}\n          >\n          </foxy-internal-gift-card-codes-form-list-item>\n        `,\n      };\n    });\n\n    return html`\n      <div data-testid=\"codes\">\n        ${this.renderTemplateOrSlot('codes:before')}\n\n        <x-group class=\"mb-xs\" frame>\n          <foxy-i18n slot=\"header\" lang=${this.lang} key=\"code_plural\" ns=${this.ns}></foxy-i18n>\n\n          <x-editable-list\n            data-testid=\"codes:list\"\n            lang=${this.lang}\n            ns=${this.ns}\n            ?disabled=${!this.in('idle') || this.disabledSelector.matches('codes', true)}\n            ?readonly=${this.readonlySelector.matches('codes', true)}\n            .items=${items}\n            @change=${(evt: CustomEvent) => {\n              const list = evt.currentTarget as EditableList;\n              const newCodes = new Set([...hiddenCodes, ...list.items.map(item => item.value)]);\n              this.edit({ gift_card_codes: [...newCodes] });\n            }}\n            @paste=${(evt: ClipboardEvent) => {\n              evt.preventDefault();\n\n              const text = evt.clipboardData?.getData('text') ?? '';\n              const pastedCodes = text\n                .split(/\\s/)\n                .map(code => code.trim())\n                .filter(code => code.length > 0);\n\n              this.edit({ gift_card_codes: Array.from(new Set([...codes, ...pastedCodes])) });\n            }}\n          >\n            <div\n              class=\"ml-m py-s border-b border-contrast-10 font-lumo\"\n              ?hidden=${hiddenCodes.length === 0}\n            >\n              <foxy-i18n\n                options=${JSON.stringify({ count: hiddenCodes.length })}\n                class=\"block text-body text-m mb-xs\"\n                lang=${this.lang}\n                key=\"hidden_codes_header\"\n                ns=${this.ns}\n              >\n              </foxy-i18n>\n\n              <foxy-i18n\n                class=\"block text-xs text-tertiary\"\n                lang=${this.lang}\n                key=\"hidden_codes_explainer\"\n                ns=${this.ns}\n              >\n              </foxy-i18n>\n            </div>\n          </x-editable-list>\n        </x-group>\n\n        <foxy-i18n\n          class=\"block text-xs text-tertiary leading-s\"\n          lang=${this.lang}\n          key=\"code_import_hint\"\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n\n        ${this.renderTemplateOrSlot('codes:after')}\n      </div>\n    `;\n  }\n\n  private __renderCurrentBalance() {\n    const isTemplate = this.in({ idle: 'template' });\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('current-balance:before')}\n\n        <vaadin-integer-field\n          error-message=${this.__getErrorMessage('current_balance')}\n          data-testid=\"current-balance\"\n          label=${this.t('balance')}\n          class=\"w-full\"\n          min=\"0\"\n          ?disabled=${!isTemplate || this.disabledSelector.matches('current-balance', true)}\n          ?readonly=${this.readonlySelector.matches('current-balance', true)}\n          prevent-invalid-input\n          has-controls\n          .checkValidity=${this.__getValidator('current_balance')}\n          .value=${isTemplate ? this.form.current_balance ?? 0 : ''}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n          @change=${(evt: CustomEvent) => {\n            const field = evt.currentTarget as IntegerFieldElement;\n            this.edit({ current_balance: parseInt(field.value) });\n          }}\n        >\n        </vaadin-integer-field>\n\n        ${this.renderTemplateOrSlot('current-balance:after')}\n      </div>\n    `;\n  }\n\n  private __renderImport() {\n    const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n    const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n    const isValid = isTemplateValid || isSnapshotValid;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('import:before')}\n\n        <vaadin-button\n          data-testid=\"import\"\n          class=\"w-full mb-xs\"\n          theme=\"primary success\"\n          ?disabled=${!isValid || !this.in('idle') || this.disabledSelector.matches('import', true)}\n          @click=${() => this.submit()}\n        >\n          <foxy-i18n ns=${this.ns} key=\"import\" lang=${this.lang}></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('import:after')}\n      </div>\n    `;\n  }\n}\n"]}

package/package.json

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