@progressive-development/pd-order 0.7.11 → 0.9.2
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/generated/locales/be.d.ts +2 -1
- package/dist/generated/locales/be.d.ts.map +1 -1
- package/dist/generated/locales/de.d.ts +2 -1
- package/dist/generated/locales/de.d.ts.map +1 -1
- package/dist/generated/locales/en.d.ts +2 -1
- package/dist/generated/locales/en.d.ts.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +7 -12
- package/dist/locales/be.js +4 -6
- package/dist/locales/de.js +4 -7
- package/dist/locales/en.js +4 -6
- package/dist/pd-order-contacts/PdOrderContacts.d.ts +46 -0
- package/dist/pd-order-contacts/PdOrderContacts.d.ts.map +1 -0
- package/dist/pd-order-contacts/PdOrderContacts.js +383 -0
- package/dist/pd-order-contacts/pd-order-contacts.d.ts +3 -0
- package/dist/pd-order-contacts/pd-order-contacts.d.ts.map +1 -0
- package/dist/{stories → pd-order-contacts}/pd-order-contacts.stories.d.ts +1 -1
- package/dist/pd-order-contacts/pd-order-contacts.stories.d.ts.map +1 -0
- package/dist/pd-order-contacts.d.ts +2 -45
- package/dist/pd-order-contacts.js +6 -387
- package/dist/pd-order-summary/PdOrderSummary.d.ts +39 -0
- package/dist/pd-order-summary/PdOrderSummary.d.ts.map +1 -0
- package/dist/pd-order-summary/PdOrderSummary.js +242 -0
- package/dist/pd-order-summary/pd-order-summary.d.ts +3 -0
- package/dist/pd-order-summary/pd-order-summary.d.ts.map +1 -0
- package/dist/{stories → pd-order-summary}/pd-order-summary.stories.d.ts +1 -1
- package/dist/pd-order-summary/pd-order-summary.stories.d.ts.map +1 -0
- package/dist/pd-order-summary.d.ts +2 -38
- package/dist/pd-order-summary.js +6 -248
- package/dist/stories/test-impl/test-summary.d.ts +1 -1
- package/dist/stories/test-impl/test-summary.d.ts.map +1 -1
- package/package.json +30 -51
- package/dist/pd-order-contacts.d.ts.map +0 -1
- package/dist/pd-order-summary.d.ts.map +0 -1
- package/dist/stories/pd-order-contacts.stories.d.ts.map +0 -1
- package/dist/stories/pd-order-summary.stories.d.ts.map +0 -1
|
@@ -2,7 +2,8 @@ export declare const templates: {
|
|
|
2
2
|
"pd.order.contacts.billingContact.inputHeader": string;
|
|
3
3
|
"pd.order.contacts.orderContact.inputHeader": string;
|
|
4
4
|
"pd.order.contacts.propertyContact.checkBox": string;
|
|
5
|
-
"pd.order.summary.agree.
|
|
5
|
+
"pd.order.summary.agree.link1": string;
|
|
6
|
+
"pd.order.summary.agree.link2": string;
|
|
6
7
|
"pd.order.summary.agree.required": string;
|
|
7
8
|
"pd.order.summary.billing": string;
|
|
8
9
|
"pd.order.summary.title": string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"be.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/be.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"be.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/be.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;CAqBrB,CAAC"}
|
|
@@ -17,6 +17,7 @@ export declare const templates: {
|
|
|
17
17
|
"pd.order.summary.title": string;
|
|
18
18
|
"pd.order.summary.billing": string;
|
|
19
19
|
"pd.order.summary.agree.required": string;
|
|
20
|
-
"pd.order.summary.agree.
|
|
20
|
+
"pd.order.summary.agree.link1": string;
|
|
21
|
+
"pd.order.summary.agree.link2": string;
|
|
21
22
|
};
|
|
22
23
|
//# sourceMappingURL=de.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"de.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/de.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"de.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/de.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;CAqBrB,CAAC"}
|
|
@@ -2,7 +2,8 @@ export declare const templates: {
|
|
|
2
2
|
"pd.order.contacts.billingContact.inputHeader": string;
|
|
3
3
|
"pd.order.contacts.orderContact.inputHeader": string;
|
|
4
4
|
"pd.order.contacts.propertyContact.checkBox": string;
|
|
5
|
-
"pd.order.summary.agree.
|
|
5
|
+
"pd.order.summary.agree.link1": string;
|
|
6
|
+
"pd.order.summary.agree.link2": string;
|
|
6
7
|
"pd.order.summary.agree.required": string;
|
|
7
8
|
"pd.order.summary.billing": string;
|
|
8
9
|
"pd.order.summary.title": string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/en.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/en.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;CAqBrB,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { PdOrderContacts } from './pd-order-contacts.js';
|
|
2
|
-
export { PdOrderSummary } from './pd-order-summary.js';
|
|
1
|
+
export { PdOrderContacts } from './pd-order-contacts/pd-order-contacts.js';
|
|
2
|
+
export { PdOrderSummary } from './pd-order-summary/pd-order-summary.js';
|
|
3
3
|
export type { PdOrderContactData, PdOrderStep } from './types.js';
|
|
4
4
|
export { templates as beTemplates } from './generated/locales/be.js';
|
|
5
5
|
export { templates as deTemplates } from './generated/locales/de.js';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAExE,YAAY,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAElE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
export {
|
|
7
|
-
|
|
8
|
-
PdOrderSummary,
|
|
9
|
-
templates as beTemplates,
|
|
10
|
-
templates2 as deTemplates,
|
|
11
|
-
templates3 as enTemplates
|
|
12
|
-
};
|
|
1
|
+
import './pd-order-contacts.js';
|
|
2
|
+
import './pd-order-summary.js';
|
|
3
|
+
export { templates as beTemplates } from './locales/be.js';
|
|
4
|
+
export { templates as deTemplates } from './locales/de.js';
|
|
5
|
+
export { templates as enTemplates } from './locales/en.js';
|
|
6
|
+
export { PdOrderContacts } from './pd-order-contacts/PdOrderContacts.js';
|
|
7
|
+
export { PdOrderSummary } from './pd-order-summary/PdOrderSummary.js';
|
package/dist/locales/be.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import { html } from "lit";
|
|
2
1
|
const templates = {
|
|
3
2
|
"pd.order.contacts.billingContact.inputHeader": `Facturatieadres`,
|
|
4
3
|
"pd.order.contacts.orderContact.inputHeader": `Adres`,
|
|
5
4
|
"pd.order.contacts.propertyContact.checkBox": `Is de klant een verhuurder?`,
|
|
6
|
-
"pd.order.summary.agree.
|
|
7
|
-
|
|
5
|
+
"pd.order.summary.agree.link1": `Ik aanvaard de`,
|
|
6
|
+
"pd.order.summary.agree.link2": `Algemene voorwaarden`,
|
|
8
7
|
"pd.order.summary.agree.required": `Ga akkoord met de algemene voorwaarden om verder te gaan.`,
|
|
9
8
|
"pd.order.summary.billing": `Factuur`,
|
|
10
9
|
"pd.order.summary.title": `Overzicht`,
|
|
@@ -21,6 +20,5 @@ const templates = {
|
|
|
21
20
|
se1b4ea2cbb1f9bb4: `Immobilie`,
|
|
22
21
|
s3be4da85df39b1c2: `Verwaltung`
|
|
23
22
|
};
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
};
|
|
23
|
+
|
|
24
|
+
export { templates };
|
package/dist/locales/de.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { html } from "lit";
|
|
2
1
|
const templates = {
|
|
3
2
|
"pd.order.contacts.orderContact.inputHeader": `Adresse`,
|
|
4
3
|
"pd.order.contacts.billingContact.inputHeader": `Rechnungsadresse (optional)`,
|
|
@@ -18,10 +17,8 @@ const templates = {
|
|
|
18
17
|
"pd.order.summary.title": `Übersicht`,
|
|
19
18
|
"pd.order.summary.billing": `Rechnung`,
|
|
20
19
|
"pd.order.summary.agree.required": `Bitte stimmen Sie den Allgemeinen Geschäftsbedingungen zu, um fortzufahren.`,
|
|
21
|
-
"pd.order.summary.agree.
|
|
22
|
-
|
|
23
|
-
zu`
|
|
24
|
-
};
|
|
25
|
-
export {
|
|
26
|
-
templates
|
|
20
|
+
"pd.order.summary.agree.link1": `Ich akzeptiere die`,
|
|
21
|
+
"pd.order.summary.agree.link2": `Allgemeinen Geschäftsbedingungen`
|
|
27
22
|
};
|
|
23
|
+
|
|
24
|
+
export { templates };
|
package/dist/locales/en.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import { html } from "lit";
|
|
2
1
|
const templates = {
|
|
3
2
|
"pd.order.contacts.billingContact.inputHeader": `Billing Address`,
|
|
4
3
|
"pd.order.contacts.orderContact.inputHeader": `Address`,
|
|
5
4
|
"pd.order.contacts.propertyContact.checkBox": `Is the customer a landlord?`,
|
|
6
|
-
"pd.order.summary.agree.
|
|
7
|
-
|
|
5
|
+
"pd.order.summary.agree.link1": `I accept the`,
|
|
6
|
+
"pd.order.summary.agree.link2": `Terms and Conditions`,
|
|
8
7
|
"pd.order.summary.agree.required": `Please agree to the terms and conditions to proceed.`,
|
|
9
8
|
"pd.order.summary.billing": `Invoice`,
|
|
10
9
|
"pd.order.summary.title": `Overview`,
|
|
@@ -21,6 +20,5 @@ const templates = {
|
|
|
21
20
|
se1b4ea2cbb1f9bb4: `Immobilie`,
|
|
22
21
|
s3be4da85df39b1c2: `Verwaltung`
|
|
23
22
|
};
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
};
|
|
23
|
+
|
|
24
|
+
export { templates };
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { LitElement, CSSResultGroup, PropertyValues } from 'lit';
|
|
2
|
+
import { PdContactData, PdContactMatch } from '@progressive-development/pd-contact';
|
|
3
|
+
/**
|
|
4
|
+
* Renders and manages contact input sections for order processing.
|
|
5
|
+
* Supports optional billing address, property owner info and admin contact.
|
|
6
|
+
*
|
|
7
|
+
* @fires validate-form - Triggers validation of embedded contact components.
|
|
8
|
+
* @slot - General slot
|
|
9
|
+
* @tagname pd-order-contacts
|
|
10
|
+
*/
|
|
11
|
+
export declare class PdOrderContacts extends LitElement {
|
|
12
|
+
/** Zeigt die Komponente im Zusammenfassungsmodus (read-only) */
|
|
13
|
+
summary: boolean;
|
|
14
|
+
/** Überschriften für die einzelnen Kontaktsektionen */
|
|
15
|
+
contactTitle: Record<string, string>;
|
|
16
|
+
/** Liste erforderlicher Eingabefelder je Kontakt (z.B. ['street', 'zip']) */
|
|
17
|
+
requiredFields: string[];
|
|
18
|
+
/** Kontaktadresse des Auftraggebers */
|
|
19
|
+
orderContact?: PdContactData;
|
|
20
|
+
/** Optionale separate Rechnungsadresse */
|
|
21
|
+
billingContact?: PdContactData;
|
|
22
|
+
/** Optionale Verwaltungsadresse */
|
|
23
|
+
adminContact?: PdContactData;
|
|
24
|
+
/** Adresse der Immobilie, falls abweichend */
|
|
25
|
+
propertyContact?: PdContactData;
|
|
26
|
+
/** Aktiviert die Option zur separaten Rechnungsadresse */
|
|
27
|
+
withPayment: boolean;
|
|
28
|
+
/** Aktiviert die Option zur Verwaltung von Vermieterinformationen */
|
|
29
|
+
withPropertyOwner: boolean;
|
|
30
|
+
withPropertyDate: boolean;
|
|
31
|
+
/** Optionaler Match-Parameter zur Feldvalidierung oder Mapping-Zwecken */
|
|
32
|
+
match?: PdContactMatch;
|
|
33
|
+
private _ownBillingContact;
|
|
34
|
+
private _ownAdminContact;
|
|
35
|
+
private _isPropertyOwner;
|
|
36
|
+
static styles: CSSResultGroup;
|
|
37
|
+
update(changedProps: PropertyValues<this>): void;
|
|
38
|
+
protected render(): import('lit').TemplateResult<1>;
|
|
39
|
+
private _renderEditContacts;
|
|
40
|
+
private _renderSummary;
|
|
41
|
+
get valid(): boolean;
|
|
42
|
+
triggerValidate(): Promise<boolean>;
|
|
43
|
+
getValues(): any;
|
|
44
|
+
private _getCollapseMap;
|
|
45
|
+
}
|
|
46
|
+
//# sourceMappingURL=PdOrderContacts.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PdOrderContacts.d.ts","sourceRoot":"","sources":["../../src/pd-order-contacts/PdOrderContacts.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAIV,cAAc,EACd,cAAc,EACf,MAAM,KAAK,CAAC;AAIb,OAAO,uDAAuD,CAAC;AAC/D,OAAO,iDAAiD,CAAC;AACzD,OAAO,gDAAgD,CAAC;AACxD,OAAO,+CAA+C,CAAC;AAIvD,OAAO,EAEL,aAAa,EACb,cAAc,EACf,MAAM,qCAAqC,CAAC;AAE7C;;;;;;;GAOG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,gEAAgE;IAEhE,OAAO,UAAS;IAEhB,uDAAuD;IAEvD,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IAE1C,6EAA6E;IAE7E,cAAc,EAAE,MAAM,EAAE,CAAM;IAE9B,uCAAuC;IAEvC,YAAY,CAAC,EAAE,aAAa,CAAC;IAE7B,0CAA0C;IAE1C,cAAc,CAAC,EAAE,aAAa,CAAC;IAE/B,mCAAmC;IAEnC,YAAY,CAAC,EAAE,aAAa,CAAC;IAE7B,8CAA8C;IAE9C,eAAe,CAAC,EAAE,aAAa,CAAC;IAEhC,0DAA0D;IAE1D,WAAW,UAAS;IAEpB,qEAAqE;IAErE,iBAAiB,UAAS;IAG1B,gBAAgB,UAAS;IAEzB,0EAA0E;IAE1E,KAAK,CAAC,EAAE,cAAc,CAAC;IAGvB,OAAO,CAAC,kBAAkB,CAAS;IAGnC,OAAO,CAAC,gBAAgB,CAAS;IAGjC,OAAO,CAAC,gBAAgB,CAAS;IAEjC,OAAgB,MAAM,EAAE,cAAc,CA+CpC;IAEO,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAazD,SAAS,CAAC,MAAM;IAIhB,OAAO,CAAC,mBAAmB;IAiK3B,OAAO,CAAC,cAAc;IA+CtB,IAAI,KAAK,IAAI,OAAO,CASnB;IAEY,eAAe,IAAI,OAAO,CAAC,OAAO,CAAC;IAkCzC,SAAS;IAWhB,OAAO,CAAC,eAAe;CAoBxB"}
|
|
@@ -0,0 +1,383 @@
|
|
|
1
|
+
import { css, LitElement, nothing, html } from 'lit';
|
|
2
|
+
import { property, state } from 'lit/decorators.js';
|
|
3
|
+
import { localized, msg } from '@lit/localize';
|
|
4
|
+
import '@progressive-development/pd-content/pd-collapse-group';
|
|
5
|
+
import '@progressive-development/pd-content/pd-collapse';
|
|
6
|
+
import '@progressive-development/pd-contact/pd-contact';
|
|
7
|
+
import '@progressive-development/pd-forms/pd-checkbox';
|
|
8
|
+
|
|
9
|
+
var __defProp = Object.defineProperty;
|
|
10
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
11
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
12
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
13
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
14
|
+
if (decorator = decorators[i])
|
|
15
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
16
|
+
if (kind && result) __defProp(target, key, result);
|
|
17
|
+
return result;
|
|
18
|
+
};
|
|
19
|
+
let PdOrderContacts = class extends LitElement {
|
|
20
|
+
constructor() {
|
|
21
|
+
super(...arguments);
|
|
22
|
+
this.summary = false;
|
|
23
|
+
this.contactTitle = {};
|
|
24
|
+
this.requiredFields = [];
|
|
25
|
+
this.withPayment = false;
|
|
26
|
+
this.withPropertyOwner = false;
|
|
27
|
+
this.withPropertyDate = false;
|
|
28
|
+
this._ownBillingContact = false;
|
|
29
|
+
this._ownAdminContact = false;
|
|
30
|
+
this._isPropertyOwner = false;
|
|
31
|
+
}
|
|
32
|
+
update(changedProps) {
|
|
33
|
+
if (changedProps.has("billingContact")) {
|
|
34
|
+
this._ownBillingContact = !!this.billingContact;
|
|
35
|
+
}
|
|
36
|
+
if (changedProps.has("adminContact")) {
|
|
37
|
+
this._ownAdminContact = !!this.adminContact;
|
|
38
|
+
}
|
|
39
|
+
if (changedProps.has("propertyContact")) {
|
|
40
|
+
this._isPropertyOwner = !!this.propertyContact;
|
|
41
|
+
}
|
|
42
|
+
super.update(changedProps);
|
|
43
|
+
}
|
|
44
|
+
render() {
|
|
45
|
+
return this.summary ? this._renderSummary() : this._renderEditContacts();
|
|
46
|
+
}
|
|
47
|
+
_renderEditContacts() {
|
|
48
|
+
return html`
|
|
49
|
+
<pd-collapse-group>
|
|
50
|
+
<pd-collapse id="orderContactCollapseId">
|
|
51
|
+
<div slot="header">
|
|
52
|
+
${this.contactTitle.orderInputContact ?? msg("Adresse", {
|
|
53
|
+
id: "pd.order.contacts.orderContact.inputHeader"
|
|
54
|
+
})}
|
|
55
|
+
</div>
|
|
56
|
+
<pd-contact
|
|
57
|
+
id="orderContactId"
|
|
58
|
+
class="collapse-contact"
|
|
59
|
+
slot="content"
|
|
60
|
+
.requiredFields="${this.requiredFields}"
|
|
61
|
+
.contact="${this.orderContact}"
|
|
62
|
+
.match="${this.match}"
|
|
63
|
+
?withPropertyDate="${!this._isPropertyOwner && this.withPropertyDate}"
|
|
64
|
+
></pd-contact>
|
|
65
|
+
</pd-collapse>
|
|
66
|
+
|
|
67
|
+
${this.withPayment ? html`
|
|
68
|
+
<pd-collapse id="billingContactCollapseId">
|
|
69
|
+
<div slot="header">
|
|
70
|
+
${this.contactTitle.billingInputContact ?? msg("Rechnungsadresse (optional)", {
|
|
71
|
+
id: "pd.order.contacts.billingContact.inputHeader"
|
|
72
|
+
})}
|
|
73
|
+
</div>
|
|
74
|
+
<div slot="content">
|
|
75
|
+
${this._ownBillingContact ? html`
|
|
76
|
+
<p>
|
|
77
|
+
<a @click="${() => this._ownBillingContact = false}"
|
|
78
|
+
>${msg(
|
|
79
|
+
"Kundenadresse als Rechnungsadresse verwenden"
|
|
80
|
+
)}</a
|
|
81
|
+
>
|
|
82
|
+
</p>
|
|
83
|
+
<pd-contact
|
|
84
|
+
id="billingContactId"
|
|
85
|
+
class="collapse-contact"
|
|
86
|
+
.requiredFields="${this.requiredFields}"
|
|
87
|
+
.contact="${this.billingContact}"
|
|
88
|
+
></pd-contact>
|
|
89
|
+
` : html`
|
|
90
|
+
<p>
|
|
91
|
+
${msg(
|
|
92
|
+
"Rechnungsadresse entspricht der Kundenadresse."
|
|
93
|
+
)}
|
|
94
|
+
</p>
|
|
95
|
+
<p>
|
|
96
|
+
<a @click=${() => this._ownBillingContact = true}
|
|
97
|
+
>${msg("Neue Rechnungsadresse hinzufügen")}</a
|
|
98
|
+
>
|
|
99
|
+
</p>
|
|
100
|
+
`}
|
|
101
|
+
</div>
|
|
102
|
+
</pd-collapse>
|
|
103
|
+
` : nothing}
|
|
104
|
+
${this.withPropertyOwner ? html`
|
|
105
|
+
<div class="property-owner-box">
|
|
106
|
+
<pd-checkbox
|
|
107
|
+
id="isPropertyOwnerId"
|
|
108
|
+
initValue="${this._isPropertyOwner}"
|
|
109
|
+
@pd-form-element-change="${(e) => {
|
|
110
|
+
this._isPropertyOwner = e.detail.value === "true";
|
|
111
|
+
}}"
|
|
112
|
+
>
|
|
113
|
+
${msg("Ist der Kunde Vermieter?", {
|
|
114
|
+
id: "pd.order.contacts.propertyContact.checkBox"
|
|
115
|
+
})}
|
|
116
|
+
</pd-checkbox>
|
|
117
|
+
|
|
118
|
+
${this._isPropertyOwner ? html`
|
|
119
|
+
<pd-collapse
|
|
120
|
+
id="propertyContactCollapseId"
|
|
121
|
+
style="padding-top: 20px;"
|
|
122
|
+
>
|
|
123
|
+
<div slot="header">
|
|
124
|
+
${this.contactTitle.propertyInputContact ?? msg("Adresse der Immobilie")}
|
|
125
|
+
</div>
|
|
126
|
+
<div slot="content">
|
|
127
|
+
<pd-contact
|
|
128
|
+
id="propertyContactId"
|
|
129
|
+
class="collapse-contact"
|
|
130
|
+
.requiredFields="${[
|
|
131
|
+
"street",
|
|
132
|
+
"streetNr",
|
|
133
|
+
"zip",
|
|
134
|
+
"city"
|
|
135
|
+
]}"
|
|
136
|
+
.inputFields="${[
|
|
137
|
+
"street",
|
|
138
|
+
"city",
|
|
139
|
+
"additionalHint"
|
|
140
|
+
]}"
|
|
141
|
+
.contact="${this.propertyContact}"
|
|
142
|
+
?withPropertyDate="${this.withPropertyDate}"
|
|
143
|
+
></pd-contact>
|
|
144
|
+
</div>
|
|
145
|
+
</pd-collapse>
|
|
146
|
+
|
|
147
|
+
<pd-collapse id="adminContactCollapseId">
|
|
148
|
+
<div slot="header">
|
|
149
|
+
${this.contactTitle.adminInputContact ?? msg("Adresse der Verwaltung (optional)")}
|
|
150
|
+
</div>
|
|
151
|
+
<div slot="content">
|
|
152
|
+
${this._ownAdminContact ? html`
|
|
153
|
+
<p>
|
|
154
|
+
<a
|
|
155
|
+
@click="${() => this._ownAdminContact = false}"
|
|
156
|
+
>${msg(
|
|
157
|
+
"Kundenadresse als Verwaltungsadresse verwenden"
|
|
158
|
+
)}</a
|
|
159
|
+
>
|
|
160
|
+
</p>
|
|
161
|
+
<pd-contact
|
|
162
|
+
id="adminContactId"
|
|
163
|
+
class="collapse-contact"
|
|
164
|
+
.requiredFields="${this.requiredFields}"
|
|
165
|
+
.contact="${this.adminContact}"
|
|
166
|
+
></pd-contact>
|
|
167
|
+
` : html`
|
|
168
|
+
<p>
|
|
169
|
+
${msg(
|
|
170
|
+
"Verwaltungsadresse entspricht der Kundenadresse."
|
|
171
|
+
)}
|
|
172
|
+
</p>
|
|
173
|
+
<p>
|
|
174
|
+
<a
|
|
175
|
+
@click="${() => this._ownAdminContact = true}"
|
|
176
|
+
>${msg(
|
|
177
|
+
"Neue Verwaltungsadresse hinzufügen"
|
|
178
|
+
)}</a
|
|
179
|
+
>
|
|
180
|
+
</p>
|
|
181
|
+
`}
|
|
182
|
+
</div>
|
|
183
|
+
</pd-collapse>
|
|
184
|
+
` : nothing}
|
|
185
|
+
</div>
|
|
186
|
+
` : nothing}
|
|
187
|
+
</pd-collapse-group>
|
|
188
|
+
`;
|
|
189
|
+
}
|
|
190
|
+
_renderSummary() {
|
|
191
|
+
return html`
|
|
192
|
+
<div class="summary-box">
|
|
193
|
+
${this.orderContact ? html`
|
|
194
|
+
<pd-contact
|
|
195
|
+
addressTitle="${this.contactTitle.orderSummaryContact ?? msg("Adresse")}"
|
|
196
|
+
.contact="${this.orderContact}"
|
|
197
|
+
summary
|
|
198
|
+
></pd-contact>
|
|
199
|
+
` : nothing}
|
|
200
|
+
${this.billingContact ? html`
|
|
201
|
+
<pd-contact
|
|
202
|
+
addressTitle="${this.contactTitle.billingSummaryContact ?? msg("Rechnungsadresse")}"
|
|
203
|
+
.contact="${this.billingContact}"
|
|
204
|
+
summary
|
|
205
|
+
></pd-contact>
|
|
206
|
+
` : nothing}
|
|
207
|
+
${this.propertyContact ? html`
|
|
208
|
+
<pd-contact
|
|
209
|
+
addressTitle="${this.contactTitle.propertySummaryContact ?? msg("Immobilie")}"
|
|
210
|
+
.contact="${this.propertyContact}"
|
|
211
|
+
summary
|
|
212
|
+
></pd-contact>
|
|
213
|
+
` : nothing}
|
|
214
|
+
${this.adminContact ? html`
|
|
215
|
+
<pd-contact
|
|
216
|
+
addressTitle="${this.contactTitle.adminSummaryContact ?? msg("Verwaltung")}"
|
|
217
|
+
.contact="${this.adminContact}"
|
|
218
|
+
summary
|
|
219
|
+
></pd-contact>
|
|
220
|
+
` : nothing}
|
|
221
|
+
</div>
|
|
222
|
+
`;
|
|
223
|
+
}
|
|
224
|
+
get valid() {
|
|
225
|
+
for (const { id, condition = true } of this._getCollapseMap()) {
|
|
226
|
+
if (!condition) continue;
|
|
227
|
+
const element = this.shadowRoot?.getElementById(id);
|
|
228
|
+
if (!element?.valid) {
|
|
229
|
+
return false;
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
return true;
|
|
233
|
+
}
|
|
234
|
+
async triggerValidate() {
|
|
235
|
+
let firstInvalidCollapseId = null;
|
|
236
|
+
const collapseMap = this._getCollapseMap();
|
|
237
|
+
console.log("Map: ", collapseMap);
|
|
238
|
+
for (const { id, collapse, condition = true } of collapseMap) {
|
|
239
|
+
if (!condition) continue;
|
|
240
|
+
const element = this.shadowRoot?.getElementById(id);
|
|
241
|
+
if (!element) continue;
|
|
242
|
+
const result = await element.triggerValidate();
|
|
243
|
+
console.log("PdContact triggerValidate: ", result);
|
|
244
|
+
if (!result && !firstInvalidCollapseId) {
|
|
245
|
+
firstInvalidCollapseId = collapse;
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
if (firstInvalidCollapseId) {
|
|
249
|
+
console.log("PdContact open failed: ", firstInvalidCollapseId);
|
|
250
|
+
const collapseEl = this.shadowRoot?.getElementById(
|
|
251
|
+
firstInvalidCollapseId
|
|
252
|
+
);
|
|
253
|
+
if (collapseEl) {
|
|
254
|
+
collapseEl.active = true;
|
|
255
|
+
}
|
|
256
|
+
return false;
|
|
257
|
+
}
|
|
258
|
+
return true;
|
|
259
|
+
}
|
|
260
|
+
getValues() {
|
|
261
|
+
const contactValues = {};
|
|
262
|
+
for (const { id, condition = true } of this._getCollapseMap()) {
|
|
263
|
+
if (!condition) continue;
|
|
264
|
+
contactValues[id] = this.shadowRoot?.getElementById(id)?.getValues();
|
|
265
|
+
}
|
|
266
|
+
return contactValues;
|
|
267
|
+
}
|
|
268
|
+
_getCollapseMap() {
|
|
269
|
+
return [
|
|
270
|
+
{ id: "orderContactId", collapse: "orderContactCollapseId" },
|
|
271
|
+
{
|
|
272
|
+
id: "billingContactId",
|
|
273
|
+
collapse: "billingContactCollapseId",
|
|
274
|
+
condition: this._ownBillingContact
|
|
275
|
+
},
|
|
276
|
+
{
|
|
277
|
+
id: "propertyContactId",
|
|
278
|
+
collapse: "propertyContactCollapseId",
|
|
279
|
+
condition: this._isPropertyOwner
|
|
280
|
+
},
|
|
281
|
+
{
|
|
282
|
+
id: "adminContactId",
|
|
283
|
+
collapse: "adminContactCollapseId",
|
|
284
|
+
condition: this._isPropertyOwner && this._ownAdminContact
|
|
285
|
+
}
|
|
286
|
+
];
|
|
287
|
+
}
|
|
288
|
+
};
|
|
289
|
+
PdOrderContacts.styles = [
|
|
290
|
+
css`
|
|
291
|
+
:host {
|
|
292
|
+
display: block;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
p {
|
|
296
|
+
color: var(--pd-default-font-content-col);
|
|
297
|
+
font-size: var(--pd-default-font-content-size);
|
|
298
|
+
font-family: var(--pd-default-font-content-family);
|
|
299
|
+
max-width: 1000px;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
a {
|
|
303
|
+
cursor: pointer;
|
|
304
|
+
font-family: var(--pd-default-font-link-family);
|
|
305
|
+
font-size: var(--pd-default-font-link-size);
|
|
306
|
+
color: var(--pd-default-font-link-col);
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
a:hover {
|
|
310
|
+
color: var(--pd-default-font-link-col-hover);
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.collapse-contact {
|
|
314
|
+
padding: 10px;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
.summary-box {
|
|
318
|
+
display: flex;
|
|
319
|
+
flex-wrap: wrap;
|
|
320
|
+
gap: 10px;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.summary-box pd-contact {
|
|
324
|
+
min-width: 150px;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.property-owner-box {
|
|
328
|
+
border: 2px solid #007b8f;
|
|
329
|
+
border-radius: 8px;
|
|
330
|
+
padding: 16px;
|
|
331
|
+
margin: 16px 0;
|
|
332
|
+
background-color: #f8fafb;
|
|
333
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
334
|
+
}
|
|
335
|
+
`
|
|
336
|
+
];
|
|
337
|
+
__decorateClass([
|
|
338
|
+
property({ type: Boolean })
|
|
339
|
+
], PdOrderContacts.prototype, "summary", 2);
|
|
340
|
+
__decorateClass([
|
|
341
|
+
property({ type: Object })
|
|
342
|
+
], PdOrderContacts.prototype, "contactTitle", 2);
|
|
343
|
+
__decorateClass([
|
|
344
|
+
property({ type: Array })
|
|
345
|
+
], PdOrderContacts.prototype, "requiredFields", 2);
|
|
346
|
+
__decorateClass([
|
|
347
|
+
property({ type: Object })
|
|
348
|
+
], PdOrderContacts.prototype, "orderContact", 2);
|
|
349
|
+
__decorateClass([
|
|
350
|
+
property({ type: Object })
|
|
351
|
+
], PdOrderContacts.prototype, "billingContact", 2);
|
|
352
|
+
__decorateClass([
|
|
353
|
+
property({ type: Object })
|
|
354
|
+
], PdOrderContacts.prototype, "adminContact", 2);
|
|
355
|
+
__decorateClass([
|
|
356
|
+
property({ type: Object })
|
|
357
|
+
], PdOrderContacts.prototype, "propertyContact", 2);
|
|
358
|
+
__decorateClass([
|
|
359
|
+
property({ type: Boolean })
|
|
360
|
+
], PdOrderContacts.prototype, "withPayment", 2);
|
|
361
|
+
__decorateClass([
|
|
362
|
+
property({ type: Boolean })
|
|
363
|
+
], PdOrderContacts.prototype, "withPropertyOwner", 2);
|
|
364
|
+
__decorateClass([
|
|
365
|
+
property({ type: Boolean })
|
|
366
|
+
], PdOrderContacts.prototype, "withPropertyDate", 2);
|
|
367
|
+
__decorateClass([
|
|
368
|
+
property({ type: Object })
|
|
369
|
+
], PdOrderContacts.prototype, "match", 2);
|
|
370
|
+
__decorateClass([
|
|
371
|
+
state()
|
|
372
|
+
], PdOrderContacts.prototype, "_ownBillingContact", 2);
|
|
373
|
+
__decorateClass([
|
|
374
|
+
state()
|
|
375
|
+
], PdOrderContacts.prototype, "_ownAdminContact", 2);
|
|
376
|
+
__decorateClass([
|
|
377
|
+
state()
|
|
378
|
+
], PdOrderContacts.prototype, "_isPropertyOwner", 2);
|
|
379
|
+
PdOrderContacts = __decorateClass([
|
|
380
|
+
localized()
|
|
381
|
+
], PdOrderContacts);
|
|
382
|
+
|
|
383
|
+
export { PdOrderContacts };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pd-order-contacts.d.ts","sourceRoot":"","sources":["../../src/pd-order-contacts/pd-order-contacts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAOvD,OAAO,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Meta, StoryFn } from '@storybook/web-components';
|
|
2
|
-
import { PdOrderContacts } from '
|
|
2
|
+
import { PdOrderContacts } from './pd-order-contacts';
|
|
3
3
|
declare const _default: Meta<PdOrderContacts>;
|
|
4
4
|
export default _default;
|
|
5
5
|
export declare const Default: StoryFn<PdOrderContacts>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pd-order-contacts.stories.d.ts","sourceRoot":"","sources":["../../src/pd-order-contacts/pd-order-contacts.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,qBAAqB,CAAC;wBAMxB,IAAI,CAAC,eAAe,CAAC;AAJ1B,wBAI2B;AA8E3B,eAAO,MAAM,OAAO,0BAAoB,CAAC;AAKzC,eAAO,MAAM,gBAAgB,0BAAoB,CAAC;AAMlD,eAAO,MAAM,cAAc,0BAAoB,CAAC;AAiBhD,eAAO,MAAM,WAAW,0BAAoB,CAAC;AAM7C,eAAO,MAAM,mBAAmB,0BAAoB,CAAC;AAOrD,eAAO,MAAM,4BAA4B,0BAAoB,CAAC;AAQ9D,eAAO,MAAM,QAAQ,0BAAoB,CAAC;AAM1C,eAAO,MAAM,eAAe,0BAAoB,CAAC;AAOjD,eAAO,MAAM,uBAAuB,0BAAoB,CAAC;AASzD,eAAO,MAAM,MAAM,0BAAoB,CAAC;AAQxC,eAAO,MAAM,eAAe,0BAAoB,CAAC;AAWjD,eAAO,MAAM,sBAAsB,0BAAoB,CAAC"}
|
|
@@ -1,45 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Renders and manages contact input sections for order processing.
|
|
5
|
-
* Supports optional billing address, property owner info and admin contact.
|
|
6
|
-
*
|
|
7
|
-
* @fires validate-form - Triggers validation of embedded contact components.
|
|
8
|
-
* @slot - General slot
|
|
9
|
-
*/
|
|
10
|
-
export declare class PdOrderContacts extends LitElement {
|
|
11
|
-
/** Zeigt die Komponente im Zusammenfassungsmodus (read-only) */
|
|
12
|
-
summary: boolean;
|
|
13
|
-
/** Überschriften für die einzelnen Kontaktsektionen */
|
|
14
|
-
contactTitle: Record<string, string>;
|
|
15
|
-
/** Liste erforderlicher Eingabefelder je Kontakt (z.B. ['street', 'zip']) */
|
|
16
|
-
requiredFields: string[];
|
|
17
|
-
/** Kontaktadresse des Auftraggebers */
|
|
18
|
-
orderContact?: PdContactData;
|
|
19
|
-
/** Optionale separate Rechnungsadresse */
|
|
20
|
-
billingContact?: PdContactData;
|
|
21
|
-
/** Optionale Verwaltungsadresse */
|
|
22
|
-
adminContact?: PdContactData;
|
|
23
|
-
/** Adresse der Immobilie, falls abweichend */
|
|
24
|
-
propertyContact?: PdContactData;
|
|
25
|
-
/** Aktiviert die Option zur separaten Rechnungsadresse */
|
|
26
|
-
withPayment: boolean;
|
|
27
|
-
/** Aktiviert die Option zur Verwaltung von Vermieterinformationen */
|
|
28
|
-
withPropertyOwner: boolean;
|
|
29
|
-
withPropertyDate: boolean;
|
|
30
|
-
/** Optionaler Match-Parameter zur Feldvalidierung oder Mapping-Zwecken */
|
|
31
|
-
match?: PdContactMatch;
|
|
32
|
-
private _ownBillingContact;
|
|
33
|
-
private _ownAdminContact;
|
|
34
|
-
private _isPropertyOwner;
|
|
35
|
-
static styles: CSSResultGroup;
|
|
36
|
-
update(changedProps: PropertyValues<this>): void;
|
|
37
|
-
protected render(): import('lit-html').TemplateResult<1>;
|
|
38
|
-
private _renderEditContacts;
|
|
39
|
-
private _renderSummary;
|
|
40
|
-
get valid(): boolean;
|
|
41
|
-
triggerValidate(): Promise<boolean>;
|
|
42
|
-
getValues(): any;
|
|
43
|
-
private _getCollapseMap;
|
|
44
|
-
}
|
|
45
|
-
//# sourceMappingURL=pd-order-contacts.d.ts.map
|
|
1
|
+
export * from './pd-order-contacts/pd-order-contacts'
|
|
2
|
+
export {}
|