comand-component-library 4.0.2 → 4.0.3

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 (50) hide show
  1. package/README.md +32 -32
  2. package/dist/comand-component-library.js +3264 -1450
  3. package/dist/comand-component-library.umd.cjs +3 -4
  4. package/dist/index.html +16 -16
  5. package/dist/style.css +1 -1
  6. package/dist/styles/demopage-only.css +4 -0
  7. package/dist/styles/templates/casual.css +3 -0
  8. package/package.json +4 -4
  9. package/src/App.vue +2117 -0
  10. package/src/ComponentLibrary.vue +150 -586
  11. package/src/assets/data/fake-select-options.json +3 -2
  12. package/src/assets/data/form-elements.json +1 -1
  13. package/src/assets/styles/global-styles.scss +17 -4
  14. package/src/componentSettingsDataAndControls.vue +705 -0
  15. package/src/components/CmdAddressData.vue +1 -2
  16. package/src/components/CmdBox.vue +60 -42
  17. package/src/components/CmdCopyrightInformation.vue +5 -3
  18. package/src/components/CmdFakeSelect.vue +138 -67
  19. package/src/components/CmdFancyBox.vue +2 -2
  20. package/src/components/CmdFormElement.vue +53 -27
  21. package/src/components/CmdGoogleMaps.vue +5 -0
  22. package/src/components/CmdHeadline.vue +13 -5
  23. package/src/components/CmdIcon.vue +6 -2
  24. package/src/components/CmdImage.vue +6 -1
  25. package/src/components/CmdImageGallery.vue +15 -4
  26. package/src/components/CmdInputGroup.vue +76 -24
  27. package/src/components/CmdListOfLinks.vue +20 -7
  28. package/src/components/CmdListOfRequirements.vue +10 -18
  29. package/src/components/CmdLoginForm.vue +14 -2
  30. package/src/components/CmdMainNavigation.vue +5 -1
  31. package/src/components/CmdMultistepFormProgressBar.vue +12 -7
  32. package/src/components/CmdOpeningHoursItem.vue +1 -3
  33. package/src/components/CmdPagination.vue +5 -1
  34. package/src/components/CmdSiteFooter.vue +11 -1
  35. package/src/components/CmdSiteHeader.vue +1 -0
  36. package/src/components/CmdSlideButton.vue +7 -1
  37. package/src/components/CmdSlideshow.vue +33 -5
  38. package/src/components/CmdSocialNetworks.vue +18 -13
  39. package/src/components/CmdSocialNetworksItem.vue +5 -1
  40. package/src/components/CmdSystemMessage.vue +7 -1
  41. package/src/components/CmdTabs.vue +5 -5
  42. package/src/components/CmdTextImageBlock.vue +11 -2
  43. package/src/components/CmdThumbnailScroller.vue +22 -4
  44. package/src/components/CmdTooltip.vue +49 -14
  45. package/src/components/CmdTooltipForFormElements.vue +96 -0
  46. package/src/components/CmdUploadForm.vue +25 -20
  47. package/src/components/CmdWidthLimitationWrapper.vue +1 -1
  48. package/src/components/ComponentSettings.vue +1 -1
  49. package/src/main.js +1 -1
  50. package/src/assets/data/accordion.json +0 -45
@@ -20,8 +20,8 @@
20
20
  <span class="label-text">
21
21
  <span :id="htmlId">{{ labelText }}<sup v-if="$attrs.required !== undefined">*</sup></span>
22
22
 
23
- <!-- begin CmdTooltipForInputElements -->
24
- <CmdTooltipForInputElements
23
+ <!-- begin CmdTooltipForFormElements -->
24
+ <CmdTooltipForFormElements
25
25
  v-if="useCustomTooltip && (validationStatus === '' || validationStatus === 'error')"
26
26
  ref="tooltip"
27
27
  :validationStatus="validationStatus"
@@ -30,9 +30,9 @@
30
30
  :cmdListOfRequirements="listOfRequirements"
31
31
  :role="validationStatus === 'error' ? 'alert' : 'dialog'"
32
32
  />
33
- <!-- end CmdTooltipForInputElements -->
33
+ <!-- end CmdTooltipForFormElements -->
34
34
 
35
- <a v-if="$attrs.required || inputRequirements.length"
35
+ <a v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
36
36
  href="#"
37
37
  @click.prevent
38
38
  :title="!useCustomTooltip ? getValidationMessage : ''"
@@ -40,8 +40,8 @@
40
40
  aria-live="assertive"
41
41
  :id="tooltipId">
42
42
  <!-- begin CmdIcon -->
43
- <CmdIcon :iconClass="getStatusIconClass" />
44
- <!-- end CmdIcon -->
43
+ <CmdIcon :iconClass="getStatusIconClass"/>
44
+ <!-- end CmdIcon -->
45
45
  </a>
46
46
  </span>
47
47
  <!-- end label -->
@@ -51,7 +51,8 @@
51
51
  <!-- begin default/selected-option -->
52
52
  <a href="#" @click.prevent="toggleOptions" @blur="onBlur" :title="optionIcon?.tooltip">
53
53
  <!-- begin show flag -->
54
- <img v-if="type === 'country' && optionCountry" :src="pathFlag(optionCountry)" :alt="optionCountry" :class="['flag', optionCountry]"/>
54
+ <img v-if="type === 'country' && optionCountry" :src="pathFlag(optionCountry)" :alt="optionCountry"
55
+ :class="['flag', optionCountry]"/>
55
56
  <!-- end show flag -->
56
57
 
57
58
  <!-- begin show color-box -->
@@ -60,7 +61,8 @@
60
61
 
61
62
  <!-- begin optional icon -->
62
63
  <!-- begin CmdIcon -->
63
- <CmdIcon v-if="optionIcon?.iconClass" :type="optionIcon?.iconType" :iconClass="optionIcon?.iconClass" />
64
+ <CmdIcon v-if="optionIcon?.iconClass" :type="optionIcon?.iconType"
65
+ :iconClass="optionIcon?.iconClass"/>
64
66
  <!-- end CmdIcon -->
65
67
  <!-- end optional icon -->
66
68
 
@@ -83,7 +85,8 @@
83
85
 
84
86
  <!-- begin default dropdown (incl. optional icon) -->
85
87
  <ul v-if="type === 'default' && showOptions" role="listbox">
86
- <li v-for="(option, index) in selectData" :key="index" role="option" :aria-selected="option.value === modelValue">
88
+ <li v-for="(option, index) in selectData" :key="index" role="option"
89
+ :aria-selected="option.value === modelValue">
87
90
  <!-- begin type 'href' -->
88
91
  <a v-if="optionLinkType === 'href'"
89
92
  href="#" @click.prevent="selectOption(option.value)"
@@ -91,16 +94,18 @@
91
94
  :title="option.tooltip"
92
95
  >
93
96
  <!-- begin CmdIcon -->
94
- <CmdIcon v-if="option.iconClass" :iconClass="option.iconClass" :type="option.iconType" />
97
+ <CmdIcon v-if="option.iconClass" :iconClass="option.iconClass" :type="option.iconType"/>
95
98
  <!-- end CmdIcon -->
96
99
  <span v-if="option.text">{{ option.text }}</span>
97
100
  </a>
98
101
  <!-- end type 'href' -->
99
102
 
100
103
  <!-- begin type 'router' -->
101
- <router-link v-if="optionLinkType === 'router'" to="#" @click.prevent="selectOption(option.value)" :class="{'active' : option.value === modelValue}">
104
+ <router-link v-if="optionLinkType === 'router'" to="#"
105
+ @click.prevent="selectOption(option.value)"
106
+ :class="{'active' : option.value === modelValue}">
102
107
  <!-- begin CmdIcon -->
103
- <CmdIcon v-if="option.iconClass" :iconClass="option.iconClass" :type="option.iconType" />
108
+ <CmdIcon v-if="option.iconClass" :iconClass="option.iconClass" :type="option.iconType"/>
104
109
  <!-- end CmdIcon -->
105
110
  <span>{{ option.text }}</span>
106
111
  </router-link>
@@ -110,10 +115,12 @@
110
115
  <!-- end default dropdown (incl. optional icon) -->
111
116
 
112
117
  <!-- begin dropdown with checkboxes/countries/colors -->
113
- <ul v-else-if="type !== 'default' && type !== 'content' && showOptions" :class="{'checkbox-options': type === 'checkboxOptions'}" :aria-expanded="showOptions">
118
+ <ul v-else-if="type !== 'default' && type !== 'content' && showOptions"
119
+ :class="{'checkbox-options': type === 'checkboxOptions'}" :aria-expanded="showOptions">
114
120
  <li v-for="(option, index) in selectData" :key="index">
115
121
  <!-- begin checkboxes -->
116
- <label v-if="type === 'checkboxOptions'" :for="'option-' + (index + 1)" :class="{'active' : modelValue.includes(`${option.value}`)}">
122
+ <label v-if="type === 'checkboxOptions'" :for="'option-' + (index + 1)"
123
+ :class="{'active' : modelValue.includes(`${option.value}`)}">
117
124
  <input type="checkbox" :value="option.value" @change="optionSelect"
118
125
  :checked="compareValues(option.value)" :id="'option-' + (index + 1)"/>
119
126
  <span>{{ option.text }}</span>
@@ -122,7 +129,8 @@
122
129
 
123
130
  <!-- begin country-flags -->
124
131
  <a v-else-if="type === 'country'" href="#"
125
- @click.prevent="selectOption(option.value)" :class="{'active' : option.value === modelValue}">
132
+ @click.prevent="selectOption(option.value)"
133
+ :class="{'active' : option.value === modelValue}">
126
134
  <img class="flag" :src="pathFlag(option.value)"
127
135
  :alt="option.text"/>
128
136
  <span>{{ option.text }}</span>
@@ -130,7 +138,8 @@
130
138
  <!-- end country-flags -->
131
139
 
132
140
  <!-- begin color-boxes -->
133
- <a v-else-if="type === 'color'" href="#" @click.prevent="selectOption(option.value)" :class="{'active' : option.value === modelValue}">
141
+ <a v-else-if="type === 'color'" href="#" @click.prevent="selectOption(option.value)"
142
+ :class="{'active' : option.value === modelValue}">
134
143
  <span class="color" :style="'background: ' + option.value"></span>
135
144
  <span>{{ option.text }}</span>
136
145
  </a>
@@ -141,8 +150,10 @@
141
150
  <li v-if="showSelectAllOptions && type === 'checkboxOptions'" class="select-all-options">
142
151
  <a href="#" @click.prevent="toggleAllOptions">
143
152
  <!-- begin CmdIcon -->
144
- <CmdIcon v-if="!allOptionsSelected" :iconClass="iconSelectAllOptions.iconClass" :type="iconSelectAllOptions.iconType" />
145
- <CmdIcon v-else :iconClass="iconDeselectAllOptions.iconClass" :type="iconDeselectAllOptions.iconType" />
153
+ <CmdIcon v-if="!allOptionsSelected" :iconClass="iconSelectAllOptions.iconClass"
154
+ :type="iconSelectAllOptions.iconType"/>
155
+ <CmdIcon v-else :iconClass="iconDeselectAllOptions.iconClass"
156
+ :type="iconDeselectAllOptions.iconType"/>
146
157
  <!-- end CmdIcon -->
147
158
  <span>{{ selectAllOptionsText }}</span>
148
159
  </a>
@@ -191,11 +202,18 @@ export default {
191
202
  /**
192
203
  * set different default selectbox-types for
193
204
  *
194
- * @allowedValues: default, color, country, checkboxOptions
205
+ * @allowedValues: default, color, country, content, checkboxOptions
195
206
  */
196
207
  type: {
197
208
  type: String,
198
- default: "default"
209
+ default: "default",
210
+ validator(value) {
211
+ return value === "default" ||
212
+ value === "color" ||
213
+ value === "country" ||
214
+ value === "content" ||
215
+ value === "checkboxOptions"
216
+ }
199
217
  },
200
218
  /**
201
219
  * set type of option-links
@@ -204,7 +222,11 @@ export default {
204
222
  */
205
223
  optionLinkType: {
206
224
  type: String,
207
- default: "href"
225
+ default: "href",
226
+ validator(value) {
227
+ return value === "href" ||
228
+ value === "router"
229
+ }
208
230
  },
209
231
  /**
210
232
  * set default v-model (must be named modelValue in Vue3)
@@ -234,12 +256,19 @@ export default {
234
256
  /**
235
257
  * status (i.e. for validation)
236
258
  *
237
- * @allowedValues: error, warning, success, info
259
+ * @allowedValues: "" , error, warning, success, info
238
260
  * @affectsStyling: true
239
261
  */
240
262
  status: {
241
263
  type: String,
242
- required: false
264
+ required: false,
265
+ validator(value) {
266
+ return value === "" ||
267
+ value === "error" ||
268
+ value === "warning" ||
269
+ value === "success" ||
270
+ value === "info"
271
+ }
243
272
  },
244
273
  /**
245
274
  * icon for dropdown-icon (i.e. an angle/arrow)
@@ -273,6 +302,13 @@ export default {
273
302
  type: Boolean,
274
303
  default: true
275
304
  },
305
+ /**
306
+ * activate if interactive status-icon (to show requirements) should be shown inline with label
307
+ */
308
+ showStatusIcon: {
309
+ type: Boolean,
310
+ default: true
311
+ },
276
312
  /**
277
313
  * path to flag-files (will be combined with flag isoCode to load svg)
278
314
  */
@@ -284,8 +320,8 @@ export default {
284
320
  * default text if no option is selected (and first option is not used)
285
321
  */
286
322
  textPleaseSelect: {
287
- type: String,
288
- default: "Please select\u2026"
323
+ type: String,
324
+ default: "Please select\u2026"
289
325
  },
290
326
  /**
291
327
  * set icon for "select all"-option
@@ -334,7 +370,7 @@ export default {
334
370
 
335
371
  // if find() returns some data, return this data
336
372
  if (result) {
337
- return result.text
373
+ return result.text
338
374
  }
339
375
  }
340
376
 
@@ -369,7 +405,7 @@ export default {
369
405
  },
370
406
  optionCountry() {
371
407
  if (this.type === "country") {
372
- return this.modelValue || this.selectData?.[0]?.value
408
+ return this.modelValue || this.selectData?.[0]?.value
373
409
  }
374
410
  return null
375
411
  },
@@ -498,17 +534,11 @@ export default {
498
534
  }
499
535
  </script>
500
536
 
501
- <style lang="scss">
537
+ <style>
502
538
  /* begin cmd-fake-select ------------------------------------------------------------------------------------------ */
503
- @mixin disabled-styles {
504
- color: var(--disabled-color);
505
- border-color: var(--disabled-color);
506
- background: var(--disabled-background-color);
507
- }
508
-
509
539
  .cmd-fake-select {
510
540
  align-self: flex-end;
511
- border-radius: var(--border-radius);
541
+ border-radius: var(--default-border-radius);
512
542
 
513
543
  > span:first-child {
514
544
  a {
@@ -522,10 +552,11 @@ export default {
522
552
  display: block;
523
553
  min-width: 0;
524
554
  box-shadow: none;
525
- border-radius: var(--border-radius);
555
+ border-radius: var(--default-border-radius);
526
556
 
527
557
  > li {
528
558
  height: 100%;
559
+ border-radius: var(--default-border-radius);
529
560
 
530
561
  &:first-child {
531
562
  > a {
@@ -533,6 +564,7 @@ export default {
533
564
  border: var(--default-border);
534
565
  background: var(--color-scheme-background-color);
535
566
  color: var(--color-scheme-text-color);
567
+ border-radius: var(--default-border-radius);
536
568
 
537
569
  span, [class*="icon"] {
538
570
  color: var(--color-scheme-text-color);
@@ -562,11 +594,27 @@ export default {
562
594
 
563
595
  &.open {
564
596
  border-bottom: 0;
597
+ ul {
598
+ border-bottom-left-radius: var(--default-border-radius);
599
+ border-bottom-right-radius: var(--default-border-radius);
600
+
601
+ > li {
602
+ &:first-child {
603
+ > a {
604
+ border-color: var(--primary-color);
605
+ border-bottom-left-radius: 0;
606
+ border-bottom-right-radius: 0;
607
+ }
608
+ }
609
+ }
610
+
611
+ > li:last-child {
612
+ border-bottom-left-radius: inherit;
613
+ border-bottom-right-radius: inherit;
565
614
 
566
- > li {
567
- &:first-child {
568
615
  > a {
569
- border-color: var(--primary-color);
616
+ border-bottom-left-radius: inherit;
617
+ border-bottom-right-radius: inherit;
570
618
  }
571
619
  }
572
620
  }
@@ -586,7 +634,6 @@ export default {
586
634
  border-bottom: var(--default-border);
587
635
  text-decoration: none;
588
636
 
589
-
590
637
  &:hover, &:active, &:focus {
591
638
  background: var(--primary-color);
592
639
 
@@ -638,8 +685,8 @@ export default {
638
685
  z-index: 10;
639
686
  min-width: 100%;
640
687
  margin: 0;
641
- border-bottom-right-radius: var(--border-radius);
642
- border-bottom-left-radius: var(--border-radius);
688
+ border-bottom-right-radius: var(--default-border-radius);
689
+ border-bottom-left-radius: var(--default-border-radius);
643
690
  background: var(--color-scheme-background-color);
644
691
  border: var(--primary-border);
645
692
 
@@ -672,45 +719,36 @@ export default {
672
719
  }
673
720
  }
674
721
 
675
- // use additional class in selector to gain high specificity
722
+ /* use additional class in selector to gain high specificity */
676
723
  &.has-state.label {
677
- > ul {
678
- > li {
679
- > a {
680
- border-color: var(--status-color);
681
-
682
- > span, [class*="icon-"] {
683
- color: var(--status-color);
684
- }
724
+ &.error * {
725
+ --status-color: var(--error-color);
726
+ }
685
727
 
686
- &:hover, &:active, &:focus {
687
- background: var(--color-scheme-background-color);
728
+ &.success * {
729
+ --status-color: var(--success-color);
730
+ }
688
731
 
689
- span {
690
- color: var(--status-color);
691
- }
692
- }
693
- }
732
+ .label-text {
733
+ > span, [class*="icon-"] {
734
+ color: var(--status-color);
694
735
  }
695
736
  }
696
- }
697
737
 
698
- &.disabled {
699
738
  > ul {
700
- > li {
739
+ > li:first-child {
701
740
  > a {
702
- @include disabled-styles;
741
+ border-color: var(--status-color);
703
742
 
704
- span {
705
- color: var(--disabled-color);
743
+ > span, [class*="icon-"] {
744
+ color: var(--status-color);
706
745
  }
707
746
 
708
747
  &:hover, &:active, &:focus {
709
- cursor: not-allowed;
710
- @include disabled-styles;
748
+ background: var(--color-scheme-background-color);
711
749
 
712
750
  span {
713
- color: var(--disabled-color);
751
+ color: var(--status-color);
714
752
  }
715
753
  }
716
754
  }
@@ -748,6 +786,39 @@ export default {
748
786
  }
749
787
  }
750
788
  }
789
+ </style>
790
+
791
+ <style lang="scss">
792
+ @mixin disabled-styles {
793
+ color: var(--disabled-color);
794
+ border-color: var(--disabled-color);
795
+ background: var(--disabled-background-color);
796
+ }
797
+
798
+ .cmd-fake-select {
799
+ &.disabled {
800
+ > ul {
801
+ > li {
802
+ > a {
803
+ @include disabled-styles;
804
+
805
+ span {
806
+ color: var(--disabled-color);
807
+ }
808
+
809
+ &:hover, &:active, &:focus {
810
+ cursor: not-allowed;
811
+ @include disabled-styles;
812
+
813
+ span {
814
+ color: var(--disabled-color);
815
+ }
816
+ }
817
+ }
818
+ }
819
+ }
820
+ }
821
+ }
751
822
 
752
823
  /* end cmd-fake-select ------------------------------------------------------------------------------------------ */
753
824
  </style>
@@ -480,7 +480,7 @@ export default FancyBox
480
480
  min-width: 30vw;
481
481
  min-height: 30vh;
482
482
  background: var(--pure-white);
483
- border-radius: var(--border-radius);
483
+ border-radius: var(--default-border-radius);
484
484
  overflow: hidden;
485
485
  gap: calc(var(--default-gap) / 2);
486
486
 
@@ -569,7 +569,7 @@ export default FancyBox
569
569
  min-height: 0;
570
570
 
571
571
  &[class*="print"] > [class*="icon-"] {
572
- color: var(--text-color);
572
+ color: var(--default-text-color);
573
573
  }
574
574
 
575
575
  &.print-grayscale {
@@ -28,17 +28,16 @@
28
28
  <sup v-if="$attrs.required" aria-hidden="true">*</sup>
29
29
  </span>
30
30
 
31
- <!-- begin CmdTooltipForInputElements -->
32
- <CmdTooltipForInputElements
31
+ <!-- begin CmdTooltipForFormElements -->
32
+ <CmdTooltipForFormElements
33
33
  v-if="useCustomTooltip && (validationStatus === '' || validationStatus === 'error')"
34
34
  ref="tooltip"
35
35
  :validationStatus="validationStatus"
36
- :validationMessage="getValidationMessage"
37
36
  :relatedId="tooltipId"
38
37
  :cmdListOfRequirements="listOfRequirements"
39
38
  :role="validationStatus === 'error' ? 'alert' : 'dialog'"
40
39
  />
41
- <!-- end CmdTooltipForInputElements -->
40
+ <!-- end CmdTooltipForFormElements -->
42
41
 
43
42
  <a v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
44
43
  href="#"
@@ -163,22 +162,27 @@
163
162
  :id="htmlId"
164
163
  @blur="onBlur"
165
164
  @change="$emit('update:modelValue', $event.target.value)">
166
- <option v-for="(option, index) in selectOptions" :key="index" :value="option.value"
167
- :selected="option.value === modelValue">{{ option.text }}
165
+ <option
166
+ v-for="(option, index) in selectOptions"
167
+ :key="index"
168
+ :value="option.value"
169
+ :selected="option.value === modelValue"
170
+ >
171
+ {{ option.text }}
168
172
  </option>
169
173
  </select>
170
174
  <!-- end selectbox -->
171
175
 
172
176
  <!-- begin textarea -->
173
- <textarea v-if="element === 'textarea'"
174
- v-bind="elementAttributes"
175
- :id="htmlId"
176
- :value="modelValue"
177
- :maxlength="getMaxLength()"
178
- @input="onInput"
179
- @focus="tooltip = true"
180
- @blur="onBlur">
181
- </textarea>
177
+ <textarea
178
+ v-if="element === 'textarea'"
179
+ v-bind="elementAttributes"
180
+ :id="htmlId"
181
+ :value="modelValue"
182
+ :maxlength="getMaxLength()"
183
+ @input="onInput"
184
+ @focus="tooltip = true"
185
+ @blur="onBlur"></textarea><!-- no line-break to avoid empty spaces inside textarea -->
182
186
  <span v-if="element === 'textarea' && showCharactersTextarea" class="characters-left-wrapper">
183
187
  <span v-if="textCharactersLeft">{{ textCharactersLeft }}</span>
184
188
  <span :class="['characters-left', {error: charactersLeft === 0}]">{{ charactersLeft }}</span>
@@ -390,7 +394,7 @@ export default {
390
394
  required: false
391
395
  },
392
396
  /**
393
- * activate if interactive status-icon (to show requirements) should be shown above form-element
397
+ * activate if interactive status-icon (to show requirements) should be shown inline with label
394
398
  */
395
399
  showStatusIcon: {
396
400
  type: Boolean,
@@ -441,13 +445,20 @@ export default {
441
445
  /**
442
446
  * set status for label and form-element
443
447
  *
444
- * @allowedValues: error, warning, success, info
448
+ * @allowedValues: "", error, warning, success, info
445
449
  *
446
450
  * @affectsStyling: true
447
451
  */
448
452
  status: {
449
453
  type: String,
450
- required: false
454
+ required: false,
455
+ validator(value) {
456
+ return value === "" ||
457
+ value === "error" ||
458
+ value === "warning" ||
459
+ value === "success" ||
460
+ value === "info"
461
+ }
451
462
  },
452
463
  /**
453
464
  * toggle display of number of used and allowed characters for textarea
@@ -513,7 +524,7 @@ export default {
513
524
  * icon for error-validated items in list-of-requirements
514
525
  *
515
526
  * element-property must be set to 'input'
516
- * showRequirements-subproperty (of CmdListOfRequirements) must be set to 'true'
527
+ * showRequirements-subproperty (of CmdListOfRequirements) must be set to 'true'
517
528
  *
518
529
  */
519
530
  iconHasStateError: {
@@ -720,6 +731,9 @@ export default {
720
731
  }
721
732
  },
722
733
  methods: {
734
+ setFocus() {
735
+ this.$refs.label.querySelector("input, select, textarea")?.focus()
736
+ },
723
737
  additionalStandardRequirements() {
724
738
  const requirements = []
725
739
  // check if field is type "email"
@@ -852,10 +866,19 @@ export default {
852
866
  /* icon right aligned in input */
853
867
  input + .place-inside {
854
868
  left: auto;
855
- right: .5rem
869
+ right: .5rem;
870
+ color: var(--hyperlink-color);
871
+
872
+ span {
873
+ color: inherit;
874
+ }
856
875
  }
857
876
 
858
877
  &.has-state, & + .cmd-tooltip {
878
+ * {
879
+ --status-color: var(--error-color);
880
+ }
881
+
859
882
  ::placeholder {
860
883
  color: var(--status-color);
861
884
  }
@@ -864,9 +887,13 @@ export default {
864
887
  color: var(--status-color);
865
888
 
866
889
  &.place-inside {
867
- --status-color: var(--error-color);
890
+ color: inherit;
868
891
  }
869
892
  }
893
+
894
+ &.success * {
895
+ --status-color: var(--success-color);
896
+ }
870
897
  }
871
898
 
872
899
  :is(input[type="checkbox"], input[type="radio"]):checked {
@@ -886,6 +913,10 @@ export default {
886
913
  .search-field-wrapper {
887
914
  margin: 0;
888
915
 
916
+ input[type="search"] {
917
+ border-radius: var(--default-border-radius);
918
+ }
919
+
889
920
  a {
890
921
  position: absolute;
891
922
  top: 50%;
@@ -893,7 +924,7 @@ export default {
893
924
  transform: translateY(-50%);
894
925
  z-index: 100;
895
926
 
896
- // set styles to avoid overwriting by has-state-colors
927
+ /* set styles to avoid overwriting by has-state-colors */
897
928
  &.button {
898
929
  span {
899
930
  color: var(--color-scheme-background-color);
@@ -907,11 +938,6 @@ export default {
907
938
  }
908
939
  }
909
940
 
910
- input:not(:only-child) {
911
- border-top-right-radius: 0;
912
- border-bottom-right-radius: 0;
913
- }
914
-
915
941
  a.button {
916
942
  right: 0;
917
943
 
@@ -34,6 +34,11 @@ export default {
34
34
  /* begin cmd-google-maps ---------------------------------------------------------------------------------------- */
35
35
  .cmd-google-maps {
36
36
  border: var(--default-border);
37
+ border-radius: var(--default-border-radius);
38
+
39
+ iframe {
40
+ border-radius: inherit;
41
+ }
37
42
  }
38
43
  /* end cmd-google-maps ------------------------------------------------------------------------------------------ */
39
44
  </style>
@@ -1,7 +1,7 @@
1
1
  <template>
2
+ <!-- begin default-view -->
2
3
  <div v-if="!editModeContext || settingsContext || mainSidebarContext"
3
4
  :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': headlineIcon?.iconClass}, getTextAlign]">
4
-
5
5
  <template v-if="preHeadlineText">
6
6
  <component v-if="headlineText" :is="headlineTag">
7
7
  <!-- begin CmdIcon -->
@@ -21,17 +21,20 @@
21
21
  </span>
22
22
  </component>
23
23
  </template>
24
- <component v-else-if="headlineText" :is="headlineTag">
24
+ <component :is="headlineTag">
25
25
  <!-- begin CmdIcon -->
26
26
  <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
27
27
  <!-- end CmdIcon -->
28
+
28
29
  <span>
29
- <!-- being slot -->
30
- <slot>{{ headlineText }}</slot>
30
+ <!-- being slot -->
31
+ <slot>{{ headlineText }}</slot>
31
32
  <!-- end slot -->
32
33
  </span>
33
34
  </component>
34
35
  </div>
36
+ <!-- end default-view -->
37
+
35
38
  <!-- begin edit-mode -->
36
39
  <EditComponentWrapper
37
40
  v-else
@@ -142,7 +145,12 @@ export default {
142
145
  */
143
146
  textAlign: {
144
147
  type: String,
145
- default: null
148
+ default: null,
149
+ validator(value) {
150
+ return value === "left" ||
151
+ value === "center" ||
152
+ value === "right"
153
+ }
146
154
  }
147
155
  },
148
156
  computed: {