comand-component-library 4.1.0 → 4.1.2
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 +984 -920
- package/dist/comand-component-library.umd.cjs +21 -21
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/ComponentLibrary.vue +8 -0
- package/src/components/CmdBasicForm.vue +0 -2
- package/src/components/CmdBox.vue +11 -5
- package/src/components/CmdContainer.vue +8 -1
- package/src/components/CmdFancyBox.vue +157 -155
- package/src/components/CmdFormElement.vue +4 -4
- package/src/components/CmdGoogleMaps.vue +53 -2
- package/src/components/CmdLink.vue +7 -2
- package/src/components/CmdSystemMessage.vue +14 -13
- package/src/mixins/CmdFormElement/DefaultMessageProperties.js +5 -5
- package/src/mixins/CmdGoogleMaps/DefaultMessageProperties.js +10 -0
|
@@ -1,141 +1,141 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
>
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
<!-- begin CmdIcon -->
|
|
29
|
-
<CmdIcon
|
|
30
|
-
:iconClass="fancyboxOptions.printButtons.color?.iconClass"
|
|
31
|
-
:type="fancyboxOptions.printButtons.color?.iconType"
|
|
32
|
-
/>
|
|
33
|
-
<!-- end CmdIcon -->
|
|
34
|
-
</a>
|
|
35
|
-
<a v-if="showPrintButtons && fancyboxOptions.printButtons?.grayscale"
|
|
36
|
-
href="#"
|
|
37
|
-
class="button print-grayscale"
|
|
38
|
-
:title="fancyboxOptions.printButtons.grayscale?.tooltip"
|
|
39
|
-
@click.prevent="printInGrayscale = true">
|
|
40
|
-
<!-- begin CmdIcon -->
|
|
41
|
-
<CmdIcon
|
|
42
|
-
:iconClass="fancyboxOptions.printButtons.grayscale?.iconClass"
|
|
43
|
-
:type="fancyboxOptions.printButtons.grayscale?.iconType"
|
|
44
|
-
/>
|
|
45
|
-
<!-- end CmdIcon -->
|
|
46
|
-
</a>
|
|
47
|
-
<!-- end print buttons -->
|
|
48
|
-
|
|
49
|
-
<!-- begin close-icon -->
|
|
50
|
-
<a v-if="fancyboxOptions.closeIcon"
|
|
51
|
-
href="#"
|
|
52
|
-
class="button"
|
|
53
|
-
id="close-dialog"
|
|
54
|
-
:title="fancyboxOptions.closeIcon.tooltip"
|
|
55
|
-
ref="close-dialog"
|
|
56
|
-
@click.prevent="close">
|
|
57
|
-
<!-- begin CmdIcon -->
|
|
58
|
-
<CmdIcon
|
|
59
|
-
:iconClass="fancyboxOptions.closeIcon.iconClass"
|
|
60
|
-
:type="fancyboxOptions.closeIcon.iconType"
|
|
61
|
-
/>
|
|
62
|
-
<!-- end CmdIcon -->
|
|
63
|
-
</a>
|
|
64
|
-
<!-- end close-icon -->
|
|
65
|
-
</div>
|
|
66
|
-
<!-- end button-wrapper -->
|
|
67
|
-
</header>
|
|
68
|
-
<div :class="['outer-content-wrapper', {'grayscale' : printInGrayscale}]">
|
|
69
|
-
<div v-if="fancyBoxImageUrl || cmdImage?.image" class="content">
|
|
70
|
-
<!-- begin CmdImage -->
|
|
71
|
-
<CmdImage :image="largeSingleImage" :figcaption="cmdImage?.figcaption" />
|
|
72
|
-
<!-- end CmdImage -->
|
|
73
|
-
</div>
|
|
74
|
-
<div v-else-if="fancyBoxContent" class="content" v-html="fancyBoxContent"></div>
|
|
75
|
-
<div v-else-if="fancyBoxElements" class="content" ref="elements"></div>
|
|
76
|
-
<div v-else-if="fancyBoxGallery" class="content">
|
|
77
|
-
<!-- begin CmdSlideButton -->
|
|
78
|
-
<CmdSlideButton @click.prevent="showPrevItem" slideButtonType="prev"/>
|
|
79
|
-
<!-- end CmdSlideButton -->
|
|
80
|
-
|
|
81
|
-
<!-- begin enlarged image -->
|
|
82
|
-
<!-- begin CmdImage -->
|
|
83
|
-
<CmdImage :image="largeGalleryImage" :figcaption="fancyBoxGallery[index].figcaption" />
|
|
84
|
-
<!-- end CmdImage -->
|
|
85
|
-
<!-- end enlarged image -->
|
|
86
|
-
|
|
87
|
-
<!-- begin CmdSlideButton -->
|
|
88
|
-
<CmdSlideButton @click.prevent="showNextItem"/>
|
|
89
|
-
<!-- end CmdSlideButton -->
|
|
90
|
-
</div>
|
|
91
|
-
<div v-else class="content">
|
|
92
|
-
<!-- begin slot-content -->
|
|
93
|
-
<slot></slot>
|
|
94
|
-
<!-- end slot-content -->
|
|
95
|
-
</div>
|
|
96
|
-
</div>
|
|
97
|
-
|
|
98
|
-
<footer v-if="showSubmitButtons && fancyboxOptions.submitButtons" class="flex-container no-flex">
|
|
99
|
-
<!-- begin cancel-button -->
|
|
100
|
-
<button
|
|
101
|
-
v-if="fancyboxOptions.submitButtons?.cancel"
|
|
102
|
-
@click="cancel"
|
|
103
|
-
:title="fancyboxOptions.submitButtons.cancel?.tooltip">
|
|
2
|
+
<dialog
|
|
3
|
+
ref="dialog"
|
|
4
|
+
:class="['cmd-fancybox', {'show-overlay': showOverlay, 'image' : fancyBoxImageUrl || fancyBoxGallery, 'image-gallery': fancyBoxGallery}]"
|
|
5
|
+
:aria-label="ariaLabelText"
|
|
6
|
+
@cancel="onDialogCancel"
|
|
7
|
+
>
|
|
8
|
+
<header class="flex-container">
|
|
9
|
+
<!-- begin CmdHeadline -->
|
|
10
|
+
<CmdHeadline
|
|
11
|
+
v-if="cmdHeadline?.headlineText"
|
|
12
|
+
v-bind="cmdHeadline"
|
|
13
|
+
:id="htmlId"
|
|
14
|
+
/>
|
|
15
|
+
<!-- end CmdHeadline -->
|
|
16
|
+
|
|
17
|
+
<!-- begin button-wrapper -->
|
|
18
|
+
<div
|
|
19
|
+
v-if="(fancyboxOptions.printButtons?.color || fancyboxOptions.printButtons?.grayscale) || fancyboxOptions.closeIcon"
|
|
20
|
+
class="button-wrapper no-flex"
|
|
21
|
+
> <!-- begin print buttons -->
|
|
22
|
+
<a v-if="showPrintButtons && fancyboxOptions.printButtons?.color"
|
|
23
|
+
href="#"
|
|
24
|
+
class="button print-color"
|
|
25
|
+
:title="fancyboxOptions.printButtons.color?.tooltip"
|
|
26
|
+
@click.prevent="printInGrayscale = false">
|
|
27
|
+
<!-- begin CmdIcon -->
|
|
104
28
|
<CmdIcon
|
|
105
|
-
|
|
106
|
-
:
|
|
107
|
-
:type="fancyboxOptions.submitButtons.cancel?.iconType"
|
|
29
|
+
:iconClass="fancyboxOptions.printButtons.color?.iconClass"
|
|
30
|
+
:type="fancyboxOptions.printButtons.color?.iconType"
|
|
108
31
|
/>
|
|
109
|
-
|
|
110
|
-
</
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
:title="fancyboxOptions.submitButtons.cancel?.tooltip">
|
|
32
|
+
<!-- end CmdIcon -->
|
|
33
|
+
</a>
|
|
34
|
+
<a v-if="showPrintButtons && fancyboxOptions.printButtons?.grayscale"
|
|
35
|
+
href="#"
|
|
36
|
+
class="button print-grayscale"
|
|
37
|
+
:title="fancyboxOptions.printButtons.grayscale?.tooltip"
|
|
38
|
+
@click.prevent="printInGrayscale = true">
|
|
39
|
+
<!-- begin CmdIcon -->
|
|
118
40
|
<CmdIcon
|
|
119
|
-
|
|
120
|
-
:
|
|
121
|
-
:type="fancyboxOptions.submitButtons.confirm?.iconType"
|
|
41
|
+
:iconClass="fancyboxOptions.printButtons.grayscale?.iconClass"
|
|
42
|
+
:type="fancyboxOptions.printButtons.grayscale?.iconType"
|
|
122
43
|
/>
|
|
123
|
-
|
|
124
|
-
</
|
|
125
|
-
<!-- end
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
44
|
+
<!-- end CmdIcon -->
|
|
45
|
+
</a>
|
|
46
|
+
<!-- end print buttons -->
|
|
47
|
+
|
|
48
|
+
<!-- begin close-icon -->
|
|
49
|
+
<a v-if="fancyboxOptions.closeIcon"
|
|
50
|
+
href="#"
|
|
51
|
+
class="button"
|
|
52
|
+
id="close-dialog"
|
|
53
|
+
:title="fancyboxOptions.closeIcon.tooltip"
|
|
54
|
+
ref="close-dialog"
|
|
55
|
+
@click.prevent="close">
|
|
56
|
+
<!-- begin CmdIcon -->
|
|
57
|
+
<CmdIcon
|
|
58
|
+
:iconClass="fancyboxOptions.closeIcon.iconClass"
|
|
59
|
+
:type="fancyboxOptions.closeIcon.iconType"
|
|
60
|
+
/>
|
|
61
|
+
<!-- end CmdIcon -->
|
|
62
|
+
</a>
|
|
63
|
+
<!-- end close-icon -->
|
|
64
|
+
</div>
|
|
65
|
+
<!-- end button-wrapper -->
|
|
66
|
+
</header>
|
|
67
|
+
<div :class="['outer-content-wrapper', {'grayscale' : printInGrayscale}]">
|
|
68
|
+
<div v-if="fancyBoxImageUrl || cmdImage?.image" class="content">
|
|
69
|
+
<!-- begin CmdImage -->
|
|
70
|
+
<CmdImage :image="largeSingleImage" :figcaption="cmdImage?.figcaption"/>
|
|
71
|
+
<!-- end CmdImage -->
|
|
72
|
+
</div>
|
|
73
|
+
<div v-else-if="fancyBoxContent" class="content" v-html="fancyBoxContent"></div>
|
|
74
|
+
<div v-else-if="fancyBoxElements" class="content" ref="elements"></div>
|
|
75
|
+
<div v-else-if="fancyBoxGallery" class="content">
|
|
76
|
+
<!-- begin CmdSlideButton -->
|
|
77
|
+
<CmdSlideButton @click.prevent="showPrevItem" slideButtonType="prev"/>
|
|
78
|
+
<!-- end CmdSlideButton -->
|
|
79
|
+
|
|
80
|
+
<!-- begin enlarged image -->
|
|
81
|
+
<!-- begin CmdImage -->
|
|
82
|
+
<CmdImage :image="largeGalleryImage" :figcaption="fancyBoxGallery[index].figcaption"/>
|
|
83
|
+
<!-- end CmdImage -->
|
|
84
|
+
<!-- end enlarged image -->
|
|
85
|
+
|
|
86
|
+
<!-- begin CmdSlideButton -->
|
|
87
|
+
<CmdSlideButton @click.prevent="showNextItem"/>
|
|
88
|
+
<!-- end CmdSlideButton -->
|
|
89
|
+
</div>
|
|
90
|
+
<div v-else class="content">
|
|
91
|
+
<!-- begin slot-content -->
|
|
92
|
+
<slot></slot>
|
|
93
|
+
<!-- end slot-content -->
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
<footer v-if="showSubmitButtons && fancyboxOptions.submitButtons" class="flex-container no-flex">
|
|
98
|
+
<!-- begin cancel-button -->
|
|
99
|
+
<button
|
|
100
|
+
v-if="fancyboxOptions.submitButtons?.cancel"
|
|
101
|
+
@click="cancel"
|
|
102
|
+
:title="fancyboxOptions.submitButtons.cancel?.tooltip">
|
|
103
|
+
<CmdIcon
|
|
104
|
+
v-if="fancyboxOptions.submitButtons.cancel?.iconClass"
|
|
105
|
+
:iconClass="fancyboxOptions.submitButtons.cancel?.iconClass"
|
|
106
|
+
:type="fancyboxOptions.submitButtons.cancel?.iconType"
|
|
107
|
+
/>
|
|
108
|
+
<span
|
|
109
|
+
v-if="fancyboxOptions.submitButtons.cancel?.buttonText">{{ fancyboxOptions.submitButtons.cancel?.buttonText }}</span>
|
|
110
|
+
</button>
|
|
111
|
+
<!-- end cancel-button -->
|
|
112
|
+
|
|
113
|
+
<!-- begin confirm-button -->
|
|
114
|
+
<button
|
|
115
|
+
v-if="fancyboxOptions.submitButtons?.confirm"
|
|
116
|
+
@click="confirm"
|
|
117
|
+
:title="fancyboxOptions.submitButtons.cancel?.tooltip">
|
|
118
|
+
<CmdIcon
|
|
119
|
+
v-if="fancyboxOptions.submitButtons.confirm?.iconClass"
|
|
120
|
+
:iconClass="fancyboxOptions.submitButtons.confirm?.iconClass"
|
|
121
|
+
:type="fancyboxOptions.submitButtons.confirm?.iconType"
|
|
122
|
+
/>
|
|
123
|
+
<span
|
|
124
|
+
v-if="fancyboxOptions.submitButtons.confirm?.buttonText">{{ fancyboxOptions.submitButtons.confirm?.buttonText }}</span>
|
|
125
|
+
</button>
|
|
126
|
+
<!-- end confirm-button -->
|
|
127
|
+
</footer>
|
|
128
|
+
|
|
129
|
+
<!-- begin CmdThumbnailScroller -->
|
|
130
|
+
<CmdThumbnailScroller
|
|
131
|
+
v-if="fancyBoxGallery"
|
|
132
|
+
:thumbnailScrollerItems="[...fancyBoxGallery]"
|
|
133
|
+
:allowOpenFancyBox="false"
|
|
134
|
+
@click="showItem"
|
|
135
|
+
:activeItemIndex="index"
|
|
136
|
+
/>
|
|
137
|
+
<!-- end CmdThumbnailScroller -->
|
|
138
|
+
</dialog>
|
|
139
139
|
</template>
|
|
140
140
|
|
|
141
141
|
<script>
|
|
@@ -333,27 +333,27 @@ const FancyBox = defineComponent({
|
|
|
333
333
|
}
|
|
334
334
|
},
|
|
335
335
|
computed: {
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
336
|
+
largeGalleryImage() {
|
|
337
|
+
// change src-key for a single item/image in gallery to fit CmdImage-properties
|
|
338
|
+
const fancyBoxItem = {...this.fancyBoxGallery[this.index].image}
|
|
339
|
+
fancyBoxItem.src = fancyBoxItem.srcImageLarge
|
|
340
|
+
return fancyBoxItem
|
|
341
|
+
},
|
|
342
|
+
largeSingleImage() {
|
|
343
|
+
// change src-key for a single item/image to fit CmdImage-properties
|
|
344
|
+
const fancyBoxItem = {...this.cmdImage?.image || {}}
|
|
345
|
+
if (this.fancyBoxImageUrl) {
|
|
346
|
+
fancyBoxItem.src = this.fancyBoxImageUrl
|
|
347
|
+
}
|
|
348
|
+
return fancyBoxItem
|
|
349
|
+
},
|
|
350
|
+
ariaLabelText() {
|
|
351
|
+
if (this.fancyBoxGallery?.length) {
|
|
352
|
+
return this.fancyBoxGallery[this.index].figcaption.text
|
|
353
|
+
} else {
|
|
354
|
+
return this.defaultAriaLabelText
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
357
|
},
|
|
358
358
|
methods: {
|
|
359
359
|
onDialogCancel(event) {
|
|
@@ -370,7 +370,7 @@ const FancyBox = defineComponent({
|
|
|
370
370
|
this.$refs.dialog.showModal()
|
|
371
371
|
|
|
372
372
|
// overwrite default behavior of dialog-element, which sets focus on first focusable element inside
|
|
373
|
-
this.$refs["close-dialog"]
|
|
373
|
+
this.$refs["close-dialog"]?.focus()
|
|
374
374
|
},
|
|
375
375
|
updateContentOnPropertyChange() {
|
|
376
376
|
this.fancyBoxImageUrl = this.fancyBoxContent = this.fancyBoxElements = null
|
|
@@ -629,6 +629,7 @@ export default FancyBox
|
|
|
629
629
|
|
|
630
630
|
<style lang="scss">
|
|
631
631
|
@import "../assets/styles/variables";
|
|
632
|
+
|
|
632
633
|
.cmd-fancybox {
|
|
633
634
|
@media only screen and (max-width: $medium-max-width) {
|
|
634
635
|
.outer-content-wrapper {
|
|
@@ -678,5 +679,6 @@ export default FancyBox
|
|
|
678
679
|
margin-top: var(--default-margin);
|
|
679
680
|
}
|
|
680
681
|
}
|
|
682
|
+
|
|
681
683
|
/* end cmd-fancybox ------------------------------------------------------------------------------------------ */
|
|
682
684
|
</style>
|
|
@@ -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.
|
|
728
|
+
return this.getMessage("cmdformelement.validation_tooltip.an_error_occurred")
|
|
729
729
|
} else if (this.validationStatus === 'success') {
|
|
730
|
-
return this.getMessage("cmdformelement.
|
|
730
|
+
return this.getMessage("cmdformelement.validation_tooltip.information_is_filled_correctly")
|
|
731
731
|
} else if (this.capsLockActivated) {
|
|
732
|
-
return this.getMessage("cmdformelement.
|
|
732
|
+
return this.getMessage("cmdformelement.validation_tooltip.caps_lock_is_activated")
|
|
733
733
|
}
|
|
734
|
-
return this.getMessage("cmdformelement.
|
|
734
|
+
return this.getMessage("cmdformelement.validation_tooltip.open_field_requirements")
|
|
735
735
|
},
|
|
736
736
|
autocomplete() {
|
|
737
737
|
if (this.$attrs.type !== 'file') {
|
|
@@ -1,13 +1,46 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="cmd-google-maps responsive-wrapper">
|
|
3
|
-
|
|
3
|
+
<!-- begin CmdSystemMessage -->
|
|
4
|
+
<CmdSystemMessage v-if="!cookiesAccepted" validationStatus="warning">
|
|
5
|
+
<p>
|
|
6
|
+
{{getMessage("cmdgooglemaps.system_message.accept_terms")}}
|
|
7
|
+
</p>
|
|
8
|
+
<a href="#" @click.prevent="acceptCookies">{{getMessage("cmdgooglemaps.button_text.accept_required_cookies")}}</a>
|
|
9
|
+
</CmdSystemMessage>
|
|
10
|
+
<!-- end CmdSystemMessage -->
|
|
11
|
+
|
|
12
|
+
<!-- begin iframe with google-map -->
|
|
13
|
+
<iframe v-else :src="locateAddress"></iframe>
|
|
14
|
+
<!-- end iframe with google-map -->
|
|
4
15
|
</div>
|
|
5
16
|
</template>
|
|
6
17
|
|
|
7
18
|
<script>
|
|
19
|
+
// import mixins
|
|
20
|
+
import I18n from "../mixins/I18n"
|
|
21
|
+
import DefaultMessageProperties from "../mixins/CmdGoogleMaps/DefaultMessageProperties"
|
|
22
|
+
|
|
8
23
|
export default {
|
|
9
24
|
name: "CmdGoogleMaps",
|
|
25
|
+
mixins: [
|
|
26
|
+
I18n,
|
|
27
|
+
DefaultMessageProperties
|
|
28
|
+
],
|
|
29
|
+
data() {
|
|
30
|
+
return {
|
|
31
|
+
cookiesAccepted: false
|
|
32
|
+
}
|
|
33
|
+
},
|
|
10
34
|
props: {
|
|
35
|
+
/**
|
|
36
|
+
* toggle system-message and map-visibility depending on the accepted cookies
|
|
37
|
+
*
|
|
38
|
+
* for data-privacy reasons the google-map may not be show without accepting cookies
|
|
39
|
+
*/
|
|
40
|
+
cookiesAlreadyAccepted: {
|
|
41
|
+
type: Boolean,
|
|
42
|
+
default: false
|
|
43
|
+
},
|
|
11
44
|
/**
|
|
12
45
|
* address to show on Google Maps™
|
|
13
46
|
*/
|
|
@@ -26,6 +59,20 @@ export default {
|
|
|
26
59
|
}
|
|
27
60
|
return "https://maps.google.de/maps?ie=UTF8&t=&z=17&iwloc=B&output=embed"
|
|
28
61
|
}
|
|
62
|
+
},
|
|
63
|
+
methods: {
|
|
64
|
+
acceptCookies() {
|
|
65
|
+
this.cookiesAccepted = true
|
|
66
|
+
this.$emit("click", this.cookiesAccepted)
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
watch: {
|
|
70
|
+
cookiesAlreadyAccepted: {
|
|
71
|
+
handler() {
|
|
72
|
+
this.cookiesAccepted = this.cookiesAlreadyAccepted
|
|
73
|
+
},
|
|
74
|
+
immediate: true
|
|
75
|
+
}
|
|
29
76
|
}
|
|
30
77
|
}
|
|
31
78
|
</script>
|
|
@@ -37,7 +84,11 @@ export default {
|
|
|
37
84
|
border-radius: var(--default-border-radius);
|
|
38
85
|
|
|
39
86
|
iframe {
|
|
40
|
-
border-radius:
|
|
87
|
+
border-radius: var(--default-border-radius);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.cmd-system-message {
|
|
91
|
+
margin: 0;
|
|
41
92
|
}
|
|
42
93
|
}
|
|
43
94
|
/* end cmd-google-maps ------------------------------------------------------------------------------------------ */
|
|
@@ -126,12 +126,17 @@ export default {
|
|
|
126
126
|
flex-direction: column;
|
|
127
127
|
gap: calc(var(--default-gap) / 2);
|
|
128
128
|
align-items: center;
|
|
129
|
+
justify-content: center;
|
|
129
130
|
border-color: var(--hyperlink-color);
|
|
130
131
|
text-decoration: none;
|
|
131
132
|
border-radius: var(--box-border-radius);
|
|
132
133
|
|
|
133
|
-
span
|
|
134
|
-
|
|
134
|
+
span {
|
|
135
|
+
margin: 0 auto;
|
|
136
|
+
|
|
137
|
+
&[class*="icon"] {
|
|
138
|
+
font-size: 4rem;
|
|
139
|
+
}
|
|
135
140
|
}
|
|
136
141
|
|
|
137
142
|
&:hover, &:active, &:focus {
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
<a
|
|
11
11
|
v-if="iconClose.show && iconClose.iconClass"
|
|
12
12
|
href="#"
|
|
13
|
+
class="close-button"
|
|
13
14
|
@click.prevent="showSystemMessage = false"
|
|
14
15
|
:title="iconClose.tooltip"
|
|
15
16
|
>
|
|
@@ -19,18 +20,18 @@
|
|
|
19
20
|
</a>
|
|
20
21
|
<!-- end close-icon -->
|
|
21
22
|
|
|
22
|
-
<!-- begin CmdHeadline -->
|
|
23
|
-
<CmdHeadline
|
|
24
|
-
class="message-headline"
|
|
25
|
-
:cmdIcon="headlineIcon"
|
|
26
|
-
:headlineText="systemMessage"
|
|
27
|
-
:headlineLevel="messageHeadlineLevel"
|
|
28
|
-
:id="htmlId"
|
|
29
|
-
/>
|
|
30
|
-
<!-- end CmdHeadline -->
|
|
31
|
-
|
|
32
23
|
<!-- begin slot-content -->
|
|
33
|
-
<slot
|
|
24
|
+
<slot>
|
|
25
|
+
<!-- begin CmdHeadline -->
|
|
26
|
+
<CmdHeadline
|
|
27
|
+
class="message-headline"
|
|
28
|
+
:cmdIcon="headlineIcon"
|
|
29
|
+
:headlineText="systemMessage"
|
|
30
|
+
:headlineLevel="messageHeadlineLevel"
|
|
31
|
+
:id="htmlId"
|
|
32
|
+
/>
|
|
33
|
+
<!-- end CmdHeadline -->
|
|
34
|
+
</slot>
|
|
34
35
|
<!-- end slot-content -->
|
|
35
36
|
</div>
|
|
36
37
|
</transition>
|
|
@@ -163,7 +164,7 @@ export default {
|
|
|
163
164
|
}
|
|
164
165
|
}
|
|
165
166
|
|
|
166
|
-
> a
|
|
167
|
+
> a.close-button {
|
|
167
168
|
display: flex;
|
|
168
169
|
position: absolute;
|
|
169
170
|
width: auto; /* avoids stretching by flex-containers */
|
|
@@ -189,7 +190,7 @@ export default {
|
|
|
189
190
|
}
|
|
190
191
|
|
|
191
192
|
&.warning {
|
|
192
|
-
> a
|
|
193
|
+
> a.close-button {
|
|
193
194
|
border-color: var(--default-text-color);
|
|
194
195
|
|
|
195
196
|
[class*="icon-"] {
|
|
@@ -3,11 +3,11 @@ export default {
|
|
|
3
3
|
return {
|
|
4
4
|
defaultMessageProperties: {
|
|
5
5
|
"cmdformelement.headline.requirements_for_input": "Requirements for input",
|
|
6
|
-
"cmdformelement.
|
|
7
|
-
"cmdformelement.
|
|
8
|
-
"cmdformelement.
|
|
9
|
-
"cmdformelement.
|
|
10
|
-
"cmdformelement.
|
|
6
|
+
"cmdformelement.validation_tooltip.an_error_occurred": "An error occurred!",
|
|
7
|
+
"cmdformelement.validation_tooltip.information_is_filled_correctly": "This information is filled correctly!",
|
|
8
|
+
"cmdformelement.validation_tooltip.caps_lock_is_activated": "Attention: Caps lock is activated!",
|
|
9
|
+
"cmdformelement.validation_tooltip.open_field_requirements": "Open field requirements!",
|
|
10
|
+
"cmdformelement.validation_tooltip.is_valid_email": "Is valid e-mail-address"
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
}
|