@quandis/qbo4.ui-bridge 4.0.1-CI-20240919-212538

package/src/qbo-contact-name.js

@@ -0,0 +1,139 @@
+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 } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { QboFormElement } from '@quandis/qbo4.ui';
+const contactNameMap = new Map();
+contactNameMap.set('defaultLayout', (component) => {
+    return html `<div slot="content" class="${component.slotClass}">
+            <input type="text" ?disabled=${component.disabled} class="${component.getAttribute("class")}" name="${component.getAttribute("name")}" value="${component.data?.['Contact']}"/>
+            <qbo-popup>
+                <div slot="button">
+                    <span class="${component.spanClass}">
+                        <i class="${component.icon}"></i>
+                    </span>
+                </div>
+                <div slot="content">
+                    <div class="${component.modalDivClass}">
+                        <div class="${component.modalDialogDivClass}">
+                            <div class="${component.modalContentDivClass}">
+                                <div class="${component.modalHeaderDivClass}">${component.modalHeaderText}</div>
+                                <div class="${component.modalBodyDivClass}">
+                                    <qbo-select ?disabled=${component.disabled} class="${component.elementClass}" name="Prefix" apiEndpoint="api://qbo/objecttype/list?object=Contact.Prefix" optionValue="ObjectType" defaultValue="${component.data?.['Prefix']}" emptyOptionText="-- Prefix --"></qbo-select>
+                                    <input type="text" ?disabled=${component.disabled} class="${component.elementClass} ${component.elementStackedTopClass}" name="FirstName" placeholder="First Name" value="${component.data?.['FirstName']}"/>
+                                    <input type="text" ?disabled=${component.disabled} class="${component.elementClass} ${component.elementStackedTopClass}" name="MiddleName" placeholder="Middle Name" value="${component.data?.['MiddleName']}"/>
+                                    <input type="text" ?disabled=${component.disabled} class="${component.elementClass} ${component.elementStackedTopClass}" name="LastName" placeholder="Last Name" value="${component.data?.['LastName']}"/>
+                                    <qbo-select ?disabled=${component.disabled} class="${component.elementClass} ${component.elementStackedTopClass}" name="Suffix" apiEndpoint="api://qbo/objecttype/list?object=Contact.Suffix" optionValue="ObjectType" defaultValue="${component.data?.['Suffix']}" emptyOptionText="-- Suffix --"></qbo-select>
+                                </div>
+                                <div class="${component.modalFooterDivClass}">
+                                    <button type="button" class="${component.buttonClass}" data-dismiss="modal">Close</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </qbo-popup>
+        </div>`;
+});
+let QboContactName = class QboContactName extends QboFormElement {
+    constructor() {
+        super(...arguments);
+        this.buttonClass = 'qbo-secondary';
+        this.disabled = true;
+        this.elementClass = 'qbo-sm';
+        this.elementStackedTopClass = 'qbo-sm-top';
+        this.icon = 'qbo-icon-person-lines-fill';
+        this.modalBodyDivClass = 'qbo-modal-body';
+        this.modalContentDivClass = 'qbo-modal-content';
+        this.modalDivClass = 'qbo-modal';
+        this.modalDialogDivClass = 'qbo-modal-dialog';
+        this.modalFooterDivClass = 'qbo-modal-footer';
+        this.modalHeaderDivClass = 'qbo-modal-header';
+        this.modalHeaderText = 'Contact Name';
+        this.slotClass = 'qbo-input-group';
+        this.spanClass = 'qbo-input-group-text qbo-pointer';
+        this.type = 'defaultLayout';
+        this.renderInHost = true;
+    }
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+    render() {
+        return html `<slot>${contactNameMap.has(this.type) ? contactNameMap.get(this.type)(this) : null}</slot>`;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContactName.prototype, "buttonClass", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboContactName.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContactName.prototype, "elementClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContactName.prototype, "elementStackedTopClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContactName.prototype, "icon", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContactName.prototype, "modalBodyDivClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContactName.prototype, "modalContentDivClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContactName.prototype, "modalDivClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContactName.prototype, "modalDialogDivClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContactName.prototype, "modalFooterDivClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContactName.prototype, "modalHeaderDivClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContactName.prototype, "modalHeaderText", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContactName.prototype, "slotClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboContactName.prototype, "spanClass", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboContactName.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboContactName.prototype, "renderInHost", void 0);
+QboContactName = __decorate([
+    customElement('qbo-contact-name')
+], QboContactName);
+export { QboContactName };

package/src/qbo-contact-name.ts

@@ -0,0 +1,97 @@
+import { TemplateResult, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { QboFormElement } from '@quandis/qbo4.ui';
+
+type TemplateFunction = (component: any) => TemplateResult;
+const contactNameMap: Map<string, TemplateFunction> = new Map();
+contactNameMap.set('defaultLayout', (component: QboContactName) => {
+    return html`<div slot="content" class="${component.slotClass}">
+            <input type="text" ?disabled=${component.disabled} class="${component.getAttribute("class")}" name="${component.getAttribute("name")}" value="${component.data?.['Contact']}"/>
+            <qbo-popup>
+                <div slot="button">
+                    <span class="${component.spanClass}">
+                        <i class="${component.icon}"></i>
+                    </span>
+                </div>
+                <div slot="content">
+                    <div class="${component.modalDivClass}">
+                        <div class="${component.modalDialogDivClass}">
+                            <div class="${component.modalContentDivClass}">
+                                <div class="${component.modalHeaderDivClass}">${component.modalHeaderText}</div>
+                                <div class="${component.modalBodyDivClass}">
+                                    <qbo-select ?disabled=${component.disabled} class="${component.elementClass}" name="Prefix" apiEndpoint="api://qbo/objecttype/list?object=Contact.Prefix" optionValue="ObjectType" defaultValue="${component.data?.['Prefix']}" emptyOptionText="-- Prefix --"></qbo-select>
+                                    <input type="text" ?disabled=${component.disabled} class="${component.elementClass} ${component.elementStackedTopClass}" name="FirstName" placeholder="First Name" value="${component.data?.['FirstName']}"/>
+                                    <input type="text" ?disabled=${component.disabled} class="${component.elementClass} ${component.elementStackedTopClass}" name="MiddleName" placeholder="Middle Name" value="${component.data?.['MiddleName']}"/>
+                                    <input type="text" ?disabled=${component.disabled} class="${component.elementClass} ${component.elementStackedTopClass}" name="LastName" placeholder="Last Name" value="${component.data?.['LastName']}"/>
+                                    <qbo-select ?disabled=${component.disabled} class="${component.elementClass} ${component.elementStackedTopClass}" name="Suffix" apiEndpoint="api://qbo/objecttype/list?object=Contact.Suffix" optionValue="ObjectType" defaultValue="${component.data?.['Suffix']}" emptyOptionText="-- Suffix --"></qbo-select>
+                                </div>
+                                <div class="${component.modalFooterDivClass}">
+                                    <button type="button" class="${component.buttonClass}" data-dismiss="modal">Close</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </qbo-popup>
+        </div>`;
+});
+
+@customElement('qbo-contact-name')
+export class QboContactName extends QboFormElement {
+
+    @property({ type: String })
+    buttonClass: String | null = 'qbo-secondary';
+
+    @property({ type: Boolean })
+    disabled = true;
+
+    @property({ type: String })
+    elementClass: String | null = 'qbo-sm';
+
+    @property({ type: String })
+    elementStackedTopClass: String | null = 'qbo-sm-top';
+
+    @property({ type: String })
+    icon: String | null = 'qbo-icon-person-lines-fill';
+
+    @property({ type: String })
+    modalBodyDivClass: String | null = 'qbo-modal-body';
+
+    @property({ type: String })
+    modalContentDivClass: String | null = 'qbo-modal-content';
+
+    @property({ type: String })
+    modalDivClass: String | null = 'qbo-modal';
+
+    @property({ type: String })
+    modalDialogDivClass: String | null = 'qbo-modal-dialog';
+
+    @property({ type: String })
+    modalFooterDivClass: String | null = 'qbo-modal-footer';
+
+    @property({ type: String })
+    modalHeaderDivClass: String | null = 'qbo-modal-header';
+
+    @property({ type: String })
+    modalHeaderText: String | null = 'Contact Name';
+
+    @property({ type: String })
+    slotClass: String | null = 'qbo-input-group';
+
+    @property({ type: String })
+    spanClass: String | null = 'qbo-input-group-text qbo-pointer';
+
+    @property()
+    type: string | null = 'defaultLayout';
+
+    @property({ type: Boolean })
+    renderInHost = true;
+
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+
+    render() {
+        return html`<slot>${contactNameMap.has(this.type!) ? contactNameMap.get(this.type!)!(this) : null}</slot>`;
+    }
+}

package/src/qbo-contact.d.ts

@@ -0,0 +1,21 @@
+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;
+    disabled: boolean;
+    divSectionHeaderClass: String | null;
+    formControlSmallClass: String | null;
+    formLabelSmallClass: String | null;
+    formSelectSmallClass: String | null;
+    renderInHost: boolean;
+    jsonData: any | null;
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    connectedCallback(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/qbo-contact.js

@@ -0,0 +1,250 @@
+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 '@quandis/qbo4.ui';
+import { elementDate } from '@quandis/qbo4.ui';
+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.disabled = true;
+        this.divSectionHeaderClass = 'qbo-header';
+        this.formControlSmallClass = 'qbo-sm';
+        this.formLabelSmallClass = 'qbo-sm';
+        this.formSelectSmallClass = 'qbo-sm';
+        this.renderInHost = true;
+        this.jsonData = {};
+    }
+    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/${this.contactId}`);
+    }
+    render() {
+        if (this.jsonData == undefined || this.jsonData.Root == undefined || (this.jsonData.Root.ContactItem == undefined && this.contactId != null))
+            return html `<p>Loading...</p>`;
+        return html `<slot>
+            <div class="${this.colSixClass}">
+                <label for="${this.contactName}" class="${this.formLabelSmallClass}">${this.contactLabel}</label>
+                <qbo-contact-name class="${this.formControlSmallClass}" name="${this.contactName}" .data="${this.jsonData.Root.ContactItem}"></qbo-contact-name>
+            </div>
+            <div class="${this.colSixClass}">
+                <label for="ContactTemplateID" class="${this.formLabelSmallClass}">Template</label>
+                <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="ContactTemplateID" apiEndpoint="api://qbo/contacttemplate/listwhere?appliesto=${this.jsonData.Root.ContactItem?.Object}" defaultValue="${this.jsonData.Root.ContactItem?.ContactTemplateID}"></qbo-select>
+            </div>
+            <div class="${this.colSixClass}">
+                <label for="Status" class="${this.formLabelSmallClass}">Status</label>
+                <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="Status" apiEndpoint="api://qbo/objectstatus/customlist?object=Contact&objectid=${this.jsonData.Root.ContactItem?.ContactTemplateID}" optionValue="ObjectStatus" defaultValue="${this.jsonData.Root.ContactItem?.Status}"></qbo-select>
+            </div>
+            <div class="${this.colSixClass}">
+                <label for="ContactType" class="${this.formLabelSmallClass}">Type</label>
+                <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="ContactType" apiEndpoint="api://qbo/objecttype/customlist?object=Contact&objectid=${this.jsonData.Root.ContactItem?.ContactTemplateID}" optionValue="ObjectType" defaultValue="${this.jsonData.Root.ContactItem?.ContactType}"></qbo-select>
+            </div>
+            <div class="${this.divSectionHeaderClass}">
+                <h5>Location</h5>
+            </div>
+            <div class="${this.colSixClass}">
+                <label for="Company" class="${this.formLabelSmallClass}">Company</label>
+                <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Company" value="${this.jsonData.Root.ContactItem?.Company}"/>
+            </div>
+            <div class="${this.colSixClass}">
+                <label for="Title" class="${this.formLabelSmallClass}">Title</label>
+                <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Title" value="${this.jsonData.Root.ContactItem?.Title}"/>
+            </div>
+            <div class="${this.colTwelveClass}">
+                <label for="Address" class="${this.formLabelSmallClass}">Address</label>
+                <textarea ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Address">${this.jsonData.Root.ContactItem?.Address}</textarea>
+            </div>
+            <div class="${this.colSixClass}">
+                <label for="City" class="${this.formLabelSmallClass}">City</label>
+                <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="City" value="${this.jsonData.Root.ContactItem?.City}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="State" class="${this.formLabelSmallClass}">State</label>
+                <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="State" apiEndpoint="api://qbo/state/list" optionValue="State" defaultValue="${this.jsonData.Root.ContactItem?.State}"></qbo-select>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="PostalCode" class="${this.formLabelSmallClass}">Postal Code</label>
+                <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="PostalCode" pattern="\d{5}-?(\d{4})?" value="${this.jsonData.Root.ContactItem?.PostalCode}"/>
+            </div>
+            <div class="${this.colSixClass}">
+                <label for="Country" class="${this.formLabelSmallClass}">Country</label>
+                <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Country" value="${this.jsonData.Root.ContactItem?.Country}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="Latitude" class="${this.formLabelSmallClass}">Latitude</label>
+                <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Latitude" value="${this.jsonData.Root.ContactItem?.Latitude}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="Longitude" class="${this.formLabelSmallClass}">Longitude</label>
+                <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Longitude" value="${this.jsonData.Root.ContactItem?.Longitude}"/>
+            </div>
+            <div class="${this.divSectionHeaderClass}">
+                <h5>Identity</h5>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="USSSN" class="${this.formLabelSmallClass}">SSN</label>
+                <qbo-ssn .data="${this.jsonData.Root.ContactItem}"></qbo-ssn>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="TIN" class="${this.formLabelSmallClass}">TIN</label>
+                <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="TIN" value="${this.jsonData.Root.ContactItem?.TIN}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="Nationality" class="${this.formLabelSmallClass}">Nationality</label>
+                <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="Nationality" apiEndpoint="api://qbo/objecttype/list?object=Contact.Nationality" optionValue="ObjectType" defaultValue="${this.jsonData.Root.ContactItem?.Nationality}"></qbo-select>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SpokenLanguage" class="${this.formLabelSmallClass}">Spoken Language</label>
+                <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="SpokenLanguage" apiEndpoint="api://qbo/objecttype/list?object=Contact.SpokenLanguage" optionValue="ObjectType" defaultValue="${this.jsonData.Root.ContactItem?.SpokenLanguage}"></qbo-select>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="BirthDate" class="${this.formLabelSmallClass}">Birth Date</label>
+                <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="BirthDate" value="${elementDate(this.jsonData.Root.ContactItem?.BirthDate)}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="DeathDate" class="${this.formLabelSmallClass}">Death Date</label>
+                <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="DeathDate" value="${elementDate(this.jsonData.Root.ContactItem?.DeathDate)}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="ValidStart" class="${this.formLabelSmallClass}">Valid Start</label>
+                <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="ValidStart" value="${elementDate(this.jsonData.Root.ContactItem?.ValidStart)}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="ValidEnd" class="${this.formLabelSmallClass}">Valid End</label>
+                <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="ValidEnd" value="${elementDate(this.jsonData.Root.ContactItem?.ValidEnd)}"/>
+            </div>
+            <div class="${this.colSixClass}">
+                <label for="VerifiedSource" class="${this.formLabelSmallClass}">Verified Source</label>
+                <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="VerifiedSource" value="${this.jsonData.Root.ContactItem?.VerifiedSource}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="VerifiedDate" class="${this.formLabelSmallClass}">Verified Date</label>
+                <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="VerifiedDate" value="${elementDate(this.jsonData.Root.ContactItem?.VerifiedDate)}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="VerifiedConfidence" class="${this.formLabelSmallClass}">Verified Confidence</label>
+                <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="VerifiedConfidence" value="${this.jsonData.Root.ContactItem?.VerifiedConfidence}"/>
+            </div>
+            <div class="${this.divSectionHeaderClass}">
+                <h5>SCRA</h5>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRAStatus" class="${this.formLabelSmallClass}">SCRA Status</label>
+                <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="SCRAStatus" apiEndpoint="api://qbo/objecttype/list?object=Contact.SCRAStatus" optionValue="ObjectType" defaultValue="${this.jsonData.Root.ContactItem?.SCRAStatus}"></qbo-select>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRAStatusAsOf" class="${this.formLabelSmallClass}">SCRA Status As Of</label>
+                <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAStatusAsOf" value="${elementDate(this.jsonData.Root.ContactItem?.SCRAStatusAsOf)}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRAStartDate" class="${this.formLabelSmallClass}">SCRA Start Date</label>
+                <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAStartDate" value="${elementDate(this.jsonData.Root.ContactItem?.SCRAStartDate)}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRADischargeDate" class="${this.formLabelSmallClass}">SCRA Discharge Date</label>
+                <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRADischargeDate" value="${elementDate(this.jsonData.Root.ContactItem?.SCRADischargeDate)}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRAVerified" class="${this.formLabelSmallClass}">SCRA Verified</label>
+                <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAVerified" value="${this.jsonData.Root.ContactItem?.SCRAVerified}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRAVerifiedDate" class="${this.formLabelSmallClass}">SCRA Verified Date</label>
+                <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAVerifiedDate" value="${elementDate(this.jsonData.Root.ContactItem?.SCRAVerifiedDate)}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRASource" class="${this.formLabelSmallClass}">SCRA Source</label>
+                <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRASource" value="${this.jsonData.Root.ContactItem?.SCRASource}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRAID" class="${this.formLabelSmallClass}">SCRA ID</label>
+                <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAID" value="${this.jsonData.Root.ContactItem?.SCRAID}"/>
+            </div>
+            <qbo-form-edit .data="${this.jsonData.Root.ContactItem}"></qbo-form-edit>
+        </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: Boolean }),
+    __metadata("design:type", Object)
+], QboContact.prototype, "disabled", 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, "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);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], QboContact.prototype, "jsonData", void 0);
+QboContact = __decorate([
+    customElement('qbo-contact')
+], QboContact);
+export { QboContact };