@digital-blueprint/mono-app
Version:
[GitHub Repository](https://github.com/digital-blueprint/mono-app) | [npmjs package](https://www.npmjs.com/package/@digital-blueprint/mono-app) | [Unpkg CDN](https://unpkg.com/browse/@digital-blueprint/mono-app/) | [Mono Bundle](https://github.com/digital
506 lines (445 loc) • 130 kB
JavaScript
let t,e,i,n,o,a,r,s,l,d,c,h,u,p,g,m,f,b,v,y,w,x,k,_,E,C,S,L,U,A,D,$=t=>t;function T(){return T=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var n in i)({}).hasOwnProperty.call(i,n)&&(t[n]=i[n])}return t},T.apply(null,arguments)
/*!
* License: LGPL-2.1-or-later
* Dependencies:
*
* @dbp-toolkit/app-shell: 0.3.11 (LGPL-2.1-or-later)
* @dbp-toolkit/language-select: 0.3.3 (LGPL-2.1-or-later)
* @dbp-toolkit/common: 0.3.10 (LGPL-2.1-or-later)
* @dbp-toolkit/auth: 0.3.4 (LGPL-2.1-or-later)
* @dbp-toolkit/notification: 0.3.3 (LGPL-2.1-or-later)
* @dbp-toolkit/theme-switcher: 0.1.1 (LGPL-2.1-or-later)
* path-to-regexp: 6.3.0 (MIT)
* universal-router: 9.2.1 (MIT)
* generateUrls: 9.2.1 (MIT)
* @dbp-toolkit/matomo: 0.2.8 (LGPL-2.1-or-later)
* @tugraz/web-components: 0.3.7 (LGPL-2.1-or-later)
*/}import{c as I,D as M,i as O,x as R,e as F,A as V,g as N,a as G,s as P,S as B,M as j,o as z,I as H,b as q,d as W,f as K,h as Y,j as J,r as Z,k as X,l as Q}from"./shared/notification.D4Bgzi3L.es.js";var tt={"activity-example":{"hello-world":"Hallo Welt"},"choose-from-menu":"Bitte wählen Sie eine Aktivität aus dem Menu.",contact:"Kontakt",imprint:"Impressum",login:"Anmelden",logo:{word1:"Wissen",word2:"Technik",word3:"Leidenschaft"},logout:"Abmelden","page-not-found":"Die gewünschte Seite wurde nicht gefunden","page-updated-needs-reload":"Die Applikation wurde aktualisiert. Bitte laden Sie die Seite neu.","privacy-policy":"Datenschutz",welcome:{headline:"Willkommen!"},"switch-layout":"Layout wechseln","switch-to-wide-layout-label":"Zum Weiten Layout wechseln","switch-to-standard-layout-label":"Zum Standardlayout wechseln","wide-layout-name":"Erweitert","standard-layout-name":"Standard"},et={"activity-example":{"hello-world":"Hello World"},"choose-from-menu":"Please choose an activity from the menu.",contact:"Contact",imprint:"Legal Notice",login:"Login",logo:{word1:"Science",word2:"Passion",word3:"Technology"},logout:"Logout","page-not-found":"Requested Page Not Found","page-updated-needs-reload":"The application has been updated. Please reload the page.","privacy-policy":"Privacy Policy",welcome:{headline:"Welcome!"},"switch-layout":"Switch layout","switch-to-wide-layout-label":"Switch to Wide Layout","switch-to-standard-layout-label":"Switch to Standard Layout","wide-layout-name":"Wide","standard-layout-name":"Standard"};function it(){return I({en:et,de:tt},"de","en")}var nt={de:"Deutsch","de-action":"Auf Deutsch anzeigen",demo:"Hallo Welt",en:"Englisch","en-action":"Auf Englisch anzeigen"},ot={de:"German","de-action":"Switch to German",demo:"Hello World",en:"English","en-action":"Switch to English"};class at extends V{constructor(){super(),this._lang="de",this.languages=["de","en"],this._i18n=I({en:ot,de:nt},"de","en"),this._i18n.t("de"),this._i18n.t("de-action"),this._i18n.t("en"),this._i18n.t("en-action")}_getNextLanguage(t){var e=this.languages.indexOf(t),i=this.languages[e+1];return void 0===i&&(i=this.languages[0]),i}_getPreviousLanguage(t){var e=this.languages.indexOf(t),i=this.languages[e-1];return void 0===i&&(i=this.languages[this.languages.length-1]),i}static get properties(){return{lang:{type:String},next:{type:String},languages:{type:Array}}}set lang(t){const e=this.lang,i=this.next;this._lang=t,this.requestUpdate("lang",e),this.requestUpdate("next",i),e!==t&&(this.sendSetPropertyEvent("lang",t),this._i18n.changeLanguage(this.next))}get lang(){return this._lang}set next(t){this.lang=this._getPreviousLanguage(t)}get next(){return this._getNextLanguage(this.lang)}static get styles(){return O(i||(i=$`
${0}
:host {
display: inline-block;
}
a:hover {
color: var(--dbp-hover-color, var(--dbp-content));
background-color: var(--dbp-hover-background-color);
transition: none;
}
a {
padding: 0.3em;
display: inline-block;
text-decoration: none;
transition: background-color 0.15s, color 0.15s;
color: var(--dbp-content);
}
input::-moz-focus-inner { border: 0; }
:focus-visible{
outline:none !important;
outline-width: 0 !important;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: 0px 0px 4px 2px var(--dbp-primary);
}
`),N())}onClick(t){t.preventDefault(),this.lang=this.next}render(){var t=this._i18n.t(this.next+"-action");return R(n||(n=$`
<a href="#" title="${0}" @click=${0}>${0}</a>
`),t,this.onClick,this.next.toUpperCase())}}var rt={login:"Anmelden","login-failed":"Kommunikation mit dem Anmeldeserver fehlgeschlagen",logout:"Abmelden","logging-in":"Einloggen"},st={login:"Login","login-failed":"Communication with the login server failed",logout:"Logout","logging-in":"Logging in"};function lt(){return I({en:st,de:rt},"de","en")}class dt extends EventTarget{constructor(t,e,i,n,o,a){super(),this._baseURL=t,this._realm=e,this._clientId=i,this._keycloak=null,this._initPromise=null,this._silentCheckSsoUri=n,this._checkLoginIframe=o,this._idpHint=a,this._checkId=null,this.MIN_VALIDITY=20,this.CHECK_INTERVAL=10,this.DEBUG=!1,this._onVisibilityChanged=this._onVisibilityChanged.bind(this),document.addEventListener("visibilitychange",this._onVisibilityChanged)}close(){document.removeEventListener("visibilitychange",this._onVisibilityChanged)}_onVisibilityChanged(){"visible"===document.visibilityState&&this._keycloak.authenticated&&this._checkTokeHasExpired()}_onChanged(){const t=new CustomEvent("changed",{detail:this._keycloak,bubbles:!0,composed:!0});this.dispatchEvent(t)}_onReady(t){t&&this._onChanged()}async _onTokenExpired(){console.log("Token has expired");let t=!1;try{t=await this._keycloak.updateToken(-1)}catch(t){return void console.log("Failed to refresh the token",t)}console.assert(t,"token should have been refreshed")}async _checkTokeHasExpired(){let t,e=this.MIN_VALIDITY+this.CHECK_INTERVAL;this.DEBUG&&console.log(`Updating token if not valid for at least ${e}s`);try{t=await this._keycloak.updateToken(e)}catch(t){console.log("Failed to refresh the token",t)}this.DEBUG&&t&&console.log("token has been refreshed")}async _onAuthSuccess(){null!==this._checkId&&(clearInterval(this._checkId),this._checkId=null),this._checkId=setInterval(this._checkTokeHasExpired.bind(this),1e3*this.CHECK_INTERVAL),this._onChanged()}async _onAuthLogout(){null!==this._checkId&&(clearInterval(this._checkId),this._checkId=null),this._onChanged()}async _init(){const t=(await import("./shared/keycloak.DGStzhYk.es.js")).default;this._keycloak=new t({url:this._baseURL,realm:this._realm,clientId:this._clientId}),this._keycloak.onTokenExpired=this._onTokenExpired.bind(this),this._keycloak.onAuthRefreshSuccess=this._onChanged.bind(this),this._keycloak.onAuthRefreshError=this._onChanged.bind(this),this._keycloak.onAuthLogout=this._onAuthLogout.bind(this),this._keycloak.onAuthSuccess=this._onAuthSuccess.bind(this),this._keycloak.onAuthError=this._onChanged.bind(this),this._keycloak.onReady=this._onReady.bind(this);const e={promiseType:"native",pkceMethod:"S256"};this.DEBUG&&(e.enableLogging=!0),e.checkLoginIframe=this._checkLoginIframe,this._silentCheckSsoUri?(e.onLoad="check-sso",e.silentCheckSsoRedirectUri=function(t){try{return new URL(t).href}catch(e){return new URL(t,window.location.href).href}}(this._silentCheckSsoUri),await function(t,e){let i=new Promise(((e,i)=>{let n=setTimeout((()=>{clearTimeout(n),i("Timed out in "+t+"ms.")}),t)}));return Promise.race([e,i])}(5e3,this._keycloak.init(e)).catch((()=>{console.log("Login timed out"),this._onChanged()}))):await this._keycloak.init(e)}async _ensureInit(){return null===this._initPromise&&(this._initPromise=this._init()),this._initPromise}isLoggingIn(){const t=window.location.href;return t.search("[&#]state=")>=0&&t.search("[&#]session_state=")>=0}async login(t){await this._ensureInit();const e=(t=t||{}).lang||"en",i=t.scope||"";this._keycloak.authenticated||await this._keycloak.login({kcLocale:e,locale:e,scope:i,idpHint:this._idpHint})}async tryLogin(){await this._ensureInit()}async localLogout(){this._keycloak.clearToken()}async logout(){await this._ensureInit(),this._keycloak.logout()}}const ct=Object.freeze({UNKNOWN:"unknown",LOGGING_IN:"logging-in",LOGGED_IN:"logged-in",LOGGING_OUT:"logging-out",LOGGED_OUT:"logged-out"});class ht extends V{constructor(){super(),this.forceLogin=!1,this.token="",this.subject="",this.name="",this.tryLogin=!1,this.entryPointUrl="",this._user=null,this._userId="",this._authenticated=!1,this._loginStatus=ct.UNKNOWN,this.requestedLoginStatus=ct.UNKNOWN,this._i18n=lt(),this.lang=this._i18n.language,this.keycloakUrl=null,this.realm=null,this.clientId=null,this.silentCheckSsoRedirectUri=null,this.noCheckLoginIframe=!1,this.scope=null,this.idpHint="",this._onKCChanged=this._onKCChanged.bind(this),window.playwright&&this.setAttribute("data-testid","dbp-auth-keycloak")}update(t){t.forEach(((t,e)=>{switch(e){case"lang":this._i18n.changeLanguage(this.lang);break;case"requestedLoginStatus":switch(console.log("requested-login-status changed",this.requestedLoginStatus),this.requestedLoginStatus){case ct.LOGGED_IN:this._kcwrapper.login({lang:this.lang,scope:this.scope||""});break;case ct.LOGGED_OUT:this._loginStatus===ct.LOGGED_IN&&this._setLoginStatus(ct.LOGGING_OUT),this._kcwrapper.logout(),this._loginStatus===ct.LOGGING_OUT&&this._setLoginStatus(ct.LOGGED_IN)}}})),super.update(t)}async _fetchUser(t){var e;const i=G(this.entryPointUrl,`/frontend/users/${encodeURIComponent(t)}`);let n=await fetch(i,{headers:{Authorization:"Bearer "+this.token}});if(!n.ok)throw n;return{roles:null!=(e=(await n.json()).roles)?e:[]}}async _onKCChanged(t){const e=t.detail;if(this._authenticated=e.authenticated,e.authenticated){let t=this.token!==e.token;this.name=e.idTokenParsed.name,this.token=e.token,this.subject=e.subject;const i=e.idTokenParsed.preferred_username;let n=i!==this._userId;if(n){let t;this._userId=i;try{t=await this._fetchUser(i)}catch(e){console.error(e),t={roles:[]}}i===this._userId&&(this._user=t)}null!==this._user&&this._setLoginStatus(ct.LOGGED_IN,t||n)}else this._loginStatus===ct.LOGGED_IN&&this._setLoginStatus(ct.LOGGING_OUT),this.name="",this.token="",this.subject="",this._userId="",this._user=null,this._setLoginStatus(ct.LOGGED_OUT)}sendSetPropertyEvents(){const t={"login-status":this._loginStatus,subject:this.subject,token:this.token,"user-full-name":this.name,"user-id":this._userId,"person-id":this._userId,person:this._user};(window.Cypress||window.playwright)&&(window.DBPAuth=t,console.log("Cypress/Playwright detected")),this.setAttribute("data-auth-set","true"),this.sendSetPropertyEvent("auth",t)}_setLoginStatus(t,e){(this._loginStatus!==t||e)&&(this._loginStatus=t,this.sendSetPropertyEvents())}static get properties(){return T({},super.properties,{lang:{type:String},forceLogin:{type:Boolean,attribute:"force-login"},tryLogin:{type:Boolean,attribute:"try-login"},entryPointUrl:{type:String,attribute:"entry-point-url"},name:{type:String,attribute:!1},token:{type:String,attribute:!1},subject:{type:String,attribute:!1},_userId:{type:String,attribute:!1},_user:{type:Object,attribute:!1},_loginStatus:{type:String,attribute:!1},keycloakUrl:{type:String,attribute:"url"},realm:{type:String},clientId:{type:String,attribute:"client-id"},silentCheckSsoRedirectUri:{type:String,attribute:"silent-check-sso-redirect-uri"},scope:{type:String},idpHint:{type:String,attribute:"idp-hint"},requestedLoginStatus:{type:String,attribute:"requested-login-status"},noCheckLoginIframe:{type:Boolean,attribute:"no-check-login-iframe"}})}connectedCallback(){var t=this;if(super.connectedCallback(),!this.keycloakUrl)throw Error("url not set");if(!this.realm)throw Error("realm not set");if(!this.clientId)throw Error("client-id not set");this._kcwrapper=new dt(this.keycloakUrl,this.realm,this.clientId,this.silentCheckSsoRedirectUri,!this.noCheckLoginIframe,this.idpHint),this._kcwrapper.addEventListener("changed",this._onKCChanged);!async function(){try{t.forceLogin||t._kcwrapper.isLoggingIn()?(t._setLoginStatus(ct.LOGGING_IN),await t._kcwrapper.login({lang:t.lang,scope:t.scope||""})):t.tryLogin?(t._setLoginStatus(ct.LOGGING_IN),await t._kcwrapper.tryLogin(),t._authenticated||t._setLoginStatus(ct.LOGGED_OUT)):t._setLoginStatus(ct.LOGGED_OUT)}catch(e){throw t._setLoginStatus(ct.LOGGED_OUT),P({summary:t._i18n.t("login-failed"),type:"danger",timeout:5}),e}}()}disconnectedCallback(){this._kcwrapper.close(),this._kcwrapper.removeEventListener("changed",this._onKCChanged),super.disconnectedCallback()}}B(V);class ut extends(B(V)){constructor(){super(),this._i18n=it(),this.lang=this._i18n.language,this.auth={},this.closeDropdown=this.closeDropdown.bind(this),this.onWindowResize=this.onWindowResize.bind(this)}static get scopedElements(){return{"dbp-icon":H}}static get properties(){return T({},super.properties,{lang:{type:String},auth:{type:Object}})}onWindowResize(){this.updateDropdownWidth()}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.onWindowResize),document.addEventListener("click",this.closeDropdown)}disconnectedCallback(){window.removeEventListener("resize",this.onWindowResize),document.removeEventListener("click",this.closeDropdown),super.disconnectedCallback()}updateDropdownWidth(){const t=this.shadowRoot.querySelector("div.dropdown-menu");if(!t)return;let e=this.getBoundingClientRect(),i=window.innerWidth-e.left;t.setAttribute("style",`width: ${i-20}px`)}onLoginClicked(t){this.sendSetPropertyEvent("requested-login-status",ct.LOGGED_IN),t.preventDefault()}onLogoutClicked(t){this.sendSetPropertyEvent("requested-login-status",ct.LOGGED_OUT)}update(t){t.forEach(((t,e)=>{"lang"===e&&this._i18n.changeLanguage(this.lang)})),super.update(t)}static get styles(){return O(o||(o=$`
${0}
:host {
display: inline-block;
}
a {
color: var(--dbp-content);
fill: var(--dbp-content);
cursor: pointer;
text-decoration: none;
display: block;
}
input::-moz-focus-inner {
border: 0;
}
:focus-visible {
outline: none !important;
outline-width: 0 !important;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: 0px 0px 4px 2px var(--dbp-primary);
}
.dropdown.is-active .dropdown-menu,
.dropdown.is-hoverable:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
display: none;
min-width: 5em;
max-width: 25em;
position: absolute;
z-index: 20;
border: var(--dbp-border);
border-radius: 0px;
overflow: hidden;
background-color: var(--dbp-background);
}
.dropdown-content {
padding-bottom: 0.5rem;
padding-top: 0.5rem;
}
.menu a {
/*padding: 0.3em;*/
font-weight: 400;
color: var(--dbp-content);
display: block;
text-decoration: none;
}
.menu a:hover {
color: var(--dbp-hover-color, var(--dbp-content));
background-color: var(--dbp-hover-background-color);
}
.menu a.selected {
color: var(--dbp-on-secondary-surface);
background-color: var(--dbp-secondary-surface);
}
.dropdown-item {
color: var(--dbp-muted);
display: block;
font-size: 0.875rem;
line-height: 1.5;
padding: 0.375rem 1rem;
margin-left: 0.5em;
margin-right: 0.5em;
padding-left: 0.5em;
padding-right: 0.5em;
position: relative;
}
.dropdown {
cursor: pointer;
}
a.dropdown-item {
width: initial !important;
}
.main-button {
min-width: 150px;
}
.menu-icon {
height: 1em;
width: 1em;
vertical-align: -0.1rem;
}
.login-box svg {
width: 1.1em;
height: 1.1em;
display: flex;
}
.login-button {
padding: 0.3em 0.4em;
transition: background-color 0.15s, color 0.15s;
}
.login-button:hover {
color: var(--dbp-hover-color, var(--dbp-content));
background-color: var(--dbp-hover-background-color);
cursor: pointer;
transition: none;
}
.login-box {
display: flex;
align-items: center;
}
.login-box:hover svg path {
fill: var(--dbp-hover-color);
}
.login-box .label {
padding-left: 0.2em;
}
.dropdown-trigger {
display: flex;
align-items: center;
}
.dropdown-trigger .name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
margin-right: 0.5em;
}
`),N())}setChevron(t){const e=this.shadowRoot.querySelector("#menu-chevron-icon");null!==e&&(e.name=t)}onDropdownClick(t){t.stopPropagation(),t.currentTarget.classList.toggle("is-active"),this.setChevron(t.currentTarget.classList.contains("is-active")?"chevron-up":"chevron-down"),this.updateDropdownWidth()}closeDropdown(){this.shadowRoot.querySelectorAll(".dropdown").forEach((function(t){t.classList.remove("is-active")})),this.setChevron("chevron-down")}renderLoggedIn(){const t=this._i18n;return R(a||(a=$`
<div class="dropdown" @click="${0}">
<a href="#">
<div class="dropdown-trigger login-button">
<div class="name">${0}</div>
<dbp-icon
class="menu-icon"
name="chevron-down"
id="menu-chevron-icon"></dbp-icon>
</div>
</a>
<div class="dropdown-menu" id="dropdown-menu2" role="menu">
<div class="dropdown-content" @blur="${0}">
<div class="menu">
<a href="#" @click="${0}" class="dropdown-item">
${0}
</a>
</div>
</div>
</div>
</div>
`),this.onDropdownClick,this.auth["user-full-name"],this.closeDropdown,this.onLogoutClicked,t.t("logout"))}renderLoggedOut(){const t=this._i18n;return R(r||(r=$`
<a href="#" @click="${0}">
<div class="login-box login-button">
<div class="icon" aria-hidden="true">${0}</div>
<div class="label">${0}</div>
</div>
</a>
`),this.onLoginClicked,z('\n <svg\n viewBox="0 0 100 100"\n y="0px"\n x="0px"\n id="icon"\n role="img"\n version="1.1">\n <g\n id="g6">\n <path\n style="stroke-width:1.33417916"\n id="path2"\n d="m 42.943908,38.894934 5.885859,6.967885 H 5.4215537 c -1.8393311,0 -3.4334181,1.741972 -3.4334181,4.064599 0,2.322628 1.4714649,4.064599 3.4334181,4.064599 H 48.829767 L 42.943908,60.9599 c -1.348843,1.596808 -1.348843,4.064599 0,5.661406 1.348843,1.596808 3.433418,1.596808 4.782261,0 L 61.705085,49.927418 47.726169,33.378693 c -1.348843,-1.596806 -3.433418,-1.596806 -4.782261,0 -1.348843,1.596807 -1.348843,4.064599 0,5.516241 z" />\n <path\n id="path4"\n d="m 50,2.3007812 c -18.777325,0 -35.049449,10.9124408 -42.8261719,26.7246098 H 13.390625 C 20.672112,16.348362 34.336876,7.8007812 50,7.8007812 73.3,7.8007812 92.300781,26.7 92.300781,50 92.300781,73.3 73.3,92.300781 50,92.300781 c -15.673389,0 -29.345175,-8.60579 -36.623047,-21.326172 H 7.1640625 C 14.942553,86.8272 31.242598,97.800781 50.099609,97.800781 76.399609,97.800781 97.900391,76.4 97.900391,50 97.800391,23.7 76.3,2.3007812 50,2.3007812 Z" />\n </g>\n </svg>\n '),t.t("login"))}render(){const t="logged-in"===this.auth["login-status"];return R(s||(s=$`
<div class="authbox">${0}</div>
`),t?this.renderLoggedIn():this.renderLoggedOut())}}var pt={send:"senden"},gt={send:"send"};class mt extends M{constructor(){super(),this._i18n=I({en:gt,de:pt},"de","en"),this.lang=this._i18n.language,this.notificationBlock=null,this.notifications={},this.targetNotificationId=null}static get properties(){return T({},super.properties,{lang:{type:String},inline:{type:Boolean,attribute:"inline"}})}connectedCallback(){super.connectedCallback(),window.addEventListener("dbp-notification-send",(t=>{const e=t;if(void 0===e.detail)return;if(this.targetNotificationId=void 0!==e.detail.targetNotificationId?e.detail.targetNotificationId:null,this.targetNotificationId&&this.targetNotificationId!==this.id)return;if(!this.targetNotificationId&&"dbp-notification"!==this.id)return;this.notificationBlock=this._("#notification-container");const i=`notification-${(()=>{let t=(new Date).getTime();const e="xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,(e=>{const i=(t+16*Math.random())%16|0;return t=Math.floor(t/16),("x"===e?i:3&i|8).toString(16)}));return e})()}`;this.notifications[i]={},this.notifications[i].id=i,this.notifications[i].messageSelector=`#${i}`;const n=void 0!==e.detail.type?e.detail.type:"info",o=void 0!==e.detail.body?e.detail.body:"",a=void 0!==e.detail.summary?e.detail.summary:"",r=void 0!==e.detail.timeout?e.detail.timeout:0,s=void 0!==e.detail.icon?e.detail.icon:"",l=""!==s?`<dbp-icon name="${s}"></dbp-icon>`:"",d=""!==a?`<h3>${a}</h3>`:"",c=void 0!==e.detail.replaceId?e.detail.replaceId:null;if(c)for(const t in this.notifications)this.notifications[t].replaceId===c&&this.removeMessageById(this.notifications[t]);this.notifications[i].replaceId=c;const h=r>0?`<div class="progress-container"><div class="progress" style="--dbp-progress-timeout: ${r}s;"></div></div>`:"",u=r>0?"has-progress-bar":"no-progress-bar",p=document.createElement("div");p.id=i,p.classList.add("notification","enter-animation",`is-${n}`,u),p.innerHTML=`\n <button id="${i}-button" class="delete"></button>\n ${d}\n ${l} ${o}\n ${h}\n `,this.notificationBlock.appendChild(p);this.notificationBlock.querySelector(`#${i}-button`).addEventListener("click",(()=>this.removeMessageById(this.notifications[i]))),r>0&&(this.notifications[i].progressTimeout=setTimeout((()=>{this.removeMessageById(this.notifications[i])}),1e3*r)),t.preventDefault()}))}disconnectedCallback(){super.disconnectedCallback();for(const t of Object.values(this.notifications))clearTimeout(t.progressTimeout)}removeMessageById(t,e=!1){const i=t.messageSelector,n=this._(i);if(n){const i=e?0:500;n.classList.add("is-removing"),setTimeout((()=>{this.notificationBlock.removeChild(n);const t=new CustomEvent("dbp-notification-close",{detail:{targetNotificationId:this.targetNotificationId},bubbles:!0,composed:!0});this.dispatchEvent(t)}),i),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 O(l||(l=$`
${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);
}
`),N(),q(),W())}render(){return R(d||(d=$`
<div class="columns">
<div class="column notification-container" id="notification-container"></div>
</div>
`))}}var ft={"color-mode":"Farbmodus ändern","demo-title":"Theme Switcher Demo",intro:"Mit dem Theme-Switcher können Sie zwischen unterschiedlichen Farb-Themes umschalten."},bt={"color-mode":"Change color mode","demo-title":"Theme Switcher Demo",intro:"With the theme-switcher you can switch between multiple themes."};class vt extends(B(V)){constructor(){super(),this._i18n=I({en:bt,de:ft},"de","en"),this.lang=this._i18n.language,this.themes=[],this.boundCloseAdditionalMenuHandler=this.hideModeMenu.bind(this),this.detectBrowserDarkMode=!1,this.darkModeClass="dark-theme",this.langDir="",this.dropdownRight=!1,this.darkModeThemeOverride=null}static get properties(){return T({},super.properties,{lang:{type:String},themes:{type:Array,attribute:"themes"},darkModeThemeOverride:{type:String,attribute:"dark-mode-theme-override"},dropdownRight:{type:Boolean,attribute:"dropdown-right"},langDir:{type:String,attribute:"lang-dir"}})}static get scopedElements(){return{"dbp-icon":H}}update(t){t.forEach(((t,e)=>{"lang"===e&&this._i18n.changeLanguage(this.lang)})),super.update(t)}connectedCallback(){super.connectedCallback(),this.updateComplete.then((()=>{null===this.darkModeThemeOverride?this.detectBrowserDarkMode=!0:""===this.darkModeThemeOverride?this.detectBrowserDarkMode=!1:(this.detectBrowserDarkMode=!0,this.darkModeClass=this.darkModeThemeOverride),this.loadTheme("light-theme"),this.detectInitialMode()})),this.langDir&&K(this._i18n,this)}detectInitialMode(){let t=localStorage.getItem("prefered-color-mode");if(t){const e=this.themes.find((e=>e.class===t));e&&this.loadTheme(e.class)}else if(this.detectBrowserDarkMode){if(window.matchMedia("(prefers-color-scheme: dark)").matches){const t=this.themes.find((t=>t.class===this.darkModeClass));t&&this.loadTheme(t.class)}}}toggleModeMenu(){const t=this.shadowRoot.querySelector(".mode-button");if(!t)return;t.classList.contains("active")?t.classList.remove("active"):t.classList.add("active");const e=this.shadowRoot.querySelector("ul.extended-menu"),i=this.shadowRoot.querySelector(".mode-button");null!==e&&null!==i&&(e.classList.toggle("hidden"),e.classList.contains("hidden")?document.removeEventListener("click",this.boundCloseAdditionalMenuHandler):(document.addEventListener("click",this.boundCloseAdditionalMenuHandler),this.initateOpenAdditionalMenu=!0))}hideModeMenu(){if(this.initateOpenAdditionalMenu)return void(this.initateOpenAdditionalMenu=!1);const t=this.shadowRoot.querySelector("ul.extended-menu");t&&!t.classList.contains("hidden")&&this.toggleModeMenu()}loadTheme(t){const e=this.shadowRoot.querySelector(".button-"+t),i=this.shadowRoot.querySelectorAll(".button-theme"),n=this.shadowRoot.host.getRootNode({composed:!0}).body;null!==e&&0!==i.length&&null!==n&&(i.forEach((t=>t.classList.remove("active"))),e.classList.add("active"),n.classList.contains(t)||(this.themes.forEach((t=>{n.classList.remove(t.class)})),n.classList.add(t)))}saveTheme(t){const e=window.matchMedia("(prefers-color-scheme: dark)"),i=window.matchMedia("(prefers-color-scheme: light)");"light-theme"===t&&i.matches||t===this.darkModeClass&&e.matches?localStorage.removeItem("prefered-color-mode"):localStorage.setItem("prefered-color-mode",t)}static get styles(){return O(c||(c=$`
${0}
${0}
${0}
mode-button, button.button {
border: none;
}
.active,
.extended-menu li a.active dbp-icon {
color: var(--dbp-accent);
}
.active {
font-weight: bolder;
}
a:hover:not(.active),
.extended-menu li a:hover:not(.active) {
color: var(--dbp-hover-color, var(--dbp-content));
background-color: var(--dbp-hover-background-color);
transition: none;
}
a {
padding: 0.3em;
display: inline-block;
text-decoration: none;
transition: background-color 0.15s, color 0.15s;
color: var(--dbp-content);
}
.extended-menu {
list-style: none;
border: var(--dbp-border);
position: absolute;
background-color: var(--dbp-background);
z-index: 1000;
border-radius: var(--dbp-border-radius);
}
.extended-menu li {
text-align: left;
min-width: 160px;
}
.extended-menu li a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 12px 15px;
width: 100%;
box-sizing: border-box;
text-align: left;
color: var(--dbp-content);
background: none;
display: block;
}
.icon {
margin-right: 10px;
}
#theme-menu{
position: relative;
}
.ul-right{
right: 0px;
};
`),N(),q(),Y())}render(){const t=this._i18n;return R(h||(h=$`
<div id="theme-menu" class="${0}">
<a
href="#"
class="mode-button"
title="${0}"
@click="${0}">
<dbp-icon name="contrast"></dbp-icon>
</a>
<ul class="extended-menu hidden ${0}">
${0}
</ul>
</div>
`),F({hidden:this.themes.length<=1}),t.t("color-mode"),(t=>{this.toggleModeMenu(),t.preventDefault()}),F({"ul-right":this.dropdownRight}),this.themes.map((t=>R(u||(u=$`
<li class="" id="${0}">
<a
href="#"
class="button-theme button-${0}"
@click="${0}"
title="${0}">
<dbp-icon class="icon" name="${0}"></dbp-icon>
${0}
</a>
</li>
`),t.class,t.class,(e=>{this.loadTheme(t.class),this.saveTheme(t.class),e.preventDefault()}),t.name,t.icon,t.name))))}}class yt extends V{constructor(){super(),this._observer=null,this._dark=!1}static get properties(){return T({},super.properties,{_dark:{type:Boolean}})}static get styles(){return O(p||(p=$`
.hidden {
display: none;
}
`))}connectedCallback(){super.connectedCallback(),this._observer=new MutationObserver((()=>{this._dark=document.body.classList.contains("dark-theme")})),this._observer.observe(document.body,{attributes:!0,attributeFilter:["class"]})}disconnectedCallback(){this._observer.disconnect(),this._observer=null,super.disconnectedCallback()}render(){return R(g||(g=$`
<slot class="${0}" name="light"></slot>
<slot class="${0}" name="dark"></slot>
`),F({hidden:this._dark}),F({hidden:!this._dark}))}}function wt(t,e){void 0===e&&(e={});for(var i=function(t){for(var e=[],i=0;i<t.length;){var n=t[i];if("*"!==n&&"+"!==n&&"?"!==n)if("\\"!==n)if("{"!==n)if("}"!==n)if(":"!==n)if("("!==n)e.push({type:"CHAR",index:i,value:t[i++]});else{var o=1,a="";if("?"===t[s=i+1])throw new TypeError('Pattern cannot start with "?" at '.concat(s));for(;s<t.length;)if("\\"!==t[s]){if(")"===t[s]){if(0==--o){s++;break}}else if("("===t[s]&&(o++,"?"!==t[s+1]))throw new TypeError("Capturing groups are not allowed at ".concat(s));a+=t[s++]}else a+=t[s++]+t[s++];if(o)throw new TypeError("Unbalanced pattern at ".concat(i));if(!a)throw new TypeError("Missing pattern at ".concat(i));e.push({type:"PATTERN",index:i,value:a}),i=s}else{for(var r="",s=i+1;s<t.length;){var l=t.charCodeAt(s);if(!(l>=48&&l<=57||l>=65&&l<=90||l>=97&&l<=122||95===l))break;r+=t[s++]}if(!r)throw new TypeError("Missing parameter name at ".concat(i));e.push({type:"NAME",index:i,value:r}),i=s}else e.push({type:"CLOSE",index:i,value:t[i++]});else e.push({type:"OPEN",index:i,value:t[i++]});else e.push({type:"ESCAPED_CHAR",index:i++,value:t[i++]});else e.push({type:"MODIFIER",index:i,value:t[i++]})}return e.push({type:"END",index:i,value:""}),e}(t),n=e.prefixes,o=void 0===n?"./":n,a=e.delimiter,r=void 0===a?"/#?":a,s=[],l=0,d=0,c="",h=function(t){if(d<i.length&&i[d].type===t)return i[d++].value},u=function(t){var e=h(t);if(void 0!==e)return e;var n=i[d],o=n.type,a=n.index;throw new TypeError("Unexpected ".concat(o," at ").concat(a,", expected ").concat(t))},p=function(){for(var t,e="";t=h("CHAR")||h("ESCAPED_CHAR");)e+=t;return e},g=function(t){var e=s[s.length-1],i=t||(e&&"string"==typeof e?e:"");if(e&&!i)throw new TypeError('Must have text between two parameters, missing text after "'.concat(e.name,'"'));return!i||function(t){for(var e=0,i=r;e<i.length;e++){var n=i[e];if(t.indexOf(n)>-1)return!0}return!1}(i)?"[^".concat(kt(r),"]+?"):"(?:(?!".concat(kt(i),")[^").concat(kt(r),"])+?")};d<i.length;){var m=h("CHAR"),f=h("NAME"),b=h("PATTERN");if(f||b){var v=m||"";-1===o.indexOf(v)&&(c+=v,v=""),c&&(s.push(c),c=""),s.push({name:f||l++,prefix:v,suffix:"",pattern:b||g(v),modifier:h("MODIFIER")||""})}else{var y=m||h("ESCAPED_CHAR");if(y)c+=y;else if(c&&(s.push(c),c=""),h("OPEN")){v=p();var w=h("NAME")||"",x=h("PATTERN")||"",k=p();u("CLOSE"),s.push({name:w||(x?l++:""),pattern:w&&!x?g(v):x,prefix:v,suffix:k,modifier:h("MODIFIER")||""})}else u("END")}}return s}function xt(t,e){var i=[];return function(t,e,i){void 0===i&&(i={});var n=i.decode,o=void 0===n?function(t){return t}:n;return function(i){var n=t.exec(i);if(!n)return!1;for(var a=n[0],r=n.index,s=Object.create(null),l=function(t){if(void 0===n[t])return"continue";var i=e[t-1];"*"===i.modifier||"+"===i.modifier?s[i.name]=n[t].split(i.prefix+i.suffix).map((function(t){return o(t,i)})):s[i.name]=o(n[t],i)},d=1;d<n.length;d++)l(d);return{path:a,index:r,params:s}}}(Ct(t,i,e),i,e)}function kt(t){return t.replace(/([.+*?=^!:${}()[\]|/\\])/g,"\\$1")}function _t(t){return t&&t.sensitive?"":"i"}function Et(t,e,i){return function(t,e,i){void 0===i&&(i={});for(var n=i.strict,o=void 0!==n&&n,a=i.start,r=void 0===a||a,s=i.end,l=void 0===s||s,d=i.encode,c=void 0===d?function(t){return t}:d,h=i.delimiter,u=void 0===h?"/#?":h,p=i.endsWith,g="[".concat(kt(void 0===p?"":p),"]|$"),m="[".concat(kt(u),"]"),f=r?"^":"",b=0,v=t;b<v.length;b++){var y=v[b];if("string"==typeof y)f+=kt(c(y));else{var w=kt(c(y.prefix)),x=kt(c(y.suffix));if(y.pattern)if(e&&e.push(y),w||x)if("+"===y.modifier||"*"===y.modifier){var k="*"===y.modifier?"?":"";f+="(?:".concat(w,"((?:").concat(y.pattern,")(?:").concat(x).concat(w,"(?:").concat(y.pattern,"))*)").concat(x,")").concat(k)}else f+="(?:".concat(w,"(").concat(y.pattern,")").concat(x,")").concat(y.modifier);else{if("+"===y.modifier||"*"===y.modifier)throw new TypeError('Can not repeat "'.concat(y.name,'" without a prefix and suffix'));f+="(".concat(y.pattern,")").concat(y.modifier)}else f+="(?:".concat(w).concat(x,")").concat(y.modifier)}}if(l)o||(f+="".concat(m,"?")),f+=i.endsWith?"(?=".concat(g,")"):"$";else{var _=t[t.length-1],E="string"==typeof _?m.indexOf(_[_.length-1])>-1:void 0===_;o||(f+="(?:".concat(m,"(?=").concat(g,"))?")),E||(f+="(?=".concat(m,"|").concat(g,")"))}return new RegExp(f,_t(i))}(wt(t,i),e,i)}function Ct(t,e,i){return t instanceof RegExp?function(t,e){if(!e)return t;for(var i=/\((?:\?<(.*?)>)?(?!\?)/g,n=0,o=i.exec(t.source);o;)e.push({name:o[1]||n++,prefix:"",suffix:"",modifier:"",pattern:""}),o=i.exec(t.source);return t}(t,e):Array.isArray(t)?function(t,e,i){var n=t.map((function(t){return Ct(t,e,i).source}));return new RegExp("(?:".concat(n.join("|"),")"),_t(i))}(t,e,i):Et(t,e,i)}
/*! Universal Router | MIT License | https://www.kriasoft.com/universal-router/ */function St(t){try{return decodeURIComponent(t)}catch(e){return t}}function Lt(t,e,i,n,o){var a,r,s=0;return{next:function(l){if(t===l)return{done:!0,value:!1};if(!a){var d=t,c=!d.children;if(d.match||(d.match=xt(d.path||"",Object.assign({end:c},i))),a=d.match(n)){var h=a.path;return a.path=c||"/"!==h.charAt(h.length-1)?h:h.substr(1),a.params=Object.assign({},o,a.params),{done:!1,value:{route:t,baseUrl:e,path:a.path,params:a.params}}}}if(a&&t.children)for(;s<t.children.length;){if(!r){var u=t.children[s];u.parent=t,r=Lt(u,e+a.path,i,n.substr(a.path.length),a.params)}var p=r.next(l);if(!p.done)return{done:!1,value:p.value};r=null,s++}return{done:!0,value:!1}}}}function Ut(t,e){if("function"==typeof t.route.action)return t.route.action(t,e)}var At=function(){function t(t,e){if(!t||"object"!=typeof t)throw new TypeError("Invalid routes");this.options=Object.assign({decode:St},e),this.baseUrl=this.options.baseUrl||"",this.root=Array.isArray(t)?{path:"",children:t,parent:null}:t,this.root.parent=null}return t.prototype.resolve=function(t){var e,i,n=this,o=Object.assign({router:this},this.options.context,"string"==typeof t?{pathname:t}:t),a=Lt(this.root,this.baseUrl,this.options,o.pathname.substr(this.baseUrl.length)),r=this.options.resolveRoute||Ut,s=o;function l(t,n,d){void 0===n&&(n=!e.done&&e.value.route);var c=null===d&&!e.done&&e.value.route;if(e=i||a.next(c),i=null,!t&&(e.done||!function(t,e){for(var i=e;i;)if((i=i.parent)===t)return!0;return!1}(n,e.value.route)))return i=e,Promise.resolve(null);if(e.done){var h=new Error("Route not found");return h.status=404,Promise.reject(h)}return s=Object.assign({},o,e.value),Promise.resolve(r(s,e.value.params)).then((function(e){return null!=e?e:l(t,n,e)}))}return o.next=l,Promise.resolve().then((function(){return l(!0,n.root)})).catch((function(t){if(n.options.errorHandler)return n.options.errorHandler(t,s);throw t}))},t}();
/*! Universal Router | MIT License | https://www.kriasoft.com/universal-router/ */function Dt(t,e,i,n,o){if(e.name&&n&&t.has(n))throw new Error('Route "'+n+'" already exists');if(e.name&&n&&t.set(n,e),i)for(var a=0;a<i.length;a++){var r=i[a],s=r.name;r.parent=e,Dt(t,r,r.children,n&&o?s?n+o+s:n:s,o)}}function $t(t,e){if(!t)throw new ReferenceError("Router is not defined");var i=new Map,n=new Map,o=Object.assign({encode:encodeURIComponent},e);return function(e,a){var r=i.get(e);if(!(r||(i.clear(),n.clear(),Dt(i,t.root,t.root.children,t.root.name,o.uniqueRouteNameSep),r=i.get(e))))throw new Error('Route "'+e+'" not found');var s=n.get(r);if(!s){for(var l="",d=r;d;){var c=Array.isArray(d.path)?d.path[0]:d.path;c&&(l=c+l),d=d.parent}for(var h=wt(l,o),u=function(t,e){void 0===e&&(e={});var i=_t(e),n=e.encode,o=void 0===n?function(t){return t}:n,a=e.validate,r=void 0===a||a,s=t.map((function(t){if("object"==typeof t)return new RegExp("^(?:".concat(t.pattern,")$"),i)}));return function(e){for(var i="",n=0;n<t.length;n++){var a=t[n];if("string"!=typeof a){var l=e?e[a.name]:void 0,d="?"===a.modifier||"*"===a.modifier,c="*"===a.modifier||"+"===a.modifier;if(Array.isArray(l)){if(!c)throw new TypeError('Expected "'.concat(a.name,'" to not repeat, but got an array'));if(0===l.length){if(d)continue;throw new TypeError('Expected "'.concat(a.name,'" to not be empty'))}for(var h=0;h<l.length;h++){var u=o(l[h],a);if(r&&!s[n].test(u))throw new TypeError('Expected all "'.concat(a.name,'" to match "').concat(a.pattern,'", but got "').concat(u,'"'));i+=a.prefix+u+a.suffix}}else if("string"!=typeof l&&"number"!=typeof l){if(!d){var p=c?"an array":"a string";throw new TypeError('Expected "'.concat(a.name,'" to be ').concat(p))}}else{if(u=o(String(l),a),r&&!s[n].test(u))throw new TypeError('Expected "'.concat(a.name,'" to match "').concat(a.pattern,'", but got "').concat(u,'"'));i+=a.prefix+u+a.suffix}}else i+=a}return i}}(h,o),p=Object.create(null),g=0;g<h.length;g++){var m=h[g];m&&"string"!=typeof m&&(p[m.name]=!0)}s={toPath:u,keys:p},n.set(r,s)}var f=t.baseUrl+s.toPath(a)||"/";if(o.stringifyQueryParams&&a){for(var b={},v=Object.keys(a),y=0;y<v.length;y++){var w,x=v[y];if(x&&!s.keys[x])b[x]=null!=(w=a[x])?w:""}var k=o.stringifyQueryParams(b);k&&(f+="?"===k.charAt(0)?k:"?"+k)}return f}}function Tt(t,e){return JSON.stringify(t,Object.keys(t).sort())===JSON.stringify(e,Object.keys(e).sort())}class It{constructor(t,e,i){this.getState=e.getState,this.setState=e.setState,this.getDefaultState=e.getDefaultState,this.routeName=e.routeName,console.assert(this.getState),console.assert(this.setState),console.assert(this.getDefaultState),console.assert(this.routeName),this.router=new At(t,i),window.addEventListener("popstate",(t=>{this.setStateFromCurrentLocation(),this._dispatchLocationChanged()}))}async _getStateForPath(t){return t.replace(/\/$/,"")===this.router.baseUrl.replace(/\/$/,"")?this.getDefaultState():this.router.resolve({pathname:t})}setStateFromCurrentLocation(){this._getStateForPath(location.pathname).then((t=>{this.setState(t)})).catch((t=>{}))}update(){setTimeout((()=>{this._getStateForPath(location.pathname).then((t=>{if(!Tt(this.getState(),t)){const t=this.getPathname(),e=location.href;window.history.pushState({},"",t),this._dispatchLocationChanged(e)}})).catch((t=>{}))}))}updateFromPathname(t){this._getStateForPath(t).then((e=>{if(!Tt(this.getState(),e)){const i=location.href;window.history.pushState({},"",t),this.setState(e),this._dispatchLocationChanged(i)}})).catch((e=>{throw new Error(`Route not found: ${t}: ${e}`)}))}getPathname(t){void 0===t&&(t={});let e=T({},this.getState(),t);try{return $t(this.router)(this.routeName,e)}catch(t){return location.pathname}}_dispatchLocationChanged(t=""){window.dispatchEvent(new CustomEvent("locationchanged",{detail:{referrerUrl:t},bubbles:!0}))}}class Mt extends V{constructor(){super(),this.env="",this.gitInfo="",this.buildUrl="",this.buildTime=""}static get properties(){return T({},super.properties,{env:{type:String},buildUrl:{type:String,attribute:"build-url"},buildTime:{type:String,attribute:"build-time"},gitInfo:{type:String,attribute:"git-info"}})}static get styles(){return O(m||(m=$`
${0}
${0}
${0}
:host {
display: inline-block;
}
`),N(),q(),J())}render(){const t=new Date(this.buildTime);return R(f||(f=$`
<a href="${0}" style="float: right">
<div class="tags has-addons" title="Build Time: ${0}">
<span class="tag is-light">build</span>
<span class="tag is-dark">${0} (${0})</span>
</div>
</a>
`),this.buildUrl,t.toString(),this.gitInfo,this.env)}}class Ot extends(B(Z)){constructor(){super(),this._i18n=it(),this.lang=this._i18n.language,this._onVisibilityChanged=this._onVisibilityChanged.bind(this)}static get properties(){return{lang:{type:String}}}static set app(t){this._app=t}update(t){t.forEach(((t,e)=>{"lang"===e&&this._i18n.changeLanguage(this.lang)})),super.update(t)}static get styles(){return O(b||(b=$`
${0}
${0}
p {
line-height: 1.8em;
}
.item {
padding-top: 0.5em;
}
.description {
padding-left: 2em;
font-style: italic;
margin-top: -1px;
line-height: initial;
}
h2 a:hover {
color: var(--dbp-hover-color, var(--dbp-content));
background-color: var(--dbp-hover-background-color);
}
h2 a {
cursor: pointer;
text-decoration: none;
}
h2 a {
white-space: nowrap;
}
h2 a > span {
white-space: normal;
padding-right: 5px;
}
h2 a::after {
content: '\\00a0\\00a0';
background-color: var(--dbp-content);
-webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2014.8%2062.4%22%20style%3D%22enable-background%3Anew%200%200%2014.8%2062.4%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20transform%3D%22translate%28-382.21%20-336.98%29%22%3E%0A%09%3Cg%3E%0A%09%09%3Cpath%20d%3D%22M383%2C380.5c-0.2%2C0-0.4-0.1-0.6-0.3c-0.3-0.3-0.3-0.8%2C0.1-1.1l12.5-10.9l-12.5-10.9c-0.3-0.3-0.4-0.8-0.1-1.1%0A%09%09%09c0.3-0.3%2C0.8-0.4%2C1.1-0.1l13.1%2C11.5c0.2%2C0.2%2C0.3%2C0.4%2C0.3%2C0.6s-0.1%2C0.5-0.3%2C0.6l-13.1%2C11.5C383.4%2C380.4%2C383.2%2C380.5%2C383%2C380.5z%22%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
mask-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2014.8%2062.4%22%20style%3D%22enable-background%3Anew%200%200%2014.8%2062.4%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20transform%3D%22translate%28-382.21%20-336.98%29%22%3E%0A%09%3Cg%3E%0A%09%09%3Cpath%20d%3D%22M383%2C380.5c-0.2%2C0-0.4-0.1-0.6-0.3c-0.3-0.3-0.3-0.8%2C0.1-1.1l12.5-10.9l-12.5-10.9c-0.3-0.3-0.4-0.8-0.1-1.1%0A%09%09%09c0.3-0.3%2C0.8-0.4%2C1.1-0.1l13.1%2C11.5c0.2%2C0.2%2C0.3%2C0.4%2C0.3%2C0.6s-0.1%2C0.5-0.3%2C0.6l-13.1%2C11.5C383.4%2C380.4%2C383.2%2C380.5%2C383%2C380.5z%22%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
margin: 0 2px 0 0px;
padding: 0;
-webkit-mask-size: 100%;
mask-size: 100%;
}
h2 a:hover::after {
background-color: var(--dbp-hover-color, var(--dbp-content));
}
`),N(),q())}_onVisibilityChanged(){this.requestUpdate()}connectedCallback(){super.connectedCallback();Ot._app.addEventListener("visibility-changed",this._onVisibilit