@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:
140 lines (128 loc) • 8.48 kB
JavaScript
let t,i,e=t=>t;function o(t,i){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);i&&(o=o.filter((function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable}))),e.push.apply(e,o)}return e}function n(t){for(var i=1;i<arguments.length;i++){var e=null!=arguments[i]?arguments[i]:{};i%2?o(Object(e),!0).forEach((function(i){r(t,i,e[i])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):o(Object(e)).forEach((function(i){Object.defineProperty(t,i,Object.getOwnPropertyDescriptor(e,i))}))}return t}function r(t,i,e){return(i=function(t){var i=function(t,i){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var o=e.call(t,i||"default");if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===i?String:Number)(t)}
/*!
* 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
*/(t,"string");return"symbol"==typeof i?i:i+""}(i))in t?Object.defineProperty(t,i,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[i]=e,t}import{c as a,L as s,D as c,g as d,d as l,t as f,i as p,x as u}from"./notification.DekX2Yn_.es.js";var h={"add-notification":"Benachrichtigung hinzufügen","open-dialog":"Dialog öffnen",send:"Senden"},g={"add-notification":"Add Notification","open-dialog":"Open Dialog",send:"Send"};function m(){return a({en:g,de:h},"de","en")}class b extends(s(c,m)){constructor(){super(),this.notificationBlock=null,this.notifications={},this.targetNotificationId=null}static get properties(){return n(n({},super.properties),{},{inline:{type:Boolean,attribute:"inline"}})}connectedCallback(){super.connectedCallback(),window.addEventListener("dbp-notification-send",(t=>{const i=t;if(void 0===i.detail)return;if(this.targetNotificationId=void 0!==i.detail.targetNotificationId?i.detail.targetNotificationId:null,this.targetNotificationId&&this.targetNotificationId!==this.id)return;if(!this.targetNotificationId&&"dbp-notification"!==this.id)return;this.notificationBlock=this._("#notification-container");const e=`notification-${(()=>{let t=(new Date).getTime();return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,(i=>{const e=(t+16*Math.random())%16|0;return t=Math.floor(t/16),("x"===i?e:3&e|8).toString(16)}))})()}`;this.notifications[e]={},this.notifications[e].id=e,this.notifications[e].messageSelector=`#${e}`;const o=void 0!==i.detail.type?i.detail.type:"info",n=void 0!==i.detail.body?i.detail.body:"",r=void 0!==i.detail.summary?i.detail.summary:"",a=void 0!==i.detail.timeout?i.detail.timeout:0,s=void 0!==i.detail.icon?i.detail.icon:"",c=""!==s?`<dbp-icon name="${s}"></dbp-icon>`:"",d=""!==r?`<h3>${r}</h3>`:"",l=void 0!==i.detail.replaceId?i.detail.replaceId:null;if(l)for(const t in this.notifications)this.notifications[t].replaceId===l&&this.removeMessageById(this.notifications[t]);this.notifications[e].replaceId=l;const f=a>0?`<div class="progress-container"><div class="progress" style="--dbp-progress-timeout: ${a}s;"></div></div>`:"",p=a>0?"has-progress-bar":"no-progress-bar",u=document.createElement("div");u.id=e,u.classList.add("notification","enter-animation",`is-${o}`,p),u.innerHTML=`\n <button id="${e}-button" class="delete"></button>\n ${d}\n ${c} ${n}\n ${f}\n `,this.notificationBlock.appendChild(u);this.notificationBlock.querySelector(`#${e}-button`).addEventListener("click",(()=>this.removeMessageById(this.notifications[e]))),a>0&&(this.notifications[e].progressTimeout=setTimeout((()=>{this.removeMessageById(this.notifications[e])}),1e3*a)),t.preventDefault()}))}disconnectedCallback(){super.disconnectedCallback();for(const t of Object.values(this.notifications))clearTimeout(t.progressTimeout)}removeMessageById(t,i=!1){const e=t.messageSelector,o=this._(e);if(o){const e=i?0:500;o.classList.add("is-removing"),setTimeout((()=>{this.notificationBlock.removeChild(o);const t=new CustomEvent("dbp-notification-close",{detail:{targetNotificationId:this.targetNotificationId},bubbles:!0,composed:!0});this.dispatchEvent(t)}),e),clearTimeout(this.notifications[t.id].progressTimeout),delete this.notifications[t.id]}}removeAllNotifications(){for(const t of Object.values(this.notifications))this.removeMessageById(t,!0)}static get styles(){return p(t||(t=e`
${0}
${0}
${0}
.notification-container {
position: fixed;
top: 0;
max-width: 500px;
margin: 0.75em auto;
left: 0;
right: 0;
z-index: 1000;
padding: 0;
}
:host([inline]) .notification-container {
top: 0;
left: 0;
right: 0;
max-width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
}
:host([inline]) .notification-container--inside {
margin-top: 60px;
}
:host([inline]) .notification:not(:last-child) {
/* margin-bottom: 1rem; */
}
.notification h3 {
font: inherit;
font-weight: bold;
margin-bottom: 3px;
}
.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);
}
`),d(),l(),f())}render(){return u(i||(i=e`
<div class="columns">
<div class="column notification-container" id="notification-container"></div>
</div>
`))}}export{b as N};
//# sourceMappingURL=notification.BMahxT1M.es.js.map