@quandis/qbo4.ui 4.0.1-CI-20240429-215003 → 4.0.1-CI-20240430-215338

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

@@ -12,8 +12,13 @@ import { customElement, property } from 'lit/decorators.js';
 let QboFormEdit = class QboFormEdit extends LitElement {
     constructor() {
         super(...arguments);
+        this.buttonPrimaryClass = 'qbo-primary';
         this.createdDate = null;
         this.createdPerson = null;
+        this.divButtonGroupClass = 'qbo-btn-group';
+        this.divFormActionClass = 'qbo-form-actions';
+        this.divSectionHeaderClass = 'qbo-header';
+        this.editLabel = 'Edit';
         this.updatedDate = null;
         this.updatedPerson = null;
         this.renderInHost = true;
@@ -23,13 +28,13 @@ let QboFormEdit = class QboFormEdit extends LitElement {
     }
     render() {
         return html `<slot>
-            <div class="col-md-12 mt-3">
+            <div class="${this.divSectionHeaderClass}">
                 <hr />
             </div>
-            <div class="col-md-12 mt-2">
-                <div class="btn-group">
-                    <button type="button" class="btn btn-primary">
-                        <span class="bi-pencil-square"> Edit</span>
+            <div class="${this.divFormActionClass}">
+                <div class="${this.divButtonGroupClass}">
+                    <button type="button" class="${this.buttonPrimaryClass}">
+                        <span class="bi-pencil-square"> ${this.editLabel}</span>
                     </button>
                     <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
                     <ul class="dropdown-menu">
@@ -56,6 +61,10 @@ let QboFormEdit = class QboFormEdit extends LitElement {
         </slot>`;
     }
 };
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "buttonPrimaryClass", void 0);
 __decorate([
     property({ type: Date }),
     __metadata("design:type", Object)
@@ -64,6 +73,22 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], QboFormEdit.prototype, "createdPerson", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "divButtonGroupClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "divFormActionClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "divSectionHeaderClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "editLabel", void 0);
 __decorate([
     property({ type: Date }),
     __metadata("design:type", Object)

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

@@ -4,12 +4,27 @@ import { customElement, property } from 'lit/decorators.js';
 @customElement('qbo-form-edit')
 export class QboFormEdit extends LitElement {
 
+    @property({ type: String })
+    buttonPrimaryClass: String | null = 'qbo-primary';
+
     @property({ type: Date })
     createdDate = null;
 
     @property({ type: String })
     createdPerson = null;
 
+    @property({ type: String })
+    divButtonGroupClass: String | null = 'qbo-btn-group';
+
+    @property({ type: String })
+    divFormActionClass: String | null = 'qbo-form-actions';
+
+    @property({ type: String })
+    divSectionHeaderClass: String | null = 'qbo-header';
+
+    @property({ type: String })
+    editLabel: String | null = 'Edit';
+
     @property({ type: Date })
     updatedDate = null;
 
@@ -25,13 +40,13 @@ export class QboFormEdit extends LitElement {
 
     render() {
         return html`<slot>
-            <div class="col-md-12 mt-3">
+            <div class="${this.divSectionHeaderClass}">
                 <hr />
             </div>
-            <div class="col-md-12 mt-2">
-                <div class="btn-group">
-                    <button type="button" class="btn btn-primary">
-                        <span class="bi-pencil-square"> Edit</span>
+            <div class="${this.divFormActionClass}">
+                <div class="${this.divButtonGroupClass}">
+                    <button type="button" class="${this.buttonPrimaryClass}">
+                        <span class="bi-pencil-square"> ${this.editLabel}</span>
                     </button>
                     <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
                     <ul class="dropdown-menu">

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-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() {