@ironsource/shared-ui 2.1.0-rc.2 → 2.1.0

package/components/toggle/v4/ToggleV4.vue2.js

@@ -0,0 +1,95 @@
+ import "../../../ToggleV4.vue_vue_type_style_index_0_scoped_ef31fecc_lang.css"; import { defineComponent as k, computed as h, openBlock as i, createElementBlock as m, normalizeClass as f, createElementVNode as s, mergeProps as d, unref as t, createCommentVNode as l, renderSlot as g, createBlock as u, withCtx as v, createTextVNode as y, toDisplayString as b, createVNode as V } from "vue";
+import E from "../../typography/v4/Typography.vue.js";
+import { ToggleTestIdModifiers as a } from "../../../testids/index.js";
+import B from "../../shared/FieldHelpText.vue.js";
+import { useTestIdAttrs as H } from "../../../utils/testIds.js";
+import I from "../../icon/v4/IconV4.vue.js";
+import D from "../../tooltip/v4/TooltipV4.vue.js";
+const L = { class: "toggle-head" }, P = ["disabled", "checked"], F = /* @__PURE__ */ k({
+  __name: "ToggleV4",
+  props: {
+    modelValue: { type: Boolean },
+    text: { default: void 0 },
+    activeText: { default: void 0 },
+    inactiveText: { default: void 0 },
+    hoverHelpText: { default: "" },
+    hoverHelpTextPlacement: { default: "top" },
+    feedbackText: { default: "" },
+    feedbackVariant: { default: null },
+    isDisabled: { type: Boolean, default: !1 },
+    isLoading: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    size: { default: "small" },
+    testId: { default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: x }) {
+    const c = e, T = () => {
+      r.value || x("update:modelValue", !c.modelValue);
+    }, o = H(c.testId, a), r = h(() => c.isDisabled || c.isLoading);
+    return (n, $) => (i(), m("div", {
+      class: f(["toggle", [`toggle--color-${e.color}`, `toggle--size-${e.size}`]])
+    }, [
+      s("div", d({ class: "toggle-wrap" }, t(o)[t(a).WRAPPER]), [
+        s("div", d({
+          class: ["toggle-body", {
+            "toggle-active": e.modelValue,
+            "toggle-disabled": t(r)
+          }]
+        }, t(o)[t(a).BODY], { onClick: T }), [
+          s("div", L, [
+            e.isLoading ? (i(), m("span", {
+              key: 0,
+              class: f(["loader", { "loader-active": e.modelValue }])
+            }, null, 2)) : l("", !0)
+          ])
+        ], 16),
+        s("input", d({
+          type: "checkbox",
+          class: "toggle-checkbox",
+          disabled: t(r),
+          checked: e.modelValue
+        }, t(o)[t(a).FIELD]), null, 16, P),
+        n.$slots["icon-left"] ? g(n.$slots, "icon-left", { key: 0 }, void 0, !0) : l("", !0),
+        e.text || e.activeText || e.inactiveText ? (i(), u(t(E), d({
+          key: 1,
+          variant: "body1",
+          "is-truncated": "",
+          class: "toggle-text"
+        }, t(o)[t(a).TEXT]), {
+          default: v(() => [
+            y(b(e.text ?? (e.modelValue ? e.activeText : e.inactiveText)), 1)
+          ]),
+          _: 1
+        }, 16)) : l("", !0),
+        n.$slots["icon-right"] ? g(n.$slots, "icon-right", { key: 2 }, void 0, !0) : l("", !0),
+        e.hoverHelpText ? (i(), u(t(D), {
+          key: 3,
+          triggers: ["hover"],
+          text: e.hoverHelpText,
+          placement: e.hoverHelpTextPlacement
+        }, {
+          default: v(() => [
+            V(t(I), {
+              class: "info-icon",
+              name: "question",
+              type: "fill",
+              size: "1rem"
+            })
+          ]),
+          _: 1
+        }, 8, ["text", "placement"])) : l("", !0)
+      ], 16),
+      e.feedbackText ? (i(), u(B, d({
+        key: 0,
+        class: "feedback-text",
+        text: e.feedbackText,
+        variant: e.feedbackVariant,
+        "show-icon": !1
+      }, t(o)[t(a).HELPER_TEXT]), null, 16, ["text", "variant"])) : l("", !0)
+    ], 2));
+  }
+});
+export {
+  F as default
+};

package/components/tooltip/v3/TextWithTitleContent.vue.js

@@ -0,0 +1,7 @@
+import t from "./TextWithTitleContent.vue2.js";
+/* empty css                           */import e from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../TextWithTitleContent.vue_vue_type_style_index_0_scoped_13b5aebd_lang.css"; //*');
+const i = /* @__PURE__ */ e(t, [["__scopeId", "data-v-13b5aebd"]]);
+export {
+  i as default
+};

package/components/tooltip/v3/TextWithTitleContent.vue2.js

@@ -0,0 +1,46 @@
+ import "../../../TextWithTitleContent.vue_vue_type_style_index_0_scoped_13b5aebd_lang.css"; import { defineComponent as l, openBlock as f, createElementBlock as m, createElementVNode as o, createVNode as n, unref as t, withCtx as d, createTextVNode as i, toDisplayString as r } from "vue";
+import "../../typography/Heading.vue.js";
+import a from "../../typography/Text.vue.js";
+import { TooltipTestIdModifiers as c } from "../../../testids/index.js";
+const u = { class: "content-wrap" }, p = { class: "content-header" }, T = { class: "content-body" }, g = /* @__PURE__ */ l({
+  __name: "TextWithTitleContent",
+  props: {
+    text: null,
+    header: null,
+    testId: { default: "" }
+  },
+  setup(e) {
+    const s = e;
+    return (_, h) => (f(), m("div", u, [
+      o("div", p, [
+        n(t(a), {
+          size: "md",
+          "is-truncated": !1,
+          strong: "",
+          "test-id": `${s.testId}-${t(c).TEXT}`
+        }, {
+          default: d(() => [
+            i(r(e.header), 1)
+          ]),
+          _: 1
+        }, 8, ["test-id"])
+      ]),
+      o("div", T, [
+        n(t(a), {
+          size: "xs",
+          "is-truncated": !1,
+          strong: "",
+          "test-id": `${s.testId}-${t(c).TEXT}`
+        }, {
+          default: d(() => [
+            i(r(e.text), 1)
+          ]),
+          _: 1
+        }, 8, ["test-id"])
+      ])
+    ]));
+  }
+});
+export {
+  g as default
+};

package/components/tooltip/v3/Tooltip.vue.js

@@ -0,0 +1,8 @@
+import o from "./Tooltip.vue2.js";
+/* empty css              *//* empty css              */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../Tooltip.vue_vue_type_style_index_0_scoped_9020a179_lang.css"; //*');
+// import "../../../Tooltip.vue_vue_type_style_index_1_lang.css";  //');
+const l = /* @__PURE__ */ _(o, [["__scopeId", "data-v-9020a179"]]);
+export {
+  l as default
+};

package/components/tooltip/v3/Tooltip.vue2.js

@@ -0,0 +1,87 @@
+ import "../../../Tooltip.vue_vue_type_style_index_0_scoped_9020a179_lang.css";  import "../../../Tooltip.vue_vue_type_style_index_1_lang.css";  import { defineComponent as y, ref as s, useSlots as g, watch as h, openBlock as r, createBlock as n, unref as a, mergeProps as w, withCtx as u, createElementVNode as m, renderSlot as p, createTextVNode as S, toDisplayString as k, nextTick as $ } from "vue";
+import I from "./TextWithTitleContent.vue.js";
+import "../../typography/Heading.vue.js";
+import W from "../../typography/Text.vue.js";
+import { Tooltip as b } from "floating-vue";
+import { TooltipTestIdModifiers as v } from "../../../testids/index.js";
+const B = { class: "light-theme-v4" }, O = /* @__PURE__ */ y({
+  __name: "Tooltip",
+  props: {
+    text: { default: null },
+    header: { default: null },
+    delay: { default: 0 },
+    triggers: { default: () => ["hover"] },
+    forceShowWithTruncate: { type: Boolean, default: !1 },
+    placement: { default: "top" },
+    theme: { default: "default" },
+    disabled: { type: Boolean, default: !1 },
+    testId: { default: "" }
+  },
+  setup(e) {
+    const o = e, i = s(!1), l = s(null), d = s(null), x = g(), c = () => i.value ? o.text : null, f = async () => {
+      if (i.value = !0, await $(), !o.forceShowWithTruncate) {
+        const t = d.value?.children && d.value.children[0];
+        (t && window.getComputedStyle(t, null).getPropertyValue("text-overflow")) === "ellipsis" && (i.value = t.offsetWidth < t.scrollWidth);
+      }
+    };
+    return h(
+      () => o.text,
+      async () => {
+        await f(), l.value = c();
+      },
+      { immediate: !0 }
+    ), h(
+      () => x.default,
+      async () => {
+        await f(), l.value = c();
+      },
+      { immediate: !0 }
+    ), (t, T) => (r(), n(a(b), w(t.$props, {
+      theme: e.theme,
+      "no-auto-focus": "",
+      triggers: e.triggers,
+      delay: { show: e.delay, hide: 0 },
+      placement: e.placement,
+      disabled: e.disabled || e.text && !l.value,
+      "data-testid": `${e.testId}-${a(v).TRIGGER}`,
+      "popper-class": [e.theme],
+      "auto-hide": ""
+    }), {
+      popper: u(() => [
+        m("div", B, [
+          p(t.$slots, "tooltip", { text: l.value }, () => [
+            e.header ? (r(), n(I, {
+              key: 1,
+              text: e.text,
+              header: e.header
+            }, null, 8, ["text", "header"])) : (r(), n(a(W), {
+              key: 0,
+              size: "sm",
+              "is-truncated": !1,
+              strong: "",
+              "test-id": `${e.testId}-${a(v).TEXT}`
+            }, {
+              default: u(() => [
+                S(k(l.value), 1)
+              ]),
+              _: 1
+            }, 8, ["test-id"]))
+          ], !0)
+        ])
+      ]),
+      default: u(() => [
+        m("div", {
+          ref_key: "container",
+          ref: d,
+          class: "container"
+        }, [
+          p(t.$slots, "default", {}, void 0, !0)
+        ], 512)
+      ]),
+      _: 3
+    }, 16, ["theme", "triggers", "delay", "placement", "disabled", "data-testid", "popper-class"]));
+  }
+});
+export {
+  O as default
+};

package/components/tooltip/v4/TextWithTitleContent.vue.js

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

package/components/tooltip/v4/TextWithTitleContent.vue2.js

@@ -0,0 +1,36 @@
+ import "../../../TextWithTitleContent.vue_vue_type_style_index_0_scoped_e5c9fa36_lang.css"; import { defineComponent as p, openBlock as m, createElementBlock as f, createElementVNode as n, createVNode as s, unref as t, mergeProps as a, withCtx as d, createTextVNode as c, toDisplayString as i } from "vue";
+import l from "../../typography/v4/Typography.vue.js";
+import { TooltipTestIdModifiers as o } from "../../../testids/index.js";
+import { useTestIdAttrs as h } from "../../../utils/testIds.js";
+const u = { class: "content-wrap" }, _ = { class: "content-header" }, T = { class: "content-body" }, C = /* @__PURE__ */ p({
+  __name: "TextWithTitleContent",
+  props: {
+    text: null,
+    header: null,
+    testId: { default: "" }
+  },
+  setup(e) {
+    const r = h(e.testId, o);
+    return (v, y) => (m(), f("div", u, [
+      n("div", _, [
+        s(t(l), a({ variant: "h5" }, t(r)[t(o).HEADER]), {
+          default: d(() => [
+            c(i(e.header), 1)
+          ]),
+          _: 1
+        }, 16)
+      ]),
+      n("div", T, [
+        s(t(l), a({ variant: "body2" }, t(r)[t(o).TEXT]), {
+          default: d(() => [
+            c(i(e.text), 1)
+          ]),
+          _: 1
+        }, 16)
+      ])
+    ]));
+  }
+});
+export {
+  C as default
+};

package/components/tooltip/v4/TooltipV4.vue.js

@@ -0,0 +1,8 @@
+import o from "./TooltipV4.vue2.js";
+/* empty css                *//* empty css                */import e from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../TooltipV4.vue_vue_type_style_index_0_scoped_58a19def_lang.css"; //*');
+// import "../../../TooltipV4.vue_vue_type_style_index_1_lang.css";  //');
+const l = /* @__PURE__ */ e(o, [["__scopeId", "data-v-58a19def"]]);
+export {
+  l as default
+};

package/components/tooltip/v4/TooltipV4.vue2.js

@@ -0,0 +1,67 @@
+ import "../../../TooltipV4.vue_vue_type_style_index_0_scoped_58a19def_lang.css";  import "../../../TooltipV4.vue_vue_type_style_index_1_lang.css";  import { defineComponent as c, openBlock as l, createBlock as d, unref as t, mergeProps as m, withCtx as r, renderSlot as f, createTextVNode as u, toDisplayString as h, createElementVNode as p } from "vue";
+import y from "./TextWithTitleContent.vue.js";
+import { Tooltip as T } from "floating-vue";
+import { TooltipTestIdModifiers as i } from "../../../testids/index.js";
+import g from "../../typography/v4/Typography.vue.js";
+import { tooltipCommon as x } from "../common/Tooltip.common.js";
+import { useTestIdAttrs as v } from "../../../utils/testIds.js";
+const I = {
+  ref: "container",
+  class: "container"
+}, $ = /* @__PURE__ */ c({
+  __name: "TooltipV4",
+  props: {
+    text: { default: null },
+    header: { default: null },
+    delay: { default: 0 },
+    triggers: { default: () => ["hover"] },
+    forceShowWithTruncate: { type: Boolean, default: !1 },
+    placement: { default: "auto" },
+    theme: { default: "light-theme-v4" },
+    disabled: { type: Boolean, default: !1 },
+    testId: { default: "" },
+    distance: { default: "10" }
+  },
+  setup(e) {
+    const n = e, { textForDisplay: o } = x(n), s = v(n.testId, i);
+    return (a, b) => (l(), d(t(T), m({ ...a.$props, ...t(s)[t(i).TRIGGER] }, {
+      theme: e.theme,
+      "no-auto-focus": "",
+      triggers: e.triggers,
+      delay: { show: e.delay, hide: 0 },
+      placement: e.placement,
+      disabled: e.disabled || e.text && !t(o),
+      "popper-class": [e.theme, e.placement, "v4-tooltip"],
+      class: ["v4-tooltip"],
+      distance: e.distance,
+      "auto-hide": ""
+    }), {
+      popper: r(() => [
+        f(a.$slots, "tooltip", { text: t(o) }, () => [
+          e.header ? (l(), d(y, {
+            key: 1,
+            text: e.text,
+            header: e.header
+          }, null, 8, ["text", "header"])) : (l(), d(t(g), m({
+            key: 0,
+            variant: "body2"
+          }, t(s)[t(i).TEXT]), {
+            default: r(() => [
+              u(h(t(o)), 1)
+            ]),
+            _: 1
+          }, 16))
+        ], !0)
+      ]),
+      default: r(() => [
+        p("div", I, [
+          f(a.$slots, "default", {}, void 0, !0)
+        ], 512)
+      ]),
+      _: 3
+    }, 16, ["theme", "triggers", "delay", "placement", "disabled", "popper-class", "distance"]));
+  }
+});
+export {
+  $ as default
+};

package/components/typography/Heading.vue.js

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

package/components/typography/Heading.vue2.js

@@ -0,0 +1,25 @@
+ import "../../Heading.vue_vue_type_style_index_0_scoped_19878c4b_lang.css"; import { defineComponent as r, computed as o, openBlock as s, createBlock as d, resolveDynamicComponent as i, unref as a, normalizeClass as c, withCtx as u, renderSlot as f } from "vue";
+import { HeaderTestIdModifiers as m } from "../../testids/index.js";
+const C = /* @__PURE__ */ r({
+  __name: "Heading",
+  props: {
+    isTruncated: { type: Boolean },
+    level: { default: "1" },
+    testId: { default: "" }
+  },
+  setup(e) {
+    const t = e, l = o(() => t.level === "label" ? "label" : `h${t.level}`);
+    return (n, p) => (s(), d(i(a(l)), {
+      class: c(["heading", { truncate: e.isTruncated }]),
+      "data-testid": `${e.testId}-${a(m).HEADER}`
+    }, {
+      default: u(() => [
+        f(n.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 8, ["class", "data-testid"]));
+  }
+});
+export {
+  C as default
+};

package/components/typography/Text.vue.js

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

package/components/typography/Text.vue2.js

@@ -0,0 +1,23 @@
+ import "../../Text.vue_vue_type_style_index_0_scoped_94bd409b_lang.css"; import { defineComponent as r, computed as a, openBlock as d, createElementBlock as i, normalizeClass as c, unref as e, renderSlot as l } from "vue";
+import { TextTestIdModifiers as u } from "../../testids/index.js";
+const m = ["data-testid"], x = /* @__PURE__ */ r({
+  __name: "Text",
+  props: {
+    isTruncated: { type: Boolean },
+    strong: { type: Boolean },
+    size: { default: "md" },
+    testId: { default: "" }
+  },
+  setup(t) {
+    const s = t, o = a(() => `text-size-${s.size}`);
+    return (n, f) => (d(), i("span", {
+      class: c(["text", { strong: t.strong, [e(o)]: !0, truncate: t.isTruncated }]),
+      "data-testid": `${t.testId}-${e(u).TEXT}`
+    }, [
+      l(n.$slots, "default", {}, void 0, !0)
+    ], 10, m));
+  }
+});
+export {
+  x as default
+};

package/components/typography/v4/Typography.vue.js

@@ -0,0 +1,7 @@
+import o from "./Typography.vue2.js";
+/* empty css                 */import p from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../Typography.vue_vue_type_style_index_0_scoped_94f65484_lang.css"; //*');
+const t = /* @__PURE__ */ p(o, [["__scopeId", "data-v-94f65484"]]);
+export {
+  t as default
+};

package/components/typography/v4/Typography.vue2.js

@@ -0,0 +1,58 @@
+ import "../../../Typography.vue_vue_type_style_index_0_scoped_94f65484_lang.css"; import { defineComponent as i, computed as a, openBlock as c, createBlock as f, resolveDynamicComponent as h, unref as n, normalizeClass as b, withCtx as u, renderSlot as d } from "vue";
+const v = /* @__PURE__ */ i({
+  __name: "Typography",
+  props: {
+    isTruncated: { type: Boolean },
+    variant: { default: "body1" }
+  },
+  setup(e) {
+    const t = e, o = {
+      title: "font-title",
+      h1: "font-heading-1",
+      h2: "font-heading-2",
+      h3: "font-heading-3",
+      h4: "font-heading-4",
+      h5: "font-heading-5",
+      h6: "font-heading-6",
+      body1: "font-body-1",
+      body2: "font-body-2",
+      subtitle1: "font-subtitle-1",
+      subtitle2: "font-subtitle-2",
+      button: "font-button",
+      caption: "font-caption",
+      tableLabel: "font-table-label",
+      inputLabel: "font-input-label",
+      tabLabel1: "font-tab-label1",
+      tabLabel2: "font-tab-label2",
+      chipLabel: "font-chip-label",
+      chart1: "font-chart-1",
+      chart2: "font-chart-2",
+      overline: "font-overline"
+    }, l = a(() => {
+      switch (t.variant) {
+        case "title":
+          return "h1";
+        case "h1":
+        case "h2":
+        case "h3":
+        case "h4":
+        case "h5":
+        case "h6":
+          return t.variant;
+        default:
+          return "span";
+      }
+    }), r = a(() => o[t.variant]);
+    return (s, p) => (c(), f(h(n(l)), {
+      class: b({ [n(r)]: !0, truncate: e.isTruncated })
+    }, {
+      default: u(() => [
+        d(s.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+});
+export {
+  v as default
+};

package/composables/useFormValidation.d.ts

@@ -0,0 +1,21 @@
+import * as yup from 'yup';
+import { Ref } from 'vue';
+export type ValidationErrorsType<T> = Partial<Record<keyof T, string>>;
+export type ValidationStateType<T> = {
+    isValid: boolean;
+    errors: ValidationErrorsType<T>;
+};
+export type FormValidationSchemaYupType<T> = Record<keyof T, yup.AnySchema<any, any, any, any>>;
+export type UseFormValidationType<T> = {
+    formState: T;
+    formValidationSchema: FormValidationSchemaYupType<T>;
+};
+export type UseFormValidationReponseType<T> = {
+    validationErrors: ValidationErrorsType<T>;
+    isValid: Ref<boolean>;
+    validate: (isReactive?: boolean) => void;
+};
+export declare const scrollToElementByClass: (elementClass: string, index?: number) => void;
+export declare const scrollToFirstInvalidElement: <T>(validationErrors: Partial<Record<keyof T, string>>) => void;
+export declare const yupValidation: <T>(schema: FormValidationSchemaYupType<T>, formState: T) => ValidationStateType<T>;
+export declare const useFormValidation: <T extends object>({ formState, formValidationSchema, }: UseFormValidationType<T>) => UseFormValidationReponseType<T>;

package/composables/useFormValidation.js

@@ -0,0 +1,44 @@
+import * as u from "yup";
+import { ref as d, reactive as f, watch as v } from "vue";
+const E = (e, r = 0) => {
+  try {
+    window.document.getElementsByClassName(e)[r].scrollIntoView({ behavior: "smooth" });
+  } catch {
+    return;
+  }
+}, h = (e) => {
+  const r = Object.keys(e)?.[0];
+  r && E(`form-field-${r}`);
+}, y = (e, r) => {
+  const o = u.object().shape(e);
+  try {
+    return o.validateSync(r, { abortEarly: !1 }), { isValid: !0, errors: {} };
+  } catch (i) {
+    return { isValid: !1, errors: i.inner.reduce((s, n) => (s[n.path] = n.message, s), {}) };
+  }
+}, b = ({
+  formState: e,
+  formValidationSchema: r
+}) => {
+  const o = d(!1), i = d(!0), t = f({}), s = (n) => {
+    const { isValid: l, errors: c } = y(r, e);
+    o.value = !0, i.value = l, Object.keys(t).forEach((a) => {
+      a && !c[a] && delete t[a];
+    }), Object.entries(c).forEach(([a, m]) => {
+      t[a] = m;
+    }), !l && !n && h(t);
+  };
+  return v(e, () => {
+    o.value && s(!0);
+  }), {
+    validationErrors: t,
+    isValid: i,
+    validate: s
+  };
+};
+export {
+  E as scrollToElementByClass,
+  h as scrollToFirstInvalidElement,
+  b as useFormValidation,
+  y as yupValidation
+};

package/index.d.ts

@@ -16817,6 +16817,7 @@ export default _default;
 export * from '@/components/textArea';
 export * from '@/composables/useToggle';
 export * from '@/composables/useSearch';
+export * from '@/composables/useFormValidation';
 export * from '@/components/dateRange';
 export * from '@/components/datePicker';
 export * from '@/components/banner';