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

package/src/qbo-ssn.ts

@@ -0,0 +1,132 @@
+import { html, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { IApiService } from '@quandis/qbo4.ui';
+import { services } from '@quandis/qbo4.configuration';
+import { RestApiService } from '@quandis/qbo4.ui';
+import { QboFormElement } from '@quandis/qbo4.ui';
+
+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 QboFormElement {
+
+    @property({ type: String })
+    apiEndpoint = 'qbo';
+
+    @property({ type: Boolean })
+    disabled = true;
+
+    @property({ type: Boolean })
+    editMode = false;
+
+    @property({ type: String })
+    event: String | null = 'click';
+
+    @property({ type: String })
+    imageClassShow: String | null = 'qbo-icon-eye';
+
+    @property({ type: String })
+    imageClassHide: String | null = 'qbo-icon-eye-slash';
+
+    @property({ type: String })
+    inputClass: String | null = 'qbo-sm';
+
+    @property({ type: String })
+    inputName: String | null = 'USSSN';
+
+    @property({ type: String })
+    selectorImage: String | null = 'i';
+
+    @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 })
+    titleMaskText: String | null = 'Mask';
+
+    @property({ type: String })
+    titleShowText: String | null = 'Show';
+
+    @property()
+    type: string | null = 'defaultLayout';
+
+    @property({ type: String })
+    url: String | null = 'contact/UnmaskSSN';
+
+    @property({ type: Boolean })
+    renderInHost = true;
+
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+
+    async toggleSSN() {
+        this.show = !this.show;
+
+        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.data?.['ContactID']}` });
+
+            this.renderRoot.querySelectorAll(`${this.selectorInput}`).forEach(input => {
+                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.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}`;
+                });
+            });
+        }
+    }
+
+    render() {
+        return html`<slot>${ssnMap.has(this.type!) ? ssnMap.get(this.type!)!(this) : null}</slot>`;
+    }
+}

package/src/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const bootstrap: import("lit").CSSResult;
+export declare const bootstrapicons: import("lit").CSSResult;
+export declare const qboui: import("lit").CSSResult;