@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:
165 lines (156 loc) • 6.67 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
* html2pdf.js: MIT
* exceljs: MIT
* jspdf-autotable: MIT
* keycloak-js: Apache-2.0
* pdfjs-dist: Apache-2.0
* jszip: (MIT OR GPL-3.0-or-later)
* @babel/runtime: MIT
* fflate: MIT
* iobuffer: MIT
* pako: (MIT AND Zlib)
* fast-png: MIT
* jspdf: MIT
* core-js: MIT
* performance-now: MIT
* raf: MIT
* rgbcolor: MIT OR SEE LICENSE IN FEEL-FREE.md
* svg-pathdata: MIT
* stackblur-canvas: MIT
* canvg: MIT
* dompurify: (MPL-2.0 OR Apache-2.0)
* i18next: MIT
* @dbp-toolkit/common: LGPL-2.1-or-later
* @lit/reactive-element: BSD-3-Clause
* lit-element: BSD-3-Clause
* @open-wc/dedupe-mixin: MIT
* @open-wc/scoped-elements: MIT
* dialog-polyfill: BSD
* jquery: MIT
* select2: MIT
* @dbp-toolkit/notification: LGPL-2.1-or-later
* @dbp-toolkit/tabulator-table: LGPL-2.1-or-later
* tabulator-tables: MIT
* @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
* @dbp-toolkit/resource-select: LGPL-2.1-or-later
* @popperjs/core: MIT
* tippy.js: MIT
* @dbp-toolkit/tooltip: LGPL-2.1-or-later
*/
import{J as e,X as t,k as n}from"./directive-helpers.C6Xz79AM.js";import{n as r}from"./string.qUj92gVq.js";var i=class extends n(r){constructor(){super(),this.label=`A date field`,this.min=``,this.max=``}static get properties(){return{...super.properties,min:{type:String},max:{type:String}}}static get styles(){return[...super.styles,t`
: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']) input[type='date'] {
width: min-content;
}
input[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
`]}formatDateValue(e){if(!e)return``;let t=Number(e);if(!isNaN(t)){let e=new Date(t);if(!isNaN(e.getTime()))return e.toISOString().split(`T`)[0]}return e}renderInput(){let t=this.formatDateValue(this.value),n=this.formatDateValue(this.min),r=this.formatDateValue(this.max);return e`
<input
type="date"
id="${this.formElementId}"
name="${this.name}"
min="${n}"
max="${r}"
.value="${t}"
="${this.handleInputValue}"
?disabled=${this.disabled}
?required=${this.required} />
`}},a=class extends n(r){constructor(){super(),this.label=``,this.state=!1,this.dataValue=!1,this.value=``}static get properties(){return{...super.properties,state:{type:Boolean},dataValue:{type:String,attribute:`data-value`,reflect:!0}}}static get styles(){return[...super.styles,t`
.checkboxItem {
display: flex;
align-items: center;
column-gap: 4px;
width: fit-content;
line-height: 1;
cursor: pointer;
font-weight: inherit;
}
.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: 4px;
left: 3px;
width: 12px;
height: 6px;
border-bottom: 2px solid #ffffff;
border-left: 2px solid #ffffff;
transform: rotate(-45deg);
}
:host([layout-type='inline']) fieldset {
display: flex;
gap: var(--dbp-enum-label-gap, 1em);
align-items: center;
}
input[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
`]}update(e){e.forEach((e,t)=>{switch(t){case`value`:{if(this.value===``)return;this.state=this.value===`true`,this.dataValue=this.state;let 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`,this.dispatchEvent(new CustomEvent(`change`,{detail:{state:this.state,value:this.value},bubbles:!0,composed:!0}))}hasDescription(){return!1}render(){return this.handleErrorsIfAny(),e`
<fieldset>
<label for="${this.formElementId}">
${this.label}
${this.required?e`
${this._i18n.t(`render-form.base-object.required-field`)}
`:e``}
</label>
${this.renderInput()} ${this.renderErrorMessages()}
</fieldset>
`}renderInput(){return e`
<label class="checkboxItem">
<input
type="checkbox"
id="${this.formElementId}"
name="${this.name}"
class="checkbox"
?checked=${this.state}
="${this.handleInputValue}"
?disabled=${this.disabled}
?required=${this.required} />
${this.description}
</label>
`}};export{i as n,a as t};
//# sourceMappingURL=boolean.pr9Nw5yS.js.map