comand-component-library 4.1.8 → 4.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/dist/comand-component-library.js +4473 -4422
  2. package/dist/comand-component-library.umd.cjs +36 -26
  3. package/dist/style.css +1 -1
  4. package/package.json +2 -2
  5. package/src/ComponentLibrary.vue +17 -20
  6. package/src/assets/data/listOfComponents.json +1 -0
  7. package/src/assets/styles/component-library-global-styles.scss +1 -1
  8. package/src/componentSettingsDataAndControls.vue +17 -1
  9. package/src/components/CmdAddressData.vue +1 -3
  10. package/src/components/CmdBox.vue +3 -3
  11. package/src/components/CmdCookieDisclaimer.vue +154 -59
  12. package/src/components/CmdFakeSelect.vue +4 -4
  13. package/src/components/CmdFancyBox.vue +77 -35
  14. package/src/components/CmdFormElement.vue +5 -5
  15. package/src/components/CmdGoogleMaps.vue +2 -2
  16. package/src/components/CmdImageGallery.vue +1 -1
  17. package/src/components/CmdListOfRequirements.vue +2 -2
  18. package/src/components/CmdMultistepFormProgressBar.vue +7 -7
  19. package/src/components/CmdPageFooter.vue +9 -1
  20. package/src/components/CmdPagination.vue +1 -1
  21. package/src/components/CmdSiteSearch.vue +2 -2
  22. package/src/components/CmdThumbnailScroller.vue +3 -3
  23. package/src/components/CmdUploadForm.vue +44 -44
  24. package/src/mixins/CmdBox/DefaultMessageProperties.js +4 -4
  25. package/src/mixins/CmdCookieDisclaimer/DefaultMessageProperties.js +3 -2
  26. package/src/mixins/CmdFakeSelect/DefaultMessageProperties.js +5 -5
  27. package/src/mixins/CmdFormElement/DefaultMessageProperties.js +5 -5
  28. package/src/mixins/CmdGoogleMaps/DefaultMessageProperties.js +2 -2
  29. package/src/mixins/CmdImageGallery/DefaultMessageProperties.js +1 -1
  30. package/src/mixins/CmdListOfRequirements/DefaultMessageProperties.js +2 -2
  31. package/src/mixins/CmdPagination/DefaultMessageProperties.js +2 -2
  32. package/src/mixins/CmdSiteSearch/DefaultMessageProperties.js +2 -6
  33. package/src/mixins/CmdThumbnailScroller/DefaultMessageProperties.js +3 -3
  34. package/src/mixins/CmdUploadForm/DefaultMessageProperties.js +45 -45
  35. package/src/mixins/FieldValidation.js +5 -5
  36. package/src/mixins/GlobalDefaultMessageProperties.js +7 -7
  37. package/src/pages/PageWrapper.vue +1 -1
  38. package/src/mixins/CmdAddressData/DefaultMessageProperties.js +0 -20
@@ -7,7 +7,7 @@
7
7
  </template>
8
8
  <!-- end slot -->
9
9
 
10
- <template v-else>
10
+ <div v-else>
11
11
  <!-- begin CmdHeadline -->
12
12
  <CmdHeadline
13
13
  v-if="cmdHeadlineCookieDisclaimer?.show && cmdHeadlineCookieDisclaimer?.headlineText && cmdHeadlineCookieDisclaimer?.headlineLevel"
@@ -28,13 +28,9 @@
28
28
  />
29
29
  <!-- end CmdHeadline -->
30
30
 
31
- <!-- begin CmdBox -->
32
- <CmdBox v-for="(cookie, index) in cookieOptions.required.cookies || []"
33
- :useSlots="['header', 'body']"
34
- :collapsible="cmdBoxRequiredCookies?.collapsible"
35
- :key="index"
36
- >
37
- <template v-slot:header>
31
+ <div v-for="(cookie, index) in cookieOptions.required.cookies || []"
32
+ :key="index" class="collapsible-box">
33
+ <header>
38
34
  <!-- begin CmdFormElement -->
39
35
  <CmdFormElement
40
36
  element="input"
@@ -45,11 +41,17 @@
45
41
  :disabled="cookie.disabled"
46
42
  :id="cookie.id"
47
43
  :toggleSwitch="true"
48
- :title="getMessage('cmdcookiedisclaimer.title.cookie_cannot_be_disabled')"
44
+ :title="getMessage('cookie_disclaimer.title.cookie_cannot_be_disabled')"
49
45
  />
50
46
  <!-- end CmdFormElement -->
51
- </template>
52
- <template v-slot:body>
47
+
48
+ <!-- begin icon to toggle box-body -->
49
+ <a href="#" @click.prevent="toggleBoxBody(cookie.id)" :title="getMessage('cookie_disclaimer.title.toggle_box_content')">
50
+ <span :class="boxIsOpen(cookie.id) ? iconClassBoxExpanded : iconClassBoxCollapsed"></span>
51
+ </a>
52
+ <!-- end icon to toggle box-body -->
53
+ </header>
54
+ <div v-show="boxIsOpen(cookie.id)" class="collapsible-box-body">
53
55
  <p v-if="cookie.description">{{ cookie.description }}</p>
54
56
  <p v-if="cookie.linkDataPrivacy">
55
57
  {{ cookie.linkDataPrivacy.label }}
@@ -60,8 +62,8 @@
60
62
  </a>
61
63
  </p>
62
64
  <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>
63
- </template>
64
- </CmdBox>
65
+ </div>
66
+ </div>
65
67
  <!-- end CmdBox -->
66
68
  </div>
67
69
  <!-- end required cookies -->
@@ -78,13 +80,9 @@
78
80
  "/>
79
81
  <!-- end CmdHeadline -->
80
82
 
81
- <!-- begin CmdBox -->
82
- <CmdBox v-for="(cookie, index) in cookieOptions.optional.cookies || []"
83
- :useSlots="['header', 'body']"
84
- :collapsible="cmdBoxOptionalCookies?.collapsible"
85
- :key="index"
86
- >
87
- <template v-slot:header>
83
+ <div v-for="(cookie, index) in cookieOptions.optional.cookies || []"
84
+ :key="index" class="collapsible-box">
85
+ <header>
88
86
  <!-- begin CmdFormElement -->
89
87
  <CmdFormElement
90
88
  element="input"
@@ -95,11 +93,17 @@
95
93
  :disabled="cookie.disabled"
96
94
  :id="cookie.id"
97
95
  :toggleSwitch="true"
98
- :title="getMessage('cmdcookiedisclaimer.title.toggle_to_accept_cookie')"
96
+ :title="getMessage('cookie_disclaimer.title.toggle_to_accept_cookie')"
99
97
  />
100
98
  <!-- end CmdFormElement -->
101
- </template>
102
- <template v-slot:body>
99
+
100
+ <!-- begin icon to toggle box-body -->
101
+ <a href="#" @click.prevent="toggleBoxBody(cookie.id)" :title="getMessage('cookie_disclaimer.title.toggle_box_content')">
102
+ <span :class="boxIsOpen(cookie.id) ? iconClassBoxExpanded : iconClassBoxCollapsed"></span>
103
+ </a>
104
+ <!-- end icon to toggle box-body -->
105
+ </header>
106
+ <div v-show="boxIsOpen(cookie.id)" class="collapsible-box-body">
103
107
  <p v-if="cookie.description">{{ cookie.description }}</p>
104
108
  <p v-if="cookie.linkDataPrivacy">
105
109
  {{ cookie.linkDataPrivacy.label }}
@@ -110,17 +114,16 @@
110
114
  </a>
111
115
  </p>
112
116
  <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>
113
- </template>
114
- </CmdBox>
115
- <!-- end CmdBox -->
117
+ </div>
118
+ </div>
116
119
  </div>
117
120
  <!-- end optional cookies -->
118
121
  </slot>
119
122
  <!-- end slot for cookie-options -->
120
123
 
121
- <!-- begin slot for privacy-text -->
122
- <slot name="privacy-text"></slot>
123
- <!-- end slot for privacy-text -->
124
+ <!-- begin privacy-text -->
125
+ <div v-if="privacyText" class="privacy-text" v-html="privacyText"></div>
126
+ <!-- end privacy-text-->
124
127
 
125
128
  <!-- begin button-wrapper for 'accept'-buttons -->
126
129
  <div class="button-wrapper align-center">
@@ -132,7 +135,7 @@
132
135
  </button>
133
136
  </div>
134
137
  <!-- end button-wrapper for 'accept'-buttons -->
135
- </template>
138
+ </div>
136
139
  </div>
137
140
  </transition>
138
141
  </template>
@@ -148,10 +151,25 @@ export default {
148
151
  data() {
149
152
  return {
150
153
  showCookieDisclaimer: true,
151
- dataPrivacyContent: ""
154
+ dataPrivacyContent: "",
155
+ openBoxes: []
152
156
  }
153
157
  },
154
158
  props: {
159
+ /**
160
+ * define icon-class for collapsed box
161
+ */
162
+ iconClassBoxCollapsed: {
163
+ type: String,
164
+ default: "icon-chevron-one-stripe-down"
165
+ },
166
+ /**
167
+ * define icon-class for expanded box
168
+ */
169
+ iconClassBoxExpanded: {
170
+ type: String,
171
+ default: "icon-chevron-one-stripe-up"
172
+ },
155
173
  /**
156
174
  * activate if you want to use slot instead for given structure
157
175
  */
@@ -214,6 +232,13 @@ export default {
214
232
  type: Object,
215
233
  required: false
216
234
  },
235
+ /**
236
+ * optional privacy-text shown at bottom of cookie-disclaimer
237
+ */
238
+ privacyText: {
239
+ type: String,
240
+ required: false
241
+ },
217
242
  /**
218
243
  * label for button to accepting all cookies
219
244
  */
@@ -247,6 +272,22 @@ export default {
247
272
  }
248
273
  },
249
274
  methods: {
275
+ boxIsOpen(cookieId) {
276
+ console.log("boxOpen", this.openBoxes.includes(cookieId))
277
+ console.log("cookieId", cookieId)
278
+ return this.openBoxes.includes(cookieId)
279
+ },
280
+ toggleBoxBody(cookieId) {
281
+ const index = this.openBoxes.indexOf(cookieId);
282
+
283
+ if (index === -1) {
284
+ // cookieId does not exist in the array, so add it
285
+ this.openBoxes.push(cookieId);
286
+ } else {
287
+ // cookieId already exists in the array, so remove it
288
+ this.openBoxes.splice(index, 1);
289
+ }
290
+ },
250
291
  acceptCurrentCookies() {
251
292
  this.$emit("close-cookie-disclaimer", this.acceptedCookies)
252
293
  },
@@ -298,49 +339,103 @@ export default {
298
339
  bottom: 0;
299
340
  top: auto;
300
341
 
301
- .cmd-box {
302
- .box-header {
303
- padding: 0;
304
- padding-right: var(--default-padding);
342
+ .collapsible-box {
343
+ border-radius: var(--default-border-radius);
344
+
345
+ header {
346
+ display: flex;
347
+ align-items: center;
348
+ border: var(--primary-border);
305
349
  justify-content: unset; /* overwrite setting for collapsible boxes */
350
+ background: var(--primary-color);
351
+ border-top-left-radius: inherit;
352
+ border-top-right-radius: inherit;
353
+
354
+ &:has(input:checked) {
355
+ background: var(--pure-white);
356
+
357
+ span[class*="icon-"] {
358
+ color: var(--hyperlink-color);
359
+ }
360
+
361
+ label {
362
+ .label-text span {
363
+ color: var(--hyperlink-color); /* required to set label-text in header to white */
364
+ }
365
+ }
366
+ }
367
+
368
+ &:has(input:disabled) {
369
+ background: var(--disabled-background);
370
+
371
+ span[class*="icon-"] {
372
+ color: var(--hyperlink-color);
373
+ }
374
+
375
+ label {
376
+ .label-text span {
377
+ color: var(--disabled-color) !important; /* required to set label-text in header to white */
378
+ }
379
+ }
380
+ }
381
+
382
+ &:has(a:is(:hover, :active, :focus)) {
383
+ background: var(--primary-color);
384
+
385
+ label .label-text span, span[class*="icon-"] {
386
+ color: var(--pure-white) !important;
387
+ }
388
+ }
389
+
390
+ span[class*="icon-"] {
391
+ color: var(--pure-white);
392
+ }
306
393
 
307
394
  label {
308
395
  padding: calc(var(--default-padding) / 2) var(--default-padding);
309
396
 
397
+ .label-text span {
398
+ color: var(--pure-white); /* required to set label-text in header to white */
399
+ }
400
+
310
401
  &.disabled {
311
402
  .label-text span {
312
403
  color: var(--pure-white) !important; /* required to set label-text in header to white */
313
404
  }
314
405
  }
315
406
 
316
- & + .toggle-icon {
317
- padding: calc(var(--default-padding) / 2) var(--default-padding);
318
- width: 100%;
319
- justify-content: flex-end;
320
- text-align: right;
407
+ &:hover, &:active, &:focus {
408
+ cursor: pointer;
321
409
  }
322
- }
323
-
324
- &:hover, &:active, &:focus {
325
- background: var(--hyperlink-color);
326
410
 
327
- label.disabled .label-text span {
328
- color: var(--disabled-color) !important; /* required to set label-text on hover back to disabled-color */
411
+ input {
412
+ &:hover, &:active, &:focus {
413
+ cursor: pointer;
414
+ }
329
415
  }
330
416
  }
331
- }
332
417
 
333
- .box-body {
334
- padding: var(--default-padding);
418
+ a {
419
+ text-decoration: none;
420
+ flex: 1;
421
+ display: flex;
422
+ justify-content: flex-end;
423
+ padding: var(--default-padding);
424
+ }
335
425
  }
336
- }
337
426
 
338
- h1 {
339
- text-align: center;
340
- }
427
+ .collapsible-box-body {
428
+ padding: var(--default-padding);
429
+ border: var(--default-border);
430
+ border-top: 0;
431
+ background: var(--box-background);
432
+ border-bottom-left-radius: inherit;
433
+ border-bottom-right-radius: inherit;
341
434
 
342
- .button {
343
- margin: 0 auto;
435
+ p:last-child {
436
+ margin: 0;
437
+ }
438
+ }
344
439
  }
345
440
 
346
441
  > p {
@@ -348,10 +443,6 @@ export default {
348
443
  color: var(--color-scheme-text-color); /* must be assigned again, because content is placed by slot */
349
444
  }
350
445
 
351
- #form-cookies {
352
- margin-bottom: var(--default-margin);
353
- }
354
-
355
446
  p {
356
447
  a {
357
448
  text-decoration: underline;
@@ -361,6 +452,10 @@ export default {
361
452
  }
362
453
  }
363
454
  }
455
+
456
+ .privacy-text, .button-wrapper {
457
+ margin-top: var(--default-gap);
458
+ }
364
459
  }
365
460
 
366
461
  /* end cmd-cookie-disclaimer ------------------------------------------------------------------------------------------ */
@@ -382,7 +382,7 @@ export default {
382
382
  if (this.modelValue.length === 1) {
383
383
  return this.selectData.find(option => String(option.value) === String(this.modelValue[0]))?.text
384
384
  } else if (this.modelValue.length > 1) {
385
- return this.getMessage("cmdfakeselect.option.options_selected", this.modelValue.length)
385
+ return this.getMessage("fake_select.option.options_selected", this.modelValue.length)
386
386
  }
387
387
  } else if (this.selectData?.length) {
388
388
  // return text of first option nothing is selected (and type !== checkboxOptions && type !== content)
@@ -421,10 +421,10 @@ export default {
421
421
  selectAllOptionsText() {
422
422
  if (Array.isArray(this.modelValue) && this.modelValue.length === this.selectData.length) {
423
423
  this.allOptionsSelected = true
424
- return this.getMessage("cmdfakeselect.linktext.deselect_all_options")
424
+ return this.getMessage("fake_select.linktext.deselect_all_options")
425
425
  }
426
426
  this.allOptionsSelected = false
427
- return this.getMessage("cmdfakeselect.linktext.select_all_options")
427
+ return this.getMessage("fake_select.linktext.select_all_options")
428
428
  }
429
429
  },
430
430
  methods: {
@@ -497,7 +497,7 @@ export default {
497
497
  },
498
498
  // overwrite requirement-message form fieldValidation.js
499
499
  getRequirementMessage() {
500
- return this.getMessage("cmdfakeselect.headline.an_option_is_selected")
500
+ return this.getMessage("fake_select.headline.an_option_is_selected")
501
501
  }
502
502
  },
503
503
  watch: {
@@ -15,47 +15,47 @@
15
15
 
16
16
  <!-- begin button-wrapper -->
17
17
  <div
18
- v-if="(fancyboxOptionsProperties.printButtons?.color || fancyboxOptionsProperties.printButtons?.grayscale) || fancyboxOptionsProperties.closeIcon"
18
+ v-if="(fancyBoxOptionsProperties.printButtons?.color || fancyBoxOptionsProperties.printButtons?.grayscale) || fancyBoxOptionsProperties.closeIcon"
19
19
  class="button-wrapper no-flex"
20
20
  > <!-- begin print buttons -->
21
- <a v-if="showPrintButtons && fancyboxOptionsProperties.printButtons?.color"
21
+ <a v-if="showPrintButtons && fancyBoxOptionsProperties.printButtons?.color"
22
22
  href="#"
23
23
  class="button print-color"
24
- :title="fancyboxOptionsProperties.printButtons.color?.tooltip"
25
- @click.prevent="printInGrayscale = false">
24
+ :title="fancyBoxOptionsProperties.printButtons.color?.tooltip"
25
+ @click.prevent="printPage('color')">
26
26
  <!-- begin CmdIcon -->
27
27
  <CmdIcon
28
- :iconClass="fancyboxOptionsProperties.printButtons.color?.iconClass"
29
- :type="fancyboxOptionsProperties.printButtons.color?.iconType"
28
+ :iconClass="fancyBoxOptionsProperties.printButtons.color?.iconClass"
29
+ :type="fancyBoxOptionsProperties.printButtons.color?.iconType"
30
30
  />
31
31
  <!-- end CmdIcon -->
32
32
  </a>
33
- <a v-if="showPrintButtons && fancyboxOptionsProperties.printButtons?.grayscale"
33
+ <a v-if="showPrintButtons && fancyBoxOptionsProperties.printButtons?.grayscale"
34
34
  href="#"
35
35
  class="button print-grayscale"
36
- :title="fancyboxOptionsProperties.printButtons.grayscale?.tooltip"
37
- @click.prevent="printInGrayscale = true">
36
+ :title="fancyBoxOptionsProperties.printButtons.grayscale?.tooltip"
37
+ @click.prevent="printPage('grayscale')">
38
38
  <!-- begin CmdIcon -->
39
39
  <CmdIcon
40
- :iconClass="fancyboxOptionsProperties.printButtons.grayscale?.iconClass"
41
- :type="fancyboxOptionsProperties.printButtons.grayscale?.iconType"
40
+ :iconClass="fancyBoxOptionsProperties.printButtons.grayscale?.iconClass"
41
+ :type="fancyBoxOptionsProperties.printButtons.grayscale?.iconType"
42
42
  />
43
43
  <!-- end CmdIcon -->
44
44
  </a>
45
45
  <!-- end print buttons -->
46
46
 
47
47
  <!-- begin close-icon -->
48
- <a v-if="fancyboxOptionsProperties.closeIcon"
48
+ <a v-if="fancyBoxOptionsProperties.closeIcon"
49
49
  href="#"
50
50
  class="button"
51
51
  id="close-dialog"
52
- :title="fancyboxOptionsProperties.closeIcon.tooltip"
52
+ :title="fancyBoxOptionsProperties.closeIcon.tooltip"
53
53
  ref="close-dialog"
54
54
  @click.prevent="close">
55
55
  <!-- begin CmdIcon -->
56
56
  <CmdIcon
57
- :iconClass="fancyboxOptionsProperties.closeIcon.iconClass"
58
- :type="fancyboxOptionsProperties.closeIcon.iconType"
57
+ :iconClass="fancyBoxOptionsProperties.closeIcon.iconClass"
58
+ :type="fancyBoxOptionsProperties.closeIcon.iconType"
59
59
  />
60
60
  <!-- end CmdIcon -->
61
61
  </a>
@@ -93,34 +93,34 @@
93
93
  </div>
94
94
  </div>
95
95
 
96
- <footer v-if="showSubmitButtons && fancyboxOptionsProperties.submitButtons" class="flex-container no-flex">
96
+ <footer v-if="showSubmitButtons && fancyBoxOptionsProperties.submitButtons" class="flex-container no-flex">
97
97
  <!-- begin cancel-button -->
98
98
  <button
99
- v-if="fancyboxOptionsProperties.submitButtons?.cancel"
99
+ v-if="fancyBoxOptionsProperties.submitButtons?.cancel"
100
100
  @click="cancel"
101
- :title="fancyboxOptionsProperties.submitButtons.cancel?.tooltip">
101
+ :title="fancyBoxOptionsProperties.submitButtons.cancel?.tooltip">
102
102
  <CmdIcon
103
- v-if="fancyboxOptionsProperties.submitButtons.cancel?.iconClass"
104
- :iconClass="fancyboxOptionsProperties.submitButtons.cancel?.iconClass"
105
- :type="fancyboxOptionsProperties.submitButtons.cancel?.iconType"
103
+ v-if="fancyBoxOptionsProperties.submitButtons.cancel?.iconClass"
104
+ :iconClass="fancyBoxOptionsProperties.submitButtons.cancel?.iconClass"
105
+ :type="fancyBoxOptionsProperties.submitButtons.cancel?.iconType"
106
106
  />
107
107
  <span
108
- v-if="fancyboxOptionsProperties.submitButtons.cancel?.buttonText">{{ fancyboxOptionsProperties.submitButtons.cancel?.buttonText }}</span>
108
+ v-if="fancyBoxOptionsProperties.submitButtons.cancel?.buttonText">{{ fancyBoxOptionsProperties.submitButtons.cancel?.buttonText }}</span>
109
109
  </button>
110
110
  <!-- end cancel-button -->
111
111
 
112
112
  <!-- begin confirm-button -->
113
113
  <button
114
- v-if="fancyboxOptionsProperties.submitButtons?.confirm"
114
+ v-if="fancyBoxOptionsProperties.submitButtons?.confirm"
115
115
  @click="confirm"
116
- :title="fancyboxOptionsProperties.submitButtons.cancel?.tooltip">
116
+ :title="fancyBoxOptionsProperties.submitButtons.cancel?.tooltip">
117
117
  <CmdIcon
118
- v-if="fancyboxOptionsProperties.submitButtons.confirm?.iconClass"
119
- :iconClass="fancyboxOptionsProperties.submitButtons.confirm?.iconClass"
120
- :type="fancyboxOptionsProperties.submitButtons.confirm?.iconType"
118
+ v-if="fancyBoxOptionsProperties.submitButtons.confirm?.iconClass"
119
+ :iconClass="fancyBoxOptionsProperties.submitButtons.confirm?.iconClass"
120
+ :type="fancyBoxOptionsProperties.submitButtons.confirm?.iconType"
121
121
  />
122
122
  <span
123
- v-if="fancyboxOptionsProperties.submitButtons.confirm?.buttonText">{{ fancyboxOptionsProperties.submitButtons.confirm?.buttonText }}</span>
123
+ v-if="fancyBoxOptionsProperties.submitButtons.confirm?.buttonText">{{ fancyBoxOptionsProperties.submitButtons.confirm?.buttonText }}</span>
124
124
  </button>
125
125
  <!-- end confirm-button -->
126
126
  </footer>
@@ -197,7 +197,7 @@ const FancyBox = defineComponent({
197
197
  /**
198
198
  * options to show at top (closeIcon, printButtons)
199
199
  */
200
- fancyboxOptions: {
200
+ fancyBoxOptions: {
201
201
  type: Object,
202
202
  required: false
203
203
  },
@@ -291,26 +291,26 @@ const FancyBox = defineComponent({
291
291
  }
292
292
  },
293
293
  computed: {
294
- fancyboxOptionsProperties() {
294
+ fancyBoxOptionsProperties() {
295
295
  return {
296
296
  closeIcon: {
297
297
  iconClass: "icon-cancel",
298
298
  iconType: "auto",
299
299
  tooltip: "Close",
300
- ...this.fancyboxOptions?.closeIcon
300
+ ...this.fancyBoxOptions?.closeIcon
301
301
  },
302
302
  printButtons: {
303
303
  color: {
304
304
  iconClass: "icon-print",
305
305
  iconType: "auto",
306
306
  tooltip: "print in color",
307
- ...this.fancyboxOptions?.printButtons?.color
307
+ ...this.fancyBoxOptions?.printButtons?.color
308
308
  },
309
309
  grayscale: {
310
310
  iconClass: "icon-print",
311
311
  iconType: "auto",
312
312
  tooltip: "print in grayscale",
313
- ...this.fancyboxOptions?.printButtons?.grayscale
313
+ ...this.fancyBoxOptions?.printButtons?.grayscale
314
314
  }
315
315
  },
316
316
  submitButtons: {
@@ -319,7 +319,7 @@ const FancyBox = defineComponent({
319
319
  iconType: "auto",
320
320
  tooltip: "Cancel",
321
321
  buttonText: "Cancel",
322
- ...this.fancyboxOptions?.submitButtons?.cancel
322
+ ...this.fancyBoxOptions?.submitButtons?.cancel
323
323
  },
324
324
  confirm: {
325
325
  iconClass: "icon-check",
@@ -327,7 +327,7 @@ const FancyBox = defineComponent({
327
327
  buttonText: "Confirm",
328
328
  tooltip: "Confirm",
329
329
  buttonType: "primary",
330
- ...this.fancyboxOptions?.submitButtons?.confirm
330
+ ...this.fancyBoxOptions?.submitButtons?.confirm
331
331
  }
332
332
  }
333
333
  }
@@ -355,6 +355,48 @@ const FancyBox = defineComponent({
355
355
  }
356
356
  },
357
357
  methods: {
358
+ printDialogContent() {
359
+ // Open a new window
360
+ const printWindow = window.open('', '', 'width=1000,height=600');
361
+
362
+ const dialogContent = this.elements.map( (element)=> {
363
+ return element.outerHTML
364
+ }).join("")
365
+
366
+ let styles = Array.from(document.head.querySelectorAll("style, link[rel='stylesheet']")).map( (element)=> {
367
+ return element.outerHTML
368
+ }).join("")
369
+
370
+ if(this.printInGrayscale) {
371
+ styles += "<style>body { filter: grayscale(1)}</style>"
372
+ }
373
+
374
+ const titleForPrintWindow = document.head.querySelector("title").innerText
375
+
376
+ // Write the content to the new window
377
+ printWindow.document.write(`
378
+ <html>
379
+ <head>
380
+ <title>${titleForPrintWindow}</title>
381
+ ${styles}
382
+ </head>
383
+ <body>
384
+ ${dialogContent}
385
+ </body>
386
+ </html>
387
+ `);
388
+
389
+ // Trigger print
390
+ printWindow.document.close();
391
+
392
+ // Optionally, close the print window after printing
393
+ printWindow.print();
394
+ printWindow.close();
395
+ },
396
+ printPage(colorScheme) {
397
+ this.printInGrayscale = colorScheme === 'grayscale'
398
+ this.printDialogContent()
399
+ },
358
400
  onDialogCancel(event) {
359
401
  if (!this.allowEscapeKey) {
360
402
  event.preventDefault()
@@ -725,13 +725,13 @@ export default {
725
725
 
726
726
  // set default-tooltip if customTooltip is not set
727
727
  if (this.validationStatus === 'error') {
728
- return this.getMessage("cmdformelement.validation_tooltip.an_error_occurred")
728
+ return this.getMessage("form_element.validation_tooltip.an_error_occurred")
729
729
  } else if (this.validationStatus === 'success') {
730
- return this.getMessage("cmdformelement.validation_tooltip.information_is_filled_correctly")
730
+ return this.getMessage("form_element.validation_tooltip.information_is_filled_correctly")
731
731
  } else if (this.capsLockActivated) {
732
- return this.getMessage("cmdformelement.validation_tooltip.caps_lock_is_activated")
732
+ return this.getMessage("form_element.validation_tooltip.caps_lock_is_activated")
733
733
  }
734
- return this.getMessage("cmdformelement.validation_tooltip.open_field_requirements")
734
+ return this.getMessage("form_element.validation_tooltip.open_field_requirements")
735
735
  },
736
736
  autocomplete() {
737
737
  if (this.$attrs.type !== 'file') {
@@ -759,7 +759,7 @@ export default {
759
759
  // check if field is type "email"
760
760
  if (this.$attrs.type === "email") {
761
761
  requirements.push({
762
- message: this.getMessage("cmdformelement.validation_tooltip.is_valid_email"),
762
+ message: this.getMessage("form_element.validation_tooltip.is_valid_email"),
763
763
  valid: () => this.$refs.input.checkValidity()
764
764
  })
765
765
  }
@@ -3,9 +3,9 @@
3
3
  <!-- begin CmdSystemMessage -->
4
4
  <CmdSystemMessage v-if="!cookiesAccepted" validationStatus="warning">
5
5
  <p>
6
- {{getMessage("cmdgooglemaps.system_message.accept_terms")}}
6
+ {{getMessage("google_maps.system_message.accept_terms")}}
7
7
  </p>
8
- <a href="#" @click.prevent="acceptCookies">{{getMessage("cmdgooglemaps.button_text.accept_required_cookies")}}</a>
8
+ <a href="#" @click.prevent="acceptCookies">{{getMessage("google_maps.button_text.accept_required_cookies")}}</a>
9
9
  </CmdSystemMessage>
10
10
  <!-- end CmdSystemMessage -->
11
11
 
@@ -14,7 +14,7 @@
14
14
  :key="index"
15
15
  href="#"
16
16
  @click.prevent="showFancyBox(index)"
17
- :title="getMessage('cmdimagegallery.tooltip.open_large_image')">
17
+ :title="getMessage('image_gallery.tooltip.open_large_image')">
18
18
  <CmdImage :image="image.image" :figcaption="figcaption(image)"/>
19
19
  </a>
20
20
  <!-- end images linked to fancybox -->
@@ -142,9 +142,9 @@ export default {
142
142
  computed: {
143
143
  headlineRequirements() {
144
144
  if (this.inputRequirements.length > 1) {
145
- return this.getMessage("cmdlistofrequirements.headline.requirements_for_input")
145
+ return this.getMessage("list_of_requirements.headline.requirements_for_input")
146
146
  }
147
- return this.getMessage("cmdlistofrequirements.headline.requirement_for_input")
147
+ return this.getMessage("list_of_requirements.headline.requirement_for_input")
148
148
  }
149
149
  }
150
150
  }