@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:
291 lines (266 loc) • 19.4 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{A as e,n as t,t as n}from"./ref.DqB7ABXf.js";import{I as r,J as i,T as a,V as o,X as s,Z as c,j as l,k as u}from"./directive-helpers.C6Xz79AM.js";import{i as d,n as f,r as p,t as m}from"./select2.min.DRitHUO_.js";import{n as h,o as g}from"./string.qUj92gVq.js";p();var _=/* @__PURE__ */ e(f(),1);function v(){return{errorLoading:function(){return`Die Ergebnisse konnten nicht geladen werden.`},inputTooLong:function(e){return`Bitte `+(e.input.length-e.maximum)+` Zeichen weniger eingeben`},inputTooShort:function(e){return`Bitte `+(e.minimum-e.input.length)+` Zeichen mehr eingeben, es kann nach mehreren Teilen von Namen gesucht werden`},loadingMore:function(){return`Lade mehr Ergebnisse…`},maximumSelected:function(e){var t=`Sie können nur `+e.maximum+` Eintr`;return e.maximum===1?t+=`ag`:t+=`äge`,t+=` auswählen`,t},noResults:function(){return`Keine Übereinstimmungen gefunden`},searching:function(){return`Suche…`},removeAllItems:function(){return`Alle Einträge entfernen`}}}function y(){return{errorLoading:function(){return`The results could not be loaded.`},inputTooLong:function(e){var t=e.input.length-e.maximum,n=`Please delete `+t+` character`;return t!=1&&(n+=`s`),n},inputTooShort:function(e){return`Please enter `+(e.minimum-e.input.length)+` or more characters, you can also search for multiple parts of names`},loadingMore:function(){return`Loading more results…`},maximumSelected:function(e){var t=`You can only select `+e.maximum+` item`;return e.maximum!=1&&(t+=`s`),t},noResults:function(){return`No results found`},searching:function(){return`Searching…`},removeAllItems:function(){return`Remove all items`}}}var b=class extends u(h){constructor(){super(),this.formElementId=`form-element-${Math.random().toString(36).slice(2,10)}`,this.label=``,this.items={},this.multiple=!1,this.value=``,this.dataValue=``,this.displayMode=`dropdown`,this.selectRef=n(),this.$select=null,(0,_.default)(window,d),this.tagPlaceholder=null,this.tagAriaLabel=null,this.disabledItems=[],this._focusIndexAfterRemove=null,this.handleDocumentPointerDown=this.handleDocumentPointerDown.bind(this)}static get properties(){return{...super.properties,multiple:{type:Boolean},value:{type:Object,reflect:!1},dataValue:{type:String,attribute:`data-value`,reflect:!0},displayMode:{type:String,attribute:`display-mode`},items:{type:Object},tagPlaceholder:{type:Object},tagAriaLabel:{type:Object},disabledItems:{type:Array}}}$(e){return d(this.renderRoot.querySelector(e))}closeSelect2(){this.select2IsInitialized()&&this.$select.select2(`close`)}setItems(e){this.items={...e}}isValueEmptyArray(){return Array.isArray(this.value)&&this.value.length===0}isValueEmpty(){return this.value===``||this.isValueEmptyArray()}shouldOmitEmptyValue(){return!this.required&&!this.multiple&&this.displayMode===`list`&&this.isValueEmpty()}connectedCallback(){super.connectedCallback(),document.addEventListener(`pointerdown`,this.handleDocumentPointerDown,!0),this.updateComplete.then(()=>{this.$select=this.$(`#`+this.formElementId),this.initSelect2IfNeeded()})}disconnectedCallback(){document.removeEventListener(`pointerdown`,this.handleDocumentPointerDown,!0),super.disconnectedCallback()}handleDocumentPointerDown(e){if(!this.select2IsInitialized()||!this.$select.select2(`isOpen`))return;let t=e.composedPath(),n=this.renderRoot.querySelector(`.select2`),r=this.renderRoot.querySelector(`#select-dropdown`);t.includes(n)||t.includes(r)||this.closeSelect2()}isDisplayModeTags(){return[`tags`,`tag`].includes(this.displayMode)}initSelect2IfNeeded(){this.isDisplayModeTags()&&!this.select2IsInitialized()&&this.initSelect2()}select2IsInitialized(){return this.$select!==null&&this.$select.hasClass(`select2-hidden-accessible`)}initSelect2(e=!1){return this.$select!==null&&(this.$select&&this.$select.hasClass(`select2-hidden-accessible`)&&(this.$select.select2(`destroy`),this.$select.off(`select2:select`),this.$select.off(`select2:closing`)),this.$select.off(`change.dbp-enum`),this.$select.select2({width:`100%`,language:this.lang===`de`?v():y(),allowClear:!0,placeholder:this.tagPlaceholder?.[this.lang]||this._i18n.t(`render-form.enum.select-placeholder`),dropdownParent:this.$(`#select-dropdown`),data:o(this.items)}).on(`select2:select.dbp-enum`,()=>{requestAnimationFrame(()=>this.focusTagSearchField())}).on(`change.dbp-enum`,e=>{this.handleInputValue(e),this.updateSelect2Buttons()}),this.$select.val(this.value).trigger(`change`),this.updateSelect2AriaLabels(),!0)}updateSelect2AriaLabels(){let e=`${this.formElementId}-label`;if(!this.renderRoot.querySelector(`#${e}`))return;let t=this.renderRoot.querySelector(`.select2-search__field`);if(t){t.setAttribute(`aria-labelledby`,e);let n=this.tagAriaLabel?.[this.lang];n?t.setAttribute(`aria-label`,n):t.removeAttribute(`aria-label`)}let n=this.renderRoot.querySelector(`.select2-selection--multiple`);if(n){n.hasAttribute(`aria-labelledby`)||n.setAttribute(`aria-labelledby`,e);let t=this.tagAriaLabel?.[this.lang];t?n.setAttribute(`aria-label`,t):n.removeAttribute(`aria-label`)}this.updateAriaDescribedBy()}updateSelect2Buttons(){this.updateSelect2AriaLabels(),this._a(`.select2-selection__choice`).forEach((e,t)=>{let n=e.querySelector(`.select2-selection__choice__remove`),r=e.querySelector(`.select2-selection__choice__display`);if(!n||!r)return;let i=this._i18n.t(`render-form.enum.remove-item`,{item:r.textContent.trim(),lng:this.lang});n.setAttribute(`aria-label`,i),n.setAttribute(`title`,i),n.setAttribute(`tabindex`,`0`),n.onclick=()=>{this._focusIndexAfterRemove=t}}),this.restoreFocusAfterRemove();let e=this.renderRoot.querySelector(`.select2-selection__clear`);if(!e)return;let t=this._i18n.t(`render-form.enum.remove-all-items`,{lng:this.lang});e.setAttribute(`aria-label`,t),e.setAttribute(`title`,t),e.setAttribute(`tabindex`,`0`),e.onkeydown=t=>{[`Enter`,` `].includes(t.key)&&(t.preventDefault(),t.stopPropagation(),e.dispatchEvent(new MouseEvent(`mousedown`,{bubbles:!0})))},e.onmousedown=()=>{this._focusIndexAfterRemove=0},this.moveClearButtonToEnd(e)}focusTagSearchField(){let e=this.renderRoot.querySelector(`.select2-search__field`);e&&e.focus()}moveClearButtonToEnd(e){let t=this.renderRoot.querySelector(`.select2-selection--multiple`);t&&t.lastElementChild!==e&&t.appendChild(e)}restoreFocusAfterRemove(){let e=this._focusIndexAfterRemove;if(e===null)return;this._focusIndexAfterRemove=null;let t=this._a(`.select2-selection__choice__remove`),n=t[e]||t[t.length-1]||this.renderRoot.querySelector(`.select2-search__field`);n&&n.focus()}renderInput(){[`dropdown`,`list`,`tag`,`tags`].includes(this.displayMode)?this._displayMode=this.displayMode:(console.warn(`Invalid display-mode: ${this.displayMode}. Defaulting to 'dropdown'.`),this._displayMode=`dropdown`),this.handleEmptyValue();let e=r(m);switch(this._displayMode){case`dropdown`:return i`
<div class="select-wrapper">
<select
${t(this.selectRef)}
id="${this.formElementId}"
name="${this.name}"
="${this.handleInputValue}"
?disabled=${this.disabled}
?required=${this.required}
?multiple=${this.multiple}>
${Object.keys(this.items).map(e=>i`
<option
value="${e}"
?selected=${this.multiple?this.value?.includes(e):e===this.value}>
${this.items[e]}
</option>
`)}
</select>
</div>
`;case`list`:return i`
${Object.keys(this.items).map(e=>i`
<label
class="checkboxItem ${this.disabledItems.includes(e)?`disabled`:``}">
${this.multiple?i`
<input
type="checkbox"
id="${this.formElementId}"
name="${this.name}"
value="${e}"
class="checkbox"
?checked="${!!this.value?.includes(e)}"
="${this.handleInputValue}"
?disabled=${this.disabled||this.disabledItems.includes(e)}
?required=${this.required} />
`:i`
<input
type="radio"
id="${this.formElementId}"
name="${this.name}"
value="${e}"
class="radio"
?checked="${!!this.value?.includes(e)}"
="${this.handleInputValue}"
?disabled=${this.disabled||this.disabledItems.includes(e)}
?required=${this.required} />
`}
${this.items[e]}
</label>
`)}
`;case`tag`:case`tags`:return i`
<link rel="stylesheet" href="${e}" />
<select
${t(this.selectRef)}
id="${this.formElementId}"
name="${this.name}"
class="select"
?disabled=${this.disabled}
?required=${this.required}
?multiple=${this.multiple}></select>
<div id="select-dropdown"></div>
`;default:return i``}}handleEmptyValue(){if(this._displayMode===`dropdown`&&!this.multiple&&this.value===``){let e=this.items[``];this.value=e||Object.keys(this.items)[0],this.generateDataValue()}this.isValueEmpty()&&this.multiple&&this.dataValue!==`[]`&&(this.isValueEmptyArray()||(this.value=[]),this.generateDataValue())}static get styles(){return[...super.styles,a(),s`
:host([layout-type='inline']) fieldset {
display: flex;
gap: var(--dbp-enum-label-gap, 1em);
margin: 0;
align-items: center;
flex-wrap: wrap;
}
(max-width: 380px) {
:host([layout-type='inline']) fieldset {
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin-bottom: 20px;
}
}
:host([layout-type='inline']) label {
white-space: nowrap;
margin-bottom: 0;
flex: 0 0 auto;
}
/* allows .select2-container to fully expand */
:host([layout-type='inline']) #select-dropdown {
order: 1;
flex: 0 0 auto;
min-width: 0;
min-height: 0;
overflow: visible;
}
:host([layout-type='inline']) .select2,
:host([layout-type='inline']) .select2-container {
order: 2;
flex: 1 1 200px;
min-width: 0;
max-width: 100%;
}
:host([layout-type='inline']) .checkboxItem {
margin-top: 0;
}
/* 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: inherit;
margin-top: 8px;
}
.checkboxItem ~ .checkboxItem {
margin-top: 16px;
}
.checkboxItem.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.checkboxItem.disabled input {
cursor: not-allowed;
}
.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);
}
.required-mark {
color: var(--dbp-danger);
}
#select-dropdown {
position: relative;
}
.select2-control.control {
width: 100%;
}
.select2-container--default
.select2-selection--multiple
.select2-selection__choice {
border-radius: 0;
}
.select2-container--default .select2-selection--multiple {
border-radius: 0;
border-color: var(--dbp-override-content);
padding: 0;
}
/* .select2-container--default .select2-search--inline .select2-search__field {
!* Needed for the placeholder to be visible. The width of the input is set to 0 by js. *!
!*width is the reason for the placeholder to shrink, so I removed it*!
}*/
.select-wrapper select {
background: none;
padding: 2px 5px;
font-weight: inherit;
}
.select-wrapper:has(select:disabled) {
--select-wrapper-icon-color: var(--dbp-muted);
}
:host(:not([multiple])) .select-wrapper {
position: relative;
display: inline-block;
width: 100%;
}
:host(:not([multiple])) .select-wrapper select {
appearance: none;
padding-right: 1.75em;
background-color: var(--dbp-background);
}
:host(:not([multiple])) .select-wrapper::after {
content: '';
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
width: 0.75em;
height: 0.75em;
pointer-events: none;
background-color: var(--select-wrapper-icon-color, currentColor);
mask: url('${c(l(`chevron-down`))}') center/contain
no-repeat;
-webkit-mask: url('${c(l(`chevron-down`))}') center/contain
no-repeat;
}
`]}handleInputValue(e){if(e.isTrusted!==!0&&!this.isDisplayModeTags())return;this.displayMode===`dropdown`&&(this.value=this.multiple?Array.from(e.target.selectedOptions).map(e=>e.value):e.target.value),this.displayMode===`list`&&(this.value=this.multiple?Array.from(this._a(`[type="checkbox"]`)).filter(e=>e.checked).map(e=>e.value):e.target.value),this.isDisplayModeTags()&&(this.value=this.$select.val()),this.generateDataValue();let t=new CustomEvent(`change`,{detail:{value:this.value,fieldName:this.name},bubbles:!0,composed:!0});this.dispatchEvent(t)}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`displayMode`:this.initSelect2IfNeeded();break;case`items`:this.handleEmptyValue(),this.isDisplayModeTags()&&this.initSelect2();break;case`multiple`:this.handleEmptyValue();break;case`value`:this.handleEmptyValue(),this.generateDataValue(),this.select2IsInitialized()&&this.$select.val(this.value).trigger(`change`);break;case`lang`:this.updateSelect2Buttons()}}),super.update(e)}generateDataValue(){this.dataValue=this.multiple?g(this.value):Array.isArray(this.value)?this.value[0]??``:this.value}};export{b as t};
//# sourceMappingURL=enum.BxhuTEi5.js.map