@bagelink/vue 1.0.52 → 1.0.57

package/dist/index.cjs

@@ -10532,6 +10532,24 @@ const SLOT_VALUE_COMPONENTS$1 = /* @__PURE__ */ new Set(["div", "span", "p"]);
 const SRC_VALUE_COMPONENTS$1 = /* @__PURE__ */ new Set(["img", "iframe"]);
 function useSchemaField(optns) {
   const { mode = "form", getRowData, onUpdate, includeUnset = false } = optns;
+  function renderObject(obj, depth = 0) {
+    if (obj === null || obj === void 0) return "";
+    if (typeof obj !== "object") return String(obj);
+    if (Array.isArray(obj)) return obj.map((item) => renderObject(item, depth + 1)).join(", ");
+    const indent = depth > 0 ? "  ".repeat(depth) : "";
+    const nextIndent = "  ".repeat(depth + 1);
+    const entries = Object.entries(obj);
+    if (entries.length === 0) return "{}";
+    if (depth > 0) {
+      return `{
+${entries.map(([key, value]) => `${nextIndent}${key}: ${renderObject(value, depth + 1)}`).join(",\n")}
+${indent}}`;
+    }
+    return entries.map(([key, value]) => {
+      const valueStr = typeof value === "object" && value !== null ? renderObject(value, depth + 1) : String(value);
+      return `${key}: ${valueStr}`;
+    }).join("\n");
+  }
   function getComponent(field) {
     var _a;
     const componentMap = {
@@ -10671,7 +10689,7 @@ function useSchemaField(optns) {
       return vue.h("div", { class: "preview-field" }, [
         vue.h("div", { class: "field-label" }, `${field.label || keyToLabel(field.id || "")}:`),
         vue.h("div", { class: "field-value" }, [
-          slotContent || (typeof field.$el === "object" ? vue.h(Component, props2, componentSlots) : (transformedValue == null ? void 0 : transformedValue.toString()) || "")
+          slotContent || (typeof field.$el === "object" ? vue.h(Component, props2, componentSlots) : typeof transformedValue === "object" && transformedValue !== null ? vue.h("pre", { style: "margin: 0; white-space: pre-wrap; font-family: inherit; font-size: inherit;" }, renderObject(transformedValue)) : (transformedValue == null ? void 0 : transformedValue.toString()) || "")
         ])
       ]);
     }
@@ -15054,7 +15072,11 @@ function dateField(id, label, options) {
     vIf: options == null ? void 0 : options.vIf,
     attrs: {
       disabled: options == null ? void 0 : options.disabled,
-      autocomplete: options == null ? void 0 : options.autocomplete
+      autocomplete: options == null ? void 0 : options.autocomplete,
+      enableTime: options == null ? void 0 : options.enableTime,
+      mode: options == null ? void 0 : options.mode,
+      locale: options == null ? void 0 : options.locale,
+      timezone: options == null ? void 0 : options.timezone
     }
   };
 }
@@ -15472,9 +15494,16 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
       formData.value = newData;
       emit2("update:modelValue", formData.value);
     }
+    const validateForm = () => {
+      var _a;
+      return ((_a = form.value) == null ? void 0 : _a.reportValidity()) ?? false;
+    };
+    let formError = vue.ref();
     async function handleSubmit() {
       var _a;
       try {
+        const valid = validateForm();
+        if (!valid) return;
         if (formState.value === "submitting") return;
         formState.value = "submitting";
         await ((_a = props2.onSubmit) == null ? void 0 : _a.call(props2, formData.value));
@@ -15482,14 +15511,11 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
         formState.value = "success";
         window.parent.postMessage({ type: "BAGEL_FORM_SUCCESS", data: JSON.stringify(formData.value) }, "*");
       } catch (error) {
-        console.error("Submit error:", error);
         formState.value = "error";
+        formError.value = error;
+        console.error("Submit error:", formError.value);
       }
     }
-    const validateForm = () => {
-      var _a;
-      return ((_a = form.value) == null ? void 0 : _a.reportValidity()) ?? false;
-    };
     const { renderField } = useSchemaField({
       mode: "form",
       getRowData: () => ({
@@ -15505,6 +15531,13 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
       }
     });
     const renderSchemaField = (field) => renderField(field);
+    function handleSlotInputChange(event) {
+      const input = event.target;
+      if (input.name) {
+        const value = input.type === "checkbox" ? input.checked : input.value;
+        updateFormData(input.name, value);
+      }
+    }
     __expose({ form, isDirty, validateForm, resolveSchema, refreshSchema });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
@@ -15514,7 +15547,8 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
             ref_key: "form",
             ref: form,
             class: vue.normalizeClass(props2.class),
-            onSubmit: vue.withModifiers(handleSubmit, ["prevent"])
+            onSubmit: vue.withModifiers(handleSubmit, ["prevent"]),
+            onInput: handleSlotInputChange
           }, [
             schemaState.value === "loading" ? vue.renderSlot(_ctx.$slots, "loading", { key: 0 }, () => [
               vue.createElementVNode("div", _hoisted_1$M, [
@@ -15548,7 +15582,10 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
           ], 64))
         ], 64)) : vue.createCommentVNode("", true),
         formState.value === "success" ? vue.renderSlot(_ctx.$slots, "success", { key: 1 }) : vue.createCommentVNode("", true),
-        formState.value === "error" ? vue.renderSlot(_ctx.$slots, "error", { key: 2 }) : vue.createCommentVNode("", true)
+        formState.value === "error" ? vue.renderSlot(_ctx.$slots, "error", {
+          key: 2,
+          error: vue.unref(formError)
+        }) : vue.createCommentVNode("", true)
       ], 64);
     };
   }
@@ -15674,7 +15711,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
       () => isPrimitiveType.value || props2.type === "object" && resolvedSchemaData.value.length > 0
     );
     const showMinimizeButton = vue.computed(() => {
-      return resolvedSchemaData.value.length > 3 || resolvedSchemaData.value.some((schema) => schema.$el === "richtext");
+      return resolvedSchemaData.value.length > 2 || resolvedSchemaData.value.some((schema) => schema.$el === "richtext");
     });
     return (_ctx, _cache) => {
       const _component_Icon = vue.resolveComponent("Icon");
@@ -15730,7 +15767,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
               thin: "",
               icon: "add",
               color: "gray",
-              class: "txt12",
+              class: "txt12 arrayAddButton",
               onClick: addItem
             }, {
               default: vue.withCtx(() => [
@@ -16042,7 +16079,7 @@ const _hoisted_12$4 = {
 const _hoisted_13$3 = ["disabled", "onClick"];
 const _hoisted_14$3 = {
   key: 0,
-  class: "time-picker border-start flex column gap-1 w-120px"
+  class: "time-picker border-start flex column gap-1 w-120px px-025"
 };
 const _hoisted_15$3 = { class: "flex gap-025" };
 const _hoisted_16$3 = { class: "txt-center opacity-6 txt14" };
@@ -16057,7 +16094,13 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
     modelValue: {},
     min: {},
     max: {},
-    timezone: { default: "UTC" },
+    timezone: { default: () => {
+      try {
+        return Intl.DateTimeFormat().resolvedOptions().timeZone;
+      } catch {
+        return "UTC";
+      }
+    } },
     mode: { default: "day" },
     defaultValue: {},
     firstDayOfWeek: { default: WEEK_START_DAY.SUNDAY },
@@ -16280,6 +16323,16 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
         const date2 = parseUserInput(input.value);
         if (date2) {
           if (props2.enableTime) {
+            try {
+              const targetDate = new Date(date2.toLocaleString("en-US", { timeZone: props2.timezone }));
+              const tzOffset = targetDate.getTime() - date2.getTime();
+              date2.setTime(date2.getTime() - tzOffset);
+            } catch {
+              if (props2.timezone === "UTC") {
+                const tzOffset = (/* @__PURE__ */ new Date()).getTimezoneOffset();
+                date2.setMinutes(date2.getMinutes() + tzOffset);
+              }
+            }
             emit2("update:modelValue", date2.toISOString());
           } else {
             const utcDate = new Date(Date.UTC(date2.getFullYear(), date2.getMonth(), date2.getDate()));
@@ -16303,6 +16356,16 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
           const date2 = parseUserInput(inputValue.value);
           if (date2) {
             if (props2.enableTime) {
+              try {
+                const targetDate = new Date(date2.toLocaleString("en-US", { timeZone: props2.timezone }));
+                const tzOffset = targetDate.getTime() - date2.getTime();
+                date2.setTime(date2.getTime() - tzOffset);
+              } catch {
+                if (props2.timezone === "UTC") {
+                  const tzOffset = (/* @__PURE__ */ new Date()).getTimezoneOffset();
+                  date2.setMinutes(date2.getMinutes() + tzOffset);
+                }
+              }
               emit2("update:modelValue", date2.toISOString());
             } else {
               const utcDate = new Date(Date.UTC(date2.getFullYear(), date2.getMonth(), date2.getDate()));
@@ -16339,9 +16402,15 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
         const currentMinutes = ((_b = selectedDate.value) == null ? void 0 : _b.getMinutes()) ?? (/* @__PURE__ */ new Date()).getMinutes();
         newDate.setHours(currentHours);
         newDate.setMinutes(currentMinutes);
-        if (props2.timezone === "UTC") {
-          const tzOffset = (/* @__PURE__ */ new Date()).getTimezoneOffset();
-          newDate.setMinutes(newDate.getMinutes() + tzOffset);
+        try {
+          const targetDate = new Date(newDate.toLocaleString("en-US", { timeZone: props2.timezone }));
+          const tzOffset = targetDate.getTime() - newDate.getTime();
+          newDate.setTime(newDate.getTime() - tzOffset);
+        } catch {
+          if (props2.timezone === "UTC") {
+            const tzOffset = (/* @__PURE__ */ new Date()).getTimezoneOffset();
+            newDate.setMinutes(newDate.getMinutes() + tzOffset);
+          }
         }
         emit2("update:modelValue", newDate.toISOString());
       } else {
@@ -16558,7 +16627,7 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const DateInput = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-ca4c1d9b"]]);
+const DateInput = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-80df1413"]]);
 const _hoisted_1$F = ["title"];
 const _hoisted_2$t = { key: 0 };
 const _hoisted_3$o = {
@@ -17506,7 +17575,10 @@ const _hoisted_2$p = {
   class: "block"
 };
 const _hoisted_3$k = ["id", "placeholder", "disabled", "required", "readonly", "pattern", "onKeydown"];
-const _hoisted_4$d = { key: 1 };
+const _hoisted_4$d = {
+  key: 1,
+  class: "opacity-7 light"
+};
 const _hoisted_5$d = {
   key: 5,
   class: "flex column spinner"
@@ -17556,7 +17628,7 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
       const precision = ((_a = __props.step.toString().split(".")[1]) == null ? void 0 : _a.length) || 0;
       return Number.parseFloat(numArr.reduce((acc, curr) => acc - curr, firstNum).toFixed(precision));
     }
-    const canAdd = vue.computed(() => !(__props.max !== void 0 && add(numberValue.value, __props.step) <= __props.max));
+    const canAdd = vue.computed(() => __props.max === void 0 || add(numberValue.value, __props.step) <= __props.max);
     const canDecrement = vue.computed(() => __props.min === void 0 || subtract(numberValue.value, __props.step) >= __props.min);
     function increment() {
       if (!canAdd.value) return;
@@ -17709,7 +17781,7 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-af266bf2"]]);
+const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-b3711c9e"]]);
 const _hoisted_1$A = ["value", "autofocus", "onKeydown", "onPaste"];
 const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
   __name: "OTP",
@@ -17831,6 +17903,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
     pattern: {},
     shrink: { type: Boolean },
     disabled: { type: Boolean },
+    name: {},
     nativeInputAttrs: {},
     icon: {},
     iconStart: {},
@@ -17862,8 +17935,9 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => password.value = $event)
         }, props2, {
           type: inputType.value,
-          class: "mb-0"
-        }), null, 16, ["modelValue", "type"]),
+          class: "mb-0",
+          name: props2.name
+        }), null, 16, ["modelValue", "type", "name"]),
         vue.createElementVNode("div", _hoisted_2$o, [
           vue.createVNode(vue.unref(Btn), {
             flat: "",
@@ -28365,15 +28439,19 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
 const TableField = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-e9632f79"]]);
 const _hoisted_1$o = ["title"];
 const _hoisted_2$e = ["for"];
-const _hoisted_3$b = ["id", "title", "autocomplete", "type", "placeholder", "disabled", "required", "pattern"];
-const _hoisted_4$6 = ["id", "title", "type", "rows", "placeholder", "disabled", "required", "pattern"];
-const _hoisted_5$6 = { key: 2 };
+const _hoisted_3$b = ["id", "name", "title", "autocomplete", "type", "placeholder", "disabled", "required", "pattern"];
+const _hoisted_4$6 = ["id", "name", "title", "type", "rows", "placeholder", "disabled", "required", "pattern"];
+const _hoisted_5$6 = {
+  key: 2,
+  class: "opacity-7 light"
+};
 const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
   __name: "TextInput",
   props: {
     id: {},
     title: {},
     helptext: {},
+    name: {},
     placeholder: {},
     modelValue: { default: "" },
     label: {},
@@ -28457,6 +28535,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
             ref_key: "input",
             ref: input,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(inputVal) ? inputVal.value = $event : inputVal = $event),
+            name: _ctx.name,
             title: _ctx.title,
             autocomplete: _ctx.autocomplete,
             type: _ctx.type,
@@ -28484,6 +28563,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
             ref_key: "input",
             ref: input,
             "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => vue.isRef(inputVal) ? inputVal.value = $event : inputVal = $event),
+            name: _ctx.name,
             title: _ctx.title,
             type: _ctx.type,
             rows: inputRows.value,
@@ -28513,7 +28593,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-99e3ea36"]]);
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-dbcf2010"]]);
 const _hoisted_1$n = ["title"];
 const _hoisted_2$d = ["id", "required"];
 const _hoisted_3$a = ["for"];
@@ -33652,7 +33732,7 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const BottomMenu = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-2227f9cc"]]);
+const BottomMenu = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-864b768d"]]);
 const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
   __name: "Layout",
   props: {
@@ -33665,11 +33745,11 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     vue.useCssVars((_ctx) => ({
-      "16111f2e": gapSize.value,
-      "2c189afc": gridTemplateRows.value,
-      "243c3a94": gridTemplateColumns.value,
-      "84a9b646": mGridTemplateRows.value,
-      "55be334e": mGridTemplateColumns.value
+      "39f67c85": gapSize.value,
+      "0abc670b": gridTemplateRows.value,
+      "40854d6b": gridTemplateColumns.value,
+      "940dfd18": mGridTemplateRows.value,
+      "41fa2e62": mGridTemplateColumns.value
     }));
     const props2 = __props;
     const gridTemplateRows = vue.computed(() => props2.rows.length > 0 ? props2.rows.join(" ") : "auto");
@@ -33694,7 +33774,7 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Layout = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-1814129a"]]);
+const Layout = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-d3589d43"]]);
 const _hoisted_1$i = { key: 0 };
 const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
   __name: "SidebarMenu",
@@ -33770,7 +33850,7 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SidebarMenu = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-951fdacc"]]);
+const SidebarMenu = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-4b730e73"]]);
 const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
   __name: "Skeleton",
   props: {
@@ -33802,7 +33882,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-8788ed73"]]);
+const Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-7bce7e33"]]);
 const _hoisted_1$h = { class: "bgl_card tabs-top" };
 const _hoisted_2$a = { class: "tabs grid auto-flow-columns fit-content" };
 const _hoisted_3$7 = ["onClick"];
@@ -33866,7 +33946,7 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TabbedLayout = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-915732c1"]]);
+const TabbedLayout = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-138a7441"]]);
 const state = vue.reactive(/* @__PURE__ */ new Map());
 function useTabs(group) {
   if (!state.has(group)) {
@@ -34043,7 +34123,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-6ece2018"]]);
+const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-2e964f00"]]);
 const _hoisted_1$e = { class: "no-margin ellipsis line-height-14 pb-025" };
 const _hoisted_2$9 = { class: "txt12 no-margin txt-gray ellipsis" };
 const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
@@ -34180,7 +34260,7 @@ const _hoisted_1$b = ["id"];
 const defaultMarkerSVG = '<svg width="28" height="38" viewBox="0 0 28 38" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.2263 37.7955C17.0897 37.7955 19.4109 37.0138 19.4109 36.0496C19.4109 35.0854 17.0897 34.3037 14.2263 34.3037C11.363 34.3037 9.04175 35.0854 9.04175 36.0496C9.04175 37.0138 11.363 37.7955 14.2263 37.7955Z" fill="black" fill-opacity="0.1"/><path d="M14.2265 0.549591C21.2842 0.549591 27.0131 6.23786 27.0787 13.28V13.4024C27.0787 19.3328 24.4759 24.4306 21.5627 28.2764C18.6511 32.12 15.4577 34.6754 14.3457 35.5097C14.2748 35.5629 14.1778 35.5629 14.1068 35.5097C12.9947 34.675 9.80135 32.1197 6.88984 28.2762C3.97665 24.4304 1.37378 19.3328 1.37378 13.4024C1.37378 6.30387 7.12806 0.549591 14.2265 0.549591Z" fill="#ED1b3E" stroke="#ED6C6F"/><path d="M14.2263 21.6185C18.7639 21.6185 22.4424 17.94 22.4424 13.4024C22.4424 8.86477 18.7639 5.18631 14.2263 5.18631C9.68872 5.18631 6.01025 8.86477 6.01025 13.4024C6.01025 17.94 9.68872 21.6185 14.2263 21.6185Z" fill="white"/></svg>';
 const leafletScriptUrl = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js";
 const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
-  __name: "MapEmbed",
+  __name: "Index",
   props: {
     center: { default: () => [31.7683, 35.2137] },
     zoom: { default: 15 },
@@ -34373,6 +34453,7 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
                   class: "position-start",
                   icon: "close",
                   thin: "",
+                  round: "",
                   color: "white",
                   onClick: closeModal
                 })
@@ -36737,7 +36818,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-977a5319"]]);
+const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c7371018"]]);
 const groups = {};
 let clickHandler = (_e2) => void 0;
 const lightboxDirective = {
@@ -37534,7 +37615,6 @@ function getBrowserNavigatorLocale() {
   return navigator.languages && navigator.languages.length ? navigator.languages[0] : navigator.language;
 }
 function formatDate(date2, format2 = "dd.mm.yy", locale2) {
-  var _a;
   if (!date2) return "";
   locale2 = locale2 || getBrowserNavigatorLocale();
   try {
@@ -37543,8 +37623,6 @@ function formatDate(date2, format2 = "dd.mm.yy", locale2) {
       console.warn("Invalid date provided to formatDate:", date2);
       return "";
     }
-    const separator = ((_a = format2.match(/[^\w\s]/)) == null ? void 0 : _a[0]) || ".";
-    const formatParts = format2.split(/[^\w\s]/);
     const datePartsMap = {
       dd: String(d2.getDate()).padStart(2, "0"),
       ddd: d2.toLocaleString(locale2, { weekday: "short" }),
@@ -37586,15 +37664,11 @@ function formatDate(date2, format2 = "dd.mm.yy", locale2) {
     if (partsMap.dayPeriod) {
       datePartsMap.ampm = partsMap.dayPeriod;
     }
-    let formattedDate = "";
-    for (let i2 = 0; i2 < formatParts.length; i2++) {
-      const part = formatParts[i2];
-      if (datePartsMap[part]) {
-        formattedDate += datePartsMap[part];
-      }
-      if (i2 < formatParts.length - 1) {
-        formattedDate += separator;
-      }
+    let formattedDate = format2;
+    const tokens = Object.keys(datePartsMap).sort((a2, b2) => b2.length - a2.length);
+    for (const token of tokens) {
+      const regex2 = new RegExp(token, "g");
+      formattedDate = formattedDate.replace(regex2, datePartsMap[token]);
     }
     return formattedDate;
   } catch (error) {