@quandis/qbo4.ui 4.0.1-CI-20240501-230003 → 4.0.1-CI-20240507-201707

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

@@ -9,25 +9,67 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { elementDateTime } from './Program.js';
+const formEditMap = new Map();
+formEditMap.set('defaultLayout', (component) => {
+    return html `<div slot="content">
+        <span>Created:</span>
+        <br/>
+        <span>${elementDateTime(component.CreatedDate)}</span>
+        <br/>
+        <span>${component.CreatedPerson}</span>
+        <br/>
+        <br/>
+        <span>Updated:</span>
+        <br/>
+        <span>${elementDateTime(component.UpdatedDate)}</span>
+        <br/>
+        <span>${component.UpdatedPerson}</span>
+    </div>`;
+});
+formEditMap.set('createdLayout', (component) => {
+    return html `<div slot="content">
+        <span>Created:</span>
+        <br/>
+        <span>${elementDateTime(component.CreatedDate)}</span>
+        <br/>
+        <span>${component.CreatedPerson}</span>
+    </div>`;
+});
+formEditMap.set('updatedLayout', (component) => {
+    return html `<div slot="content">
+        <span>Updated:</span>
+        <br/>
+        <span>${elementDateTime(component.UpdatedDate)}</span>
+        <br/>
+        <span>${component.UpdatedPerson}</span>
+    </div>`;
+});
 let QboFormEdit = class QboFormEdit extends LitElement {
     constructor() {
         super(...arguments);
         this.buttonPrimaryClass = 'qbo-primary';
-        this.createdDate = null;
-        this.createdPerson = null;
+        this.data = {};
         this.divButtonGroupClass = 'qbo-btn-group';
         this.divFormActionClass = 'qbo-form-actions';
         this.divSectionHeaderClass = 'qbo-header';
         this.editLabel = 'Edit';
+        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.updatedDate = null;
-        this.updatedPerson = null;
+        this.type = 'defaultLayout';
         this.renderInHost = true;
     }
     createRenderRoot() {
         return this.renderInHost ? this : super.createRenderRoot();
     }
     render() {
+        const data = this.closest('*[apiendpoint]');
+        if (this.type == null)
+            this.type = 'createdLayout';
+        const popover = formEditMap.has(this.type) ? formEditMap.get(this.type)(this.data) : null;
         return html `<slot>
             <div class="${this.divSectionHeaderClass}">
                 <hr />
@@ -53,10 +95,11 @@ let QboFormEdit = class QboFormEdit extends LitElement {
                         </li>
                     </ul>
                 </div>
-                <qbo-popover>
-                    <button type="button" class="btn btn-light float-end" data-bs-toggle="popover" data-bs-placement="left" data-bs-container="body" title="Last Updated" data-bs-html="true" data-bs-content="Created:<br/>${this.createdDate}<br/>${this.createdPerson}<br/><br/>Updated:<br/>${this.updatedDate}<br/>${this.updatedPerson}">
-                        <i class="bi-info"></i>
+                <qbo-popover class="${this.popoverClass}">
+                    <button type="button" class="${this.infoButtonClass}" title="${this.infoTitle}">
+                        <i class="${this.infoIconClass}"></i>
                     </button>
+                    ${popover}
                 </qbo-popover>
             </div>
         </slot>`;
@@ -67,13 +110,9 @@ __decorate([
     __metadata("design:type", Object)
 ], QboFormEdit.prototype, "buttonPrimaryClass", void 0);
 __decorate([
-    property({ type: Date }),
+    property({ type: Object, attribute: false }),
     __metadata("design:type", Object)
-], QboFormEdit.prototype, "createdDate", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboFormEdit.prototype, "createdPerson", void 0);
+], QboFormEdit.prototype, "data", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
@@ -93,15 +132,27 @@ __decorate([
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
-], QboFormEdit.prototype, "spanEditClass", void 0);
+], QboFormEdit.prototype, "infoButtonClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "infoIconClass", void 0);
 __decorate([
-    property({ type: Date }),
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "infoTitle", void 0);
+__decorate([
+    property({ type: String }),
     __metadata("design:type", Object)
-], QboFormEdit.prototype, "updatedDate", void 0);
+], QboFormEdit.prototype, "popoverClass", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
-], QboFormEdit.prototype, "updatedPerson", void 0);
+], QboFormEdit.prototype, "spanEditClass", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "type", void 0);
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)

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

@@ -1,5 +1,43 @@
-import { html, LitElement } from 'lit';
+import { html, LitElement, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { elementDateTime } from './Program.js';
+
+type TemplateFunction = (component: any) => TemplateResult;
+const formEditMap: Map<string, TemplateFunction> = new Map();
+formEditMap.set('defaultLayout', (component: any) => {
+    return html`<div slot="content">
+        <span>Created:</span>
+        <br/>
+        <span>${elementDateTime(component.CreatedDate)}</span>
+        <br/>
+        <span>${component.CreatedPerson}</span>
+        <br/>
+        <br/>
+        <span>Updated:</span>
+        <br/>
+        <span>${elementDateTime(component.UpdatedDate)}</span>
+        <br/>
+        <span>${component.UpdatedPerson}</span>
+    </div>`;
+});
+formEditMap.set('createdLayout', (component: any) => {
+    return html`<div slot="content">
+        <span>Created:</span>
+        <br/>
+        <span>${elementDateTime(component.CreatedDate)}</span>
+        <br/>
+        <span>${component.CreatedPerson}</span>
+    </div>`;
+});
+formEditMap.set('updatedLayout', (component: any) => {
+    return html`<div slot="content">
+        <span>Updated:</span>
+        <br/>
+        <span>${elementDateTime(component.UpdatedDate)}</span>
+        <br/>
+        <span>${component.UpdatedPerson}</span>
+    </div>`;
+});
 
 @customElement('qbo-form-edit')
 export class QboFormEdit extends LitElement {
@@ -7,11 +45,8 @@ export class QboFormEdit extends LitElement {
     @property({ type: String })
     buttonPrimaryClass: String | null = 'qbo-primary';
 
-    @property({ type: Date })
-    createdDate = null;
-
-    @property({ type: String })
-    createdPerson = null;
+    @property({ type: Object, attribute: false })
+    data: Object = { };
 
     @property({ type: String })
     divButtonGroupClass: String | null = 'qbo-btn-group';
@@ -26,13 +61,22 @@ export class QboFormEdit extends LitElement {
     editLabel: String | null = 'Edit';
 
     @property({ type: String })
-    spanEditClass: String | null = 'qbo-icon-edit';
+    infoButtonClass: String | null = 'qbo-btn-light';
+
+    @property({ type: String })
+    infoIconClass: String | null = 'qbo-icon-info';
 
-    @property({ type: Date })
-    updatedDate = null;
+    @property({ type: String })
+    infoTitle: String | null = 'Last Updated';
+
+    @property({ type: String })
+    popoverClass: String | null = 'qbo-float-end';
 
     @property({ type: String })
-    updatedPerson = null;
+    spanEditClass: String | null = 'qbo-icon-edit';
+
+    @property()
+    type: string | null = 'defaultLayout';
 
     @property({ type: Boolean })
     renderInHost = true;
@@ -42,6 +86,10 @@ export class QboFormEdit extends LitElement {
     }
 
     render() {
+        const data : any = this.closest('*[apiendpoint]');
+        if (this.type == null) this.type = 'createdLayout'
+        const popover = formEditMap.has(this.type) ? formEditMap.get(this.type)!(this.data) : null;
+
         return html`<slot>
             <div class="${this.divSectionHeaderClass}">
                 <hr />
@@ -67,10 +115,11 @@ export class QboFormEdit extends LitElement {
                         </li>
                     </ul>
                 </div>
-                <qbo-popover>
-                    <button type="button" class="btn btn-light float-end" data-bs-toggle="popover" data-bs-placement="left" data-bs-container="body" title="Last Updated" data-bs-html="true" data-bs-content="Created:<br/>${this.createdDate}<br/>${this.createdPerson}<br/><br/>Updated:<br/>${this.updatedDate}<br/>${this.updatedPerson}">
-                        <i class="bi-info"></i>
+                <qbo-popover class="${this.popoverClass}">
+                    <button type="button" class="${this.infoButtonClass}" title="${this.infoTitle}">
+                        <i class="${this.infoIconClass}"></i>
                     </button>
+                    ${popover}
                 </qbo-popover>
             </div>
         </slot>`;

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

@@ -1,8 +1,20 @@
 import { LitElement, PropertyValues } from 'lit';
 export declare class QboPopover extends LitElement {
+    contentAtt: string;
+    contentStyle: string;
+    containerAtt: string;
+    containerValue: string;
+    defaultContent: string;
+    htmlAtt: string;
+    htmlValue: string;
+    placementAtt: string;
+    placementValue: string;
     selector: string;
+    toggleAtt: string;
+    toggleValue: string;
     renderInHost: boolean;
     createRenderRoot(): HTMLElement | DocumentFragment;
-    updated(changedProperties: PropertyValues): void;
+    connectedCallback(): void;
+    firstUpdated(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/src/qbo/qbo-popover.js

@@ -13,24 +13,90 @@ import { Popover } from 'bootstrap';
 let QboPopover = class QboPopover extends LitElement {
     constructor() {
         super(...arguments);
-        this.selector = `[data-bs-toggle="popover"]`;
+        this.contentAtt = 'data-bs-content';
+        this.contentStyle = 'none';
+        this.containerAtt = 'data-bs-container';
+        this.containerValue = 'body';
+        this.defaultContent = 'No content provided';
+        this.htmlAtt = 'data-bs-html';
+        this.htmlValue = 'true';
+        this.placementAtt = 'data-bs-placement';
+        this.placementValue = 'left';
+        this.selector = '*[slot=content]';
+        this.toggleAtt = 'data-bs-toggle';
+        this.toggleValue = 'popover';
         this.renderInHost = true;
     }
     createRenderRoot() {
         return this.renderInHost ? this : super.createRenderRoot();
     }
-    updated(changedProperties) {
-        /* Enable Popover */
-        this.renderRoot.querySelectorAll(`${this.selector}`).forEach(function (t) {
-            new Popover(t);
-        });
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute(this.toggleAtt, this.toggleValue);
+        this.setAttribute(this.placementAtt, this.placementValue);
+        this.setAttribute(this.containerAtt, this.containerValue);
+        this.setAttribute(this.htmlAtt, this.htmlValue);
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        const content = this.querySelector(this.selector);
+        if (content instanceof HTMLElement)
+            content.style.display = this.contentStyle;
+        this.setAttribute(this.contentAtt, content?.innerHTML ?? this.defaultContent);
+        new Popover(this);
+    }
+    render() {
+        return html `<slot></slot>`;
     }
-    render() { return html `<slot></slot>`; }
 };
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "contentAtt", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "contentStyle", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "containerAtt", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "containerValue", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "defaultContent", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "htmlAtt", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "htmlValue", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "placementAtt", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "placementValue", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], QboPopover.prototype, "selector", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "toggleAtt", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "toggleValue", void 0);
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)

package/src/qbo/qbo-popover.ts

@@ -6,7 +6,40 @@ import { Popover } from 'bootstrap';
 export class QboPopover extends LitElement {
 
     @property({ type: String })
-    selector = `[data-bs-toggle="popover"]`;
+    contentAtt = 'data-bs-content';
+
+    @property({ type: String })
+    contentStyle = 'none';
+
+    @property({ type: String })
+    containerAtt = 'data-bs-container';
+
+    @property({ type: String })
+    containerValue = 'body';
+
+    @property({ type: String })
+    defaultContent = 'No content provided';
+
+    @property({ type: String })
+    htmlAtt = 'data-bs-html';
+
+    @property({ type: String })
+    htmlValue = 'true';
+
+    @property({ type: String })
+    placementAtt = 'data-bs-placement';
+
+    @property({ type: String })
+    placementValue = 'left';
+
+    @property({ type: String })
+    selector = '*[slot=content]';
+
+    @property({ type: String })
+    toggleAtt = 'data-bs-toggle';
+
+    @property({ type: String })
+    toggleValue = 'popover';
 
     @property({ type: Boolean })
     renderInHost = true;
@@ -15,12 +48,26 @@ export class QboPopover extends LitElement {
         return this.renderInHost ? this : super.createRenderRoot();
     }
 
-    updated(changedProperties: PropertyValues) {
-        /* Enable Popover */
-        this.renderRoot.querySelectorAll(`${this.selector}`).forEach(function (t) {
-            new Popover(t);
-        });
+    connectedCallback() {
+        super.connectedCallback();
+
+        this.setAttribute(this.toggleAtt, this.toggleValue);
+        this.setAttribute(this.placementAtt, this.placementValue);
+        this.setAttribute(this.containerAtt, this.containerValue);
+        this.setAttribute(this.htmlAtt, this.htmlValue);
     }
 
-    render() { return html`<slot></slot>`; }
+    firstUpdated(changedProperties: PropertyValues) {
+        super.firstUpdated(changedProperties);
+
+        const content = this.querySelector(this.selector);
+        if (content instanceof HTMLElement) content.style.display = this.contentStyle;
+        this.setAttribute(this.contentAtt, content?.innerHTML ?? this.defaultContent);
+
+        new Popover(this);
+    }
+
+    render() {
+        return html`<slot></slot>`;
+    }
 }

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

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+export declare class QboSSN extends LitElement {
+    apiEndpoint: string;
+    contactId: String | null;
+    disabled: boolean;
+    formControlSmallClass: String | null;
+    name: String | null;
+    show: boolean;
+    ssn: String | null;
+    url: String | null;
+    renderInHost: boolean;
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    toggleSSN(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/qbo/qbo-ssn.js

@@ -0,0 +1,106 @@
+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, LitElement } 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 {
+    constructor() {
+        super(...arguments);
+        this.apiEndpoint = 'qbo';
+        this.contactId = null;
+        this.disabled = true;
+        this.formControlSmallClass = 'qbo-sm';
+        this.name = 'USSSN';
+        this.show = false;
+        this.ssn = null;
+        this.url = 'contact/UnmaskSSN';
+        this.renderInHost = true;
+    }
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+    async toggleSSN() {
+        this.show = !this.show;
+        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}` });
+            this.renderRoot.querySelectorAll('input').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';
+                        });
+                    }
+                }
+            });
+        }
+        else {
+            this.renderRoot.querySelectorAll('input').forEach(input => {
+                if (input instanceof HTMLInputElement)
+                    input.value = `${this.ssn}`;
+                this.renderRoot.querySelectorAll('i').forEach(i => {
+                    i.className = 'bi bi-eye';
+                });
+            });
+        }
+    }
+    render() {
+        return html `<slot>
+            <div class="input-group">
+                <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>
+            </div>
+        </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 }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "formControlSmallClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "name", 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, "ssn", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "url", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "renderInHost", void 0);
+QboSSN = __decorate([
+    customElement('qbo-ssn')
+], QboSSN);
+export { QboSSN };

package/src/qbo/qbo-ssn.ts

@@ -0,0 +1,80 @@
+import { html, LitElement } 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';
+
+@customElement('qbo-ssn')
+export class QboSSN extends LitElement {
+
+    @property({ type: String })
+    apiEndpoint = 'qbo';
+
+    @property({ type: String })
+    contactId: String | null = null;
+
+    @property({ type: Boolean })
+    disabled = true;
+
+    @property({ type: String })
+    formControlSmallClass: String | null = 'qbo-sm';
+
+    @property({ type: String })
+    name: String | null = 'USSSN';
+
+    @property({ type: Boolean })
+    show = false;
+
+    @property({ type: String })
+    ssn: String | null = null;
+
+    @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.contactId}` });
+
+            this.renderRoot.querySelectorAll('input').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';
+                        });
+                    }
+                }
+            });
+        } else {
+            this.renderRoot.querySelectorAll('input').forEach(input => {
+                if (input instanceof HTMLInputElement) input.value = `${this.ssn}`;
+
+                this.renderRoot.querySelectorAll('i').forEach(i => {
+                    i.className = 'bi bi-eye';
+                });
+            });
+        }
+    }
+
+    render() {
+        return html`<slot>
+            <div class="input-group">
+                <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>
+            </div>
+        </slot>`;
+    }
+}