@progressive-development/pd-contact 0.6.8 → 0.6.9
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/dist/pd-contact.d.ts
CHANGED
|
@@ -6,7 +6,9 @@ export declare const C_BTWNR = "vatNr";
|
|
|
6
6
|
export declare const C_FIRSTNAME = "firstName";
|
|
7
7
|
export declare const C_LASTNAME = "lastName";
|
|
8
8
|
export declare const C_STREET = "street";
|
|
9
|
+
export declare const C_STREET_NR = "streetNr";
|
|
9
10
|
export declare const C_CITY = "city";
|
|
11
|
+
export declare const C_ZIP = "zip";
|
|
10
12
|
export declare const C_ADDITIONAL = "additionalHint";
|
|
11
13
|
export declare const C_PROPERTY_DATE = "propertyDate";
|
|
12
14
|
export declare const C_PHONE1 = "phone1";
|
|
@@ -49,22 +51,19 @@ export declare class PdContact extends LitElement {
|
|
|
49
51
|
* Business or private contact (internal flag).
|
|
50
52
|
*/
|
|
51
53
|
private _business;
|
|
52
|
-
|
|
53
|
-
* Internal validation state.
|
|
54
|
-
*/
|
|
55
|
-
private _errorMap;
|
|
54
|
+
private _contactForm;
|
|
56
55
|
static styles: CSSResultGroup;
|
|
57
56
|
willUpdate(changedProps: PropertyValues<this>): void;
|
|
58
57
|
render(): import('lit-html').TemplateResult<1>;
|
|
59
58
|
private _renderEditContact;
|
|
60
59
|
private _getRadioValue;
|
|
61
60
|
private _renderViewContact;
|
|
62
|
-
get valid():
|
|
61
|
+
get valid(): boolean;
|
|
63
62
|
triggerValidate(): Promise<boolean>;
|
|
63
|
+
getValues(): PdContactData;
|
|
64
64
|
private _switchAddressType;
|
|
65
65
|
private _isRequired;
|
|
66
66
|
private _showInput;
|
|
67
|
-
private _validateForm;
|
|
68
67
|
private _setFormData;
|
|
69
68
|
private _getFullName;
|
|
70
69
|
private _getFullStreet;
|
package/dist/pd-contact.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pd-contact.d.ts","sourceRoot":"","sources":["../src/pd-contact.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAS5E,OAAO,0CAA0C,CAAC;
|
|
1
|
+
{"version":3,"file":"pd-contact.d.ts","sourceRoot":"","sources":["../src/pd-contact.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAS5E,OAAO,0CAA0C,CAAC;AAGlD,OAAO,+CAA+C,CAAC;AACvD,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AACvD,OAAO,4CAA4C,CAAC;AACpD,OAAO,6CAA6C,CAAC;AACrD,OAAO,kDAAkD,CAAC;AAE1D,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAqB7D,eAAO,MAAM,MAAM,SAAS,CAAC;AAC7B,eAAO,MAAM,SAAS,gBAAgB,CAAC;AACvC,eAAO,MAAM,OAAO,UAAU,CAAC;AAC/B,eAAO,MAAM,WAAW,cAAc,CAAC;AACvC,eAAO,MAAM,UAAU,aAAa,CAAC;AACrC,eAAO,MAAM,QAAQ,WAAW,CAAC;AACjC,eAAO,MAAM,WAAW,aAAa,CAAC;AACtC,eAAO,MAAM,MAAM,SAAS,CAAC;AAC7B,eAAO,MAAM,KAAK,QAAQ,CAAC;AAC3B,eAAO,MAAM,YAAY,mBAAmB,CAAC;AAC7C,eAAO,MAAM,eAAe,iBAAiB,CAAC;AAC9C,eAAO,MAAM,QAAQ,WAAW,CAAC;AACjC,eAAO,MAAM,OAAO,UAAU,CAAC;AAgB/B,qBACa,SAAU,SAAQ,UAAU;IACvC;;OAEG;IAEH,YAAY,SAAsD;IAElE;;OAEG;IAEH,aAAa,UAAS;IAEtB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,cAAc,EAAE,MAAM,EAAE,CAAM;IAE9B;;OAEG;IAEH,WAAW,EAAE,MAAM,EAAE,CAAM;IAE3B;;OAEG;IAEH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;OAEG;IAEH,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAS;IAG1B,OAAO,CAAC,YAAY,CAAmB;IAEvC,OAAgB,MAAM,EAAE,cAAc,CAuEpC;IAEO,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAMpD,MAAM;IAQf,OAAO,CAAC,kBAAkB;IAiP1B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,kBAAkB;IAiF1B,IAAI,KAAK,YAER;IAEY,eAAe,IAAI,OAAO,CAAC,OAAO,CAAC;IAIzC,SAAS,IAAI,aAAa;IAiCjC,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,YAAY;IAsBpB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,MAAM,CAAC,WAAW;CAG3B"}
|
package/dist/pd-contact.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { css, LitElement, html } from "lit";
|
|
2
|
-
import { property, state, customElement } from "lit/decorators.js";
|
|
2
|
+
import { property, state, query, customElement } from "lit/decorators.js";
|
|
3
3
|
import { msg, str } from "@lit/localize";
|
|
4
4
|
import { PdFontStyles, PdColorStyles } from "@progressive-development/pd-shared-styles";
|
|
5
5
|
import "@progressive-development/pd-icon/pd-icon";
|
|
@@ -47,7 +47,9 @@ const C_BTWNR = "vatNr";
|
|
|
47
47
|
const C_FIRSTNAME = "firstName";
|
|
48
48
|
const C_LASTNAME = "lastName";
|
|
49
49
|
const C_STREET = "street";
|
|
50
|
+
const C_STREET_NR = "streetNr";
|
|
50
51
|
const C_CITY = "city";
|
|
52
|
+
const C_ZIP = "zip";
|
|
51
53
|
const C_ADDITIONAL = "additionalHint";
|
|
52
54
|
const C_PROPERTY_DATE = "propertyDate";
|
|
53
55
|
const C_PHONE1 = "phone1";
|
|
@@ -74,7 +76,6 @@ let PdContact = class extends LitElement {
|
|
|
74
76
|
this.requiredFields = [];
|
|
75
77
|
this.inputFields = [];
|
|
76
78
|
this._business = false;
|
|
77
|
-
this._errorMap = /* @__PURE__ */ new Map();
|
|
78
79
|
}
|
|
79
80
|
willUpdate(changedProps) {
|
|
80
81
|
if (changedProps.has("contact") && this.contact) {
|
|
@@ -91,7 +92,7 @@ let PdContact = class extends LitElement {
|
|
|
91
92
|
_renderEditContact() {
|
|
92
93
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
|
|
93
94
|
return html`
|
|
94
|
-
<pd-form-container id="contactContainerId" requiredFieldInfo>
|
|
95
|
+
<pd-form-container id="contactContainerId" requiredFieldInfo autoTrimm>
|
|
95
96
|
${this.inputFields.length === 0 || this._showInput(C_TYPE) ? html`
|
|
96
97
|
<pd-form-row>
|
|
97
98
|
<pd-radio-group
|
|
@@ -203,7 +204,7 @@ let PdContact = class extends LitElement {
|
|
|
203
204
|
label="${msg("Nr.", { id: "pd.contact.label.streetNr" })}"
|
|
204
205
|
valueName="streetNr"
|
|
205
206
|
initValue="${((_f = this.contact) == null ? void 0 : _f.streetNr) || ""}"
|
|
206
|
-
?required="${this._isRequired(
|
|
207
|
+
?required="${this._isRequired(C_STREET)}"
|
|
207
208
|
></pd-input>
|
|
208
209
|
</pd-form-row>
|
|
209
210
|
` : ""}
|
|
@@ -227,7 +228,7 @@ let PdContact = class extends LitElement {
|
|
|
227
228
|
valueName="zip"
|
|
228
229
|
initValue="${((_g = this.contact) == null ? void 0 : _g.zip) || ""}"
|
|
229
230
|
autoCompleteName="postal-code"
|
|
230
|
-
?required="${this._isRequired(
|
|
231
|
+
?required="${this._isRequired(C_ZIP)}"
|
|
231
232
|
></pd-input>
|
|
232
233
|
`}
|
|
233
234
|
<pd-input
|
|
@@ -250,6 +251,8 @@ let PdContact = class extends LitElement {
|
|
|
250
251
|
id: "pd.contact.label.additional"
|
|
251
252
|
})}"
|
|
252
253
|
initValue="${((_i = this.contact) == null ? void 0 : _i.additionalHint) || ""}"
|
|
254
|
+
valueName="additionalHint"
|
|
255
|
+
?required="${this._isRequired(C_ADDITIONAL)}"
|
|
253
256
|
></pd-input>
|
|
254
257
|
</pd-form-row>
|
|
255
258
|
` : ""}
|
|
@@ -371,11 +374,41 @@ let PdContact = class extends LitElement {
|
|
|
371
374
|
}
|
|
372
375
|
get valid() {
|
|
373
376
|
var _a;
|
|
374
|
-
return ((_a = this.
|
|
377
|
+
return ((_a = this._contactForm) == null ? void 0 : _a.valid) === true;
|
|
375
378
|
}
|
|
376
379
|
async triggerValidate() {
|
|
377
380
|
var _a;
|
|
378
|
-
return (
|
|
381
|
+
return (_a = this._contactForm) == null ? void 0 : _a.triggerValidate();
|
|
382
|
+
}
|
|
383
|
+
getValues() {
|
|
384
|
+
var _a;
|
|
385
|
+
const contactFormValues = (_a = this._contactForm) == null ? void 0 : _a.getValues();
|
|
386
|
+
console.log("VAlues:", contactFormValues);
|
|
387
|
+
const commonValues = {
|
|
388
|
+
business: this._business,
|
|
389
|
+
street: contactFormValues.street,
|
|
390
|
+
streetNr: contactFormValues.streetNr,
|
|
391
|
+
zip: contactFormValues.zip,
|
|
392
|
+
city: contactFormValues.city,
|
|
393
|
+
additionalHint: contactFormValues.additionalHint,
|
|
394
|
+
propertyDate: contactFormValues.propertyDate,
|
|
395
|
+
phone1: contactFormValues.phone1,
|
|
396
|
+
email: contactFormValues.email
|
|
397
|
+
// No input fields for following values
|
|
398
|
+
//country?: string;
|
|
399
|
+
//btw?: string;
|
|
400
|
+
//kbc?: string;
|
|
401
|
+
//bank?: string;
|
|
402
|
+
};
|
|
403
|
+
return this._business ? {
|
|
404
|
+
...commonValues,
|
|
405
|
+
companyName: contactFormValues.companyName,
|
|
406
|
+
vatNr: contactFormValues.vatNr
|
|
407
|
+
} : {
|
|
408
|
+
...commonValues,
|
|
409
|
+
firstName: contactFormValues.firstName,
|
|
410
|
+
lastName: contactFormValues.lastName
|
|
411
|
+
};
|
|
379
412
|
}
|
|
380
413
|
_switchAddressType(e) {
|
|
381
414
|
console.log("Do switch", e);
|
|
@@ -390,16 +423,6 @@ let PdContact = class extends LitElement {
|
|
|
390
423
|
_showInput(field) {
|
|
391
424
|
return this.inputFields.length > 0 ? this.inputFields.includes(field) : true;
|
|
392
425
|
}
|
|
393
|
-
_validateForm(e) {
|
|
394
|
-
var _a, _b;
|
|
395
|
-
const detail = e.detail;
|
|
396
|
-
if (!detail.singleElement) {
|
|
397
|
-
(_b = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById("contactContainerId")) == null ? void 0 : _b.dispatchEvent(new CustomEvent("validate-form", { detail }));
|
|
398
|
-
if (detail.errorMap.size === 0 && detail.formData) {
|
|
399
|
-
detail.formData[this.id] = this._setFormData();
|
|
400
|
-
}
|
|
401
|
-
}
|
|
402
|
-
}
|
|
403
426
|
_setFormData() {
|
|
404
427
|
const getInput = (id) => {
|
|
405
428
|
var _a, _b;
|
|
@@ -540,8 +563,8 @@ __decorateClass([
|
|
|
540
563
|
state()
|
|
541
564
|
], PdContact.prototype, "_business", 2);
|
|
542
565
|
__decorateClass([
|
|
543
|
-
|
|
544
|
-
], PdContact.prototype, "
|
|
566
|
+
query("#contactContainerId")
|
|
567
|
+
], PdContact.prototype, "_contactForm", 2);
|
|
545
568
|
PdContact = __decorateClass([
|
|
546
569
|
customElement("pd-contact")
|
|
547
570
|
], PdContact);
|
|
@@ -556,6 +579,8 @@ export {
|
|
|
556
579
|
C_PHONE1,
|
|
557
580
|
C_PROPERTY_DATE,
|
|
558
581
|
C_STREET,
|
|
582
|
+
C_STREET_NR,
|
|
559
583
|
C_TYPE,
|
|
584
|
+
C_ZIP,
|
|
560
585
|
PdContact
|
|
561
586
|
};
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { StoryObj } from '@storybook/web-components';
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
|
-
render: ({ inputFields, withPropertyDate, contact }: import('@storybook/web-components').Args) => import('lit-html').TemplateResult<1>;
|
|
4
|
+
render: ({ inputFields, requiredFields, withPropertyDate, contact }: import('@storybook/web-components').Args) => import('lit-html').TemplateResult<1>;
|
|
5
5
|
argTypes: {};
|
|
6
6
|
};
|
|
7
7
|
export default meta;
|
|
8
8
|
type Story = StoryObj;
|
|
9
9
|
export declare const ContactForm: Story;
|
|
10
|
+
export declare const ContactFormRequiredFields: Story;
|
|
10
11
|
export declare const ContactFormPropertyDate: Story;
|
|
11
12
|
export declare const ContactFormWithInputFields1: Story;
|
|
12
13
|
export declare const ContactFormWithInputFields2: Story;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"contact-edit.stories.d.ts","sourceRoot":"","sources":["../../src/stories/contact-edit.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"contact-edit.stories.d.ts","sourceRoot":"","sources":["../../src/stories/contact-edit.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAehE,OAAO,kBAAkB,CAAC;AAG1B,QAAA,MAAM,IAAI;;;;CAmCM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AA2BtB,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAevC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAIrC,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAIzC,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAIzC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAIjC,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KAIxC,CAAC;AAEF,eAAO,MAAM,+BAA+B,EAAE,KAQ7C,CAAC"}
|