comand-component-library 4.2.7 → 4.2.8

package/dist/comand-component-library.js

@@ -14189,6 +14189,15 @@ const hh = /* @__PURE__ */ F(mh, [["render", fh]]), Qi = [
       type: "href",
       path: "/"
     }
+  },
+  {
+    iso2: "es",
+    name: "Español",
+    tooltip: "cambiar el idioma a español",
+    link: {
+      type: "href",
+      path: "/"
+    }
   }
 ], rg = {
   show: !1,
@@ -15089,6 +15098,13 @@ const hh = /* @__PURE__ */ F(mh, [["render", fh]]), Qi = [
     languages: {
       type: Array,
       required: !0
+    },
+    /**
+     * path to flag-files (will be combined with flag isoCode to load svg)
+     */
+    pathFlags: {
+      type: String,
+      default: "/media/images/flags"
     }
   },
   mounted() {
@@ -15105,23 +15121,12 @@ const hh = /* @__PURE__ */ F(mh, [["render", fh]]), Qi = [
     activeLanguage(e) {
       return this.currentLanguage === e;
     },
+    pathFlag(e) {
+      return this.pathFlags + "/flag-" + e + ".svg";
+    },
     changeLanguage(e, t) {
       this.currentLanguage = e, document.documentElement.lang = e, this.$emit("click", { originalEvent: t, iso2: e });
     }
-  },
-  watch: {
-    languages: {
-      handler() {
-        this.imageSources = [], this.languages.forEach(
-          async (e) => {
-            const t = e.iso2;
-            this.imageSources.push(flags[t].default);
-          }
-        );
-      },
-      immediate: !0,
-      deep: !0
-    }
   }
 }, Lg = { class: "cmd-switch-language" }, Ig = ["href", "title", "onClick"], Bg = ["src", "alt"], Mg = ["src", "alt"];
 function Dg(e, t, n, s, i, l) {
@@ -15137,7 +15142,7 @@ function Dg(e, t, n, s, i, l) {
           onClick: S((h) => l.changeLanguage(u.iso2, h), ["prevent"])
         }, [
           o("img", {
-            src: i.imageSources[c],
+            src: l.pathFlag(u.iso2),
             alt: u.name
           }, null, 8, Bg)
         ], 10, Ig)) : (a(), v(d, {
@@ -15149,7 +15154,7 @@ function Dg(e, t, n, s, i, l) {
         }, {
           default: w(() => [
             o("img", {
-              src: i.imageSources[c],
+              src: l.pathFlag(u.iso2),
               alt: u.name
             }, null, 8, Mg)
           ]),
@@ -19251,16 +19256,16 @@ const Xx = /* @__PURE__ */ F(Ax, [["render", Qx]]), $x = {
       immediate: !0
     }
   }
-}, eC = { class: "cmd-mail-tool-filter align-items-center" }, tC = { class: "flex-container horizontal align-items-center" }, nC = { class: "flex-container horizontal sort-wrapper" }, iC = ["title"], lC = { key: 0 }, oC = ["title"], aC = { key: 0 };
-function sC(e, t, n, s, i, l) {
+}, e1 = { class: "cmd-mail-tool-filter align-items-center" }, t1 = { class: "flex-container horizontal align-items-center" }, n1 = { class: "flex-container horizontal sort-wrapper" }, i1 = ["title"], l1 = { key: 0 }, o1 = ["title"], a1 = { key: 0 };
+function s1(e, t, n, s, i, l) {
   const d = Y, u = ne;
-  return a(), r("div", eC, [
+  return a(), r("div", e1, [
     l.headlineText ? (a(), v(d, {
       key: 0,
       headlineText: l.headlineText,
       headlineLevel: l.headlineLevel
     }, null, 8, ["headlineText", "headlineLevel"])) : m("", !0),
-    o("div", tC, [
+    o("div", t1, [
       p(u, {
         element: "input",
         type: "search",
@@ -19293,34 +19298,34 @@ function sC(e, t, n, s, i, l) {
         inputValue: l.senderReceiver
       }, null, 8, ["id", "labelText", "modelValue", "inputValue"])
     ]),
-    o("div", nC, [
+    o("div", n1, [
       i.sortOrderAsc ? (a(), r("a", {
         key: 0,
         href: "#",
         onClick: t[3] || (t[3] = S((c) => l.sortByDate("asc"), ["prevent"])),
         title: n.linkSortAscending.title
       }, [
-        n.linkSortAscending.text ? (a(), r("span", lC, y(n.linkSortAscending.text), 1)) : m("", !0),
+        n.linkSortAscending.text ? (a(), r("span", l1, y(n.linkSortAscending.text), 1)) : m("", !0),
         n.linkSortAscending.iconClass ? (a(), r("span", {
           key: 1,
           class: x(n.linkSortAscending.iconClass)
         }, null, 2)) : m("", !0)
-      ], 8, iC)) : (a(), r("a", {
+      ], 8, i1)) : (a(), r("a", {
         key: 1,
         href: "#",
         onClick: t[4] || (t[4] = S((c) => l.sortByDate("desc"), ["prevent"])),
         title: n.linkSortDescending.title
       }, [
-        n.linkSortDescending.text ? (a(), r("span", aC, y(n.linkSortDescending.text), 1)) : m("", !0),
+        n.linkSortDescending.text ? (a(), r("span", a1, y(n.linkSortDescending.text), 1)) : m("", !0),
         n.linkSortDescending.iconClass ? (a(), r("span", {
           key: 1,
           class: x(n.linkSortDescending.iconClass)
         }, null, 2)) : m("", !0)
-      ], 8, oC))
+      ], 8, o1))
     ])
   ]);
 }
-const rC = /* @__PURE__ */ F($x, [["render", sC]]), dC = {
+const r1 = /* @__PURE__ */ F($x, [["render", s1]]), d1 = {
   name: "CmdMailTool",
   data() {
     return {
@@ -19419,8 +19424,8 @@ const rC = /* @__PURE__ */ F($x, [["render", sC]]), dC = {
     }
   }
 };
-function uC(e, t, n, s, i, l) {
-  const d = rC, u = Xx, c = el;
+function u1(e, t, n, s, i, l) {
+  const d = r1, u = Xx, c = el;
   return a(), v(c, I({ class: "cmd-mail-tool" }, n.cmdTabs), {
     "tab-content-0": w(() => [
       p(d, I(n.cmdMailToolFilterInbox, {
@@ -19439,7 +19444,7 @@ function uC(e, t, n, s, i, l) {
     _: 1
   }, 16);
 }
-const cC = /* @__PURE__ */ F(dC, [["render", uC]]), mC = {
+const c1 = /* @__PURE__ */ F(d1, [["render", u1]]), m1 = {
   name: "CmdListOfImages",
   emits: ["click"],
   //   mixins: [EditMode],
@@ -19510,11 +19515,11 @@ const cC = /* @__PURE__ */ F(dC, [["render", uC]]), mC = {
     }
      */
   }
-}, pC = {
+}, p1 = {
   key: 0,
   href: "#"
 };
-function fC(e, t, n, s, i, l) {
+function f1(e, t, n, s, i, l) {
   var c;
   const d = Y, u = ge;
   return a(), r("div", {
@@ -19530,7 +19535,7 @@ function fC(e, t, n, s, i, l) {
       class: x(["list-of-images", { vertical: n.orientation === "vertical" }])
     }, [
       (a(!0), r(_, null, q(n.images, (h, f) => (a(), r("li", { key: f }, [
-        h.image.url ? (a(), r("a", pC, [
+        h.image.url ? (a(), r("a", p1, [
           p(u, I({ ref_for: !0 }, h), null, 16)
         ])) : (a(), v(u, I({
           key: 1,
@@ -19540,7 +19545,7 @@ function fC(e, t, n, s, i, l) {
     ], 2)
   ], 2);
 }
-const hC = /* @__PURE__ */ F(mC, [["render", fC]]), gC = [
+const h1 = /* @__PURE__ */ F(m1, [["render", f1]]), g1 = [
   {
     id: 1,
     cmdImage: {
@@ -19563,7 +19568,7 @@ const hC = /* @__PURE__ */ F(mC, [["render", fC]]), gC = [
     isoDate: "2025-02-20",
     time: "21:08"
   }
-], yC = [
+], y1 = [
   {
     id: 3,
     cmdImage: {
@@ -19586,10 +19591,10 @@ const hC = /* @__PURE__ */ F(mC, [["render", fC]]), gC = [
     isoDate: "2025-02-21",
     time: "15:55"
   }
-], bC = {
-  inbox: gC,
-  outbox: yC
-}, xC = [
+], b1 = {
+  inbox: g1,
+  outbox: y1
+}, x1 = [
   {
     id: 1,
     displayValue: "Option #1",
@@ -19611,12 +19616,12 @@ const hC = /* @__PURE__ */ F(mC, [["render", fC]]), gC = [
       iconClass: "icon-globe"
     }
   }
-], CC = {
+], C1 = {
   labelText: "Label for inputfield (search) with smart-search:"
-}, vC = {
-  listOfRecommendations: xC,
-  cmdFormElement: CC
-}, kC = [
+}, v1 = {
+  listOfRecommendations: x1,
+  cmdFormElement: C1
+}, k1 = [
   {
     text: "Afghanistan",
     value: "af"
@@ -20397,16 +20402,16 @@ const hC = /* @__PURE__ */ F(mC, [["render", fC]]), gC = [
     text: "Zimbabwe",
     value: "zw"
   }
-], wC = "comand-component-library", TC = "4.2.7", SC = "GPL-3.0-only", _C = "CoManD-UI", OC = "module", LC = {
+], w1 = "comand-component-library", T1 = "4.2.8", S1 = "GPL-3.0-only", _1 = "CoManD-UI", O1 = "module", L1 = {
   prepublishOnly: "npm run build-lib",
   dev: "vite",
   build: "vite build",
   "build-lib": "vite build && gulp",
   preview: "vite preview"
-}, IC = [
+}, I1 = [
   "dist",
   "src"
-], BC = {
+], B1 = {
   ".": "./dist/comand-component-library.js",
   "./css.js": "./src/css.js",
   "./style.css": "./dist/style.css",
@@ -20416,16 +20421,16 @@ const hC = /* @__PURE__ */ F(mC, [["render", fC]]), gC = [
   "./currencies.json": "./src/assets/lists-of-data/currencies.json",
   "./dial-codes.json": "./src/assets/lists-of-data/dial-codes.json",
   "./us-cities.json": "./src/assets/lists-of-data/us-cities.json"
-}, MC = {
+}, M1 = {
   "clickout-event": "^1.1.2",
-  "comand-frontend-framework": "^4.2.10",
+  "comand-frontend-framework": "^4.2.11",
   "comand-ui-iconfonts": "^1.0.19",
   "core-js": "^3.20.1",
   prismjs: "^1.27.0",
   vue: "^3.2.31",
   "vue-router": "^4.0.12",
   vuex: "^4.0.2"
-}, DC = {
+}, D1 = {
   "@iconify/vue": "^4.0.0",
   "@vitejs/plugin-vue": "^5.1.1",
   "@vue/test-utils": "^2.0.0-0",
@@ -20435,19 +20440,19 @@ const hC = /* @__PURE__ */ F(mC, [["render", fC]]), gC = [
   "unplugin-vue-components": "^0.24.0",
   vite: "^5.4.11",
   "vue-jest": "^5.0.0-0"
-}, FC = {
-  name: wC,
-  version: TC,
-  license: SC,
-  author: _C,
+}, F1 = {
+  name: w1,
+  version: T1,
+  license: S1,
+  author: _1,
   private: !1,
-  type: OC,
-  scripts: LC,
-  files: IC,
-  exports: BC,
-  dependencies: MC,
-  devDependencies: DC
-}, VC = {
+  type: O1,
+  scripts: L1,
+  files: I1,
+  exports: B1,
+  dependencies: M1,
+  devDependencies: D1
+}, V1 = {
   data() {
     return {
       cmdAddressDataSettingsData: {
@@ -21327,9 +21332,9 @@ const hC = /* @__PURE__ */ F(mC, [["render", fC]]), gC = [
       }
     };
   }
-}, fi = "/media/images/content-images/landscape-medium.jpg", AC = "/media/images/demo-images/small/landscape-01.jpg", PC = "/media/images/demo-images/small/landscape-02.jpg", EC = "/media/images/demo-images/small/landscape-03.jpg", HC = {
+}, fi = "/media/images/content-images/landscape-medium.jpg", A1 = "/media/images/demo-images/small/landscape-01.jpg", P1 = "/media/images/demo-images/small/landscape-02.jpg", E1 = "/media/images/demo-images/small/landscape-03.jpg", H1 = {
   name: "App",
-  mixins: [VC],
+  mixins: [V1],
   components: {
     PageOverview: Sl
   },
@@ -21491,20 +21496,20 @@ const hC = /* @__PURE__ */ F(mC, [["render", fC]]), gC = [
       languagesData: $i,
       listOfLinksData: Kh,
       multistepsData: tg,
-      mailToolData: bC,
+      mailToolData: b1,
       navigationData: Xi,
       openingHoursData: ng,
       selectOptionsData: ig,
       slideshowData: lg,
-      smartSearchData: vC,
+      smartSearchData: v1,
       socialNetworksData: sg,
       tableDataSmall: xg,
       tableDataLarge: fg,
       tabsData: Cg,
       thumbnailScrollerImagesData: vg,
       thumbnailScrollerTextData: kg,
-      allCountriesData: kC,
-      packageJson: FC
+      allCountriesData: k1,
+      packageJson: F1
     };
   },
   mounted() {
@@ -21709,82 +21714,82 @@ const hC = /* @__PURE__ */ F(mC, [["render", fC]]), gC = [
       });
     }
   }
-}, qC = ["id"], RC = { for: "select-template" }, jC = { class: "input-wrapper" }, NC = { for: "default-color-scheme" }, UC = { for: "light-mode" }, zC = { for: "dark-mode" }, WC = ["href", "onClick"], GC = { class: "box-footer comand-versions" }, KC = { class: "closed-sidebar" }, JC = {
+}, q1 = ["id"], R1 = { for: "select-template" }, j1 = { class: "input-wrapper" }, N1 = { for: "default-color-scheme" }, U1 = { for: "light-mode" }, z1 = { for: "dark-mode" }, W1 = ["href", "onClick"], G1 = { class: "box-footer comand-versions" }, K1 = { class: "closed-sidebar" }, J1 = {
   key: 1,
   id: "content"
-}, YC = {
+}, Y1 = {
   class: "headline-demopage",
   id: "section-address-data"
-}, ZC = { class: "flex-container" }, QC = { class: "flex-container" }, XC = { class: "list-status" }, $C = { class: "error" }, e1 = { class: "flex-container" }, t1 = { class: "headline-demopage" }, n1 = { class: "flex-container" }, i1 = { class: "flex-container" }, l1 = { class: "flex-container" }, o1 = { class: "flex-container" }, a1 = { class: "flex-container" }, s1 = { class: "headline-demopage" }, r1 = { class: "flex-container" }, d1 = { class: "flex-container no-flex" }, u1 = {
+}, Z1 = { class: "flex-container" }, Q1 = { class: "flex-container" }, X1 = { class: "list-status" }, $1 = { class: "error" }, eC = { class: "flex-container" }, tC = { class: "headline-demopage" }, nC = { class: "flex-container" }, iC = { class: "flex-container" }, lC = { class: "flex-container" }, oC = { class: "flex-container" }, aC = { class: "flex-container" }, sC = { class: "headline-demopage" }, rC = { class: "flex-container" }, dC = { class: "flex-container no-flex" }, uC = {
   class: "inline",
   for: "range-value"
-}, c1 = ["disabled"], m1 = { for: "range-slider" }, p1 = ["disabled"], f1 = { class: "label inline" }, h1 = { class: "flex-container no-flex" }, g1 = { class: "label inline" }, y1 = { class: "flex-container no-flex" }, b1 = { class: "label inline" }, x1 = { class: "flex-container no-flex" }, C1 = { class: "label inline" }, v1 = { class: "flex-container no-flex" }, k1 = {
+}, cC = ["disabled"], mC = { for: "range-slider" }, pC = ["disabled"], fC = { class: "label inline" }, hC = { class: "flex-container no-flex" }, gC = { class: "label inline" }, yC = { class: "flex-container no-flex" }, bC = { class: "label inline" }, xC = { class: "flex-container no-flex" }, CC = { class: "label inline" }, vC = { class: "flex-container no-flex" }, kC = {
   class: "headline-demopage",
   id: "section-input-group"
-}, w1 = { class: "flex-container" }, T1 = { class: "button-wrapper no-flex" }, S1 = ["disabled"], _1 = {
+}, wC = { class: "flex-container" }, TC = { class: "button-wrapper no-flex" }, SC = ["disabled"], _C = {
   class: "headline-demopage",
   id: "section-bank-account-data"
-}, O1 = {
+}, OC = {
   class: "headline-demopage",
   id: "section-basic-form"
-}, L1 = { class: "headline-demopage" }, I1 = { class: "navigation" }, B1 = { class: "grid-container-create-columns" }, M1 = {
+}, LC = { class: "headline-demopage" }, IC = { class: "navigation" }, BC = { class: "grid-container-create-columns" }, MC = {
   class: "headline-demopage",
   id: "section-breadcrumbs"
-}, D1 = {
+}, DC = {
   class: "headline-demopage",
   id: "section-company-logo"
-}, F1 = {
+}, FC = {
   class: "headline-demopage",
   id: "section-container"
-}, V1 = {
+}, VC = {
   class: "headline-demopage",
   id: "section-headlines"
-}, A1 = {
+}, AC = {
   class: "headline-demopage",
   id: "section-image"
-}, P1 = { class: "flex-container" }, E1 = {
+}, PC = { class: "flex-container" }, EC = {
   class: "headline-demopage",
   id: "section-image-gallery"
-}, H1 = {
+}, HC = {
   class: "headline-demopage",
   id: "section-link"
-}, q1 = { class: "output" }, R1 = {
+}, qC = { class: "output" }, RC = {
   class: "headline-demopage",
   id: "section-list-of-links"
-}, j1 = { class: "output" }, N1 = {
+}, jC = { class: "output" }, NC = {
   class: "headline-demopage",
   id: "section-list-of-images"
-}, U1 = {
+}, UC = {
   class: "headline-demopage",
   id: "section-login-form"
-}, z1 = {
+}, zC = {
   class: "headline-demopage",
   id: "section-main-navigation"
-}, W1 = {
+}, WC = {
   class: "headline-demopage",
   id: "section-multistep-form-progress-bar"
-}, G1 = {
+}, GC = {
   class: "headline-demopage",
   id: "section-newsletter-subscription"
-}, K1 = {
+}, KC = {
   class: "headline-demopage",
   id: "section-opening-hours"
-}, J1 = {
+}, JC = {
   class: "headline-demopage",
   id: "section-page-footer"
-}, Y1 = {
+}, YC = {
   class: "headline-demopage",
   id: "section-page-header"
-}, Z1 = {
+}, ZC = {
   class: "headline-demopage",
   id: "section-pagination"
-}, Q1 = {
+}, QC = {
   class: "headline-demopage",
   id: "section-site-header"
-}, X1 = {
+}, XC = {
   class: "headline-demopage",
   id: "section-site-search"
-}, $1 = {
+}, $C = {
   class: "headline-demopage",
   id: "section-slideshow"
 }, ev = {
@@ -21822,7 +21827,7 @@ const hC = /* @__PURE__ */ F(mC, [["render", fC]]), gC = [
   id: "content"
 };
 function pv(e, t, n, s, i, l) {
-  const d = kn, u = Ri, c = Rf, h = Cn, f = Ni, g = Jf, k = Tl, b = Ai, O = zi, T = ne, M = hh, B = Ui, D = Ff, V = Ji, U = Pi, W = rr, A = hr, R = qi, J = ji, Z = ic, Q = tm, le = Ki, oe = Y, ie = G, re = ge, me = bm, E = Tm, X = Re, ee = hC, Ce = Xm, Oe = cC, Le = Yi, Ie = ke("router-view"), Be = yp, Me = kp, De = Jp, de = vf, at = _f, st = sf, Ge = zf, rt = lh, dt = ch, ut = Zi, ct = Fg, K = Ne, In = zg, Ll = el, Vt = ny, Il = Ei, Bl = ay, At = Fi, Ml = ux, Dl = Sl, Fl = Oc, Vl = wc, Al = Cd, Pl = yx, El = zl("fancybox");
+  const d = kn, u = Ri, c = Rf, h = Cn, f = Ni, g = Jf, k = Tl, b = Ai, O = zi, T = ne, M = hh, B = Ui, D = Ff, V = Ji, U = Pi, W = rr, A = hr, R = qi, J = ji, Z = ic, Q = tm, le = Ki, oe = Y, ie = G, re = ge, me = bm, E = Tm, X = Re, ee = h1, Ce = Xm, Oe = c1, Le = Yi, Ie = ke("router-view"), Be = yp, Me = kp, De = Jp, de = vf, at = _f, st = sf, Ge = zf, rt = lh, dt = ch, ut = Zi, ct = Fg, K = Ne, In = zg, Ll = el, Vt = ny, Il = Ei, Bl = ay, At = Fi, Ml = ux, Dl = Sl, Fl = Oc, Vl = wc, Al = Cd, Pl = yx, El = zl("fancybox");
   return te((a(), r("div", {
     class: "page-wrapper",
     id: l.templateId
@@ -21851,7 +21856,7 @@ function pv(e, t, n, s, i, l) {
               onToggleCollapse: (z) => C.boxToggled(0, z)
             }, {
               body: w(() => [
-                o("label", RC, [
+                o("label", R1, [
                   t[125] || (t[125] = o("span", null, "Select template", -1)),
                   te(o("select", {
                     id: "select-template",
@@ -21868,8 +21873,8 @@ function pv(e, t, n, s, i, l) {
                 ]),
                 o("div", null, [
                   t[129] || (t[129] = o("span", null, "Color Scheme", -1)),
-                  o("div", jC, [
-                    o("label", NC, [
+                  o("div", j1, [
+                    o("label", N1, [
                       te(o("input", {
                         type: "radio",
                         id: "default-color-scheme",
@@ -21881,7 +21886,7 @@ function pv(e, t, n, s, i, l) {
                       ]),
                       t[126] || (t[126] = o("span", { class: "label-text" }, "Color-Scheme by Browser/OS", -1))
                     ]),
-                    o("label", UC, [
+                    o("label", U1, [
                       te(o("input", {
                         type: "radio",
                         id: "light-mode",
@@ -21893,7 +21898,7 @@ function pv(e, t, n, s, i, l) {
                       ]),
                       t[127] || (t[127] = o("span", { class: "label-text" }, "Light Mode", -1))
                     ]),
-                    o("label", zC, [
+                    o("label", z1, [
                       te(o("input", {
                         type: "radio",
                         id: "dark-mode",
@@ -21928,7 +21933,7 @@ function pv(e, t, n, s, i, l) {
                       href: l.sectionName(z),
                       onClick: (je) => l.updateSettingsSidebar(l.componentNameWithPrefix(z)),
                       title: "Go to component"
-                    }, y(l.readableComponentName(z)), 9, WC)
+                    }, y(l.readableComponentName(z)), 9, W1)
                   ], 2))), 128))
                 ])
               ]),
@@ -21990,7 +21995,7 @@ function pv(e, t, n, s, i, l) {
           ]),
           _: 1
         }, 8, ["openBoxesByDefault"]),
-        o("dl", GC, [
+        o("dl", G1, [
           t[132] || (t[132] = o("dt", null, "Frontend-Framework Version:", -1)),
           o("dd", null, y(i.packageJson.dependencies["comand-frontend-framework"].replace("^", "")), 1),
           t[133] || (t[133] = o("dt", null, "Component-Library Version:", -1)),
@@ -21998,7 +22003,7 @@ function pv(e, t, n, s, i, l) {
         ])
       ]),
       closed: w(() => [
-        o("div", KC, [
+        o("div", K1, [
           o("a", {
             href: "#",
             class: "button primary",
@@ -22046,7 +22051,7 @@ function pv(e, t, n, s, i, l) {
       ]),
       _: 1
     }),
-    i.componentView ? (a(), r("main", JC, [
+    i.componentView ? (a(), r("main", J1, [
       p(k, null, {
         default: w(() => t[138] || (t[138] = [
           o("h1", { class: "headline-demopage" }, "Components Overview", -1)
@@ -22055,7 +22060,7 @@ function pv(e, t, n, s, i, l) {
       }),
       p(k, null, {
         default: w(() => [
-          o("h2", YC, [
+          o("h2", Y1, [
             t[139] || (t[139] = o("span", null, "Address Data", -1)),
             o("a", {
               href: "#",
@@ -22064,7 +22069,7 @@ function pv(e, t, n, s, i, l) {
               onClick: t[13] || (t[13] = S((C) => l.openSettingsSidebar("CmdAddressData"), ["prevent"]))
             })
           ]),
-          o("div", ZC, [
+          o("div", Z1, [
             p(b, I({
               ref: "CmdAddressData",
               addressData: i.addressData
@@ -22082,8 +22087,8 @@ function pv(e, t, n, s, i, l) {
           t[180] || (t[180] = o("h3", null, [
             o("span", null, "Form elements status:")
           ], -1)),
-          o("div", QC, [
-            o("ul", XC, [
+          o("div", Q1, [
+            o("ul", X1, [
               o("li", null, [
                 o("a", {
                   href: "#",
@@ -22092,7 +22097,7 @@ function pv(e, t, n, s, i, l) {
                   id: "status-default"
                 }, " Default ", 2)
               ]),
-              o("li", $C, [
+              o("li", $1, [
                 o("a", {
                   href: "#",
                   onClick: t[15] || (t[15] = S((C) => l.setStatus("error", !1), ["prevent"])),
@@ -22145,9 +22150,9 @@ function pv(e, t, n, s, i, l) {
             novalidate: "novalidate"
           }, {
             default: w(() => [
-              o("fieldset", e1, [
+              o("fieldset", eC, [
                 t[159] || (t[159] = o("legend", null, "Legend", -1)),
-                o("h2", t1, [
+                o("h2", tC, [
                   t[140] || (t[140] = o("span", null, "Form Element-Component", -1)),
                   o("a", {
                     href: "#",
@@ -22160,7 +22165,7 @@ function pv(e, t, n, s, i, l) {
                   status: i.validationStatus,
                   disabled: i.disabledStatus
                 }), null, 16, ["status", "disabled"]),
-                o("div", n1, [
+                o("div", nC, [
                   p(T, {
                     labelText: "Input for datalist:",
                     element: "input",
@@ -22172,7 +22177,7 @@ function pv(e, t, n, s, i, l) {
                     tooltipText: "This is a tooltip"
                   }, null, 8, ["status", "disabled", "datalist"])
                 ]),
-                o("div", i1, [
+                o("div", iC, [
                   p(T, I({
                     labelText: "Input (type search (without search-button)):",
                     element: "input",
@@ -22195,7 +22200,7 @@ function pv(e, t, n, s, i, l) {
                   }, { useCustomTooltip: !1 }), null, 16, ["status", "disabled"])
                 ]),
                 t[160] || (t[160] = o("h3", null, "Inputfields in Columns", -1)),
-                o("div", l1, [
+                o("div", lC, [
                   p(T, {
                     element: "input",
                     type: "text",
@@ -22241,7 +22246,7 @@ function pv(e, t, n, s, i, l) {
                     disabled: i.disabledStatus
                   }, null, 8, ["modelValue", "status", "disabled"])
                 ]),
-                o("div", o1, [
+                o("div", oC, [
                   p(T, {
                     labelText: "Label for emailfield (with icon):",
                     element: "input",
@@ -22315,7 +22320,7 @@ function pv(e, t, n, s, i, l) {
                   disabled: i.disabledStatus
                 }, null, 8, ["modelValue", "status", "disabled"]),
                 t[161] || (t[161] = o("h3", null, "Searchfields", -1)),
-                o("div", a1, [
+                o("div", aC, [
                   p(T, {
                     element: "input",
                     labelText: "Label for inputfield (search) without search-button:",
@@ -22363,7 +22368,7 @@ function pv(e, t, n, s, i, l) {
                   disabled: i.disabledStatus
                 }, null, 8, ["modelValue", "status", "disabled"]),
                 t[163] || (t[163] = o("hr", null, null, -1)),
-                o("h3", s1, [
+                o("h3", sC, [
                   t[142] || (t[142] = o("span", null, "Fake Selects", -1)),
                   o("a", {
                     href: "#",
@@ -22372,7 +22377,7 @@ function pv(e, t, n, s, i, l) {
                     onClick: t[34] || (t[34] = S((C) => l.openSettingsSidebar("CmdFakeSelect"), ["prevent"]))
                   })
                 ]),
-                o("div", r1, [
+                o("div", rC, [
                   p(B, I({ ref: "CmdFakeSelect" }, e.cmdFakeSelectSettingsData, {
                     selectData: i.fakeSelectOptionsData,
                     modelValue: i.fakeSelectDefault,
@@ -22448,8 +22453,8 @@ function pv(e, t, n, s, i, l) {
                   class: x(["label", i.validationStatus])
                 }, [
                   t[145] || (t[145] = o("span", { class: "label-text" }, "Single-Slider (with in- and output):", -1)),
-                  o("span", d1, [
-                    o("label", u1, [
+                  o("span", dC, [
+                    o("label", uC, [
                       t[143] || (t[143] = o("span", { class: "label-text" }, [
                         o("span", null, "Range Value:")
                       ], -1)),
@@ -22461,11 +22466,11 @@ function pv(e, t, n, s, i, l) {
                         min: "0",
                         max: "100",
                         id: "range-value"
-                      }, null, 10, c1), [
+                      }, null, 10, cC), [
                         [Wt, i.rangeValue]
                       ])
                     ]),
-                    o("label", m1, [
+                    o("label", mC, [
                       t[144] || (t[144] = o("span", { class: "label-text hidden" }, [
                         o("span", null, "Range Value")
                       ], -1)),
@@ -22477,7 +22482,7 @@ function pv(e, t, n, s, i, l) {
                         disabled: i.disabledStatus,
                         min: "0",
                         max: "100"
-                      }, null, 8, p1), [
+                      }, null, 8, pC), [
                         [Wt, i.rangeValue]
                       ])
                     ])
@@ -22592,9 +22597,9 @@ function pv(e, t, n, s, i, l) {
                 ]),
                 t[171] || (t[171] = o("h2", null, "Checkboxes and Radiobuttons", -1)),
                 t[172] || (t[172] = o("h3", null, "Checkboxes [native]", -1)),
-                o("div", f1, [
+                o("div", fC, [
                   t[149] || (t[149] = o("span", { class: "label-text" }, "Label for native checkboxes:", -1)),
-                  o("div", h1, [
+                  o("div", hC, [
                     p(T, {
                       element: "input",
                       labelText: "Label for checkbox with boolean",
@@ -22647,9 +22652,9 @@ function pv(e, t, n, s, i, l) {
                   ])
                 ]),
                 t[173] || (t[173] = o("h3", null, "Checkboxes (replaced)", -1)),
-                o("div", g1, [
+                o("div", gC, [
                   t[150] || (t[150] = o("span", { class: "label-text" }, "Label for Replaced Input-Type-Checkbox:", -1)),
-                  o("div", y1, [
+                  o("div", yC, [
                     p(T, {
                       element: "input",
                       labelText: "Label for replaced checkbox",
@@ -22677,9 +22682,9 @@ function pv(e, t, n, s, i, l) {
                   ])
                 ]),
                 t[174] || (t[174] = o("h3", null, "Radiobuttons [native]", -1)),
-                o("div", b1, [
+                o("div", bC, [
                   t[151] || (t[151] = o("span", { class: "label-text" }, "Label for native radiobuttons:", -1)),
-                  o("div", x1, [
+                  o("div", xC, [
                     p(T, {
                       element: "input",
                       labelText: "Label for native radiobutton",
@@ -22708,9 +22713,9 @@ function pv(e, t, n, s, i, l) {
                 ]),
                 o("p", null, " Radiobuttons with values: " + y(i.radiobuttonValue), 1),
                 t[175] || (t[175] = o("h3", null, "Radiobuttons (replaced)", -1)),
-                o("div", C1, [
+                o("div", CC, [
                   t[152] || (t[152] = o("span", { class: "label-text" }, "Label for Replaced Input-Type-Radio:", -1)),
-                  o("div", v1, [
+                  o("div", vC, [
                     p(T, {
                       element: "input",
                       labelText: "Label for replaced radiobutton",
@@ -22739,7 +22744,7 @@ function pv(e, t, n, s, i, l) {
                     }, null, 8, ["modelValue", "status", "disabled"])
                   ])
                 ]),
-                o("h3", k1, [
+                o("h3", kC, [
                   t[153] || (t[153] = H(" Input-Group ")),
                   o("a", {
                     href: "#",
@@ -22859,9 +22864,9 @@ function pv(e, t, n, s, i, l) {
                   ])
                 ])
               ]),
-              o("div", w1, [
+              o("div", wC, [
                 t[178] || (t[178] = o("small", null, "(values will not be submitted with the form!)", -1)),
-                o("div", T1, [
+                o("div", TC, [
                   p(T, {
                     element: "button",
                     nativeButton: { text: "Submit-button from component" },
@@ -22877,7 +22882,7 @@ function pv(e, t, n, s, i, l) {
                   }, t[177] || (t[177] = [
                     o("span", { class: "icon-check" }, null, -1),
                     o("span", null, "Native submit-button", -1)
-                  ]), 8, S1)
+                  ]), 8, SC)
                 ])
               ])
             ]),
@@ -22892,7 +22897,7 @@ function pv(e, t, n, s, i, l) {
       }),
       p(k, null, {
         default: w(() => [
-          o("h2", _1, [
+          o("h2", _C, [
             t[181] || (t[181] = o("span", null, "Bank Account Data", -1)),
             o("a", {
               href: "#",
@@ -22907,7 +22912,7 @@ function pv(e, t, n, s, i, l) {
       }),
       p(k, null, {
         default: w(() => [
-          o("h2", O1, [
+          o("h2", OC, [
             t[182] || (t[182] = o("span", null, "Basic Form", -1)),
             o("a", {
               href: "#",
@@ -22940,7 +22945,7 @@ function pv(e, t, n, s, i, l) {
       p(k, { anchorId: "section-boxes" }, {
         default: w(() => [
           t[203] || (t[203] = o("h2", { class: "headline-demopage" }, "Boxes", -1)),
-          o("h3", L1, [
+          o("h3", LC, [
             t[185] || (t[185] = o("span", null, "Default Box", -1)),
             o("a", {
               href: "#",
@@ -23061,7 +23066,7 @@ function pv(e, t, n, s, i, l) {
                   o("h4", null, " Box with links ", -1)
                 ])),
                 body: w(() => [
-                  o("ul", I1, [
+                  o("ul", IC, [
                     o("li", null, [
                       o("a", {
                         href: "#",
@@ -23165,7 +23170,7 @@ function pv(e, t, n, s, i, l) {
             _: 1
           }),
           t[204] || (t[204] = o("h3", null, "Product boxes", -1)),
-          o("div", B1, [
+          o("div", BC, [
             (a(!0), r(_, null, q(i.boxProductData, (C, z) => (a(), r("div", {
               class: "grid-small-item",
               key: z
@@ -23236,7 +23241,7 @@ function pv(e, t, n, s, i, l) {
       }),
       p(k, { "inner-component": "div" }, {
         default: w(() => [
-          o("h2", M1, [
+          o("h2", MC, [
             t[206] || (t[206] = o("span", null, "Breadcrumbs", -1)),
             o("a", {
               href: "#",
@@ -23255,7 +23260,7 @@ function pv(e, t, n, s, i, l) {
       }),
       p(k, null, {
         default: w(() => [
-          o("h2", D1, [
+          o("h2", DC, [
             t[207] || (t[207] = o("span", null, "Company Logo", -1)),
             o("a", {
               href: "#",
@@ -23273,7 +23278,7 @@ function pv(e, t, n, s, i, l) {
       }),
       p(k, null, {
         default: w(() => [
-          o("h2", F1, [
+          o("h2", FC, [
             t[208] || (t[208] = o("span", null, "Container", -1)),
             o("a", {
               href: "#",
@@ -23416,7 +23421,7 @@ function pv(e, t, n, s, i, l) {
             style: { "align-self": "flex-start" }
           }, t[219] || (t[219] = [
             o("img", {
-              src: AC,
+              src: A1,
               alt: "Alternative text"
             }, null, -1)
           ])),
@@ -23428,7 +23433,7 @@ function pv(e, t, n, s, i, l) {
             style: { "align-self": "flex-start" }
           }, t[220] || (t[220] = [
             o("img", {
-              src: PC,
+              src: P1,
               alt: "Alternative text"
             }, null, -1)
           ])),
@@ -23444,7 +23449,7 @@ function pv(e, t, n, s, i, l) {
             style: { "align-self": "flex-start" }
           }, t[221] || (t[221] = [
             o("img", {
-              src: EC,
+              src: E1,
               alt: "Alternative text"
             }, null, -1)
           ]))
@@ -23516,7 +23521,7 @@ function pv(e, t, n, s, i, l) {
       }),
       p(k, null, {
         default: w(() => [
-          o("h2", V1, [
+          o("h2", VC, [
             t[231] || (t[231] = o("span", null, "Headlines", -1)),
             o("a", {
               href: "#",
@@ -23579,7 +23584,7 @@ function pv(e, t, n, s, i, l) {
       }),
       p(k, null, {
         default: w(() => [
-          o("h2", A1, [
+          o("h2", AC, [
             t[239] || (t[239] = o("span", null, "Image", -1)),
             o("a", {
               href: "#",
@@ -23588,7 +23593,7 @@ function pv(e, t, n, s, i, l) {
               onClick: t[85] || (t[85] = S((C) => l.openSettingsSidebar("CmdImage"), ["prevent"]))
             })
           ]),
-          o("div", P1, [
+          o("div", PC, [
             p(re, I({
               ref: "CmdImage",
               image: i.imageData[0].image,
@@ -23604,7 +23609,7 @@ function pv(e, t, n, s, i, l) {
       }),
       p(k, null, {
         default: w(() => [
-          o("h2", E1, [
+          o("h2", EC, [
             t[240] || (t[240] = o("span", null, "Image-Gallery", -1)),
             o("a", {
               href: "#",
@@ -23637,7 +23642,7 @@ function pv(e, t, n, s, i, l) {
         default: w(() => {
           var C, z, ve, je, Ke, Je;
           return [
-            o("h2", H1, [
+            o("h2", HC, [
               t[242] || (t[242] = o("span", null, "Link", -1)),
               o("a", {
                 href: "#",
@@ -23683,7 +23688,7 @@ function pv(e, t, n, s, i, l) {
               fancybox: !0,
               icon: { iconClass: "icon-chevron-one-stripe-right", position: "right", tooltip: "Tooltip for hyperlink" }
             })) : m("", !0),
-            o("dl", q1, [
+            o("dl", qC, [
               t[244] || (t[244] = o("dt", null, "Event:", -1)),
               o("dd", null, y((z = (C = i.outputCmdLink) == null ? void 0 : C.event) == null ? void 0 : z.originalEvent.originalEvent), 1),
               t[245] || (t[245] = o("dt", null, "Target:", -1)),
@@ -23699,7 +23704,7 @@ function pv(e, t, n, s, i, l) {
         default: w(() => {
           var C, z, ve, je, Ke, Je;
           return [
-            o("h2", R1, [
+            o("h2", RC, [
               t[247] || (t[247] = o("span", null, "List Of Links", -1)),
               o("a", {
                 href: "#",
@@ -23712,7 +23717,7 @@ function pv(e, t, n, s, i, l) {
               links: i.listOfLinksData,
               onClick: l.cmdLinkOutput
             }), null, 16, ["links", "onClick"]),
-            o("dl", j1, [
+            o("dl", jC, [
               t[248] || (t[248] = o("dt", null, "Event:", -1)),
               o("dd", null, y((z = (C = i.outputCmdLink) == null ? void 0 : C.event) == null ? void 0 : z.originalEvent), 1),
               t[249] || (t[249] = o("dt", null, "Target:", -1)),
@@ -23726,7 +23731,7 @@ function pv(e, t, n, s, i, l) {
       }),
       p(k, null, {
         default: w(() => [
-          o("h2", N1, [
+          o("h2", NC, [
             t[251] || (t[251] = o("span", null, "List Of Images", -1)),
             o("a", {
               href: "#",
@@ -23741,7 +23746,7 @@ function pv(e, t, n, s, i, l) {
       }),
       p(k, null, {
         default: w(() => [
-          o("h2", U1, [
+          o("h2", UC, [
             t[252] || (t[252] = o("span", null, "Login Form", -1)),
             o("a", {
               href: "#",
@@ -23781,7 +23786,7 @@ function pv(e, t, n, s, i, l) {
       }),
       p(k, null, {
         default: w(() => [
-          o("h2", z1, [
+          o("h2", zC, [
             t[254] || (t[254] = o("span", null, "Main Navigation", -1)),
             o("a", {
               href: "#",
@@ -23797,7 +23802,7 @@ function pv(e, t, n, s, i, l) {
       }),
       p(k, null, {
         default: w(() => [
-          o("h2", W1, [
+          o("h2", WC, [
             t[255] || (t[255] = o("span", null, "Multistepform-Progressbar", -1)),
             o("a", {
               href: "#",
@@ -23821,7 +23826,7 @@ function pv(e, t, n, s, i, l) {
       }),
       p(k, null, {
         default: w(() => [
-          o("h2", G1, [
+          o("h2", GC, [
             t[257] || (t[257] = o("span", null, "Newsletter Subscription", -1)),
             o("a", {
               href: "#",
@@ -23845,7 +23850,7 @@ function pv(e, t, n, s, i, l) {
       }),
       p(k, null, {
         default: w(() => [
-          o("h2", K1, [
+          o("h2", KC, [
             t[258] || (t[258] = o("span", null, "Opening Hours", -1)),
             o("a", {
               href: "#",
@@ -23864,7 +23869,7 @@ function pv(e, t, n, s, i, l) {
       }),
       p(k, null, {
         default: w(() => [
-          o("h2", J1, [
+          o("h2", JC, [
             t[259] || (t[259] = o("span", null, "Page Footer", -1)),
             o("a", {
               href: "#",
@@ -23893,7 +23898,7 @@ function pv(e, t, n, s, i, l) {
       }),
       p(k, null, {
         default: w(() => [
-          o("h2", Y1, [
+          o("h2", YC, [
             t[261] || (t[261] = o("span", null, "Page Header", -1)),
             o("a", {
               href: "#",
@@ -23923,7 +23928,7 @@ function pv(e, t, n, s, i, l) {
       }),
       p(k, null, {
         default: w(() => [
-          o("h2", Z1, [
+          o("h2", ZC, [
             t[263] || (t[263] = o("span", null, "Pagination", -1)),
             o("a", {
               href: "#",
@@ -23958,7 +23963,7 @@ function pv(e, t, n, s, i, l) {
       }),
       p(k, null, {
         default: w(() => [
-          o("h2", Q1, [
+          o("h2", QC, [
             t[266] || (t[266] = o("span", null, "Site Header", -1)),
             o("a", {
               href: "#",
@@ -23982,7 +23987,7 @@ function pv(e, t, n, s, i, l) {
       }),
       p(k, null, {
         default: w(() => [
-          o("h2", X1, [
+          o("h2", XC, [
             t[267] || (t[267] = o("span", null, "Site Search", -1)),
             o("a", {
               href: "#",
@@ -24008,7 +24013,7 @@ function pv(e, t, n, s, i, l) {
       }),
       p(k, null, {
         default: w(() => [
-          o("h2", $1, [
+          o("h2", $C, [
             t[268] || (t[268] = o("span", null, "Slideshow", -1)),
             o("a", {
               href: "#",
@@ -24379,11 +24384,11 @@ function pv(e, t, n, s, i, l) {
       ]),
       _: 1
     }, 8, ["openSidebar", "onToggleSidebar"])) : m("", !0)
-  ], 8, qC)), [
+  ], 8, q1)), [
     [El]
   ]);
 }
-const vv = /* @__PURE__ */ F(HC, [["render", pv]]), kv = {
+const vv = /* @__PURE__ */ F(H1, [["render", pv]]), kv = {
   // el = real dom-element
   mounted(e) {
     if (e.tagName === "INPUT" || e.tagName === "SELECT" || e.tagName === "TEXTAREA" || e.tagName === "A")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.2.7",
+  "version": "4.2.8",
   "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.10",
+    "comand-frontend-framework": "^4.2.11",
     "comand-ui-iconfonts": "^1.0.19",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",

package/src/assets/data/switch-language.json

@@ -16,5 +16,14 @@
       "type": "href",
       "path": "/"
     }
+  },
+  {
+    "iso2": "es",
+    "name": "Español",
+    "tooltip": "cambiar el idioma a español",
+    "link": {
+      "type": "href",
+      "path": "/"
+    }
   }
 ]

package/src/components/CmdSwitchLanguage.vue

@@ -8,7 +8,7 @@
                    :class="['flag', language.iso2, {'active': activeLanguage(language.iso2)}]"
                    :title="language.tooltip"
                    @click.prevent="changeLanguage(language.iso2, $event)">
-                   <img :src="imageSources[index]" :alt="language.name" />
+                   <img :src="pathFlag(language.iso2)" :alt="language.name" />
                 </a>
 
                 <!-- end link-type 'href' -->
@@ -19,7 +19,7 @@
                      :class="['flag', language.iso2]"
                      :title="language.tooltip"
                      @click.prevent="changeLanguage(language.iso2, $event)">
-                    <img :src="imageSources[index]" :alt="language.name" />
+                    <img :src="pathFlag(language.iso2)" :alt="language.name" />
                 </router-link>
                 <!-- end link-type 'router' -->
             </li>
@@ -48,6 +48,13 @@ export default {
         languages: {
             type: Array,
             required: true
+        },
+        /**
+         * path to flag-files (will be combined with flag isoCode to load svg)
+         */
+        pathFlags: {
+            type: String,
+            default: "/media/images/flags"
         }
     },
     mounted() {
@@ -65,6 +72,9 @@ export default {
         activeLanguage(iso2) {
             return this.currentLanguage === iso2
         },
+        pathFlag(isoCode) {
+            return this.pathFlags + "/flag-" + isoCode + ".svg"
+        },
         changeLanguage(iso2, event) {
             // set selected language as current language (in data-property)
             this.currentLanguage = iso2
@@ -75,31 +85,6 @@ export default {
             // emit original event
             this.$emit("click", { originalEvent: event, iso2} )
         }
-    },
-    watch: {
-        languages: {
-            handler() {
-                this.imageSources = []
-                this.languages.forEach(
-                    async (item) => {
-                        // get iso-code
-                        const isoCode = item.iso2
-
-                        // get path of current flag
-                        // const path = "../assets/images/flags/flag-" + isoCode + ".svg"
-
-                        // assign value of imported file (returns object with default-key)
-                        // const { default: dynamicImage } = await import(/* @vite-ignore */ path)
-
-                        // push image to data-property-array
-                        // this.imageSources.push(dynamicImage)
-                        this.imageSources.push(flags[isoCode].default)
-                    }
-                )
-            },
-            immediate: true,
-            deep: true
-        }
     }
 }
 </script>