@quandis/qbo4.ui 4.0.1-CI-20240425-185108 → 4.0.1-CI-20240425-194927

package/package.json

@@ -3,7 +3,7 @@
   "author": "Quandis, Inc.",
   "license": "MIT",
   "type": "module",
-  "version": "4.0.1-CI-20240425-185108",
+  "version": "4.0.1-CI-20240425-194927",
   "workspaces": [
     "code"
   ],

package/src/qbo/qbo-contact.js

@@ -46,13 +46,7 @@ let QboContact = class QboContact extends LitElement {
             </div>
             <div class="${this.colSixClass}">
                 <label for="ContactTemplateID" class="${this.formLabelSmallClass}">Template</label>
-
-
-
-                <qbo-select disabled qbo-class="${this.formSelectSmallClass}" name="ContactTemplateID" apiEndpoint="/ui/contacttemplate/listwhere.json?appliesto=${this.jsonData?.ContactItem?.Object}" defaultValue="${this.jsonData?.ContactItem?.ContactTemplateID}"/>
-
-
-
+                <qbo-select qbo-disabled="true" qbo-class="${this.formSelectSmallClass}" name="ContactTemplateID" apiEndpoint="/ui/contacttemplate/listwhere.json?appliesto=${this.jsonData?.ContactItem?.Object}" defaultValue="${this.jsonData?.ContactItem?.ContactTemplateID}"></qbo-select>
             </div>
             <div class="${this.colSixClass}">
                 <label for="Status" class="${this.formLabelSmallClass}">Status</label>

package/src/qbo/qbo-contact.ts

@@ -73,13 +73,7 @@ export class QboContact extends LitElement {
             </div>
             <div class="${this.colSixClass}">
                 <label for="ContactTemplateID" class="${this.formLabelSmallClass}">Template</label>
-
-
-
-                <qbo-select disabled qbo-class="${this.formSelectSmallClass}" name="ContactTemplateID" apiEndpoint="/ui/contacttemplate/listwhere.json?appliesto=${this.jsonData?.ContactItem?.Object}" defaultValue="${this.jsonData?.ContactItem?.ContactTemplateID}"/>
-
-
-
+                <qbo-select qbo-disabled="true" qbo-class="${this.formSelectSmallClass}" name="ContactTemplateID" apiEndpoint="/ui/contacttemplate/listwhere.json?appliesto=${this.jsonData?.ContactItem?.Object}" defaultValue="${this.jsonData?.ContactItem?.ContactTemplateID}"></qbo-select>
             </div>
             <div class="${this.colSixClass}">
                 <label for="Status" class="${this.formLabelSmallClass}">Status</label>

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

@@ -10,7 +10,10 @@ export declare class QboSelect extends QboFetch {
     optionText: string | null;
     optionValue: string | null;
     defaultValue: null;
+    emptyOptionText: String | null;
+    emptyOptionValue: String | null;
     qboClass: null;
+    qboDisabled: boolean;
     options: Array<{
         [key: string]: string;
     }> | null;

package/src/qbo/qbo-select.js

@@ -24,7 +24,10 @@ let QboSelect = class QboSelect extends QboFetch {
         this.optionText = null;
         this.optionValue = null;
         this.defaultValue = null;
+        this.emptyOptionText = '--';
+        this.emptyOptionValue = '';
         this.qboClass = null;
+        this.qboDisabled = false;
         this.options = [];
         this.renderInHost = true;
     }
@@ -48,9 +51,10 @@ let QboSelect = class QboSelect extends QboFetch {
         this.optionValue ??= Object.keys(this.options[0])[0];
         this.optionText ??= Object.keys(this.options[0])[1] ?? this.optionValue;
         return html `
-                <select class=${this.qboClass}>
-                    ${this.options.map(option => html `<option value="${option[this.optionValue]}" ?selected="${option[this.optionValue] === this.defaultValue}">${option[this.optionText]}</option>`)}
-                </select>`;
+            <select ?disabled=${this.qboDisabled} class=${this.qboClass}>
+                <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
+                ${this.options.map(option => html `<option value="${option[this.optionValue]}" ?selected="${option[this.optionValue] === this.defaultValue}">${option[this.optionText]}</option>`)}
+            </select>`;
     }
 };
 __decorate([
@@ -70,9 +74,21 @@ __decorate([
     __metadata("design:type", Object)
 ], QboSelect.prototype, "defaultValue", void 0);
 __decorate([
-    property({ attribute: 'qbo-class' }),
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSelect.prototype, "emptyOptionText", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSelect.prototype, "emptyOptionValue", void 0);
+__decorate([
+    property({ type: String, attribute: 'qbo-class' }),
     __metadata("design:type", Object)
 ], QboSelect.prototype, "qboClass", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'qbo-disabled' }),
+    __metadata("design:type", Object)
+], QboSelect.prototype, "qboDisabled", void 0);
 __decorate([
     property({ type: Array }),
     __metadata("design:type", Object)

package/src/qbo/qbo-select.ts

@@ -24,9 +24,18 @@ export class QboSelect extends QboFetch
     @property({ type: String })
     defaultValue = null;
 
-    @property({ attribute: 'qbo-class' })
+    @property({ type: String })
+    emptyOptionText: String | null = '--';
+
+    @property({ type: String })
+    emptyOptionValue: String | null = '';
+
+    @property({ type: String, attribute: 'qbo-class' })
     qboClass = null;
 
+    @property({ type: Boolean, attribute: 'qbo-disabled' })
+    qboDisabled = false;
+
     @property({ type: Array })
     options: Array<{ [key: string]: string }> | null = [];
 
@@ -58,8 +67,9 @@ export class QboSelect extends QboFetch
         this.optionText ??= Object.keys(this.options[0])[1] ?? this.optionValue;
 
         return html`
-                <select class=${this.qboClass}>
-                    ${this.options.map(option => html`<option value="${option[this.optionValue!]}" ?selected="${option[this.optionValue!] === this.defaultValue}">${option[this.optionText!]}</option>`)}
-                </select>`;
+            <select ?disabled=${this.qboDisabled} class=${this.qboClass}>
+                <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
+                ${this.options.map(option => html`<option value="${option[this.optionValue!]}" ?selected="${option[this.optionValue!] === this.defaultValue}">${option[this.optionText!]}</option>`)}
+            </select>`;
     }
 }