@ironsource/shared-ui 2.1.3-rc.10 → 2.1.3-rc.12

package/AppHeader.vue_vue_type_style_index_0_scoped_f9d4e49d_lang.css

@@ -0,0 +1 @@
+.app-header[data-v-f9d4e49d]{display:flex}.app-header .image-container[data-v-f9d4e49d]{height:3rem;width:3rem;border-radius:.25rem}.app-header .image-container img[data-v-f9d4e49d]{min-width:100%;max-width:100%;max-height:100%;object-fit:cover;border-radius:.25rem}.app-header .icon-container[data-v-f9d4e49d]{color:var(--action-active);display:flex;align-items:center;padding:0 .5rem}.app-header .name-container .title[data-v-f9d4e49d]{color:var(--text-primary)}.app-header .name-container .inline-copy[data-v-f9d4e49d]{color:var(--text-secondary)}.app-header.size-small[data-v-f9d4e49d]{align-items:center}.app-header.size-small .image-container[data-v-f9d4e49d]{height:2rem;width:2rem;border-radius:.375rem}.app-header.size-small .image-container img[data-v-f9d4e49d]{border-radius:.375rem}.app-header.size-small .icon-container[data-v-f9d4e49d]{padding:0 .25rem}.app-header.size-small .name-container[data-v-f9d4e49d]{display:flex}

package/Autocomplete.vue_vue_type_style_index_0_scoped_e36c9442_lang.css

@@ -0,0 +1 @@
+div[data-v-e36c9442]{display:block}

package/DataGrid.vue_vue_type_style_index_0_scoped_9b108af3_lang.css

@@ -0,0 +1 @@
+.sticky[data-v-9b108af3]{position:sticky}.table-container[data-v-9b108af3]{width:100%;position:relative;display:flex;flex-direction:column}.table-header[data-v-9b108af3]{display:flex;align-items:center;height:calc(var(--spacing-800) - 1px);border-bottom:1px solid var(--common-divider);background-color:var(--background-paper-elevation-0);position:sticky;left:0;padding:var(--spacing-300)}.table-header .table-title[data-v-9b108af3]{display:flex;flex:1;align-items:center;justify-content:flex-start;height:100%;color:var(--text-primary)}.table-header .table-header-right[data-v-9b108af3]{display:flex;align-items:center;height:100%}.table-header .search-wrapper[data-v-9b108af3]{width:13.75rem}.table-header.isStickyHeader[data-v-9b108af3]{z-index:calc(var(--634e78fd) + 3);top:0}.table-head-container[data-v-9b108af3]{display:flex;align-items:center;white-space:nowrap;color:var(--text-primary)}.table-footer[data-v-9b108af3]{color:var(--text-primary);background-color:var(--background-paper-elevation-0);padding:0 var(--spacing-300);display:flex;align-items:center;min-height:var(--spacing-600);border:1px solid var(--common-divider);border-radius:var(--border-radius-md);border-top-right-radius:0;border-top-left-radius:0}.table-body-wrapper[data-v-9b108af3]{display:inline-table}.table-header-actions[data-v-9b108af3]{margin-left:var(--spacing-100);display:flex;align-items:center}.table-row[data-v-9b108af3]{position:relative}.table-row.loading[data-v-9b108af3]{opacity:.7}.table-row:not(.expanded):last-child>td[data-v-9b108af3]{border-bottom:none}.table-row.expanded:last-child>.expanded-row[data-v-9b108af3]{border-bottom:none}.expanded-row[data-v-9b108af3]{grid-column:var(--279a8c9e);border-bottom:1px solid var(--common-divider);background-color:var(--background-default)}table[data-v-9b108af3]{position:relative;display:block;overflow:auto;background:var(--background-paper-elevation-0);border:1px solid var(--common-divider);color:var(--text-primary);text-align:left;table-layout:fixed;width:100%;max-height:100%;border-radius:var(--border-radius-md)}table.hasFooter[data-v-9b108af3]{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}table td[data-v-9b108af3],table th[data-v-9b108af3]{line-height:normal;padding:0 var(--spacing-200)}table td[data-v-9b108af3]:first-of-type,table th[data-v-9b108af3]:first-of-type{padding-left:var(--spacing-300)}table td[data-v-9b108af3]:last-of-type,table th[data-v-9b108af3]:last-of-type{padding-right:var(--spacing-300)}table td.expand-toggle-cell[data-v-9b108af3],table th.expand-toggle-cell[data-v-9b108af3]{padding-left:var(--spacing-150);padding-right:var(--spacing-75)}table>thead[data-v-9b108af3]{border-bottom:none;z-index:calc(var(--634e78fd) + 1);display:inline-table;min-width:100%}table>thead>tr[data-v-9b108af3]{color:var(--text-primary);border-bottom:1px solid var(--common-divider);height:var(--spacing-500);display:grid;grid-template-columns:var(--7237246a)}table>thead>tr>th[data-v-9b108af3]{background:var(--background-paper-elevation-0);width:100%;display:flex;align-items:center;cursor:default}table>thead>tr>th.bordered[data-v-9b108af3]{border-right:1px solid var(--common-divider)}table>thead>tr>th.bordered.isStickyRight[data-v-9b108af3]{border-right:none;border-left:1px solid var(--common-divider)}table>thead>tr>th.isTextRight[data-v-9b108af3]{justify-content:flex-end}table>thead>tr>th.isSortable[data-v-9b108af3]{cursor:pointer}table>thead.sticky[data-v-9b108af3]{position:sticky;top:0;background:white}table>thead.isStickyHeader[data-v-9b108af3]{z-index:calc(var(--634e78fd) + 2);top:calc(var(--spacing-800) - 1px)}table>tbody[data-v-9b108af3]{display:block}table>tbody>*>tr[data-v-9b108af3]{background-color:var(--background-default);min-height:var(--79cce51c);height:auto;display:grid;align-items:center;grid-template-columns:var(--7237246a)}table>tbody>*>tr:nth-of-type(2n)>td[data-v-9b108af3]{background-color:var(--background-default)}table>tbody>*>tr:hover:not(.loading)>td[data-v-9b108af3],table>tbody>*>tr.activeMenu>td[data-v-9b108af3]{background-color:var(--background-paper-elevation-1)}table>tbody td[data-v-9b108af3]{background-color:var(--background-default);border:none;min-width:0;display:flex;min-height:var(--79cce51c);height:auto;width:100%;place-items:center;border-bottom:1px solid var(--common-divider);justify-content:start}table>tbody td.bordered[data-v-9b108af3]{border-right:1px solid var(--common-divider)}table>tbody td.bordered.isStickyRight[data-v-9b108af3]{border-right:none;border-left:1px solid var(--common-divider)}table>tbody td.isTextRight[data-v-9b108af3]{justify-content:flex-end;text-align:right}.section-container[data-v-9b108af3]{left:0}.sections[data-v-9b108af3]{display:flex}.section[data-v-9b108af3]{padding:0 1.5rem;background:var(--background-default);left:0;height:32px;display:flex;align-items:flex-end;border-right:1px solid var(--common-divider)}.table-cell[data-v-9b108af3]{width:100%}.empty-state[data-v-9b108af3]{min-height:250px}

package/FormRow.vue_vue_type_style_index_0_scoped_fc3897fd_lang.css

@@ -0,0 +1 @@
+.form-row[data-v-fc3897fd]{display:flex;height:auto;gap:1.5rem;align-items:baseline}.form-row .label-container[data-v-fc3897fd]{display:flex;align-items:center;min-height:1.75rem;height:100%;width:12.875rem;gap:.25rem;flex-shrink:0}.form-row .label-container[data-v-fc3897fd] .field-label{margin-bottom:0}.form-row .content[data-v-fc3897fd]{display:flex;flex-direction:column;align-items:stretch;gap:.25rem;width:100%}

package/HelpIcon.vue_vue_type_style_index_0_scoped_7a611779_lang.css

@@ -0,0 +1 @@
+.table-help-icon[data-v-7a611779]{margin-left:var(--spacing-50);color:var(--action-active);margin-right:calc(var(--spacing-50) * -1)}

package/components/appHeader/AppHeader.vue.js

@@ -1,7 +1,7 @@
 import e from "./AppHeader.vue2.js";
 /* empty css                */import o from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../AppHeader.vue_vue_type_style_index_0_scoped_95908b8d_lang.css"; //*');
-const t = /* @__PURE__ */ o(e, [["__scopeId", "data-v-95908b8d"]]);
+// import "../../AppHeader.vue_vue_type_style_index_0_scoped_f9d4e49d_lang.css"; //*');
+const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-f9d4e49d"]]);
 export {
-  t as default
+  s as default
 };

package/components/appHeader/AppHeader.vue2.js

@@ -1,10 +1,10 @@
- import "../../AppHeader.vue_vue_type_style_index_0_scoped_95908b8d_lang.css"; import { defineComponent as p, computed as o, openBlock as u, createElementBlock as f, normalizeClass as y, createElementVNode as n, createVNode as i, unref as e, mergeProps as h, withCtx as x, createTextVNode as I, toDisplayString as v } from "vue";
+ import "../../AppHeader.vue_vue_type_style_index_0_scoped_f9d4e49d_lang.css"; import { defineComponent as f, computed as n, openBlock as u, createElementBlock as y, normalizeClass as h, createElementVNode as o, mergeProps as r, unref as e, createVNode as i, withCtx as x, createTextVNode as I, toDisplayString as v } from "vue";
 import z from "../icon/v4/IconV4.vue.js";
 import g from "../typography/v4/Typography.vue.js";
-import C from "../inlineCopy/InlineCopy.vue.js";
-import { useTestIdAttrs as T } from "../../utils/testIds.js";
-import { AppHeaderTestIdModifiers as s } from "../../testids/index.js";
-const A = { class: "image-container" }, N = ["src", "alt"], S = { class: "icon-container" }, b = { class: "name-container" }, D = /* @__PURE__ */ p({
+import T from "../inlineCopy/InlineCopy.vue.js";
+import { useTestIdAttrs as A } from "../../utils/testIds.js";
+import { AppHeaderTestIdModifiers as l } from "../../testids/index.js";
+const C = { class: "image-container" }, N = ["src", "alt"], P = ["data-platform"], S = { class: "name-container" }, K = /* @__PURE__ */ f({
   __name: "AppHeader",
   props: {
     image: { default: "" },
@@ -15,49 +15,52 @@ const A = { class: "image-container" }, N = ["src", "alt"], S = { class: "icon-c
     type: { default: "normal" }
   },
   setup(t) {
-    const a = t, l = o(
+    const a = t, d = n(
       () => a.platform ? a.platform.toLowerCase() : ""
-    ), r = o(
+    ), m = n(
       () => a.type === "normal" ? "24px" : "20px"
-    ), d = o(
+    ), c = n(
       () => a.type === "small" ? "18px" : null
-    ), m = o(
+    ), p = n(
       () => a.type === "normal" ? "h2" : "subtitle1"
-    ), c = T(a.testId, s);
-    return (E, V) => (u(), f("div", {
-      class: y(["app-header", `size-${t.type}`])
+    ), s = A(a.testId, l);
+    return (b, E) => (u(), y("div", {
+      class: h(["app-header", `size-${t.type}`])
     }, [
-      n("div", A, [
-        n("img", {
+      o("div", C, [
+        o("img", {
           src: t.image,
           alt: t.name
         }, null, 8, N)
       ]),
-      n("div", S, [
+      o("div", r({
+        class: "icon-container",
+        "data-platform": t.platform
+      }, e(s)[e(l).APP_PLATFORM]), [
         i(e(z), {
           type: "branded",
-          name: e(l),
-          size: e(r)
+          name: e(d),
+          size: e(m)
         }, null, 8, ["name", "size"])
-      ]),
-      n("div", b, [
-        i(e(g), h({
-          variant: e(m),
+      ], 16, P),
+      o("div", S, [
+        i(e(g), r({
+          variant: e(p),
           class: "title"
-        }, e(c)[e(s).TITLE]), {
+        }, e(s)[e(l).TITLE]), {
           default: x(() => [
             I(v(t.name), 1)
           ]),
           _: 1
         }, 16, ["variant"]),
-        n("div", null, [
-          i(e(C), {
+        o("div", null, [
+          i(e(T), {
             text: t.appKey,
             size: "medium",
             class: "inline-copy",
             "hide-text-value": t.type === "small",
             "test-id": t.testId,
-            "icon-size": e(d)
+            "icon-size": e(c)
           }, null, 8, ["text", "hide-text-value", "test-id", "icon-size"])
         ])
       ])
@@ -65,5 +68,5 @@ const A = { class: "image-container" }, N = ["src", "alt"], S = { class: "icon-c
   }
 });
 export {
-  D as default
+  K as default
 };

package/components/autocomplete/Autocomplete.vue.d.ts

@@ -0,0 +1,117 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    modelValue?: string | number;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: "small" | "medium" | "large";
+    label?: string;
+    labelDirection?: "top" | "inside";
+    mandatory?: boolean;
+    hoverHelpText?: string;
+    hoverHelpTextPlacement?: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+    options: unknown[] | {
+        id: string;
+        text: string;
+    }[];
+    displayValue?: (option: unknown) => string;
+    optionNameKey?: string;
+    optionsListWidth?: string;
+    onSearch?: (option: any, term: string) => boolean;
+    testId?: string;
+}>, {
+    modelValue: string;
+    placeholder: string;
+    disabled: boolean;
+    size: string;
+    label: string;
+    labelDirection: string;
+    mandatory: boolean;
+    hoverHelpText: string;
+    hoverHelpTextPlacement: string;
+    displayValue: (option: unknown) => string;
+    onSearch: any;
+    optionNameKey: string;
+    optionsListWidth: any;
+    testId: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    modelValue?: string | number;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: "small" | "medium" | "large";
+    label?: string;
+    labelDirection?: "top" | "inside";
+    mandatory?: boolean;
+    hoverHelpText?: string;
+    hoverHelpTextPlacement?: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+    options: unknown[] | {
+        id: string;
+        text: string;
+    }[];
+    displayValue?: (option: unknown) => string;
+    optionNameKey?: string;
+    optionsListWidth?: string;
+    onSearch?: (option: any, term: string) => boolean;
+    testId?: string;
+}>, {
+    modelValue: string;
+    placeholder: string;
+    disabled: boolean;
+    size: string;
+    label: string;
+    labelDirection: string;
+    mandatory: boolean;
+    hoverHelpText: string;
+    hoverHelpTextPlacement: string;
+    displayValue: (option: unknown) => string;
+    onSearch: any;
+    optionNameKey: string;
+    optionsListWidth: any;
+    testId: string;
+}>>> & {
+    "onUpdate:modelValue"?: (value: string | number) => any;
+}, {
+    label: string;
+    disabled: boolean;
+    size: "small" | "medium" | "large";
+    mandatory: boolean;
+    testId: string;
+    hoverHelpText: string;
+    hoverHelpTextPlacement: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+    modelValue: string | number;
+    placeholder: string;
+    labelDirection: "top" | "inside";
+    onSearch: (option: any, term: string) => boolean;
+    displayValue: (option: unknown) => string;
+    optionNameKey: string;
+    optionsListWidth: string;
+}>, {
+    default?(_: {
+        option: unknown;
+        selected: boolean;
+        active: boolean;
+    }): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/autocomplete/Autocomplete.vue.js

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

package/components/autocomplete/Autocomplete.vue2.js

@@ -0,0 +1,84 @@
+ import "../../Autocomplete.vue_vue_type_style_index_0_scoped_e36c9442_lang.css"; import { defineComponent as c, computed as h, ref as r, watchEffect as b, openBlock as y, createBlock as V, unref as u, withCtx as f, createVNode as x, isRef as g, renderSlot as w, normalizeProps as F, guardReactiveProps as S } from "vue";
+import k from "../dropdown/v4/DropdownV4.vue.js";
+import "../dropdown/v4/DefaultDropdownTrigger.vue.js";
+import "../dropdown/v4/IconButtonDropdownTrigger.vue.js";
+import "../dropdown/v4/ChipDropdownTrigger.vue.js";
+import "../dropdown/v4/AppDropdownTrigger.vue.js";
+import "../dropdown/v4/OptionV4.vue.js";
+import z from "../input/v4/TextField.vue.js";
+import { useVModel as I } from "@vueuse/core";
+const K = /* @__PURE__ */ c({
+  __name: "Autocomplete",
+  props: {
+    modelValue: { default: "" },
+    placeholder: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    size: { default: "small" },
+    label: { default: "" },
+    labelDirection: { default: "top" },
+    mandatory: { type: Boolean, default: !1 },
+    hoverHelpText: { default: "" },
+    hoverHelpTextPlacement: { default: "top" },
+    options: null,
+    displayValue: { type: Function, default: (e) => e.toString() },
+    optionNameKey: { default: "" },
+    optionsListWidth: { default: null },
+    onSearch: { type: Function, default: null },
+    testId: { default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: p }) {
+    const a = e, d = I(a, "modelValue", p), m = (l) => {
+      l !== void 0 && (d.value = a.displayValue(l));
+    }, n = h(
+      () => (a.options || []).filter((l) => a.displayValue(l) !== d.value.toString()).filter((l) => a.onSearch(l, d.value.toString()))
+    ), o = r(!1), s = r(!1);
+    b(() => {
+      a.disabled ? o.value = !1 : s.value && n.value.length ? o.value = !0 : n.value.length === 0 && (o.value = !1);
+    });
+    const v = () => {
+      a.disabled || !o.value && n.value.length && (o.value = !0);
+    };
+    return (l, t) => (y(), V(u(k), {
+      "is-open": o.value,
+      "onUpdate:is-open": t[3] || (t[3] = (i) => o.value = i),
+      class: "autocomplete-dropdown",
+      "display-value": e.displayValue,
+      options: u(n),
+      "option-name-key": e.optionNameKey,
+      "options-list-width": e.optionsListWidth,
+      disabled: e.disabled,
+      "search-auto-focus": !1,
+      "full-width": !1,
+      "test-id": e.testId,
+      "onUpdate:selected": m
+    }, {
+      "dropdown-trigger": f(() => [
+        x(u(z), {
+          modelValue: u(d),
+          "onUpdate:modelValue": t[0] || (t[0] = (i) => g(d) ? d.value = i : null),
+          class: "autocomplete-field",
+          placeholder: e.placeholder,
+          disabled: e.disabled,
+          size: e.size,
+          label: e.label,
+          "label-direction": e.labelDirection,
+          mandatory: e.mandatory,
+          "hover-help-text": e.hoverHelpText,
+          "hover-help-text-placemen": e.hoverHelpTextPlacement,
+          "test-id": e.testId,
+          onFocusin: t[1] || (t[1] = (i) => s.value = !0),
+          onFocusout: t[2] || (t[2] = (i) => s.value = !1),
+          onClick: v
+        }, null, 8, ["modelValue", "placeholder", "disabled", "size", "label", "label-direction", "mandatory", "hover-help-text", "hover-help-text-placemen", "test-id"])
+      ]),
+      default: f((i) => [
+        w(l.$slots, "default", F(S(i)), void 0, !0)
+      ]),
+      _: 3
+    }, 8, ["is-open", "display-value", "options", "option-name-key", "options-list-width", "disabled", "test-id"]));
+  }
+});
+export {
+  K as default
+};