comand-component-library 3.1.73 → 3.1.76

package/src/components/CmdTooltipForInputElements.vue

@@ -0,0 +1,122 @@
+<template>
+    <!-- begin CmdTooltip -->
+    <CmdTooltip
+        ref="tooltip"
+        class="box"
+        :class="validationStatus"
+        :relatedId="relatedId"
+        :toggle-visibility-by-click="true">
+
+        <!-- begin CmdSystemMessage -->
+        <CmdSystemMessage
+            v-if="inputAttributes.required && validationMessage"
+            :systemMessage="validationMessage"
+            :validation-status="validationStatus"
+            :iconClose="{show: false}"
+        />
+        <!-- end CmdSystemMessage -->
+
+        <!-- begin CmdListOfRequirements -->
+        <CmdListOfRequirements
+            v-if="showRequirements"
+            :inputRequirements="inputRequirements"
+            :helplink="helplink"
+            :inputModelValue="inputModelValue"
+            :inputAttributes="inputAttributes"
+            :validationTooltip="validationTooltip"
+        />
+        <!-- end CmdListOfRequirements -->
+    </CmdTooltip>
+    <!-- end CmdTooltip -->
+</template>
+
+<script>
+// import components
+import CmdListOfRequirements from "./CmdListOfRequirements"
+import CmdSystemMessage from "./CmdSystemMessage"
+import CmdTooltip from "./CmdTooltip"
+
+export default {
+    name: "CmdTooltipForInputElements",
+    components: {
+        CmdListOfRequirements,
+        CmdSystemMessage,
+        CmdTooltip
+    },
+    props: {
+        /**
+         * related-id for CmdTooltip-component
+         */
+        relatedId: {
+            type: String,
+            default: ""
+        },
+        /**
+         * validation-status for CmdSystemMessage-component and CmdTooltip-component
+         */
+        validationStatus: {
+            type: String,
+            default: ""
+        },
+        /**
+         * validation-message for CmdSystemMessage-component
+         */
+        validationMessage: {
+            type: String,
+            default: ""
+        },
+        /**
+         * toggle visibility for CmdListOfRequirements-component
+         */
+        showRequirements: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * validation-tooltip for CmdListOfRequirements-component
+         */
+        validationTooltip: {
+            type: String,
+            default: ""
+        },
+        /**
+         * list of input-requirements for CmdListOfRequirements-component
+         */
+        inputRequirements: {
+            type: Array,
+            default() {
+                return []
+            }
+        },
+        /**
+         * input-attributes for CmdListOfRequirements-component
+         */
+        inputAttributes: {
+            type: Object,
+            default() {
+                return {}
+            }
+        },
+        /**
+         * input-model-value for CmdListOfRequirements-component
+         */
+        inputModelValue: {
+            type: [String, Boolean, Array, Number],
+            default: ""
+        },
+        /**
+         * helplink for CmdListOfRequirements-component
+         */
+        helplink: {
+            type: String,
+            default: ""
+        }
+    },
+    methods: {
+        hideTooltip() {
+            // close tooltip by calling function from CmdTooltip using $refs
+            this.$refs.tooltip.hideTooltip()
+        }
+    }
+}
+</script>

package/src/components/CmdUploadForm.vue

@@ -2,11 +2,11 @@
     <!-- begin advanced mode -->
     <fieldset v-if="advancedMode" :class="['cmd-upload-form flex-container', { 'upload-initiated': uploadInitiated }]">
         <legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
-        <!-- begin CmdCustomHeadlineFieldset -->
-        <CmdCustomHeadline v-if="cmdCustomHeadlineFieldset"
-                           v-bind="cmdCustomHeadlineFieldset"
+        <!-- begin CmdHeadlineFieldset -->
+        <CmdHeadline v-if="CmdHeadlineFieldset"
+                           v-bind="CmdHeadlineFieldset"
         />
-        <!-- end CmdCustomHeadlineFieldset -->
+        <!-- end CmdHeadlineFieldset -->
 
         <!-- begin CmdSystemMessage -->
         <CmdSystemMessage
@@ -25,20 +25,20 @@
 
         <div :class="['box drop-area flex-container vertical', { 'allow-drop': allowDrop }]" v-on="dragAndDropHandler">
             <template v-if="!listOfFiles.length">
-                <CmdCustomHeadline v-if="allowMultipleFileUploads" v-bind="cmdCustomHeadlineNoFilesToUpload" headlineLevel="4">
+                <CmdHeadline v-if="allowMultipleFileUploads" v-bind="CmdHeadlineNoFilesToUpload" headlineLevel="4">
                     {{ getMessage("cmduploadform.no_files_to_upload") }}
-                </CmdCustomHeadline>
-                <CmdCustomHeadline v-else v-bind="cmdCustomHeadlineNoFilesToUpload" headlineLevel="4">
+                </CmdHeadline>
+                <CmdHeadline v-else v-bind="CmdHeadlineNoFilesToUpload" headlineLevel="4">
                     {{ getMessage("cmduploadform.no_file_to_upload") }}
-                </CmdCustomHeadline>
+                </CmdHeadline>
             </template>
 
             <!-- begin total-upload information -->
             <div v-else class="flex-container vertical">
                 <div v-if="showTotalUpload && listOfFiles.length !== 1" class="flex-container vertical list-files-wrapper">
-                    <CmdCustomHeadline v-bind="cmdCustomHeadlineSummaryOfAllFiles" headlineLevel="4">
+                    <CmdHeadline v-bind="CmdHeadlineSummaryOfAllFiles" headlineLevel="4">
                         {{ getMessage("cmduploadform.headline.summary_of_all_files") }}
-                    </CmdCustomHeadline>
+                    </CmdHeadline>
                     <ul v-if="showTotalUpload && listOfFiles.length !== 1" class="list-of-files total-files">
                         <li class="flex-container no-flex">
                             <a
@@ -80,9 +80,9 @@
 
                 <div class="flex-container vertical list-files-wrapper">
                     <!-- begin list of selected files -->
-                    <CmdCustomHeadline v-bind="cmdCustomHeadlineListOfSelectedFiles" headlineLevel="4">
+                    <CmdHeadline v-bind="CmdHeadlineListOfSelectedFiles" headlineLevel="4">
                         {{ getMessage("cmduploadform.headline.list_of_selected_files") }}
-                    </CmdCustomHeadline>
+                    </CmdHeadline>
                     <ul class="list-of-files">
                         <li
                             v-for="(uploadFile, index) in listOfFiles"
@@ -131,12 +131,12 @@
             <!-- end list of selected files -->
 
             <!-- begin upload conditions -->
-            <CmdCustomHeadline v-if="allowMultipleFileUploads && listOfFiles.length" v-bind="cmdCustomHeadlineSelectAdditionalFiles" headlineLevel="4">
+            <CmdHeadline v-if="allowMultipleFileUploads && listOfFiles.length" v-bind="CmdHeadlineSelectAdditionalFiles" headlineLevel="4">
                 {{ getMessage("cmduploadform.headline.select_additional_files") }}
-            </CmdCustomHeadline>
-            <CmdCustomHeadline v-if="!allowMultipleFileUploads && listOfFiles.length" v-bind="cmdCustomHeadlineSelectNewFile" headlineLevel="4">
+            </CmdHeadline>
+            <CmdHeadline v-if="!allowMultipleFileUploads && listOfFiles.length" v-bind="CmdHeadlineSelectNewFile" headlineLevel="4">
                 {{ getMessage("cmduploadform.headline.select_new_file") }}
-            </CmdCustomHeadline>
+            </CmdHeadline>
             <dl class="small">
                 <template v-if="maxTotalUploadSize > 0">
                     <dt :class="{ error: totalSize > maxTotalUploadSize }">
@@ -306,7 +306,7 @@ import {getFileExtension} from "../utils/getFileExtension.js"
 import axios from "axios"
 
 // import components
-import CmdCustomHeadline from "./CmdCustomHeadline"
+import CmdHeadline from "./CmdHeadline"
 import CmdFormElement from "./CmdFormElement"
 import CmdSystemMessage from "./CmdSystemMessage"
 
@@ -315,7 +315,7 @@ export default {
     emits: ["click", "error", "upload-complete", "upload-file-success"],
     mixins: [I18n, DefaultMessageProperties],
     components: {
-        CmdCustomHeadline,
+        CmdHeadline,
         CmdFormElement,
         CmdSystemMessage,
     },
@@ -506,51 +506,51 @@ export default {
             default: "icon-cancel"
         },
         /**
-         * properties for CmdCustomHeadline-component at of the fieldset
+         * properties for CmdHeadline-component at of the fieldset
          */
-        cmdCustomHeadlineFieldset: {
+        CmdHeadlineFieldset: {
             type: Object,
             required: false
         },
         /**
-         * properties for CmdCustomHeadline-component shown if no files for upload exist
+         * properties for CmdHeadline-component shown if no files for upload exist
          */
-        cmdCustomHeadlineNoFilesToUpload: {
+        CmdHeadlineNoFilesToUpload: {
             type: Object,
             required: false
         },
         /**
-         * properties for CmdCustomHeadline-component shown if no file for upload exist
+         * properties for CmdHeadline-component shown if no file for upload exist
          */
-        cmdCustomHeadlineNoFileToUpload: {
+        CmdHeadlineNoFileToUpload: {
             type: Object,
             required: false
         },
         /**
-         * properties for CmdCustomHeadline-component for 'summary of all files'
+         * properties for CmdHeadline-component for 'summary of all files'
          */
-        cmdCustomHeadlineSummaryOfAllFiles: {
+        CmdHeadlineSummaryOfAllFiles: {
             type: Object,
             required: false
         },
         /**
-         * properties for CmdCustomHeadline-component for 'list of selected files'
+         * properties for CmdHeadline-component for 'list of selected files'
          */
-        cmdCustomHeadlineListOfSelectedFiles: {
+        CmdHeadlineListOfSelectedFiles: {
             type: Object,
             required: false
         },
         /**
-         * properties for CmdCustomHeadline-component for 'select additional files'
+         * properties for CmdHeadline-component for 'select additional files'
          */
-        cmdCustomHeadlineSelectAdditionalFiles: {
+        CmdHeadlineSelectAdditionalFiles: {
             type: Object,
             required: false
         },
         /**
-         * properties for CmdCustomHeadline-component for 'select new file'
+         * properties for CmdHeadline-component for 'select new file'
          */
-        cmdCustomHeadlineSelectNewFile: {
+        CmdHeadlineSelectNewFile: {
             type: Object,
             required: false
         },

package/src/components/CmdWidthLimitationWrapper.vue

@@ -110,23 +110,6 @@ export default {
         right: 0;
         top: 0;
     }
-
-    &#site-footer {
-        padding: var(--grid-gap) 0;
-        border-top: var(--default-border);
-        background: var(--default-background-color);
-
-        &.sticky {
-            top: auto;
-            bottom: 0;
-        }
-
-        .cmd-switch-language {
-            width: 100%;
-            flex: none;
-        }
-    }
 }
-
 /* end cmd-width-limitation-wrapper ------------------------------------------------------------------------------------------ */
 </style>

package/src/documentation/generated/CmdAddressDataPropertyDescriptions.json

@@ -9,9 +9,9 @@
             "show a label-text"
         ]
     },
-    "cmdCustomHeadline": {
+    "CmdHeadline": {
         "comments": [
-            "properties for CmdCustomHeadline-component"
+            "properties for CmdHeadline-component"
         ]
     },
     "showLabels": {

package/src/documentation/generated/CmdBankAccountDataPropertyDescriptions.json

@@ -26,9 +26,9 @@
             ]
         }
     },
-    "cmdCustomHeadline": {
+    "CmdHeadline": {
         "comments": [
-            "properties for CmdCustomHeadline-component"
+            "properties for CmdHeadline-component"
         ]
     }
 }

package/src/documentation/generated/CmdBoxPropertyDescriptions.json

@@ -88,9 +88,9 @@
             "allow box to be stretched as high as parent-element"
         ]
     },
-    "cmdCustomHeadline": {
+    "CmdHeadline": {
         "comments": [
-            "properties for CmdCustomHeadline-component"
+            "properties for CmdHeadline-component"
         ]
     }
 }

package/src/documentation/generated/CmdBoxSiteSearchPropertyDescriptions.json

@@ -46,9 +46,9 @@
             "send search result from outside to display inside this component"
         ]
     },
-    "cmdCustomHeadline": {
+    "CmdHeadline": {
         "comments": [
-            "properties for CmdCustomHeadline-component"
+            "properties for CmdHeadline-component"
         ]
     },
     "cmdFormElementInput1": {

package/src/documentation/generated/CmdCookieDisclaimerPropertyDescriptions.json

@@ -1,7 +1,12 @@
 {
-    "cmdCustomHeadlineCookieDisclaimer": {
+    "modelValue": {
         "comments": [
-            "properties for CmdCustomHeadline-component at top of cookie disclaimer"
+            "set default v-model (must be named modelValue in Vue3)"
+        ]
+    },
+    "CmdHeadlineCookieDisclaimer": {
+        "comments": [
+            "properties for CmdHeadline-component at top of cookie disclaimer"
         ]
     },
     "cmdBoxRequiredCookies": {

package/src/documentation/generated/CmdFormElementPropertyDescriptions.json

@@ -24,7 +24,12 @@
     "labelText": {
         "comments": [
             "text for label"
-        ]
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "true"
+            ]
+        }
     },
     "toggleSwitch": {
         "comments": [
@@ -137,7 +142,7 @@
         ],
         "annotations": {
             "allowedValues": [
-                "error, success",
+                "error, warning, success, info",
                 ""
             ],
             "affectsStyling": [

package/src/documentation/generated/CmdHeadlinePropertyDescriptions.json

@@ -0,0 +1,22 @@
+{
+    "headlineText": {
+        "comments": [
+            "text for headline"
+        ]
+    },
+    "headlineLevel": {
+        "comments": [
+            "level for headline"
+        ]
+    },
+    "preHeadlineText": {
+        "comments": [
+            "small pre-headline-text above main-headline"
+        ]
+    },
+    "iconClass": {
+        "comments": [
+            "icon-class for icon shown left/before headline"
+        ]
+    }
+}

package/src/documentation/generated/CmdInputGroupPropertyDescriptions.json

@@ -4,6 +4,11 @@
             "set value for v-model (must be named modelValue in vue3 if default v-model should be used)"
         ]
     },
+    "required": {
+        "comments": [
+            "set if input-group should be required"
+        ]
+    },
     "inputElements": {
         "comments": [
             "list of input-elements inside group",
@@ -21,9 +26,35 @@
             ]
         }
     },
+    "status": {
+        "comments": [
+            "set status for label and inner form-elements"
+        ],
+        "annotations": {
+            "allowedValues": [
+                "error, warning, success, info",
+                ""
+            ],
+            "affectsStyling": [
+                "true"
+            ]
+        }
+    },
     "replaceInputType": {
         "comments": [
-            "for replacing native checkboxes/radio-buttons by custom ones (based on frontend-framework)"
+            "for replacing native checkboxes/radio-buttons by custom ones (based on frontend-framework)",
+            "toggleSwitch-property must be set to 'false'"
+        ],
+        "annotations": {
+            "affectsStyling": [
+                "true"
+            ]
+        }
+    },
+    "toggleSwitch": {
+        "comments": [
+            "for replacing native checkboxes/radio-buttons by toggle-switches (based on frontend-framework)",
+            "replaceInputType-property must be set to 'false'"
         ],
         "annotations": {
             "affectsStyling": [

package/src/documentation/generated/CmdListOfLinksPropertyDescriptions.json

@@ -22,9 +22,9 @@
             ]
         }
     },
-    "cmdCustomHeadline": {
+    "CmdHeadline": {
         "comments": [
-            "properties for cmdCustomHeadline-component"
+            "properties for CmdHeadline-component"
         ]
     },
     "links": {

package/src/documentation/generated/CmdListOfRequirementsPropertyDescriptions.json

@@ -0,0 +1,32 @@
+{
+    "inputModelValue": {
+        "comments": [
+            "property to check validity of given modelValue"
+        ]
+    },
+    "inputAttributes": {
+        "comments": [
+            "property to check validity of given attributes"
+        ]
+    },
+    "labelText": {
+        "comments": [
+            "text for label"
+        ]
+    },
+    "inputRequirements": {
+        "comments": [
+            "list of all requirements"
+        ]
+    },
+    "helplink": {
+        "comments": [
+            "set a helplink to a different page for further support"
+        ]
+    },
+    "CmdHeadline": {
+        "comments": [
+            "properties of CmdHeadline-component"
+        ]
+    }
+}

package/src/documentation/generated/CmdLoginFormPropertyDescriptions.json

@@ -29,14 +29,14 @@
             ]
         }
     },
-    "cmdCustomHeadlineLoginForm": {
+    "CmdHeadlineLoginForm": {
         "comments": [
-            "properties for CmdCustomHeadline-component for login-form"
+            "properties for CmdHeadline-component for login-form"
         ]
     },
-    "cmdCustomHeadlineSendLoginForm": {
+    "CmdHeadlineSendLoginForm": {
         "comments": [
-            "properties for CmdCustomHeadline-component for send-login-form"
+            "properties for CmdHeadline-component for send-login-form"
         ]
     },
     "cmdFormElementUsername": {

package/src/documentation/generated/CmdOpeningHoursPropertyDescriptions.json

@@ -1,7 +1,7 @@
 {
-    "cmdCustomHeadline": {
+    "CmdHeadline": {
         "comments": [
-            "properties for CmdCustomHeadline-component"
+            "properties for CmdHeadline-component"
         ]
     },
     "link": {

package/src/documentation/generated/CmdSiteFooterPropertyDescriptions.json

@@ -0,0 +1,12 @@
+{
+    "orientation": {
+        "comments": [
+            "set to vertical if items inside should be arranged vertically"
+        ],
+        "annotations": {
+            "allowedValues": [
+                "horizontal, vertical"
+            ]
+        }
+    }
+}

package/src/documentation/generated/CmdSystemMessagePropertyDescriptions.json

@@ -27,6 +27,11 @@
             "the system-message-text"
         ]
     },
+    "messageHeadlineLevel": {
+        "comments": [
+            "set headline-level for system-message (given to CmdHeadline-component)"
+        ]
+    },
     "iconClose": {
         "comments": [
             "icon to close system-message"

package/src/documentation/generated/CmdTabsPropertyDescriptions.json

@@ -1,7 +1,7 @@
 {
-    "cmdCustomHeadline": {
+    "CmdHeadline": {
         "comments": [
-            "properties for CmdCustomHeadline-component"
+            "properties for CmdHeadline-component"
         ]
     },
     "stretchTabs": {

package/src/documentation/generated/CmdTooltipForInputElementsPropertyDescriptions.json

@@ -0,0 +1,42 @@
+{
+    "relatedId": {
+        "comments": [
+            "related-id for CmdTooltip-component"
+        ]
+    },
+    "validationStatus": {
+        "comments": [
+            "validation-status for CmdSystemMessage-component and CmdTooltip-component"
+        ]
+    },
+    "validationMessage": {
+        "comments": [
+            "validation-message for CmdSystemMessage-component"
+        ]
+    },
+    "showRequirements": {
+        "comments": [
+            "toggle visibility for CmdListOfRequirements-component"
+        ]
+    },
+    "validationTooltip": {
+        "comments": [
+            "validation-tooltip for CmdListOfRequirements-component"
+        ]
+    },
+    "inputRequirements": {
+        "comments": [
+            "list of input-requirements for CmdListOfRequirements-component"
+        ]
+    },
+    "inputAttributes": {
+        "comments": [
+            "helplink for CmdListOfRequirements-component"
+        ]
+    },
+    "methods": {
+        "comments": [
+            "helplink for CmdListOfRequirements-component"
+        ]
+    }
+}

package/src/documentation/generated/CmdTooltipPropertyDescriptions.json

@@ -1,5 +1,5 @@
 {
-    "cmdCustomHeadline": {
+    "CmdHeadline": {
         "comments": [
             "enable toggling tooltip-visibility by click"
         ]