@progressive-development/pd-order 0.1.125 → 0.1.126

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 (17) hide show
  1. package/dist/pd-order-contacts-chunk.js +3060 -0
  2. package/dist/pd-order-contacts.js +1 -0
  3. package/dist/pd-order-summary.js +704 -0
  4. package/package.json +7 -1
  5. package/.editorconfig +0 -29
  6. package/.storybook/main.js +0 -3
  7. package/.storybook/server.mjs +0 -8
  8. package/demo/index.html +0 -29
  9. package/pd-order-contacts.js +0 -3
  10. package/pd-order-summary.js +0 -3
  11. package/src/PdOrderContacts.js +0 -213
  12. package/src/PdOrderSummary.js +0 -276
  13. package/stories/booking.stories.js +0 -26
  14. package/stories/index.stories.js +0 -17
  15. package/stories/order-contacts.stories.js +0 -105
  16. package/stories/order-summary.stories.js +0 -103
  17. package/vite.config.js +0 -25
package/dist/pd-order-contacts-chunk.js ADDED
@@ -0,0 +1,3060 @@
1
+ import { LitElement, css, html, svg } from "lit";
2
+ import { PDColorStyles, PDFontStyles } from "@progressive-development/pd-shared-styles";
3
+ /**
4
+ * @license
5
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
6
+ *
7
+ * LitElement to display common icons.
8
+ * Available Icons are accessible over the ALL_ICONS array or the specific constants.
9
+ *
10
+ * Styling is made via custom css properties and css class attributes.
11
+ *
12
+ * ### Custom Properties: #####
13
+ *
14
+ * --pd-icon-size => Define the size of the icon, 2rem as default
15
+ *
16
+ * --pd-icon-bg-col => Background color for the icon
17
+ * --pd-icon-bg-col-hover => Background hover color for the icon
18
+ * --pd-icon-primary-bg-col => Background color for the icon with primary class
19
+ * --pd-icon-primary-bg-col-hover => Background hover color for the icon with primary class (use --pd-icon-primary-bg-col as fallback)
20
+ * --pd-icon-bg-col-active => Background color for active icon
21
+ *
22
+ * --pd-icon-col => Color for the icon element
23
+ * --pd-icon-col-active => Color for active icon element
24
+ * --pd-icon-col-hover => Hover color for the icon element
25
+ * --pd-icon-col-active-hover
26
+ * --pd-icon-stroke-col =>
27
+ * --pd-icon-stroke-col-hover =>
28
+ * --pd-icon-stroke-width =>
29
+ * --pd-icon-col-disabled =>
30
+ * --pd-icon-stroke-col-active =>
31
+ * --pd-icon-stroke-col-active-hover =>
32
+ * --pd-icon-inner-col => Color for the inner icon element
33
+
34
+ * ### CSS classes: #####
35
+ * round => Round icon
36
+ * small => Small icon
37
+ * medium => Medium icon
38
+ * primary => Primary icon
39
+ *
40
+ * Links:
41
+ * // // https://github.com/syu93/lit-icon/blob/master/src/lit-icon.js
42
+ */
43
+ const ICON_CLOSE = "closeLink";
44
+ const ICON_XCLOSE = "xCloseIcon";
45
+ const ICON_ARROW_BACK = "arrowBack";
46
+ const ICON_TOGGLE_COLLAPSE = "toggleCollapse";
47
+ const ICON_TOOGLE_ARROW = "toggleArrow";
48
+ const ICON_CHECKBOX = "checkBox";
49
+ const ICON_CHECKBOX_ONLY_CHECK = "checkBoxOnlyCheck";
50
+ const ICON_ADD = "addIcon";
51
+ const ICON_NEXT = "nextArrow";
52
+ const ICON_PREVIOUS = "previousArrow";
53
+ const ICON_STAR = "starIcon";
54
+ const ICON_CAMERA = "cameraIcon";
55
+ const ICON_DELETE = "deleteIcon";
56
+ const ICON_DELETE_NEW = "deleteIcon2";
57
+ const ICON_SETTINGS = "settingsIcon";
58
+ const ICON_RULES = "rulesIcon";
59
+ const ICON_USER = "userIcon";
60
+ const ICON_LEAVE = "leaveGame";
61
+ const ICON_STAT = "statIcon";
62
+ const ICON_SYNC = "syncIcon";
63
+ const ICON_DATE = "dateIcon";
64
+ const ICON_DETAIL = "detailIcon";
65
+ const ICON_ERROR = "errorIcon";
66
+ const ICON_ERROR_FLD = "errorIconFld";
67
+ const ICON_HELP = "helpIcon";
68
+ const ICON_HELP_FLD = "helpIconFld";
69
+ const ICON_INFO = "infoIcon";
70
+ const ICON_INFO_FLD = "infoIconFld";
71
+ const ICON_WARNING = "warningIcon";
72
+ const ICON_WARNING_FLD = "warningIconFld";
73
+ const ICON_BURGER_MENU = "burgerMenuIcon";
74
+ const ICON_EDIT = "editIcon";
75
+ const ICON_EDIT_NEW = "editIcon2";
76
+ const ICON_SEARCH = "searchIcon";
77
+ const ICON_PHONE = "phoneIcon";
78
+ const ICON_MAIL = "mailIcon";
79
+ const arrowBack = "14.83 3.99 11.84 1 7.84 5 4.84 8 0.84 12 4.84 16 11.84 23 14.87 20.03 8.96 14.14 23.16 14.14 23.16 9.99 8.86 9.97 14.83 3.99";
80
+ const iconPlus = "21 10 14 10 14 3 10 3 10 10 3 10 3 14 10 14 10 21 14 21 14 14 21 14 21 10";
81
+ const iconMinus = "21 11.52 21 9.97 14 9.97 10 9.97 3 9.97 3 11.52 3 12.41 3 13.97 10 13.97 14 13.97 21 13.97 21 12.41 21 11.52";
82
+ const iconSquare = "21 10.24 21 3.24 14 3.24 10 3.24 3 3.24 3 10.24 3 14.24 3 21.24 10 21.24 14 21.24 21 21.24 21 14.24 21 10.24";
83
+ const iconCross = "16.95 4.22 12 9.17 7.05 4.22 4.22 7.05 9.17 12 4.22 16.95 7.05 19.78 12 14.83 16.95 19.78 19.78 16.95 14.83 12 19.78 7.05 16.95 4.22";
84
+ const iconRhombusH = "16 5 12 1 8 5 5 8 1 12 5 16 8 19 12 23 16 19 19 16 23 12 19 8 16 5";
85
+ const iconRhombusV = "19 16 23 12 21 10 20 9 12 1 4 9 3 10 1 12 5 16 8 19 12 23 16 19 19 16";
86
+ const iconArrowRight = "13 4.97 9 0.97 7 2.97 6 3.97 14 11.97 6 19.97 7 20.97 9 22.97 13 18.97 16 15.97 20 11.97 16 7.97 13 4.97";
87
+ const iconArrowLeft = "17 2.97 15 0.97 11 4.97 8 7.97 4 11.97 8 15.97 11 18.97 15 22.97 17 20.97 18 19.97 10 11.97 18 3.97 17 2.97";
88
+ const iconArrowUp = "21 17 23 14.97 21 12.97 20 11.97 12 3.97 4 11.97 3 12.97 1 14.97 2 16 4 18 12 10 20 18 21 17";
89
+ const iconArrowDown = "19 13 23 9 21 7 20 6 12 14 4 6 3 7 1 9 5 13 8 16 12 20 16 16 19 13";
90
+ const iconCheck = "20 3.5 9 14.5 4 9.5 3 10.5 1 12.5 5 16.5 5 16.5 9 20.5 13 16.5 16 13.5 23 6.5 22 5.5 20 3.5";
91
+ const iconStar = "13.48 5.84 12 2.85 10.55 5.85 9 8.85 2.38 9.84 7.19 14.53 6.05 21.15 12 18.02 17.95 21.15 16.81 14.53 21.62 9.84 14.97 8.87 13.48 5.84";
92
+ const iconset = {
93
+ // TODO remove one close link
94
+ [ICON_CLOSE]: {
95
+ cssClass: "close-link",
96
+ state: {
97
+ activ: iconCross,
98
+ activAn: `${iconCross};${iconRhombusH};${iconArrowRight}`,
99
+ inactiv: iconArrowRight,
100
+ inActivAn: `${iconArrowRight};${iconRhombusH};${iconCross}`
101
+ }
102
+ },
103
+ [ICON_XCLOSE]: {
104
+ cssClass: "x-close",
105
+ state: {
106
+ activ: iconArrowLeft,
107
+ activAn: `${iconArrowLeft};${iconRhombusH};${iconCross}`,
108
+ inactiv: iconArrowLeft,
109
+ inActivAn: `${iconCross};${iconRhombusH};${iconArrowLeft}`
110
+ }
111
+ },
112
+ // TODO animation
113
+ [ICON_ARROW_BACK]: {
114
+ cssClass: "arrow-back",
115
+ state: {
116
+ activ: arrowBack,
117
+ activAn: `${arrowBack};${iconRhombusH};${arrowBack}`,
118
+ inactiv: arrowBack,
119
+ inActivAn: `${arrowBack};${iconRhombusH};${arrowBack}`
120
+ }
121
+ },
122
+ [ICON_TOGGLE_COLLAPSE]: {
123
+ cssClass: "toggle-collapse",
124
+ state: {
125
+ activ: iconPlus,
126
+ activAn: `${iconPlus};${iconSquare};${iconMinus}`,
127
+ inactiv: iconMinus,
128
+ inActivAn: `${iconMinus};${iconSquare};${iconPlus}`
129
+ }
130
+ },
131
+ [ICON_TOOGLE_ARROW]: {
132
+ cssClass: "toggle-arrow",
133
+ state: {
134
+ activ: iconArrowUp,
135
+ activAn: `${iconArrowUp};${iconRhombusV};${iconArrowDown}`,
136
+ inactiv: iconArrowDown,
137
+ inActivAn: `${iconArrowDown};${iconRhombusV};${iconArrowUp}`
138
+ }
139
+ },
140
+ [ICON_CHECKBOX]: {
141
+ cssClass: "checkbox",
142
+ state: {
143
+ activ: iconCheck,
144
+ activAn: `${iconCross};${iconRhombusH};${iconCheck}`,
145
+ inactiv: iconCross,
146
+ inActivAn: `${iconCheck};${iconRhombusH};${iconCross}`
147
+ }
148
+ },
149
+ [ICON_CHECKBOX_ONLY_CHECK]: {
150
+ cssClass: "checkbox",
151
+ state: {
152
+ active: iconCheck,
153
+ activAn: `${iconSquare};${iconRhombusH};${iconCheck}`,
154
+ inactiv: void 0,
155
+ inActivAn: `${iconCheck};${iconRhombusH};${void 0}`
156
+ }
157
+ },
158
+ [ICON_ADD]: {
159
+ cssClass: "add-icon",
160
+ state: {
161
+ activ: iconPlus,
162
+ activAn: `${iconPlus};${iconRhombusH};${iconPlus}`,
163
+ inactiv: iconPlus,
164
+ inActivAn: `${iconPlus};${iconRhombusH};${iconPlus}`
165
+ }
166
+ },
167
+ // TODO remove unecessary animations states
168
+ [ICON_NEXT]: {
169
+ cssClass: "next",
170
+ state: {
171
+ activ: iconArrowRight,
172
+ activAn: `${iconArrowRight};${iconRhombusH};${iconArrowRight}`,
173
+ inactiv: iconArrowRight,
174
+ inActivAn: `${iconArrowRight};${iconRhombusH};${iconArrowRight}`
175
+ }
176
+ },
177
+ [ICON_PREVIOUS]: {
178
+ cssClass: "previousArrow",
179
+ state: {
180
+ activ: iconArrowLeft,
181
+ activAn: `${iconArrowLeft};${iconRhombusH};${iconArrowLeft}`,
182
+ inactiv: iconArrowLeft,
183
+ inActivAn: `${iconArrowLeft};${iconRhombusH};${iconArrowLeft}`
184
+ }
185
+ },
186
+ [ICON_STAR]: {
187
+ cssClass: "next",
188
+ state: {
189
+ activ: iconStar,
190
+ activAn: `${iconStar};${iconRhombusH};${iconStar}`,
191
+ inactiv: iconStar,
192
+ inActivAn: `${iconStar};${iconRhombusH};${iconStar}`
193
+ }
194
+ },
195
+ [ICON_CAMERA]: {
196
+ icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
197
+ <circle cx="12" cy="12" r="3.2"/>
198
+ <path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/>
199
+ </svg>`
200
+ },
201
+ [ICON_DELETE_NEW]: {
202
+ icon: () => svg`<svg viewBox="0 0 32 32">
203
+ <path d="M10 24h4v-10h-4v10zM22 6v-2c0-2.208-1.792-4-4-4h-4c-2.208 0-4 1.792-4 4v2h-10v2c0 1.104 0.896 2 2 2v18c0 2.208 1.792 4 4 4h20c2.208 0 4-1.792 4-4v-18c1.106 0 2-0.896 2-2v-2h-10zM14 4h4v2h-4v-2zM26 26c0 1.106-0.894 2-2 2h-16c-1.104 0-2-0.894-2-2v-14c0-1.104 0.896-2 2-2h16c1.106 0 2 0.896 2 2v14zM18 24h4v-10h-4v10z"></path>
204
+ </svg>`
205
+ },
206
+ [ICON_DELETE]: {
207
+ icon: () => svg`
208
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
209
+ <path d="M19 4h-3.5l-1-1h-5l-1 1H5v2h14M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6v12z"/>
210
+ </svg>`
211
+ },
212
+ [ICON_SETTINGS]: {
213
+ icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
214
+ <path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" />
215
+ </svg>`
216
+ },
217
+ [ICON_RULES]: {
218
+ icon: (status) => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="${status} rules-icon">
219
+ <rect x="48" y="87.5" width="70.51" height="80" />
220
+ <rect x="160.81" y="87.5" width="303.19" height="80" />
221
+ <rect x="48" y="216" width="70.51" height="80" />
222
+ <rect x="160.81" y="216" width="303.19" height="80" />
223
+ <rect x="48" y="344.5" width="70.51" height="80" />
224
+ <rect x="160.81" y="344.5" width="303.19" height="80" />
225
+ </svg>`
226
+ },
227
+ [ICON_USER]: {
228
+ icon: () => svg`<svg class="userIcon" viewBox="0 0 24 24">
229
+ <path d="M3.14,20.86V18.64c0-2.43,4-4.43,8.86-4.43s8.86,2,8.86,4.43v2.22ZM7.57,7.57A4.43,4.43,0,1,1,12,12,4.43,4.43,0,0,1,7.57,7.57Z" />
230
+ </svg>`
231
+ },
232
+ [ICON_LEAVE]: {
233
+ icon: (status) => svg`<svg xmlns="http://www.w3.org/2000/svg" class="leave-game ${status}" viewBox="0 0 512 512">
234
+ <path d="M233.29,304.11l-24.21,28.32H122.53a23.72,23.72,0,0,0,0,47.44h98.05a23.72,23.72,0,0,0,18.62-9l32.44-38.62Z" />
235
+ <path d="M475.12,255.77l-58.54-16-23.95-55.9c-3.8-8.87-38.31-35.7-45.33-38.25l-69.59-25.31a23.77,23.77,0,0,0-17.23.4l-75.91,31.63a23.73,23.73,0,1,0,18.25,43.8l67.37-28.08L296,177.51c-.2.43-.44.84-.63,1.28l-43.2,95.12c-6.21,14.31,2.44,26,13.51,37.1l66,48.52-42.71,96.11a23.72,23.72,0,1,0,43.35,19.27L383,361a23.71,23.71,0,0,0-8-29l-38.53-27.3a45.56,45.56,0,0,0,3.77-6.88l24.94-57.47L377.48,269a23.68,23.68,0,0,0,15.57,13.54l69.58,19a23.72,23.72,0,0,0,12.49-45.77Z" />
236
+ <circle cx="395.39" cy="101.86" r="46.6" />
237
+ <path d="M173.89,225h-108a5.4,5.4,0,1,1,0-10.8h108a5.4,5.4,0,0,1,0,10.8Z" />
238
+ <path d="M132.84,160.74H24.8a5.41,5.41,0,0,1,0-10.81h108a5.41,5.41,0,0,1,0,10.81Z" />
239
+ <path d="M190.1,96.46H90.7a5.41,5.41,0,0,1,0-10.81h99.4a5.41,5.41,0,0,1,0,10.81Z" />
240
+ </svg>`
241
+ },
242
+ [ICON_STAT]: {
243
+ icon: () => svg`<svg class="stat-icon" viewBox="0 0 24 24">
244
+ <path d="M16.16,20.31V7.84h4.15V20.31Zm-6.24,0V3.69h4.16V20.31Zm-6.23,0V12H7.84v8.31Z" />
245
+ </svg>`
246
+ },
247
+ [ICON_SYNC]: {
248
+ icon: () => svg`<svg class="sync-icon" viewBox="0 0 32 32">
249
+ <path d="M29.594 15.875l-4.594-4.688-4.563 4.688h2.719v0.125q0 1.5-0.563 2.797t-1.531 2.281-2.281 1.547-2.813 0.563q-1.531 0-2.875-0.609t-2.313-1.641l-2.469 2.531q1.469 1.5 3.438 2.375t4.219 0.875q2.219 0 4.172-0.844t3.406-2.297 2.297-3.406 0.844-4.172v-0.125h2.906zM8.813 16.188v-0.188q0-1.5 0.563-2.797t1.531-2.281 2.281-1.547 2.781-0.563q1.563 0 2.922 0.609t2.328 1.672l2.469-2.531q-1.469-1.5-3.453-2.391t-4.266-0.891q-2.188 0-4.141 0.844t-3.406 2.297-2.297 3.406-0.844 4.172v0.188h-2.875l4.594 4.688 4.563-4.688h-2.75z"></path>
250
+ </svg>`
251
+ },
252
+ [ICON_DATE]: {
253
+ icon: () => svg`<svg class="date-icon" viewBox="0 0 32 32">
254
+ <path d="M27.2 4.8h-1.44v3.2h-5.12v-3.2h-9.28v3.2h-5.12v-3.2h-1.44c-1.76 0-3.2 1.44-3.2 3.2v19.2c0 1.76 1.44 3.2 3.2 3.2h22.4c1.76 0 3.2-1.44 3.2-3.2v-19.2c0-1.76-1.44-3.2-3.2-3.2zM27.2 27.2h-22.4v-12.8h22.4v12.8zM9.92 1.6h-2.24v5.44h2.24v-5.44zM24.32 1.6h-2.24v5.44h2.24v-5.44z"></path>
255
+ </svg>`
256
+ },
257
+ [ICON_DETAIL]: {
258
+ icon: () => svg`<svg class="detail-icon" viewBox="0 0 32 32">
259
+ <path d="M16 6c-6.979 0-13.028 4.064-16 10 2.972 5.936 9.021 10 16 10s13.027-4.064 16-10c-2.972-5.936-9.021-10-16-10zM23.889 11.303c1.88 1.199 3.473 2.805 4.67 4.697-1.197 1.891-2.79 3.498-4.67 4.697-2.362 1.507-5.090 2.303-7.889 2.303s-5.527-0.796-7.889-2.303c-1.88-1.199-3.473-2.805-4.67-4.697 1.197-1.891 2.79-3.498 4.67-4.697 0.122-0.078 0.246-0.154 0.371-0.228-0.311 0.854-0.482 1.776-0.482 2.737 0 4.418 3.582 8 8 8s8-3.582 8-8c0-0.962-0.17-1.883-0.482-2.737 0.124 0.074 0.248 0.15 0.371 0.228zM16 12.813c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z"></path>
260
+ </svg>`
261
+ },
262
+ [ICON_ERROR]: {
263
+ icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
264
+ <path d="m12,2.5c5.24,0,9.5,4.26,9.5,9.5s-4.26,9.5-9.5,9.5S2.5,17.24,2.5,12,6.76,2.5,12,2.5m0-2C5.65.5.5,5.65.5,12s5.15,11.5,11.5,11.5,11.5-5.15,11.5-11.5S18.35.5,12,.5h0Z" />
265
+ <path d="m17.44,8.48l-1.92-1.92-3.52,3.52-3.52-3.52-1.92,1.92,3.52,3.52-3.52,3.52,1.92,1.92s1.84-1.84,3.52-3.52l3.52,3.52,1.92-1.92-3.52-3.52c1.68-1.68,3.52-3.52,3.52-3.52Z" />
266
+ </svg>`
267
+ },
268
+ [ICON_ERROR_FLD]: {
269
+ icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
270
+ <path d="m12,.5C5.65.5.5,5.65.5,12s5.15,11.5,11.5,11.5,11.5-5.15,11.5-11.5S18.35.5,12,.5h0Z" />
271
+ <path d="m17.44,8.48l-1.92-1.92-3.52,3.52-3.52-3.52-1.92,1.92,3.52,3.52-3.52,3.52,1.92,1.92s1.84-1.84,3.52-3.52l3.52,3.52,1.92-1.92-3.52-3.52c1.68-1.68,3.52-3.52,3.52-3.52Z"
272
+ fill="var(--pd-icon-inner-col, #fff)" />
273
+ </svg>`
274
+ },
275
+ [ICON_HELP]: {
276
+ icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
277
+ <path d="m12,2.5c5.24,0,9.5,4.26,9.5,9.5s-4.26,9.5-9.5,9.5S2.5,17.24,2.5,12,6.76,2.5,12,2.5m0-2C5.65.5.5,5.65.5,12s5.15,11.5,11.5,11.5,11.5-5.15,11.5-11.5S18.35.5,12,.5h0Z" />
278
+ <path d="m7.29,9.73c.06-2.74,1.86-4.73,4.65-4.73,3.62,0,4.77,2.22,4.77,3.7,0,1.86-.79,2.6-1.61,3.24-.82.61-1.7,1.11-1.88,2.24v.73h-2.59v-.86c.11-1.67.9-2.41,1.67-3.01.75-.59,1.4-1.03,1.4-2.07,0-1.17-.61-1.72-1.63-1.72-1.38,0-1.95,1.13-1.97,2.49,0,0-2.82,0-2.82,0Z" />
279
+ <rect x="10.37" y="16.05" width="3.01" height="2.95" />
280
+ </svg>`
281
+ },
282
+ [ICON_HELP_FLD]: {
283
+ icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
284
+ <path d="m12,.5C5.65.5.5,5.65.5,12s5.15,11.5,11.5,11.5,11.5-5.15,11.5-11.5S18.35.5,12,.5h0Z" />
285
+ <path d="m7.29,9.73c.06-2.74,1.86-4.73,4.65-4.73,3.62,0,4.77,2.22,4.77,3.7,0,1.86-.79,2.6-1.61,3.24-.82.61-1.7,1.11-1.88,2.24v.73h-2.59v-.86c.11-1.67.9-2.41,1.67-3.01.75-.59,1.4-1.03,1.4-2.07,0-1.17-.61-1.72-1.63-1.72-1.38,0-1.95,1.13-1.97,2.49,0,0-2.82,0-2.82,0Z"
286
+ fill="var(--pd-icon-inner-col, #fff)" />
287
+ <rect x="10.37" y="16.05" width="3.01" height="2.95" fill="var(--pd-icon-inner-col, #fff)" />
288
+ </svg>`
289
+ },
290
+ [ICON_INFO]: {
291
+ icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
292
+ <path d="m13.5,7.29h-3v-2.29h3v2.29h0Zm-3,1.57h3v10.14h-3s0-10.14,0-10.14Z" />
293
+ <path d="m12,2.5c5.24,0,9.5,4.26,9.5,9.5s-4.26,9.5-9.5,9.5S2.5,17.24,2.5,12,6.76,2.5,12,2.5m0-2C5.65.5.5,5.65.5,12s5.15,11.5,11.5,11.5,11.5-5.15,11.5-11.5S18.35.5,12,.5h0Z" />
294
+ </svg>`
295
+ },
296
+ [ICON_INFO_FLD]: {
297
+ icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
298
+ <path d="m12,.5C5.65.5.5,5.65.5,12s5.15,11.5,11.5,11.5,11.5-5.15,11.5-11.5S18.35.5,12,.5h0Z" />
299
+ <path d="m13.5,7.29h-3v-2.29h3v2.29h0Zm-3,1.57h3v10.14h-3s0-10.14,0-10.14Z" fill="var(--pd-icon-inner-col, #fff)" />
300
+ </svg>`
301
+ },
302
+ [ICON_WARNING]: {
303
+ icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
304
+ <path d="m11,17.54h2v1.64h-2v-1.64h0Zm2-1.12h-2v-7.24h2s0,7.24,0,7.24Z" />
305
+ <path d="m21.92,22.49H2.08c-.35,0-.68-.18-.86-.48-.18-.3-.19-.67-.03-.98L11.27,2.04c.17-.33.49-.51.89-.53.37,0,.71.21.88.54l9.77,18.98c.16.31.15.68-.04.98s-.5.48-.85.48Zm-18.19-2h16.55L12.14,4.67,3.74,20.49Z" />
306
+ </svg>`
307
+ },
308
+ [ICON_WARNING_FLD]: {
309
+ icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
310
+ <path d="m21.92,22.49H2.08c-.35,0-.68-.18-.86-.48-.18-.3-.19-.67-.03-.98L11.27,2.04c.17-.33.49-.51.89-.53.37,0,.71.21.88.54l9.77,18.98c.16.31.15.68-.04.98s-.5.48-.85.48Z" />
311
+ <path d="m11,17.54h2v1.64h-2v-1.64h0Zm2-1.12h-2v-7.24h2s0,7.24,0,7.24Z" fill="var(--pd-icon-inner-col, #fff)" />
312
+ </svg>`
313
+ },
314
+ [ICON_BURGER_MENU]: {
315
+ icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
316
+ <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/>
317
+ </svg>`
318
+ },
319
+ [ICON_EDIT]: {
320
+ icon: () => svg`
321
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
322
+ <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
323
+ <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
324
+ </svg>`
325
+ },
326
+ [ICON_EDIT_NEW]: {
327
+ icon: () => svg`<svg viewBox="0 0 32 32">
328
+ <path d="M28 32h-24c-2.208 0-4-1.792-4-4v-24c0-2.208 1.792-4 4-4h18l-4 4h-12c-1.104 0-2 0.896-2 2v20c0 1.106 0.896 2 2 2h20c1.106 0 2-0.894 2-2v-12l4-4v18c0 2.208-1.792 4-4 4zM28 4l-2-2v-2c0 0 6-0.062 6 6h-2l-2-2zM10 22v-6h2l4 4v2h-6zM28 8l-10 10-4-4 10-10 4 4z"></path>
329
+ </svg> `
330
+ },
331
+ [ICON_SEARCH]: {
332
+ icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
333
+ <path d="M 21 3 C 11.6 3 4 10.6 4 20 C 4 29.4 11.6 37 21 37 C 24.354553 37 27.47104 36.01984 30.103516 34.347656 L 42.378906 46.621094 L 46.621094 42.378906 L 34.523438 30.279297 C 36.695733 27.423994 38 23.870646 38 20 C 38 10.6 30.4 3 21 3 z M 21 7 C 28.2 7 34 12.8 34 20 C 34 27.2 28.2 33 21 33 C 13.8 33 8 27.2 8 20 C 8 12.8 13.8 7 21 7 z"></path>
334
+ </svg> `
335
+ },
336
+ [ICON_PHONE]: {
337
+ icon: () => svg`
338
+ <svg viewBox="0 0 473.806 473.806">
339
+ <g>
340
+ <g>
341
+ <path d="M374.456,293.506c-9.7-10.1-21.4-15.5-33.8-15.5c-12.3,0-24.1,5.3-34.2,15.4l-31.6,31.5c-2.6-1.4-5.2-2.7-7.7-4
342
+ c-3.6-1.8-7-3.5-9.9-5.3c-29.6-18.8-56.5-43.3-82.3-75c-12.5-15.8-20.9-29.1-27-42.6c8.2-7.5,15.8-15.3,23.2-22.8
343
+ c2.8-2.8,5.6-5.7,8.4-8.5c21-21,21-48.2,0-69.2l-27.3-27.3c-3.1-3.1-6.3-6.3-9.3-9.5c-6-6.2-12.3-12.6-18.8-18.6
344
+ c-9.7-9.6-21.3-14.7-33.5-14.7s-24,5.1-34,14.7c-0.1,0.1-0.1,0.1-0.2,0.2l-34,34.3c-12.8,12.8-20.1,28.4-21.7,46.5
345
+ c-2.4,29.2,6.2,56.4,12.8,74.2c16.2,43.7,40.4,84.2,76.5,127.6c43.8,52.3,96.5,93.6,156.7,122.7c23,10.9,53.7,23.8,88,26
346
+ c2.1,0.1,4.3,0.2,6.3,0.2c23.1,0,42.5-8.3,57.7-24.8c0.1-0.2,0.3-0.3,0.4-0.5c5.2-6.3,11.2-12,17.5-18.1c4.3-4.1,8.7-8.4,13-12.9
347
+ c9.9-10.3,15.1-22.3,15.1-34.6c0-12.4-5.3-24.3-15.4-34.3L374.456,293.506z M410.256,398.806
348
+ C410.156,398.806,410.156,398.906,410.256,398.806c-3.9,4.2-7.9,8-12.2,12.2c-6.5,6.2-13.1,12.7-19.3,20
349
+ c-10.1,10.8-22,15.9-37.6,15.9c-1.5,0-3.1,0-4.6-0.1c-29.7-1.9-57.3-13.5-78-23.4c-56.6-27.4-106.3-66.3-147.6-115.6
350
+ c-34.1-41.1-56.9-79.1-72-119.9c-9.3-24.9-12.7-44.3-11.2-62.6c1-11.7,5.5-21.4,13.8-29.7l34.1-34.1c4.9-4.6,10.1-7.1,15.2-7.1
351
+ c6.3,0,11.4,3.8,14.6,7c0.1,0.1,0.2,0.2,0.3,0.3c6.1,5.7,11.9,11.6,18,17.9c3.1,3.2,6.3,6.4,9.5,9.7l27.3,27.3
352
+ c10.6,10.6,10.6,20.4,0,31c-2.9,2.9-5.7,5.8-8.6,8.6c-8.4,8.6-16.4,16.6-25.1,24.4c-0.2,0.2-0.4,0.3-0.5,0.5
353
+ c-8.6,8.6-7,17-5.2,22.7c0.1,0.3,0.2,0.6,0.3,0.9c7.1,17.2,17.1,33.4,32.3,52.7l0.1,0.1c27.6,34,56.7,60.5,88.8,80.8
354
+ c4.1,2.6,8.3,4.7,12.3,6.7c3.6,1.8,7,3.5,9.9,5.3c0.4,0.2,0.8,0.5,1.2,0.7c3.4,1.7,6.6,2.5,9.9,2.5c8.3,0,13.5-5.2,15.2-6.9
355
+ l34.2-34.2c3.4-3.4,8.8-7.5,15.1-7.5c6.2,0,11.3,3.9,14.4,7.3c0.1,0.1,0.1,0.1,0.2,0.2l55.1,55.1
356
+ C420.456,377.706,420.456,388.206,410.256,398.806z"/>
357
+ <path d="M256.056,112.706c26.2,4.4,50,16.8,69,35.8s31.3,42.8,35.8,69c1.1,6.6,6.8,11.2,13.3,11.2c0.8,0,1.5-0.1,2.3-0.2
358
+ c7.4-1.2,12.3-8.2,11.1-15.6c-5.4-31.7-20.4-60.6-43.3-83.5s-51.8-37.9-83.5-43.3c-7.4-1.2-14.3,3.7-15.6,11
359
+ S248.656,111.506,256.056,112.706z"/>
360
+ <path d="M473.256,209.006c-8.9-52.2-33.5-99.7-71.3-137.5s-85.3-62.4-137.5-71.3c-7.3-1.3-14.2,3.7-15.5,11
361
+ c-1.2,7.4,3.7,14.3,11.1,15.6c46.6,7.9,89.1,30,122.9,63.7c33.8,33.8,55.8,76.3,63.7,122.9c1.1,6.6,6.8,11.2,13.3,11.2
362
+ c0.8,0,1.5-0.1,2.3-0.2C469.556,223.306,474.556,216.306,473.256,209.006z"/>
363
+ </g>
364
+ </g>
365
+ </svg>
366
+ `
367
+ },
368
+ [ICON_MAIL]: {
369
+ icon: () => svg`
370
+ <svg viewBox="0 0 483.3 483.3">
371
+ <g>
372
+ <g>
373
+ <path d="M424.3,57.75H59.1c-32.6,0-59.1,26.5-59.1,59.1v249.6c0,32.6,26.5,59.1,59.1,59.1h365.1c32.6,0,59.1-26.5,59.1-59.1
374
+ v-249.5C483.4,84.35,456.9,57.75,424.3,57.75z M456.4,366.45c0,17.7-14.4,32.1-32.1,32.1H59.1c-17.7,0-32.1-14.4-32.1-32.1v-249.5
375
+ c0-17.7,14.4-32.1,32.1-32.1h365.1c17.7,0,32.1,14.4,32.1,32.1v249.5H456.4z"/>
376
+ <path d="M304.8,238.55l118.2-106c5.5-5,6-13.5,1-19.1c-5-5.5-13.5-6-19.1-1l-163,146.3l-31.8-28.4c-0.1-0.1-0.2-0.2-0.2-0.3
377
+ c-0.7-0.7-1.4-1.3-2.2-1.9L78.3,112.35c-5.6-5-14.1-4.5-19.1,1.1c-5,5.6-4.5,14.1,1.1,19.1l119.6,106.9L60.8,350.95
378
+ c-5.4,5.1-5.7,13.6-0.6,19.1c2.7,2.8,6.3,4.3,9.9,4.3c3.3,0,6.6-1.2,9.2-3.6l120.9-113.1l32.8,29.3c2.6,2.3,5.8,3.4,9,3.4
379
+ c3.2,0,6.5-1.2,9-3.5l33.7-30.2l120.2,114.2c2.6,2.5,6,3.7,9.3,3.7c3.6,0,7.1-1.4,9.8-4.2c5.1-5.4,4.9-14-0.5-19.1L304.8,238.55z"/>
380
+ </g>
381
+ </g>
382
+ </svg>
383
+ `
384
+ }
385
+ };
386
+ const iconSvg = (iconName, cssClass, stateValues, activAn, inActivAn) => svg`
387
+ <svg id="${iconName}Id" viewBox="0 0 24 24" class="${cssClass}">
388
+ <polygon id="polygonId" points="${stateValues}">
389
+ <animate id="stateActivAn" dur="300ms" fill="freeze" begin="indefinite" attributeName="points"
390
+ keySplines="0.25 0.1 0.25 1"
391
+ values="${activAn}"/>
392
+ <animate id="stateInactivAn" dur="300ms" fill="freeze" begin="indefinite" attributeName="points"
393
+ keySplines="0.25 0.1 0.25 1"
394
+ values="${inActivAn}" />
395
+ </polygon>
396
+ </svg>`;
397
+ class PdIcon extends LitElement {
398
+ static get properties() {
399
+ return {
400
+ /**
401
+ * Define the icon by name.
402
+ */
403
+ icon: { type: String },
404
+ /**
405
+ * Set the icon as active or inactive icon.
406
+ * Reflect is set due to use inside css.
407
+ */
408
+ activeIcon: { type: Boolean, reflect: true },
409
+ /**
410
+ * Internal generated html for svg icon.
411
+ */
412
+ _svgIcon: { type: Object, state: true }
413
+ };
414
+ }
415
+ constructor() {
416
+ super();
417
+ this.activeIcon = false;
418
+ this._svgIcon = void 0;
419
+ }
420
+ static get styles() {
421
+ return [
422
+ // iconset[this.icon].styles
423
+ PDColorStyles,
424
+ css`
425
+ :host {
426
+
427
+ --my-icon-size: var(--pd-icon-size, 2rem);
428
+
429
+ width: var(--my-icon-size);
430
+ height: var(--my-icon-size);
431
+ background-color: var(--pd-icon-bg-col, transparent);
432
+
433
+ display: inline-flex;
434
+ box-sizing: content-box;
435
+ vertical-align: sub;
436
+ transition: var(--pd-icon-transition, 0.5s ease-in-out);
437
+ align-items: center;
438
+ justify-content: center;
439
+ padding: 0.2rem;
440
+ }
441
+
442
+ :host([activeIcon]) {
443
+ background-color: var(--pd-icon-bg-col-active, transparent);
444
+ }
445
+
446
+ :host > svg {
447
+ fill: var(--pd-icon-col, var(--pd-default-light-col));
448
+ stroke: var(--pd-icon-stroke-col, var(--pd-default-col));
449
+ stroke-width: var(--pd-icon-stroke-width, 0.1rem);
450
+ transition: fill 0.4s;
451
+ height: 100%;
452
+ width: 100%;
453
+ }
454
+
455
+ :host(.primary) > svg {
456
+ fill: var(--pd-icon-primary-col, var(--pd-default-dark-col));
457
+ stroke: var(--pd-icon-primary-stroke-col, var(--pd-default-bg-col));
458
+ }
459
+
460
+ :host([activeIcon]) > svg {
461
+ fill: var(--pd-icon-col-active, var(--pd-default-hover-col));
462
+ stroke: var(--pd-icon-stroke-col-active, var(--pd-default-col));
463
+ }
464
+
465
+ :host(.round) {
466
+ border-radius: 50%;
467
+ padding: 0.5rem;
468
+ }
469
+
470
+ :host(.small) {
471
+ --my-icon-size: 1.25rem;
472
+ }
473
+
474
+ :host(.medium) {
475
+ --my-icon-size: 1.5rem;
476
+ }
477
+
478
+ :host(.primary) {
479
+ background-color: var(--pd-icon-primary-bg-col, transparent);
480
+ }
481
+
482
+ :host(:hover) {
483
+ background-color: var(--pd-icon-bg-col-hover, transparent);
484
+ }
485
+
486
+ :host(.primary:hover) {
487
+ background-color: var(--pd-icon-primary-bg-col-hover, transparent);
488
+ }
489
+
490
+ :host(:hover) svg {
491
+ fill: var(--pd-icon-col-hover, darkgrey);
492
+ stroke: var(--pd-icon-stroke-col-hover, var(--pd-default-col));
493
+ }
494
+
495
+ :host([activeIcon]:hover) > svg {
496
+ fill: var(--pd-icon-col-active-hover, #fdd58599);
497
+ stroke: var(--pd-icon-stroke-col-active-hover, var(--pd-default-col));
498
+ }
499
+
500
+
501
+ :host([disabled]) {
502
+ pointer-events: none;
503
+ box-shadow: 0;
504
+ }
505
+
506
+ :host([disabled]) > svg {
507
+ fill: var(--pd-icon-col-disabled, darkgrey);
508
+ }
509
+ `
510
+ ];
511
+ }
512
+ firstUpdated() {
513
+ this._animatePolygon();
514
+ }
515
+ update(changedProperties) {
516
+ if (changedProperties.has("icon") && this.icon) {
517
+ const iconFromSet = iconset[this.icon];
518
+ if (iconFromSet) {
519
+ const generateSvg = () => html`${iconSvg(
520
+ this.icon,
521
+ iconFromSet.cssClass,
522
+ this.activeIcon ? iconFromSet.state.activ : iconFromSet.state.inactiv,
523
+ iconFromSet.state.activAn,
524
+ iconFromSet.state.inActivAn
525
+ )}`;
526
+ this._svgIcon = iconFromSet.cssClass ? generateSvg() : iconFromSet.icon(this.activeIcon);
527
+ } else {
528
+ throw new Error(`Icon not defined: ${this.icon}`);
529
+ }
530
+ } else if (changedProperties.has("activeIcon")) {
531
+ this._animatePolygon();
532
+ }
533
+ super.update(changedProperties);
534
+ }
535
+ render() {
536
+ return html`${this._svgIcon}`;
537
+ }
538
+ _animatePolygon() {
539
+ const iconFromSet = iconset[this.icon];
540
+ if (iconFromSet && iconFromSet.state && (iconFromSet.state.activAn && this.activeIcon || iconFromSet.state.inActivAn && !this.activeIcon)) {
541
+ let svgIconAN;
542
+ if (this.activeIcon) {
543
+ svgIconAN = this.shadowRoot.getElementById("stateActivAn");
544
+ } else {
545
+ svgIconAN = this.shadowRoot.getElementById("stateInactivAn");
546
+ }
547
+ if (svgIconAN) {
548
+ svgIconAN.beginElement();
549
+ }
550
+ }
551
+ }
552
+ /* not used at the moment
553
+ _clickHandler() {
554
+
555
+ } */
556
+ }
557
+ if (!customElements.get("pd-icon")) {
558
+ window.customElements.define("pd-icon", PdIcon);
559
+ }
560
+ /**
561
+ * @license
562
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
563
+ */
564
+ class PdCollapse extends LitElement {
565
+ static get properties() {
566
+ return {
567
+ active: { type: Boolean },
568
+ icon: { type: String }
569
+ };
570
+ }
571
+ constructor() {
572
+ super();
573
+ this.active = false;
574
+ }
575
+ static get styles() {
576
+ return [
577
+ PDColorStyles,
578
+ PDFontStyles,
579
+ css`
580
+ :host {
581
+ display: block;
582
+ width: 100%;
583
+ position: relative;
584
+ overflow: visible;
585
+ }
586
+
587
+ :host .content.open {
588
+ border: 2px solid var(--pd-default-light-col);
589
+ background: var(--pd-collapse-content-bg-col, var(--pd-default-bg-col));
590
+ margin-bottom: 1rem;
591
+ position: relative;
592
+ overflow: visible;
593
+ }
594
+
595
+ pd-icon {
596
+ --pd-icon-stroke-col-active: var(--pd-default-bg-col);
597
+ --pd-icon-col-active: var(--pd-default-dark-col);
598
+ --pd-icon-col-hover: var(--pd-default-dark-col);
599
+ --pd-icon-stroke-col-hover: var(--pd-default-hover-col);
600
+ --pd-icon-col-active-hover: var(--pd-default-dark-col);
601
+ --pd-icon-stroke-col-active-hover: var(--pd-default-hover-col);
602
+ }
603
+
604
+ .trigger {
605
+ background: var(--pd-collapse-bg-col, var(--pd-default-col));
606
+ font-family: var(--pd-default-font-title-family);
607
+ font-weight: bold;
608
+ color: var(--pd-collapse-font-col, var(--pd-default-bg-col));
609
+ transition-property: box-shadow, background;
610
+ transition: 0.2s ease-in;
611
+ cursor: pointer;
612
+ font-size: var(--pd-collapse-header-font-size, 1rem);
613
+ padding: 0.5rem;
614
+ display: flex;
615
+ justify-content: space-between;
616
+ box-sizing: border-box;
617
+ position: relative;
618
+ }
619
+
620
+ ::slotted(.header) {
621
+ display: flex;
622
+ align-items: center;
623
+ }
624
+
625
+ .trigger:hover {
626
+ background: var(--pd-collapse-hover-col, var(--pd-default-dark-col));
627
+ }
628
+
629
+ .trigger.closed {
630
+ margin-bottom: 1rem;
631
+ }
632
+
633
+ .content {
634
+ will-change: transform;
635
+ height: 0;
636
+ overflow: hidden;
637
+ transition-property: visibility, transform;
638
+ transition-duration: 0.2s;
639
+ visibility: hidden;
640
+ transform: translate3d(0, -100%, 0);
641
+ box-sizing: border-box;
642
+
643
+ padding: 0.5em;
644
+ }
645
+
646
+ .content.open {
647
+ visibility: visible;
648
+ height: auto;
649
+ transform: translate3d(0, 0, 0);
650
+ overflow-y: auto;
651
+ }
652
+ `
653
+ ];
654
+ }
655
+ open() {
656
+ this.active = true;
657
+ }
658
+ close() {
659
+ this.active = false;
660
+ }
661
+ onClick() {
662
+ this.active = !this.active;
663
+ this.dispatchEvent(
664
+ new CustomEvent("toggle-accordion", {
665
+ bubbles: true,
666
+ composed: true,
667
+ detail: this.active
668
+ })
669
+ );
670
+ }
671
+ render() {
672
+ return html`<div
673
+ class="trigger ${this.active ? "open" : "closed"}"
674
+ @click="${this.onClick}"
675
+ >
676
+ <slot name="header"></slot>
677
+ <pd-icon
678
+ icon="${ICON_TOGGLE_COLLAPSE}"
679
+ ?activeIcon="${this.active}"
680
+ class="small primary"
681
+ ></pd-icon>
682
+ </div>
683
+ <div class="content ${this.active ? "open" : "closed"}">
684
+ <slot name="content"></slot>
685
+ </div> `;
686
+ }
687
+ }
688
+ window.customElements.define("pd-collapse", PdCollapse);
689
+ /**
690
+ * @license
691
+ * Copyright 2017 Google LLC
692
+ * SPDX-License-Identifier: BSD-3-Clause
693
+ */
694
+ var t$1;
695
+ const i$1 = window, s = i$1.trustedTypes, e$1 = s ? s.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, o$1 = "$lit$", n = `lit$${(Math.random() + "").slice(9)}$`, l = "?" + n, h = `<${l}>`, r = document, u = () => r.createComment(""), d = (t2) => null === t2 || "object" != typeof t2 && "function" != typeof t2, c = Array.isArray, v = (t2) => c(t2) || "function" == typeof (null == t2 ? void 0 : t2[Symbol.iterator]), a = "[ \n\f\r]", f = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, _ = /-->/g, m = />/g, p = RegExp(`>|${a}(?:([^\\s"'>=/]+)(${a}*=${a}*(?:[^
696
+ \f\r"'\`<>=]|("|')|))|$)`, "g"), g = /'/g, $ = /"/g, y = /^(?:script|style|textarea|title)$/i, T = Symbol.for("lit-noChange"), A = Symbol.for("lit-nothing"), E = /* @__PURE__ */ new WeakMap(), C = r.createTreeWalker(r, 129, null, false);
697
+ function P(t2, i2) {
698
+ if (!Array.isArray(t2) || !t2.hasOwnProperty("raw")) throw Error("invalid template strings array");
699
+ return void 0 !== e$1 ? e$1.createHTML(i2) : i2;
700
+ }
701
+ const V = (t2, i2) => {
702
+ const s2 = t2.length - 1, e2 = [];
703
+ let l2, r2 = 2 === i2 ? "<svg>" : "", u2 = f;
704
+ for (let i3 = 0; i3 < s2; i3++) {
705
+ const s3 = t2[i3];
706
+ let d2, c2, v2 = -1, a2 = 0;
707
+ for (; a2 < s3.length && (u2.lastIndex = a2, c2 = u2.exec(s3), null !== c2); ) a2 = u2.lastIndex, u2 === f ? "!--" === c2[1] ? u2 = _ : void 0 !== c2[1] ? u2 = m : void 0 !== c2[2] ? (y.test(c2[2]) && (l2 = RegExp("</" + c2[2], "g")), u2 = p) : void 0 !== c2[3] && (u2 = p) : u2 === p ? ">" === c2[0] ? (u2 = null != l2 ? l2 : f, v2 = -1) : void 0 === c2[1] ? v2 = -2 : (v2 = u2.lastIndex - c2[2].length, d2 = c2[1], u2 = void 0 === c2[3] ? p : '"' === c2[3] ? $ : g) : u2 === $ || u2 === g ? u2 = p : u2 === _ || u2 === m ? u2 = f : (u2 = p, l2 = void 0);
708
+ const w = u2 === p && t2[i3 + 1].startsWith("/>") ? " " : "";
709
+ r2 += u2 === f ? s3 + h : v2 >= 0 ? (e2.push(d2), s3.slice(0, v2) + o$1 + s3.slice(v2) + n + w) : s3 + n + (-2 === v2 ? (e2.push(void 0), i3) : w);
710
+ }
711
+ return [P(t2, r2 + (t2[s2] || "<?>") + (2 === i2 ? "</svg>" : "")), e2];
712
+ };
713
+ class N {
714
+ constructor({ strings: t2, _$litType$: i2 }, e2) {
715
+ let h2;
716
+ this.parts = [];
717
+ let r2 = 0, d2 = 0;
718
+ const c2 = t2.length - 1, v2 = this.parts, [a2, f2] = V(t2, i2);
719
+ if (this.el = N.createElement(a2, e2), C.currentNode = this.el.content, 2 === i2) {
720
+ const t3 = this.el.content, i3 = t3.firstChild;
721
+ i3.remove(), t3.append(...i3.childNodes);
722
+ }
723
+ for (; null !== (h2 = C.nextNode()) && v2.length < c2; ) {
724
+ if (1 === h2.nodeType) {
725
+ if (h2.hasAttributes()) {
726
+ const t3 = [];
727
+ for (const i3 of h2.getAttributeNames()) if (i3.endsWith(o$1) || i3.startsWith(n)) {
728
+ const s2 = f2[d2++];
729
+ if (t3.push(i3), void 0 !== s2) {
730
+ const t4 = h2.getAttribute(s2.toLowerCase() + o$1).split(n), i4 = /([.?@])?(.*)/.exec(s2);
731
+ v2.push({ type: 1, index: r2, name: i4[2], strings: t4, ctor: "." === i4[1] ? H : "?" === i4[1] ? L : "@" === i4[1] ? z : k });
732
+ } else v2.push({ type: 6, index: r2 });
733
+ }
734
+ for (const i3 of t3) h2.removeAttribute(i3);
735
+ }
736
+ if (y.test(h2.tagName)) {
737
+ const t3 = h2.textContent.split(n), i3 = t3.length - 1;
738
+ if (i3 > 0) {
739
+ h2.textContent = s ? s.emptyScript : "";
740
+ for (let s2 = 0; s2 < i3; s2++) h2.append(t3[s2], u()), C.nextNode(), v2.push({ type: 2, index: ++r2 });
741
+ h2.append(t3[i3], u());
742
+ }
743
+ }
744
+ } else if (8 === h2.nodeType) if (h2.data === l) v2.push({ type: 2, index: r2 });
745
+ else {
746
+ let t3 = -1;
747
+ for (; -1 !== (t3 = h2.data.indexOf(n, t3 + 1)); ) v2.push({ type: 7, index: r2 }), t3 += n.length - 1;
748
+ }
749
+ r2++;
750
+ }
751
+ }
752
+ static createElement(t2, i2) {
753
+ const s2 = r.createElement("template");
754
+ return s2.innerHTML = t2, s2;
755
+ }
756
+ }
757
+ function S(t2, i2, s2 = t2, e2) {
758
+ var o2, n2, l2, h2;
759
+ if (i2 === T) return i2;
760
+ let r2 = void 0 !== e2 ? null === (o2 = s2._$Co) || void 0 === o2 ? void 0 : o2[e2] : s2._$Cl;
761
+ const u2 = d(i2) ? void 0 : i2._$litDirective$;
762
+ return (null == r2 ? void 0 : r2.constructor) !== u2 && (null === (n2 = null == r2 ? void 0 : r2._$AO) || void 0 === n2 || n2.call(r2, false), void 0 === u2 ? r2 = void 0 : (r2 = new u2(t2), r2._$AT(t2, s2, e2)), void 0 !== e2 ? (null !== (l2 = (h2 = s2)._$Co) && void 0 !== l2 ? l2 : h2._$Co = [])[e2] = r2 : s2._$Cl = r2), void 0 !== r2 && (i2 = S(t2, r2._$AS(t2, i2.values), r2, e2)), i2;
763
+ }
764
+ class M {
765
+ constructor(t2, i2) {
766
+ this._$AV = [], this._$AN = void 0, this._$AD = t2, this._$AM = i2;
767
+ }
768
+ get parentNode() {
769
+ return this._$AM.parentNode;
770
+ }
771
+ get _$AU() {
772
+ return this._$AM._$AU;
773
+ }
774
+ u(t2) {
775
+ var i2;
776
+ const { el: { content: s2 }, parts: e2 } = this._$AD, o2 = (null !== (i2 = null == t2 ? void 0 : t2.creationScope) && void 0 !== i2 ? i2 : r).importNode(s2, true);
777
+ C.currentNode = o2;
778
+ let n2 = C.nextNode(), l2 = 0, h2 = 0, u2 = e2[0];
779
+ for (; void 0 !== u2; ) {
780
+ if (l2 === u2.index) {
781
+ let i3;
782
+ 2 === u2.type ? i3 = new R(n2, n2.nextSibling, this, t2) : 1 === u2.type ? i3 = new u2.ctor(n2, u2.name, u2.strings, this, t2) : 6 === u2.type && (i3 = new Z(n2, this, t2)), this._$AV.push(i3), u2 = e2[++h2];
783
+ }
784
+ l2 !== (null == u2 ? void 0 : u2.index) && (n2 = C.nextNode(), l2++);
785
+ }
786
+ return C.currentNode = r, o2;
787
+ }
788
+ v(t2) {
789
+ let i2 = 0;
790
+ for (const s2 of this._$AV) void 0 !== s2 && (void 0 !== s2.strings ? (s2._$AI(t2, s2, i2), i2 += s2.strings.length - 2) : s2._$AI(t2[i2])), i2++;
791
+ }
792
+ }
793
+ class R {
794
+ constructor(t2, i2, s2, e2) {
795
+ var o2;
796
+ this.type = 2, this._$AH = A, this._$AN = void 0, this._$AA = t2, this._$AB = i2, this._$AM = s2, this.options = e2, this._$Cp = null === (o2 = null == e2 ? void 0 : e2.isConnected) || void 0 === o2 || o2;
797
+ }
798
+ get _$AU() {
799
+ var t2, i2;
800
+ return null !== (i2 = null === (t2 = this._$AM) || void 0 === t2 ? void 0 : t2._$AU) && void 0 !== i2 ? i2 : this._$Cp;
801
+ }
802
+ get parentNode() {
803
+ let t2 = this._$AA.parentNode;
804
+ const i2 = this._$AM;
805
+ return void 0 !== i2 && 11 === (null == t2 ? void 0 : t2.nodeType) && (t2 = i2.parentNode), t2;
806
+ }
807
+ get startNode() {
808
+ return this._$AA;
809
+ }
810
+ get endNode() {
811
+ return this._$AB;
812
+ }
813
+ _$AI(t2, i2 = this) {
814
+ t2 = S(this, t2, i2), d(t2) ? t2 === A || null == t2 || "" === t2 ? (this._$AH !== A && this._$AR(), this._$AH = A) : t2 !== this._$AH && t2 !== T && this._(t2) : void 0 !== t2._$litType$ ? this.g(t2) : void 0 !== t2.nodeType ? this.$(t2) : v(t2) ? this.T(t2) : this._(t2);
815
+ }
816
+ k(t2) {
817
+ return this._$AA.parentNode.insertBefore(t2, this._$AB);
818
+ }
819
+ $(t2) {
820
+ this._$AH !== t2 && (this._$AR(), this._$AH = this.k(t2));
821
+ }
822
+ _(t2) {
823
+ this._$AH !== A && d(this._$AH) ? this._$AA.nextSibling.data = t2 : this.$(r.createTextNode(t2)), this._$AH = t2;
824
+ }
825
+ g(t2) {
826
+ var i2;
827
+ const { values: s2, _$litType$: e2 } = t2, o2 = "number" == typeof e2 ? this._$AC(t2) : (void 0 === e2.el && (e2.el = N.createElement(P(e2.h, e2.h[0]), this.options)), e2);
828
+ if ((null === (i2 = this._$AH) || void 0 === i2 ? void 0 : i2._$AD) === o2) this._$AH.v(s2);
829
+ else {
830
+ const t3 = new M(o2, this), i3 = t3.u(this.options);
831
+ t3.v(s2), this.$(i3), this._$AH = t3;
832
+ }
833
+ }
834
+ _$AC(t2) {
835
+ let i2 = E.get(t2.strings);
836
+ return void 0 === i2 && E.set(t2.strings, i2 = new N(t2)), i2;
837
+ }
838
+ T(t2) {
839
+ c(this._$AH) || (this._$AH = [], this._$AR());
840
+ const i2 = this._$AH;
841
+ let s2, e2 = 0;
842
+ for (const o2 of t2) e2 === i2.length ? i2.push(s2 = new R(this.k(u()), this.k(u()), this, this.options)) : s2 = i2[e2], s2._$AI(o2), e2++;
843
+ e2 < i2.length && (this._$AR(s2 && s2._$AB.nextSibling, e2), i2.length = e2);
844
+ }
845
+ _$AR(t2 = this._$AA.nextSibling, i2) {
846
+ var s2;
847
+ for (null === (s2 = this._$AP) || void 0 === s2 || s2.call(this, false, true, i2); t2 && t2 !== this._$AB; ) {
848
+ const i3 = t2.nextSibling;
849
+ t2.remove(), t2 = i3;
850
+ }
851
+ }
852
+ setConnected(t2) {
853
+ var i2;
854
+ void 0 === this._$AM && (this._$Cp = t2, null === (i2 = this._$AP) || void 0 === i2 || i2.call(this, t2));
855
+ }
856
+ }
857
+ class k {
858
+ constructor(t2, i2, s2, e2, o2) {
859
+ this.type = 1, this._$AH = A, this._$AN = void 0, this.element = t2, this.name = i2, this._$AM = e2, this.options = o2, s2.length > 2 || "" !== s2[0] || "" !== s2[1] ? (this._$AH = Array(s2.length - 1).fill(new String()), this.strings = s2) : this._$AH = A;
860
+ }
861
+ get tagName() {
862
+ return this.element.tagName;
863
+ }
864
+ get _$AU() {
865
+ return this._$AM._$AU;
866
+ }
867
+ _$AI(t2, i2 = this, s2, e2) {
868
+ const o2 = this.strings;
869
+ let n2 = false;
870
+ if (void 0 === o2) t2 = S(this, t2, i2, 0), n2 = !d(t2) || t2 !== this._$AH && t2 !== T, n2 && (this._$AH = t2);
871
+ else {
872
+ const e3 = t2;
873
+ let l2, h2;
874
+ for (t2 = o2[0], l2 = 0; l2 < o2.length - 1; l2++) h2 = S(this, e3[s2 + l2], i2, l2), h2 === T && (h2 = this._$AH[l2]), n2 || (n2 = !d(h2) || h2 !== this._$AH[l2]), h2 === A ? t2 = A : t2 !== A && (t2 += (null != h2 ? h2 : "") + o2[l2 + 1]), this._$AH[l2] = h2;
875
+ }
876
+ n2 && !e2 && this.j(t2);
877
+ }
878
+ j(t2) {
879
+ t2 === A ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, null != t2 ? t2 : "");
880
+ }
881
+ }
882
+ class H extends k {
883
+ constructor() {
884
+ super(...arguments), this.type = 3;
885
+ }
886
+ j(t2) {
887
+ this.element[this.name] = t2 === A ? void 0 : t2;
888
+ }
889
+ }
890
+ const I = s ? s.emptyScript : "";
891
+ class L extends k {
892
+ constructor() {
893
+ super(...arguments), this.type = 4;
894
+ }
895
+ j(t2) {
896
+ t2 && t2 !== A ? this.element.setAttribute(this.name, I) : this.element.removeAttribute(this.name);
897
+ }
898
+ }
899
+ class z extends k {
900
+ constructor(t2, i2, s2, e2, o2) {
901
+ super(t2, i2, s2, e2, o2), this.type = 5;
902
+ }
903
+ _$AI(t2, i2 = this) {
904
+ var s2;
905
+ if ((t2 = null !== (s2 = S(this, t2, i2, 0)) && void 0 !== s2 ? s2 : A) === T) return;
906
+ const e2 = this._$AH, o2 = t2 === A && e2 !== A || t2.capture !== e2.capture || t2.once !== e2.once || t2.passive !== e2.passive, n2 = t2 !== A && (e2 === A || o2);
907
+ o2 && this.element.removeEventListener(this.name, this, e2), n2 && this.element.addEventListener(this.name, this, t2), this._$AH = t2;
908
+ }
909
+ handleEvent(t2) {
910
+ var i2, s2;
911
+ "function" == typeof this._$AH ? this._$AH.call(null !== (s2 = null === (i2 = this.options) || void 0 === i2 ? void 0 : i2.host) && void 0 !== s2 ? s2 : this.element, t2) : this._$AH.handleEvent(t2);
912
+ }
913
+ }
914
+ class Z {
915
+ constructor(t2, i2, s2) {
916
+ this.element = t2, this.type = 6, this._$AN = void 0, this._$AM = i2, this.options = s2;
917
+ }
918
+ get _$AU() {
919
+ return this._$AM._$AU;
920
+ }
921
+ _$AI(t2) {
922
+ S(this, t2);
923
+ }
924
+ }
925
+ const B = i$1.litHtmlPolyfillSupport;
926
+ null == B || B(N, R), (null !== (t$1 = i$1.litHtmlVersions) && void 0 !== t$1 ? t$1 : i$1.litHtmlVersions = []).push("2.8.0");
927
+ /**
928
+ * @license
929
+ * Copyright 2017 Google LLC
930
+ * SPDX-License-Identifier: BSD-3-Clause
931
+ */
932
+ const t = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 }, e = (t2) => (...e2) => ({ _$litDirective$: t2, values: e2 });
933
+ class i {
934
+ constructor(t2) {
935
+ }
936
+ get _$AU() {
937
+ return this._$AM._$AU;
938
+ }
939
+ _$AT(t2, e2, i2) {
940
+ this._$Ct = t2, this._$AM = e2, this._$Ci = i2;
941
+ }
942
+ _$AS(t2, e2) {
943
+ return this.update(t2, e2);
944
+ }
945
+ update(t2, e2) {
946
+ return this.render(...e2);
947
+ }
948
+ }
949
+ /**
950
+ * @license
951
+ * Copyright 2018 Google LLC
952
+ * SPDX-License-Identifier: BSD-3-Clause
953
+ */
954
+ const o = e(class extends i {
955
+ constructor(t$12) {
956
+ var i2;
957
+ if (super(t$12), t$12.type !== t.ATTRIBUTE || "class" !== t$12.name || (null === (i2 = t$12.strings) || void 0 === i2 ? void 0 : i2.length) > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
958
+ }
959
+ render(t2) {
960
+ return " " + Object.keys(t2).filter((i2) => t2[i2]).join(" ") + " ";
961
+ }
962
+ update(i2, [s2]) {
963
+ var r2, o2;
964
+ if (void 0 === this.it) {
965
+ this.it = /* @__PURE__ */ new Set(), void 0 !== i2.strings && (this.nt = new Set(i2.strings.join(" ").split(/\s/).filter((t2) => "" !== t2)));
966
+ for (const t2 in s2) s2[t2] && !(null === (r2 = this.nt) || void 0 === r2 ? void 0 : r2.has(t2)) && this.it.add(t2);
967
+ return this.render(s2);
968
+ }
969
+ const e2 = i2.element.classList;
970
+ this.it.forEach((t2) => {
971
+ t2 in s2 || (e2.remove(t2), this.it.delete(t2));
972
+ });
973
+ for (const t2 in s2) {
974
+ const i3 = !!s2[t2];
975
+ i3 === this.it.has(t2) || (null === (o2 = this.nt) || void 0 === o2 ? void 0 : o2.has(t2)) || (i3 ? (e2.add(t2), this.it.add(t2)) : (e2.remove(t2), this.it.delete(t2)));
976
+ }
977
+ return T;
978
+ }
979
+ });
980
+ /**
981
+ * @license
982
+ * Copyright 2021 Google LLC
983
+ * SPDX-License-Identifier: BSD-3-Clause
984
+ */
985
+ const isStrTagged = (val) => typeof val !== "string" && "strTag" in val;
986
+ const joinStringsAndValues = (strings, values, valueOrder) => {
987
+ let concat = strings[0];
988
+ for (let i2 = 1; i2 < strings.length; i2++) {
989
+ concat += values[i2 - 1];
990
+ concat += strings[i2];
991
+ }
992
+ return concat;
993
+ };
994
+ /**
995
+ * @license
996
+ * Copyright 2021 Google LLC
997
+ * SPDX-License-Identifier: BSD-3-Clause
998
+ */
999
+ const defaultMsg = (template) => isStrTagged(template) ? joinStringsAndValues(template.strings, template.values) : template;
1000
+ /**
1001
+ * @license
1002
+ * Copyright 2021 Google LLC
1003
+ * SPDX-License-Identifier: BSD-3-Clause
1004
+ */
1005
+ const LOCALE_STATUS_EVENT = "lit-localize-status";
1006
+ /**
1007
+ * @license
1008
+ * Copyright 2021 Google LLC
1009
+ * SPDX-License-Identifier: BSD-3-Clause
1010
+ */
1011
+ class LocalizeController {
1012
+ constructor(host) {
1013
+ this.__litLocalizeEventHandler = (event) => {
1014
+ if (event.detail.status === "ready") {
1015
+ this.host.requestUpdate();
1016
+ }
1017
+ };
1018
+ this.host = host;
1019
+ }
1020
+ hostConnected() {
1021
+ window.addEventListener(LOCALE_STATUS_EVENT, this.__litLocalizeEventHandler);
1022
+ }
1023
+ hostDisconnected() {
1024
+ window.removeEventListener(LOCALE_STATUS_EVENT, this.__litLocalizeEventHandler);
1025
+ }
1026
+ }
1027
+ const _updateWhenLocaleChanges = (host) => host.addController(new LocalizeController(host));
1028
+ const updateWhenLocaleChanges = _updateWhenLocaleChanges;
1029
+ /**
1030
+ * @license
1031
+ * Copyright 2020 Google LLC
1032
+ * SPDX-License-Identifier: BSD-3-Clause
1033
+ */
1034
+ class Deferred {
1035
+ constructor() {
1036
+ this.settled = false;
1037
+ this.promise = new Promise((resolve, reject) => {
1038
+ this._resolve = resolve;
1039
+ this._reject = reject;
1040
+ });
1041
+ }
1042
+ resolve(value) {
1043
+ this.settled = true;
1044
+ this._resolve(value);
1045
+ }
1046
+ reject(error) {
1047
+ this.settled = true;
1048
+ this._reject(error);
1049
+ }
1050
+ }
1051
+ /**
1052
+ * @license
1053
+ * Copyright 2014 Travis Webb
1054
+ * SPDX-License-Identifier: MIT
1055
+ */
1056
+ for (let i2 = 0; i2 < 256; i2++) {
1057
+ (i2 >> 4 & 15).toString(16) + (i2 & 15).toString(16);
1058
+ }
1059
+ /**
1060
+ * @license
1061
+ * Copyright 2021 Google LLC
1062
+ * SPDX-License-Identifier: BSD-3-Clause
1063
+ */
1064
+ let loading = new Deferred();
1065
+ loading.resolve();
1066
+ /**
1067
+ * @license
1068
+ * Copyright 2020 Google LLC
1069
+ * SPDX-License-Identifier: BSD-3-Clause
1070
+ */
1071
+ let msg = defaultMsg;
1072
+ /**
1073
+ * @license
1074
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
1075
+ *
1076
+ * Abstract base lit class for all pd-form elements.
1077
+ * Import shared-global-style to make common custom properties available to all components.
1078
+ *
1079
+ * Used from:
1080
+ * - pd-base-ui-input
1081
+ *
1082
+ * Used to:
1083
+ * - define css (import shared-global-styles.js)
1084
+ * - define common properties (detailieren, aktuell keine)
1085
+ * - define updateWhenLocaleChanges for all pd-elements (check, aktuell nur für pd-form-container benötigt)
1086
+ *
1087
+ * Custom Properties (shared-global-styles):
1088
+ * ... TODO
1089
+ */
1090
+ class PdBaseUI extends LitElement {
1091
+ static get styles() {
1092
+ return [PDColorStyles, PDFontStyles];
1093
+ }
1094
+ constructor() {
1095
+ super();
1096
+ updateWhenLocaleChanges(this);
1097
+ }
1098
+ }
1099
+ /**
1100
+ * @license
1101
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
1102
+ */
1103
+ const SharedInputStyles = css`
1104
+
1105
+ /**
1106
+ * Label used for input, select, input-area, range and radio-group.
1107
+ * Not used in button, button-group, checkbox (may have a label...?), form-row, form-container
1108
+ */
1109
+ label {
1110
+ display: block;
1111
+ padding: var(--pd-input-label-padding, 0);
1112
+ color: var(--pd-input-lable-col, var(--pd-default-dark-col));
1113
+ text-align: var(--pd-input-label-align, left);
1114
+ font-size: var(--pd-input-lable-font-size, 0.9em);
1115
+ font-family: var(--pd-input-lable-font-family, var(--pd-default-font-title-family));
1116
+ max-width: var(--pd-input-field-width, 250px);
1117
+ }
1118
+
1119
+ /**
1120
+ * Error box for input elements. Used for checkbox, radio-group, input, input-area, select, range
1121
+ */
1122
+ .error-box {
1123
+ display: block;
1124
+ color: var(--pd-default-error-col);
1125
+ background: var(--pd-default-error-light-col);
1126
+ border: 1px solid var(--pd-default-error-col);
1127
+ border-radius: var(--pd-border-radius, 0);
1128
+ max-width: var(--pd-input-field-width, 350px);
1129
+ }
1130
+ .error-box p {
1131
+ margin: 0;
1132
+ padding: 0.25rem 0.25rem 0.25rem 0.5rem;
1133
+ font-size: .8rem;
1134
+ }
1135
+
1136
+ /* gradient noch aufräumen */
1137
+
1138
+ .gradient {
1139
+ background: linear-gradient(
1140
+ to bottom,
1141
+ var(--my-background-gradient-color) 0%,
1142
+ var(--my-background-color) 100%
1143
+ );
1144
+ }
1145
+
1146
+ .error .gradient {
1147
+ background: linear-gradient(
1148
+ to bottom,
1149
+ var(--my-background-gradient-color) 10%,
1150
+ #f5979b 100%
1151
+ );
1152
+ }
1153
+
1154
+ .gradient[disabled] {
1155
+ background: linear-gradient(to bottom, #ebebeb 0%, #999 100%);
1156
+ }
1157
+
1158
+ `;
1159
+ /**
1160
+ * @license
1161
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
1162
+ *
1163
+ * Lit element container for pd input elements.
1164
+ *
1165
+ * Used to:
1166
+ * - Automatically validation of form content
1167
+ * - Success/NotReady information for form-container
1168
+ */
1169
+ class PdHoverBox extends PdBaseUI {
1170
+ static get properties() {
1171
+ return {
1172
+ _visible: { type: Boolean, state: true },
1173
+ _toBottom: { type: Boolean }
1174
+ };
1175
+ }
1176
+ static get styles() {
1177
+ return [
1178
+ PdBaseUI.styles,
1179
+ css`
1180
+
1181
+ :host {
1182
+
1183
+ }
1184
+
1185
+ .hover-box {
1186
+ position: relative;
1187
+ }
1188
+
1189
+ .info-view {
1190
+ position: absolute;
1191
+ z-index: 100;
1192
+ background-color: var(--pd-hover-box-bg-col, var(--pd-default-dark-col));
1193
+
1194
+ border: 1px solid var(--pd-hover-box-border-col, var(--pd-default-col));
1195
+
1196
+ text-align: center;
1197
+ padding: 10px;
1198
+ width: 240px;
1199
+
1200
+ color: var(--pd-hover-box-font-col, white);
1201
+ font-size: var(--pd-hover-box-font-size, 0.8em);
1202
+
1203
+ transition: opacity 0.2s ease-in;
1204
+ }
1205
+
1206
+ .visible {
1207
+ visibility: visible;
1208
+ opacity: 1;
1209
+ }
1210
+
1211
+ .hidden {
1212
+ visibility: hidden;
1213
+ opacity: 0;
1214
+ }
1215
+
1216
+ .to-bottom {
1217
+ right: -3px;
1218
+ top: -3px;
1219
+ }
1220
+
1221
+ .to-top {
1222
+ right: -3px;
1223
+ bottom: -3px;
1224
+ }
1225
+
1226
+ @media (max-width: 640px) {
1227
+ .info-view-visible {
1228
+ width: 190px;
1229
+ }
1230
+ }
1231
+
1232
+ `
1233
+ ];
1234
+ }
1235
+ render() {
1236
+ return html`
1237
+ <div class="hover-box">
1238
+
1239
+ <div @click="${this._activateInfo}">
1240
+ <slot name="normal-view"></slot>
1241
+ </div>
1242
+
1243
+ <div id="infoViewId" @click="${this._closeInfo}" class="info-view ${this._visible ? "visible" : "hidden"} ${this._toBottom ? "to-bottom" : "to-top"}">
1244
+ <slot name="info-view"></slot>
1245
+ </div>
1246
+
1247
+ </div>
1248
+ `;
1249
+ }
1250
+ // eslint-disable-next-line class-methods-use-this
1251
+ _activateInfo(e2) {
1252
+ const modal = this.shadowRoot.getElementById("infoViewId");
1253
+ const rect = modal.getBoundingClientRect();
1254
+ this._toBottom = !(modal.offsetHeight + rect.top + rect.height > window.innerHeight);
1255
+ this._visible = true;
1256
+ e2.stopPropagation();
1257
+ }
1258
+ _closeInfo() {
1259
+ this._visible = false;
1260
+ }
1261
+ }
1262
+ window.customElements.define("pd-hover-box", PdHoverBox);
1263
+ /**
1264
+ * @license
1265
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
1266
+ *
1267
+ * Abstract base lit class for pd-input elements.
1268
+ *
1269
+ * Used from:
1270
+ * - pd-checkbox
1271
+ * - pd-input
1272
+ * - pd-input-area
1273
+ * - pd-radio-group
1274
+ * - pd-range
1275
+ * - pd-select
1276
+ *
1277
+ * Used to:
1278
+ * - define css (import additional shared-input-styles.js)
1279
+ * - define common properties (detailieren, aktuell zu viele bzw. nicht für alle sub-elemente gültig)
1280
+ * - handle error msg (getter/setter)
1281
+ * - helpers for validation event after change and render label/error elements.
1282
+ *
1283
+ * Events:
1284
+ * - validate-form => fired when input element changed its value.
1285
+ * - enter-pressed => fired when enter pressed.
1286
+ * - field-change => fired when input element changed its value.
1287
+ *
1288
+ * Custom Properties (shared-input-styles):
1289
+ * ... TODO
1290
+ *
1291
+ */
1292
+ const INPUT_TYPE_TEXT = 1;
1293
+ const INPUT_TYPE_SELECT = 2;
1294
+ const INPUT_TYPE_CHECK = 3;
1295
+ const INPUT_TYPE_RANGE = 4;
1296
+ const INPUT_TYPE_AREA = 5;
1297
+ const INPUT_TYPE_DATE = 7;
1298
+ const INPUT_TYPE_FILE = 8;
1299
+ const KEY_RETURN = 13;
1300
+ let delayTimer = 0;
1301
+ const DELAY_WAIT_TIME_MS = 400;
1302
+ class PdBaseUIInput extends PdBaseUI {
1303
+ /**
1304
+ * Fired when an input element change its values.
1305
+ * @event validate-form
1306
+ */
1307
+ /**
1308
+ * Fired when enter was pressend during focus on input element.
1309
+ * @event enter-pressed
1310
+ */
1311
+ /**
1312
+ * Fired when field-value changed.
1313
+ * @event field-change
1314
+ */
1315
+ static get styles() {
1316
+ return [
1317
+ PdBaseUI.styles,
1318
+ SharedInputStyles,
1319
+ css`
1320
+ .label-header {
1321
+ display: flex;
1322
+ align-items: end;
1323
+ justify-content: space-between;
1324
+ }
1325
+
1326
+ .label-header pd-icon {
1327
+ --pd-icon-size: 1.25rem;
1328
+ --pd-icon-col-active: var(--pd-default-col);
1329
+ --pd-icon-col-active-hover: var(--pd-default-hover-col);
1330
+ --pd-icon-stroke-width: 0;
1331
+ padding-right: 5px;
1332
+ cursor: help;
1333
+ }
1334
+ `
1335
+ ];
1336
+ }
1337
+ static get properties() {
1338
+ return {
1339
+ gradient: { type: Boolean },
1340
+ // true for gradient background
1341
+ disabled: { type: Boolean },
1342
+ // disabled flag for element
1343
+ readonly: { type: Boolean },
1344
+ // readonly flag for element
1345
+ required: { type: Boolean },
1346
+ // required flag for element
1347
+ requiredMsg: { type: String },
1348
+ // specific error msg for required field
1349
+ helperTxt: { type: String },
1350
+ // helper text
1351
+ valueName: { type: String },
1352
+ defaultRequiredChar: { type: String },
1353
+ defaultValue: { type: String },
1354
+ // default value for input element (used for reset) TODO: Das hier ggf. automatisch mit erstem gesetzten Wert füllen?
1355
+ label: { type: String },
1356
+ // label text for input
1357
+ value: { type: String },
1358
+ // current value (set from outside) TODO: Typ (Object, Number, Txt, Bool...)
1359
+ _errorMsg: { type: String, state: true },
1360
+ // errorMsg (could set fronm outside for busines validation, internal validation=> todo)
1361
+ _inputType: { type: Number, state: true }
1362
+ // number value for type (text, select, range....), set constructor of sub-class
1363
+ };
1364
+ }
1365
+ constructor() {
1366
+ super();
1367
+ this.gradient = false;
1368
+ this.disabled = false;
1369
+ this.readonly = false;
1370
+ this.defaultValue = "";
1371
+ this.label = "";
1372
+ this.value = "";
1373
+ this._errorMsg = "";
1374
+ this._inputType = -1;
1375
+ this.valueName = "";
1376
+ this.defaultRequiredChar = "*";
1377
+ }
1378
+ // Test: Clear input with value => Dann in BasisKlasse und alle leiten von Basis UI Element ab
1379
+ clear() {
1380
+ this.value = "";
1381
+ }
1382
+ // Test: Reset input with value
1383
+ reset() {
1384
+ this.value = this.defaultValue || "";
1385
+ }
1386
+ get errorMsg() {
1387
+ return this._errorMsg;
1388
+ }
1389
+ set errorMsg(msg2) {
1390
+ this._errorMsg = msg2;
1391
+ }
1392
+ /*
1393
+ get value() {
1394
+ return this._value;
1395
+ }
1396
+
1397
+ set value(newValue) {
1398
+ console.info("Meine Werte vor Set _value, input.value, newValue: ", this._value, this._input.value, newValue);
1399
+ this._value = newValue;
1400
+ this._input.value = newValue;
1401
+ console.info("Meine Werte nach Set: ", this._value, this._input.value, newValue);
1402
+ }
1403
+ */
1404
+ _generateValidateEvent() {
1405
+ this.dispatchEvent(
1406
+ new CustomEvent("validate-form", {
1407
+ detail: {
1408
+ singleElement: this,
1409
+ errorMap: /* @__PURE__ */ new Map()
1410
+ },
1411
+ composed: true,
1412
+ bubbles: true
1413
+ })
1414
+ );
1415
+ }
1416
+ _handleChangedValue(newValue, event, checkReturn, showValidateMsg) {
1417
+ const changed = this.value !== newValue;
1418
+ this.value = newValue;
1419
+ const keyCode = event.keyCode ? Number(event.keyCode) : -1;
1420
+ const eventDetail = {
1421
+ value: newValue,
1422
+ name: this.valueName,
1423
+ keyCode,
1424
+ changed
1425
+ };
1426
+ const handleReturn = checkReturn && keyCode === KEY_RETURN;
1427
+ if (handleReturn) {
1428
+ this.dispatchEvent(
1429
+ new CustomEvent("enter-pressed", {
1430
+ detail: eventDetail,
1431
+ composed: true,
1432
+ bubbles: true
1433
+ })
1434
+ );
1435
+ event.preventDefault();
1436
+ }
1437
+ if (changed) {
1438
+ this.dispatchEvent(
1439
+ new CustomEvent("field-change", {
1440
+ detail: eventDetail,
1441
+ composed: true,
1442
+ bubbles: true
1443
+ })
1444
+ );
1445
+ }
1446
+ if (showValidateMsg) {
1447
+ clearTimeout(delayTimer);
1448
+ delayTimer = setTimeout(
1449
+ this._generateValidateEvent.bind(this),
1450
+ DELAY_WAIT_TIME_MS
1451
+ );
1452
+ }
1453
+ }
1454
+ _renderErrorMsg() {
1455
+ return this.errorMsg && this.errorMsg.length > 0 ? html`
1456
+ <div class="error-box error">
1457
+ <p class="error-msg">${this.errorMsg}</p>
1458
+ </div>
1459
+ ` : "";
1460
+ }
1461
+ _renderLabel(forParam, additionalValue) {
1462
+ return html`
1463
+ <div class="label-header">
1464
+ <label for="${forParam}">${this.label}${this.required && this.label ? this.defaultRequiredChar : ""}${additionalValue ? html` - <b>${additionalValue}</b>` : ""}</label>
1465
+ ${this.helperTxt ? html`
1466
+
1467
+ <pd-hover-box>
1468
+ <pd-icon slot="normal-view" icon="helpIcon" activeIcon></pd-icon>
1469
+ <p slot="info-view">${this.helperTxt}</p>
1470
+ </pd-hover-box>
1471
+
1472
+ ` : ""}
1473
+ </div>
1474
+ `;
1475
+ }
1476
+ }
1477
+ /**
1478
+ * @license
1479
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
1480
+ */
1481
+ class PdCheckbox extends PdBaseUIInput {
1482
+ static get properties() {
1483
+ return {
1484
+ isSwitch: { type: Boolean },
1485
+ _hasInner: { type: Boolean, state: true }
1486
+ };
1487
+ }
1488
+ constructor() {
1489
+ super();
1490
+ this._inputType = INPUT_TYPE_CHECK;
1491
+ }
1492
+ static get styles() {
1493
+ return [
1494
+ PdBaseUIInput.styles,
1495
+ css`
1496
+ :host {
1497
+ display: inline-block;
1498
+
1499
+ /* Style for active checkbox => use defaults from pd-icon if no custom properties set */
1500
+ --pd-icon-col-active: var(--pd-cb-col);
1501
+ --pd-icon-col-active-hover: var(--pd-cb-col-hover);
1502
+ --pd-icon-bg-col-active: var(--pd-cb-bg-col);
1503
+ --pd-icon-stroke-col-active: var(--pd-cb-stroke-col);
1504
+ --pd-icon-stroke-col-active-hover: var(--pd-cb-stroke-col-hover);
1505
+
1506
+ /* Style for inactive checkbox */
1507
+ --pd-icon-col: var(--pd-cb-unset-col);
1508
+ --pd-icon-col-hover: var(--pd-cb-unset-col-hover);
1509
+ --pd-icon-bg-col: var(--pd-cb-unset-bg-col);
1510
+ --pd-icon-stroke-col: var(--pd-cb-unset-stroke-col);
1511
+ --pd-icon-stroke-col-hover: var(--pd-cb-unset-stroke-col-hover);
1512
+ }
1513
+
1514
+ /* Switch pd-icon => Prüfen, bei mir musste ich reflect setzten, wird das verwendet? */
1515
+ :host([isSwitch]) {
1516
+ /* derzeit keine Angaben */
1517
+ }
1518
+
1519
+ .div-container {
1520
+ display: flex;
1521
+ align-items: center;
1522
+ cursor: pointer;
1523
+ }
1524
+
1525
+ .div-container.disabled {
1526
+ opacity: 0.5;
1527
+ cursor: auto;
1528
+ }
1529
+
1530
+ .div-container.readonly {
1531
+ cursor: auto;
1532
+ }
1533
+
1534
+ /*
1535
+ * Class checkbox for icon and a element (checkbox case)
1536
+ */
1537
+ .checkbox {
1538
+ display: flex;
1539
+ border-radius: 4px;
1540
+ line-height: 0;
1541
+ align-items: center;
1542
+ justify-content: center;
1543
+ /*
1544
+ Wurde das hier für Border verwendet? Aktuell border in folgendem Element gesetzt
1545
+ background-color: var(--pd-cb-border-col, var(--pd-primary-col, #067394));
1546
+ */
1547
+
1548
+ }
1549
+
1550
+ .checkbox pd-icon {
1551
+ margin-right: .2rem;
1552
+ margin-bottom: .2rem;
1553
+ border: 2px solid var(--pd-cb-border-col, var(--pd-default-col));
1554
+ border-radius: var(--pd-cb-border-radius, 3px);
1555
+ }
1556
+
1557
+ .label {
1558
+ margin-left: 0.1rem;
1559
+ color: var(--pd-cb-font-col, var(--pd-default-font-input-col));
1560
+ font-family: var(--pd-default-font-input-family);
1561
+ text-align: left;
1562
+ font-size: var(--pd-default-font-input-size);
1563
+ }
1564
+
1565
+ .readonly .label {
1566
+ color: var(--pd-cb-font-col-readonly, #4d4d4d);
1567
+ }
1568
+
1569
+ .readonly .checkbox pd-icon {
1570
+ border-color: var(--pd-cb-border-col-readonly, transparent);
1571
+ }
1572
+
1573
+ /* Switch styles */
1574
+ .switch {
1575
+ height: var(--pd-cb-switch-height);
1576
+ position: relative;
1577
+ outline: 0;
1578
+ -webkit-user-select: none;
1579
+ -moz-user-select: none;
1580
+ -ms-user-select: none;
1581
+ user-select: none;
1582
+ }
1583
+
1584
+ .switch .label {
1585
+ margin-left: 0.5rem;
1586
+ }
1587
+
1588
+ .switch-paddle {
1589
+ display: inline-block;
1590
+ vertical-align: baseline;
1591
+ margin: 0;
1592
+ position: relative;
1593
+ min-width: 4rem;
1594
+ max-width: 4rem;
1595
+ height: 2rem;
1596
+ border-radius: 0;
1597
+ background: var(--pd-cb-switch-paddle-col, var(--pd-default-col));
1598
+ font-weight: inherit;
1599
+ color: inherit;
1600
+ cursor: pointer;
1601
+ }
1602
+
1603
+ .switch-paddle pd-icon {
1604
+ position: absolute;
1605
+ top: 0;
1606
+ left: 0;
1607
+ display: block;
1608
+ width: 1.5rem;
1609
+ height: 1.5rem;
1610
+ -webkit-transform: translate3d(0, 0, 0);
1611
+ transform: translate3d(0, 0, 0);
1612
+ border: 2px solid var(--pd-cb-border-col, var(--pd-default-col));
1613
+ box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
1614
+ border-radius: var(--pd-cb-border-radius, 4px);
1615
+ -webkit-transition: all 0.25s ease-out;
1616
+ transition: all 0.25s ease-out;
1617
+ content: '';
1618
+ }
1619
+
1620
+ .disabled .switch-paddle {
1621
+ cursor: auto;
1622
+ }
1623
+
1624
+ .readonly .switch-paddle {
1625
+ cursor: auto;
1626
+ max-width: 2rem;
1627
+ min-width: 2rem;
1628
+ background: none;
1629
+
1630
+ /* Prüfen TODO
1631
+ --pd-icon-bg: transparent;
1632
+ --pd-icon-fill: var(--card-dark-red);
1633
+ --pd-icon-fill-hover: var(--pd-icon-fill);
1634
+ --pd-icon-fill-active: var(--card-medium-green);
1635
+ */
1636
+ }
1637
+
1638
+ .readonly .switch-paddle pd-icon {
1639
+ border-color: var(--pd-cb-border-col-readonly, transparent);
1640
+ }
1641
+
1642
+ .readonly .isChecked.switch-paddle pd-icon {
1643
+ transform: translate3d(0, 0, 0);
1644
+ left: 0rem;
1645
+ }
1646
+
1647
+ .isChecked.switch-paddle pd-icon {
1648
+ left: 2.25rem;
1649
+ }
1650
+
1651
+ @media (min-width: 580px) {
1652
+ :host {
1653
+ font-size: 1rem;
1654
+ }
1655
+ }
1656
+ `
1657
+ ];
1658
+ }
1659
+ render() {
1660
+ if (!this._hasInnerSet) {
1661
+ this._hasInnerSet = true;
1662
+ this._hasInner = !!this.innerHTML.trim().length;
1663
+ }
1664
+ const checked = this.value === "true";
1665
+ const classMapVal = { "disabled": this.disabled, "switch": this.isSwitch, "readonly": this.readonly, "div-container": true };
1666
+ const aClassMap = { "switch-paddle": this.isSwitch, "checkbox": !this.isSwitch, "isChecked": checked, "isUnchecked": !checked };
1667
+ const inputId = `${this.id}Check`;
1668
+ return html`
1669
+ ${this._renderLabel(inputId)}
1670
+ <div @click="${this.onClick}" class="${o(classMapVal)}">
1671
+ <a href="#" @click="${this.linkClick}" @keypress="${this.onKeyPress}" class="${o(aClassMap)}">
1672
+ <pd-icon icon="${this.isSwitch ? "checkBox" : "checkBoxOnlyCheck"}" class="small" ?activeIcon="${checked}"></pd-icon>
1673
+ </a>
1674
+ ${this._hasInner ? html`
1675
+ <span class="label">
1676
+ <slot></slot>
1677
+ </span>` : ""}
1678
+ </div>
1679
+ ${this._renderErrorMsg()}
1680
+ `;
1681
+ }
1682
+ onClick(e2) {
1683
+ if (this.disabled || this.readonly) {
1684
+ return;
1685
+ }
1686
+ const checked = this.value === "true";
1687
+ this._handleChangedValue(checked ? "false" : "true", e2);
1688
+ }
1689
+ onKeyPress(e2) {
1690
+ e2.preventDefault();
1691
+ if (e2.keyCode === 32 || e2.code === "Space") {
1692
+ this.onClick(e2);
1693
+ }
1694
+ }
1695
+ // eslint-disable-next-line class-methods-use-this
1696
+ linkClick(e2) {
1697
+ e2.preventDefault();
1698
+ }
1699
+ }
1700
+ window.customElements.define("pd-checkbox", PdCheckbox);
1701
+ /**
1702
+ * @license
1703
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
1704
+ *
1705
+ * Lit element container for pd input elements.
1706
+ *
1707
+ * Used to:
1708
+ * - Automatically validation of form content
1709
+ * - Success/NotReady information for form-container
1710
+ */
1711
+ class PdFormContainer extends PdBaseUI {
1712
+ static get styles() {
1713
+ return [
1714
+ PdBaseUI.styles,
1715
+ css`
1716
+ :host {
1717
+ display: flex;
1718
+ flex-direction: column;
1719
+ align-items: left;
1720
+ gap: 20px;
1721
+ }
1722
+
1723
+ .validation-info-container {
1724
+ padding-top: var(--pd-form-row-padding-top, 10px);
1725
+ }
1726
+
1727
+ .validation-info {
1728
+ font-family: var(--pd-default-font-content-family);
1729
+ font-size: var(--pd-form-info-font-size, 0.8em);
1730
+ padding: 0.5em;
1731
+ color:#58585a;
1732
+ border-radius: var(--pd-border-radius, 0);
1733
+ -moz-border-radius: var(--pd-border-radius, 0);
1734
+ width:70%;
1735
+ max-width:780px;
1736
+ min-width:200px;
1737
+ }
1738
+
1739
+ .filled {
1740
+ border-left: 4px solid var(--pd-default-success-col);
1741
+ border-right: 4px solid var(--pd-default-success-col);
1742
+ border-top: 1px solid var(--pd-default-success-col);
1743
+ border-bottom: 1px solid var(--pd-default-success-col);
1744
+ background-color: var(--pd-default-success-light-col);
1745
+ }
1746
+
1747
+ .unfilled {
1748
+ border-left: 4px solid var(--pd-default-error-col);
1749
+ border-right: 4px solid var(--pd-default-error-col);
1750
+ border-top: 1px solid var(--pd-default-error-col);
1751
+ border-bottom: 1px solid var(--pd-default-error-col);
1752
+ background-color: var(--pd-default-error-light-col);
1753
+ }
1754
+
1755
+ `
1756
+ ];
1757
+ }
1758
+ static get properties() {
1759
+ return {
1760
+ requiredFieldInfo: { type: Boolean },
1761
+ commonError: { type: String },
1762
+ _requiredFieldsValid: { type: Boolean, state: true }
1763
+ };
1764
+ }
1765
+ connectedCallback() {
1766
+ super.connectedCallback();
1767
+ this.addEventListener("validate-form", this._validateForm);
1768
+ }
1769
+ disconnectedCallback() {
1770
+ super.connectedCallback();
1771
+ this.removeEventListener("validate-form", this._validateForm);
1772
+ }
1773
+ render() {
1774
+ return html`
1775
+ <form>
1776
+ <slot></slot>
1777
+ ${this.requiredFieldInfo || this.commonError ? html`
1778
+ <div class="validation-info-container">
1779
+ <p class="validation-info ${this._requiredFieldsValid && (!this.commonError || this.commonError === "") ? "filled" : "unfilled"}">
1780
+ ${this.commonError || (this._requiredFieldsValid ? msg("* Pflichtfelder ausgefüllt") : msg("* Pflichtfeld"))}
1781
+ </p>
1782
+ </div>` : ""}
1783
+ </form>
1784
+ `;
1785
+ }
1786
+ _validateForm(e2) {
1787
+ const reqEl = this.querySelectorAll("[required]");
1788
+ reqEl.forEach((el) => {
1789
+ const tmpEl = el;
1790
+ if (!el.value || el.value === "" || el.value === "false" || el._inputType === INPUT_TYPE_RANGE && el.value === "0" || el._inputType === INPUT_TYPE_SELECT && el.value === "UNDEF") {
1791
+ const erMsg = el.requiredMsg || msg("Eingabe erforderlich");
1792
+ if (!e2.detail.singleElement || e2.detail.singleElement === el) {
1793
+ tmpEl.errorMsg = erMsg;
1794
+ }
1795
+ e2.detail.errorMap.set(el.id, erMsg);
1796
+ } else if (el.validate && typeof el.validate === "function" && el.validate(e2)) {
1797
+ const errMsg = el.validate(e2);
1798
+ if (!e2.detail.singleElement || e2.detail.singleElement === el) {
1799
+ tmpEl.errorMsg = errMsg;
1800
+ }
1801
+ e2.detail.errorMap.set(el.id, errMsg);
1802
+ } else if (!e2.detail.singleElement || e2.detail.singleElement === el) {
1803
+ tmpEl.errorMsg = "";
1804
+ }
1805
+ });
1806
+ this._requiredFieldsValid = e2.detail.errorMap.size === 0;
1807
+ const validateByType = (fieldType, validFunc, invalidMsgTxt) => {
1808
+ if (e2.detail.singleElement && e2.detail.singleElement.getAttribute("field-type") !== fieldType) {
1809
+ return;
1810
+ }
1811
+ const reqSpecEl = e2.detail.singleElement ? [e2.detail.singleElement] : this.querySelectorAll(`[field-type=${fieldType}]`);
1812
+ reqSpecEl.forEach((el) => {
1813
+ const tmpEl = el;
1814
+ if (!e2.detail.errorMap.has(el.id) && el.value && el.value.length > 0) {
1815
+ if (validFunc(el.value)) {
1816
+ tmpEl.errorMsg = "";
1817
+ } else {
1818
+ tmpEl.errorMsg = invalidMsgTxt || `Invalid format for ${fieldType}`;
1819
+ e2.detail.errorMap.set(el.id, tmpEl.errorMsg);
1820
+ }
1821
+ }
1822
+ });
1823
+ };
1824
+ validateByType(
1825
+ "mail",
1826
+ PdFormContainer._mailIsValid,
1827
+ msg("Format mail@test.de verwenden")
1828
+ );
1829
+ validateByType(
1830
+ "phone",
1831
+ PdFormContainer._phoneIsValid,
1832
+ msg("Format +49123 123456 verwenden")
1833
+ );
1834
+ validateByType(
1835
+ "vat",
1836
+ PdFormContainer._vatIsValid,
1837
+ msg("Format DE0123456789 verwenden")
1838
+ );
1839
+ validateByType(
1840
+ "number",
1841
+ (val) => !isNaN(val),
1842
+ msg("Nur Zahlen erlaubt")
1843
+ );
1844
+ if (e2.detail.singleElement) {
1845
+ e2.stopPropagation();
1846
+ }
1847
+ }
1848
+ static _mailIsValid(email) {
1849
+ const mValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
1850
+ return mValid;
1851
+ }
1852
+ static _vatIsValid(vat) {
1853
+ const mValid = /^[A-Z]{2}[0-9]{8,12}$/.test(vat);
1854
+ return mValid;
1855
+ }
1856
+ static _phoneIsValid(nr) {
1857
+ const mValid = /^\+?[0-9 ]{7,15}$/.test(nr);
1858
+ return mValid;
1859
+ }
1860
+ }
1861
+ window.customElements.define("pd-form-container", PdFormContainer);
1862
+ /**
1863
+ * @license
1864
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
1865
+ */
1866
+ class PdFormRow extends PdBaseUI {
1867
+ static get styles() {
1868
+ return css`
1869
+ :host {
1870
+
1871
+ /* Define size for row, depends on media queries */
1872
+ --my-row-width: 800px;
1873
+ --my-gap: var(--pd-form-row-gap, 20px);
1874
+ display: flex;
1875
+ flex: 1 1 100%;
1876
+ /*margin: 0 0 .5rem 0;*/
1877
+ box-sizing: border-box;
1878
+ width: 100%;
1879
+ gap: var(--my-gap);
1880
+ align-items: var(--pd-form-row-align-item, flex-start);
1881
+ padding-top: var(--pd-form-row-padding-top, 10px);
1882
+ }
1883
+
1884
+ ::slotted(.full-size) {
1885
+ --pd-input-field-width: 100%;
1886
+ }
1887
+
1888
+ ::slotted(.quarter1) {
1889
+ --pd-input-field-width: calc(var(--my-row-width) * 0.25 - (var(--my-gap) * 0.75));
1890
+
1891
+ }
1892
+
1893
+ ::slotted(.quarter1-area) {
1894
+ --pd-input-field-width: calc((var(--my-row-width) - 5px) * 0.25 - (var(--my-gap) * 0.75));
1895
+
1896
+ }
1897
+
1898
+ ::slotted(.quarter2) {
1899
+ --pd-input-field-width: calc((var(--my-row-width) * 0.5) - (var(--my-gap) / 2));
1900
+
1901
+ }
1902
+
1903
+ ::slotted(.quarter2-area) {
1904
+ --pd-input-field-width: calc(((var(--my-row-width) - 8px) * 0.5) - (var(--my-gap) / 2));
1905
+ }
1906
+
1907
+ ::slotted(.quarter3) {
1908
+ --pd-input-field-width: calc(var(--my-row-width) * 0.75 - (var(--my-gap) * 0.25));
1909
+ }
1910
+ /* Area is longer? Scrollbar? */
1911
+ ::slotted(.quarter3-area) {
1912
+ --pd-input-field-width: calc((var(--my-row-width) - 10px) * 0.75 - (var(--my-gap) * 0.25));
1913
+ }
1914
+
1915
+ ::slotted(.quarter4) {
1916
+ --pd-input-field-width: var(--my-row-width);
1917
+ }
1918
+ /* Area is longer? Scrollbar? */
1919
+ ::slotted(.quarter4-area) {
1920
+ --pd-input-field-width: calc(var(--my-row-width) - 15px);
1921
+ }
1922
+
1923
+ @media (max-width: 930px) {
1924
+ :host {
1925
+ --my-row-width: 600px;
1926
+ }
1927
+ }
1928
+ @media (max-width: 650px) {
1929
+ :host {
1930
+ --my-row-width: 400px;
1931
+ --my-gap: 10px;
1932
+ }
1933
+ }
1934
+ @media (max-width: 450px) {
1935
+ :host {
1936
+ --my-row-width: 300px;
1937
+ --my-gap: 8px;
1938
+ }
1939
+ }
1940
+
1941
+ `;
1942
+ }
1943
+ render() {
1944
+ return html`
1945
+ <slot></slot>
1946
+ `;
1947
+ }
1948
+ }
1949
+ window.customElements.define("pd-form-row", PdFormRow);
1950
+ /**
1951
+ * @license
1952
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
1953
+ */
1954
+ const SharedInputFieldStyles = css`
1955
+
1956
+ /* Describe input div (with icon) around input/select/area element */
1957
+ .input {
1958
+ display: inline-block;
1959
+ /*position: relative; Prüfen: Wenn das an ist, felder über scroll-menu?
1960
+ position: relative;
1961
+ */
1962
+ /* pd-icon smaller than input
1963
+ --pd-icon-computed-size: calc(var(--my-input-height) * 0.75); /* calc */
1964
+
1965
+ /* Hack um eine Form Row (input mit Button => Booking) zu bekommen*/
1966
+ /*padding-top: var(--squi-input-padding, 0.5rem); */
1967
+ }
1968
+
1969
+
1970
+ :host([text-right]) .input > input {
1971
+ text-align: right;
1972
+ }
1973
+ :host([text-left]) .input > input {
1974
+ text-align: left;
1975
+ }
1976
+
1977
+ :host([icon-left]) .input pd-icon {
1978
+ display: inline-block;
1979
+ left: 5px;
1980
+ }
1981
+
1982
+ :host([icon-left]) .input > input {
1983
+ padding-left: calc(var(--pd-input-field-height, 2rem) + 5px);
1984
+ }
1985
+
1986
+ :host([icon-right]) .input pd-icon {
1987
+ display: inline-block;
1988
+ right: 5px;
1989
+ }
1990
+
1991
+ :host([icon-right]) .input > input {
1992
+ padding-right: calc(var(--pd-input-field-height, 2rem) + 5px);
1993
+ }
1994
+
1995
+ /* relative hack => see comment above in .input class, do it only for icon fiels relative for the moment*/
1996
+ :host([icon-right]) .input {
1997
+ position: relative;
1998
+ }
1999
+ :host([icon-left]) .input {
2000
+ position: relative;
2001
+ }
2002
+
2003
+ pd-icon {
2004
+ display: none;
2005
+ position: absolute;
2006
+ --pd-icon-size: var(--pd-input-icon-size, calc(var(--pd-input-field-height, 2rem) * 0.9));
2007
+ --pd-icon-col-active: var(--pd-input-icon-color, #edf7fd);
2008
+ --pd-icon-stroke-col-active: var(--pd-input-icon-stroke-color, var(--pd-default-color));
2009
+ top: 2px;
2010
+ }
2011
+
2012
+ pd-icon:hover {
2013
+ cursor: pointer;
2014
+ }
2015
+
2016
+ /*
2017
+ * Class input style used for input, select and text-area element.
2018
+ * Not use iput here => because of own select css... => Nachtrag: Aber ein paar allgemeine Angaben rausziehen
2019
+ */
2020
+ .input-style {
2021
+ width: var(--pd-input-field-width, 250px);
2022
+ padding: var(--pd-input-field-padding, 0.25rem);
2023
+ background-color: var(--pd-input-field-bg-col, var(--pd-default-bg-col));
2024
+ /*opacity: 80%;*/
2025
+ color: var(--pd-default-font-input-col);
2026
+ /*font-size: var(--squi-input-font-size, calc(var(--squi-input-height) / 1.8));*/
2027
+ font-size: var(--pd-default-font-input-size);
2028
+ font-family: var(--pd-default-font-input-family);
2029
+
2030
+ border: var(--pd-input-field-border, 1px solid var(--pd-default-light-col));
2031
+ box-shadow: inset 0 1px 2px rgba(50, 48, 49, 0.1);
2032
+ border-bottom: var(--pd-input-field-border-bottom,
2033
+ 2px solid var(--pd-default-col));
2034
+ border-radius: var(--pd-border-radius, 0);
2035
+ }
2036
+
2037
+ /* Hover for input, area, select */
2038
+ .input-style:hover {
2039
+ border-color: var(--pd-input-field-border-col-hover, var(--pd-default-hover-col));
2040
+ }
2041
+
2042
+ /* Fokus for input, area => select with own css.? */
2043
+ .input-style:focus {
2044
+ border: var(--pd-input-field-border-focus, 2px solid var(--pd-default-col));
2045
+ outline: 0;
2046
+ }
2047
+
2048
+ /* Höhe soll nicht für Text Area gelten, daher ausgelagert (überschreibt sonst rows) */
2049
+ input.input-style,
2050
+ select.input-style {
2051
+ height: var(--pd-input-field-height, 2.2rem);
2052
+ }
2053
+
2054
+ /* Disabled for input, area => select with own css.? */
2055
+ .input-style[disabled] {
2056
+ opacity: 0.5;
2057
+ cursor: auto;
2058
+ background-color: var(--pd-input-field-bg-col-disabled, #e9e9e9);
2059
+ border-bottom: var(--pd-input-field-border-bottom-disabled,
2060
+ 2px solid var(--pd-default-disabled-col));
2061
+ }
2062
+
2063
+ .input-style[readonly]:hover,
2064
+ .input-style[disabled]:hover {
2065
+ border-color: var(--pd-default-disabled-col);
2066
+ }
2067
+
2068
+ /* Disabled for input, area => select with own css.? */
2069
+ .input-style[readonly] {
2070
+ border-bottom: var(--pd-input-field-border-bottom-disabled,
2071
+ 2px solid var(--pd-default-disabled-col));
2072
+ }
2073
+
2074
+ /* error element style for input, area => select has own css.? */
2075
+ .error .input-style {
2076
+ border: 1px solid var(--pd-default-error-col);
2077
+ color: var(--pd-default-error-col);
2078
+ background-color: var(--pd-default-error-light-col);
2079
+ }
2080
+
2081
+ /* Error Focus for input, area, select */
2082
+ .error .input-style:focus {
2083
+ border: 2px solid var(--pd-default-error-col);
2084
+ }
2085
+
2086
+ /* Placeholder color for input and input-area */
2087
+ ::placeholder {
2088
+ color: var(--pd-input-placeholder-color, #474747e4);
2089
+ }
2090
+ :-ms-input-placeholder {
2091
+ color: var(--pd-input-placeholder-color, #474747e4);
2092
+ }
2093
+ ::-ms-input-placeholder {
2094
+ color: var(--pd-input-placeholder-color, #474747e4);
2095
+ }
2096
+
2097
+ `;
2098
+ /**
2099
+ * @license
2100
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
2101
+ *
2102
+ * Abstract base lit class for pd-input elements.
2103
+ *
2104
+ * Used from:
2105
+ * - pd-input
2106
+ * - pd-input-area
2107
+ * - pd-select
2108
+ *
2109
+ * Used to:
2110
+ * - define element specific css
2111
+ * - handle auto completion
2112
+ *
2113
+ * Events:
2114
+ * - TODO
2115
+ *
2116
+ * Custom Properties (shared-input-field-styles):
2117
+ * ... TODO
2118
+ *
2119
+ */
2120
+ class PdBaseInputElement extends PdBaseUIInput {
2121
+ /**
2122
+ * Fire when the `pd-input` loses focus.
2123
+ * @event focus-lost
2124
+ */
2125
+ static get styles() {
2126
+ return [PdBaseUIInput.styles, SharedInputFieldStyles];
2127
+ }
2128
+ static get properties() {
2129
+ return {
2130
+ placeHolder: { type: String },
2131
+ /* not used at the moment */
2132
+ name: { type: String },
2133
+ autoCompleteName: { type: String }
2134
+ };
2135
+ }
2136
+ constructor() {
2137
+ super();
2138
+ this.placeHolder = "";
2139
+ this.name = "";
2140
+ this._input = {};
2141
+ }
2142
+ firstUpdated() {
2143
+ this._input = this.shadowRoot.querySelector(this._getElementName());
2144
+ }
2145
+ focus() {
2146
+ this._input.focus();
2147
+ }
2148
+ _onBlur(event) {
2149
+ this.dispatchEvent(
2150
+ new CustomEvent("focus-lost", {
2151
+ detail: {
2152
+ value: this._input.value
2153
+ },
2154
+ composed: true,
2155
+ bubbles: true
2156
+ })
2157
+ );
2158
+ this._handleChangedValue(this._input.value, event, true, true);
2159
+ }
2160
+ _onKeyUp(event) {
2161
+ this._handleChangedValue(this._input.value, event, true);
2162
+ }
2163
+ _getElementName() {
2164
+ switch (this._inputType) {
2165
+ case INPUT_TYPE_AREA:
2166
+ return "textarea";
2167
+ case INPUT_TYPE_SELECT:
2168
+ return "select";
2169
+ case INPUT_TYPE_FILE:
2170
+ case INPUT_TYPE_TEXT:
2171
+ return "input";
2172
+ case INPUT_TYPE_DATE:
2173
+ return "pd-input";
2174
+ default:
2175
+ return "";
2176
+ }
2177
+ }
2178
+ }
2179
+ /**
2180
+ * @license
2181
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
2182
+ */
2183
+ const onlyContainsNumbers = (str) => /^\d+$/.test(str);
2184
+ class PdInput extends PdBaseInputElement {
2185
+ static get styles() {
2186
+ return [
2187
+ PdBaseInputElement.styles,
2188
+ css`
2189
+ * {
2190
+ box-sizing: border-box;
2191
+ }
2192
+ `
2193
+ ];
2194
+ }
2195
+ static get properties() {
2196
+ return {
2197
+ /**
2198
+ * Icon to be shown inside `pd-input`.
2199
+ */
2200
+ icon: { type: String },
2201
+ secret: { type: Boolean },
2202
+ // True for type password
2203
+ minlength: { type: String },
2204
+ maxlength: { type: String },
2205
+ // max length for field,
2206
+ onlyNumbers: { type: Boolean }
2207
+ // if only numbers allowed => Refactor => dafür war type number vorgesehen, dieses attribut wird entfernt und auf type=number umgestellt
2208
+ };
2209
+ }
2210
+ constructor() {
2211
+ super();
2212
+ this._inputType = INPUT_TYPE_TEXT;
2213
+ }
2214
+ render() {
2215
+ const inputId = `${this.id}Input`;
2216
+ return html`
2217
+ ${this._renderLabel(inputId)}
2218
+ <div class="input ${this.errorMsg.length > 0 ? "error" : ""}">
2219
+ ${this.icon ? html`<pd-icon icon="${this.icon}" activeIcon @click="${this._iconClicked}"></pd-icon>` : ""}
2220
+ <input
2221
+ id="${inputId}"
2222
+ name="${this.name || this.valueName || this.autoCompleteName}"
2223
+ autocomplete=${this.autoCompleteName}
2224
+ class="input-style ${this.gradient ? "gradient" : ""}"
2225
+ type="${this.secret ? "password" : "text"}"
2226
+ placeholder="${this.placeHolder}"
2227
+ .value="${this.value}"
2228
+ minlength="${this.minlength}"
2229
+ maxlength="${this.maxlength}"
2230
+ ?readonly="${this.readonly}"
2231
+ ?disabled="${this.disabled}"
2232
+ @keyup="${this._onKeyUp}"
2233
+ @blur="${this._onBlur}"
2234
+
2235
+ />
2236
+ </div>
2237
+ ${this._renderErrorMsg()}
2238
+ `;
2239
+ }
2240
+ _onKeyUp(e2) {
2241
+ if (this.onlyNumbers && !onlyContainsNumbers(this._input.value)) {
2242
+ this._input.value = this._input.value.replace(/\D/g, "");
2243
+ } else {
2244
+ super._onKeyUp(e2);
2245
+ }
2246
+ }
2247
+ _iconClicked() {
2248
+ this.dispatchEvent(new CustomEvent("input-icon-click"));
2249
+ }
2250
+ }
2251
+ window.customElements.define("pd-input", PdInput);
2252
+ /**
2253
+ * @license
2254
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
2255
+ */
2256
+ class PdRadioGroup extends PdBaseUIInput {
2257
+ static get styles() {
2258
+ return [
2259
+ PdBaseUIInput.styles,
2260
+ css`
2261
+
2262
+ .group-style {
2263
+ display: flex;
2264
+ gap: var(--pd-cb-group-gap, 20px);
2265
+ flex-direction: var(--pd-cb-group-direction, row);
2266
+ flex-wrap: wrap;
2267
+ padding: var(--pd-input-label-padding, 0);
2268
+ padding-top: 5px;
2269
+ }
2270
+
2271
+ ::slotted(pd-checkbox) {
2272
+ --pd-cb-border-col-readonly: var(--pd-cb-border-col, var(--pd-default-col));
2273
+ }
2274
+
2275
+ `
2276
+ ];
2277
+ }
2278
+ firstUpdated() {
2279
+ this.addEventListener("field-change", (e2) => {
2280
+ const elCollection = this.getElementsByTagName("pd-checkbox");
2281
+ Object.keys(elCollection).forEach((keyValue) => {
2282
+ if (elCollection[keyValue] !== e2.target) {
2283
+ elCollection[keyValue].value = "false";
2284
+ } else {
2285
+ this.value = elCollection[keyValue].valueName;
2286
+ }
2287
+ elCollection[keyValue].readonly = elCollection[keyValue].value === "true";
2288
+ });
2289
+ this.dispatchEvent(
2290
+ new CustomEvent("validate-form", {
2291
+ detail: {
2292
+ singleElement: this,
2293
+ errorMap: /* @__PURE__ */ new Map()
2294
+ },
2295
+ composed: true,
2296
+ bubbles: true
2297
+ })
2298
+ );
2299
+ });
2300
+ const elColl = this.getElementsByTagName("pd-checkbox");
2301
+ Object.keys(elColl).forEach((keyValue) => {
2302
+ if (elColl[keyValue].value === "true") {
2303
+ elColl[keyValue].readonly = true;
2304
+ this.value = elColl[keyValue].valueName;
2305
+ }
2306
+ });
2307
+ }
2308
+ render() {
2309
+ return html`
2310
+ ${this._renderLabel()}
2311
+ <div class="group-style input ${o({ "error": this.errorMsg.length > 0 })}">
2312
+ <slot></slot>
2313
+ </div>
2314
+ ${this._renderErrorMsg()}
2315
+ `;
2316
+ }
2317
+ }
2318
+ window.customElements.define("pd-radio-group", PdRadioGroup);
2319
+ /**
2320
+ * @license
2321
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
2322
+ */
2323
+ const countryPrefixes = {
2324
+ de: "+49",
2325
+ // Deutschland
2326
+ be: "+32",
2327
+ // Belgien
2328
+ nl: "+31",
2329
+ // Niederland
2330
+ fr: "+33",
2331
+ // Frankreich
2332
+ es: "+34"
2333
+ // Spanien
2334
+ };
2335
+ function transformPhone(phone, country) {
2336
+ if (!phone || typeof phone !== "string") {
2337
+ return "";
2338
+ }
2339
+ const countryPrefix = countryPrefixes[country];
2340
+ if (!countryPrefix) {
2341
+ throw new Error(`Unbekanntes Land: ${country}`);
2342
+ }
2343
+ const cleanedPhone = phone.replace(/\s+/g, "").replace(/[^0-9+]/g, "");
2344
+ if (cleanedPhone.startsWith("+")) {
2345
+ return cleanedPhone;
2346
+ }
2347
+ if (cleanedPhone.startsWith("0")) {
2348
+ return countryPrefix + cleanedPhone.slice(1);
2349
+ }
2350
+ return "";
2351
+ }
2352
+ class PdContact extends LitElement {
2353
+ static get styles() {
2354
+ return [
2355
+ PDFontStyles,
2356
+ css`
2357
+ :host {
2358
+ display: block;
2359
+ }
2360
+
2361
+ .contact {
2362
+ display: flex;
2363
+ flex-direction: column;
2364
+ }
2365
+
2366
+ address {
2367
+ color: var(--pd-contact-address-col, var(--pd-default-font-content-col));
2368
+ line-height: 1.8;
2369
+ font-style: normal;
2370
+ }
2371
+
2372
+ dl {
2373
+ margin: 0;
2374
+ padding: 0;
2375
+ }
2376
+
2377
+ dt {
2378
+ font-weight: bold;
2379
+ padding-top: 10px;
2380
+ color: var(--pd-contact-address-title-col, var(--pd-default-font-title-col));
2381
+ }
2382
+
2383
+ dd {
2384
+ font-weight: 400;
2385
+ font-size: 1em;
2386
+ margin: 0;
2387
+ padding: 0;
2388
+ }
2389
+
2390
+ dd.larger {
2391
+ padding-top: 3px;
2392
+ padding-bottom: 5px;
2393
+ }
2394
+
2395
+ .contact-form {
2396
+ --row-padding-top: 10px;
2397
+ }
2398
+
2399
+ .link-icon {
2400
+ --pd-icon-bg-col-active: #859900;
2401
+ --pd-icon-bg-col-hover: #859900;
2402
+ --pd-icon-size: 14px;
2403
+ --pd-icon-stroke-col-active: white;
2404
+ --pd-icon-col-active: white;
2405
+ }
2406
+
2407
+ .link-item {
2408
+ display: flex;
2409
+ align-items: center;
2410
+ text-decoration: none;
2411
+ color: var(--pd-default-font-link-col, inherit);
2412
+ }
2413
+
2414
+ .link-item:hover {
2415
+ color: var(--pd-default-font-link-col-hover, #451A46) ;
2416
+ }
2417
+
2418
+ `
2419
+ ];
2420
+ }
2421
+ static get properties() {
2422
+ return {
2423
+ addressTitle: { type: String },
2424
+ addressRef: { type: String },
2425
+ /**
2426
+ * show (true) or not (false) tel number as link
2427
+ */
2428
+ phoneMailLink: { type: Boolean },
2429
+ /**
2430
+ * summary (true) or view (false) contact data
2431
+ */
2432
+ summary: { type: Boolean },
2433
+ /**
2434
+ * List with required contact fields, if not set use default (previous existing values to be consitent during update)
2435
+ */
2436
+ requiredFields: { type: Array },
2437
+ contact: { type: Object },
2438
+ match: { type: Object },
2439
+ /**
2440
+ * address type, business (true) or private (false), refactor, ist state internal? => _business, state:true
2441
+ */
2442
+ _business: { type: Boolean, state: true },
2443
+ _errorMap: { type: Object }
2444
+ };
2445
+ }
2446
+ constructor() {
2447
+ super();
2448
+ this.addressTitle = "Adres";
2449
+ this.requiredFields = [];
2450
+ this.summary = false;
2451
+ this.match = {};
2452
+ this._business = false;
2453
+ this._errorMap = /* @__PURE__ */ new Map();
2454
+ }
2455
+ update(changedProperties) {
2456
+ if (changedProperties.has("contact") && this.contact) {
2457
+ this._business = this.contact.business;
2458
+ }
2459
+ super.update(changedProperties);
2460
+ }
2461
+ connectedCallback() {
2462
+ super.connectedCallback();
2463
+ this.addEventListener("validate-form", this._validateForm);
2464
+ }
2465
+ disconnectedCallback() {
2466
+ super.connectedCallback();
2467
+ this.removeEventListener("validate-form", this._validateForm);
2468
+ }
2469
+ firstUpdated() {
2470
+ var _a, _b;
2471
+ this.addEventListener("key-pressed", (e2) => {
2472
+ this._errorMap.set(e2.detail.name, "");
2473
+ super.requestUpdate();
2474
+ });
2475
+ if (this.contact) {
2476
+ const detail = {
2477
+ errorMap: /* @__PURE__ */ new Map()
2478
+ };
2479
+ (_b = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById("contactContainerId")) == null ? void 0 : _b.dispatchEvent(
2480
+ new CustomEvent("validate-form", { detail })
2481
+ );
2482
+ }
2483
+ }
2484
+ render() {
2485
+ return html`
2486
+ <div class="contact">
2487
+ ${this.summary ? this._renderViewContact() : this._renderEditContact()}
2488
+ </div>
2489
+ `;
2490
+ }
2491
+ _renderEditContact() {
2492
+ return html`
2493
+ <pd-form-container id="contactContainerId" requiredFieldInfo>
2494
+ <pd-form-row id="testFormId">
2495
+ <pd-radio-group
2496
+ class="quarter3"
2497
+ label="Type"
2498
+ required
2499
+ value="${this._getRadioValue()}"
2500
+ @field-change="${this._switchAddressType}"
2501
+ style="--group-gap: 20px;"
2502
+ >
2503
+ <pd-checkbox value="${this.contact ? !this.contact.business : true}" valueName="private"
2504
+ >Particulier</pd-checkbox
2505
+ >
2506
+ <pd-checkbox valueName="business" value="${this.contact ? this.contact.business : false}">Onderneming</pd-checkbox>
2507
+ </pd-radio-group>
2508
+ </pd-form-row>
2509
+
2510
+ ${this._business ? html`
2511
+ <pd-form-row class="contact-form">
2512
+ <pd-input
2513
+ id="compNameId"
2514
+ class="quarter3"
2515
+ label="Naam onderneming"
2516
+ ?required="${this._isRequired("companyName")}"
2517
+ value="${this.contact ? this.contact.companyName : ""}"
2518
+ valueName="companyName"
2519
+ autoCompleteName="organization"
2520
+ ></pd-input>
2521
+ </pd-form-row>
2522
+ <pd-form-row class="contact-form">
2523
+ <pd-input
2524
+ id="vatId"
2525
+ class="quarter3"
2526
+ label="Ondernemingsnr"
2527
+ ?required="${this._isRequired("vatNr")}"
2528
+ field-type="vat"
2529
+ valueName="vatNr"
2530
+ value="${this.contact ? this.contact.vatNr : ""}"
2531
+ autoCompleteName="vat"
2532
+ ></pd-input>
2533
+ </pd-form-row>
2534
+ ` : html`
2535
+ <pd-form-row class="contact-form">
2536
+ <pd-input
2537
+ id="firstNameId"
2538
+ class="quarter3"
2539
+ label="Voornaam"
2540
+ valueName="firstName"
2541
+ value="${this.contact ? this.contact.firstName : ""}"
2542
+ autoCompleteName="given-name"
2543
+ ?required="${this._isRequired("firstName")}"
2544
+ ></pd-input>
2545
+ </pd-form-row>
2546
+ <pd-form-row class="contact-form">
2547
+ <pd-input
2548
+ id="lastNameId"
2549
+ class="quarter3"
2550
+ label="Naam"
2551
+ valueName="lastName"
2552
+ value="${this.contact ? this.contact.lastName : ""}"
2553
+ autoCompleteName="family-name"
2554
+ ?required="${this._isRequired("lastName")}"
2555
+ ></pd-input>
2556
+ </pd-form-row>
2557
+ `}
2558
+ <pd-form-row class="contact-form">
2559
+ <pd-input
2560
+ id="streetId"
2561
+ class="quarter2"
2562
+ label="Straat"
2563
+ valueName="street"
2564
+ value="${this.contact ? this.contact.street : ""}"
2565
+ autoCompleteName="street-address"
2566
+ ?required="${this._isRequired("street")}"
2567
+ ></pd-input>
2568
+ <pd-input
2569
+ id="streetNrId"
2570
+ class="quarter1"
2571
+ label="Nr"
2572
+ valueName="streetNr"
2573
+ value="${this.contact ? this.contact.streetNr : ""}"
2574
+ ?required="${this._isRequired("streetNr")}"
2575
+ ></pd-input>
2576
+ </pd-form-row>
2577
+ <pd-form-row class="contact-form">
2578
+ ${this.match && this.match.zip ? html`
2579
+ <pd-input
2580
+ readonly
2581
+ id="zipId"
2582
+ class="quarter1"
2583
+ label="Postcode"
2584
+ valueName="zip"
2585
+ value="${this.match ? this.match.zip || "" : ""}"
2586
+ ></pd-input>
2587
+ ` : html`
2588
+ <pd-input
2589
+ id="zipId"
2590
+ class="quarter1"
2591
+ label="Postcode"
2592
+ field-type="number"
2593
+ valueName="zip"
2594
+ value="${this.contact ? this.contact.zip : ""}"
2595
+ autoCompleteName="postal-code"
2596
+ ?required="${this._isRequired("zip")}"
2597
+ ></pd-input>
2598
+ `}
2599
+ <pd-input
2600
+ id="cityId"
2601
+ class="quarter2"
2602
+ label="Plaats"
2603
+ valueName="city"
2604
+ value="${this.contact ? this.contact.city : ""}"
2605
+ autoCompleteName="locality"
2606
+ ?required="${this._isRequired("city")}"
2607
+ ></pd-input>
2608
+ </pd-form-row>
2609
+ <pd-form-row class="contact-form">
2610
+ <pd-input
2611
+ class="quarter3"
2612
+ id="additionalHintId"
2613
+ label="Extra informatie"
2614
+ value="${this.contact ? this.contact.additionalHint : ""}"
2615
+ ></pd-input>
2616
+ </pd-form-row>
2617
+ <pd-form-row class="contact-form">
2618
+ <pd-input
2619
+ id="phoneId"
2620
+ class="quarter3"
2621
+ label="Telefoon"
2622
+ name="phone"
2623
+ valueName="phone1"
2624
+ value="${this.contact ? this.contact.phone1 : ""}"
2625
+ field-type="phone"
2626
+ autoCompleteName="tel"
2627
+ ?required="${this._isRequired("phone1")}"
2628
+ ></pd-input>
2629
+ </pd-form-row>
2630
+ <pd-form-row class="contact-form">
2631
+ <pd-input
2632
+ id="mailId"
2633
+ class="quarter3"
2634
+ label="E-mail"
2635
+ field-type="mail"
2636
+ valueName="email"
2637
+ value="${this.contact ? this.contact.email : ""}"
2638
+ autoCompleteName="email"
2639
+ ?required="${this._isRequired("email")}"
2640
+ ></pd-input>
2641
+ </pd-form-row>
2642
+ </pd-form-container>
2643
+ `;
2644
+ }
2645
+ _getRadioValue() {
2646
+ if (this.contact) {
2647
+ return this.contact.business ? "business" : "private";
2648
+ }
2649
+ return "private";
2650
+ }
2651
+ _renderViewContact() {
2652
+ if (!this.contact) {
2653
+ return html`<p>Contact undefined</p>`;
2654
+ }
2655
+ const trPhoneNr = transformPhone(this.contact.phone1, this.contact.country || "be");
2656
+ return html`
2657
+ <address>
2658
+ <dl>
2659
+ <dt>${this.addressTitle}</dt>
2660
+ ${this.contact ? html`
2661
+ <dd>${this.contact.companyName}</dd>
2662
+ <dd>${this.contact.vatNr}</dd>
2663
+ <dd>${this._getFullName()}</dd>
2664
+ <dd>${this._getFullStreet()}</dd>
2665
+ <dd>${this._getFullLocation()}</dd>
2666
+ ${this.contact.additionalHint ? html`<dd>${this.contact.additionalHint}</dd>` : ""}
2667
+ <dd>${this.contact.country}</dd>
2668
+
2669
+ ${this.contact.phone1 ? html`
2670
+ <dd class="larger">${this.phoneMailLink && trPhoneNr ? html`
2671
+ <a href="${`tel:${trPhoneNr}`}"
2672
+ aria-label="${`Phone call: ${this.contact.phone1}`}"
2673
+ class="link-item">
2674
+ <span style="margin-right: 8px;">${this.contact.phone1}</span>
2675
+ <pd-icon activeIcon icon="phoneIcon" class="round link-icon"></pd-icon>
2676
+ </a>
2677
+ ` : this.contact.phone1}</dd>
2678
+ ` : ""}
2679
+
2680
+ ${this.contact.email ? html`
2681
+ <dd class="larger">${this.phoneMailLink ? html`
2682
+ <a href="${`mailto:${this.contact.email}`}"
2683
+ aria-label="${`Send mail: ${this.contact.email}`}"
2684
+ class="link-item">
2685
+ <span style="margin-right: 8px;">${this.contact.email}</span>
2686
+ <pd-icon activeIcon icon="mailIcon" class="round link-icon"></pd-icon>
2687
+ </a>
2688
+ ` : this.contact.email}</dd>
2689
+ ` : ""}
2690
+
2691
+ ${this.contact.btw ? html`<dt>BTW</dt>
2692
+ <dd>${this.contact.btw}</dd>` : ""}
2693
+ ${this.contact.kbc ? html`<dt>Bankgegevens</dt>
2694
+ <dd>${this.contact.kbc}</dd>
2695
+ <dd>${this.contact.bank}</dd>` : ""}
2696
+ ` : html`${this.addressRef || "--"}`}
2697
+ </dl>
2698
+ </address>
2699
+ `;
2700
+ }
2701
+ _switchAddressType(e2) {
2702
+ this._business = e2.detail.name === "business";
2703
+ }
2704
+ _isRequired(field) {
2705
+ return this.requiredFields && this.requiredFields.length > 0 ? this.requiredFields.includes(field) : false;
2706
+ }
2707
+ /*
2708
+ validateInput() {
2709
+ const matchForValidate = this.match || {};
2710
+
2711
+ const companyName = this.business
2712
+ ? this.shadowRoot.getElementById('compNameId').value
2713
+ : undefined;
2714
+ const vatNr = this.business
2715
+ ? this.shadowRoot.getElementById('vatId').value
2716
+ : undefined;
2717
+ const firstName = this.business
2718
+ ? undefined
2719
+ : this.shadowRoot.getElementById('firstNameId').value;
2720
+ const lastName = this.business
2721
+ ? undefined
2722
+ : this.shadowRoot.getElementById('lastNameId').value;
2723
+ const street = this.shadowRoot.getElementById('streetId').value;
2724
+ const streetNr = this.shadowRoot.getElementById('streetNrId').value;
2725
+ const additionalHint =
2726
+ this.shadowRoot.getElementById('additionalHintId').value;
2727
+ const zip = this.shadowRoot.getElementById('zipId').value;
2728
+ const city = this.shadowRoot.getElementById('cityId').value;
2729
+ const phone1 = this.shadowRoot.getElementById('phoneId').value;
2730
+ const email = this.shadowRoot.getElementById('mailId').value;
2731
+
2732
+ const newErrorMap = new Map();
2733
+
2734
+ const reqFieldFunc = (field, key, type, mustMatch) => {
2735
+ if (!field || field === '') {
2736
+ newErrorMap.set(
2737
+ key,
2738
+ type !== 'phone'
2739
+ ? 'Vul dit veld in.'
2740
+ : 'Vul dit veld in. Gebruik +32 494 667085.'
2741
+ );
2742
+ } else if (mustMatch && field !== mustMatch) {
2743
+ newErrorMap.set(key, `Not match ${mustMatch}`);
2744
+ } else {
2745
+ switch (type) {
2746
+ case 'vat':
2747
+ // eslint-disable-next-line no-restricted-globals
2748
+ if (!newErrorMap.has(key) && !PdContact._vatIsValid(field)) {
2749
+ newErrorMap.set(key, 'Formaat BE0123456789 vereist');
2750
+ }
2751
+ break;
2752
+ case 'number':
2753
+ // eslint-disable-next-line no-restricted-globals
2754
+ if (!newErrorMap.has(key) && isNaN(field)) {
2755
+ newErrorMap.set(key, 'Alleen nummers toegestaan');
2756
+ }
2757
+ break;
2758
+ case 'mail':
2759
+ if (!newErrorMap.has(key) && !PdContact._mailIsValid(field)) {
2760
+ newErrorMap.set(key, 'Ongeldig e-mailadres');
2761
+ }
2762
+ break;
2763
+ case 'phone':
2764
+ if (!newErrorMap.has(key) && !PdContact._phoneIsValid(field)) {
2765
+ newErrorMap.set(
2766
+ key,
2767
+ 'Ongeldig telefoonnummer, gebruik +32 494 667085.'
2768
+ );
2769
+ }
2770
+ break;
2771
+ default:
2772
+ console.warn('Undefined field: ', type);
2773
+ }
2774
+ }
2775
+ };
2776
+
2777
+ if (this.business) {
2778
+ reqFieldFunc(companyName, 'companyName');
2779
+ reqFieldFunc(vatNr, 'vatNr', 'vat');
2780
+ } else {
2781
+ reqFieldFunc(firstName, 'firstName');
2782
+ reqFieldFunc(lastName, 'lastName');
2783
+ }
2784
+ reqFieldFunc(street, 'street');
2785
+ reqFieldFunc(streetNr, 'streetNr');
2786
+ reqFieldFunc(zip, 'zip', 'number', matchForValidate.zip);
2787
+ reqFieldFunc(city, 'city');
2788
+ reqFieldFunc(phone1, 'phone1', 'phone');
2789
+ reqFieldFunc(email, 'email', 'mail');
2790
+ this._errorMap = newErrorMap;
2791
+
2792
+ return new Promise((resolve, reject) => {
2793
+ if (newErrorMap.size > 0) {
2794
+ reject();
2795
+ } else {
2796
+ this.contact = {
2797
+ business: this.business,
2798
+ companyName,
2799
+ vatNr,
2800
+ firstName,
2801
+ lastName,
2802
+ street,
2803
+ streetNr,
2804
+ additionalHint,
2805
+ zip,
2806
+ city,
2807
+ phone1,
2808
+ email,
2809
+ };
2810
+ resolve(this.contact);
2811
+ }
2812
+ });
2813
+ }
2814
+ */
2815
+ _validateForm(e2) {
2816
+ if (e2.detail && !e2.detail.singleElement) {
2817
+ this.shadowRoot.getElementById("contactContainerId").dispatchEvent(
2818
+ new CustomEvent("validate-form", {
2819
+ detail: e2.detail
2820
+ })
2821
+ );
2822
+ if (e2.detail.errorMap.size === 0 && e2.detail.formData) {
2823
+ e2.detail.formData[this.id] = this._setFormData();
2824
+ }
2825
+ }
2826
+ }
2827
+ _setFormData() {
2828
+ const companyName = this._business ? this.shadowRoot.getElementById("compNameId").value : void 0;
2829
+ const vatNr = this._business ? this.shadowRoot.getElementById("vatId").value : void 0;
2830
+ const firstName = this._business ? void 0 : this.shadowRoot.getElementById("firstNameId").value;
2831
+ const lastName = this._business ? void 0 : this.shadowRoot.getElementById("lastNameId").value;
2832
+ const street = this.shadowRoot.getElementById("streetId").value;
2833
+ const streetNr = this.shadowRoot.getElementById("streetNrId").value;
2834
+ const additionalHint = this.shadowRoot.getElementById("additionalHintId").value;
2835
+ const zip = this.shadowRoot.getElementById("zipId").value;
2836
+ const city = this.shadowRoot.getElementById("cityId").value;
2837
+ const phone1 = this.shadowRoot.getElementById("phoneId").value;
2838
+ const email = this.shadowRoot.getElementById("mailId").value;
2839
+ return {
2840
+ business: this._business,
2841
+ companyName,
2842
+ vatNr,
2843
+ firstName,
2844
+ lastName,
2845
+ street,
2846
+ streetNr,
2847
+ additionalHint,
2848
+ zip,
2849
+ city,
2850
+ phone1,
2851
+ email
2852
+ };
2853
+ }
2854
+ _getFullName() {
2855
+ return PdContact._getFullVal(this.contact.firstName, this.contact.lastName);
2856
+ }
2857
+ _getFullStreet() {
2858
+ return PdContact._getFullVal(this.contact.street, this.contact.streetNr);
2859
+ }
2860
+ _getFullLocation() {
2861
+ return PdContact._getFullVal(this.contact.zip, this.contact.city);
2862
+ }
2863
+ static _getFullVal(val1, val2, elseStr) {
2864
+ let fullVal = "";
2865
+ if (val1) {
2866
+ fullVal += val1;
2867
+ }
2868
+ if (val2) {
2869
+ fullVal += ` ${val2}`;
2870
+ }
2871
+ return fullVal.length === 0 ? elseStr : fullVal;
2872
+ }
2873
+ }
2874
+ window.customElements.define("pd-contact", PdContact);
2875
+ /**
2876
+ * @license
2877
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
2878
+ */
2879
+ class PdOrderContacts extends LitElement {
2880
+ static get styles() {
2881
+ return [
2882
+ PDFontStyles,
2883
+ css`
2884
+ :host {
2885
+ display: block;
2886
+ }
2887
+
2888
+ p {
2889
+ color: var(--pd-default-font-content-col);
2890
+ font-size: var(--pd-default-font-content-size);
2891
+ font-family: var(--pd-default-font-content-family);
2892
+ max-width: 1000px;
2893
+ }
2894
+
2895
+ a {
2896
+ cursor: pointer;
2897
+ font-family: var(--pd-default-font-link-family);
2898
+ font-size: var(--pd-default-font-link-size);
2899
+ color: var(--pd-default-font-link-col);
2900
+ }
2901
+
2902
+ a:hover {
2903
+ color: var(--pd-default-font-link-col-hover);
2904
+ }
2905
+
2906
+ .collapse-contact {
2907
+ padding: 10px;
2908
+ }
2909
+
2910
+ .summary-box {
2911
+ display: flex;
2912
+ flex-wrap: wrap;
2913
+ gap: 10px;
2914
+ }
2915
+
2916
+ .first-contact {
2917
+ min-width: 200px;
2918
+ }
2919
+ `
2920
+ ];
2921
+ }
2922
+ static get properties() {
2923
+ return {
2924
+ /**
2925
+ * List with required contact fields, if not set use default (previous existing values to be consitent during update)
2926
+ */
2927
+ requiredFields: { type: Array },
2928
+ orderContact: { type: Object },
2929
+ billingContact: { type: Object },
2930
+ summary: { type: Boolean },
2931
+ withPayment: { type: Boolean },
2932
+ match: { type: Object },
2933
+ _ownBillingContact: { type: Boolean }
2934
+ };
2935
+ }
2936
+ constructor() {
2937
+ super();
2938
+ this._ownBillingContact = false;
2939
+ this.requiredFields = [];
2940
+ this.match = {};
2941
+ }
2942
+ connectedCallback() {
2943
+ super.connectedCallback();
2944
+ this.addEventListener("validate-form", this._validateForm);
2945
+ }
2946
+ disconnectedCallback() {
2947
+ super.connectedCallback();
2948
+ this.removeEventListener("validate-form", this._validateForm);
2949
+ }
2950
+ firstUpdated() {
2951
+ this.addEventListener("toggle-accordion", (e2) => {
2952
+ const origin = e2.composedPath()[0];
2953
+ const collapsiblePanels = this.shadowRoot.querySelectorAll(
2954
+ "pd-collapse"
2955
+ );
2956
+ collapsiblePanels.forEach((panel) => {
2957
+ if (panel !== origin) {
2958
+ panel.close();
2959
+ }
2960
+ });
2961
+ });
2962
+ }
2963
+ render() {
2964
+ if (this.summary) {
2965
+ return this._renderSummary();
2966
+ }
2967
+ return this._renderEditContacts();
2968
+ }
2969
+ _renderEditContacts() {
2970
+ return html`
2971
+ <pd-collapse id="orderContactCollapseId" active>
2972
+ <div slot="header" class="header">Adres onderhoud</div>
2973
+ <pd-contact
2974
+ id="orderContactId"
2975
+ class="collapse-contact"
2976
+ slot="content"
2977
+ .requiredFields="${this.requiredFields}"
2978
+ .contact="${this.orderContact}"
2979
+ .match="${this.match}"
2980
+ ></pd-contact>
2981
+ </pd-collapse>
2982
+
2983
+ ${this.withPayment ? html`
2984
+ <pd-collapse id="billingContactCollapseId">
2985
+ <div slot="header" class="header">Facturatieadres</div>
2986
+ <div slot="content">
2987
+ ${this._ownBillingContact ? html`
2988
+ <p>
2989
+ <a @click="${() => {
2990
+ this._ownBillingContact = false;
2991
+ }}"
2992
+ >Gebruik adres onderhoud als facturatieadres</a
2993
+ >
2994
+ </p>
2995
+ <pd-contact
2996
+ id="billingContactId"
2997
+ class="collapse-contact"
2998
+ .requiredField="${this.requiredFields}"
2999
+ .contact="${this.billingContact}"
3000
+ ></pd-contact>
3001
+ ` : html`
3002
+ <p>Het adres waar het onderhoud plaatsvindt, wordt gebruikt als facturatieadres.</p>
3003
+ <p>
3004
+ <a @click="${() => {
3005
+ this._ownBillingContact = true;
3006
+ }}">Creëer een ander facturatieadres.</a>
3007
+ </p>
3008
+ `}
3009
+ </div>
3010
+ </pd-collapse>` : ""}
3011
+ `;
3012
+ }
3013
+ _renderSummary() {
3014
+ return html`
3015
+ <div class="summary-box">
3016
+ <pd-contact
3017
+ class="first-contact"
3018
+ addressTitle="Onderhoud"
3019
+ .contact="${this.orderContact}"
3020
+ summary
3021
+ ></pd-contact>
3022
+ ${this.billingContact ? html`
3023
+ <pd-contact
3024
+ addressTitle="Facturatie"
3025
+ addressRef="adres onderhoud"
3026
+ .contact="${this.billingContact}"
3027
+ summary
3028
+ ></pd-contact>` : ""}
3029
+ </div>
3030
+ `;
3031
+ }
3032
+ _validateForm(e2) {
3033
+ if (e2.detail && !e2.detail.singleElement) {
3034
+ this.shadowRoot.getElementById("orderContactId").dispatchEvent(
3035
+ new CustomEvent("validate-form", {
3036
+ detail: e2.detail
3037
+ })
3038
+ );
3039
+ const errorSize = e2.detail.errorMap.size;
3040
+ if (errorSize > 0) {
3041
+ this.shadowRoot.getElementById("orderContactCollapseId").open();
3042
+ }
3043
+ if (this._ownBillingContact) {
3044
+ this.shadowRoot.getElementById("billingContactId").dispatchEvent(
3045
+ new CustomEvent("validate-form", {
3046
+ detail: e2.detail
3047
+ })
3048
+ );
3049
+ if (e2.detail.errorMap.size > errorSize) {
3050
+ this.shadowRoot.getElementById("billingContactCollapseId").open();
3051
+ }
3052
+ }
3053
+ }
3054
+ }
3055
+ }
3056
+ window.customElements.define("pd-order-contacts", PdOrderContacts);
3057
+ export {
3058
+ ICON_CLOSE as I,
3059
+ o
3060
+ };