comand-component-library 4.0.0 → 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 (31) hide show
  1. package/dist/comand-component-library.js +1670 -1603
  2. package/dist/comand-component-library.umd.cjs +4 -4
  3. package/dist/style.css +1 -1
  4. package/package.json +2 -2
  5. package/src/{App.vue → ComponentLibrary.vue} +875 -413
  6. package/src/assets/data/main-navigation.json +2 -0
  7. package/src/components/CmdAddressData.vue +1 -1
  8. package/src/components/CmdBox.vue +40 -4
  9. package/src/components/CmdBoxWrapper.vue +15 -5
  10. package/src/components/CmdFormElement.vue +37 -33
  11. package/src/components/CmdHeadline.vue +97 -33
  12. package/src/components/CmdInputGroup.vue +6 -5
  13. package/src/components/CmdListOfLinks.vue +24 -24
  14. package/src/components/CmdLoginForm.vue +1 -0
  15. package/src/components/CmdMainNavigation.vue +20 -9
  16. package/src/components/CmdMultistepFormProgressBar.vue +43 -1
  17. package/src/components/CmdNewsletterSubscription.vue +7 -7
  18. package/src/components/CmdOpeningHours.vue +33 -18
  19. package/src/components/CmdOpeningHoursItem.vue +21 -13
  20. package/src/components/CmdPagination.vue +2 -2
  21. package/src/components/CmdSidebar.vue +6 -1
  22. package/src/components/CmdSiteHeader.vue +2 -0
  23. package/src/components/CmdSiteSearch.vue +12 -11
  24. package/src/components/CmdSystemMessage.vue +1 -0
  25. package/src/components/CmdTable.vue +9 -1
  26. package/src/components/CmdTextImageBlock.vue +2 -0
  27. package/src/components/CmdThumbnailScroller.vue +52 -32
  28. package/src/components/CmdTooltip.vue +5 -0
  29. package/src/components/CmdUploadForm.vue +67 -41
  30. package/src/components/ComponentSettings.vue +171 -0
  31. package/src/main.js +3 -3
@@ -1,5 +1,7 @@
1
1
  {
2
2
  "offcanvasPosition": "right",
3
+ "stretchMainItems": false,
4
+ "persistOnMobile": false,
3
5
  "navigationEntries": [
4
6
  {
5
7
  "type": "href",
@@ -16,7 +16,7 @@
16
16
  <!-- begin address-data in vCard microformat -->
17
17
  <address class="adr">
18
18
  <!-- begin list with labels -->
19
- <template v-if="showLabels && !showIconsOnly">
19
+ <template v-if="showLabels && (showLabelTexts|| showLabelIcons) && !showIconsOnly">
20
20
  <!-- begin default view -->
21
21
  <dl v-if="!editModeContext">
22
22
  <!-- begin cmd-address-data-item -->
@@ -56,8 +56,8 @@
56
56
  <!-- end default header with slot -->
57
57
 
58
58
  <!-- begin box-body -->
59
- <div v-show="open" class="box-body" aria-expanded="true" role="article">
60
- <div v-if="useSlots?.includes('body')" :class="{'default-padding': useDefaultPadding}">
59
+ <div v-show="open" :class="['box-body', boxBodyClass]" aria-expanded="true" role="article">
60
+ <div v-if="useSlots?.includes('body')" :class="{'default-padding': useDefaultPadding, 'allow-scroll': allowContentToScroll}" :style="setMaxBoxBodyHeight">
61
61
  <!-- begin slot 'body' -->
62
62
  <slot name="body">
63
63
  <transition-group :name="toggleTransition">
@@ -79,7 +79,7 @@
79
79
  <template v-else>
80
80
  <img v-if="image" :src="image.src" :alt="image.altText"/>
81
81
 
82
- <div :class="{'default-padding': useDefaultPadding}">
82
+ <div :class="{'default-padding': useDefaultPadding, 'allow-scroll': allowContentToScroll}">
83
83
  <!-- begin CmdHeadline -->
84
84
  <CmdHeadline
85
85
  v-if="cmdHeadline?.headlineText && repeatHeadlineInBoxBody"
@@ -219,6 +219,22 @@ export default {
219
219
  type: String,
220
220
  default: "content"
221
221
  },
222
+ /**
223
+ * set if content (in box-body) should scroll
224
+ *
225
+ * (maxBoxBodyHeight must be set)
226
+ */
227
+ allowContentToScroll: {
228
+ type: Boolean,
229
+ default: false
230
+ },
231
+ /**
232
+ * set max-height for body (should only be used it allowContentToScroll-property is active)
233
+ */
234
+ maxBoxBodyHeight: {
235
+ type: String,
236
+ default: "10rem"
237
+ },
222
238
  /**
223
239
  * activate if box should be collapsible
224
240
  */
@@ -261,12 +277,19 @@ export default {
261
277
  /**
262
278
  * use transition to expand and collapse box-body
263
279
  *
264
- * boyType must be 'content' and 'collapsible' must be activated
280
+ * 'boyType-property' must be set to 'content' and 'collapsible-property' must be activated
265
281
  */
266
282
  useTransition: {
267
283
  type: Boolean,
268
284
  default: true
269
285
  },
286
+ /**
287
+ * custom class placed on box-body-container
288
+ */
289
+ boxBodyClass: {
290
+ type: String,
291
+ required: false
292
+ },
270
293
  /**
271
294
  * set default profile-icon (will eb shown if no user-image exists)
272
295
  */
@@ -383,6 +406,12 @@ export default {
383
406
  }
384
407
  },
385
408
  computed: {
409
+ setMaxBoxBodyHeight() {
410
+ if (this.allowContentToScroll && this.maxBoxBodyHeight) {
411
+ return this.maxBoxBodyHeight
412
+ }
413
+ return null
414
+ },
386
415
  toggleTransition() {
387
416
  if (this.useTransition) {
388
417
  return "fade"
@@ -456,6 +485,13 @@ export default {
456
485
  }
457
486
  }
458
487
 
488
+ .box-body {
489
+ .allow-scroll {
490
+ overflow-y: auto;
491
+ /*max-height: '${this.maxBoxBodyHeight}'*/
492
+ }
493
+ }
494
+
459
495
  /* boyType === 'content' */
460
496
  &.content {
461
497
  > * {
@@ -1,7 +1,6 @@
1
1
  <template>
2
2
  <div class="cmd-box-wrapper">
3
- <div v-if="cmdHeadline.headlineText || allowUserToToggleOrientation || allowTogglingCollapsingBoxes"
4
- class="flex-container headline-wrapper">
3
+ <div v-if="cmdHeadline.headlineText || allowUserToToggleOrientation || allowTogglingCollapsingBoxes" class="flex-container headline-wrapper">
5
4
  <!-- begin CmdHeadline -->
6
5
  <CmdHeadline v-if="cmdHeadline.headlineText" v-bind="cmdHeadline" />
7
6
  <!-- end CmdHeadline -->
@@ -12,14 +11,14 @@
12
11
  <CmdIcon :iconClass="collapsingBoxesOpen ? expandBoxesIcon.iconClass : collapseBoxesIcon.iconClass" :type="rowView ? iconGridView.iconType : iconRowView.iconType" />
13
12
  <!-- end CmdIcon -->
14
13
  </a>
15
- <a v-if="allowUserToToggleOrientation" href="#" @click.prevent="rowView = !rowView" :title="rowView ? iconRowView.tooltip : iconGridView.tooltip">
14
+ <a v-if="allowUserToToggleOrientation" href="#" @click.prevent="toggleOrientation" :title="rowView ? iconRowView.tooltip : iconGridView.tooltip">
16
15
  <!-- begin CmdIcon -->
17
16
  <CmdIcon :iconClass="rowView ? iconGridView.iconClass : iconRowView.iconClass" :type="rowView ? iconGridView.iconType : iconRowView.iconType" />
18
17
  <!-- end CmdIcon -->
19
18
  </a>
20
19
  </div>
21
20
  </div>
22
- <div :class="[
21
+ <div :class="['inner-box-wrapper',
23
22
  useFlexbox ? 'flex-container' : 'grid-container-create-columns',
24
23
  {
25
24
  'no-gap': !useGap,
@@ -46,7 +45,8 @@ export default {
46
45
  return {
47
46
  rowView: this.useRowViewAsDefault,
48
47
  collapsingBoxesOpen: true,
49
- currentOpenBox: []
48
+ currentOpenBox: [],
49
+ oneBoxPerRow: false
50
50
  }
51
51
  },
52
52
  props: {
@@ -198,6 +198,10 @@ export default {
198
198
  }
199
199
  },
200
200
  methods: {
201
+ toggleOrientation() {
202
+ this.rowView = !this.rowView
203
+ this.oneBoxPerRow = this.rowView
204
+ },
201
205
  boxIsOpen(index) {
202
206
  return this.currentOpenBox.includes(index)
203
207
  },
@@ -296,6 +300,12 @@ export default {
296
300
  }
297
301
  }
298
302
 
303
+ .inner-box-wrapper > *{
304
+ flex: none;
305
+ flex-grow: 1;
306
+ flex-basis: min-content;
307
+ }
308
+
299
309
  .row-view {
300
310
  flex-direction: column;
301
311
 
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <label
3
- v-if="(element === 'input' || element === 'select' || element === 'textarea')"
4
- :class="[
3
+ v-if="(element === 'input' || element === 'select' || element === 'textarea')"
4
+ :class="[
5
5
  'cmd-form-element',
6
6
  validationStatus,
7
7
  $attrs.class,
@@ -13,9 +13,9 @@
13
13
  'has-state': validationStatus
14
14
  }
15
15
  ]"
16
- :for="htmlId"
17
- :title="$attrs.title"
18
- ref="label">
16
+ :for="htmlId"
17
+ :title="$attrs.title"
18
+ ref="label">
19
19
 
20
20
  <!-- begin label-text (+ required asterisk) -->
21
21
  <span v-if="(labelText || $slots.labeltext) && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
@@ -23,7 +23,7 @@
23
23
  <span>
24
24
  <template v-if="labelText">{{ labelText }}</template>
25
25
  <!-- begin slot 'labeltext' -->
26
- <slot v-else name="labeltext" />
26
+ <slot v-else name="labeltext"/>
27
27
  <!-- end slot 'labeltext' -->
28
28
  <sup v-if="$attrs.required" aria-hidden="true">*</sup>
29
29
  </span>
@@ -41,14 +41,14 @@
41
41
  <!-- end CmdTooltipForInputElements -->
42
42
 
43
43
  <a v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
44
- href="#"
45
- @click.prevent
46
- :title="validationTooltip"
47
- :aria-errormessage="tooltipId"
48
- aria-live="assertive"
49
- :id="tooltipId">
44
+ href="#"
45
+ @click.prevent
46
+ :title="validationTooltip"
47
+ :aria-errormessage="tooltipId"
48
+ aria-live="assertive"
49
+ :id="tooltipId">
50
50
  <!-- begin CmdIcon -->
51
- <CmdIcon :iconClass="getStatusIconClass" />
51
+ <CmdIcon :iconClass="getStatusIconClass"/>
52
52
  <!-- end CmdIcon -->
53
53
  </a>
54
54
  </span>
@@ -92,8 +92,8 @@
92
92
  :title="iconPasswordVisible.tooltip"
93
93
  >
94
94
  <!-- begin CmdIcon -->
95
- <CmdIcon :iconClass="iconPasswordVisible.iconClass" />
96
- <!-- end CmdIcon -->
95
+ <CmdIcon :iconClass="iconPasswordVisible.iconClass"/>
96
+ <!-- end CmdIcon -->
97
97
  </a>
98
98
  <!-- end show-password-icon -->
99
99
  </span>
@@ -124,7 +124,7 @@
124
124
  <span>
125
125
  <template v-if="labelText">{{ labelText }}</template>
126
126
  <!-- begin slot 'labeltext' -->
127
- <slot v-else name="labeltext" />
127
+ <slot v-else name="labeltext"/>
128
128
  <!-- end slot 'labeltext' -->
129
129
  <sup v-if="$attrs.required">*</sup>
130
130
  </span>
@@ -134,15 +134,16 @@
134
134
  <!-- begin labels for toggle-switch with switch-label -->
135
135
  <template v-else-if="onLabel && offLabel">
136
136
  <span class="switch-label-wrapper">
137
- <input v-bind="elementAttributes"
138
- @change="onChange"
139
- @blur="onBlur"
140
- :checked="isChecked"
141
- :value="inputValue"
142
- :class="{inputClass, validationStatus}"
143
- :id="htmlId"
144
- :disabled="$attrs.disabled"
145
- :aria-invalid="validationStatus === 'error'"
137
+ <input
138
+ v-bind="elementAttributes"
139
+ @change="onChange"
140
+ @blur="onBlur"
141
+ :checked="isChecked"
142
+ :value="inputValue"
143
+ :class="{inputClass, validationStatus}"
144
+ :id="htmlId"
145
+ :disabled="$attrs.disabled"
146
+ :aria-invalid="validationStatus === 'error'"
146
147
  />
147
148
  <span class="label-text">{{ onLabel }}</span>
148
149
  <span class="label-text">{{ offLabel }}</span>
@@ -194,14 +195,16 @@
194
195
  :maxlength="getMaxLength()"
195
196
  :value="modelValue"
196
197
  />
197
- <a v-if="showSearchButton" href="#" :class="['button no-flex', {disabled: $attrs.disabled}]" :title="iconSearch.tooltip" @click.prevent="executeSearch">
198
+ <a v-if="showSearchButton" href="#" :class="['button no-flex', {disabled: $attrs.disabled}]"
199
+ :title="iconSearch.tooltip" @click.prevent="executeSearch">
198
200
  <!-- begin CmdIcon -->
199
- <CmdIcon :iconClass="iconSearch.iconClass" />
201
+ <CmdIcon :iconClass="iconSearch.iconClass"/>
200
202
  <!-- end CmdIcon -->
201
203
  </a>
202
- <a v-if="iconDelete?.show" href="#" @click.prevent="$emit('update:modelValue', '')" :title="iconDelete?.tooltip">
204
+ <a v-if="iconDelete?.show" href="#" @click.prevent="$emit('update:modelValue', '')"
205
+ :title="iconDelete?.tooltip">
203
206
  <!-- begin CmdIcon -->
204
- <CmdIcon :iconClass="iconDelete?.iconClass" :type="iconDelete?.iconType" />
207
+ <CmdIcon :iconClass="iconDelete?.iconClass" :type="iconDelete?.iconType"/>
205
208
  <!-- end CmdIcon -->
206
209
  </a>
207
210
  </span>
@@ -707,8 +710,8 @@ export default {
707
710
  },
708
711
  // toggle icons for toggle-switch
709
712
  toggleSwitchIconClass() {
710
- if(this.toggleSwitch && this.useIconsForToggleSwitch && this.toggleSwitchUncheckedIconClass && this.toggleSwitchCheckedIconClass) {
711
- if(this.isChecked) {
713
+ if (this.toggleSwitch && this.useIconsForToggleSwitch && this.toggleSwitchUncheckedIconClass && this.toggleSwitchCheckedIconClass) {
714
+ if (this.isChecked) {
712
715
  return this.toggleSwitchCheckedIconClass
713
716
  }
714
717
  return this.toggleSwitchUncheckedIconClass
@@ -720,7 +723,7 @@ export default {
720
723
  additionalStandardRequirements() {
721
724
  const requirements = []
722
725
  // check if field is type "email"
723
- if(this.$attrs.type === "email") {
726
+ if (this.$attrs.type === "email") {
724
727
  requirements.push({
725
728
  message: this.getMessage("cmdformelement.validationTooltip.is_valid_email"),
726
729
  valid: () => this.$refs.input.checkValidity()
@@ -823,7 +826,7 @@ export default {
823
826
  },
824
827
  closeTooltipOnBlur() {
825
828
  // close tooltip by calling function from CmdTooltipForInputElements using $refs
826
- if(this.$refs.tooltip) {
829
+ if (this.$refs.tooltip) {
827
830
  this.$refs.tooltip.hideTooltip()
828
831
  }
829
832
  },
@@ -944,5 +947,6 @@ export default {
944
947
  }
945
948
  }
946
949
  }
950
+
947
951
  /* end cmd-form-element------------------------------------------------------------------------------------------ */
948
952
  </style>
@@ -1,22 +1,35 @@
1
1
  <template>
2
2
  <div v-if="!editModeContext || settingsContext || mainSidebarContext"
3
3
  :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': headlineIcon?.iconClass}, getTextAlign]">
4
- <!-- begin CmdIcon -->
5
- <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType" />
6
- <!-- end CmdIcon -->
7
4
 
8
- <div v-if="preHeadlineText">
9
- <span class="pre-headline-text">{{ preHeadlineText }}</span>
5
+ <template v-if="preHeadlineText">
10
6
  <component v-if="headlineText" :is="headlineTag">
11
- <!-- being slot -->
12
- <slot>{{ headlineText }}</slot>
13
- <!-- end slot -->
7
+ <!-- begin CmdIcon -->
8
+ <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
9
+ <!-- end CmdIcon -->
10
+
11
+ <span class="pre-headline-text-wrapper">
12
+ <!-- begin pre-headline-text -->
13
+ <span class="pre-headline-text">{{ preHeadlineText }}</span>
14
+ <!-- end pre-headline-text -->
15
+
16
+ <span>
17
+ <!-- being slot -->
18
+ <slot>{{ headlineText }}</slot>
19
+ <!-- end slot -->
20
+ </span>
21
+ </span>
14
22
  </component>
15
- </div>
23
+ </template>
16
24
  <component v-else-if="headlineText" :is="headlineTag">
25
+ <!-- begin CmdIcon -->
26
+ <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
27
+ <!-- end CmdIcon -->
28
+ <span>
17
29
  <!-- being slot -->
18
30
  <slot>{{ headlineText }}</slot>
19
- <!-- end slot -->
31
+ <!-- end slot -->
32
+ </span>
20
33
  </component>
21
34
  </div>
22
35
  <!-- begin edit-mode -->
@@ -42,26 +55,33 @@
42
55
  placeholder="Headline"
43
56
  v-model="editableHeadlineText"
44
57
  />
45
- <div v-else-if="headlineText"
58
+ <template v-else-if="headlineText"
46
59
  :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': headlineIcon?.iconClass}, getTextAlign]">
47
60
  <!-- begin CmdIcon -->
48
61
  <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
49
62
  <!-- end CmdIcon -->
50
63
 
51
- <div v-if="preHeadlineText">
52
- <span class="pre-headline-text">{{ preHeadlineText }}</span>
64
+ <template v-if="preHeadlineText">
53
65
  <component v-if="headlineText" :is="headlineTag">
66
+ <!-- begin CmdIcon -->
67
+ <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
68
+ <!-- end CmdIcon -->
69
+
70
+ <!-- begin pre-headline-text -->
71
+ <span class="pre-headline-text">{{ preHeadlineText }}</span>
72
+ <!-- end pre-headline-text -->
73
+
54
74
  <!-- being slot -->
55
75
  <slot>{{ headlineText }}</slot>
56
76
  <!-- end slot -->
57
77
  </component>
58
- </div>
78
+ </template>
59
79
  <component v-else-if="headlineText" :is="headlineTag">
60
80
  <!-- being slot -->
61
81
  <slot>{{ headlineText }}</slot>
62
82
  <!-- end slot -->
63
83
  </component>
64
- </div>
84
+ </template>
65
85
  <!-- begin show placeholder if no image exists (and component is not edited) -->
66
86
  <button v-else-if="componentActive" type="button" class="button confirm" @click="onAddItem">
67
87
  <span class="icon-plus"></span>
@@ -116,7 +136,7 @@ export default {
116
136
  required: false
117
137
  },
118
138
  /**
119
- * text-alignment
139
+ * text-alignment (has no effect if icon is used)
120
140
  *
121
141
  * @allowedValues: "left", "center", "right"
122
142
  */
@@ -133,13 +153,13 @@ export default {
133
153
  return this.componentPath || ["props", "cmdHeadline"]
134
154
  },
135
155
  headlineTag() {
136
- if(this.headlineLevel) {
156
+ if (this.headlineLevel) {
137
157
  return "h" + this.headlineLevel
138
158
  }
139
159
  return ""
140
160
  },
141
161
  getTextAlign() {
142
- if(this.textAlign) {
162
+ if (this.textAlign) {
143
163
  return "text-" + this.textAlign
144
164
  }
145
165
  return ""
@@ -162,7 +182,7 @@ export default {
162
182
  onAddItem() {
163
183
  // execute editComponent-function from editComponentWrapper to enter editMode directly on "add"
164
184
  this.$refs.editComponentWrapper.editComponent()
165
- }
185
+ }
166
186
  },
167
187
  watch: {
168
188
  headlineText: {
@@ -197,18 +217,32 @@ export default {
197
217
 
198
218
  &.has-pre-headline-text {
199
219
  text-align: inherit;
200
- }
201
220
 
202
- p {
203
- margin-bottom: 0;
204
- }
221
+ > *:first-child {
222
+ display: flex;
223
+ align-items: flex-start;
205
224
 
206
- &:has(span[class*="icon"]) {
207
- display: flex;
208
- align-items: center;
209
- }
225
+ span[class*="icon"] {
226
+ bottom: .2rem;
227
+ }
228
+ }
229
+
230
+ &.text-center {
231
+ > *:first-child {
232
+ justify-content: center;
233
+ }
234
+ }
235
+
236
+ &.text-right {
237
+ > *:first-child {
238
+ justify-content: flex-end;
239
+ }
240
+ }
241
+
242
+ &.text-right > * {
243
+ text-align: right;
244
+ }
210
245
 
211
- &.has-pre-headline-text {
212
246
  &:has(h1) span[class*="icon"] {
213
247
  font-size: calc(var(--headline-font-size-h1) * 1.6);
214
248
  }
@@ -232,14 +266,43 @@ export default {
232
266
  &:has(h6) span[class*="icon"] {
233
267
  font-size: calc(var(--headline-font-size-h6) * 2.2);
234
268
  }
235
- }
236
269
 
237
- &:has(h4, h5, h6) .pre-headline-text {
238
- font-size: var(--font-size-small);
270
+ .pre-headline-text-wrapper {
271
+ display: flex;
272
+ flex-direction: column;
273
+ }
274
+
275
+ .pre-headline-text {
276
+ font-size: var(--default-font-size);
277
+ font-weight: var(--font-weight-normal);
278
+ line-height: 1;
279
+ }
280
+
281
+ &:has(h4, h5, h6) .pre-headline-text {
282
+ font-size: var(--font-size-small);
283
+ }
284
+
285
+ &.has-icon {
286
+ &.text-center {
287
+ justify-content: center;
288
+
289
+ * {
290
+ text-align: left;
291
+ }
292
+ }
293
+
294
+ &.text-right {
295
+ justify-content: flex-end;
296
+
297
+ * {
298
+ text-align: left;
299
+ }
300
+ }
301
+ }
239
302
  }
240
303
 
241
- .pre-headline-text {
242
- line-height: 1;
304
+ p {
305
+ margin-bottom: 0;
243
306
  }
244
307
 
245
308
  h1, h2, h3, h4, h5, h6 {
@@ -284,5 +347,6 @@ export default {
284
347
  font-size: var(--headline-font-size-h6);
285
348
  }
286
349
  }
350
+
287
351
  /* end cmd-headline ------------------------------------------------------------------------------------------ */
288
352
  </style>
@@ -37,8 +37,8 @@
37
37
  aria-live="assertive"
38
38
  :id="tooltipId">
39
39
  <!-- begin CmdIcon -->
40
- <CmdIcon :iconClass="getStatusIconClass" />
41
- <!-- end CmdIcon -->
40
+ <CmdIcon :iconClass="getStatusIconClass"/>
41
+ <!-- end CmdIcon -->
42
42
  </a>
43
43
  </span>
44
44
  <span v-if="!useSlot" :class="['flex-container', {'no-flex': !stretchHorizontally, 'no-gap': multipleSwitch}]">
@@ -53,7 +53,8 @@
53
53
  :class="{'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch}"
54
54
  />
55
55
  <!-- begin CmdIcon -->
56
- <CmdIcon v-if="multipleSwitch && inputElement.iconClass" :iconClass="inputElement.iconClass" :type="inputElement.iconType" />
56
+ <CmdIcon v-if="multipleSwitch && inputElement.iconClass" :iconClass="inputElement.iconClass"
57
+ :type="inputElement.iconType"/>
57
58
  <!-- end CmdIcon -->
58
59
  <span v-if="inputElement.labelText">{{ inputElement.labelText }}</span>
59
60
  </label>
@@ -213,11 +214,11 @@ export default {
213
214
  methods: {
214
215
  updateStatus() {
215
216
  if (this.required) {
216
- if(this.inputValue?.length) {
217
+ if (this.inputValue?.length) {
217
218
  this.validationStatus = ""
218
219
  return
219
220
  }
220
- this.validationStatus = "error"
221
+ this.validationStatus = "error"
221
222
  return
222
223
  }
223
224
  this.validationStatus = this.status
@@ -57,20 +57,20 @@ export default {
57
57
  mixins: [EditMode],
58
58
  props: {
59
59
  /**
60
- * activate if component should contain a list of anchors for the section within the page
60
+ * toggle gab between links
61
61
  */
62
- sectionAnchors: {
62
+ useGap: {
63
63
  type: Boolean,
64
- default: false
64
+ default: true
65
65
  },
66
66
  /**
67
- * given active section from outside to set class for styling
67
+ * style component like a box
68
68
  *
69
- * sectionAnchors-property must be activated
69
+ * @affectsStyling: true
70
70
  */
71
- activeSection: {
72
- type: Number,
73
- default: 0
71
+ styleAsBox: {
72
+ type: Boolean,
73
+ default: false
74
74
  },
75
75
  /**
76
76
  * activate if large icons should be displayed above link text
@@ -81,6 +81,22 @@ export default {
81
81
  type: Boolean,
82
82
  default: false
83
83
  },
84
+ /**
85
+ * activate if component should contain a list of anchors for the section within the page
86
+ */
87
+ sectionAnchors: {
88
+ type: Boolean,
89
+ default: false
90
+ },
91
+ /**
92
+ * given active section from outside to set class for styling
93
+ *
94
+ * sectionAnchors-property must be activated
95
+ */
96
+ activeSection: {
97
+ type: Number,
98
+ default: 0
99
+ },
84
100
  /**
85
101
  * set horizontal alignment
86
102
  *
@@ -114,22 +130,6 @@ export default {
114
130
  orientation: {
115
131
  type: String,
116
132
  default: "vertical"
117
- },
118
- /**
119
- * toggle gab between links
120
- */
121
- useGap: {
122
- type: Boolean,
123
- default: true
124
- },
125
- /**
126
- * style component like a box
127
- *
128
- * @affectsStyling: true
129
- */
130
- styleAsBox: {
131
- type: Boolean,
132
- default: false
133
133
  }
134
134
  },
135
135
  computed: {
@@ -119,6 +119,7 @@
119
119
 
120
120
  <!-- begin CmdFormElement -->
121
121
  <CmdFormElement
122
+ ref="sendPassword"
122
123
  element="input"
123
124
  type="email"
124
125
  :fieldIconClass="cmdFormElementSendLogin.innerIconClass"