comand-component-library 3.3.87 → 4.0.1

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 (73) hide show
  1. package/dist/comand-component-library.js +1728 -1655
  2. package/dist/comand-component-library.umd.cjs +4 -4
  3. package/dist/media/images/slideshow-images/large/slide1.jpg +0 -0
  4. package/dist/media/images/slideshow-images/large/slide2.jpg +0 -0
  5. package/dist/media/images/slideshow-images/large/slide3.jpg +0 -0
  6. package/dist/media/images/slideshow-images/large/slide4.jpg +0 -0
  7. package/dist/media/images/slideshow-images/medium/slide1.jpg +0 -0
  8. package/dist/media/images/slideshow-images/medium/slide2.jpg +0 -0
  9. package/dist/media/images/slideshow-images/medium/slide3.jpg +0 -0
  10. package/dist/media/images/slideshow-images/medium/slide4.jpg +0 -0
  11. package/dist/media/images/slideshow-images/small/slide1.jpg +0 -0
  12. package/dist/media/images/slideshow-images/small/slide2.jpg +0 -0
  13. package/dist/media/images/slideshow-images/small/slide3.jpg +0 -0
  14. package/dist/media/images/slideshow-images/small/slide4.jpg +0 -0
  15. package/dist/style.css +1 -1
  16. package/package.json +2 -2
  17. package/src/ComponentLibrary.vue +2629 -0
  18. package/src/assets/data/address-data.json +3 -3
  19. package/src/assets/data/main-navigation.json +2 -0
  20. package/src/components/CmdAddressData.vue +91 -97
  21. package/src/components/CmdAddressDataItem.vue +60 -52
  22. package/src/components/CmdBankAccountData.vue +1 -1
  23. package/src/components/CmdBox.vue +50 -14
  24. package/src/components/CmdBoxWrapper.vue +23 -9
  25. package/src/components/CmdBreadcrumbs.vue +1 -1
  26. package/src/components/CmdCompanyLogo.vue +14 -11
  27. package/src/components/CmdContainer.vue +1 -1
  28. package/src/components/CmdCookieDisclaimer.vue +1 -1
  29. package/src/components/CmdCopyrightInformation.vue +1 -1
  30. package/src/components/CmdFancyBox.vue +8 -5
  31. package/src/components/CmdForm.vue +7 -1
  32. package/src/components/CmdFormElement.vue +58 -108
  33. package/src/components/CmdFormFilters.vue +2 -1
  34. package/src/components/CmdGoogleMaps.vue +1 -1
  35. package/src/components/CmdHeadline.vue +116 -52
  36. package/src/components/CmdIcon.vue +1 -1
  37. package/src/components/CmdImage.vue +1 -1
  38. package/src/components/CmdImageGallery.vue +1 -1
  39. package/src/components/CmdImageZoom.vue +1 -1
  40. package/src/components/CmdInputGroup.vue +8 -7
  41. package/src/components/CmdListOfLinks.vue +25 -25
  42. package/src/components/CmdListOfLinksItem.vue +0 -4
  43. package/src/components/CmdListOfRequirements.vue +10 -2
  44. package/src/components/CmdLoginForm.vue +2 -1
  45. package/src/components/CmdMainNavigation.vue +38 -26
  46. package/src/components/CmdMultistepFormProgressBar.vue +50 -4
  47. package/src/components/CmdNewsletterSubscription.vue +8 -15
  48. package/src/components/CmdOpeningHours.vue +34 -19
  49. package/src/components/CmdOpeningHoursItem.vue +22 -14
  50. package/src/components/CmdPagination.vue +22 -16
  51. package/src/components/CmdProgressBar.vue +1 -1
  52. package/src/components/CmdSidebar.vue +13 -2
  53. package/src/components/CmdSiteFooter.vue +14 -14
  54. package/src/components/CmdSiteHeader.vue +14 -29
  55. package/src/components/CmdSiteSearch.vue +12 -11
  56. package/src/components/CmdSlideButton.vue +9 -7
  57. package/src/components/CmdSlideshow.vue +14 -12
  58. package/src/components/CmdSocialNetworks.vue +11 -4
  59. package/src/components/CmdSocialNetworksItem.vue +2 -7
  60. package/src/components/CmdSwitchLanguage.vue +1 -1
  61. package/src/components/CmdSystemMessage.vue +11 -6
  62. package/src/components/CmdTable.vue +64 -16
  63. package/src/components/CmdTabs.vue +2 -2
  64. package/src/components/CmdTextImageBlock.vue +3 -1
  65. package/src/components/CmdThumbnailScroller.vue +180 -155
  66. package/src/components/CmdToggleDarkMode.vue +1 -1
  67. package/src/components/CmdTooltip.vue +6 -1
  68. package/src/components/CmdUploadForm.vue +69 -43
  69. package/src/components/CmdWidthLimitationWrapper.vue +7 -3
  70. package/src/components/ComponentSettings.vue +171 -0
  71. package/src/main.js +3 -3
  72. package/src/mixins/FieldValidation.js +0 -17
  73. package/src/App.vue +0 -2119
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <ol class="cmd-multistep-form-progress-bar">
2
+ <ol :class="['cmd-multistep-form-progress-bar', {'use-gap': useGap}]">
3
3
  <li v-for="(step, index) in multisteps" :key="index" :class="{active : activeLink === index}">
4
4
  <!-- begin type === href -->
5
5
  <a v-if="step.type === 'href'"
@@ -86,6 +86,10 @@ export default {
86
86
  default() {
87
87
  return "icon-single-arrow-right"
88
88
  }
89
+ },
90
+ useGap: {
91
+ type: Boolean,
92
+ default: true
89
93
  }
90
94
  },
91
95
  methods: {
@@ -100,14 +104,42 @@ export default {
100
104
  }
101
105
  </script>
102
106
 
103
- <style lang="scss">
107
+ <style>
104
108
  /* begin cmd-multistep-form-progress-bar ---------------------------------------------------------------------------------------- */
105
- @import '../assets/styles/variables';
106
109
 
107
110
  .cmd-multistep-form-progress-bar {
108
111
  display: flex;
109
112
  justify-content: space-around;
110
113
  border: var(--default-border);
114
+ margin: 0;
115
+ border-radius: var(--default-border-radius);
116
+
117
+ &.use-gap {
118
+ border: 0;
119
+ gap: var(--default-gap);
120
+
121
+ li {
122
+ border: var(--default-border) !important;
123
+ border-radius: var(--default-border-radius);;
124
+
125
+ a, a.active {
126
+ border: 0;
127
+ border-radius: inherit;
128
+
129
+ :is(span, [class*="icon-"]) + [class*="icon-"]:last-child {
130
+ border: 0;
131
+ right: -1rem;
132
+ background: none;
133
+ }
134
+ }
135
+
136
+ a {
137
+ :is(span, [class*="icon-"]) + [class*="icon-"]:last-child {
138
+ color: var(--default-text-color) !important;
139
+ }
140
+ }
141
+ }
142
+ }
111
143
 
112
144
  li {
113
145
  display: flex;
@@ -115,6 +147,16 @@ export default {
115
147
  list-style-type: none;
116
148
  margin: 0;
117
149
 
150
+ &:first-child, &:first-child > a {
151
+ border-top-left-radius: inherit;
152
+ border-bottom-left-radius: inherit;
153
+ }
154
+
155
+ &:last-child, &:last-child > a {
156
+ border-top-right-radius: inherit;
157
+ border-bottom-right-radius: inherit;
158
+ }
159
+
118
160
  a {
119
161
  display: flex;
120
162
  text-decoration: none;
@@ -263,6 +305,10 @@ export default {
263
305
  }
264
306
  }
265
307
  }
308
+ </style>
309
+
310
+ <style lang="scss">
311
+ @import '../assets/styles/variables';
266
312
 
267
313
  @media only screen and (width < #{$small-max-width}) {
268
314
  .cmd-multistep-form-progress-bar {
@@ -274,7 +320,7 @@ export default {
274
320
  }
275
321
 
276
322
  a {
277
- span, [class*="icon-"] {
323
+ :is(span, [class*="icon-"]) {
278
324
  & + [class*="icon-"] {
279
325
  &:last-child {
280
326
  left: auto;
@@ -71,6 +71,13 @@ export default {
71
71
  return value === "submit" || value === "button"
72
72
  }
73
73
  },
74
+ /**
75
+ * toggle legend visibility
76
+ */
77
+ showLegend: {
78
+ type: Boolean,
79
+ default: true
80
+ },
74
81
  /**
75
82
  * text used as legend for login-fieldset
76
83
  *
@@ -80,13 +87,6 @@ export default {
80
87
  type: String,
81
88
  default: "Stay up-to-date"
82
89
  },
83
- /**
84
- * toggle legend visibility
85
- */
86
- showLegend: {
87
- type: Boolean,
88
- default: true
89
- },
90
90
  /**
91
91
  * properties for CmdInputGroup-component
92
92
  */
@@ -171,11 +171,4 @@ export default {
171
171
  }
172
172
  }
173
173
  }
174
- </script>
175
-
176
- <style lang="scss">
177
- /* begin cmd-newsletter-subscription ---------------------------------------------------------------------------------------- */
178
-
179
-
180
- /* cmd-newsletter-subscription------------------------------------------------------------------------------------------ */
181
- </style>
174
+ </script>
@@ -55,7 +55,8 @@
55
55
  :key="index"
56
56
  :day="day"
57
57
  :separator="separator"
58
- :abbreviationText="abbreviationText"
58
+ :abbreviationTextAm="abbreviationTextAm"
59
+ :abbreviationTextPm="abbreviationTextPm"
59
60
  />
60
61
  </dl>
61
62
  <!-- end default view -->
@@ -82,7 +83,8 @@
82
83
  <CmdOpeningHoursItem
83
84
  :day="day"
84
85
  :separator="separator"
85
- :abbreviationText="abbreviationText"
86
+ :abbreviationTextAm="abbreviationTextAm"
87
+ :abbreviationTextPm="abbreviationTextPm"
86
88
  />
87
89
  </dl>
88
90
  </EditComponentWrapper>
@@ -168,13 +170,6 @@ export default {
168
170
  }
169
171
  },
170
172
  props: {
171
- /**
172
- * set a link to a detail page
173
- */
174
- link: {
175
- type: Object,
176
- required: false
177
- },
178
173
  /**
179
174
  * toggles if "closed"-text will be shown
180
175
  *
@@ -184,6 +179,13 @@ export default {
184
179
  type: Boolean,
185
180
  default: false
186
181
  },
182
+ /**
183
+ * set a link to a detail page
184
+ */
185
+ link: {
186
+ type: Object,
187
+ required: false
188
+ },
187
189
  /**
188
190
  * text for 'open'-information
189
191
  */
@@ -198,13 +200,26 @@ export default {
198
200
  type: String,
199
201
  default: "Closed right now!"
200
202
  },
203
+ /**
204
+ * separator between time-spans
205
+ */
201
206
  separator: {
202
207
  type: String,
203
208
  default: "–"
204
209
  },
205
- abbreviationText: {
210
+ /**
211
+ * abbreviation (behind time) for morning
212
+ */
213
+ abbreviationTextAm: {
214
+ type: String,
215
+ default: "am"
216
+ },
217
+ /**
218
+ * abbreviation (behind time) for afternoon
219
+ */
220
+ abbreviationTextPm: {
206
221
  type: String,
207
- default: "h"
222
+ default: "pm"
208
223
  },
209
224
  /**
210
225
  * list of opening-hours
@@ -227,13 +242,6 @@ export default {
227
242
  type: String,
228
243
  required: false
229
244
  },
230
- /**
231
- * properties for CmdHeadline-component
232
- */
233
- cmdHeadline: {
234
- type: Object,
235
- required: false
236
- },
237
245
  /**
238
246
  * option to set custom time format by function
239
247
  */
@@ -254,6 +262,13 @@ export default {
254
262
  checkInterval: {
255
263
  type: Number,
256
264
  default: 5000
265
+ },
266
+ /**
267
+ * properties for CmdHeadline-component
268
+ */
269
+ cmdHeadline: {
270
+ type: Object,
271
+ required: false
257
272
  }
258
273
  },
259
274
  mounted() {
@@ -434,7 +449,7 @@ export default {
434
449
  }
435
450
  </script>
436
451
 
437
- <style lang="scss">
452
+ <style>
438
453
  /* begin cmd-opening-hours ------------------------------------------------------------------------------------------ */
439
454
  .cmd-opening-hours {
440
455
  > a, > span {
@@ -5,17 +5,11 @@
5
5
  <dd>
6
6
  <span v-if="day.am" class="am">
7
7
  <template v-if="day.am.displayText">{{ day.am.displayText }}</template>
8
- <template
9
- v-else>{{ getTime(day.am.fromTime) }} {{ separator }} {{
10
- getTime(day.am.tillTime)
11
- }}</template>
8
+ <template v-else>{{ getTime(day.am.fromTime, abbreviationTextAm) }} {{ separator }} {{getTime(day.am.tillTime)}}</template>
12
9
  </span>
13
10
  <span v-if="day.pm" class="pm">
14
11
  <template v-if="day.pm.displayText">{{ day.pm.displayText }}</template>
15
- <template
16
- v-else>{{ getTime(day.pm.fromTime) }} {{ separator }} {{
17
- getTime(day.pm.tillTime)
18
- }}</template>
12
+ <template v-else>{{ getTime(day.pm.fromTime, abbreviationTextPm) }} {{ separator }} {{getTime(day.pm.tillTime)}}</template>
19
13
  </span>
20
14
  </dd>
21
15
  </template>
@@ -178,11 +172,18 @@ export default {
178
172
  default: "–"
179
173
  },
180
174
  /**
181
- * abbreviation text for 'hours' (as a unit after displayed times)
175
+ * abbreviation (behind time) for morning
182
176
  */
183
- abbreviationText: {
177
+ abbreviationTextAm: {
184
178
  type: String,
185
- default: "h"
179
+ default: "am"
180
+ },
181
+ /**
182
+ * abbreviation (behind time) for afternoon
183
+ */
184
+ abbreviationTextPm: {
185
+ type: String,
186
+ default: "pm"
186
187
  },
187
188
  /**
188
189
  * option to set custom time format by function
@@ -196,11 +197,14 @@ export default {
196
197
  toggleClosedStatus(period) {
197
198
  period === 'am' ? this.editableDay.amClosed = !this.editableDay.amClosed : this.editableDay.pmClosed = !this.editableDay.pmClosed
198
199
  },
199
- getTime(time) {
200
+ getTime(time, suffix) {
200
201
  if (this.timeFormatter) {
201
202
  return this.timeFormatter(time.hours, time.mins)
202
203
  }
203
- return timeFormatting(":", " " + this.abbreviationText, "", false)(time.hours, time.mins)
204
+
205
+ console.log("suffix", suffix)
206
+
207
+ return timeFormatting(":", " " + this.abbreviationTextAm, " " + this.abbreviationTextPm, false)(time.hours, time.mins)
204
208
  },
205
209
  updateHandlerProvider() {
206
210
  const data = this.editableDay
@@ -246,8 +250,12 @@ export default {
246
250
  }
247
251
  </script>
248
252
 
249
- <style lang="scss">
253
+ <style>
250
254
  .edit-mode-opening-hours-item {
255
+ dt {
256
+ min-width: 3ch;
257
+ }
258
+
251
259
  .am-wrapper, .pm-wrapper {
252
260
  align-items: center;
253
261
  gap: calc(var(--default-gap) / 2);
@@ -18,12 +18,12 @@
18
18
  <div class="page-index">
19
19
  <div class="flex-container">
20
20
  <a :href="getHref(page)"
21
- :class="{'disabled': currentPage === index + 1, 'button': linkType === 'button'}"
21
+ :class="{'disabled': currentPage === index + 1, 'button': linkType === 'button', 'hidden': !showPageNumbers}"
22
22
  :title="currentPage !== index + 1 ? getMessage('cmdpager.tooltip.go_to_page', index + 1) : getMessage('cmdpager.tooltip.not_possible')"
23
23
  v-for="(page, index) in pages"
24
24
  :key="index"
25
25
  @click.stop.prevent="showPage(page)" aria-live="polite">
26
- <span :class="{hidden: !showPageNumbers}">{{ index + 1 }}</span>
26
+ <span>{{ index + 1 }}</span>
27
27
  </a>
28
28
  </div>
29
29
  </div>
@@ -48,11 +48,12 @@
48
48
  // import mixins
49
49
  import I18n from "../mixins/I18n"
50
50
  import DefaultMessageProperties from "../mixins/CmdPager/DefaultMessageProperties"
51
+
51
52
  export default {
52
53
  name: "CmdPager",
53
54
  mixins: [
54
- I18n,
55
- DefaultMessageProperties
55
+ I18n,
56
+ DefaultMessageProperties
56
57
  ],
57
58
  emits: ['click'],
58
59
  data() {
@@ -165,10 +166,8 @@ export default {
165
166
  }
166
167
  </script>
167
168
 
168
- <style lang="scss">
169
+ <style>
169
170
  /* begin cmd-pagination ---------------------------------------------------------------------------------------- */
170
- @import '../assets/styles/variables';
171
-
172
171
  .cmd-pager {
173
172
  display: flex;
174
173
  justify-content: space-between;
@@ -208,7 +207,14 @@ export default {
208
207
  }
209
208
  }
210
209
 
211
- @media only screen and (max-width: $medium-max-width) {
210
+ }
211
+ </style>
212
+
213
+ <style lang="scss">
214
+ @import '../assets/styles/variables';
215
+
216
+ @media only screen and (max-width: $medium-max-width) {
217
+ .cmd-pager {
212
218
  > a.button {
213
219
  span {
214
220
  margin: 0;
@@ -218,16 +224,16 @@ export default {
218
224
  }
219
225
  }
220
226
  }
221
- }
222
227
 
223
- @media only screen and (max-width: $small-max-width) {
224
- .button {
225
- width: auto; /* overwrite default settings from framework.css */
226
- }
228
+ @media only screen and (max-width: $small-max-width) {
229
+ .button {
230
+ width: auto; /* overwrite default settings from framework.css */
231
+ }
227
232
 
228
- .page-index {
229
- .flex-container {
230
- flex-direction: row; /* overwrite default settings from framework.css */
233
+ .page-index {
234
+ .flex-container {
235
+ flex-direction: row; /* overwrite default settings from framework.css */
236
+ }
231
237
  }
232
238
  }
233
239
  }
@@ -54,7 +54,7 @@ export default {
54
54
  }
55
55
  </script>
56
56
 
57
- <style lang="scss">
57
+ <style>
58
58
  /* begin cmd-progressbar ---------------------------------------------------------------------------------------- */
59
59
  .cmd-progressbar {
60
60
  .progressbar {
@@ -122,7 +122,8 @@ export default {
122
122
  }
123
123
  </script>
124
124
 
125
- <style lang="scss">
125
+ <style>
126
+ /* begin cmd-sidebar ---------------------------------------------------------------------------------------- */
126
127
  .cmd-sidebar {
127
128
  display: flex;
128
129
  height: 100%;
@@ -131,6 +132,15 @@ export default {
131
132
  padding: 0;
132
133
  }
133
134
 
135
+ .cmd-box-wrapper > .grid-container-create-columns {
136
+ grid-template-columns: repeat(1, minmax(0, 1fr));
137
+ }
138
+
139
+ .cmd-box {
140
+ border-left: 0;
141
+ border-right: 0;
142
+ }
143
+
134
144
  .inner-sidebar-wrapper {
135
145
  flex: 1;
136
146
  display: flex;
@@ -157,11 +167,12 @@ export default {
157
167
 
158
168
  &.collapse-to-right {
159
169
  flex-direction: row-reverse;
170
+ border-right: 0;
160
171
 
161
172
  > a {
162
- border-left: 0;
163
173
  border-right: var(--default-border);
164
174
  }
165
175
  }
166
176
  }
177
+ /* end cmd-sidebar ---------------------------------------------------------------------------------------- */
167
178
  </style>
@@ -23,10 +23,8 @@ export default {
23
23
  }
24
24
  </script>
25
25
 
26
- <style lang="scss">
26
+ <style>
27
27
  /* begin cmd-site-footer ---------------------------------------------------------------------------------------- */
28
- @import '../assets/styles/variables';
29
-
30
28
  .cmd-site-footer {
31
29
  padding: var(--grid-gap) 0;
32
30
  border-top: var(--default-border);
@@ -49,6 +47,10 @@ export default {
49
47
  flex: none;
50
48
  }
51
49
  }
50
+ </style>
51
+
52
+ <style lang="scss">
53
+ @import '../assets/styles/variables';
52
54
 
53
55
  @media only screen and (max-width: $medium-max-width) {
54
56
  .cmd-site-footer {
@@ -57,21 +59,19 @@ export default {
57
59
  margin-bottom: calc(var(--default-margin) * 2);
58
60
  }
59
61
  }
60
- }
61
- }
62
62
 
63
- @media only screen and (max-width: $small-max-width) {
64
- .cmd-site-footer {
65
- a {
66
- text-decoration: underline;
63
+ @media only screen and (max-width: $small-max-width) {
64
+ a {
65
+ text-decoration: underline;
67
66
 
68
- &:active {
69
- text-decoration: none;
67
+ &:active {
68
+ text-decoration: none;
69
+ }
70
70
  }
71
- }
72
71
 
73
- h4, h5, h6 {
74
- margin-top: var(--default-margin);
72
+ h4, h5, h6 {
73
+ margin-top: var(--default-margin);
74
+ }
75
75
  }
76
76
  }
77
77
  }
@@ -1,5 +1,7 @@
1
1
  <template>
2
- <div :class="['cmd-site-header', {sticky: sticky, 'navigation-inline': navigationInline, 'off-canvas-right': cmdMainNavigation?.offcanvasPosition === 'right'}]" role="banner">
2
+ <div
3
+ :class="['cmd-site-header site-header', {sticky: sticky, 'navigation-inline': navigationInline, 'off-canvas-right': cmdMainNavigation?.offcanvasPosition === 'right'}]"
4
+ role="banner">
3
5
  <!-- begin slot for elements above header -->
4
6
  <div v-if="$slots.topheader" class="top-header">
5
7
  <slot name="topheader"></slot>
@@ -33,6 +35,7 @@
33
35
  v-if="cmdMainNavigation?.navigationEntries?.length && navigationInline"
34
36
  :navigationEntries="cmdMainNavigation.navigationEntries"
35
37
  :offcanvasPosition="cmdMainNavigation.offcanvasPosition"
38
+ :stretchMainItems="cmdMainNavigation.stretchMainItems"
36
39
  :closeOffcanvas="closeOffcanvas"
37
40
  @offcanvas="emitOffcanvasStatus"
38
41
  />
@@ -47,6 +50,7 @@
47
50
  :navigationEntries="cmdMainNavigation.navigationEntries"
48
51
  :offcanvasPosition="cmdMainNavigation.offcanvasPosition"
49
52
  :closeOffcanvas="closeOffcanvas"
53
+ :stretchMainItems="cmdMainNavigation.stretchMainItems"
50
54
  @offcanvas="emitOffcanvasStatus"
51
55
  />
52
56
  <!-- end CmdMainNavigation -->
@@ -106,7 +110,7 @@ export default {
106
110
  }
107
111
  },
108
112
  methods: {
109
- emitOffcanvasStatus(event){
113
+ emitOffcanvasStatus(event) {
110
114
  this.$emit("offcanvas", event)
111
115
  }
112
116
  }
@@ -115,8 +119,6 @@ export default {
115
119
 
116
120
  <style lang="scss">
117
121
  /* begin cmd-site-header ---------------------------------------------------------------------------------------- */
118
- @import '../assets/styles/variables';
119
-
120
122
  .cmd-site-header {
121
123
  grid-area: site-header;
122
124
  display: flex;
@@ -152,7 +154,7 @@ export default {
152
154
  border-bottom: 0;
153
155
  }
154
156
 
155
- // use id to ensure high specificity
157
+ /* use id to ensure high specificity */
156
158
  > .cmd-main-navigation#main-navigation-wrapper:last-child {
157
159
  border-bottom: 0;
158
160
  }
@@ -183,14 +185,10 @@ export default {
183
185
  .cmd-main-navigation,
184
186
  nav ul li {
185
187
  border-bottom: 0;
186
- background: none;
187
- }
188
-
189
- .cmd-company-logo {
190
- grid-column: span var(--grid-small-span);
191
188
  }
192
189
  }
193
190
 
191
+ /* begin inline-navigation (shares spaces with company-logo */
194
192
  &.navigation-inline {
195
193
  header {
196
194
  &.has-navigation {
@@ -209,26 +207,7 @@ export default {
209
207
  display: flex;
210
208
  align-items: center;
211
209
  justify-content: flex-end;
212
- border: 0;
213
210
  grid-column: span var(--grid-large-span);
214
- background: none;
215
-
216
- :where(nav, .nav) {
217
- margin-right: 0;
218
-
219
- > ul {
220
- border: 0;
221
- background: none;
222
-
223
- li {
224
- border: 0;
225
-
226
- ul {
227
- border-top: var(--default-border);
228
- }
229
- }
230
- }
231
- }
232
211
 
233
212
  &:not(.persist-on-mobile) {
234
213
  padding-left: 0 !important;
@@ -244,7 +223,13 @@ export default {
244
223
  }
245
224
  }
246
225
  }
226
+
227
+ /* end inline-navigation (shares spaces with company-logo */
247
228
  }
229
+ </style>
230
+
231
+ <style lang="scss">
232
+ @import '../assets/styles/variables';
248
233
 
249
234
  @media only screen and (max-width: $medium-max-width) {
250
235
  .cmd-site-header {
@@ -69,7 +69,7 @@
69
69
  <!-- end form-elements -->
70
70
 
71
71
  <!-- begin filters -->
72
- <template v-if="cmdFakeSelect?.show">
72
+ <template v-if="useFilters">
73
73
  <a href="#" @click.prevent="showFilters = !showFilters">
74
74
  <!-- begin CmdIcon -->
75
75
  <CmdIcon
@@ -97,8 +97,9 @@
97
97
  </template>
98
98
  <!-- end filters -->
99
99
  </fieldset>
100
+
100
101
  <!-- begin CmdFormFilters -->
101
- <CmdFormFilters v-if="cmdFakeSelect?.show" v-model="searchFilters" :selectedOptionsName="getOptionName"/>
102
+ <CmdFormFilters v-if="useFilters" v-model="searchFilters" :selectedOptionsName="getOptionName"/>
102
103
  <!-- end CmdFormFilters -->
103
104
  </template>
104
105
 
@@ -158,15 +159,6 @@ export default {
158
159
  type: Boolean,
159
160
  default: true
160
161
  },
161
- /**
162
- * text for legend
163
- *
164
- * @requiredForAccessibility: true
165
- */
166
- textLegend: {
167
- type: String,
168
- required: false
169
- },
170
162
  /**
171
163
  * toggle legend visibility
172
164
  *
@@ -176,6 +168,15 @@ export default {
176
168
  type: Boolean,
177
169
  default: true
178
170
  },
171
+ /**
172
+ * text for legend
173
+ *
174
+ * @requiredForAccessibility: true
175
+ */
176
+ textLegend: {
177
+ type: String,
178
+ required: false
179
+ },
179
180
  /**
180
181
  * send search result from outside to display inside this component
181
182
  */