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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/src/defaultpage/default-confirm-popup.d.ts +4 -1
  2. package/dist/src/defaultpage/default-confirm-popup.js +26 -8
  3. package/dist/src/defaultpage/default-confirm-popup.js.map +1 -1
  4. package/dist/src/defaultpage/default-wizard.d.ts +6 -0
  5. package/dist/src/defaultpage/default-wizard.js +103 -1
  6. package/dist/src/defaultpage/default-wizard.js.map +1 -1
  7. package/dist/src/generated/locale-wrapper/de-wrapper.d.ts +11 -0
  8. package/dist/src/generated/locales/be.d.ts +11 -0
  9. package/dist/src/generated/locales/be.js +11 -0
  10. package/dist/src/generated/locales/be.js.map +1 -1
  11. package/dist/src/generated/locales/de.d.ts +11 -0
  12. package/dist/src/generated/locales/de.js +11 -0
  13. package/dist/src/generated/locales/de.js.map +1 -1
  14. package/dist/src/generated/locales/en.d.ts +11 -0
  15. package/dist/src/generated/locales/en.js +11 -0
  16. package/dist/src/generated/locales/en.js.map +1 -1
  17. package/dist/src/model/spa-model.d.ts +1 -0
  18. package/dist/src/model/spa-model.js +1 -0
  19. package/dist/src/model/spa-model.js.map +1 -1
  20. package/dist/src/popup/wizard-close-popup.d.ts +10 -0
  21. package/dist/src/popup/wizard-close-popup.js +49 -0
  22. package/dist/src/popup/wizard-close-popup.js.map +1 -0
  23. package/dist/src/popup/wizard-reload-popup.d.ts +13 -0
  24. package/dist/src/popup/wizard-reload-popup.js +63 -0
  25. package/dist/src/popup/wizard-reload-popup.js.map +1 -0
  26. package/dist/src/tmpown/pd-loading-state.js +2 -1
  27. package/dist/src/tmpown/pd-loading-state.js.map +1 -1
  28. package/dist/tsconfig.tsbuildinfo +1 -1
  29. package/package.json +1 -1
  30. package/src/defaultpage/default-confirm-popup.ts +22 -13
  31. package/src/defaultpage/default-wizard.ts +123 -1
  32. package/src/generated/locales/be.ts +11 -0
  33. package/src/generated/locales/de.ts +11 -0
  34. package/src/generated/locales/en.ts +12 -1
  35. package/src/model/spa-model.ts +2 -0
  36. package/src/popup/wizard-close-popup.ts +52 -0
  37. package/src/popup/wizard-reload-popup.ts +69 -0
  38. package/src/tmpown/pd-loading-state.ts +2 -1
  39. package/xliff/be.xlf +45 -0
  40. package/xliff/de.xlf +33 -0
  41. package/xliff/en.xlf +45 -0
@@ -1,7 +1,7 @@
1
1
  import { __decorate } from "tslib";
2
2
  import { LitElement, html, css } from 'lit';
3
3
  import { customElement, property } from 'lit/decorators.js';
4
- import { msg } from '@lit/localize';
4
+ import { localized, msg } from '@lit/localize';
5
5
  import { classMap } from 'lit/directives/class-map.js';
6
6
  import '@progressive-development/pd-icon/pd-icon.js';
7
7
  let PdLoadingState = class PdLoadingState extends LitElement {
@@ -166,6 +166,7 @@ __decorate([
166
166
  property({ type: Object })
167
167
  ], PdLoadingState.prototype, "loadingState", void 0);
168
168
  PdLoadingState = __decorate([
169
+ localized(),
169
170
  customElement('pd-loading-state')
170
171
  ], PdLoadingState);
171
172
  export { PdLoadingState };
@@ -1 +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}"]}
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,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}"]}