@progressive-development/pd-spa-helper 0.1.156 → 0.1.158

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent pd-spa-helper following open-wc recommendations",
   "license": "MIT",
   "author": "pd-spa-helper",
-  "version": "0.1.156",
+  "version": "0.1.158",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {

package/src/PdSpaHelper.ts

@@ -141,6 +141,7 @@ export abstract class PdSpaHelper extends router(navigator(LitElement)) {
   @property({ type: Object, state: true }) 
   _loadingState?: {
     isLoading: boolean,
+    smallBackground?: boolean,
     modal?: boolean,
     loadingTxt?: string
   };
@@ -321,6 +322,9 @@ export abstract class PdSpaHelper extends router(navigator(LitElement)) {
     const callback = (user: unknown) => {
       console.log("My callback user:", user);
       this._user = user;
+      if (this._user) {
+        this._loginSuccess(new CustomEvent("login-success"));
+      }
     };
     authStateChangedImpl(callback);
   }

package/src/generated/locales/be.ts

@@ -9,6 +9,7 @@
     /* eslint-disable @typescript-eslint/no-explicit-any */
 
     export const templates = {
-      
+      'spaH.loadingstate.pleaseWait': `Gegevens worden geladen`,
+'spaH.loadingstate.syncState': `Gegevens worden gesynchroniseerd`,
     };
   

package/src/generated/locales/de.ts

@@ -9,6 +9,7 @@
     /* eslint-disable @typescript-eslint/no-explicit-any */
 
     export const templates = {
-      
+      'spaH.loadingstate.syncState': `Daten werden synchronisiert`,
+'spaH.loadingstate.pleaseWait': `Bitte warten, Daten werden geladen`,
     };
   

package/src/generated/locales/en.ts

@@ -9,6 +9,7 @@
     /* eslint-disable @typescript-eslint/no-explicit-any */
 
     export const templates = {
-      
+      'spaH.loadingstate.syncState': `Daten werden synchronisiert`,
+'spaH.loadingstate.pleaseWait': `Bitte warten, Daten werden geladen`,
     };
   

package/src/stories/pd-loading-state.stories.ts

@@ -72,3 +72,12 @@ export const CustomTxtState: Story = {
   },
 };
 
+export const BackgroundState: Story = {
+  args: {
+    loadingState: {
+      isLoading: true,
+      smallBackground: true,
+    }
+  },
+};
+

package/src/tmpown/pd-loading-state.ts

@@ -1,5 +1,7 @@
 import { LitElement, html, css, CSSResultGroup } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
+import { classMap } from 'lit/directives/class-map.js';
 
 
 @customElement('pd-loading-state')
@@ -9,6 +11,7 @@ export class PdLoadingState extends LitElement {
   loadingState: {
     isLoading: boolean,
     modal?: boolean,
+    smallBackground?: boolean,
     loadingTxt?: string
   } = {
     isLoading: false
@@ -55,6 +58,22 @@ export class PdLoadingState extends LitElement {
         z-index: 101; /* Sit on top */
       }
 
+      .background-content {
+
+        position: fixed; /* Stay in place */ 
+        right: 0em;   
+        bottom: 0em;   
+
+        padding: 1em;        
+        z-index: 101; /* Sit on top */
+
+        display: flex;
+        gap: 0.5em;
+        align-items: center;
+
+        background-color: white;
+      }
+
       .loader {        
         border: 16px solid var(--pd-heating-service-loader, #0A3A48);
         border-top: 16px solid var(--pd-heating-service-loader-run, #067394);
@@ -67,6 +86,15 @@ export class PdLoadingState extends LitElement {
         margin-right: auto;
       }
 
+      .background-loader {        
+        border: 10px solid var(--pd-heating-service-loader, #0A3A48);
+        border-top: 10px solid var(--pd-heating-service-loader-run, #067394);
+        border-radius: 50%;
+        width: 10px;
+        height: 10px;
+        animation: spin 2s linear infinite;
+      }
+
       @keyframes spin {
         0% {
           transform: rotate(0deg);
@@ -89,9 +117,14 @@ export class PdLoadingState extends LitElement {
 
   _renderContent() {
     return html`
-      <div class="content ${this.loadingState.modal !== true ? "no-modal-content" : ""}">    
-        <div class="loader"></div>
-        <p>${this.loadingState.loadingTxt || "Bitte warten, Daten werden geladen"}</p>
+      <div class="${classMap({
+          content: !this.loadingState.smallBackground,
+          "no-modal-content": this.loadingState.modal !== true && this.loadingState.smallBackground !== true,
+          "background-content": this.loadingState.smallBackground === true,
+        })}">
+        <div class="${this.loadingState.smallBackground ? "background-loader" : "loader"}"></div>
+        <p>${this.loadingState.loadingTxt || (this.loadingState.smallBackground ? 
+          msg("Daten werden synchronisiert", {id: "spaH.loadingstate.syncState"}) : msg("Bitte warten, Daten werden geladen", {id: "spaH.loadingstate.pleaseWait"}))}</p>
       </div>
     `
   }

package/xliff/be.xlf

@@ -1,6 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
 <file target-language="be" source-language="dev" original="lit-localize-inputs" datatype="plaintext">
-<body/>
+<body>
+<trans-unit id="spaH.loadingstate.syncState">
+  <source>Daten werden synchronisiert</source>
+  <target>Gegevens worden gesynchroniseerd</target>
+</trans-unit>
+<trans-unit id="spaH.loadingstate.pleaseWait">
+  <source>Bitte warten, Daten werden geladen</source>
+  <target>Gegevens worden geladen</target>
+</trans-unit>
+</body>
 </file>
 </xliff>

package/xliff/de.xlf

@@ -1,6 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
 <file target-language="de" source-language="dev" original="lit-localize-inputs" datatype="plaintext">
-<body/>
+<body>
+<trans-unit id="spaH.loadingstate.syncState">
+  <source>Daten werden synchronisiert</source>
+</trans-unit>
+<trans-unit id="spaH.loadingstate.pleaseWait">
+  <source>Bitte warten, Daten werden geladen</source>
+</trans-unit>
+</body>
 </file>
 </xliff>

package/xliff/en.xlf

@@ -1,6 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
 <file target-language="en" source-language="dev" original="lit-localize-inputs" datatype="plaintext">
-<body/>
+<body>
+<trans-unit id="spaH.loadingstate.syncState">
+  <source>Daten werden synchronisiert</source>
+</trans-unit>
+<trans-unit id="spaH.loadingstate.pleaseWait">
+  <source>Bitte warten, Daten werden geladen</source>
+</trans-unit>
+</body>
 </file>
 </xliff>