@quandis/qbo4.ui 4.0.1-CI-20240514-221344 → 4.0.1-CI-20240515-215721

package/package.json

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

package/src/qbo/Program.d.ts

@@ -9,6 +9,7 @@ export * from './RestApiService.js';
 export * from './qbo-api.js';
 export * from './qbo-badge.js';
 export * from './qbo-contact.js';
+export * from './qbo-contact-name.js';
 export * from './qbo-datalist.js';
 export * from './qbo-docviewer.js';
 export * from './qbo-form-edit.js';

package/src/qbo/Program.js

@@ -10,6 +10,7 @@ export * from './RestApiService.js';
 export * from './qbo-api.js';
 export * from './qbo-badge.js';
 export * from './qbo-contact.js';
+export * from './qbo-contact-name.js';
 export * from './qbo-datalist.js';
 export * from './qbo-docviewer.js';
 export * from './qbo-form-edit.js';

package/src/qbo/Program.ts

@@ -12,6 +12,7 @@ export * from './RestApiService.js';
 export * from './qbo-api.js';
 export * from './qbo-badge.js';
 export * from './qbo-contact.js';
+export * from './qbo-contact-name.js';
 export * from './qbo-datalist.js'
 export * from './qbo-docviewer.js'
 export * from './qbo-form-edit.js';

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

@@ -0,0 +1,22 @@
+import { TemplateResult } from 'lit';
+import { QboFormElement } from './qbo-form-element.js';
+export declare class QboContactName extends QboFormElement {
+    buttonClass: String | null;
+    disabled: boolean;
+    elementClass: String | null;
+    elementStackedTopClass: String | null;
+    icon: String | null;
+    modalBodyDivClass: String | null;
+    modalContentDivClass: String | null;
+    modalDivClass: String | null;
+    modalDialogDivClass: String | null;
+    modalFooterDivClass: String | null;
+    modalHeaderDivClass: String | null;
+    modalHeaderText: String | null;
+    slotClass: String | null;
+    spanClass: String | null;
+    type: string | null;
+    renderInHost: boolean;
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): TemplateResult<1>;
+}

package/src/qbo/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 './qbo-form-element.js';
+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/qbo-contact-name.ts

@@ -0,0 +1,97 @@
+import { TemplateResult, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { QboFormElement } from './qbo-form-element.js';
+
+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/qbo-contact.js

@@ -45,7 +45,7 @@ let QboContact = class QboContact extends LitElement {
         return html `<slot>
             <div class="${this.colSixClass}">
                 <label for="${this.contactName}" class="${this.formLabelSmallClass}">${this.contactLabel}</label>
-                <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="${this.contactName}" value="${this.jsonData.Root.ContactItem?.Contact}"/>
+                <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>
@@ -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 .data="${this.jsonData.Root.ContactItem}" ssn="${this.jsonData.Root.ContactItem?.USSSN}" contactId="${this.contactId}"></qbo-ssn>
+                <qbo-ssn .data="${this.jsonData.Root.ContactItem}"></qbo-ssn>
             </div>
             <div class="${this.colThreeClass}">
                 <label for="TIN" class="${this.formLabelSmallClass}">TIN</label>

package/src/qbo/qbo-contact.ts

@@ -70,7 +70,7 @@ export class QboContact extends LitElement {
         return html`<slot>
             <div class="${this.colSixClass}">
                 <label for="${this.contactName}" class="${this.formLabelSmallClass}">${this.contactLabel}</label>
-                <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="${this.contactName}" value="${this.jsonData.Root.ContactItem?.Contact}"/>
+                <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>
@@ -128,7 +128,7 @@ export class QboContact extends LitElement {
             </div>
             <div class="${this.colThreeClass}">
                 <label for="USSSN" class="${this.formLabelSmallClass}">SSN</label>
-                <qbo-ssn .data="${this.jsonData.Root.ContactItem}" ssn="${this.jsonData.Root.ContactItem?.USSSN}" contactId="${this.contactId}"></qbo-ssn>
+                <qbo-ssn .data="${this.jsonData.Root.ContactItem}"></qbo-ssn>
             </div>
             <div class="${this.colThreeClass}">
                 <label for="TIN" class="${this.formLabelSmallClass}">TIN</label>

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

@@ -1,5 +1,6 @@
-import { LitElement, PropertyValues } from 'lit';
-export declare class QboPopover extends LitElement {
+import { PropertyValues } from 'lit';
+import { QboFormElement } from './qbo-form-element.js';
+export declare class QboPopover extends QboFormElement {
     contentAtt: string;
     contentStyle: string;
     containerAtt: string;

package/src/qbo/qbo-popover.js

@@ -7,10 +7,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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 { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { Popover } from 'bootstrap';
-let QboPopover = class QboPopover extends LitElement {
+import { QboFormElement } from './qbo-form-element.js';
+let QboPopover = class QboPopover extends QboFormElement {
     constructor() {
         super(...arguments);
         this.contentAtt = 'data-bs-content';

package/src/qbo/qbo-popover.ts

@@ -1,9 +1,10 @@
-import { html, LitElement, PropertyValues } from 'lit';
+import { html, PropertyValues } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { Popover } from 'bootstrap';
+import { QboFormElement } from './qbo-form-element.js';
 
 @customElement('qbo-popover')
-export class QboPopover extends LitElement {
+export class QboPopover extends QboFormElement {
 
     @property({ type: String })
     contentAtt = 'data-bs-content';

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

@@ -1,22 +1,26 @@
-import { LitElement } from 'lit';
-export declare class QboSSN extends LitElement {
+import { TemplateResult } from 'lit';
+import { QboFormElement } from './qbo-form-element.js';
+export declare class QboSSN extends QboFormElement {
     apiEndpoint: string;
-    contactId: String | null;
     disabled: boolean;
-    divClass: String | null;
-    formControlSmallClass: String | null;
+    editMode: boolean;
+    event: String | null;
     imageClassShow: String | null;
     imageClassHide: String | null;
-    name: String | null;
+    inputClass: String | null;
+    inputName: String | null;
     selectorImage: String | null;
     selectorInput: String | null;
+    selectorSpan: String | null;
     show: boolean;
+    slotClass: String | null;
     spanClass: String | null;
-    ssn: String | null;
+    titleMaskText: String | null;
+    titleShowText: String | null;
     type: string | null;
     url: String | null;
     renderInHost: boolean;
     createRenderRoot(): HTMLElement | DocumentFragment;
     toggleSSN(): Promise<void>;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
 }

package/src/qbo/qbo-ssn.js

@@ -7,26 +7,37 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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 { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { services } from '@quandis/qbo4.configuration';
 import { RestApiService } from './RestApiService.js';
-let QboSSN = class QboSSN extends LitElement {
+import { QboFormElement } from './qbo-form-element.js';
+const ssnMap = new Map();
+ssnMap.set('defaultLayout', (component) => {
+    return html `<div slot="content" class="${component.slotClass}">
+        <input type="text" ?disabled=${component.disabled} class="${component.inputClass}" name="${component.inputName}" value="${component.data?.['USSSN']}"/>
+        <span @click="${component.toggleSSN}" class="${component.spanClass}" title="${component.titleShowText}"><i class="${component.imageClassShow}"></i></span>
+    </div>`;
+});
+let QboSSN = class QboSSN extends QboFormElement {
     constructor() {
         super(...arguments);
         this.apiEndpoint = 'qbo';
-        this.contactId = null;
         this.disabled = true;
-        this.divClass = 'qbo-input-group';
-        this.formControlSmallClass = 'qbo-sm';
+        this.editMode = false;
+        this.event = 'click';
         this.imageClassShow = 'qbo-icon-eye';
         this.imageClassHide = 'qbo-icon-eye-slash';
-        this.name = 'USSSN';
+        this.inputClass = 'qbo-sm';
+        this.inputName = 'USSSN';
         this.selectorImage = 'i';
         this.selectorInput = 'input';
+        this.selectorSpan = 'span';
         this.show = false;
+        this.slotClass = 'qbo-input-group';
         this.spanClass = 'qbo-input-group-text qbo-pointer';
-        this.ssn = null;
+        this.titleMaskText = 'Mask';
+        this.titleShowText = 'Show';
         this.type = 'defaultLayout';
         this.url = 'contact/UnmaskSSN';
         this.renderInHost = true;
@@ -39,23 +50,38 @@ let QboSSN = class QboSSN extends LitElement {
         if (this.show) {
             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}` });
+            const json = await service.fetch(`${this.url}`, { ID: `${this.data?.['ContactID']}` });
             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(`${this.selectorImage}`).forEach(i => {
-                            i.className = `${this.imageClassHide}`;
-                        });
-                    }
+                if (input instanceof HTMLInputElement
+                    && 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)}`;
+                    if (this.editMode)
+                        input.disabled = false;
+                    this.renderRoot.querySelectorAll(`${this.selectorSpan}`).forEach(span => {
+                        span.setAttribute('title', `${this.titleMaskText}`);
+                    });
+                    this.renderRoot.querySelectorAll(`${this.selectorImage}`).forEach(i => {
+                        i.className = `${this.imageClassHide}`;
+                    });
+                }
+                else {
+                    this.show = !this.show;
                 }
             });
         }
         else {
             this.renderRoot.querySelectorAll(`${this.selectorInput}`).forEach(input => {
-                if (input instanceof HTMLInputElement)
-                    input.value = `${this.ssn}`;
+                if (input instanceof HTMLInputElement) {
+                    input.value = `${this.data?.['USSSN']}`;
+                    if (this.editMode)
+                        input.disabled = true;
+                }
+                this.renderRoot.querySelectorAll(`${this.selectorSpan}`).forEach(span => {
+                    span.setAttribute('title', `${this.titleShowText}`);
+                });
                 this.renderRoot.querySelectorAll(`${this.selectorImage}`).forEach(i => {
                     i.className = `${this.imageClassShow}`;
                 });
@@ -63,34 +89,25 @@ let QboSSN = class QboSSN extends LitElement {
         }
     }
     render() {
-        return html `<slot>
-            <div class="${this.divClass}">
-                <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="${this.name}" value="${this.ssn}"/>
-                <span @click="${this.toggleSSN}" class="${this.spanClass}"><i class="${this.imageClassShow}"></i></span>
-            </div>
-        </slot>`;
+        return html `<slot>${ssnMap.has(this.type) ? ssnMap.get(this.type)(this) : null}</slot>`;
     }
 };
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], QboSSN.prototype, "apiEndpoint", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboSSN.prototype, "contactId", void 0);
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
 ], QboSSN.prototype, "disabled", void 0);
 __decorate([
-    property({ type: String }),
+    property({ type: Boolean }),
     __metadata("design:type", Object)
-], QboSSN.prototype, "divClass", void 0);
+], QboSSN.prototype, "editMode", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
-], QboSSN.prototype, "formControlSmallClass", void 0);
+], QboSSN.prototype, "event", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
@@ -102,7 +119,11 @@ __decorate([
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
-], QboSSN.prototype, "name", void 0);
+], QboSSN.prototype, "inputClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "inputName", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
@@ -111,10 +132,18 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], QboSSN.prototype, "selectorInput", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "selectorSpan", 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, "slotClass", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
@@ -122,7 +151,11 @@ __decorate([
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
-], QboSSN.prototype, "ssn", void 0);
+], QboSSN.prototype, "titleMaskText", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "titleShowText", void 0);
 __decorate([
     property(),
     __metadata("design:type", Object)