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

package/src/qbo/qbo-ssn.ts

@@ -1,26 +1,33 @@
-import { html, LitElement } from 'lit';
+import { html, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { IApiService } from './IApiService.js';
 import { services } from '@quandis/qbo4.configuration';
 import { RestApiService } from './RestApiService.js';
+import { QboFormElement } from './qbo-form-element.js';
+
+type TemplateFunction = (component: any) => TemplateResult;
+const ssnMap: Map<string, TemplateFunction> = new Map();
+ssnMap.set('defaultLayout', (component: QboSSN) => {
+    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>`;
+});
 
 @customElement('qbo-ssn')
-export class QboSSN extends LitElement {
+export class QboSSN extends QboFormElement {
 
     @property({ type: String })
     apiEndpoint = 'qbo';
 
-    @property({ type: String })
-    contactId: String | null = null;
-
     @property({ type: Boolean })
     disabled = true;
 
-    @property({ type: String })
-    divClass: String | null = 'qbo-input-group';
+    @property({ type: Boolean })
+    editMode = false;
 
     @property({ type: String })
-    formControlSmallClass: String | null = 'qbo-sm';
+    event: String | null = 'click';
 
     @property({ type: String })
     imageClassShow: String | null = 'qbo-icon-eye';
@@ -29,7 +36,10 @@ export class QboSSN extends LitElement {
     imageClassHide: String | null = 'qbo-icon-eye-slash';
 
     @property({ type: String })
-    name: String | null = 'USSSN';
+    inputClass: String | null = 'qbo-sm';
+
+    @property({ type: String })
+    inputName: String | null = 'USSSN';
 
     @property({ type: String })
     selectorImage: String | null = 'i';
@@ -37,14 +47,23 @@ export class QboSSN extends LitElement {
     @property({ type: String })
     selectorInput: String | null = 'input';
 
+    @property({ type: String })
+    selectorSpan: String | null = 'span';
+
     @property({ type: Boolean })
     show = false;
 
+    @property({ type: String })
+    slotClass: String | null = 'qbo-input-group';
+
     @property({ type: String })
     spanClass: String | null = 'qbo-input-group-text qbo-pointer';
 
     @property({ type: String })
-    ssn: String | null = null;
+    titleMaskText: String | null = 'Mask';
+
+    @property({ type: String })
+    titleShowText: String | null = 'Show';
 
     @property()
     type: string | null = 'defaultLayout';
@@ -65,23 +84,40 @@ export class QboSSN extends LitElement {
         if (this.show) {
             const service: IApiService = services.container.isRegistered(this.apiEndpoint)
                 ? services.container.resolve<IApiService>(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}`;
@@ -91,11 +127,6 @@ export 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>`;
     }
 }