@foxy.io/elements 1.38.0-beta.3 → 1.38.0-beta.5

package/dist/cdn/{shared-b3d72cd9.js → shared-fef09d02.js}

@@ -1 +1 @@
-import{_ as e,l as t,B as r}from"./shared-cb58dfcd.js";import{a as s,T as i,w as n}from"./shared-3ff5c3d1.js";import{s as o}from"./shared-0aedd809.js";import"./shared-c0159ceb.js";import"./shared-9bd0911a.js";import"./shared-5212ef4f.js";import{C as l}from"./shared-5afb584d.js";import{h as a,r as d,L as h}from"./shared-ba5c42c7.js";import{I as c}from"./shared-2aa23b5f.js";import{N as u}from"./shared-f83207fb.js";import"./shared-8650b26e.js";import"./foxy-copy-to-clipboard.js";import"./foxy-spinner.js";import{g as p}from"./shared-bab2ea2c.js";import{c as f}from"./shared-4e709717.js";let y,m,x,_,v=e=>e;class b extends(l(s(i(c(h))))){constructor(){super(...arguments),this.nucleon=null}static get inferredProperties(){return[...super.inferredProperties,"nucleon"]}static get properties(){return e(e({},super.properties),{},{nucleon:{attribute:!1}})}inferFromElement(e,t){return"nucleon"===e&&t instanceof u?t:super.inferFromElement(e,t)}applyInferredProperties(e){var t,r;super.applyInferredProperties(e),this.nucleon=null!==(t=e.get("nucleon"))&&void 0!==t?t:null,!1===(null===(r=this.nucleon)||void 0===r?void 0:r.in("idle"))&&(this.disabled=!0)}renderLightDom(){if("string"!=typeof this.infer)return;const e=a(y||(y=v` <slot name="${0}:before" slot="before"></slot> <slot name="${0}:after" slot="after"></slot> `),this.infer,this.infer);d(e,this)}updated(e){super.updated(e),this.renderLightDom()}renderControl(){return a(m||(m=v``))}render(){return this.hidden?a(x||(x=v``)):a(_||(_=v` ${0} ${0} ${0} `),this.renderTemplateOrSlot("before",this.nucleon),this.renderControl(),this.renderTemplateOrSlot("after",this.nucleon))}}customElements.define("foxy-internal-control",b);class g extends b{constructor(){var e;super(...arguments),e=this,this.checkValidityAsync=null,this.jsonTemplate=null,this.jsonPath=null,this.getValue=()=>{var e;const r=t(null===(e=this.nucleon)||void 0===e?void 0:e.form,this.property);return this.jsonPath?t(JSON.parse(null!=r?r:this.jsonTemplate),this.jsonPath):r},this.setValue=e=>{var t,r,s,i,n,l,a,d,h;const[c,...u]=this.property.split(".");if(u.length){const l=null!==(r=null===(t=this.nucleon)||void 0===t?void 0:t.form[c])&&void 0!==r?r:{};if(this.jsonPath){const t=JSON.parse(null!==(i=null===(s=this.nucleon)||void 0===s?void 0:s.form[c])&&void 0!==i?i:this.jsonTemplate);o(t,this.jsonPath,e),o(l,u,JSON.stringify(t))}else o(l,u,e);null===(n=this.nucleon)||void 0===n||n.edit({[c]:l})}else if(this.jsonPath){const t=JSON.parse(null!==(a=null===(l=this.nucleon)||void 0===l?void 0:l.form[c])&&void 0!==a?a:this.jsonTemplate);o(t,this.jsonPath,e),null===(d=this.nucleon)||void 0===d||d.edit({[c]:JSON.stringify(t)})}else null===(h=this.nucleon)||void 0===h||h.edit({[c]:e})},this.__debouncedCheckValidityAsync=n((async function(t){var r;const s=await(null===(r=e.checkValidityAsync)||void 0===r?void 0:r.call(e,t));e._value===t&&(e.__asyncError=!0===s?null:null!=s?s:null)}),300),this.__previousValue=null,this.__placeholder=null,this.__helperText=null,this.__asyncError=null,this.__v8nPrefix=null,this.__property=null,this.__label=null}static get properties(){return e(e({},super.properties),{},{checkValidityAsync:{attribute:!1},jsonTemplate:{attribute:"json-template"},placeholder:{type:String,noAccessor:!0},helperText:{type:String,attribute:"helper-text",noAccessor:!0},v8nPrefix:{type:String,attribute:"v8n-prefix",noAccessor:!0},jsonPath:{attribute:"json-path"},getValue:{attribute:!1},setValue:{attribute:!1},property:{type:String,noAccessor:!0},label:{type:String,noAccessor:!0},__asyncError:{attribute:!1}})}get placeholder(){return"string"==typeof this.__placeholder?this.__placeholder:this.t("placeholder")}set placeholder(e){const t=this.__placeholder;this.__placeholder=e,this.requestUpdate("placeholder",t)}get helperText(){return"string"==typeof this.__helperText?this.__helperText:this.t("helper_text")}set helperText(e){const t=this.__helperText;this.__helperText=e,this.requestUpdate("helperText",t)}get v8nPrefix(){return"string"==typeof this.__v8nPrefix?this.__v8nPrefix:"string"==typeof this.infer?`${this.infer}:`:""}set v8nPrefix(e){const t=this.__v8nPrefix;this.__v8nPrefix=e,this.requestUpdate("v8nPrefix",t)}get property(){return"string"==typeof this.__property?this.__property:"string"==typeof this.infer?this.infer.replace(/-/g,"_"):""}set property(e){const t=this.__property;this.__property=e,this.requestUpdate("property",t)}get label(){return"string"==typeof this.__label?this.__label:this.t("label")}set label(e){const t=this.__label;this.__label=e,this.requestUpdate("label",t)}resetPlaceholder(){const e=this.__placeholder;this.__placeholder=null,this.requestUpdate("placeholder",e)}resetHelperText(){const e=this.__helperText;this.__helperText=null,this.requestUpdate("helperText",e)}resetV8nPrefix(){const e=this.__v8nPrefix;this.__v8nPrefix=null,this.requestUpdate("v8nPrefix",e)}resetProperty(){const e=this.__property;this.__property=null,this.requestUpdate("property",e)}resetLabel(){const e=this.__label;this.__label=null,this.requestUpdate("label",e)}reportValidity(){const e=this.ownerDocument.createTreeWalker(this.renderRoot,NodeFilter.SHOW_ELEMENT);do{const t=e.currentNode,r=["reportValidity","validate"];for(const e of r)if(e in t)try{t[e]();break}catch(e){continue}}while(e.nextNode())}get _value(){return this.getValue()}set _value(e){this.__previousValue=this._value,this.__asyncError=null,this._error||this.__previousValue===e||this.__debouncedCheckValidityAsync(e);const t=new CustomEvent("change",{cancelable:!0,detail:e});this.dispatchEvent(t)&&this.setValue(e)}get _error(){var e,t;const r=null===(e=this.nucleon)||void 0===e?void 0:e.errors.find((e=>e.startsWith(this.v8nPrefix)));return null!==(t=null!=r?r:this.__asyncError)&&void 0!==t?t:void 0}get _errorMessage(){return this._error?this.t(this._error.substring(this.v8nPrefix.length)):void 0}get _checkValidity(){return()=>!this._error}}customElements.define("foxy-internal-editable-control",g);let $,j=e=>e;customElements.define("foxy-internal-timestamps-control",class extends b{renderControl(){return a($||($=j` <p class="font-lumo text-s leading-s text-secondary"> <foxy-i18n infer="" key="date_created"></foxy-i18n> <foxy-i18n .options="${0}" infer="" key="date"> </foxy-i18n> <span>&bull;<span> <foxy-i18n infer="" key="date_modified"></foxy-i18n> <foxy-i18n .options="${0}" infer="" key="date"> </foxy-i18n> </span></span></p> `),{value:t(this,"nucleon.data.date_created")},{value:t(this,"nucleon.data.date_modified")})}});let S,k=e=>e;customElements.define("foxy-internal-submit-control",class extends b{constructor(){super(...arguments),this.theme="primary"}static get properties(){return e(e({},super.properties),{},{theme:{type:String}})}renderControl(){return a(S||(S=k` <vaadin-button theme="${0}" ?disabled="${0}" @click="${0}"> <foxy-i18n infer="" key="caption"></foxy-i18n> </vaadin-button> `),this.theme,this.disabled,(()=>{var e;return null===(e=this.nucleon)||void 0===e?void 0:e.submit()}))}});let P,T=e=>e;customElements.define("foxy-internal-delete-control",class extends b{constructor(){super(...arguments),this.theme="error"}static get properties(){return e(e({},super.properties),{},{theme:{type:String}})}renderControl(){return a(P||(P=T` <foxy-internal-confirm-dialog message="delete_prompt" confirm="delete" cancel="cancel" header="delete" theme="primary error" infer="" id="confirm" @hide="${0}"> </foxy-internal-confirm-dialog> <vaadin-button data-testid="delete" theme="${0}" class="w-full" ?disabled="${0}" @click="${0}"> <foxy-i18n infer="" key="delete"></foxy-i18n> </vaadin-button> `),(e=>{var t;return!e.detail.cancelled&&(null===(t=this.nucleon)||void 0===t?void 0:t.delete())}),this.theme,this.disabled||this.readonly,(e=>{this.renderRoot.querySelector("#confirm").show(e.currentTarget)}))}});let E,V=e=>e;customElements.define("foxy-internal-undo-control",class extends b{constructor(){super(...arguments),this.theme="secondary"}static get properties(){return e(e({},super.properties),{},{theme:{type:String}})}renderControl(){return a(E||(E=V` <vaadin-button theme="${0}" ?disabled="${0}" @click="${0}"> <foxy-i18n infer="" key="caption"></foxy-i18n> </vaadin-button> `),this.theme,this.disabled,(()=>{var e;return null===(e=this.nucleon)||void 0===e?void 0:e.undo()}))}});let O,A,C,N,q,w,U,J,I,H,L,K,W=e=>e;const B=l(i(u));class D extends B{constructor(){super(...arguments),this.status=null}static get properties(){return e(e({},super.properties),{},{status:{type:Object}})}renderHeaderActions(e){return null}get headerTitleKey(){return"title"}get headerTitleOptions(){return e(e({},this.data),{},{context:this.data?"existing":"new",id:this.data?p(this.data._links.self.href):null})}get headerSubtitleKey(){return"subtitle"}get headerSubtitleOptions(){var e;return null!==(e=this.data)&&void 0!==e?e:{}}get headerCopyIdValue(){var e;return this.data&&null!==(e=p(this.data._links.self.href))&&void 0!==e?e:""}get hiddenSelector(){const e=[super.hiddenSelector.toString()];return this.href&&e.unshift("create"),this.href||e.unshift("delete","timestamps","submit"),this.in({idle:{snapshot:"dirty"}})||e.unshift("undo","submit"),new r(e.join(" ").trim())}renderHeader(){if(this.hiddenSelector.matches("header",!0))return a(O||(O=W``));const e=this.data,t=e?this.renderHeaderActions(e):null;return a(A||(A=W` <div> ${0} <h2> <span class="flex items-center gap-s leading-xs text-xl font-medium break-all"> <foxy-i18n options="${0}" infer="header" key="${0}"> </foxy-i18n> ${0} </span> ${0} </h2> ${0} </div> `),this.renderTemplateOrSlot("header:before"),JSON.stringify(this.headerTitleOptions),this.headerTitleKey,e?a(C||(C=W` ${0} ${0} `),this.hiddenSelector.matches("header:copy-id",!0)?"":a(N||(N=W` <foxy-copy-to-clipboard infer="header copy-id" class="text-m" text="${0}"> </foxy-copy-to-clipboard> `),this.headerCopyIdValue),this.hiddenSelector.matches("header:copy-json",!0)?"":a(q||(q=W` <foxy-copy-to-clipboard infer="header copy-json" class="text-m" icon="icons:code" text="${0}"> </foxy-copy-to-clipboard> `),JSON.stringify(e,null,2))):"",e?a(w||(w=W` <foxy-i18n infer="header" class="text-m text-secondary" key="${0}" .options="${0}"> </foxy-i18n> ${0} `),this.headerSubtitleKey,this.headerSubtitleOptions,t?a(U||(U=W`<div class="mt-xs flex gap-m">${0}</div>`),t):""):"",this.renderTemplateOrSlot("header:after"))}renderBody(){return a(J||(J=W` <foxy-internal-timestamps-control infer="timestamps"></foxy-internal-timestamps-control> <div class="flex gap-m" ?hidden="${0}"> <foxy-internal-delete-control infer="delete"></foxy-internal-delete-control> <div class="w-full"></div> <foxy-internal-undo-control infer="undo"> </foxy-internal-undo-control> <foxy-internal-submit-control infer="submit"> </foxy-internal-submit-control> <foxy-internal-submit-control infer="create" theme="primary success"> </foxy-internal-submit-control> </div> `),["delete","undo","submit","create"].every((e=>this.hiddenSelector.matches(e,!0))))}render(){const e=!(this.in("idle")||this.in({busy:"fetching"})&&this.data);return a(I||(I=W` <div aria-busy="${0}" aria-live="polite" class="relative"> <div class="${0}"> ${0} ${0} ${0} </div> <div data-testid="spinner" class="${0}"> <foxy-spinner layout="${0}" state="${0}" infer="spinner"> </foxy-spinner> ${0} </div> </div> `),this.in("busy"),f({"space-y-m":!0,"transition-all filter":!0,"opacity-30 blur-sm pointer-events-none":e}),this.__generalErrors.map((e=>this.__renderGeneralError(e))),this.status?this.__renderStatus(this.status):"",this.renderBody(),f({"flex flex-col items-center justify-center gap-m":!0,"transition-opacity absolute inset-0":!0,"opacity-0 pointer-events-none":!e}),this.in("fail")?"vertical":"no-label",this.in("fail")?"error":"busy",this.href&&this.in("fail")?a(H||(H=W` <vaadin-button theme="small contrast" @click="${0}"> <foxy-i18n infer="spinner" key="refresh"></foxy-i18n> </vaadin-button> `),(()=>this.refresh())):"")}get __generalErrors(){const e=this.constructor.generalErrorPrefix;return this.errors.filter((t=>t.startsWith(e)))}__renderGeneralError(e){return a(L||(L=W` <foxy-i18n class="leading-xs text-body rounded bg-error-10 block" style="padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)" infer="error" key="${0}"> </foxy-i18n> `),e.replace("error:",""))}__renderStatus({key:e,options:t}){if(!this.hiddenSelector.matches("status",!0))return a(K||(K=W` <p data-testid="status" class="leading-xs text-body rounded bg-success-10 flex items-start gap-m" style="padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)"> <foxy-i18n class="flex-1" infer="status" key="${0}" .options="${0}"></foxy-i18n> <vaadin-button class="flex-shrink-0" theme="success tertiary-inline" @click="${0}"> <foxy-i18n class="flex-1" infer="status" key="close"></foxy-i18n> </vaadin-button> </p> `),e,t,(()=>this.status=null))}}D.generalErrorPrefix="error:",customElements.define("foxy-internal-form",D);export{D as I,g as a,b};
+import{_ as e,l as t,B as r}from"./shared-cb58dfcd.js";import{a as s,T as i,w as n}from"./shared-3e7f5663.js";import{s as o}from"./shared-0aedd809.js";import"./shared-3f0b1660.js";import"./shared-94756d7c.js";import"./shared-5212ef4f.js";import{C as l}from"./shared-5afb584d.js";import{h as a,r as d,L as h}from"./shared-ba5c42c7.js";import{I as c}from"./shared-2aa23b5f.js";import{N as u}from"./shared-f83207fb.js";import"./shared-5b1511bc.js";import"./foxy-copy-to-clipboard.js";import"./foxy-spinner.js";import{g as p}from"./shared-bab2ea2c.js";import{c as f}from"./shared-4e709717.js";let y,m,x,_,b=e=>e;class v extends(l(s(i(c(h))))){constructor(){super(...arguments),this.nucleon=null}static get inferredProperties(){return[...super.inferredProperties,"nucleon"]}static get properties(){return e(e({},super.properties),{},{nucleon:{attribute:!1}})}inferFromElement(e,t){return"nucleon"===e&&t instanceof u?t:super.inferFromElement(e,t)}applyInferredProperties(e){var t,r;super.applyInferredProperties(e),this.nucleon=null!==(t=e.get("nucleon"))&&void 0!==t?t:null,!1===(null===(r=this.nucleon)||void 0===r?void 0:r.in("idle"))&&(this.disabled=!0)}renderLightDom(){if("string"!=typeof this.infer)return;const e=a(y||(y=b` <slot name="${0}:before" slot="before"></slot> <slot name="${0}:after" slot="after"></slot> `),this.infer,this.infer);d(e,this)}updated(e){super.updated(e),this.renderLightDom()}renderControl(){return a(m||(m=b``))}render(){return this.hidden?a(x||(x=b``)):a(_||(_=b` ${0} ${0} ${0} `),this.renderTemplateOrSlot("before",this.nucleon),this.renderControl(),this.renderTemplateOrSlot("after",this.nucleon))}}customElements.define("foxy-internal-control",v);class g extends v{constructor(){var e;super(...arguments),e=this,this.checkValidityAsync=null,this.jsonTemplate=null,this.jsonPath=null,this.getValue=()=>{var e;const r=t(null===(e=this.nucleon)||void 0===e?void 0:e.form,this.property);return this.jsonPath?t(JSON.parse(null!=r?r:this.jsonTemplate),this.jsonPath):r},this.setValue=e=>{var t,r,s,i,n,l,a,d,h;const[c,...u]=this.property.split(".");if(u.length){const l=null!==(r=null===(t=this.nucleon)||void 0===t?void 0:t.form[c])&&void 0!==r?r:{};if(this.jsonPath){const t=JSON.parse(null!==(i=null===(s=this.nucleon)||void 0===s?void 0:s.form[c])&&void 0!==i?i:this.jsonTemplate);o(t,this.jsonPath,e),o(l,u,JSON.stringify(t))}else o(l,u,e);null===(n=this.nucleon)||void 0===n||n.edit({[c]:l})}else if(this.jsonPath){const t=JSON.parse(null!==(a=null===(l=this.nucleon)||void 0===l?void 0:l.form[c])&&void 0!==a?a:this.jsonTemplate);o(t,this.jsonPath,e),null===(d=this.nucleon)||void 0===d||d.edit({[c]:JSON.stringify(t)})}else null===(h=this.nucleon)||void 0===h||h.edit({[c]:e})},this.__debouncedCheckValidityAsync=n((async function(t){var r;const s=await(null===(r=e.checkValidityAsync)||void 0===r?void 0:r.call(e,t));e._value===t&&(e.__asyncError=!0===s?null:null!=s?s:null)}),300),this.__previousValue=null,this.__placeholder=null,this.__helperText=null,this.__asyncError=null,this.__v8nPrefix=null,this.__property=null,this.__label=null}static get properties(){return e(e({},super.properties),{},{checkValidityAsync:{attribute:!1},jsonTemplate:{attribute:"json-template"},placeholder:{type:String,noAccessor:!0},helperText:{type:String,attribute:"helper-text",noAccessor:!0},v8nPrefix:{type:String,attribute:"v8n-prefix",noAccessor:!0},jsonPath:{attribute:"json-path"},getValue:{attribute:!1},setValue:{attribute:!1},property:{type:String,noAccessor:!0},label:{type:String,noAccessor:!0},__asyncError:{attribute:!1}})}get placeholder(){return"string"==typeof this.__placeholder?this.__placeholder:this.t("placeholder")}set placeholder(e){const t=this.__placeholder;this.__placeholder=e,this.requestUpdate("placeholder",t)}get helperText(){return"string"==typeof this.__helperText?this.__helperText:this.t("helper_text")}set helperText(e){const t=this.__helperText;this.__helperText=e,this.requestUpdate("helperText",t)}get v8nPrefix(){return"string"==typeof this.__v8nPrefix?this.__v8nPrefix:"string"==typeof this.infer?`${this.infer}:`:""}set v8nPrefix(e){const t=this.__v8nPrefix;this.__v8nPrefix=e,this.requestUpdate("v8nPrefix",t)}get property(){return"string"==typeof this.__property?this.__property:"string"==typeof this.infer?this.infer.replace(/-/g,"_"):""}set property(e){const t=this.__property;this.__property=e,this.requestUpdate("property",t)}get label(){return"string"==typeof this.__label?this.__label:this.t("label")}set label(e){const t=this.__label;this.__label=e,this.requestUpdate("label",t)}resetPlaceholder(){const e=this.__placeholder;this.__placeholder=null,this.requestUpdate("placeholder",e)}resetHelperText(){const e=this.__helperText;this.__helperText=null,this.requestUpdate("helperText",e)}resetV8nPrefix(){const e=this.__v8nPrefix;this.__v8nPrefix=null,this.requestUpdate("v8nPrefix",e)}resetProperty(){const e=this.__property;this.__property=null,this.requestUpdate("property",e)}resetLabel(){const e=this.__label;this.__label=null,this.requestUpdate("label",e)}reportValidity(){const e=this.ownerDocument.createTreeWalker(this.renderRoot,NodeFilter.SHOW_ELEMENT);do{const t=e.currentNode,r=["reportValidity","validate"];for(const e of r)if(e in t)try{t[e]();break}catch(e){continue}}while(e.nextNode())}get _value(){return this.getValue()}set _value(e){this.__previousValue=this._value,this.__asyncError=null,this._error||this.__previousValue===e||this.__debouncedCheckValidityAsync(e);const t=new CustomEvent("change",{cancelable:!0,detail:e});this.dispatchEvent(t)&&this.setValue(e)}get _error(){var e,t;const r=null===(e=this.nucleon)||void 0===e?void 0:e.errors.find((e=>e.startsWith(this.v8nPrefix)));return null!==(t=null!=r?r:this.__asyncError)&&void 0!==t?t:void 0}get _errorMessage(){return this._error?this.t(this._error.substring(this.v8nPrefix.length)):void 0}get _checkValidity(){return()=>!this._error}}customElements.define("foxy-internal-editable-control",g);let $,S=e=>e;customElements.define("foxy-internal-timestamps-control",class extends v{renderControl(){return a($||($=S` <p class="font-lumo text-s leading-s text-secondary"> <foxy-i18n infer="" key="date_created"></foxy-i18n> <foxy-i18n .options="${0}" infer="" key="date"> </foxy-i18n> <span>&bull;<span> <foxy-i18n infer="" key="date_modified"></foxy-i18n> <foxy-i18n .options="${0}" infer="" key="date"> </foxy-i18n> </span></span></p> `),{value:t(this,"nucleon.data.date_created")},{value:t(this,"nucleon.data.date_modified")})}});let k,j=e=>e;customElements.define("foxy-internal-submit-control",class extends v{constructor(){super(...arguments),this.theme="primary"}static get properties(){return e(e({},super.properties),{},{theme:{type:String}})}renderControl(){return a(k||(k=j` <vaadin-button theme="${0}" ?disabled="${0}" @click="${0}"> <foxy-i18n infer="" key="caption"></foxy-i18n> </vaadin-button> `),this.theme,this.disabled,(()=>{var e;return null===(e=this.nucleon)||void 0===e?void 0:e.submit()}))}});let P,T=e=>e;customElements.define("foxy-internal-delete-control",class extends v{constructor(){super(...arguments),this.theme="error"}static get properties(){return e(e({},super.properties),{},{theme:{type:String}})}renderControl(){return a(P||(P=T` <foxy-internal-confirm-dialog message="delete_prompt" confirm="delete" cancel="cancel" header="delete" theme="primary error" infer="" id="confirm" @hide="${0}"> </foxy-internal-confirm-dialog> <vaadin-button data-testid="delete" theme="${0}" class="w-full" ?disabled="${0}" @click="${0}"> <foxy-i18n infer="" key="delete"></foxy-i18n> </vaadin-button> `),(e=>{var t;return!e.detail.cancelled&&(null===(t=this.nucleon)||void 0===t?void 0:t.delete())}),this.theme,this.disabled||this.readonly,(e=>{this.renderRoot.querySelector("#confirm").show(e.currentTarget)}))}});let E,V=e=>e;customElements.define("foxy-internal-undo-control",class extends v{constructor(){super(...arguments),this.theme="secondary"}static get properties(){return e(e({},super.properties),{},{theme:{type:String}})}renderControl(){return a(E||(E=V` <vaadin-button theme="${0}" ?disabled="${0}" @click="${0}"> <foxy-i18n infer="" key="caption"></foxy-i18n> </vaadin-button> `),this.theme,this.disabled,(()=>{var e;return null===(e=this.nucleon)||void 0===e?void 0:e.undo()}))}});let O,A,C,N,q,w,U,J,I,B,H,L,K,W=e=>e;const D=l(i(u));class F extends D{constructor(){super(...arguments),this.status=null}static get properties(){return e(e({},super.properties),{},{status:{type:Object}})}renderHeaderActions(e){return null}get headerTitleKey(){return"title"}get headerTitleOptions(){return e(e({},this.data),{},{context:this.data?"existing":"new",id:this.data?p(this.data._links.self.href):null})}get headerSubtitleKey(){return"subtitle"}get headerSubtitleOptions(){var e;return null!==(e=this.data)&&void 0!==e?e:{}}get headerSubtitleBadges(){return[]}get headerCopyIdValue(){var e;return this.data&&null!==(e=p(this.data._links.self.href))&&void 0!==e?e:""}get hiddenSelector(){const e=[super.hiddenSelector.toString()];return this.href&&e.unshift("create"),this.href||e.unshift("delete","timestamps","submit"),this.in({idle:{snapshot:"dirty"}})||e.unshift("undo","submit"),new r(e.join(" ").trim())}renderHeader(){if(this.hiddenSelector.matches("header",!0))return a(O||(O=W``));const e=this.data,t=e?this.renderHeaderActions(e):null;return a(A||(A=W` <div> ${0} <h2> <span class="flex items-center gap-s leading-xs text-xl font-medium break-all"> <foxy-i18n options="${0}" infer="header" key="${0}"> </foxy-i18n> ${0} </span> ${0} </h2> ${0} </div> `),this.renderTemplateOrSlot("header:before"),JSON.stringify(this.headerTitleOptions),this.headerTitleKey,e?a(C||(C=W` ${0} ${0} `),this.hiddenSelector.matches("header:copy-id",!0)?"":a(N||(N=W` <foxy-copy-to-clipboard infer="header copy-id" class="text-m" text="${0}"> </foxy-copy-to-clipboard> `),this.headerCopyIdValue),this.hiddenSelector.matches("header:copy-json",!0)?"":a(q||(q=W` <foxy-copy-to-clipboard infer="header copy-json" class="text-m" icon="icons:code" text="${0}"> </foxy-copy-to-clipboard> `),JSON.stringify(e,null,2))):"",e?a(w||(w=W` <div class="flex items-center gap-s text-secondary leading-s"> ${0} <foxy-i18n infer="header" key="${0}" .options="${0}"> </foxy-i18n> </div> ${0} `),this.headerSubtitleBadges.map((e=>a(U||(U=W` <foxy-i18n class="border border-contrast-60 font-medium uppercase tracking-wider block rounded-s px-xs text-xs" infer="header badges" key="${0}"> </foxy-i18n> `),e.key))),this.headerSubtitleKey,this.headerSubtitleOptions,t?a(J||(J=W`<div class="mt-xs flex gap-m">${0}</div>`),t):""):"",this.renderTemplateOrSlot("header:after"))}renderBody(){return a(I||(I=W` <foxy-internal-timestamps-control infer="timestamps"></foxy-internal-timestamps-control> <div class="flex gap-m" ?hidden="${0}"> <foxy-internal-delete-control infer="delete"></foxy-internal-delete-control> <div class="w-full"></div> <foxy-internal-undo-control infer="undo"> </foxy-internal-undo-control> <foxy-internal-submit-control infer="submit"> </foxy-internal-submit-control> <foxy-internal-submit-control infer="create" theme="primary success"> </foxy-internal-submit-control> </div> `),["delete","undo","submit","create"].every((e=>this.hiddenSelector.matches(e,!0))))}render(){const e=!(this.in("idle")||this.in({busy:"fetching"})&&this.data);return a(B||(B=W` <div aria-busy="${0}" aria-live="polite" class="relative"> <div class="${0}"> ${0} ${0} ${0} </div> <div data-testid="spinner" class="${0}"> <foxy-spinner layout="${0}" state="${0}" infer="spinner"> </foxy-spinner> ${0} </div> </div> `),this.in("busy"),f({"space-y-m":!0,"transition-all filter":!0,"opacity-30 blur-sm pointer-events-none":e}),this.__generalErrors.map((e=>this.__renderGeneralError(e))),this.status?this.__renderStatus(this.status):"",this.renderBody(),f({"flex flex-col items-center justify-center gap-m":!0,"transition-opacity absolute inset-0":!0,"opacity-0 pointer-events-none":!e}),this.in("fail")?"vertical":"no-label",this.in("fail")?"error":"busy",this.href&&this.in("fail")?a(H||(H=W` <vaadin-button theme="small contrast" @click="${0}"> <foxy-i18n infer="spinner" key="refresh"></foxy-i18n> </vaadin-button> `),(()=>this.refresh())):"")}get __generalErrors(){const e=this.constructor.generalErrorPrefix;return this.errors.filter((t=>t.startsWith(e)))}__renderGeneralError(e){return a(L||(L=W` <foxy-i18n class="leading-xs text-body rounded bg-error-10 block" style="padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)" infer="error" key="${0}"> </foxy-i18n> `),e.replace("error:",""))}__renderStatus({key:e,options:t}){if(!this.hiddenSelector.matches("status",!0))return a(K||(K=W` <p data-testid="status" class="leading-xs text-body rounded bg-success-10 flex items-start gap-m" style="padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)"> <foxy-i18n class="flex-1" infer="status" key="${0}" .options="${0}"></foxy-i18n> <vaadin-button class="flex-shrink-0" theme="success tertiary-inline" @click="${0}"> <foxy-i18n class="flex-1" infer="status" key="close"></foxy-i18n> </vaadin-button> </p> `),e,t,(()=>this.status=null))}}F.generalErrorPrefix="error:",customElements.define("foxy-internal-form",F);export{F as I,g as a,v as b};

package/dist/cdn/translations/admin-subscription-form/en.json

@@ -252,6 +252,8 @@
         "description": "Description",
         "price": "{{amount, price}}",
         "time": "{{value, date}}",
+        "test": "Test",
+        "hidden_hint": "This transaction is archived",
         "status_capturing": "Capturing",
         "status_captured": "Captured",
         "status_approved": "Approved",
@@ -310,6 +312,10 @@
           "alert_status_pending_fraud_review": "The payment gateway flagged this transaction as potentially fraudulent. Please log in to your gateway’s dashboard and look for this transaction to review.",
           "alert_status_rejected": "The payment gateway refused to process this transaction based on its internal policy. You may be able to get more information about this error by logging in to your gateway’s dashboard and looking for this transaction.",
           "alert_status_declined": "The payment method used for this transaction was declined. This could be due to insufficient funds, an expired card, or a different reason. You may be able to get more information about this error in your gateway’s dashboard.",
+          "badges": {
+            "test": "Test",
+            "archived": "Archived"
+          },
           "copy-id": {
             "failed_to_copy": "Failed to copy",
             "click_to_copy": "Copy ID",
@@ -1998,6 +2004,10 @@
           },
           "receipt": {
             "caption": "View receipt"
+          },
+          "archive": {
+            "caption_archive": "Archive",
+            "caption_unarchive": "Unarchive"
           }
         },
         "spinner": {

package/dist/cdn/translations/coupon-code-form/en.json

@@ -42,6 +42,8 @@
         "description": "Description",
         "price": "{{amount, price}}",
         "time": "{{value, date}}",
+        "test": "Test",
+        "hidden_hint": "This transaction is archived",
         "status_capturing": "Capturing",
         "status_captured": "Captured",
         "status_approved": "Approved",

package/dist/cdn/translations/coupon-form/en.json

@@ -233,6 +233,8 @@
               "description": "Description",
               "price": "{{amount, price}}",
               "time": "{{value, date}}",
+              "test": "Test",
+              "hidden_hint": "This transaction is archived",
               "status_capturing": "Capturing",
               "status_captured": "Captured",
               "status_approved": "Approved",

package/dist/cdn/translations/customer/en.json

@@ -1243,6 +1243,8 @@
           "description": "Description",
           "price": "{{amount, price}}",
           "time": "{{value, date}}",
+          "test": "Test",
+          "hidden_hint": "This transaction is archived",
           "status_capturing": "Capturing",
           "status_captured": "Captured",
           "status_approved": "Approved",

package/dist/cdn/translations/customer-portal/de.json

@@ -1047,6 +1047,8 @@
             "description": "Beschreibung",
             "price": "{{amount, price}}",
             "time": "{{value, date}}",
+            "test": "Test",
+            "hidden_hint": "Diese Transaktion ist archiviert",
             "status_capturing": "Erfassen",
             "status_captured": "Gefangen",
             "status_approved": "Genehmigt",

package/dist/cdn/translations/customer-portal/en.json

@@ -1047,6 +1047,8 @@
             "description": "Description",
             "price": "{{amount, price}}",
             "time": "{{value, date}}",
+            "test": "Test",
+            "hidden_hint": "This transaction is archived",
             "status_capturing": "Capturing",
             "status_captured": "Captured",
             "status_approved": "Approved",

package/dist/cdn/translations/customer-portal/es.json

@@ -1047,6 +1047,8 @@
             "description": "Descripción",
             "price": "{{amount, price}}",
             "time": "{{value, date}}",
+            "test": "Test",
+            "hidden_hint": "Esta transacción está archivada",
             "status_capturing": "Capturando",
             "status_captured": "capturado",
             "status_approved": "Aprobado",

package/dist/cdn/translations/customer-portal/fr.json

@@ -1047,6 +1047,8 @@
             "description": "Description",
             "price": "{{amount, price}}",
             "time": "{{value, date}}",
+            "test": "Test",
+            "hidden_hint": "Cette transaction est archivée",
             "status_capturing": "Capturer",
             "status_captured": "Capturé",
             "status_approved": "Approuvé",

package/dist/cdn/translations/customer-portal/nl.json

@@ -1047,6 +1047,8 @@
             "description": "Beschrijving",
             "price": "{{amount, price}}",
             "time": "{{value, date}}",
+            "test": "Test",
+            "hidden_hint": "Deze transactie is gearchiveerd",
             "status_capturing": "Vastleggen",
             "status_captured": "Gevangen genomen",
             "status_approved": "Goedgekeurd",

package/dist/cdn/translations/customer-portal/pl.json

@@ -1047,6 +1047,8 @@
             "description": "Opis",
             "price": "{{amount, price}}",
             "time": "{{value, date}}",
+            "test": "Test",
+            "hidden_hint": "Ta transakcja jest zarchiwizowana",
             "status_capturing": "Przechwytywanie",
             "status_captured": "Złapany",
             "status_approved": "Zatwierdzony",

package/dist/cdn/translations/customer-portal/sv.json

@@ -1047,6 +1047,8 @@
             "description": "Beskrivning",
             "price": "{{amount, price}}",
             "time": "{{value, date}}",
+            "test": "Test",
+            "hidden_hint": "Denna transaktion är arkiverad",
             "status_capturing": "Fångande",
             "status_captured": "Fångad",
             "status_approved": "Godkänd",

package/dist/cdn/translations/customer-portal/zh-hk.json

@@ -1047,6 +1047,8 @@
             "description": "描述",
             "price": "{{amount, price}}",
             "time": "{{value, date}}",
+            "test": "Test",
+            "hidden_hint": "此交易已归档",
             "status_capturing": "捕捉",
             "status_captured": "被捕获",
             "status_approved": "得到正式认可的",

package/dist/cdn/translations/subscription-form/en.json

@@ -167,6 +167,8 @@
         "description": "Description",
         "price": "{{amount, price}}",
         "time": "{{value, date}}",
+        "test": "Test",
+        "hidden_hint": "This transaction is archived",
         "status_capturing": "Capturing",
         "status_captured": "Captured",
         "status_approved": "Approved",

package/dist/cdn/translations/transaction/en.json

@@ -25,6 +25,10 @@
     "alert_status_pending_fraud_review": "The payment gateway flagged this transaction as potentially fraudulent. Please log in to your gateway’s dashboard and look for this transaction to review.",
     "alert_status_rejected": "The payment gateway refused to process this transaction based on its internal policy. You may be able to get more information about this error by logging in to your gateway’s dashboard and looking for this transaction.",
     "alert_status_declined": "The payment method used for this transaction was declined. This could be due to insufficient funds, an expired card, or a different reason. You may be able to get more information about this error in your gateway’s dashboard.",
+    "badges": {
+      "test": "Test",
+      "archived": "Archived"
+    },
     "copy-id": {
       "failed_to_copy": "Failed to copy",
       "click_to_copy": "Copy ID",
@@ -1713,6 +1717,10 @@
     },
     "receipt": {
       "caption": "View receipt"
+    },
+    "archive": {
+      "caption_archive": "Archive",
+      "caption_unarchive": "Unarchive"
     }
   },
   "spinner": {

package/dist/cdn/translations/transaction-card/en.json

@@ -4,6 +4,8 @@
   "description": "Description",
   "price": "{{amount, price}}",
   "time": "{{value, date}} at {{value, time}}",
+  "test": "Test",
+  "hidden_hint": "This transaction is archived",
   "status_capturing": "Capturing",
   "status_captured": "Captured",
   "status_approved": "Approved",
@@ -30,4 +32,4 @@
     "loading_empty": "No data",
     "loading_error": "Unknown error"
   }
-}
+}

package/dist/elements/internal/InternalForm/InternalForm.d.ts

@@ -33,6 +33,10 @@ export declare class InternalForm<TData extends HALJSONResource> extends Base<TD
     get headerSubtitleKey(): string;
     /** I18next options to pass to the header subtitle translation function. Note that subtitle is shown only when data is avaiable. */
     get headerSubtitleOptions(): Record<string, unknown>;
+    /** Getter that returns a list of the optional badges to put into the subtitle. The badges are shown only if subtitle is visible. */
+    get headerSubtitleBadges(): {
+        key: string;
+    }[];
     /** ID that will be written to clipboard when Copy ID button in header is clicked. */
     get headerCopyIdValue(): string | number;
     get hiddenSelector(): BooleanSelector;

package/dist/elements/internal/InternalForm/InternalForm.js

@@ -53,6 +53,10 @@ export class InternalForm extends Base {
         var _a;
         return (_a = this.data) !== null && _a !== void 0 ? _a : {};
     }
+    /** Getter that returns a list of the optional badges to put into the subtitle. The badges are shown only if subtitle is visible. */
+    get headerSubtitleBadges() {
+        return [];
+    }
     /** ID that will be written to clipboard when Copy ID button in header is clicked. */
     get headerCopyIdValue() {
         var _a;
@@ -119,13 +123,24 @@ export class InternalForm extends Base {
           </span>
           ${data
             ? html `
-                <foxy-i18n
-                  infer="header"
-                  class="text-m text-secondary"
-                  key=${this.headerSubtitleKey}
-                  .options=${this.headerSubtitleOptions}
-                >
-                </foxy-i18n>
+                <div class="flex items-center gap-s text-secondary leading-s">
+                  ${this.headerSubtitleBadges.map(badge => {
+                return html `
+                      <foxy-i18n
+                        class="border border-contrast-60 font-medium uppercase tracking-wider block rounded-s px-xs text-xs"
+                        infer="header badges"
+                        key=${badge.key}
+                      >
+                      </foxy-i18n>
+                    `;
+            })}
+                  <foxy-i18n
+                    infer="header"
+                    key=${this.headerSubtitleKey}
+                    .options=${this.headerSubtitleOptions}
+                  >
+                  </foxy-i18n>
+                </div>
                 ${actions ? html `<div class="mt-xs flex gap-m">${actions}</div>` : ''}
               `
             : ''}

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

@@ -1 +1 @@
-{"version":3,"file":"InternalForm.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/InternalForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\nimport type { Status } from './types';\n\nimport { BooleanSelector, getResourceId } from '@foxy.io/sdk/core';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst Base = ConfigurableMixin(ThemeableMixin(NucleonElement));\n\n/**\n * An internal base class for any nucleon-powered form. Renders create/delete\n * buttons and timestamps by default, displays a spinner in non-idle states.\n *\n * @element foxy-internal-form\n * @since 1.17.0\n */\nexport class InternalForm<TData extends HALJSONResource> extends Base<TData> {\n  /** Validation errors with this prefix will show up at the top of the form. */\n  static generalErrorPrefix = 'error:';\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      status: { type: Object },\n    };\n  }\n\n  /** Status message to render at the top of the form. If `null`, the message is hidden. */\n  status: null | Status = null;\n\n  /**\n   * Renders header actions when the optional header is rendered.\n   * Empty by default.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  renderHeaderActions(data: TData): TemplateResult | null {\n    return null;\n  }\n\n  /** Getter that returns a i18n key for the optional form header title. */\n  get headerTitleKey(): string {\n    return 'title';\n  }\n\n  /** I18next options to pass to the header title translation function. */\n  get headerTitleOptions(): Record<string, unknown> {\n    return {\n      ...this.data,\n      context: this.data ? 'existing' : 'new',\n      id: this.data ? getResourceId(this.data._links.self.href) : null,\n    };\n  }\n\n  /** Getter that returns a i18n key for the optional form header subtitle. Note that subtitle is shown only when data is avaiable. */\n  get headerSubtitleKey(): string {\n    return 'subtitle';\n  }\n\n  /** I18next options to pass to the header subtitle translation function. Note that subtitle is shown only when data is avaiable. */\n  get headerSubtitleOptions(): Record<string, unknown> {\n    return this.data ?? {};\n  }\n\n  /** ID that will be written to clipboard when Copy ID button in header is clicked. */\n  get headerCopyIdValue(): string | number {\n    return this.data ? getResourceId(this.data._links.self.href) ?? '' : '';\n  }\n\n  get hiddenSelector(): BooleanSelector {\n    const alwaysMatch = [super.hiddenSelector.toString()];\n    if (this.href) alwaysMatch.unshift('create');\n    if (!this.href) alwaysMatch.unshift('delete', 'timestamps', 'submit');\n    if (!this.in({ idle: { snapshot: 'dirty' } })) alwaysMatch.unshift('undo', 'submit');\n    return new BooleanSelector(alwaysMatch.join(' ').trim());\n  }\n\n  /**\n   * Renders optional form header.\n   * - Customize which actions are rendered with `.renderHeaderActions()` method.\n   * - Customize the header title and subtitle with `.headerTitleKey` and `.headerSubtitleKey` getters.\n   * - Customize the header title and subtitle options with `.headerTitleOptions` and `.headerSubtitleOptions` getters.\n   * - To hide the header completely, add `header` to `hidden-controls` attribute.\n   */\n  renderHeader(): TemplateResult {\n    if (this.hiddenSelector.matches('header', true)) return html``;\n\n    const data = this.data;\n    const actions = data ? this.renderHeaderActions(data) : null;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('header:before')}\n        <h2>\n          <span class=\"flex items-center gap-s leading-xs text-xl font-medium break-all\">\n            <foxy-i18n\n              options=${JSON.stringify(this.headerTitleOptions)}\n              infer=\"header\"\n              key=${this.headerTitleKey}\n            >\n            </foxy-i18n>\n            ${data\n              ? html`\n                  ${this.hiddenSelector.matches('header:copy-id', true)\n                    ? ''\n                    : html`\n                        <foxy-copy-to-clipboard\n                          infer=\"header copy-id\"\n                          class=\"text-m\"\n                          text=${this.headerCopyIdValue}\n                        >\n                        </foxy-copy-to-clipboard>\n                      `}\n                  ${this.hiddenSelector.matches('header:copy-json', true)\n                    ? ''\n                    : html`\n                        <foxy-copy-to-clipboard\n                          infer=\"header copy-json\"\n                          class=\"text-m\"\n                          icon=\"icons:code\"\n                          text=${JSON.stringify(data, null, 2)}\n                        >\n                        </foxy-copy-to-clipboard>\n                      `}\n                `\n              : ''}\n          </span>\n          ${data\n            ? html`\n                <foxy-i18n\n                  infer=\"header\"\n                  class=\"text-m text-secondary\"\n                  key=${this.headerSubtitleKey}\n                  .options=${this.headerSubtitleOptions}\n                >\n                </foxy-i18n>\n                ${actions ? html`<div class=\"mt-xs flex gap-m\">${actions}</div>` : ''}\n              `\n            : ''}\n        </h2>\n        ${this.renderTemplateOrSlot('header:after')}\n      </div>\n    `;\n  }\n\n  /**\n   * Renders form body. This is the method you should implement in your forms\n   * instead of `.render()`. If you'd like to keep the submit button and the timestamps,\n   * don't forget to add `super.renderBody()` to your template.\n   */\n  renderBody(): TemplateResult {\n    const nested = ['delete', 'undo', 'submit', 'create'];\n\n    return html`\n      <foxy-internal-timestamps-control infer=\"timestamps\"></foxy-internal-timestamps-control>\n\n      <div class=\"flex gap-m\" ?hidden=${nested.every(v => this.hiddenSelector.matches(v, true))}>\n        <foxy-internal-delete-control infer=\"delete\"></foxy-internal-delete-control>\n\n        <div class=\"w-full\"></div>\n\n        <foxy-internal-undo-control infer=\"undo\"> </foxy-internal-undo-control>\n        <foxy-internal-submit-control infer=\"submit\"> </foxy-internal-submit-control>\n        <foxy-internal-submit-control infer=\"create\" theme=\"primary success\">\n        </foxy-internal-submit-control>\n      </div>\n    `;\n  }\n\n  /**\n   * Renders the entire form. You should probably implement `.renderBody()`\n   * instead of this method in your form to keep the spinner and the common layout features.\n   */\n  render(): TemplateResult {\n    const isSpinnerVisible = !this.in('idle') && (!this.in({ busy: 'fetching' }) || !this.data);\n\n    return html`\n      <div aria-busy=${this.in('busy')} aria-live=\"polite\" class=\"relative\">\n        <div\n          class=${classMap({\n            'space-y-m': true,\n            'transition-all filter': true,\n            'opacity-30 blur-sm pointer-events-none': isSpinnerVisible,\n          })}\n        >\n          ${this.__generalErrors.map(err => this.__renderGeneralError(err))}\n          ${this.status ? this.__renderStatus(this.status) : ''} ${this.renderBody()}\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'flex flex-col items-center justify-center gap-m': true,\n            'transition-opacity absolute inset-0': true,\n            'opacity-0 pointer-events-none': !isSpinnerVisible,\n          })}\n        >\n          <foxy-spinner\n            layout=${this.in('fail') ? 'vertical' : 'no-label'}\n            state=${this.in('fail') ? 'error' : 'busy'}\n            infer=\"spinner\"\n          >\n          </foxy-spinner>\n          ${this.href && this.in('fail')\n            ? html`\n                <vaadin-button theme=\"small contrast\" @click=${() => this.refresh()}>\n                  <foxy-i18n infer=\"spinner\" key=\"refresh\"></foxy-i18n>\n                </vaadin-button>\n              `\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n\n  private get __generalErrors() {\n    const prefix = (this.constructor as typeof InternalForm).generalErrorPrefix;\n    return this.errors.filter(v => v.startsWith(prefix));\n  }\n\n  private __renderGeneralError(err: string) {\n    return html`\n      <foxy-i18n\n        class=\"leading-xs text-body rounded bg-error-10 block\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n        infer=\"error\"\n        key=${err.replace('error:', '')}\n      >\n      </foxy-i18n>\n    `;\n  }\n\n  private __renderStatus({ key, options }: Status) {\n    if (this.hiddenSelector.matches('status', true)) return;\n    return html`\n      <p\n        data-testid=\"status\"\n        class=\"leading-xs text-body rounded bg-success-10 flex items-start gap-m\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n      >\n        <foxy-i18n class=\"flex-1\" infer=\"status\" key=${key} .options=${options}></foxy-i18n>\n        <vaadin-button\n          class=\"flex-shrink-0\"\n          theme=\"success tertiary-inline\"\n          @click=${() => (this.status = null)}\n        >\n          <foxy-i18n class=\"flex-1\" infer=\"status\" key=\"close\"></foxy-i18n>\n        </vaadin-button>\n      </p>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalForm.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/InternalForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\nimport type { Status } from './types';\n\nimport { BooleanSelector, getResourceId } from '@foxy.io/sdk/core';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst Base = ConfigurableMixin(ThemeableMixin(NucleonElement));\n\n/**\n * An internal base class for any nucleon-powered form. Renders create/delete\n * buttons and timestamps by default, displays a spinner in non-idle states.\n *\n * @element foxy-internal-form\n * @since 1.17.0\n */\nexport class InternalForm<TData extends HALJSONResource> extends Base<TData> {\n  /** Validation errors with this prefix will show up at the top of the form. */\n  static generalErrorPrefix = 'error:';\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      status: { type: Object },\n    };\n  }\n\n  /** Status message to render at the top of the form. If `null`, the message is hidden. */\n  status: null | Status = null;\n\n  /**\n   * Renders header actions when the optional header is rendered.\n   * Empty by default.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  renderHeaderActions(data: TData): TemplateResult | null {\n    return null;\n  }\n\n  /** Getter that returns a i18n key for the optional form header title. */\n  get headerTitleKey(): string {\n    return 'title';\n  }\n\n  /** I18next options to pass to the header title translation function. */\n  get headerTitleOptions(): Record<string, unknown> {\n    return {\n      ...this.data,\n      context: this.data ? 'existing' : 'new',\n      id: this.data ? getResourceId(this.data._links.self.href) : null,\n    };\n  }\n\n  /** Getter that returns a i18n key for the optional form header subtitle. Note that subtitle is shown only when data is avaiable. */\n  get headerSubtitleKey(): string {\n    return 'subtitle';\n  }\n\n  /** I18next options to pass to the header subtitle translation function. Note that subtitle is shown only when data is avaiable. */\n  get headerSubtitleOptions(): Record<string, unknown> {\n    return this.data ?? {};\n  }\n\n  /** Getter that returns a list of the optional badges to put into the subtitle. The badges are shown only if subtitle is visible. */\n  get headerSubtitleBadges(): { key: string }[] {\n    return [];\n  }\n\n  /** ID that will be written to clipboard when Copy ID button in header is clicked. */\n  get headerCopyIdValue(): string | number {\n    return this.data ? getResourceId(this.data._links.self.href) ?? '' : '';\n  }\n\n  get hiddenSelector(): BooleanSelector {\n    const alwaysMatch = [super.hiddenSelector.toString()];\n    if (this.href) alwaysMatch.unshift('create');\n    if (!this.href) alwaysMatch.unshift('delete', 'timestamps', 'submit');\n    if (!this.in({ idle: { snapshot: 'dirty' } })) alwaysMatch.unshift('undo', 'submit');\n    return new BooleanSelector(alwaysMatch.join(' ').trim());\n  }\n\n  /**\n   * Renders optional form header.\n   * - Customize which actions are rendered with `.renderHeaderActions()` method.\n   * - Customize the header title and subtitle with `.headerTitleKey` and `.headerSubtitleKey` getters.\n   * - Customize the header title and subtitle options with `.headerTitleOptions` and `.headerSubtitleOptions` getters.\n   * - To hide the header completely, add `header` to `hidden-controls` attribute.\n   */\n  renderHeader(): TemplateResult {\n    if (this.hiddenSelector.matches('header', true)) return html``;\n\n    const data = this.data;\n    const actions = data ? this.renderHeaderActions(data) : null;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('header:before')}\n        <h2>\n          <span class=\"flex items-center gap-s leading-xs text-xl font-medium break-all\">\n            <foxy-i18n\n              options=${JSON.stringify(this.headerTitleOptions)}\n              infer=\"header\"\n              key=${this.headerTitleKey}\n            >\n            </foxy-i18n>\n            ${data\n              ? html`\n                  ${this.hiddenSelector.matches('header:copy-id', true)\n                    ? ''\n                    : html`\n                        <foxy-copy-to-clipboard\n                          infer=\"header copy-id\"\n                          class=\"text-m\"\n                          text=${this.headerCopyIdValue}\n                        >\n                        </foxy-copy-to-clipboard>\n                      `}\n                  ${this.hiddenSelector.matches('header:copy-json', true)\n                    ? ''\n                    : html`\n                        <foxy-copy-to-clipboard\n                          infer=\"header copy-json\"\n                          class=\"text-m\"\n                          icon=\"icons:code\"\n                          text=${JSON.stringify(data, null, 2)}\n                        >\n                        </foxy-copy-to-clipboard>\n                      `}\n                `\n              : ''}\n          </span>\n          ${data\n            ? html`\n                <div class=\"flex items-center gap-s text-secondary leading-s\">\n                  ${this.headerSubtitleBadges.map(badge => {\n                    return html`\n                      <foxy-i18n\n                        class=\"border border-contrast-60 font-medium uppercase tracking-wider block rounded-s px-xs text-xs\"\n                        infer=\"header badges\"\n                        key=${badge.key}\n                      >\n                      </foxy-i18n>\n                    `;\n                  })}\n                  <foxy-i18n\n                    infer=\"header\"\n                    key=${this.headerSubtitleKey}\n                    .options=${this.headerSubtitleOptions}\n                  >\n                  </foxy-i18n>\n                </div>\n                ${actions ? html`<div class=\"mt-xs flex gap-m\">${actions}</div>` : ''}\n              `\n            : ''}\n        </h2>\n        ${this.renderTemplateOrSlot('header:after')}\n      </div>\n    `;\n  }\n\n  /**\n   * Renders form body. This is the method you should implement in your forms\n   * instead of `.render()`. If you'd like to keep the submit button and the timestamps,\n   * don't forget to add `super.renderBody()` to your template.\n   */\n  renderBody(): TemplateResult {\n    const nested = ['delete', 'undo', 'submit', 'create'];\n\n    return html`\n      <foxy-internal-timestamps-control infer=\"timestamps\"></foxy-internal-timestamps-control>\n\n      <div class=\"flex gap-m\" ?hidden=${nested.every(v => this.hiddenSelector.matches(v, true))}>\n        <foxy-internal-delete-control infer=\"delete\"></foxy-internal-delete-control>\n\n        <div class=\"w-full\"></div>\n\n        <foxy-internal-undo-control infer=\"undo\"> </foxy-internal-undo-control>\n        <foxy-internal-submit-control infer=\"submit\"> </foxy-internal-submit-control>\n        <foxy-internal-submit-control infer=\"create\" theme=\"primary success\">\n        </foxy-internal-submit-control>\n      </div>\n    `;\n  }\n\n  /**\n   * Renders the entire form. You should probably implement `.renderBody()`\n   * instead of this method in your form to keep the spinner and the common layout features.\n   */\n  render(): TemplateResult {\n    const isSpinnerVisible = !this.in('idle') && (!this.in({ busy: 'fetching' }) || !this.data);\n\n    return html`\n      <div aria-busy=${this.in('busy')} aria-live=\"polite\" class=\"relative\">\n        <div\n          class=${classMap({\n            'space-y-m': true,\n            'transition-all filter': true,\n            'opacity-30 blur-sm pointer-events-none': isSpinnerVisible,\n          })}\n        >\n          ${this.__generalErrors.map(err => this.__renderGeneralError(err))}\n          ${this.status ? this.__renderStatus(this.status) : ''} ${this.renderBody()}\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'flex flex-col items-center justify-center gap-m': true,\n            'transition-opacity absolute inset-0': true,\n            'opacity-0 pointer-events-none': !isSpinnerVisible,\n          })}\n        >\n          <foxy-spinner\n            layout=${this.in('fail') ? 'vertical' : 'no-label'}\n            state=${this.in('fail') ? 'error' : 'busy'}\n            infer=\"spinner\"\n          >\n          </foxy-spinner>\n          ${this.href && this.in('fail')\n            ? html`\n                <vaadin-button theme=\"small contrast\" @click=${() => this.refresh()}>\n                  <foxy-i18n infer=\"spinner\" key=\"refresh\"></foxy-i18n>\n                </vaadin-button>\n              `\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n\n  private get __generalErrors() {\n    const prefix = (this.constructor as typeof InternalForm).generalErrorPrefix;\n    return this.errors.filter(v => v.startsWith(prefix));\n  }\n\n  private __renderGeneralError(err: string) {\n    return html`\n      <foxy-i18n\n        class=\"leading-xs text-body rounded bg-error-10 block\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n        infer=\"error\"\n        key=${err.replace('error:', '')}\n      >\n      </foxy-i18n>\n    `;\n  }\n\n  private __renderStatus({ key, options }: Status) {\n    if (this.hiddenSelector.matches('status', true)) return;\n    return html`\n      <p\n        data-testid=\"status\"\n        class=\"leading-xs text-body rounded bg-success-10 flex items-start gap-m\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n      >\n        <foxy-i18n class=\"flex-1\" infer=\"status\" key=${key} .options=${options}></foxy-i18n>\n        <vaadin-button\n          class=\"flex-shrink-0\"\n          theme=\"success tertiary-inline\"\n          @click=${() => (this.status = null)}\n        >\n          <foxy-i18n class=\"flex-1\" infer=\"status\" key=\"close\"></foxy-i18n>\n        </vaadin-button>\n      </p>\n    `;\n  }\n}\n"]}

package/dist/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormLinkControl/InternalAdminSubscriptionFormLinkControl.js

@@ -29,20 +29,12 @@ export class InternalAdminSubscriptionFormLinkControl extends ResponsiveMixin(In
             href = undefined;
         }
         return html `
-      <div class="leading-xs flex items-center gap-s">
-        <a
-          target="_blank"
-          class="truncate min-w-0 font-medium rounded cursor-pointer text-primary hover-underline focus-outline-none focus-ring-2 focus-ring-primary-50"
-          href=${href}
-        >
-          <foxy-i18n infer="" key="label"></foxy-i18n>
-        </a>
-
-        <span> &bull; </span>
-
+      <div class="leading-xs flex items-center gap-xs">
+        <foxy-i18n class="truncate min-w-0" infer="" key="label"></foxy-i18n>
+        <span class="text-tertiary"> &bull; </span>
         <foxy-copy-to-clipboard
-          layout="text"
-          theme="tertiary-inline contrast"
+          layout="complete"
+          theme="tertiary-inline"
           infer="copy-to-clipboard"
           text=${href}
         >

package/dist/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormLinkControl/InternalAdminSubscriptionFormLinkControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalAdminSubscriptionFormLinkControl.js","sourceRoot":"","sources":["../../../../../../src/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormLinkControl/InternalAdminSubscriptionFormLinkControl.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,4CAAyC;AACnE,OAAO,EAAE,eAAe,EAAE,gEAA6D;AACvF,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,OAAO,wCAAyC,SAAQ,eAAe,CAAC,eAAe,CAAC;IAA9F;;QAQE,WAAM,GAAkB,IAAI,CAAC;IA6C/B,CAAC;IApDC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE;SACX,CAAC;IACJ,CAAC;IAID,aAAa;;QACX,MAAM,IAAI,GAAG,IAAI,CAAC,OAAuC,CAAC;QAC1D,IAAI,IAAwB,CAAC;QAE7B,IAAI;YACF,MAAM,GAAG,GAAG,IAAI,GAAG,aAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,0CAAE,MAAM,CAAC,kBAAkB,EAAE,IAAI,mCAAI,EAAE,CAAC,CAAC;YAEvE,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,MAAM,cAAc,GAAG,IAAI,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;gBACvD,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;gBACzB,cAAc,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;aAC1E;YAED,IAAI,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;SACvB;QAAC,WAAM;YACN,IAAI,GAAG,SAAS,CAAC;SAClB;QAED,OAAO,IAAI,CAAA;;;;;iBAKE,IAAI;;;;;;;;;;;iBAWJ,IAAI;;;;;;;KAOhB,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { AdminSubscriptionForm } from '../../AdminSubscriptionForm';\nimport type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\n\nimport { ResponsiveMixin } from '../../../../../mixins/responsive';\nimport { InternalControl } from '../../../../internal/InternalControl/InternalControl';\nimport { html } from 'lit-html';\n\nexport class InternalAdminSubscriptionFormLinkControl extends ResponsiveMixin(InternalControl) {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      search: {},\n    };\n  }\n\n  search: string | null = null;\n\n  renderControl(): TemplateResult {\n    const form = this.nucleon as AdminSubscriptionForm | null;\n    let href: string | undefined;\n\n    try {\n      const url = new URL(form?.data?._links['fx:sub_token_url'].href ?? '');\n\n      if (this.search) {\n        const originalParams = new URLSearchParams(url.search);\n        url.search = this.search;\n        originalParams.forEach((value, key) => url.searchParams.set(key, value));\n      }\n\n      href = url.toString();\n    } catch {\n      href = undefined;\n    }\n\n    return html`\n      <div class=\"leading-xs flex items-center gap-s\">\n        <a\n          target=\"_blank\"\n          class=\"truncate min-w-0 font-medium rounded cursor-pointer text-primary hover-underline focus-outline-none focus-ring-2 focus-ring-primary-50\"\n          href=${href}\n        >\n          <foxy-i18n infer=\"\" key=\"label\"></foxy-i18n>\n        </a>\n\n        <span> &bull; </span>\n\n        <foxy-copy-to-clipboard\n          layout=\"text\"\n          theme=\"tertiary-inline contrast\"\n          infer=\"copy-to-clipboard\"\n          text=${href}\n        >\n        </foxy-copy-to-clipboard>\n      </div>\n\n      <foxy-i18n class=\"leading-xs block text-xs text-secondary\" infer=\"\" key=\"helper_text\">\n      </foxy-i18n>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalAdminSubscriptionFormLinkControl.js","sourceRoot":"","sources":["../../../../../../src/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormLinkControl/InternalAdminSubscriptionFormLinkControl.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,4CAAyC;AACnE,OAAO,EAAE,eAAe,EAAE,gEAA6D;AACvF,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,OAAO,wCAAyC,SAAQ,eAAe,CAAC,eAAe,CAAC;IAA9F;;QAQE,WAAM,GAAkB,IAAI,CAAC;IAqC/B,CAAC;IA5CC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE;SACX,CAAC;IACJ,CAAC;IAID,aAAa;;QACX,MAAM,IAAI,GAAG,IAAI,CAAC,OAAuC,CAAC;QAC1D,IAAI,IAAwB,CAAC;QAE7B,IAAI;YACF,MAAM,GAAG,GAAG,IAAI,GAAG,aAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,0CAAE,MAAM,CAAC,kBAAkB,EAAE,IAAI,mCAAI,EAAE,CAAC,CAAC;YAEvE,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,MAAM,cAAc,GAAG,IAAI,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;gBACvD,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;gBACzB,cAAc,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;aAC1E;YAED,IAAI,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;SACvB;QAAC,WAAM;YACN,IAAI,GAAG,SAAS,CAAC;SAClB;QAED,OAAO,IAAI,CAAA;;;;;;;;iBAQE,IAAI;;;;;;;KAOhB,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { AdminSubscriptionForm } from '../../AdminSubscriptionForm';\nimport type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\n\nimport { ResponsiveMixin } from '../../../../../mixins/responsive';\nimport { InternalControl } from '../../../../internal/InternalControl/InternalControl';\nimport { html } from 'lit-html';\n\nexport class InternalAdminSubscriptionFormLinkControl extends ResponsiveMixin(InternalControl) {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      search: {},\n    };\n  }\n\n  search: string | null = null;\n\n  renderControl(): TemplateResult {\n    const form = this.nucleon as AdminSubscriptionForm | null;\n    let href: string | undefined;\n\n    try {\n      const url = new URL(form?.data?._links['fx:sub_token_url'].href ?? '');\n\n      if (this.search) {\n        const originalParams = new URLSearchParams(url.search);\n        url.search = this.search;\n        originalParams.forEach((value, key) => url.searchParams.set(key, value));\n      }\n\n      href = url.toString();\n    } catch {\n      href = undefined;\n    }\n\n    return html`\n      <div class=\"leading-xs flex items-center gap-xs\">\n        <foxy-i18n class=\"truncate min-w-0\" infer=\"\" key=\"label\"></foxy-i18n>\n        <span class=\"text-tertiary\"> &bull; </span>\n        <foxy-copy-to-clipboard\n          layout=\"complete\"\n          theme=\"tertiary-inline\"\n          infer=\"copy-to-clipboard\"\n          text=${href}\n        >\n        </foxy-copy-to-clipboard>\n      </div>\n\n      <foxy-i18n class=\"leading-xs block text-xs text-secondary\" infer=\"\" key=\"helper_text\">\n      </foxy-i18n>\n    `;\n  }\n}\n"]}

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

@@ -16,7 +16,7 @@ export declare class CopyToClipboard extends Base {
     static get properties(): PropertyDeclarations;
     static get styles(): CSSResult;
     /** Icon or text UI. Icon UI by default. */
-    layout: 'text' | 'icon' | null;
+    layout: 'complete' | 'text' | 'icon' | null;
     /** VaadinButton theme for text layout. */
     theme: string | null;
     /** Default icon. */

package/dist/elements/public/CopyToClipboard/CopyToClipboard.js

@@ -90,8 +90,8 @@ iron-icon{
     `;
     }
     render() {
-        var _a, _b;
-        const layout = this.layout === 'text' ? 'text' : 'icon';
+        var _a, _b, _c;
+        const layout = (_a = this.layout) !== null && _a !== void 0 ? _a : 'icon';
         let label = '';
         let icon = '';
         if (this.__state === 'busy') {
@@ -108,7 +108,7 @@ iron-icon{
         }
         else {
             label = 'click_to_copy';
-            icon = (_a = this.icon) !== null && _a !== void 0 ? _a : 'icons:content-copy';
+            icon = (_b = this.icon) !== null && _b !== void 0 ? _b : 'icons:content-copy';
         }
         return html `
       ${layout === 'icon'
@@ -134,11 +134,20 @@ iron-icon{
           `
             : html `
             <vaadin-button
-              theme=${ifDefined((_b = this.theme) !== null && _b !== void 0 ? _b : void 0)}
+              theme=${ifDefined((_c = this.theme) !== null && _c !== void 0 ? _c : void 0)}
               ?disabled=${this.disabled}
               @click=${this.__copy}
             >
               <foxy-i18n infer="" key=${label}></foxy-i18n>
+              ${layout === 'complete'
+                ? html `
+                    <iron-icon
+                      style="--lumo-icon-size-m: 1em; transform: translateY(-0.1em)"
+                      icon=${icon}
+                    >
+                    </iron-icon>
+                  `
+                : ''}
             </vaadin-button>
           `}
     `;

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

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipboard.js","sourceRoot":"","sources":["../../../../src/elements/public/CopyToClipboard/CopyToClipboard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResult, PropertyDeclarations, TemplateResult } from 'lit-element';\n\nimport { LitElement, css, html } from 'lit-element';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { InferrableMixin } from '../../../mixins/inferrable';\nimport { ifDefined } from 'lit-html/directives/if-defined';\n\nconst NS = 'copy-to-clipboard';\nconst Base = ConfigurableMixin(TranslatableMixin(InferrableMixin(LitElement), NS));\n\n/**\n * A simple \"click to copy\" button that takes the size of the font\n * your text is written in (considering that the font styles are applied to container).\n *\n * @element foxy-copy-to-clipboard\n * @since 1.17.0\n */\nexport class CopyToClipboard extends Base {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      layout: {},\n      theme: {},\n      text: { type: String },\n      icon: { type: String },\n      __state: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResult {\n    return css`\n      .icon-button {\n        position: relative;\n        appearance: none;\n        background: none;\n        border: none;\n        border-radius: var(--lumo-border-radius-s);\n        color: inherit;\n        font-size: inherit;\n        padding: 0;\n        width: 1.5em;\n        height: 1.5em;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n\n      .icon-button::before {\n        position: absolute;\n        inset: 0;\n        content: ' ';\n        display: block;\n        background: currentColor;\n        opacity: 0.08;\n        transition: opacity 0.15s ease;\n        border-radius: var(--lumo-border-radius-s);\n      }\n\n      .icon-button:focus {\n        outline: none;\n        box-shadow: 0 0 0 2px currentColor;\n      }\n\n      .icon-button:disabled {\n        opacity: 0.5;\n        cursor: default;\n      }\n\n      @media (hover: hover) {\n        .icon-button:not(:disabled):hover {\n          cursor: pointer;\n        }\n\n        .icon-button:not(:disabled):hover::before {\n          opacity: 0.16;\n        }\n      }\n\n      iron-icon {\n        --iron-icon-height: 1em;\n        --iron-icon-width: 1em;\n      }\n    `;\n  }\n\n  /** Icon or text UI. Icon UI by default. */\n  layout: 'text' | 'icon' | null = null;\n\n  /** VaadinButton theme for text layout. */\n  theme: string | null = null;\n\n  /** Default icon. */\n  icon: string | null = null;\n\n  /** Text to copy. */\n  text: string | null = null;\n\n  private __state: 'idle' | 'busy' | 'fail' | 'done' = 'idle';\n\n  render(): TemplateResult {\n    const layout = this.layout === 'text' ? 'text' : 'icon';\n    let label = '';\n    let icon = '';\n\n    if (this.__state === 'busy') {\n      label = 'copying';\n      icon = 'icons:hourglass-empty';\n    } else if (this.__state === 'fail') {\n      label = 'failed_to_copy';\n      icon = 'icons:error-outline';\n    } else if (this.__state === 'done') {\n      label = 'done';\n      icon = 'icons:done';\n    } else {\n      label = 'click_to_copy';\n      icon = this.icon ?? 'icons:content-copy';\n    }\n\n    return html`\n      ${layout === 'icon'\n        ? html`\n            <button\n              id=\"trigger\"\n              class=\"icon-button\"\n              ?disabled=${this.disabled}\n              @click=${this.__copy}\n            >\n              <iron-icon icon=${icon}></iron-icon>\n            </button>\n            <vcf-tooltip\n              position=\"bottom\"\n              style=\"--lumo-base-color: black\"\n              theme=\"light\"\n              for=\"trigger\"\n            >\n              <span class=\"text-s\" style=\"color: white\">\n                <foxy-i18n infer=\"\" key=${label}></foxy-i18n>\n              </span>\n            </vcf-tooltip>\n          `\n        : html`\n            <vaadin-button\n              theme=${ifDefined(this.theme ?? void 0)}\n              ?disabled=${this.disabled}\n              @click=${this.__copy}\n            >\n              <foxy-i18n infer=\"\" key=${label}></foxy-i18n>\n            </vaadin-button>\n          `}\n    `;\n  }\n\n  private __copy() {\n    if (this.__state === 'idle') {\n      this.__state = 'busy';\n\n      navigator.clipboard\n        .writeText(this.text ?? '')\n        .then(() => (this.__state = 'done'))\n        .catch(() => (this.__state = 'fail'))\n        .then(() => setTimeout(() => (this.__state = 'idle'), 2000));\n    }\n  }\n}\n"]}
+{"version":3,"file":"CopyToClipboard.js","sourceRoot":"","sources":["../../../../src/elements/public/CopyToClipboard/CopyToClipboard.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,MAAM,EAAE,GAAG,mBAAmB,CAAC;AAC/B,MAAM,IAAI,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,eAAe,CAAC,UAAU,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;AAEnF;;;;;;GAMG;AACH,MAAM,OAAO,eAAgB,SAAQ,IAAI;IAAzC;;QAoEE,2CAA2C;QAC3C,WAAM,GAAwC,IAAI,CAAC;QAEnD,0CAA0C;QAC1C,UAAK,GAAkB,IAAI,CAAC;QAE5B,oBAAoB;QACpB,SAAI,GAAkB,IAAI,CAAC;QAE3B,oBAAoB;QACpB,SAAI,GAAkB,IAAI,CAAC;QAEnB,YAAO,GAAsC,MAAM,CAAC;IA2E9D,CAAC;IA1JC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE;YACT,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACtB,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACtB,OAAO,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAC9B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoDT,CAAC;IACJ,CAAC;IAgBD,MAAM;;QACJ,MAAM,MAAM,SAAG,IAAI,CAAC,MAAM,mCAAI,MAAM,CAAC;QACrC,IAAI,KAAK,GAAG,EAAE,CAAC;QACf,IAAI,IAAI,GAAG,EAAE,CAAC;QAEd,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,EAAE;YAC3B,KAAK,GAAG,SAAS,CAAC;YAClB,IAAI,GAAG,uBAAuB,CAAC;SAChC;aAAM,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,EAAE;YAClC,KAAK,GAAG,gBAAgB,CAAC;YACzB,IAAI,GAAG,qBAAqB,CAAC;SAC9B;aAAM,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,EAAE;YAClC,KAAK,GAAG,MAAM,CAAC;YACf,IAAI,GAAG,YAAY,CAAC;SACrB;aAAM;YACL,KAAK,GAAG,eAAe,CAAC;YACxB,IAAI,SAAG,IAAI,CAAC,IAAI,mCAAI,oBAAoB,CAAC;SAC1C;QAED,OAAO,IAAI,CAAA;QACP,MAAM,KAAK,MAAM;YACjB,CAAC,CAAC,IAAI,CAAA;;;;0BAIY,IAAI,CAAC,QAAQ;uBAChB,IAAI,CAAC,MAAM;;gCAEF,IAAI;;;;;;;;;0CASM,KAAK;;;WAGpC;YACH,CAAC,CAAC,IAAI,CAAA;;sBAEQ,SAAS,OAAC,IAAI,CAAC,KAAK,mCAAI,KAAK,CAAC,CAAC;0BAC3B,IAAI,CAAC,QAAQ;uBAChB,IAAI,CAAC,MAAM;;wCAEM,KAAK;gBAC7B,MAAM,KAAK,UAAU;gBACrB,CAAC,CAAC,IAAI,CAAA;;;6BAGO,IAAI;;;mBAGd;gBACH,CAAC,CAAC,EAAE;;WAET;KACN,CAAC;IACJ,CAAC;IAEO,MAAM;;QACZ,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,EAAE;YAC3B,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;YAEtB,SAAS,CAAC,SAAS;iBAChB,SAAS,OAAC,IAAI,CAAC,IAAI,mCAAI,EAAE,CAAC;iBAC1B,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;iBACnC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;iBACpC,IAAI,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;SAChE;IACH,CAAC;CACF","sourcesContent":["import type { CSSResult, PropertyDeclarations, TemplateResult } from 'lit-element';\n\nimport { LitElement, css, html } from 'lit-element';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { InferrableMixin } from '../../../mixins/inferrable';\nimport { ifDefined } from 'lit-html/directives/if-defined';\n\nconst NS = 'copy-to-clipboard';\nconst Base = ConfigurableMixin(TranslatableMixin(InferrableMixin(LitElement), NS));\n\n/**\n * A simple \"click to copy\" button that takes the size of the font\n * your text is written in (considering that the font styles are applied to container).\n *\n * @element foxy-copy-to-clipboard\n * @since 1.17.0\n */\nexport class CopyToClipboard extends Base {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      layout: {},\n      theme: {},\n      text: { type: String },\n      icon: { type: String },\n      __state: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResult {\n    return css`\n      .icon-button {\n        position: relative;\n        appearance: none;\n        background: none;\n        border: none;\n        border-radius: var(--lumo-border-radius-s);\n        color: inherit;\n        font-size: inherit;\n        padding: 0;\n        width: 1.5em;\n        height: 1.5em;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n\n      .icon-button::before {\n        position: absolute;\n        inset: 0;\n        content: ' ';\n        display: block;\n        background: currentColor;\n        opacity: 0.08;\n        transition: opacity 0.15s ease;\n        border-radius: var(--lumo-border-radius-s);\n      }\n\n      .icon-button:focus {\n        outline: none;\n        box-shadow: 0 0 0 2px currentColor;\n      }\n\n      .icon-button:disabled {\n        opacity: 0.5;\n        cursor: default;\n      }\n\n      @media (hover: hover) {\n        .icon-button:not(:disabled):hover {\n          cursor: pointer;\n        }\n\n        .icon-button:not(:disabled):hover::before {\n          opacity: 0.16;\n        }\n      }\n\n      iron-icon {\n        --iron-icon-height: 1em;\n        --iron-icon-width: 1em;\n      }\n    `;\n  }\n\n  /** Icon or text UI. Icon UI by default. */\n  layout: 'complete' | 'text' | 'icon' | null = null;\n\n  /** VaadinButton theme for text layout. */\n  theme: string | null = null;\n\n  /** Default icon. */\n  icon: string | null = null;\n\n  /** Text to copy. */\n  text: string | null = null;\n\n  private __state: 'idle' | 'busy' | 'fail' | 'done' = 'idle';\n\n  render(): TemplateResult {\n    const layout = this.layout ?? 'icon';\n    let label = '';\n    let icon = '';\n\n    if (this.__state === 'busy') {\n      label = 'copying';\n      icon = 'icons:hourglass-empty';\n    } else if (this.__state === 'fail') {\n      label = 'failed_to_copy';\n      icon = 'icons:error-outline';\n    } else if (this.__state === 'done') {\n      label = 'done';\n      icon = 'icons:done';\n    } else {\n      label = 'click_to_copy';\n      icon = this.icon ?? 'icons:content-copy';\n    }\n\n    return html`\n      ${layout === 'icon'\n        ? html`\n            <button\n              id=\"trigger\"\n              class=\"icon-button\"\n              ?disabled=${this.disabled}\n              @click=${this.__copy}\n            >\n              <iron-icon icon=${icon}></iron-icon>\n            </button>\n            <vcf-tooltip\n              position=\"bottom\"\n              style=\"--lumo-base-color: black\"\n              theme=\"light\"\n              for=\"trigger\"\n            >\n              <span class=\"text-s\" style=\"color: white\">\n                <foxy-i18n infer=\"\" key=${label}></foxy-i18n>\n              </span>\n            </vcf-tooltip>\n          `\n        : html`\n            <vaadin-button\n              theme=${ifDefined(this.theme ?? void 0)}\n              ?disabled=${this.disabled}\n              @click=${this.__copy}\n            >\n              <foxy-i18n infer=\"\" key=${label}></foxy-i18n>\n              ${layout === 'complete'\n                ? html`\n                    <iron-icon\n                      style=\"--lumo-icon-size-m: 1em; transform: translateY(-0.1em)\"\n                      icon=${icon}\n                    >\n                    </iron-icon>\n                  `\n                : ''}\n            </vaadin-button>\n          `}\n    `;\n  }\n\n  private __copy() {\n    if (this.__state === 'idle') {\n      this.__state = 'busy';\n\n      navigator.clipboard\n        .writeText(this.text ?? '')\n        .then(() => (this.__state = 'done'))\n        .catch(() => (this.__state = 'fail'))\n        .then(() => setTimeout(() => (this.__state = 'idle'), 2000));\n    }\n  }\n}\n"]}

package/dist/elements/public/StoreForm/StoreForm.js

@@ -912,12 +912,11 @@ export class StoreForm extends Base {
         const config = this.__getCustomDisplayIdConfig();
         const startAsInt = parseInt(config.start || '0');
         const lengthAsInt = parseInt(config.length || '0');
-        const numericLength = lengthAsInt - config.prefix.length - config.suffix.length;
-        const randomExampleNumericId = Math.min(startAsInt + Math.floor(Math.random() * Math.pow(10, numericLength)), Math.pow(10, numericLength) - 1);
-        if (config.start && config.length && startAsInt / 10 <= numericLength) {
+        const randomExampleNumericId = Math.min(startAsInt + Math.floor(Math.random() * Math.pow(10, lengthAsInt)), Math.pow(10, lengthAsInt) - 1);
+        if (config.start && config.length && startAsInt / 10 <= lengthAsInt) {
             return {
-                first: `${config.prefix}${startAsInt.toString().padStart(numericLength, '0')}${config.suffix}`,
-                random: `${config.prefix}${randomExampleNumericId.toString().padStart(numericLength, '0')}${config.suffix}`,
+                first: `${config.prefix}${startAsInt.toString().padStart(lengthAsInt, '0')}${config.suffix}`,
+                random: `${config.prefix}${randomExampleNumericId.toString().padStart(lengthAsInt, '0')}${config.suffix}`,
             };
         }
     }
@@ -926,16 +925,15 @@ export class StoreForm extends Base {
         const transactionJournalEntriesConfig = customDisplayIdConfig.transaction_journal_entries;
         const startAsInt = parseInt(customDisplayIdConfig.start || '0');
         const lengthAsInt = parseInt(customDisplayIdConfig.length || '0');
-        const numericLength = lengthAsInt - customDisplayIdConfig.prefix.length - customDisplayIdConfig.suffix.length;
-        const randomExampleNumericId = Math.min(startAsInt + Math.floor(Math.random() * Math.pow(10, numericLength)), Math.pow(10, numericLength) - 1);
+        const randomExampleNumericId = Math.min(startAsInt + Math.floor(Math.random() * Math.pow(10, lengthAsInt)), Math.pow(10, lengthAsInt) - 1);
         const randomExampleId = `${customDisplayIdConfig.prefix}${randomExampleNumericId
             .toString()
-            .padStart(numericLength, '0')}${customDisplayIdConfig.suffix}`;
+            .padStart(lengthAsInt, '0')}${customDisplayIdConfig.suffix}`;
         const randomNumericEntryId = Math.floor(Math.random() * 1000);
         const randomEntryId = String(randomNumericEntryId).padStart(3, '0');
         if (customDisplayIdConfig.start &&
             customDisplayIdConfig.length &&
-            startAsInt / 10 <= numericLength) {
+            startAsInt / 10 <= lengthAsInt) {
             return {
                 authcapture: `${randomExampleId}${transactionJournalEntriesConfig.transaction_separator}${transactionJournalEntriesConfig.log_detail_request_types.transaction_authcapture.prefix}${randomEntryId}`,
                 capture: `${randomExampleId}${transactionJournalEntriesConfig.transaction_separator}${transactionJournalEntriesConfig.log_detail_request_types.transaction_capture.prefix}${randomEntryId}`,