@progressive-development/pd-contact 0.0.32 → 0.0.34
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.
- package/package.json +2 -2
- package/src/PdContact.js +20 -17
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Progressive Development Contact component",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"author": "PD Progressive Development",
|
|
6
|
-
"version": "0.0.
|
|
6
|
+
"version": "0.0.34",
|
|
7
7
|
"main": "index.js",
|
|
8
8
|
"module": "index.js",
|
|
9
9
|
"scripts": {
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"storybook:build": "npm run analyze -- --exclude dist && build-storybook"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@progressive-development/pd-forms": "0.
|
|
20
|
+
"@progressive-development/pd-forms": "^0.1.2",
|
|
21
21
|
"lit": "^2.0.2"
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
package/src/PdContact.js
CHANGED
|
@@ -21,10 +21,7 @@
|
|
|
21
21
|
static get styles() {
|
|
22
22
|
return css`
|
|
23
23
|
:host {
|
|
24
|
-
display: block;
|
|
25
|
-
|
|
26
|
-
--my-address-txt-color: var(--squi-addrress-txt-color, black);
|
|
27
|
-
--my-address-title-color: var(--squi-addrress-txt-color, #084c61);
|
|
24
|
+
display: block;
|
|
28
25
|
}
|
|
29
26
|
|
|
30
27
|
.contact {
|
|
@@ -33,7 +30,7 @@
|
|
|
33
30
|
}
|
|
34
31
|
|
|
35
32
|
address {
|
|
36
|
-
color: var(--
|
|
33
|
+
color: var(--app-font-content-col, #353738);
|
|
37
34
|
line-height: 1.8;
|
|
38
35
|
font-style: normal;
|
|
39
36
|
}
|
|
@@ -46,7 +43,7 @@
|
|
|
46
43
|
dt {
|
|
47
44
|
font-weight: bold;
|
|
48
45
|
padding-top: 10px;
|
|
49
|
-
|
|
46
|
+
color: var(--app-font-title-col, #0A3A48);
|
|
50
47
|
}
|
|
51
48
|
|
|
52
49
|
dd {
|
|
@@ -107,19 +104,19 @@
|
|
|
107
104
|
|
|
108
105
|
_renderEditContact() {
|
|
109
106
|
return html`
|
|
110
|
-
<pd-form-container id="contactContainerId">
|
|
107
|
+
<pd-form-container id="contactContainerId" requiredFieldInfo>
|
|
111
108
|
<pd-form-row id="testFormId">
|
|
112
109
|
<pd-radio-group
|
|
113
110
|
class="quarter4"
|
|
114
111
|
label="Type"
|
|
115
112
|
required
|
|
116
|
-
@
|
|
113
|
+
@field-change="${this._switchAddressType}"
|
|
117
114
|
style="--group-gap: 20px;"
|
|
118
115
|
>
|
|
119
116
|
<pd-checkbox value="true" valueName="private"
|
|
120
|
-
>
|
|
117
|
+
>Particulier</pd-checkbox
|
|
121
118
|
>
|
|
122
|
-
<pd-checkbox valueName="business">
|
|
119
|
+
<pd-checkbox valueName="business">Onderneming</pd-checkbox>
|
|
123
120
|
</pd-radio-group>
|
|
124
121
|
</pd-form-row>
|
|
125
122
|
|
|
@@ -132,6 +129,7 @@
|
|
|
132
129
|
label="Naam onderneming"
|
|
133
130
|
required
|
|
134
131
|
valueName="companyName"
|
|
132
|
+
autoCompleteName="organization"
|
|
135
133
|
></pd-input>
|
|
136
134
|
<pd-input
|
|
137
135
|
id="vatId"
|
|
@@ -140,6 +138,7 @@
|
|
|
140
138
|
required
|
|
141
139
|
field-type="vat"
|
|
142
140
|
valueName="vatNr"
|
|
141
|
+
autoCompleteName="vat"
|
|
143
142
|
></pd-input>
|
|
144
143
|
</pd-form-row>
|
|
145
144
|
`
|
|
@@ -150,6 +149,7 @@
|
|
|
150
149
|
class="quarter2"
|
|
151
150
|
label="Voornaam"
|
|
152
151
|
valueName="firstName"
|
|
152
|
+
autoCompleteName="given-name"
|
|
153
153
|
required
|
|
154
154
|
></pd-input>
|
|
155
155
|
<pd-input
|
|
@@ -157,6 +157,7 @@
|
|
|
157
157
|
class="quarter2"
|
|
158
158
|
label="Naam"
|
|
159
159
|
valueName="lastName"
|
|
160
|
+
autoCompleteName="family-name"
|
|
160
161
|
required
|
|
161
162
|
></pd-input>
|
|
162
163
|
</pd-form-row>
|
|
@@ -167,6 +168,7 @@
|
|
|
167
168
|
class="quarter3"
|
|
168
169
|
label="Straat"
|
|
169
170
|
valueName="street"
|
|
171
|
+
autoCompleteName="street-address"
|
|
170
172
|
required
|
|
171
173
|
></pd-input>
|
|
172
174
|
<pd-input
|
|
@@ -191,8 +193,7 @@
|
|
|
191
193
|
readonly
|
|
192
194
|
id="zipId"
|
|
193
195
|
class="quarter2"
|
|
194
|
-
label="Postcode"
|
|
195
|
-
key="zip"
|
|
196
|
+
label="Postcode"
|
|
196
197
|
valueName="zip"
|
|
197
198
|
value="${this.match ? this.match.zip || '' : ''}"
|
|
198
199
|
required
|
|
@@ -202,10 +203,10 @@
|
|
|
202
203
|
<pd-input
|
|
203
204
|
id="zipId"
|
|
204
205
|
class="quarter2"
|
|
205
|
-
label="Postcode"
|
|
206
|
-
key="zip"
|
|
206
|
+
label="Postcode"
|
|
207
207
|
field-type="number"
|
|
208
208
|
valueName="zip"
|
|
209
|
+
autoCompleteName="postal-code"
|
|
209
210
|
required
|
|
210
211
|
></pd-input>
|
|
211
212
|
`}
|
|
@@ -214,6 +215,7 @@
|
|
|
214
215
|
class="quarter2"
|
|
215
216
|
label="Plaats"
|
|
216
217
|
valueName="city"
|
|
218
|
+
autoCompleteName="locality"
|
|
217
219
|
required
|
|
218
220
|
></pd-input>
|
|
219
221
|
</pd-form-row>
|
|
@@ -221,19 +223,20 @@
|
|
|
221
223
|
<pd-input
|
|
222
224
|
id="phoneId"
|
|
223
225
|
class="quarter2"
|
|
224
|
-
label="Telefoon"
|
|
225
|
-
|
|
226
|
+
label="Telefoon"
|
|
227
|
+
name="phone"
|
|
226
228
|
valueName="phone1"
|
|
227
229
|
field-type="phone"
|
|
230
|
+
autoCompleteName="tel"
|
|
228
231
|
required
|
|
229
232
|
></pd-input>
|
|
230
233
|
<pd-input
|
|
231
234
|
id="mailId"
|
|
232
235
|
class="quarter2"
|
|
233
236
|
label="E-mail"
|
|
234
|
-
key="mail"
|
|
235
237
|
field-type="mail"
|
|
236
238
|
valueName="email"
|
|
239
|
+
autoCompleteName="email"
|
|
237
240
|
required
|
|
238
241
|
></pd-input>
|
|
239
242
|
</pd-form-row>
|