comand-component-library 3.3.5 → 3.3.7

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "comand-component-library",
-  "version": "3.3.5",
+  "version": "3.3.7",
   "private": false,
   "scripts": {
+    "publish": "npm publish",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
@@ -18,7 +19,7 @@
   ],
   "dependencies": {
     "clickout-event": "^1.1.2",
-    "comand-frontend-framework": "^3.2.97",
+    "comand-frontend-framework": "^3.2.99",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",
     "sass": "^1.54.9",

package/src/components/CmdAddressData.vue

@@ -11,7 +11,12 @@
                 <!-- begin company -->
                 <dt v-if="addressData.company?.value">
                     <!-- begin CmdIcon -->
-                    <CmdIcon v-if="addressData.company.iconClass && showLabelIcons" :iconClass="addressData.company.iconClass" :tooltip="getMessage('cmdaddressdata.labeltext.company')" />
+                    <CmdIcon
+                        v-if="addressData.company.iconClass && showLabelIcons"
+                        :iconClass="addressData.company.iconClass"
+                        :type="addressData.company.iconType"
+                        :tooltip="getMessage('cmdaddressdata.labeltext.company')"
+                    />
                     <!-- end CmdIcon -->
 
                     <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.company')}}</span>
@@ -23,7 +28,12 @@
                 <template v-if="addressData.address && addressData.address !== undefined">
                     <dt class="address">
                         <!-- begin CmdIcon -->
-                        <CmdIcon v-if="addressData.address.iconClass && showLabelIcons" :iconClass="addressData.address.iconClass" :tooltip="getMessage('cmdaddressdata.labeltext.address')" />
+                        <CmdIcon
+                            v-if="addressData.address.iconClass && showLabelIcons"
+                            :iconClass="addressData.address.iconClass"
+                            :type="addressData.address.iconType"
+                            :tooltip="getMessage('cmdaddressdata.labeltext.address')"
+                        />
                         <!-- end CmdIcon -->
 
                         <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.address')}}</span>
@@ -50,7 +60,12 @@
                 <!-- begin telephone -->
                 <dt v-if="addressData.telephone?.value">
                     <!-- begin CmdIcon -->
-                    <CmdIcon v-if="addressData.telephone.iconClass && showLabelIcons" :iconClass="addressData.telephone.iconClass" :tooltip="getMessage('cmdaddressdata.labeltext.telephone')" />
+                    <CmdIcon
+                        v-if="addressData.telephone.iconClass && showLabelIcons"
+                        :iconClass="addressData.telephone.iconClass"
+                        :type="addressData.telephone.iconType"
+                        :tooltip="getMessage('cmdaddressdata.labeltext.telephone')"
+                    />
                     <!-- end CmdIcon -->
 
                     <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.telephone')}}</span>
@@ -63,7 +78,12 @@
                 <!-- begin mobile phone -->
                 <dt v-if="addressData.mobilephone?.value">
                     <!-- begin CmdIcon -->
-                    <CmdIcon v-if="addressData.mobilephone.iconClass && showLabelIcons" :iconClass="addressData.mobilephone.iconClass" :tooltip="getMessage('cmdaddressdata.labeltext.mobile_phone')" />
+                    <CmdIcon
+                        v-if="addressData.mobilephone.iconClass && showLabelIcons"
+                        :iconClass="addressData.mobilephone.iconClass"
+                        :type="addressData.mobilephone.iconType"
+                        :tooltip="getMessage('cmdaddressdata.labeltext.mobile_phone')"
+                    />
                     <!-- end CmdIcon -->
 
                     <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.mobile_phone')}}</span>
@@ -76,7 +96,12 @@
                 <!-- begin fax -->
                 <dt v-if="addressData.fax?.value">
                     <!-- begin CmdIcon -->
-                    <CmdIcon v-if="addressData.fax.iconClass && showLabelIcons" :iconClass="addressData.fax.iconClass" :tooltip="getMessage('cmdaddressdata.labeltext.fax')" />
+                    <CmdIcon
+                        v-if="addressData.fax.iconClass && showLabelIcons"
+                        :iconClass="addressData.fax.iconClass"
+                        :type="addressData.fax.iconType"
+                        :tooltip="getMessage('cmdaddressdata.labeltext.fax')"
+                    />
                     <!-- end CmdIcon -->
 
                     <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.fax')}}</span>
@@ -87,7 +112,12 @@
                 <!-- begin email -->
                 <dt v-if="addressData.email?.value">
                     <!-- begin CmdIcon -->
-                    <CmdIcon v-if="addressData.email.iconClass && showLabelIcons" :iconClass="addressData.email.iconClass" :tooltip="getMessage('cmdaddressdata.labeltext.email')" />
+                    <CmdIcon
+                        v-if="addressData.email.iconClass && showLabelIcons"
+                        :iconClass="addressData.email.iconClass"
+                        :type="addressData.email.iconType"
+                        :tooltip="getMessage('cmdaddressdata.labeltext.email')"
+                    />
                     <!-- end CmdIcon -->
 
                     <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.email')}}</span>

package/src/components/CmdBackToTopButton.vue

@@ -3,7 +3,7 @@
     <transition name="fade">
         <a v-if="show" class="cmd-back-to-top-button" href="#" :title="iconBackToTop.tooltip" @click.prevent="onBackToTop">
             <!-- begin CmdIcon -->
-            <CmdIcon :iconClass="iconBackToTop.iconClass" />
+            <CmdIcon :iconClass="iconBackToTop.iconClass" :type="iconBackToTop.iconType" />
             <!-- end CmdIcon -->
         </a>
     </transition>
@@ -37,7 +37,8 @@ export default {
             default: function () {
                 return {
                     iconClass: "icon-single-arrow-up",
-                    tooltip: "Back to top"
+                    tooltip: "Back to top",
+                    iconType: "auto"
                 }
             }
         }
@@ -82,6 +83,7 @@ export default {
     border: var(--default-border);
     background: var(--color-scheme-background-color);
     border-radius: var(--full-circle);
+    line-height: 100%;
 
     &:hover, &:active, &:focus {
         border-color: var(--primary-color);

package/src/components/CmdBankAccountData.vue

@@ -12,7 +12,7 @@
                     <span>{{ entry.value }}</span>
                     <a href="#" @click.prevent="copyToClipboard(entry.value)" :title="iconCopy.tooltip">
                         <!-- begin CmdIcon -->
-                        <CmdIcon :iconClass="iconCopy.iconClass" />
+                        <CmdIcon :iconClass="iconCopy.iconClass" :type="iconCopy.iconType" />
                         <!-- end CmdIcon -->
                     </a>
                 </dd>
@@ -72,7 +72,8 @@ export default {
             default() {
                 return {
                     iconClass: "icon-file-copy",
-                    tooltip: "Copy data to clipboard!"
+                    tooltip: "Copy data to clipboard!",
+                    iconType: "auto"
                 }
             }
         },

package/src/components/CmdBox.vue

@@ -11,7 +11,7 @@
 
                 <a href="#" @click.prevent="toggleContentVisibility" :title="open ? iconOpen.tooltip : iconClosed.tooltip" class="toggle-icon">
                     <!-- begin CmdIcon -->
-                    <CmdIcon :iconClass="[open ? iconOpen.iconClass : iconClosed.iconClass]"></CmdIcon>
+                    <CmdIcon :iconClass="[open ? iconOpen.iconClass : iconClosed.iconClass]" :type="[open ? iconOpen.iconType : iconClosed.iconType]" />
                     <!-- end CmdIcon -->
                 </a>
             </div>
@@ -36,7 +36,7 @@
                 <!-- end CmdHeadline -->
 
                 <!-- begin CmdIcon -->
-                <CmdIcon class="toggle-icon" :iconClass="[open ? iconOpen.iconClass : iconClosed.iconClass]"></CmdIcon>
+                <CmdIcon class="toggle-icon" :iconClass="[open ? iconOpen.iconClass : iconClosed.iconClass]" :type="[open ? iconOpen.iconType : iconClosed.iconType]" />
                 <!-- end CmdIcon -->
             </a>
             <!-- end header for collapsible -->
@@ -254,7 +254,8 @@ export default {
             default: function () {
                 return {
                     iconClass: "icon-single-arrow-up",
-                    tooltip: "Close content"
+                    tooltip: "Close content",
+                    iconType: "auto"
                 }
             },
         },
@@ -268,7 +269,8 @@ export default {
             default: function () {
                 return {
                     iconClass: "icon-single-arrow-down",
-                    tooltip: "Show content"
+                    tooltip: "Show content",
+                    iconType: "auto"
                 }
             }
         },

package/src/components/CmdBoxWrapper.vue

@@ -7,10 +7,14 @@
 
             <div v-if="allowUserToToggleOrientation || allowTogglingCollapsingBoxes" class="options-wrapper">
                 <a v-if="allowTogglingCollapsingBoxes" href="#" @click.prevent="toggleCollapsingBoxes" :title="collapsingBoxesOpen ? collapseBoxesIcon.tooltip : expandBoxesIcon.tooltip">
-                    <CmdIcon :iconClass="collapsingBoxesOpen ? expandBoxesIcon.iconClass : collapseBoxesIcon.iconClass"/>
+                    <!-- begin CmdIcon -->
+                    <CmdIcon :iconClass="collapsingBoxesOpen ? expandBoxesIcon.iconClass : collapseBoxesIcon.iconClass" :type="oneBoxPerRow ? iconGridView.iconType : iconRowView.iconType" />
+                    <!-- end CmdIcon -->
                 </a>
                 <a v-if="allowUserToToggleOrientation" href="#" @click.prevent="oneBoxPerRow = !oneBoxPerRow" :title="oneBoxPerRow ? iconRowView.tooltip : iconGridView.tooltip">
-                    <CmdIcon :iconClass="oneBoxPerRow ? iconGridView.iconClass : iconRowView.iconClass"/>
+                    <!-- begin CmdIcon -->
+                    <CmdIcon :iconClass="oneBoxPerRow ? iconGridView.iconClass : iconRowView.iconClass" :type="oneBoxPerRow ? iconGridView.iconType : iconRowView.iconType" />
+                    <!-- end CmdIcon -->
                 </a>
             </div>
         </div>

package/src/components/CmdBreadcrumbs.vue

@@ -4,20 +4,26 @@
         <li v-for="(link, index) in breadcrumbLinks || []" :key="index">
             <!-- begin type 'href' -->
             <a  v-if="link.type === 'href'" :href="link.path">
-                <span v-if="link.iconClass" :class="link.iconClass"></span>
+                <!-- begin CmdIcon -->
+                <CmdIcon v-if="link.iconClass" :iconClass="link.iconClass" :type="link.iconType" />
+                <!-- end CmdIcon -->
                 <span v-if="link.text">{{ link.text }}</span>
             </a>
             <!-- end type 'href' -->
 
             <!-- begin type 'router' -->
             <router-link v-else-if="link.type === 'router'" :to="getRoute(link)">
-                <span v-if="link.iconClass" :class="link.iconClass"></span>
+                <!-- begin CmdIcon -->
+                <CmdIcon v-if="link.iconClass" :iconClass="link.iconClass" :type="link.iconType" />
+                <!-- end CmdIcon -->
                 <span v-if="link.text">{{ link.text }}</span>
             </router-link>
             <!-- end type 'router' -->
 
             <span v-else>
-                <span v-if="link.iconClass" :class="link.iconClass"></span>
+                <!-- begin CmdIcon -->
+                <CmdIcon v-if="link.iconClass" :iconClass="link.iconClass" :type="link.iconType" />
+                <!-- end CmdIcon -->
                 <span v-if="link.text">{{ link.text }}</span>
             </span>
             <span v-if="index < breadcrumbLinks.length - 1">{{ breadcrumbSeparator }}</span>
@@ -29,8 +35,14 @@
 // import functions
 import {getRoute} from "../utilities.js"
 
+// import components
+import CmdIcon from "./CmdIcon"
+
 export default {
     name: "CmdBreadcrumbs",
+    components: {
+        CmdIcon
+    },
     props: {
         /**
          * label in front/left of breadcrumbs

package/src/components/CmdFakeSelect.vue

@@ -35,11 +35,13 @@
                 <a v-if="$attrs.required || inputRequirements.length"
                    href="#"
                    @click.prevent
-                   :class="getStatusIconClass"
                    :title="!useCustomTooltip ? getValidationMessage : ''"
                    :aria-errormessage="tooltipId"
                    aria-live="assertive"
                    :id="tooltipId">
+                   <!-- begin CmdIcon -->
+                   <CmdIcon :iconClass="getStatusIconClass" />
+                   <!-- end CmdIcon -->
                 </a>
             </span>
             <!-- end label -->
@@ -57,7 +59,9 @@
                     <!-- end show color-box -->
 
                     <!-- begin optional icon -->
-                    <span v-if="optionIcon?.iconClass" :class="optionIcon?.iconClass"></span>
+                    <!-- begin CmdIcon -->
+                    <CmdIcon v-if="optionIcon?.iconClass" :type="optionIcon?.iconType" :class="optionIcon?.iconClass" />
+                    <!-- end CmdIcon -->
                     <!-- end optional icon -->
 
                     <!-- begin text -->
@@ -65,7 +69,14 @@
                     <!-- end text -->
 
                     <!-- begin custom dropdown-icon -->
-                    <span v-if="dropdownIcon" :class="dropdownIcon.iconClass" :title="dropdownIcon.tooltip"></span>
+                    <!-- begin CmdIcon -->
+                    <CmdIcon
+                        v-if="iconDropdown"
+                        :iconClass="iconDropdown.iconClass"
+                        :type="iconDropdown.iconType"
+                        :title="iconDropdown.tooltip"
+                    />
+                    <!-- end CmdIcon -->
                     <!-- end custom dropdown-icon -->
                 </a>
                 <!-- end default/selected-option-->
@@ -79,14 +90,18 @@
                            :class="{'active' : option.value === modelValue}"
                            :title="option.tooltip"
                         >
-                            <span v-if="option.iconClass" :class="option.iconClass"></span>
+                            <!-- begin CmdIcon -->
+                            <CmdIcon v-if="option.iconClass" :iconClass="option.iconClass" :type="option.iconType" />
+                            <!-- end CmdIcon -->
                             <span v-if="option.text">{{ option.text }}</span>
                         </a>
                         <!-- end type 'href' -->
 
                         <!-- begin type 'router' -->
                         <router-link v-if="optionLinkType === 'router'" to="#" @click.prevent="selectOption(option.value)" :class="{'active' : option.value === modelValue}">
-                            <span v-if="option.iconClass" :class="option.iconClass"></span>
+                            <!-- begin CmdIcon -->
+                            <CmdIcon v-if="option.iconClass" :iconClass="option.iconClass" :type="option.iconType" />
+                            <!-- end CmdIcon -->
                             <span>{{ option.text }}</span>
                         </router-link>
                         <!-- end type 'router' -->
@@ -119,13 +134,15 @@
                             <span class="color" :style="'background: ' + option.value"></span>
                             <span>{{ option.text }}</span>
                         </a>
-                        <!-- end color-boxe -->
+                        <!-- end color-boxes -->
                     </li>
 
                     <!-- begin (de)select all options -->
                     <li v-if="showSelectAllOptions && type === 'checkboxOptions'" class="select-all-options">
                         <a href="#" @click.prevent="toggleAllOptions">
-                            <span :class="selectAllOptionsIcon"></span>
+                            <!-- begin CmdIcon -->
+                            <CmdIcon :iconClass="selectAllOptionsIcon.iconClass" :type="selectAllOptionsIcon.iconType" />
+                            <!-- end CmdIcon -->
                             <span>{{ selectAllOptionsText }}</span>
                         </a>
                     </li>
@@ -152,6 +169,7 @@ import Identifier from "../mixins/Identifier"
 import Tooltip from "../mixins/Tooltip"
 
 // import components
+import CmdIcon from "./CmdIcon"
 import CmdTooltipForInputElements from "./CmdTooltipForInputElements"
 
 export default {
@@ -165,6 +183,7 @@ export default {
         Tooltip
     ],
     components: {
+        CmdIcon,
         CmdTooltipForInputElements
     },
     data() {
@@ -234,12 +253,13 @@ export default {
          * @requiredForAccessibility: partial
          * @defaultIcon: icon-single-arrow-down
          */
-        dropdownIcon: {
+        iconDropdown: {
             type: Object,
             default() {
                 return {
                     iconClass: "icon-single-arrow-down",
-                    tooltip: "Toggle dropdown visibility"
+                    tooltip: "Toggle dropdown visibility",
+                    iconType: "auto"
                 }
             }
         },
@@ -272,6 +292,18 @@ export default {
         textPleaseSelect: {
            type: String,
            default: "Please select\u2026"
+        },
+        /**
+         * set icon for "select all"-option
+         */
+        iconSelectAllOptions: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-check",
+                    iconType: "auto"
+                }
+            }
         }
     },
     computed: {
@@ -347,9 +379,6 @@ export default {
                 return "Deselect all options"
             }
             return "Select all options"
-        },
-        selectAllOptionsIcon() {
-            return "icon-check"
         }
     },
     mounted() {

package/src/components/CmdFancyBox.vue

@@ -23,18 +23,22 @@
                     <a v-if="fancyboxOptions.printButtons && fancyboxOptions.printButtons.color && fancyboxOptions.printButtons.color.show"
                        href="#"
                        class="button primary"
-                       :class="fancyboxOptions.printButtons.color.iconClass"
                        :title="fancyboxOptions.printButtons.color.tooltip"
                        id="print-color"
                        @click.prevent="printInGrayscale = false">
+                        <!-- begin CmdIcon -->
+                        <CmdIcon :iconClass="fancyboxOptions.printButtons.color.iconClass" :type="fancyboxOptions.printButtons.color.iconType" />
+                        <!-- end CmdIcon -->
                     </a>
                     <a v-if="fancyboxOptions.printButtons && fancyboxOptions.printButtons.grayscale && fancyboxOptions.printButtons.grayscale.show"
                        href="#"
                        class="button primary"
-                       :class="fancyboxOptions.printButtons.grayscale.iconClass"
                        :title="fancyboxOptions.printButtons.grayscale.tooltip"
                        id="print-grayscale"
                        @click.prevent="printInGrayscale = true">
+                        <!-- begin CmdIcon -->
+                        <CmdIcon :iconClass="fancyboxOptions.printButtons.grayscale.iconClass" :type="fancyboxOptions.printButtons.grayscale.iconType" />
+                        <!-- end CmdIcon -->
                     </a>
                     <!-- end print buttons -->
 
@@ -43,10 +47,12 @@
                        href="#"
                        class="button primary"
                        id="close-dialog"
-                       :class="fancyboxOptions.closeIcon.iconClass"
                        :title="fancyboxOptions.closeIcon.tooltip"
                        ref="close-dialog"
                        @click.prevent="close">
+                        <!-- begin CmdIcon -->
+                        <CmdIcon :iconClass="fancyboxOptions.closeIcon.iconClass" :type="fancyboxOptions.closeIcon.iconType" />
+                        <!-- end CmdIcon -->
                     </a>
                     <!-- end close-icon -->
                 </div>
@@ -105,6 +111,7 @@ import Identifier from "../mixins/Identifier"
 
 // import components
 import CmdHeadline from "./CmdHeadline"
+import CmdIcon from "./CmdIcon"
 import CmdSlideButton from "./CmdSlideButton.vue"
 import CmdThumbnailScroller from './CmdThumbnailScroller.vue'
 
@@ -122,6 +129,7 @@ const FancyBox = defineComponent({
     name: "CmdFancyBox",
     components: {
         CmdHeadline,
+        CmdIcon,
         CmdSlideButton,
         CmdThumbnailScroller
     },

package/src/components/CmdFormElement.vue

@@ -47,11 +47,13 @@
             <a v-if="$attrs.required || inputRequirements.length"
                 href="#"
                 @click.prevent
-                :class="getStatusIconClass"
                 :title="validationTooltip"
                 :aria-errormessage="tooltipId"
                 aria-live="assertive"
                 :id="tooltipId">
+                <!-- begin CmdIcon -->
+                <CmdIcon :iconClass="getStatusIconClass" />
+                <!-- end CmdIcon -->
             </a>
         </span>
         <!-- end label-text (+ required asterisk) -->
@@ -84,12 +86,14 @@
         <!-- begin show-password-icon -->
         <a v-if="$attrs.type === 'password'"
            href="#"
-           :class="['place-inside', iconPasswordVisible.iconClass]"
            @mousedown.prevent="showPassword"
            @mouseup.prevent="hidePassword"
            @mouseleave.prevent="hidePassword"
            @click.prevent
            :title="iconPasswordVisible.tooltip">
+           <!-- begin CmdIcon -->
+           <CmdIcon :iconClass="['place-inside', iconPasswordVisible.iconClass]" />
+           <!-- end CmdIcon -->
         </a>
         <!-- end show-password-icon -->
 
@@ -187,9 +191,15 @@
                     :value="modelValue"
                 />
                 <a v-if="showSearchButton" href="#" :class="['button no-flex', {disabled: $attrs.disabled}]" :title="iconSearch.tooltip" @click.prevent="executeSearch">
-                    <span :class="iconSearch.iconClass"></span>
+                    <!-- begin CmdIcon -->
+                    <CmdIcon :iconClass="iconSearch.iconClass" />
+                    <!-- end CmdIcon -->
+                </a>
+                <a v-if="iconDelete.show" href="#" @click.prevent="$emit('update:modelValue', '')" :title="iconDelete.tooltip">
+                    <!-- begin CmdIcon -->
+                    <CmdIcon :iconClass="iconDelete.iconClass" :type="iconDelete.iconType" />
+                    <!-- end CmdIcon -->
                 </a>
-                <a v-if="iconDelete.show" href="#" @click.prevent="$emit('update:modelValue', '')" :class="iconDelete.iconClass" :title="iconDelete.tooltip"></a>
             </span>
         </template>
     </label>
@@ -197,12 +207,24 @@
 
     <!-- begin button -->
     <button v-else class="button" v-bind="buttonAttrs">
-        <span v-if="nativeButton?.icon?.show && (nativeButton?.icon?.position === 'before' || !nativeButton?.icon?.position)" :class="nativeButton?.icon?.iconClass"></span>
+        <!-- begin CmdIcon -->
+        <CmdIcon
+            v-if="nativeButton?.icon?.show && (nativeButton?.icon?.position === 'before' || !nativeButton?.icon?.position)"
+            :iconClass="nativeButton?.icon?.iconClass"
+            :type="nativeButton?.icon?.iconType"
+        />
+        <!-- end CmdIcon -->
         <span v-if="nativeButton?.icon && nativeButton?.text">{{ nativeButton.text }}</span>
         <template v-else>
             {{ nativeButton.text }}
         </template>
-        <span v-if="nativeButton?.icon?.show && nativeButton?.icon?.position === 'after'" :class="nativeButton?.icon?.iconClass"></span>
+        <!-- begin CmdIcon -->
+        <CmdIcon
+            v-if="nativeButton?.icon?.show && nativeButton?.icon?.position === 'after'"
+            :iconClass="nativeButton?.icon?.iconClass"
+            :type="nativeButton?.icon?.iconType"
+        />
+        <!-- end CmdIcon -->
     </button>
     <!-- end button -->
 </template>
@@ -216,6 +238,7 @@ import Identifier from "../mixins/Identifier.js"
 import Tooltip from "../mixins/Tooltip.js"
 
 // import components
+import CmdIcon from "./CmdIcon"
 import CmdTooltipForInputElements from "./CmdTooltipForInputElements"
 
 const TYPES_WITHOUT_MAXLENGTH = ["color", "date", "datetime-local", "file", "number", "range"]
@@ -224,6 +247,7 @@ export default {
     inheritAttrs: false,
     name: "CmdFormElement",
     components: {
+        CmdIcon,
         CmdTooltipForInputElements
     },
     mixins: [

package/src/components/CmdFormFilters.vue

@@ -2,20 +2,27 @@
     <ul v-if="options.length" class="cmd-form-filters">
         <li v-if="options.length > 1">
             <a href="#" @click.prevent="deleteAllFilters">
-                <span v-if="linkDeleteAllFilters.icon && linkDeleteAllFilters.icon.show" :class="linkDeleteAllFilters.icon.iconClass" :title="linkDeleteAllFilters.icon.tooltip"></span>
+                <!-- begin CmdIcon -->
+                <CmdIcon v-if="linkDeleteAllFilters.icon && linkDeleteAllFilters.icon.show" :iconClass="linkDeleteAllFilters.icon.iconClass" :title="linkDeleteAllFilters.icon.tooltip" />
+                <!-- end CmdIcon -->
                 <span v-if="linkDeleteAllFilters.text">{{ linkDeleteAllFilters.text }}</span>
             </a>
         </li>
         <li v-for="(option, index) in options" :key="index">
-            <a href="#" @click.prevent="deleteClickedFilter(index)" :title="deleteFilter.icon.tooltip">
+            <a href="#" @click.prevent="deleteClickedFilter(index)" :title="deleteFilterIcon.tooltip">
                 <span>{{ selectedOptionsName(option) }}</span>
-                <span :class="deleteFilter.icon.iconClass"></span>
+                <!-- begin CmdIcon -->
+                <CmdIcon :iconClass="deleteFilterIcon.iconClass" :type="deleteFilterIcon.iconType" />
+                <!-- end CmdIcon -->
             </a>
         </li>
     </ul>
 </template>
 
 <script>
+// import components
+import CmdIcon from "./CmdIcon"
+
 export default {
     name: "CmdFormFilters",
     data() {
@@ -23,6 +30,9 @@ export default {
             options: []
         }
     },
+    components: {
+        CmdIcon
+    },
     props: {
         /**
          * model-value to support v-model
@@ -54,14 +64,13 @@ export default {
          *
          * @requiredForAccessibility: partial
          */
-        deleteFilter: {
+        deleteFilterIcon: {
             type: Object,
             default() {
                 return {
-                    icon: {
-                        iconClass: "icon-error-circle",
-                        tooltip: "Delete this filter"
-                    }
+                    iconClass: "icon-error-circle",
+                    tooltip: "Delete this filter",
+                    type: "auto"
                 }
             }
         },

package/src/components/CmdHeadline.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="['cmd-headline', { 'has-pre-headline-text': preHeadlineText, 'has-icon': iconClass}]">
         <!-- begin CmdIcon -->
-        <CmdIcon v-if="iconClass" :iconClass="iconClass" />
+        <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon.iconClass" :type="headlineIcon.iconType" />
         <!-- end CmdIcon -->
 
         <div v-if="preHeadlineText">
@@ -54,8 +54,8 @@ export default {
         /**
          * icon-class for icon shown left/before headline
          */
-        iconClass: {
-            type: String,
+        headlineIcon: {
+            type: Object,
             required: false
         }
     },

package/src/components/CmdInputGroup.vue

@@ -37,6 +37,9 @@
                :aria-errormessage="tooltipId"
                aria-live="assertive"
                :id="tooltipId">
+               <!-- begin CmdIcon -->
+               <CmdIcon :iconClass="getStatusIconClass" />
+               <!-- end CmdIcon -->
             </a>
         </span>
         <span v-if="!useSlot" :class="['flex-container', {'no-flex': !stretchHorizontally, 'no-gap': multipleSwitch}]">
@@ -50,7 +53,9 @@
                     :disabled="disabled"
                     :class="{'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch}"
                 />
-                <span v-if="multipleSwitch && inputElement.iconClass" :class="inputElement.iconClass"></span>
+                <!-- begin CmdIcon -->
+                <CmdIcon v-if="multipleSwitch && inputElement.iconClass" :iconClass="inputElement.iconClass" :type="inputElement.iconType" />
+                <!-- end CmdIcon -->
                 <span v-if="inputElement.labelText">{{ inputElement.labelText }}</span>
             </label>
         </span>
@@ -72,10 +77,12 @@ import Identifier from "../mixins/Identifier"
 import Tooltip from "../mixins/Tooltip.js"
 
 // import components
+import CmdIcon from "./CmdIcon"
 import CmdTooltipForInputElements from "./CmdTooltipForInputElements"
 
 export default {
     components: {
+        CmdIcon,
         CmdTooltipForInputElements
     },
     mixins: [