@digital-blueprint/formalize-app
Version:
[GitHub Repository](https://github.com/digital-blueprint/formalize-app) | [npmjs package](https://www.npmjs.com/package/@digital-blueprint/formalize-app) | [Unpkg CDN](https://unpkg.com/browse/@digital-blueprint/formalize-app/) | [Formalize Bundle](https:
136 lines (123 loc) • 8.44 kB
JavaScript
/*!
* License: LGPL-2.1-or-later
* Dependencies:
*
* @webcomponents/scoped-custom-element-registry: BSD-3-Clause
* @dbp-toolkit/app-shell: LGPL-2.1-or-later
* lit-html: BSD-3-Clause
* @dbp-toolkit/language-select: LGPL-2.1-or-later
* @dbp-toolkit/auth: LGPL-2.1-or-later
* @dbp-toolkit/theme-switcher: LGPL-2.1-or-later
* universal-router: MIT
* @dbp-toolkit/matomo: LGPL-2.1-or-later
* cssfilter: MIT
* xss: MIT
* @dbp-toolkit/form-elements: LGPL-2.1-or-later
*/
import{s as e,x as t}from"./shared/ref.DqB7ABXf.js";import{A as n,J as r,X as i,k as a,s as o}from"./shared/directive-helpers.C6Xz79AM.js";import{a as s,i as c,n as l,t as u}from"./shared/string.qUj92gVq.js";import{n as d,t as f}from"./shared/boolean.pr9Nw5yS.js";import{t as p}from"./shared/enum.BxhuTEi5.js";var m=class extends a(l){constructor(){super(),this.label=`A datetime field`,this.dataValue=``}static get properties(){return{...super.properties,dataValue:{type:String,attribute:`data-value`,reflect:!0}}}static get styles(){return[...super.styles,i`
:host([layout-type='inline']) fieldset {
display: flex;
gap: var(--dbp-enum-label-gap, 1em);
align-items: center;
}
:host([layout-type='inline']) label {
margin-bottom: 0;
}
:host([layout-type='inline']) .description {
margin-bottom: 0;
}
:host([layout-type='inline']) input[type='datetime-local'] {
width: min-content;
}
input[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
`]}isoToDatetimeLocal(e){let t=new Date(e);if(isNaN(t.getTime()))return``;let n=t.getTimezoneOffset();return(/* @__PURE__ */ new Date(t.getTime()-n*60*1e3)).toISOString().slice(0,16)}renderInput(){let e=this.isoToDatetimeLocal(this.value);return r`
<input
type="datetime-local"
id="${this.formElementId}"
name="${this.name}"
.value="${e}"
@input="${this.handleInputValue}"
?disabled=${this.disabled}
?required=${this.required} />
`}fixDateTimeValue(e){if(!e)return``;let t=new Date(e);return isNaN(t.getTime())?``:t.toISOString()}update(e){e.forEach((e,t)=>{t===`value`&&(this.dataValue=this.fixDateTimeValue(this.value))}),super.update(e)}},h=class extends s{getUrlSlug(){return`demo`}getFormComponent(){return g}getFormIdentifier(){return`e78869ce-e9b3-4df2-854b-cf88a35285f5`}},g=class extends c{constructor(){super(),this.enumItems={item1:`Item 1`,item2:`Item 2`},this.wasSubmissionSuccessful=!1}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{this.addEventListener(`DbpFormalizeFormSubmission`,async t=>{let n=t.detail;console.log(`Form submission data:`,n);let r=new FormData;r.append(`form`,`/formalize/forms/`+this.formIdentifier),r.append(`dataFeedElement`,JSON.stringify(n.formData)),r.append(`submissionState`,String(e.SUBMITTED));try{let e={method:`POST`,headers:{Authorization:`Bearer ${this.getToken()}`},body:r},t=`${this.entryPointUrl}/formalize/submissions`,n=await fetch(t,e),i=await n.json();n.ok?this.wasSubmissionSuccessful=!0:o({summary:`Error`,body:`Failed to submit form. Response status: ${n.status}<br>${i.description}`,type:`danger`,timeout:0})}catch(e){console.error(e.message),o({summary:`Error`,body:e.message,type:`danger`,timeout:0})}finally{this.wasSubmissionSuccessful&&o({summary:`Success`,body:`Form submitted successfully`,type:`success`,timeout:5})}this.saveButtonEnabled=!0,this.formData=n})})}testRoutingUrl(){this.sendSetPropertyEvent(`routing-url`,`/test`,!0)}setRandomData(){let e=[`Premium`,`Deluxe`,`Advanced`,`Smart`,`Pro`,`Elite`,`Ultra`,`Essential`,`Classic`,`Modern`,`Digital`,`Custom`],t=[`Laptop`,`Phone`,`Tablet`,`Camera`,`Monitor`,`Keyboard`,`Mouse`,`Headphones`,`Speaker`,`Router`],n=[`item1`,`item2`],r=e=>e[Math.floor(Math.random()*e.length)],i=new Date(Date.now()+Math.random()*365*24*60*60*1e3),a=i.toISOString().split(`T`)[0],o=i.toISOString();this.formData={myString:`${r(e)} ${r(t)}`,myLongString:`The ${r(e)} ${r(t)} features ${Math.floor(Math.random()*6)+2}\ndifferent ${r(e)} capabilities for enhanced\nperformance and reliability.`,mySpecialString:`SKU-${String(Math.floor(Math.random()*9e3)+1e3)}-${Math.random().toString(36).substring(2,5)}`,myDate:a,myDateTime:o,myEnum:r(n),myCheckbox:Math.random()<.5}}static get scopedElements(){return{...super.scopedElements,"dbp-form-string-element":u,"dbp-form-date-element":d,"dbp-form-datetime-element":m,"dbp-form-enum-element":p,"dbp-form-boolean-element":f,"dbp-button":t,"dbp-icon":n}}render(){console.log(`-- Render FormalizeFormElement --`),console.log(`this.formData`,this.formData);let e=this.formData||{};return console.log(`render data`,e),r`
<h2>Demo Form</h2>
<form class="formalize-form">
<div class="form-header">${this.getButtonRowHtml()}</div>
<div class="test-buttons">
<input
type="button"
class="button"
value="Test routing-url"
@click=${this.testRoutingUrl} />
<input
type="button"
class="button"
value="Set random data"
@click=${this.setRandomData} />
</div>
<dbp-form-string-element
subscribe="lang"
name="myString"
label="My string"
.value=${e.myString||``}
required></dbp-form-string-element>
<dbp-form-string-element
subscribe="lang"
name="myLongString"
label="My long string"
.value=${e.myLongString||``}
rows="5"
required></dbp-form-string-element>
<dbp-form-string-element
subscribe="lang"
name="mySpecialString"
description="Shows the evaluation data in the error message if empty"
label="My special string"
.customValidator=${(e,t)=>e===``?[`evaluationData: `+JSON.stringify(t)]:[]}
.value=${e.mySpecialString||``}
required></dbp-form-string-element>
<dbp-form-date-element
subscribe="lang"
name="myDate"
label="My date"
.value=${e.myDate||``}
required></dbp-form-date-element>
<dbp-form-datetime-element
subscribe="lang"
name="myDateTime"
description="Needs to be in the future"
label="My datetime"
.customValidator=${e=>new Date(e)</* @__PURE__ */ new Date?[`The date needs to be in the future`]:[]}
.value=${e.myDateTime||``}
required></dbp-form-datetime-element>
<dbp-form-enum-element
subscribe="lang"
name="myEnum"
label="My enum"
.items=${this.enumItems}
.value=${e.myEnum||``}
required></dbp-form-enum-element>
<dbp-form-boolean-element
subscribe="lang"
name="myCheckbox"
label="My checkbox"
description="Check me"
?state=${e.myCheckbox||!1}></dbp-form-boolean-element>
</form>
${this.renderResult(this.formData)}
`}static get styles(){return[super.styles,i`
.test-buttons {
margin-top: 1em;
display: flex;
gap: 0.5em;
}
`]}renderResult(e){return e&&Object.keys(e).length>0?r`
<div class="container">
<h2>Form data</h2>
<pre>${JSON.stringify(e,null,2)}</pre>
</div>
`:r``}};export{h as default};
//# sourceMappingURL=demoForm.js.map