comand-component-library 3.1.74 → 3.1.75

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 (51) hide show
  1. package/dist/comand-component-library.css +1 -1
  2. package/dist/comand-component-library.umd.min.js +1 -1
  3. package/package.json +3 -3
  4. package/src/App.vue +65 -71
  5. package/src/assets/data/input-group-radiobuttons.json +23 -0
  6. package/src/assets/data/input-group-replaced-radiobuttons.json +23 -0
  7. package/src/assets/data/input-group-toggle-switch-radiobuttons.json +23 -0
  8. package/src/assets/styles/global-styles.scss +10 -19
  9. package/src/components/CmdAddressData.vue +7 -7
  10. package/src/components/CmdBankAccountData.vue +7 -7
  11. package/src/components/CmdBox.vue +24 -30
  12. package/src/components/CmdBoxSiteSearch.vue +9 -9
  13. package/src/components/CmdCookieDisclaimer.vue +17 -17
  14. package/src/components/CmdFakeSelect.vue +32 -29
  15. package/src/components/CmdFormElement.vue +34 -35
  16. package/src/components/{CmdCustomHeadline.vue → CmdHeadline.vue} +1 -1
  17. package/src/components/CmdInputGroup.vue +51 -53
  18. package/src/components/CmdListOfLinks.vue +8 -8
  19. package/src/components/CmdListOfRequirements.vue +37 -15
  20. package/src/components/CmdLoginForm.vue +17 -17
  21. package/src/components/CmdOpeningHours.vue +5 -5
  22. package/src/components/CmdSiteFooter.vue +76 -0
  23. package/src/components/CmdSiteHeader.vue +2 -1
  24. package/src/components/CmdSystemMessage.vue +28 -11
  25. package/src/components/CmdTabs.vue +8 -8
  26. package/src/components/CmdToggleDarkMode.vue +42 -2
  27. package/src/components/CmdTooltip.vue +13 -13
  28. package/src/components/CmdTooltipForInputElements.vue +122 -0
  29. package/src/components/CmdUploadForm.vue +32 -32
  30. package/src/components/CmdWidthLimitationWrapper.vue +0 -17
  31. package/src/documentation/generated/CmdAddressDataPropertyDescriptions.json +2 -2
  32. package/src/documentation/generated/CmdBankAccountDataPropertyDescriptions.json +2 -2
  33. package/src/documentation/generated/CmdBoxPropertyDescriptions.json +2 -2
  34. package/src/documentation/generated/CmdBoxSiteSearchPropertyDescriptions.json +2 -2
  35. package/src/documentation/generated/CmdCookieDisclaimerPropertyDescriptions.json +2 -2
  36. package/src/documentation/generated/CmdFormElementPropertyDescriptions.json +6 -1
  37. package/src/documentation/generated/CmdHeadlinePropertyDescriptions.json +22 -0
  38. package/src/documentation/generated/CmdInputGroupPropertyDescriptions.json +0 -5
  39. package/src/documentation/generated/CmdListOfLinksPropertyDescriptions.json +2 -2
  40. package/src/documentation/generated/CmdListOfRequirementsPropertyDescriptions.json +14 -4
  41. package/src/documentation/generated/CmdLoginFormPropertyDescriptions.json +4 -4
  42. package/src/documentation/generated/CmdOpeningHoursPropertyDescriptions.json +2 -2
  43. package/src/documentation/generated/CmdSiteFooterPropertyDescriptions.json +12 -0
  44. package/src/documentation/generated/CmdSystemMessagePropertyDescriptions.json +5 -0
  45. package/src/documentation/generated/CmdTabsPropertyDescriptions.json +2 -2
  46. package/src/documentation/generated/CmdTooltipForInputElementsPropertyDescriptions.json +42 -0
  47. package/src/documentation/generated/CmdTooltipPropertyDescriptions.json +1 -1
  48. package/src/documentation/generated/CmdUploadFormPropertyDescriptions.json +14 -14
  49. package/src/index.js +2 -1
  50. package/src/mixins/FieldValidation.js +15 -5
  51. package/src/mixins/Tooltip.js +1 -1
@@ -1,9 +1,9 @@
1
1
  <template>
2
2
  <div :class="['cmd-list-of-links', 'align-' + align, {box: styleAsBox, horizontal: orientation === 'horizontal', 'section-anchors': sectionAnchors}]">
3
- <!-- begin CmdCustomHeadline -->
4
- <CmdCustomHeadline v-if="cmdCustomHeadline"
5
- v-bind="cmdCustomHeadline" />
6
- <!-- end CmdCustomHeadline -->
3
+ <!-- begin CmdHeadline -->
4
+ <CmdHeadline v-if="CmdHeadline"
5
+ v-bind="CmdHeadline" />
6
+ <!-- end CmdHeadline -->
7
7
 
8
8
  <!-- begin list of links -->
9
9
  <ul :class="['flex-container', {'no-gap': !useGap}]">
@@ -39,12 +39,12 @@ import {getRoute} from "../utilities.js"
39
39
  import {openFancyBox} from "./CmdFancyBox.vue"
40
40
 
41
41
  // import components
42
- import CmdCustomHeadline from "./CmdCustomHeadline"
42
+ import CmdHeadline from "./CmdHeadline"
43
43
 
44
44
  export default {
45
45
  name: "CmdListOfLinks",
46
46
  components: {
47
- CmdCustomHeadline
47
+ CmdHeadline
48
48
  },
49
49
  props: {
50
50
  /**
@@ -75,9 +75,9 @@ export default {
75
75
  default: "left"
76
76
  },
77
77
  /**
78
- * properties for cmdCustomHeadline-component
78
+ * properties for CmdHeadline-component
79
79
  */
80
- cmdCustomHeadline: {
80
+ CmdHeadline: {
81
81
  type: Object,
82
82
  required: false
83
83
  },
@@ -1,9 +1,9 @@
1
1
  <template>
2
2
  <div class="cmd-list-of-requirements">
3
3
  <!-- begin cmd-custom-headline -->
4
- <CmdCustomHeadline :headline-level="cmdCustomHeadline.headlineLevel">
5
- <!-- {{ getMessage("cmdfakeselect.headline.requirements_for_input") }}<br/>"{{ labelText }}"-->
6
- </CmdCustomHeadline>
4
+ <CmdHeadline :headline-level="CmdHeadline.headlineLevel">
5
+ <!-- {{ getMessage("cmdfakeselect.headline.requirements_for_input") }}<br/>"{{ labelText }}" -->
6
+ </CmdHeadline>
7
7
  <!-- end cmd-custom-headline -->
8
8
 
9
9
  <!-- begin list of requirements -->
@@ -23,10 +23,10 @@
23
23
  <!-- end list of requirements -->
24
24
 
25
25
  <!-- begin helplink -->
26
- <template v-if="helplink">
27
- <hr v-if="helplink.show"/>
26
+ <template v-if="helplink && helplink.show">
27
+ <hr />
28
28
  <a
29
- v-if="helplink.show && helplink.url"
29
+ v-if="helplink.url"
30
30
  :href="helplink.url"
31
31
  :target="helplink.target"
32
32
  @click.prevent
@@ -45,16 +45,25 @@
45
45
  </template>
46
46
 
47
47
  <script>
48
- import CmdCustomHeadline from "./CmdCustomHeadline"
48
+ // import components
49
+ import CmdHeadline from "./CmdHeadline"
49
50
 
50
51
  export default {
51
- name: "CmdListOfRequirements.vue",
52
- components: {CmdCustomHeadline},
52
+ name: "CmdListOfRequirements",
53
+ components: {
54
+ CmdHeadline
55
+ },
53
56
  props: {
57
+ /**
58
+ * property to check validity of given modelValue
59
+ */
54
60
  inputModelValue: {
55
61
  type: [String, Boolean, Array, Number],
56
62
  default: ""
57
63
  },
64
+ /**
65
+ * property to check validity of given attributes
66
+ */
58
67
  inputAttributes: {
59
68
  type: Object,
60
69
  required: true
@@ -66,15 +75,24 @@ export default {
66
75
  type: String,
67
76
  required: false
68
77
  },
78
+ /**
79
+ * list of all requirements
80
+ */
69
81
  inputRequirements: {
70
82
  type: Array,
71
83
  required: true
72
84
  },
85
+ /**
86
+ * set a helplink to a different page for further support
87
+ */
73
88
  helplink: {
74
89
  type: String,
75
90
  required: false
76
91
  },
77
- cmdCustomHeadline: {
92
+ /**
93
+ * properties of CmdHeadline-component
94
+ */
95
+ CmdHeadline: {
78
96
  type: Object,
79
97
  default() {
80
98
  return {
@@ -87,23 +105,27 @@ export default {
87
105
  </script>
88
106
 
89
107
  <style lang="scss">
90
- /* begin cmd-list-of-requiremnets ------------------------------------------------------------------------------------------ */
108
+ /* begin cmd-list-of-requirements ------------------------------------------------------------------------------------------ */
91
109
  .cmd-list-of-requirements {
92
110
  dl {
93
111
  .error {
94
- color: var(--error-color);
112
+ --status-color: var(--error-color);
95
113
  }
96
114
 
97
115
  .warning {
98
- color: var(--warning-color);
116
+ --status-color: var(--warning-color);
99
117
  }
100
118
 
101
119
  .success {
102
- color: var(--success-color);
120
+ --status-color: var(--success-color);
103
121
  }
104
122
 
105
123
  .info {
106
- color: var(--info-color);
124
+ --status-color: var(--info-color);
125
+ }
126
+
127
+ dt {
128
+ color: var(--status-color);
107
129
  }
108
130
 
109
131
  span[class*="icon"] {
@@ -2,10 +2,10 @@
2
2
  <!-- begin login-form -->
3
3
  <fieldset v-if="!sendLogin" class="cmd-login-form flex-container">
4
4
  <legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
5
- <!-- begin CmdCustomHeadline -->
6
- <CmdCustomHeadline v-if="cmdCustomHeadlineLoginForm"
7
- v-bind="cmdCustomHeadlineLoginForm"/>
8
- <!-- end CmdCustomHeadline -->
5
+ <!-- begin CmdHeadline -->
6
+ <CmdHeadline v-if="CmdHeadlineLoginForm"
7
+ v-bind="CmdHeadlineLoginForm"/>
8
+ <!-- end CmdHeadline -->
9
9
 
10
10
  <!-- being form elements -->
11
11
  <div class="flex-container">
@@ -121,13 +121,13 @@
121
121
  <!-- begin send-login-form -->
122
122
  <fieldset v-else class="cmd-login-form flex-container">
123
123
  <legend :class="{'hidden' : !legendSendLoginForm.show}">{{ legendSendLoginForm.text }}</legend>
124
- <!-- begin CmdCustomHeadline -->
125
- <CmdCustomHeadline v-if="cmdCustomHeadlineSendLoginForm"
126
- :iconClass="cmdCustomHeadlineSendLoginForm.iconClass"
127
- :preHeadline="cmdCustomHeadlineSendLoginForm.preHeadline"
128
- :headlineLevel="cmdCustomHeadlineSendLoginForm.preHeadline"
129
- :headlineText="cmdCustomHeadlineSendLoginForm.headlineText"/>
130
- <!-- end CmdCustomHeadline -->
124
+ <!-- begin CmdHeadline -->
125
+ <CmdHeadline v-if="CmdHeadlineSendLoginForm"
126
+ :iconClass="CmdHeadlineSendLoginForm.iconClass"
127
+ :preHeadline="CmdHeadlineSendLoginForm.preHeadline"
128
+ :headlineLevel="CmdHeadlineSendLoginForm.preHeadline"
129
+ :headlineText="CmdHeadlineSendLoginForm.headlineText"/>
130
+ <!-- end CmdHeadline -->
131
131
 
132
132
  <!-- begin CmdFormElement -->
133
133
  <CmdFormElement
@@ -209,7 +209,7 @@
209
209
  import {getRoute} from "../utilities.js"
210
210
 
211
211
  // import components
212
- import CmdCustomHeadline from "./CmdCustomHeadline"
212
+ import CmdHeadline from "./CmdHeadline"
213
213
  import CmdFormElement from "./CmdFormElement"
214
214
 
215
215
  export default {
@@ -223,7 +223,7 @@ export default {
223
223
  }
224
224
  },
225
225
  components: {
226
- CmdCustomHeadline,
226
+ CmdHeadline,
227
227
  CmdFormElement
228
228
  },
229
229
  props: {
@@ -270,16 +270,16 @@ export default {
270
270
  }
271
271
  },
272
272
  /**
273
- * properties for CmdCustomHeadline-component for login-form
273
+ * properties for CmdHeadline-component for login-form
274
274
  */
275
- cmdCustomHeadlineLoginForm: {
275
+ CmdHeadlineLoginForm: {
276
276
  type: Object,
277
277
  required: false
278
278
  },
279
279
  /**
280
- * properties for CmdCustomHeadline-component for send-login-form
280
+ * properties for CmdHeadline-component for send-login-form
281
281
  */
282
- cmdCustomHeadlineSendLoginForm: {
282
+ CmdHeadlineSendLoginForm: {
283
283
  type: Object,
284
284
  default() {
285
285
  return {
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <div class="cmd-opening-hours">
3
3
  <!-- begin cmd-custom-headline -->
4
- <CmdCustomHeadline v-if="cmdCustomHeadline" v-bind="cmdCustomHeadline" />
4
+ <CmdHeadline v-if="CmdHeadline" v-bind="CmdHeadline" />
5
5
  <!-- end cmd-custom-headline -->
6
6
 
7
7
  <!-- begin opening-status with link to detail-page -->
@@ -38,16 +38,16 @@
38
38
 
39
39
  <script>
40
40
  // import components
41
- import CmdCustomHeadline from "./CmdCustomHeadline"
41
+ import CmdHeadline from "./CmdHeadline"
42
42
 
43
43
  export default {
44
44
  name: "CmdOpeningHours",
45
- components: {CmdCustomHeadline},
45
+ components: {CmdHeadline},
46
46
  props: {
47
47
  /**
48
- * properties for CmdCustomHeadline-component
48
+ * properties for CmdHeadline-component
49
49
  */
50
- cmdCustomHeadline: {
50
+ CmdHeadline: {
51
51
  type: Object,
52
52
  required: false
53
53
  },
@@ -0,0 +1,76 @@
1
+ <template>
2
+ <div class="cmd-site-footer">
3
+ <footer :class="['flex-container', {vertical: orientation === 'vertical'}]">
4
+ <slot></slot>
5
+ </footer>
6
+ </div>
7
+ </template>
8
+
9
+ <script>
10
+ export default {
11
+ name: "CmdSiteFooter",
12
+ props: {
13
+ /**
14
+ * set to vertical if items inside should be arranged vertically
15
+ *
16
+ * @allowedValues: horizontal, vertical
17
+ */
18
+ orientation: {
19
+ type: String,
20
+ default: 'horizontal'
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+
26
+ <style lang="scss">
27
+ /* begin cmd-site-footer ---------------------------------------------------------------------------------------- */
28
+ @import '../assets/styles/variables';
29
+
30
+ .cmd-site-footer {
31
+ padding: var(--grid-gap) 0;
32
+ border-top: var(--default-border);
33
+ background: var(--default-background-color);
34
+
35
+ footer {
36
+ max-width: var(--max-width);
37
+ width: 100%; /* stretch flex-item */
38
+ margin: 0 auto;
39
+ padding: 0 var(--default-padding);
40
+ }
41
+
42
+ &.sticky {
43
+ top: auto;
44
+ bottom: 0;
45
+ }
46
+
47
+ .cmd-switch-language {
48
+ width: 100%;
49
+ flex: none;
50
+ }
51
+ }
52
+
53
+ @media only screen and (max-width: $medium-max-width) {
54
+ .cmd-site-footer {
55
+ footer {
56
+ li {
57
+ margin-bottom: calc(var(--default-margin) * 2);
58
+ }
59
+ }
60
+ }
61
+ }
62
+
63
+ @media only screen and (max-width: $small-max-width) {
64
+ .cmd-site-footer {
65
+ a {
66
+ text-decoration: underline;
67
+
68
+ &:active {
69
+ text-decoration: none;
70
+ }
71
+ }
72
+ }
73
+ }
74
+
75
+ /* end cmd-site-footer ---------------------------------------------------------------------------------------- */
76
+ </style>
@@ -101,7 +101,8 @@ export default {
101
101
  }
102
102
 
103
103
  header {
104
- padding: calc(var(--default-padding) * 2) 0;
104
+ padding-top: calc(var(--default-padding) * 2);
105
+ padding-bottom: calc(var(--default-padding) * 2);
105
106
 
106
107
  &.flex-container {
107
108
  width: 100%;
@@ -5,6 +5,7 @@
5
5
  :class="['cmd-system-message', 'system-message', 'flex-container', 'vertical', { 'full-width': fullWidth }, validationStatus]"
6
6
  :role="validationStatus === 'error' ? 'alert' : 'dialog'"
7
7
  >
8
+ <!-- begin close-icon -->
8
9
  <a
9
10
  v-if="iconClose.show && iconClose.iconClass"
10
11
  :class="iconClose.iconClass"
@@ -12,10 +13,17 @@
12
13
  @click.prevent="showSystemMessage = false"
13
14
  :title="iconClose.tooltip"
14
15
  ></a>
15
- <h6>
16
- <span v-if="iconMessage && iconMessage.iconClass" :class="iconMessage.iconClass"></span>
17
- <strong v-if="systemMessage">{{ systemMessage }}</strong>
18
- </h6>
16
+ <!-- end close-icon -->
17
+
18
+ <!-- begin cmd-headline -->
19
+ <CmdHeadline
20
+ class="message-headline"
21
+ :iconClass="iconMessage.iconClass"
22
+ :headlineText="systemMessage"
23
+ :headlineLevel="messageHeadlineLevel"
24
+ />
25
+ <!-- end cmd-headline -->
26
+
19
27
  <!-- begin slot-content -->
20
28
  <slot></slot>
21
29
  <!-- end slot-content -->
@@ -24,8 +32,14 @@
24
32
  </template>
25
33
 
26
34
  <script>
35
+ // import components
36
+ import CmdHeadline from "./CmdHeadline"
37
+
27
38
  export default {
28
39
  name: "CmdSystemMessage",
40
+ components: {
41
+ CmdHeadline
42
+ },
29
43
  data() {
30
44
  return {
31
45
  showSystemMessage: true
@@ -68,6 +82,15 @@ export default {
68
82
  type: String,
69
83
  required: false
70
84
  },
85
+ /**
86
+ * set headline-level for system-message (given to CmdHeadline-component)
87
+ */
88
+ messageHeadlineLevel: {
89
+ type: [Number, String],
90
+ default() {
91
+ return 6
92
+ }
93
+ },
71
94
  /**
72
95
  * icon to close system-message
73
96
  *
@@ -75,7 +98,7 @@ export default {
75
98
  */
76
99
  iconClose: {
77
100
  type: Object,
78
- default: function () {
101
+ default() {
79
102
  return {
80
103
  show: true,
81
104
  iconClass: "icon-cancel",
@@ -98,12 +121,6 @@ export default {
98
121
  margin: var(--default-margin) 0;
99
122
  align-items: center;
100
123
 
101
- h6 {
102
- strong {
103
- margin-left: calc(var(--default-margin) / 2);
104
- }
105
- }
106
-
107
124
  > :last-child {
108
125
  margin-bottom: 0;
109
126
  }
@@ -16,13 +16,13 @@
16
16
  </div>
17
17
  </template>
18
18
  <div v-else aria-live="assertive">
19
- <!-- begin CmdCustomHeadline -->
20
- <CmdCustomHeadline
21
- v-bind="cmdCustomHeadline"
19
+ <!-- begin CmdHeadline -->
20
+ <CmdHeadline
21
+ v-bind="CmdHeadline"
22
22
  :headlineText="tabs[showTab].headlineText"
23
23
  :headlineLevel="tabs[showTab].headlineLevel"
24
24
  />
25
- <!-- end CmdCustomHeadline -->
25
+ <!-- end CmdHeadline -->
26
26
  <div v-html="tabs[showTab].htmlContent"></div>
27
27
  </div>
28
28
  </div>
@@ -30,12 +30,12 @@
30
30
 
31
31
  <script>
32
32
  // import components
33
- import CmdCustomHeadline from "./CmdCustomHeadline"
33
+ import CmdHeadline from "./CmdHeadline"
34
34
 
35
35
  export default {
36
36
  name: "CmdTabs",
37
37
  components: {
38
- CmdCustomHeadline
38
+ CmdHeadline
39
39
  },
40
40
  data() {
41
41
  return {
@@ -45,9 +45,9 @@ export default {
45
45
  emits: ["active-tab"],
46
46
  props: {
47
47
  /**
48
- * properties for CmdCustomHeadline-component
48
+ * properties for CmdHeadline-component
49
49
  */
50
- cmdCustomHeadline: {
50
+ CmdHeadline: {
51
51
  type: Object,
52
52
  required: false
53
53
  },
@@ -70,13 +70,53 @@ export default {
70
70
  .cmd-toggle-dark-mode {
71
71
  .cmd-form-element {
72
72
  input {
73
- background: blue;
73
+ --dark-blue: hsl(195, 96%, 45%);
74
+ --medium-blue: hsl(194, 97%, 39%);
75
+ --light-blue: hsl(195, 97%, 76%);
76
+ background: linear-gradient(to bottom, var(--dark-blue) 0%,var(--light-blue) 67%);
77
+ border-color: var(--medium-blue);
78
+
79
+ &:after {
80
+ --yellow-hue: 60;
81
+ --yellow-saturation: 100%;
82
+ --yellow-lightness: 76.7%;
83
+ background: radial-gradient(ellipse at center, var(--pure-white) 20%, hsl(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness)) 30%, hsla(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness),0) 100%);
84
+ border-color: transparent;
85
+ box-shadow: 0 0 1rem hsl(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness));
86
+ }
74
87
  }
75
88
  }
76
89
 
77
90
  &.dark-mode {
78
91
  input {
79
- background: black;
92
+ background: var(--color-scheme-background-color);
93
+ border-color: var(--color-scheme-text-color);
94
+
95
+ &:before {
96
+ --size: 1.2rem;
97
+ content: "";
98
+ width: var(--size);
99
+ aspect-ratio: 1/1;
100
+ background: var(--color-scheme-background-color);
101
+ border-radius: var(--full-circle);
102
+ position: absolute;
103
+ top: 0;
104
+ right: calc(var(--size) / 2);
105
+ transform: translateY(calc(50% - 35%));
106
+ z-index: 100;
107
+ }
108
+
109
+ &:after {
110
+ background: radial-gradient(ellipse at center, var(--pure-white) 50%,var(--medium-gray) 100%);
111
+ border-color: transparent;
112
+ box-shadow: .2rem .1rem .2rem hsla(var(--pure-white-hue), var(--pure-white-saturation), var(--pure-white-lightness), .3);
113
+ }
114
+ }
115
+
116
+ .label-text {
117
+ span {
118
+ color: var(--color-scheme-text-color);
119
+ }
80
120
  }
81
121
  }
82
122
  }
@@ -1,16 +1,16 @@
1
1
  <template>
2
2
  <div v-if="tooltipVisibility" :class="['cmd-tooltip', status]" ref="tooltip" aria-role="tooltip">
3
- <div v-if="cmdCustomHeadline || iconClose.show" class="headline-wrapper">
4
- <!-- begin CmdCustomHeadline -->
5
- <CmdCustomHeadline v-if="cmdCustomHeadline"
6
- :iconClass="cmdCustomHeadline.iconClass"
7
- :preHeadline="cmdCustomHeadline.preHeadline"
8
- :headlineLevel="cmdCustomHeadline.headlineLevel"
9
- :headlineText="cmdCustomHeadline.headlineText"/>
10
- <!-- end CmdCustomHeadline -->
3
+ <div v-if="CmdHeadline || iconClose.show" class="headline-wrapper">
4
+ <!-- begin CmdHeadline -->
5
+ <CmdHeadline v-if="CmdHeadline"
6
+ :iconClass="CmdHeadline.iconClass"
7
+ :preHeadline="CmdHeadline.preHeadline"
8
+ :headlineLevel="CmdHeadline.headlineLevel"
9
+ :headlineText="CmdHeadline.headlineText"/>
10
+ <!-- end CmdHeadline -->
11
11
 
12
12
  <!-- begin icon to close tooltip -->
13
- <a v-if="iconClose.show && toggleVisibilityByClick" href="#" @click.prevent="tooltipVisibility = false" :title="iconClose.tooltip">
13
+ <a v-if="iconClose.show && toggleVisibilityByClick" href="#" @click.prevent="hideTooltip" :title="iconClose.tooltip">
14
14
  <span :class="iconClose.iconClass"></span>
15
15
  </a>
16
16
  <!-- end icon to close tooltip -->
@@ -25,12 +25,12 @@
25
25
 
26
26
  <script>
27
27
  // import components
28
- import CmdCustomHeadline from "./CmdCustomHeadline"
28
+ import CmdHeadline from "./CmdHeadline"
29
29
 
30
30
  export default {
31
31
  name: "CmdTooltip",
32
32
  components: {
33
- CmdCustomHeadline
33
+ CmdHeadline
34
34
  },
35
35
  data() {
36
36
  return {
@@ -41,9 +41,9 @@ export default {
41
41
  },
42
42
  props: {
43
43
  /**
44
- * properties for CmdCustomHeadline-component
44
+ * properties for CmdHeadline-component
45
45
  */
46
- cmdCustomHeadline: {
46
+ CmdHeadline: {
47
47
  type: Object,
48
48
  default() {}
49
49
  },