comand-component-library 3.1.72 → 3.1.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.72",
+  "version": "3.1.75",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -18,7 +18,7 @@
   ],
   "dependencies": {
     "clickout-event": "^1.1.2",
-    "comand-frontend-framework": "^3.2.61",
+    "comand-frontend-framework": "^3.2.65",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",
     "vue": "^3.2.31",
@@ -39,7 +39,7 @@
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^7.20.0",
     "gulp": "^4.0.2",
-    "node-sass": "^4.12.0",
+    "node-sass": "^4.14.1",
     "sass-loader": "^8.0.2",
     "typescript": "~3.9.3",
     "vue-jest": "^5.0.0-0"

package/src/App.vue

@@ -64,8 +64,9 @@
                 <ul class="list-status">
                     <li><a href="#" @click.prevent="setStatus('', false)" :class="{'active' : validationStatus === '' && disabledStatus === false}"
                            id="status-default">Default</a></li>
-                    <li class="error"><a href="#" @click.prevent="setStatus('error', false)"
-                                         :class="{'active' : validationStatus === 'error'}" id="status-error">Error</a></li>
+                    <li class="error">
+                        <a href="#" @click.prevent="setStatus('error', false)"
+                           :class="{'active' : validationStatus === 'error'}" id="status-error">Error</a></li>
                     <li><a href="#" @click.prevent="setStatus('warning', false)"
                            :class="{'active' : validationStatus === 'warning'}" id="status-warning">Warning</a></li>
                     <li><a href="#" @click.prevent="setStatus('success', false)"
@@ -263,8 +264,9 @@
                                        :disabled="disabledStatus"
                                        :selectData="fakeSelectOptionsData"
                                        v-model="fakeSelectDefault"
-                                       required
+                                       :required="true"
                                        defaultOptionName="Select an option:"
+                                       title="Title for FakeSelect"
                         />
                         <CmdFakeSelect labelText="Default selectbox with icons:"
                                        :status="validationStatus"
@@ -455,7 +457,7 @@
                         checkbox with boolean: {{ checkboxValue }}<br/>
                         checkboxes with values: {{ checkboxValues }}
                     </p>
-                    <h2>Checkboxes and Radibuttons</h2>
+                    <h2>Checkboxes and Radiobuttons</h2>
                     <h3>Checkboxes [native]</h3>
                     <div class="label inline">
                         <span class="label-text">Label for native checkboxes:</span>
@@ -575,8 +577,9 @@
 
                     <!-- begin input-groups -->
                     <h2>Input-Groups</h2>
+                    <h3>Input Group with Radiobuttons [native]</h3>
                     <CmdInputGroup
-                        labelText="Group label for radio-group given by slot"
+                        labelText="Group label for radio-group given by slot:"
                         :useSlot="true"
                         :status="validationStatus"
                         :disabled="disabledStatus"
@@ -587,7 +590,7 @@
                                         id="input-group-radiobutton"
                                         name="radiogroup2"
                                         inputValue="radiobuttonValue1"
-                                        v-model="inputGroupValue1"
+                                        v-model="inputGroupRadio"
                                         :status="validationStatus"
                                         :disabled="disabledStatus"
                         />
@@ -597,7 +600,7 @@
                                         id="input-group-radiobutton"
                                         name="radiogroup2"
                                         inputValue="radiobuttonValue2"
-                                        v-model="inputGroupValue1"
+                                        v-model="inputGroupRadio"
                                         :status="validationStatus"
                                         :disabled="disabledStatus"
                         />
@@ -609,22 +612,24 @@
                         </dd>
                     </dl>
                     <CmdInputGroup
-                        labelText="Grouplabel for radio-group given by property"
-                        :inputElements="inputGroupRadiobuttons"
+                        labelText="Grouplabel for radio-group given by property:"
+                        :required="true"
+                        :inputElements="inputGroupRadiobuttonsData"
                         inputTypes="radio"
-                        v-model="inputGroupValue2"
+                        v-model="inputGroupCheckbox"
                         :status="validationStatus"
                         :disabled="disabledStatus"
                     />
                     <dl>
-                        <dt>Selected value(s):</dt>
+                        <dt>Selected value:</dt>
                         <dd>
                             <output>{{ inputGroupValue2 }}</output>
                         </dd>
                     </dl>
+                    <h3>Input Group with Checkboxes/Radiobuttons (replaced)</h3>
                     <CmdInputGroup
-                        labelText="Grouplabel for radio-group styled as replaced-input-type"
-                        :inputElements="inputGroupRadiobuttons"
+                        labelText="Grouplabel for radio-group styled as replaced-input-type:"
+                        :inputElements="inputGroupReplacedRadiobuttonsData"
                         inputTypes="radio"
                         v-model="inputGroupValueReplaceInputTypeRadio"
                         :replaceInputType="true"
@@ -632,18 +637,18 @@
                         :disabled="disabledStatus"
                     />
                     <dl>
-                        <dt>Selected value(s):</dt>
+                        <dt>Selected value:</dt>
                         <dd>
                             <output>{{ inputGroupValueReplaceInputTypeRadio }}</output>
                         </dd>
                     </dl>
                     <CmdInputGroup
-                        labelText="Grouplabel for checkbox-group styled as replaced-input-type"
-                        :inputElements="inputGroupRadiobuttons"
+                        labelText="Grouplabel for checkbox-group styled as replaced-input-type:"
+                        :inputElements="inputGroupReplacedRadiobuttonsData"
                         inputTypes="checkbox"
                         v-model="inputGroupValueReplaceInputTypeCheckbox"
                         :replaceInputType="true"
-                        required="required"
+                        :required="true"
                         :status="validationStatus"
                         :disabled="disabledStatus"
                     />
@@ -653,9 +658,43 @@
                             <output>{{ inputGroupValueReplaceInputTypeCheckbox }}</output>
                         </dd>
                     </dl>
+                    <h3>Input Groups with Checkboxes/
+                        Radiobuttons (toggle-switches)</h3>
+                    <CmdInputGroup
+                        labelText="Grouplabel for checkbox-group styled as toggle-switches:"
+                        :inputElements="inputGroupRadiobuttonsData"
+                        inputTypes="checkbox"
+                        v-model="inputGroupValueToggleSwitchCheckbox"
+                        :toggleSwitch="true"
+                        required="required"
+                        :status="validationStatus"
+                        :disabled="disabledStatus"
+                    />
+                    <dl>
+                        <dt>Selected value(s):</dt>
+                        <dd>
+                            <output>{{ inputGroupValueToggleSwitchCheckbox }}</output>
+                        </dd>
+                    </dl>
+                    <CmdInputGroup
+                        labelText="Grouplabel for radio-group styled as toggle-switches:"
+                        :inputElements="inputGroupToggleSwitchRadiobuttonsData"
+                        inputTypes="radio"
+                        v-model="inputGroupValueToggleSwitchRadio"
+                        :toggleSwitch="true"
+                        required="required"
+                        :status="validationStatus"
+                        :disabled="disabledStatus"
+                    />
+                    <dl>
+                        <dt>Selected value(s):</dt>
+                        <dd>
+                            <output>{{ inputGroupValueToggleSwitchRadio }}</output>
+                        </dd>
+                    </dl>
                     <CmdInputGroup
-                        labelText="Grouplabel for radio-group given by property styled as multiple-switch"
-                        :inputElements="inputGroupRadiobuttons.map(item => ({...item, id: item.id + '-multi', name: item.name + '-multi'}))"
+                        labelText="Grouplabel for radio-group given by property styled as multiple-switch:"
+                        :inputElements="inputGroupRadiobuttonsData.map(item => ({...item, id: item.id + '-multi', name: item.name + '-multi'}))"
                         inputTypes="radio"
                         :multipleSwitch="true"
                         v-model="inputGroupValue3"
@@ -669,10 +708,11 @@
                         </dd>
                     </dl>
                     <CmdInputGroup
-                        labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally)"
+                        labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally):"
                         :inputElements="inputGroupCheckboxes"
                         inputTypes="checkbox"
                         :multipleSwitch="true"
+                        :required="true"
                         v-model="inputGroupValue4"
                         :stretchHorizontally="true"
                         :status="validationStatus"
@@ -804,13 +844,13 @@
             <h3>Product boxes</h3>
             <div class="grid-container-create-columns">
                 <div class="grid-small-item" v-for="(product, index) in boxProductData" :key="index">
-                    <CmdBox boxType="product" :product="product" :cmdCustomHeadline="{headlineLevel: 4}"/>
+                    <CmdBox boxType="product" :product="product" :CmdHeadline="{headlineLevel: 4}"/>
                 </div>
             </div>
             <h3>User boxes</h3>
             <div class="grid-container-create-columns">
                 <div class="grid-small-item" v-for="(user, index) in boxUserData" :key="index">
-                    <CmdBox boxType="user" :user="user" :cmdCustomHeadline="{headlineLevel: 4}"/>
+                    <CmdBox boxType="user" :user="user" :CmdHeadline="{headlineLevel: 4}"/>
                 </div>
             </div>
             <h3>Box Site Search</h3>
@@ -857,12 +897,12 @@
         <a id="section-custom-headline"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Custom Headline</h2>
-            <CmdCustomHeadline icon-class="icon-home" pre-headline-text="Pre-headline" headlineText="Headline level 1" :headlineLevel="1"/>
-            <CmdCustomHeadline headlineText="Headline level 2" :headlineLevel="2"/>
-            <CmdCustomHeadline headlineText="Headline level 3" :headlineLevel="3"/>
-            <CmdCustomHeadline headlineText="Headline level 4" :headlineLevel="4"/>
-            <CmdCustomHeadline headlineText="Headline level 5" :headlineLevel="5"/>
-            <CmdCustomHeadline headlineText="Headline level 6" :headlineLevel="6"/>
+            <CmdHeadline icon-class="icon-home" pre-headline-text="Pre-headline" headlineText="Headline level 1" :headlineLevel="1"/>
+            <CmdHeadline headlineText="Headline level 2" :headlineLevel="2"/>
+            <CmdHeadline headlineText="Headline level 3" :headlineLevel="3"/>
+            <CmdHeadline headlineText="Headline level 4" :headlineLevel="4"/>
+            <CmdHeadline headlineText="Headline level 5" :headlineLevel="5"/>
+            <CmdHeadline headlineText="Headline level 6" :headlineLevel="6"/>
         </CmdWidthLimitationWrapper>
         <!-- end custom-headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
@@ -1066,7 +1106,7 @@
                            :uploadOptions="{url: 'http://localhost:8888'}"
             />
             <h3>Advanced mode</h3>
-            <CmdUploadForm :cmdCustomHeadlineFieldset="{headlineText: 'Select files to upload', headlineLevel: 3}"
+            <CmdUploadForm :CmdHeadlineFieldset="{headlineText: 'Select files to upload', headlineLevel: 3}"
                            :enableDragAndDrop="true"
                            :allowedFileExtensions="['jpg', 'png']"
                            :allowMultipleFileUploads="true"
@@ -1076,23 +1116,25 @@
         </CmdWidthLimitationWrapper>
     </main>
 
-    <CmdWidthLimitationWrapper id="site-footer" inner-component="footer">
+    <CmdSiteFooter>
         <CmdSwitchLanguage :languages="languagesData" @click="doSomething"/>
-        <CmdListOfLinks :links="listOfLinksData"
-                        :cmdCustomHeadline="{headlineText: 'List of links', headlineLevel: 6}"
-        />
-        <CmdOpeningHours :openingHours="openingHoursData"
-                         :closed="true"
-                         :cmdCustomHeadline="{headlineText: 'Opening hours', headlineLevel: 6}"
-                         textOpenClosed="Closed right now!"
-                         textHolidaysClosed="Closed on holidays"
-                         textMiscInfo="Miscellaneous information"
-        />
-        <CmdAddressData :addressData="addressData"
-                        :linkGoogleMaps="true"
-                        :cmdCustomHeadline="{headlineText: 'Address data', headlineLevel: 6}"
-        />
-    </CmdWidthLimitationWrapper>
+        <div class="flex-container">
+            <CmdListOfLinks :links="listOfLinksData"
+                            :CmdHeadline="{headlineText: 'List of links', headlineLevel: 6}"
+            />
+            <CmdOpeningHours :openingHours="openingHoursData"
+                             :closed="true"
+                             :CmdHeadline="{headlineText: 'Opening hours', headlineLevel: 6}"
+                             textOpenClosed="Closed right now!"
+                             textHolidaysClosed="Closed on holidays"
+                             textMiscInfo="Miscellaneous information"
+            />
+            <CmdAddressData :addressData="addressData"
+                            :linkGoogleMaps="true"
+                            :CmdHeadline="{headlineText: 'Address data', headlineLevel: 6}"
+            />
+        </div>
+    </CmdSiteFooter>
 
     <CmdCopyrightInformation/>
 
@@ -1100,7 +1142,9 @@
         <CmdCookieDisclaimer :cookieOptions="cookieDisclaimerData"
                              buttonLabelAcceptAllCookies="Accept all cookies"
                              buttonLabelAcceptCurrentSettings="Accept current settings"
-                             @closeCookieDisclaimer="fancyBoxCookieDisclaimer = false"
+                             @closeCookieDisclaimer="closeCookieDisclaimer"
+                             v-model="acceptedCookies"
+
         >
             <template #privacy-text>
                 <p>
@@ -1128,8 +1172,11 @@ import fakeSelectCountriesData from '@/assets/data/fake-select-countries.json'
 import fakeSelectFilterOptionsData from '@/assets/data/fake-select-filter-options.json'
 import fakeSelectOptionsData from '@/assets/data/fake-select-options.json'
 import fakeSelectOptionsWithIconsData from '@/assets/data/fake-select-options-with-icons.json'
-import listOfLinksData from '@/assets/data/list-of-links.json'
 import imageGalleryData from '@/assets/data/image-gallery.json'
+import inputGroupRadiobuttonsData from '@/assets/data/input-group-radiobuttons.json'
+import inputGroupReplacedRadiobuttonsData from '@/assets/data/input-group-replaced-radiobuttons.json'
+import inputGroupToggleSwitchRadiobuttonsData from '@/assets/data/input-group-toggle-switch-radiobuttons.json'
+import listOfLinksData from '@/assets/data/list-of-links.json'
 import languagesData from '@/assets/data/switch-language.json'
 import multistepsData from '@/assets/data/multistep-form-progress-bar.json'
 import navigationData from '@/assets/data/main-navigation.json'
@@ -1152,7 +1199,7 @@ import CmdBreadcrumbs from "@/components/CmdBreadcrumbs.vue"
 import CmdCompanyLogo from "@/components/CmdCompanyLogo.vue"
 import CmdCopyrightInformation from "@/components/CmdCopyrightInformation.vue"
 import CmdCookieDisclaimer from "@/components/CmdCookieDisclaimer.vue"
-import CmdCustomHeadline from "@/components/CmdCustomHeadline.vue"
+import CmdHeadline from "@/components/CmdHeadline.vue"
 import CmdFakeSelect from "@/components/CmdFakeSelect.vue"
 import CmdFancyBox from "@/components/CmdFancyBox.vue"
 import CmdForm from "@/components/CmdForm.vue"
@@ -1170,6 +1217,7 @@ import CmdOpeningHours from "@/components/CmdOpeningHours"
 import CmdPager from "@/components/CmdPager.vue"
 import CmdProgressBar from "@/components/CmdProgressBar.vue"
 import CmdShareButtons from "@/components/CmdShareButtons.vue"
+import CmdSiteFooter from "./components/CmdSiteFooter"
 import CmdSiteHeader from "./components/CmdSiteHeader"
 import CmdSlideshow from "@/components/CmdSlideshow.vue"
 import CmdSwitchLanguage from "@/components/CmdSwitchLanguage.vue"
@@ -1199,7 +1247,7 @@ export default {
         CmdCompanyLogo,
         CmdCopyrightInformation,
         CmdCookieDisclaimer,
-        CmdCustomHeadline,
+        CmdHeadline,
         CmdFakeSelect,
         CmdFancyBox,
         CmdForm,
@@ -1216,6 +1264,7 @@ export default {
         CmdPager,
         CmdProgressBar,
         CmdShareButtons,
+        CmdSiteFooter,
         CmdSiteHeader,
         CmdSlideshow,
         CmdSwitchLanguage,
@@ -1231,41 +1280,21 @@ export default {
 
     data() {
         return {
+            acceptedCookies: ["google-maps"],
             showTooltip: false,
             disabledStatus: undefined,
             validationStatus: "",
             inputFieldPattern: "",
             inputSearch: "",
             textarea: "",
-            inputGroupValue1: "radiobuttonValue1",
-            inputGroupValue2: "website",
+            inputGroupRadio: "radiobuttonValue1",
+            inputGroupCheckbox: "website",
             inputGroupValueReplaceInputTypeRadio: "phone",
             inputGroupValueReplaceInputTypeCheckbox: ["phone"],
+            inputGroupValueToggleSwitchCheckbox: ["phone"],
+            inputGroupValueToggleSwitchRadio: "phone",
             inputGroupValue3: "email",
             inputGroupValue4: [],
-            inputGroupRadiobuttons: [
-                {
-                    labelText: "Website",
-                    id: "radio-id-1",
-                    name: "input-group-radio",
-                    iconClass: "icon-globe",
-                    value: "website"
-                },
-                {
-                    labelText: "E-Mail",
-                    id: "radio-id-2",
-                    name: "input-group-radio",
-                    iconClass: "icon-mail",
-                    value: "email"
-                },
-                {
-                    labelText: "Phone",
-                    id: "radio-id-3",
-                    name: "input-group-radio",
-                    iconClass: "icon-phone",
-                    value: "phone"
-                }
-            ],
             inputGroupCheckboxes: [
                 {
                     labelText: "Website",
@@ -1326,8 +1355,8 @@ export default {
             radiobuttonValue: "radiobuttonValue1",
             replacedRadiobuttonValue: "radiobuttonValue1",
             fancyBoxCookieDisclaimer: false,
-            fakeSelectDefault: "2",
-            fakeSelectDefaultWithIcons: "1",
+            fakeSelectDefault: 3,
+            fakeSelectDefaultWithIcons: 1,
             fakeSelectCheckbox: [1],
             fakeSelectFilters: [],
             datalist: {
@@ -1362,6 +1391,9 @@ export default {
             fakeSelectOptionsWithIconsData,
             listOfLinksData,
             imageGalleryData,
+            inputGroupRadiobuttonsData,
+            inputGroupReplacedRadiobuttonsData,
+            inputGroupToggleSwitchRadiobuttonsData,
             languagesData,
             multistepsData,
             navigationData,
@@ -1375,10 +1407,11 @@ export default {
             thumbnailScrollerData
         }
     },
-    mounted() {
-        document.querySelector('html').addEventListener('toggle-color-scheme', (event) => console.log('colorScheme:', event.detail))
-    },
     methods: {
+        closeCookieDisclaimer(event) {
+            this.fancyBoxCookieDisclaimer = false
+            alert(event.join(", "))
+        },
         setStatus(validationStatus, disabledStatus) {
             this.validationStatus = validationStatus
             this.disabledStatus = disabledStatus

package/src/assets/data/cookie-disclaimer.json

@@ -4,10 +4,10 @@
     "cookies": [
         {
           "id": "cookie-sessionid",
+          "value": "sessionid",
           "description": "This cookie is required for functionality",
           "labelText": "SessionID",
-          "checked": true,
-          "status": "disabled",
+          "disabled": true,
           "linkDataPrivacy": {
             "label": "Details for this cookie:",
             "link": "/content/data-privacy-en.html",
@@ -16,10 +16,10 @@
         },
         {
           "id": "cookie-google-recaptcha",
+          "value": "google-recaptcha",
           "description": "This cookie prevents bots from sending forms",
           "labelText": "Google reCaptcha™",
-          "checked": true,
-          "status": "disabled",
+          "disabled": true,
           "linkDataPrivacy": {
             "label": "Details for this cookie:",
             "link": "https://policies.google.com/privacy?hl=en-US",
@@ -34,9 +34,10 @@
     "cookies": [
       {
         "id": "cookie-google-maps",
+        "value": "google-maps",
         "description": "This cookie enables the Google Map™",
         "labelText": "Google Maps™",
-        "checked": false,
+        "disabled": false,
         "linkDataPrivacy": {
           "label": "Details for this cookie:",
           "link": "https://policies.google.com/privacy?hl=en-US",
@@ -46,9 +47,9 @@
       },
       {
         "id": "cookie-google-analytics",
+        "value": "google-analytics",
         "description": "This cookie collects anonymous data for statistics and improvements",
         "labelText": "Google Analytics™",
-        "checked": false,
         "linkDataPrivacy": {
           "label": "Details for this cookie:",
           "link": "https://policies.google.com/privacy?hl=en-US",

package/src/assets/data/input-group-radiobuttons.json

@@ -0,0 +1,23 @@
+[
+  {
+    "labelText": "Website",
+    "id": "radio-id-1",
+    "name": "input-group-radio",
+    "iconClass": "icon-globe",
+    "value": "website"
+  },
+  {
+    "labelText": "E-Mail",
+    "id": "radio-id-2",
+    "name": "input-group-radio",
+    "iconClass": "icon-mail",
+    "value": "email"
+  },
+  {
+    "labelText": "Phone",
+    "id": "radio-id-3",
+    "name": "input-group-radio",
+    "iconClass": "icon-phone",
+    "value": "phone"
+  }
+]

package/src/assets/data/input-group-replaced-radiobuttons.json

@@ -0,0 +1,23 @@
+[
+  {
+    "labelText": "Website",
+    "id": "replaced-radio-id-1",
+    "name": "input-group-replaced-radio",
+    "iconClass": "icon-globe",
+    "value": "website"
+  },
+  {
+    "labelText": "E-Mail",
+    "id": "replaced-radio-id-2",
+    "name": "input-group-replaced-radio",
+    "iconClass": "icon-mail",
+    "value": "email"
+  },
+  {
+    "labelText": "Phone",
+    "id": "replaced-radio-id-3",
+    "name": "input-group-replaced-radio",
+    "iconClass": "icon-phone",
+    "value": "phone"
+  }
+]

package/src/assets/data/input-group-toggle-switch-radiobuttons.json

@@ -0,0 +1,23 @@
+[
+  {
+    "labelText": "Website",
+    "id": "toggle-switch-radio-id-1",
+    "name": "input-group-toggle-switch-radio",
+    "iconClass": "icon-globe",
+    "value": "website"
+  },
+  {
+    "labelText": "E-Mail",
+    "id": "replaced-radio-id-2",
+    "name": "toggle-switch-group-toggle-switch-radio",
+    "iconClass": "icon-mail",
+    "value": "email"
+  },
+  {
+    "labelText": "Phone",
+    "id": "toggle-switch-radio-id-3",
+    "name": "input-group-toggle-switch-radio",
+    "iconClass": "icon-phone",
+    "value": "phone"
+  }
+]