@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:
352 lines (337 loc) • 23.2 kB
JavaScript
let e,t,i,r,s,a,l,n,o,d,u,h,p,c,m,f,b,g,v,y,$,x,w,I,k,V,E,q,D,j,O,S,A,M,P,_,N,T,B,C,L,R,F,z,U,Z,G,H,J,K=e=>e;function Q(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,r)}return i}function W(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?Q(Object(i),!0).forEach((function(t){X(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):Q(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function X(e,t,i){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var r=i.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}
/*!
* License: LGPL-2.1-or-later
* Dependencies:
*
* @webcomponents/scoped-custom-element-registry: BSD-3-Clause
* @dbp-toolkit/app-shell: LGPL-2.1-or-later
* @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
* @dbp-toolkit/tabulator-table: LGPL-2.1-or-later
* xlsx: Apache-2.0
* jspdf-autotable: MIT
* xss: MIT
* cssfilter: MIT
* @dbp-toolkit/common: LGPL-2.1-or-later
* lit-html: BSD-3-Clause
* @dbp-toolkit/file-handling: LGPL-2.1-or-later
* webdav: MIT
* jose: MIT
* file-saver: MIT
* @dbp-toolkit/grant-permission-dialog: LGPL-2.1-or-later
* @dbp-toolkit/pdf-viewer: LGPL-2.1-or-later
* pdfjs-dist: Apache-2.0
* html2pdf.js: MIT
* jspdf: MIT
* @dbp-toolkit/notification: LGPL-2.1-or-later
* tabulator-tables: MIT
* @babel/runtime: MIT
* fflate: MIT
* jquery: MIT
* @dbp-toolkit/person-select: LGPL-2.1-or-later
* select2: MIT
* @dbp-toolkit/form-elements: LGPL-2.1-or-later
*/(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}import{c as Y,L as ee,a as te,S as ie,D as re,x as se,d as ae,i as le,j as ne}from"./notification.DekX2Yn_.es.js";import{b as oe,e as de,n as ue,s as he}from"./ref.Ds46LGIc.es.js";var pe={"render-form":{"base-object":{"required-field":"Pflichtfeld","required-field-validation-error":"Bitte füllen Sie das Pflichtfeld aus!"}}},ce={"render-form":{"base-object":{"required-field":"required","required-field-validation-error":"Please fill out the required field!"}}};function me(){return Y({en:ce,de:pe},"de","en")}class fe extends(ee(te(ie(re)),me)){constructor(){super(),this.formElementId="form-element",this.name="",this.description="",this.label="",this.value="",this.required=!1,this.disabled=!1,this.errorMessages=[],this.evaluationData={},this.customValidator=null,this.hidden=!1}static get properties(){return W(W({},super.properties),{},{name:{type:String},description:{type:String},label:{type:String},value:{type:String,reflect:!0},required:{type:Boolean},disabled:{type:Boolean},errorMessages:{type:Array,attribute:!1},customValidator:{type:Function},hidden:{type:Boolean}})}handleErrors(){let e=[];if(this.required&&!this.value&&e.push(this._i18n.t("render-form.base-object.required-field-validation-error")),this.customValidator){const t=this.customValidator(this.value,this.evaluationData);t&&(e=e.concat(t))}return this.errorMessages=e,0===e.length}handleErrorsIfAny(){this.errorMessages.length>0&&this.handleErrors()}evaluateCallback(e){return console.log("evaluateCallback data",e),this.evaluationData=e,this.handleErrors()}renderErrorMessages(){return this.errorMessages.length?se(t||(t=K`
<ul class="validation-errors">
${0}
</ul>
`),this.errorMessages.map((e=>se(i||(i=K`
<li>${0}</li>
`),e)))):se(e||(e=K``))}connectedCallback(){super.connectedCallback(),this.addEventListener("evaluate",(e=>{const t=e.detail,i=this.evaluateCallback(t.data);t.respond(i)}))}static get styles(){return[ae(!1),oe(),le(r||(r=K`
.validation-errors {
color: var(--dbp-override-danger);
list-style: none;
padding-left: 0;
margin-block: 0.25em;
}
.description {
margin-bottom: 0.25em;
}
`))]}update(e){super.update(e),e.forEach(((e,t)=>{if("lang"===t)this.handleErrorsIfAny()}))}handleInputValue(e){this.value=e.target.value}render(){return this.hidden?se(s||(s=K``)):(this.handleErrorsIfAny(),se(a||(a=K`
<fieldset>
<label for="${0}">
${0}
${0}
</label>
<div class="description">${0}</div>
${0} ${0}
</fieldset>
`),this.formElementId,this.label,this.required?se(l||(l=K`
(${0})
`),this._i18n.t("render-form.base-object.required-field")):se(n||(n=K``)),this.description,this.renderErrorMessages(),this.renderInput()))}renderInput(){return se(o||(o=K`
Please implement renderInput() in your subclass!
`))}}class be extends(ie(fe)){constructor(){super(),this.label="A string field",this.rows=1,this.placeholder=""}static get properties(){return W(W({},super.properties),{},{rows:{type:Number},placeholder:{type:String}})}renderInput(){return se(d||(d=K`
${0}
`),this.rows>1?se(u||(u=K`
<textarea
id="${0}"
name="${0}"
rows="${0}"
placeholder="${0}"
="${0}"
?disabled=${0}
?required=${0}>
${0}</textarea
>
`),this.formElementId,this.name,this.rows,this.placeholder,this.handleInputValue,this.disabled,this.required,this.value):se(h||(h=K`
<input
type="text"
id="${0}"
name="${0}"
.value="${0}"
placeholder="${0}"
="${0}"
?disabled=${0}
?required=${0} />
`),this.formElementId,this.name,this.value,this.placeholder,this.handleInputValue,this.disabled,this.required))}}ne("dbp-form-string-element",be);class ge extends(ie(fe)){constructor(){super(),this.label="A date field",this.min="",this.max=""}static get properties(){return W(W({},super.properties),{},{min:{type:String},max:{type:String}})}formatDateValue(e){if(!e)return"";const t=Number(e);if(!isNaN(t)){const e=new Date(t);if(!isNaN(e.getTime()))return e.toISOString().split("T")[0]}return e}renderInput(){const e=this.formatDateValue(this.value),t=this.formatDateValue(this.min),i=this.formatDateValue(this.max);return se(p||(p=K`
<input
type="date"
id="${0}"
name="${0}"
min="${0}"
max="${0}"
.value="${0}"
="${0}"
?disabled=${0}
?required=${0} />
`),this.formElementId,this.name,t,i,e,this.handleInputValue,this.disabled,this.required)}}ne("dbp-form-date-element",ge);class ve extends(ie(fe)){constructor(){super(),this.label="A datetime field",this.dataValue=""}static get properties(){return W(W({},super.properties),{},{dataValue:{type:String,attribute:"data-value",reflect:!0}})}isoToDatetimeLocal(e){const t=new Date(e);if(isNaN(t.getTime()))return"";const i=t.getTimezoneOffset();return new Date(t.getTime()-60*i*1e3).toISOString().slice(0,16)}renderInput(){const e=this.isoToDatetimeLocal(this.value);return se(c||(c=K`
<input
type="datetime-local"
id="${0}"
name="${0}"
.value="${0}"
="${0}"
?disabled=${0}
?required=${0} />
`),this.formElementId,this.name,e,this.handleInputValue,this.disabled,this.required)}fixDateTimeValue(e){if(!e)return"";const t=new Date(e);return isNaN(t.getTime())?"":t.toISOString()}update(e){e.forEach(((e,t)=>{if("value"===t)this.dataValue=this.fixDateTimeValue(this.value)})),super.update(e)}}ne("dbp-form-datetime-element",ve);class ye extends(ie(fe)){constructor(){super(),this.label="A time field"}static get properties(){return W({},super.properties)}renderInput(){return se(m||(m=K`
<input
type="time"
id="${0}"
name="${0}"
.value="${0}"
="${0}"
?disabled=${0}
?required=${0} />
`),this.formElementId,this.name,this.value,this.handleInputValue,this.disabled,this.required)}}ne("dbp-form-time-element",ye);class $e extends(ie(fe)){constructor(){super(),this.label="",this.items={},this.multiple=!1,this.dataValue="",this.displayMode="dropdown",this.selectRef=de()}static get properties(){return W(W({},super.properties),{},{multiple:{type:Boolean},dataValue:{type:String,attribute:"data-value",reflect:!0},displayMode:{type:String,attribute:"display-mode"},items:{type:Object}})}setItems(e){this.items=e}render(){if(this.hidden)return se(f||(f=K``));this.handleErrorsIfAny();const e=null!==this.querySelector('[slot="label"]');return se(b||(b=K`
<fieldset>
<label for="${0}">
<slot name="label">${0}</slot>
${0}
</label>
${0}
${0} ${0}
</fieldset>
`),this.formElementId,this.label,this.required&&(e||this.label)?se(g||(g=K`
(${0})
`),this._i18n.t("render-form.base-object.required-field")):se(v||(v=K``)),this.description?se(y||(y=K`
<div class="description">
${0}
${0}
</div>
`),this.description,this.required?se($||($=K`
(${0})
`),this._i18n.t("render-form.base-object.required-field")):se(x||(x=K``))):"",this.renderErrorMessages(),this.renderInput())}renderInput(){switch(["dropdown","list"].includes(this.displayMode)?this._displayMode=this.displayMode:(console.warn(`Invalid display-mode: ${this.displayMode}. Defaulting to 'dropdown'.`),this._displayMode="dropdown"),"dropdown"!==this._displayMode||this.multiple||""!==this.value||(this.value=this.items[""]?this.items[""]:Object.keys(this.items)[0]),this._displayMode){case"dropdown":return se(w||(w=K`
<select
${0}
id="${0}"
name="${0}"
="${0}"
?disabled=${0}
?required=${0}
?multiple=${0}>
${0}
</select>
`),ue(this.selectRef),this.formElementId,this.name,this.handleInputValue,this.disabled,this.required,this.multiple,Object.keys(this.items).map((e=>{var t;return se(I||(I=K`
<option
value="${0}"
?selected=${0}>
${0}
</option>
`),e,this.multiple?null===(t=this.value)||void 0===t?void 0:t.includes(e):e===this.value,this.items[e])})));case"list":return se(k||(k=K`
${0}
`),Object.keys(this.items).map((e=>{var t,i;return se(V||(V=K`
<label class="checkboxItem">
${0}
${0}
</label>
`),this.multiple?se(E||(E=K`
<input
type="checkbox"
id="${0}"
name="${0}"
value="${0}"
class="checkbox"
?checked="${0}"
="${0}"
?disabled=${0}
?required=${0} />
`),this.formElementId,this.name,e,!(null===(t=this.value)||void 0===t||!t.includes(e)),this.handleInputValue,this.disabled,this.required):se(q||(q=K`
<input
type="radio"
id="${0}"
name="${0}"
value="${0}"
class="radio"
?checked="${0}"
="${0}"
?disabled=${0}
?required=${0} />
`),this.formElementId,this.name,e,!(null===(i=this.value)||void 0===i||!i.includes(e)),this.handleInputValue,this.disabled,this.required),this.items[e])})));default:console.warn(`Unsupported display mode: ${this._displayMode}. Defaulting to 'dropdown'.`)}}static get styles(){return[...super.styles,le(D||(D=K`
/* For some reasons the selector chevron was very large */
select:not(.select) {
background-size: 1em;
}
label a {
text-decoration: underline;
}
.checkboxItem {
display: flex;
align-items: center;
column-gap: 4px;
width: fit-content;
line-height: 1;
cursor: pointer;
font-weight: normal;
}
.checkboxItem:not(:last-of-type) {
margin-bottom: 16px;
}
.checkbox {
appearance: none;
position: relative;
width: 20px;
height: 20px;
border: 1px solid var(--dbp-info-surface);
border-radius: 2px;
cursor: pointer;
margin-left: 0;
}
.checkbox:checked {
background-color: var(--dbp-info-surface);
}
.checkbox:checked::after {
content: '';
position: absolute;
top: 5px;
left: 3px;
width: 12px;
height: 6px;
border-bottom: 2px solid #ffffff;
border-left: 2px solid #ffffff;
transform: rotate(-45deg);
}
`))]}handleInputValue(e){"dropdown"===this.displayMode&&(this.value=this.multiple?Array.from(e.target.selectedOptions).map((e=>e.value)):e.target.value),"list"===this.displayMode&&(this.value=this.multiple?Array.from(this._a('[type="checkbox"]')).filter((e=>e.checked)).map((e=>e.value)):e.target.value)}adaptValueForMultiple(){this.multiple&&!Array.isArray(this.value)?this.value=[this.value]:!this.multiple&&Array.isArray(this.value)&&(this.value=this.value[0]||"")}update(e){e.forEach(((e,t)=>{switch(t){case"items":case"multiple":break;case"value":{this.generateDataValue();const e=new CustomEvent("change",{detail:{value:this.dataValue},bubbles:!0,composed:!0});this.dispatchEvent(e);break}}})),super.update(e)}generateDataValue(){if(this.multiple){if(this.selectRef.value){const e=Array.from(this.selectRef.value.selectedOptions).map((e=>e.value));this.dataValue=he(e)}if(this._a('[type="checkbox"]').length>0){const e=Array.from(this._a('[type="checkbox"]')).filter((e=>e.checked)).map((e=>e.value));this.dataValue=he(e)}}else this.dataValue=this.value}}ne("dbp-form-enum-element",$e);class xe extends(ie(fe)){constructor(){super(),this.label="",this.state=!1,this.dataValue=!1,this.value=""}static get properties(){return W(W({},super.properties),{},{state:{type:Boolean},dataValue:{type:String,attribute:"data-value",reflect:!0}})}static get styles(){return[...super.styles,le(j||(j=K`
.checkboxItem {
display: flex;
align-items: center;
column-gap: 4px;
width: fit-content;
line-height: 1;
cursor: pointer;
font-weight: normal;
}
.checkboxItem:not(:last-of-type) {
margin-bottom: 16px;
}
.checkbox {
appearance: none;
position: relative;
width: 20px;
height: 20px;
border: 1px solid var(--dbp-info-surface);
border-radius: 2px;
cursor: pointer;
margin-left: 0;
}
.checkbox:checked {
background-color: var(--dbp-info-surface);
}
.checkbox:checked::after {
content: '';
position: absolute;
top: 5px;
left: 3px;
width: 12px;
height: 6px;
border-bottom: 2px solid #ffffff;
border-left: 2px solid #ffffff;
transform: rotate(-45deg);
}
`))]}update(e){e.forEach(((e,t)=>{switch(t){case"value":{if(""===this.value)return;this.state="true"===this.value,this.dataValue=this.state;const e=new CustomEvent("change",{detail:{value:this.state,state:this.state},bubbles:!0,composed:!0});this.dispatchEvent(e);break}}})),super.update(e)}handleInputValue(e){this.state=e.target.checked,this.dataValue=this.state,this.value=this.state?"true":"false"}render(){return this.handleErrorsIfAny(),se(O||(O=K`
<fieldset>
<label for="${0}">
${0}
${0}
</label>
${0} ${0}
</fieldset>
`),this.formElementId,this.label,this.required?se(S||(S=K`
(${0})
`),this._i18n.t("render-form.base-object.required-field")):se(A||(A=K``)),this.renderInput(),this.renderErrorMessages())}renderInput(){return se(M||(M=K`
<label class="checkboxItem">
<input
type="checkbox"
id="${0}"
name="${0}"
class="checkbox"
?checked=${0}
="${0}"
?disabled=${0}
?required=${0} />
${0}
</label>
`),this.formElementId,this.name,this.state,this.handleInputValue,this.disabled,this.isRequired,this.description)}}ne("dbp-form-boolean-element",xe);class we extends(ee(ie(re),me)){constructor(){super(),this.label="",this.value="",this.hidden=!1}static get properties(){return W(W({},super.properties),{},{label:{type:String},value:{type:String},hidden:{type:Boolean}})}static get styles(){return[le(P||(P=K`
fieldset {
border: none;
margin: 15px 0;
padding: 0;
}
slot[name='label'],
fieldset label {
font-weight: bold;
display: block;
}
fieldset input:not([type='radio']):not([type='checkbox']),
fieldset select,
fieldset textarea {
width: calc(100% - 12px);
padding: 2px 5px;
border: 1px solid var(--dbp-border);
}
`))]}render(){return this.hidden?se(_||(_=K``)):se(N||(N=K`
<fieldset>
<label>${0}</label>
${0}
</fieldset>
`),this.label,this.renderValue())}renderValue(){return se(T||(T=K`
Please implement renderValue() in your subclass!
`))}}class Ie extends(ie(we)){constructor(){super(),this.label="A string field"}renderValue(){return se(B||(B=K`
<div style="white-space: pre-line">${0}</div>
`),this.value)}}ne("dbp-form-string-view",Ie);class ke extends(ie(we)){constructor(){super(),this.label="A date field"}renderValue(){let e=this.value;"string"==typeof e&&""!==e&&(e=new Date(e));const t=e&&""!==e?e.toLocaleDateString("de-DE",{day:"2-digit",month:"2-digit",year:"numeric"}):"-";return se(C||(C=K`
${0}
`),t)}}ne("dbp-form-date-view",ke);class Ve extends(ie(we)){constructor(){super(),this.label="A datetime field"}renderValue(){let e=this.value;"string"==typeof e&&""!==e&&(e=new Date(e));const t=e&&""!==e?e.toLocaleString("de-DE",{year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit",timeZoneName:"short",hour12:!1}):"-";return se(L||(L=K`
${0}
`),t)}}ne("dbp-form-datetime-view",Ve);class Ee extends(ie(we)){constructor(){super(),this.label="A enum field",this.items={}}static get properties(){return W(W({},super.properties),{},{items:{type:Object}})}render(){if(this.hidden)return se(R||(R=K``));const e=null!==this.querySelector('[slot="label"]');return se(F||(F=K`
<fieldset>
${0}
${0}
</fieldset>
`),e?se(z||(z=K`
<slot name="label"></slot>
`)):se(U||(U=K`
<label>${0}</label>
`),this.label),this.renderValue())}renderValue(){const e=this.value,t=this.items;return se(Z||(Z=K`
${0}
`),Array.isArray(e)?se(G||(G=K`
<ul>
${0}
</ul>
`),e.map((e=>se(H||(H=K`
<li>${0}</li>
`),t[e]||e)))):t[e]||e)}static get styles(){return[...super.styles,le(J||(J=K`
/* Do we need ul styling? */
`))]}}ne("dbp-form-enum-view",Ee);export{xe as D,$e as a,ve as b,ge as c,be as d,fe as e,ye as f,Ee as g,ke as h,Ie as i};
//# sourceMappingURL=enum.1OT3_9bb.es.js.map