comand-component-library 3.1.73 → 3.1.74

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "comand-component-library",
3
- "version": "3.1.73",
3
+ "version": "3.1.74",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
@@ -18,7 +18,7 @@
18
18
  ],
19
19
  "dependencies": {
20
20
  "clickout-event": "^1.1.2",
21
- "comand-frontend-framework": "^3.2.61",
21
+ "comand-frontend-framework": "^3.2.62",
22
22
  "core-js": "^3.20.1",
23
23
  "prismjs": "^1.27.0",
24
24
  "vue": "^3.2.31",
package/src/App.vue CHANGED
@@ -576,7 +576,7 @@
576
576
  <!-- begin input-groups -->
577
577
  <h2>Input-Groups</h2>
578
578
  <CmdInputGroup
579
- labelText="Group label for radio-group given by slot"
579
+ labelText="Group label for radio-group given by slot:"
580
580
  :useSlot="true"
581
581
  :status="validationStatus"
582
582
  :disabled="disabledStatus"
@@ -609,7 +609,8 @@
609
609
  </dd>
610
610
  </dl>
611
611
  <CmdInputGroup
612
- labelText="Grouplabel for radio-group given by property"
612
+ labelText="Grouplabel for radio-group given by property:"
613
+ :required="true"
613
614
  :inputElements="inputGroupRadiobuttons"
614
615
  inputTypes="radio"
615
616
  v-model="inputGroupValue2"
@@ -623,7 +624,7 @@
623
624
  </dd>
624
625
  </dl>
625
626
  <CmdInputGroup
626
- labelText="Grouplabel for radio-group styled as replaced-input-type"
627
+ labelText="Grouplabel for radio-group styled as replaced-input-type:"
627
628
  :inputElements="inputGroupRadiobuttons"
628
629
  inputTypes="radio"
629
630
  v-model="inputGroupValueReplaceInputTypeRadio"
@@ -638,7 +639,7 @@
638
639
  </dd>
639
640
  </dl>
640
641
  <CmdInputGroup
641
- labelText="Grouplabel for checkbox-group styled as replaced-input-type"
642
+ labelText="Grouplabel for checkbox-group styled as replaced-input-type:"
642
643
  :inputElements="inputGroupRadiobuttons"
643
644
  inputTypes="checkbox"
644
645
  v-model="inputGroupValueReplaceInputTypeCheckbox"
@@ -654,7 +655,39 @@
654
655
  </dd>
655
656
  </dl>
656
657
  <CmdInputGroup
657
- labelText="Grouplabel for radio-group given by property styled as multiple-switch"
658
+ labelText="Grouplabel for checkbox-group styled as toggle-switches:"
659
+ :inputElements="inputGroupRadiobuttons"
660
+ inputTypes="checkbox"
661
+ v-model="inputGroupValueToggleSwitchCheckbox"
662
+ :toggleSwitch="true"
663
+ required="required"
664
+ :status="validationStatus"
665
+ :disabled="disabledStatus"
666
+ />
667
+ <dl>
668
+ <dt>Selected value(s):</dt>
669
+ <dd>
670
+ <output>{{ inputGroupValueToggleSwitchCheckbox }}</output>
671
+ </dd>
672
+ </dl>
673
+ <CmdInputGroup
674
+ labelText="Grouplabel for radio-group styled as toggle-switches:"
675
+ :inputElements="inputGroupRadiobuttons"
676
+ inputTypes="radio"
677
+ v-model="inputGroupValueToggleSwitchRadio"
678
+ :toggleSwitch="true"
679
+ required="required"
680
+ :status="validationStatus"
681
+ :disabled="disabledStatus"
682
+ />
683
+ <dl>
684
+ <dt>Selected value(s):</dt>
685
+ <dd>
686
+ <output>{{ inputGroupValueToggleSwitchRadio }}</output>
687
+ </dd>
688
+ </dl>
689
+ <CmdInputGroup
690
+ labelText="Grouplabel for radio-group given by property styled as multiple-switch:"
658
691
  :inputElements="inputGroupRadiobuttons.map(item => ({...item, id: item.id + '-multi', name: item.name + '-multi'}))"
659
692
  inputTypes="radio"
660
693
  :multipleSwitch="true"
@@ -669,7 +702,7 @@
669
702
  </dd>
670
703
  </dl>
671
704
  <CmdInputGroup
672
- labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally)"
705
+ labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally):"
673
706
  :inputElements="inputGroupCheckboxes"
674
707
  inputTypes="checkbox"
675
708
  :multipleSwitch="true"
@@ -1100,7 +1133,9 @@
1100
1133
  <CmdCookieDisclaimer :cookieOptions="cookieDisclaimerData"
1101
1134
  buttonLabelAcceptAllCookies="Accept all cookies"
1102
1135
  buttonLabelAcceptCurrentSettings="Accept current settings"
1103
- @closeCookieDisclaimer="fancyBoxCookieDisclaimer = false"
1136
+ @closeCookieDisclaimer="closeCookieDisclaimer"
1137
+ v-model="acceptedCookies"
1138
+
1104
1139
  >
1105
1140
  <template #privacy-text>
1106
1141
  <p>
@@ -1231,6 +1266,7 @@ export default {
1231
1266
 
1232
1267
  data() {
1233
1268
  return {
1269
+ acceptedCookies: ["google-maps"],
1234
1270
  showTooltip: false,
1235
1271
  disabledStatus: undefined,
1236
1272
  validationStatus: "",
@@ -1241,6 +1277,8 @@ export default {
1241
1277
  inputGroupValue2: "website",
1242
1278
  inputGroupValueReplaceInputTypeRadio: "phone",
1243
1279
  inputGroupValueReplaceInputTypeCheckbox: ["phone"],
1280
+ inputGroupValueToggleSwitchCheckbox: ["phone"],
1281
+ inputGroupValueToggleSwitchRadio: "phone",
1244
1282
  inputGroupValue3: "email",
1245
1283
  inputGroupValue4: [],
1246
1284
  inputGroupRadiobuttons: [
@@ -1375,10 +1413,11 @@ export default {
1375
1413
  thumbnailScrollerData
1376
1414
  }
1377
1415
  },
1378
- mounted() {
1379
- document.querySelector('html').addEventListener('toggle-color-scheme', (event) => console.log('colorScheme:', event.detail))
1380
- },
1381
1416
  methods: {
1417
+ closeCookieDisclaimer(event) {
1418
+ this.fancyBoxCookieDisclaimer = false
1419
+ alert(event.join(", "))
1420
+ },
1382
1421
  setStatus(validationStatus, disabledStatus) {
1383
1422
  this.validationStatus = validationStatus
1384
1423
  this.disabledStatus = disabledStatus
@@ -4,10 +4,10 @@
4
4
  "cookies": [
5
5
  {
6
6
  "id": "cookie-sessionid",
7
+ "value": "sessionid",
7
8
  "description": "This cookie is required for functionality",
8
9
  "labelText": "SessionID",
9
- "checked": true,
10
- "status": "disabled",
10
+ "disabled": true,
11
11
  "linkDataPrivacy": {
12
12
  "label": "Details for this cookie:",
13
13
  "link": "/content/data-privacy-en.html",
@@ -16,10 +16,10 @@
16
16
  },
17
17
  {
18
18
  "id": "cookie-google-recaptcha",
19
+ "value": "google-recaptcha",
19
20
  "description": "This cookie prevents bots from sending forms",
20
21
  "labelText": "Google reCaptcha™",
21
- "checked": true,
22
- "status": "disabled",
22
+ "disabled": true,
23
23
  "linkDataPrivacy": {
24
24
  "label": "Details for this cookie:",
25
25
  "link": "https://policies.google.com/privacy?hl=en-US",
@@ -34,9 +34,10 @@
34
34
  "cookies": [
35
35
  {
36
36
  "id": "cookie-google-maps",
37
+ "value": "google-maps",
37
38
  "description": "This cookie enables the Google Map™",
38
39
  "labelText": "Google Maps™",
39
- "checked": false,
40
+ "disabled": false,
40
41
  "linkDataPrivacy": {
41
42
  "label": "Details for this cookie:",
42
43
  "link": "https://policies.google.com/privacy?hl=en-US",
@@ -46,9 +47,9 @@
46
47
  },
47
48
  {
48
49
  "id": "cookie-google-analytics",
50
+ "value": "google-analytics",
49
51
  "description": "This cookie collects anonymous data for statistics and improvements",
50
52
  "labelText": "Google Analytics™",
51
- "checked": false,
52
53
  "linkDataPrivacy": {
53
54
  "label": "Details for this cookie:",
54
55
  "link": "https://policies.google.com/privacy?hl=en-US",
@@ -173,7 +173,14 @@ body.avoid-scrolling {
173
173
  /* end product-listing --------------------------------------------------------------------------------------------------------------------------------------------------- */
174
174
 
175
175
  /* begin tooltip for cmd-form-element and cmd-fake-select ---------------------------------------------------------------------------------------------------------------- */
176
- .cmd-form-element, .cmd-fake-select {
176
+ .cmd-form-element, .cmd-fake-select, .cmd-input-group {
177
+ .cmd-tooltip {
178
+ position: absolute;
179
+ right: 0;
180
+ transform: translateY(calc(-100% - calc(var(--default-margin) / 2)));
181
+ left: auto !important; /* overwrite calculated inline-styles from javascript for cmd-tooltip-component */
182
+ top: 0 !important; /* overwrite calculated inline-styles from javascript for cmd-tooltip-component */
183
+ }
177
184
 
178
185
  &.has-state, & + .cmd-tooltip {
179
186
  .label-text {
@@ -190,7 +197,6 @@ body.avoid-scrolling {
190
197
  --status-color: var(--warning-color);
191
198
  }
192
199
 
193
-
194
200
  &.success {
195
201
  --status-color: var(--success-color);
196
202
  }
@@ -202,44 +208,6 @@ body.avoid-scrolling {
202
208
 
203
209
  & + .cmd-tooltip {
204
210
  border-color: var(--status-color);
205
-
206
- h6:last-of-type {
207
- margin-top: 0;
208
- }
209
-
210
- .list-of-requirements {
211
- .error {
212
- color: var(--error-color);
213
- }
214
-
215
- .warning {
216
- color: var(--warning-color);
217
- }
218
-
219
- .success {
220
- color: var(--success-color);
221
- }
222
-
223
- .info {
224
- color: var(--info-color);
225
- }
226
-
227
- span[class*="icon"] {
228
- font-size: 1.2rem;
229
- }
230
-
231
- & ~ a {
232
- display: flex;
233
- align-items: center;
234
- justify-content: center;
235
- text-align: center;
236
- text-decoration: none;
237
-
238
- span[class*="icon"] {
239
- font-size: 1.2rem;
240
- }
241
- }
242
- }
243
211
  }
244
212
  }
245
213
  /* end tooltip for cmd-form-element and cmd-fake-select ------------------------------------------------------------------------------------------------------------------ */
@@ -300,6 +268,7 @@ html {
300
268
  &.light-mode {
301
269
  /* assign default colors for custom light-mode set by class */
302
270
  --color-scheme-text-color: var(--light-mode-text-color);
271
+ --color-scheme-text-color-buttons: var(--light-mode-text-color-buttons);
303
272
  --color-scheme-background-color: var(--light-mode-background-color);
304
273
  --color-scheme-text-color-inverted: var(--dark-mode-text-color);
305
274
  --color-scheme-background-inverted: var(--dark-mode-background-color);
@@ -309,6 +278,7 @@ html {
309
278
  &.dark-mode {
310
279
  /* assign default colors for custom dark-mode set by class */
311
280
  --color-scheme-text-color: var(--dark-mode-text-color);
281
+ --color-scheme-text-color-buttons: var(--dark-mode-background-color);
312
282
  --color-scheme-background-color: var(--dark-mode-background-color);
313
283
  --color-scheme-text-color-inverted: var(--light-mode-text-color);
314
284
  --color-scheme-background-inverted: var(--light-mode-background-color);
@@ -44,7 +44,7 @@
44
44
  </template>
45
45
 
46
46
  <!-- begin box-body -->
47
- <div v-if="open" class="box-body" aria-expanded="true">
47
+ <div v-if="open" class="box-body" aria-expanded="true" role="article">
48
48
  <!-- begin slot 'body' -->
49
49
  <slot name="body">
50
50
  <transition :name="toggleTransition">
@@ -12,6 +12,7 @@
12
12
 
13
13
  <!-- begin slot for cookie-options -->
14
14
  <slot name="cookie-options">
15
+ <!-- begin required cookies -->
15
16
  <div v-if="cookieOptions.required" class="flex-container vertical">
16
17
  <CmdCustomHeadline v-if="cmdBoxRequiredCookies?.showHeadline" :headline-text="cmdBoxRequiredCookies?.headlineText" :headline-level="cmdBoxRequiredCookies?.headlineLevel "/>
17
18
  <!-- begin CmdBox -->
@@ -25,9 +26,13 @@
25
26
  <CmdFormElement
26
27
  element="input"
27
28
  type="checkbox"
28
- labelText="Google Analytics"
29
- id="google-analytics"
29
+ v-model="acceptedCookies"
30
+ :inputValue="cookie.value"
31
+ :labelText="cookie.labelText"
32
+ :disabled="cookie.disabled"
33
+ :id="cookie.id"
30
34
  :toggleSwitch="true"
35
+ :title="getMessage('cmdcookiedisclaimer.title.cookie_cannot_be_disabled')"
31
36
  />
32
37
  <!-- end CmdFormElement -->
33
38
  </template>
@@ -46,7 +51,11 @@
46
51
  </CmdBox>
47
52
  <!-- end CmdBox -->
48
53
  </div>
54
+ <!-- end required cookies -->
55
+
49
56
  <hr/>
57
+
58
+ <!-- begin optional cookies -->
50
59
  <div v-if="cookieOptions.optional" class="flex-container vertical">
51
60
  <CmdCustomHeadline v-if="cmdBoxOptionalCookies?.showHeadline" :headline-text="cmdBoxOptionalCookies?.headlineText" :headline-level="cmdBoxOptionalCookies?.headlineLevel "/>
52
61
  <!-- begin CmdBox -->
@@ -60,9 +69,13 @@
60
69
  <CmdFormElement
61
70
  element="input"
62
71
  type="checkbox"
63
- labelText="Google Analytics"
64
- id="google-analytics"
72
+ v-model="acceptedCookies"
73
+ :inputValue="cookie.value"
74
+ :labelText="cookie.labelText"
75
+ :disabled="cookie.disabled"
76
+ :id="cookie.id"
65
77
  :toggleSwitch="true"
78
+ :title="getMessage('cmdcookiedisclaimer.title.toggle_to_accept_cookie')"
66
79
  />
67
80
  <!-- end CmdFormElement -->
68
81
  </template>
@@ -81,6 +94,7 @@
81
94
  </CmdBox>
82
95
  <!-- end CmdBox -->
83
96
  </div>
97
+ <!-- end optional cookies -->
84
98
  </slot>
85
99
  <!-- end slot for cookie-options -->
86
100
 
@@ -90,10 +104,10 @@
90
104
 
91
105
  <!-- begin button-wrapper for 'accept'-buttons -->
92
106
  <div class="button-wrapper align-center">
93
- <button v-if="buttonLabelAcceptCurrentSettings" type="button" @click="acceptCookies('currentSettings')">
107
+ <button v-if="buttonLabelAcceptCurrentSettings" type="button" @click="acceptCurrentCookies">
94
108
  <span>{{ buttonLabelAcceptCurrentSettings }}</span>
95
109
  </button>
96
- <button v-if="buttonLabelAcceptAllCookies" type="button" class="primary" @click="acceptCookies('allCookies')">
110
+ <button v-if="buttonLabelAcceptAllCookies" type="button" class="primary" @click="acceptAllCookies">
97
111
  <span>{{ buttonLabelAcceptAllCookies }}</span>
98
112
  </button>
99
113
  </div>
@@ -103,6 +117,10 @@
103
117
  </template>
104
118
 
105
119
  <script>
120
+ // import mixins
121
+ import I18n from "../mixins/I18n"
122
+ import DefaultMessageProperties from "../mixins/CmdCookieDisclaimer/DefaultMessageProperties"
123
+
106
124
  // import components
107
125
  import CmdBox from "./CmdBox"
108
126
  import CmdCustomHeadline from "./CmdCustomHeadline"
@@ -110,6 +128,7 @@ import CmdFormElement from "./CmdFormElement"
110
128
 
111
129
  export default {
112
130
  name: "CmdCookieDisclaimer",
131
+ mixins: [I18n, DefaultMessageProperties],
113
132
  components: {
114
133
  CmdBox,
115
134
  CmdCustomHeadline,
@@ -122,6 +141,13 @@ export default {
122
141
  }
123
142
  },
124
143
  props: {
144
+ /**
145
+ * set default v-model (must be named modelValue in Vue3)
146
+ */
147
+ modelValue: {
148
+ type: Array,
149
+ required: false
150
+ },
125
151
  /**
126
152
  * properties for CmdCustomHeadline-component at top of cookie disclaimer
127
153
  */
@@ -185,9 +211,43 @@ export default {
185
211
  default: "Proceed with current settings!"
186
212
  }
187
213
  },
214
+ computed: {
215
+ acceptedCookies: {
216
+ get() {
217
+ const cookies = this.modelValue ? [...this.modelValue] : []
218
+ const requiredCookies = this.cookieOptions?.required?.cookies || []
219
+ for (let i = 0; i < requiredCookies.length; i++) {
220
+ if(!cookies.includes(requiredCookies[i].value)) {
221
+ cookies.push(requiredCookies[i].value)
222
+ }
223
+ }
224
+ return cookies
225
+ },
226
+ set(value) {
227
+ this.$emit("update:modelValue", value)
228
+ }
229
+ }
230
+ },
188
231
  methods: {
189
- acceptCookies(cookies) {
190
- this.$emit("close-cookie-disclaimer", cookies)
232
+ acceptCurrentCookies() {
233
+ this.$emit("close-cookie-disclaimer", this.acceptedCookies)
234
+ },
235
+ acceptAllCookies() {
236
+ const allCookies = []
237
+
238
+ // push all required cookies to array
239
+ const requiredCookies = this.cookieOptions?.required?.cookies
240
+ for(let i = 0; i < requiredCookies.length ; i++) {
241
+ allCookies.push(requiredCookies[i].value)
242
+ }
243
+
244
+ // push all optional cookies to array
245
+ const optionalCookies = this.cookieOptions?.optional?.cookies
246
+ for(let i = 0; i < optionalCookies.length ; i++) {
247
+ allCookies.push(optionalCookies[i].value)
248
+ }
249
+
250
+ this.$emit("close-cookie-disclaimer", allCookies)
191
251
  },
192
252
  openDataPrivacy(event) {
193
253
  /* first 'target' = clicked-element, second 'target' = target-attribute */
@@ -215,6 +275,14 @@ export default {
215
275
  top: auto;
216
276
 
217
277
  .cmd-box {
278
+ .box-header {
279
+ label.disabled {
280
+ .label-text span {
281
+ color: var(--pure-white) !important;
282
+ }
283
+ }
284
+ }
285
+
218
286
  .box-body {
219
287
  padding: var(--default-padding);
220
288
  }
@@ -17,6 +17,30 @@
17
17
  <!-- begin label -->
18
18
  <span class="label-text" :id="labelId">
19
19
  <span>{{ labelText }}<sup v-if="$attrs.required !== undefined">*</sup></span>
20
+
21
+ <!-- begin CmdTooltip -->
22
+ <CmdTooltip v-if="useCustomTooltip" class="box" :class="validationStatus" :relatedId="tooltipId" :toggle-visibility-by-click="true">
23
+ <!-- begin CmdSystemMessage -->
24
+ <CmdSystemMessage
25
+ v-if="getValidationMessage"
26
+ :message="getValidationMessage"
27
+ :validation-status="validationStatus"
28
+ :iconClose="{show: false}"
29
+ />
30
+ <!-- end CmdSystemMessage -->
31
+
32
+ <!-- begin CmdListOfRequirements -->
33
+ <CmdListOfRequirements
34
+ v-if="showRequirements && (validationStatus === '' || validationStatus === 'error')"
35
+ :inputRequirements="inputRequirements"
36
+ :inputModelValue="modelValue"
37
+ :inputAttributes="$attrs"
38
+ :helplink="helplink"
39
+ />
40
+ <!-- end CmdListOfRequirements -->
41
+ </CmdTooltip>
42
+ <!-- end CmdTooltip -->
43
+
20
44
  <a v-if="$attrs.required || inputRequirements.length"
21
45
  href="#"
22
46
  @click.prevent
@@ -102,51 +126,6 @@
102
126
  </li>
103
127
  </ul>
104
128
  </div>
105
- <!-- begin CmdTooltip -->
106
- <CmdTooltip v-if="useCustomTooltip" class="box" :class="validationStatus" :relatedId="tooltipId" :toggle-visibility-by-click="true">
107
- <!-- begin CmdSystemMessage -->
108
- <CmdSystemMessage
109
- v-if="getValidationMessage"
110
- :message="getValidationMessage"
111
- :validationStatus="validationStatus"
112
- :iconClose="{show: false}"
113
- />
114
- <!-- end CmdSystemMessage -->
115
-
116
- <template v-if="showRequirements && (validationStatus === '' || validationStatus === 'error')">
117
- <!-- begin list of requirements -->
118
- <h6>{{ getMessage("cmdfakeselect.headline.requirements_for_input") }}<br/>"{{ labelText }}"</h6>
119
- <dl class="list-of-requirements">
120
- <template v-for="(requirement, index) in inputRequirements" :key="index">
121
- <dt aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">{{ requirement.message }}:</dt>
122
- <dd :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">
123
- <span aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? 'icon-check-circle' : 'icon-error-circle'"
124
- :title="requirement.valid(modelValue, $attrs) ? 'success' : 'error'"></span>
125
- </dd>
126
- </template>
127
- </dl>
128
- <!-- end list of requirements -->
129
-
130
- <!-- begin helplink -->
131
- <template v-if="helplink">
132
- <hr v-if="helplink.show"/>
133
- <a v-if="helplink.show && helplink.url"
134
- :href="helplink.url"
135
- :target="helplink.target"
136
- @click.prevent>
137
- <span v-if="helplink.icon?.iconClass"
138
- :class="helplink.icon?.iconClass"
139
- :title="helplink.icon?.tooltip">
140
- </span>
141
- <span v-if="helplink.text">
142
- {{ helplink.text }}
143
- </span>
144
- </a>
145
- </template>
146
- <!-- end helplink -->
147
- </template>
148
- </CmdTooltip>
149
- <!-- end CmdTooltip -->
150
129
  </template>
151
130
 
152
131
  <script>
@@ -155,11 +134,12 @@ import {createUuid} from "../utils/common.js"
155
134
 
156
135
  // import mixins
157
136
  import I18n from "../mixins/I18n"
158
- import DefaultMessageProperties from "../mixins/CmdBox/DefaultMessageProperties"
137
+ import DefaultMessageProperties from "../mixins/CmdFakeSelect/DefaultMessageProperties"
159
138
  import FieldValidation from "../mixins/FieldValidation.js"
160
139
  import Tooltip from "../mixins/Tooltip.js"
161
140
 
162
141
  // import components
142
+ import CmdListOfRequirements from "./CmdListOfRequirements"
163
143
  import CmdSystemMessage from "./CmdSystemMessage"
164
144
  import CmdTooltip from "./CmdTooltip"
165
145
 
@@ -173,6 +153,7 @@ export default {
173
153
  Tooltip
174
154
  ],
175
155
  components: {
156
+ CmdListOfRequirements,
176
157
  CmdSystemMessage,
177
158
  CmdTooltip
178
159
  },
@@ -334,7 +315,7 @@ export default {
334
315
  },
335
316
  // get ID for accessibility
336
317
  labelId() {
337
- if(this.$attrs.id !== undefined) {
318
+ if (this.$attrs.id !== undefined) {
338
319
  return this.$attrs.id
339
320
  }
340
321
  return "label-" + createUuid()