@progressive-development/pd-spa-helper 0.3.61 → 0.3.63

package/dist/src/service-provider/firebase/auth.js

@@ -1,4 +1,4 @@
-import { getAuth, onAuthStateChanged, signInWithEmailAndPassword, signOut } from 'firebase/auth';
+import { getAuth, onAuthStateChanged, onIdTokenChanged, signInWithEmailAndPassword, signOut } from 'firebase/auth';
 let auth;
 /**
  * During start/load application, initialize functions.
@@ -40,6 +40,23 @@ export const authStateChanged = (callback) => {
         throw new Error("authStateChanged: Auth was not initialized");
     }
     onAuthStateChanged(auth, (user) => callback(user));
+    onIdTokenChanged(auth, async (user) => {
+        if (user) {
+            const token = await user.getIdToken();
+            navigator.serviceWorker.ready
+                .then(registration => {
+                var _a;
+                console.log('UserToken update an SW senden');
+                (_a = registration === null || registration === void 0 ? void 0 : registration.active) === null || _a === void 0 ? void 0 : _a.postMessage({
+                    type: 'SET_CURRENT_USER',
+                    userNameToken: user.displayName,
+                    userIdToken: token,
+                });
+            }).catch(error => {
+                console.error("Error in communication to service worker", error);
+            });
+        }
+    });
     /* Alter code aus init in pd-spa-helper, hier falsch, noch refactorieren
     if (user) {
       this._user = user;

package/dist/src/service-provider/firebase/auth.js.map

@@ -1 +1 @@
-{"version":3,"file":"auth.js","sourceRoot":"","sources":["../../../../src/service-provider/firebase/auth.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,OAAO,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,OAAO,EAAQ,MAAM,eAAe,CAAC;AAE7G,IAAI,IAAU,CAAC;AAEf;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,QAAqB,EAAE,EAAE;IAChD,IAAI,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC;IACzB,OAAO,CAAC,GAAG,CAAC,uBAAuB,EAAE,IAAI,CAAC,CAAC;AAC7C,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,IAAsB,EAAE;IACjD,IAAI,CAAC,IAAI,EAAE;QACT,MAAM,IAAI,KAAK,CAAC,kCAAkC,CAAC,CAAC;KACrD;IACD,IAAI;QACF,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;QACpB,OAAO,IAAI,CAAC;KACb;IAAC,OAAO,KAAK,EAAE;QACd,OAAO,KAAK,CAAC;KACd;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAY,EAAE;IAC3C,IAAI,CAAC,IAAI,EAAE;QACT,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;KAC9D;IACD,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;IACvC,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAY,EAAE;IACvC,IAAI,CAAC,IAAI,EAAE;QACT,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;KAC9D;IACD,OAAO,IAAI,CAAC,WAAW,CAAC;AAC1B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,QAAkB,EAAE,EAAE;IACrD,IAAI,CAAC,IAAI,EAAE;QACT,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAC;KAC/D;IACD,kBAAkB,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;IACnD;;;;;;;;;;;;;;;;;;;;;;;;;;MA0BE;AACJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,EAAE,IAAW,EAAE,GAAU,EAAiB,EAAE;IACpE,IAAI,CAAC,IAAI,EAAE;QACT,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;KACpD;IACD,MAAM,WAAW,GAAG,MAAM,0BAA0B,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC;IACtE,OAAO,WAAW,CAAC,IAAI,CAAC;AAC1B,CAAC,CAAA","sourcesContent":["import { FirebaseApp } from 'firebase/app';\nimport { Auth, getAuth, onAuthStateChanged, signInWithEmailAndPassword, signOut, User } from 'firebase/auth';\n\nlet auth: Auth;\n\n/**\n * During start/load application, initialize functions.  \n * \n * @param {*} app - initialized app. \n */\nexport const initAuth = (appParam: FirebaseApp) => {\n  auth = getAuth(appParam);\n  console.log(\"App for auth is set: \", auth);\n}\n\nexport const logout = async (): Promise<boolean> => {\n  if (!auth) {\n    throw new Error(\"logout: Auth was not initialized\");\n  }\n  try {\n    await signOut(auth);\n    return true;\n  } catch (error) {\n    return false;\n  }\n};\n\nexport const isAuthenticated = (): boolean => {\n  if (!auth) {\n    throw new Error(\"isAuthenticated: Auth was not initialized\");\n  }\n  const authCheck = auth.currentUser !== null;\n  console.log(\"Check auth: \", authCheck);\n  return authCheck;\n};\n\nexport const getAuthUser = (): unknown => {\n  if (!auth) {\n    throw new Error(\"isAuthenticated: Auth was not initialized\");\n  }    \n  return auth.currentUser;\n};\n\nexport const authStateChanged = (callback: Function) => {  \n  if (!auth) {\n    throw new Error(\"authStateChanged: Auth was not initialized\");\n  }\n  onAuthStateChanged(auth, (user) => callback(user));        \n  /* Alter code aus init in pd-spa-helper, hier falsch, noch refactorieren   \n  if (user) {\n    this._user = user;\n    if (postLoginFunc) {      \n      callFunction(postLoginFunc, postLoginFunc.param)\n        .then((result:FunctionResult) => {\n          this._profile = result.resultData;\n          // redirect if login in the meantime is available \n          // => else stay on the login page after reload/url navigation\n          if (this.route === \"login\" && postLoginFunc?.redirect) {                \n            this.navigate(postLoginFunc.redirect);\n          }\n          // new event, could/should replace redirect\n          document.dispatchEvent(new CustomEvent(\"user-login-event\"));\n        }).catch(() => {\n          if (postLoginFunc?.logoutOnFail) {\n            logout();\n            this._user = undefined;\n            this._profile = undefined;\n          }\n        });            \n    } else {\n      this._user = undefined;\n      this._profile = undefined;\n    }\n  }\n  */\n}\n\nexport const login = async (user:string, sec:string): Promise<User> => {\n  if (!auth) {\n    throw new Error(\"login: Auth was not initialized\");\n  }\n  const credentials = await signInWithEmailAndPassword(auth, user, sec);\n  return credentials.user;\n}\n"]}
+{"version":3,"file":"auth.js","sourceRoot":"","sources":["../../../../src/service-provider/firebase/auth.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,0BAA0B,EAAE,OAAO,EAAQ,MAAM,eAAe,CAAC;AAE/H,IAAI,IAAU,CAAC;AAEf;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,QAAqB,EAAE,EAAE;IAChD,IAAI,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC;IACzB,OAAO,CAAC,GAAG,CAAC,uBAAuB,EAAE,IAAI,CAAC,CAAC;AAC7C,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,IAAsB,EAAE;IACjD,IAAI,CAAC,IAAI,EAAE;QACT,MAAM,IAAI,KAAK,CAAC,kCAAkC,CAAC,CAAC;KACrD;IACD,IAAI;QACF,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;QACpB,OAAO,IAAI,CAAC;KACb;IAAC,OAAO,KAAK,EAAE;QACd,OAAO,KAAK,CAAC;KACd;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAY,EAAE;IAC3C,IAAI,CAAC,IAAI,EAAE;QACT,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;KAC9D;IACD,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;IACvC,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAY,EAAE;IACvC,IAAI,CAAC,IAAI,EAAE;QACT,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;KAC9D;IACD,OAAO,IAAI,CAAC,WAAW,CAAC;AAC1B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,QAAkB,EAAE,EAAE;IACrD,IAAI,CAAC,IAAI,EAAE;QACT,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAC;KAC/D;IACD,kBAAkB,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;IAEnD,gBAAgB,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;QACpC,IAAI,IAAI,EAAE;YACR,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;YACtC,SAAS,CAAC,aAAa,CAAC,KAAK;iBAC5B,IAAI,CAAC,YAAY,CAAC,EAAE;;gBACnB,OAAO,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;gBAC7C,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,0CAAE,WAAW,CAAC;oBAChC,IAAI,EAAE,kBAAkB;oBACxB,aAAa,EAAE,IAAI,CAAC,WAAW;oBAC/B,WAAW,EAAE,KAAK;iBACnB,CAAC,CAAC;YACL,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;gBACf,OAAO,CAAC,KAAK,CAAC,0CAA0C,EAAE,KAAK,CAAC,CAAC;YACnE,CAAC,CAAC,CAAC;SACJ;IACH,CAAC,CAAC,CAAC;IAEH;;;;;;;;;;;;;;;;;;;;;;;;;;MA0BE;AACJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,EAAE,IAAW,EAAE,GAAU,EAAiB,EAAE;IACpE,IAAI,CAAC,IAAI,EAAE;QACT,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;KACpD;IACD,MAAM,WAAW,GAAG,MAAM,0BAA0B,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC;IACtE,OAAO,WAAW,CAAC,IAAI,CAAC;AAC1B,CAAC,CAAA","sourcesContent":["import { FirebaseApp } from 'firebase/app';\nimport { Auth, getAuth, onAuthStateChanged, onIdTokenChanged, signInWithEmailAndPassword, signOut, User } from 'firebase/auth';\n\nlet auth: Auth;\n\n/**\n * During start/load application, initialize functions.  \n * \n * @param {*} app - initialized app. \n */\nexport const initAuth = (appParam: FirebaseApp) => {\n  auth = getAuth(appParam);\n  console.log(\"App for auth is set: \", auth);\n}\n\nexport const logout = async (): Promise<boolean> => {\n  if (!auth) {\n    throw new Error(\"logout: Auth was not initialized\");\n  }\n  try {\n    await signOut(auth);\n    return true;\n  } catch (error) {\n    return false;\n  }\n};\n\nexport const isAuthenticated = (): boolean => {\n  if (!auth) {\n    throw new Error(\"isAuthenticated: Auth was not initialized\");\n  }\n  const authCheck = auth.currentUser !== null;\n  console.log(\"Check auth: \", authCheck);\n  return authCheck;\n};\n\nexport const getAuthUser = (): unknown => {\n  if (!auth) {\n    throw new Error(\"isAuthenticated: Auth was not initialized\");\n  }    \n  return auth.currentUser;\n};\n\nexport const authStateChanged = (callback: Function) => {  \n  if (!auth) {\n    throw new Error(\"authStateChanged: Auth was not initialized\");\n  }\n  onAuthStateChanged(auth, (user) => callback(user));  \n  \n  onIdTokenChanged(auth, async (user) => {\n    if (user) {\n      const token = await user.getIdToken();\n      navigator.serviceWorker.ready\n      .then(registration => {\n        console.log('UserToken update an SW senden');\n        registration?.active?.postMessage({\n          type: 'SET_CURRENT_USER',\n          userNameToken: user.displayName,\n          userIdToken: token,\n        });\n      }).catch(error => {\n        console.error(\"Error in communication to service worker\", error);\n      }); \n    }\n  });\n  \n  /* Alter code aus init in pd-spa-helper, hier falsch, noch refactorieren   \n  if (user) {\n    this._user = user;\n    if (postLoginFunc) {      \n      callFunction(postLoginFunc, postLoginFunc.param)\n        .then((result:FunctionResult) => {\n          this._profile = result.resultData;\n          // redirect if login in the meantime is available \n          // => else stay on the login page after reload/url navigation\n          if (this.route === \"login\" && postLoginFunc?.redirect) {                \n            this.navigate(postLoginFunc.redirect);\n          }\n          // new event, could/should replace redirect\n          document.dispatchEvent(new CustomEvent(\"user-login-event\"));\n        }).catch(() => {\n          if (postLoginFunc?.logoutOnFail) {\n            logout();\n            this._user = undefined;\n            this._profile = undefined;\n          }\n        });            \n    } else {\n      this._user = undefined;\n      this._profile = undefined;\n    }\n  }\n  */\n}\n\nexport const login = async (user:string, sec:string): Promise<User> => {\n  if (!auth) {\n    throw new Error(\"login: Auth was not initialized\");\n  }\n  const credentials = await signInWithEmailAndPassword(auth, user, sec);\n  return credentials.user;\n}\n"]}

package/dist/src/tmpown/pd-loading-state.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { msg } from '@lit/localize';
+import { localized, msg } from '@lit/localize';
 import { classMap } from 'lit/directives/class-map.js';
 import '@progressive-development/pd-icon/pd-icon.js';
 let PdLoadingState = class PdLoadingState extends LitElement {
@@ -166,6 +166,7 @@ __decorate([
     property({ type: Object })
 ], PdLoadingState.prototype, "loadingState", void 0);
 PdLoadingState = __decorate([
+    localized(),
     customElement('pd-loading-state')
 ], PdLoadingState);
 export { PdLoadingState };

package/dist/src/tmpown/pd-loading-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"pd-loading-state.js","sourceRoot":"","sources":["../../../src/tmpown/pd-loading-state.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,6CAA6C,CAAC;AAM9C,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IA0H5C,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,OAAO,EAAE,CAAC;SACX;QACD,OAAO,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA;;YAE7B,IAAI,CAAC,cAAc,EAAE;;OAE1B,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;IAC9B,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,OAAO,EAAE,CAAC;SACX;QACD,OAAO,IAAI,CAAA;oBACK,QAAQ,CAAC;YACnB,OAAO,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe;YAC3C,kBAAkB,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,eAAe,KAAK,IAAI;YAClG,oBAAoB,EAAE,IAAI,CAAC,YAAY,CAAC,eAAe,KAAK,IAAI;SACjE,CAAC;sBACY,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,QAAQ;aAC3E,IAAI,CAAC,YAAY,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC;YACvE,GAAG,CAAC,6BAA6B,EAAE,EAAC,EAAE,EAAE,6BAA6B,EAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,oCAAoC,EAAE,EAAC,EAAE,EAAE,8BAA8B,EAAC,CAAC,CAAC;;UAE1J,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;;cAEpE,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;;kBAGtC,IAAI,CAAC,UAAU;kBACf,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,2EAA2E;YAChG,CAAC,CAAC,IAAI,CAAA,yEAAyE;;;aAGpF,CAAC;;SAEL,CAAC,CAAC,CAAC,EAAE;;KAET,CAAA;IACH,CAAC;;AA7JM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiHF;CACgB,CAAC;AArHpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAC,CAAC;oDACE;AAHjB,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAoK1B;SApKY,cAAc","sourcesContent":["import { LitElement, html, css, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport '@progressive-development/pd-icon/pd-icon.js';\n\nimport {LoadingState} from '../model/spa-model.js';\n\n\n@customElement('pd-loading-state')\nexport class PdLoadingState extends LitElement {\n\n  @property({ type: Object}) \n  loadingState?: LoadingState;\n\n  static styles = [        \n    css`\n      :host {\n        display: block;\n      }\n\n      /* The Modal (background) */\n      .modal {        \n        position: fixed; /* Stay in place */      \n        left: 0;\n        top: 0;\n        z-index: 500; /* Sit on top */\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n                \n        width: 100%; /* Full width */\n        height: 100%; /* Full height */        \n        overflow: auto; /* Enable scroll if needed */\n        /* RGBA Wert muss hier verwendet werden #AFC1D2 to rgba for opacity */\n        background-color: var(--pd-popup-modal-bg-rgba, rgba(175, 193, 210, 0.8));        \n      }\n\n      /* Modal Content */\n      .no-modal-content {         \n        position: fixed; /* Stay in place */ \n        left: 50%;   \n        top: 50%;   \n        transform: translate(-50%, -50%);        \n      }\n\n      .content {\n        padding: 1em;\n        text-align: center;\n        background-color: var(--pd-loading-state-bg-col, #edf7fd);\n        border: 2px solid var(--pd-loading-state-bg-col, var(--pd-default-col, #067394));\n        z-index: 101; /* Sit on top */\n      }\n\n      .background-content {\n\n        position: fixed; /* Stay in place */ \n        right: 0em;   \n        bottom: 0em;   \n\n        padding: 1em;        \n        z-index: 600; /* Sit on top */\n\n        display: flex;\n        gap: 0.5em;\n        align-items: center;\n\n        background-color: white;\n      }\n\n      .loader {        \n        border: 16px solid var(--pd-heating-service-loader, #0A3A48);\n        border-top: 16px solid var(--pd-heating-service-loader-run, #067394);\n        border-radius: 50%;\n        width: 30px;\n        height: 30px;\n        animation: spin 2s linear infinite;\n        \n        margin-left: auto;\n        margin-right: auto;\n      }\n\n      .background-loader {        \n        border: 10px solid var(--pd-heating-service-loader, #0A3A48);\n        border-top: 10px solid var(--pd-heating-service-loader-run, #067394);\n        border-radius: 50%;\n        width: 10px;\n        height: 10px;\n        animation: spin 2s linear infinite;\n      }\n\n      .sub-ul {\n        text-align: start;\n      }\n\n      .sub-row {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding-right: 10px;\n      }\n\n      .sub-icon {\n        --pd-icon-size: 1rem;\n        padding: 0;\n        vertical-align: baseline;\n        margin: 0 .25rem 0 0;\n      }\n\n      .completed {\n        --pd-icon-stroke-col-active: green;\n        --pd-icon-col-active: green;\n      }\n\n      .loading {\n        --pd-icon-stroke-col-active: orange;\n        --pd-icon-col-active: orange;\n      }\n\n      @keyframes spin {\n        0% {\n          transform: rotate(0deg);\n        }\n        100% {\n          transform: rotate(360deg);\n        }\n      }\n\n    `\n  ] as CSSResultGroup;   \n\n  render() {    \n    if (!this.loadingState) {\n      return '';\n    }\n    return this.loadingState.modal ? html`\n        <div id=\"modalId\" class=\"modal\">\n          ${this._renderContent()}\n        </div>\n      ` : this._renderContent();\n  }\n\n  _renderContent() {\n    if (!this.loadingState) {\n      return '';\n    }\n    return html`\n      <div class=\"${classMap({\n          content: !this.loadingState.smallBackground,\n          \"no-modal-content\": this.loadingState.modal !== true && this.loadingState.smallBackground !== true,\n          \"background-content\": this.loadingState.smallBackground === true,\n        })}\">\n        <div class=\"${this.loadingState.smallBackground ? \"background-loader\" : \"loader\"}\"></div>\n        <p>${this.loadingState.loadingTxt || (this.loadingState.smallBackground ? \n          msg(\"Daten werden synchronisiert\", {id: \"spaH.loadingstate.syncState\"}) : msg(\"Bitte warten, Daten werden geladen\", {id: \"spaH.loadingstate.pleaseWait\"}))}\n        </p>\n        ${this.loadingState.subTask && this.loadingState.subTask.length > 0 ? html`\n        <ul class=\"sub-ul\">\n            ${this.loadingState.subTask.map(task => html`\n            <li>\n              <div class=\"sub-row\">\n                ${task.loadingTxt}\n                ${task.completed ? html`<pd-icon class=\"sub-icon completed\" icon=\"checkBox\" activeIcon></pd-icon>` \n                  : html`<pd-icon class=\"sub-icon loading\" icon=\"syncIcon\" activeIcon></pd-icon>`}\n              </div>\n            </li>\n            `)}\n        </ul>\n        ` : ''}\n      </div>\n    `\n  }\n\n}"]}
+{"version":3,"file":"pd-loading-state.js","sourceRoot":"","sources":["../../../src/tmpown/pd-loading-state.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,6CAA6C,CAAC;AAO9C,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IA0H5C,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,OAAO,EAAE,CAAC;SACX;QACD,OAAO,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA;;YAE7B,IAAI,CAAC,cAAc,EAAE;;OAE1B,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;IAC9B,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,OAAO,EAAE,CAAC;SACX;QACD,OAAO,IAAI,CAAA;oBACK,QAAQ,CAAC;YACnB,OAAO,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe;YAC3C,kBAAkB,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,eAAe,KAAK,IAAI;YAClG,oBAAoB,EAAE,IAAI,CAAC,YAAY,CAAC,eAAe,KAAK,IAAI;SACjE,CAAC;sBACY,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,QAAQ;aAC3E,IAAI,CAAC,YAAY,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC;YACvE,GAAG,CAAC,6BAA6B,EAAE,EAAC,EAAE,EAAE,6BAA6B,EAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,oCAAoC,EAAE,EAAC,EAAE,EAAE,8BAA8B,EAAC,CAAC,CAAC;;UAE1J,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;;cAEpE,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;;kBAGtC,IAAI,CAAC,UAAU;kBACf,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,2EAA2E;YAChG,CAAC,CAAC,IAAI,CAAA,yEAAyE;;;aAGpF,CAAC;;SAEL,CAAC,CAAC,CAAC,EAAE;;KAET,CAAA;IACH,CAAC;;AA7JM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiHF;CACgB,CAAC;AArHpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAC,CAAC;oDACE;AAHjB,cAAc;IAF1B,SAAS,EAAE;IACX,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAoK1B;SApKY,cAAc","sourcesContent":["import { LitElement, html, css, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { localized, msg } from '@lit/localize';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport '@progressive-development/pd-icon/pd-icon.js';\n\nimport {LoadingState} from '../model/spa-model.js';\n\n\n@localized()\n@customElement('pd-loading-state')\nexport class PdLoadingState extends LitElement {\n\n  @property({ type: Object}) \n  loadingState?: LoadingState;\n\n  static styles = [        \n    css`\n      :host {\n        display: block;\n      }\n\n      /* The Modal (background) */\n      .modal {        \n        position: fixed; /* Stay in place */      \n        left: 0;\n        top: 0;\n        z-index: 500; /* Sit on top */\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n                \n        width: 100%; /* Full width */\n        height: 100%; /* Full height */        \n        overflow: auto; /* Enable scroll if needed */\n        /* RGBA Wert muss hier verwendet werden #AFC1D2 to rgba for opacity */\n        background-color: var(--pd-popup-modal-bg-rgba, rgba(175, 193, 210, 0.8));        \n      }\n\n      /* Modal Content */\n      .no-modal-content {         \n        position: fixed; /* Stay in place */ \n        left: 50%;   \n        top: 50%;   \n        transform: translate(-50%, -50%);        \n      }\n\n      .content {\n        padding: 1em;\n        text-align: center;\n        background-color: var(--pd-loading-state-bg-col, #edf7fd);\n        border: 2px solid var(--pd-loading-state-bg-col, var(--pd-default-col, #067394));\n        z-index: 101; /* Sit on top */\n      }\n\n      .background-content {\n\n        position: fixed; /* Stay in place */ \n        right: 0em;   \n        bottom: 0em;   \n\n        padding: 1em;        \n        z-index: 600; /* Sit on top */\n\n        display: flex;\n        gap: 0.5em;\n        align-items: center;\n\n        background-color: white;\n      }\n\n      .loader {        \n        border: 16px solid var(--pd-heating-service-loader, #0A3A48);\n        border-top: 16px solid var(--pd-heating-service-loader-run, #067394);\n        border-radius: 50%;\n        width: 30px;\n        height: 30px;\n        animation: spin 2s linear infinite;\n        \n        margin-left: auto;\n        margin-right: auto;\n      }\n\n      .background-loader {        \n        border: 10px solid var(--pd-heating-service-loader, #0A3A48);\n        border-top: 10px solid var(--pd-heating-service-loader-run, #067394);\n        border-radius: 50%;\n        width: 10px;\n        height: 10px;\n        animation: spin 2s linear infinite;\n      }\n\n      .sub-ul {\n        text-align: start;\n      }\n\n      .sub-row {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding-right: 10px;\n      }\n\n      .sub-icon {\n        --pd-icon-size: 1rem;\n        padding: 0;\n        vertical-align: baseline;\n        margin: 0 .25rem 0 0;\n      }\n\n      .completed {\n        --pd-icon-stroke-col-active: green;\n        --pd-icon-col-active: green;\n      }\n\n      .loading {\n        --pd-icon-stroke-col-active: orange;\n        --pd-icon-col-active: orange;\n      }\n\n      @keyframes spin {\n        0% {\n          transform: rotate(0deg);\n        }\n        100% {\n          transform: rotate(360deg);\n        }\n      }\n\n    `\n  ] as CSSResultGroup;   \n\n  render() {    \n    if (!this.loadingState) {\n      return '';\n    }\n    return this.loadingState.modal ? html`\n        <div id=\"modalId\" class=\"modal\">\n          ${this._renderContent()}\n        </div>\n      ` : this._renderContent();\n  }\n\n  _renderContent() {\n    if (!this.loadingState) {\n      return '';\n    }\n    return html`\n      <div class=\"${classMap({\n          content: !this.loadingState.smallBackground,\n          \"no-modal-content\": this.loadingState.modal !== true && this.loadingState.smallBackground !== true,\n          \"background-content\": this.loadingState.smallBackground === true,\n        })}\">\n        <div class=\"${this.loadingState.smallBackground ? \"background-loader\" : \"loader\"}\"></div>\n        <p>${this.loadingState.loadingTxt || (this.loadingState.smallBackground ? \n          msg(\"Daten werden synchronisiert\", {id: \"spaH.loadingstate.syncState\"}) : msg(\"Bitte warten, Daten werden geladen\", {id: \"spaH.loadingstate.pleaseWait\"}))}\n        </p>\n        ${this.loadingState.subTask && this.loadingState.subTask.length > 0 ? html`\n        <ul class=\"sub-ul\">\n            ${this.loadingState.subTask.map(task => html`\n            <li>\n              <div class=\"sub-row\">\n                ${task.loadingTxt}\n                ${task.completed ? html`<pd-icon class=\"sub-icon completed\" icon=\"checkBox\" activeIcon></pd-icon>` \n                  : html`<pd-icon class=\"sub-icon loading\" icon=\"syncIcon\" activeIcon></pd-icon>`}\n              </div>\n            </li>\n            `)}\n        </ul>\n        ` : ''}\n      </div>\n    `\n  }\n\n}"]}