comand-component-library 4.0.3 → 4.0.5

package/dist/comand-component-library.js

@@ -1755,8 +1755,7 @@ function Xl(e, n, t, a, l, i) {
         }),
         _: 3
       })) : u("", !0)
-    ], 64)) : u("", !0),
-    (s(), b(xe(i.headlineTag), null, {
+    ], 64)) : (s(), b(xe(i.headlineTag), { key: 1 }, {
       default: P(() => {
         var g, m;
         return [
@@ -3101,7 +3100,7 @@ const bs = ["color", "date", "datetime-local", "file", "number", "range"], Cs =
 }, zs = ["id", "maxlength", "value"], qs = ["title"], Rs = ["title"], Us = { key: 1 };
 function Gs(e, n, t, a, l, i) {
   var c, f, g, m, k, y, v, w, S, M, D, E, T, q, N, H, U, Q, z, Y, Z, le, W, _e;
-  const d = Dt, r = V;
+  const d = V, r = Dt;
   return t.element === "input" || t.element === "select" || t.element === "textarea" ? (s(), o("label", {
     key: 0,
     class: C([
@@ -3130,16 +3129,8 @@ function Gs(e, n, t, a, l, i) {
         ], 64)) : j(e.$slots, "labeltext", { key: 1 }),
         e.$attrs.required ? (s(), o("sup", ks, "*")) : u("", !0)
       ]),
-      e.useCustomTooltip && (e.validationStatus === "" || e.validationStatus === "error") ? (s(), b(d, {
-        key: 0,
-        ref: "tooltip",
-        validationStatus: e.validationStatus,
-        relatedId: e.tooltipId,
-        cmdListOfRequirements: e.listOfRequirements,
-        role: e.validationStatus === "error" ? "alert" : "dialog"
-      }, null, 8, ["validationStatus", "relatedId", "cmdListOfRequirements", "role"])) : u("", !0),
       (e.$attrs.required || e.inputRequirements.length) && t.showStatusIcon ? (s(), o("a", {
-        key: 1,
+        key: 0,
         href: "#",
         onClick: n[0] || (n[0] = I(() => {
         }, ["prevent"])),
@@ -3148,11 +3139,19 @@ function Gs(e, n, t, a, l, i) {
         "aria-live": "assertive",
         id: e.tooltipId
       }, [
-        x(r, { iconClass: e.getStatusIconClass }, null, 8, ["iconClass"])
-      ], 8, xs)) : u("", !0)
+        x(d, { iconClass: e.getStatusIconClass }, null, 8, ["iconClass"])
+      ], 8, xs)) : u("", !0),
+      e.useCustomTooltip && (e.validationStatus === "" || e.validationStatus === "error") ? (s(), b(r, {
+        key: 1,
+        ref: "tooltip",
+        validationStatus: e.validationStatus,
+        relatedId: e.tooltipId,
+        cmdListOfRequirements: e.listOfRequirements,
+        role: e.validationStatus === "error" ? "alert" : "dialog"
+      }, null, 8, ["validationStatus", "relatedId", "cmdListOfRequirements", "role"])) : u("", !0)
     ], 2)) : u("", !0),
     e.$attrs.type !== "checkbox" && e.$attrs.type !== "radio" ? (s(), o("span", vs, [
-      t.fieldIconClass ? (s(), b(r, {
+      t.fieldIconClass ? (s(), b(d, {
         key: 0,
         class: "place-inside",
         iconClass: t.fieldIconClass
@@ -3183,7 +3182,7 @@ function Gs(e, n, t, a, l, i) {
         }, ["prevent"])),
         title: t.iconPasswordVisible.tooltip
       }, [
-        x(r, {
+        x(d, {
           iconClass: t.iconPasswordVisible.iconClass
         }, null, 8, ["iconClass"])
       ], 40, Ts)) : u("", !0)
@@ -3283,7 +3282,7 @@ function Gs(e, n, t, a, l, i) {
         title: t.iconSearch.tooltip,
         onClick: n[21] || (n[21] = I((...L) => i.executeSearch && i.executeSearch(...L), ["prevent"]))
       }, [
-        x(r, {
+        x(d, {
           iconClass: t.iconSearch.iconClass
         }, null, 8, ["iconClass"])
       ], 10, qs)) : u("", !0),
@@ -3293,7 +3292,7 @@ function Gs(e, n, t, a, l, i) {
         onClick: n[22] || (n[22] = I((L) => e.$emit("update:modelValue", ""), ["prevent"])),
         title: (f = t.iconDelete) == null ? void 0 : f.tooltip
       }, [
-        x(r, {
+        x(d, {
           iconClass: (g = t.iconDelete) == null ? void 0 : g.iconClass,
           type: (m = t.iconDelete) == null ? void 0 : m.iconType
         }, null, 8, ["iconClass", "type"])
@@ -3305,7 +3304,7 @@ function Gs(e, n, t, a, l, i) {
   }, i.buttonAttrs, {
     onClick: n[23] || (n[23] = (...L) => i.submit && i.submit(...L))
   }), [
-    (y = (k = t.nativeButton) == null ? void 0 : k.icon) != null && y.show && (((w = (v = t.nativeButton) == null ? void 0 : v.icon) == null ? void 0 : w.position) === "before" || !((M = (S = t.nativeButton) == null ? void 0 : S.icon) != null && M.position)) ? (s(), b(r, {
+    (y = (k = t.nativeButton) == null ? void 0 : k.icon) != null && y.show && (((w = (v = t.nativeButton) == null ? void 0 : v.icon) == null ? void 0 : w.position) === "before" || !((M = (S = t.nativeButton) == null ? void 0 : S.icon) != null && M.position)) ? (s(), b(d, {
       key: 0,
       iconClass: (E = (D = t.nativeButton) == null ? void 0 : D.icon) == null ? void 0 : E.iconClass,
       type: (q = (T = t.nativeButton) == null ? void 0 : T.icon) == null ? void 0 : q.iconType
@@ -3313,7 +3312,7 @@ function Gs(e, n, t, a, l, i) {
     (N = t.nativeButton) != null && N.icon && ((H = t.nativeButton) != null && H.text) ? (s(), o("span", Us, p(t.nativeButton.text), 1)) : (s(), o(_, { key: 2 }, [
       F(p(t.nativeButton.text), 1)
     ], 64)),
-    (Q = (U = t.nativeButton) == null ? void 0 : U.icon) != null && Q.show && ((Y = (z = t.nativeButton) == null ? void 0 : z.icon) == null ? void 0 : Y.position) === "after" ? (s(), b(r, {
+    (Q = (U = t.nativeButton) == null ? void 0 : U.icon) != null && Q.show && ((Y = (z = t.nativeButton) == null ? void 0 : z.icon) == null ? void 0 : Y.position) === "after" ? (s(), b(d, {
       key: 3,
       iconClass: (le = (Z = t.nativeButton) == null ? void 0 : Z.icon) == null ? void 0 : le.iconClass,
       type: (_e = (W = t.nativeButton) == null ? void 0 : W.icon) == null ? void 0 : _e.iconType
@@ -5660,16 +5659,28 @@ const At = {
     // for boxType === product
     clickOnProduct(e) {
       this.$emit("click", e);
+    },
+    // set focus on first input if box contains form-elements
+    setFocus() {
+      this.$nextTick(() => {
+        if (this.open) {
+          const e = this.$refs.cmdBox.querySelector(":is(input, select, textarea):first-of-type");
+          e && e.focus();
+        }
+      });
     }
   },
   watch: {
     openCollapsedBox() {
-      this.collapsible && (this.open = this.openCollapsedBox);
+      this.collapsible && (this.open = this.openCollapsedBox, this.setFocus());
+    },
+    open() {
+      this.setFocus();
     }
   }
 }, cn = () => {
   zn((e) => ({
-    "297e2a4d": e.cutoffTextLines
+    "29b0cfc8": e.cutoffTextLines
   }));
 }, un = At.setup;
 At.setup = un ? (e, n) => (cn(), un(e, n)) : cn;
@@ -5691,8 +5702,11 @@ const ar = ["title"], rr = {
 }, kr = ["title"], xr = { key: 2 }, vr = { class: "box-header flex-container vertical" }, wr = { key: 0 }, Tr = ["src", "alt"], Ir = { key: 0 }, Sr = { key: 1 }, Mr = ["title"], Or = { key: 0 }, Lr = { class: "box-body" }, Dr = { key: 0 }, Nr = { key: 1 }, Pr = { key: 2 }, Br = {
   key: 3,
   class: "description"
-}, Ar = { class: "tags" }, jr = {
+}, Ar = {
   key: 0,
+  class: "tags"
+}, jr = {
+  key: 1,
   class: "box-footer"
 };
 function Fr(e, n, t, a, l, i) {
@@ -5700,6 +5714,7 @@ function Fr(e, n, t, a, l, i) {
   const d = R, r = V, c = lr;
   return t.boxType === "content" ? (s(), o("div", {
     key: 0,
+    ref: "cmdBox",
     class: C([
       "cmd-box box content",
       {
@@ -5845,10 +5860,10 @@ function Fr(e, n, t, a, l, i) {
       t.user.position ? (s(), o("p", Pr, p(t.user.position), 1)) : u("", !0),
       t.user.description ? (s(), o("p", Br, p(t.user.description), 1)) : u("", !0)
     ]),
-    h("ul", Ar, [
+    t.user.tags && t.user.tags.length ? (s(), o("ul", Ar, [
       (s(!0), o(_, null, B(t.user.tags, (D, E) => (s(), o("li", { key: E }, p(D), 1))), 128))
-    ]),
-    t.user.links ? (s(), o("div", jr, [
+    ])) : u("", !0),
+    t.user.links && t.user.links.length ? (s(), o("div", jr, [
       x(c, {
         links: t.user.links,
         orientation: "horizontal",
@@ -6896,7 +6911,7 @@ const Dd = {
 };
 function Kd(e, n, t, a, l, i) {
   var f, g, m, k;
-  const d = Dt, r = V, c = se("router-link");
+  const d = V, r = Dt, c = se("router-link");
   return s(), o("div", {
     class: C([
       l.validationStatus,
@@ -6918,17 +6933,8 @@ function Kd(e, n, t, a, l, i) {
         F(p(t.labelText), 1),
         e.$attrs.required !== void 0 ? (s(), o("sup", Ad, "*")) : u("", !0)
       ], 8, Bd),
-      e.useCustomTooltip && (l.validationStatus === "" || l.validationStatus === "error") ? (s(), b(d, {
-        key: 0,
-        ref: "tooltip",
-        validationStatus: l.validationStatus,
-        validationMessage: e.getValidationMessage,
-        relatedId: e.tooltipId,
-        cmdListOfRequirements: e.listOfRequirements,
-        role: l.validationStatus === "error" ? "alert" : "dialog"
-      }, null, 8, ["validationStatus", "validationMessage", "relatedId", "cmdListOfRequirements", "role"])) : u("", !0),
       (e.$attrs.required || e.inputRequirements.length) && t.showStatusIcon ? (s(), o("a", {
-        key: 1,
+        key: 0,
         href: "#",
         onClick: n[0] || (n[0] = I(() => {
         }, ["prevent"])),
@@ -6937,8 +6943,17 @@ function Kd(e, n, t, a, l, i) {
         "aria-live": "assertive",
         id: e.tooltipId
       }, [
-        x(r, { iconClass: e.getStatusIconClass }, null, 8, ["iconClass"])
-      ], 8, jd)) : u("", !0)
+        x(d, { iconClass: e.getStatusIconClass }, null, 8, ["iconClass"])
+      ], 8, jd)) : u("", !0),
+      e.useCustomTooltip && (l.validationStatus === "" || l.validationStatus === "error") ? (s(), b(r, {
+        key: 1,
+        ref: "tooltip",
+        validationStatus: l.validationStatus,
+        validationMessage: e.getValidationMessage,
+        relatedId: e.tooltipId,
+        cmdListOfRequirements: e.listOfRequirements,
+        role: l.validationStatus === "error" ? "alert" : "dialog"
+      }, null, 8, ["validationStatus", "validationMessage", "relatedId", "cmdListOfRequirements", "role"])) : u("", !0)
     ])) : u("", !0),
     h("ul", {
       class: C({ open: l.showOptions }),
@@ -6961,7 +6976,7 @@ function Kd(e, n, t, a, l, i) {
             key: 1,
             style: we("background: " + i.optionColor)
           }, null, 4)) : u("", !0),
-          (g = i.optionIcon) != null && g.iconClass ? (s(), b(r, {
+          (g = i.optionIcon) != null && g.iconClass ? (s(), b(d, {
             key: 2,
             type: (m = i.optionIcon) == null ? void 0 : m.iconType,
             iconClass: (k = i.optionIcon) == null ? void 0 : k.iconClass
@@ -6971,7 +6986,7 @@ function Kd(e, n, t, a, l, i) {
             class: "option-name",
             style: we(l.limitWidthStyle)
           }, p(i.optionName), 5)) : u("", !0),
-          t.iconDropdown ? (s(), b(r, {
+          t.iconDropdown ? (s(), b(d, {
             key: 4,
             iconClass: t.iconDropdown.iconClass,
             type: t.iconDropdown.iconType,
@@ -6991,7 +7006,7 @@ function Kd(e, n, t, a, l, i) {
               class: C({ active: y.value === t.modelValue }),
               title: y.tooltip
             }, [
-              y.iconClass ? (s(), b(r, {
+              y.iconClass ? (s(), b(d, {
                 key: 0,
                 iconClass: y.iconClass,
                 type: y.iconType
@@ -7005,7 +7020,7 @@ function Kd(e, n, t, a, l, i) {
               class: C({ active: y.value === t.modelValue })
             }, {
               default: P(() => [
-                y.iconClass ? (s(), b(r, {
+                y.iconClass ? (s(), b(d, {
                   key: 0,
                   iconClass: y.iconClass,
                   type: y.iconType
@@ -7064,11 +7079,11 @@ function Kd(e, n, t, a, l, i) {
               href: "#",
               onClick: n[4] || (n[4] = I((...y) => i.toggleAllOptions && i.toggleAllOptions(...y), ["prevent"]))
             }, [
-              l.allOptionsSelected ? (s(), b(r, {
+              l.allOptionsSelected ? (s(), b(d, {
                 key: 1,
                 iconClass: t.iconDeselectAllOptions.iconClass,
                 type: t.iconDeselectAllOptions.iconType
-              }, null, 8, ["iconClass", "type"])) : (s(), b(r, {
+              }, null, 8, ["iconClass", "type"])) : (s(), b(d, {
                 key: 0,
                 iconClass: t.iconSelectAllOptions.iconClass,
                 type: t.iconSelectAllOptions.iconType
@@ -7660,7 +7675,7 @@ const Dc = {
     /**
      * for replacing native checkboxes/radio-buttons by custom ones (based on frontend-framework)
      *
-     * toggleSwitch-property must be set to 'false'
+     * toggleSwitches-property must be set to 'false'
      *
      * @affectsStyling: true
      */
@@ -7675,7 +7690,7 @@ const Dc = {
      *
      * @affectsStyling: true
      */
-    toggleSwitch: {
+    toggleSwitches: {
       type: Boolean,
       default: !1
     },
@@ -7788,7 +7803,7 @@ const Dc = {
   class: "flex-container no-flex"
 };
 function zc(e, n, t, a, l, i) {
-  const d = Dt, r = V;
+  const d = V, r = Dt;
   return s(), o("div", {
     class: C([
       "cmd-input-group label",
@@ -7797,7 +7812,7 @@ function zc(e, n, t, a, l, i) {
         inline: t.labelInline,
         "multiple-switch": t.multipleSwitch,
         disabled: t.disabled,
-        "toggle-switch": t.toggleSwitch,
+        "toggle-switches": t.toggleSwitches,
         "has-state": e.validationStatus
       }
     ]),
@@ -7808,8 +7823,20 @@ function zc(e, n, t, a, l, i) {
         F(p(t.labelText), 1),
         t.required ? (s(), o("sup", Ac, "*")) : u("", !0)
       ], 8, Bc),
-      e.useCustomTooltip && (e.validationStatus === "" || e.validationStatus === "error") ? (s(), b(d, {
+      (t.required || e.inputRequirements.length > 0) && t.showStatusIcon ? (s(), o("a", {
         key: 0,
+        href: "#",
+        onClick: n[0] || (n[0] = I(() => {
+        }, ["prevent"])),
+        title: i.validationTooltip,
+        "aria-errormessage": e.tooltipId,
+        "aria-live": "assertive",
+        id: e.tooltipId
+      }, [
+        x(d, { iconClass: e.getStatusIconClass }, null, 8, ["iconClass"])
+      ], 8, jc)) : u("", !0),
+      e.useCustomTooltip && (e.validationStatus === "" || e.validationStatus === "error") ? (s(), b(r, {
+        key: 1,
         ref: "tooltip",
         showRequirements: e.showRequirements,
         cmdListOfRequirements: e.listOfRequirements,
@@ -7820,19 +7847,7 @@ function zc(e, n, t, a, l, i) {
         helplink: e.helplink,
         relatedId: e.tooltipId,
         role: e.validationStatus === "error" ? "alert" : "dialog"
-      }, null, 8, ["showRequirements", "cmdListOfRequirements", "validationStatus", "validationMessage", "inputAttributes", "inputModelValue", "helplink", "relatedId", "role"])) : u("", !0),
-      (t.required || e.inputRequirements.length > 0) && t.showStatusIcon ? (s(), o("a", {
-        key: 1,
-        href: "#",
-        onClick: n[0] || (n[0] = I(() => {
-        }, ["prevent"])),
-        title: i.validationTooltip,
-        "aria-errormessage": e.tooltipId,
-        "aria-live": "assertive",
-        id: e.tooltipId
-      }, [
-        x(r, { iconClass: e.getStatusIconClass }, null, 8, ["iconClass"])
-      ], 8, jc)) : u("", !0)
+      }, null, 8, ["showRequirements", "cmdListOfRequirements", "validationStatus", "validationMessage", "inputAttributes", "inputModelValue", "helplink", "relatedId", "role"])) : u("", !0)
     ], 512), [
       [de, t.showLabel]
     ]),
@@ -7844,7 +7859,8 @@ function zc(e, n, t, a, l, i) {
     }, [
       (s(!0), o(_, null, B(t.inputElements, (c, f) => (s(), o("label", {
         key: f,
-        for: c.id
+        for: c.id,
+        class: C({ "toggle-switch": t.toggleSwitches })
       }, [
         ne(h("input", {
           type: t.inputTypes,
@@ -7853,17 +7869,17 @@ function zc(e, n, t, a, l, i) {
           value: c.value,
           "onUpdate:modelValue": n[1] || (n[1] = (g) => i.inputValue = g),
           disabled: t.disabled,
-          class: C({ "replace-input-type": t.replaceInputType, "toggle-switch": t.toggleSwitch })
+          class: C({ "replace-input-type": t.replaceInputType })
         }, null, 10, Hc), [
           [xi, i.inputValue]
         ]),
-        t.multipleSwitch && c.iconClass ? (s(), b(r, {
+        t.multipleSwitch && c.iconClass ? (s(), b(d, {
           key: 0,
           iconClass: c.iconClass,
           type: c.iconType
         }, null, 8, ["iconClass", "type"])) : u("", !0),
         c.labelText ? (s(), o("span", Ec, p(c.labelText), 1)) : u("", !0)
-      ], 8, Fc))), 128))
+      ], 10, Fc))), 128))
     ], 2))
   ], 10, Nc);
 }