@quandis/qbo4.ui 4.0.1-CI-20240507-231949 → 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-231949",
+  "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.js

@@ -48,7 +48,7 @@ formEditMap.set('updatedLayout', (component) => {
 let QboFormEdit = class QboFormEdit extends LitElement {
     constructor() {
         super(...arguments);
-        this.aDropdownClass = 'dropdown-item';
+        this.aDropdownClass = 'dropdown-item qbo-pointer';
         this.buttonPrimaryClass = 'qbo-primary';
         this.buttonPrimaryDropdownClass = 'qbo-primary-dropdown';
         this.buttonType = 'button';
@@ -75,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}">
@@ -91,13 +90,13 @@ let QboFormEdit = class QboFormEdit extends LitElement {
                     <button type="${this.buttonType}" class="${this.buttonPrimaryDropdownClass}" data-bs-toggle="${this.dropdownToggle}"></button>
                     <ul class="${this.ulDropdownClass}">
                         <li>
-                            <a class="${this.aDropdownClass}" style="cursor:pointer;" onclick="alert('Show History');">
+                            <a class="${this.aDropdownClass}" onclick="alert('Show History');">
                                 <i class="${this.historyIcon}"></i>
                                 <span>${this.historyText}</span>
                             </a>
                         </li>
                         <li>
-                            <a class="${this.aDropdownClass}" style="cursor:pointer;" onclick="alert('Show Help');">
+                            <a class="${this.aDropdownClass}" onclick="alert('Show Help');">
                                 <i class="${this.helpIcon}"></i>
                                 <span>${this.helpText}</span>
                             </a>

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

@@ -43,7 +43,7 @@ formEditMap.set('updatedLayout', (component: any) => {
 export class QboFormEdit extends LitElement {
 
     @property({ type: String })
-    aDropdownClass: String | null = 'dropdown-item';
+    aDropdownClass: String | null = 'dropdown-item qbo-pointer';
 
     @property({ type: String })
     buttonPrimaryClass: String | null = 'qbo-primary';
@@ -113,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>
@@ -129,13 +128,13 @@ export class QboFormEdit extends LitElement {
                     <button type="${this.buttonType}" class="${this.buttonPrimaryDropdownClass}" data-bs-toggle="${this.dropdownToggle}"></button>
                     <ul class="${this.ulDropdownClass}">
                         <li>
-                            <a class="${this.aDropdownClass}" style="cursor:pointer;" onclick="alert('Show History');">
+                            <a class="${this.aDropdownClass}" onclick="alert('Show History');">
                                 <i class="${this.historyIcon}"></i>
                                 <span>${this.historyText}</span>
                             </a>
                         </li>
                         <li>
-                            <a class="${this.aDropdownClass}" style="cursor:pointer;" onclick="alert('Show Help');">
+                            <a class="${this.aDropdownClass}" onclick="alert('Show Help');">
                                 <i class="${this.helpIcon}"></i>
                                 <span>${this.helpText}</span>
                             </a>

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>`;
     }