comand-component-library 4.1.8 → 4.1.9

Sign up to get free protection for your applications and to get access to all the features.
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
  }