comand-component-library 3.1.43 → 3.1.46

package/src/App.vue

@@ -16,11 +16,13 @@
                 <ul>
                     <li><a href="#section-accordion">Accordion</a></li>
                     <li><a href="#section-advanced-form-elements">Advanced Form Elements</a></li>
+                    <li><a href="#section-bank-account-data">Bank Account Data</a></li>
                     <li><a href="#section-boxes">Boxes</a></li>
                     <li><a href="#section-breadcrumbs">Breadcrumbs</a></li>
                     <li><a href="#section-cookie-disclaimer">Cookie-Disclaimer</a></li>
                 </ul>
                 <ul>
+                    <li><a href="#section-custom-headline">Custom Headline</a></li>
                     <li><a href="#section-fancybox">Fancybox</a></li>
                     <li><a href="#section-google-maps-integration">Google-Maps&trade;-Integration</a></li>
                     <li><a href="#section-image-gallery">Image Gallery</a></li>
@@ -33,9 +35,9 @@
                     <li><a href="#section-pager">Pager</a></li>
                     <li><a href="#section-share-buttons">Share Buttons</a></li>
                     <li><a href="#section-slideshow">Slideshow</a></li>
+                    <li><a href="#section-system-message">System-Message</a></li>
                 </ul>
                 <ul>
-                    <li><a href="#section-system-message">System-Message</a></li>
                     <li><a href="#section-tables">Tables</a></li>
                     <li><a href="#section-tabs">Tabs</a></li>
                     <li><a href="#section-thumbnail-scroller">Thumbnail-Scroller</a></li>
@@ -107,23 +109,24 @@
                 <ul class="list-status">
                     <li><a href="#" @click.prevent="formElementStatus = ''" :class="{'active' : formElementStatus === ''}"
                            id="status-default">Default</a></li>
-                    <li><a href="#" @click.prevent="formElementStatus = 'error'"
+                    <li class="error"><a href="#" @click.prevent="formElementStatus = 'error'"
                            :class="{'active' : formElementStatus === 'error'}" id="status-error">Error</a></li>
+                    <li><a href="#" @click.prevent="formElementStatus = 'warning'"
+                           :class="{'active' : formElementStatus === 'warning'}" id="status-warning">Warning</a></li>
+                    <li><a href="#" @click.prevent="formElementStatus = 'success'"
+                           :class="{'active' : formElementStatus === 'success'}" id="status-success">Success</a></li>
+                    <li><a href="#" @click.prevent="formElementStatus = 'info'"
+                           :class="{'active' : formElementStatus === 'info'}" id="status-info">Info</a></li>
                     <li><a href="#" @click.prevent="formElementStatus = 'disabled'"
                            :class="{'active' : formElementStatus === 'disabled'}" id="status-disabled">Disabled</a></li>
                 </ul>
             </div>
 
-            <!-- begin formfilters -->
-            <CmdFormFilters v-model:selectedOptions="selectedOptions"
-                            :selectedOptionsName="getOptionName"
-                            labelDeleteAllFilters="Delete all filters"
-                            iconClassDeleteAllFilters="icon-delete"
-                            iconClassDeleteFilter="icon-cancel"
-            />
-            <!-- end formfilters -->
+            <!-- begin cmd-form-filters -->
+            <CmdFormFilters v-model:selectedOptions="fakeSelectFilters" :selectedOptionsName="getOptionName" />
+            <!-- end cmd-form-filters -->
 
-            <form method="get" novalidate="novalidate" id="advanced-form-elements">
+            <CmdForm :use-fieldset="false" id="advanced-form-elements" novalidate="novalidate">
                 <fieldset class="grid-container-create-columns">
                     <legend>Legend</legend>
                     <h2>Form Element-Component</h2>
@@ -134,9 +137,11 @@
                                         :status="formElementStatus"
                                         placeholder="Type in text"
                                         tooltipText="This is a tooltip"
+                                        v-bind="{useCustomTooltip: false}"
                         />
                         <CmdFormElement labelText="Input for selectbox:"
                                         element="select"
+                                        required="required"
                                         :status="formElementStatus"
                                         v-model:value="selectedOption"
                                         :selectOptions="selectOptionsData"
@@ -157,6 +162,7 @@
                                         :status="formElementStatus"
                                         :selectData="fakeSelectOptionsData"
                                         v-model:value="fakeSelectDefault"
+                                        required
                                         defaultOptionName="Select an option:"
                         />
                         <CmdFakeSelect labelText="Default selectbox with icons:"
@@ -170,8 +176,20 @@
                                        :status="formElementStatus"
                                        :selectData="fakeSelectOptionsData"
                                        v-model:value="fakeSelectCheckbox"
+                                       defaultOptionName="Options:"
+                                       :required="true"
+                                       id="selectbox-with-checkboxes"
+                                       type="checkboxOptions"
+                                       :useCustomTooltip="true"
+                        />
+                        <CmdFakeSelect labelText="Selectbox with filters:"
+                                       :status="formElementStatus"
+                                       :selectData="fakeSelectFilterOptionsData"
+                                       v-model:value="fakeSelectFilters"
                                        defaultOptionName="Filters:"
+                                       id="selectbox-with-filters"
                                        type="checkboxOptions"
+                                       :useCustomTooltip="true"
                         />
                         <CmdFakeSelect labelText="Selectbox with slot-content:"
                                        :status="formElementStatus"
@@ -198,7 +216,7 @@
                                        :status="formElementStatus"
                                        :selectData="fakeSelectColorsData"
                                        v-model:value="selectedColor"
-                                       defaultOptionName="Select color:"
+                                       required="required"
                                        type="color"
                         />
                     </div>
@@ -213,17 +231,17 @@
                     <label for="range-slider" :class="formElementStatus">
                         <span>Single-Slider (with in- and output):</span>
                         <span class="flex-container no-flex">
-                  <input type="number" :class="formElementStatus" v-model="rangeValue"
-                         :disabled="formElementStatus === 'disabled'" min="0" max="100"/>
-                  <input type="range"
-                         class="range-slider"
-                         :class="{'disabled': formElementStatus === 'disabled'}"
-                         id="range-slider"
-                         v-model="rangeValue"
-                         :disabled="formElementStatus === 'disabled'"
-                         min="0"
-                         max="100"/>
-                </span>
+                        <input type="number" :class="formElementStatus" v-model="rangeValue"
+                                 :disabled="formElementStatus === 'disabled'" min="0" max="100"/>
+                        <input type="range"
+                                 class="range-slider"
+                                 :class="{'disabled': formElementStatus === 'disabled'}"
+                                 id="range-slider"
+                                 v-model="rangeValue"
+                                 :disabled="formElementStatus === 'disabled'"
+                                 min="0"
+                                 max="100"/>
+                        </span>
                     </label>
                     <!-- end slider -->
 
@@ -234,34 +252,34 @@
                     <div class="label inline">
                         <span>Label for Toggle-Switch-Checkbox with Switch-Label:</span>
                         <span class="flex-container no-flex">
-                  <CmdSwitchButton
-                      type="checkbox"
-                      id="checkbox1"
-                      name="checkbox1"
-                      onLabel="Label on"
-                      offLabel="Label off"
-                      inputValue="checkbox1"
-                      :disabled="formElementStatus === 'disabled'"
-                      v-model:value="switchButtonCheckbox"/>
-                  <CmdSwitchButton
-                      type="checkbox"
-                      id="checkbox2"
-                      name="checkbox2"
-                      onLabel="Label on"
-                      offLabel="Label off"
-                      labelText="Labeltext"
-                      inputValue="checkbox2"
-                      :disabled="formElementStatus === 'disabled'"
-                      v-model:value="switchButtonCheckbox"/>
-                    <CmdSwitchButton
-                        type="checkbox"
-                        id="checkbox3"
-                        name="checkbox3"
-                        inputValue="checkbox3"
-                        labelText="Labeltext"
-                        :disabled="formElementStatus === 'disabled'"
-                        v-model:value="switchButtonCheckbox"/>
-                </span>
+                            <CmdSwitchButton
+                              type="checkbox"
+                              id="checkbox1"
+                              name="checkbox1"
+                              onLabel="Label on"
+                              offLabel="Label off"
+                              inputValue="checkbox1"
+                              :disabled="formElementStatus === 'disabled'"
+                              v-model:value="switchButtonCheckbox"/>
+                            <CmdSwitchButton
+                              type="checkbox"
+                              id="checkbox2"
+                              name="checkbox2"
+                              onLabel="Label on"
+                              offLabel="Label off"
+                              labelText="Labeltext"
+                              inputValue="checkbox2"
+                              :disabled="formElementStatus === 'disabled'"
+                              v-model:value="switchButtonCheckbox"/>
+                            <CmdSwitchButton
+                                type="checkbox"
+                                id="checkbox3"
+                                name="checkbox3"
+                                inputValue="checkbox3"
+                                labelText="Labeltext"
+                                :disabled="formElementStatus === 'disabled'"
+                                v-model:value="switchButtonCheckbox"/>
+                        </span>
                         <span>Current value: {{ switchButtonCheckbox }}</span>
                     </div>
                     <!-- end toggle-switch-radio with switch-label -->
@@ -269,17 +287,17 @@
                     <div class="label inline">
                         <span>Label for Toggle-Switch-Checkbox with Switch-Label (colored):</span>
                         <span class="flex-container no-flex">
-                  <CmdSwitchButton
-                      type="checkbox"
-                      id="checkbox4"
-                      name="checkbox4"
-                      onLabel="Label on"
-                      offLabel="Label off"
-                      :colored="true"
-                      inputValue="checkbox3"
-                      :disabled="formElementStatus === 'disabled'"
-                      v-model:value="switchButtonCheckboxColored"/>
-                </span>
+                            <CmdSwitchButton
+                              type="checkbox"
+                              id="checkbox4"
+                              name="checkbox4"
+                              onLabel="Label on"
+                              offLabel="Label off"
+                              :colored="true"
+                              inputValue="checkbox3"
+                              :disabled="formElementStatus === 'disabled'"
+                              v-model:value="switchButtonCheckboxColored"/>
+                        </span>
                         <span>Current value: {{ switchButtonCheckboxColored }}</span>
                     </div>
                     <!-- end toggle-switch-radio with switch-label -->
@@ -310,36 +328,123 @@
                       v-model:value="switchButtonRadio"/>
                 </span>
                     </div>
+                    <hr />
+                    <h3>Toggle Switches with CmdFormElement</h3>
+                    <CmdFormElement element="input"
+                                    type="checkbox"
+                                    id="toggle-switch-checkbox"
+                                    v-model:value="switchButtonCheckbox"
+                                    :displayLabelInline="true"
+                                    labelText="Labeltext for Single-SwitchButton (Checkbox)"
+                                    :toggleSwitch="true"
+                                    :status="formElementStatus"
+                    />
+                    <CmdFormElement element="input"
+                                    type="checkbox"
+                                    id="toggle-switch-checkbox"
+                                    v-model:value="switchButtonCheckbox"
+                                    :displayLabelInline="true"
+                                    labelText="Labeltext for SwitchButton (Checkbox)"
+                                    onLabel="Label on"
+                                    offLabel="Label off"
+                                    :toggleSwitch="true"
+                                    :status="formElementStatus"
+                    />
+                    <CmdFormElement element="input"
+                                    type="checkbox"
+                                    id="toggle-switch-checkbox-colored"
+                                    v-model:value="switchButtonCheckbox"
+                                    labelText="Labeltext for SwitchButton (Checkbox, colored)"
+                                    onLabel="Label on"
+                                    offLabel="Label off"
+                                    :colored="true"
+                                    :toggleSwitch="true"
+                                    :status="formElementStatus"
+                    />
+                    <CmdFormElement element="input"
+                                    type="radio"
+                                    name="radiogroup"
+                                    id="toggle-switch-radio1"
+                                    v-model:value="switchButtonCheckbox"
+                                    onLabel="Label on"
+                                    offLabel="Label off"
+                                    :colored="true"
+                                    :toggleSwitch="true"
+                                    :status="formElementStatus"
+                                    inputValue="radio1"
+                    />
+                    <CmdFormElement element="input"
+                                    type="radio"
+                                    name="radiogroup"
+                                    id="toggle-switch-radio2"
+                                    v-model:value="switchButtonCheckbox"
+                                    onLabel="Label on"
+                                    offLabel="Label off"
+                                    :colored="true"
+                                    :toggleSwitch="true"
+                                    :status="formElementStatus"
+                                    inputValue="radio2"
+                    />
                     <!-- end toggle-switch-radio with switch-label (colored) -->
 
                     <h2>Inputfields in Columns</h2>
-                    <CmdFormElement element="input"
-                                    required="required"
-                                    labelText="Label for inputfield (with tooltip):"
-                                    type="text"
-                                    id="inputfield1"
-                                    placeholder="This is placeholder text"
-                                    v-model:value="inputField1"
-                                    tooltipText="This is a tooltip!"
-                                    :status="formElementStatus"/>
-
+                    <div class="flex-container">
+                        <CmdFormElement element="input"
+                                        labelText="Label for inputfield (with tooltip):"
+                                        type="text"
+                                        minlength="5"
+                                        id="inputfield1"
+                                        placeholder="This is placeholder text"
+                                        v-model:value="inputField1"
+                                        tooltipText="This is a tooltip!"
+                                        :status="formElementStatus"
+                        />
+                        <CmdFormElement element="input"
+                                        labelText="Label for inputfield (required):"
+                                        type="text"
+                                        required="required"
+                                        minlength="5"
+                                        id="inputfield-required"
+                                        placeholder="This is placeholder text"
+                                        v-model:value="inputFieldRequired"
+                                        tooltipText="This is a tooltip!"
+                                        :status="formElementStatus"
+                        />
+                        <CmdFormElement element="input"
+                                        labelText="Label for inputfield (with pattern):"
+                                        type="text"
+                                        id="inputfield-pattern"
+                                        placeholder="This is placeholder text"
+                                        pattern="/\d/"
+                                        v-model:value="inputFieldPattern"
+                                        tooltipText="This is a tooltip!"
+                                        :status="formElementStatus"
+                        />
+                    </div>
                     <!-- begin inputfield in two columns -->
                     <div class="flex-container">
                         <CmdFormElement labelText="Label for inputfield (with icon):"
                                         element="input"
                                         type="text"
-                                        id="inputfield2"
-                                        iconClass="icon-user-profile"
+                                        id="inputfield-username"
+                                        fieldIconClass="icon-user-profile"
                                         placeholder="Type in username"
                                         tooltipText="This is a tooltip!"
-                                        :status="formElementStatus"/>
+                                        maxlength="100"
+                                        v-model:value="inputUsername"
+                                        :status="formElementStatus"
+                                        />
                         <CmdFormElement element="input"
-                                        labelText="Label for inputfield (with icon):"
+                                        labelText="Label for passwordfield:"
                                         type="password"
-                                        id="inputfield3"
-                                        iconClass="icon-security-settings"
+                                        minlength="8"
+                                        maxlength="255"
+                                        id="inputfield-password"
+                                        fieldIconClass="icon-security-settings"
                                         placeholder="Type in password"
                                         tooltipText="This is a tooltip!"
+                                        :customRequirements="customRequirements"
+                                        v-model:value="inputPassword"
                                         :status="formElementStatus"/>
                     </div>
                     <!-- end inputfield in two columns -->
@@ -348,20 +453,35 @@
                                     labelText="Label (inline) for inputfield (number):"
                                     :displayLabelInline="true"
                                     type="number"
-                                    id="inputfield4"
+                                    id="inputfield-number"
+                                    required="required"
+                                    min="0"
+                                    max="9"
+                                    v-model:value="inputNumber"
+                                    :customRequirements="[customRequirements[2]]"
                                     :status="formElementStatus"/>
                     <CmdFormElement element="input"
                                     labelText="Label (inline) for inputfield (date):"
                                     :displayLabelInline="true"
                                     type="date"
-                                    id="inputfield5"
+                                    id="inputfield-date"
+                                    v-model:value="inputDate"
                                     :status="formElementStatus"/>
                     <CmdFormElement element="input"
                                     labelText="Label (inline) for inputfield (search):"
                                     :displayLabelInline="true"
                                     type="search"
-                                    id="inputfield6"
+                                    id="inputfield-search"
                                     placeholder="Keyword(s)"
+                                    v-model:value="inputSearch"
+                                    :status="formElementStatus"/>
+                    <CmdFormElement element="textarea"
+                                    labelText="Label for textarea:"
+                                    id="textarea"
+                                    minlength="1"
+                                    maxlength="100"
+                                    placeholder="Type in your message"
+                                    v-model:value="textarea"
                                     :status="formElementStatus"/>
                     <div class="label inline">
                         <span>Label for native checkboxes:</span>
@@ -369,18 +489,37 @@
                             <CmdFormElement element="input"
                                             labelText="Label for checkbox with boolean"
                                             type="checkbox"
-                                            id="inputfield7"
-                                            v-model:value="checkboxStatus"
+                                            id="checkbox-with-boolean"
+                                            v-model:value="checkboxValue"
                                             :status="formElementStatus"/>
                             <CmdFormElement element="input"
                                             labelText="Label for checkbox with value"
                                             v-model:value="checkboxValues"
-                                            inputValue="checkboxValue"
+                                            inputValue="checkboxValue1"
                                             type="checkbox"
-                                            id="inputfield8"
+                                            id="checkbox-with-value-1"
+                                            :status="formElementStatus"/>
+                            <CmdFormElement element="input"
+                                            labelText="Label for checkbox with value"
+                                            v-model:value="checkboxValues"
+                                            inputValue="checkboxValue2"
+                                            type="checkbox"
+                                            id="checkbox-with-value-2"
                                             :status="formElementStatus"/>
                         </div>
                     </div>
+                    <CmdFormElement element="input"
+                                    labelText="Label for (required) checkbox with boolean"
+                                    type="checkbox"
+                                    required="required"
+                                    id="checkbox-required-with-boolean"
+                                    v-model:value="checkboxRequiredValue"
+                                    :status="formElementStatus"/>
+                    <p>
+                        checkbox (required) with boolean: {{checkboxRequiredValue}}<br />
+                        checkbox with boolean: {{checkboxValue}}<br />
+                        checkboxes with values: {{checkboxValues}}
+                    </p>
                     <div class="label inline">
                         <span>Label for Replaced Input-Type-Checkbox:</span>
                         <div class="flex-container no-flex">
@@ -389,12 +528,13 @@
                                             type="checkbox"
                                             class="replace-input-type"
                                             id="inputfield9"
-                                            v-model:value="replacedCheckboxStatus1"
+                                            v-model:value="replacedCheckboxValue"
+                                            inputValue="checkboxValue1"
                                             :status="formElementStatus"/>
                             <CmdFormElement element="input"
                                             labelText="Label for replaced checkbox"
-                                            v-model:value="replacedCheckboxStatus2"
-                                            inputValue="checkboxValue"
+                                            v-model:value="replacedCheckboxValue"
+                                            inputValue="checkboxValue2"
                                             type="checkbox"
                                             class="replace-input-type"
                                             id="inputfield10"
@@ -410,7 +550,7 @@
                                             id="inputfield11"
                                             name="radiogroup"
                                             inputValue="radiobuttonValue1"
-                                            v-model:value="radiobuttonStatus"
+                                            v-model:value="radiobuttonValue"
                                             :status="formElementStatus"/>
                             <CmdFormElement element="input"
                                             labelText="Label for native radiobutton"
@@ -418,11 +558,13 @@
                                             id="inputfield12"
                                             name="radiogroup"
                                             inputValue="radiobuttonValue2"
-                                            v-model:value="radiobuttonStatus"
-                                            checked="checked"
+                                            v-model:value="radiobuttonValue"
                                             :status="formElementStatus"/>
                         </div>
                     </div>
+                    <p>
+                        Radiobuttons with values: {{radiobuttonValue}}
+                    </p>
                     <div class="label inline">
                         <span>Label for Replaced Input-Type-Radio:</span>
                         <div class="flex-container no-flex">
@@ -433,7 +575,7 @@
                                             id="inputfield13"
                                             name="replaced-radiogroup"
                                             inputValue="radiobuttonValue1"
-                                            v-model:value="replacedRadiobuttonStatus"
+                                            v-model:value="replacedRadiobuttonValue"
                                             :status="formElementStatus"/>
                             <CmdFormElement element="input"
                                             labelText="Label for replaced radiobutton"
@@ -442,8 +584,7 @@
                                             id="inputfield14"
                                             name="replaced-radiogroup"
                                             inputValue="radiobuttonValue2"
-                                            v-model:value="replacedRadiobuttonStatus"
-                                            checked="checked"
+                                            v-model:value="replacedRadiobuttonValue"
                                             :status="formElementStatus"/>
                         </div>
                     </div>
@@ -462,7 +603,7 @@
                     <CmdMultipleSwitch labelText="Label for multiple-switch with radiobuttons:"
                                        :multipleSwitches="multipleSwitchRadioData"
                                        switchTypes="radio"
-                                       switchNames="radiogroup"
+                                       switchNames="swtich-names"
                                        :status="formElementStatus"
                                        v-model:value="multipleSwitchRadio"/>
                     <dl>
@@ -475,20 +616,33 @@
                 <div class="button-wrapper">
                     <small><sup>*</sup>values will not be submitted with the form!</small>
                     <CmdFormElement element="button"
-                                    buttonText="Submit form"
-                                    type="button"
+                                    :nativeButton="{text: 'Submit-button from component'}"
+                                    type="submit"
                                     id="submitbutton"
                                     name="submitbutton"
                                     :status="formElementStatus"/>
-                    <button type="submit" :disabled="formElementStatus === 'disabled'"><span class="icon-check"></span><span>Submit form</span>
+                    <button type="submit" :disabled="formElementStatus === 'disabled'">
+                        <span class="icon-check"></span>
+                        <span>Native submit-button</span>
                     </button>
                 </div>
-            </form>
+         </CmdForm>
         </CmdWidthLimitationWrapper>
         <!-- end advanced form elements ----------------------------------------------------------------------------------------------------------------------------------------------------->
 
+        <!-- begin back to top button ----------------------------------------------------------------------------------------------------------------------------------------------------->
         <CmdBackToTopButton/>
+        <!-- end back to top button ----------------------------------------------------------------------------------------------------------------------------------------------------->
+
+        <!-- begin bank account data ----------------------------------------------------------------------------------------------------------------------------------------------------->
+        <a id="section-bank-account-data"></a>
+        <CmdWidthLimitationWrapper>
+            <h2 class="headline-demopage">Bank Account Data</h2>
+            <CmdBankAccountData :account-data="bankAccountData" :cmd-custom-headline="{ text: 'Bank Account', level: 3}" :allow-copy-by-click="true" />
+        </CmdWidthLimitationWrapper>
+        <!-- end bank account data ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+        <!-- begin boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
         <a id="section-boxes"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Boxes</h2>
@@ -498,17 +652,17 @@
                     <CmdBox>
                         <template v-slot:header>
                             <h3>
-                                Box with text
+                                Headline for box
                             </h3>
                         </template>
                         <template v-slot:body>
                             <p class="padding">
-                                box body with paragraph
+                                Box body with paragraph
                             </p>
                         </template>
                         <template v-slot:footer>
                             <p>
-                                footer content
+                                Footer content
                             </p>
                         </template>
                     </CmdBox>
@@ -563,12 +717,12 @@
                             <img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text"/>
                             <div class="default-padding">
                                 <h4>Headline</h4>
-                                <p>This some text i.e a short-text for news.</p>
+                                <p>This is some text information i.e a short-text for a news teaser.</p>
                             </div>
                         </template>
                         <template v-slot:footer>
                             <p>
-                                <a href="#">Mehr erfahren&hellip;</a>
+                                <a href="#">Read more&hellip;</a>
                             </p>
                         </template>
                     </CmdBox>
@@ -589,13 +743,17 @@
             <h3>Box Site Search</h3>
             <CmdBoxSiteSearch :results="executeSearch()" @click="executeSearch($event)"/>
         </CmdWidthLimitationWrapper>
+        <!-- end boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+        <!-- begin breadcrumbs ------------------------------------------------------------------------------------------------------------------------------------------------------->
         <a id="section-breadcrumbs"></a>
         <CmdWidthLimitationWrapper inner-component="div">
             <h2 class="headline-demopage">Breadcrumbs</h2>
             <CmdBreadcrumbs :breadcrumbLinks="breadcrumbData" breadcrumbLabel="You are here:"/>
         </CmdWidthLimitationWrapper>
+        <!-- end breadcrumbs ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+        <!-- begin cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
         <a id="section-cookie-disclaimer"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Cookie Disclaimer</h2>
@@ -603,17 +761,33 @@
                 <span>Open Cookie Disclaimer</span>
             </a>
         </CmdWidthLimitationWrapper>
+        <!-- end cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+        <!-- begin custom-headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
+        <a id="section-custom-headline"></a>
+        <CmdWidthLimitationWrapper>
+            <h2 class="headline-demopage">Custom Headline</h2>
+            <CmdCustomHeadline icon-class="icon-home" pre-headline="Pre-headline" :headline="{ text: 'Headline level 1', level: '1'}"/>
+            <CmdCustomHeadline :headline="{ text: 'Headline level 2', level: '2'}"/>
+            <CmdCustomHeadline :headline="{ text: 'Headline level 3', level: '3'}"/>
+            <CmdCustomHeadline :headline="{ text: 'Headline level 4', level: '4'}"/>
+            <CmdCustomHeadline :headline="{ text: 'Headline level 5', level: '5'}"/>
+            <CmdCustomHeadline :headline="{ text: 'Headline level 6', level: '6'}"/>
+        </CmdWidthLimitationWrapper>
+        <!-- end custom-headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
+
+        <!-- begin fancybox ------------------------------------------------------------------------------------------------------------------------------------------------------->
         <a id="section-fancybox"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Fancybox</h2>
             <a href="#" @click.prevent="showFancyBox('text','Some text')">Open FancyBox with text</a>
             <a href="#"
-               @click.prevent="showFancyBox('image', 'media/images/content-images/logo-business-edition-landscape.jpg')"
+               @click.prevent="showFancyBox('image', 'media/images/content-images/logo-business-edition-landscape.jpg', 'Alternative text')"
                title="Open FancyBox with large image">
                 <img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text"/>
             </a>
         </CmdWidthLimitationWrapper>
+        <!-- end fancybox ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
         <a id="section-google-maps-integration"></a>
         <CmdWidthLimitationWrapper>
@@ -637,16 +811,10 @@
         <a id="section-login-form"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Login Form</h2>
-            <CmdLoginForm v-model="loginData" />
+            <CmdLoginForm v-model="loginData" v-focus />
             <p>LoginData: {{loginData}}</p>
         </CmdWidthLimitationWrapper>
 
-        <a id="section-main-headline"></a>
-        <CmdWidthLimitationWrapper>
-            <h2 class="headline-demopage">Main Headline</h2>
-            <CmdMainHeadline icon-class="icon-home" pre-headline="Pre-headline" main-headline="Main headline"/>
-        </CmdWidthLimitationWrapper>
-
         <a id="section-main-navigation"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Main Navigation</h2>
@@ -694,8 +862,10 @@
         <a id="section-system-message"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">System Message</h2>
-            <CmdSystemMessage status="error" :fullWidth="true" message="This is an error message!"
-                              iconClass="icon-cancel">
+            <CmdSystemMessage status="error"
+                              :fullWidth="true"
+                              message="This is an error message!"
+                              :iconMessage="{iconClass: 'icon-error-circle'}">
                 <ul>
                     <li>Error #1</li>
                     <li>Error #2</li>
@@ -706,11 +876,11 @@
                 <p>This is additional text!</p>
             </CmdSystemMessage>
             <CmdSystemMessage status="success" :fullWidth="true" message="This is a success message!"
-                              iconClass="icon-check">
+                              :iconMessage="{iconClass: 'icon-check-circle'}">
                 <p>This is additional text!</p>
             </CmdSystemMessage>
             <CmdSystemMessage status="info" :fullWidth="true" message="This is an info message!"
-                              iconClass="icon-info">
+                              :iconMessage="{iconClass: 'icon-info-circle'}">
                 <p>This is additional text!</p>
             </CmdSystemMessage>
         </CmdWidthLimitationWrapper>
@@ -752,13 +922,43 @@
         <a id="section-thumbnail-scroller"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Thumbnail-Scroller</h2>
-            <CmdThumbnailScroller :thumbnail-scroller-items="thumbnailScrollerData"/>
+            <CmdThumbnailScroller :thumbnail-scroller-items="thumbnailScrollerData" />
+        </CmdWidthLimitationWrapper>
+
+        <a id="section-tooltip"></a>
+        <CmdWidthLimitationWrapper>
+            <h2 class="headline-demopage">Tooltip</h2>
+            <p>
+                <a href="#" @click.prevent id="hoverme">Hover me!</a><br />
+                <a href="#" @click.prevent id="clickme" title="Native tooltip">Click me!</a>
+            </p>
+            <CmdTooltip related-id="hoverme">
+                Tooltip for hover
+            </CmdTooltip>
+            <CmdTooltip related-id="clickme" :toggle-visibility-by-click="true">
+                Tooltip for click
+            </CmdTooltip>
         </CmdWidthLimitationWrapper>
 
         <a id="section-upload-form"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Upload-Form</h2>
-            <CmdUploadForm headline="Select files to upload" :enableDragAndDrop="true" :allowedFileTypes="['image/jpeg']"/>
+            <h3>Simple mode</h3>
+            <CmdUploadForm headline="Select files to upload"
+                           :enableDragAndDrop="true"
+                           :allowedFileExtensions="['jpg']"
+                           :allowMultipleFileUploads="true"
+                           :advancedMode="false"
+                           @error="showError"
+                           :uploadOptions="{url: 'http://localhost:8888'}"
+            />
+            <h3>Advanced mode</h3>
+            <CmdUploadForm headline="Select files to upload"
+                           :enableDragAndDrop="true"
+                           :allowedFileExtensions="['jpg']"
+                           :allowMultipleFileUploads="true"
+                           :uploadOptions="{url: 'http://localhost:8888'}"
+            />
         </CmdWidthLimitationWrapper>
     </main>
 
@@ -795,6 +995,7 @@
 // import used example data
 import accordionData from '@/assets/data/accordion.json'
 import addressData from '@/assets/data/address.json'
+import bankAccountData from '@/assets/data/bank-account-data.json'
 import boxUserData from '@/assets/data/box-user.json'
 import boxProductData from '@/assets/data/box-product.json'
 import breadcrumbData from '@/assets/data/breadcrumbs.json'
@@ -802,15 +1003,16 @@ import companyLogoData from '@/assets/data/company-logo.json'
 import cookieDisclaimerData from '@/assets/data/cookie-disclaimer.json'
 import fakeSelectColorsData from '@/assets/data/fake-select-colors.json'
 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 footerNavigationData from '@/assets/data/footer-navigation.json'
 import imageGalleryData from '@/assets/data/image-gallery.json'
-import languagesData from '@/assets/data/languages.json'
-import multistepsData from '@/assets/data/multisteps.json'
+import languagesData from '@/assets/data/switch-language.json'
+import multistepsData from '@/assets/data/multistep-form-progress-bar.json'
 import multipleSwitchCheckboxData from '@/assets/data/multipleswitch-checkbox.json'
 import multipleSwitchRadioData from '@/assets/data/multipleswitch-radio.json'
-import navigationData from '@/assets/data/navigation.json'
+import navigationData from '@/assets/data/main-navigation.json'
 import openingHoursData from '@/assets/data/opening-hours.json'
 import pagerData from '@/assets/data/pager.json'
 import selectOptionsData from '@/assets/data/select-options.json'
@@ -826,22 +1028,24 @@ import topHeaderNavigationData from '@/assets/data/top-header-navigation.json'
 import CmdAccordion from "@/components/CmdAccordion.vue"
 import CmdAddressData from "@/components/CmdAddressData"
 import CmdBackToTopButton from "@/components/CmdBackToTopButton.vue"
+import CmdBankAccountData from "./components/CmdBankAccountData"
 import CmdBox from "@/components/CmdBox.vue"
 import CmdBoxSiteSearch from "@/components/CmdBoxSiteSearch.vue"
 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 CmdFakeSelect from "@/components/CmdFakeSelect.vue"
 import CmdFancyBox from "@/components/CmdFancyBox.vue"
 import CmdFooterNavigation from "@/components/CmdFooterNavigation.vue"
+import CmdForm from "@/components/CmdForm.vue"
 import CmdFormElement from "@/components/CmdFormElement.vue"
 import CmdFormFilters from "@/components/CmdFormFilters.vue"
 import CmdGoogleMaps from "./components/CmdGoogleMaps"
 import CmdImageGallery from "@/components/CmdImageGallery.vue"
 import CmdImageZoom from "@/components/CmdImageZoom.vue"
 import CmdLoginForm from "@/components/CmdLoginForm.vue"
-import CmdMainHeadline from "@/components/CmdMainHeadline.vue"
 import CmdMainNavigation from "@/components/CmdMainNavigation.vue"
 import CmdMultipleSwitch from "@/components/CmdMultipleSwitch.vue"
 import CmdMultistepFormProgressBar from "@/components/CmdMultistepFormProgressBar.vue"
@@ -857,33 +1061,39 @@ import CmdSystemMessage from "@/components/CmdSystemMessage.vue"
 import CmdTabs from "@/components/CmdTabs.vue"
 import CmdTable from "@/components/CmdTable.vue"
 import CmdThumbnailScroller from "@/components/CmdThumbnailScroller.vue"
+import CmdTooltip from "@/components/CmdTooltip.vue"
 import CmdTopHeaderNavigation from "@/components/CmdTopHeaderNavigation.vue"
 import CmdUploadForm from "@/components/CmdUploadForm.vue"
 import CmdWidthLimitationWrapper from "@/components/CmdWidthLimitationWrapper"
 import {openFancyBox} from "@/components/CmdFancyBox"
 
+// import external functions
+import * as functions from "@/mixins/FieldValidation.js"
+
 export default {
     name: "App",
     components: {
         CmdAccordion, // short form of 'CmdAccordion': CmdAccordion
         CmdAddressData,
         CmdBackToTopButton,
+        CmdBankAccountData,
         CmdBox,
         CmdBoxSiteSearch,
         CmdBreadcrumbs,
         CmdCompanyLogo,
         CmdCopyrightInformation,
         CmdCookieDisclaimer,
+        CmdCustomHeadline,
         CmdFakeSelect,
         CmdFancyBox,
         CmdFooterNavigation,
+        CmdForm,
         CmdFormFilters,
         CmdFormElement,
         CmdGoogleMaps,
         CmdImageGallery,
         CmdImageZoom,
         CmdLoginForm,
-        CmdMainHeadline,
         CmdMainNavigation,
         CmdMultistepFormProgressBar,
         CmdMultipleSwitch,
@@ -899,6 +1109,7 @@ export default {
         CmdTabs,
         CmdTable,
         CmdThumbnailScroller,
+        CmdTooltip,
         CmdTopHeaderNavigation,
         CmdUploadForm,
         CmdWidthLimitationWrapper
@@ -906,6 +1117,12 @@ export default {
 
     data() {
         return {
+            showTooltip: false,
+            inputFieldPattern: "",
+            inputSearch: "",
+            textarea: "",
+            inputNumber: "",
+            inputDate: "",
             accordionGroupOpen: false,
             showPageMultistep: 1,
             showPagePager: 1,
@@ -919,19 +1136,23 @@ export default {
             switchButtonRadio: "radio1",
             switchButtonCheckbox: ["checkbox1"],
             switchButtonCheckboxColored: false,
+            inputUsername: "",
+            inputPassword: "",
             inputField1: "",
-            checkboxStatus: true,
-            replacedCheckboxStatus1: false,
-            replacedCheckboxStatus2: false,
-            checkboxValues: [],
-            radiobuttonStatus: "radiobuttonValue1",
-            replacedRadiobuttonStatus: "radiobuttonValue1",
+            inputFieldRequired: "",
+            checkboxValue: true,
+            checkboxRequiredValue: false,
+            checkboxValues: ["checkboxValue1"],
+            replacedCheckboxValue: "checkboxValue1",
+            radiobuttonValue: "radiobuttonValue1",
+            replacedRadiobuttonValue: "radiobuttonValue1",
             multipleSwitchCheckbox: ['b'],
             multipleSwitchRadio: 'c',
             fancyBoxCookieDisclaimer: false,
             fakeSelectDefault: "2",
             fakeSelectDefaultWithIcons: "1",
-            fakeSelectCheckbox: ["2"],
+            fakeSelectCheckbox: [],
+            fakeSelectFilters: [],
             datalist: {
                 id: "datalist-id",
                 options: [
@@ -940,10 +1161,18 @@ export default {
                     "Option 3"
                 ]
             },
+            customRequirements: [
+                functions.validateCharacters(),
+                functions.validateNumbers(),
+                functions.validateNumbersOnly(),
+                functions.validateSpecialCharacters(),
+                functions.validateCapitalLetters()
+            ],
 
             // assign data from json files to data-properties
             accordionData,
             addressData,
+            bankAccountData,
             boxProductData,
             boxUserData,
             breadcrumbData,
@@ -951,6 +1180,7 @@ export default {
             cookieDisclaimerData,
             fakeSelectColorsData,
             fakeSelectCountriesData,
+            fakeSelectFilterOptionsData,
             fakeSelectOptionsData,
             fakeSelectOptionsWithIconsData,
             footerNavigationData,
@@ -973,17 +1203,21 @@ export default {
         }
     },
     methods: {
-        showFancyBox(type, content) {
+        showError(event) {
+            console.log("EventMessages", event.messages)
+            alert("Error")
+        },
+        showFancyBox(type, content, altText) {
             if (type === 'text') {
                 openFancyBox({content: content})
             } else if (type === 'image') {
-                openFancyBox({url: content})
+                openFancyBox({url: content, altText: altText})
             }
         },
         getOptionName(option) {
-            for (let i = 0; i < this.fakeSelectOptionsData.length; i++) {
-                if (option === this.fakeSelectOptionsData[i].value) {
-                    return this.fakeSelectOptionsData[i].text
+            for (let i = 0; i < this.fakeSelectFilterOptionsData.length; i++) {
+                if (option === this.fakeSelectFilterOptionsData[i].value) {
+                    return this.fakeSelectFilterOptionsData[i].text
                 }
             }
             return null
@@ -1008,4 +1242,13 @@ export default {
         }
     }
 }
-</script>
+</script>
+
+<style lang="scss">
+.list-status {
+    .active {
+        color: var(--default-color);
+        text-decoration: none;
+    }
+}
+</style>