@quandis/qbo4.ui 4.0.1-CI-20240422-135811 → 4.0.1-CI-20240425-185108

package/package.json

@@ -3,7 +3,7 @@
   "author": "Quandis, Inc.",
   "license": "MIT",
   "type": "module",
-  "version": "4.0.1-CI-20240422-135811",
+  "version": "4.0.1-CI-20240425-185108",
   "workspaces": [
     "code"
   ],

package/src/qbo/Program.d.ts

@@ -5,7 +5,9 @@ export * from './IValidate.js';
 export * from './Validators.js';
 export * from './DependencyValidator.js';
 export * from './RestApiService.js';
+export * from './qbo-api.js';
 export * from './qbo-badge.js';
+export * from './qbo-contact.js';
 export * from './qbo-datalist.js';
 export * from './qbo-docviewer.js';
 export * from './qbo-form-element.js';
@@ -20,7 +22,6 @@ export * from './qbo-select.js';
 export * from './qbo-sidebar.js';
 export * from './qbo-table.js';
 export * from './qbo-validate.js';
-export * from './qbo-api.js';
 export declare function elementOptions(element: any, prefix: any, options?: string): {};
 export declare function elementSelectorAll(element: Element, selector: string): Element[];
 export declare function elementResetValue(element: Element): void;

package/src/qbo/Program.js

@@ -5,7 +5,9 @@ export * from './IValidate.js';
 export * from './Validators.js';
 export * from './DependencyValidator.js';
 export * from './RestApiService.js';
+export * from './qbo-api.js';
 export * from './qbo-badge.js';
+export * from './qbo-contact.js';
 export * from './qbo-datalist.js';
 export * from './qbo-docviewer.js';
 export * from './qbo-form-element.js';
@@ -20,7 +22,6 @@ export * from './qbo-select.js';
 export * from './qbo-sidebar.js';
 export * from './qbo-table.js';
 export * from './qbo-validate.js';
-export * from './qbo-api.js';
 // Return JSON object from element attributes.
 export function elementOptions(element, prefix, options = 'options') {
     const result = {};

package/src/qbo/Program.ts

@@ -6,7 +6,9 @@ export * from './IValidate.js';
 export * from './Validators.js';
 export * from './DependencyValidator.js';
 export * from './RestApiService.js';
+export * from './qbo-api.js';
 export * from './qbo-badge.js';
+export * from './qbo-contact.js';
 export * from './qbo-datalist.js'
 export * from './qbo-docviewer.js'
 export * from './qbo-form-element.js';
@@ -21,7 +23,6 @@ export * from './qbo-select.js';
 export * from './qbo-sidebar.js'
 export * from './qbo-table.js';
 export * from './qbo-validate.js';
-export * from './qbo-api.js';
 
 // Return JSON object from element attributes.
 export function elementOptions(element, prefix, options = 'options') {
@@ -35,7 +36,7 @@ export function elementOptions(element, prefix, options = 'options') {
             if (options != null && attr === optionsKey) {
                 try {
                     const options = JSON.parse(element.getAttribute(attr));
-                    Object.assign(result, options); 
+                    Object.assign(result, options);
                 } catch (error) {
                     console.error(`Error parsing JSON from element ${element.name} attribute ${optionsKey} (${element.getAttribute(attr)}):`, element, error);
                 }
@@ -84,7 +85,7 @@ export function elementClearValue(element: Element) {
         else
             element.value = '';
     }
-    else if (element instanceof HTMLSelectElement) 
+    else if (element instanceof HTMLSelectElement)
         element.options.selectedIndex = 0;
 }
 

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

@@ -3,6 +3,6 @@ export declare class ApiServiceComponent extends LitElement {
     name: string | null;
     apiEndpoint: string | null;
     method: string;
-    firstUpdated(): void;
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/src/qbo/qbo-api.js

@@ -17,7 +17,8 @@ let ApiServiceComponent = class ApiServiceComponent extends LitElement {
         this.apiEndpoint = null;
         this.method = 'POST';
     }
-    firstUpdated() {
+    connectedCallback() {
+        super.connectedCallback();
         const headers = {};
         if (this.name == null)
             console.error('qbo-api name is required.');
@@ -38,6 +39,8 @@ let ApiServiceComponent = class ApiServiceComponent extends LitElement {
         }
         // container.registerInstance<IApiService>(this.name!, new RestApiService(this.apiEndpoint!, headers, this.method));
         // Call the registerRestApi function with the extracted configuration
+        if (!this.apiEndpoint?.startsWith("http"))
+            this.apiEndpoint = new URL(this.apiEndpoint ?? '', document.location.origin).href;
         registerRestApi(this.name, this.apiEndpoint, headers, this.method);
     }
     render() {

package/src/qbo/qbo-api.ts

@@ -15,7 +15,9 @@ export class ApiServiceComponent extends LitElement {
     @property({ type: String })
     method: string = 'POST';
 
-    firstUpdated() {
+    connectedCallback() {
+        super.connectedCallback();
+
         const headers: HeadersInit = {};
 
         if (this.name == null)
@@ -41,6 +43,8 @@ export class ApiServiceComponent extends LitElement {
         // container.registerInstance<IApiService>(this.name!, new RestApiService(this.apiEndpoint!, headers, this.method));
 
         // Call the registerRestApi function with the extracted configuration
+        if (!this.apiEndpoint?.startsWith("http"))
+            this.apiEndpoint = new URL(this.apiEndpoint ?? '', document.location.origin).href;
         registerRestApi(this.name!, this.apiEndpoint!, headers, this.method);
     }
 

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

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+export declare class QboContact extends LitElement {
+    apiEndpoint: string;
+    colFourClass: String | null;
+    colSixClass: String | null;
+    colThreeClass: String | null;
+    colTwelveClass: String | null;
+    contactId: String | null;
+    contactLabel: String | null;
+    contactName: String | null;
+    divSectionHeaderClass: String | null;
+    emptyOptionText: String | null;
+    emptyOptionValue: String | null;
+    formControlSmallClass: String | null;
+    formLabelSmallClass: String | null;
+    formSelectSmallClass: String | null;
+    renderInHost: boolean;
+    jsonData: any;
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    connectedCallback(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/qbo/qbo-contact.js

@@ -0,0 +1,274 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { services } from '@quandis/qbo4.configuration';
+import { RestApiService } from './RestApiService.js';
+let QboContact = class QboContact extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.apiEndpoint = 'qbo';
+        this.colFourClass = 'qbo-col-4';
+        this.colSixClass = 'qbo-col-6';
+        this.colThreeClass = 'qbo-col-3';
+        this.colTwelveClass = 'qbo-col-12';
+        this.contactId = null;
+        this.contactLabel = 'Contact';
+        this.contactName = 'Contact';
+        this.divSectionHeaderClass = 'qbo-header';
+        this.emptyOptionText = '--';
+        this.emptyOptionValue = '';
+        this.formControlSmallClass = 'qbo-sm';
+        this.formLabelSmallClass = 'qbo-sm';
+        this.formSelectSmallClass = 'qbo-sm';
+        this.renderInHost = true;
+    }
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        const service = services.container.isRegistered(this.apiEndpoint) ? services.container.resolve(this.apiEndpoint) : new RestApiService(this.apiEndpoint);
+        this.jsonData = await service.fetch('contact/summary', { ID: `${this.contactId}` });
+    }
+    render() {
+        return html `<slot>
+            <div class="${this.colSixClass}">
+                <label for="${this.contactName}" class="${this.formLabelSmallClass}">${this.contactLabel}</label>
+                <input type="text" disabled class="${this.formControlSmallClass}" name="${this.contactName}" value="${this.jsonData?.ContactItem?.Contact}"/>
+            </div>
+            <div class="${this.colSixClass}">
+                <label for="ContactTemplateID" class="${this.formLabelSmallClass}">Template</label>
+
+
+
+                <qbo-select disabled qbo-class="${this.formSelectSmallClass}" name="ContactTemplateID" apiEndpoint="/ui/contacttemplate/listwhere.json?appliesto=${this.jsonData?.ContactItem?.Object}" defaultValue="${this.jsonData?.ContactItem?.ContactTemplateID}"/>
+
+
+
+            </div>
+            <div class="${this.colSixClass}">
+                <label for="Status" class="${this.formLabelSmallClass}">Status</label>
+                <select disabled class="${this.formSelectSmallClass}" name="Status">
+                    <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
+                </select>
+            </div>
+            <div class="${this.colSixClass}">
+                <label for="ContactType" class="${this.formLabelSmallClass}">Type</label>
+                <select disabled class="${this.formSelectSmallClass}" name="ContactType">
+                    <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
+                </select>
+            </div>
+            <div class="${this.colFourClass}">
+                <label for="Phone" class="${this.formLabelSmallClass}">Phone</label>
+                <input type="tel" disabled class="${this.formControlSmallClass}" name="Phone"/>
+            </div>
+            <div class="${this.colFourClass}">
+                <label for="Email" class="${this.formLabelSmallClass}">Email</label>
+                <input type="email" disabled class="${this.formControlSmallClass}" name="Email"/>
+            </div>
+            <div class="${this.colFourClass}">
+                <label for="Title" class="${this.formLabelSmallClass}">Title</label>
+                <select disabled class="${this.formSelectSmallClass}" name="Title">
+                    <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
+                </select>
+            </div>
+            <div class="${this.divSectionHeaderClass}">
+                <h5>Location</h5>
+            </div>
+            <div class="${this.colTwelveClass}">
+                <label for="Company" class="${this.formLabelSmallClass}">Company</label>
+                <input type="text" disabled class="${this.formControlSmallClass}" name="Company"/>
+            </div>
+            <div class="${this.colTwelveClass}">
+                <label for="Address" class="${this.formLabelSmallClass}">Address</label>
+                <textarea disabled class="${this.formControlSmallClass}" name="Address"></textarea>
+            </div>
+            <div class="${this.colSixClass}">
+                <label for="City" class="${this.formLabelSmallClass}">City</label>
+                <input type="text" disabled class="${this.formControlSmallClass}" name="City"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="State" class="${this.formLabelSmallClass}">State</label>
+                <select disabled class="${this.formSelectSmallClass}" name="State">
+                    <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
+                </select>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="PostalCode" class="${this.formLabelSmallClass}">Postal Code</label>
+                <input type="text" disabled class="${this.formControlSmallClass}" name="PostalCode" pattern="\d{5}-?(\d{4})?"/>
+            </div>
+            <div class="${this.colSixClass}">
+                <label for="Country" class="${this.formLabelSmallClass}">Country</label>
+                <input type="text" disabled class="${this.formControlSmallClass}" name="Country"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="Latitude" class="${this.formLabelSmallClass}">Latitude</label>
+                <input type="number" disabled class="${this.formControlSmallClass}" name="Latitude"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="Longitude" class="${this.formLabelSmallClass}">Longitude</label>
+                <input type="number" disabled class="${this.formControlSmallClass}" name="Longitude"/>
+            </div>
+            <div class="${this.divSectionHeaderClass}">
+                <h5>Identity</h5>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="USSSN" class="${this.formLabelSmallClass}">SSN</label>
+                <input type="number" disabled class="${this.formControlSmallClass}" name="USSSN"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="TIN" class="${this.formLabelSmallClass}">TIN</label>
+                <input type="number" disabled class="${this.formControlSmallClass}" name="TIN"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="Nationality" class="${this.formLabelSmallClass}">Nationality</label>
+                <select disabled class="${this.formSelectSmallClass}" name="Nationality">
+                    <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
+                </select>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SpokenLanguage" class="${this.formLabelSmallClass}">Spoken Language</label>
+                <select disabled class="${this.formSelectSmallClass}" name="SpokenLanguage">
+                    <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
+                </select>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="BirthDate" class="${this.formLabelSmallClass}">Birth Date</label>
+                <input type="date" disabled class="${this.formControlSmallClass}" name="BirthDate"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="DeathDate" class="${this.formLabelSmallClass}">Death Date</label>
+                <input type="date" disabled class="${this.formControlSmallClass}" name="DeathDate"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="ValidStart" class="${this.formLabelSmallClass}">Valid Start</label>
+                <input type="date" disabled class="${this.formControlSmallClass}" name="ValidStart"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="ValidEnd" class="${this.formLabelSmallClass}">Valid End</label>
+                <input type="date" disabled class="${this.formControlSmallClass}" name="ValidEnd"/>
+            </div>
+            <div class="${this.colSixClass}">
+                <label for="VerifiedSource" class="${this.formLabelSmallClass}">Verified Source</label>
+                <input type="text" disabled class="${this.formControlSmallClass}" name="VerifiedSource"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="VerifiedDate" class="${this.formLabelSmallClass}">Verified Date</label>
+                <input type="date" disabled class="${this.formControlSmallClass}" name="VerifiedDate"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="VerifiedConfidence" class="${this.formLabelSmallClass}">Verified Confidence</label>
+                <input type="number" disabled class="${this.formControlSmallClass}" name="VerifiedConfidence"/>
+            </div>
+            <div class="${this.divSectionHeaderClass}">
+                <h5>SCRA</h5>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRAStatus" class="${this.formLabelSmallClass}">SCRA Status</label>
+                <select disabled class="${this.formSelectSmallClass}" name="SCRAStatus">
+                    <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
+                </select>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRAStatusAsOf" class="${this.formLabelSmallClass}">SCRA Status As Of</label>
+                <input type="date" disabled class="${this.formControlSmallClass}" name="SCRAStatusAsOf"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRAStartDate" class="${this.formLabelSmallClass}">SCRA Start Date</label>
+                <input type="date" disabled class="${this.formControlSmallClass}" name="SCRAStartDate"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRADischargeDate" class="${this.formLabelSmallClass}">SCRA Discharge Date</label>
+                <input type="date" disabled class="${this.formControlSmallClass}" name="SCRADischargeDate"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRAVerified" class="${this.formLabelSmallClass}">SCRA Verified</label>
+                <input type="text" disabled class="${this.formControlSmallClass}" name="SCRAVerified"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRAVerifiedDate" class="${this.formLabelSmallClass}">SCRA Verified Date</label>
+                <input type="date" disabled class="${this.formControlSmallClass}" name="SCRAVerifiedDate"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRASource" class="${this.formLabelSmallClass}">SCRA Source</label>
+                <input type="text" disabled class="${this.formControlSmallClass}" name="SCRASource"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRAID" class="${this.formLabelSmallClass}">SCRA ID</label>
+                <input type="number" disabled class="${this.formControlSmallClass}" name="SCRAID"/>
+            </div>
+        </slot>`;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContact.prototype, "apiEndpoint", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContact.prototype, "colFourClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContact.prototype, "colSixClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContact.prototype, "colThreeClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContact.prototype, "colTwelveClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContact.prototype, "contactId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContact.prototype, "contactLabel", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContact.prototype, "contactName", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContact.prototype, "divSectionHeaderClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContact.prototype, "emptyOptionText", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContact.prototype, "emptyOptionValue", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContact.prototype, "formControlSmallClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContact.prototype, "formLabelSmallClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContact.prototype, "formSelectSmallClass", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboContact.prototype, "renderInHost", void 0);
+QboContact = __decorate([
+    customElement('qbo-contact')
+], QboContact);
+export { QboContact };