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.
- package/dist/comand-component-library.js +4473 -4422
- package/dist/comand-component-library.umd.cjs +36 -26
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/ComponentLibrary.vue +17 -20
- package/src/assets/data/listOfComponents.json +1 -0
- package/src/assets/styles/component-library-global-styles.scss +1 -1
- package/src/componentSettingsDataAndControls.vue +17 -1
- package/src/components/CmdAddressData.vue +1 -3
- package/src/components/CmdBox.vue +3 -3
- package/src/components/CmdCookieDisclaimer.vue +154 -59
- package/src/components/CmdFakeSelect.vue +4 -4
- package/src/components/CmdFancyBox.vue +77 -35
- package/src/components/CmdFormElement.vue +5 -5
- package/src/components/CmdGoogleMaps.vue +2 -2
- package/src/components/CmdImageGallery.vue +1 -1
- package/src/components/CmdListOfRequirements.vue +2 -2
- package/src/components/CmdMultistepFormProgressBar.vue +7 -7
- package/src/components/CmdPageFooter.vue +9 -1
- package/src/components/CmdPagination.vue +1 -1
- package/src/components/CmdSiteSearch.vue +2 -2
- package/src/components/CmdThumbnailScroller.vue +3 -3
- package/src/components/CmdUploadForm.vue +44 -44
- package/src/mixins/CmdBox/DefaultMessageProperties.js +4 -4
- package/src/mixins/CmdCookieDisclaimer/DefaultMessageProperties.js +3 -2
- package/src/mixins/CmdFakeSelect/DefaultMessageProperties.js +5 -5
- package/src/mixins/CmdFormElement/DefaultMessageProperties.js +5 -5
- package/src/mixins/CmdGoogleMaps/DefaultMessageProperties.js +2 -2
- package/src/mixins/CmdImageGallery/DefaultMessageProperties.js +1 -1
- package/src/mixins/CmdListOfRequirements/DefaultMessageProperties.js +2 -2
- package/src/mixins/CmdPagination/DefaultMessageProperties.js +2 -2
- package/src/mixins/CmdSiteSearch/DefaultMessageProperties.js +2 -6
- package/src/mixins/CmdThumbnailScroller/DefaultMessageProperties.js +3 -3
- package/src/mixins/CmdUploadForm/DefaultMessageProperties.js +45 -45
- package/src/mixins/FieldValidation.js +5 -5
- package/src/mixins/GlobalDefaultMessageProperties.js +7 -7
- package/src/pages/PageWrapper.vue +1 -1
- package/src/mixins/CmdAddressData/DefaultMessageProperties.js +0 -20
@@ -7,7 +7,7 @@
|
|
7
7
|
</template>
|
8
8
|
<!-- end slot -->
|
9
9
|
|
10
|
-
<
|
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
|
-
|
32
|
-
|
33
|
-
|
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('
|
44
|
+
:title="getMessage('cookie_disclaimer.title.cookie_cannot_be_disabled')"
|
49
45
|
/>
|
50
46
|
<!-- end CmdFormElement -->
|
51
|
-
|
52
|
-
|
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
|
-
</
|
64
|
-
</
|
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
|
-
|
82
|
-
|
83
|
-
|
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('
|
96
|
+
:title="getMessage('cookie_disclaimer.title.toggle_to_accept_cookie')"
|
99
97
|
/>
|
100
98
|
<!-- end CmdFormElement -->
|
101
|
-
|
102
|
-
|
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
|
-
</
|
114
|
-
</
|
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
|
122
|
-
<
|
123
|
-
<!-- end
|
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
|
-
</
|
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
|
-
.
|
302
|
-
|
303
|
-
|
304
|
-
|
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
|
-
|
317
|
-
|
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
|
-
|
328
|
-
|
411
|
+
input {
|
412
|
+
&:hover, &:active, &:focus {
|
413
|
+
cursor: pointer;
|
414
|
+
}
|
329
415
|
}
|
330
416
|
}
|
331
|
-
}
|
332
417
|
|
333
|
-
|
334
|
-
|
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
|
-
|
339
|
-
|
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
|
-
|
343
|
-
|
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("
|
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("
|
424
|
+
return this.getMessage("fake_select.linktext.deselect_all_options")
|
425
425
|
}
|
426
426
|
this.allOptionsSelected = false
|
427
|
-
return this.getMessage("
|
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("
|
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="(
|
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 &&
|
21
|
+
<a v-if="showPrintButtons && fancyBoxOptionsProperties.printButtons?.color"
|
22
22
|
href="#"
|
23
23
|
class="button print-color"
|
24
|
-
:title="
|
25
|
-
@click.prevent="
|
24
|
+
:title="fancyBoxOptionsProperties.printButtons.color?.tooltip"
|
25
|
+
@click.prevent="printPage('color')">
|
26
26
|
<!-- begin CmdIcon -->
|
27
27
|
<CmdIcon
|
28
|
-
:iconClass="
|
29
|
-
:type="
|
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 &&
|
33
|
+
<a v-if="showPrintButtons && fancyBoxOptionsProperties.printButtons?.grayscale"
|
34
34
|
href="#"
|
35
35
|
class="button print-grayscale"
|
36
|
-
:title="
|
37
|
-
@click.prevent="
|
36
|
+
:title="fancyBoxOptionsProperties.printButtons.grayscale?.tooltip"
|
37
|
+
@click.prevent="printPage('grayscale')">
|
38
38
|
<!-- begin CmdIcon -->
|
39
39
|
<CmdIcon
|
40
|
-
:iconClass="
|
41
|
-
:type="
|
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="
|
48
|
+
<a v-if="fancyBoxOptionsProperties.closeIcon"
|
49
49
|
href="#"
|
50
50
|
class="button"
|
51
51
|
id="close-dialog"
|
52
|
-
:title="
|
52
|
+
:title="fancyBoxOptionsProperties.closeIcon.tooltip"
|
53
53
|
ref="close-dialog"
|
54
54
|
@click.prevent="close">
|
55
55
|
<!-- begin CmdIcon -->
|
56
56
|
<CmdIcon
|
57
|
-
:iconClass="
|
58
|
-
:type="
|
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 &&
|
96
|
+
<footer v-if="showSubmitButtons && fancyBoxOptionsProperties.submitButtons" class="flex-container no-flex">
|
97
97
|
<!-- begin cancel-button -->
|
98
98
|
<button
|
99
|
-
v-if="
|
99
|
+
v-if="fancyBoxOptionsProperties.submitButtons?.cancel"
|
100
100
|
@click="cancel"
|
101
|
-
:title="
|
101
|
+
:title="fancyBoxOptionsProperties.submitButtons.cancel?.tooltip">
|
102
102
|
<CmdIcon
|
103
|
-
v-if="
|
104
|
-
:iconClass="
|
105
|
-
:type="
|
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="
|
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="
|
114
|
+
v-if="fancyBoxOptionsProperties.submitButtons?.confirm"
|
115
115
|
@click="confirm"
|
116
|
-
:title="
|
116
|
+
:title="fancyBoxOptionsProperties.submitButtons.cancel?.tooltip">
|
117
117
|
<CmdIcon
|
118
|
-
v-if="
|
119
|
-
:iconClass="
|
120
|
-
:type="
|
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="
|
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
|
-
|
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
|
-
|
294
|
+
fancyBoxOptionsProperties() {
|
295
295
|
return {
|
296
296
|
closeIcon: {
|
297
297
|
iconClass: "icon-cancel",
|
298
298
|
iconType: "auto",
|
299
299
|
tooltip: "Close",
|
300
|
-
...this.
|
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.
|
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.
|
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.
|
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.
|
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("
|
728
|
+
return this.getMessage("form_element.validation_tooltip.an_error_occurred")
|
729
729
|
} else if (this.validationStatus === 'success') {
|
730
|
-
return this.getMessage("
|
730
|
+
return this.getMessage("form_element.validation_tooltip.information_is_filled_correctly")
|
731
731
|
} else if (this.capsLockActivated) {
|
732
|
-
return this.getMessage("
|
732
|
+
return this.getMessage("form_element.validation_tooltip.caps_lock_is_activated")
|
733
733
|
}
|
734
|
-
return this.getMessage("
|
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("
|
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("
|
6
|
+
{{getMessage("google_maps.system_message.accept_terms")}}
|
7
7
|
</p>
|
8
|
-
<a href="#" @click.prevent="acceptCookies">{{getMessage("
|
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('
|
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("
|
145
|
+
return this.getMessage("list_of_requirements.headline.requirements_for_input")
|
146
146
|
}
|
147
|
-
return this.getMessage("
|
147
|
+
return this.getMessage("list_of_requirements.headline.requirement_for_input")
|
148
148
|
}
|
149
149
|
}
|
150
150
|
}
|