comand-component-library 4.1.88 → 4.1.89

package/dist/comand-component-library.js

@@ -2711,7 +2711,7 @@ const fn = {
      *
      * @affectsStyling: true
      */
-    colored: {
+    f: {
       type: Boolean,
       required: !1
     },
@@ -3142,7 +3142,7 @@ function ys(e, n, t, a, i, o) {
         inline: t.displayLabelInline,
         "stretch-field": t.stretchField,
         "toggle-switch": t.toggleSwitch,
-        colored: t.colored,
+        colored: e.colored,
         "has-state": e.validationStatus
       }
     ]),
@@ -9005,6 +9005,19 @@ const Rm = /* @__PURE__ */ P(Pm, [["render", qm]]), Nm = {
       type: Boolean,
       default: !0
     },
+    /**
+     * on/off-, yes/no-color-styling
+     *
+     * set to true, if checkbox/radio-buttons should have green/checked and red/unchecked color-coding
+     * toggleSwitch-prop must be set to "true"
+     * element-prop must be set to "input" and type-attribute must be set to "checkbox" or "radio"
+     *
+     * @affectsStyling: true
+     */
+    colored: {
+      type: Boolean,
+      required: !1
+    },
     /**
      * list of input-elements inside group
      *
@@ -9231,7 +9244,7 @@ function Qm(e, n, t, a, i, o) {
       (l(!0), r(S, null, q(t.inputElements, (u, g) => (l(), r("label", {
         key: g,
         for: u.id,
-        class: _({ "toggle-switch": t.toggleSwitches })
+        class: _({ "toggle-switch": t.toggleSwitches, colored: t.colored })
       }, [
         X(s("input", {
           type: t.inputTypes,
@@ -19469,7 +19482,7 @@ const b1 = /* @__PURE__ */ P(f1, [["render", y1]]), x1 = [
     text: "Zimbabwe",
     value: "zw"
   }
-], _1 = "comand-component-library", C1 = "4.1.88", v1 = "GPL-3.0-only", w1 = "CoManD-UI", k1 = "module", T1 = {
+], _1 = "comand-component-library", C1 = "4.1.89", v1 = "GPL-3.0-only", w1 = "CoManD-UI", k1 = "module", T1 = {
   prepublishOnly: "npm run build-lib",
   dev: "vite",
   build: "vite build",
@@ -21945,12 +21958,13 @@ function kk(e, n, t, a, i, o) {
                 ]),
                 CC,
                 h(D, {
-                  labelText: "Grouplabel for checkbox-group styled as toggle-switches:",
+                  labelText: "Grouplabel for checkbox-group styled as toggle-switches (colored):",
                   inputElements: o.idForReplacedInputsInInputGroup("checkbox-group-toggle-switch"),
                   inputTypes: "checkbox",
                   modelValue: i.inputGroupValueToggleSwitchCheckbox,
                   "onUpdate:modelValue": n[63] || (n[63] = (x) => i.inputGroupValueToggleSwitchCheckbox = x),
                   toggleSwitches: !0,
+                  colored: !0,
                   required: "required",
                   status: i.validationStatus,
                   disabled: i.disabledStatus

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.1.88",
+  "version": "4.1.89",
   "license": "GPL-3.0-only",
   "author": "CoManD-UI",
   "private": false,

package/src/ComponentLibrary.vue

@@ -867,11 +867,12 @@
                         </dl>
                         <h3>Input Groups with Checkboxes/Radiobuttons (toggle-switches)</h3>
                         <CmdInputGroup
-                            labelText="Grouplabel for checkbox-group styled as toggle-switches:"
+                            labelText="Grouplabel for checkbox-group styled as toggle-switches (colored):"
                             :inputElements="idForReplacedInputsInInputGroup('checkbox-group-toggle-switch')"
                             inputTypes="checkbox"
                             v-model="inputGroupValueToggleSwitchCheckbox"
                             :toggleSwitches="true"
+                            :colored="true"
                             required="required"
                             :status="validationStatus"
                             :disabled="disabledStatus"

package/src/components/CmdFormElement.vue

@@ -376,7 +376,7 @@ export default {
          *
          * @affectsStyling: true
          */
-        colored: {
+        f: {
             type: Boolean,
             required: false
         },

package/src/components/CmdInputGroup.vue

@@ -50,7 +50,7 @@
 
         <!-- begin view without slot -->
         <span v-if="!useSlot" :class="['flex-container', {'no-flex': !stretchHorizontally, 'no-gap': multipleSwitch}]">
-            <label v-for="(inputElement, index) in inputElements" :key="index" :for="inputElement.id" :class="{'toggle-switch': toggleSwitches}">
+            <label v-for="(inputElement, index) in inputElements" :key="index" :for="inputElement.id" :class="{'toggle-switch': toggleSwitches, colored: colored}">
                 <input
                     :type="inputTypes"
                     :id="inputElement.id"
@@ -118,6 +118,19 @@ export default {
             type: Boolean,
             default: true
         },
+        /**
+         * on/off-, yes/no-color-styling
+         *
+         * set to true, if checkbox/radio-buttons should have green/checked and red/unchecked color-coding
+         * toggleSwitch-prop must be set to "true"
+         * element-prop must be set to "input" and type-attribute must be set to "checkbox" or "radio"
+         *
+         * @affectsStyling: true
+         */
+        colored: {
+            type: Boolean,
+            required: false
+        },
         /**
          * list of input-elements inside group
          *