@platforma-sdk/ui-vue 1.58.5 → 1.58.9

package/dist/plugins/Monetization/EndOfPeriod.style.js

@@ -0,0 +1,4 @@
+import './EndOfPeriod.vue.css';var e = { container: "_container_1ki68_2" };
+export { e as default };
+
+//# sourceMappingURL=EndOfPeriod.style.js.map

package/dist/plugins/Monetization/EndOfPeriod.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EndOfPeriod.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/plugins/Monetization/EndOfPeriod.vue"],"sourcesContent":["<script setup lang=\"ts\">\ndefineProps<{\n  endOfPeriod: string | null;\n}>();\n\nconst formateStringDate = (date: string | null) => {\n  if (!date) return \"N/A\";\n  const dateObj = new Date(date);\n  const day = dateObj.getDate().toString().padStart(2, \"0\");\n  const month = (dateObj.getMonth() + 1).toString().padStart(2, \"0\"); // Month is 0-indexed\n  const year = dateObj.getFullYear();\n  return `${day}.${month}.${year}`;\n};\n</script>\n\n<template>\n  <div :class=\"$style.container\">\n    <span>End of period</span>\n    <span>{{ formateStringDate(endOfPeriod) }}</span>\n  </div>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  background-color: #f7f8fa;\n  border-radius: 6px;\n  min-height: 40px;\n  padding: 0 12px 0 12px;\n  color: var(--txt-01);\n  font-size: 14px;\n  font-weight: 500;\n  border: 1px solid var(--border-color-div-grey);\n  span:first-child {\n    overflow: hidden;\n    font-weight: 600;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/plugins/Monetization/EndOfPeriod.vue.css

@@ -0,0 +1 @@
+._container_1ki68_2{min-height:40px;color:var(--txt-01);border:1px solid var(--border-color-div-grey);background-color:#f7f8fa;border-radius:6px;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;padding:0 12px;font-size:14px;font-weight:500;display:flex}._container_1ki68_2 span:first-child{font-weight:600;overflow:hidden}

package/dist/plugins/Monetization/EndOfPeriod.vue2.js

@@ -1,24 +1,16 @@
-import { defineComponent as l, createElementBlock as d, openBlock as p, normalizeClass as c, createElementVNode as n, toDisplayString as f } from "vue";
-const u = /* @__PURE__ */ l({
-  __name: "EndOfPeriod",
-  props: {
-    endOfPeriod: {}
-  },
-  setup(o) {
-    const r = (e) => {
-      if (!e) return "N/A";
-      const t = new Date(e), a = t.getDate().toString().padStart(2, "0"), s = (t.getMonth() + 1).toString().padStart(2, "0"), i = t.getFullYear();
-      return `${a}.${s}.${i}`;
-    };
-    return (e, t) => (p(), d("div", {
-      class: c(e.$style.container)
-    }, [
-      t[0] || (t[0] = n("span", null, "End of period", -1)),
-      n("span", null, f(r(o.endOfPeriod)), 1)
-    ], 2));
-  }
+import { createElementBlock as e, createElementVNode as t, defineComponent as n, normalizeClass as r, openBlock as i, toDisplayString as a } from "vue";
+var o = /* @__PURE__ */ n({
+	__name: "EndOfPeriod",
+	props: { endOfPeriod: {} },
+	setup(n) {
+		let o = (e) => {
+			if (!e) return "N/A";
+			let t = new Date(e);
+			return `${t.getDate().toString().padStart(2, "0")}.${(t.getMonth() + 1).toString().padStart(2, "0")}.${t.getFullYear()}`;
+		};
+		return (s, c) => (i(), e("div", { class: r(s.$style.container) }, [c[0] ||= t("span", null, "End of period", -1), t("span", null, a(o(n.endOfPeriod)), 1)], 2));
+	}
 });
-export {
-  u as default
-};
-//# sourceMappingURL=EndOfPeriod.vue2.js.map
+export { o as default };
+
+//# sourceMappingURL=EndOfPeriod.vue2.js.map

package/dist/plugins/Monetization/EndOfPeriod.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"EndOfPeriod.vue2.js","sources":["../../../src/plugins/Monetization/EndOfPeriod.vue"],"sourcesContent":["<script setup lang=\"ts\">\ndefineProps<{\n  endOfPeriod: string | null;\n}>();\n\nconst formateStringDate = (date: string | null) => {\n  if (!date) return \"N/A\";\n  const dateObj = new Date(date);\n  const day = dateObj.getDate().toString().padStart(2, \"0\");\n  const month = (dateObj.getMonth() + 1).toString().padStart(2, \"0\"); // Month is 0-indexed\n  const year = dateObj.getFullYear();\n  return `${day}.${month}.${year}`;\n};\n</script>\n\n<template>\n  <div :class=\"$style.container\">\n    <span>End of period</span>\n    <span>{{ formateStringDate(endOfPeriod) }}</span>\n  </div>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  background-color: #f7f8fa;\n  border-radius: 6px;\n  min-height: 40px;\n  padding: 0 12px 0 12px;\n  color: var(--txt-01);\n  font-size: 14px;\n  font-weight: 500;\n  border: 1px solid var(--border-color-div-grey);\n  span:first-child {\n    overflow: hidden;\n    font-weight: 600;\n  }\n}\n</style>\n"],"names":["formateStringDate","date","dateObj","day","month","year","_createElementBlock","_normalizeClass","$style","_cache","_createElementVNode","_toDisplayString","__props"],"mappings":";;;;;;;AAKA,UAAMA,IAAoB,CAACC,MAAwB;AACjD,UAAI,CAACA,EAAM,QAAO;AAClB,YAAMC,IAAU,IAAI,KAAKD,CAAI,GACvBE,IAAMD,EAAQ,QAAA,EAAU,WAAW,SAAS,GAAG,GAAG,GAClDE,KAASF,EAAQ,SAAA,IAAa,GAAG,WAAW,SAAS,GAAG,GAAG,GAC3DG,IAAOH,EAAQ,YAAA;AACrB,aAAO,GAAGC,CAAG,IAAIC,CAAK,IAAIC,CAAI;AAAA,IAChC;2BAIEC,EAGM,OAAA;AAAA,MAHA,OAAKC,EAAEC,EAAAA,OAAO,SAAS;AAAA,IAAA;MAC3BC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAC,EAA0B,cAApB,iBAAa,EAAA;AAAA,MACnBA,EAAiD,QAAA,MAAAC,EAAxCX,EAAkBY,EAAA,WAAW,CAAA,GAAA,CAAA;AAAA,IAAA;;;"}
+{"version":3,"file":"EndOfPeriod.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/plugins/Monetization/EndOfPeriod.vue"],"sourcesContent":["<script setup lang=\"ts\">\ndefineProps<{\n  endOfPeriod: string | null;\n}>();\n\nconst formateStringDate = (date: string | null) => {\n  if (!date) return \"N/A\";\n  const dateObj = new Date(date);\n  const day = dateObj.getDate().toString().padStart(2, \"0\");\n  const month = (dateObj.getMonth() + 1).toString().padStart(2, \"0\"); // Month is 0-indexed\n  const year = dateObj.getFullYear();\n  return `${day}.${month}.${year}`;\n};\n</script>\n\n<template>\n  <div :class=\"$style.container\">\n    <span>End of period</span>\n    <span>{{ formateStringDate(endOfPeriod) }}</span>\n  </div>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  background-color: #f7f8fa;\n  border-radius: 6px;\n  min-height: 40px;\n  padding: 0 12px 0 12px;\n  color: var(--txt-01);\n  font-size: 14px;\n  font-weight: 500;\n  border: 1px solid var(--border-color-div-grey);\n  span:first-child {\n    overflow: hidden;\n    font-weight: 600;\n  }\n}\n</style>\n"],"mappings":";;;;;EAKA,IAAM,KAAqB,MAAwB;AACjD,OAAI,CAAC,EAAM,QAAO;GAClB,IAAM,IAAU,IAAI,KAAK,EAAK;AAI9B,UAAO,GAHK,EAAQ,SAAS,CAAC,UAAU,CAAC,SAAS,GAAG,IAAI,CAG3C,IAFC,EAAQ,UAAU,GAAG,GAAG,UAAU,CAAC,SAAS,GAAG,IAAI,CAE3C,GADV,EAAQ,aAAa;;yBAMlC,EAGM,OAAA,EAHA,OAAK,EAAEA,EAAAA,OAAO,UAAS,EAAA,EAAA,CAAA,AAAA,EAAA,OAC3B,EAA0B,QAAA,MAApB,iBAAa,GAAA,EACnB,EAAiD,QAAA,MAAA,EAAxC,EAAkB,EAAA,YAAW,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA"}

package/dist/plugins/Monetization/LimitCard.js

@@ -0,0 +1,7 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import t from "./LimitCard.vue2.js";
+import n from "./LimitCard.style.js";
+var r = /* @__PURE__ */ e(t, [["__cssModules", { $style: n }]]);
+export { r as default };
+
+//# sourceMappingURL=LimitCard.js.map

package/dist/plugins/Monetization/LimitCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LimitCard.js","names":[],"sources":["../../../src/plugins/Monetization/LimitCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  type: \"unique_launches\" | \"volume_limit\";\n  label: string;\n  used: number;\n  toSpend: number;\n  available: number | null; // If available is null it means Unlimited\n  unit?: string;\n}>();\n\nconst total = computed(() => {\n  if (props.available === null) return null;\n  return props.available + props.toSpend + props.used;\n});\n\nconst exceeded = computed(() => {\n  if (props.available === null) return false;\n  return props.available < 0;\n});\n\nconst availableNow = computed(() => {\n  if (props.available === null) return null;\n  return props.available + props.toSpend;\n});\n\nconst clampPercentage = (n: number) => Math.max(0, Math.min(100, n));\n\nconst toSpendPercentage = computed(() => {\n  if (total.value === null) return 0;\n  if (total.value === 0) return 0;\n  if (exceeded.value) return 0;\n  return clampPercentage((props.toSpend / total.value) * 100);\n});\n\nconst usedPercentage = computed(() => {\n  if (total.value === null) return 0;\n  if (total.value === 0) return 0;\n  return clampPercentage((props.used / total.value) * 100);\n});\n\nconst availablePercentage = computed(() => {\n  if (props.available === null) return 100;\n  if (total.value === null) return 100;\n  if (total.value === 0) return 100;\n  if (exceeded.value) return 0;\n  return clampPercentage((props.available / total.value) * 100);\n});\n\nconst computedLabel = computed(() => {\n  if (props.type === \"unique_launches\") return \"Runs Limits\";\n  if (props.type === \"volume_limit\") return \"Volume Limits\";\n  return props.label;\n});\n\nconst toGB = (v: number) => {\n  return (v / 1024 / 1024 / 1024).toFixed(2) + \" GB\";\n};\n\nconst formatUnit = (v: number) => {\n  if (props.type === \"volume_limit\") return toGB(v);\n  return v;\n};\n\nconst showBar = (n: number) => {\n  return Number(n.toFixed(2)) > 0;\n};\n</script>\n\n<template>\n  <div :class=\"$style.container\">\n    <span :class=\"$style.label\">{{ computedLabel }}</span>\n    <div :class=\"$style.content\">\n      <div :class=\"$style.contentAvailable\">\n        <div>\n          Available:\n          <div style=\"flex: 1\" />\n          <span v-if=\"availableNow !== null\"\n            ><strong>{{ formatUnit(availableNow) }}</strong> /\n            {{ formatUnit(available! + toSpend + used) }}</span\n          >\n          <span v-else>Unlimited</span>\n        </div>\n        <div :class=\"[$style.afterRun, { [$style.exceeded]: exceeded }]\">\n          <span v-if=\"exceeded\">Too many files selected</span>\n          <span style=\"flex: 1\" />\n          <span>After run:</span>\n          <span v-if=\"available !== null\"\n            >{{ formatUnit(available) }} / {{ formatUnit(available + toSpend + used) }}</span\n          >\n        </div>\n        <div :class=\"[$style.progressBar, { [$style.exceeded]: exceeded }]\">\n          <span\n            v-if=\"showBar(availablePercentage)\"\n            :class=\"$style.progressBarAvailable\"\n            :style=\"{ width: `${availablePercentage.toFixed(2)}%` }\"\n          />\n          <span\n            v-if=\"showBar(toSpendPercentage)\"\n            :class=\"$style.progressBarToSpend\"\n            :style=\"{ width: `${toSpendPercentage.toFixed(2)}%` }\"\n          />\n          <span\n            v-if=\"showBar(usedPercentage)\"\n            :class=\"$style.progressBarUsed\"\n            :style=\"{ width: `${usedPercentage.toFixed(2)}%` }\"\n          />\n        </div>\n      </div>\n      <div :class=\"$style.legends\">\n        <div :class=\"$style.toSpendLegend\">\n          <span />\n          To spend: {{ formatUnit(toSpend) }}\n        </div>\n        <div :class=\"$style.usedLegend\">\n          <span />\n          Used: {{ formatUnit(used) }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--bg-base-light);\n  border-radius: 6px;\n  padding: 10px 12px 16px 12px;\n  color: var(--txt-01);\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  border: 1px solid var(--border-color-div-grey);\n}\n\n.label {\n  display: block;\n  min-height: 36px;\n  margin-bottom: 8px;\n  color: var(--txt-01);\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px; /* 142.857% */\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.contentAvailable {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  > div {\n    display: flex;\n    align-items: flex-start;\n  }\n  > div:first-child {\n    gap: 8px;\n    strong {\n      font-size: 28px;\n      font-weight: 500;\n      line-height: 36px; /* 128.571% */\n      letter-spacing: -0.56px;\n    }\n  }\n}\n\n.afterRun {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 4px;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px;\n  color: var(--txt-03);\n  &.exceeded {\n    color: var(--txt-error);\n  }\n}\n\n.progressBar {\n  width: 100%;\n  height: 12px;\n  background-color: #e0e0e0;\n  display: flex;\n  align-items: center;\n  border: 1px solid var(--border-color-default);\n  > span {\n    display: block;\n    height: 100%;\n    outline: 1px solid var(--border-color-default);\n  }\n  &.exceeded {\n    opacity: 0.2;\n  }\n}\n\n.progressBarAvailable {\n  background: linear-gradient(270deg, #a1e59c 0%, #d0f5b0 98.81%);\n}\n\n.progressBarUsed {\n  background-color: #ffcecc;\n}\n\n.progressBarToSpend {\n  background-color: #faf5aa;\n}\n\n.legends {\n  display: flex;\n  justify-content: space-between;\n  gap: 8px;\n\n  span {\n    display: block;\n    border-radius: 1px;\n    border: 1px solid var(--border-color-default);\n    width: 12px;\n    height: 12px;\n  }\n}\n\n.usedLegend {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  span {\n    background: #ffcecc;\n  }\n}\n\n.toSpendLegend {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  span {\n    background: #faf5aa;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/plugins/Monetization/LimitCard.style.js

@@ -0,0 +1,18 @@
+import './LimitCard.vue.css';var e = {
+	container: "_container_7c2y8_2",
+	label: "_label_7c2y8_15",
+	content: "_content_7c2y8_25",
+	contentAvailable: "_contentAvailable_7c2y8_31",
+	afterRun: "_afterRun_7c2y8_50",
+	exceeded: "_exceeded_7c2y8_60",
+	progressBar: "_progressBar_7c2y8_65",
+	progressBarAvailable: "_progressBarAvailable_7c2y8_82",
+	progressBarUsed: "_progressBarUsed_7c2y8_86",
+	progressBarToSpend: "_progressBarToSpend_7c2y8_90",
+	legends: "_legends_7c2y8_94",
+	usedLegend: "_usedLegend_7c2y8_108",
+	toSpendLegend: "_toSpendLegend_7c2y8_117"
+};
+export { e as default };
+
+//# sourceMappingURL=LimitCard.style.js.map

package/dist/plugins/Monetization/LimitCard.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LimitCard.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/plugins/Monetization/LimitCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  type: \"unique_launches\" | \"volume_limit\";\n  label: string;\n  used: number;\n  toSpend: number;\n  available: number | null; // If available is null it means Unlimited\n  unit?: string;\n}>();\n\nconst total = computed(() => {\n  if (props.available === null) return null;\n  return props.available + props.toSpend + props.used;\n});\n\nconst exceeded = computed(() => {\n  if (props.available === null) return false;\n  return props.available < 0;\n});\n\nconst availableNow = computed(() => {\n  if (props.available === null) return null;\n  return props.available + props.toSpend;\n});\n\nconst clampPercentage = (n: number) => Math.max(0, Math.min(100, n));\n\nconst toSpendPercentage = computed(() => {\n  if (total.value === null) return 0;\n  if (total.value === 0) return 0;\n  if (exceeded.value) return 0;\n  return clampPercentage((props.toSpend / total.value) * 100);\n});\n\nconst usedPercentage = computed(() => {\n  if (total.value === null) return 0;\n  if (total.value === 0) return 0;\n  return clampPercentage((props.used / total.value) * 100);\n});\n\nconst availablePercentage = computed(() => {\n  if (props.available === null) return 100;\n  if (total.value === null) return 100;\n  if (total.value === 0) return 100;\n  if (exceeded.value) return 0;\n  return clampPercentage((props.available / total.value) * 100);\n});\n\nconst computedLabel = computed(() => {\n  if (props.type === \"unique_launches\") return \"Runs Limits\";\n  if (props.type === \"volume_limit\") return \"Volume Limits\";\n  return props.label;\n});\n\nconst toGB = (v: number) => {\n  return (v / 1024 / 1024 / 1024).toFixed(2) + \" GB\";\n};\n\nconst formatUnit = (v: number) => {\n  if (props.type === \"volume_limit\") return toGB(v);\n  return v;\n};\n\nconst showBar = (n: number) => {\n  return Number(n.toFixed(2)) > 0;\n};\n</script>\n\n<template>\n  <div :class=\"$style.container\">\n    <span :class=\"$style.label\">{{ computedLabel }}</span>\n    <div :class=\"$style.content\">\n      <div :class=\"$style.contentAvailable\">\n        <div>\n          Available:\n          <div style=\"flex: 1\" />\n          <span v-if=\"availableNow !== null\"\n            ><strong>{{ formatUnit(availableNow) }}</strong> /\n            {{ formatUnit(available! + toSpend + used) }}</span\n          >\n          <span v-else>Unlimited</span>\n        </div>\n        <div :class=\"[$style.afterRun, { [$style.exceeded]: exceeded }]\">\n          <span v-if=\"exceeded\">Too many files selected</span>\n          <span style=\"flex: 1\" />\n          <span>After run:</span>\n          <span v-if=\"available !== null\"\n            >{{ formatUnit(available) }} / {{ formatUnit(available + toSpend + used) }}</span\n          >\n        </div>\n        <div :class=\"[$style.progressBar, { [$style.exceeded]: exceeded }]\">\n          <span\n            v-if=\"showBar(availablePercentage)\"\n            :class=\"$style.progressBarAvailable\"\n            :style=\"{ width: `${availablePercentage.toFixed(2)}%` }\"\n          />\n          <span\n            v-if=\"showBar(toSpendPercentage)\"\n            :class=\"$style.progressBarToSpend\"\n            :style=\"{ width: `${toSpendPercentage.toFixed(2)}%` }\"\n          />\n          <span\n            v-if=\"showBar(usedPercentage)\"\n            :class=\"$style.progressBarUsed\"\n            :style=\"{ width: `${usedPercentage.toFixed(2)}%` }\"\n          />\n        </div>\n      </div>\n      <div :class=\"$style.legends\">\n        <div :class=\"$style.toSpendLegend\">\n          <span />\n          To spend: {{ formatUnit(toSpend) }}\n        </div>\n        <div :class=\"$style.usedLegend\">\n          <span />\n          Used: {{ formatUnit(used) }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--bg-base-light);\n  border-radius: 6px;\n  padding: 10px 12px 16px 12px;\n  color: var(--txt-01);\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  border: 1px solid var(--border-color-div-grey);\n}\n\n.label {\n  display: block;\n  min-height: 36px;\n  margin-bottom: 8px;\n  color: var(--txt-01);\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px; /* 142.857% */\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.contentAvailable {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  > div {\n    display: flex;\n    align-items: flex-start;\n  }\n  > div:first-child {\n    gap: 8px;\n    strong {\n      font-size: 28px;\n      font-weight: 500;\n      line-height: 36px; /* 128.571% */\n      letter-spacing: -0.56px;\n    }\n  }\n}\n\n.afterRun {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 4px;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px;\n  color: var(--txt-03);\n  &.exceeded {\n    color: var(--txt-error);\n  }\n}\n\n.progressBar {\n  width: 100%;\n  height: 12px;\n  background-color: #e0e0e0;\n  display: flex;\n  align-items: center;\n  border: 1px solid var(--border-color-default);\n  > span {\n    display: block;\n    height: 100%;\n    outline: 1px solid var(--border-color-default);\n  }\n  &.exceeded {\n    opacity: 0.2;\n  }\n}\n\n.progressBarAvailable {\n  background: linear-gradient(270deg, #a1e59c 0%, #d0f5b0 98.81%);\n}\n\n.progressBarUsed {\n  background-color: #ffcecc;\n}\n\n.progressBarToSpend {\n  background-color: #faf5aa;\n}\n\n.legends {\n  display: flex;\n  justify-content: space-between;\n  gap: 8px;\n\n  span {\n    display: block;\n    border-radius: 1px;\n    border: 1px solid var(--border-color-default);\n    width: 12px;\n    height: 12px;\n  }\n}\n\n.usedLegend {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  span {\n    background: #ffcecc;\n  }\n}\n\n.toSpendLegend {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  span {\n    background: #faf5aa;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/plugins/Monetization/LimitCard.vue.css

@@ -0,0 +1 @@
+._container_7c2y8_2{background-color:var(--bg-base-light);color:var(--txt-01);border:1px solid var(--border-color-div-grey);border-radius:6px;flex-direction:column;padding:10px 12px 16px;font-size:14px;font-weight:500;line-height:20px;display:flex}._label_7c2y8_15{min-height:36px;color:var(--txt-01);margin-bottom:8px;font-size:14px;font-weight:600;line-height:20px;display:block}._content_7c2y8_25{flex-direction:column;gap:16px;display:flex}._contentAvailable_7c2y8_31{flex-direction:column;gap:6px;display:flex}._contentAvailable_7c2y8_31>div{align-items:flex-start;display:flex}._contentAvailable_7c2y8_31>div:first-child{gap:8px}._contentAvailable_7c2y8_31>div:first-child strong{letter-spacing:-.56px;font-size:28px;font-weight:500;line-height:36px}._afterRun_7c2y8_50{color:var(--txt-03);justify-content:flex-end;align-items:center;gap:4px;font-size:12px;font-style:normal;font-weight:500;line-height:16px;display:flex}._afterRun_7c2y8_50._exceeded_7c2y8_60{color:var(--txt-error)}._progressBar_7c2y8_65{border:1px solid var(--border-color-default);background-color:#e0e0e0;align-items:center;width:100%;height:12px;display:flex}._progressBar_7c2y8_65>span{outline:1px solid var(--border-color-default);height:100%;display:block}._progressBar_7c2y8_65._exceeded_7c2y8_60{opacity:.2}._progressBarAvailable_7c2y8_82{background:linear-gradient(270deg,#a1e59c 0%,#d0f5b0 98.81%)}._progressBarUsed_7c2y8_86{background-color:#ffcecc}._progressBarToSpend_7c2y8_90{background-color:#faf5aa}._legends_7c2y8_94{justify-content:space-between;gap:8px;display:flex}._legends_7c2y8_94 span{border:1px solid var(--border-color-default);border-radius:1px;width:12px;height:12px;display:block}._usedLegend_7c2y8_108{align-items:center;gap:8px;display:flex}._usedLegend_7c2y8_108 span{background:#ffcecc}._toSpendLegend_7c2y8_117{align-items:center;gap:8px;display:flex}._toSpendLegend_7c2y8_117 span{background:#faf5aa}

package/dist/plugins/Monetization/LimitCard.vue2.js

@@ -1,85 +1,48 @@
-import { defineComponent as w, computed as o, createElementBlock as r, openBlock as i, normalizeClass as a, createElementVNode as n, toDisplayString as d, createTextVNode as f, createCommentVNode as m, normalizeStyle as $ } from "vue";
-const F = { key: 0 }, N = { key: 1 }, A = { key: 0 }, C = { key: 1 }, T = /* @__PURE__ */ w({
-  __name: "LimitCard",
-  props: {
-    type: {},
-    label: {},
-    used: {},
-    toSpend: {},
-    available: {},
-    unit: {}
-  },
-  setup(s) {
-    const l = s, u = o(() => l.available === null ? null : l.available + l.toSpend + l.used), y = o(() => l.available === null ? !1 : l.available < 0), c = o(() => l.available === null ? null : l.available + l.toSpend), p = (e) => Math.max(0, Math.min(100, e)), g = o(() => u.value === null || u.value === 0 || y.value ? 0 : p(l.toSpend / u.value * 100)), S = o(() => u.value === null || u.value === 0 ? 0 : p(l.used / u.value * 100)), k = o(() => l.available === null || u.value === null || u.value === 0 ? 100 : y.value ? 0 : p(l.available / u.value * 100)), B = o(() => l.type === "unique_launches" ? "Runs Limits" : l.type === "volume_limit" ? "Volume Limits" : l.label), L = (e) => (e / 1024 / 1024 / 1024).toFixed(2) + " GB", v = (e) => l.type === "volume_limit" ? L(e) : e, b = (e) => Number(e.toFixed(2)) > 0;
-    return (e, t) => (i(), r("div", {
-      class: a(e.$style.container)
-    }, [
-      n("span", {
-        class: a(e.$style.label)
-      }, d(B.value), 3),
-      n("div", {
-        class: a(e.$style.content)
-      }, [
-        n("div", {
-          class: a(e.$style.contentAvailable)
-        }, [
-          n("div", null, [
-            t[0] || (t[0] = f(" Available: ", -1)),
-            t[1] || (t[1] = n("div", { style: { flex: "1" } }, null, -1)),
-            c.value !== null ? (i(), r("span", F, [
-              n("strong", null, d(v(c.value)), 1),
-              f(" / " + d(v(s.available + s.toSpend + s.used)), 1)
-            ])) : (i(), r("span", N, "Unlimited"))
-          ]),
-          n("div", {
-            class: a([e.$style.afterRun, { [e.$style.exceeded]: y.value }])
-          }, [
-            y.value ? (i(), r("span", A, "Too many files selected")) : m("", !0),
-            t[2] || (t[2] = n("span", { style: { flex: "1" } }, null, -1)),
-            t[3] || (t[3] = n("span", null, "After run:", -1)),
-            s.available !== null ? (i(), r("span", C, d(v(s.available)) + " / " + d(v(s.available + s.toSpend + s.used)), 1)) : m("", !0)
-          ], 2),
-          n("div", {
-            class: a([e.$style.progressBar, { [e.$style.exceeded]: y.value }])
-          }, [
-            b(k.value) ? (i(), r("span", {
-              key: 0,
-              class: a(e.$style.progressBarAvailable),
-              style: $({ width: `${k.value.toFixed(2)}%` })
-            }, null, 6)) : m("", !0),
-            b(g.value) ? (i(), r("span", {
-              key: 1,
-              class: a(e.$style.progressBarToSpend),
-              style: $({ width: `${g.value.toFixed(2)}%` })
-            }, null, 6)) : m("", !0),
-            b(S.value) ? (i(), r("span", {
-              key: 2,
-              class: a(e.$style.progressBarUsed),
-              style: $({ width: `${S.value.toFixed(2)}%` })
-            }, null, 6)) : m("", !0)
-          ], 2)
-        ], 2),
-        n("div", {
-          class: a(e.$style.legends)
-        }, [
-          n("div", {
-            class: a(e.$style.toSpendLegend)
-          }, [
-            t[4] || (t[4] = n("span", null, null, -1)),
-            f(" To spend: " + d(v(s.toSpend)), 1)
-          ], 2),
-          n("div", {
-            class: a(e.$style.usedLegend)
-          }, [
-            t[5] || (t[5] = n("span", null, null, -1)),
-            f(" Used: " + d(v(s.used)), 1)
-          ], 2)
-        ], 2)
-      ], 2)
-    ], 2));
-  }
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, toDisplayString as l } from "vue";
+var u = { key: 0 }, d = { key: 1 }, f = { key: 0 }, p = { key: 1 }, m = /* @__PURE__ */ a({
+	__name: "LimitCard",
+	props: {
+		type: {},
+		label: {},
+		used: {},
+		toSpend: {},
+		available: {},
+		unit: {}
+	},
+	setup(a) {
+		let m = a, h = e(() => m.available === null ? null : m.available + m.toSpend + m.used), g = e(() => m.available === null ? !1 : m.available < 0), _ = e(() => m.available === null ? null : m.available + m.toSpend), v = (e) => Math.max(0, Math.min(100, e)), y = e(() => h.value === null || h.value === 0 || g.value ? 0 : v(m.toSpend / h.value * 100)), b = e(() => h.value === null || h.value === 0 ? 0 : v(m.used / h.value * 100)), x = e(() => m.available === null || h.value === null || h.value === 0 ? 100 : g.value ? 0 : v(m.available / h.value * 100)), S = e(() => m.type === "unique_launches" ? "Runs Limits" : m.type === "volume_limit" ? "Volume Limits" : m.label), C = (e) => (e / 1024 / 1024 / 1024).toFixed(2) + " GB", w = (e) => m.type === "volume_limit" ? C(e) : e, T = (e) => Number(e.toFixed(2)) > 0;
+		return (e, m) => (c(), n("div", { class: o(e.$style.container) }, [r("span", { class: o(e.$style.label) }, l(S.value), 3), r("div", { class: o(e.$style.content) }, [r("div", { class: o(e.$style.contentAvailable) }, [
+			r("div", null, [
+				m[0] ||= i(" Available: ", -1),
+				m[1] ||= r("div", { style: { flex: "1" } }, null, -1),
+				_.value === null ? (c(), n("span", d, "Unlimited")) : (c(), n("span", u, [r("strong", null, l(w(_.value)), 1), i(" / " + l(w(a.available + a.toSpend + a.used)), 1)]))
+			]),
+			r("div", { class: o([e.$style.afterRun, { [e.$style.exceeded]: g.value }]) }, [
+				g.value ? (c(), n("span", f, "Too many files selected")) : t("", !0),
+				m[2] ||= r("span", { style: { flex: "1" } }, null, -1),
+				m[3] ||= r("span", null, "After run:", -1),
+				a.available === null ? t("", !0) : (c(), n("span", p, l(w(a.available)) + " / " + l(w(a.available + a.toSpend + a.used)), 1))
+			], 2),
+			r("div", { class: o([e.$style.progressBar, { [e.$style.exceeded]: g.value }]) }, [
+				T(x.value) ? (c(), n("span", {
+					key: 0,
+					class: o(e.$style.progressBarAvailable),
+					style: s({ width: `${x.value.toFixed(2)}%` })
+				}, null, 6)) : t("", !0),
+				T(y.value) ? (c(), n("span", {
+					key: 1,
+					class: o(e.$style.progressBarToSpend),
+					style: s({ width: `${y.value.toFixed(2)}%` })
+				}, null, 6)) : t("", !0),
+				T(b.value) ? (c(), n("span", {
+					key: 2,
+					class: o(e.$style.progressBarUsed),
+					style: s({ width: `${b.value.toFixed(2)}%` })
+				}, null, 6)) : t("", !0)
+			], 2)
+		], 2), r("div", { class: o(e.$style.legends) }, [r("div", { class: o(e.$style.toSpendLegend) }, [m[4] ||= r("span", null, null, -1), i(" To spend: " + l(w(a.toSpend)), 1)], 2), r("div", { class: o(e.$style.usedLegend) }, [m[5] ||= r("span", null, null, -1), i(" Used: " + l(w(a.used)), 1)], 2)], 2)], 2)], 2));
+	}
 });
-export {
-  T as default
-};
-//# sourceMappingURL=LimitCard.vue2.js.map
+export { m as default };
+
+//# sourceMappingURL=LimitCard.vue2.js.map

package/dist/plugins/Monetization/LimitCard.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"LimitCard.vue2.js","sources":["../../../src/plugins/Monetization/LimitCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  type: \"unique_launches\" | \"volume_limit\";\n  label: string;\n  used: number;\n  toSpend: number;\n  available: number | null; // If available is null it means Unlimited\n  unit?: string;\n}>();\n\nconst total = computed(() => {\n  if (props.available === null) return null;\n  return props.available + props.toSpend + props.used;\n});\n\nconst exceeded = computed(() => {\n  if (props.available === null) return false;\n  return props.available < 0;\n});\n\nconst availableNow = computed(() => {\n  if (props.available === null) return null;\n  return props.available + props.toSpend;\n});\n\nconst clampPercentage = (n: number) => Math.max(0, Math.min(100, n));\n\nconst toSpendPercentage = computed(() => {\n  if (total.value === null) return 0;\n  if (total.value === 0) return 0;\n  if (exceeded.value) return 0;\n  return clampPercentage((props.toSpend / total.value) * 100);\n});\n\nconst usedPercentage = computed(() => {\n  if (total.value === null) return 0;\n  if (total.value === 0) return 0;\n  return clampPercentage((props.used / total.value) * 100);\n});\n\nconst availablePercentage = computed(() => {\n  if (props.available === null) return 100;\n  if (total.value === null) return 100;\n  if (total.value === 0) return 100;\n  if (exceeded.value) return 0;\n  return clampPercentage((props.available / total.value) * 100);\n});\n\nconst computedLabel = computed(() => {\n  if (props.type === \"unique_launches\") return \"Runs Limits\";\n  if (props.type === \"volume_limit\") return \"Volume Limits\";\n  return props.label;\n});\n\nconst toGB = (v: number) => {\n  return (v / 1024 / 1024 / 1024).toFixed(2) + \" GB\";\n};\n\nconst formatUnit = (v: number) => {\n  if (props.type === \"volume_limit\") return toGB(v);\n  return v;\n};\n\nconst showBar = (n: number) => {\n  return Number(n.toFixed(2)) > 0;\n};\n</script>\n\n<template>\n  <div :class=\"$style.container\">\n    <span :class=\"$style.label\">{{ computedLabel }}</span>\n    <div :class=\"$style.content\">\n      <div :class=\"$style.contentAvailable\">\n        <div>\n          Available:\n          <div style=\"flex: 1\" />\n          <span v-if=\"availableNow !== null\"\n            ><strong>{{ formatUnit(availableNow) }}</strong> /\n            {{ formatUnit(available! + toSpend + used) }}</span\n          >\n          <span v-else>Unlimited</span>\n        </div>\n        <div :class=\"[$style.afterRun, { [$style.exceeded]: exceeded }]\">\n          <span v-if=\"exceeded\">Too many files selected</span>\n          <span style=\"flex: 1\" />\n          <span>After run:</span>\n          <span v-if=\"available !== null\"\n            >{{ formatUnit(available) }} / {{ formatUnit(available + toSpend + used) }}</span\n          >\n        </div>\n        <div :class=\"[$style.progressBar, { [$style.exceeded]: exceeded }]\">\n          <span\n            v-if=\"showBar(availablePercentage)\"\n            :class=\"$style.progressBarAvailable\"\n            :style=\"{ width: `${availablePercentage.toFixed(2)}%` }\"\n          />\n          <span\n            v-if=\"showBar(toSpendPercentage)\"\n            :class=\"$style.progressBarToSpend\"\n            :style=\"{ width: `${toSpendPercentage.toFixed(2)}%` }\"\n          />\n          <span\n            v-if=\"showBar(usedPercentage)\"\n            :class=\"$style.progressBarUsed\"\n            :style=\"{ width: `${usedPercentage.toFixed(2)}%` }\"\n          />\n        </div>\n      </div>\n      <div :class=\"$style.legends\">\n        <div :class=\"$style.toSpendLegend\">\n          <span />\n          To spend: {{ formatUnit(toSpend) }}\n        </div>\n        <div :class=\"$style.usedLegend\">\n          <span />\n          Used: {{ formatUnit(used) }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--bg-base-light);\n  border-radius: 6px;\n  padding: 10px 12px 16px 12px;\n  color: var(--txt-01);\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  border: 1px solid var(--border-color-div-grey);\n}\n\n.label {\n  display: block;\n  min-height: 36px;\n  margin-bottom: 8px;\n  color: var(--txt-01);\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px; /* 142.857% */\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.contentAvailable {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  > div {\n    display: flex;\n    align-items: flex-start;\n  }\n  > div:first-child {\n    gap: 8px;\n    strong {\n      font-size: 28px;\n      font-weight: 500;\n      line-height: 36px; /* 128.571% */\n      letter-spacing: -0.56px;\n    }\n  }\n}\n\n.afterRun {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 4px;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px;\n  color: var(--txt-03);\n  &.exceeded {\n    color: var(--txt-error);\n  }\n}\n\n.progressBar {\n  width: 100%;\n  height: 12px;\n  background-color: #e0e0e0;\n  display: flex;\n  align-items: center;\n  border: 1px solid var(--border-color-default);\n  > span {\n    display: block;\n    height: 100%;\n    outline: 1px solid var(--border-color-default);\n  }\n  &.exceeded {\n    opacity: 0.2;\n  }\n}\n\n.progressBarAvailable {\n  background: linear-gradient(270deg, #a1e59c 0%, #d0f5b0 98.81%);\n}\n\n.progressBarUsed {\n  background-color: #ffcecc;\n}\n\n.progressBarToSpend {\n  background-color: #faf5aa;\n}\n\n.legends {\n  display: flex;\n  justify-content: space-between;\n  gap: 8px;\n\n  span {\n    display: block;\n    border-radius: 1px;\n    border: 1px solid var(--border-color-default);\n    width: 12px;\n    height: 12px;\n  }\n}\n\n.usedLegend {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  span {\n    background: #ffcecc;\n  }\n}\n\n.toSpendLegend {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  span {\n    background: #faf5aa;\n  }\n}\n</style>\n"],"names":["props","__props","total","computed","exceeded","availableNow","clampPercentage","n","toSpendPercentage","usedPercentage","availablePercentage","computedLabel","toGB","v","formatUnit","showBar","_createElementBlock","_normalizeClass","$style","_createElementVNode","_hoisted_1","_toDisplayString","_createTextVNode","_openBlock","_cache","_hoisted_4","_normalizeStyle"],"mappings":"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"}
+{"version":3,"file":"LimitCard.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/plugins/Monetization/LimitCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  type: \"unique_launches\" | \"volume_limit\";\n  label: string;\n  used: number;\n  toSpend: number;\n  available: number | null; // If available is null it means Unlimited\n  unit?: string;\n}>();\n\nconst total = computed(() => {\n  if (props.available === null) return null;\n  return props.available + props.toSpend + props.used;\n});\n\nconst exceeded = computed(() => {\n  if (props.available === null) return false;\n  return props.available < 0;\n});\n\nconst availableNow = computed(() => {\n  if (props.available === null) return null;\n  return props.available + props.toSpend;\n});\n\nconst clampPercentage = (n: number) => Math.max(0, Math.min(100, n));\n\nconst toSpendPercentage = computed(() => {\n  if (total.value === null) return 0;\n  if (total.value === 0) return 0;\n  if (exceeded.value) return 0;\n  return clampPercentage((props.toSpend / total.value) * 100);\n});\n\nconst usedPercentage = computed(() => {\n  if (total.value === null) return 0;\n  if (total.value === 0) return 0;\n  return clampPercentage((props.used / total.value) * 100);\n});\n\nconst availablePercentage = computed(() => {\n  if (props.available === null) return 100;\n  if (total.value === null) return 100;\n  if (total.value === 0) return 100;\n  if (exceeded.value) return 0;\n  return clampPercentage((props.available / total.value) * 100);\n});\n\nconst computedLabel = computed(() => {\n  if (props.type === \"unique_launches\") return \"Runs Limits\";\n  if (props.type === \"volume_limit\") return \"Volume Limits\";\n  return props.label;\n});\n\nconst toGB = (v: number) => {\n  return (v / 1024 / 1024 / 1024).toFixed(2) + \" GB\";\n};\n\nconst formatUnit = (v: number) => {\n  if (props.type === \"volume_limit\") return toGB(v);\n  return v;\n};\n\nconst showBar = (n: number) => {\n  return Number(n.toFixed(2)) > 0;\n};\n</script>\n\n<template>\n  <div :class=\"$style.container\">\n    <span :class=\"$style.label\">{{ computedLabel }}</span>\n    <div :class=\"$style.content\">\n      <div :class=\"$style.contentAvailable\">\n        <div>\n          Available:\n          <div style=\"flex: 1\" />\n          <span v-if=\"availableNow !== null\"\n            ><strong>{{ formatUnit(availableNow) }}</strong> /\n            {{ formatUnit(available! + toSpend + used) }}</span\n          >\n          <span v-else>Unlimited</span>\n        </div>\n        <div :class=\"[$style.afterRun, { [$style.exceeded]: exceeded }]\">\n          <span v-if=\"exceeded\">Too many files selected</span>\n          <span style=\"flex: 1\" />\n          <span>After run:</span>\n          <span v-if=\"available !== null\"\n            >{{ formatUnit(available) }} / {{ formatUnit(available + toSpend + used) }}</span\n          >\n        </div>\n        <div :class=\"[$style.progressBar, { [$style.exceeded]: exceeded }]\">\n          <span\n            v-if=\"showBar(availablePercentage)\"\n            :class=\"$style.progressBarAvailable\"\n            :style=\"{ width: `${availablePercentage.toFixed(2)}%` }\"\n          />\n          <span\n            v-if=\"showBar(toSpendPercentage)\"\n            :class=\"$style.progressBarToSpend\"\n            :style=\"{ width: `${toSpendPercentage.toFixed(2)}%` }\"\n          />\n          <span\n            v-if=\"showBar(usedPercentage)\"\n            :class=\"$style.progressBarUsed\"\n            :style=\"{ width: `${usedPercentage.toFixed(2)}%` }\"\n          />\n        </div>\n      </div>\n      <div :class=\"$style.legends\">\n        <div :class=\"$style.toSpendLegend\">\n          <span />\n          To spend: {{ formatUnit(toSpend) }}\n        </div>\n        <div :class=\"$style.usedLegend\">\n          <span />\n          Used: {{ formatUnit(used) }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--bg-base-light);\n  border-radius: 6px;\n  padding: 10px 12px 16px 12px;\n  color: var(--txt-01);\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  border: 1px solid var(--border-color-div-grey);\n}\n\n.label {\n  display: block;\n  min-height: 36px;\n  margin-bottom: 8px;\n  color: var(--txt-01);\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px; /* 142.857% */\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.contentAvailable {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  > div {\n    display: flex;\n    align-items: flex-start;\n  }\n  > div:first-child {\n    gap: 8px;\n    strong {\n      font-size: 28px;\n      font-weight: 500;\n      line-height: 36px; /* 128.571% */\n      letter-spacing: -0.56px;\n    }\n  }\n}\n\n.afterRun {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 4px;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px;\n  color: var(--txt-03);\n  &.exceeded {\n    color: var(--txt-error);\n  }\n}\n\n.progressBar {\n  width: 100%;\n  height: 12px;\n  background-color: #e0e0e0;\n  display: flex;\n  align-items: center;\n  border: 1px solid var(--border-color-default);\n  > span {\n    display: block;\n    height: 100%;\n    outline: 1px solid var(--border-color-default);\n  }\n  &.exceeded {\n    opacity: 0.2;\n  }\n}\n\n.progressBarAvailable {\n  background: linear-gradient(270deg, #a1e59c 0%, #d0f5b0 98.81%);\n}\n\n.progressBarUsed {\n  background-color: #ffcecc;\n}\n\n.progressBarToSpend {\n  background-color: #faf5aa;\n}\n\n.legends {\n  display: flex;\n  justify-content: space-between;\n  gap: 8px;\n\n  span {\n    display: block;\n    border-radius: 1px;\n    border: 1px solid var(--border-color-default);\n    width: 12px;\n    height: 12px;\n  }\n}\n\n.usedLegend {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  span {\n    background: #ffcecc;\n  }\n}\n\n.toSpendLegend {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  span {\n    background: #faf5aa;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/plugins/Monetization/MonetizationSidebar.js

@@ -0,0 +1,5 @@
+import e from "./MonetizationSidebar.vue2.js";
+var t = e;
+export { t as default };
+
+//# sourceMappingURL=MonetizationSidebar.js.map

package/dist/plugins/Monetization/MonetizationSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonetizationSidebar.js","names":[],"sources":["../../../src/plugins/Monetization/MonetizationSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed } from \"vue\";\nimport {\n  PlSlideModal,\n  PlBtnGhost,\n  PlDropdown,\n  PlAlert,\n  PlIcon24,\n  PlBtnSecondary,\n} from \"@milaboratories/uikit\";\nimport { useButtonTarget } from \"./useButtonTarget\";\nimport { useInfo } from \"./useInfo\";\nimport UserCabinetCard from \"./UserCabinetCard.vue\";\nimport RunStatus from \"./RunStatus.vue\";\nimport LimitCard from \"./LimitCard.vue\";\nimport EndOfPeriod from \"./EndOfPeriod.vue\";\n\nconst isOpen = ref(false);\n\nconst {\n  result,\n  error,\n  hasMonetization,\n  canRun,\n  status,\n  customerEmail,\n  endOfBillingPeriod,\n  limits,\n  refresh,\n  isLoading,\n} = useInfo();\n\nconst teleportTarget = useButtonTarget(hasMonetization);\n\nconst productName = computed(() => result.value?.productName);\n\nconst userCabinetUrl = computed(() => {\n  if (!result.value) return undefined;\n\n  const u = new URL(`https://scientist.platforma.bio/product/${result.value.productKey}`);\n\n  if (customerEmail.value) {\n    u.searchParams.set(\"email\", customerEmail.value);\n  }\n\n  return u.toString();\n});\n\nconst options = computed(() => {\n  if (!result.value) return [];\n\n  return [\n    {\n      label: result.value.productName,\n      value: result.value.productName,\n    },\n  ];\n});\n\nconst statusText = computed(() => {\n  switch (status.value) {\n    case \"active\":\n      return \"\";\n    case \"limits_exceeded\":\n      return \"Usage limits exceeded for the current billing period.\";\n    case \"payment_required\":\n      return \"Payment required to continue using the service.\";\n    case \"select-tariff\":\n      return \"Select a subscription plan in the Scientist Cabinet.\";\n    case \"inactive\":\n      return \"Not found billing period.\";\n    default:\n      return \"\";\n  }\n});\n\nconst btnIcon = computed(() => {\n  if (canRun.value) return \"monetization-on\";\n  return \"monetization-off\";\n});\n</script>\n\n<template>\n  <PlSlideModal v-if=\"hasMonetization\" v-model=\"isOpen\">\n    <template #title>\n      <div class=\"flex items-center gap-2\">\n        <span>Subscription</span>\n      </div>\n    </template>\n    <PlDropdown label=\"Product\" readonly :model-value=\"productName\" :options=\"options\" />\n    <RunStatus :can-run=\"canRun\" :is-loading=\"isLoading\" :status-text=\"statusText\">\n      <PlBtnSecondary\n        title=\"Refresh status\"\n        round\n        size=\"small\"\n        style=\"margin-left: auto\"\n        icon=\"loading\"\n        :loading=\"isLoading\"\n        @click=\"refresh\"\n      />\n    </RunStatus>\n    <PlAlert v-if=\"error\" type=\"error\">\n      {{ error }}\n    </PlAlert>\n    <UserCabinetCard\n      v-if=\"userCabinetUrl\"\n      :email=\"customerEmail\"\n      :user-cabinet-url=\"userCabinetUrl\"\n    />\n    <EndOfPeriod v-if=\"endOfBillingPeriod\" :end-of-period=\"endOfBillingPeriod\" />\n    <template v-if=\"limits\">\n      <LimitCard\n        v-for=\"limit in limits\"\n        :key=\"limit.type\"\n        :type=\"limit.type\"\n        :label=\"limit.type\"\n        :used=\"limit.used\"\n        :to-spend=\"limit.toSpend\"\n        :available=\"limit.available\"\n      />\n    </template>\n  </PlSlideModal>\n  <!-- Teleport to the title slot -->\n  <Teleport v-if=\"hasMonetization && teleportTarget\" :to=\"teleportTarget\">\n    <PlBtnGhost @click.stop=\"isOpen = true\">\n      Subscription\n      <template #append>\n        <PlIcon24 :name=\"btnIcon\" />\n      </template>\n    </PlBtnGhost>\n  </Teleport>\n</template>\n"],"mappings":""}

package/dist/plugins/Monetization/MonetizationSidebar.vue2.js

@@ -1,5 +1,106 @@
-import f from "./MonetizationSidebar.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=MonetizationSidebar.vue2.js.map
+import { useButtonTarget as e } from "./useButtonTarget.js";
+import { useInfo as t } from "./useInfo.js";
+import n from "./UserCabinetCard.js";
+import r from "./RunStatus.js";
+import i from "./LimitCard.js";
+import a from "./EndOfPeriod.js";
+import { Fragment as o, Teleport as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, openBlock as g, ref as _, renderList as v, toDisplayString as y, unref as b, withCtx as x, withModifiers as S } from "vue";
+import { PlAlert as C, PlBtnGhost as w, PlBtnSecondary as T, PlDropdown as E, PlIcon24 as D, PlSlideModal as O } from "@milaboratories/uikit";
+var k = /* @__PURE__ */ h({
+	__name: "MonetizationSidebar",
+	setup(h) {
+		let k = _(!1), { result: A, error: j, hasMonetization: M, canRun: N, status: P, customerEmail: F, endOfBillingPeriod: I, limits: L, refresh: R, isLoading: z } = t(), B = e(M), V = c(() => A.value?.productName), H = c(() => {
+			if (!A.value) return;
+			let e = new URL(`https://scientist.platforma.bio/product/${A.value.productKey}`);
+			return F.value && e.searchParams.set("email", F.value), e.toString();
+		}), U = c(() => A.value ? [{
+			label: A.value.productName,
+			value: A.value.productName
+		}] : []), W = c(() => {
+			switch (P.value) {
+				case "active": return "";
+				case "limits_exceeded": return "Usage limits exceeded for the current billing period.";
+				case "payment_required": return "Payment required to continue using the service.";
+				case "select-tariff": return "Select a subscription plan in the Scientist Cabinet.";
+				case "inactive": return "Not found billing period.";
+				default: return "";
+			}
+		}), G = c(() => N.value ? "monetization-on" : "monetization-off");
+		return (e, t) => (g(), d(o, null, [b(M) ? (g(), l(b(O), {
+			key: 0,
+			modelValue: k.value,
+			"onUpdate:modelValue": t[0] ||= (e) => k.value = e
+		}, {
+			title: x(() => [...t[2] ||= [f("div", { class: "flex items-center gap-2" }, [f("span", null, "Subscription")], -1)]]),
+			default: x(() => [
+				m(b(E), {
+					label: "Product",
+					readonly: "",
+					"model-value": V.value,
+					options: U.value
+				}, null, 8, ["model-value", "options"]),
+				m(r, {
+					"can-run": b(N),
+					"is-loading": b(z),
+					"status-text": W.value
+				}, {
+					default: x(() => [m(b(T), {
+						title: "Refresh status",
+						round: "",
+						size: "small",
+						style: { "margin-left": "auto" },
+						icon: "loading",
+						loading: b(z),
+						onClick: b(R)
+					}, null, 8, ["loading", "onClick"])]),
+					_: 1
+				}, 8, [
+					"can-run",
+					"is-loading",
+					"status-text"
+				]),
+				b(j) ? (g(), l(b(C), {
+					key: 0,
+					type: "error"
+				}, {
+					default: x(() => [p(y(b(j)), 1)]),
+					_: 1
+				})) : u("", !0),
+				H.value ? (g(), l(n, {
+					key: 1,
+					email: b(F),
+					"user-cabinet-url": H.value
+				}, null, 8, ["email", "user-cabinet-url"])) : u("", !0),
+				b(I) ? (g(), l(a, {
+					key: 2,
+					"end-of-period": b(I)
+				}, null, 8, ["end-of-period"])) : u("", !0),
+				b(L) ? (g(!0), d(o, { key: 3 }, v(b(L), (e) => (g(), l(i, {
+					key: e.type,
+					type: e.type,
+					label: e.type,
+					used: e.used,
+					"to-spend": e.toSpend,
+					available: e.available
+				}, null, 8, [
+					"type",
+					"label",
+					"used",
+					"to-spend",
+					"available"
+				]))), 128)) : u("", !0)
+			]),
+			_: 1
+		}, 8, ["modelValue"])) : u("", !0), b(M) && b(B) ? (g(), l(s, {
+			key: 1,
+			to: b(B)
+		}, [m(b(w), { onClick: t[1] ||= S((e) => k.value = !0, ["stop"]) }, {
+			append: x(() => [m(b(D), { name: G.value }, null, 8, ["name"])]),
+			default: x(() => [t[3] ||= p(" Subscription ", -1)]),
+			_: 1
+		})], 8, ["to"])) : u("", !0)], 64));
+	}
+});
+export { k as default };
+
+//# sourceMappingURL=MonetizationSidebar.vue2.js.map

package/dist/plugins/Monetization/MonetizationSidebar.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"MonetizationSidebar.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"MonetizationSidebar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/plugins/Monetization/MonetizationSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed } from \"vue\";\nimport {\n  PlSlideModal,\n  PlBtnGhost,\n  PlDropdown,\n  PlAlert,\n  PlIcon24,\n  PlBtnSecondary,\n} from \"@milaboratories/uikit\";\nimport { useButtonTarget } from \"./useButtonTarget\";\nimport { useInfo } from \"./useInfo\";\nimport UserCabinetCard from \"./UserCabinetCard.vue\";\nimport RunStatus from \"./RunStatus.vue\";\nimport LimitCard from \"./LimitCard.vue\";\nimport EndOfPeriod from \"./EndOfPeriod.vue\";\n\nconst isOpen = ref(false);\n\nconst {\n  result,\n  error,\n  hasMonetization,\n  canRun,\n  status,\n  customerEmail,\n  endOfBillingPeriod,\n  limits,\n  refresh,\n  isLoading,\n} = useInfo();\n\nconst teleportTarget = useButtonTarget(hasMonetization);\n\nconst productName = computed(() => result.value?.productName);\n\nconst userCabinetUrl = computed(() => {\n  if (!result.value) return undefined;\n\n  const u = new URL(`https://scientist.platforma.bio/product/${result.value.productKey}`);\n\n  if (customerEmail.value) {\n    u.searchParams.set(\"email\", customerEmail.value);\n  }\n\n  return u.toString();\n});\n\nconst options = computed(() => {\n  if (!result.value) return [];\n\n  return [\n    {\n      label: result.value.productName,\n      value: result.value.productName,\n    },\n  ];\n});\n\nconst statusText = computed(() => {\n  switch (status.value) {\n    case \"active\":\n      return \"\";\n    case \"limits_exceeded\":\n      return \"Usage limits exceeded for the current billing period.\";\n    case \"payment_required\":\n      return \"Payment required to continue using the service.\";\n    case \"select-tariff\":\n      return \"Select a subscription plan in the Scientist Cabinet.\";\n    case \"inactive\":\n      return \"Not found billing period.\";\n    default:\n      return \"\";\n  }\n});\n\nconst btnIcon = computed(() => {\n  if (canRun.value) return \"monetization-on\";\n  return \"monetization-off\";\n});\n</script>\n\n<template>\n  <PlSlideModal v-if=\"hasMonetization\" v-model=\"isOpen\">\n    <template #title>\n      <div class=\"flex items-center gap-2\">\n        <span>Subscription</span>\n      </div>\n    </template>\n    <PlDropdown label=\"Product\" readonly :model-value=\"productName\" :options=\"options\" />\n    <RunStatus :can-run=\"canRun\" :is-loading=\"isLoading\" :status-text=\"statusText\">\n      <PlBtnSecondary\n        title=\"Refresh status\"\n        round\n        size=\"small\"\n        style=\"margin-left: auto\"\n        icon=\"loading\"\n        :loading=\"isLoading\"\n        @click=\"refresh\"\n      />\n    </RunStatus>\n    <PlAlert v-if=\"error\" type=\"error\">\n      {{ error }}\n    </PlAlert>\n    <UserCabinetCard\n      v-if=\"userCabinetUrl\"\n      :email=\"customerEmail\"\n      :user-cabinet-url=\"userCabinetUrl\"\n    />\n    <EndOfPeriod v-if=\"endOfBillingPeriod\" :end-of-period=\"endOfBillingPeriod\" />\n    <template v-if=\"limits\">\n      <LimitCard\n        v-for=\"limit in limits\"\n        :key=\"limit.type\"\n        :type=\"limit.type\"\n        :label=\"limit.type\"\n        :used=\"limit.used\"\n        :to-spend=\"limit.toSpend\"\n        :available=\"limit.available\"\n      />\n    </template>\n  </PlSlideModal>\n  <!-- Teleport to the title slot -->\n  <Teleport v-if=\"hasMonetization && teleportTarget\" :to=\"teleportTarget\">\n    <PlBtnGhost @click.stop=\"isOpen = true\">\n      Subscription\n      <template #append>\n        <PlIcon24 :name=\"btnIcon\" />\n      </template>\n    </PlBtnGhost>\n  </Teleport>\n</template>\n"],"mappings":";;;;;;;;;;;EAiBA,IAAM,IAAS,EAAI,GAAM,EAEnB,EACJ,WACA,UACA,oBACA,WACA,WACA,kBACA,uBACA,WACA,YACA,iBACE,GAAS,EAEP,IAAiB,EAAgB,EAAgB,EAEjD,IAAc,QAAe,EAAO,OAAO,YAAY,EAEvD,IAAiB,QAAe;AACpC,OAAI,CAAC,EAAO,MAAO;GAEnB,IAAM,IAAI,IAAI,IAAI,2CAA2C,EAAO,MAAM,aAAa;AAMvF,UAJI,EAAc,SAChB,EAAE,aAAa,IAAI,SAAS,EAAc,MAAM,EAG3C,EAAE,UAAU;IACnB,EAEI,IAAU,QACT,EAAO,QAEL,CACL;GACE,OAAO,EAAO,MAAM;GACpB,OAAO,EAAO,MAAM;GACrB,CACF,GAPyB,EAAE,CAQ5B,EAEI,IAAa,QAAe;AAChC,WAAQ,EAAO,OAAf;IACE,KAAK,SACH,QAAO;IACT,KAAK,kBACH,QAAO;IACT,KAAK,mBACH,QAAO;IACT,KAAK,gBACH,QAAO;IACT,KAAK,WACH,QAAO;IACT,QACE,QAAO;;IAEX,EAEI,IAAU,QACV,EAAO,QAAc,oBAClB,mBACP;qCAIoB,EAAA,EAAe,IAAA,GAAA,EAAnC,EAsCe,EAAA,EAAA,EAAA;;eAtC+B,EAAA;4CAAM,QAAA;;GACvC,OAAK,QAGR,CAAA,GAAA,AAAA,EAAA,OAAA,CAFN,EAEM,OAAA,EAFD,OAAM,2BAAyB,EAAA,CAClC,EAAyB,QAAA,MAAnB,eAAY,CAAA,EAAA,GAAA,CAAA,CAAA,CAAA;oBAG+D;IAArF,EAAqF,EAAA,EAAA,EAAA;KAAzE,OAAM;KAAU,UAAA;KAAU,eAAa,EAAA;KAAc,SAAS,EAAA;;IAC1E,EAUY,GAAA;KAVA,WAAS,EAAA,EAAM;KAAG,cAAY,EAAA,EAAS;KAAG,eAAa,EAAA;;sBAS/D,CARF,EAQE,EAAA,EAAA,EAAA;MAPA,OAAM;MACN,OAAA;MACA,MAAK;MACL,OAAA,EAAA,eAAA,QAAyB;MACzB,MAAK;MACJ,SAAS,EAAA,EAAS;MAClB,SAAO,EAAA,EAAO;;;;;;;;IAGJ,EAAA,EAAK,IAAA,GAAA,EAApB,EAEU,EAAA,EAAA,EAAA;;KAFY,MAAK;;sBACd,CAAA,EAAA,EAAR,EAAA,EAAK,CAAA,EAAA,EAAA,CAAA,CAAA;;;IAGF,EAAA,SAAA,GAAA,EADR,EAIE,GAAA;;KAFC,OAAO,EAAA,EAAa;KACpB,oBAAkB,EAAA;;IAEF,EAAA,EAAkB,IAAA,GAAA,EAArC,EAA6E,GAAA;;KAArC,iBAAe,EAAA,EAAkB;;IACzD,EAAA,EAAM,IAAA,EAAA,GAAA,EACpB,EAQE,GAAA,EAAA,KAAA,GAAA,EAAA,EAPgB,EAAA,EAAM,GAAf,YADT,EAQE,GAAA;KANC,KAAK,EAAM;KACX,MAAM,EAAM;KACZ,OAAO,EAAM;KACb,MAAM,EAAM;KACZ,YAAU,EAAM;KAChB,WAAW,EAAM;;;;;;;;;;sCAKR,EAAA,EAAe,IAAI,EAAA,EAAc,IAAA,GAAA,EAAjD,EAOW,GAAA;;GAPyC,IAAI,EAAA,EAAc;MACpE,EAKa,EAAA,EAAA,EAAA,EALA,SAAK,AAAA,EAAA,OAAA,GAAA,MAAO,EAAA,QAAM,IAAA,CAAA,OAAA,CAAA,EAAA,EAAA;GAElB,QAAM,QACa,CAA5B,EAA4B,EAAA,EAAA,EAAA,EAAjB,MAAM,EAAA,OAAO,EAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,CAAA;oBAD1B,CAAA,AAAA,EAAA,OAAA,EAFsC,kBAEtC,GAAA,CAAA,CAAA"}

package/dist/plugins/Monetization/RunStatus.js

@@ -0,0 +1,7 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import t from "./RunStatus.vue2.js";
+import n from "./RunStatus.style.js";
+var r = /* @__PURE__ */ e(t, [["__cssModules", { $style: n }]]);
+export { r as default };
+
+//# sourceMappingURL=RunStatus.js.map

package/dist/plugins/Monetization/RunStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RunStatus.js","names":[],"sources":["../../../src/plugins/Monetization/RunStatus.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  canRun: boolean | undefined;\n  statusText: string | undefined;\n  isLoading?: boolean;\n}>();\n\nconst badgeText = computed(() => {\n  if (props.isLoading) {\n    return \"Updating...\";\n  }\n\n  if (props.canRun) {\n    return \"Ready to run\";\n  }\n\n  return \"Cannot run\";\n});\n</script>\n\n<template>\n  <div>\n    <div :class=\"[{ [$style['can-run']]: canRun, [$style.loading]: isLoading }, $style.container]\">\n      <div :class=\"$style.badge\">\n        <i :class=\"$style.blob\">\n          <span>\n            <span :class=\"$style.dot\" />\n          </span>\n        </i>\n        <span>{{ badgeText }}</span>\n      </div>\n      <slot />\n    </div>\n    <div v-if=\"statusText\" :class=\"$style.statusText\">{{ statusText }}</div>\n  </div>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  --blob-color: #ff5c5c;\n  --badge-background: rgba(255, 92, 92, 0.12);\n\n  &.can-run {\n    --blob-color: #49cc49;\n    --badge-background: rgba(99, 224, 36, 0.12);\n  }\n\n  &.loading {\n    --blob-color: #ffad0a;\n    --badge-background: rgba(255, 173, 10, 0.12);\n  }\n}\n\n.statusText {\n  margin-top: 6px;\n  color: var(--txt-error);\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n}\n\n.badge {\n  display: flex;\n  gap: 6px;\n  height: 40px;\n  padding: 6px 16px 6px 8px;\n  align-items: center;\n  border-radius: 6px;\n  border: 1px solid var(--badge-background);\n  background: var(--badge-background);\n}\n\n.blob {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  place-items: center;\n  place-content: center;\n\n  > span {\n    display: flex;\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    place-content: center;\n    place-items: center;\n    background-color: rgb(from var(--blob-color) r g b / 0.24);\n  }\n\n  .dot {\n    border-radius: 50%;\n    height: 8px;\n    width: 8px;\n    transform: scale(1);\n\n    background: var(--blob-color);\n    box-shadow: 0 0 0 0 var(--blob-color);\n    animation: pulse-glob 1s infinite;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/plugins/Monetization/RunStatus.style.js

@@ -0,0 +1,13 @@
+import './RunStatus.vue.css';var e = {
+	container: "_container_13j78_2",
+	"can-run": "_can-run_13j78_9",
+	loading: "_loading_13j78_14",
+	statusText: "_statusText_13j78_20",
+	badge: "_badge_13j78_28",
+	blob: "_blob_13j78_39",
+	"pulse-glob": "_pulse-glob_13j78_1",
+	dot: "_dot_13j78_56"
+};
+export { e as default };
+
+//# sourceMappingURL=RunStatus.style.js.map

package/dist/plugins/Monetization/RunStatus.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RunStatus.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/plugins/Monetization/RunStatus.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  canRun: boolean | undefined;\n  statusText: string | undefined;\n  isLoading?: boolean;\n}>();\n\nconst badgeText = computed(() => {\n  if (props.isLoading) {\n    return \"Updating...\";\n  }\n\n  if (props.canRun) {\n    return \"Ready to run\";\n  }\n\n  return \"Cannot run\";\n});\n</script>\n\n<template>\n  <div>\n    <div :class=\"[{ [$style['can-run']]: canRun, [$style.loading]: isLoading }, $style.container]\">\n      <div :class=\"$style.badge\">\n        <i :class=\"$style.blob\">\n          <span>\n            <span :class=\"$style.dot\" />\n          </span>\n        </i>\n        <span>{{ badgeText }}</span>\n      </div>\n      <slot />\n    </div>\n    <div v-if=\"statusText\" :class=\"$style.statusText\">{{ statusText }}</div>\n  </div>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  --blob-color: #ff5c5c;\n  --badge-background: rgba(255, 92, 92, 0.12);\n\n  &.can-run {\n    --blob-color: #49cc49;\n    --badge-background: rgba(99, 224, 36, 0.12);\n  }\n\n  &.loading {\n    --blob-color: #ffad0a;\n    --badge-background: rgba(255, 173, 10, 0.12);\n  }\n}\n\n.statusText {\n  margin-top: 6px;\n  color: var(--txt-error);\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n}\n\n.badge {\n  display: flex;\n  gap: 6px;\n  height: 40px;\n  padding: 6px 16px 6px 8px;\n  align-items: center;\n  border-radius: 6px;\n  border: 1px solid var(--badge-background);\n  background: var(--badge-background);\n}\n\n.blob {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  place-items: center;\n  place-content: center;\n\n  > span {\n    display: flex;\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    place-content: center;\n    place-items: center;\n    background-color: rgb(from var(--blob-color) r g b / 0.24);\n  }\n\n  .dot {\n    border-radius: 50%;\n    height: 8px;\n    width: 8px;\n    transform: scale(1);\n\n    background: var(--blob-color);\n    box-shadow: 0 0 0 0 var(--blob-color);\n    animation: pulse-glob 1s infinite;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/plugins/Monetization/RunStatus.vue.css

@@ -0,0 +1 @@
+._container_13j78_2{--blob-color:#ff5c5c;--badge-background:#ff5c5c1f;align-items:center;gap:8px;display:flex}._container_13j78_2._can-run_13j78_9{--blob-color:#49cc49;--badge-background:#63e0241f}._container_13j78_2._loading_13j78_14{--blob-color:#ffad0a;--badge-background:#ffad0a1f}._statusText_13j78_20{color:var(--txt-error);margin-top:6px;font-size:14px;font-weight:500;line-height:20px}._badge_13j78_28{border:1px solid var(--badge-background);background:var(--badge-background);border-radius:6px;align-items:center;gap:6px;height:40px;padding:6px 16px 6px 8px;display:flex}._blob_13j78_39{place-content:center;place-items:center;width:24px;height:24px;display:flex}._blob_13j78_39>span{background-color:rgb(from var(--blob-color) r g b / .24);border-radius:50%;place-content:center;place-items:center;width:16px;height:16px;display:flex}._blob_13j78_39 ._dot_13j78_56{background:var(--blob-color);width:8px;height:8px;box-shadow:0 0 0 0 var(--blob-color);border-radius:50%;animation:1s infinite _pulse-glob_13j78_1;transform:scale(1)}

package/dist/plugins/Monetization/RunStatus.vue2.js

@@ -1,41 +1,22 @@
-import { defineComponent as i, computed as d, createElementBlock as l, openBlock as o, createElementVNode as n, createCommentVNode as c, normalizeClass as a, renderSlot as y, toDisplayString as u } from "vue";
-const g = /* @__PURE__ */ i({
-  __name: "RunStatus",
-  props: {
-    canRun: { type: Boolean },
-    statusText: {},
-    isLoading: { type: Boolean }
-  },
-  setup(t) {
-    const s = t, r = d(() => s.isLoading ? "Updating..." : s.canRun ? "Ready to run" : "Cannot run");
-    return (e, m) => (o(), l("div", null, [
-      n("div", {
-        class: a([{ [e.$style["can-run"]]: t.canRun, [e.$style.loading]: t.isLoading }, e.$style.container])
-      }, [
-        n("div", {
-          class: a(e.$style.badge)
-        }, [
-          n("i", {
-            class: a(e.$style.blob)
-          }, [
-            n("span", null, [
-              n("span", {
-                class: a(e.$style.dot)
-              }, null, 2)
-            ])
-          ], 2),
-          n("span", null, u(r.value), 1)
-        ], 2),
-        y(e.$slots, "default")
-      ], 2),
-      t.statusText ? (o(), l("div", {
-        key: 0,
-        class: a(e.$style.statusText)
-      }, u(t.statusText), 3)) : c("", !0)
-    ]));
-  }
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, openBlock as o, renderSlot as s, toDisplayString as c } from "vue";
+var l = /* @__PURE__ */ i({
+	__name: "RunStatus",
+	props: {
+		canRun: { type: Boolean },
+		statusText: {},
+		isLoading: { type: Boolean }
+	},
+	setup(i) {
+		let l = i, u = e(() => l.isLoading ? "Updating..." : l.canRun ? "Ready to run" : "Cannot run");
+		return (e, l) => (o(), n("div", null, [r("div", { class: a([{
+			[e.$style["can-run"]]: i.canRun,
+			[e.$style.loading]: i.isLoading
+		}, e.$style.container]) }, [r("div", { class: a(e.$style.badge) }, [r("i", { class: a(e.$style.blob) }, [r("span", null, [r("span", { class: a(e.$style.dot) }, null, 2)])], 2), r("span", null, c(u.value), 1)], 2), s(e.$slots, "default")], 2), i.statusText ? (o(), n("div", {
+			key: 0,
+			class: a(e.$style.statusText)
+		}, c(i.statusText), 3)) : t("", !0)]));
+	}
 });
-export {
-  g as default
-};
-//# sourceMappingURL=RunStatus.vue2.js.map
+export { l as default };
+
+//# sourceMappingURL=RunStatus.vue2.js.map