comand-component-library 4.0.18 → 4.0.20

package/src/components/CmdBasicForm.vue

@@ -10,6 +10,7 @@
             novalidate="novalidate"
             :textLegend="getMessage('basic_form.legend')"
             :submitButton="submitButton"
+            :formAction="formAction"
         >
             <div v-if="configuration.salutation" class="flex-container no-flex order-male-female">
                 <!-- begin cmd-form-element -->
@@ -20,7 +21,7 @@
                     :name="configuration.salutation?.name || 'salutation'"
                     inputValue="m"
                     :replaceInputType="configuration.salutation?.replaceInputType"
-                    v-model="formData.salutation"
+                    v-model="formData.salutation.value"
                     @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
@@ -33,7 +34,7 @@
                     :name="configuration.salutation?.name || 'salutation'"
                     inputValue="f"
                     :replaceInputType="configuration.salutation?.replaceInputType"
-                    v-model="formData.salutation"
+                    v-model="formData.salutation.value"
                     @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
@@ -181,7 +182,7 @@
                         :labelText="getMessage('basic_form.labeltext.city')"
                         :placeholder="getMessage('basic_form.placeholder.city')"
                         :required="configuration.city?.required"
-                        :name="configuration.city?.name || 'zip'"
+                        :name="configuration.city?.name || 'city'"
                         v-model="formData.city.value"
                         :status="formData.city.error ? 'error' : ''"
                         @validate="onValidate"
@@ -207,14 +208,14 @@
 
             <!-- begin cmd-form-element -->
             <CmdFormElement
-                v-if="configuration.additionalText"
-                :element="configuration.additionalText?.element || 'textarea'"
-                :labelText="getMessage('basic_form.labeltext.additional_text')"
-                :placeholder="getMessage('basic_form.placeholder.additional_text')"
-                :required="configuration.additionalText?.required"
-                :name="configuration.additionalText?.name || 'additional-text'"
-                v-model="formData.additionalText.value"
-                :status="formData.additionalText.error ? 'error' : ''"
+                v-if="configuration.userMessage"
+                :element="configuration.userMessage?.element || 'textarea'"
+                :labelText="getMessage('basic_form.labeltext.user_message')"
+                :placeholder="getMessage('basic_form.placeholder.user_message')"
+                :required="configuration.userMessage?.required"
+                :name="configuration.userMessage?.name || 'user-message'"
+                v-model="formData.userMessage.value"
+                :status="formData.userMessage.error ? 'error' : ''"
                 @validate="onValidate"
             />
             <!-- end cmd-form-element -->
@@ -249,8 +250,10 @@
 import I18n from "../mixins/I18n.js"
 import DefaultMessageProperties from "../mixins/CmdBasicForm/DefaultMessageProperties.js"
 import FieldValidation from "../mixins/FieldValidation.js"
+import {ContactFormValidator} from "@/utils/ContactFormValidation.js";
 
 export default {
+    emits: ["submit"],
     mixins: [
         I18n,
         DefaultMessageProperties,
@@ -263,8 +266,9 @@ export default {
     },
     data() {
         return {
+            validator: new ContactFormValidator(label => label),
             formData: {
-                salutation: this.configuration.salutation.default,
+                salutation: {value: this.configuration.salutation.default},
                 lastName: {value: ''},
                 firstName: {value: ''},
                 email: {value: ''},
@@ -275,13 +279,27 @@ export default {
                 pobox: {value: ''},
                 country: {value: ''},
                 additionalAddressInfo: {value: ''},
-                additionalText: {value: ''},
+                userMessage: {value: ''},
                 acceptPrivacy: {value: false}
             },
             cityBeforeZip: this.showCityBeforeZip
         }
     },
     props: {
+        /**
+         * activate if native submit-event should be used
+         */
+        useNativeSubmit: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * set url for form-action
+         */
+        formAction: {
+            type: String,
+            required: false
+        },
         /**
          * configuration for form-elements used in form
          */
@@ -345,7 +363,7 @@ export default {
                         required: false,
                         type: "text"
                     },
-                    additionalText: {
+                    userMessage: {
                         required: false,
                         element: "textarea"
                     },
@@ -406,15 +424,40 @@ export default {
     },
     methods: {
         onSubmit(event) {
-            this.onValidate();
+            this.onValidate()
 
             this.formData = Object.assign({}, this.validator.validatePrivacy(this.formData));
-            if (this.formData.error) {
-                event.preventDefault();
-                return;
+
+            if (this.formData.error || this.useNativeSubmit) {
+                if(this.formData.error) {
+                    // prevent original event from CmdForm (to avoid submit and reload)
+                    event.originalEvent.preventDefault()
+                }
+                return
+            }
+
+            // custom submit of form-data
+            const customSubmitFormData = new FormData()
+            // get keys for form-elements from configuration
+            const configurationEntries = Object.keys(this.configuration)
+
+            for(let i = 0; i < configurationEntries.length; i++) {
+                // assign formData values to form-element key
+                customSubmitFormData.set(configurationEntries[i], this.formData[configurationEntries[i]].value)
             }
 
-            event.preventDefault();
+            fetch(this.formAction, {method: "POST", body: customSubmitFormData}).then((response) => {
+                if(response.ok) {
+                    console.log("CmdBasicForm", "ok")
+                } else {
+                    console.log("CmdBasicForm", "fail")
+                }
+            }).catch((error) => {
+                console.error(error)
+            })
+
+            // prevent original levent form CmdForm (to avoid submit and reload)
+            event.originalEvent.preventDefault()
         },
         onCountrySelect(event) {
           this.cityBeforeZip = event === 'us' || event === 'uk';

package/src/components/CmdBox.vue

@@ -395,7 +395,7 @@ export default {
             type: Object,
             default: function () {
                 return {
-                    iconClass: "icon-single-arrow-up",
+                    iconClass: "icon-chevron-one-stripe-up",
                     tooltip: "Close content",
                     iconType: "auto"
                 }
@@ -410,7 +410,7 @@ export default {
             type: Object,
             default: function () {
                 return {
-                    iconClass: "icon-single-arrow-down",
+                    iconClass: "icon-chevron-one-stripe-down",
                     tooltip: "Show content",
                     iconType: "auto"
                 }

package/src/components/CmdBoxWrapper.vue

@@ -103,7 +103,7 @@ export default {
             type: Object,
             default() {
                 return {
-                    iconClass: "icon-double-arrow-down",
+                    iconClass: "icon-chevron-two-stripes-down",
                     tooltip: "Collapse all boxes"
                 }
             }
@@ -115,7 +115,7 @@ export default {
             type: Object,
             default() {
                 return {
-                    iconClass: "icon-double-arrow-up",
+                    iconClass: "icon-chevron-two-stripes-up",
                     tooltip: "Expand all boxes"
                 }
             }

package/src/components/CmdFakeSelect.vue

@@ -279,13 +279,13 @@ export default {
          * icon for dropdown-icon (i.e. an angle/arrow)
          *
          * @requiredForAccessibility: partial
-         * @defaultIcon: icon-single-arrow-down
+         * @defaultIcon: icon-chevron-one-stripe-down
          */
         iconDropdown: {
             type: Object,
             default() {
                 return {
-                    iconClass: "icon-single-arrow-down",
+                    iconClass: "icon-chevron-one-stripe-down",
                     tooltip: "Toggle dropdown visibility",
                     iconType: "auto"
                 }

package/src/components/CmdForm.vue

@@ -1,5 +1,5 @@
 <template>
-    <form class="cmd-form" :data-use-validation="useValidation" @submit="onSubmit" :class="{error: errorOccurred}" :novalidate="novalidate">
+    <form class="cmd-form" :action="formAction" :data-use-validation="useValidation" @submit="onSubmit" :class="{error: errorOccurred}" :novalidate="novalidate">
         <template v-if="useFieldset">
             <fieldset class="flex-container">
                 <legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
@@ -73,6 +73,13 @@ export default {
         }
     },
     props: {
+        /**
+         * set url for form-action
+         */
+        formAction: {
+            type: String,
+            required: false
+        },
         /**
          * activate if form-elements should be given by slot
          */
@@ -153,10 +160,11 @@ export default {
         submitFormData(event) {
             // fill formdata with names and value
             let formdata = {}
-            this.formElements.forEach((element) => {
-                formdata[element.name] = this.formValues[element.name]
-            })
-
+            if(this.formElements) {
+                this.formElements.forEach((element) => {
+                    formdata[element.name] = this.formValues[element.name]
+                })
+            }
             this.$emit("submit", {originalEvent: event, formdata: formdata})
         },
         onSubmit(event) {

package/src/components/CmdLoginForm.vue

@@ -323,7 +323,7 @@ export default {
                     backToLoginForm: {
                         icon: {
                             show: true,
-                            iconClass: "icon-single-arrow-left",
+                            iconClass: "icon-chevron-one-stripe-left",
                             tooltip: ""
                         },
                         text: "Back to login form"

package/src/components/CmdMainNavigation.vue

@@ -247,14 +247,14 @@ export default {
          */
         subentriesIconClass: {
             type: String,
-            default: "icon-single-arrow-down"
+            default: "icon-chevron-one-stripe-down"
         },
         /**
          * icon to show if a sub-entry has further sub-entries
          */
         subSubentriesIconClass: {
             type: String,
-            default: "icon-single-arrow-right"
+            default: "icon-chevron-one-stripe-right"
         }
     },
     methods: {

package/src/components/CmdMultistepFormProgressBar.vue

@@ -84,7 +84,7 @@ export default {
         separatorIconClass: {
             type: String,
             default() {
-                return "icon-single-arrow-right"
+                return "icon-chevron-one-stripe-right"
             }
         },
         useGap: {

package/src/components/CmdPagination.vue

@@ -105,7 +105,7 @@ export default {
             type: Object,
             default: function () {
                 return {
-                    iconClass: "icon-single-arrow-left",
+                    iconClass: "icon-chevron-one-stripe-left",
                     text: "prev",
                     showText: true
                 }
@@ -120,7 +120,7 @@ export default {
             type: Object,
             default: function () {
                 return {
-                    iconClass: "icon-single-arrow-right",
+                    iconClass: "icon-chevron-one-stripe-right",
                     text: "next",
                     showText: true
                 }

package/src/components/CmdSidebar.vue

@@ -94,14 +94,14 @@ export default {
         iconClassOpenCollapse() {
             if (this.collapseToLeft) {
                 if (this.open) {
-                    return "icon-single-arrow-left"
+                    return "icon-chevron-one-stripe-left"
                 }
-                return "icon-single-arrow-right"
+                return "icon-chevron-one-stripe-right"
             } else {
                 if (this.open) {
-                    return "icon-single-arrow-right"
+                    return "icon-chevron-one-stripe-right"
                 }
-                return "icon-single-arrow-left"
+                return "icon-chevron-one-stripe-left"
             }
         }
     },

package/src/components/CmdSiteHeader.vue

@@ -257,8 +257,8 @@ export default {
     }
 
     header {
-        padding-top: calc(var(--default-padding) * 2);
-        padding-bottom: calc(var(--default-padding) * 2);
+        padding-top: var(--default-padding);
+        padding-bottom: var(--default-padding);
         row-gap: 0;
 
         &.has-navigation {

package/src/components/CmdSiteSearch.vue

@@ -294,11 +294,11 @@ export default {
             default() {
                 return {
                     showFilters: {
-                        iconClass: "icon-single-arrow-up",
+                        iconClass: "icon-chevron-one-stripe-up",
                         type: "auto"
                     },
                     hideFilters: {
-                        iconClass: "icon-single-arrow-down",
+                        iconClass: "icon-chevron-one-stripe-down",
                         type: "auto"
                     }
                 }

package/src/components/CmdSlideButton.vue

@@ -39,19 +39,19 @@ export default {
             default: function() {
                 return {
                     prev: {
-                        iconClass: "icon-single-arrow-left",
+                        iconClass: "icon-chevron-one-stripe-left",
                         tooltip: "Previous"
                     },
                     next: {
-                        iconClass: "icon-single-arrow-right",
+                        iconClass: "icon-chevron-one-stripe-right",
                         tooltip: "Next"
                     },
                     up: {
-                        iconClass: "icon-single-arrow-up",
+                        iconClass: "icon-chevron-one-stripe-up",
                         tooltip: "Previous"
                     },
                     down: {
-                        iconClass: "icon-single-arrow-down",
+                        iconClass: "icon-chevron-one-stripe-down",
                         tooltip: "Next"
                     }
                 }

package/src/components/CmdSlideshow.vue

@@ -164,14 +164,14 @@ export default {
                 return {
                     next: {
                         next: {
-                            "iconClass": "icon-single-arrow-right",
+                            "iconClass": "icon-chevron-one-stripe-right",
                             "tooltip": "Next"
                         }
                     },
                     prev: {
                         prev: {
                             "type": "prev",
-                            "iconClass": "icon-single-arrow-left",
+                            "iconClass": "icon-chevron-one-stripe-left",
                             "tooltip": "Previous"
                         }
                     }
@@ -367,6 +367,7 @@ export default {
         justify-content: center;
 
         > a:not(.button) {
+            display: block;
             text-decoration: none;
 
             figcaption {
@@ -417,9 +418,9 @@ export default {
                 padding: .2rem;
                 list-style-type: none;
                 margin: 0;
-                border: var(--default-border-reduced-opacity);
                 border-radius: var(--full-circle);
                 background: var(--light-gray);
+                border: var(--default-border-reduced-opacity);
 
                 a {
                     display: block;
@@ -473,6 +474,10 @@ export default {
             background: var(--pure-white-reduced-opacity);
         }
     }
+
+    .fade-enter-from, .fade-leave-to {
+        position: absolute;
+    }
 }
 
 .edit-mode .cmd-slideshow .image-wrapper.edit-items {

package/src/components/CmdTable.vue

@@ -141,7 +141,7 @@ export default {
             type: Object,
             default: function () {
                 return {
-                    iconClass: "icon-single-arrow-down",
+                    iconClass: "icon-chevron-one-stripe-down",
                     tooltip: "Expand table"
                 }
             }
@@ -155,7 +155,7 @@ export default {
             type: Object,
             default: function () {
                 return {
-                    iconClass: "icon-single-arrow-up",
+                    iconClass: "icon-chevron-one-stripe-up",
                     tooltip: "Collapse table"
                 }
             }
@@ -183,7 +183,7 @@ export default {
             type: Object,
             default: function () {
                 return {
-                    iconClass: "icon-single-arrow-right",
+                    iconClass: "icon-chevron-one-stripe-right",
                     tooltip: "Stretch table"
                 }
             }

package/src/components/CmdThumbnailScroller.vue

@@ -230,14 +230,14 @@ export default {
                     next: {
                         next: {
                             type: "next",
-                            iconClass: "icon-single-arrow-right",
+                            iconClass: "icon-chevron-one-stripe-right",
                             tooltip: "Next"
                         }
                     },
                     prev: {
                         prev: {
                             type: "prev",
-                            iconClass: "icon-single-arrow-left",
+                            iconClass: "icon-chevron-one-stripe-left",
                             tooltip: "Previous"
                         }
                     }

package/src/documentation/generated/CmdFakeSelectPropertyDescriptions.json

@@ -60,7 +60,7 @@
                 "partial"
             ],
             "defaultIcon": [
-                "icon-single-arrow-down"
+                "icon-chevron-one-stripe-down"
             ]
         }
     },

package/src/index.js

@@ -2,6 +2,7 @@
 export { default as CmdAddressData } from '@/components/CmdAddressData.vue'
 export { default as CmdBackToTopButton } from '@/components/CmdBackToTopButton.vue'
 export { default as CmdBankAccountData } from '@/components/CmdBankAccountData.vue'
+export { default as CmdBasicForm } from '@/components/CmdBasicForm.vue'
 export { default as CmdBox } from '@/components/CmdBox.vue'
 export { default as CmdBoxWrapper } from '@/components/CmdBoxWrapper.vue'
 export { default as CmdBreadcrumbs } from '@/components/CmdBreadcrumbs.vue'
@@ -51,7 +52,6 @@ export { default as CmdWidthLimitationWrapper } from '@/components/CmdWidthLimit
 export { default as EditComponentWrapper } from '@/components/EditComponentWrapper.vue'
 
 // export page-components
-export { default as BasicForm } from '@/components/CmdBasicForm.vue'
 export { default as ContactInformation } from '@/pages/ContactInformation.vue'
 export { default as MultipleBoxWrapper } from '@/pages/MultipleBoxWrapper.vue'
 export { default as MultipleListsOfLinks } from '@/pages/MultipleListsOfLinks.vue'

package/src/mixins/CmdBasicForm/DefaultMessageProperties.js

@@ -24,8 +24,8 @@ export default {
         "basic_form.labeltext.country": "Country:",
         "basic_form.labeltext.additional_address_info": "Additional address information:",
         "basic_form.placeholder.additional_address_info": "Additional address information",
-        "basic_form.labeltext.additional_text": "Additional text:",
-        "basic_form.placeholder.additional_text": "Additional text",
+        "basic_form.labeltext.user_message": "Your message:",
+        "basic_form.placeholder.user_message": "Your message",
         "basic_form.labeltext.data_privacy": "I accept handling and saving of my personal data a mentioned in the <a href='/content/data-privacy-en.html' class='fancybox'>private policy</a>."
       }
     }

package/src/pages/PageWrapper.vue

@@ -204,7 +204,7 @@ export default {
     computed: {
         iconBackToTop() {
             return {
-                iconClass: "icon-single-arrow-up",
+                iconClass: "icon-chevron-one-stripe-up",
                 tooltip: this.label("back_to_top_button.tooltip")
             }
         }

package/src/utils/ContactFormValidation.js

@@ -0,0 +1,45 @@
+// noinspection CommaExpressionJS
+class ContactFormValidator {
+    static PATTERN_SURNAME = /^[a-züöäßáéíóàèìòêîô '-]+$/i
+    static PATTERN_EMAIL = /^[a-z\d._%+-]+@[a-z\d._%+-]+\.[a-z]{2,}$/i
+    static PATTERN_MESSAGE = /^.{2,500}$/
+
+    label
+
+    constructor(label) {
+        this.label = label
+    }
+
+    validate(formData) {
+        [formData.lastName.error, formData.lastName.errorMessage] = this.validateRequired(
+            formData.lastName.value, ContactFormValidator.PATTERN_SURNAME, this.label('form_error_invalid_surname'))
+            [formData.email.error, formData.email.errorMessage] = this.validateRequired(
+            formData.email.value, ContactFormValidator.PATTERN_EMAIL, this.label('form_error_invalid_email'))
+            [formData.additionalText.error, formData.additionalText.errorMessage] = this.validateRequired(
+            formData.additionalText.value, ContactFormValidator.PATTERN_MESSAGE, this.label('form_error_invalid_message'))
+        formData.acceptPrivacy.error = false
+        formData.error = formData.lastName.error
+            || formData.email.error
+            || formData.additionalText.error
+        return formData
+    }
+
+    validatePrivacy(formData) {
+        formData.acceptPrivacy.error = !formData.acceptPrivacy.value
+        formData.acceptPrivacy.errorMessage = formData.acceptPrivacy.error ? this.label('form_error_missing_privacy_consent') : ''
+        formData.error = formData.error || formData.acceptPrivacy.error
+        return formData
+    }
+
+    validateRequired(value, pattern, errorMessage) {
+        if (!value || value.trim().length === 0) {
+            return [true, this.label('form_error_empty')]
+        }
+        if (pattern && !pattern.test(value)) {
+            return [true, errorMessage || this.label('form_error_invalid')]
+        }
+        return [false, '']
+    }
+}
+
+export { ContactFormValidator }

package/src/assets/fonts/iconfonts/logos-iconfont/images/flags/flag-cn.svg

@@ -1,26 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="850.395px" height="566.929px" viewBox="0 0 850.395 566.929" enable-background="new 0 0 850.395 566.929"
-	 xml:space="preserve">
-<symbol  id="Stern" viewBox="-80.297 -76.367 160.595 152.734">
-	<polygon fill="#FFDE08" points="0,76.367 20.678,20.397 80.298,18.027 33.457,-18.934 49.627,-76.367 0,-43.241 -49.626,-76.367 
-		-33.457,-18.934 -80.297,18.027 -20.677,20.397 	"/>
-</symbol>
-<g id="cn">
-	<g>
-		<rect fill="#DF2B14" width="850.395" height="566.929"/>
-		
-			<use xlink:href="#Stern"  width="160.595" height="152.734" x="-80.297" y="-76.367" transform="matrix(1 0 0 -1 141.4941 133.5356)" overflow="visible"/>
-		
-			<use xlink:href="#Stern"  width="160.595" height="152.734" x="-80.297" y="-76.367" transform="matrix(0.318 0.1158 0.1158 -0.318 282.7402 57.1685)" overflow="visible"/>
-		
-			<use xlink:href="#Stern"  width="160.595" height="152.734" x="-80.297" y="-76.367" transform="matrix(0.318 -0.1158 -0.1158 -0.318 341.1777 115.0728)" overflow="visible"/>
-		
-			<use xlink:href="#Stern"  width="160.595" height="152.734" x="-80.297" y="-76.367" transform="matrix(0.318 0.1158 0.1158 -0.318 284.2407 256.6177)" overflow="visible"/>
-		
-			<use xlink:href="#Stern"  width="160.595" height="152.734" x="-80.297" y="-76.367" transform="matrix(0.3384 0 0 -0.3384 340.73 194.541)" overflow="visible"/>
-	</g>
-</g>
-</svg>