@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:
292 lines (276 loc) • 21.1 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
*/
import{A as e,D as t,w as n}from"./ref.DqB7ABXf.js";import{$ as r,A as i,B as a,J as o,M as s,N as c,O as l,X as u,g as d,k as f,l as p,s as m,v as h}from"./directive-helpers.C6Xz79AM.js";import{t as g}from"./class-map.B2bFA_il.js";import{t as _}from"./modal.DfjeZb2d.js";import{a as v,c as y,i as b,o as x,s as S}from"./pdf-viewer.CsTRBfhh.js";var C=/* @__PURE__ */ t({FileSource:()=>T});function w(e){let t={"application/pdf":[`.pdf`],"application/zip":[`.zip`]},n=[];return e.split(`,`).forEach(e=>{n.push(e),e.trim()in t&&(n=n.concat(t[e.trim()]))}),n.join(`,`)}var T=class extends p(f(b),y){constructor(){super(),this.context=``,this.nextcloudAuthUrl=``,this.nextcloudName=`Nextcloud`,this.nextcloudWebDavUrl=``,this.nextcloudPath=``,this.nextcloudFileURL=``,this.nextcloudStoreSession=!1,this.dropArea=null,this.allowedMimeTypes=``,this.enabledTargets=`local`,this.buttonLabel=``,this.disabled=!1,this.decompressZip=!1,this._queueKey=0,this.activeTarget=`local`,this.isDialogOpen=!1,this.firstOpen=!0,this.nextcloudAuthInfo=``,this.maxFileSize=null,this.multipleFiles=Number.MAX_VALUE,this.notificationTargetId=``,this.initialFileHandlingState={target:``,path:``}}static get scopedElements(){return{"dbp-icon":i,"dbp-mini-spinner":n,"dbp-modal":_,"dbp-nextcloud-file-picker":x,"dbp-clipboard":v}}static get properties(){return{...super.properties,context:{type:String,attribute:`context`},allowedMimeTypes:{type:String,attribute:`allowed-mime-types`},enabledTargets:{type:String,attribute:`enabled-targets`},nextcloudAuthUrl:{type:String,attribute:`nextcloud-auth-url`},nextcloudWebDavUrl:{type:String,attribute:`nextcloud-web-dav-url`},nextcloudName:{type:String,attribute:`nextcloud-name`},nextcloudFileURL:{type:String,attribute:`nextcloud-file-url`},nextcloudAuthInfo:{type:String,attribute:`nextcloud-auth-info`},nextcloudStoreSession:{type:Boolean,attribute:`nextcloud-store-session`},buttonLabel:{type:String,attribute:`button-label`},disabled:{type:Boolean},decompressZip:{type:Boolean,attribute:`decompress-zip`},activeTarget:{type:String,attribute:`active-target`},isDialogOpen:{type:Boolean,attribute:`dialog-open`},maxFileSize:{type:Number,attribute:`max-file-size`},multipleFiles:{type:Number,attribute:`number-of-files`},notificationTargetId:{type:String,attribute:`notification-target-id`},initialFileHandlingState:{type:Object,attribute:`initial-file-handling-state`}}}update(e){e.forEach((e,t)=>{switch(t){case`enabledTargets`:this.hasEnabledSource(this.activeTarget)||(this.activeTarget=this.enabledTargets.split(`,`)[0]);break;case`isDialogOpen`:this.isDialogOpen?this.openDialog():this.removeAttribute(`dialog-open`);break;case`initialFileHandlingState`:this.firstOpen&&(this.nextcloudPath=this.initialFileHandlingState.path);break;case`activeTarget`:this.activeTarget===`nextcloud`&&this.loadWebdavDirectory()}}),super.update(e)}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{if(this.dropArea=this._(`#dropArea`),[`dragenter`,`dragover`,`dragleave`,`drop`].forEach(e=>{this.dropArea.addEventListener(e,this.preventDefaults,!1)}),[`dragenter`,`dragover`].forEach(e=>{this.dropArea.addEventListener(e,this.highlight.bind(this),!1)}),[`dragleave`,`drop`].forEach(e=>{this.dropArea.addEventListener(e,this.unhighlight.bind(this),!1)}),this.dropArea.addEventListener(`drop`,this.handleDrop.bind(this),!1),this._(`#fileElem`).addEventListener(`change`,this.handleChange.bind(this,this._(`#fileElem`))),this._(`nav.modal-nav`).addEventListener(`scroll`,this.handleScroll.bind(this)),this.enabledTargets.split(`,`).length>1)this._(`.right-paddle`).addEventListener(`click`,this.handleScrollRight.bind(this,this._(`nav.modal-nav`))),this._(`.left-paddle`).addEventListener(`click`,this.handleScrollLeft.bind(this,this._(`nav.modal-nav`)));else{let e=this._(`.paddles`);e&&e.classList.add(`hidden`)}})}disconnectedCallback(){super.disconnectedCallback()}preventDefaults(e){e.preventDefault(),e.stopPropagation()}highlight(e){this.dropArea.classList.add(`highlight`)}unhighlight(e){this.dropArea.classList.remove(`highlight`)}handleDrop(e){if(this.disabled)return;let t=e.dataTransfer.files;this.handleFiles(t)}async handleChange(e){let t=e;t.files.length!==0&&(await this.handleFiles(t.files),t.value=``)}async handleFiles(e){let t=this._i18n,n=e.length;await s(e,async(e,r)=>{if(e.size===0){console.log(`file '`+e.name+`' has size=0 and is denied!`),m({summary:t.t(`file-source.empty-file-error-title`),body:t.t(`file-source.empty-file-error-text`,{filename:e.name}),type:`danger`,timeout:10}),n--;return}if(!this.checkSize(e)){console.log(`file "${e.name}" has size ${e.size} which is too large and is denied!`),n--;return}if(this.decompressZip&&(e.type===`application/zip`||e.type===`application/x-zip-compressed`)){await s(await this.decompressZIP(e),(e,t,r)=>{n=t===r.length-1?n:n+1,this.sendFileEvent(e,n)});return}if(this.allowedMimeTypes&&!this.checkFileType(e)){n--;return}this.sendFileEvent(e,n)});let r=new CustomEvent(`dbp-file-source-file-upload-finished`,{detail:{count:n},bubbles:!0,composed:!0});this.dispatchEvent(r),this.closeDialog()}sendFileEvent(e,t){this.sendSource(),this.closeModal(`#modal-picker`);let n=new CustomEvent(`dbp-file-source-file-selected`,{detail:{file:e,maxUpload:t},bubbles:!0,composed:!0});this.dispatchEvent(n)}sendSource(){let e;e=this.activeTarget===`nextcloud`?{target:this.activeTarget,path:this._(`#nextcloud-file-picker`).directoryPath}:{target:this.activeTarget},this.sendSetPropertyEvent(`initial-file-handling-state`,e)}openModal(e){let t=this._(e);if(!t)return;let n=()=>{t.isOpen()||t.open()};t.modalDialog?n():t.updateComplete.then(n)}closeModal(e){let t=this._(e);t&&t.modalDialog&&t.isOpen()&&t.close()}handleModalClosed(e){if(e.detail.id!==`modal-picker-dialog`)return;this.isDialogOpen=!1;let t=this._(`#nextcloud-file-picker`);t&&(t.selectAllButton=!0);let n=new CustomEvent(`dbp-file-source-dialog-closed`,{detail:{},bubbles:!0,composed:!0});this.dispatchEvent(n)}checkFileType(e){let t=this._i18n,[n,r]=e.type.split(`/`),i=this.allowedMimeTypes.split(`,`),a=!0;return i.forEach(e=>{let[t,i]=e.split(`/`);a&&=t!==`*`&&t!==n||i!==`*`&&i!==r}),!a||(console.log(`mime type ${e.type} of file '${e.name}' is not compatible with ${this.allowedMimeTypes}`),m({summary:t.t(`file-source.mime-type-title`),body:t.t(`file-source.mime-type-body`,{filename:e.name}),type:`danger`,timeout:0,...this.notificationTargetId?{targetNotificationId:this.notificationTargetId}:{}}),!1)}checkSize(e){let t=this._i18n;return this.maxFileSize!==null&&this.maxFileSize*1e3<=e.size?(m({summary:t.t(`file-source.too-big-file-title`),body:t.t(`file-source.too-big-file-body`,{filename:e.name,size:r(this.maxFileSize*1e3,!0)}),type:`danger`,timeout:0,...this.notificationTargetId?{targetNotificationId:this.notificationTargetId}:{}}),!1):!0}hasEnabledSource(e){return this.enabledTargets.split(`,`).includes(e)}async decompressZIP(t){let n=(await import(`./jszip.DC1Salg6.js`).then(t=>/* @__PURE__ */ e(t.default,1))).default,r=[];if(await n.loadAsync(t).then(async e=>{await c(e.files,async e=>{e.dir||await e.async(`blob`).then(async t=>{let n=await a(t),i=new File([t],e.name,{type:n});this.checkFileType(i)&&r.push(i)},e=>{console.error(`Decompressing of file in `+t.name+` failed: `+e.message)})})},function(e){console.error(`Loading of `+t.name+` failed: `+e.message)}),r.length===0){let e=this._i18n;console.error(`ZIP file does not contain any files of `+this.allowedMimeTypes),m({summary:e.t(`file-source.no-usable-files-in-zip`),body:e.t(`file-source.no-usable-files-hint`)+this.allowedMimeTypes,type:`danger`,timeout:0})}return r}async sendFinishedEvent(e,t,n=!1){if(e===void 0)return;let r={fileName:t.name,status:e.status,json:{"hydra:description":``}};try{await e.json().then(e=>{r.json=e})}catch{}n&&(r.file=t);let i=new CustomEvent(`dbp-file-source-file-finished`,{detail:r,bubbles:!0,composed:!0});this.dispatchEvent(i)}loadWebdavDirectory(){let e=this._(`#nextcloud-file-picker`);e&&e.checkLocalStorage().then(t=>{e.webDavClient!==null&&e.loadDirectory(e.directoryPath)})}openDialog(){if(this.enabledTargets.includes(`nextcloud`)&&this.loadWebdavDirectory(),this.enabledTargets.includes(`clipboard`)&&this._(`#clipboard-file-picker`)&&this._(`#clipboard-file-picker`).generateClipboardTable(),this.openModal(`#modal-picker`),this.initialFileHandlingState.target!==``&&this.initialFileHandlingState.target!==void 0&&this.firstOpen){this.activeDestination=this.initialFileHandlingState.target,this.nextcloudPath=this.initialFileHandlingState.path;let e=this._(`#nextcloud-file-picker`);e&&e.webDavClient!==null&&e.loadDirectory(this.initialFileHandlingState.path),this.firstOpen=!1}}closeDialog(){if(this.sendSource(),this.enabledTargets.includes(`nextcloud`)){let e=this._(`#nextcloud-file-picker`);e&&e.tabulatorTable&&(e.tabulatorTable.deselectRow(),e._(`#select_all`)&&(e._(`#select_all`).checked=!1))}if(this.enabledTargets.includes(`clipboard`)){let e=this._(`#clipboard-file-picker`);e&&e.tabulatorTable&&(e.numberOfSelectedFiles=0,e.tabulatorTable.deselectRow(),e._(`#select_all`)&&(e._(`#select_all`).checked=!1))}this.closeModal(`#modal-picker`)}getClipboardHtml(){return this.enabledTargets.includes(`clipboard`)?o`
<dbp-clipboard
id="clipboard-file-picker"
mode="file-source"
subscribe="clipboard-files:clipboard-files,store-nextcloud-session"
lang="${this.lang}"
auth-url="${this.nextcloudAuthUrl}"
enabled-targets="${this.enabledTargets}"
nextcloud-auth-url="${this.nextcloudAuthUrl}"
nextcloud-web-dav-url="${this.nextcloudWebDavUrl}"
nextcloud-name="${this.nextcloudName}"
nextcloud-file-url="${this.nextcloudFileURL}"
allowed-mime-types="${this.allowedMimeTypes}"
-clipboard-file-picker-file-downloaded="${e=>{this.sendFileEvent(e.detail.file,e.detail.maxUpload)}}"></dbp-clipboard>
`:o``}getNextcloudHtml(){return this.enabledTargets.includes(`nextcloud`)&&this.nextcloudWebDavUrl!==``&&this.nextcloudAuthUrl!==``?o`
<dbp-nextcloud-file-picker
id="nextcloud-file-picker"
class="${g({hidden:this.nextcloudWebDavUrl===``||this.nextcloudAuthUrl===``})}"
?disabled="${this.disabled}"
lang="${this.lang}"
subscribe="html-overrides,auth"
auth-url="${this.nextcloudAuthUrl}"
web-dav-url="${this.nextcloudWebDavUrl}"
nextcloud-name="${this.nextcloudName}"
nextcloud-file-url="${this.nextcloudFileURL}"
?store-nextcloud-session="${this.nextcloudStoreSession}"
auth-info="${this.nextcloudAuthInfo}"
allowed-mime-types="${this.allowedMimeTypes}"
max-selected-items="${this.multipleFiles}"
-nextcloud-file-picker-file-downloaded="${e=>{this.sendFileEvent(e.detail.file,e.detail.maxUpload)}}"></dbp-nextcloud-file-picker>
`:o``}static get styles(){return u`
${l()}
${h()}
${d()}
${S()}
p {
margin-top: 0;
}
.block {
margin-bottom: 10px;
}
#dropArea {
border: var(
--dbp-border,
var(--FUBorderWidth, 2px) var(--FUBorderStyle, dashed)
var(--FUBBorderColor, black)
);
border-style: var(--FUBorderStyle, dashed);
border-radius: var(--FUBorderRadius, var(--dbp-border-radius, 0));
border-width: var(--FUBorderWidth, 2px);
width: auto;
margin: var(--FUMargin, 0px);
padding: var(--FUPadding, 20px);
flex-grow: 1;
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
box-sizing: border-box;
}
#dropArea.highlight {
border-color: var(--FUBorderColorHighlight, purple);
}
#clipboard-file-picker {
width: 100%;
height: 100%;
}
.paddle {
position: absolute;
top: 0px;
padding: 0px 5px;
box-sizing: content-box;
height: 100%;
}
.paddle::before {
background-color: var(--dbp-background);
opacity: 0.8;
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
.right-paddle {
right: 0px;
}
.left-paddle {
left: 0px;
}
.nav-wrapper {
position: relative;
overflow-x: auto;
border: none;
}
.paddles {
display: none;
}
.modal-nav {
height: 100%;
}
only screen and (max-width: 768px) {
#dropArea {
height: 100%;
width: 100%;
}
}
only screen and (max-width: 340px) {
.paddles {
display: inherit;
}
.paddles.hidden {
display: none;
}
}
`}render(){let e=this._i18n,t=this.allowedMimeTypes;this.decompressZip&&this.allowedMimeTypes!==``&&(t+=`,application/zip,application/x-zip-compressed`);let n;return n=this.multipleFiles>1?o`
<input
?disabled="${this.disabled}"
type="file"
id="fileElem"
multiple
accept="${w(t)}"
name="file" />
`:o`
<input
?disabled="${this.disabled}"
type="file"
id="fileElem"
accept="${w(t)}"
name="file" />
`,o`
<dbp-modal
id="modal-picker"
modal-id="modal-picker-dialog"
class="file-handling-modal"
full-height-line
title="${this.context}"
lang="${this.lang}"
-modal-closed="${e=>this.handleModalClosed(e)}">
<div slot="content" class="file-handling-modal-content">
<div class="nav-wrapper modal-nav">
<nav class="modal-nav" role="tablist">
<button
role="tab"
aria-selected="${this.activeTarget===`local`}"
aria-controls="select-local"
title="${e.t(`file-source.nav-local`)}"
="${()=>{this.activeTarget=`local`}}"
class="${g({active:this.activeTarget===`local`,hidden:!this.hasEnabledSource(`local`)})}">
<dbp-icon class="nav-icon" name="laptop"></dbp-icon>
<p>${e.t(`file-source.nav-local`)}</p>
</button>
<button
role="tab"
aria-selected="${this.activeTarget===`nextcloud`}"
aria-controls="select-cloud"
title="Nextcloud"
="${()=>{this.activeTarget=`nextcloud`}}"
class="${g({active:this.activeTarget===`nextcloud`,hidden:!this.hasEnabledSource(`nextcloud`)||this.nextcloudWebDavUrl===``||this.nextcloudAuthUrl===``})}">
<dbp-icon class="nav-icon" name="cloud"></dbp-icon>
<p>${this.nextcloudName}</p>
</button>
<button
role="tab"
aria-selected="${this.activeTarget===`clipboard`}"
aria-controls="select-clipboard"
title="${e.t(`file-source.clipboard`)}"
="${()=>{this.activeTarget=`clipboard`}}"
class="${g({active:this.activeTarget===`clipboard`,hidden:!this.hasEnabledSource(`clipboard`)})}">
<dbp-icon class="nav-icon" name="clipboard"></dbp-icon>
<p>${e.t(`file-source.clipboard`)}</p>
</button>
</nav>
<div class="paddles">
<dbp-icon
class="left-paddle paddle hidden"
name="chevron-left"
class="close-icon"></dbp-icon>
<dbp-icon
class="right-paddle paddle"
name="chevron-right"
class="close-icon"></dbp-icon>
</div>
</div>
<main class="modal-content" id="modal-picker-content">
<div
id="select-local"
role="tabpanel"
class="source-main ${g({hidden:this.activeTarget!==`local`})}">
<div id="dropArea">
<div class="block">
<p>${e.t(`intro`)}</p>
</div>
${n}
<button
class="button is-primary"
?disabled="${this.disabled}"
="${()=>{this._(`#fileElem`).click()}}">
<dbp-icon name="select-all" aria-hidden="true"></dbp-icon>
${this.buttonLabel||e.t(`upload-label`)}
</button>
</div>
</div>
<div
id="select-cloud"
role="tabpanel"
class="source-main ${g({hidden:this.activeTarget!==`nextcloud`||this.nextcloudWebDavUrl===``||this.nextcloudAuthUrl===``})}">
${this.getNextcloudHtml()}
</div>
<div
id="select-clipboard"
role="tabpanel"
class="source-main ${g({hidden:this.activeTarget!==`clipboard`})}">
${this.getClipboardHtml()}
</div>
</main>
</div>
</dbp-modal>
`}};export{C as n,T as t};
//# sourceMappingURL=file-source.DRQEpAaB.js.map