@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:
213 lines (202 loc) • 11.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
*/
import{A as e,C as t,J as n,K as r,O as i,P as a,Q as o,X as s,a as c,d as l,f as u,k as d,l as f,n as p,o as m,p as h,r as g,t as _,u as v,v as y}from"./directive-helpers.C6Xz79AM.js";
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const b=(e,t,n)=>{let r=/* @__PURE__ */ new Map;for(let i=t;i<=n;i++)r.set(e[i],i);return r},x=v(class extends l{constructor(e){if(super(e),e.type!==u.CHILD)throw Error(`repeat() can only be used in text expressions`)}dt(e,t,n){let r;n===void 0?n=t:t!==void 0&&(r=t);let i=[],a=[],o=0;for(let t of e)i[o]=r?r(t,o):o,a[o]=n(t,o),o++;return{values:a,keys:i}}render(e,t,n){return this.dt(e,t,n).values}update(e,[t,n,i]){let a=_(e),{values:o,keys:s}=this.dt(t,n,i);if(!Array.isArray(a))return this.ut=s,o;let l=this.ut??=[],u=[],d,f,h=0,v=a.length-1,y=0,x=o.length-1;for(;h<=v&&y<=x;)if(a[h]===null)h++;else if(a[v]===null)v--;else if(l[h]===s[y])u[y]=c(a[h],o[y]),h++,y++;else if(l[v]===s[x])u[x]=c(a[v],o[x]),v--,x--;else if(l[h]===s[x])u[x]=c(a[h],o[x]),m(e,u[x+1],a[h]),h++,x--;else if(l[v]===s[y])u[y]=c(a[v],o[y]),m(e,a[h],a[v]),v--,y++;else if(d===void 0&&(d=b(s,y,x),f=b(l,h,v)),d.has(l[h])){if(d.has(l[v])){let t=f.get(s[y]),n=t===void 0?null:a[t];if(n===null){let t=m(e,a[h]);c(t,o[y]),u[y]=t}else u[y]=c(n,o[y]),m(e,a[h],n),a[t]=null;y++}else p(a[v]),v--}else p(a[h]),h++;for(;y<=x;){let t=m(e,u[x+1]);c(t,o[y]),u[y++]=t}for(;h<=v;){let e=a[h++];e!==null&&p(e)}return this.ut=s,g(e,u),r}});var S={"add-notification":`Benachrichtigung hinzufügen`,"close-notification":`Benachrichtigung schließen`,"open-dialog":`Dialog öffnen`,send:`Senden`},C={"add-notification":`Add Notification`,"close-notification":`Close notification`,"open-dialog":`Open Dialog`,send:`Send`};function w(){return o({en:C,de:S},`de`,`en`)}function T(e){let t=e.split(`
`);return t.map((e,r)=>n`
${e}${r<t.length-1?n`
<br />
`:``}
`)}var E=class extends d(h){constructor(){super(),this.type=`info`,this.body=``,this.summary=``,this.timeout=0,this.icon=``,this.replaceId=null,this.closeLabel=`Close notification`,this.notificationId=null,this.targetNotificationId=null,this._progressTimeout=null}static get scopedElements(){return{"dbp-icon":e}}static get properties(){return{...super.properties,type:{type:String},body:{type:String},summary:{type:String},timeout:{type:Number},icon:{type:String},replaceId:{type:String},closeLabel:{type:String},notificationId:{type:String,reflect:!0}}}connectedCallback(){super.connectedCallback(),this.timeout>0&&(this._progressTimeout=setTimeout(()=>{this.handleDelete(!0)},this.timeout*1e3))}disconnectedCallback(){this._progressTimeout&&clearTimeout(this._progressTimeout),super.disconnectedCallback()}handleDelete(e=!1){this.dispatchEvent(new CustomEvent(`dbp-notification-close`,{detail:{targetNotificationId:this.targetNotificationId,automatic:e},bubbles:!0,composed:!0}))}static get styles(){return s`
${i()}
${y()}
${t()}
.delete,
.modal-close {
-moz-appearance: none;
-webkit-appearance: none;
background-color: rgba(10, 10, 10, 0.2);
border: none;
border-radius: 290486px;
cursor: pointer;
pointer-events: auto;
display: inline-block;
flex-grow: 0;
flex-shrink: 0;
font-size: 0;
height: 20px;
max-height: 20px;
max-width: 20px;
min-height: 20px;
min-width: 20px;
outline: 0;
position: relative;
vertical-align: top;
width: 20px;
}
.delete::before,
.modal-close::before,
.delete::after,
.modal-close::after {
background-color: var(--dbp-background);
color: var(--dbp-content);
content: '';
display: block;
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
-webkit-transform-origin: center center;
transform-origin: center center;
}
.delete::before,
.modal-close::before {
height: 2px;
width: 50%;
}
.delete::after,
.modal-close::after {
height: 50%;
width: 2px;
}
.delete:hover,
.modal-close:hover,
.delete:focus,
.modal-close:focus {
background-color: rgba(10, 10, 10, 0.3);
}
.delete:active,
.modal-close:active {
background-color: rgba(10, 10, 10, 0.4);
}
`}render(){let e=this.timeout>0?`has-progress-bar`:`no-progress-bar`,t=this.timeout>0?`--dbp-progress-timeout: ${this.timeout}s;`:``;return n`
<div
class="notification is-${this.type} ${e} enter-animation"
role="${this.type===`warning`||this.type===`danger`?`alert`:`status`}"
aria-atomic="true">
<button
class="delete"
@click=${this.handleDelete}
aria-label="${this.closeLabel}"></button>
${this.summary?n`
<h3>${this.summary}</h3>
`:``}
<div class="content">
${this.icon?n`
<dbp-icon name="${this.icon}"></dbp-icon>
`:``}
<span>${T(this.body)}</span>
</div>
${this.timeout>0?n`
<div class="progress-container">
<div class="progress" style="${t}"></div>
</div>
`:``}
</div>
`}},D=class extends f(d(h),w){constructor(){super(),this.notifications=[],this._boundNotificationHandler=this._handleNotificationEvent.bind(this)}static get scopedElements(){return{"dbp-notification-item":E}}static get properties(){return{...super.properties,inline:{type:Boolean,attribute:`inline`},notifications:{type:Array,state:!0}}}_handleNotificationEvent(e){let t=e.detail.targetNotificationId??null;if(t){if(t!==this.id)return}else if(this.id!==`dbp-notification`)return;e.preventDefault(),e.stopImmediatePropagation();let n=e.detail.replaceId??null,r={id:a(),type:e.detail.type??`info`,body:e.detail.body??``,summary:e.detail.summary??``,timeout:e.detail.timeout??0,icon:e.detail.icon??``,replaceId:n};n&&(this.notifications=this.notifications.filter(e=>e.replaceId!==n)),this.notifications.push(r),this.requestUpdate(`notifications`),this.updateComplete.then(()=>{let e=new CustomEvent(`dbp-notification-added`,{detail:{targetNotificationId:this.id},bubbles:!0,composed:!0});this.dispatchEvent(e)})}connectedCallback(){super.connectedCallback(),window.addEventListener(`dbp-notification-send`,this._boundNotificationHandler)}disconnectedCallback(){window.removeEventListener(`dbp-notification-send`,this._boundNotificationHandler),super.disconnectedCallback();for(let e of Object.values(this.notifications))clearTimeout(e.progressTimeout)}_removeById(e,t=!1){let n=this.renderRoot.querySelector(`dbp-notification-item[notificationId="${e}"]`);if(n){let r=t?0:500;n.classList.add(`is-removing`),setTimeout(()=>{this.notifications=this.notifications.filter(t=>t.id!==e),this.dispatchEvent(new CustomEvent(`dbp-notification-removed`,{detail:{targetNotificationId:this.id},bubbles:!0,composed:!0}))},r)}}removeAllNotifications(){this.notifications=[]}static get styles(){return s`
${i()}
${y()}
${t()}
.notification-container {
position: fixed;
top: 0;
max-width: var(--dbp-notification-max-width, 40rem);
width: 100%;
margin: 0.75em auto;
left: 0;
right: 0;
z-index: 1000;
padding: 0;
}
.visually-hidden {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px;
width: 1px;
word-wrap: normal;
}
:host([inline]) .notification-container {
top: 0;
right: 0;
left: 0;
max-width: var(--dbp-notification-max-width, 40rem);
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
}
:host([inline]) .notification-container--inside {
margin-top: 60px;
}
.notification h3 {
font: inherit;
font-weight: bold;
margin-bottom: 3px;
}
`}render(){return n`
<div class="notification-container" id="notification-container">
${x(this.notifications,e=>e.id,e=>n`
<dbp-notification-item
.type=${e.type}
.body=${e.body}
.summary=${e.summary}
.timeout=${e.timeout}
.icon=${e.icon}
.replaceId=${e.replaceId}
.closeLabel=${this._i18n.t(`close-notification`)}
.notificationId=${e.id}
@dbp-notification-close=${t=>{this._removeById(e.id,t.detail.automatic)}}></dbp-notification-item>
`)}
</div>
`}};export{x as n,D as t};
//# sourceMappingURL=notification.0izelRLi.js.map