@quandis/qbo4.ui 4.0.1-CI-20240425-194927 → 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 -58
  4. package/src/qbo/qbo-contact.ts +42 -56
  5. package/src/qbo/qbo-select.d.ts +0 -2
  6. package/src/qbo/qbo-select.js +4 -15
  7. package/src/qbo/qbo-select.ts +4 -11
  8. package/wwwroot/js/qbo4.ui.js +51 -74
  9. package/wwwroot/js/qbo4.ui.min.js +78 -93
  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-194927",
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,168 +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
- <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>
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>
50
52
  </div>
51
53
  <div class="${this.colSixClass}">
52
54
  <label for="Status" class="${this.formLabelSmallClass}">Status</label>
53
- <select disabled class="${this.formSelectSmallClass}" name="Status">
54
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
55
- </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>
56
56
  </div>
57
57
  <div class="${this.colSixClass}">
58
58
  <label for="ContactType" class="${this.formLabelSmallClass}">Type</label>
59
- <select disabled class="${this.formSelectSmallClass}" name="ContactType">
60
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
61
- </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>
62
60
  </div>
63
61
  <div class="${this.colFourClass}">
64
62
  <label for="Phone" class="${this.formLabelSmallClass}">Phone</label>
65
- <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}"/>
66
64
  </div>
67
65
  <div class="${this.colFourClass}">
68
66
  <label for="Email" class="${this.formLabelSmallClass}">Email</label>
69
- <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}"/>
70
68
  </div>
71
69
  <div class="${this.colFourClass}">
72
70
  <label for="Title" class="${this.formLabelSmallClass}">Title</label>
73
- <select disabled class="${this.formSelectSmallClass}" name="Title">
74
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
75
- </select>
71
+ <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Title" value="${this.jsonData?.ContactItem?.Title}"/>
76
72
  </div>
77
73
  <div class="${this.divSectionHeaderClass}">
78
74
  <h5>Location</h5>
79
75
  </div>
80
76
  <div class="${this.colTwelveClass}">
81
77
  <label for="Company" class="${this.formLabelSmallClass}">Company</label>
82
- <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}"/>
83
79
  </div>
84
80
  <div class="${this.colTwelveClass}">
85
81
  <label for="Address" class="${this.formLabelSmallClass}">Address</label>
86
- <textarea disabled class="${this.formControlSmallClass}" name="Address"></textarea>
82
+ <textarea ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Address">${this.jsonData?.ContactItem?.Address}</textarea>
87
83
  </div>
88
84
  <div class="${this.colSixClass}">
89
85
  <label for="City" class="${this.formLabelSmallClass}">City</label>
90
- <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}"/>
91
87
  </div>
92
88
  <div class="${this.colThreeClass}">
93
89
  <label for="State" class="${this.formLabelSmallClass}">State</label>
94
- <select disabled class="${this.formSelectSmallClass}" name="State">
95
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
96
- </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>
97
91
  </div>
98
92
  <div class="${this.colThreeClass}">
99
93
  <label for="PostalCode" class="${this.formLabelSmallClass}">Postal Code</label>
100
- <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}"/>
101
95
  </div>
102
96
  <div class="${this.colSixClass}">
103
97
  <label for="Country" class="${this.formLabelSmallClass}">Country</label>
104
- <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}"/>
105
99
  </div>
106
100
  <div class="${this.colThreeClass}">
107
101
  <label for="Latitude" class="${this.formLabelSmallClass}">Latitude</label>
108
- <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}"/>
109
103
  </div>
110
104
  <div class="${this.colThreeClass}">
111
105
  <label for="Longitude" class="${this.formLabelSmallClass}">Longitude</label>
112
- <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}"/>
113
107
  </div>
114
108
  <div class="${this.divSectionHeaderClass}">
115
109
  <h5>Identity</h5>
116
110
  </div>
117
111
  <div class="${this.colThreeClass}">
118
112
  <label for="USSSN" class="${this.formLabelSmallClass}">SSN</label>
119
- <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}"/>
120
114
  </div>
121
115
  <div class="${this.colThreeClass}">
122
116
  <label for="TIN" class="${this.formLabelSmallClass}">TIN</label>
123
- <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}"/>
124
118
  </div>
125
119
  <div class="${this.colThreeClass}">
126
120
  <label for="Nationality" class="${this.formLabelSmallClass}">Nationality</label>
127
- <select disabled class="${this.formSelectSmallClass}" name="Nationality">
128
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
129
- </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>
130
122
  </div>
131
123
  <div class="${this.colThreeClass}">
132
124
  <label for="SpokenLanguage" class="${this.formLabelSmallClass}">Spoken Language</label>
133
- <select disabled class="${this.formSelectSmallClass}" name="SpokenLanguage">
134
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
135
- </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>
136
126
  </div>
137
127
  <div class="${this.colThreeClass}">
138
128
  <label for="BirthDate" class="${this.formLabelSmallClass}">Birth Date</label>
139
- <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}"/>
140
130
  </div>
141
131
  <div class="${this.colThreeClass}">
142
132
  <label for="DeathDate" class="${this.formLabelSmallClass}">Death Date</label>
143
- <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}"/>
144
134
  </div>
145
135
  <div class="${this.colThreeClass}">
146
136
  <label for="ValidStart" class="${this.formLabelSmallClass}">Valid Start</label>
147
- <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}"/>
148
138
  </div>
149
139
  <div class="${this.colThreeClass}">
150
140
  <label for="ValidEnd" class="${this.formLabelSmallClass}">Valid End</label>
151
- <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}"/>
152
142
  </div>
153
143
  <div class="${this.colSixClass}">
154
144
  <label for="VerifiedSource" class="${this.formLabelSmallClass}">Verified Source</label>
155
- <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}"/>
156
146
  </div>
157
147
  <div class="${this.colThreeClass}">
158
148
  <label for="VerifiedDate" class="${this.formLabelSmallClass}">Verified Date</label>
159
- <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}"/>
160
150
  </div>
161
151
  <div class="${this.colThreeClass}">
162
152
  <label for="VerifiedConfidence" class="${this.formLabelSmallClass}">Verified Confidence</label>
163
- <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}"/>
164
154
  </div>
165
155
  <div class="${this.divSectionHeaderClass}">
166
156
  <h5>SCRA</h5>
167
157
  </div>
168
158
  <div class="${this.colThreeClass}">
169
159
  <label for="SCRAStatus" class="${this.formLabelSmallClass}">SCRA Status</label>
170
- <select disabled class="${this.formSelectSmallClass}" name="SCRAStatus">
171
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
172
- </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>
173
161
  </div>
174
162
  <div class="${this.colThreeClass}">
175
163
  <label for="SCRAStatusAsOf" class="${this.formLabelSmallClass}">SCRA Status As Of</label>
176
- <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}"/>
177
165
  </div>
178
166
  <div class="${this.colThreeClass}">
179
167
  <label for="SCRAStartDate" class="${this.formLabelSmallClass}">SCRA Start Date</label>
180
- <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}"/>
181
169
  </div>
182
170
  <div class="${this.colThreeClass}">
183
171
  <label for="SCRADischargeDate" class="${this.formLabelSmallClass}">SCRA Discharge Date</label>
184
- <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}"/>
185
173
  </div>
186
174
  <div class="${this.colThreeClass}">
187
175
  <label for="SCRAVerified" class="${this.formLabelSmallClass}">SCRA Verified</label>
188
- <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}"/>
189
177
  </div>
190
178
  <div class="${this.colThreeClass}">
191
179
  <label for="SCRAVerifiedDate" class="${this.formLabelSmallClass}">SCRA Verified Date</label>
192
- <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}"/>
193
181
  </div>
194
182
  <div class="${this.colThreeClass}">
195
183
  <label for="SCRASource" class="${this.formLabelSmallClass}">SCRA Source</label>
196
- <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}"/>
197
185
  </div>
198
186
  <div class="${this.colThreeClass}">
199
187
  <label for="SCRAID" class="${this.formLabelSmallClass}">SCRA ID</label>
200
- <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}"/>
201
189
  </div>
202
190
  </slot>`;
203
191
  }
@@ -235,17 +223,13 @@ __decorate([
235
223
  __metadata("design:type", Object)
236
224
  ], QboContact.prototype, "contactName", void 0);
237
225
  __decorate([
238
- property({ type: String }),
239
- __metadata("design:type", Object)
240
- ], QboContact.prototype, "divSectionHeaderClass", void 0);
241
- __decorate([
242
- property({ type: String }),
226
+ property({ type: Boolean }),
243
227
  __metadata("design:type", Object)
244
- ], QboContact.prototype, "emptyOptionText", void 0);
228
+ ], QboContact.prototype, "disabled", void 0);
245
229
  __decorate([
246
230
  property({ type: String }),
247
231
  __metadata("design:type", Object)
248
- ], QboContact.prototype, "emptyOptionValue", void 0);
232
+ ], QboContact.prototype, "divSectionHeaderClass", void 0);
249
233
  __decorate([
250
234
  property({ type: String }),
251
235
  __metadata("design:type", Object)
@@ -262,6 +246,10 @@ __decorate([
262
246
  property({ type: Boolean }),
263
247
  __metadata("design:type", Object)
264
248
  ], QboContact.prototype, "renderInHost", void 0);
249
+ __decorate([
250
+ property({ type: Object }),
251
+ __metadata("design:type", Object)
252
+ ], QboContact.prototype, "jsonData", void 0);
265
253
  QboContact = __decorate([
266
254
  customElement('qbo-contact')
267
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,169 +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
- <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>
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>
77
77
  </div>
78
78
  <div class="${this.colSixClass}">
79
79
  <label for="Status" class="${this.formLabelSmallClass}">Status</label>
80
- <select disabled class="${this.formSelectSmallClass}" name="Status">
81
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
82
- </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>
83
81
  </div>
84
82
  <div class="${this.colSixClass}">
85
83
  <label for="ContactType" class="${this.formLabelSmallClass}">Type</label>
86
- <select disabled class="${this.formSelectSmallClass}" name="ContactType">
87
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
88
- </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>
89
85
  </div>
90
86
  <div class="${this.colFourClass}">
91
87
  <label for="Phone" class="${this.formLabelSmallClass}">Phone</label>
92
- <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}"/>
93
89
  </div>
94
90
  <div class="${this.colFourClass}">
95
91
  <label for="Email" class="${this.formLabelSmallClass}">Email</label>
96
- <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}"/>
97
93
  </div>
98
94
  <div class="${this.colFourClass}">
99
95
  <label for="Title" class="${this.formLabelSmallClass}">Title</label>
100
- <select disabled class="${this.formSelectSmallClass}" name="Title">
101
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
102
- </select>
96
+ <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Title" value="${this.jsonData?.ContactItem?.Title}"/>
103
97
  </div>
104
98
  <div class="${this.divSectionHeaderClass}">
105
99
  <h5>Location</h5>
106
100
  </div>
107
101
  <div class="${this.colTwelveClass}">
108
102
  <label for="Company" class="${this.formLabelSmallClass}">Company</label>
109
- <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}"/>
110
104
  </div>
111
105
  <div class="${this.colTwelveClass}">
112
106
  <label for="Address" class="${this.formLabelSmallClass}">Address</label>
113
- <textarea disabled class="${this.formControlSmallClass}" name="Address"></textarea>
107
+ <textarea ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Address">${this.jsonData?.ContactItem?.Address}</textarea>
114
108
  </div>
115
109
  <div class="${this.colSixClass}">
116
110
  <label for="City" class="${this.formLabelSmallClass}">City</label>
117
- <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}"/>
118
112
  </div>
119
113
  <div class="${this.colThreeClass}">
120
114
  <label for="State" class="${this.formLabelSmallClass}">State</label>
121
- <select disabled class="${this.formSelectSmallClass}" name="State">
122
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
123
- </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>
124
116
  </div>
125
117
  <div class="${this.colThreeClass}">
126
118
  <label for="PostalCode" class="${this.formLabelSmallClass}">Postal Code</label>
127
- <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}"/>
128
120
  </div>
129
121
  <div class="${this.colSixClass}">
130
122
  <label for="Country" class="${this.formLabelSmallClass}">Country</label>
131
- <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}"/>
132
124
  </div>
133
125
  <div class="${this.colThreeClass}">
134
126
  <label for="Latitude" class="${this.formLabelSmallClass}">Latitude</label>
135
- <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}"/>
136
128
  </div>
137
129
  <div class="${this.colThreeClass}">
138
130
  <label for="Longitude" class="${this.formLabelSmallClass}">Longitude</label>
139
- <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}"/>
140
132
  </div>
141
133
  <div class="${this.divSectionHeaderClass}">
142
134
  <h5>Identity</h5>
143
135
  </div>
144
136
  <div class="${this.colThreeClass}">
145
137
  <label for="USSSN" class="${this.formLabelSmallClass}">SSN</label>
146
- <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}"/>
147
139
  </div>
148
140
  <div class="${this.colThreeClass}">
149
141
  <label for="TIN" class="${this.formLabelSmallClass}">TIN</label>
150
- <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}"/>
151
143
  </div>
152
144
  <div class="${this.colThreeClass}">
153
145
  <label for="Nationality" class="${this.formLabelSmallClass}">Nationality</label>
154
- <select disabled class="${this.formSelectSmallClass}" name="Nationality">
155
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
156
- </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>
157
147
  </div>
158
148
  <div class="${this.colThreeClass}">
159
149
  <label for="SpokenLanguage" class="${this.formLabelSmallClass}">Spoken Language</label>
160
- <select disabled class="${this.formSelectSmallClass}" name="SpokenLanguage">
161
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
162
- </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>
163
151
  </div>
164
152
  <div class="${this.colThreeClass}">
165
153
  <label for="BirthDate" class="${this.formLabelSmallClass}">Birth Date</label>
166
- <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}"/>
167
155
  </div>
168
156
  <div class="${this.colThreeClass}">
169
157
  <label for="DeathDate" class="${this.formLabelSmallClass}">Death Date</label>
170
- <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}"/>
171
159
  </div>
172
160
  <div class="${this.colThreeClass}">
173
161
  <label for="ValidStart" class="${this.formLabelSmallClass}">Valid Start</label>
174
- <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}"/>
175
163
  </div>
176
164
  <div class="${this.colThreeClass}">
177
165
  <label for="ValidEnd" class="${this.formLabelSmallClass}">Valid End</label>
178
- <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}"/>
179
167
  </div>
180
168
  <div class="${this.colSixClass}">
181
169
  <label for="VerifiedSource" class="${this.formLabelSmallClass}">Verified Source</label>
182
- <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}"/>
183
171
  </div>
184
172
  <div class="${this.colThreeClass}">
185
173
  <label for="VerifiedDate" class="${this.formLabelSmallClass}">Verified Date</label>
186
- <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}"/>
187
175
  </div>
188
176
  <div class="${this.colThreeClass}">
189
177
  <label for="VerifiedConfidence" class="${this.formLabelSmallClass}">Verified Confidence</label>
190
- <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}"/>
191
179
  </div>
192
180
  <div class="${this.divSectionHeaderClass}">
193
181
  <h5>SCRA</h5>
194
182
  </div>
195
183
  <div class="${this.colThreeClass}">
196
184
  <label for="SCRAStatus" class="${this.formLabelSmallClass}">SCRA Status</label>
197
- <select disabled class="${this.formSelectSmallClass}" name="SCRAStatus">
198
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
199
- </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>
200
186
  </div>
201
187
  <div class="${this.colThreeClass}">
202
188
  <label for="SCRAStatusAsOf" class="${this.formLabelSmallClass}">SCRA Status As Of</label>
203
- <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}"/>
204
190
  </div>
205
191
  <div class="${this.colThreeClass}">
206
192
  <label for="SCRAStartDate" class="${this.formLabelSmallClass}">SCRA Start Date</label>
207
- <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}"/>
208
194
  </div>
209
195
  <div class="${this.colThreeClass}">
210
196
  <label for="SCRADischargeDate" class="${this.formLabelSmallClass}">SCRA Discharge Date</label>
211
- <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}"/>
212
198
  </div>
213
199
  <div class="${this.colThreeClass}">
214
200
  <label for="SCRAVerified" class="${this.formLabelSmallClass}">SCRA Verified</label>
215
- <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}"/>
216
202
  </div>
217
203
  <div class="${this.colThreeClass}">
218
204
  <label for="SCRAVerifiedDate" class="${this.formLabelSmallClass}">SCRA Verified Date</label>
219
- <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}"/>
220
206
  </div>
221
207
  <div class="${this.colThreeClass}">
222
208
  <label for="SCRASource" class="${this.formLabelSmallClass}">SCRA Source</label>
223
- <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}"/>
224
210
  </div>
225
211
  <div class="${this.colThreeClass}">
226
212
  <label for="SCRAID" class="${this.formLabelSmallClass}">SCRA ID</label>
227
- <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}"/>
228
214
  </div>
229
215
  </slot>`;
230
216
  }
package/src/qbo/qbo-select.d.ts CHANGED
@@ -12,8 +12,6 @@ export declare class QboSelect extends QboFetch {
12
12
  defaultValue: null;
13
13
  emptyOptionText: String | null;
14
14
  emptyOptionValue: String | null;
15
- qboClass: null;
16
- qboDisabled: boolean;
17
15
  options: Array<{
18
16
  [key: string]: string;
19
17
  }> | null;
package/src/qbo/qbo-select.js CHANGED
@@ -26,8 +26,6 @@ let QboSelect = class QboSelect extends QboFetch {
26
26
  this.defaultValue = null;
27
27
  this.emptyOptionText = '--';
28
28
  this.emptyOptionValue = '';
29
- this.qboClass = null;
30
- this.qboDisabled = false;
31
29
  this.options = [];
32
30
  this.renderInHost = true;
33
31
  }
@@ -50,11 +48,10 @@ let QboSelect = class QboSelect extends QboFetch {
50
48
  return html `<p>Loading...</p>`;
51
49
  this.optionValue ??= Object.keys(this.options[0])[0];
52
50
  this.optionText ??= Object.keys(this.options[0])[1] ?? this.optionValue;
53
- return html `
54
- <select ?disabled=${this.qboDisabled} class=${this.qboClass}>
55
- <option value="${this.emptyOptionValue}">${this.emptyOptionText}</option>
56
- ${this.options.map(option => html `<option value="${option[this.optionValue]}" ?selected="${option[this.optionValue] === this.defaultValue}">${option[this.optionText]}</option>`)}
57
- </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>`;
58
55
  }
59
56
  };
60
57
  __decorate([
@@ -81,14 +78,6 @@ __decorate([
81
78
  property({ type: String }),
82
79
  __metadata("design:type", Object)
83
80
  ], QboSelect.prototype, "emptyOptionValue", void 0);
84
- __decorate([
85
- property({ type: String, attribute: 'qbo-class' }),
86
- __metadata("design:type", Object)
87
- ], QboSelect.prototype, "qboClass", void 0);
88
- __decorate([
89
- property({ type: Boolean, attribute: 'qbo-disabled' }),
90
- __metadata("design:type", Object)
91
- ], QboSelect.prototype, "qboDisabled", void 0);
92
81
  __decorate([
93
82
  property({ type: Array }),
94
83
  __metadata("design:type", Object)