@quandis/qbo4.ui 4.0.1-CI-20240425-191430 → 4.0.1-CI-20240426-215901

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/package.json +1 -1
  2. package/src/qbo/qbo-contact.d.ts +2 -3
  3. package/src/qbo/qbo-contact.js +46 -64
  4. package/src/qbo/qbo-contact.ts +42 -62
  5. package/src/qbo/qbo-select.d.ts +2 -1
  6. package/src/qbo/qbo-select.js +12 -7
  7. package/src/qbo/qbo-select.ts +9 -6
  8. package/wwwroot/js/qbo4.ui.js +59 -72
  9. package/wwwroot/js/qbo4.ui.min.js +79 -99
  10. package/wwwroot/js/qbo4.ui.min.js.map +1 -1
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "author": "Quandis, Inc.",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
- "version": "4.0.1-CI-20240425-191430",
6
+ "version": "4.0.1-CI-20240426-215901",
7
7
  "workspaces": [
8
8
  "code"
9
9
  ],
package/src/qbo/qbo-contact.d.ts CHANGED
@@ -8,14 +8,13 @@ export declare class QboContact extends LitElement {
8
8
  contactId: String | null;
9
9
  contactLabel: String | null;
10
10
  contactName: String | null;
11
+ disabled: boolean;
11
12
  divSectionHeaderClass: String | null;
12
- emptyOptionText: String | null;
13
- emptyOptionValue: String | null;
14
13
  formControlSmallClass: String | null;
15
14
  formLabelSmallClass: String | null;
16
15
  formSelectSmallClass: String | null;
17
16
  renderInHost: boolean;
18
- jsonData: any;
17
+ jsonData: any | null;
19
18
  createRenderRoot(): HTMLElement | DocumentFragment;
20
19
  connectedCallback(): Promise<void>;
21
20
  render(): import("lit-html").TemplateResult<1>;
package/src/qbo/qbo-contact.js CHANGED
@@ -22,13 +22,13 @@ let QboContact = class QboContact extends LitElement {
22
22
  this.contactId = null;
23
23
  this.contactLabel = 'Contact';
24
24
  this.contactName = 'Contact';
25
+ this.disabled = true;
25
26
  this.divSectionHeaderClass = 'qbo-header';
26
- this.emptyOptionText = '--';
27
- this.emptyOptionValue = '';
28
27
  this.formControlSmallClass = 'qbo-sm';
29
28
  this.formLabelSmallClass = 'qbo-sm';
30
29
  this.formSelectSmallClass = 'qbo-sm';
31
30
  this.renderInHost = true;
31
+ this.jsonData = {};
32
32
  }
33
33
  createRenderRoot() {
34
34
  return this.renderInHost ? this : super.createRenderRoot();
@@ -36,174 +36,156 @@ let QboContact = class QboContact extends LitElement {
36
36
  async connectedCallback() {
37
37
  super.connectedCallback();
38
38
  const service = services.container.isRegistered(this.apiEndpoint) ? services.container.resolve(this.apiEndpoint) : new RestApiService(this.apiEndpoint);
39
- this.jsonData = await service.fetch('contact/summary', { ID: `${this.contactId}` });
39
+ this.jsonData = await service.fetch('contact/summary.json', { ID: `${this.contactId}` });
40
40
  }
41
41
  render() {
42
+ if (this.jsonData == undefined || (this.jsonData.ContactItem == undefined && this.contactId != null))
43
+ return html `<p>Loading...</p>`;
42
44
  return html `<slot>
43
45
  <div class="${this.colSixClass}">
44
46
  <label for="${this.contactName}" class="${this.formLabelSmallClass}">${this.contactLabel}</label>
45
- <input type="text" disabled class="${this.formControlSmallClass}" name="${this.contactName}" value="${this.jsonData?.ContactItem?.Contact}"/>
47
+ <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="${this.contactName}" value="${this.jsonData?.ContactItem?.Contact}"/>
46
48
  </div>
47
49
  <div class="${this.colSixClass}">
48
50
  <label for="ContactTemplateID" class="${this.formLabelSmallClass}">Template</label>
49
-
50
-
51
-
52
- <qbo-select disabled qbo-class="${this.formSelectSmallClass}" name="ContactTemplateID" apiEndpoint="/ui/contacttemplate/listwhere.json?appliesto=${this.jsonData?.ContactItem?.Object}" defaultValue="${this.jsonData?.ContactItem?.ContactTemplateID}"/>
53
-
54
-
55
-
51
+ <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="ContactTemplateID" apiEndpoint="/ui/contacttemplate/listwhere.json?appliesto=${this.jsonData?.ContactItem?.Object}" defaultValue="${this.jsonData?.ContactItem?.ContactTemplateID}"></qbo-select>
56
52
  </div>
57
53
  <div class="${this.colSixClass}">
58
54
  <label for="Status" class="${this.formLabelSmallClass}">Status</label>
59
- <select disabled class="${this.formSelectSmallClass}" name="Status">
60
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
61
- </select>
55
+ <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="Status" apiEndpoint="/ui/objectstatus/customlist.json?object=Contact&objectid=${this.jsonData?.ContactItem?.ContactTemplateID}" optionValue="ObjectStatus" defaultValue="${this.jsonData?.ContactItem?.Status}"></qbo-select>
62
56
  </div>
63
57
  <div class="${this.colSixClass}">
64
58
  <label for="ContactType" class="${this.formLabelSmallClass}">Type</label>
65
- <select disabled class="${this.formSelectSmallClass}" name="ContactType">
66
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
67
- </select>
59
+ <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="ContactType" apiEndpoint="/ui/objecttype/customlist.json?object=Contact&objectid=${this.jsonData?.ContactItem?.ContactTemplateID}" optionValue="ObjectType" defaultValue="${this.jsonData?.ContactItem?.ContactType}"></qbo-select>
68
60
  </div>
69
61
  <div class="${this.colFourClass}">
70
62
  <label for="Phone" class="${this.formLabelSmallClass}">Phone</label>
71
- <input type="tel" disabled class="${this.formControlSmallClass}" name="Phone"/>
63
+ <input type="tel" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Phone" value="${this.jsonData?.ContactItem?.Phone}"/>
72
64
  </div>
73
65
  <div class="${this.colFourClass}">
74
66
  <label for="Email" class="${this.formLabelSmallClass}">Email</label>
75
- <input type="email" disabled class="${this.formControlSmallClass}" name="Email"/>
67
+ <input type="email" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Email" value="${this.jsonData?.ContactItem?.Email}"/>
76
68
  </div>
77
69
  <div class="${this.colFourClass}">
78
70
  <label for="Title" class="${this.formLabelSmallClass}">Title</label>
79
- <select disabled class="${this.formSelectSmallClass}" name="Title">
80
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
81
- </select>
71
+ <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Title" value="${this.jsonData?.ContactItem?.Title}"/>
82
72
  </div>
83
73
  <div class="${this.divSectionHeaderClass}">
84
74
  <h5>Location</h5>
85
75
  </div>
86
76
  <div class="${this.colTwelveClass}">
87
77
  <label for="Company" class="${this.formLabelSmallClass}">Company</label>
88
- <input type="text" disabled class="${this.formControlSmallClass}" name="Company"/>
78
+ <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Company" value="${this.jsonData?.ContactItem?.Company}"/>
89
79
  </div>
90
80
  <div class="${this.colTwelveClass}">
91
81
  <label for="Address" class="${this.formLabelSmallClass}">Address</label>
92
- <textarea disabled class="${this.formControlSmallClass}" name="Address"></textarea>
82
+ <textarea ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Address">${this.jsonData?.ContactItem?.Address}</textarea>
93
83
  </div>
94
84
  <div class="${this.colSixClass}">
95
85
  <label for="City" class="${this.formLabelSmallClass}">City</label>
96
- <input type="text" disabled class="${this.formControlSmallClass}" name="City"/>
86
+ <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="City" value="${this.jsonData?.ContactItem?.City}"/>
97
87
  </div>
98
88
  <div class="${this.colThreeClass}">
99
89
  <label for="State" class="${this.formLabelSmallClass}">State</label>
100
- <select disabled class="${this.formSelectSmallClass}" name="State">
101
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
102
- </select>
90
+ <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="State" apiEndpoint="/ui/state/list" optionValue="State" defaultValue="${this.jsonData?.ContactItem?.State}"></qbo-select>
103
91
  </div>
104
92
  <div class="${this.colThreeClass}">
105
93
  <label for="PostalCode" class="${this.formLabelSmallClass}">Postal Code</label>
106
- <input type="text" disabled class="${this.formControlSmallClass}" name="PostalCode" pattern="\d{5}-?(\d{4})?"/>
94
+ <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="PostalCode" pattern="\d{5}-?(\d{4})?" value="${this.jsonData?.ContactItem?.PostalCode}"/>
107
95
  </div>
108
96
  <div class="${this.colSixClass}">
109
97
  <label for="Country" class="${this.formLabelSmallClass}">Country</label>
110
- <input type="text" disabled class="${this.formControlSmallClass}" name="Country"/>
98
+ <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Country" value="${this.jsonData?.ContactItem?.Country}"/>
111
99
  </div>
112
100
  <div class="${this.colThreeClass}">
113
101
  <label for="Latitude" class="${this.formLabelSmallClass}">Latitude</label>
114
- <input type="number" disabled class="${this.formControlSmallClass}" name="Latitude"/>
102
+ <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Latitude" value="${this.jsonData?.ContactItem?.Latitude}"/>
115
103
  </div>
116
104
  <div class="${this.colThreeClass}">
117
105
  <label for="Longitude" class="${this.formLabelSmallClass}">Longitude</label>
118
- <input type="number" disabled class="${this.formControlSmallClass}" name="Longitude"/>
106
+ <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Longitude" value="${this.jsonData?.ContactItem?.Longitude}"/>
119
107
  </div>
120
108
  <div class="${this.divSectionHeaderClass}">
121
109
  <h5>Identity</h5>
122
110
  </div>
123
111
  <div class="${this.colThreeClass}">
124
112
  <label for="USSSN" class="${this.formLabelSmallClass}">SSN</label>
125
- <input type="number" disabled class="${this.formControlSmallClass}" name="USSSN"/>
113
+ <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="USSSN" value="${this.jsonData?.ContactItem?.USSSN}"/>
126
114
  </div>
127
115
  <div class="${this.colThreeClass}">
128
116
  <label for="TIN" class="${this.formLabelSmallClass}">TIN</label>
129
- <input type="number" disabled class="${this.formControlSmallClass}" name="TIN"/>
117
+ <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="TIN" value="${this.jsonData?.ContactItem?.TIN}"/>
130
118
  </div>
131
119
  <div class="${this.colThreeClass}">
132
120
  <label for="Nationality" class="${this.formLabelSmallClass}">Nationality</label>
133
- <select disabled class="${this.formSelectSmallClass}" name="Nationality">
134
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
135
- </select>
121
+ <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="Nationality" apiEndpoint="/ui/objecttype/list.json?object=Contact.Nationality" optionValue="ObjectType" defaultValue="${this.jsonData?.ContactItem?.Nationality}"></qbo-select>
136
122
  </div>
137
123
  <div class="${this.colThreeClass}">
138
124
  <label for="SpokenLanguage" class="${this.formLabelSmallClass}">Spoken Language</label>
139
- <select disabled class="${this.formSelectSmallClass}" name="SpokenLanguage">
140
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
141
- </select>
125
+ <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="SpokenLanguage" apiEndpoint="/ui/objecttype/list.json?object=Contact.SpokenLanguage" optionValue="ObjectType" defaultValue="${this.jsonData?.ContactItem?.SpokenLanguage}"></qbo-select>
142
126
  </div>
143
127
  <div class="${this.colThreeClass}">
144
128
  <label for="BirthDate" class="${this.formLabelSmallClass}">Birth Date</label>
145
- <input type="date" disabled class="${this.formControlSmallClass}" name="BirthDate"/>
129
+ <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="BirthDate" value="${this.jsonData?.ContactItem?.BirthDate}"/>
146
130
  </div>
147
131
  <div class="${this.colThreeClass}">
148
132
  <label for="DeathDate" class="${this.formLabelSmallClass}">Death Date</label>
149
- <input type="date" disabled class="${this.formControlSmallClass}" name="DeathDate"/>
133
+ <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="DeathDate" value="${this.jsonData?.ContactItem?.DeathDate}"/>
150
134
  </div>
151
135
  <div class="${this.colThreeClass}">
152
136
  <label for="ValidStart" class="${this.formLabelSmallClass}">Valid Start</label>
153
- <input type="date" disabled class="${this.formControlSmallClass}" name="ValidStart"/>
137
+ <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="ValidStart" value="${this.jsonData?.ContactItem?.ValidStart}"/>
154
138
  </div>
155
139
  <div class="${this.colThreeClass}">
156
140
  <label for="ValidEnd" class="${this.formLabelSmallClass}">Valid End</label>
157
- <input type="date" disabled class="${this.formControlSmallClass}" name="ValidEnd"/>
141
+ <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="ValidEnd" value="${this.jsonData?.ContactItem?.ValidEnd}"/>
158
142
  </div>
159
143
  <div class="${this.colSixClass}">
160
144
  <label for="VerifiedSource" class="${this.formLabelSmallClass}">Verified Source</label>
161
- <input type="text" disabled class="${this.formControlSmallClass}" name="VerifiedSource"/>
145
+ <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="VerifiedSource" value="${this.jsonData?.ContactItem?.VerifiedSource}"/>
162
146
  </div>
163
147
  <div class="${this.colThreeClass}">
164
148
  <label for="VerifiedDate" class="${this.formLabelSmallClass}">Verified Date</label>
165
- <input type="date" disabled class="${this.formControlSmallClass}" name="VerifiedDate"/>
149
+ <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="VerifiedDate" value="${this.jsonData?.ContactItem?.VerifiedDate}"/>
166
150
  </div>
167
151
  <div class="${this.colThreeClass}">
168
152
  <label for="VerifiedConfidence" class="${this.formLabelSmallClass}">Verified Confidence</label>
169
- <input type="number" disabled class="${this.formControlSmallClass}" name="VerifiedConfidence"/>
153
+ <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="VerifiedConfidence" value="${this.jsonData?.ContactItem?.VerifiedConfidence}"/>
170
154
  </div>
171
155
  <div class="${this.divSectionHeaderClass}">
172
156
  <h5>SCRA</h5>
173
157
  </div>
174
158
  <div class="${this.colThreeClass}">
175
159
  <label for="SCRAStatus" class="${this.formLabelSmallClass}">SCRA Status</label>
176
- <select disabled class="${this.formSelectSmallClass}" name="SCRAStatus">
177
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
178
- </select>
160
+ <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="SCRAStatus" apiEndpoint="/ui/objecttype/list.json?object=Contact.SCRAStatus" optionValue="ObjectType" defaultValue="${this.jsonData?.ContactItem?.SCRAStatus}"></qbo-select>
179
161
  </div>
180
162
  <div class="${this.colThreeClass}">
181
163
  <label for="SCRAStatusAsOf" class="${this.formLabelSmallClass}">SCRA Status As Of</label>
182
- <input type="date" disabled class="${this.formControlSmallClass}" name="SCRAStatusAsOf"/>
164
+ <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAStatusAsOf" value="${this.jsonData?.ContactItem?.SCRAStatusAsOf}"/>
183
165
  </div>
184
166
  <div class="${this.colThreeClass}">
185
167
  <label for="SCRAStartDate" class="${this.formLabelSmallClass}">SCRA Start Date</label>
186
- <input type="date" disabled class="${this.formControlSmallClass}" name="SCRAStartDate"/>
168
+ <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAStartDate" value="${this.jsonData?.ContactItem?.SCRAStartDate}"/>
187
169
  </div>
188
170
  <div class="${this.colThreeClass}">
189
171
  <label for="SCRADischargeDate" class="${this.formLabelSmallClass}">SCRA Discharge Date</label>
190
- <input type="date" disabled class="${this.formControlSmallClass}" name="SCRADischargeDate"/>
172
+ <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRADischargeDate" value="${this.jsonData?.ContactItem?.SCRADischargeDate}"/>
191
173
  </div>
192
174
  <div class="${this.colThreeClass}">
193
175
  <label for="SCRAVerified" class="${this.formLabelSmallClass}">SCRA Verified</label>
194
- <input type="text" disabled class="${this.formControlSmallClass}" name="SCRAVerified"/>
176
+ <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAVerified" value="${this.jsonData?.ContactItem?.SCRAVerified}"/>
195
177
  </div>
196
178
  <div class="${this.colThreeClass}">
197
179
  <label for="SCRAVerifiedDate" class="${this.formLabelSmallClass}">SCRA Verified Date</label>
198
- <input type="date" disabled class="${this.formControlSmallClass}" name="SCRAVerifiedDate"/>
180
+ <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAVerifiedDate" value="${this.jsonData?.ContactItem?.SCRAVerifiedDate}"/>
199
181
  </div>
200
182
  <div class="${this.colThreeClass}">
201
183
  <label for="SCRASource" class="${this.formLabelSmallClass}">SCRA Source</label>
202
- <input type="text" disabled class="${this.formControlSmallClass}" name="SCRASource"/>
184
+ <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRASource" value="${this.jsonData?.ContactItem?.SCRASource}"/>
203
185
  </div>
204
186
  <div class="${this.colThreeClass}">
205
187
  <label for="SCRAID" class="${this.formLabelSmallClass}">SCRA ID</label>
206
- <input type="number" disabled class="${this.formControlSmallClass}" name="SCRAID"/>
188
+ <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAID" value="${this.jsonData?.ContactItem?.SCRAID}"/>
207
189
  </div>
208
190
  </slot>`;
209
191
  }
@@ -241,17 +223,13 @@ __decorate([
241
223
  __metadata("design:type", Object)
242
224
  ], QboContact.prototype, "contactName", void 0);
243
225
  __decorate([
244
- property({ type: String }),
245
- __metadata("design:type", Object)
246
- ], QboContact.prototype, "divSectionHeaderClass", void 0);
247
- __decorate([
248
- property({ type: String }),
226
+ property({ type: Boolean }),
249
227
  __metadata("design:type", Object)
250
- ], QboContact.prototype, "emptyOptionText", void 0);
228
+ ], QboContact.prototype, "disabled", void 0);
251
229
  __decorate([
252
230
  property({ type: String }),
253
231
  __metadata("design:type", Object)
254
- ], QboContact.prototype, "emptyOptionValue", void 0);
232
+ ], QboContact.prototype, "divSectionHeaderClass", void 0);
255
233
  __decorate([
256
234
  property({ type: String }),
257
235
  __metadata("design:type", Object)
@@ -268,6 +246,10 @@ __decorate([
268
246
  property({ type: Boolean }),
269
247
  __metadata("design:type", Object)
270
248
  ], QboContact.prototype, "renderInHost", void 0);
249
+ __decorate([
250
+ property({ type: Object }),
251
+ __metadata("design:type", Object)
252
+ ], QboContact.prototype, "jsonData", void 0);
271
253
  QboContact = __decorate([
272
254
  customElement('qbo-contact')
273
255
  ], QboContact);
package/src/qbo/qbo-contact.ts CHANGED
@@ -31,14 +31,11 @@ export class QboContact extends LitElement {
31
31
  @property({ type: String })
32
32
  contactName: String | null = 'Contact';
33
33
 
34
- @property({ type: String })
35
- divSectionHeaderClass: String | null = 'qbo-header';
36
-
37
- @property({ type: String })
38
- emptyOptionText: String | null = '--';
34
+ @property({ type: Boolean })
35
+ disabled = true;
39
36
 
40
37
  @property({ type: String })
41
- emptyOptionValue: String | null = '';
38
+ divSectionHeaderClass: String | null = 'qbo-header';
42
39
 
43
40
  @property({ type: String })
44
41
  formControlSmallClass: String | null = 'qbo-sm';
@@ -52,7 +49,8 @@ export class QboContact extends LitElement {
52
49
  @property({ type: Boolean })
53
50
  renderInHost = true;
54
51
 
55
- jsonData: any;
52
+ @property({ type: Object })
53
+ jsonData: any | null = {};
56
54
 
57
55
  createRenderRoot() {
58
56
  return this.renderInHost ? this : super.createRenderRoot();
@@ -62,175 +60,157 @@ export class QboContact extends LitElement {
62
60
  super.connectedCallback();
63
61
 
64
62
  const service: IApiService = services.container.isRegistered(this.apiEndpoint) ? services.container.resolve<IApiService>(this.apiEndpoint) : new RestApiService(this.apiEndpoint);
65
- this.jsonData = await service.fetch('contact/summary', { ID: `${this.contactId}` });
63
+ this.jsonData = await service.fetch('contact/summary.json', { ID: `${this.contactId}` });
66
64
  }
67
65
 
68
66
  render() {
67
+ if (this.jsonData == undefined || (this.jsonData.ContactItem == undefined && this.contactId != null)) return html`<p>Loading...</p>`;
68
+
69
69
  return html`<slot>
70
70
  <div class="${this.colSixClass}">
71
71
  <label for="${this.contactName}" class="${this.formLabelSmallClass}">${this.contactLabel}</label>
72
- <input type="text" disabled class="${this.formControlSmallClass}" name="${this.contactName}" value="${this.jsonData?.ContactItem?.Contact}"/>
72
+ <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="${this.contactName}" value="${this.jsonData?.ContactItem?.Contact}"/>
73
73
  </div>
74
74
  <div class="${this.colSixClass}">
75
75
  <label for="ContactTemplateID" class="${this.formLabelSmallClass}">Template</label>
76
-
77
-
78
-
79
- <qbo-select disabled qbo-class="${this.formSelectSmallClass}" name="ContactTemplateID" apiEndpoint="/ui/contacttemplate/listwhere.json?appliesto=${this.jsonData?.ContactItem?.Object}" defaultValue="${this.jsonData?.ContactItem?.ContactTemplateID}"/>
80
-
81
-
82
-
76
+ <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="ContactTemplateID" apiEndpoint="/ui/contacttemplate/listwhere.json?appliesto=${this.jsonData?.ContactItem?.Object}" defaultValue="${this.jsonData?.ContactItem?.ContactTemplateID}"></qbo-select>
83
77
  </div>
84
78
  <div class="${this.colSixClass}">
85
79
  <label for="Status" class="${this.formLabelSmallClass}">Status</label>
86
- <select disabled class="${this.formSelectSmallClass}" name="Status">
87
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
88
- </select>
80
+ <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="Status" apiEndpoint="/ui/objectstatus/customlist.json?object=Contact&objectid=${this.jsonData?.ContactItem?.ContactTemplateID}" optionValue="ObjectStatus" defaultValue="${this.jsonData?.ContactItem?.Status}"></qbo-select>
89
81
  </div>
90
82
  <div class="${this.colSixClass}">
91
83
  <label for="ContactType" class="${this.formLabelSmallClass}">Type</label>
92
- <select disabled class="${this.formSelectSmallClass}" name="ContactType">
93
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
94
- </select>
84
+ <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="ContactType" apiEndpoint="/ui/objecttype/customlist.json?object=Contact&objectid=${this.jsonData?.ContactItem?.ContactTemplateID}" optionValue="ObjectType" defaultValue="${this.jsonData?.ContactItem?.ContactType}"></qbo-select>
95
85
  </div>
96
86
  <div class="${this.colFourClass}">
97
87
  <label for="Phone" class="${this.formLabelSmallClass}">Phone</label>
98
- <input type="tel" disabled class="${this.formControlSmallClass}" name="Phone"/>
88
+ <input type="tel" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Phone" value="${this.jsonData?.ContactItem?.Phone}"/>
99
89
  </div>
100
90
  <div class="${this.colFourClass}">
101
91
  <label for="Email" class="${this.formLabelSmallClass}">Email</label>
102
- <input type="email" disabled class="${this.formControlSmallClass}" name="Email"/>
92
+ <input type="email" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Email" value="${this.jsonData?.ContactItem?.Email}"/>
103
93
  </div>
104
94
  <div class="${this.colFourClass}">
105
95
  <label for="Title" class="${this.formLabelSmallClass}">Title</label>
106
- <select disabled class="${this.formSelectSmallClass}" name="Title">
107
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
108
- </select>
96
+ <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Title" value="${this.jsonData?.ContactItem?.Title}"/>
109
97
  </div>
110
98
  <div class="${this.divSectionHeaderClass}">
111
99
  <h5>Location</h5>
112
100
  </div>
113
101
  <div class="${this.colTwelveClass}">
114
102
  <label for="Company" class="${this.formLabelSmallClass}">Company</label>
115
- <input type="text" disabled class="${this.formControlSmallClass}" name="Company"/>
103
+ <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Company" value="${this.jsonData?.ContactItem?.Company}"/>
116
104
  </div>
117
105
  <div class="${this.colTwelveClass}">
118
106
  <label for="Address" class="${this.formLabelSmallClass}">Address</label>
119
- <textarea disabled class="${this.formControlSmallClass}" name="Address"></textarea>
107
+ <textarea ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Address">${this.jsonData?.ContactItem?.Address}</textarea>
120
108
  </div>
121
109
  <div class="${this.colSixClass}">
122
110
  <label for="City" class="${this.formLabelSmallClass}">City</label>
123
- <input type="text" disabled class="${this.formControlSmallClass}" name="City"/>
111
+ <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="City" value="${this.jsonData?.ContactItem?.City}"/>
124
112
  </div>
125
113
  <div class="${this.colThreeClass}">
126
114
  <label for="State" class="${this.formLabelSmallClass}">State</label>
127
- <select disabled class="${this.formSelectSmallClass}" name="State">
128
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
129
- </select>
115
+ <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="State" apiEndpoint="/ui/state/list" optionValue="State" defaultValue="${this.jsonData?.ContactItem?.State}"></qbo-select>
130
116
  </div>
131
117
  <div class="${this.colThreeClass}">
132
118
  <label for="PostalCode" class="${this.formLabelSmallClass}">Postal Code</label>
133
- <input type="text" disabled class="${this.formControlSmallClass}" name="PostalCode" pattern="\d{5}-?(\d{4})?"/>
119
+ <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="PostalCode" pattern="\d{5}-?(\d{4})?" value="${this.jsonData?.ContactItem?.PostalCode}"/>
134
120
  </div>
135
121
  <div class="${this.colSixClass}">
136
122
  <label for="Country" class="${this.formLabelSmallClass}">Country</label>
137
- <input type="text" disabled class="${this.formControlSmallClass}" name="Country"/>
123
+ <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Country" value="${this.jsonData?.ContactItem?.Country}"/>
138
124
  </div>
139
125
  <div class="${this.colThreeClass}">
140
126
  <label for="Latitude" class="${this.formLabelSmallClass}">Latitude</label>
141
- <input type="number" disabled class="${this.formControlSmallClass}" name="Latitude"/>
127
+ <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Latitude" value="${this.jsonData?.ContactItem?.Latitude}"/>
142
128
  </div>
143
129
  <div class="${this.colThreeClass}">
144
130
  <label for="Longitude" class="${this.formLabelSmallClass}">Longitude</label>
145
- <input type="number" disabled class="${this.formControlSmallClass}" name="Longitude"/>
131
+ <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Longitude" value="${this.jsonData?.ContactItem?.Longitude}"/>
146
132
  </div>
147
133
  <div class="${this.divSectionHeaderClass}">
148
134
  <h5>Identity</h5>
149
135
  </div>
150
136
  <div class="${this.colThreeClass}">
151
137
  <label for="USSSN" class="${this.formLabelSmallClass}">SSN</label>
152
- <input type="number" disabled class="${this.formControlSmallClass}" name="USSSN"/>
138
+ <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="USSSN" value="${this.jsonData?.ContactItem?.USSSN}"/>
153
139
  </div>
154
140
  <div class="${this.colThreeClass}">
155
141
  <label for="TIN" class="${this.formLabelSmallClass}">TIN</label>
156
- <input type="number" disabled class="${this.formControlSmallClass}" name="TIN"/>
142
+ <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="TIN" value="${this.jsonData?.ContactItem?.TIN}"/>
157
143
  </div>
158
144
  <div class="${this.colThreeClass}">
159
145
  <label for="Nationality" class="${this.formLabelSmallClass}">Nationality</label>
160
- <select disabled class="${this.formSelectSmallClass}" name="Nationality">
161
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
162
- </select>
146
+ <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="Nationality" apiEndpoint="/ui/objecttype/list.json?object=Contact.Nationality" optionValue="ObjectType" defaultValue="${this.jsonData?.ContactItem?.Nationality}"></qbo-select>
163
147
  </div>
164
148
  <div class="${this.colThreeClass}">
165
149
  <label for="SpokenLanguage" class="${this.formLabelSmallClass}">Spoken Language</label>
166
- <select disabled class="${this.formSelectSmallClass}" name="SpokenLanguage">
167
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
168
- </select>
150
+ <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="SpokenLanguage" apiEndpoint="/ui/objecttype/list.json?object=Contact.SpokenLanguage" optionValue="ObjectType" defaultValue="${this.jsonData?.ContactItem?.SpokenLanguage}"></qbo-select>
169
151
  </div>
170
152
  <div class="${this.colThreeClass}">
171
153
  <label for="BirthDate" class="${this.formLabelSmallClass}">Birth Date</label>
172
- <input type="date" disabled class="${this.formControlSmallClass}" name="BirthDate"/>
154
+ <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="BirthDate" value="${this.jsonData?.ContactItem?.BirthDate}"/>
173
155
  </div>
174
156
  <div class="${this.colThreeClass}">
175
157
  <label for="DeathDate" class="${this.formLabelSmallClass}">Death Date</label>
176
- <input type="date" disabled class="${this.formControlSmallClass}" name="DeathDate"/>
158
+ <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="DeathDate" value="${this.jsonData?.ContactItem?.DeathDate}"/>
177
159
  </div>
178
160
  <div class="${this.colThreeClass}">
179
161
  <label for="ValidStart" class="${this.formLabelSmallClass}">Valid Start</label>
180
- <input type="date" disabled class="${this.formControlSmallClass}" name="ValidStart"/>
162
+ <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="ValidStart" value="${this.jsonData?.ContactItem?.ValidStart}"/>
181
163
  </div>
182
164
  <div class="${this.colThreeClass}">
183
165
  <label for="ValidEnd" class="${this.formLabelSmallClass}">Valid End</label>
184
- <input type="date" disabled class="${this.formControlSmallClass}" name="ValidEnd"/>
166
+ <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="ValidEnd" value="${this.jsonData?.ContactItem?.ValidEnd}"/>
185
167
  </div>
186
168
  <div class="${this.colSixClass}">
187
169
  <label for="VerifiedSource" class="${this.formLabelSmallClass}">Verified Source</label>
188
- <input type="text" disabled class="${this.formControlSmallClass}" name="VerifiedSource"/>
170
+ <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="VerifiedSource" value="${this.jsonData?.ContactItem?.VerifiedSource}"/>
189
171
  </div>
190
172
  <div class="${this.colThreeClass}">
191
173
  <label for="VerifiedDate" class="${this.formLabelSmallClass}">Verified Date</label>
192
- <input type="date" disabled class="${this.formControlSmallClass}" name="VerifiedDate"/>
174
+ <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="VerifiedDate" value="${this.jsonData?.ContactItem?.VerifiedDate}"/>
193
175
  </div>
194
176
  <div class="${this.colThreeClass}">
195
177
  <label for="VerifiedConfidence" class="${this.formLabelSmallClass}">Verified Confidence</label>
196
- <input type="number" disabled class="${this.formControlSmallClass}" name="VerifiedConfidence"/>
178
+ <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="VerifiedConfidence" value="${this.jsonData?.ContactItem?.VerifiedConfidence}"/>
197
179
  </div>
198
180
  <div class="${this.divSectionHeaderClass}">
199
181
  <h5>SCRA</h5>
200
182
  </div>
201
183
  <div class="${this.colThreeClass}">
202
184
  <label for="SCRAStatus" class="${this.formLabelSmallClass}">SCRA Status</label>
203
- <select disabled class="${this.formSelectSmallClass}" name="SCRAStatus">
204
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
205
- </select>
185
+ <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="SCRAStatus" apiEndpoint="/ui/objecttype/list.json?object=Contact.SCRAStatus" optionValue="ObjectType" defaultValue="${this.jsonData?.ContactItem?.SCRAStatus}"></qbo-select>
206
186
  </div>
207
187
  <div class="${this.colThreeClass}">
208
188
  <label for="SCRAStatusAsOf" class="${this.formLabelSmallClass}">SCRA Status As Of</label>
209
- <input type="date" disabled class="${this.formControlSmallClass}" name="SCRAStatusAsOf"/>
189
+ <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAStatusAsOf" value="${this.jsonData?.ContactItem?.SCRAStatusAsOf}"/>
210
190
  </div>
211
191
  <div class="${this.colThreeClass}">
212
192
  <label for="SCRAStartDate" class="${this.formLabelSmallClass}">SCRA Start Date</label>
213
- <input type="date" disabled class="${this.formControlSmallClass}" name="SCRAStartDate"/>
193
+ <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAStartDate" value="${this.jsonData?.ContactItem?.SCRAStartDate}"/>
214
194
  </div>
215
195
  <div class="${this.colThreeClass}">
216
196
  <label for="SCRADischargeDate" class="${this.formLabelSmallClass}">SCRA Discharge Date</label>
217
- <input type="date" disabled class="${this.formControlSmallClass}" name="SCRADischargeDate"/>
197
+ <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRADischargeDate" value="${this.jsonData?.ContactItem?.SCRADischargeDate}"/>
218
198
  </div>
219
199
  <div class="${this.colThreeClass}">
220
200
  <label for="SCRAVerified" class="${this.formLabelSmallClass}">SCRA Verified</label>
221
- <input type="text" disabled class="${this.formControlSmallClass}" name="SCRAVerified"/>
201
+ <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAVerified" value="${this.jsonData?.ContactItem?.SCRAVerified}"/>
222
202
  </div>
223
203
  <div class="${this.colThreeClass}">
224
204
  <label for="SCRAVerifiedDate" class="${this.formLabelSmallClass}">SCRA Verified Date</label>
225
- <input type="date" disabled class="${this.formControlSmallClass}" name="SCRAVerifiedDate"/>
205
+ <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAVerifiedDate" value="${this.jsonData?.ContactItem?.SCRAVerifiedDate}"/>
226
206
  </div>
227
207
  <div class="${this.colThreeClass}">
228
208
  <label for="SCRASource" class="${this.formLabelSmallClass}">SCRA Source</label>
229
- <input type="text" disabled class="${this.formControlSmallClass}" name="SCRASource"/>
209
+ <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRASource" value="${this.jsonData?.ContactItem?.SCRASource}"/>
230
210
  </div>
231
211
  <div class="${this.colThreeClass}">
232
212
  <label for="SCRAID" class="${this.formLabelSmallClass}">SCRA ID</label>
233
- <input type="number" disabled class="${this.formControlSmallClass}" name="SCRAID"/>
213
+ <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAID" value="${this.jsonData?.ContactItem?.SCRAID}"/>
234
214
  </div>
235
215
  </slot>`;
236
216
  }
package/src/qbo/qbo-select.d.ts CHANGED
@@ -10,7 +10,8 @@ export declare class QboSelect extends QboFetch {
10
10
  optionText: string | null;
11
11
  optionValue: string | null;
12
12
  defaultValue: null;
13
- qboClass: null;
13
+ emptyOptionText: String | null;
14
+ emptyOptionValue: String | null;
14
15
  options: Array<{
15
16
  [key: string]: string;
16
17
  }> | null;
package/src/qbo/qbo-select.js CHANGED
@@ -24,7 +24,8 @@ let QboSelect = class QboSelect extends QboFetch {
24
24
  this.optionText = null;
25
25
  this.optionValue = null;
26
26
  this.defaultValue = null;
27
- this.qboClass = null;
27
+ this.emptyOptionText = '--';
28
+ this.emptyOptionValue = '';
28
29
  this.options = [];
29
30
  this.renderInHost = true;
30
31
  }
@@ -47,10 +48,10 @@ let QboSelect = class QboSelect extends QboFetch {
47
48
  return html `<p>Loading...</p>`;
48
49
  this.optionValue ??= Object.keys(this.options[0])[0];
49
50
  this.optionText ??= Object.keys(this.options[0])[1] ?? this.optionValue;
50
- return html `
51
- <select class=${this.qboClass}>
52
- ${this.options.map(option => html `<option value="${option[this.optionValue]}" ?selected="${option[this.optionValue] === this.defaultValue}">${option[this.optionText]}</option>`)}
53
- </select>`;
51
+ return html `<select ?disabled=${this.hasAttribute('disabled')} class=${this.getAttribute('class')}>
52
+ <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
53
+ ${this.options.map(option => html `<option value="${option[this.optionValue]}" ?selected="${option[this.optionValue] == this.defaultValue}">${option[this.optionText]}</option>`)}
54
+ </select>`;
54
55
  }
55
56
  };
56
57
  __decorate([
@@ -70,9 +71,13 @@ __decorate([
70
71
  __metadata("design:type", Object)
71
72
  ], QboSelect.prototype, "defaultValue", void 0);
72
73
  __decorate([
73
- property({ attribute: 'qbo-class' }),
74
+ property({ type: String }),
75
+ __metadata("design:type", Object)
76
+ ], QboSelect.prototype, "emptyOptionText", void 0);
77
+ __decorate([
78
+ property({ type: String }),
74
79
  __metadata("design:type", Object)
75
- ], QboSelect.prototype, "qboClass", void 0);
80
+ ], QboSelect.prototype, "emptyOptionValue", void 0);
76
81
  __decorate([
77
82
  property({ type: Array }),
78
83
  __metadata("design:type", Object)