@quandis/qbo4.ui 4.0.1-CI-20240507-201707 → 4.0.1-CI-20240514-221344

package/package.json

@@ -3,7 +3,7 @@
   "author": "Quandis, Inc.",
   "license": "MIT",
   "type": "module",
-  "version": "4.0.1-CI-20240507-201707",
+  "version": "4.0.1-CI-20240514-221344",
   "workspaces": [
     "code"
   ],

package/src/qbo/qbo-contact.js

@@ -103,7 +103,7 @@ let QboContact = class QboContact extends LitElement {
             </div>
             <div class="${this.colThreeClass}">
                 <label for="USSSN" class="${this.formLabelSmallClass}">SSN</label>
-                <qbo-ssn ssn="${this.jsonData.Root.ContactItem?.USSSN}" contactId="${this.contactId}"></qbo-ssn>
+                <qbo-ssn .data="${this.jsonData.Root.ContactItem}" ssn="${this.jsonData.Root.ContactItem?.USSSN}" contactId="${this.contactId}"></qbo-ssn>
             </div>
             <div class="${this.colThreeClass}">
                 <label for="TIN" class="${this.formLabelSmallClass}">TIN</label>

package/src/qbo/qbo-contact.ts

@@ -128,7 +128,7 @@ export class QboContact extends LitElement {
             </div>
             <div class="${this.colThreeClass}">
                 <label for="USSSN" class="${this.formLabelSmallClass}">SSN</label>
-                <qbo-ssn ssn="${this.jsonData.Root.ContactItem?.USSSN}" contactId="${this.contactId}"></qbo-ssn>
+                <qbo-ssn .data="${this.jsonData.Root.ContactItem}" ssn="${this.jsonData.Root.ContactItem?.USSSN}" contactId="${this.contactId}"></qbo-ssn>
             </div>
             <div class="${this.colThreeClass}">
                 <label for="TIN" class="${this.formLabelSmallClass}">TIN</label>

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

@@ -1,16 +1,25 @@
 import { LitElement, TemplateResult } from 'lit';
 export declare class QboFormEdit extends LitElement {
+    aDropdownClass: String | null;
     buttonPrimaryClass: String | null;
+    buttonPrimaryDropdownClass: String | null;
+    buttonType: String | null;
     data: Object;
     divButtonGroupClass: String | null;
     divFormActionClass: String | null;
     divSectionHeaderClass: String | null;
+    dropdownToggle: String | null;
     editLabel: String | null;
+    helpIcon: String | null;
+    helpText: String | null;
+    historyIcon: String | null;
+    historyText: String | null;
     infoButtonClass: String | null;
     infoIconClass: String | null;
     infoTitle: String | null;
     popoverClass: String | null;
     spanEditClass: String | null;
+    ulDropdownClass: String | null;
     type: string | null;
     renderInHost: boolean;
     createRenderRoot(): HTMLElement | DocumentFragment;

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

@@ -48,17 +48,26 @@ formEditMap.set('updatedLayout', (component) => {
 let QboFormEdit = class QboFormEdit extends LitElement {
     constructor() {
         super(...arguments);
+        this.aDropdownClass = 'dropdown-item qbo-pointer';
         this.buttonPrimaryClass = 'qbo-primary';
+        this.buttonPrimaryDropdownClass = 'qbo-primary-dropdown';
+        this.buttonType = 'button';
         this.data = {};
         this.divButtonGroupClass = 'qbo-btn-group';
         this.divFormActionClass = 'qbo-form-actions';
         this.divSectionHeaderClass = 'qbo-header';
+        this.dropdownToggle = 'dropdown';
         this.editLabel = 'Edit';
+        this.helpIcon = 'qbo-icon-question';
+        this.helpText = 'Help';
+        this.historyIcon = 'qbo-icon-clock-history';
+        this.historyText = 'History';
         this.infoButtonClass = 'qbo-btn-light';
         this.infoIconClass = 'qbo-icon-info';
         this.infoTitle = 'Last Updated';
         this.popoverClass = 'qbo-float-end';
         this.spanEditClass = 'qbo-icon-edit';
+        this.ulDropdownClass = 'dropdown-menu';
         this.type = 'defaultLayout';
         this.renderInHost = true;
     }
@@ -66,9 +75,8 @@ let QboFormEdit = class QboFormEdit extends LitElement {
         return this.renderInHost ? this : super.createRenderRoot();
     }
     render() {
-        const data = this.closest('*[apiendpoint]');
         if (this.type == null)
-            this.type = 'createdLayout';
+            this.type = 'defaultLayout';
         const popover = formEditMap.has(this.type) ? formEditMap.get(this.type)(this.data) : null;
         return html `<slot>
             <div class="${this.divSectionHeaderClass}">
@@ -76,27 +84,27 @@ let QboFormEdit = class QboFormEdit extends LitElement {
             </div>
             <div class="${this.divFormActionClass}">
                 <div class="${this.divButtonGroupClass}">
-                    <button type="button" class="${this.buttonPrimaryClass}">
+                    <button type="${this.buttonType}" class="${this.buttonPrimaryClass}">
                         <span class="${this.spanEditClass}"> ${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">
+                    <button type="${this.buttonType}" class="${this.buttonPrimaryDropdownClass}" data-bs-toggle="${this.dropdownToggle}"></button>
+                    <ul class="${this.ulDropdownClass}">
                         <li>
-                            <a class="dropdown-item" href="#">
-                                <i class="bi-clock-history"></i>
-                                <span>History</span>
+                            <a class="${this.aDropdownClass}" onclick="alert('Show History');">
+                                <i class="${this.historyIcon}"></i>
+                                <span>${this.historyText}</span>
                             </a>
                         </li>
                         <li>
-                            <a class="dropdown-item" href="#">
-                                <i class="bi-question"></i>
-                                <span>Help</span>
+                            <a class="${this.aDropdownClass}" onclick="alert('Show Help');">
+                                <i class="${this.helpIcon}"></i>
+                                <span>${this.helpText}</span>
                             </a>
                         </li>
                     </ul>
                 </div>
                 <qbo-popover class="${this.popoverClass}">
-                    <button type="button" class="${this.infoButtonClass}" title="${this.infoTitle}">
+                    <button type="${this.buttonType}" class="${this.infoButtonClass}" title="${this.infoTitle}">
                         <i class="${this.infoIconClass}"></i>
                     </button>
                     ${popover}
@@ -105,10 +113,22 @@ let QboFormEdit = class QboFormEdit extends LitElement {
         </slot>`;
     }
 };
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "aDropdownClass", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], QboFormEdit.prototype, "buttonPrimaryClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "buttonPrimaryDropdownClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "buttonType", void 0);
 __decorate([
     property({ type: Object, attribute: false }),
     __metadata("design:type", Object)
@@ -125,10 +145,30 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], QboFormEdit.prototype, "divSectionHeaderClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "dropdownToggle", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], QboFormEdit.prototype, "editLabel", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "helpIcon", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "helpText", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "historyIcon", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "historyText", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
@@ -149,6 +189,10 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], QboFormEdit.prototype, "spanEditClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "ulDropdownClass", void 0);
 __decorate([
     property(),
     __metadata("design:type", Object)

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

@@ -42,9 +42,18 @@ formEditMap.set('updatedLayout', (component: any) => {
 @customElement('qbo-form-edit')
 export class QboFormEdit extends LitElement {
 
+    @property({ type: String })
+    aDropdownClass: String | null = 'dropdown-item qbo-pointer';
+
     @property({ type: String })
     buttonPrimaryClass: String | null = 'qbo-primary';
 
+    @property({ type: String })
+    buttonPrimaryDropdownClass: String | null = 'qbo-primary-dropdown';
+
+    @property({ type: String })
+    buttonType: String | null = 'button';
+
     @property({ type: Object, attribute: false })
     data: Object = { };
 
@@ -57,9 +66,24 @@ export class QboFormEdit extends LitElement {
     @property({ type: String })
     divSectionHeaderClass: String | null = 'qbo-header';
 
+    @property({ type: String })
+    dropdownToggle: String | null = 'dropdown';
+
     @property({ type: String })
     editLabel: String | null = 'Edit';
 
+    @property({ type: String })
+    helpIcon: String | null = 'qbo-icon-question';
+
+    @property({ type: String })
+    helpText: String | null = 'Help';
+
+    @property({ type: String })
+    historyIcon: String | null = 'qbo-icon-clock-history';
+
+    @property({ type: String })
+    historyText: String | null = 'History';
+
     @property({ type: String })
     infoButtonClass: String | null = 'qbo-btn-light';
 
@@ -75,6 +99,9 @@ export class QboFormEdit extends LitElement {
     @property({ type: String })
     spanEditClass: String | null = 'qbo-icon-edit';
 
+    @property({ type: String })
+    ulDropdownClass: String | null = 'dropdown-menu';
+
     @property()
     type: string | null = 'defaultLayout';
 
@@ -86,8 +113,7 @@ export class QboFormEdit extends LitElement {
     }
 
     render() {
-        const data : any = this.closest('*[apiendpoint]');
-        if (this.type == null) this.type = 'createdLayout'
+        if (this.type == null) this.type = 'defaultLayout';
         const popover = formEditMap.has(this.type) ? formEditMap.get(this.type)!(this.data) : null;
 
         return html`<slot>
@@ -96,27 +122,27 @@ export class QboFormEdit extends LitElement {
             </div>
             <div class="${this.divFormActionClass}">
                 <div class="${this.divButtonGroupClass}">
-                    <button type="button" class="${this.buttonPrimaryClass}">
+                    <button type="${this.buttonType}" class="${this.buttonPrimaryClass}">
                         <span class="${this.spanEditClass}"> ${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">
+                    <button type="${this.buttonType}" class="${this.buttonPrimaryDropdownClass}" data-bs-toggle="${this.dropdownToggle}"></button>
+                    <ul class="${this.ulDropdownClass}">
                         <li>
-                            <a class="dropdown-item" href="#">
-                                <i class="bi-clock-history"></i>
-                                <span>History</span>
+                            <a class="${this.aDropdownClass}" onclick="alert('Show History');">
+                                <i class="${this.historyIcon}"></i>
+                                <span>${this.historyText}</span>
                             </a>
                         </li>
                         <li>
-                            <a class="dropdown-item" href="#">
-                                <i class="bi-question"></i>
-                                <span>Help</span>
+                            <a class="${this.aDropdownClass}" onclick="alert('Show Help');">
+                                <i class="${this.helpIcon}"></i>
+                                <span>${this.helpText}</span>
                             </a>
                         </li>
                     </ul>
                 </div>
                 <qbo-popover class="${this.popoverClass}">
-                    <button type="button" class="${this.infoButtonClass}" title="${this.infoTitle}">
+                    <button type="${this.buttonType}" class="${this.infoButtonClass}" title="${this.infoTitle}">
                         <i class="${this.infoIconClass}"></i>
                     </button>
                     ${popover}

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

@@ -3,10 +3,17 @@ export declare class QboSSN extends LitElement {
     apiEndpoint: string;
     contactId: String | null;
     disabled: boolean;
+    divClass: String | null;
     formControlSmallClass: String | null;
+    imageClassShow: String | null;
+    imageClassHide: String | null;
     name: String | null;
+    selectorImage: String | null;
+    selectorInput: String | null;
     show: boolean;
+    spanClass: String | null;
     ssn: String | null;
+    type: string | null;
     url: String | null;
     renderInHost: boolean;
     createRenderRoot(): HTMLElement | DocumentFragment;

package/src/qbo/qbo-ssn.js

@@ -17,10 +17,17 @@ let QboSSN = class QboSSN extends LitElement {
         this.apiEndpoint = 'qbo';
         this.contactId = null;
         this.disabled = true;
+        this.divClass = 'qbo-input-group';
         this.formControlSmallClass = 'qbo-sm';
+        this.imageClassShow = 'qbo-icon-eye';
+        this.imageClassHide = 'qbo-icon-eye-slash';
         this.name = 'USSSN';
+        this.selectorImage = 'i';
+        this.selectorInput = 'input';
         this.show = false;
+        this.spanClass = 'qbo-input-group-text qbo-pointer';
         this.ssn = null;
+        this.type = 'defaultLayout';
         this.url = 'contact/UnmaskSSN';
         this.renderInHost = true;
     }
@@ -33,33 +40,33 @@ let QboSSN = class QboSSN extends LitElement {
             const service = services.container.isRegistered(this.apiEndpoint)
                 ? services.container.resolve(this.apiEndpoint) : new RestApiService(this.apiEndpoint);
             const json = await service.fetch(`${this.url}`, { ID: `${this.contactId}` });
-            this.renderRoot.querySelectorAll('input').forEach(input => {
+            this.renderRoot.querySelectorAll(`${this.selectorInput}`).forEach(input => {
                 if (input instanceof HTMLInputElement) {
                     if (json?.ContactCollection?.length > 0 && json.ContactCollection[0].USSSN != null && json.ContactCollection[0].USSSN.length == 9) {
                         const ssn = json.ContactCollection[0].USSSN;
                         input.value = `${ssn.substring(0, 3)}-${ssn.substring(3, 5)}-${ssn.substring(5, 9)}`;
-                        this.renderRoot.querySelectorAll('i').forEach(i => {
-                            i.className = 'bi bi-eye-slash';
+                        this.renderRoot.querySelectorAll(`${this.selectorImage}`).forEach(i => {
+                            i.className = `${this.imageClassHide}`;
                         });
                     }
                 }
             });
         }
         else {
-            this.renderRoot.querySelectorAll('input').forEach(input => {
+            this.renderRoot.querySelectorAll(`${this.selectorInput}`).forEach(input => {
                 if (input instanceof HTMLInputElement)
                     input.value = `${this.ssn}`;
-                this.renderRoot.querySelectorAll('i').forEach(i => {
-                    i.className = 'bi bi-eye';
+                this.renderRoot.querySelectorAll(`${this.selectorImage}`).forEach(i => {
+                    i.className = `${this.imageClassShow}`;
                 });
             });
         }
     }
     render() {
         return html `<slot>
-            <div class="input-group">
+            <div class="${this.divClass}">
                 <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="${this.name}" value="${this.ssn}"/>
-                <span @click="${this.toggleSSN}" class="input-group-text" style="cursor:pointer;"><i class="bi bi-eye"></i></span>
+                <span @click="${this.toggleSSN}" class="${this.spanClass}"><i class="${this.imageClassShow}"></i></span>
             </div>
         </slot>`;
     }
@@ -76,22 +83,50 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
 ], QboSSN.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "divClass", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], QboSSN.prototype, "formControlSmallClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "imageClassShow", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "imageClassHide", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], QboSSN.prototype, "name", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "selectorImage", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "selectorInput", void 0);
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
 ], QboSSN.prototype, "show", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "spanClass", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], QboSSN.prototype, "ssn", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "type", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)

package/src/qbo/qbo-ssn.ts

@@ -16,18 +16,39 @@ export class QboSSN extends LitElement {
     @property({ type: Boolean })
     disabled = true;
 
+    @property({ type: String })
+    divClass: String | null = 'qbo-input-group';
+
     @property({ type: String })
     formControlSmallClass: String | null = 'qbo-sm';
 
+    @property({ type: String })
+    imageClassShow: String | null = 'qbo-icon-eye';
+
+    @property({ type: String })
+    imageClassHide: String | null = 'qbo-icon-eye-slash';
+
     @property({ type: String })
     name: String | null = 'USSSN';
 
+    @property({ type: String })
+    selectorImage: String | null = 'i';
+
+    @property({ type: String })
+    selectorInput: String | null = 'input';
+
     @property({ type: Boolean })
     show = false;
 
+    @property({ type: String })
+    spanClass: String | null = 'qbo-input-group-text qbo-pointer';
+
     @property({ type: String })
     ssn: String | null = null;
 
+    @property()
+    type: string | null = 'defaultLayout';
+
     @property({ type: String })
     url: String | null = 'contact/UnmaskSSN';
 
@@ -46,24 +67,24 @@ export class QboSSN extends LitElement {
                 ? services.container.resolve<IApiService>(this.apiEndpoint) : new RestApiService(this.apiEndpoint);
             const json = await service.fetch(`${this.url}`, { ID: `${this.contactId}` });
 
-            this.renderRoot.querySelectorAll('input').forEach(input => {
+            this.renderRoot.querySelectorAll(`${this.selectorInput}`).forEach(input => {
                 if (input instanceof HTMLInputElement) {
                     if (json?.ContactCollection?.length > 0 && json.ContactCollection[0].USSSN != null && json.ContactCollection[0].USSSN.length == 9) {
                         const ssn = json.ContactCollection[0].USSSN;
                         input.value = `${ssn.substring(0, 3)}-${ssn.substring(3, 5)}-${ssn.substring(5, 9)}`;
 
-                        this.renderRoot.querySelectorAll('i').forEach(i => {
-                            i.className = 'bi bi-eye-slash';
+                        this.renderRoot.querySelectorAll(`${this.selectorImage}`).forEach(i => {
+                            i.className = `${this.imageClassHide}`;
                         });
                     }
                 }
             });
         } else {
-            this.renderRoot.querySelectorAll('input').forEach(input => {
+            this.renderRoot.querySelectorAll(`${this.selectorInput}`).forEach(input => {
                 if (input instanceof HTMLInputElement) input.value = `${this.ssn}`;
 
-                this.renderRoot.querySelectorAll('i').forEach(i => {
-                    i.className = 'bi bi-eye';
+                this.renderRoot.querySelectorAll(`${this.selectorImage}`).forEach(i => {
+                    i.className = `${this.imageClassShow}`;
                 });
             });
         }
@@ -71,9 +92,9 @@ export class QboSSN extends LitElement {
 
     render() {
         return html`<slot>
-            <div class="input-group">
+            <div class="${this.divClass}">
                 <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="${this.name}" value="${this.ssn}"/>
-                <span @click="${this.toggleSSN}" class="input-group-text" style="cursor:pointer;"><i class="bi bi-eye"></i></span>
+                <span @click="${this.toggleSSN}" class="${this.spanClass}"><i class="${this.imageClassShow}"></i></span>
             </div>
         </slot>`;
     }