@progressive-development/pd-order 0.5.17 → 0.6.1

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.
@@ -1,4 +1,360 @@
1
- import { PdOrderContacts } from "./src/PdOrderContacts.js";
2
- if (!customElements.get("pd-order-contacts")) {
3
- window.customElements.define("pd-order-contacts", PdOrderContacts);
4
- }
1
+ import { css, LitElement, nothing, html } from "lit";
2
+ import { property, state, customElement } from "lit/decorators.js";
3
+ import { localized, msg } from "@lit/localize";
4
+ import "@progressive-development/pd-content/pd-collapse";
5
+ import "@progressive-development/pd-contact/pd-contact";
6
+ import "@progressive-development/pd-forms/pd-checkbox";
7
+ import "@progressive-development/pd-forms/pd-form-row";
8
+ import "@progressive-development/pd-forms/pd-radio-group";
9
+ import { PdFontStyles } from "@progressive-development/pd-shared-styles";
10
+ var __defProp = Object.defineProperty;
11
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
12
+ var __decorateClass = (decorators, target, key, kind) => {
13
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
14
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
15
+ if (decorator = decorators[i])
16
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
17
+ if (kind && result) __defProp(target, key, result);
18
+ return result;
19
+ };
20
+ let PdOrderContacts = class extends LitElement {
21
+ constructor() {
22
+ super(...arguments);
23
+ this.summary = false;
24
+ this.contactTitle = {};
25
+ this.requiredFields = [];
26
+ this.withPayment = false;
27
+ this.withPropertyOwner = false;
28
+ this.withPropertyDate = false;
29
+ this._ownBillingContact = false;
30
+ this._ownAdminContact = false;
31
+ this._isPropertyOwner = false;
32
+ }
33
+ connectedCallback() {
34
+ super.connectedCallback();
35
+ this.addEventListener("validate-form", this._validateForm);
36
+ }
37
+ disconnectedCallback() {
38
+ super.disconnectedCallback();
39
+ this.removeEventListener(
40
+ "validate-form",
41
+ this._validateForm
42
+ );
43
+ }
44
+ firstUpdated() {
45
+ this.addEventListener("toggle-accordion", (e) => {
46
+ var _a;
47
+ const origin = e.composedPath()[0];
48
+ (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll("pd-collapse").forEach((el) => {
49
+ if (el !== origin) el.close();
50
+ });
51
+ });
52
+ }
53
+ updated(changed) {
54
+ if (changed.has("billingContact")) {
55
+ this._ownBillingContact = !!this.billingContact;
56
+ }
57
+ if (changed.has("adminContact")) {
58
+ this._ownAdminContact = !!this.adminContact;
59
+ }
60
+ if (changed.has("propertyContact")) {
61
+ this._isPropertyOwner = !!this.propertyContact;
62
+ }
63
+ }
64
+ render() {
65
+ return this.summary ? this._renderSummary() : this._renderEditContacts();
66
+ }
67
+ _renderEditContacts() {
68
+ return html`
69
+ <pd-collapse id="orderContactCollapseId" active>
70
+ <div slot="header">
71
+ ${this.contactTitle.orderInputContact ?? msg("Adresse", { id: "pd.order.contacts.orderContact.inputHeader" })}
72
+ </div>
73
+ <pd-contact
74
+ id="orderContactId"
75
+ class="collapse-contact"
76
+ slot="content"
77
+ .requiredFields=${this.requiredFields}
78
+ .contact=${this.orderContact}
79
+ .match=${this.match}
80
+ ?withPropertyDate=${!this._isPropertyOwner && this.withPropertyDate}
81
+ ></pd-contact>
82
+ </pd-collapse>
83
+
84
+ ${this.withPayment ? html`
85
+ <pd-collapse id="billingContactCollapseId">
86
+ <div slot="header">
87
+ ${this.contactTitle.billingInputContact ?? msg("Rechnungsadresse (optional)", {
88
+ id: "pd.order.contacts.billingContact.inputHeader"
89
+ })}
90
+ </div>
91
+ <div slot="content">
92
+ ${this._ownBillingContact ? html`
93
+ <p>
94
+ <a @click=${() => this._ownBillingContact = false}
95
+ >${msg(
96
+ "Kundenadresse als Rechnungsadresse verwenden"
97
+ )}</a
98
+ >
99
+ </p>
100
+ <pd-contact
101
+ id="billingContactId"
102
+ class="collapse-contact"
103
+ .requiredFields=${this.requiredFields}
104
+ .contact=${this.billingContact}
105
+ ></pd-contact>
106
+ ` : html`
107
+ <p>
108
+ ${msg("Rechnungsadresse entspricht der Kundenadresse.")}
109
+ </p>
110
+ <p>
111
+ <a @click=${() => this._ownBillingContact = true}
112
+ >${msg("Neue Rechnungsadresse hinzufügen")}</a
113
+ >
114
+ </p>
115
+ `}
116
+ </div>
117
+ </pd-collapse>
118
+ ` : nothing}
119
+ ${this.withPropertyOwner ? html`
120
+ <div class="property-owner-box">
121
+ <pd-checkbox
122
+ id="isPropertyOwnerId"
123
+ .value=${this._isPropertyOwner}
124
+ @field-change=${(e) => this._isPropertyOwner = e.detail.value === "true"}
125
+ >
126
+ ${msg("Ist der Kunde Vermieter?", {
127
+ id: "pd.order.contacts.propertyContact.checkBox"
128
+ })}
129
+ </pd-checkbox>
130
+
131
+ ${this._isPropertyOwner ? html`
132
+ <pd-collapse
133
+ id="propertyContactCollapseId"
134
+ style="padding-top: 20px;"
135
+ >
136
+ <div slot="header">
137
+ ${this.contactTitle.propertyInputContact ?? msg("Adresse der Immobilie")}
138
+ </div>
139
+ <div slot="content">
140
+ <pd-contact
141
+ id="propertyContactId"
142
+ class="collapse-contact"
143
+ .requiredFields=${[
144
+ "street",
145
+ "streetNr",
146
+ "zip",
147
+ "city"
148
+ ]}
149
+ .inputFields=${["street", "city", "additionalHint"]}
150
+ .contact=${this.propertyContact}
151
+ ?withPropertyDate=${this.withPropertyDate}
152
+ ></pd-contact>
153
+ </div>
154
+ </pd-collapse>
155
+
156
+ <pd-collapse id="adminContactCollapseId">
157
+ <div slot="header">
158
+ ${this.contactTitle.adminInputContact ?? msg("Adresse der Verwaltung (optional)")}
159
+ </div>
160
+ <div slot="content">
161
+ ${this._ownAdminContact ? html`
162
+ <p>
163
+ <a
164
+ @click=${() => this._ownAdminContact = false}
165
+ >${msg(
166
+ "Kundenadresse als Verwaltungsadresse verwenden"
167
+ )}</a
168
+ >
169
+ </p>
170
+ <pd-contact
171
+ id="adminContactId"
172
+ class="collapse-contact"
173
+ .requiredFields=${this.requiredFields}
174
+ .contact=${this.adminContact}
175
+ ></pd-contact>
176
+ ` : html`
177
+ <p>
178
+ ${msg(
179
+ "Verwaltungsadresse entspricht der Kundenadresse."
180
+ )}
181
+ </p>
182
+ <p>
183
+ <a
184
+ @click=${() => this._ownAdminContact = true}
185
+ >${msg(
186
+ "Neue Verwaltungsadresse hinzufügen"
187
+ )}</a
188
+ >
189
+ </p>
190
+ `}
191
+ </div>
192
+ </pd-collapse>
193
+ ` : nothing}
194
+ </div>
195
+ ` : nothing}
196
+ `;
197
+ }
198
+ _renderSummary() {
199
+ return html`
200
+ <div class="summary-box">
201
+ ${this.orderContact ? html`
202
+ <pd-contact
203
+ addressTitle=${this.contactTitle.orderSummaryContact ?? msg("Adresse")}
204
+ .contact=${this.orderContact}
205
+ summary
206
+ ></pd-contact>
207
+ ` : nothing}
208
+ ${this.billingContact ? html`
209
+ <pd-contact
210
+ addressTitle=${this.contactTitle.billingSummaryContact ?? msg("Rechnungsadresse")}
211
+ .contact=${this.billingContact}
212
+ summary
213
+ ></pd-contact>
214
+ ` : nothing}
215
+ ${this.propertyContact ? html`
216
+ <pd-contact
217
+ addressTitle=${this.contactTitle.propertySummaryContact ?? msg("Immobilie")}
218
+ .contact=${this.propertyContact}
219
+ summary
220
+ ></pd-contact>
221
+ ` : nothing}
222
+ ${this.adminContact ? html`
223
+ <pd-contact
224
+ addressTitle=${this.contactTitle.adminSummaryContact ?? msg("Verwaltung")}
225
+ .contact=${this.adminContact}
226
+ summary
227
+ ></pd-contact>
228
+ ` : nothing}
229
+ </div>
230
+ `;
231
+ }
232
+ _validateForm(e) {
233
+ var _a, _b, _c, _d, _e;
234
+ const detail = e.detail;
235
+ if (!detail || detail.singleElement) return;
236
+ const collapseMap = [
237
+ { id: "orderContactId", collapse: "orderContactCollapseId" },
238
+ {
239
+ id: "billingContactId",
240
+ collapse: "billingContactCollapseId",
241
+ condition: this._ownBillingContact
242
+ },
243
+ {
244
+ id: "propertyContactId",
245
+ collapse: "propertyContactCollapseId",
246
+ condition: this._isPropertyOwner
247
+ },
248
+ {
249
+ id: "adminContactId",
250
+ collapse: "adminContactCollapseId",
251
+ condition: this._isPropertyOwner && this._ownAdminContact
252
+ }
253
+ ];
254
+ for (const { id, collapse, condition = true } of collapseMap) {
255
+ if (!condition) continue;
256
+ (_b = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById(id)) == null ? void 0 : _b.dispatchEvent(new CustomEvent("validate-form", { detail }));
257
+ if (((_c = detail.errorMap) == null ? void 0 : _c.size) > 0) {
258
+ (_e = (_d = this.shadowRoot) == null ? void 0 : _d.getElementById(collapse)) == null ? void 0 : _e.open();
259
+ }
260
+ }
261
+ }
262
+ };
263
+ PdOrderContacts.styles = [
264
+ PdFontStyles,
265
+ css`
266
+ :host {
267
+ display: block;
268
+ }
269
+
270
+ p {
271
+ color: var(--pd-default-font-content-col);
272
+ font-size: var(--pd-default-font-content-size);
273
+ font-family: var(--pd-default-font-content-family);
274
+ max-width: 1000px;
275
+ }
276
+
277
+ a {
278
+ cursor: pointer;
279
+ font-family: var(--pd-default-font-link-family);
280
+ font-size: var(--pd-default-font-link-size);
281
+ color: var(--pd-default-font-link-col);
282
+ }
283
+
284
+ a:hover {
285
+ color: var(--pd-default-font-link-col-hover);
286
+ }
287
+
288
+ .collapse-contact {
289
+ padding: 10px;
290
+ }
291
+
292
+ .summary-box {
293
+ display: flex;
294
+ flex-wrap: wrap;
295
+ gap: 10px;
296
+ }
297
+
298
+ .summary-box pd-contact {
299
+ min-width: 150px;
300
+ }
301
+
302
+ .property-owner-box {
303
+ border: 2px solid #007b8f;
304
+ border-radius: 8px;
305
+ padding: 16px;
306
+ margin: 16px 0;
307
+ background-color: #f8fafb;
308
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
309
+ }
310
+ `
311
+ ];
312
+ __decorateClass([
313
+ property({ type: Boolean })
314
+ ], PdOrderContacts.prototype, "summary", 2);
315
+ __decorateClass([
316
+ property({ type: Object })
317
+ ], PdOrderContacts.prototype, "contactTitle", 2);
318
+ __decorateClass([
319
+ property({ type: Array })
320
+ ], PdOrderContacts.prototype, "requiredFields", 2);
321
+ __decorateClass([
322
+ property({ type: Object })
323
+ ], PdOrderContacts.prototype, "orderContact", 2);
324
+ __decorateClass([
325
+ property({ type: Object })
326
+ ], PdOrderContacts.prototype, "billingContact", 2);
327
+ __decorateClass([
328
+ property({ type: Object })
329
+ ], PdOrderContacts.prototype, "adminContact", 2);
330
+ __decorateClass([
331
+ property({ type: Object })
332
+ ], PdOrderContacts.prototype, "propertyContact", 2);
333
+ __decorateClass([
334
+ property({ type: Boolean })
335
+ ], PdOrderContacts.prototype, "withPayment", 2);
336
+ __decorateClass([
337
+ property({ type: Boolean })
338
+ ], PdOrderContacts.prototype, "withPropertyOwner", 2);
339
+ __decorateClass([
340
+ property({ type: Boolean })
341
+ ], PdOrderContacts.prototype, "withPropertyDate", 2);
342
+ __decorateClass([
343
+ property({ type: Object })
344
+ ], PdOrderContacts.prototype, "match", 2);
345
+ __decorateClass([
346
+ state()
347
+ ], PdOrderContacts.prototype, "_ownBillingContact", 2);
348
+ __decorateClass([
349
+ state()
350
+ ], PdOrderContacts.prototype, "_ownAdminContact", 2);
351
+ __decorateClass([
352
+ state()
353
+ ], PdOrderContacts.prototype, "_isPropertyOwner", 2);
354
+ PdOrderContacts = __decorateClass([
355
+ customElement("pd-order-contacts"),
356
+ localized()
357
+ ], PdOrderContacts);
358
+ export {
359
+ PdOrderContacts
360
+ };
@@ -0,0 +1,35 @@
1
+ import { LitElement, CSSResultGroup } from 'lit';
2
+ import { PdOrderData, PdOrderStep } from './types.js';
3
+ /**
4
+ * Komponente zur Darstellung der Bestellübersicht
5
+ *
6
+ * @fires go-to - Wird ausgelöst, wenn der Benutzer "edit-content" aktiviert
7
+ * @slot legal - Slot für die AGB-Inhalte
8
+ */
9
+ export declare class PdOrderSummary extends LitElement {
10
+ /**
11
+ * Die Liste der Bestellschritte (z.B. Buchung, Kontaktdaten, etc.),
12
+ * wie sie in der Zusammenfassung gerendert werden.
13
+ */
14
+ orderSteps: PdOrderStep[];
15
+ /**
16
+ * Gibt an, ob ein Zahlungsabschnitt mit Preisdetails angezeigt werden soll.
17
+ */
18
+ withPayment: boolean;
19
+ /**
20
+ * Gibt an, ob eine Checkbox zur Zustimmung zu den AGB angezeigt und validiert werden soll.
21
+ */
22
+ withAgreement: boolean;
23
+ /**
24
+ * Die vollständigen Bestelldaten inklusive Postleitzahl, Kontakten und Preisinformationen.
25
+ */
26
+ order?: PdOrderData;
27
+ static styles: CSSResultGroup;
28
+ firstUpdated(): void;
29
+ render(): import('lit-html').TemplateResult<1>;
30
+ private _validateForm;
31
+ private _getBookingSummary;
32
+ private _getContactsSummary;
33
+ private _openTermsAndConditions;
34
+ }
35
+ //# sourceMappingURL=pd-order-summary.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-order-summary.d.ts","sourceRoot":"","sources":["../src/pd-order-summary.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5D,OAAO,+CAA+C,CAAC;AACvD,OAAO,kDAAkD,CAAC;AAC1D,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AAEvD,OAAO,iDAAiD,CAAC;AACzD,OAAO,6CAA6C,CAAC;AACrD,OAAO,qDAAqD,CAAC;AAO7D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,wBAAwB,CAAC;AAEhC;;;;;GAKG;AACH,qBAEa,cAAe,SAAQ,UAAU;IAC5C;;;OAGG;IAEH,UAAU,EAAE,WAAW,EAAE,CAAM;IAE/B;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,aAAa,UAAS;IAEtB;;OAEG;IAEH,KAAK,CAAC,EAAE,WAAW,CAAC;IAEpB,OAAgB,MAAM,EAAE,cAAc,CAqDpC;IAEO,YAAY,IAAI,IAAI;IAcpB,MAAM;IA0Ef,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,mBAAmB;IAuB3B,OAAO,CAAC,uBAAuB;CAOhC"}
@@ -1,4 +1,234 @@
1
- import { PdOrderSummary } from "./src/PdOrderSummary.js";
2
- if (!customElements.get("pd-order-summary")) {
3
- window.customElements.define("pd-order-summary", PdOrderSummary);
4
- }
1
+ import { css, LitElement, html } from "lit";
2
+ import { property, customElement } from "lit/decorators.js";
3
+ import { localized, msg } from "@lit/localize";
4
+ import { format } from "fecha";
5
+ import "@progressive-development/pd-forms/pd-checkbox";
6
+ import "@progressive-development/pd-forms/pd-radio-group";
7
+ import "@progressive-development/pd-forms/pd-form-container";
8
+ import "@progressive-development/pd-forms/pd-form-row";
9
+ import "@progressive-development/pd-price/pd-pricetable";
10
+ import "@progressive-development/pd-dialog/pd-popup";
11
+ import "@progressive-development/pd-content/pd-edit-content";
12
+ import { PdFontStyles, PdColorStyles } from "@progressive-development/pd-shared-styles";
13
+ import "./pd-order-contacts.js";
14
+ var __defProp = Object.defineProperty;
15
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
16
+ var __decorateClass = (decorators, target, key, kind) => {
17
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
18
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
19
+ if (decorator = decorators[i])
20
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
21
+ if (kind && result) __defProp(target, key, result);
22
+ return result;
23
+ };
24
+ let PdOrderSummary = class extends LitElement {
25
+ constructor() {
26
+ super(...arguments);
27
+ this.orderSteps = [];
28
+ this.withPayment = false;
29
+ this.withAgreement = false;
30
+ }
31
+ firstUpdated() {
32
+ this.addEventListener("edit-content", (e) => {
33
+ this.dispatchEvent(
34
+ new CustomEvent("go-to", {
35
+ detail: { step: e.detail.step },
36
+ bubbles: true,
37
+ composed: true
38
+ })
39
+ );
40
+ });
41
+ this.addEventListener("validate-form", this._validateForm);
42
+ }
43
+ render() {
44
+ if (!this.order) return html`<p>No order is set</p>`;
45
+ return html`
46
+ <h3>${msg("Übersicht", { id: "pd.order.summary.title" })}</h3>
47
+ <div class="edit-summary-container">
48
+ ${this.orderSteps.map((step, index) => {
49
+ switch (step.key) {
50
+ case "zip":
51
+ case "booking":
52
+ return this._getBookingSummary(index + 1, step);
53
+ case "contacts":
54
+ return this._getContactsSummary(index + 1, step);
55
+ default:
56
+ return html`
57
+ <pd-edit-content
58
+ contentTitle="${step.name}"
59
+ stepNumber="${index + 1}"
60
+ .data="${step.data}"
61
+ >
62
+ <slot name="${step.key}"></slot>
63
+ </pd-edit-content>
64
+ `;
65
+ }
66
+ })}
67
+ </div>
68
+
69
+ ${this.order.priceData ? html`
70
+ <div class="payment">
71
+ <h3>${msg("Rechnung", { id: "pd.order.summary.billing" })}</h3>
72
+ <pd-pricetable
73
+ class="pricetable"
74
+ .priceData="${this.order.priceData}"
75
+ ></pd-pricetable>
76
+ </div>
77
+ ` : ""}
78
+ ${this.withAgreement ? html`
79
+ <pd-form-container id="submitSummaryFormId">
80
+ <pd-form-row>
81
+ <pd-checkbox
82
+ id="agreeConditionsId"
83
+ valueName="agreeId"
84
+ class="agree-box"
85
+ required
86
+ requiredMsg="${msg(
87
+ "Bitte stimmen Sie den Allgemeinen Geschäftsbedingungen zu, um fortzufahren.",
88
+ { id: "pd.order.summary.agree.required" }
89
+ )}"
90
+ >
91
+ ${msg(
92
+ html`Stimmen Sie unseren
93
+ <a
94
+ @click="${this._openTermsAndConditions}"
95
+ @keypress="${this._openTermsAndConditions}"
96
+ >Allgemeinen Geschäftsbedingungen</a
97
+ >
98
+ zu`,
99
+ { id: "pd.order.summary.agree.link" }
100
+ )}
101
+ </pd-checkbox>
102
+ </pd-form-row>
103
+ </pd-form-container>
104
+
105
+ <pd-popup id="agreePopupId">
106
+ <div slot="content"><slot name="legal"></slot></div>
107
+ </pd-popup>
108
+ ` : ""}
109
+ `;
110
+ }
111
+ _validateForm(e) {
112
+ var _a, _b;
113
+ if (e.detail && !e.detail.singleElement && this.withAgreement) {
114
+ (_b = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById("submitSummaryFormId")) == null ? void 0 : _b.dispatchEvent(new CustomEvent("validate-form", { detail: e.detail }));
115
+ }
116
+ }
117
+ _getBookingSummary(index, step) {
118
+ var _a, _b;
119
+ const date = ((_a = this.order) == null ? void 0 : _a.selectedDate) ? format(this.order.selectedDate, "DD/MM/YYYY") : void 0;
120
+ const bookingData = [{ name: "Postcode:", val: (_b = this.order) == null ? void 0 : _b.zip }];
121
+ if (date) {
122
+ bookingData.push({ name: "Datum van herstelling:", val: date });
123
+ }
124
+ return html`
125
+ <pd-edit-content
126
+ contentTitle="${step.name}"
127
+ stepNumber="${index}"
128
+ .data="${bookingData}"
129
+ ></pd-edit-content>
130
+ `;
131
+ }
132
+ _getContactsSummary(index, step) {
133
+ var _a, _b;
134
+ return html`
135
+ <pd-edit-content
136
+ contentTitle="${step.name}"
137
+ stepNumber="${index}"
138
+ ?editDisabled="${(_a = this.order) == null ? void 0 : _a.withLogin}"
139
+ >
140
+ ${((_b = this.order) == null ? void 0 : _b.contacts) ? html`
141
+ <pd-order-contacts
142
+ ?withPayment="${this.withPayment}"
143
+ .orderContact="${this.order.contacts.orderContact}"
144
+ .billingContact="${this.order.contacts.billingContact}"
145
+ .adminContact="${this.order.contacts.adminContact}"
146
+ .propertyContact="${this.order.contacts.propertyContact}"
147
+ summary
148
+ ></pd-order-contacts>
149
+ ` : ""}
150
+ </pd-edit-content>
151
+ `;
152
+ }
153
+ _openTermsAndConditions(e) {
154
+ var _a;
155
+ e.stopPropagation();
156
+ const popup = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById(
157
+ "agreePopupId"
158
+ );
159
+ popup == null ? void 0 : popup.showPopup();
160
+ }
161
+ };
162
+ PdOrderSummary.styles = [
163
+ PdFontStyles,
164
+ PdColorStyles,
165
+ css`
166
+ :host {
167
+ display: block;
168
+ }
169
+ h3 {
170
+ color: var(--pd-default-font-title-col);
171
+ font-family: var(--pd-default-font-title-family);
172
+ font-size: 1.5em;
173
+ }
174
+ .edit-summary-container {
175
+ display: flex;
176
+ flex-flow: column;
177
+ flex-wrap: wrap;
178
+ gap: 1em;
179
+ }
180
+ .payment {
181
+ margin-top: 30px;
182
+ padding: 5px;
183
+ background-color: var(
184
+ --pd-order-summary-payment-bg-col,
185
+ var(--pd-default-light-col)
186
+ );
187
+ }
188
+ .pay-logo-box {
189
+ display: flex;
190
+ }
191
+ .pay-logo {
192
+ max-width: 6rem;
193
+ }
194
+ .pricetable {
195
+ padding-top: 20px;
196
+ }
197
+ a {
198
+ cursor: pointer;
199
+ font-family: var(--pd-default-font-link-family);
200
+ font-size: var(--pd-default-font-link-size);
201
+ color: var(--pd-default-font-link-col);
202
+ }
203
+ a:hover {
204
+ color: var(--pd-default-font-link-col-hover);
205
+ }
206
+ .agree-box {
207
+ padding-top: 20px;
208
+ }
209
+ @media (max-width: 380px) {
210
+ .pay-logo {
211
+ max-width: 5rem;
212
+ }
213
+ }
214
+ `
215
+ ];
216
+ __decorateClass([
217
+ property({ type: Array })
218
+ ], PdOrderSummary.prototype, "orderSteps", 2);
219
+ __decorateClass([
220
+ property({ type: Boolean })
221
+ ], PdOrderSummary.prototype, "withPayment", 2);
222
+ __decorateClass([
223
+ property({ type: Boolean })
224
+ ], PdOrderSummary.prototype, "withAgreement", 2);
225
+ __decorateClass([
226
+ property({ type: Object })
227
+ ], PdOrderSummary.prototype, "order", 2);
228
+ PdOrderSummary = __decorateClass([
229
+ customElement("pd-order-summary"),
230
+ localized()
231
+ ], PdOrderSummary);
232
+ export {
233
+ PdOrderSummary
234
+ };
@@ -0,0 +1,17 @@
1
+ import { Meta, StoryFn } from '@storybook/web-components';
2
+ import { PdOrderContacts } from '../pd-order-contacts';
3
+ declare const _default: Meta<PdOrderContacts>;
4
+ export default _default;
5
+ export declare const Default: StoryFn<PdOrderContacts>;
6
+ export declare const WithPropertyDate: StoryFn<PdOrderContacts>;
7
+ export declare const RequiredFields: StoryFn<PdOrderContacts>;
8
+ export declare const WithBilling: StoryFn<PdOrderContacts>;
9
+ export declare const WithBillingAndAdmin: StoryFn<PdOrderContacts>;
10
+ export declare const WithBillingAdminPropertyDate: StoryFn<PdOrderContacts>;
11
+ export declare const ViewOnly: StoryFn<PdOrderContacts>;
12
+ export declare const ViewWithBilling: StoryFn<PdOrderContacts>;
13
+ export declare const ViewWithBillingAndAdmin: StoryFn<PdOrderContacts>;
14
+ export declare const Filled: StoryFn<PdOrderContacts>;
15
+ export declare const FilledWithAdmin: StoryFn<PdOrderContacts>;
16
+ export declare const FilledWithAdminAndDate: StoryFn<PdOrderContacts>;
17
+ //# sourceMappingURL=pd-order-contacts.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-order-contacts.stories.d.ts","sourceRoot":"","sources":["../../src/stories/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,sBAAsB,CAAC;AACvD,OAAO,sBAAsB,CAAC;wBAMzB,IAAI,CAAC,eAAe,CAAC;AAJ1B,wBAI2B;AAqE3B,eAAO,MAAM,OAAO,0BAAoB,CAAC;AAKzC,eAAO,MAAM,gBAAgB,0BAAoB,CAAC;AAMlD,eAAO,MAAM,cAAc,0BAAoB,CAAC;AAgBhD,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"}
@@ -0,0 +1,13 @@
1
+ import { Meta, StoryFn } from '@storybook/web-components';
2
+ import { PdOrderSummary } from '../pd-order-summary.js';
3
+ declare const _default: Meta<PdOrderSummary>;
4
+ export default _default;
5
+ export declare const OrderSummary: StoryFn<PdOrderSummary & {
6
+ orderContact: any;
7
+ billingContact?: any;
8
+ }>;
9
+ export declare const OrderSummaryEmptyBilling: StoryFn<PdOrderSummary & {
10
+ orderContact: any;
11
+ billingContact?: any;
12
+ }>;
13
+ //# sourceMappingURL=pd-order-summary.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-order-summary.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pd-order-summary.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAI/D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxD,OAAO,wBAAwB,CAAC;wBAM3B,IAAI,CAAC,cAAc,CAAC;AAJzB,wBAI0B;AA6E1B,eAAO,MAAM,YAAY;kBA3CP,GAAG;qBACA,GAAG;EA0CqB,CAAC;AAuB9C,eAAO,MAAM,wBAAwB;kBAlEnB,GAAG;qBACA,GAAG;EAiEiC,CAAC"}