comand-component-library 3.3.21 → 3.3.23

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.
@@ -141,7 +141,8 @@
141
141
  <li v-if="showSelectAllOptions && type === 'checkboxOptions'" class="select-all-options">
142
142
  <a href="#" @click.prevent="toggleAllOptions">
143
143
  <!-- begin CmdIcon -->
144
- <CmdIcon :iconClass="selectAllOptionsIcon.iconClass" :type="selectAllOptionsIcon.iconType" />
144
+ <CmdIcon v-if="!allOptionsSelected" :iconClass="iconSelectAllOptions.iconClass" :type="iconSelectAllOptions.iconType" />
145
+ <CmdIcon v-else :iconClass="iconDeselectAllOptions.iconClass" :type="iconDeselectAllOptions.iconType" />
145
146
  <!-- end CmdIcon -->
146
147
  <span>{{ selectAllOptionsText }}</span>
147
148
  </a>
@@ -182,7 +183,8 @@ export default {
182
183
  return {
183
184
  showOptions: false,
184
185
  validationStatus: "",
185
- limitWidthStyle: {}
186
+ limitWidthStyle: {},
187
+ allOptionsSelected: false
186
188
  }
187
189
  },
188
190
  props: {
@@ -296,6 +298,18 @@ export default {
296
298
  iconType: "auto"
297
299
  }
298
300
  }
301
+ },
302
+ /**
303
+ * set icon for "deselect all"-option
304
+ */
305
+ iconDeselectAllOptions: {
306
+ type: Object,
307
+ default() {
308
+ return {
309
+ iconClass: "icon-cancel",
310
+ iconType: "auto"
311
+ }
312
+ }
299
313
  }
300
314
  },
301
315
  computed: {
@@ -329,7 +343,7 @@ export default {
329
343
  if (this.modelValue.length === 1) {
330
344
  return this.selectData.find(option => String(option.value) === String(this.modelValue[0]))?.text
331
345
  } else if (this.modelValue.length > 1) {
332
- return this.modelValue.length + " options selected"
346
+ return this.getMessage("cmdfakeselect.option.options_selected", this.modelValue.length)
333
347
  }
334
348
  } else if (this.selectData?.length) {
335
349
  // return text of first option nothing is selected (and type !== checkboxOptions && type !== content)
@@ -342,7 +356,6 @@ export default {
342
356
  // get the displayed icon (only available for default selectbox)
343
357
  optionIcon() {
344
358
  if (this.type === "default") {
345
-
346
359
  const selectedOption = this.selectData.find(option => {
347
360
  return option.value === this.modelValue
348
361
  })
@@ -368,9 +381,11 @@ export default {
368
381
  },
369
382
  selectAllOptionsText() {
370
383
  if (Array.isArray(this.modelValue) && this.modelValue.length === this.selectData.length) {
371
- return "Deselect all options"
384
+ this.allOptionsSelected = true
385
+ return this.getMessage("cmdfakeselect.linktext.deselect_all_options")
372
386
  }
373
- return "Select all options"
387
+ this.allOptionsSelected = false
388
+ return this.getMessage("cmdfakeselect.linktext.select_all_options")
374
389
  }
375
390
  },
376
391
  mounted() {
@@ -459,7 +474,7 @@ export default {
459
474
  },
460
475
  // overwrite requirement-message form fieldValidation.js
461
476
  getRequirementMessage() {
462
- return "An option is selected"
477
+ return this.getMessage("cmdfakeselect.headline.an_option_is_selected")
463
478
  }
464
479
  },
465
480
  watch: {
@@ -657,7 +672,8 @@ export default {
657
672
  }
658
673
  }
659
674
 
660
- &.has-state {
675
+ // use additional class in selector to gain high specificity
676
+ &.has-state.label {
661
677
  > ul {
662
678
  > li {
663
679
  > a {
@@ -66,7 +66,7 @@
66
66
  <!-- end button-wrapper -->
67
67
  </header>
68
68
  <div :class="['outer-content-wrapper', {'grayscale' : printInGrayscale}]">
69
- <div v-if="fancyBoxImageUrl" class="content">
69
+ <div v-if="fancyBoxImageUrl || cmdImage?.image" class="content">
70
70
  <!-- begin CmdImage -->
71
71
  <CmdImage :image="largeSingleImage" :figcaption="cmdImage?.figcaption" />
72
72
  <!-- end CmdImage -->
@@ -355,18 +355,21 @@ const FancyBox = defineComponent({
355
355
  largeSingleImage() {
356
356
  // change src-key for a single item/image to fit CmdImage-properties
357
357
  const fancyBoxItem = {...this.cmdImage?.image || {}}
358
- fancyBoxItem.src = this.fancyBoxImageUrl
358
+ if(this.fancyBoxImageUrl) {
359
+ fancyBoxItem.src = this.fancyBoxImageUrl
360
+ }
359
361
  return fancyBoxItem
360
362
  }
361
363
  },
362
364
  methods: {
365
+ // open dialog/fancybox
363
366
  showDialog() {
364
367
  // avoid scrolling if fancybox is shown
365
- document.querySelector("body").classList.add("avoid-scrolling")
366
- this.$refs.dialog.showModal()
368
+ document.querySelector("body").classList.add("avoid-scrolling")
369
+ this.$refs.dialog.showModal()
367
370
 
368
- // overwrite default behavior of dialog-element, which sets focus on first focusable element inside
369
- this.$refs["close-dialog"].focus()
371
+ // overwrite default behavior of dialog-element, which sets focus on first focusable element inside
372
+ this.$refs["close-dialog"].focus()
370
373
  },
371
374
  updateContentOnPropertyChange() {
372
375
  this.fancyBoxImageUrl = this.fancyBoxContent = this.fancyBoxElements = null
@@ -392,6 +395,7 @@ const FancyBox = defineComponent({
392
395
  .catch(error => console.error(`Error loading ${this.url}: ${error}`))
393
396
  }
394
397
  },
398
+ // switch to previous-item (in fancybox-gallery)
395
399
  showPrevItem() {
396
400
  if (this.index > 0) {
397
401
  this.index--;
@@ -399,6 +403,7 @@ const FancyBox = defineComponent({
399
403
  this.index = this.fancyBoxGallery.length - 1;
400
404
  }
401
405
  },
406
+ // show current item (in fancybox-gallery)
402
407
  showItem(imgId) {
403
408
  for (let i = 0; i < this.fancyBoxGallery.length; i++) {
404
409
  if (this.fancyBoxGallery[i].id === imgId) {
@@ -407,6 +412,7 @@ const FancyBox = defineComponent({
407
412
  }
408
413
  }
409
414
  },
415
+ // switch to next-item (in fancybox-gallery)
410
416
  showNextItem() {
411
417
  if (this.index < this.fancyBoxGallery.length - 1) {
412
418
  this.index++;
@@ -414,6 +420,7 @@ const FancyBox = defineComponent({
414
420
  this.index = 0;
415
421
  }
416
422
  },
423
+ // close fancybox (by button, escape-key)
417
424
  close() {
418
425
  if (this.$options.el) {
419
426
  this.$destroy()
@@ -426,10 +433,12 @@ const FancyBox = defineComponent({
426
433
  // remove class to re-enable scrolling
427
434
  document.querySelector("body").classList.remove("avoid-scrolling")
428
435
  },
436
+ // click on cancel-button
429
437
  cancel() {
430
438
  this.$emit("cancel", true)
431
439
  this.close()
432
440
  },
441
+ // click on confirm-button
433
442
  confirm() {
434
443
  this.$emit("confirm", true)
435
444
  this.close()
@@ -59,7 +59,7 @@ export default {
59
59
  */
60
60
  textAlign: {
61
61
  type: String,
62
- default: "left"
62
+ default: null
63
63
  }
64
64
  },
65
65
  computed: {
@@ -73,7 +73,7 @@ export default {
73
73
  if(this.textAlign) {
74
74
  return "text-" + this.textAlign
75
75
  }
76
- return ''
76
+ return ""
77
77
  }
78
78
  }
79
79
  }
@@ -54,7 +54,6 @@ export default {
54
54
  if (this.type === "iconify") {
55
55
  return true
56
56
  }
57
-
58
57
  if (this.type === "auto") {
59
58
  return this.iconClass.includes(":")
60
59
  }
@@ -8,7 +8,6 @@
8
8
 
9
9
  <script>
10
10
  export default {
11
-
12
11
  data() {
13
12
  return {
14
13
  mediumMaxWidth: 1023,
@@ -19,7 +18,7 @@ export default {
19
18
  name: "CmdImage",
20
19
  props: {
21
20
  /**
22
- * image-object including source, alternative text, tooltip (not required)
21
+ * image-object including source(s), alternative text, tooltip (not required)
23
22
  */
24
23
  image: {
25
24
  type: Object,
@@ -1,32 +1,21 @@
1
1
  <template>
2
- <div class="cmd-imagezoom grid-container-create-columns">
3
- <div class="grid-small-item">
4
- <!-- begin small image -->
5
- <a href="#" class="thumbnails-imagezoom">
6
- <!-- begin CmdImage -->
7
- <CmdImage
8
- :image="imageSmall.image"
9
- :figcaption="imageSmall.figcaption"
10
- @mouseover="onMouseOver"
11
- @mousemove="onMouseMove"
12
- @mouseout="onMouseOut"
13
- />
14
- <!-- end CmdImage -->
15
- </a>
16
- <!-- end small image -->
17
- </div>
2
+ <div class="cmd-imagezoom flex-container">
18
3
 
19
- <!-- begin large image -->
20
- <div v-if="showLargeImage" class="zoom-container grid-large-item">
21
- <!-- begin CmdImage -->
22
- <CmdImage
23
- :image="imageLarge.image"
24
- :figcaption="imageLarge.figcaption"
4
+ <!-- begin small image -->
5
+ <a href="#" class="no-flex thumbnails-imagezoom" :title="imageSmall.tooltip">
6
+ <img :src="imageSmall.src"
7
+ :alt="imageSmall.alt"
25
8
  @mouseover="onMouseOver"
26
9
  @mousemove="onMouseMove"
27
10
  @mouseout="onMouseOut"
28
11
  />
29
12
  <!-- end CmdImage -->
13
+ </a>
14
+ <!-- end small image -->
15
+
16
+ <!-- begin large image -->
17
+ <div v-if="showLargeImage" class="zoom-container">
18
+ <img :src="imageLarge.src" :alt="imageLarge.alt"/>
30
19
  </div>
31
20
  <div v-if="showLargeImage" class="zoom-overlay"></div>
32
21
  <!-- end large image -->
@@ -38,14 +27,14 @@ export default {
38
27
  name: "CmdImageZoom",
39
28
  props: {
40
29
  /**
41
- * object for small image
30
+ * url for small images
42
31
  */
43
32
  imageSmall: {
44
33
  type: Object,
45
34
  required: true
46
35
  },
47
36
  /**
48
- * object for large image
37
+ * url for large image
49
38
  */
50
39
  imageLarge: {
51
40
  type: Object,
@@ -128,8 +117,6 @@ function clamp(value, min, max) {
128
117
  .zoom-container {
129
118
  display: block !important;
130
119
  overflow: hidden;
131
- max-width: 100rem;
132
- max-height: 50rem !important;
133
120
 
134
121
  > img {
135
122
  max-width: none;
@@ -362,10 +362,10 @@ export default {
362
362
  display: flex;
363
363
  background: none; /* overwrite framework-css */
364
364
  border: 0; /* overwrite framework-css */
365
- padding: 0 var(--default-padding);
366
365
 
367
366
  /* begin offcanvas-navigation */
368
367
  &:not(.persist-on-mobile) {
368
+ padding: 0;
369
369
  transition: var(--nav-transition);
370
370
 
371
371
  #toggle-offcanvas {
@@ -235,7 +235,7 @@ export default {
235
235
  }
236
236
  }
237
237
 
238
- @media only screen and (max-width: $small-max-width) {
238
+ @container (width < #{$small-max-width}) {
239
239
  .cmd-multistep-form-progress-bar {
240
240
  flex-direction: column;
241
241
 
@@ -166,7 +166,7 @@ export default {
166
166
  }
167
167
  }
168
168
 
169
- nav {
169
+ .cmd-main-navigation nav {
170
170
  padding: 0;
171
171
  }
172
172
 
@@ -224,6 +224,7 @@ export default {
224
224
 
225
225
  @media only screen and (max-width: $medium-max-width) {
226
226
  .cmd-site-header {
227
+ padding-top: calc(var(--default-padding) * 2);
227
228
  padding-bottom: calc(var(--default-padding) * 2);
228
229
 
229
230
  header {
@@ -235,8 +236,19 @@ export default {
235
236
  @media only screen and (max-width: $small-max-width) {
236
237
  .cmd-site-header {
237
238
  gap: calc(var(--default-gap) / 2);
239
+ padding-top: var(--default-padding);
238
240
  padding-bottom: var(--default-padding);
239
241
 
242
+ .top-header {
243
+ .cmd-list-of-links {
244
+ padding: 0;
245
+ }
246
+ }
247
+
248
+ header {
249
+ padding: 0 !important;
250
+ }
251
+
240
252
  .cmd-company-logo {
241
253
  margin: 0 auto;
242
254
 
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <a href="#"
3
3
  @click.prevent
4
- :class="['cmd-slide-button', 'button', slideButtonType]"
4
+ :class="['cmd-slide-button', 'button', 'keep-behavior-on-small-devices', slideButtonType]"
5
5
  :title="getDirection.tooltip">
6
6
  <!-- being CmdIcon -->
7
7
  <CmdIcon :iconClass="getDirection.iconClass || 'next'" />
@@ -66,6 +66,8 @@ export default {
66
66
 
67
67
  <style lang="scss">
68
68
  /* begin cmd-slide-button ---------------------------------------------------------------------------------------- */
69
+ @import '../assets/styles/variables';
70
+
69
71
  .cmd-slide-button {
70
72
  &.button {
71
73
  font-size: 2rem;
@@ -114,6 +116,12 @@ export default {
114
116
  top: auto;
115
117
  }
116
118
  }
119
+
120
+ @media only screen and (max-width: $small-max-width) {
121
+ &.button {
122
+ width: auto; /* overwrite button-behavior for small-devices from frontend-framework */
123
+ }
124
+ }
117
125
  }
118
126
 
119
127
  /* end cmd-slide-button ------------------------------------------------------------------------------------------ */
@@ -9,29 +9,31 @@
9
9
  <!-- end CmdSlideButton -->
10
10
 
11
11
  <!-- begin area to slide -->
12
- <transition name="fade">
13
- <template v-if="!useSlot">
14
- <a v-if="currentItem?.link?.href" :href="currentItem?.link?.href" :title="currentItem?.link?.tooltip" :key="index">
15
- <!-- begin CmdImage -->
16
- <CmdImage :image="currentItem?.image" :figcaption="currentItem?.figcaption" />
17
- <!-- begin CmdImage -->
18
- </a>
12
+ <transition-group name="fade">
13
+ <template v-if="currentItem">
14
+ <template v-if="!useSlot">
15
+ <a v-if="currentItem?.link?.href" :href="currentItem?.link?.href" :title="currentItem?.link?.tooltip" :key="index">
16
+ <!-- begin CmdImage -->
17
+ <CmdImage :image="currentItem?.image" :figcaption="currentItem?.figcaption"/>
18
+ <!-- begin CmdImage -->
19
+ </a>
19
20
 
20
- <!-- begin CmdImage -->
21
- <CmdImage v-else :image="currentItem?.image" :figcaption="currentItem?.figcaption" :key="index" />
22
- <!-- begin CmdImage -->
21
+ <!-- begin CmdImage -->
22
+ <CmdImage v-else :image="currentItem?.image" :figcaption="currentItem?.figcaption" :key="index"/>
23
+ <!-- begin CmdImage -->
24
+ </template>
25
+ <div
26
+ v-else
27
+ class="image-wrapper"
28
+ :key="index"
29
+ :style="'background-image: url(' + currentItem.image.srcLarge + ')'"
30
+ >
31
+ <!-- begin slot -->
32
+ <slot :name="'item' + currentSlotItem"></slot>
33
+ <!-- end slot -->
34
+ </div>
23
35
  </template>
24
- <div
25
- v-else
26
- class="image-wrapper"
27
- :key="index"
28
- :style="'background-image: url(' + currentItem.image.srcLarge + ')'"
29
- >
30
- <!-- begin slot -->
31
- <slot :name="'item' + currentSlotItem"></slot>
32
- <!-- end slot -->
33
- </div>
34
- </transition>
36
+ </transition-group>
35
37
  <!-- end area to slide -->
36
38
 
37
39
  <!-- begin CmdSlideButton -->
@@ -182,7 +184,7 @@ export default {
182
184
  /* computed property to get current slide */
183
185
  computed: {
184
186
  currentItem() {
185
- if(this.slideshowItems.length <= this.index) {
187
+ if (this.slideshowItems.length <= this.index) {
186
188
  return null
187
189
  }
188
190
  return this.slideshowItems[this.index]
@@ -201,8 +203,9 @@ export default {
201
203
  </script>
202
204
 
203
205
  <style lang="scss">
204
- @import '../assets/styles/variables';
205
206
  /* begin cmd-slideshow ---------------------------------------------------------------------------------------- */
207
+ @import '../assets/styles/variables';
208
+
206
209
  .cmd-slideshow {
207
210
  figure a, img {
208
211
  display: block;
@@ -226,6 +229,19 @@ export default {
226
229
  display: flex;
227
230
  justify-content: center;
228
231
 
232
+ > a:not(.button) {
233
+ text-decoration: none;
234
+
235
+ figcaption {
236
+ border: var(--primary-border);
237
+
238
+ &:hover, &:active, &:focus {
239
+ background: var(--pure-white);
240
+ color: var(--hyperlink-color);
241
+ }
242
+ }
243
+ }
244
+
229
245
  figure {
230
246
  width: 100%; /* important to stretch figure with position: absolute over full width */
231
247
  margin: 0;
@@ -17,22 +17,24 @@
17
17
  <!-- end CmdFormElement -->
18
18
 
19
19
  <!-- begin list of networks -->
20
- <ul :class="['flex-container no-flex', {'no-gap': useGap}]">
20
+ <ul :class="['button-wrapper no-flex', {'no-gap': !useGap}]">
21
21
  <li v-for="network in validNetworks">
22
22
  <a
23
- :key="network.path" :class="['button', {disabled: userMustAcceptDataPrivacy && !dataPrivacyAccepted}]"
23
+ :key="network.path"
24
+ :class="['button', {disabled: userMustAcceptDataPrivacy && !dataPrivacyAccepted}, {'text-align-right': textAlign === 'right'}]"
24
25
  :id="network.id"
25
26
  :href="getUrl(network)"
26
27
  @click="preventOnDisabled"
27
28
  target="_blank"
28
29
  :title="tooltip(network.tooltip)">
29
30
  <!-- begin CmdIcon -->
30
- <CmdIcon v-if="network.iconClass && network.iconPosition !== 'right'" :iconClass="network.iconClass" :type="network.iconType" />
31
+ <CmdIcon
32
+ v-if="network.iconClass"
33
+ :iconClass="network.iconClass"
34
+ :type="network.iconType"
35
+ />
31
36
  <!-- end CmdIcon -->
32
37
  <span v-if="network.linkText">{{ network.linkText }}</span>
33
- <!-- begin CmdIcon -->
34
- <CmdIcon v-if="network.iconClass && network.iconPosition === 'right'" :iconClass="network.iconClass" :type="network.iconType" />
35
- <!-- end CmdIcon -->
36
38
  </a>
37
39
  </li>
38
40
  </ul>
@@ -118,6 +120,10 @@ export default {
118
120
  type: String,
119
121
  default: "You must accept data privacy conditions!"
120
122
  },
123
+ textAlign: {
124
+ type: String,
125
+ default: "left"
126
+ },
121
127
  /**
122
128
  * properties for cmdFormElement
123
129
  *
@@ -179,10 +185,13 @@ export default {
179
185
  }
180
186
  },
181
187
  tooltip(tooltip) {
182
- if(this.userMustAcceptDataPrivacy && this.dataPrivacyAccepted) {
183
- return tooltip
188
+ if(this.userMustAcceptDataPrivacy) {
189
+ if(this.dataPrivacyAccepted) {
190
+ return tooltip
191
+ }
192
+ return this.tooltipAcceptDataPrivacy
184
193
  }
185
- return this.tooltipAcceptDataPrivacy
194
+ return tooltip
186
195
  }
187
196
  }
188
197
  }
@@ -196,11 +205,17 @@ export default {
196
205
  display: flex;
197
206
  flex-direction: column;
198
207
  gap: var(--default-gap);
208
+ container-type: inline-size;
199
209
 
200
210
  .cmd-headline {
201
211
  margin: 0;
202
212
  }
203
213
 
214
+ .button-wrapper {
215
+ flex-direction: row;
216
+ margin: 0;
217
+ }
218
+
204
219
  li {
205
220
  list-style-type: none;
206
221
  margin: 0;
@@ -220,10 +235,19 @@ export default {
220
235
 
221
236
  .button {
222
237
  padding: calc(var(--default-padding) / 2) var(--default-padding);
238
+ gap: calc(var(--default-gap) / 2);
239
+
240
+ span {
241
+ margin: 0;
242
+ }
223
243
 
224
244
  &:first-of-type {
225
245
  margin: 0;
226
246
  }
247
+
248
+ &.text-align-right {
249
+ flex-direction: row-reverse;
250
+ }
227
251
  }
228
252
 
229
253
  a:last-of-type {
@@ -289,10 +313,9 @@ export default {
289
313
  }
290
314
  }
291
315
 
292
- @media only screen and (max-width: $small-max-width) {
293
- .cmd-social-networks {
294
- justify-content: center;
295
-
316
+ @container (max-width: #{$small-max-width}) {
317
+ .button-wrapper {
318
+ border: 1px solid red;
296
319
  .button {
297
320
  flex: none;
298
321
  width: auto !important;
@@ -305,6 +328,5 @@ export default {
305
328
  }
306
329
  }
307
330
  }
308
-
309
331
  /* end cmd-social-networks ------------------------------------------------------------------------------------------ */
310
332
  </style>
@@ -142,7 +142,7 @@ export default {
142
142
 
143
143
  &.active {
144
144
  &:hover, &:active, &:focus {
145
- color: var(--hyperlink-color-highlighted);
145
+ color: var(--hyperlink-color);
146
146
  background: var(--pure-white);
147
147
 
148
148
  span, [class*="icon-"] {
@@ -29,10 +29,6 @@
29
29
  </template>
30
30
 
31
31
  <script>
32
- // import components
33
- import CmdImage from "./CmdImage.vue"
34
- import CmdSlideButton from "./CmdSlideButton.vue"
35
-
36
32
  // import functions
37
33
  import {openFancyBox} from './CmdFancyBox.vue'
38
34
 
@@ -42,10 +38,6 @@ import DefaultMessageProperties from "../mixins/CmdThumbnailScroller/DefaultMess
42
38
 
43
39
  export default {
44
40
  name: "CmdThumbnailScroller",
45
- components: {
46
- CmdImage,
47
- CmdSlideButton
48
- },
49
41
  mixins: [
50
42
  I18n,
51
43
  DefaultMessageProperties