comand-component-library 4.2.30 → 4.2.32

package/dist/comand-component-library.js

@@ -1446,7 +1446,7 @@ function fa(e, t, n, s, i, l) {
     default: w(() => [
       n.componentTag === "ul" ? (a(), r("li", $o, [
         $(o("ul", {
-          class: "flex-container no-flex action-buttons",
+          class: "flex-container flex-none action-buttons",
           "data-component": n.componentName
         }, [
           o("li", null, [
@@ -1518,7 +1518,7 @@ function fa(e, t, n, s, i, l) {
       ])) : (a(), r(_, { key: 1 }, [
         l.isOuterComponent ? (a(), r("p", oa, y(n.componentName), 1)) : m("", !0),
         $(o("ul", {
-          class: "flex-container no-flex action-buttons",
+          class: "flex-container flex-none action-buttons",
           "data-component": n.componentName,
           onMouseenter: t[12] || (t[12] = (...u) => l.addHighlightRelatedComponent && l.addHighlightRelatedComponent(...u)),
           onMouseleave: t[13] || (t[13] = (...u) => l.removeHighlightRelatedComponent && l.removeHighlightRelatedComponent(...u))
@@ -3357,7 +3357,7 @@ function ks(e, t, n, s, i, l) {
       n.showSearchButton ? (a(), r("a", {
         key: 1,
         href: "#",
-        class: x(["button no-flex", { disabled: e.$attrs.disabled }]),
+        class: x(["button flex-none", { disabled: e.$attrs.disabled }]),
         title: n.iconSearch.tooltip,
         onClick: t[21] || (t[21] = S((...E) => l.executeSearch && l.executeSearch(...E), ["prevent"]))
       }, [
@@ -3365,7 +3365,7 @@ function ks(e, t, n, s, i, l) {
           iconClass: n.iconSearch.iconClass
         }, null, 8, ["iconClass"])
       ], 10, xs)) : m("", !0),
-      (c = n.iconDelete) != null && c.show ? (a(), r("a", {
+      (c = n.iconDelete) != null && c.show && !e.$attrs.disabled ? (a(), r("a", {
         key: 2,
         href: "#",
         onClick: t[22] || (t[22] = S((E) => e.$emit("update:modelValue", ""), ["prevent"])),
@@ -3867,7 +3867,7 @@ function nr(e, t, n, s, i, l) {
           (a(!0), r(_, null, q(n.addressData, (h, v) => (a(), r(_, { key: v }, [
             h.href || h.name === "address" && h.linkGoogleMaps || !n.showIconsOnly ? (a(), r("li", {
               key: 0,
-              class: x({ "no-flex": n.showIconsOnly })
+              class: x({ "flex-none": n.showIconsOnly })
             }, [
               h.href ? (a(), r("a", {
                 key: 0,
@@ -5689,7 +5689,7 @@ async function ed(e) {
 }
 const td = Ei, nd = ["aria-label"], id = { class: "flex-container" }, ld = {
   key: 1,
-  class: "button-wrapper no-flex"
+  class: "button-wrapper flex-none"
 }, od = ["title"], ad = ["title"], sd = ["title"], rd = {
   key: 0,
   class: "content"
@@ -5705,7 +5705,7 @@ const td = Ei, nd = ["aria-label"], id = { class: "flex-container" }, ld = {
   class: "content"
 }, pd = {
   key: 0,
-  class: "flex-container no-flex"
+  class: "flex-container flex-none"
 }, fd = ["title"], hd = { key: 1 }, gd = ["title"], yd = { key: 1 };
 function bd(e, t, n, s, i, l) {
   var h, v, b, O, T, M, B, P, D, U, W, V, R, Y, Q, X, le, ne, ie, re, pe, E, Z, de, fe, oe, Le, Ie, Be, De, Me;
@@ -6115,7 +6115,7 @@ const xd = /* @__PURE__ */ F(td, [["render", bd]]), Cd = {
   }
 }, vd = { class: "cmd-pages-basic-form" }, kd = {
   key: 0,
-  class: "flex-container no-flex row-for-small order-male-female"
+  class: "flex-container flex-none row-for-small order-male-female"
 }, wd = {
   key: 1,
   class: "flex-container order-lastname-firstname"
@@ -9186,7 +9186,7 @@ function Tm(e, t, n, s, i, l) {
   return a(), r("div", vm, [
     o("a", {
       href: "#",
-      class: "no-flex thumbnail-imagezoom",
+      class: "flex-none thumbnail-imagezoom",
       title: n.imageSmall.image.tooltip
     }, [
       p(d, I(n.imageSmall, {
@@ -9366,7 +9366,7 @@ const Sm = /* @__PURE__ */ F(Cm, [["render", Tm]]), _m = {
      *
      * component cannot handle native disabled-attribute, because it is no native form-element
      */
-    disabled: {
+    disableGroup: {
       type: Boolean,
       default: !1
     }
@@ -9422,7 +9422,7 @@ const Sm = /* @__PURE__ */ F(Cm, [["render", Tm]]), _m = {
   class: "label-text"
 }, Am = {
   key: 1,
-  class: "flex-container no-flex"
+  class: "flex-container flex-none"
 };
 function Pm(e, t, n, s, i, l) {
   const d = K, u = gn;
@@ -9433,7 +9433,7 @@ function Pm(e, t, n, s, i, l) {
       {
         inline: n.labelInline,
         "multiple-switch": n.multipleSwitch,
-        disabled: n.disabled,
+        disabled: n.disableGroup,
         "toggle-switches": n.toggleSwitches,
         "has-state": e.validationStatus
       }
@@ -9477,7 +9477,7 @@ function Pm(e, t, n, s, i, l) {
       A(e.$slots, "default")
     ])) : (a(), r("span", {
       key: 0,
-      class: x(["flex-container", { vertical: n.orientation === "vertical", "no-flex": !n.stretchHorizontally, "no-gap": n.multipleSwitch }])
+      class: x(["flex-container", { vertical: n.orientation === "vertical", "flex-none": !n.stretchHorizontally, "no-gap": n.multipleSwitch }])
     }, [
       (a(!0), r(_, null, q(n.inputElements, (c, g) => (a(), r("label", {
         key: g,
@@ -9490,7 +9490,7 @@ function Pm(e, t, n, s, i, l) {
           name: c.name,
           value: c.value,
           "onUpdate:modelValue": t[1] || (t[1] = (f) => l.inputValue = f),
-          disabled: n.disabled,
+          disabled: c.disabled,
           class: x({ "replace-input-type": n.replaceInputType })
         }, null, 10, Fm), [
           [Rl, l.inputValue]
@@ -10767,10 +10767,10 @@ const Sp = {
 }, Lp = {
   key: 1,
   class: "pm"
-}, Ip = { class: "flex-container no-flex" }, Bp = { class: "flex-container no-flex am-wrapper" }, Dp = {
+}, Ip = { class: "flex-container flex-none" }, Bp = { class: "flex-container flex-none am-wrapper" }, Dp = {
   key: 1,
   class: "input-wrapper"
-}, Mp = ["title"], Fp = { class: "flex-container no-flex pm-wrapper" }, Vp = {
+}, Mp = ["title"], Fp = { class: "flex-container flex-none pm-wrapper" }, Vp = {
   key: 1,
   class: "input-wrapper"
 }, Ap = ["title"];
@@ -12526,7 +12526,7 @@ const Zf = /* @__PURE__ */ F(Kf, [["render", Jf]]), Qf = {
   }
 }, $f = { class: "cmd-box-site-search flex-container" }, eh = { class: "flex-container align-bottom" }, th = { class: "input-wrapper align-bottom" }, nh = { key: 0 }, ih = { key: 1 }, lh = {
   key: 0,
-  class: "flex-container no-flex",
+  class: "flex-container flex-none",
   role: "listbox",
   "aria-expanded": "true"
 };
@@ -12566,7 +12566,7 @@ function oh(e, t, n, s, i, l) {
           l.cmdFormElementRadiusOptions.show ? (a(), k(u, I({
             key: 1,
             element: "select",
-            class: "no-flex",
+            class: "flex-none",
             modelValue: l.radius,
             "onUpdate:modelValue": t[2] || (t[2] = (D) => l.radius = D)
           }, l.cmdFormElementRadiusOptions), null, 16, ["modelValue"])) : m("", !0)
@@ -16129,7 +16129,7 @@ const By = {
 }, Vy = {
   key: 0,
   class: "list-of-files total-files"
-}, Ay = { class: "flex-container no-flex" }, Py = ["title"], Ey = {
+}, Ay = { class: "flex-container flex-none" }, Py = ["title"], Ey = {
   key: 0,
   class: "progressbar"
 }, Hy = ["value", "title"], qy = { class: "flex-container vertical list-files-wrapper" }, Ry = { class: "list-of-files" }, jy = ["title", "onClick"], Ny = {
@@ -16222,7 +16222,7 @@ function ob(e, t, n, s, i, l) {
             o("ul", Ry, [
               (a(!0), r(_, null, q(i.listOfFiles, (f, h) => (a(), r("li", {
                 key: h,
-                class: "flex-container no-flex"
+                class: "flex-container flex-none"
               }, [
                 o("a", {
                   href: "#",
@@ -17561,7 +17561,7 @@ const Ab = {
       this.expandMail.has(e) ? this.expandMail.delete(e) : this.expandMail.add(e);
     }
   }
-}, Pb = ["title"], Eb = { class: "no-flex" }, Hb = { class: "flex-container" }, qb = { class: "sender-receiver-wrapper flex-container no-wrap-on-small-devices align-items-center no-flex" }, Rb = { class: "contact-full-name" }, jb = ["onClick"], Nb = { class: "flex-container received-and-options-wrapper no-wrap-on-small-devices" }, Ub = { class: "no-list-items date-time-wrapper" }, zb = { class: "flex-container no-wrap-on-small-devices" }, Wb = ["datetime"], Gb = ["datetime"], Kb = { class: "options-wrapper flex-container no-wrap-on-small-devices no-flex" }, Yb = ["onClick"], Jb = ["onClick", "title"], Zb = ["onClick", "title"], Qb = { key: 0 };
+}, Pb = ["title"], Eb = { class: "flex-none" }, Hb = { class: "flex-container" }, qb = { class: "sender-receiver-wrapper flex-container no-wrap-on-small-devices align-items-center flex-none" }, Rb = { class: "contact-full-name" }, jb = ["onClick"], Nb = { class: "flex-container received-and-options-wrapper no-wrap-on-small-devices" }, Ub = { class: "no-list-items date-time-wrapper" }, zb = { class: "flex-container no-wrap-on-small-devices" }, Wb = ["datetime"], Gb = ["datetime"], Kb = { class: "options-wrapper flex-container no-wrap-on-small-devices flex-none" }, Yb = ["onClick"], Jb = ["onClick", "title"], Zb = ["onClick", "title"], Qb = { key: 0 };
 function Xb(e, t, n, s, i, l) {
   const d = xe, u = Ne;
   return n.mails.length ? (a(!0), r(_, { key: 0 }, q(n.mails, (c, g) => {
@@ -18882,60 +18882,60 @@ const px = /* @__PURE__ */ F(cx, [["render", mx]]), fx = [
   outbox: Gx
 }, Yx = [
   {
-    type: "href",
+    linkType: "href",
     path: "#",
     text: "Contact",
     tooltip: "This is a tooltip for step 1",
     iconClass: "icon-address"
   },
   {
-    type: "href",
+    linkType: "href",
     path: "#",
     text: "Settings",
     iconClass: "icon-configuration"
   },
   {
-    type: "href",
+    linkType: "href",
     path: "#",
     text: "Attachments",
     iconClass: "icon-attachment"
   },
   {
-    type: "href",
+    linkType: "href",
     path: "#",
     text: "Terms and Conditions",
     iconClass: "icon-section-sign"
   },
   {
-    type: "href",
+    linkType: "href",
     path: "#",
     text: "Summary",
     iconClass: "icon-rows"
   }
 ], Jx = [
   {
-    type: "href",
+    linkType: "href",
     path: "#",
     text: "Contact",
     tooltip: "This is a tooltip for step 1"
   },
   {
-    type: "href",
+    linkType: "href",
     path: "#",
     text: "Settings"
   },
   {
-    type: "href",
+    linkType: "href",
     path: "#",
     text: "Attachments"
   },
   {
-    type: "href",
+    linkType: "href",
     path: "#",
     text: "Terms and Conditions"
   },
   {
-    type: "href",
+    linkType: "href",
     path: "#",
     text: "Summary"
   }
@@ -20456,7 +20456,7 @@ const px = /* @__PURE__ */ F(cx, [["render", mx]]), fx = [
     text: "Zimbabwe",
     value: "zw"
   }
-], _C = "comand-component-library", OC = "4.2.30", LC = "GPL-3.0-only", IC = "CoManD-UI", BC = "module", DC = {
+], _C = "comand-component-library", OC = "4.2.32", LC = "GPL-3.0-only", IC = "CoManD-UI", BC = "module", DC = {
   prepublishOnly: "npm run build-lib",
   dev: "vite",
   build: "vite build",
@@ -20477,7 +20477,7 @@ const px = /* @__PURE__ */ F(cx, [["render", mx]]), fx = [
   "./us-cities.json": "./src/assets/lists-of-data/us-cities.json"
 }, VC = {
   "clickout-event": "^1.1.2",
-  "comand-frontend-framework": "^4.2.50",
+  "comand-frontend-framework": "^4.2.57",
   "comand-ui-iconfonts": "^1.0.19",
   "core-js": "^3.20.1",
   prismjs: "^1.27.0",
@@ -21818,13 +21818,13 @@ const px = /* @__PURE__ */ F(cx, [["render", mx]]), fx = [
 }, $C = {
   class: "headline-demopage",
   id: "section-address-data"
-}, e1 = { class: "flex-container" }, t1 = { class: "flex-container" }, n1 = { class: "list-status" }, i1 = { class: "error" }, l1 = { class: "flex-container" }, o1 = { class: "headline-demopage" }, a1 = { class: "flex-container" }, s1 = { class: "flex-container" }, r1 = { class: "flex-container" }, d1 = { class: "flex-container" }, u1 = { class: "flex-container" }, c1 = { class: "headline-demopage" }, m1 = { class: "flex-container" }, p1 = { class: "flex-container no-flex" }, f1 = {
+}, e1 = { class: "flex-container" }, t1 = { class: "flex-container" }, n1 = { class: "list-status" }, i1 = { class: "error" }, l1 = { class: "flex-container" }, o1 = { class: "headline-demopage" }, a1 = { class: "flex-container" }, s1 = { class: "flex-container" }, r1 = { class: "flex-container" }, d1 = { class: "flex-container" }, u1 = { class: "flex-container" }, c1 = { class: "headline-demopage" }, m1 = { class: "flex-container" }, p1 = { class: "flex-container flex-none" }, f1 = {
   class: "inline",
   for: "range-value"
-}, h1 = ["disabled"], g1 = { for: "range-slider" }, y1 = ["disabled"], b1 = { class: "label inline" }, x1 = { class: "flex-container no-flex" }, C1 = { class: "label inline" }, v1 = { class: "flex-container no-flex" }, k1 = { class: "label inline" }, w1 = { class: "flex-container no-flex" }, T1 = { class: "label inline" }, S1 = { class: "flex-container no-flex" }, _1 = {
+}, h1 = ["disabled"], g1 = { for: "range-slider" }, y1 = ["disabled"], b1 = { class: "label inline" }, x1 = { class: "flex-container flex-none" }, C1 = { class: "label inline" }, v1 = { class: "flex-container flex-none" }, k1 = { class: "label inline" }, w1 = { class: "flex-container flex-none" }, T1 = { class: "label inline" }, S1 = { class: "flex-container flex-none" }, _1 = {
   class: "headline-demopage",
   id: "section-input-group"
-}, O1 = { class: "flex-container" }, L1 = { class: "button-wrapper no-flex" }, I1 = ["disabled"], B1 = {
+}, O1 = { class: "flex-container" }, L1 = { class: "button-wrapper flex-none" }, I1 = ["disabled"], B1 = {
   class: "headline-demopage",
   id: "section-bank-account-data"
 }, D1 = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.2.30",
+  "version": "4.2.32",
   "license": "GPL-3.0-only",
   "author": "CoManD-UI",
   "private": false,
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "clickout-event": "^1.1.2",
-    "comand-frontend-framework": "^4.2.50",
+    "comand-frontend-framework": "^4.2.57",
     "comand-ui-iconfonts": "^1.0.19",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",

package/src/ComponentLibrary.vue

@@ -574,7 +574,7 @@
                         <h2>Slider [native]</h2>
                         <div class="label" :class="validationStatus">
                             <span class="label-text">Single-Slider (with in- and output):</span>
-                            <span class="flex-container no-flex">
+                            <span class="flex-container flex-none">
                                     <label class="inline" for="range-value">
                                         <span class="label-text">
                                             <span>Range Value:</span>
@@ -715,7 +715,7 @@
                         <h3>Checkboxes [native]</h3>
                         <div class="label inline">
                             <span class="label-text">Label for native checkboxes:</span>
-                            <div class="flex-container no-flex">
+                            <div class="flex-container flex-none">
                                 <CmdFormElement
                                     element="input"
                                     labelText="Label for checkbox with boolean"
@@ -762,7 +762,7 @@
                         <h3>Checkboxes (replaced)</h3>
                         <div class="label inline">
                             <span class="label-text">Label for Replaced Input-Type-Checkbox:</span>
-                            <div class="flex-container no-flex">
+                            <div class="flex-container flex-none">
                                 <CmdFormElement
                                     element="input"
                                     labelText="Label for replaced checkbox"
@@ -790,7 +790,7 @@
                         <h3>Radiobuttons [native]</h3>
                         <div class="label inline">
                             <span class="label-text">Label for native radiobuttons:</span>
-                            <div class="flex-container no-flex">
+                            <div class="flex-container flex-none">
                                 <CmdFormElement
                                     element="input"
                                     labelText="Label for native radiobutton"
@@ -821,7 +821,7 @@
                         <h3>Radiobuttons (replaced)</h3>
                         <div class="label inline">
                             <span class="label-text">Label for Replaced Input-Type-Radio:</span>
-                            <div class="flex-container no-flex">
+                            <div class="flex-container flex-none">
                                 <CmdFormElement
                                     element="input"
                                     labelText="Label for replaced radiobutton"
@@ -962,7 +962,7 @@
                     <!-- end fieldset -->
                     <div class="flex-container">
                         <small>(values will not be submitted with the form!)</small>
-                        <div class="button-wrapper no-flex">
+                        <div class="button-wrapper flex-none">
                             <CmdFormElement
                                 element="button"
                                 :nativeButton="{text: 'Submit-button from component'}"

package/src/assets/data/multistep-form-progress-bar.json

@@ -1,32 +1,32 @@
 {
   "withIcon": [
     {
-      "type": "href",
+      "linkType": "href",
       "path": "#",
       "text": "Contact",
       "tooltip": "This is a tooltip for step 1",
       "iconClass": "icon-address"
     },
     {
-      "type": "href",
+      "linkType": "href",
       "path": "#",
       "text": "Settings",
       "iconClass": "icon-configuration"
     },
     {
-      "type": "href",
+      "linkType": "href",
       "path": "#",
       "text": "Attachments",
       "iconClass": "icon-attachment"
     },
     {
-      "type": "href",
+      "linkType": "href",
       "path": "#",
       "text": "Terms and Conditions",
       "iconClass": "icon-section-sign"
     },
     {
-      "type": "href",
+      "linkType": "href",
       "path": "#",
       "text": "Summary",
       "iconClass": "icon-rows"
@@ -34,28 +34,28 @@
   ],
   "withoutIcon": [
     {
-      "type": "href",
+      "linkType": "href",
       "path": "#",
       "text": "Contact",
       "tooltip": "This is a tooltip for step 1"
     },
     {
-      "type": "href",
+      "linkType": "href",
       "path": "#",
       "text": "Settings"
     },
     {
-      "type": "href",
+      "linkType": "href",
       "path": "#",
       "text": "Attachments"
     },
     {
-      "type": "href",
+      "linkType": "href",
       "path": "#",
       "text": "Terms and Conditions"
     },
     {
-      "type": "href",
+      "linkType": "href",
       "path": "#",
       "text": "Summary"
     }

package/src/components/CmdAddressData.vue

@@ -65,7 +65,7 @@
                 <ul v-else :class="['flex-container', {'vertical': !showIconsOnly}]">
                     <template v-for="(entry, index) in addressData" :key="index">
                         <li v-if="entry.href || (entry.name === 'address' && entry.linkGoogleMaps) || !showIconsOnly"
-                            :class="{'no-flex' : showIconsOnly}">
+                            :class="{'flex-none' : showIconsOnly}">
                             <!-- begin all entries except address (which has no href) -->
                             <a v-if="entry.href"
                                :class="{'button' : styleLinksAsButtons}"

package/src/components/CmdBasicForm.vue

@@ -15,7 +15,7 @@
             :formAction="formAction"
             ref="form"
         >
-            <div v-if="configuration.salutation" class="flex-container no-flex row-for-small order-male-female">
+            <div v-if="configuration.salutation" class="flex-container flex-none row-for-small order-male-female">
                 <!-- begin cmd-form-element -->
                 <CmdFormElement
                     element="input"

package/src/components/CmdFancyBox.vue

@@ -16,7 +16,7 @@
             <!-- begin button-wrapper -->
             <div
                 v-if="(fancyBoxOptionsProperties.printButtons?.color || fancyBoxOptionsProperties.printButtons?.grayscale) || fancyBoxOptionsProperties.closeIcon"
-                class="button-wrapper no-flex"
+                class="button-wrapper flex-none"
             >  <!-- begin print buttons -->
                 <a v-if="showPrintButtons && fancyBoxOptionsProperties.printButtons?.color"
                    href="#"
@@ -93,7 +93,7 @@
             </div>
         </div>
 
-        <footer v-if="showSubmitButtons && fancyBoxOptionsProperties.submitButtons" class="flex-container no-flex">
+        <footer v-if="showSubmitButtons && fancyBoxOptionsProperties.submitButtons" class="flex-container flex-none">
             <!-- begin cancel-button -->
             <button
                 v-if="fancyBoxOptionsProperties.submitButtons?.cancel"

package/src/components/CmdFlexContainer.vue

@@ -89,7 +89,7 @@ export default {
                 htmlClasses.push("no-gap")
             }
             if (this.noFlex) {
-                htmlClasses.push("no-flex")
+                htmlClasses.push("flex-none")
             }
             if (this.alignItems) {
                 htmlClasses.push("align-items-" + this.alignItems)

package/src/components/CmdFormElement.vue

@@ -232,13 +232,13 @@
                     :maxlength="getMaxLength()"
                     :value="modelValue"
                 />
-                <a v-if="showSearchButton" href="#" :class="['button no-flex', {disabled: $attrs.disabled}]"
+                <a v-if="showSearchButton" href="#" :class="['button flex-none', {disabled: $attrs.disabled}]"
                    :title="iconSearch.tooltip" @click.prevent="executeSearch">
                     <!-- begin CmdIcon -->
                     <CmdIcon :iconClass="iconSearch.iconClass"/>
                     <!-- end CmdIcon -->
                 </a>
-                <a v-if="iconDelete?.show" href="#" @click.prevent="$emit('update:modelValue', '')"
+                <a v-if="iconDelete?.show && !$attrs.disabled" href="#" @click.prevent="$emit('update:modelValue', '')"
                    :title="iconDelete?.tooltip">
                     <!-- begin CmdIcon -->
                     <CmdIcon :iconClass="iconDelete?.iconClass" :type="iconDelete?.iconType"/>

package/src/components/CmdImageZoom.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="cmd-image-zoom flex-container">
         <!-- begin small image -->
-        <a href="#" class="no-flex thumbnail-imagezoom" :title="imageSmall.image.tooltip">
+        <a href="#" class="flex-none thumbnail-imagezoom" :title="imageSmall.image.tooltip">
             <!-- begin CmdImage for small image -->
             <CmdImage v-bind="imageSmall" :figcaption="{}"
                 @mouseover="onMouseOver"

package/src/components/CmdInputGroup.vue

@@ -5,7 +5,7 @@
         {
             inline: labelInline,
             'multiple-switch': multipleSwitch,
-            disabled: disabled,
+            disabled: disableGroup,
             'toggle-switches': toggleSwitches,
             'has-state': validationStatus
         }
@@ -49,7 +49,7 @@
         <!-- end label -->
 
         <!-- begin view without slot -->
-        <span v-if="!useSlot" :class="['flex-container', {'vertical': orientation === 'vertical','no-flex': !stretchHorizontally, 'no-gap': multipleSwitch}]">
+        <span v-if="!useSlot" :class="['flex-container', {'vertical': orientation === 'vertical','flex-none': !stretchHorizontally, 'no-gap': multipleSwitch}]">
             <label v-for="(inputElement, index) in inputElements" :key="index" :for="inputElement.id" :class="{'toggle-switch': toggleSwitches, colored: colored}">
                 <input
                     :type="inputTypes"
@@ -57,7 +57,7 @@
                     :name="inputElement.name"
                     :value="inputElement.value"
                     v-model="inputValue"
-                    :disabled="disabled"
+                    :disabled="inputElement.disabled"
                     :class="{'replace-input-type': replaceInputType}"
                 />
                 <!-- begin CmdIcon -->
@@ -73,7 +73,7 @@
         <!-- end view without slot -->
 
         <!-- begin useSlot -->
-        <div v-else class="flex-container no-flex">
+        <div v-else class="flex-container flex-none">
             <!-- begin slot -->
             <slot></slot>
             <!-- end slot -->
@@ -259,7 +259,7 @@ export default {
          *
          * component cannot handle native disabled-attribute, because it is no native form-element
          */
-        disabled: {
+        disableGroup: {
             type: Boolean,
             default: false
         }

package/src/components/CmdMailToolEntry.vue

@@ -6,13 +6,13 @@
             :class="['cmd-mail-tool-entry flex-container box', { unread : !mailIsRead.has(mail.id)}]"
             :title="getMessage('mail_tool_entry.tooltip.read_this_mail')"
         >
-            <dl class="no-flex">
+            <dl class="flex-none">
                 <dt class="flex-container">
                     {{
                         boxType === "inbox" ? getMessage("mail_tool_entry.description_label.from") : getMessage("mail_tool_entry.description_label.to")
                     }}
                 </dt>
-                <dd class="sender-receiver-wrapper flex-container no-wrap-on-small-devices align-items-center no-flex">
+                <dd class="sender-receiver-wrapper flex-container no-wrap-on-small-devices align-items-center flex-none">
                     <!-- begin CmdImage for contact image -->
                     <CmdImage v-if="mail.cmdImage?.src"
                               :src="mail.cmdImage.src"
@@ -33,7 +33,7 @@
                         <time :datetime="mail.time">{{ mailFormatTime(mail.time) }}</time>
                     </dd>
                 </dl>
-                <div class="options-wrapper flex-container no-wrap-on-small-devices no-flex">
+                <div class="options-wrapper flex-container no-wrap-on-small-devices flex-none">
                     <a href="#" @click.prevent="deleteMail(mail.id)" title="Delete this mail">
                         <span class="icon-delete"></span>
                     </a>

package/src/components/CmdOpeningHoursItem.vue

@@ -32,9 +32,9 @@
         <!-- end day -->
 
         <!-- begin hours -->
-        <dd class="flex-container no-flex">
+        <dd class="flex-container flex-none">
             <!-- begin AM -->
-            <div class="flex-container no-flex am-wrapper">
+            <div class="flex-container flex-none am-wrapper">
             <template v-if="editableDay.amClosed">
                 <CmdFormElement
                     element="input"
@@ -76,7 +76,7 @@
             <!-- end AM -->
 
             <!-- begin PM -->
-            <div class="flex-container no-flex pm-wrapper">
+            <div class="flex-container flex-none pm-wrapper">
                 <template v-if="editableDay.pmClosed">
                     <CmdFormElement
                         element="input"

package/src/components/CmdSiteSearch.vue

@@ -44,7 +44,7 @@
                 <CmdFormElement
                     v-if="cmdFormElementRadiusOptions.show"
                     element="select"
-                    class="no-flex"
+                    class="flex-none"
                     v-model="radius"
                     v-bind="cmdFormElementRadiusOptions"
                 />
@@ -78,7 +78,7 @@
                 <span v-else>{{ getMessage("site_search.show_filter_options") }}</span>
             </a>
             <transition name="fade">
-                <div v-if="showFilters && cmdFakeSelect?.selectData.length" class="flex-container no-flex" role="listbox" aria-expanded="true">
+                <div v-if="showFilters && cmdFakeSelect?.selectData.length" class="flex-container flex-none" role="listbox" aria-expanded="true">
                     <!-- begin CmdFakeSelect -->
                     <CmdFakeSelect
                         role="option"

package/src/components/CmdUploadForm.vue

@@ -45,7 +45,7 @@
                     <!-- end CmdHeadline -->
 
                     <ul v-if="showTotalUpload && listOfFiles.length !== 1" class="list-of-files total-files">
-                        <li class="flex-container no-flex">
+                        <li class="flex-container flex-none">
                             <a
                                 href="#"
                                 :title="getMessage('upload_form.labeltext.remove_all_files_from_list')"
@@ -97,7 +97,7 @@
                         <li
                             v-for="(uploadFile, index) in listOfFiles"
                             :key="index"
-                            class="flex-container no-flex"
+                            class="flex-container flex-none"
                         >
                             <a
                                 href="#"

package/src/components/EditComponentWrapper.vue

@@ -9,7 +9,7 @@
         :data-identifier="componentIdentifier">
         <li v-if="componentTag === 'ul'" class="action-buttons-wrapper">
             <!-- begin action-buttons -->
-            <ul v-show="active" class="flex-container no-flex action-buttons" :data-component="componentName">
+            <ul v-show="active" class="flex-container flex-none action-buttons" :data-component="componentName">
                 <!-- begin add -->
                 <li>
                     <a :class="['icon-hexagon button confirm', {disabled: !addHandlerProvider && !itemProvider && !allowAddComponent}]"
@@ -79,7 +79,7 @@
             <!-- begin action-buttons -->
             <p v-if="isOuterComponent" class="component-name">{{ componentName }}</p>
             <ul v-show="active"
-                class="flex-container no-flex action-buttons"
+                class="flex-container flex-none action-buttons"
                 :data-component="componentName"
                 @mouseenter="addHighlightRelatedComponent"
                 @mouseleave="removeHighlightRelatedComponent">