@milaboratories/graph-maker 1.2.5 → 1.2.7

package/dist/components/AesSettings/DiscreteRow.vue2.js

@@ -1,160 +1,117 @@
-import { defineComponent as $, computed as T, reactive as S, createElementBlock as m, openBlock as o, normalizeClass as a, createElementVNode as s, toDisplayString as h, createBlock as d, createCommentVNode as u, unref as g, withCtx as r, withModifiers as y, createVNode as k, normalizeStyle as C } from "vue";
-import { PALETTE_MAP as w, FIXED_LINE_TYPES as F, FIXES_DOT_SHAPES as p } from "../../constantsAesthetic.js";
-import { getPopupHeightForFixedAesList as E } from "../../utils/getPopupHeightForFixedAesList.js";
-import { PlTooltip as I, PlIcon24 as P } from "@platforma-sdk/ui-vue";
-import R from "../Popup.vue.js";
-import B from "./FixedLineTypeList.vue.js";
-import M from "./FixedDotShapeList.vue.js";
-import U from "./FixedColorsList.vue.js";
-const H = ["title"], Y = /* @__PURE__ */ $({
-  __name: "DiscreteRow",
-  props: {
-    item: {},
-    activeValue: {},
-    activeAesType: {},
-    usedAesInMapping: {},
-    palette: {},
-    allowReordering: { type: Boolean },
-    allowHiding: { type: Boolean },
-    hidden: { type: Boolean },
-    isCategorical: { type: Boolean },
-    onAesValueUpdate: { type: Function },
-    onSwitchVisibility: { type: Function },
-    onActiveValueChange: { type: Function },
-    onActiveAesTypeChange: { type: Function },
-    onCloseForm: { type: Function }
-  },
-  setup(e) {
-    const n = e;
-    function v(i, t) {
-      const l = n.activeValue === i.value && n.activeAesType === t;
-      n.onActiveValueChange(l ? null : i.value), n.onActiveAesTypeChange(l ? null : t);
-    }
-    const A = T(
-      () => w[n.palette].colors.map((i) => ({ color: i, name: i }))
-    ), V = T(() => n.activeAesType ? E(
-      n.activeAesType === "lineType" ? F.length : n.activeAesType === "dotShape" ? p.length : A.value.length,
-      n.activeAesType
-    ) : 0), f = S({
-      color: {},
-      dotShape: {},
-      lineType: {}
-    });
-    function c(i, t, l) {
-      l && (f[i][t.value] = l);
-    }
-    return (i, t) => (o(), m("div", {
-      class: a([i.$style.columnValue, { [i.$style.withReorering]: e.allowReordering }])
-    }, [
-      s("div", {
-        class: a(i.$style.title),
-        title: e.item.text
-      }, h(e.item.text), 11, H),
-      s("div", {
-        class: a(i.$style.aesGroup)
-      }, [
-        e.allowHiding ? (o(), d(g(I), {
-          key: 0,
-          "open-delay": 100,
-          "close-delay": 100
-        }, {
-          tooltip: r(() => [...t[10] || (t[10] = [
-            s("span", null, " Show / hide ", -1)
-          ])]),
-          default: r(() => [
-            s("div", {
-              style: { cursor: "pointer" },
-              class: a(i.$style.aes),
-              onClick: t[0] || (t[0] = y((l) => e.onSwitchVisibility(), ["stop"]))
-            }, [
-              k(g(P), {
-                name: e.hidden ? "view-hide" : "view-show"
-              }, null, 8, ["name"])
-            ], 2)
-          ]),
-          _: 1
-        })) : u("", !0),
-        e.usedAesInMapping.lineType ? (o(), m("div", {
-          key: 1,
-          ref: (l) => c("lineType", e.item, l),
-          class: a([i.$style.aes, {
-            [i.$style.selected]: e.activeValue === e.item.value && e.activeAesType === "lineType"
-          }]),
-          onClick: t[1] || (t[1] = y((l) => v(e.item, "lineType"), ["stop"]))
-        }, [
-          s("div", {
-            class: a(["icon__line line", { [`line__${e.item.lineType}`]: !0 }])
-          }, null, 2)
-        ], 2)) : u("", !0),
-        e.usedAesInMapping.dotShape ? (o(), m("div", {
-          key: 2,
-          ref: (l) => c("dotShape", e.item, l),
-          class: a([i.$style.aes, {
-            [i.$style.selected]: e.activeValue === e.item.value && e.activeAesType === "dotShape"
-          }]),
-          onClick: t[2] || (t[2] = y((l) => v(e.item, "dotShape"), ["stop"]))
-        }, [
-          s("div", {
-            class: a(["dot", { [`dot__${e.item.dotShape}`]: !0 }])
-          }, null, 2)
-        ], 2)) : u("", !0),
-        e.usedAesInMapping.fill || e.usedAesInMapping.stroke ? (o(), m("div", {
-          key: 3,
-          ref: (l) => c("color", e.item, l),
-          class: a([i.$style.aes, {
-            [i.$style.selected]: e.activeValue === e.item.value && e.activeAesType === "color"
-          }]),
-          onClick: t[3] || (t[3] = y((l) => v(e.item, "color"), ["stop"]))
-        }, [
-          s("div", {
-            class: a(i.$style.color),
-            style: C({ background: e.item.color })
-          }, null, 6)
-        ], 2)) : u("", !0),
-        (e.activeAesType !== "color" || e.isCategorical) && e.activeAesType !== null && e.activeValue === e.item.value ? (o(), d(R, {
-          key: `${e.activeAesType}_${e.activeValue}`,
-          targetRef: f[e.activeAesType][e.activeValue],
-          height: V.value,
-          "onPopup:close": e.onCloseForm
-        }, {
-          default: r(() => [
-            s("div", {
-              class: a(["fixed-aes-list", { "fixed-aes-list__rows": !1 }])
-            }, [
-              e.activeAesType === "lineType" ? (o(), d(B, {
-                key: 0,
-                modelValue: e.item.lineType,
-                "onUpdate:modelValue": [
-                  t[4] || (t[4] = (l) => e.item.lineType = l),
-                  t[5] || (t[5] = (l) => n.onAesValueUpdate("lineShape", l))
-                ]
-              }, null, 8, ["modelValue"])) : u("", !0),
-              e.activeAesType === "dotShape" ? (o(), d(M, {
-                key: 1,
-                modelValue: e.item.dotShape,
-                "onUpdate:modelValue": [
-                  t[6] || (t[6] = (l) => e.item.dotShape = l),
-                  t[7] || (t[7] = (l) => n.onAesValueUpdate("dotShape", l))
-                ]
-              }, null, 8, ["modelValue"])) : u("", !0),
-              e.activeAesType === "color" ? (o(), d(U, {
-                key: 2,
-                modelValue: e.item.color,
-                "onUpdate:modelValue": [
-                  t[8] || (t[8] = (l) => e.item.color = l),
-                  t[9] || (t[9] = (l) => n.onAesValueUpdate("color", l))
-                ],
-                "colors-list": A.value
-              }, null, 8, ["modelValue", "colors-list"])) : u("", !0)
-            ])
-          ]),
-          _: 1
-        }, 8, ["targetRef", "height", "onPopup:close"])) : u("", !0)
-      ], 2)
-    ], 2));
-  }
+import { FIXED_LINE_TYPES as e, FIXES_DOT_SHAPES as t, PALETTE_MAP as n } from "../../constantsAesthetic.js";
+import { getPopupHeightForFixedAesList as r } from "../../utils/getPopupHeightForFixedAesList.js";
+import i from "../Popup.js";
+import a from "./FixedLineTypeList.js";
+import o from "./FixedDotShapeList.js";
+import s from "./FixedColorsList.js";
+import { computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, normalizeStyle as g, openBlock as _, reactive as v, toDisplayString as y, unref as b, withCtx as x, withModifiers as S } from "vue";
+import { PlIcon24 as C, PlTooltip as w } from "@platforma-sdk/ui-vue";
+var T = ["title"], E = /* @__PURE__ */ m({
+	__name: "DiscreteRow",
+	props: {
+		item: {},
+		activeValue: {},
+		activeAesType: {},
+		usedAesInMapping: {},
+		palette: {},
+		allowReordering: { type: Boolean },
+		allowHiding: { type: Boolean },
+		hidden: { type: Boolean },
+		isCategorical: { type: Boolean },
+		onAesValueUpdate: { type: Function },
+		onSwitchVisibility: { type: Function },
+		onActiveValueChange: { type: Function },
+		onActiveAesTypeChange: { type: Function },
+		onCloseForm: { type: Function }
+	},
+	setup(m) {
+		let E = m;
+		function D(e, t) {
+			let n = E.activeValue === e.value && E.activeAesType === t;
+			E.onActiveValueChange(n ? null : e.value), E.onActiveAesTypeChange(n ? null : t);
+		}
+		let O = c(() => n[E.palette].colors.map((e) => ({
+			color: e,
+			name: e
+		}))), k = c(() => E.activeAesType ? r(E.activeAesType === "lineType" ? e.length : E.activeAesType === "dotShape" ? t.length : O.value.length, E.activeAesType) : 0), A = v({
+			color: {},
+			dotShape: {},
+			lineType: {}
+		});
+		function j(e, t, n) {
+			n && (A[e][t.value] = n);
+		}
+		return (e, t) => (_(), d("div", { class: h([e.$style.columnValue, { [e.$style.withReorering]: m.allowReordering }]) }, [f("div", {
+			class: h(e.$style.title),
+			title: m.item.text
+		}, y(m.item.text), 11, T), f("div", { class: h(e.$style.aesGroup) }, [
+			m.allowHiding ? (_(), l(b(w), {
+				key: 0,
+				"open-delay": 100,
+				"close-delay": 100
+			}, {
+				tooltip: x(() => [...t[10] ||= [f("span", null, " Show / hide ", -1)]]),
+				default: x(() => [f("div", {
+					style: { cursor: "pointer" },
+					class: h(e.$style.aes),
+					onClick: t[0] ||= S((e) => m.onSwitchVisibility(), ["stop"])
+				}, [p(b(C), { name: m.hidden ? "view-hide" : "view-show" }, null, 8, ["name"])], 2)]),
+				_: 1
+			})) : u("", !0),
+			m.usedAesInMapping.lineType ? (_(), d("div", {
+				key: 1,
+				ref: (e) => j("lineType", m.item, e),
+				class: h([e.$style.aes, { [e.$style.selected]: m.activeValue === m.item.value && m.activeAesType === "lineType" }]),
+				onClick: t[1] ||= S((e) => D(m.item, "lineType"), ["stop"])
+			}, [f("div", { class: h(["icon__line line", { [`line__${m.item.lineType}`]: !0 }]) }, null, 2)], 2)) : u("", !0),
+			m.usedAesInMapping.dotShape ? (_(), d("div", {
+				key: 2,
+				ref: (e) => j("dotShape", m.item, e),
+				class: h([e.$style.aes, { [e.$style.selected]: m.activeValue === m.item.value && m.activeAesType === "dotShape" }]),
+				onClick: t[2] ||= S((e) => D(m.item, "dotShape"), ["stop"])
+			}, [f("div", { class: h(["dot", { [`dot__${m.item.dotShape}`]: !0 }]) }, null, 2)], 2)) : u("", !0),
+			m.usedAesInMapping.fill || m.usedAesInMapping.stroke ? (_(), d("div", {
+				key: 3,
+				ref: (e) => j("color", m.item, e),
+				class: h([e.$style.aes, { [e.$style.selected]: m.activeValue === m.item.value && m.activeAesType === "color" }]),
+				onClick: t[3] ||= S((e) => D(m.item, "color"), ["stop"])
+			}, [f("div", {
+				class: h(e.$style.color),
+				style: g({ background: m.item.color })
+			}, null, 6)], 2)) : u("", !0),
+			(m.activeAesType !== "color" || m.isCategorical) && m.activeAesType !== null && m.activeValue === m.item.value ? (_(), l(i, {
+				key: `${m.activeAesType}_${m.activeValue}`,
+				targetRef: A[m.activeAesType][m.activeValue],
+				height: k.value,
+				"onPopup:close": m.onCloseForm
+			}, {
+				default: x(() => [f("div", { class: h(["fixed-aes-list", { "fixed-aes-list__rows": !1 }]) }, [
+					m.activeAesType === "lineType" ? (_(), l(a, {
+						key: 0,
+						modelValue: m.item.lineType,
+						"onUpdate:modelValue": [t[4] ||= (e) => m.item.lineType = e, t[5] ||= (e) => E.onAesValueUpdate("lineShape", e)]
+					}, null, 8, ["modelValue"])) : u("", !0),
+					m.activeAesType === "dotShape" ? (_(), l(o, {
+						key: 1,
+						modelValue: m.item.dotShape,
+						"onUpdate:modelValue": [t[6] ||= (e) => m.item.dotShape = e, t[7] ||= (e) => E.onAesValueUpdate("dotShape", e)]
+					}, null, 8, ["modelValue"])) : u("", !0),
+					m.activeAesType === "color" ? (_(), l(s, {
+						key: 2,
+						modelValue: m.item.color,
+						"onUpdate:modelValue": [t[8] ||= (e) => m.item.color = e, t[9] ||= (e) => E.onAesValueUpdate("color", e)],
+						"colors-list": O.value
+					}, null, 8, ["modelValue", "colors-list"])) : u("", !0)
+				])]),
+				_: 1
+			}, 8, [
+				"targetRef",
+				"height",
+				"onPopup:close"
+			])) : u("", !0)
+		], 2)], 2));
+	}
 });
-export {
-  Y as default
-};
-//# sourceMappingURL=DiscreteRow.vue2.js.map
+export { E as default };
+
+//# sourceMappingURL=DiscreteRow.vue2.js.map

package/dist/components/AesSettings/DiscreteRow.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"DiscreteRow.vue2.js","sources":["../../../src/components/AesSettings/DiscreteRow.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { type ComponentPublicInstance, computed, reactive } from 'vue';\nimport { FIXED_LINE_TYPES, FIXES_DOT_SHAPES, PALETTE_MAP } from '../../constantsAesthetic';\nimport { getPopupHeightForFixedAesList } from '../../utils/getPopupHeightForFixedAesList';\nimport type { Palette, DotShape, LineType } from './types';\nimport type { AesType } from '../../constantsCommon';\nimport { PlIcon24, PlTooltip } from '@platforma-sdk/ui-vue';\nimport Popup from '../Popup.vue';\nimport FixedLineTypeList from './FixedLineTypeList.vue';\nimport FixedDotShapeList from './FixedDotShapeList.vue';\nimport FixedColorsList from './FixedColorsList.vue';\n\ntype EditableAesType = 'color' | 'dotShape' | 'lineType';\n\nconst props = defineProps<{\n  item: {\n    text: string;\n    value: string;\n    dotShape?: DotShape;\n    color?: string;\n    lineType?: LineType;\n  };\n  activeValue: string | null;\n  activeAesType: EditableAesType | null;\n  usedAesInMapping: Record<AesType, boolean>;\n  palette: Palette;\n  allowReordering: boolean;\n  allowHiding: boolean;\n  hidden: boolean;\n  isCategorical: boolean;\n  onAesValueUpdate: (field: string, value: string | DotShape | LineType) => void;\n  onSwitchVisibility: () => void;\n  onActiveValueChange: (value: string | null) => void;\n  onActiveAesTypeChange: (value: EditableAesType | null) => void;\n  onCloseForm: () => void;\n}>();\n\nfunction toggleForm(\n  item: typeof props.item,\n  valueType: EditableAesType,\n) {\n  const isThisFormOpen = props.activeValue === item.value && props.activeAesType === valueType;\n  props.onActiveValueChange(isThisFormOpen ? null : item.value);\n  props.onActiveAesTypeChange(isThisFormOpen ? null : valueType);\n}\n\nconst selectedColorsList = computed(() =>\n  PALETTE_MAP[props.palette].colors.map((color: string) => ({ color, name: color })),\n);\nconst popupHeight = computed(() => {\n  if (!props.activeAesType) {\n    return 0;\n  }\n  return getPopupHeightForFixedAesList(\n    props.activeAesType === 'lineType' ? FIXED_LINE_TYPES.length : props.activeAesType === 'dotShape' ? FIXES_DOT_SHAPES.length : selectedColorsList.value.length,\n    props.activeAesType,\n  );\n});\n\nconst itemRefs = reactive<\n  Record<EditableAesType, Record<string, ComponentPublicInstance | Element>>\n>({\n  color: {},\n  dotShape: {},\n  lineType: {},\n});\nfunction setRef(\n  type: EditableAesType,\n  item: typeof props.item,\n  el: ComponentPublicInstance | null | Element,\n) {\n  if (el) {\n    itemRefs[type][item.value] = el;\n  }\n}\n</script>\n<template>\n  <div :class=\"[$style.columnValue, { [$style.withReorering]: allowReordering }]\">\n    <div :class=\"$style.title\" :title=\"item.text\">{{ item.text }}</div>\n    <div :class=\"$style.aesGroup\">\n      <PlTooltip v-if=\"allowHiding\" :open-delay=\"100\" :close-delay=\"100\">\n        <div :style=\"{ cursor: 'pointer' }\" :class=\"$style.aes\" @click.stop=\"onSwitchVisibility()\">\n          <PlIcon24 :name=\"hidden ? 'view-hide' : 'view-show'\" />\n        </div>\n        <template #tooltip>\n          <span> Show / hide </span>\n        </template>\n      </PlTooltip>\n      <div\n        v-if=\"usedAesInMapping.lineType\" :ref=\"(v) => setRef('lineType', item, v)\" :class=\"[$style.aes, {\n          [$style.selected]:\n            activeValue === item.value &&\n            activeAesType === 'lineType'\n        }]\" @click.stop=\"toggleForm(item, 'lineType')\"\n      >\n        <div class=\"icon__line line\" :class=\"{ [`line__${item.lineType}`]: true }\" />\n      </div>\n      <div\n        v-if=\"usedAesInMapping.dotShape\" :ref=\"(v) => setRef('dotShape', item, v)\" :class=\"[$style.aes, {\n          [$style.selected]: activeValue === item.value && activeAesType === 'dotShape'\n        }]\" @click.stop=\"toggleForm(item, 'dotShape')\"\n      >\n        <div class=\"dot\" :class=\"{ [`dot__${item.dotShape}`]: true }\" />\n      </div>\n      <div\n        v-if=\"usedAesInMapping.fill || usedAesInMapping.stroke\" :ref=\"(v) => setRef('color', item, v)\"\n        :class=\"[$style.aes, {\n          [$style.selected]: activeValue === item.value && activeAesType === 'color'\n        }]\" @click.stop=\"toggleForm(item, 'color')\"\n      >\n        <div :class=\"$style.color\" :style=\"{ background: item.color }\" />\n      </div>\n      <Popup\n        v-if=\"\n          (activeAesType !== 'color' || isCategorical) &&\n            activeAesType !== null &&\n            activeValue === item.value\n        \" :key=\"`${activeAesType}_${activeValue}`\" :targetRef=\"itemRefs[activeAesType][activeValue] as HTMLElement\"\n        :height=\"popupHeight\" @popup:close=\"onCloseForm\"\n      >\n        <div class=\"fixed-aes-list\" :class=\"{ 'fixed-aes-list__rows': false }\">\n          <FixedLineTypeList\n            v-if=\"activeAesType === 'lineType'\" v-model=\"item.lineType as LineType\" @update:modelValue=\"\n              (v: LineType) => props.onAesValueUpdate('lineShape', v)\n            \"\n          />\n          <FixedDotShapeList\n            v-if=\"activeAesType === 'dotShape'\" v-model=\"item.dotShape as DotShape\" @update:modelValue=\"\n              (v: DotShape) => props.onAesValueUpdate('dotShape', v)\n            \"\n          />\n          <FixedColorsList\n            v-if=\"activeAesType === 'color'\" v-model=\"item.color as string\"\n            :colors-list=\"selectedColorsList\" @update:modelValue=\"\n              (v: string) => props.onAesValueUpdate('color', v)\n            \"\n          />\n        </div>\n      </Popup>\n    </div>\n  </div>\n</template>\n\n<style module>\n.columnValue {\n  display: flex;\n  align-items: center;\n  padding-left: 12px;\n  padding-right: 2px;\n  margin-bottom: 6px;\n  background-color: var(--color-ic-00);\n  width: 100%;\n}\n\n.columnValue.withReorering {\n  padding-left: 4px;\n}\n\n.columnValue:last-child {\n  margin-bottom: 0;\n}\n\n.title {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-right: 8px;\n  line-height: 24px;\n}\n\n.color {\n  width: 18px;\n  height: 18px;\n  border-radius: 3px;\n}\n\n.aesGroup {\n  margin-left: auto;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n}\n\n.aes {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  background: var(--color-ic-00);\n  border-radius: var(--border-radius-control);\n}\n\n.aes.selected {\n  border: var(--contour-border-width) solid var(--contour-color);\n  box-shadow: var(--contour-box-shadow);\n  z-index: 1;\n}\n</style>\n"],"names":["props","__props","toggleForm","item","valueType","isThisFormOpen","selectedColorsList","computed","PALETTE_MAP","color","popupHeight","getPopupHeightForFixedAesList","FIXED_LINE_TYPES","FIXES_DOT_SHAPES","itemRefs","reactive","setRef","type","el","_createElementBlock","_normalizeClass","$style","_createElementVNode","_toDisplayString","_hoisted_1","_createBlock","_unref","PlTooltip","_cache","_createVNode","PlIcon24","v","_withModifiers","$event","_normalizeStyle","Popup","FixedLineTypeList","FixedDotShapeList","FixedColorsList"],"mappings":"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"}
+{"version":3,"file":"DiscreteRow.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/AesSettings/DiscreteRow.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { type ComponentPublicInstance, computed, reactive } from 'vue';\nimport { FIXED_LINE_TYPES, FIXES_DOT_SHAPES, PALETTE_MAP } from '../../constantsAesthetic';\nimport { getPopupHeightForFixedAesList } from '../../utils/getPopupHeightForFixedAesList';\nimport type { Palette, DotShape, LineType } from './types';\nimport type { AesType } from '../../constantsCommon';\nimport { PlIcon24, PlTooltip } from '@platforma-sdk/ui-vue';\nimport Popup from '../Popup.vue';\nimport FixedLineTypeList from './FixedLineTypeList.vue';\nimport FixedDotShapeList from './FixedDotShapeList.vue';\nimport FixedColorsList from './FixedColorsList.vue';\n\ntype EditableAesType = 'color' | 'dotShape' | 'lineType';\n\nconst props = defineProps<{\n  item: {\n    text: string;\n    value: string;\n    dotShape?: DotShape;\n    color?: string;\n    lineType?: LineType;\n  };\n  activeValue: string | null;\n  activeAesType: EditableAesType | null;\n  usedAesInMapping: Record<AesType, boolean>;\n  palette: Palette;\n  allowReordering: boolean;\n  allowHiding: boolean;\n  hidden: boolean;\n  isCategorical: boolean;\n  onAesValueUpdate: (field: string, value: string | DotShape | LineType) => void;\n  onSwitchVisibility: () => void;\n  onActiveValueChange: (value: string | null) => void;\n  onActiveAesTypeChange: (value: EditableAesType | null) => void;\n  onCloseForm: () => void;\n}>();\n\nfunction toggleForm(\n  item: typeof props.item,\n  valueType: EditableAesType,\n) {\n  const isThisFormOpen = props.activeValue === item.value && props.activeAesType === valueType;\n  props.onActiveValueChange(isThisFormOpen ? null : item.value);\n  props.onActiveAesTypeChange(isThisFormOpen ? null : valueType);\n}\n\nconst selectedColorsList = computed(() =>\n  PALETTE_MAP[props.palette].colors.map((color: string) => ({ color, name: color })),\n);\nconst popupHeight = computed(() => {\n  if (!props.activeAesType) {\n    return 0;\n  }\n  return getPopupHeightForFixedAesList(\n    props.activeAesType === 'lineType' ? FIXED_LINE_TYPES.length : props.activeAesType === 'dotShape' ? FIXES_DOT_SHAPES.length : selectedColorsList.value.length,\n    props.activeAesType,\n  );\n});\n\nconst itemRefs = reactive<\n  Record<EditableAesType, Record<string, ComponentPublicInstance | Element>>\n>({\n  color: {},\n  dotShape: {},\n  lineType: {},\n});\nfunction setRef(\n  type: EditableAesType,\n  item: typeof props.item,\n  el: ComponentPublicInstance | null | Element,\n) {\n  if (el) {\n    itemRefs[type][item.value] = el;\n  }\n}\n</script>\n<template>\n  <div :class=\"[$style.columnValue, { [$style.withReorering]: allowReordering }]\">\n    <div :class=\"$style.title\" :title=\"item.text\">{{ item.text }}</div>\n    <div :class=\"$style.aesGroup\">\n      <PlTooltip v-if=\"allowHiding\" :open-delay=\"100\" :close-delay=\"100\">\n        <div :style=\"{ cursor: 'pointer' }\" :class=\"$style.aes\" @click.stop=\"onSwitchVisibility()\">\n          <PlIcon24 :name=\"hidden ? 'view-hide' : 'view-show'\" />\n        </div>\n        <template #tooltip>\n          <span> Show / hide </span>\n        </template>\n      </PlTooltip>\n      <div\n        v-if=\"usedAesInMapping.lineType\" :ref=\"(v) => setRef('lineType', item, v)\" :class=\"[$style.aes, {\n          [$style.selected]:\n            activeValue === item.value &&\n            activeAesType === 'lineType'\n        }]\" @click.stop=\"toggleForm(item, 'lineType')\"\n      >\n        <div class=\"icon__line line\" :class=\"{ [`line__${item.lineType}`]: true }\" />\n      </div>\n      <div\n        v-if=\"usedAesInMapping.dotShape\" :ref=\"(v) => setRef('dotShape', item, v)\" :class=\"[$style.aes, {\n          [$style.selected]: activeValue === item.value && activeAesType === 'dotShape'\n        }]\" @click.stop=\"toggleForm(item, 'dotShape')\"\n      >\n        <div class=\"dot\" :class=\"{ [`dot__${item.dotShape}`]: true }\" />\n      </div>\n      <div\n        v-if=\"usedAesInMapping.fill || usedAesInMapping.stroke\" :ref=\"(v) => setRef('color', item, v)\"\n        :class=\"[$style.aes, {\n          [$style.selected]: activeValue === item.value && activeAesType === 'color'\n        }]\" @click.stop=\"toggleForm(item, 'color')\"\n      >\n        <div :class=\"$style.color\" :style=\"{ background: item.color }\" />\n      </div>\n      <Popup\n        v-if=\"\n          (activeAesType !== 'color' || isCategorical) &&\n            activeAesType !== null &&\n            activeValue === item.value\n        \" :key=\"`${activeAesType}_${activeValue}`\" :targetRef=\"itemRefs[activeAesType][activeValue] as HTMLElement\"\n        :height=\"popupHeight\" @popup:close=\"onCloseForm\"\n      >\n        <div class=\"fixed-aes-list\" :class=\"{ 'fixed-aes-list__rows': false }\">\n          <FixedLineTypeList\n            v-if=\"activeAesType === 'lineType'\" v-model=\"item.lineType as LineType\" @update:modelValue=\"\n              (v: LineType) => props.onAesValueUpdate('lineShape', v)\n            \"\n          />\n          <FixedDotShapeList\n            v-if=\"activeAesType === 'dotShape'\" v-model=\"item.dotShape as DotShape\" @update:modelValue=\"\n              (v: DotShape) => props.onAesValueUpdate('dotShape', v)\n            \"\n          />\n          <FixedColorsList\n            v-if=\"activeAesType === 'color'\" v-model=\"item.color as string\"\n            :colors-list=\"selectedColorsList\" @update:modelValue=\"\n              (v: string) => props.onAesValueUpdate('color', v)\n            \"\n          />\n        </div>\n      </Popup>\n    </div>\n  </div>\n</template>\n\n<style module>\n.columnValue {\n  display: flex;\n  align-items: center;\n  padding-left: 12px;\n  padding-right: 2px;\n  margin-bottom: 6px;\n  background-color: var(--color-ic-00);\n  width: 100%;\n}\n\n.columnValue.withReorering {\n  padding-left: 4px;\n}\n\n.columnValue:last-child {\n  margin-bottom: 0;\n}\n\n.title {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-right: 8px;\n  line-height: 24px;\n}\n\n.color {\n  width: 18px;\n  height: 18px;\n  border-radius: 3px;\n}\n\n.aesGroup {\n  margin-left: auto;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n}\n\n.aes {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  background: var(--color-ic-00);\n  border-radius: var(--border-radius-control);\n}\n\n.aes.selected {\n  border: var(--contour-border-width) solid var(--contour-color);\n  box-shadow: var(--contour-box-shadow);\n  z-index: 1;\n}\n</style>\n"],"mappings":"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"}

package/dist/components/AesSettings/FixedColorsList.js

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

package/dist/components/AesSettings/FixedColorsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FixedColorsList.js","names":[],"sources":["../../../src/components/AesSettings/FixedColorsList.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { FIXED_COLORS } from '../../constantsAesthetic';\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string;\n    colorUsing?: 'fill' | 'stroke';\n    colorsList?: typeof FIXED_COLORS;\n  }>(),\n  {\n    colorUsing: 'fill',\n    colorsList: () => FIXED_COLORS,\n  },\n);\n\nconst _emit = defineEmits(['update:modelValue']);\n</script>\n\n<template>\n  <div\n    v-for=\"color of props.colorsList\"\n    :key=\"color.color\"\n    class=\"color-item\"\n    :class=\"{\n      border: props.colorUsing === 'stroke',\n      white: color.name === 'White',\n      empty: color.name === 'None',\n      selected: color.color === modelValue,\n    }\"\n    :style=\"\n      color.name !== 'White' && color.name !== 'None'\n        ? `${colorUsing === 'fill' ? 'background' : 'border-color'}: ${\n          color.color\n        };`\n        : ''\n    \"\n    @click=\"$emit('update:modelValue', color.color)\"\n  >\n    <div class=\"checkmark\" />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/AesSettings/FixedColorsList.vue2.js

@@ -1,5 +1,28 @@
-import f from "./FixedColorsList.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=FixedColorsList.vue2.js.map
+import { FIXED_COLORS as e } from "../../constantsAesthetic.js";
+import { Fragment as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, openBlock as s, renderList as c } from "vue";
+var l = ["onClick"], u = /* @__PURE__ */ i({
+	__name: "FixedColorsList",
+	props: {
+		modelValue: {},
+		colorUsing: { default: "fill" },
+		colorsList: { default: () => e }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: i }) {
+		let u = e;
+		return (i, d) => (s(!0), n(t, null, c(u.colorsList, (t) => (s(), n("div", {
+			key: t.color,
+			class: a(["color-item", {
+				border: u.colorUsing === "stroke",
+				white: t.name === "White",
+				empty: t.name === "None",
+				selected: t.color === e.modelValue
+			}]),
+			style: o(t.name !== "White" && t.name !== "None" ? `${e.colorUsing === "fill" ? "background" : "border-color"}: ${t.color};` : ""),
+			onClick: (e) => i.$emit("update:modelValue", t.color)
+		}, [...d[0] ||= [r("div", { class: "checkmark" }, null, -1)]], 14, l))), 128));
+	}
+});
+export { u as default };
+
+//# sourceMappingURL=FixedColorsList.vue2.js.map

package/dist/components/AesSettings/FixedColorsList.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"FixedColorsList.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"FixedColorsList.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/AesSettings/FixedColorsList.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { FIXED_COLORS } from '../../constantsAesthetic';\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string;\n    colorUsing?: 'fill' | 'stroke';\n    colorsList?: typeof FIXED_COLORS;\n  }>(),\n  {\n    colorUsing: 'fill',\n    colorsList: () => FIXED_COLORS,\n  },\n);\n\nconst _emit = defineEmits(['update:modelValue']);\n</script>\n\n<template>\n  <div\n    v-for=\"color of props.colorsList\"\n    :key=\"color.color\"\n    class=\"color-item\"\n    :class=\"{\n      border: props.colorUsing === 'stroke',\n      white: color.name === 'White',\n      empty: color.name === 'None',\n      selected: color.color === modelValue,\n    }\"\n    :style=\"\n      color.name !== 'White' && color.name !== 'None'\n        ? `${colorUsing === 'fill' ? 'background' : 'border-color'}: ${\n          color.color\n        };`\n        : ''\n    \"\n    @click=\"$emit('update:modelValue', color.color)\"\n  >\n    <div class=\"checkmark\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;EAGA,IAAM,IAAQ;2BAgBZ,EAoBM,GAAA,MAAA,EAnBY,EAAM,aAAf,YADT,EAoBM,OAAA;GAlBH,KAAK,EAAM;GACZ,OAAK,EAAA,CAAC,cAAY;YACM,EAAM,eAAU;WAA4B,EAAM,SAAI;WAA2B,EAAM,SAAI;cAA6B,EAAM,UAAU,EAAA;;GAM/J,OAAK,EAAS,EAAM,SAAI,WAAgB,EAAM,SAAI,SAAA,GAAyB,EAAA,eAAU,SAAA,eAAA,eAAA,IAA2D,EAAM,MAAA,KAAA,GAAA;GAOtJ,UAAK,MAAEA,EAAAA,MAAK,qBAAsB,EAAM,MAAK;mBAE9C,EAAyB,OAAA,EAApB,OAAM,aAAW,EAAA,MAAA,GAAA,CAAA,CAAA,EAAA,IAAA,EAAA"}

package/dist/components/AesSettings/FixedDotShapeList.js

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

package/dist/components/AesSettings/FixedDotShapeList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FixedDotShapeList.js","names":[],"sources":["../../../src/components/AesSettings/FixedDotShapeList.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { DotShape } from './types';\nimport { FIXES_DOT_SHAPES } from '../../constantsAesthetic';\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string;\n    list?: DotShape[];\n  }>(),\n  {\n    list: () => FIXES_DOT_SHAPES,\n  },\n);\n\nconst _emit = defineEmits(['update:modelValue']);\n</script>\n\n<template>\n  <div\n    v-for=\"shape of props.list\"\n    :key=\"shape\"\n    class=\"color-item dot\"\n    :class=\"{\n      selected: shape === modelValue,\n      [`dot__${shape}`]: true\n    }\"\n    @click=\"$emit('update:modelValue', shape)\"\n  />\n</template>\n"],"mappings":""}

package/dist/components/AesSettings/FixedDotShapeList.vue2.js

@@ -1,5 +1,24 @@
-import f from "./FixedDotShapeList.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=FixedDotShapeList.vue2.js.map
+import { FIXES_DOT_SHAPES as e } from "../../constantsAesthetic.js";
+import { Fragment as t, createElementBlock as n, defineComponent as r, normalizeClass as i, openBlock as a, renderList as o } from "vue";
+var s = ["onClick"], c = /* @__PURE__ */ r({
+	__name: "FixedDotShapeList",
+	props: {
+		modelValue: {},
+		list: { default: () => e }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: r }) {
+		let c = e;
+		return (r, l) => (a(!0), n(t, null, o(c.list, (t) => (a(), n("div", {
+			key: t,
+			class: i(["color-item dot", {
+				selected: t === e.modelValue,
+				[`dot__${t}`]: !0
+			}]),
+			onClick: (e) => r.$emit("update:modelValue", t)
+		}, null, 10, s))), 128));
+	}
+});
+export { c as default };
+
+//# sourceMappingURL=FixedDotShapeList.vue2.js.map

package/dist/components/AesSettings/FixedDotShapeList.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"FixedDotShapeList.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"FixedDotShapeList.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/AesSettings/FixedDotShapeList.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { DotShape } from './types';\nimport { FIXES_DOT_SHAPES } from '../../constantsAesthetic';\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string;\n    list?: DotShape[];\n  }>(),\n  {\n    list: () => FIXES_DOT_SHAPES,\n  },\n);\n\nconst _emit = defineEmits(['update:modelValue']);\n</script>\n\n<template>\n  <div\n    v-for=\"shape of props.list\"\n    :key=\"shape\"\n    class=\"color-item dot\"\n    :class=\"{\n      selected: shape === modelValue,\n      [`dot__${shape}`]: true\n    }\"\n    @click=\"$emit('update:modelValue', shape)\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;EAIA,IAAM,IAAQ;2BAcZ,EASE,GAAA,MAAA,EARgB,EAAM,OAAf,YADT,EASE,OAAA;GAPC,KAAK;GACN,OAAK,EAAA,CAAC,kBAAgB;cACI,MAAU,EAAA;aAA2B,MAAK;;GAInE,UAAK,MAAEA,EAAAA,MAAK,qBAAsB,EAAK"}

package/dist/components/AesSettings/FixedLineTypeList.js

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

package/dist/components/AesSettings/FixedLineTypeList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FixedLineTypeList.js","names":[],"sources":["../../../src/components/AesSettings/FixedLineTypeList.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { LineType } from './types';\nimport {\n  FIXED_LINE_TYPES,\n  LINE_TYPES_MAP,\n} from '../../constantsAesthetic';\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string;\n    list?: LineType[];\n  }>(),\n  {\n    list: () => FIXED_LINE_TYPES,\n  },\n);\n\nconst _emit = defineEmits(['update:modelValue']);\n</script>\n\n<template>\n  <div\n    v-for=\"lineType of props.list\"\n    :key=\"lineType\"\n    class=\"row-item\"\n    :class=\"{\n      'row-item__selected': lineType === modelValue,\n      [`line__${lineType}`]: true,\n    }\"\n    @click=\"$emit('update:modelValue', lineType)\"\n  >\n    <div class=\"row-item__title\">{{ LINE_TYPES_MAP[lineType].title }}</div>\n    <svg class=\"row-item__line line\" :class=\"{ [`line__${lineType}`]: true }\">\n      <line x1=\"0\" x2=\"100%\" y1=\"50%\" y2=\"50%\" />\n    </svg>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/AesSettings/FixedLineTypeList.vue2.js

@@ -1,5 +1,29 @@
-import f from "./FixedLineTypeList.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=FixedLineTypeList.vue2.js.map
+import { FIXED_LINE_TYPES as e, LINE_TYPES_MAP as t } from "../../constantsAesthetic.js";
+import { Fragment as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, renderList as c, toDisplayString as l, unref as u } from "vue";
+var d = ["onClick"], f = { class: "row-item__title" }, p = /* @__PURE__ */ a({
+	__name: "FixedLineTypeList",
+	props: {
+		modelValue: {},
+		list: { default: () => e }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: a }) {
+		let p = e;
+		return (a, m) => (s(!0), r(n, null, c(p.list, (n) => (s(), r("div", {
+			key: n,
+			class: o(["row-item", {
+				"row-item__selected": n === e.modelValue,
+				[`line__${n}`]: !0
+			}]),
+			onClick: (e) => a.$emit("update:modelValue", n)
+		}, [i("div", f, l(u(t)[n].title), 1), (s(), r("svg", { class: o(["row-item__line line", { [`line__${n}`]: !0 }]) }, [...m[0] ||= [i("line", {
+			x1: "0",
+			x2: "100%",
+			y1: "50%",
+			y2: "50%"
+		}, null, -1)]], 2))], 10, d))), 128));
+	}
+});
+export { p as default };
+
+//# sourceMappingURL=FixedLineTypeList.vue2.js.map

package/dist/components/AesSettings/FixedLineTypeList.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"FixedLineTypeList.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"FixedLineTypeList.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/AesSettings/FixedLineTypeList.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { LineType } from './types';\nimport {\n  FIXED_LINE_TYPES,\n  LINE_TYPES_MAP,\n} from '../../constantsAesthetic';\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string;\n    list?: LineType[];\n  }>(),\n  {\n    list: () => FIXED_LINE_TYPES,\n  },\n);\n\nconst _emit = defineEmits(['update:modelValue']);\n</script>\n\n<template>\n  <div\n    v-for=\"lineType of props.list\"\n    :key=\"lineType\"\n    class=\"row-item\"\n    :class=\"{\n      'row-item__selected': lineType === modelValue,\n      [`line__${lineType}`]: true,\n    }\"\n    @click=\"$emit('update:modelValue', lineType)\"\n  >\n    <div class=\"row-item__title\">{{ LINE_TYPES_MAP[lineType].title }}</div>\n    <svg class=\"row-item__line line\" :class=\"{ [`line__${lineType}`]: true }\">\n      <line x1=\"0\" x2=\"100%\" y1=\"50%\" y2=\"50%\" />\n    </svg>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;EAOA,IAAM,IAAQ;2BAcZ,EAcM,GAAA,MAAA,EAbe,EAAM,OAAlB,YADT,EAcM,OAAA;GAZH,KAAK;GACN,OAAK,EAAA,CAAC,YAAU;0BACsB,MAAa,EAAA;cAA4B,MAAQ;;GAItF,UAAK,MAAEA,EAAAA,MAAK,qBAAsB,EAAQ;MAE3C,EAAuE,OAAvE,GAAuE,EAAvC,EAAA,EAAc,CAAC,GAAU,MAAK,EAAA,EAAA,GAAA,GAAA,EAC9D,EAEM,OAAA,EAFD,OAAK,EAAA,CAAC,uBAAqB,GAAA,SAAqB,MAAQ,IAAA,CAAA,CAAA,EAAA,EAAA,CAAA,GAAA,AAAA,EAAA,OAAA,CAC3D,EAA2C,QAAA;GAArC,IAAG;GAAI,IAAG;GAAO,IAAG;GAAM,IAAG"}

package/dist/components/AesSettings/FormWrapper.js

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

package/dist/components/AesSettings/FormWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormWrapper.js","names":[],"sources":["../../../src/components/AesSettings/FormWrapper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { onMounted } from 'vue';\nimport ArrowLeft from '../../icons/ArrowLeft.vue';\n\nconst props = defineProps<{\n  title: string;\n  backTitle: string;\n}>();\n\nconst emit = defineEmits(['form:close', 'form:open']);\nonMounted(() => {\n  emit('form:open');\n});\n\n</script>\n\n<template>\n  <Teleport to=\"#graph-settings-modal\">\n    <div ref=\"root\" class=\"aes-settings-form\">\n      <div class=\"aes-settings-form__header\">\n        <div class=\"back-link\" @click.stop=\"$emit('form:close')\">\n          <component :is=\"ArrowLeft\" />\n          {{ `Back to ${props.backTitle}` }}\n        </div>\n        <h3>\n          {{ props.title }}\n        </h3>\n      </div>\n      <slot/>\n    </div>\n  </Teleport>\n</template>\n"],"mappings":""}

package/dist/components/AesSettings/FormWrapper.vue2.js

@@ -1,5 +1,25 @@
-import f from "./FormWrapper.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=FormWrapper.vue2.js.map
+import e from "../../icons/ArrowLeft.js";
+import { Teleport as t, createBlock as n, createElementVNode as r, createTextVNode as i, defineComponent as a, onMounted as o, openBlock as s, renderSlot as c, resolveDynamicComponent as l, toDisplayString as u, withModifiers as d } from "vue";
+var f = {
+	ref: "root",
+	class: "aes-settings-form"
+}, p = { class: "aes-settings-form__header" }, m = /* @__PURE__ */ a({
+	__name: "FormWrapper",
+	props: {
+		title: {},
+		backTitle: {}
+	},
+	emits: ["form:close", "form:open"],
+	setup(a, { emit: m }) {
+		let h = a, g = m;
+		return o(() => {
+			g("form:open");
+		}), (a, o) => (s(), n(t, { to: "#graph-settings-modal" }, [r("div", f, [r("div", p, [r("div", {
+			class: "back-link",
+			onClick: o[0] ||= d((e) => a.$emit("form:close"), ["stop"])
+		}, [(s(), n(l(e))), i(" " + u(`Back to ${h.backTitle}`), 1)]), r("h3", null, u(h.title), 1)]), c(a.$slots, "default")], 512)]));
+	}
+});
+export { m as default };
+
+//# sourceMappingURL=FormWrapper.vue2.js.map

package/dist/components/AesSettings/FormWrapper.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormWrapper.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"FormWrapper.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/AesSettings/FormWrapper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { onMounted } from 'vue';\nimport ArrowLeft from '../../icons/ArrowLeft.vue';\n\nconst props = defineProps<{\n  title: string;\n  backTitle: string;\n}>();\n\nconst emit = defineEmits(['form:close', 'form:open']);\nonMounted(() => {\n  emit('form:open');\n});\n\n</script>\n\n<template>\n  <Teleport to=\"#graph-settings-modal\">\n    <div ref=\"root\" class=\"aes-settings-form\">\n      <div class=\"aes-settings-form__header\">\n        <div class=\"back-link\" @click.stop=\"$emit('form:close')\">\n          <component :is=\"ArrowLeft\" />\n          {{ `Back to ${props.backTitle}` }}\n        </div>\n        <h3>\n          {{ props.title }}\n        </h3>\n      </div>\n      <slot/>\n    </div>\n  </Teleport>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAIA,IAAM,IAAQ,GAKR,IAAO;SACb,QAAgB;AACd,KAAK,YAAY;IACjB,kBAKA,EAaW,GAAA,EAbD,IAAG,yBAAuB,EAAA,CAClC,EAWM,OAXN,GAWM,CAVJ,EAQM,OARN,GAQM,CAPJ,EAGM,OAAA;GAHD,OAAM;GAAa,SAAK,AAAA,EAAA,OAAA,GAAA,MAAOA,EAAAA,MAAK,aAAA,EAAA,CAAA,OAAA,CAAA;YACvC,EAA6B,EAAb,EAAS,CAAA,GAAA,EAAI,MAC7B,EAAA,WAAc,EAAM,YAAS,EAAA,EAAA,CAAA,CAAA,EAE/B,EAEK,MAAA,MAAA,EADA,EAAM,MAAK,EAAA,EAAA,CAAA,CAAA,EAGlB,EAAO,EAAA,QAAA,UAAA,CAAA,EAAA,IAAA,CAAA,CAAA"}

package/dist/components/AesSettings/PalettesForm.js

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

package/dist/components/AesSettings/PalettesForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PalettesForm.js","names":[],"sources":["../../../src/components/AesSettings/PalettesForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type {\n  Palette,\n  PaletteData,\n} from './types';\nimport {\n  CATEGORICAL_LIST,\n  DIVERGING_LIST,\n  PALETTE_MAP,\n  SEQUENTIAL_LIST,\n} from '../../constantsAesthetic';\n\nconst emit = defineEmits(['select']);\n\nconst props = withDefaults(defineProps<{\n  selected: Palette;\n  categorical?: boolean;\n  sequential?: boolean;\n  diverging?: boolean;\n}>(), {\n  categorical: true,\n  sequential: true,\n  diverging: true,\n});\n\nconst COLORS_CATEGORICAL_VISIBLE = 9;\n\nfunction onSelect(v: Palette) {\n  emit('select', v);\n}\n\nfunction createCssGradient(palette: PaletteData) {\n  const step = 100 / (palette.length - 1);\n  return `background: linear-gradient(to right, ${palette\n    .map((value, idx) => `${value} ${idx * step}%`)\n    .join(', ')})`;\n}\n</script>\n\n<template>\n  <div class=\"palettes-groups\">\n    <template v-if=\"categorical\">\n      <div class=\"section-title\"><span>CATEGORICAL</span></div>\n      <div class=\"section-description\">\n        Best to representing categorical data\n      </div>\n      <div class=\"palettes-list\">\n        <div\n          v-for=\"palette of CATEGORICAL_LIST\"\n          :key=\"palette\"\n          class=\"palettes-list__palette\"\n          :class=\"{ selected: props.selected === palette }\"\n          @click.stop=\"onSelect(palette)\"\n        >\n          <div>{{ PALETTE_MAP[palette].title }}</div>\n          <div class=\"palette-gradient\">\n            <div\n              v-for=\"color of PALETTE_MAP[palette].colors.slice(\n                0,\n                COLORS_CATEGORICAL_VISIBLE,\n              )\"\n              :key=\"color\"\n              class=\"palette-gradient__item\"\n              :style=\"{ background: color }\"\n            />\n          </div>\n        </div>\n      </div>\n    </template>\n    <template v-if=\"sequential\">\n      <div class=\"section-title\"><span>SEQUENTIAL</span></div>\n      <div class=\"section-description\">\n        Best to representing sequential data\n      </div>\n      <div class=\"palettes-list\">\n        <div\n          v-for=\"palette of SEQUENTIAL_LIST\"\n          :key=\"palette\"\n          class=\"palettes-list__palette\"\n          :class=\"{ selected: selected === palette }\"\n          @click.stop=\"onSelect(palette)\"\n        >\n          <div>{{ PALETTE_MAP[palette].title }}</div>\n          <div\n            class=\"palette-gradient\"\n            :style=\"createCssGradient(PALETTE_MAP[palette].colors)\"\n          />\n        </div>\n      </div>\n    </template>\n    <template v-if=\"diverging\">\n      <div class=\"section-title\"><span>DIVERGING</span></div>\n      <div class=\"section-description\">\n        Best to representing diverging data\n      </div>\n      <div class=\"palettes-list\">\n        <div\n          v-for=\"palette of DIVERGING_LIST\"\n          :key=\"palette\"\n          class=\"palettes-list__palette\"\n          :class=\"{ selected: selected === palette }\"\n          @click.stop=\"onSelect(palette)\"\n        >\n          <div>{{ PALETTE_MAP[palette].title }}</div>\n          <div\n            class=\"palette-gradient\"\n            :style=\"createCssGradient(PALETTE_MAP[palette].colors)\"\n          />\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":""}