@ironsource/shared-ui 2.1.6-test.4 → 2.1.6-test.6

package/CalendarMonthV4.vue_vue_type_style_index_0_scoped_a80364bd_lang.css

@@ -0,0 +1 @@
+.label[data-v-a80364bd]{color:#41454d}.days-wrapper[data-v-a80364bd]{color:#53575b}.days-wrapper .date-wrapper[data-v-a80364bd]{position:relative;width:32px;height:32px;display:inline-block;text-align:center;margin-bottom:4px;line-height:21px;box-sizing:border-box}.days-wrapper .date-wrapper.start-day-wrapper[data-v-a80364bd]{background:var(--primary-light, #cee7fe);border-radius:100% 0% 0% 100%}.days-wrapper .date-wrapper.end-day-wrapper[data-v-a80364bd]{background:var(--primary-light, #cee7fe);border-radius:0% 100% 100% 0%}.days-wrapper .date-wrapper.start-day-wrapper.end-day-wrapper[data-v-a80364bd]{background-color:transparent!important}.days-wrapper .date-wrapper.start-day-wrapper.end-day-wrapper[data-v-a80364bd]:before{content:"";display:block;position:absolute;background:var(--primary-main, #0091ff);width:32px;height:32px;left:50%;top:0;margin-left:-16px;border-radius:100px;z-index:-1}.days-wrapper .day[data-v-a80364bd]{position:relative;width:32px;height:32px;display:inline-block;text-align:center;padding:5px;margin-bottom:4px;line-height:21px;box-sizing:border-box;cursor:pointer}.days-wrapper .day[data-v-a80364bd]:not(.non-day):not(.disabled-day):not(.selected-day):hover:not(.selected-day-between):before{content:"";display:block;position:absolute;background:var(--primary-main50p, rgba(0, 145, 255, .5));width:32px;height:32px;left:50%;top:0;margin-left:-16px;border-radius:100px;z-index:-1}.days-wrapper .day.today[data-v-a80364bd]:after{content:"";background:#3083ff;position:absolute;text-align:center;width:4px;height:4px;border-radius:100%;bottom:4px;left:50%;margin-left:-2px}.days-wrapper .day.today.selected-day[data-v-a80364bd]:after,.days-wrapper .day.today.selected-day-between[data-v-a80364bd]:after{background:#ffffff}.days-wrapper .day.start-day[data-v-a80364bd]{border-radius:100px 0 0 100px}.days-wrapper .day.end-day[data-v-a80364bd]{border-radius:0 100px 100px 0}.days-wrapper .day.start-day.end-day[data-v-a80364bd]{background-color:transparent!important}.days-wrapper .day.start-day.end-day[data-v-a80364bd]:before{content:"";display:block;position:absolute;background:var(--primary-main, #0091ff);width:32px;height:32px;left:50%;top:0;margin-left:-16px;border-radius:100px;z-index:-1}.days-wrapper .day.selected-day-between[data-v-a80364bd]{color:#53575b;background:var(--primary-light, #cee7fe)}.days-wrapper .day.selected-day-between[data-v-a80364bd]:hover{background-color:var(--primary-main50p, rgba(0, 145, 255, .5));color:#696a6b}.days-wrapper .day.selected-day[data-v-a80364bd]{background:var(--primary-main, #0091ff)!important;border-radius:100%;color:#fff}.days-wrapper .day.selected-day[data-v-a80364bd]:hover{color:#fff}.days-wrapper .day.disabled-day[data-v-a80364bd]{color:#a9afb4;cursor:default;background:transparent}.days-wrapper .day.non-day[data-v-a80364bd]{color:transparent;cursor:default;background:transparent}.calendar-month[data-v-a80364bd]{user-select:none;box-sizing:unset;padding:0;overflow:hidden;position:relative;width:224px;margin:auto}.calendar-month .days-header[data-v-a80364bd]{padding:21px 0 14px;color:#8e959d}.calendar-month .days-header span[data-v-a80364bd]{width:32px;display:inline-block;text-align:center}.calendar-month .month-header[data-v-a80364bd]{padding-top:13px;padding-bottom:3px;text-align:center;color:#53575b}.calendar-month .next[data-v-a80364bd]{right:4px;cursor:pointer;position:absolute;z-index:16}.calendar-month .next[data-v-a80364bd],.calendar-month .previous[data-v-a80364bd]{transform:translateY(8px)}.calendar-month .previous[data-v-a80364bd]{left:4px;cursor:pointer;position:absolute;z-index:16}

package/DatePickerMonthV4.vue_vue_type_style_index_0_scoped_11288104_lang.css

@@ -0,0 +1 @@
+.label[data-v-11288104]{color:#41454d}

package/DatePickerV4.vue_vue_type_style_index_0_scoped_a5757773_lang.css

@@ -0,0 +1 @@
+.label[data-v-a5757773]{color:#41454d}.date-picker[data-v-a5757773]{position:relative}.date-picker .input[data-v-a5757773]{max-width:100%}.date-picker-popup[data-v-a5757773]{width:252px;padding:16px;position:absolute;top:38px;left:0;z-index:1000!important;background-color:#fff;border-radius:.5rem;box-shadow:0 2px 4px #0000004d}.date-picker-popup.align-right[data-v-a5757773]{left:inherit;right:0}

package/DateRangeV4.vue_vue_type_style_index_0_scoped_590bb1db_lang.css

@@ -0,0 +1 @@
+.label[data-v-590bb1db]{color:#41454d}.pop-up[data-v-590bb1db]{width:652px;position:absolute;z-index:1000;top:32px;box-shadow:0 8px 24px -6px #00000029,0 0 1px #0006;background-color:#fff;border-radius:8px;left:1px;overflow:hidden}.pop-up.open-on-top[data-v-590bb1db]{top:0}.pop-up.hide-presets[data-v-590bb1db],.pop-up.hide-presets .calendar-wrap[data-v-590bb1db]{width:494px}.pop-up.hide-presets .date-picker-calendar[data-v-590bb1db]{padding:15px 16px}.pop-up .date-picker-menu[data-v-590bb1db]{width:164px;background:#ffffff;vertical-align:top;border-right:1px solid var(--common-divider-elevation-0, #e4e4e4);background:var(--background-paper, #fcfcfc)}.pop-up .date-picker-menu .preset-element[data-v-590bb1db]{padding-left:8px;height:32px;border-radius:8px;color:#53575b;line-height:32px}.pop-up .date-picker-menu .preset-element[data-v-590bb1db]:hover{background:var(--action-hover, rgba(0, 0, 0, .05))}.pop-up .date-picker-menu .selected-preset[data-v-590bb1db]{border-radius:8px;background:var(--action-selected, #ebebeb)}.pop-up .date-picker-menu li[data-v-590bb1db]{cursor:pointer;margin-bottom:2px}.pop-up .left-box[data-v-590bb1db]{left:-1px}.pop-up .date-picker-calendar[data-v-590bb1db]{box-sizing:border-box;height:100%;padding:15px 0;display:grid;grid-template-columns:1fr 1fr;grid-gap:18px}.pop-up .calendars-wrapper[data-v-590bb1db]{padding-left:6px}.pop-up .preset-dropdown ul[data-v-590bb1db]{list-style:none;margin:0;padding:8px;line-height:32px}.pop-up .buttons-cover[data-v-590bb1db]{height:48px;position:absolute;bottom:0;width:calc(100% + 10px);right:-10px;box-sizing:border-box;border-top:1px solid #dddfe1;align-items:center;display:flex;justify-content:space-between;padding:12px 24px}.pop-up .buttons-cover .text-container[data-v-590bb1db]{flex:1;color:var(--text-secondary, #646464)}.pop-up button[data-v-590bb1db]{float:right;margin-left:4px}.pop-up .error[data-v-590bb1db]{display:none;position:absolute;left:270px;top:22px}.pop-up .inline-block[data-v-590bb1db]{display:inline-block}.pop-up.right[data-v-590bb1db]{left:initial;right:1px}.calendar-wrap[data-v-590bb1db]{width:478px;height:372px;position:relative;border-bottom-right-radius:8px;border-top-right-radius:8px;vertical-align:top}.type-picker[data-v-590bb1db]{height:60px;line-height:60px;padding-left:15px;box-shadow:0 1px 3px #0000003b}.range-type[data-v-590bb1db]{color:#8e959d;padding-left:15px;padding-right:15px;cursor:pointer}.selected-range-type[data-v-590bb1db]{color:#fff;background-color:#3083ff;border-radius:20px;padding:6px 15px;cursor:default}.date-range-field[data-v-590bb1db]{display:inline-block;width:100%;height:30px;position:relative;cursor:pointer;border-radius:3px}.date-range-field.selected-item-as-title[data-v-590bb1db]{left:0;border:none;background-image:none;max-width:100%;height:22px;color:#3083ff;overflow:visible}.date-range-field.selected-item-as-title .small-triangle[data-v-590bb1db]{right:-25px}.date-range-field.selected-item-as-title .small-triangle[data-v-590bb1db]:after{border-top-color:currentColor}.date-range-field.selected-item-as-title span[data-v-590bb1db]{padding-left:12px}.date-range-field.no-button-limit[data-v-590bb1db]{overflow:visible}.date-range-field.no-button-limit span[data-v-590bb1db]{width:100%;line-height:22px}.date-range-field span[data-v-590bb1db]{line-height:28px;padding-left:15px;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(100% - 26px);white-space:nowrap;position:relative}.date-range-disabled .date-range-field[data-v-590bb1db]{cursor:default;color:#8e959d;pointer-events:none}.date-range-disabled .small-triangle[data-v-590bb1db]:after{border-top-color:#8e959d}.pop-up-content[data-v-590bb1db]{margin-top:1px}.type-message[data-v-590bb1db]{color:#8e959d;padding:10px 20px;line-height:1.5}.relative-wrap[data-v-590bb1db]{position:relative}.space-right[data-v-590bb1db]{margin-right:13px}.space-left[data-v-590bb1db]{margin-left:9px}.top-date[data-v-590bb1db]{line-height:13px}.flex[data-v-590bb1db]{display:flex}

package/components/datePicker/v4/DatePickerMonthV4.vue.js

@@ -0,0 +1,7 @@
+import o from "./DatePickerMonthV4.vue2.js";
+/* empty css                        */import e from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../DatePickerMonthV4.vue_vue_type_style_index_0_scoped_11288104_lang.css"; //*');
+const c = /* @__PURE__ */ e(o, [["__scopeId", "data-v-11288104"]]);
+export {
+  c as default
+};

package/components/datePicker/v4/DatePickerMonthV4.vue2.js

@@ -0,0 +1,40 @@
+ import "../../../DatePickerMonthV4.vue_vue_type_style_index_0_scoped_11288104_lang.css"; import { defineComponent as u, openBlock as s, createBlock as m, unref as e } from "vue";
+import c from "../../dateRange/v4/CalendarMonthV4.vue.js";
+import { dataPickerMonthCommon as h } from "../common/DatePickerMonth.common.js";
+const v = /* @__PURE__ */ u({
+  __name: "DatePickerMonthV4",
+  props: {
+    uniqueId: { default: Date.now() },
+    modelValue: { default: null },
+    includeToday: { type: Boolean, default: !0 },
+    allowFutureDates: { type: Boolean, default: !1 },
+    testId: { default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(a, { emit: n }) {
+    const o = a, {
+      monthData: t,
+      handleNavigation: d,
+      navigation: i,
+      selectedRange: l,
+      handleSelection: r
+    } = h(o, n);
+    return (f, p) => (s(), m(c, {
+      id: a.uniqueId,
+      type: "month",
+      class: "date-picker-month",
+      range: e(l),
+      navigation: e(i),
+      year: e(t).year,
+      days: e(t).days,
+      weeks: e(t).weeks,
+      month: e(t).month,
+      "test-id": a.testId,
+      onSelectionChanged: e(r),
+      onNavigation: e(d)
+    }, null, 8, ["id", "range", "navigation", "year", "days", "weeks", "month", "test-id", "onSelectionChanged", "onNavigation"]));
+  }
+});
+export {
+  v as default
+};

package/components/datePicker/v4/DatePickerV4.vue.js

@@ -0,0 +1,7 @@
+import e from "./DatePickerV4.vue2.js";
+/* empty css                   */import o from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../DatePickerV4.vue_vue_type_style_index_0_scoped_a5757773_lang.css"; //*');
+const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-a5757773"]]);
+export {
+  a as default
+};

package/components/datePicker/v4/DatePickerV4.vue2.js

@@ -0,0 +1,73 @@
+ import "../../../DatePickerV4.vue_vue_type_style_index_0_scoped_a5757773_lang.css"; import { defineComponent as D, openBlock as l, createElementBlock as n, unref as e, createElementVNode as g, renderSlot as h, createVNode as r, withCtx as v, createTextVNode as y, toDisplayString as I, normalizeClass as P, createCommentVNode as w } from "vue";
+import C from "./DatePickerMonthV4.vue.js";
+import { DatePickerTestIdModifiers as i } from "../../../testids/index.js";
+import { dataPickerCommon as $ } from "../common/DatePicker.common.js";
+import M from "../../button/v4/ButtonV4.vue.js";
+import "../../button/v4/IconButtonV4.vue.js";
+const N = ["id", "data-testid"], b = /* @__PURE__ */ D({
+  __name: "DatePickerV4",
+  props: {
+    uniqueId: { default: Date.now() },
+    modelValue: { default: null },
+    allowFutureDates: { type: Boolean, default: !1 },
+    dateFormat: { default: "MMM dd, yyyy" },
+    placeholder: { default: "" },
+    testId: { default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(t, { emit: u }) {
+    const m = t, {
+      toggle: s,
+      updateValue: c,
+      isOpen: f,
+      componentId: a,
+      formattedValue: d,
+      nearTheEdge: p,
+      valueAsDate: k
+    } = $(m, u);
+    return (V, o) => (l(), n("div", {
+      id: e(a),
+      ref: "datePicker",
+      class: "date-picker",
+      "data-testid": `${t.testId}-${e(i).WRAPPER}`
+    }, [
+      g("div", {
+        ref: "buttonRef",
+        onClick: o[0] || (o[0] = (x) => e(s)())
+      }, [
+        h(V.$slots, "default", { formattedDate: e(d) }, () => [
+          r(e(M), {
+            "start-icon-name": "calendar-blank",
+            "end-icon-name": "caret-down",
+            color: "default",
+            variant: "outlined",
+            style: { marginRight: "10px" },
+            content: t.placeholder,
+            "data-testid": `${t.testId}-${e(i).INPUT}`
+          }, {
+            default: v(() => [
+              y(I(e(d)), 1)
+            ]),
+            _: 1
+          }, 8, ["content", "data-testid"])
+        ], !0)
+      ], 512),
+      e(f) ? (l(), n("div", {
+        key: 0,
+        ref: "popup",
+        class: P(["date-picker-popup", { "align-right": e(p) }])
+      }, [
+        r(C, {
+          id: e(a) + "-month",
+          "model-value": e(k),
+          "allow-future-dates": t.allowFutureDates,
+          "test-id": t.testId,
+          "onUpdate:modelValue": e(c)
+        }, null, 8, ["id", "model-value", "allow-future-dates", "test-id", "onUpdate:modelValue"])
+      ], 2)) : w("", !0)
+    ], 8, N));
+  }
+});
+export {
+  b as default
+};

package/components/datePicker/v4/index.js

@@ -0,0 +1,6 @@
+import e from "./DatePickerV4.vue.js";
+const t = () => [e];
+export {
+  e as DatePicker,
+  t as DatePickerTypes
+};

package/components/dateRange/common/consts.common.js

@@ -2,7 +2,7 @@ const a = {
   date: "Days",
   week: "Weeks",
   month: "Months"
-}, s = "Date range is in an invalid format", t = "Please select a date range", d = {
+}, s = "Date range is in an invalid format", d = "Please select a date range", t = {
   week: "For more than 52 weeks switch to months"
 }, n = "previous", e = "next", i = {
   date: [
@@ -11,8 +11,7 @@ const a = {
     { name: "Last 7 Days", id: "last7days", numid: 3 },
     { name: "Last 14 Days", id: "last14days", numid: 4 },
     { name: "Last 30 Days", id: "last30days", numid: 7 },
-    { name: "This Month", id: "thisMonth", numid: 5 },
-    { name: "Last Month", id: "lastMonth", numid: 6 }
+    { name: "This Month", id: "thisMonth", numid: 5 }
   ],
   "date1-7-14-30-90": [
     { name: "Today", id: "today", numid: 1 },
@@ -20,7 +19,6 @@ const a = {
     { name: "Last 7 Days", id: "last7days", numid: 3 },
     { name: "Last 14 Days", id: "last14days", numid: 4 },
     { name: "This Month", id: "thisMonth", numid: 5 },
-    { name: "Last Month", id: "lastMonth", numid: 6 },
     { name: "Last 30 Days", id: "last30days", numid: 7 },
     { name: "Last 90 Days", id: "last90days", numid: 9 }
   ],
@@ -43,7 +41,6 @@ const a = {
     { name: "Last 7 Days", id: "last7days", numid: 3 },
     { name: "Last 14 Days", id: "last14days", numid: 4 },
     { name: "This Month", id: "thisMonth", numid: 5 },
-    { name: "Last Month", id: "lastMonth", numid: 6 },
     { name: "Last 30 Days", id: "last30days", numid: 7 }
   ],
   dateWithoutLastMonth: [
@@ -51,8 +48,7 @@ const a = {
     { name: "Yesterday", id: "yesterday", numid: 2 },
     { name: "Last 7 Days", id: "last7days", numid: 3 },
     { name: "Last 14 Days", id: "last14days", numid: 4 },
-    { name: "Last 30 Days", id: "last30days", numid: 5 },
-    { name: "This Month", id: "thisMonth", numid: 6 }
+    { name: "Last 30 Days", id: "last30days", numid: 5 }
   ],
   week: [
     { name: "Last 4 Weeks", id: "last4weeks", numid: 1 },
@@ -70,8 +66,8 @@ const a = {
 };
 export {
   s as formatError,
-  t as mandatoryValuesError,
-  d as messagePerType,
+  d as mandatoryValuesError,
+  t as messagePerType,
   e as navigateNext,
   n as navigatePrev,
   i as presetsList,

package/components/dateRange/v4/CalendarMonthV4.vue.js

@@ -0,0 +1,7 @@
+import o from "./CalendarMonthV4.vue2.js";
+/* empty css                      */import e from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../CalendarMonthV4.vue_vue_type_style_index_0_scoped_a80364bd_lang.css"; //*');
+const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-a80364bd"]]);
+export {
+  s as default
+};

package/components/dateRange/v4/CalendarMonthV4.vue2.js

@@ -0,0 +1,133 @@
+ import "../../../CalendarMonthV4.vue_vue_type_style_index_0_scoped_a80364bd_lang.css"; import { defineComponent as z, openBlock as n, createElementBlock as i, unref as e, createElementVNode as s, createBlock as m, createCommentVNode as D, createVNode as E, withCtx as c, createTextVNode as v, toDisplayString as o, Fragment as f, renderList as $, normalizeClass as w } from "vue";
+import { navigatePrev as C, navigateNext as I } from "../common/consts.common.js";
+import "../../typography/Heading.vue.js";
+import N from "../../typography/Text.vue.js";
+import { calendarMonthCommon as B } from "../common/CalendarMonth.common.js";
+import "../../button/v4/ButtonV4.vue.js";
+import T from "../../button/v4/IconButtonV4.vue.js";
+import H from "../../typography/v4/Typography.vue.js";
+import { CalendarMonthTestIdModifiers as d } from "../../../testids/index.js";
+const S = ["id", "data-testid"], b = ["data-testid"], F = ["data-testid"], O = ["data-testid"], Z = /* @__PURE__ */ z({
+  __name: "CalendarMonthV4",
+  props: {
+    year: null,
+    days: null,
+    weeks: null,
+    month: null,
+    navigation: null,
+    range: null,
+    type: null,
+    id: { default: Date.now() },
+    allowedDays: { default: null },
+    maxAllowedDate: { default: null },
+    testId: { default: "" }
+  },
+  emits: ["selectionChanged", "navigation"],
+  setup(t, { emit: x }) {
+    const A = t, {
+      isEndDay: y,
+      isStartDay: g,
+      navigate: h,
+      selectDay: p,
+      monthName: M,
+      dayNames: R,
+      selectedDaysMap: k,
+      inBetweenMap: P
+    } = B(A, x);
+    return (Y, r) => (n(), i("div", {
+      id: "datepickerCalendar" + t.id,
+      class: "calendar-month",
+      "data-testid": `${t.testId}-${e(d).WRAPPER}`
+    }, [
+      s("span", {
+        onClick: r[0] || (r[0] = (l) => e(h)(e(C)))
+      }, [
+        t.navigation === e(C) || t.navigation === "all" ? (n(), m(e(T), {
+          key: 0,
+          size: "medium",
+          class: "previous",
+          "data-testid": `${t.testId}-${e(d).PREVIOUS}`,
+          "icon-name": "caret-left"
+        }, null, 8, ["data-testid"])) : D("", !0)
+      ]),
+      s("span", {
+        onClick: r[1] || (r[1] = (l) => e(h)(e(I)))
+      }, [
+        t.navigation === e(I) || t.navigation === "all" ? (n(), m(e(T), {
+          key: 0,
+          class: "next",
+          size: "medium",
+          "icon-name": "caret-right",
+          "data-testid": `${t.testId}-${e(d).NEXT}`
+        }, null, 8, ["data-testid"])) : D("", !0)
+      ]),
+      s("div", {
+        class: "month-header",
+        "data-testid": `${t.testId}-${e(d).MONTH_HEADER}`
+      }, [
+        E(e(H), {
+          variant: "h4",
+          "test-id": `${t.testId}-${e(d).MONTH_HEADER_TEXT}`
+        }, {
+          default: c(() => [
+            v(o(e(M)) + " " + o(t.year), 1)
+          ]),
+          _: 1
+        }, 8, ["test-id"]),
+        s("div", {
+          class: "days-header",
+          "data-testid": `${t.testId}-${e(d).DAYS_HEADER}`
+        }, [
+          (n(!0), i(f, null, $(e(R), (l, u) => (n(), m(e(N), {
+            key: u,
+            size: "xs"
+          }, {
+            default: c(() => [
+              v(o(l), 1)
+            ]),
+            _: 2
+          }, 1024))), 128))
+        ], 8, F)
+      ], 8, b),
+      s("div", {
+        class: "days-wrapper",
+        "data-testid": `${t.testId}-${e(d).DAYS_WRAPPER}`
+      }, [
+        (n(!0), i(f, null, $(t.weeks, (l, u) => (n(), i("div", { key: u }, [
+          (n(!0), i(f, null, $(l, (a, V) => (n(), i("span", {
+            key: V,
+            class: w(["date-wrapper", {
+              "selected-day-wrapper": e(k)[a.value],
+              "start-day-wrapper": e(g)(a),
+              "end-day-wrapper": e(y)(a)
+            }])
+          }, [
+            E(e(N), {
+              class: w(["day", {
+                "selected-day": e(k)[a.value],
+                "selected-day-between": e(P)[a.value],
+                today: a.isToday,
+                "disabled-day": a.isFuture || a.disabled,
+                "non-day": a.value === 0,
+                "start-day": e(g)(a),
+                "end-day": e(y)(a)
+              }]),
+              size: "sm",
+              strong: "",
+              "data-testid": `${t.testId}-${e(d).DAY}-${a.value}`,
+              onClick: (W) => a.disabled || a.isFuture || e(p)(a)
+            }, {
+              default: c(() => [
+                v(o(a.value), 1)
+              ]),
+              _: 2
+            }, 1032, ["class", "data-testid", "onClick"])
+          ], 2))), 128))
+        ]))), 128))
+      ], 8, O)
+    ], 8, S));
+  }
+});
+export {
+  Z as default
+};

package/components/dateRange/v4/DateRangeV4.vue.js

@@ -0,0 +1,7 @@
+import e from "./DateRangeV4.vue2.js";
+/* empty css                  */import o from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../DateRangeV4.vue_vue_type_style_index_0_scoped_590bb1db_lang.css"; //*');
+const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-590bb1db"]]);
+export {
+  a as default
+};

package/components/dateRange/v4/DateRangeV4.vue2.js

@@ -0,0 +1,251 @@
+ import "../../../DateRangeV4.vue_vue_type_style_index_0_scoped_590bb1db_lang.css"; import { defineComponent as Q, resolveComponent as X, openBlock as s, createElementBlock as n, unref as e, normalizeClass as o, createElementVNode as d, renderSlot as D, createVNode as l, withCtx as r, createTextVNode as c, toDisplayString as y, withDirectives as f, Fragment as h, renderList as v, createCommentVNode as x, vShow as k, normalizeStyle as Z, setBlockTracking as b } from "vue";
+import _ from "./CalendarMonthV4.vue.js";
+import { typeToName as ee, messagePerType as te } from "../common/consts.common.js";
+import C from "../../button/v4/ButtonV4.vue.js";
+import "../../button/v4/IconButtonV4.vue.js";
+import { DateRangeTestIdModifiers as i, DatePickerTestIdModifiers as ae } from "../../../testids/index.js";
+import { dateRangeCommon as de } from "../common/DateRange.common.js";
+import R from "../../typography/v4/Typography.vue.js";
+const se = ["id", "data-testid"], ne = ["data-testid"], ie = ["id", "data-testid"], le = {
+  key: 0,
+  class: "type-picker"
+}, oe = ["onClick"], re = ["data-testid"], ce = ["id"], ue = ["id"], me = ["onClick"], ye = { class: "dropdown-rightTriangle" }, ge = ["data-testid"], pe = { class: "date-picker-calendar left-box" }, fe = { class: "buttons-cover" }, he = { class: "range" }, ve = { class: "text-container" }, De = /* @__PURE__ */ Q({
+  __name: "DateRangeV4",
+  props: {
+    range: null,
+    types: { default: () => ["date"] },
+    includeToday: { type: Boolean, default: !0 },
+    allowedDays: { default: null },
+    maxDaysInRange: { default: null },
+    datePresetList: { default: "date" },
+    regex: { default: () => /^(1[0-2]|0?[1-9])\/[\d]{1,2}\/[\d]{4}$/ },
+    dateFormat: { default: "mm/dd/yyyy" },
+    uniqueId: { default: Date.now() },
+    disabled: { type: Boolean, default: !1 },
+    initialType: { default: null },
+    openOnTop: { type: Boolean, default: !1 },
+    showPresets: { type: Boolean, default: !0 },
+    maxDate: { default: null },
+    testId: { default: "" }
+  },
+  emits: [
+    "rangeTypeChanged",
+    "currentDateChanged",
+    "rangeChanged",
+    "dateRangePresetNameChanged",
+    "opened",
+    "dismissed"
+  ],
+  setup(t, { emit: E }) {
+    const A = t, {
+      datePicker: M,
+      datePickerId: B,
+      getMaxAllowedDate: S,
+      selectedPreset: $,
+      displayError: q,
+      rangeType: p,
+      selectedRange: O,
+      placement: z,
+      currentDate: I,
+      error: L,
+      presets: V,
+      isOpen: w,
+      popup: U,
+      currentMonths: g,
+      displayedMonthsKeys: T,
+      changeType: G,
+      presetChanged: F,
+      apply: K,
+      getNavigation: W,
+      navigationCallback: Y,
+      selectionChanged: j,
+      toggle: N,
+      isCompact: H
+    } = de(A, E);
+    return (P, u) => {
+      const J = X("Text");
+      return s(), n("div", {
+        id: e(B),
+        ref_key: "datePicker",
+        ref: M,
+        class: o(["relative-wrap", { "date-range-disabled": t.disabled }]),
+        "data-testid": `${t.testId}-${e(i).WRAPPER}`
+      }, [
+        d("div", {
+          class: "date-range-field",
+          "data-testid": `${t.testId}-${e(i).TRIGGER}`,
+          onClick: u[0] || (u[0] = (a) => e(N)())
+        }, [
+          D(P.$slots, "field", {
+            currentDate: e(I),
+            isOpen: e(w)
+          }, () => [
+            l(e(C), {
+              "start-icon-name": "calendar-blank",
+              "end-icon-name": "caret-down",
+              color: "default",
+              variant: "outlined",
+              style: { marginRight: "10px" },
+              "data-testid": `${t.testId}-${e(ae).INPUT}`
+            }, {
+              default: r(() => [
+                c(y(e(I)), 1)
+              ]),
+              _: 1
+            }, 8, ["data-testid"])
+          ], !0)
+        ], 8, ne),
+        f(d("div", {
+          id: "datepickerPopup" + t.uniqueId,
+          ref_key: "popup",
+          ref: U,
+          class: o(["pop-up", [
+            e(z),
+            t.openOnTop ? "open-on-top" : "",
+            t.showPresets ? "" : "hide-presets"
+          ]]),
+          "data-testid": `${t.testId}-${e(i).CONTAINER}`
+        }, [
+          t.types.length > 1 ? (s(), n("div", le, [
+            (s(!0), n(h, null, v(t.types, (a) => (s(), n("span", {
+              key: a,
+              class: o(["range-type", { "selected-range-type": e(p) === a }]),
+              onClick: (m) => e(G)(a, !0)
+            }, [
+              l(J, { size: "sm" }, {
+                default: r(() => [
+                  c(y(e(ee)[a]), 1)
+                ]),
+                _: 2
+              }, 1024)
+            ], 10, oe))), 128))
+          ])) : x("", !0),
+          d("div", {
+            class: o(["flex", { "pop-up-content": t.types.length > 1 }])
+          }, [
+            t.showPresets ? (s(), n("div", {
+              key: 0,
+              class: "date-picker-menu",
+              "data-testid": `${t.testId}-${e(i).MENU}`
+            }, [
+              d("div", {
+                id: "presets" + t.uniqueId,
+                class: "preset-dropdown"
+              }, [
+                d("ul", {
+                  id: "customDropDownList" + t.uniqueId
+                }, [
+                  (s(!0), n(h, null, v(e(V), (a) => (s(), n("li", {
+                    key: a.id,
+                    class: o({
+                      "selected-preset-container": e($) === a.id
+                    })
+                  }, [
+                    d("div", {
+                      class: o([{ "selected-preset": e($) === a.id }, "preset-element"]),
+                      onClick: (m) => e(F)(a)
+                    }, [
+                      l(e(R), {
+                        size: "xs",
+                        "data-testid": `${t.testId}-${e(i).MENU}-${a.id}`
+                      }, {
+                        default: r(() => [
+                          c(y(a.name), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["data-testid"])
+                    ], 10, me),
+                    f(d("div", ye, null, 512), [
+                      [k, a.id === "custom"]
+                    ])
+                  ], 2))), 128))
+                ], 8, ue)
+              ], 8, ce),
+              d("div", {
+                class: "type-message",
+                "data-testid": `${t.testId}-${e(i).MESSAGE}`
+              }, y(e(te)[e(p)]), 9, ge)
+            ], 8, re)) : x("", !0),
+            d("div", {
+              class: "calendar-wrap",
+              style: Z({ height: e(H) ? "336px" : "372px" })
+            }, [
+              d("div", pe, [
+                (s(!0), n(h, null, v(e(T), (a, m) => (s(), n("div", { key: a }, [
+                  l(_, {
+                    id: t.uniqueId,
+                    navigation: e(W)(
+                      m === 0,
+                      m === e(T).length - 1
+                    ),
+                    year: e(g)[a].parsedMonth.year,
+                    days: e(g)[a].parsedMonth.days,
+                    weeks: e(g)[a].parsedMonth.weeks,
+                    month: e(g)[a].parsedMonth.month,
+                    range: e(O),
+                    type: e(p),
+                    "allowed-days": t.allowedDays,
+                    "max-allowed-date": e(S),
+                    "test-id": `${t.testId}-${m}`,
+                    onSelectionChanged: e(j),
+                    onNavigation: e(Y)
+                  }, null, 8, ["id", "navigation", "year", "days", "weeks", "month", "range", "type", "allowed-days", "max-allowed-date", "test-id", "onSelectionChanged", "onNavigation"])
+                ]))), 128)),
+                d("div", fe, [
+                  d("div", he, [
+                    D(P.$slots, "footer", {}, void 0, !0)
+                  ]),
+                  d("div", ve, [
+                    l(e(R), null, {
+                      default: r(() => [
+                        c("All dates are in UTC")
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  f(d("div", { class: "error" }, y(e(L)), 513), [
+                    [k, e(q)]
+                  ]),
+                  u[1] || (b(-1), u[1] = d("div", { class: "buttons" }, [
+                    l(e(C), {
+                      id: "button-ok" + t.uniqueId,
+                      size: "small",
+                      class: "primary button small",
+                      "data-testid": `${t.testId}-${e(i).ACTION_APPLY}`,
+                      onClick: (a) => e(K)()
+                    }, {
+                      default: r(() => [
+                        c(" Apply ")
+                      ]),
+                      _: 1
+                    }, 8, ["id", "data-testid", "onClick"]),
+                    l(e(C), {
+                      id: "button-cancel" + t.uniqueId,
+                      size: "small",
+                      theme: "third",
+                      color: "default",
+                      variant: "outlined",
+                      class: "button small border third transparent",
+                      "data-testid": `${t.testId}-${e(i).ACTION_CANCEL}`,
+                      onClick: (a) => e(N)()
+                    }, {
+                      default: r(() => [
+                        c(" Cancel ")
+                      ]),
+                      _: 1
+                    }, 8, ["id", "data-testid", "onClick"])
+                  ]), b(1), u[1])
+                ])
+              ])
+            ], 4)
+          ], 2)
+        ], 10, ie), [
+          [k, e(w)]
+        ])
+      ], 10, se);
+    };
+  }
+});
+export {
+  De as default
+};

package/components/dateRange/v4/index.js

@@ -0,0 +1,6 @@
+import e from "./DateRangeV4.vue.js";
+const a = () => [e];
+export {
+  e as DateRange,
+  a as DateRangeTypes
+};