@quandis/qbo4.ui 4.0.1-CI-20240429-225952 → 4.0.1-CI-20240501-230003

package/src/qbo/qbo-form-element.js

@@ -72,6 +72,8 @@ let QboFormElement = class QboFormElement extends LitElement {
     }
     establishFormData() {
         const elements = this.shadowRoot?.querySelectorAll('input, select, textarea');
+        if (!elements || elements?.length === 0)
+            return;
         const inputs = Array.from(elements).filter(e => !e.assignedSlot
             && (e instanceof HTMLInputElement
                 || e instanceof HTMLSelectElement

package/src/qbo/qbo-form-element.ts

@@ -60,6 +60,7 @@ export class QboFormElement extends LitElement {
 
     establishFormData() {
         const elements = this.shadowRoot?.querySelectorAll('input, select, textarea');
+        if (!elements || elements?.length === 0) return;
         const inputs = Array.from(elements!).filter(e => !e.assignedSlot
             && (e instanceof HTMLInputElement
                 || e instanceof HTMLSelectElement

package/src/qbo/qbo-mainmenu.js

@@ -182,20 +182,20 @@ let QboMainMenu = class QboMainMenu extends QboFetch {
             </li>`;
     }
     render() {
-        if (this.jsonData.MainMenu) {
+        if (this.jsonData && this.jsonData.Root && this.jsonData.Root.MainMenu) {
             return html `
                 <nav class="${this.navClass}">
                     <div>
                         <a href="#">
-                            ${this.renderImage(this.jsonData.MainMenu.Image)}
-                            ${this.jsonData.MainMenu.Label}
+                            ${this.renderImage(this.jsonData.Root.MainMenu.Image)}
+                            ${this.jsonData.Root.MainMenu.Label}
                         </a>
                         <button type="${this.buttonType}" data-bs-toggle="${this.collapseToggle}" data-bs-target="#${this.dropdownId}" aria-expanded="${this.ariaExpanded}" aria-label="${this.ariaLabel}">
                             <span/>
                         </button>
                         <div id="${this.dropdownId}">
                             <ul>
-                                ${this.renderMenu(this.jsonData.MainMenu, false, false)}
+                                ${this.renderMenu(this.jsonData.Root.MainMenu, false, false)}
                             </ul>
                         </div>
                     </div>

package/src/qbo/qbo-mainmenu.ts

@@ -238,20 +238,20 @@ export class QboMainMenu extends QboFetch {
     }
 
     render() {
-        if (this.jsonData.MainMenu) {
+        if (this.jsonData && this.jsonData.Root && this.jsonData.Root.MainMenu) {
             return html`
                 <nav class="${this.navClass}">
                     <div>
                         <a href="#">
-                            ${this.renderImage(this.jsonData.MainMenu.Image)}
-                            ${this.jsonData.MainMenu.Label}
+                            ${this.renderImage(this.jsonData.Root.MainMenu.Image)}
+                            ${this.jsonData.Root.MainMenu.Label}
                         </a>
                         <button type="${this.buttonType}" data-bs-toggle="${this.collapseToggle}" data-bs-target="#${this.dropdownId}" aria-expanded="${this.ariaExpanded}" aria-label="${this.ariaLabel}">
                             <span/>
                         </button>
                         <div id="${this.dropdownId}">
                             <ul>
-                                ${this.renderMenu(this.jsonData.MainMenu, false, false)}
+                                ${this.renderMenu(this.jsonData.Root.MainMenu, false, false)}
                             </ul>
                         </div>
                     </div>

package/src/qbo/qbo-select.d.ts

@@ -1,11 +1,12 @@
-import { QboFetch } from './qbo-fetch.js';
+import { QboFormElement } from './Program.js';
 /**
   * Renders a <select> element with options populated from a JSON array.
   *
   * @remarks
   * This element is a thin wrapper around {@link QboFetch} that renders a <select> element with options populated from a JSON array.
   */
-export declare class QboSelect extends QboFetch {
+export declare class QboSelect extends QboFormElement {
+    apiEndpoint: string;
     loading: boolean;
     optionText: string | null;
     optionValue: string | null;
@@ -15,6 +16,7 @@ export declare class QboSelect extends QboFetch {
     options: Array<{
         [key: string]: string;
     }> | null;
+    jsonData: any | null;
     renderInHost: boolean;
     static styles: import("lit").CSSResult[];
     connectedCallback(): Promise<void>;

package/src/qbo/qbo-select.js

@@ -10,16 +10,17 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { getArray } from './qbo-json.js';
-import { QboFetch } from './qbo-fetch.js';
+import { QboFormElement, getApiService } from './Program.js';
 /**
   * Renders a <select> element with options populated from a JSON array.
   *
   * @remarks
   * This element is a thin wrapper around {@link QboFetch} that renders a <select> element with options populated from a JSON array.
   */
-let QboSelect = class QboSelect extends QboFetch {
+let QboSelect = class QboSelect extends QboFormElement {
     constructor() {
         super(...arguments);
+        this.apiEndpoint = 'qbo';
         this.loading = false;
         this.optionText = null;
         this.optionValue = null;
@@ -27,6 +28,7 @@ let QboSelect = class QboSelect extends QboFetch {
         this.emptyOptionText = '--';
         this.emptyOptionValue = '';
         this.options = [];
+        this.jsonData = {};
         this.renderInHost = true;
     }
     static { this.styles = [
@@ -38,6 +40,8 @@ let QboSelect = class QboSelect extends QboFetch {
     async connectedCallback() {
         this.optionText ??= this.optionValue;
         super.connectedCallback();
+        const service = getApiService(this.apiEndpoint);
+        this.jsonData = await service.fetch(null, {});
     }
     createRenderRoot() {
         return this.renderInHost ? this : super.createRenderRoot();
@@ -54,6 +58,10 @@ let QboSelect = class QboSelect extends QboFetch {
         </select>`;
     }
 };
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSelect.prototype, "apiEndpoint", void 0);
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
@@ -82,6 +90,10 @@ __decorate([
     property({ type: Array }),
     __metadata("design:type", Object)
 ], QboSelect.prototype, "options", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], QboSelect.prototype, "jsonData", void 0);
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)

package/src/qbo/qbo-select.ts

@@ -2,6 +2,7 @@
 import { customElement, property } from 'lit/decorators.js';
 import { getArray } from './qbo-json.js';
 import { QboFetch } from './qbo-fetch.js';
+import { IApiService, QboFormElement, getApiService } from './Program.js';
 
 /**
   * Renders a <select> element with options populated from a JSON array.
@@ -10,8 +11,11 @@ import { QboFetch } from './qbo-fetch.js';
   * This element is a thin wrapper around {@link QboFetch} that renders a <select> element with options populated from a JSON array.
   */
 @customElement('qbo-select')
-export class QboSelect extends QboFetch
+export class QboSelect extends QboFormElement
 {
+    @property({ type: String })
+    apiEndpoint = 'qbo';
+
     @property({ type: Boolean })
     loading = false;
 
@@ -33,6 +37,9 @@ export class QboSelect extends QboFetch
     @property({ type: Array })
     options: Array<{ [key: string]: string }> | null = [];
 
+    @property({ type: Object })
+    jsonData: any | null = {};
+
     @property({ type: Boolean })
     renderInHost = true;
 
@@ -46,6 +53,9 @@ export class QboSelect extends QboFetch
     async connectedCallback() {
         this.optionText ??= this.optionValue;
         super.connectedCallback();
+
+        const service: IApiService = getApiService(this.apiEndpoint);
+        this.jsonData = await service.fetch(null, { });
     }
 
     createRenderRoot() {