@foxy.io/elements 1.41.0 → 1.42.0-beta.1

package/dist/cdn/shared-f00ebf92.js

@@ -1 +0,0 @@
-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-3c0dcb9e.js";import{s as o}from"./shared-0aedd809.js";import"./shared-2fe84d72.js";import"./shared-5c6a00e9.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-7eefc244.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 $,S=e=>e;customElements.define("foxy-internal-timestamps-control",class extends b{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 b{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 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,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,b};