@progressive-development/pd-spa-helper 0.1.157 → 0.1.159

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.157",
+  "version": "0.1.159",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -27,11 +27,11 @@
   "dependencies": {
     "@lit-labs/task": "^1.1.3",
     "@lit/localize": "^0.11.4",
-    "@progressive-development/pd-dialog": "^0.1.73",
+    "@progressive-development/pd-dialog": "^0.1.74",
     "@progressive-development/pd-forms": "^0.2.10",
     "@progressive-development/pd-icon": "^0.1.20",
-    "@progressive-development/pd-order": "^0.1.97",
-    "@progressive-development/pd-page": "^0.1.110",
+    "@progressive-development/pd-order": "^0.1.98",
+    "@progressive-development/pd-page": "^0.1.111",
     "@progressive-development/pd-wizard": "^0.1.65",
     "@types/hammerjs": "^2.0.45",
     "firebase": "^9.23.0",
@@ -48,11 +48,11 @@
     "@lit/localize-tools": "^0.7.1",
     "@open-wc/eslint-config": "^4.3.0",
     "@open-wc/testing": "^3.2.2",
-    "@storybook/addon-essentials": "^7.6.7",
-    "@storybook/addon-links": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
     "@storybook/blocks": "^7.5.3",
     "@storybook/web-components": "^7.5.3",
-    "@storybook/web-components-vite": "^7.6.7",
+    "@storybook/web-components-vite": "^7.6.10",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "@web/dev-server": "^0.1.38",
@@ -64,7 +64,7 @@
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
     "prettier": "^2.8.8",
-    "storybook": "^7.6.7",
+    "storybook": "^7.6.10",
     "tslib": "^2.6.2",
     "typescript": "^4.9.5"
   },

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
   };

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>