@platforma-sdk/ui-vue 1.58.8 → 1.58.9

package/dist/aggrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"aggrid.js","sources":["../src/aggrid.ts"],"sourcesContent":["import {\n  AllEnterpriseModule,\n  createPart,\n  LicenseManager,\n  ModuleRegistry,\n  type Theme,\n  themeQuartz,\n} from \"ag-grid-enterprise\";\nimport { getEnvironmentValue } from \"@platforma-sdk/model\";\nimport OverrideCss from \"./components/PlAgDataTable/ag-override.css?raw\";\n\nexport function activateAgGrid() {\n  ModuleRegistry.registerModules([AllEnterpriseModule]);\n  const agGridLicense = getEnvironmentValue(\"AGGRID_LICENSE\");\n  if (agGridLicense) {\n    LicenseManager.setLicenseKey(agGridLicense);\n    console.log(\"AG Grid Activated\");\n  } else {\n    console.log(\"AG Grid License not found\");\n  }\n}\n\nconst agGridOverrideStyles = createPart({ feature: \"headerBottomBorder\", css: OverrideCss });\n\nexport const AgGridTheme: Theme = themeQuartz\n  .withParams({\n    headerColumnResizeHandleColor: \"transparent\",\n    accentColor: \"#49cc49\",\n    borderColor: \"#E1E3EB\",\n    cellHorizontalPaddingScale: 1,\n    checkboxBorderRadius: \"3px\",\n    checkboxCheckedBackgroundColor: \"#110529\",\n    checkboxCheckedBorderColor: \"#110529\",\n    checkboxIndeterminateBackgroundColor: \"#110529\",\n    checkboxIndeterminateBorderColor: \"#110529\",\n    checkboxUncheckedBorderColor: \"#CFD1DB\",\n    columnBorder: true,\n    columnHoverColor: \"#9BABCC16\",\n    fontFamily: \"inherit\",\n    foregroundColor: \"#110529\",\n    headerBackgroundColor: \"#F7F8FA\",\n    headerColumnBorder: true,\n    headerFontWeight: 600,\n    headerRowBorder: true,\n    headerVerticalPaddingScale: 0.8,\n    iconButtonHoverColor: \"#9BABCC32\",\n    iconSize: \"16px\",\n    menuBackgroundColor: \"#FFFFFF\",\n    menuBorder: true,\n    menuTextColor: \"#110529\",\n    rowHoverColor: \"#9BABCC16\",\n    rowVerticalPaddingScale: 1,\n    selectedRowBackgroundColor: \"#63E02424\",\n    sidePanelBorder: false,\n    spacing: \"8px\",\n    tooltipBackgroundColor: \"#110529\",\n    tooltipTextColor: \"#FFFFFF\",\n    wrapperBorderRadius: \"6px\",\n  })\n  .withPart(agGridOverrideStyles);\n"],"names":["activateAgGrid","ModuleRegistry","AllEnterpriseModule","agGridLicense","getEnvironmentValue","LicenseManager","agGridOverrideStyles","createPart","OverrideCss","AgGridTheme","themeQuartz"],"mappings":";;;AAWO,SAASA,IAAiB;AAC/B,EAAAC,EAAe,gBAAgB,CAACC,CAAmB,CAAC;AACpD,QAAMC,IAAgBC,EAAoB,gBAAgB;AAC1D,EAAID,KACFE,EAAe,cAAcF,CAAa,GAC1C,QAAQ,IAAI,mBAAmB,KAE/B,QAAQ,IAAI,2BAA2B;AAE3C;AAEA,MAAMG,IAAuBC,EAAW,EAAE,SAAS,sBAAsB,KAAKC,GAAa,GAE9EC,IAAqBC,EAC/B,WAAW;AAAA,EACV,+BAA+B;AAAA,EAC/B,aAAa;AAAA,EACb,aAAa;AAAA,EACb,4BAA4B;AAAA,EAC5B,sBAAsB;AAAA,EACtB,gCAAgC;AAAA,EAChC,4BAA4B;AAAA,EAC5B,sCAAsC;AAAA,EACtC,kCAAkC;AAAA,EAClC,8BAA8B;AAAA,EAC9B,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,uBAAuB;AAAA,EACvB,oBAAoB;AAAA,EACpB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,4BAA4B;AAAA,EAC5B,sBAAsB;AAAA,EACtB,UAAU;AAAA,EACV,qBAAqB;AAAA,EACrB,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,eAAe;AAAA,EACf,yBAAyB;AAAA,EACzB,4BAA4B;AAAA,EAC5B,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,wBAAwB;AAAA,EACxB,kBAAkB;AAAA,EAClB,qBAAqB;AACvB,CAAC,EACA,SAASJ,CAAoB;"}
+{"version":3,"file":"aggrid.js","names":[],"sources":["../src/aggrid.ts"],"sourcesContent":["import {\n  AllEnterpriseModule,\n  createPart,\n  LicenseManager,\n  ModuleRegistry,\n  type Theme,\n  themeQuartz,\n} from \"ag-grid-enterprise\";\nimport { getEnvironmentValue } from \"@platforma-sdk/model\";\nimport OverrideCss from \"./components/PlAgDataTable/ag-override.css?raw\";\n\nexport function activateAgGrid() {\n  ModuleRegistry.registerModules([AllEnterpriseModule]);\n  const agGridLicense = getEnvironmentValue(\"AGGRID_LICENSE\");\n  if (agGridLicense) {\n    LicenseManager.setLicenseKey(agGridLicense);\n    console.log(\"AG Grid Activated\");\n  } else {\n    console.log(\"AG Grid License not found\");\n  }\n}\n\nconst agGridOverrideStyles = createPart({ feature: \"headerBottomBorder\", css: OverrideCss });\n\nexport const AgGridTheme: Theme = themeQuartz\n  .withParams({\n    headerColumnResizeHandleColor: \"transparent\",\n    accentColor: \"#49cc49\",\n    borderColor: \"#E1E3EB\",\n    cellHorizontalPaddingScale: 1,\n    checkboxBorderRadius: \"3px\",\n    checkboxCheckedBackgroundColor: \"#110529\",\n    checkboxCheckedBorderColor: \"#110529\",\n    checkboxIndeterminateBackgroundColor: \"#110529\",\n    checkboxIndeterminateBorderColor: \"#110529\",\n    checkboxUncheckedBorderColor: \"#CFD1DB\",\n    columnBorder: true,\n    columnHoverColor: \"#9BABCC16\",\n    fontFamily: \"inherit\",\n    foregroundColor: \"#110529\",\n    headerBackgroundColor: \"#F7F8FA\",\n    headerColumnBorder: true,\n    headerFontWeight: 600,\n    headerRowBorder: true,\n    headerVerticalPaddingScale: 0.8,\n    iconButtonHoverColor: \"#9BABCC32\",\n    iconSize: \"16px\",\n    menuBackgroundColor: \"#FFFFFF\",\n    menuBorder: true,\n    menuTextColor: \"#110529\",\n    rowHoverColor: \"#9BABCC16\",\n    rowVerticalPaddingScale: 1,\n    selectedRowBackgroundColor: \"#63E02424\",\n    sidePanelBorder: false,\n    spacing: \"8px\",\n    tooltipBackgroundColor: \"#110529\",\n    tooltipTextColor: \"#FFFFFF\",\n    wrapperBorderRadius: \"6px\",\n  })\n  .withPart(agGridOverrideStyles);\n"],"mappings":";;;AAWA,SAAgB,IAAiB;AAC/B,GAAe,gBAAgB,CAAC,EAAoB,CAAC;CACrD,IAAM,IAAgB,EAAoB,iBAAiB;AAC3D,CAAI,KACF,EAAe,cAAc,EAAc,EAC3C,QAAQ,IAAI,oBAAoB,IAEhC,QAAQ,IAAI,4BAA4B;;AAI5C,IAAM,IAAuB,EAAW;CAAE,SAAS;CAAsB,KAAK;CAAa,CAAC;AAE5F,MAAa,IAAqB,EAC/B,WAAW;CACV,+BAA+B;CAC/B,aAAa;CACb,aAAa;CACb,4BAA4B;CAC5B,sBAAsB;CACtB,gCAAgC;CAChC,4BAA4B;CAC5B,sCAAsC;CACtC,kCAAkC;CAClC,8BAA8B;CAC9B,cAAc;CACd,kBAAkB;CAClB,YAAY;CACZ,iBAAiB;CACjB,uBAAuB;CACvB,oBAAoB;CACpB,kBAAkB;CAClB,iBAAiB;CACjB,4BAA4B;CAC5B,sBAAsB;CACtB,UAAU;CACV,qBAAqB;CACrB,YAAY;CACZ,eAAe;CACf,eAAe;CACf,yBAAyB;CACzB,4BAA4B;CAC5B,iBAAiB;CACjB,SAAS;CACT,wBAAwB;CACxB,kBAAkB;CAClB,qBAAqB;CACtB,CAAC,CACD,SAAS,EAAqB"}

package/dist/assets/block.css

@@ -1 +1 @@
-.block{flex:1;background-color:#fff;max-height:100%;max-width:100%;width:100%;height:100%;position:relative;display:flex;flex-direction:column;--thumb-color: var(--ic-02);overflow-y:auto;overflow-x:auto}.block::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.block::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.block::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.block__not-found,.block__loader-page{display:flex;flex-direction:column;flex:1;align-items:center;justify-content:center}.block__loader-page .loader-container{display:flex;transform:scale(8)}.block__loader-page .loader-icon{animation:spin 4s linear infinite;background-color:#ccc;margin:auto}.block__layout{padding:0}.block__loader{height:4px;background-color:transparent;position:absolute;z-index:1;top:0;right:0;left:0;overflow:hidden}.block__loader:before{content:"";position:absolute;left:-50%;height:4px;width:33%;background-color:var(--border-color-focus);animation:loader-animation 1.3s linear infinite}.block__progress{--progress-width: 0%;height:4px;background-color:transparent;position:absolute;top:0;right:0;left:0;overflow:hidden}.block__progress:before{content:"";position:absolute;left:0;height:4px;width:var(--progress-width);background-color:var(--border-color-focus);will-change:width;background-image:linear-gradient(90deg,#0000,#fffc,#0000);background-position:0 0;background-size:80px 100%;background-repeat:repeat-y;animation:shine-animation 1.2s linear infinite}@keyframes shine-animation{0%{background-position:-160px 0}to{background-position:calc(100% + 80px) 0}}.block__error{background:var(--txt-error);color:#fff;max-height:50vh;padding:16px 24px;-webkit-user-select:auto;user-select:auto;width:100%;overflow:auto;display:flex;flex-direction:column;--thumb-color: var(--ic-02);overflow-y:auto;overflow-x:auto}.block__error::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.block__error::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.block__error::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.block__error pre{white-space:pre-wrap;margin:0}.block .scroll-content{height:100%;display:flex;flex-direction:column}.block .scroll-content>div:last-child{flex:1;overflow:auto}@keyframes loader-animation{0%{left:-40%}50%{left:20%;width:38%}to{left:100%;width:50%}}
+.block{--thumb-color:var(--ic-02);background-color:#fff;flex-direction:column;flex:1;width:100%;max-width:100%;height:100%;max-height:100%;display:flex;position:relative;overflow:auto}.block::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.block::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.block::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.block__not-found,.block__loader-page{flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.block__loader-page .loader-container{display:flex;transform:scale(8)}.block__loader-page .loader-icon{background-color:#ccc;margin:auto;animation:4s linear infinite spin}.block__layout{padding:0}.block__loader{z-index:1;background-color:#0000;height:4px;position:absolute;top:0;left:0;right:0;overflow:hidden}.block__loader:before{content:"";background-color:var(--border-color-focus);width:33%;height:4px;animation:1.3s linear infinite loader-animation;position:absolute;left:-50%}.block__progress{--progress-width:0%;background-color:#0000;height:4px;position:absolute;top:0;left:0;right:0;overflow:hidden}.block__progress:before{content:"";height:4px;width:var(--progress-width);background-color:var(--border-color-focus);will-change:width;background-image:linear-gradient(90deg,#0000 0%,#fffc 50%,#0000 100%);background-position:0 0;background-repeat:repeat-y;background-size:80px 100%;animation:1.2s linear infinite shine-animation;position:absolute;left:0}@keyframes shine-animation{0%{background-position:-160px 0}to{background-position:calc(100% + 80px) 0}}.block__error{background:var(--txt-error);color:#fff;-webkit-user-select:auto;user-select:auto;--thumb-color:var(--ic-02);flex-direction:column;width:100%;max-height:50vh;padding:16px 24px;display:flex;overflow:auto}.block__error::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.block__error::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.block__error::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.block__error pre{white-space:pre-wrap;margin:0}.block .scroll-content{flex-direction:column;height:100%;display:flex}.block .scroll-content>div:last-child{flex:1;overflow:auto}@keyframes loader-animation{0%{left:-40%}50%{width:38%;left:20%}to{width:50%;left:100%}}

package/dist/assets/ui.css

@@ -0,0 +1 @@
+*{cursor:inherit;box-sizing:border-box;-webkit-font-smoothing:antialiased}.invisible-scrollbar::-webkit-scrollbar{display:none}.block{--thumb-color:var(--ic-02);background-color:#fff;flex-direction:column;flex:1;width:100%;max-width:100%;height:100%;max-height:100%;display:flex;position:relative;overflow:auto}.block::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.block::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.block::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.block__not-found,.block__loader-page{flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.block__loader-page .loader-container{display:flex;transform:scale(8)}.block__loader-page .loader-icon{background-color:#ccc;margin:auto;animation:4s linear infinite spin}.block__layout{padding:0}.block__loader{z-index:1;background-color:#0000;height:4px;position:absolute;top:0;left:0;right:0;overflow:hidden}.block__loader:before{content:"";background-color:var(--border-color-focus);width:33%;height:4px;animation:1.3s linear infinite loader-animation;position:absolute;left:-50%}.block__progress{--progress-width:0%;background-color:#0000;height:4px;position:absolute;top:0;left:0;right:0;overflow:hidden}.block__progress:before{content:"";height:4px;width:var(--progress-width);background-color:var(--border-color-focus);will-change:width;background-image:linear-gradient(90deg,#0000 0%,#fffc 50%,#0000 100%);background-position:0 0;background-repeat:repeat-y;background-size:80px 100%;animation:1.2s linear infinite shine-animation;position:absolute;left:0}@keyframes shine-animation{0%{background-position:-160px 0}to{background-position:calc(100% + 80px) 0}}.block__error{background:var(--txt-error);color:#fff;-webkit-user-select:auto;user-select:auto;--thumb-color:var(--ic-02);flex-direction:column;width:100%;max-height:50vh;padding:16px 24px;display:flex;overflow:auto}.block__error::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.block__error::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.block__error::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.block__error pre{white-space:pre-wrap;margin:0}.block .scroll-content{flex-direction:column;height:100%;display:flex}.block .scroll-content>div:last-child{flex:1;overflow:auto}@keyframes loader-animation{0%{left:-40%}50%{width:38%;left:20%}to{width:50%;left:100%}}.alert-error{background-color:var(--txt-error);color:#fff;padding:24px}.pl-ag-header-align-center .ag-header-cell-label{justify-content:center}

package/dist/components/BlockLayout.js

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

package/dist/components/BlockLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockLayout.js","names":[],"sources":["../../src/components/BlockLayout.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport \"../assets/block.scss\";\nimport { computed } from \"vue\";\nimport { useSdkPlugin } from \"../defineApp\";\nimport NotFound from \"./NotFound.vue\";\nimport LoaderPage from \"./LoaderPage.vue\";\nimport { PlAppErrorNotificationAlert } from \"./PlAppErrorNotificationAlert\";\nimport BlockLoader from \"./BlockLoader.vue\";\nimport { MonetizationSidebar } from \"../plugins/Monetization\";\n\nconst sdk = useSdkPlugin();\n\nconst parsePathname = (href: `/${string}`) => {\n  try {\n    return new URL(href, \"http://dummy\").pathname as `/${string}`;\n  } catch (_cause) {\n    console.error(\"Invalid href\", href);\n    return undefined;\n  }\n};\n\nconst href = computed(() => (sdk.loaded ? sdk.useApp().href : undefined));\n\nconst CurrentView = computed(() => {\n  if (sdk.loaded) {\n    const app = sdk.useApp();\n    const pathname = parsePathname(app.snapshot.navigationState.href);\n    return pathname ? app.getRoute(pathname) : undefined;\n  }\n\n  return undefined;\n});\n\nconst app = computed(() => (sdk.loaded ? sdk.useApp() : undefined));\n\nconst errors = computed(() => (app.value ? app.value.model.outputErrors : {}));\n\nconst showErrorsNotification = computed(() => app.value?.showErrorsNotification ?? true);\n\nconst progress = computed(() => app.value?.progress?.());\n</script>\n\n<template>\n  <div class=\"block block__layout\">\n    <BlockLoader :value=\"progress\" />\n    <div v-if=\"sdk.error\" :class=\"$style.error\">{{ sdk.error }}</div>\n    <LoaderPage v-else-if=\"!sdk.loaded\">Loading...</LoaderPage>\n    <component :is=\"CurrentView\" v-else-if=\"CurrentView\" :key=\"href\" />\n    <NotFound v-else />\n    <PlAppErrorNotificationAlert v-if=\"sdk.loaded && showErrorsNotification\" :errors=\"errors\" />\n  </div>\n  <!-- Plugins -->\n  <MonetizationSidebar v-if=\"CurrentView\" />\n</template>\n\n<style module>\n.error {\n  color: red;\n  font-weight: bold;\n  padding: 24px;\n}\n</style>\n"],"mappings":""}

package/dist/components/BlockLayout.style.js

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

package/dist/components/BlockLayout.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockLayout.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../src/components/BlockLayout.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport \"../assets/block.scss\";\nimport { computed } from \"vue\";\nimport { useSdkPlugin } from \"../defineApp\";\nimport NotFound from \"./NotFound.vue\";\nimport LoaderPage from \"./LoaderPage.vue\";\nimport { PlAppErrorNotificationAlert } from \"./PlAppErrorNotificationAlert\";\nimport BlockLoader from \"./BlockLoader.vue\";\nimport { MonetizationSidebar } from \"../plugins/Monetization\";\n\nconst sdk = useSdkPlugin();\n\nconst parsePathname = (href: `/${string}`) => {\n  try {\n    return new URL(href, \"http://dummy\").pathname as `/${string}`;\n  } catch (_cause) {\n    console.error(\"Invalid href\", href);\n    return undefined;\n  }\n};\n\nconst href = computed(() => (sdk.loaded ? sdk.useApp().href : undefined));\n\nconst CurrentView = computed(() => {\n  if (sdk.loaded) {\n    const app = sdk.useApp();\n    const pathname = parsePathname(app.snapshot.navigationState.href);\n    return pathname ? app.getRoute(pathname) : undefined;\n  }\n\n  return undefined;\n});\n\nconst app = computed(() => (sdk.loaded ? sdk.useApp() : undefined));\n\nconst errors = computed(() => (app.value ? app.value.model.outputErrors : {}));\n\nconst showErrorsNotification = computed(() => app.value?.showErrorsNotification ?? true);\n\nconst progress = computed(() => app.value?.progress?.());\n</script>\n\n<template>\n  <div class=\"block block__layout\">\n    <BlockLoader :value=\"progress\" />\n    <div v-if=\"sdk.error\" :class=\"$style.error\">{{ sdk.error }}</div>\n    <LoaderPage v-else-if=\"!sdk.loaded\">Loading...</LoaderPage>\n    <component :is=\"CurrentView\" v-else-if=\"CurrentView\" :key=\"href\" />\n    <NotFound v-else />\n    <PlAppErrorNotificationAlert v-if=\"sdk.loaded && showErrorsNotification\" :errors=\"errors\" />\n  </div>\n  <!-- Plugins -->\n  <MonetizationSidebar v-if=\"CurrentView\" />\n</template>\n\n<style module>\n.error {\n  color: red;\n  font-weight: bold;\n  padding: 24px;\n}\n</style>\n"],"mappings":""}

package/dist/components/BlockLayout.vue.css

@@ -0,0 +1 @@
+._error_rqtei_2{color:red;padding:24px;font-weight:700}

package/dist/components/BlockLayout.vue2.js

@@ -1,55 +1,43 @@
-import { defineComponent as _, computed as a, createElementBlock as i, openBlock as t, Fragment as k, createElementVNode as y, createBlock as s, createCommentVNode as c, createVNode as h, unref as n, normalizeClass as g, toDisplayString as C, withCtx as N, createTextVNode as w, resolveDynamicComponent as E } from "vue";
-import '../assets/block.css';/* empty css                   */
-import { useSdkPlugin as V } from "../defineApp.js";
-import $ from "./NotFound.vue.js";
-import B from "./LoaderPage.vue.js";
-import L from "./BlockLoader.vue.js";
-import x from "../plugins/Monetization/MonetizationSidebar.vue.js";
-import A from "./PlAppErrorNotificationAlert/PlAppErrorNotificationAlert.vue.js";
-const P = { class: "block block__layout" }, j = /* @__PURE__ */ _({
-  __name: "BlockLayout",
-  setup(S) {
-    const o = V(), m = (e) => {
-      try {
-        return new URL(e, "http://dummy").pathname;
-      } catch {
-        console.error("Invalid href", e);
-        return;
-      }
-    }, p = a(() => o.loaded ? o.useApp().href : void 0), u = a(() => {
-      if (o.loaded) {
-        const e = o.useApp(), r = m(e.snapshot.navigationState.href);
-        return r ? e.getRoute(r) : void 0;
-      }
-    }), l = a(() => o.loaded ? o.useApp() : void 0), d = a(() => l.value ? l.value.model.outputErrors : {}), v = a(() => {
-      var e;
-      return ((e = l.value) == null ? void 0 : e.showErrorsNotification) ?? !0;
-    }), f = a(() => {
-      var e, r;
-      return (r = (e = l.value) == null ? void 0 : e.progress) == null ? void 0 : r.call(e);
-    });
-    return (e, r) => (t(), i(k, null, [
-      y("div", P, [
-        h(L, { value: f.value }, null, 8, ["value"]),
-        n(o).error ? (t(), i("div", {
-          key: 0,
-          class: g(e.$style.error)
-        }, C(n(o).error), 3)) : n(o).loaded ? u.value ? (t(), s(E(u.value), { key: p.value })) : (t(), s($, { key: 3 })) : (t(), s(B, { key: 1 }, {
-          default: N(() => [...r[0] || (r[0] = [
-            w("Loading...", -1)
-          ])]),
-          _: 1
-        })),
-        n(o).loaded && v.value ? (t(), s(n(A), {
-          key: 4,
-          errors: d.value
-        }, null, 8, ["errors"])) : c("", !0)
-      ]),
-      u.value ? (t(), s(n(x), { key: 0 })) : c("", !0)
-    ], 64));
-  }
+import '../assets/block.css';/* empty css              */
+import { useSdkPlugin as e } from "../defineApp.js";
+import t from "./NotFound.js";
+import n from "./LoaderPage.js";
+import r from "./PlAppErrorNotificationAlert/PlAppErrorNotificationAlert.js";
+import i from "./BlockLoader.js";
+import a from "../plugins/Monetization/MonetizationSidebar.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, openBlock as g, resolveDynamicComponent as _, toDisplayString as v, unref as y, withCtx as b } from "vue";
+var x = { class: "block block__layout" }, S = /* @__PURE__ */ m({
+	__name: "BlockLayout",
+	setup(m) {
+		let S = e(), C = (e) => {
+			try {
+				return new URL(e, "http://dummy").pathname;
+			} catch {
+				console.error("Invalid href", e);
+				return;
+			}
+		}, w = s(() => S.loaded ? S.useApp().href : void 0), T = s(() => {
+			if (S.loaded) {
+				let e = S.useApp(), t = C(e.snapshot.navigationState.href);
+				return t ? e.getRoute(t) : void 0;
+			}
+		}), E = s(() => S.loaded ? S.useApp() : void 0), D = s(() => E.value ? E.value.model.outputErrors : {}), O = s(() => E.value?.showErrorsNotification ?? !0), k = s(() => E.value?.progress?.());
+		return (e, s) => (g(), u(o, null, [d("div", x, [
+			p(i, { value: k.value }, null, 8, ["value"]),
+			y(S).error ? (g(), u("div", {
+				key: 0,
+				class: h(e.$style.error)
+			}, v(y(S).error), 3)) : y(S).loaded ? T.value ? (g(), c(_(T.value), { key: w.value })) : (g(), c(t, { key: 3 })) : (g(), c(n, { key: 1 }, {
+				default: b(() => [...s[0] ||= [f("Loading...", -1)]]),
+				_: 1
+			})),
+			y(S).loaded && O.value ? (g(), c(y(r), {
+				key: 4,
+				errors: D.value
+			}, null, 8, ["errors"])) : l("", !0)
+		]), T.value ? (g(), c(y(a), { key: 0 })) : l("", !0)], 64));
+	}
 });
-export {
-  j as default
-};
-//# sourceMappingURL=BlockLayout.vue2.js.map
+export { S as default };
+
+//# sourceMappingURL=BlockLayout.vue2.js.map

package/dist/components/BlockLayout.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlockLayout.vue2.js","sources":["../../src/components/BlockLayout.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport \"../assets/block.scss\";\nimport { computed } from \"vue\";\nimport { useSdkPlugin } from \"../defineApp\";\nimport NotFound from \"./NotFound.vue\";\nimport LoaderPage from \"./LoaderPage.vue\";\nimport { PlAppErrorNotificationAlert } from \"./PlAppErrorNotificationAlert\";\nimport BlockLoader from \"./BlockLoader.vue\";\nimport { MonetizationSidebar } from \"../plugins/Monetization\";\n\nconst sdk = useSdkPlugin();\n\nconst parsePathname = (href: `/${string}`) => {\n  try {\n    return new URL(href, \"http://dummy\").pathname as `/${string}`;\n  } catch (_cause) {\n    console.error(\"Invalid href\", href);\n    return undefined;\n  }\n};\n\nconst href = computed(() => (sdk.loaded ? sdk.useApp().href : undefined));\n\nconst CurrentView = computed(() => {\n  if (sdk.loaded) {\n    const app = sdk.useApp();\n    const pathname = parsePathname(app.snapshot.navigationState.href);\n    return pathname ? app.getRoute(pathname) : undefined;\n  }\n\n  return undefined;\n});\n\nconst app = computed(() => (sdk.loaded ? sdk.useApp() : undefined));\n\nconst errors = computed(() => (app.value ? app.value.model.outputErrors : {}));\n\nconst showErrorsNotification = computed(() => app.value?.showErrorsNotification ?? true);\n\nconst progress = computed(() => app.value?.progress?.());\n</script>\n\n<template>\n  <div class=\"block block__layout\">\n    <BlockLoader :value=\"progress\" />\n    <div v-if=\"sdk.error\" :class=\"$style.error\">{{ sdk.error }}</div>\n    <LoaderPage v-else-if=\"!sdk.loaded\">Loading...</LoaderPage>\n    <component :is=\"CurrentView\" v-else-if=\"CurrentView\" :key=\"href\" />\n    <NotFound v-else />\n    <PlAppErrorNotificationAlert v-if=\"sdk.loaded && showErrorsNotification\" :errors=\"errors\" />\n  </div>\n  <!-- Plugins -->\n  <MonetizationSidebar v-if=\"CurrentView\" />\n</template>\n\n<style module>\n.error {\n  color: red;\n  font-weight: bold;\n  padding: 24px;\n}\n</style>\n"],"names":["sdk","useSdkPlugin","parsePathname","href","computed","CurrentView","app","pathname","errors","showErrorsNotification","_a","progress","_b","_createElementVNode","_hoisted_1","_createVNode","BlockLoader","_unref","_createElementBlock","_normalizeClass","$style","_toDisplayString","_openBlock","_createBlock","_resolveDynamicComponent","NotFound","LoaderPage","_cache","PlAppErrorNotificationAlert","MonetizationSidebar"],"mappings":";;;;;;;;;;;AAUA,UAAMA,IAAMC,EAAA,GAENC,IAAgB,CAACC,MAAuB;AAC5C,UAAI;AACF,eAAO,IAAI,IAAIA,GAAM,cAAc,EAAE;AAAA,MACvC,QAAiB;AACf,gBAAQ,MAAM,gBAAgBA,CAAI;AAClC;AAAA,MACF;AAAA,IACF,GAEMA,IAAOC,EAAS,MAAOJ,EAAI,SAASA,EAAI,OAAA,EAAS,OAAO,MAAU,GAElEK,IAAcD,EAAS,MAAM;AACjC,UAAIJ,EAAI,QAAQ;AACd,cAAMM,IAAMN,EAAI,OAAA,GACVO,IAAWL,EAAcI,EAAI,SAAS,gBAAgB,IAAI;AAChE,eAAOC,IAAWD,EAAI,SAASC,CAAQ,IAAI;AAAA,MAC7C;AAAA,IAGF,CAAC,GAEKD,IAAMF,EAAS,MAAOJ,EAAI,SAASA,EAAI,OAAA,IAAW,MAAU,GAE5DQ,IAASJ,EAAS,MAAOE,EAAI,QAAQA,EAAI,MAAM,MAAM,eAAe,EAAG,GAEvEG,IAAyBL,EAAS,MAAA;;AAAM,eAAAM,IAAAJ,EAAI,UAAJ,gBAAAI,EAAW,2BAA0B;AAAA,KAAI,GAEjFC,IAAWP,EAAS,MAAA;;AAAM,cAAAQ,KAAAF,IAAAJ,EAAI,UAAJ,gBAAAI,EAAW,aAAX,gBAAAE,EAAA,KAAAF;AAAA,KAAuB;;MAIrDG,EAOM,OAPNC,GAOM;AAAA,QANJC,EAAiCC,GAAA,EAAnB,OAAOL,EAAA,MAAA,GAAQ,MAAA,GAAA,CAAA,OAAA,CAAA;AAAA,QAClBM,EAAAjB,CAAA,EAAI,cAAfkB,EAAiE,OAAA;AAAA;UAA1C,OAAKC,EAAEC,EAAAA,OAAO,KAAK;AAAA,QAAA,GAAKC,EAAAJ,EAAAjB,CAAA,EAAI,KAAK,GAAA,CAAA,KAChCiB,EAAAjB,CAAA,EAAI,SACYK,EAAA,SAAxCiB,EAAA,GAAAC,EAAmEC,EAAnDnB,EAAA,KAAW,GAAA,EAA2B,KAAKF,EAAA,MAAA,CAAI,WAC/DoB,EAAmBE,GAAA,EAAA,KAAA,EAAA,CAAA,WAFnBF,EAA2DG,GAAA,EAAA,KAAA,KAAA;AAAA,qBAAvB,MAAU,CAAA,GAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,cAAV,cAAU,EAAA;AAAA,UAAA;;;QAGXV,EAAAjB,CAAA,EAAI,UAAUS,EAAA,cAAjDc,EAA4FN,EAAAW,CAAA,GAAA;AAAA;UAAlB,QAAQpB,EAAA;AAAA,QAAA;;MAGzDH,EAAA,cAA3BkB,EAA0CN,EAAAY,CAAA,GAAA,EAAA,KAAA,EAAA,CAAA;;;;"}
+{"version":3,"file":"BlockLayout.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../src/components/BlockLayout.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport \"../assets/block.scss\";\nimport { computed } from \"vue\";\nimport { useSdkPlugin } from \"../defineApp\";\nimport NotFound from \"./NotFound.vue\";\nimport LoaderPage from \"./LoaderPage.vue\";\nimport { PlAppErrorNotificationAlert } from \"./PlAppErrorNotificationAlert\";\nimport BlockLoader from \"./BlockLoader.vue\";\nimport { MonetizationSidebar } from \"../plugins/Monetization\";\n\nconst sdk = useSdkPlugin();\n\nconst parsePathname = (href: `/${string}`) => {\n  try {\n    return new URL(href, \"http://dummy\").pathname as `/${string}`;\n  } catch (_cause) {\n    console.error(\"Invalid href\", href);\n    return undefined;\n  }\n};\n\nconst href = computed(() => (sdk.loaded ? sdk.useApp().href : undefined));\n\nconst CurrentView = computed(() => {\n  if (sdk.loaded) {\n    const app = sdk.useApp();\n    const pathname = parsePathname(app.snapshot.navigationState.href);\n    return pathname ? app.getRoute(pathname) : undefined;\n  }\n\n  return undefined;\n});\n\nconst app = computed(() => (sdk.loaded ? sdk.useApp() : undefined));\n\nconst errors = computed(() => (app.value ? app.value.model.outputErrors : {}));\n\nconst showErrorsNotification = computed(() => app.value?.showErrorsNotification ?? true);\n\nconst progress = computed(() => app.value?.progress?.());\n</script>\n\n<template>\n  <div class=\"block block__layout\">\n    <BlockLoader :value=\"progress\" />\n    <div v-if=\"sdk.error\" :class=\"$style.error\">{{ sdk.error }}</div>\n    <LoaderPage v-else-if=\"!sdk.loaded\">Loading...</LoaderPage>\n    <component :is=\"CurrentView\" v-else-if=\"CurrentView\" :key=\"href\" />\n    <NotFound v-else />\n    <PlAppErrorNotificationAlert v-if=\"sdk.loaded && showErrorsNotification\" :errors=\"errors\" />\n  </div>\n  <!-- Plugins -->\n  <MonetizationSidebar v-if=\"CurrentView\" />\n</template>\n\n<style module>\n.error {\n  color: red;\n  font-weight: bold;\n  padding: 24px;\n}\n</style>\n"],"mappings":";;;;;;;;;;;EAUA,IAAM,IAAM,GAAc,EAEpB,KAAiB,MAAuB;AAC5C,OAAI;AACF,WAAO,IAAI,IAAI,GAAM,eAAe,CAAC;WACtB;AACf,YAAQ,MAAM,gBAAgB,EAAK;AACnC;;KAIE,IAAO,QAAgB,EAAI,SAAS,EAAI,QAAQ,CAAC,OAAO,KAAA,EAAW,EAEnE,IAAc,QAAe;AACjC,OAAI,EAAI,QAAQ;IACd,IAAM,IAAM,EAAI,QAAQ,EAClB,IAAW,EAAc,EAAI,SAAS,gBAAgB,KAAK;AACjE,WAAO,IAAW,EAAI,SAAS,EAAS,GAAG,KAAA;;IAI7C,EAEI,IAAM,QAAgB,EAAI,SAAS,EAAI,QAAQ,GAAG,KAAA,EAAW,EAE7D,IAAS,QAAgB,EAAI,QAAQ,EAAI,MAAM,MAAM,eAAe,EAAE,CAAE,EAExE,IAAyB,QAAe,EAAI,OAAO,0BAA0B,GAAK,EAElF,IAAW,QAAe,EAAI,OAAO,YAAY,CAAC;qCAItD,EAOM,OAPN,GAOM;GANJ,EAAiC,GAAA,EAAnB,OAAO,EAAA,OAAQ,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA;GAClB,EAAA,EAAG,CAAC,SAAA,GAAA,EAAf,EAAiE,OAAA;;IAA1C,OAAK,EAAEA,EAAAA,OAAO,MAAK;QAAK,EAAA,EAAG,CAAC,MAAK,EAAA,EAAA,IAChC,EAAA,EAAG,CAAC,SACY,EAAA,SAAA,GAAA,EAAxC,EAAmE,EAAnD,EAAA,MAAW,EAAA,EAA2B,KAAK,EAAA,OAAI,CAAA,KAAA,GAAA,EAC/D,EAAmB,GAAA,EAAA,KAAA,GAAA,CAAA,KAFS,GAAA,EAA5B,EAA2D,GAAA,EAAA,KAAA,GAAA,EAAA;qBAAb,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAV,cAAU,GAAA,CAAA,CAAA,CAAA;;;GAGX,EAAA,EAAG,CAAC,UAAU,EAAA,SAAA,GAAA,EAAjD,EAA4F,EAAA,EAAA,EAAA;;IAAlB,QAAQ,EAAA;;MAGzD,EAAA,SAAA,GAAA,EAA3B,EAA0C,EAAA,EAAA,EAAA,EAAA,KAAA,GAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,GAAA"}

package/dist/components/BlockLoader.js

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

package/dist/components/BlockLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockLoader.js","names":[],"sources":["../../src/components/BlockLoader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  value: boolean | number | undefined;\n}>();\n\nconst isLoader = computed(() => typeof props.value === \"boolean\" && props.value);\n\nconst progressWidth = computed(() => {\n  const value = props.value;\n\n  if (typeof value === \"number\") {\n    if (value >= 1) {\n      return undefined;\n    }\n\n    return (value * 100).toFixed(2) + \"%\";\n  }\n\n  return undefined;\n});\n</script>\n\n<template>\n  <div v-if=\"isLoader\" class=\"block__loader\" />\n  <div\n    v-else-if=\"progressWidth !== undefined\"\n    class=\"block__progress\"\n    :style=\"{ '--progress-width': progressWidth }\"\n  />\n</template>\n"],"mappings":""}

package/dist/components/BlockLoader.vue2.js

@@ -1,5 +1,22 @@
-import f from "./BlockLoader.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=BlockLoader.vue2.js.map
+import { computed as e, createCommentVNode as t, createElementBlock as n, defineComponent as r, normalizeStyle as i, openBlock as a } from "vue";
+var o = {
+	key: 0,
+	class: "block__loader"
+}, s = /* @__PURE__ */ r({
+	__name: "BlockLoader",
+	props: { value: { type: [Boolean, Number] } },
+	setup(r) {
+		let s = r, c = e(() => typeof s.value == "boolean" && s.value), l = e(() => {
+			let e = s.value;
+			if (typeof e == "number") return e >= 1 ? void 0 : (e * 100).toFixed(2) + "%";
+		});
+		return (e, r) => c.value ? (a(), n("div", o)) : l.value === void 0 ? t("", !0) : (a(), n("div", {
+			key: 1,
+			class: "block__progress",
+			style: i({ "--progress-width": l.value })
+		}, null, 4));
+	}
+});
+export { s as default };
+
+//# sourceMappingURL=BlockLoader.vue2.js.map

package/dist/components/BlockLoader.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlockLoader.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"BlockLoader.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/BlockLoader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  value: boolean | number | undefined;\n}>();\n\nconst isLoader = computed(() => typeof props.value === \"boolean\" && props.value);\n\nconst progressWidth = computed(() => {\n  const value = props.value;\n\n  if (typeof value === \"number\") {\n    if (value >= 1) {\n      return undefined;\n    }\n\n    return (value * 100).toFixed(2) + \"%\";\n  }\n\n  return undefined;\n});\n</script>\n\n<template>\n  <div v-if=\"isLoader\" class=\"block__loader\" />\n  <div\n    v-else-if=\"progressWidth !== undefined\"\n    class=\"block__progress\"\n    :style=\"{ '--progress-width': progressWidth }\"\n  />\n</template>\n"],"mappings":";;;;;;;;EAGA,IAAM,IAAQ,GAIR,IAAW,QAAe,OAAO,EAAM,SAAU,aAAa,EAAM,MAAM,EAE1E,IAAgB,QAAe;GACnC,IAAM,IAAQ,EAAM;AAEpB,OAAI,OAAO,KAAU,SAKnB,QAJI,KAAS,IACX,UAGM,IAAQ,KAAK,QAAQ,EAAE,GAAG;IAIpC;mBAIW,EAAA,SAAA,GAAA,EAAX,EAA6C,OAA7C,EAA6C,IAEhC,EAAA,UAAkB,KAAA,iBAAA,GAAA,EAD/B,EAIE,OAAA;;GAFA,OAAM;GACL,OAAK,EAAA,EAAA,oBAAwB,EAAA,OAAa,CAAA"}

package/dist/components/LoaderPage.js

@@ -0,0 +1,10 @@
+import e from "../_virtual/_plugin-vue_export-helper.js";
+import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
+var i = {}, a = { class: "block__loader-page" };
+function o(e, i) {
+	return r(), t("div", a, [...i[0] ||= [n("div", { class: "loader-container" }, [n("i", { class: "mask-24 mask-loading loader-icon" })], -1)]]);
+}
+var s = /* @__PURE__ */ e(i, [["render", o]]);
+export { s as default };
+
+//# sourceMappingURL=LoaderPage.js.map

package/dist/components/LoaderPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoaderPage.js","names":[],"sources":["../../src/components/LoaderPage.vue"],"sourcesContent":["<template>\n  <div class=\"block__loader-page\">\n    <div class=\"loader-container\">\n      <i class=\"mask-24 mask-loading loader-icon\" />\n    </div>\n  </div>\n</template>\n"],"mappings":";;kBACO,OAAM,sBAAoB;;aAA/B,EAIM,OAJN,GAIM,CAAA,GAAA,AAAA,EAAA,OAAA,CAHJ,EAEM,OAAA,EAFD,OAAM,oBAAkB,EAAA,CAC3B,EAA8C,KAAA,EAA3C,OAAM,oCAAkC,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/components/NotFound.js

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

package/dist/components/NotFound.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotFound.js","names":[],"sources":["../../src/components/NotFound.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlBtnSecondary } from \"@milaboratories/uikit\";\nimport { useSdkPlugin } from \"../defineApp\";\n\nconst sdk = useSdkPlugin();\n\nconst app = sdk.useApp();\n\nconst goToMain = () => {\n  app.navigateTo(\"/\");\n};\n</script>\n\n<template>\n  <div class=\"block__not-found\">\n    <h1>Not found route: {{ app.snapshot.navigationState.href }}</h1>\n    <PlBtnSecondary @click.stop=\"goToMain\">Return to main page</PlBtnSecondary>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/NotFound.vue2.js

@@ -1,5 +1,18 @@
-import f from "./NotFound.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=NotFound.vue2.js.map
+import { useSdkPlugin as e } from "../defineApp.js";
+import { createElementBlock as t, createElementVNode as n, createTextVNode as r, createVNode as i, defineComponent as a, openBlock as o, toDisplayString as s, unref as c, withCtx as l, withModifiers as u } from "vue";
+import { PlBtnSecondary as d } from "@milaboratories/uikit";
+var f = { class: "block__not-found" }, p = /* @__PURE__ */ a({
+	__name: "NotFound",
+	setup(a) {
+		let p = e().useApp(), m = () => {
+			p.navigateTo("/");
+		};
+		return (e, a) => (o(), t("div", f, [n("h1", null, "Not found route: " + s(c(p).snapshot.navigationState.href), 1), i(c(d), { onClick: u(m, ["stop"]) }, {
+			default: l(() => [...a[0] ||= [r("Return to main page", -1)]]),
+			_: 1
+		})]));
+	}
+});
+export { p as default };
+
+//# sourceMappingURL=NotFound.vue2.js.map

package/dist/components/NotFound.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotFound.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"NotFound.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/NotFound.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlBtnSecondary } from \"@milaboratories/uikit\";\nimport { useSdkPlugin } from \"../defineApp\";\n\nconst sdk = useSdkPlugin();\n\nconst app = sdk.useApp();\n\nconst goToMain = () => {\n  app.navigateTo(\"/\");\n};\n</script>\n\n<template>\n  <div class=\"block__not-found\">\n    <h1>Not found route: {{ app.snapshot.navigationState.href }}</h1>\n    <PlBtnSecondary @click.stop=\"goToMain\">Return to main page</PlBtnSecondary>\n  </div>\n</template>\n"],"mappings":";;;;;;EAMA,IAAM,IAFM,GAAc,CAEV,QAAQ,EAElB,UAAiB;AACrB,KAAI,WAAW,IAAI;;yBAKnB,EAGM,OAHN,GAGM,CAFJ,EAAiE,MAAA,MAA7D,sBAAiB,EAAG,EAAA,EAAG,CAAC,SAAS,gBAAgB,KAAI,EAAA,EAAA,EACzD,EAA2E,EAAA,EAAA,EAAA,EAA1D,SAAK,EAAO,GAAQ,CAAA,OAAA,CAAA,EAAA,EAAA;oBAAqB,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAnB,uBAAmB,GAAA,CAAA,CAAA,CAAA"}

package/dist/components/PlAdvancedFilter/FilterEditor.js

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

package/dist/components/PlAdvancedFilter/FilterEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterEditor.js","names":[],"sources":["../../../src/components/PlAdvancedFilter/FilterEditor.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n  PlAutocomplete,\n  PlAutocompleteMulti,\n  PlDropdown,\n  PlIcon16,\n  PlNumberField,\n  PlTextField,\n  PlToggleSwitch,\n  Slider,\n} from \"@milaboratories/uikit\";\nimport type {\n  AnchoredPColumnId,\n  AxisFilterByIdx,\n  AxisFilterValue,\n  SUniversalPColumnId,\n} from \"@platforma-sdk/model\";\nimport {\n  isFilteredPColumn,\n  parseColumnId,\n  stringifyColumnId,\n  type ListOptionBase,\n} from \"@platforma-sdk/model\";\nimport { computed } from \"vue\";\nimport type { SUPPORTED_FILTER_TYPES } from \"./constants\";\nimport { DEFAULT_FILTER_TYPE, DEFAULT_FILTERS } from \"./constants\";\nimport OperandButton from \"./OperandButton.vue\";\nimport type { EditableFilter, Operand, PlAdvancedFilterColumnId, SourceOptionInfo } from \"./types\";\nimport { getFilterInfo, getNormalizedSpec, isNumericFilter, isPositionFilter } from \"./utils\";\n\nconst filter = defineModel<EditableFilter>(\"filter\", { required: true });\n\nconst props = defineProps<{\n  isLast: boolean;\n  operand: Operand;\n  enableDnd: boolean;\n  columnOptions: SourceOptionInfo[];\n  supportedFilters: typeof SUPPORTED_FILTER_TYPES;\n  getSuggestOptions: (params: {\n    columnId: PlAdvancedFilterColumnId;\n    axisIdx?: number;\n    searchType: \"value\" | \"label\";\n    searchStr: string;\n  }) => ListOptionBase<string | number>[] | Promise<ListOptionBase<string | number>[]>;\n  onDelete: (columnId: PlAdvancedFilterColumnId) => void;\n  onChangeOperand: (op: Operand) => void;\n}>();\n\nasync function getSuggestOptionsFn(\n  id: PlAdvancedFilterColumnId,\n  type: \"value\" | \"label\",\n  str: string,\n  axisIdx?: number,\n): Promise<ListOptionBase<string>[]> {\n  return props.getSuggestOptions({\n    columnId: id,\n    axisIdx,\n    searchType: type,\n    searchStr: str,\n  }) as Promise<ListOptionBase<string>[]>;\n}\n\nasync function getMultiSuggestOptionsFn(\n  id: PlAdvancedFilterColumnId,\n  type: \"value\" | \"label\",\n  str: string | string[],\n  axisIdx?: number,\n): Promise<ListOptionBase<string>[]> {\n  if (type === \"label\" && typeof str === \"string\") {\n    return getSuggestOptionsFn(id, type, str, axisIdx);\n  }\n  if (type === \"value\" && Array.isArray(str)) {\n    const results = await Promise.all(str.map((s) => getSuggestOptionsFn(id, type, s, axisIdx)));\n    return results.map((x) => x[0]);\n  }\n  throw new Error(\"Invalid arguments combination\");\n}\n\ntype Entries<T> = { [K in keyof T]: [K, T[K]] }[keyof T][];\nfunction changeFilterType() {\n  const defaultFilter = DEFAULT_FILTERS[filter.value.type];\n\n  filter.value = (Object.entries(defaultFilter) as Entries<EditableFilter>).reduce(\n    (res, [key, val]) => {\n      res[key] = filter.value[key] ?? val;\n      return res;\n    },\n    {} as Record<keyof EditableFilter, EditableFilter[keyof EditableFilter]>,\n  ) as EditableFilter;\n}\n\nfunction changeSourceId(newSourceId?: PlAdvancedFilterColumnId) {\n  if (!newSourceId) {\n    return;\n  }\n  const newSourceInfo = props.columnOptions.find((v) => v.id === getSourceId(newSourceId));\n  if (!newSourceInfo) {\n    return;\n  }\n  const filterInfo = getFilterInfo(filter.value.type);\n  const newSourceSpec = getNormalizedSpec(newSourceInfo?.spec);\n  if (filterInfo.supportedFor(newSourceSpec)) {\n    // don't do anything except update source id\n    filter.value.column = newSourceId;\n  } else {\n    // reset to default filter which fits to any column\n    filter.value = {\n      ...DEFAULT_FILTERS[DEFAULT_FILTER_TYPE],\n      column: newSourceId,\n    };\n  }\n}\n\nconst inconsistentSourceSelected = computed(() => {\n  const selectedOption = props.columnOptions.find(\n    (op) => op.id === getSourceId(filter.value.column),\n  );\n  return selectedOption === undefined;\n});\nconst sourceOptions = computed(() => {\n  const options = props.columnOptions.map((v) => ({ value: v.id, label: v.label ?? v }));\n  if (inconsistentSourceSelected.value) {\n    options.unshift({ value: filter.value.column, label: \"Inconsistent value\" });\n  }\n  return options;\n});\n\nfunction getSourceId(column: PlAdvancedFilterColumnId): PlAdvancedFilterColumnId {\n  try {\n    const parsedColumnId = parseColumnId(column as SUniversalPColumnId);\n    if (isFilteredPColumn(parsedColumnId)) {\n      return stringifyColumnId(parsedColumnId.source);\n    } else {\n      return column;\n    }\n  } catch {\n    return column;\n  }\n}\n\n// similar to FilteredPColumnId but source is stringified and axis filters can be undefined\ntype ColumnAsSourceAndFixedAxes = {\n  source: PlAdvancedFilterColumnId;\n  axisFiltersByIndex: Record<number, AxisFilterValue | undefined>;\n};\nfunction getColumnAsSourceAndFixedAxes(\n  column: PlAdvancedFilterColumnId,\n): ColumnAsSourceAndFixedAxes {\n  const sourceId = getSourceId(column);\n  const option = props.columnOptions.find((op) => op.id === sourceId);\n  const axesToBeFixed = (option?.axesToBeFixed ?? []).reduce(\n    (res, item) => {\n      res[item.idx] = undefined;\n      return res;\n    },\n    {} as Record<number, AxisFilterValue | undefined>,\n  );\n  try {\n    const parsedColumnId = parseColumnId(column as SUniversalPColumnId);\n    if (isFilteredPColumn(parsedColumnId)) {\n      return {\n        source: sourceId,\n        axisFiltersByIndex: parsedColumnId.axisFilters.reduce((res, item) => {\n          res[item[0]] = item[1];\n          return res;\n        }, axesToBeFixed),\n      };\n    }\n  } catch {\n    return { source: column, axisFiltersByIndex: axesToBeFixed };\n  }\n  return { source: column, axisFiltersByIndex: axesToBeFixed };\n}\n\nfunction stringifyColumn(value: ColumnAsSourceAndFixedAxes): PlAdvancedFilterColumnId {\n  if (Object.keys(value.axisFiltersByIndex).length === 0) {\n    return value.source;\n  }\n  return stringifyColumnId({\n    source: parseColumnId(value.source as SUniversalPColumnId) as AnchoredPColumnId,\n    axisFilters: Object.entries(value.axisFiltersByIndex).map(\n      ([idx, value]) => [Number(idx), value] as AxisFilterByIdx,\n    ),\n  });\n}\n\nconst columnAsSourceAndFixedAxes = computed({\n  get: () => {\n    return getColumnAsSourceAndFixedAxes(filter.value.column);\n  },\n  set: (value) => {\n    filter.value.column = stringifyColumn(value);\n  },\n});\nfunction updateAxisFilterValue(idx: number, value: AxisFilterValue | undefined) {\n  columnAsSourceAndFixedAxes.value = {\n    ...columnAsSourceAndFixedAxes.value,\n    axisFiltersByIndex: { ...columnAsSourceAndFixedAxes.value.axisFiltersByIndex, [idx]: value },\n  };\n}\n\nconst currentOption = computed(() =>\n  props.columnOptions.find((op) => op.id === columnAsSourceAndFixedAxes.value.source),\n);\nconst currentSpec = computed(() =>\n  currentOption.value?.spec ? getNormalizedSpec(currentOption.value.spec) : null,\n);\nconst currentType = computed(() => currentSpec.value?.valueType);\nconst currentError = computed(\n  () => Boolean(currentOption.value?.error) || inconsistentSourceSelected.value,\n);\n\nconst filterTypesOptions = computed(() =>\n  props.supportedFilters\n    .filter(\n      (v) =>\n        filter.value.type === v ||\n        (currentSpec.value ? getFilterInfo(v).supportedFor(currentSpec.value) : true),\n    )\n    .map((v) => ({ value: v, label: getFilterInfo(v).label })),\n);\n\nconst wildcardOptions = computed(() => {\n  if (filter.value.type !== \"patternFuzzyContainSubsequence\") {\n    return [];\n  }\n  if (currentOption.value?.alphabet === \"nucleotide\") {\n    return [{ label: \"N\", value: \"N\" }];\n  }\n  if (currentOption.value?.alphabet === \"aminoacid\") {\n    return [{ label: \"X\", value: \"X\" }];\n  }\n  return [...new Set(filter.value.value.split(\"\"))].sort().map((v) => ({ value: v, label: v }));\n});\n\nconst stringMatchesError = computed(() => {\n  if (filter.value.type !== \"patternMatchesRegularExpression\") {\n    return false;\n  }\n  try {\n    new RegExp(filter.value.value);\n    return false;\n  } catch {\n    return true;\n  }\n});\n</script>\n<template>\n  <div :class=\"$style.filterWrapper\">\n    <!-- top element - column selector / column label - for all filter types-->\n    <div\n      v-if=\"enableDnd\"\n      :class=\"[$style.top, $style.columnChip, { [$style.error]: currentError }]\"\n    >\n      <div :class=\"[$style.typeIcon, { [$style.error]: currentError }]\">\n        <PlIcon16 v-if=\"currentError\" name=\"warning\" />\n        <PlIcon16\n          v-else\n          :name=\"\n            currentType === 'String' || currentType === undefined\n              ? 'cell-type-txt'\n              : 'cell-type-num'\n          \"\n        />\n      </div>\n      <div :class=\"$style.titleWrapper\" :title=\"currentOption?.label ?? ''\">\n        <div :class=\"$style.title\">\n          {{\n            inconsistentSourceSelected\n              ? \"Inconsistent value\"\n              : (currentOption?.label ?? filter.column)\n          }}\n        </div>\n      </div>\n      <div :class=\"$style.closeIcon\" @click=\"onDelete(filter.column)\">\n        <PlIcon16 name=\"close\" />\n      </div>\n    </div>\n    <div v-else :class=\"$style.top\">\n      <PlDropdown\n        v-model=\"columnAsSourceAndFixedAxes.source\"\n        :errorStatus=\"currentError\"\n        :options=\"sourceOptions\"\n        :style=\"{ width: '100%' }\"\n        group-position=\"top-left\"\n        @update:model-value=\"changeSourceId\"\n      />\n      <div :class=\"$style.closeButton\" @click=\"onDelete(filter.column)\">\n        <PlIcon16 name=\"close\" />\n      </div>\n    </div>\n\n    <div v-if=\"currentOption?.axesToBeFixed?.length\" :class=\"$style.fixedAxesBlock\">\n      <template v-for=\"value in currentOption?.axesToBeFixed\" :key=\"value.idx\">\n        <PlAutocomplete\n          v-model=\"columnAsSourceAndFixedAxes.axisFiltersByIndex[value.idx]\"\n          :label=\"value.label\"\n          :options-search=\"\n            (str, type) =>\n              getSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str, value.idx)\n          \"\n          :disabled=\"inconsistentSourceSelected\"\n          :clearable=\"true\"\n          @update:model-value=\"(v) => updateAxisFilterValue(value.idx, v)\"\n        />\n      </template>\n    </div>\n\n    <!-- middle - filter type selector -  for all filter types -->\n    <div\n      :class=\"filter.type === 'isNA' || filter.type === 'isNotNA' ? $style.bottom : $style.middle\"\n    >\n      <PlDropdown\n        v-model=\"filter.type\"\n        :options=\"filterTypesOptions\"\n        :group-position=\"filter.type === 'isNA' || filter.type === 'isNotNA' ? 'bottom' : 'middle'\"\n        @update:model-value=\"changeFilterType\"\n      />\n    </div>\n\n    <!-- middle - for fuzzy contains filter -->\n    <template v-if=\"filter.type === 'patternFuzzyContainSubsequence'\">\n      <div :class=\"$style.middle\">\n        <PlTextField v-model=\"filter.value\" placeholder=\"Substring\" group-position=\"middle\" />\n      </div>\n      <div :class=\"$style.innerSection\">\n        <Slider\n          v-model=\"filter.maxEdits\"\n          :max=\"5\"\n          breakpoints\n          label=\"Maximum number of substitutions and indels\"\n        />\n        <PlToggleSwitch v-model=\"filter.substitutionsOnly\" label=\"Substitutions only\" />\n      </div>\n    </template>\n\n    <!-- bottom element - individual settings for every filter type -->\n    <div :class=\"$style.bottom\">\n      <template v-if=\"filter.type === 'patternEquals' || filter.type === 'patternNotEquals'\">\n        <PlAutocomplete\n          v-model=\"filter.value\"\n          :options-search=\"\n            (str, type) => getSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n          \"\n          :disabled=\"inconsistentSourceSelected\"\n          :clearable=\"true\"\n          group-position=\"bottom\"\n        />\n      </template>\n      <template v-if=\"filter.type === 'inSet' || filter.type === 'notInSet'\">\n        <PlAutocompleteMulti\n          v-model=\"filter.value\"\n          :options-search=\"\n            (str, type) => getMultiSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n          \"\n          :disabled=\"inconsistentSourceSelected\"\n          group-position=\"bottom\"\n        />\n      </template>\n      <PlNumberField v-if=\"isNumericFilter(filter)\" v-model=\"filter.x\" group-position=\"bottom\" />\n      <PlNumberField v-if=\"isPositionFilter(filter)\" v-model=\"filter.n\" group-position=\"bottom\" />\n      <PlTextField\n        v-if=\"\n          filter.type === 'patternContainSubsequence' ||\n          filter.type === 'patternNotContainSubsequence'\n        \"\n        v-model=\"filter.value\"\n        placeholder=\"Substring\"\n        group-position=\"bottom\"\n      />\n      <PlTextField\n        v-if=\"filter.type === 'patternMatchesRegularExpression'\"\n        v-model=\"filter.value\"\n        :error=\"stringMatchesError ? 'Regular expression is not valid' : undefined\"\n        placeholder=\"Regular expression\"\n        group-position=\"bottom\"\n      />\n      <PlDropdown\n        v-if=\"filter.type === 'patternFuzzyContainSubsequence'\"\n        v-model=\"filter.wildcard\"\n        clearable\n        placeholder=\"Wildcard value\"\n        :options=\"wildcardOptions\"\n        group-position=\"bottom\"\n      />\n    </div>\n  </div>\n  <OperandButton :active=\"operand\" :disabled=\"isLast\" :on-select=\"onChangeOperand\" />\n</template>\n\n<style module>\n.filterWrapper {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  cursor: default;\n}\n\n.typeIcon {\n  display: inline-flex;\n  margin-right: 8px;\n}\n\n.typeIcon.error {\n  --icon-color: var(--txt-error);\n}\n\n.closeIcon {\n  display: inline-flex;\n  margin-left: 12px;\n  cursor: pointer;\n}\n\n.titleWrapper {\n  flex-grow: 1;\n  overflow: hidden;\n}\n.title {\n  overflow: hidden;\n  color: var(--txt-01);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n}\n\n.columnChip {\n  width: 100%;\n  display: flex;\n  padding: 10px 12px;\n  align-items: center;\n  border-radius: 6px;\n  border: 1px solid var(--txt-01);\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n\n  &.error {\n    border-color: var(--txt-error);\n  }\n}\n\n.innerSection {\n  border: 1px solid var(--txt-01);\n  border-top: none;\n  padding: 16px 12px;\n}\n\n.closeButton {\n  border: 1px solid var(--txt-01);\n  border-top-right-radius: 6px;\n  border-left: none;\n  width: 40px;\n  height: 40px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-shrink: 0;\n  cursor: pointer;\n}\n\n.top {\n  position: relative;\n  display: flex;\n  width: 100%;\n  z-index: 1;\n  background: #fff;\n}\n\n.fixedAxesBlock {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding: 12px 8px;\n  gap: 12px;\n  border-left: 1px solid var(--txt-01);\n  border-right: 1px solid var(--txt-01);\n}\n\n.fixedAxesBlock > * {\n  background: #fff;\n}\n\n.middle,\n.bottom {\n  position: relative;\n  margin-top: -1px;\n  background: #fff;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlAdvancedFilter/FilterEditor.style.js

@@ -0,0 +1,18 @@
+import './FilterEditor.vue.css';var e = {
+	filterWrapper: "_filterWrapper_16khp_2",
+	typeIcon: "_typeIcon_16khp_10",
+	error: "_error_16khp_15",
+	closeIcon: "_closeIcon_16khp_19",
+	titleWrapper: "_titleWrapper_16khp_25",
+	title: "_title_16khp_25",
+	columnChip: "_columnChip_16khp_39",
+	innerSection: "_innerSection_16khp_54",
+	closeButton: "_closeButton_16khp_60",
+	top: "_top_16khp_73",
+	fixedAxesBlock: "_fixedAxesBlock_16khp_81",
+	middle: "_middle_16khp_95",
+	bottom: "_bottom_16khp_96"
+};
+export { e as default };
+
+//# sourceMappingURL=FilterEditor.style.js.map

package/dist/components/PlAdvancedFilter/FilterEditor.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterEditor.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlAdvancedFilter/FilterEditor.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n  PlAutocomplete,\n  PlAutocompleteMulti,\n  PlDropdown,\n  PlIcon16,\n  PlNumberField,\n  PlTextField,\n  PlToggleSwitch,\n  Slider,\n} from \"@milaboratories/uikit\";\nimport type {\n  AnchoredPColumnId,\n  AxisFilterByIdx,\n  AxisFilterValue,\n  SUniversalPColumnId,\n} from \"@platforma-sdk/model\";\nimport {\n  isFilteredPColumn,\n  parseColumnId,\n  stringifyColumnId,\n  type ListOptionBase,\n} from \"@platforma-sdk/model\";\nimport { computed } from \"vue\";\nimport type { SUPPORTED_FILTER_TYPES } from \"./constants\";\nimport { DEFAULT_FILTER_TYPE, DEFAULT_FILTERS } from \"./constants\";\nimport OperandButton from \"./OperandButton.vue\";\nimport type { EditableFilter, Operand, PlAdvancedFilterColumnId, SourceOptionInfo } from \"./types\";\nimport { getFilterInfo, getNormalizedSpec, isNumericFilter, isPositionFilter } from \"./utils\";\n\nconst filter = defineModel<EditableFilter>(\"filter\", { required: true });\n\nconst props = defineProps<{\n  isLast: boolean;\n  operand: Operand;\n  enableDnd: boolean;\n  columnOptions: SourceOptionInfo[];\n  supportedFilters: typeof SUPPORTED_FILTER_TYPES;\n  getSuggestOptions: (params: {\n    columnId: PlAdvancedFilterColumnId;\n    axisIdx?: number;\n    searchType: \"value\" | \"label\";\n    searchStr: string;\n  }) => ListOptionBase<string | number>[] | Promise<ListOptionBase<string | number>[]>;\n  onDelete: (columnId: PlAdvancedFilterColumnId) => void;\n  onChangeOperand: (op: Operand) => void;\n}>();\n\nasync function getSuggestOptionsFn(\n  id: PlAdvancedFilterColumnId,\n  type: \"value\" | \"label\",\n  str: string,\n  axisIdx?: number,\n): Promise<ListOptionBase<string>[]> {\n  return props.getSuggestOptions({\n    columnId: id,\n    axisIdx,\n    searchType: type,\n    searchStr: str,\n  }) as Promise<ListOptionBase<string>[]>;\n}\n\nasync function getMultiSuggestOptionsFn(\n  id: PlAdvancedFilterColumnId,\n  type: \"value\" | \"label\",\n  str: string | string[],\n  axisIdx?: number,\n): Promise<ListOptionBase<string>[]> {\n  if (type === \"label\" && typeof str === \"string\") {\n    return getSuggestOptionsFn(id, type, str, axisIdx);\n  }\n  if (type === \"value\" && Array.isArray(str)) {\n    const results = await Promise.all(str.map((s) => getSuggestOptionsFn(id, type, s, axisIdx)));\n    return results.map((x) => x[0]);\n  }\n  throw new Error(\"Invalid arguments combination\");\n}\n\ntype Entries<T> = { [K in keyof T]: [K, T[K]] }[keyof T][];\nfunction changeFilterType() {\n  const defaultFilter = DEFAULT_FILTERS[filter.value.type];\n\n  filter.value = (Object.entries(defaultFilter) as Entries<EditableFilter>).reduce(\n    (res, [key, val]) => {\n      res[key] = filter.value[key] ?? val;\n      return res;\n    },\n    {} as Record<keyof EditableFilter, EditableFilter[keyof EditableFilter]>,\n  ) as EditableFilter;\n}\n\nfunction changeSourceId(newSourceId?: PlAdvancedFilterColumnId) {\n  if (!newSourceId) {\n    return;\n  }\n  const newSourceInfo = props.columnOptions.find((v) => v.id === getSourceId(newSourceId));\n  if (!newSourceInfo) {\n    return;\n  }\n  const filterInfo = getFilterInfo(filter.value.type);\n  const newSourceSpec = getNormalizedSpec(newSourceInfo?.spec);\n  if (filterInfo.supportedFor(newSourceSpec)) {\n    // don't do anything except update source id\n    filter.value.column = newSourceId;\n  } else {\n    // reset to default filter which fits to any column\n    filter.value = {\n      ...DEFAULT_FILTERS[DEFAULT_FILTER_TYPE],\n      column: newSourceId,\n    };\n  }\n}\n\nconst inconsistentSourceSelected = computed(() => {\n  const selectedOption = props.columnOptions.find(\n    (op) => op.id === getSourceId(filter.value.column),\n  );\n  return selectedOption === undefined;\n});\nconst sourceOptions = computed(() => {\n  const options = props.columnOptions.map((v) => ({ value: v.id, label: v.label ?? v }));\n  if (inconsistentSourceSelected.value) {\n    options.unshift({ value: filter.value.column, label: \"Inconsistent value\" });\n  }\n  return options;\n});\n\nfunction getSourceId(column: PlAdvancedFilterColumnId): PlAdvancedFilterColumnId {\n  try {\n    const parsedColumnId = parseColumnId(column as SUniversalPColumnId);\n    if (isFilteredPColumn(parsedColumnId)) {\n      return stringifyColumnId(parsedColumnId.source);\n    } else {\n      return column;\n    }\n  } catch {\n    return column;\n  }\n}\n\n// similar to FilteredPColumnId but source is stringified and axis filters can be undefined\ntype ColumnAsSourceAndFixedAxes = {\n  source: PlAdvancedFilterColumnId;\n  axisFiltersByIndex: Record<number, AxisFilterValue | undefined>;\n};\nfunction getColumnAsSourceAndFixedAxes(\n  column: PlAdvancedFilterColumnId,\n): ColumnAsSourceAndFixedAxes {\n  const sourceId = getSourceId(column);\n  const option = props.columnOptions.find((op) => op.id === sourceId);\n  const axesToBeFixed = (option?.axesToBeFixed ?? []).reduce(\n    (res, item) => {\n      res[item.idx] = undefined;\n      return res;\n    },\n    {} as Record<number, AxisFilterValue | undefined>,\n  );\n  try {\n    const parsedColumnId = parseColumnId(column as SUniversalPColumnId);\n    if (isFilteredPColumn(parsedColumnId)) {\n      return {\n        source: sourceId,\n        axisFiltersByIndex: parsedColumnId.axisFilters.reduce((res, item) => {\n          res[item[0]] = item[1];\n          return res;\n        }, axesToBeFixed),\n      };\n    }\n  } catch {\n    return { source: column, axisFiltersByIndex: axesToBeFixed };\n  }\n  return { source: column, axisFiltersByIndex: axesToBeFixed };\n}\n\nfunction stringifyColumn(value: ColumnAsSourceAndFixedAxes): PlAdvancedFilterColumnId {\n  if (Object.keys(value.axisFiltersByIndex).length === 0) {\n    return value.source;\n  }\n  return stringifyColumnId({\n    source: parseColumnId(value.source as SUniversalPColumnId) as AnchoredPColumnId,\n    axisFilters: Object.entries(value.axisFiltersByIndex).map(\n      ([idx, value]) => [Number(idx), value] as AxisFilterByIdx,\n    ),\n  });\n}\n\nconst columnAsSourceAndFixedAxes = computed({\n  get: () => {\n    return getColumnAsSourceAndFixedAxes(filter.value.column);\n  },\n  set: (value) => {\n    filter.value.column = stringifyColumn(value);\n  },\n});\nfunction updateAxisFilterValue(idx: number, value: AxisFilterValue | undefined) {\n  columnAsSourceAndFixedAxes.value = {\n    ...columnAsSourceAndFixedAxes.value,\n    axisFiltersByIndex: { ...columnAsSourceAndFixedAxes.value.axisFiltersByIndex, [idx]: value },\n  };\n}\n\nconst currentOption = computed(() =>\n  props.columnOptions.find((op) => op.id === columnAsSourceAndFixedAxes.value.source),\n);\nconst currentSpec = computed(() =>\n  currentOption.value?.spec ? getNormalizedSpec(currentOption.value.spec) : null,\n);\nconst currentType = computed(() => currentSpec.value?.valueType);\nconst currentError = computed(\n  () => Boolean(currentOption.value?.error) || inconsistentSourceSelected.value,\n);\n\nconst filterTypesOptions = computed(() =>\n  props.supportedFilters\n    .filter(\n      (v) =>\n        filter.value.type === v ||\n        (currentSpec.value ? getFilterInfo(v).supportedFor(currentSpec.value) : true),\n    )\n    .map((v) => ({ value: v, label: getFilterInfo(v).label })),\n);\n\nconst wildcardOptions = computed(() => {\n  if (filter.value.type !== \"patternFuzzyContainSubsequence\") {\n    return [];\n  }\n  if (currentOption.value?.alphabet === \"nucleotide\") {\n    return [{ label: \"N\", value: \"N\" }];\n  }\n  if (currentOption.value?.alphabet === \"aminoacid\") {\n    return [{ label: \"X\", value: \"X\" }];\n  }\n  return [...new Set(filter.value.value.split(\"\"))].sort().map((v) => ({ value: v, label: v }));\n});\n\nconst stringMatchesError = computed(() => {\n  if (filter.value.type !== \"patternMatchesRegularExpression\") {\n    return false;\n  }\n  try {\n    new RegExp(filter.value.value);\n    return false;\n  } catch {\n    return true;\n  }\n});\n</script>\n<template>\n  <div :class=\"$style.filterWrapper\">\n    <!-- top element - column selector / column label - for all filter types-->\n    <div\n      v-if=\"enableDnd\"\n      :class=\"[$style.top, $style.columnChip, { [$style.error]: currentError }]\"\n    >\n      <div :class=\"[$style.typeIcon, { [$style.error]: currentError }]\">\n        <PlIcon16 v-if=\"currentError\" name=\"warning\" />\n        <PlIcon16\n          v-else\n          :name=\"\n            currentType === 'String' || currentType === undefined\n              ? 'cell-type-txt'\n              : 'cell-type-num'\n          \"\n        />\n      </div>\n      <div :class=\"$style.titleWrapper\" :title=\"currentOption?.label ?? ''\">\n        <div :class=\"$style.title\">\n          {{\n            inconsistentSourceSelected\n              ? \"Inconsistent value\"\n              : (currentOption?.label ?? filter.column)\n          }}\n        </div>\n      </div>\n      <div :class=\"$style.closeIcon\" @click=\"onDelete(filter.column)\">\n        <PlIcon16 name=\"close\" />\n      </div>\n    </div>\n    <div v-else :class=\"$style.top\">\n      <PlDropdown\n        v-model=\"columnAsSourceAndFixedAxes.source\"\n        :errorStatus=\"currentError\"\n        :options=\"sourceOptions\"\n        :style=\"{ width: '100%' }\"\n        group-position=\"top-left\"\n        @update:model-value=\"changeSourceId\"\n      />\n      <div :class=\"$style.closeButton\" @click=\"onDelete(filter.column)\">\n        <PlIcon16 name=\"close\" />\n      </div>\n    </div>\n\n    <div v-if=\"currentOption?.axesToBeFixed?.length\" :class=\"$style.fixedAxesBlock\">\n      <template v-for=\"value in currentOption?.axesToBeFixed\" :key=\"value.idx\">\n        <PlAutocomplete\n          v-model=\"columnAsSourceAndFixedAxes.axisFiltersByIndex[value.idx]\"\n          :label=\"value.label\"\n          :options-search=\"\n            (str, type) =>\n              getSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str, value.idx)\n          \"\n          :disabled=\"inconsistentSourceSelected\"\n          :clearable=\"true\"\n          @update:model-value=\"(v) => updateAxisFilterValue(value.idx, v)\"\n        />\n      </template>\n    </div>\n\n    <!-- middle - filter type selector -  for all filter types -->\n    <div\n      :class=\"filter.type === 'isNA' || filter.type === 'isNotNA' ? $style.bottom : $style.middle\"\n    >\n      <PlDropdown\n        v-model=\"filter.type\"\n        :options=\"filterTypesOptions\"\n        :group-position=\"filter.type === 'isNA' || filter.type === 'isNotNA' ? 'bottom' : 'middle'\"\n        @update:model-value=\"changeFilterType\"\n      />\n    </div>\n\n    <!-- middle - for fuzzy contains filter -->\n    <template v-if=\"filter.type === 'patternFuzzyContainSubsequence'\">\n      <div :class=\"$style.middle\">\n        <PlTextField v-model=\"filter.value\" placeholder=\"Substring\" group-position=\"middle\" />\n      </div>\n      <div :class=\"$style.innerSection\">\n        <Slider\n          v-model=\"filter.maxEdits\"\n          :max=\"5\"\n          breakpoints\n          label=\"Maximum number of substitutions and indels\"\n        />\n        <PlToggleSwitch v-model=\"filter.substitutionsOnly\" label=\"Substitutions only\" />\n      </div>\n    </template>\n\n    <!-- bottom element - individual settings for every filter type -->\n    <div :class=\"$style.bottom\">\n      <template v-if=\"filter.type === 'patternEquals' || filter.type === 'patternNotEquals'\">\n        <PlAutocomplete\n          v-model=\"filter.value\"\n          :options-search=\"\n            (str, type) => getSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n          \"\n          :disabled=\"inconsistentSourceSelected\"\n          :clearable=\"true\"\n          group-position=\"bottom\"\n        />\n      </template>\n      <template v-if=\"filter.type === 'inSet' || filter.type === 'notInSet'\">\n        <PlAutocompleteMulti\n          v-model=\"filter.value\"\n          :options-search=\"\n            (str, type) => getMultiSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n          \"\n          :disabled=\"inconsistentSourceSelected\"\n          group-position=\"bottom\"\n        />\n      </template>\n      <PlNumberField v-if=\"isNumericFilter(filter)\" v-model=\"filter.x\" group-position=\"bottom\" />\n      <PlNumberField v-if=\"isPositionFilter(filter)\" v-model=\"filter.n\" group-position=\"bottom\" />\n      <PlTextField\n        v-if=\"\n          filter.type === 'patternContainSubsequence' ||\n          filter.type === 'patternNotContainSubsequence'\n        \"\n        v-model=\"filter.value\"\n        placeholder=\"Substring\"\n        group-position=\"bottom\"\n      />\n      <PlTextField\n        v-if=\"filter.type === 'patternMatchesRegularExpression'\"\n        v-model=\"filter.value\"\n        :error=\"stringMatchesError ? 'Regular expression is not valid' : undefined\"\n        placeholder=\"Regular expression\"\n        group-position=\"bottom\"\n      />\n      <PlDropdown\n        v-if=\"filter.type === 'patternFuzzyContainSubsequence'\"\n        v-model=\"filter.wildcard\"\n        clearable\n        placeholder=\"Wildcard value\"\n        :options=\"wildcardOptions\"\n        group-position=\"bottom\"\n      />\n    </div>\n  </div>\n  <OperandButton :active=\"operand\" :disabled=\"isLast\" :on-select=\"onChangeOperand\" />\n</template>\n\n<style module>\n.filterWrapper {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  cursor: default;\n}\n\n.typeIcon {\n  display: inline-flex;\n  margin-right: 8px;\n}\n\n.typeIcon.error {\n  --icon-color: var(--txt-error);\n}\n\n.closeIcon {\n  display: inline-flex;\n  margin-left: 12px;\n  cursor: pointer;\n}\n\n.titleWrapper {\n  flex-grow: 1;\n  overflow: hidden;\n}\n.title {\n  overflow: hidden;\n  color: var(--txt-01);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n}\n\n.columnChip {\n  width: 100%;\n  display: flex;\n  padding: 10px 12px;\n  align-items: center;\n  border-radius: 6px;\n  border: 1px solid var(--txt-01);\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n\n  &.error {\n    border-color: var(--txt-error);\n  }\n}\n\n.innerSection {\n  border: 1px solid var(--txt-01);\n  border-top: none;\n  padding: 16px 12px;\n}\n\n.closeButton {\n  border: 1px solid var(--txt-01);\n  border-top-right-radius: 6px;\n  border-left: none;\n  width: 40px;\n  height: 40px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-shrink: 0;\n  cursor: pointer;\n}\n\n.top {\n  position: relative;\n  display: flex;\n  width: 100%;\n  z-index: 1;\n  background: #fff;\n}\n\n.fixedAxesBlock {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding: 12px 8px;\n  gap: 12px;\n  border-left: 1px solid var(--txt-01);\n  border-right: 1px solid var(--txt-01);\n}\n\n.fixedAxesBlock > * {\n  background: #fff;\n}\n\n.middle,\n.bottom {\n  position: relative;\n  margin-top: -1px;\n  background: #fff;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlAdvancedFilter/FilterEditor.vue.css

@@ -0,0 +1 @@
+._filterWrapper_16khp_2{cursor:default;flex-direction:column;width:100%;display:flex;position:relative}._typeIcon_16khp_10{margin-right:8px;display:inline-flex}._typeIcon_16khp_10._error_16khp_15{--icon-color:var(--txt-error)}._closeIcon_16khp_19{cursor:pointer;margin-left:12px;display:inline-flex}._titleWrapper_16khp_25{flex-grow:1;overflow:hidden}._title_16khp_25{color:var(--txt-01);text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500;line-height:20px;overflow:hidden}._columnChip_16khp_39{border:1px solid var(--txt-01);border-radius:6px 6px 0 0;align-items:center;width:100%;padding:10px 12px;display:flex}._columnChip_16khp_39._error_16khp_15{border-color:var(--txt-error)}._innerSection_16khp_54{border:1px solid var(--txt-01);border-top:none;padding:16px 12px}._closeButton_16khp_60{border:1px solid var(--txt-01);cursor:pointer;border-left:none;border-top-right-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}._top_16khp_73{z-index:1;background:#fff;width:100%;display:flex;position:relative}._fixedAxesBlock_16khp_81{border-left:1px solid var(--txt-01);border-right:1px solid var(--txt-01);flex-direction:column;gap:12px;padding:12px 8px;display:flex;position:relative}._fixedAxesBlock_16khp_81>*{background:#fff}._middle_16khp_95,._bottom_16khp_96{background:#fff;margin-top:-1px;position:relative}