@quandis/qbo4.ui 4.0.1-CI-20240429-172951 → 4.0.1-CI-20240429-215003

package/package.json

@@ -3,7 +3,7 @@
   "author": "Quandis, Inc.",
   "license": "MIT",
   "type": "module",
-  "version": "4.0.1-CI-20240429-172951",
+  "version": "4.0.1-CI-20240429-215003",
   "workspaces": [
     "code"
   ],

package/src/qbo/Program.d.ts

@@ -11,6 +11,7 @@ export * from './qbo-badge.js';
 export * from './qbo-contact.js';
 export * from './qbo-datalist.js';
 export * from './qbo-docviewer.js';
+export * from './qbo-form-edit.js';
 export * from './qbo-form-element.js';
 export * from './qbo-json.js';
 export * from './qbo-mainmenu.js';

package/src/qbo/Program.js

@@ -12,6 +12,7 @@ export * from './qbo-badge.js';
 export * from './qbo-contact.js';
 export * from './qbo-datalist.js';
 export * from './qbo-docviewer.js';
+export * from './qbo-form-edit.js';
 export * from './qbo-form-element.js';
 export * from './qbo-json.js';
 export * from './qbo-mainmenu.js';

package/src/qbo/Program.ts

@@ -14,6 +14,7 @@ export * from './qbo-badge.js';
 export * from './qbo-contact.js';
 export * from './qbo-datalist.js'
 export * from './qbo-docviewer.js'
+export * from './qbo-form-edit.js';
 export * from './qbo-form-element.js';
 export * from './qbo-json.js';
 export * from './qbo-mainmenu.js';

package/src/qbo/qbo-contact.js

@@ -187,6 +187,7 @@ let QboContact = class QboContact extends LitElement {
                 <label for="SCRAID" class="${this.formLabelSmallClass}">SCRA ID</label>
                 <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAID" value="${this.jsonData?.ContactItem?.SCRAID}"/>
             </div>
+            <qbo-form-edit createdDate="${this.jsonData?.ContactItem?.CreatedDate}" createdPerson="${this.jsonData?.ContactItem?.CreatedPerson}" updatedDate="${this.jsonData?.ContactItem?.UpdatedDate}" updatedPerson="${this.jsonData?.ContactItem?.UpdatedPerson}"></qbo-select>
         </slot>`;
     }
 };

package/src/qbo/qbo-contact.ts

@@ -212,6 +212,7 @@ export class QboContact extends LitElement {
                 <label for="SCRAID" class="${this.formLabelSmallClass}">SCRA ID</label>
                 <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAID" value="${this.jsonData?.ContactItem?.SCRAID}"/>
             </div>
+            <qbo-form-edit createdDate="${this.jsonData?.ContactItem?.CreatedDate}" createdPerson="${this.jsonData?.ContactItem?.CreatedPerson}" updatedDate="${this.jsonData?.ContactItem?.UpdatedDate}" updatedPerson="${this.jsonData?.ContactItem?.UpdatedPerson}"></qbo-select>
         </slot>`;
     }
 }

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

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+export declare class QboFormEdit extends LitElement {
+    createdDate: null;
+    createdPerson: null;
+    updatedDate: null;
+    updatedPerson: null;
+    renderInHost: boolean;
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,82 @@
+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';
+let QboFormEdit = class QboFormEdit extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.createdDate = null;
+        this.createdPerson = null;
+        this.updatedDate = null;
+        this.updatedPerson = null;
+        this.renderInHost = true;
+    }
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+    render() {
+        return html `<slot>
+            <div class="col-md-12 mt-3">
+                <hr />
+            </div>
+            <div class="col-md-12 mt-2">
+                <div class="btn-group">
+                    <button type="button" class="btn btn-primary">
+                        <span class="bi-pencil-square"> Edit</span>
+                    </button>
+                    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
+                    <ul class="dropdown-menu">
+                        <li>
+                            <a class="dropdown-item" href="#">
+                                <i class="bi-clock-history"></i>
+                                <span>History</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="#">
+                                <i class="bi-question"></i>
+                                <span>Help</span>
+                            </a>
+                        </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>
+                    </button>
+                </qbo-popover>
+            </div>
+        </slot>`;
+    }
+};
+__decorate([
+    property({ type: Date }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "createdDate", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "createdPerson", void 0);
+__decorate([
+    property({ type: Date }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "updatedDate", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "updatedPerson", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "renderInHost", void 0);
+QboFormEdit = __decorate([
+    customElement('qbo-form-edit')
+], QboFormEdit);
+export { QboFormEdit };

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

@@ -0,0 +1,60 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('qbo-form-edit')
+export class QboFormEdit extends LitElement {
+
+    @property({ type: Date })
+    createdDate = null;
+
+    @property({ type: String })
+    createdPerson = null;
+
+    @property({ type: Date })
+    updatedDate = null;
+
+    @property({ type: String })
+    updatedPerson = null;
+
+    @property({ type: Boolean })
+    renderInHost = true;
+
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+
+    render() {
+        return html`<slot>
+            <div class="col-md-12 mt-3">
+                <hr />
+            </div>
+            <div class="col-md-12 mt-2">
+                <div class="btn-group">
+                    <button type="button" class="btn btn-primary">
+                        <span class="bi-pencil-square"> Edit</span>
+                    </button>
+                    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
+                    <ul class="dropdown-menu">
+                        <li>
+                            <a class="dropdown-item" href="#">
+                                <i class="bi-clock-history"></i>
+                                <span>History</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="#">
+                                <i class="bi-question"></i>
+                                <span>Help</span>
+                            </a>
+                        </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>
+                    </button>
+                </qbo-popover>
+            </div>
+        </slot>`;
+    }
+}