comand-component-library 3.1.74 → 3.1.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.74",
+  "version": "3.1.77",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -18,7 +18,7 @@
   ],
   "dependencies": {
     "clickout-event": "^1.1.2",
-    "comand-frontend-framework": "^3.2.62",
+    "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,6 +577,7 @@
 
                     <!-- begin input-groups -->
                     <h2>Input-Groups</h2>
+                    <h3>Input Group with Radiobuttons [native]</h3>
                     <CmdInputGroup
                         labelText="Group label for radio-group given by slot:"
                         :useSlot="true"
@@ -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"
                         />
@@ -611,21 +614,22 @@
                     <CmdInputGroup
                         labelText="Grouplabel for radio-group given by property:"
                         :required="true"
-                        :inputElements="inputGroupRadiobuttons"
+                        :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"
+                        :inputElements="inputGroupReplacedRadiobuttonsData"
                         inputTypes="radio"
                         v-model="inputGroupValueReplaceInputTypeRadio"
                         :replaceInputType="true"
@@ -633,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"
+                        :inputElements="inputGroupReplacedRadiobuttonsData"
                         inputTypes="checkbox"
                         v-model="inputGroupValueReplaceInputTypeCheckbox"
                         :replaceInputType="true"
-                        required="required"
+                        :required="true"
                         :status="validationStatus"
                         :disabled="disabledStatus"
                     />
@@ -654,9 +658,11 @@
                             <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="inputGroupRadiobuttons"
+                        :inputElements="inputGroupRadiobuttonsData"
                         inputTypes="checkbox"
                         v-model="inputGroupValueToggleSwitchCheckbox"
                         :toggleSwitch="true"
@@ -672,7 +678,7 @@
                     </dl>
                     <CmdInputGroup
                         labelText="Grouplabel for radio-group styled as toggle-switches:"
-                        :inputElements="inputGroupRadiobuttons"
+                        :inputElements="inputGroupToggleSwitchRadiobuttonsData"
                         inputTypes="radio"
                         v-model="inputGroupValueToggleSwitchRadio"
                         :toggleSwitch="true"
@@ -688,7 +694,7 @@
                     </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'}))"
+                        :inputElements="inputGroupRadiobuttonsData.map(item => ({...item, id: item.id + '-multi', name: item.name + '-multi'}))"
                         inputTypes="radio"
                         :multipleSwitch="true"
                         v-model="inputGroupValue3"
@@ -706,6 +712,7 @@
                         :inputElements="inputGroupCheckboxes"
                         inputTypes="checkbox"
                         :multipleSwitch="true"
+                        :required="true"
                         v-model="inputGroupValue4"
                         :stretchHorizontally="true"
                         :status="validationStatus"
@@ -837,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>
@@ -890,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 ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
@@ -1099,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"
@@ -1109,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/>
 
@@ -1163,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'
@@ -1187,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"
@@ -1205,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"
@@ -1234,7 +1247,7 @@ export default {
         CmdCompanyLogo,
         CmdCopyrightInformation,
         CmdCookieDisclaimer,
-        CmdCustomHeadline,
+        CmdHeadline,
         CmdFakeSelect,
         CmdFancyBox,
         CmdForm,
@@ -1251,6 +1264,7 @@ export default {
         CmdPager,
         CmdProgressBar,
         CmdShareButtons,
+        CmdSiteFooter,
         CmdSiteHeader,
         CmdSlideshow,
         CmdSwitchLanguage,
@@ -1273,37 +1287,14 @@ export default {
             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",
@@ -1364,8 +1355,8 @@ export default {
             radiobuttonValue: "radiobuttonValue1",
             replacedRadiobuttonValue: "radiobuttonValue1",
             fancyBoxCookieDisclaimer: false,
-            fakeSelectDefault: "2",
-            fakeSelectDefaultWithIcons: "1",
+            fakeSelectDefault: 3,
+            fakeSelectDefaultWithIcons: 1,
             fakeSelectCheckbox: [1],
             fakeSelectFilters: [],
             datalist: {
@@ -1400,6 +1391,9 @@ export default {
             fakeSelectOptionsWithIconsData,
             listOfLinksData,
             imageGalleryData,
+            inputGroupRadiobuttonsData,
+            inputGroupReplacedRadiobuttonsData,
+            inputGroupToggleSwitchRadiobuttonsData,
             languagesData,
             multistepsData,
             navigationData,

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"
+  }
+]

package/src/assets/styles/global-styles.scss

@@ -33,6 +33,11 @@
 @import 'variables'; /* scss-variables (only used for media-query-breakpoints) */
 /* ---------------------------------------------- END IMPORTS -------------------------------------------------- */
 
+body, .cmd-site-header, .cmd-site-footer, .cmd-copyright-information {
+  transition: background linear .5s;
+}
+
+
 /* ---------------------------------------------- BEGIN COMPONENTS AND GLOBAL STYLES -------------------------------------------------- */
 /* begin .avoid-scrolling --------------------------------------------------------------------------------------------------------------------------------------------------- */
 body.avoid-scrolling {
@@ -184,7 +189,7 @@ body.avoid-scrolling {
 
   &.has-state, & + .cmd-tooltip {
     .label-text {
-      span, sup {
+      > span, > a, sup {
         color: var(--status-color);
       }
     }
@@ -220,14 +225,6 @@ body.avoid-scrolling {
     --grid-small-span: 3; /* default column span smaller part */
     --grid-large-span: 3; /* default column span larger part */
   }
-
-  #site-footer  {
-    footer {
-      li {
-        margin-bottom: calc(var(--default-margin) * 2);
-      }
-    }
-  }
 }
 /* end styles for medium screens --------------------------------------------------------------------------------------------------------------------------------------------------- */
 
@@ -246,16 +243,6 @@ body.avoid-scrolling {
     padding: calc(var(--default-padding) * 2) 0;
   }
 
-  #site-footer {
-    a {
-      text-decoration: underline;
-
-      &:active {
-        text-decoration: none;
-      }
-    }
-  }
-
   a[href^="tel"] {
     text-decoration: underline;
   }
@@ -283,6 +270,10 @@ html {
     --color-scheme-text-color-inverted: var(--light-mode-text-color);
     --color-scheme-background-inverted: var(--light-mode-background-color);
     --default-background-color-lightness: 20%;
+
+    :where(label, .label) .label-text [class*="icon"] {
+      background: var(--dark-gray);
+    }
   }
 }
 

package/src/components/CmdAddressData.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="cmd-address-data vcard">
-        <!-- begin CmdCustomHeadline -->
-        <CmdCustomHeadline v-if="cmdCustomHeadline" v-bind="cmdCustomHeadline" />
-        <!-- end CmdCustomHeadline -->
+        <!-- begin CmdHeadline -->
+        <CmdHeadline v-if="CmdHeadline" v-bind="CmdHeadline" />
+        <!-- end CmdHeadline -->
 
         <!-- begin address-data in vCard microformat -->
         <address class="adr">
@@ -120,13 +120,13 @@ import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdAddressData/DefaultMessageProperties"
 
 // import components
-import CmdCustomHeadline from "./CmdCustomHeadline"
+import CmdHeadline from "./CmdHeadline"
 
 export default {
     name: "CmdAddressData",
     mixins: [I18n, DefaultMessageProperties],
     components: {
-        CmdCustomHeadline
+        CmdHeadline
     },
     props: {
         /**
@@ -144,9 +144,9 @@ export default {
             default: true
         },
         /**
-         * properties for CmdCustomHeadline-component
+         * properties for CmdHeadline-component
          */
-        cmdCustomHeadline: {
+        cmdHeadline: {
             type: Object,
             required: false
         },

package/src/components/CmdBankAccountData.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="cmd-bank-account-data">
-        <!-- begin CmdCustomHeadline -->
-        <CmdCustomHeadline v-if="cmdCustomHeadline" v-bind="cmdCustomHeadline"/>
-        <!-- end CmdCustomHeadline -->
+        <!-- begin CmdHeadline -->
+        <CmdHeadline v-if="CmdHeadline" v-bind="CmdHeadline"/>
+        <!-- end CmdHeadline -->
 
         <!-- begin account data -->
         <dl>
@@ -27,11 +27,11 @@
 
 <script>
 // import components
-import CmdCustomHeadline from "./CmdCustomHeadline"
+import CmdHeadline from "./CmdHeadline"
 
 export default {
     name: "CmdBankAccountData",
-    components: {CmdCustomHeadline},
+    components: {CmdHeadline},
     props: {
         /**
          * bank account data
@@ -71,9 +71,9 @@ export default {
             }
         },
         /**
-         * properties for CmdCustomHeadline-component
+         * properties for CmdHeadline-component
          */
-        cmdCustomHeadline: {
+        cmdHeadline: {
             type: Object,
             required: false
         }