vviinn-widgets 2.18.21 → 2.19.0

package/dist/collection/components/vviinn-icons/index.js

@@ -1,28 +1,12 @@
 import { h } from "@stencil/core";
-export const ArrowIcon = () => (h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  h("path", { d: "M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z" })));
-export const CameraIcon = () => (h("svg", { width: "22", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16.567 3H19A3.01 3.01 0 0 1 22 6v7.69h-2V6c0-.55-.451-1-1.001-1h-3.502l-2.03-3H8.543L6.603 5H3.001c-.55 0-1 .45-1 1v11c0 .55.45 1 1 1h5.933v2H3.001A3.01 3.01 0 0 1 0 17V6c0-1.65 1.35-3 3.001-3h2.522l1.94-3h7.074l2.03 3Zm-5.562 3c1.28 0 2.561.48 3.542 1.46h-.01a4.992 4.992 0 0 1 .64 6.29l3.051 3.05-1.41 1.41-3.052-3.05c-.84.55-1.8.83-2.76.83-1.282 0-2.562-.48-3.543-1.46a5.002 5.002 0 0 1 0-7.07A5.026 5.026 0 0 1 11.005 6Zm-2.771 5a2.763 2.763 0 0 0 2.771 2.77A2.763 2.763 0 0 0 13.776 11a2.763 2.763 0 0 0-2.771-2.77A2.763 2.763 0 0 0 8.234 11Z", fill: "#161616" })));
-export const OnboardingCard1Icon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "120", height: "120", fill: "none" },
-  h("defs", null),
-  h("path", { fill: "#393939", d: "M74.55 20a5.06 5.06 0 014.14 2l4.72 9.32.1.18.11.17A5.07 5.07 0 0087.93 34h13.87c5.07 0 9.2 3.59 9.2 8v50c0 4.41-4.13 8-9.2 8H18.2c-5.07 0-9.2-3.59-9.2-8V42c0-4.41 4.13-8 9.2-8h13.87a5.072 5.072 0 004.31-2.34l.11-.17.1-.18L41.31 22a5.06 5.06 0 014.14-2h29.1zm0-4h-29.1a9 9 0 00-7.6 4L33 29.5a1.13 1.13 0 01-1 .5H18.2C10.91 30 5 35.37 5 42v50c0 6.63 5.91 12 13.2 12h83.6c7.29 0 13.2-5.37 13.2-12V42c0-6.63-5.91-12-13.2-12H87.93a1.13 1.13 0 01-1-.5L82.15 20a9 9 0 00-7.6-4z" }),
-  h("path", { fill: "#393939", d: "M96 46a4 4 0 110 8 4 4 0 010-8zm0-4a8 8 0 100 16.001A8 8 0 0096 42z" }),
-  h("path", { class: "colored", d: "M60 42a24 24 0 100 48.001A24 24 0 0060 42zm12 26H62v10a2 2 0 01-4 0V68H48a2 2 0 010-4h10V54a2 2 0 014 0v10h10a2 2 0 110 4z" })));
-export const OnboardingCard2Icon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "120", height: "120", fill: "none" },
-  h("defs", null),
-  h("path", { fill: "#393939", d: "M110.35 96.52l-24.8-22.66a6.22 6.22 0 00-8.14-.27l-.09.07-10.57 8.93-18.33-17.88a6.001 6.001 0 00-8.51-.35L8.69 91.49a2 2 0 002.62 3l31.3-27.2a2 2 0 012.233-.359 2 2 0 01.637.479l.1.1 45 43.9a2.005 2.005 0 002.83-.03 2.003 2.003 0 00-.03-2.83L69.63 85.39l10.22-8.63a2.3 2.3 0 013 .07l24.77 22.65c.377.343.871.529 1.38.52a2 2 0 001.35-3.48zM75 31a10 10 0 110 20 10 10 0 010-20zm0-4a14 14 0 100 28 14 14 0 000-28z" }),
-  h("path", { class: "colored", d: "M12 36H8V20A12 12 0 0120 8h16v4H20a8 8 0 00-8 8v16zM112 36h-4V20a8.001 8.001 0 00-8-8H84V8h16a11.998 11.998 0 0112 12v16zM36 112H20a11.998 11.998 0 01-12-12V84h4v16a8 8 0 008 8h16v4zM100 112H84v-4h16a8 8 0 008-8V84h4v16c0 3.183-1.264 6.235-3.515 8.485A11.996 11.996 0 01100 112z" })));
-export const OnboardingCard3Icon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "120", height: "120", fill: "none" },
-  h("defs", null),
-  h("path", { class: "colored", d: "M84.09 43.24a.53.53 0 00-.29-.48L60.28 29.4a.522.522 0 00-.27-.07.531.531 0 00-.28.07L36.2 42.76a.54.54 0 000 1l23.53 13.3a.54.54 0 00.55 0L83.8 43.72a.53.53 0 00.29-.48zM57.28 61.23L33.73 47.88a.569.569 0 00-.85.48V75a.54.54 0 00.29.48L56.72 88.8a.56.56 0 00.56 0 .53.53 0 00.28-.48V61.71a.56.56 0 00-.28-.48zM86.84 47.88a.63.63 0 00-.29-.08.55.55 0 00-.28.08L62.73 61.23a.56.56 0 00-.28.48v26.61a.53.53 0 00.28.48.56.56 0 00.56 0l23.54-13.29a.54.54 0 00.29-.48V48.36a.55.55 0 00-.28-.48z" }),
-  h("path", { class: "colored", d: "M100 7.94H20a12 12 0 00-12 12v80a11.998 11.998 0 0012 12h80c3.183 0 6.235-1.264 8.485-3.515A11.996 11.996 0 00112 99.94v-80a11.998 11.998 0 00-12-12zm-8 69.24a1.69 1.69 0 01-.85 1.45l-30.31 17.1a1.77 1.77 0 01-1.67 0l-30.32-17.1a1.689 1.689 0 01-.85-1.45V42.82a1.66 1.66 0 01.85-1.45l30.32-17.21a1.71 1.71 0 011.67 0l30.31 17.21a1.67 1.67 0 01.85 1.45v34.36z" })));
-export const CheckIcon = () => (h("svg", { width: "14", height: "11", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  h("path", { d: "M5 10.414 0 5.413 1.413 4 5 7.586 12.585 0 14 1.415l-9 8.999Z", fill: "var(--color-primary, var(--color-primary-system))" })));
-export const LoaderIcon = () => (h("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 28 28" },
-  h("path", { fill: "#fff", d: "M23,14a9,9,0,1,1-9-9V2A12,12,0,1,0,26,14Z" })));
-export const ChevronIcon = () => (h("svg", { width: "9", height: "16", xmlns: "http://www.w3.org/2000/svg" },
-  h("path", { d: "m9 8-7.895 8L0 14.88 6.79 8 0 1.12 1.105 0 9 8Z" })));
-export const VisualSearchIcon = () => (h("svg", { width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5 2C3.35 2 2 3.35 2 5v2H0V5c0-2.76 2.24-5 5-5h2v2H5Zm5 3c1.28 0 2.56.48 3.54 1.46h-.01a4.994 4.994 0 0 1 .64 6.29l3.05 3.05-1.41 1.41-3.05-3.05c-.84.55-1.8.83-2.76.83a4.98 4.98 0 0 1-3.54-1.46 5.003 5.003 0 0 1 0-7.07C7.44 5.49 8.72 5 10 5Zm-2.77 5c0 .74.29 1.44.81 1.96s1.22.81 1.96.81 1.44-.29 1.96-.81.81-1.22.81-1.96-.29-1.44-.81-1.96-1.22-.81-1.96-.81-1.44.29-1.96.81-.81 1.22-.81 1.96ZM2 15v-2H0v2c0 2.76 2.24 5 5 5h2v-2H5c-1.65 0-3-1.35-3-3ZM13 0h2c2.76 0 5 2.24 5 5v2h-2V5c0-1.65-1.35-3-3-3h-2V0Z", fill: "#161616" })));
-export const CrossIcon = () => (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  h("path", { d: "M16 1.4L14.6 0L8 6.6L1.4 0L0 1.4L6.6 8L0 14.6L1.4 16L8 9.4L14.6 16L16 14.6L9.4 8L16 1.4Z", fill: "#161616" })));
+export const ArrowIcon = () => (h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z" })));
+export const CameraIcon = () => (h("svg", { width: "22", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16.567 3H19A3.01 3.01 0 0 1 22 6v7.69h-2V6c0-.55-.451-1-1.001-1h-3.502l-2.03-3H8.543L6.603 5H3.001c-.55 0-1 .45-1 1v11c0 .55.45 1 1 1h5.933v2H3.001A3.01 3.01 0 0 1 0 17V6c0-1.65 1.35-3 3.001-3h2.522l1.94-3h7.074l2.03 3Zm-5.562 3c1.28 0 2.561.48 3.542 1.46h-.01a4.992 4.992 0 0 1 .64 6.29l3.051 3.05-1.41 1.41-3.052-3.05c-.84.55-1.8.83-2.76.83-1.282 0-2.562-.48-3.543-1.46a5.002 5.002 0 0 1 0-7.07A5.026 5.026 0 0 1 11.005 6Zm-2.771 5a2.763 2.763 0 0 0 2.771 2.77A2.763 2.763 0 0 0 13.776 11a2.763 2.763 0 0 0-2.771-2.77A2.763 2.763 0 0 0 8.234 11Z", fill: "#161616" })));
+export const OnboardingCard1Icon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "120", height: "120", fill: "none" }, h("defs", null), h("path", { fill: "#393939", d: "M74.55 20a5.06 5.06 0 014.14 2l4.72 9.32.1.18.11.17A5.07 5.07 0 0087.93 34h13.87c5.07 0 9.2 3.59 9.2 8v50c0 4.41-4.13 8-9.2 8H18.2c-5.07 0-9.2-3.59-9.2-8V42c0-4.41 4.13-8 9.2-8h13.87a5.072 5.072 0 004.31-2.34l.11-.17.1-.18L41.31 22a5.06 5.06 0 014.14-2h29.1zm0-4h-29.1a9 9 0 00-7.6 4L33 29.5a1.13 1.13 0 01-1 .5H18.2C10.91 30 5 35.37 5 42v50c0 6.63 5.91 12 13.2 12h83.6c7.29 0 13.2-5.37 13.2-12V42c0-6.63-5.91-12-13.2-12H87.93a1.13 1.13 0 01-1-.5L82.15 20a9 9 0 00-7.6-4z" }), h("path", { fill: "#393939", d: "M96 46a4 4 0 110 8 4 4 0 010-8zm0-4a8 8 0 100 16.001A8 8 0 0096 42z" }), h("path", { class: "colored", d: "M60 42a24 24 0 100 48.001A24 24 0 0060 42zm12 26H62v10a2 2 0 01-4 0V68H48a2 2 0 010-4h10V54a2 2 0 014 0v10h10a2 2 0 110 4z" })));
+export const OnboardingCard2Icon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "120", height: "120", fill: "none" }, h("defs", null), h("path", { fill: "#393939", d: "M110.35 96.52l-24.8-22.66a6.22 6.22 0 00-8.14-.27l-.09.07-10.57 8.93-18.33-17.88a6.001 6.001 0 00-8.51-.35L8.69 91.49a2 2 0 002.62 3l31.3-27.2a2 2 0 012.233-.359 2 2 0 01.637.479l.1.1 45 43.9a2.005 2.005 0 002.83-.03 2.003 2.003 0 00-.03-2.83L69.63 85.39l10.22-8.63a2.3 2.3 0 013 .07l24.77 22.65c.377.343.871.529 1.38.52a2 2 0 001.35-3.48zM75 31a10 10 0 110 20 10 10 0 010-20zm0-4a14 14 0 100 28 14 14 0 000-28z" }), h("path", { class: "colored", d: "M12 36H8V20A12 12 0 0120 8h16v4H20a8 8 0 00-8 8v16zM112 36h-4V20a8.001 8.001 0 00-8-8H84V8h16a11.998 11.998 0 0112 12v16zM36 112H20a11.998 11.998 0 01-12-12V84h4v16a8 8 0 008 8h16v4zM100 112H84v-4h16a8 8 0 008-8V84h4v16c0 3.183-1.264 6.235-3.515 8.485A11.996 11.996 0 01100 112z" })));
+export const OnboardingCard3Icon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "120", height: "120", fill: "none" }, h("defs", null), h("path", { class: "colored", d: "M84.09 43.24a.53.53 0 00-.29-.48L60.28 29.4a.522.522 0 00-.27-.07.531.531 0 00-.28.07L36.2 42.76a.54.54 0 000 1l23.53 13.3a.54.54 0 00.55 0L83.8 43.72a.53.53 0 00.29-.48zM57.28 61.23L33.73 47.88a.569.569 0 00-.85.48V75a.54.54 0 00.29.48L56.72 88.8a.56.56 0 00.56 0 .53.53 0 00.28-.48V61.71a.56.56 0 00-.28-.48zM86.84 47.88a.63.63 0 00-.29-.08.55.55 0 00-.28.08L62.73 61.23a.56.56 0 00-.28.48v26.61a.53.53 0 00.28.48.56.56 0 00.56 0l23.54-13.29a.54.54 0 00.29-.48V48.36a.55.55 0 00-.28-.48z" }), h("path", { class: "colored", d: "M100 7.94H20a12 12 0 00-12 12v80a11.998 11.998 0 0012 12h80c3.183 0 6.235-1.264 8.485-3.515A11.996 11.996 0 00112 99.94v-80a11.998 11.998 0 00-12-12zm-8 69.24a1.69 1.69 0 01-.85 1.45l-30.31 17.1a1.77 1.77 0 01-1.67 0l-30.32-17.1a1.689 1.689 0 01-.85-1.45V42.82a1.66 1.66 0 01.85-1.45l30.32-17.21a1.71 1.71 0 011.67 0l30.31 17.21a1.67 1.67 0 01.85 1.45v34.36z" })));
+export const CheckIcon = () => (h("svg", { width: "14", height: "11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M5 10.414 0 5.413 1.413 4 5 7.586 12.585 0 14 1.415l-9 8.999Z", fill: "var(--color-primary, var(--color-primary-system))" })));
+export const LoaderIcon = () => (h("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 28 28" }, h("path", { fill: "#fff", d: "M23,14a9,9,0,1,1-9-9V2A12,12,0,1,0,26,14Z" })));
+export const ChevronIcon = () => (h("svg", { width: "9", height: "16", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m9 8-7.895 8L0 14.88 6.79 8 0 1.12 1.105 0 9 8Z" })));
+export const VisualSearchIcon = () => (h("svg", { width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5 2C3.35 2 2 3.35 2 5v2H0V5c0-2.76 2.24-5 5-5h2v2H5Zm5 3c1.28 0 2.56.48 3.54 1.46h-.01a4.994 4.994 0 0 1 .64 6.29l3.05 3.05-1.41 1.41-3.05-3.05c-.84.55-1.8.83-2.76.83a4.98 4.98 0 0 1-3.54-1.46 5.003 5.003 0 0 1 0-7.07C7.44 5.49 8.72 5 10 5Zm-2.77 5c0 .74.29 1.44.81 1.96s1.22.81 1.96.81 1.44-.29 1.96-.81.81-1.22.81-1.96-.29-1.44-.81-1.96-1.22-.81-1.96-.81-1.44.29-1.96.81-.81 1.22-.81 1.96ZM2 15v-2H0v2c0 2.76 2.24 5 5 5h2v-2H5c-1.65 0-3-1.35-3-3ZM13 0h2c2.76 0 5 2.24 5 5v2h-2V5c0-1.65-1.35-3-3-3h-2V0Z", fill: "#161616" })));
+export const CrossIcon = () => (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M16 1.4L14.6 0L8 6.6L1.4 0L0 1.4L6.6 8L0 14.6L1.4 16L8 9.4L14.6 16L16 14.6L9.4 8L16 1.4Z", fill: "#161616" })));
+//# sourceMappingURL=index.js.map

package/dist/collection/components/vviinn-icons/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/vviinn-icons/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from \"@stencil/core\";\n\nexport const ArrowIcon = () => (\n  <svg width=\"12\" height=\"20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z\" />\n  </svg>\n);\n\nexport const CameraIcon = () => (\n  <svg width=\"22\" height=\"20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M16.567 3H19A3.01 3.01 0 0 1 22 6v7.69h-2V6c0-.55-.451-1-1.001-1h-3.502l-2.03-3H8.543L6.603 5H3.001c-.55 0-1 .45-1 1v11c0 .55.45 1 1 1h5.933v2H3.001A3.01 3.01 0 0 1 0 17V6c0-1.65 1.35-3 3.001-3h2.522l1.94-3h7.074l2.03 3Zm-5.562 3c1.28 0 2.561.48 3.542 1.46h-.01a4.992 4.992 0 0 1 .64 6.29l3.051 3.05-1.41 1.41-3.052-3.05c-.84.55-1.8.83-2.76.83-1.282 0-2.562-.48-3.543-1.46a5.002 5.002 0 0 1 0-7.07A5.026 5.026 0 0 1 11.005 6Zm-2.771 5a2.763 2.763 0 0 0 2.771 2.77A2.763 2.763 0 0 0 13.776 11a2.763 2.763 0 0 0-2.771-2.77A2.763 2.763 0 0 0 8.234 11Z\"\n      fill=\"#161616\"\n    />\n  </svg>\n);\n\nexport const OnboardingCard1Icon = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"120\" height=\"120\" fill=\"none\">\n    <defs />\n    <path\n      fill=\"#393939\"\n      d=\"M74.55 20a5.06 5.06 0 014.14 2l4.72 9.32.1.18.11.17A5.07 5.07 0 0087.93 34h13.87c5.07 0 9.2 3.59 9.2 8v50c0 4.41-4.13 8-9.2 8H18.2c-5.07 0-9.2-3.59-9.2-8V42c0-4.41 4.13-8 9.2-8h13.87a5.072 5.072 0 004.31-2.34l.11-.17.1-.18L41.31 22a5.06 5.06 0 014.14-2h29.1zm0-4h-29.1a9 9 0 00-7.6 4L33 29.5a1.13 1.13 0 01-1 .5H18.2C10.91 30 5 35.37 5 42v50c0 6.63 5.91 12 13.2 12h83.6c7.29 0 13.2-5.37 13.2-12V42c0-6.63-5.91-12-13.2-12H87.93a1.13 1.13 0 01-1-.5L82.15 20a9 9 0 00-7.6-4z\"\n    />\n    <path\n      fill=\"#393939\"\n      d=\"M96 46a4 4 0 110 8 4 4 0 010-8zm0-4a8 8 0 100 16.001A8 8 0 0096 42z\"\n    />\n    <path\n      class=\"colored\"\n      d=\"M60 42a24 24 0 100 48.001A24 24 0 0060 42zm12 26H62v10a2 2 0 01-4 0V68H48a2 2 0 010-4h10V54a2 2 0 014 0v10h10a2 2 0 110 4z\"\n    />\n  </svg>\n);\n\nexport const OnboardingCard2Icon = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"120\" height=\"120\" fill=\"none\">\n    <defs />\n    <path\n      fill=\"#393939\"\n      d=\"M110.35 96.52l-24.8-22.66a6.22 6.22 0 00-8.14-.27l-.09.07-10.57 8.93-18.33-17.88a6.001 6.001 0 00-8.51-.35L8.69 91.49a2 2 0 002.62 3l31.3-27.2a2 2 0 012.233-.359 2 2 0 01.637.479l.1.1 45 43.9a2.005 2.005 0 002.83-.03 2.003 2.003 0 00-.03-2.83L69.63 85.39l10.22-8.63a2.3 2.3 0 013 .07l24.77 22.65c.377.343.871.529 1.38.52a2 2 0 001.35-3.48zM75 31a10 10 0 110 20 10 10 0 010-20zm0-4a14 14 0 100 28 14 14 0 000-28z\"\n    />\n    <path\n      class=\"colored\"\n      d=\"M12 36H8V20A12 12 0 0120 8h16v4H20a8 8 0 00-8 8v16zM112 36h-4V20a8.001 8.001 0 00-8-8H84V8h16a11.998 11.998 0 0112 12v16zM36 112H20a11.998 11.998 0 01-12-12V84h4v16a8 8 0 008 8h16v4zM100 112H84v-4h16a8 8 0 008-8V84h4v16c0 3.183-1.264 6.235-3.515 8.485A11.996 11.996 0 01100 112z\"\n    />\n  </svg>\n);\n\nexport const OnboardingCard3Icon = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"120\" height=\"120\" fill=\"none\">\n    <defs />\n    <path\n      class=\"colored\"\n      d=\"M84.09 43.24a.53.53 0 00-.29-.48L60.28 29.4a.522.522 0 00-.27-.07.531.531 0 00-.28.07L36.2 42.76a.54.54 0 000 1l23.53 13.3a.54.54 0 00.55 0L83.8 43.72a.53.53 0 00.29-.48zM57.28 61.23L33.73 47.88a.569.569 0 00-.85.48V75a.54.54 0 00.29.48L56.72 88.8a.56.56 0 00.56 0 .53.53 0 00.28-.48V61.71a.56.56 0 00-.28-.48zM86.84 47.88a.63.63 0 00-.29-.08.55.55 0 00-.28.08L62.73 61.23a.56.56 0 00-.28.48v26.61a.53.53 0 00.28.48.56.56 0 00.56 0l23.54-13.29a.54.54 0 00.29-.48V48.36a.55.55 0 00-.28-.48z\"\n    />\n    <path\n      class=\"colored\"\n      d=\"M100 7.94H20a12 12 0 00-12 12v80a11.998 11.998 0 0012 12h80c3.183 0 6.235-1.264 8.485-3.515A11.996 11.996 0 00112 99.94v-80a11.998 11.998 0 00-12-12zm-8 69.24a1.69 1.69 0 01-.85 1.45l-30.31 17.1a1.77 1.77 0 01-1.67 0l-30.32-17.1a1.689 1.689 0 01-.85-1.45V42.82a1.66 1.66 0 01.85-1.45l30.32-17.21a1.71 1.71 0 011.67 0l30.31 17.21a1.67 1.67 0 01.85 1.45v34.36z\"\n    />\n  </svg>\n);\n\nexport const CheckIcon = () => (\n  <svg width=\"14\" height=\"11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M5 10.414 0 5.413 1.413 4 5 7.586 12.585 0 14 1.415l-9 8.999Z\"\n      fill=\"var(--color-primary, var(--color-primary-system))\"\n    />\n  </svg>\n);\n\nexport const LoaderIcon = () => (\n  <svg\n    width=\"100%\"\n    height=\"100%\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 28 28\"\n  >\n    <path fill=\"#fff\" d=\"M23,14a9,9,0,1,1-9-9V2A12,12,0,1,0,26,14Z\" />\n  </svg>\n);\n\nexport const ChevronIcon = () => (\n  <svg width=\"9\" height=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"m9 8-7.895 8L0 14.88 6.79 8 0 1.12 1.105 0 9 8Z\" />\n  </svg>\n);\n\nexport const VisualSearchIcon = () => (\n  <svg width=\"20\" height=\"20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M5 2C3.35 2 2 3.35 2 5v2H0V5c0-2.76 2.24-5 5-5h2v2H5Zm5 3c1.28 0 2.56.48 3.54 1.46h-.01a4.994 4.994 0 0 1 .64 6.29l3.05 3.05-1.41 1.41-3.05-3.05c-.84.55-1.8.83-2.76.83a4.98 4.98 0 0 1-3.54-1.46 5.003 5.003 0 0 1 0-7.07C7.44 5.49 8.72 5 10 5Zm-2.77 5c0 .74.29 1.44.81 1.96s1.22.81 1.96.81 1.44-.29 1.96-.81.81-1.22.81-1.96-.29-1.44-.81-1.96-1.22-.81-1.96-.81-1.44.29-1.96.81-.81 1.22-.81 1.96ZM2 15v-2H0v2c0 2.76 2.24 5 5 5h2v-2H5c-1.65 0-3-1.35-3-3ZM13 0h2c2.76 0 5 2.24 5 5v2h-2V5c0-1.65-1.35-3-3-3h-2V0Z\"\n      fill=\"#161616\"\n    />\n  </svg>\n);\n\nexport const CrossIcon = () => (\n  <svg\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M16 1.4L14.6 0L8 6.6L1.4 0L0 1.4L6.6 8L0 14.6L1.4 16L8 9.4L14.6 16L16 14.6L9.4 8L16 1.4Z\"\n      fill=\"#161616\"\n    />\n  </svg>\n);\n"]}

package/dist/collection/components/vviinn-image-selector/vviinn-image-selector.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, Event, Prop } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import * as E from "fp-ts/Either";
 import { pipe } from "fp-ts/lib/function";
 import { imageSearchState, processSelectedFile, } from "../../store/imageSearch.store";
@@ -6,6 +6,11 @@ import { imageSearchState, processSelectedFile, } from "../../store/imageSearch.
  * @part button -  button look and feel
  */
 export class VviinnImageSelector {
+  constructor() {
+    this.basicEventData = undefined;
+    this.startUpload = undefined;
+    this.resetVpsButton = undefined;
+  }
   async handleInputChange(event) {
     const input = event.target;
     const processingResult = await processSelectedFile(input.files[0]);
@@ -15,82 +20,131 @@ export class VviinnImageSelector {
   isLoading() {
     return imageSearchState.loading;
   }
+  startUploadWatcher(upload) {
+    if (upload) {
+      this.fileInput.click();
+      this.resetVpsButton();
+    }
+  }
   render() {
-    return (h(Host, { exportparts: "button" },
-      this.isLoading() ? h("vviinn-preloader", null) : null,
-      this.isLoading() ? null : (h("label", { htmlFor: "fileInput", part: "button" },
-        h("slot", { name: "upload-button-text" }, "Upload image"))),
-      h("input", { id: "fileInput", class: "visually-hidden", type: "file", accept: "image/*", onChange: (event) => this.handleInputChange(event) })));
+    return (h(Host, { exportparts: "button" }, this.isLoading() ? h("vviinn-preloader", null) : null, this.isLoading() ? null : (h("label", { htmlFor: "fileInput", part: "button" }, h("slot", { name: "upload-button-text" }, "Upload image"))), h("input", { id: "fileInput", class: "visually-hidden", type: "file", accept: "image/*", onChange: (event) => this.handleInputChange(event), ref: (el) => (this.fileInput = el) })));
   }
   static get is() { return "vviinn-image-selector"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-image-selector.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-image-selector.css"]
-  }; }
-  static get properties() { return {
-    "basicEventData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "BasicEventData",
-        "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
-        "references": {
-          "BasicEventData": {
-            "location": "import",
-            "path": "../../recommendation/events"
+  static get originalStyleUrls() {
+    return {
+      "$": ["vviinn-image-selector.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["vviinn-image-selector.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "basicEventData": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "BasicEventData",
+          "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
+          "references": {
+            "BasicEventData": {
+              "location": "import",
+              "path": "../../recommendation/events"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    }
-  }; }
-  static get events() { return [{
-      "method": "vviinnImageUpload",
-      "name": "vviinnImageUpload",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event fires when user select file"
+      "startUpload": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "start-upload",
+        "reflect": false
       },
-      "complexType": {
-        "original": "BasicEventData",
-        "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
-        "references": {
-          "BasicEventData": {
-            "location": "import",
-            "path": "../../recommendation/events"
-          }
+      "resetVpsButton": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "() => void",
+          "resolved": "() => void",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       }
-    }, {
-      "method": "vviinnNoResult",
-      "name": "vviinnNoResult",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event fires when user select file that no .jpg, .jpeg or png"
-      },
-      "complexType": {
-        "original": "BasicEventData",
-        "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
-        "references": {
-          "BasicEventData": {
-            "location": "import",
-            "path": "../../recommendation/events"
+    };
+  }
+  static get events() {
+    return [{
+        "method": "vviinnImageUpload",
+        "name": "vviinnImageUpload",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fires when user select file"
+        },
+        "complexType": {
+          "original": "BasicEventData",
+          "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
+          "references": {
+            "BasicEventData": {
+              "location": "import",
+              "path": "../../recommendation/events"
+            }
           }
         }
-      }
-    }]; }
+      }, {
+        "method": "vviinnNoResult",
+        "name": "vviinnNoResult",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fires when user select file that no .jpg, .jpeg or png"
+        },
+        "complexType": {
+          "original": "BasicEventData",
+          "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
+          "references": {
+            "BasicEventData": {
+              "location": "import",
+              "path": "../../recommendation/events"
+            }
+          }
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "startUpload",
+        "methodName": "startUploadWatcher"
+      }];
+  }
 }
+//# sourceMappingURL=vviinn-image-selector.js.map

package/dist/collection/components/vviinn-image-selector/vviinn-image-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vviinn-image-selector.js","sourceRoot":"","sources":["../../../src/components/vviinn-image-selector/vviinn-image-selector.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,KAAK,EAEL,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EACL,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,+BAA+B,CAAC;AAGvC;;GAEG;AAMH,MAAM,OAAO,mBAAmB;;;;;;EAYtB,KAAK,CAAC,iBAAiB,CAAC,KAAY;IAC1C,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;IAC/C,MAAM,gBAAgB,GAAG,MAAM,mBAAmB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAEnE,IAAI,CACF,gBAAgB,EAChB,CAAC,CAAC,KAAK,CACL,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,EACnD,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CACvD,CACF,CAAC;IAEF,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;EACrB,CAAC;EAEO,SAAS;IACf,OAAO,gBAAgB,CAAC,OAAO,CAAC;EAClC,CAAC;EAGD,kBAAkB,CAAC,MAAe;IAChC,IAAI,MAAM,EAAE;MACV,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;MACvB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,WAAW,EAAC,QAAQ;MACvB,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,2BAAoB,CAAC,CAAC,CAAC,IAAI;MAC9C,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACzB,aAAO,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,QAAQ;QACtC,YAAM,IAAI,EAAC,oBAAoB,mBAAoB,CAC7C,CACT;MACD,aACE,EAAE,EAAC,WAAW,EACd,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,EAChB,QAAQ,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EACzD,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAsB,CAAC,GACtD,CACG,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Event,\n  EventEmitter,\n  Prop,\n  Watch,\n} from \"@stencil/core\";\nimport * as E from \"fp-ts/Either\";\nimport { pipe } from \"fp-ts/lib/function\";\nimport {\n  imageSearchState,\n  processSelectedFile,\n} from \"../../store/imageSearch.store\";\nimport { BasicEventData } from \"../../recommendation/events\";\n\n/**\n * @part button -  button look and feel\n */\n@Component({\n  tag: \"vviinn-image-selector\",\n  styleUrl: \"vviinn-image-selector.css\",\n  shadow: true,\n})\nexport class VviinnImageSelector {\n  /** Event fires when user select file */\n  @Event() vviinnImageUpload: EventEmitter<BasicEventData>;\n  /** Event fires when user select file that no .jpg, .jpeg or png */\n  @Event() vviinnNoResult: EventEmitter<BasicEventData>;\n\n  @Prop() basicEventData: BasicEventData;\n  @Prop() startUpload: boolean;\n  @Prop() resetVpsButton: () => void;\n\n  private fileInput: HTMLInputElement;\n\n  private async handleInputChange(event: Event) {\n    const input = event.target as HTMLInputElement;\n    const processingResult = await processSelectedFile(input.files[0]);\n\n    pipe(\n      processingResult,\n      E.match(\n        () => this.vviinnNoResult.emit(this.basicEventData),\n        () => this.vviinnImageUpload.emit(this.basicEventData)\n      )\n    );\n\n    input.value = null;\n  }\n\n  private isLoading(): boolean {\n    return imageSearchState.loading;\n  }\n\n  @Watch(\"startUpload\")\n  startUploadWatcher(upload: boolean) {\n    if (upload) {\n      this.fileInput.click();\n      this.resetVpsButton();\n    }\n  }\n\n  render() {\n    return (\n      <Host exportparts=\"button\">\n        {this.isLoading() ? <vviinn-preloader /> : null}\n        {this.isLoading() ? null : (\n          <label htmlFor=\"fileInput\" part=\"button\">\n            <slot name=\"upload-button-text\">Upload image</slot>\n          </label>\n        )}\n        <input\n          id=\"fileInput\"\n          class=\"visually-hidden\"\n          type=\"file\"\n          accept=\"image/*\"\n          onChange={(event: Event) => this.handleInputChange(event)}\n          ref={(el) => (this.fileInput = el as HTMLInputElement)}\n        />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/vviinn-image-view/vviinn-detected-object/vviinn-detected-object.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, State, Prop, Event, } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
 import { foldValueObject } from "../../../network/ion/ValueObject";
@@ -7,6 +7,8 @@ import { fromAlt, scaleWithSized, center } from "../../../geometry/Rectangle";
 import { imageSearchState, makeRectangularSearchRequest, } from "../../../store/imageSearch.store";
 export class VviinnDetectedObject {
   constructor() {
+    this.detectedObject = undefined;
+    this.basicEventData = undefined;
     this.position = ["0", "0"];
   }
   getObjectPosition() {
@@ -46,80 +48,91 @@ export class VviinnDetectedObject {
   }
   static get is() { return "vviinn-detected-object"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-detected-object.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-detected-object.css"]
-  }; }
-  static get properties() { return {
-    "detectedObject": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "ValueObject<DetectedObject>",
-        "resolved": "Valueable<DetectedObject> & Partial<MemberObject> & Partial<Linked>",
-        "references": {
-          "ValueObject": {
-            "location": "import",
-            "path": "../../../network/ion/ValueObject"
-          },
-          "DetectedObject": {
-            "location": "import",
-            "path": "../../../searchSession/searchSession"
+  static get originalStyleUrls() {
+    return {
+      "$": ["vviinn-detected-object.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["vviinn-detected-object.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "detectedObject": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ValueObject<DetectedObject>",
+          "resolved": "Valueable<DetectedObject> & Partial<MemberObject> & Partial<Linked>",
+          "references": {
+            "ValueObject": {
+              "location": "import",
+              "path": "../../../network/ion/ValueObject"
+            },
+            "DetectedObject": {
+              "location": "import",
+              "path": "../../../searchSession/searchSession"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "basicEventData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "BasicEventData",
-        "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
-        "references": {
-          "BasicEventData": {
-            "location": "import",
-            "path": "../../../recommendation/events"
+      "basicEventData": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "BasicEventData",
+          "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
+          "references": {
+            "BasicEventData": {
+              "location": "import",
+              "path": "../../../recommendation/events"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
       }
-    }
-  }; }
-  static get states() { return {
-    "position": {}
-  }; }
-  static get events() { return [{
-      "method": "vviinnSelectObject",
-      "name": "vviinnSelectObject",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "SelectObjectEventData",
-        "resolved": "BasicEventData & { detectedObject: ValueObject<DetectedObject>; }",
-        "references": {
-          "SelectObjectEventData": {
-            "location": "import",
-            "path": "../../../recommendation/events"
+    };
+  }
+  static get states() {
+    return {
+      "position": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "vviinnSelectObject",
+        "name": "vviinnSelectObject",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "SelectObjectEventData",
+          "resolved": "BasicEventData & { detectedObject: ValueObject<DetectedObject>; }",
+          "references": {
+            "SelectObjectEventData": {
+              "location": "import",
+              "path": "../../../recommendation/events"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
 }
+//# sourceMappingURL=vviinn-detected-object.js.map

package/dist/collection/components/vviinn-image-view/vviinn-detected-object/vviinn-detected-object.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vviinn-detected-object.js","sourceRoot":"","sources":["../../../../src/components/vviinn-image-view/vviinn-detected-object/vviinn-detected-object.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  State,\n  Prop,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport { pipe } from \"fp-ts/lib/function\";\nimport * as O from \"fp-ts/lib/Option\";\nimport { ValueObject, foldValueObject } from \"../../../network/ion/ValueObject\";\nimport {\n  DetectedObject,\n  detectedObjectEq,\n} from \"../../../searchSession/searchSession\";\nimport { fromAlt, scaleWithSized, center } from \"../../../geometry/Rectangle\";\nimport {\n  imageSearchState,\n  makeRectangularSearchRequest,\n} from \"../../../store/imageSearch.store\";\nimport {\n  BasicEventData,\n  SelectObjectEventData,\n} from \"../../../recommendation/events\";\n\n@Component({\n  tag: \"vviinn-detected-object\",\n  styleUrl: \"vviinn-detected-object.css\",\n  shadow: true,\n})\nexport class VviinnDetectedObject {\n  @Prop() detectedObject: ValueObject<DetectedObject>;\n  @Prop() basicEventData: BasicEventData;\n\n  @Event() vviinnSelectObject: EventEmitter<SelectObjectEventData>;\n\n  private getObjectPosition(): [string, string] {\n    return pipe(\n      imageSearchState.imageBounds,\n      O.map((bounds) => {\n        const objectRectangle = fromAlt(\n          foldValueObject(this.detectedObject).rectangle\n        );\n\n        const { x, y } = pipe(objectRectangle, scaleWithSized(bounds), center);\n\n        return [`${x}px`, `${y}px`];\n      }),\n      O.getOrElse(() => [\"0\", \"0\"])\n    );\n  }\n\n  private selectDetectedObject() {\n    pipe(\n      imageSearchState.imageBounds,\n      O.map((bounds) => {\n        const rectangle = foldValueObject(this.detectedObject).rectangle;\n        const transformedRect = fromAlt(rectangle);\n        const scaledRect = scaleWithSized(bounds)(transformedRect);\n\n        imageSearchState.detectedObject = this.detectedObject;\n        imageSearchState.searchArea = O.some(scaledRect);\n      })\n    );\n\n    makeRectangularSearchRequest();\n    this.vviinnSelectObject.emit({\n      ...this.basicEventData,\n      detectedObject: this.detectedObject,\n    });\n  }\n\n  private isActive(): boolean {\n    if (!this.detectedObject) return false;\n    if (!imageSearchState.detectedObject) return false;\n\n    const thisObject = foldValueObject(this.detectedObject);\n    const savedObject = foldValueObject(imageSearchState.detectedObject);\n\n    return detectedObjectEq.equals(thisObject, savedObject);\n  }\n\n  @State() position: [string, string] = [\"0\", \"0\"];\n  render() {\n    return (\n      <Host\n        class={{\n          active: this.isActive(),\n        }}\n        onClick={() => this.selectDetectedObject()}\n        style={{\n          \"--x-position\": this.getObjectPosition()[0],\n          \"--y-position\": this.getObjectPosition()[1],\n        }}\n      ></Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/vviinn-image-view/vviinn-image-view.css

@@ -11,7 +11,6 @@ img {
   position: relative;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   z-index: -1;
 }

package/dist/collection/components/vviinn-image-view/vviinn-image-view.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { imageSearchState } from "../../store/imageSearch.store";
 import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
@@ -14,6 +14,9 @@ const getImageSizes = (i) => {
   return [sizes[0], sizes[1]];
 };
 export class VviinnImageView {
+  constructor() {
+    this.basicEventData = undefined;
+  }
   handleInitialImageLoad(ev) {
     const target = ev.target;
     const imageBounds = fromImage(target);
@@ -42,38 +45,35 @@ export class VviinnImageView {
     return pipe(imageSearchState.imageUrl, O.map(() => h("image-cropper", { basicEventData: this.basicEventData })), O.getOrElse(() => null));
   }
   render() {
-    return (h(Host, null,
-      imageSearchState.loading ||
-        imageSearchState.objectDetectionInProgress ? (h("div", { class: "image-preloader" },
-        h("vviinn-preloader", null))) : null,
-      h("highlight-box", null),
-      this.renderImage(),
-      this.renderCropper(),
-      imageSearchState.detectedObjects.map((o) => this.renderDetectedObject(o))));
+    return (h(Host, null, imageSearchState.loading ||
+      imageSearchState.objectDetectionInProgress ? (h("div", { class: "image-preloader" }, h("vviinn-preloader", null))) : null, h("highlight-box", null), this.renderImage(), this.renderCropper(), imageSearchState.detectedObjects.map((o) => this.renderDetectedObject(o))));
   }
   static get is() { return "vviinn-image-view"; }
   static get encapsulation() { return "shadow"; }
   static get styles() { return styles; }
-  static get properties() { return {
-    "basicEventData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "BasicEventData",
-        "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
-        "references": {
-          "BasicEventData": {
-            "location": "import",
-            "path": "../../recommendation/events"
+  static get properties() {
+    return {
+      "basicEventData": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "BasicEventData",
+          "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
+          "references": {
+            "BasicEventData": {
+              "location": "import",
+              "path": "../../recommendation/events"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
       }
-    }
-  }; }
+    };
+  }
 }
+//# sourceMappingURL=vviinn-image-view.js.map

package/dist/collection/components/vviinn-image-view/vviinn-image-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vviinn-image-view.js","sourceRoot":"","sources":["../../../src/components/vviinn-image-view/vviinn-image-view.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { imageSearchState } from \"../../store/imageSearch.store\";\nimport { ValueObject } from \"../../network/ion/ValueObject\";\nimport { DetectedObject } from \"../../searchSession/searchSession\";\nimport { pipe } from \"fp-ts/lib/function\";\nimport * as O from \"fp-ts/lib/Option\";\nimport { sequenceToOption } from \"../../utils/option/option\";\nimport { fromImage, move } from \"../../geometry/Rectangle\";\nimport { dimensionsFromImage, scaleByLargestSide } from \"../../Image/sizing\";\nimport styles from \"./vviinn-image-view.css\";\nimport { BasicEventData } from \"../../recommendation/events\";\n\nconst getImageSizes = (i: HTMLImageElement): [number, number] => {\n  const dimensions = dimensionsFromImage(i);\n  const resize = scaleByLargestSide(288);\n  const newDimensions = resize(dimensions);\n\n  const sizes = newDimensions.map((d) => d.size);\n\n  return [sizes[0], sizes[1]];\n};\n\n@Component({\n  tag: \"vviinn-image-view\",\n  shadow: true,\n  styles,\n})\nexport class VviinnImageView {\n  @Prop() basicEventData: BasicEventData;\n\n  handleInitialImageLoad(ev: Event) {\n    const target = ev.target as HTMLImageElement;\n    const imageBounds = fromImage(target);\n    const padding = 12;\n    const { x, y } = move(imageBounds, { x: padding, y: padding });\n\n    const searchArea = {\n      x,\n      y,\n      width: imageBounds.width - padding * 2,\n      height: imageBounds.height - padding * 2,\n    };\n\n    imageSearchState.imageBounds = O.some(imageBounds);\n    imageSearchState.searchArea = O.some(searchArea);\n  }\n\n  private renderDetectedObject(\n    object: ValueObject<DetectedObject>\n  ): HTMLElement {\n    return (\n      <vviinn-detected-object\n        detectedObject={object}\n        basicEventData={this.basicEventData}\n      />\n    );\n  }\n\n  private renderImage(): HTMLImageElement | null {\n    return pipe(\n      sequenceToOption(imageSearchState.imageUrl, imageSearchState.image),\n      O.map(([url, refImage]) => {\n        const [width, height] = getImageSizes(refImage);\n\n        const image = (\n          <img\n            decoding=\"async\"\n            width={width}\n            height={height}\n            src={url}\n            onLoad={(el) => this.handleInitialImageLoad(el)}\n            draggable={false}\n          />\n        );\n\n        return image;\n      }),\n      O.getOrElse(() => null)\n    );\n  }\n\n  private renderCropper(): HTMLImageCropperElement | null {\n    return pipe(\n      imageSearchState.imageUrl,\n      O.map(() => <image-cropper basicEventData={this.basicEventData} />),\n      O.getOrElse(() => null)\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        {imageSearchState.loading ||\n        imageSearchState.objectDetectionInProgress ? (\n          <div class=\"image-preloader\">\n            <vviinn-preloader />\n          </div>\n        ) : null}\n        <highlight-box />\n        {this.renderImage()}\n        {this.renderCropper()}\n        {imageSearchState.detectedObjects.map((o) =>\n          this.renderDetectedObject(o)\n        )}\n      </Host>\n    );\n  }\n}\n"]}