@arbisoft/react-design-tool
Version:
Arbisoft design tool library
6,824 lines • 363 kB
JavaScript
'use strict';
var React = require('react');
var PropTypes = require('prop-types');
var styled = require('styled-components');
var reactKonva = require('react-konva');
var QRCode = require('qrcode');
var reactKonvaUtils = require('react-konva-utils');
var Konva = require('konva');
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _arrayWithoutHoles(r) {
if (Array.isArray(r)) return _arrayLikeToArray(r);
}
function asyncGeneratorStep(n, t, e, r, o, a, c) {
try {
var i = n[a](c),
u = i.value;
} catch (n) {
return void e(n);
}
i.done ? t(u) : Promise.resolve(u).then(r, o);
}
function _asyncToGenerator(n) {
return function () {
var t = this,
e = arguments;
return new Promise(function (r, o) {
var a = n.apply(t, e);
function _next(n) {
asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
}
function _throw(n) {
asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
}
_next(void 0);
});
};
}
function _createForOfIteratorHelper(r, e) {
var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (!t) {
if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
t && (r = t);
var n = 0,
F = function () {};
return {
s: F,
n: function () {
return n >= r.length ? {
done: true
} : {
done: false,
value: r[n++]
};
},
e: function (r) {
throw r;
},
f: F
};
}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
var o,
a = true,
u = false;
return {
s: function () {
t = t.call(r);
},
n: function () {
var r = t.next();
return a = r.done, r;
},
e: function (r) {
u = true, o = r;
},
f: function () {
try {
a || null == t.return || t.return();
} finally {
if (u) throw o;
}
}
};
}
function _defineProperty(e, r, t) {
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: true,
configurable: true,
writable: true
}) : e[r] = t, e;
}
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _iterableToArray(r) {
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = true,
o = false;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = true, n = r;
} finally {
try {
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function ownKeys(e, r) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
r && (o = o.filter(function (r) {
return Object.getOwnPropertyDescriptor(e, r).enumerable;
})), t.push.apply(t, o);
}
return t;
}
function _objectSpread2(e) {
for (var r = 1; r < arguments.length; r++) {
var t = null != arguments[r] ? arguments[r] : {};
r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
_defineProperty(e, r, t[r]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
});
}
return e;
}
function _objectWithoutProperties(e, t) {
if (null == e) return {};
var o,
r,
i = _objectWithoutPropertiesLoose(e, t);
if (Object.getOwnPropertySymbols) {
var n = Object.getOwnPropertySymbols(e);
for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
}
return i;
}
function _objectWithoutPropertiesLoose(r, e) {
if (null == r) return {};
var t = {};
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
if (-1 !== e.indexOf(n)) continue;
t[n] = r[n];
}
return t;
}
function _regenerator() {
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
var e,
t,
r = "function" == typeof Symbol ? Symbol : {},
n = r.iterator || "@@iterator",
o = r.toStringTag || "@@toStringTag";
function i(r, n, o, i) {
var c = n && n.prototype instanceof Generator ? n : Generator,
u = Object.create(c.prototype);
return _regeneratorDefine(u, "_invoke", function (r, n, o) {
var i,
c,
u,
f = 0,
p = o || [],
y = false,
G = {
p: 0,
n: 0,
v: e,
a: d,
f: d.bind(e, 4),
d: function (t, r) {
return i = t, c = 0, u = e, G.n = r, a;
}
};
function d(r, n) {
for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
var o,
i = p[t],
d = G.p,
l = i[2];
r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
}
if (o || r > 1) return a;
throw y = true, n;
}
return function (o, p, l) {
if (f > 1) throw TypeError("Generator is already running");
for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
try {
if (f = 2, i) {
if (c || (o = "next"), t = i[o]) {
if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
if (!t.done) return t;
u = t.value, c < 2 && (c = 0);
} else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
i = e;
} else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
} catch (t) {
i = e, c = 1, u = t;
} finally {
f = 1;
}
}
return {
value: t,
done: y
};
};
}(r, o, i), true), u;
}
var a = {};
function Generator() {}
function GeneratorFunction() {}
function GeneratorFunctionPrototype() {}
t = Object.getPrototypeOf;
var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
return this;
}), t),
u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
function f(e) {
return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
}
return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
return this;
}), _regeneratorDefine(u, "toString", function () {
return "[object Generator]";
}), (_regenerator = function () {
return {
w: i,
m: f
};
})();
}
function _regeneratorDefine(e, r, n, t) {
var i = Object.defineProperty;
try {
i({}, "", {});
} catch (e) {
i = 0;
}
_regeneratorDefine = function (e, r, n, t) {
if (r) i ? i(e, r, {
value: n,
enumerable: !t,
configurable: !t,
writable: !t
}) : e[r] = n;else {
function o(r, n) {
_regeneratorDefine(e, r, function (e) {
return this._invoke(r, n, e);
});
}
o("next", 0), o("throw", 1), o("return", 2);
}
}, _regeneratorDefine(e, r, n, t);
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
function _taggedTemplateLiteral(e, t) {
return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
raw: {
value: Object.freeze(t)
}
}));
}
function _toConsumableArray(r) {
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
}
function _toPrimitive(t, r) {
if ("object" != typeof t || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r);
if ("object" != typeof i) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == typeof i ? i : i + "";
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
var propTypes$A = {
title: PropTypes.string,
languageLocale: PropTypes.string,
elementsList: PropTypes.array,
customImages: PropTypes.array,
defaultImages: PropTypes.array,
disableWhiteLabel: PropTypes.bool,
defaultTemplatesList: PropTypes.array,
customTemplatesList: PropTypes.array,
qrLink: PropTypes.string,
styleProps: PropTypes.object,
defaultText: PropTypes.string,
onSave: PropTypes.func,
saveButtonText: PropTypes.string,
locale: PropTypes.oneOf(['en', 'ru', 'pl', 'de', 'es', 'fr', 'it'])
};
/**
* palette contains the basic colors set
*/
var palette = {
primary: '#5F98D0',
secondary: '#F9FAFB',
gray_700: '#344054',
white: '#FFFFFF',
white_F5F5F5: '#F5F5F5',
white_F7F7F7: '#F7F7F7',
gray_535354: '#535354',
gray_545454: '#545454',
gray_646464: '#646464',
gray_200: '#E4E7EC',
gray_788899: '#788899',
icon_gray: '#4D6277',
gray_B8B8B8: '#B8B8B8',
gray_25: '#FCFCFD',
gray_7A7979: '#7A7979',
gray_E8E8E8: '#E8E8E8',
gray_EAEAEA: '#EAEAEA',
gray_CCC: '#CCC',
gray_F2F2F2: '#F2F2F2',
gray_FDFCFC: '#FDFCFC',
gray_EDEDED: '#EDEDED',
gray_FBFBFB: '#FBFBFB',
gray_F5F6F6: '#F5F6F6',
gray_A1A1A1: '#A1A1A1',
gray_F0F2F7: '#F0F2F7',
gray_333: '#333333',
gray_EFEFEF: '#EFEFEF',
gray_9DA1A7: '#9DA1A7',
green_80D965: '#80D965',
black: '#000000',
black_transparent: 'rgba(0,0,0,0.4)'
};
var color = _objectSpread2({}, palette);
var fonts = {
primary: 'Plus Jakarta Sans, sans-serif',
secondary: 'Inter, sans-serif'};
var fontWeights = {
300: 300,
400: 400,
500: 500,
600: 600,
700: 700};
var theme = {
color: color,
fonts: fonts,
fontWeights: fontWeights
};
var _templateObject$u;
var StudioWrapper = styled.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteral(["\n background-color: ", ";\n display: flex;\n flex: 1;\n flex-direction: row;\n overflow: hidden;\n height: 100%;\n width: 100%;\n position: relative;\n"])), theme.color.white);
var propTypes$z = {
selectedSideBarItem: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
onClickPill: PropTypes.func,
languageLocale: PropTypes.string,
disableWhiteLabel: PropTypes.bool,
styleProps: PropTypes.object
};
var _templateObject$t;
var SideBarWrapper$1 = styled.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteral(["\n background-color: ", ";\n display: flex;\n flex-direction: column;\n width: 100px;\n overflow: auto;\n"])), theme.color.white);
var propTypes$y = {
isSelected: PropTypes.bool,
onClick: PropTypes.func,
icon: PropTypes.node,
text: PropTypes.string,
pillActiveColor: PropTypes.string
};
var _templateObject$s, _templateObject2$m, _templateObject3$c;
var SideBarItem = styled.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100px;\n min-height: 100px;\n background-color: ", ";\n margin-bottom: 2px;\n cursor: pointer;\n transition: background-color 0.2s ease-in-out;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (_ref) {
var isSelected = _ref.isSelected,
pillActiveColor = _ref.pillActiveColor;
return isSelected ? pillActiveColor : theme.color.secondary;
}, function (_ref2) {
var pillActiveColor = _ref2.pillActiveColor;
return pillActiveColor;
});
var SideBarIcon = styled.img(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteral(["\n height: 28px;\n width: 28px;\n object-fit: contain;\n margin-bottom: 8px;\n filter: ", ";\n\n ", ":hover & {\n filter: brightness(0) invert(1);\n }\n"])), function (_ref3) {
var _ref3$isSelected = _ref3.isSelected,
isSelected = _ref3$isSelected === void 0 ? false : _ref3$isSelected;
return isSelected ? 'brightness(0) invert(1)' : 'none';
}, SideBarItem);
var SideBarText = styled.p(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 12px;\n font-family: ", ";\n font-weight: ", ";\n line-height: 109.023%;\n text-align: center;\n\n ", ":hover & {\n color: ", ";\n }\n"])), function (_ref4) {
var _ref4$isSelected = _ref4.isSelected,
isSelected = _ref4$isSelected === void 0 ? false : _ref4$isSelected;
return isSelected ? theme.color.white : theme.color.gray_535354;
}, theme.fonts.primary, theme.fontWeights[400], SideBarItem, theme.color.white);
var SideBarPill = function SideBarPill(_ref) {
var _ref$isSelected = _ref.isSelected,
isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
_ref$onClick = _ref.onClick,
_onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
icon = _ref.icon,
text = _ref.text,
pillActiveColor = _ref.pillActiveColor,
id = _ref.id;
return /*#__PURE__*/React.createElement(SideBarItem, {
key: id,
isSelected: isSelected,
onClick: function onClick() {
return _onClick();
},
pillActiveColor: pillActiveColor || theme.color.primary
}, /*#__PURE__*/React.createElement(SideBarIcon, {
src: icon,
isSelected: isSelected
}), /*#__PURE__*/React.createElement(SideBarText, {
isSelected: isSelected
}, text));
};
SideBarPill.propTypes = propTypes$y;
var IconTemplate = "data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2229%22%20viewBox%3D%220%200%2028%2029%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22layout-dashboard%22%3E%3Cg%20id%3D%22Icon%20color%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.66683%202.83337C3.37816%202.83337%202.3335%203.87804%202.3335%205.16671V13.3334C2.3335%2014.622%203.37816%2015.6667%204.66683%2015.6667H10.5002C11.7888%2015.6667%2012.8335%2014.622%2012.8335%2013.3334V5.16671C12.8335%203.87804%2011.7888%202.83337%2010.5002%202.83337H4.66683ZM4.66683%205.16671H10.5002V13.3334H4.66683V5.16671Z%22%20fill%3D%22%23344054%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M17.5002%202.83337C16.2115%202.83337%2015.1668%203.87804%2015.1668%205.16671V8.66671C15.1668%209.95537%2016.2115%2011%2017.5002%2011H23.3335C24.6222%2011%2025.6668%209.95537%2025.6668%208.66671V5.16671C25.6668%203.87804%2024.6222%202.83337%2023.3335%202.83337H17.5002ZM17.5002%205.16671H23.3335V8.66671H17.5002V5.16671Z%22%20fill%3D%22%23344054%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.1668%2015.6667C15.1668%2014.378%2016.2115%2013.3334%2017.5002%2013.3334H23.3335C24.6222%2013.3334%2025.6668%2014.378%2025.6668%2015.6667V23.8334C25.6668%2025.122%2024.6222%2026.1667%2023.3335%2026.1667H17.5002C16.2115%2026.1667%2015.1668%2025.122%2015.1668%2023.8334V15.6667ZM23.3335%2015.6667H17.5002V23.8334H23.3335V15.6667Z%22%20fill%3D%22%23344054%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.66683%2018C3.37816%2018%202.3335%2019.0447%202.3335%2020.3334V23.8334C2.3335%2025.122%203.37816%2026.1667%204.66683%2026.1667H10.5002C11.7888%2026.1667%2012.8335%2025.122%2012.8335%2023.8334V20.3334C12.8335%2019.0447%2011.7888%2018%2010.5002%2018H4.66683ZM4.66683%2020.3334H10.5002V23.8334H4.66683V20.3334Z%22%20fill%3D%22%23344054%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconImage = "data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2229%22%20viewBox%3D%220%200%2028%2029%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Frame%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M22.1667%204H5.83333C4.54467%204%203.5%205.04467%203.5%206.33333V22.6667C3.5%2023.9553%204.54467%2025%205.83333%2025H22.1667C23.4553%2025%2024.5%2023.9553%2024.5%2022.6667V6.33333C24.5%205.04467%2023.4553%204%2022.1667%204Z%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M10.4998%2013.3334C11.7885%2013.3334%2012.8332%2012.2887%2012.8332%2011C12.8332%209.71136%2011.7885%208.66669%2010.4998%208.66669C9.21117%208.66669%208.1665%209.71136%208.1665%2011C8.1665%2012.2887%209.21117%2013.3334%2010.4998%2013.3334Z%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M24.5%2018L20.8997%2014.3997C20.4621%2013.9622%2019.8687%2013.7165%2019.25%2013.7165C18.6313%2013.7165%2018.0379%2013.9622%2017.6003%2014.3997L7%2025%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconQrCode = "data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2229%22%20viewBox%3D%220%200%2028%2029%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22heroicons-solid%2Fqr-code%22%3E%3Cpath%20id%3D%22Vector%20%28Stroke%29%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%205C2%203.61929%203.11929%202.5%204.5%202.5H10.5C11.8807%202.5%2013%203.61929%2013%205V11C13%2012.3807%2011.8807%2013.5%2010.5%2013.5H4.5C3.11929%2013.5%202%2012.3807%202%2011V5ZM4.5%204.5C4.22386%204.5%204%204.72386%204%205V11C4%2011.2761%204.22386%2011.5%204.5%2011.5H10.5C10.7761%2011.5%2011%2011.2761%2011%2011V5C11%204.72386%2010.7761%204.5%2010.5%204.5H4.5ZM15%205C15%203.61929%2016.1193%202.5%2017.5%202.5H23.5C24.8807%202.5%2026%203.61929%2026%205V11C26%2012.3807%2024.8807%2013.5%2023.5%2013.5H17.5C16.1193%2013.5%2015%2012.3807%2015%2011V5ZM17.5%204.5C17.2239%204.5%2017%204.72386%2017%205V11C17%2011.2761%2017.2239%2011.5%2017.5%2011.5H23.5C23.7761%2011.5%2024%2011.2761%2024%2011V5C24%204.72386%2023.7761%204.5%2023.5%204.5H17.5ZM6%207.5C6%206.94772%206.44772%206.5%207%206.5H8C8.55228%206.5%209%206.94772%209%207.5V8.5C9%209.05228%208.55228%209.5%208%209.5H7C6.44772%209.5%206%209.05228%206%208.5V7.5ZM19%207.5C19%206.94772%2019.4477%206.5%2020%206.5H21C21.5523%206.5%2022%206.94772%2022%207.5V8.5C22%209.05228%2021.5523%209.5%2021%209.5H20C19.4477%209.5%2019%209.05228%2019%208.5V7.5ZM2%2018C2%2016.6193%203.11929%2015.5%204.5%2015.5H10.5C11.8807%2015.5%2013%2016.6193%2013%2018V24C13%2025.3807%2011.8807%2026.5%2010.5%2026.5H4.5C3.11929%2026.5%202%2025.3807%202%2024V18ZM4.5%2017.5C4.22386%2017.5%204%2017.7239%204%2018V24C4%2024.2761%204.22386%2024.5%204.5%2024.5H10.5C10.7761%2024.5%2011%2024.2761%2011%2024V18C11%2017.7239%2010.7761%2017.5%2010.5%2017.5H4.5ZM15%2016.5C15%2015.9477%2015.4477%2015.5%2016%2015.5H17C17.5523%2015.5%2018%2015.9477%2018%2016.5V17.5C18%2018.0523%2017.5523%2018.5%2017%2018.5H16C15.4477%2018.5%2015%2018.0523%2015%2017.5V16.5ZM23%2016.5C23%2015.9477%2023.4477%2015.5%2024%2015.5H25C25.5523%2015.5%2026%2015.9477%2026%2016.5V17.5C26%2018.0523%2025.5523%2018.5%2025%2018.5H24C23.4477%2018.5%2023%2018.0523%2023%2017.5V16.5ZM6%2020.5C6%2019.9477%206.44772%2019.5%207%2019.5H8C8.55228%2019.5%209%2019.9477%209%2020.5V21.5C9%2022.0523%208.55228%2022.5%208%2022.5H7C6.44772%2022.5%206%2022.0523%206%2021.5V20.5ZM19%2020.5C19%2019.9477%2019.4477%2019.5%2020%2019.5H21C21.5523%2019.5%2022%2019.9477%2022%2020.5V21.5C22%2022.0523%2021.5523%2022.5%2021%2022.5H20C19.4477%2022.5%2019%2022.0523%2019%2021.5V20.5ZM15%2024.5C15%2023.9477%2015.4477%2023.5%2016%2023.5H17C17.5523%2023.5%2018%2023.9477%2018%2024.5V25.5C18%2026.0523%2017.5523%2026.5%2017%2026.5H16C15.4477%2026.5%2015%2026.0523%2015%2025.5V24.5ZM23%2024.5C23%2023.9477%2023.4477%2023.5%2024%2023.5H25C25.5523%2023.5%2026%2023.9477%2026%2024.5V25.5C26%2026.0523%2025.5523%2026.5%2025%2026.5H24C23.4477%2026.5%2023%2026.0523%2023%2025.5V24.5Z%22%20fill%3D%22%23344054%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconShape = "data:image/svg+xml,%3Csvg%20width%3D%2226%22%20height%3D%2227%22%20viewBox%3D%220%200%2026%2027%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Icon%20color%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.8996%200.305068C13.2791%200.29145%2013.6556%200.376085%2013.9926%200.55077C14.3297%200.725456%2014.616%200.984266%2014.8236%201.30211L14.8386%201.32569L19.6238%209.0076C19.8397%209.33005%2019.9667%209.70402%2019.9917%2010.0917C20.0176%2010.4929%2019.9332%2010.8935%2019.7477%2011.2502C19.5623%2011.6068%2019.2828%2011.906%2018.9395%2012.1152C18.5963%2012.3244%2018.2023%2012.4358%2017.8003%2012.4372L17.7958%2012.4372H8.19452C7.8032%2012.4509%207.41501%2012.3601%207.07005%2012.1737C6.71246%2011.9806%206.41525%2011.6923%206.21129%2011.3407C6.00733%2010.9892%205.90457%2010.588%205.91436%2010.1817C5.92407%209.77863%206.0442%209.38598%206.26157%209.04651L11.0735%201.39989C11.2568%201.08451%2011.5157%200.819365%2011.8271%200.628499C12.1508%200.430098%2012.5202%200.318687%2012.8996%200.305068ZM12.9777%203.24166L8.82255%209.84459H17.0908L12.9777%203.24166Z%22%20fill%3D%22%23344054%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0%2017.6223C0%2016.1905%201.16074%2015.0297%202.59259%2015.0297H9.07407C10.5059%2015.0297%2011.6667%2016.1905%2011.6667%2017.6223V24.1038C11.6667%2025.5356%2010.5059%2026.6964%209.07407%2026.6964H2.59259C1.16074%2026.6964%200%2025.5356%200%2024.1038V17.6223ZM9.07407%2017.6223H2.59259V24.1038H9.07407V17.6223Z%22%20fill%3D%22%23344054%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.0926%2015.0297C16.8709%2015.0297%2014.2593%2017.6414%2014.2593%2020.863C14.2593%2024.0847%2016.8709%2026.6964%2020.0926%2026.6964C23.3143%2026.6964%2025.9259%2024.0847%2025.9259%2020.863C25.9259%2017.6414%2023.3143%2015.0297%2020.0926%2015.0297ZM16.8519%2020.863C16.8519%2019.0732%2018.3028%2017.6223%2020.0926%2017.6223C21.8824%2017.6223%2023.3333%2019.0732%2023.3333%2020.863C23.3333%2022.6529%2021.8824%2024.1038%2020.0926%2024.1038C18.3028%2024.1038%2016.8519%2022.6529%2016.8519%2020.863Z%22%20fill%3D%22%23344054%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconText = "data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2229%22%20viewBox%3D%220%200%2028%2029%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.81277%2024.83C11.0728%2024.63%2011.8428%2024.43%2012.1228%2024.23C12.4028%2024.01%2012.5428%2023.59%2012.5428%2022.97V6.77C9.96277%206.81%208.58277%206.87%208.40277%206.95C8.22277%207.03%208.08277%207.12%207.98277%207.22C7.74277%207.54%207.45277%208.67%207.11277%2010.61L5.58277%2010.49C5.56277%2010.19%205.55277%209.61%205.55277%208.75C5.55277%207.87%205.64277%206.69%205.82277%205.21H22.1728C22.3528%206.69%2022.4428%207.87%2022.4428%208.75C22.4428%209.61%2022.4328%2010.19%2022.4128%2010.49L20.8828%2010.61C20.5428%208.67%2020.2428%207.54%2019.9828%207.22C19.9028%207.12%2019.7728%207.03%2019.5928%206.95C19.4128%206.87%2018.0328%206.81%2015.4528%206.77V23.69C15.4528%2024.15%2015.6528%2024.41%2016.0528%2024.47L18.3628%2024.83L18.2428%2026H9.99277L9.81277%2024.83Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E";
var IconWhiteLabel = "data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2229%22%20viewBox%3D%220%200%2028%2029%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Frame%22%20clip-path%3D%22url%28%23clip0_1597_130%29%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M11.2063%2022.2583H24.7765V12.7095H11.2063V22.2583ZM1.71955%2026.75C0.913059%2026.75%200.230426%2026.4642%20-0.328346%2025.8925C-0.887118%2025.3208%20-1.1665%2024.6224%20-1.1665%2023.7973V5.20266C-1.1665%204.37755%20-0.887118%203.67917%20-0.328346%203.1075C0.230426%202.53583%200.913059%202.25%201.71955%202.25H26.2808C27.0873%202.25%2027.7699%202.53583%2028.3287%203.1075C28.8874%203.67917%2029.1668%204.37755%2029.1668%205.20266V23.7973C29.1668%2024.6224%2028.8874%2025.3208%2028.3287%2025.8925C27.7699%2026.4642%2027.0873%2026.75%2026.2808%2026.75H1.71955ZM1.71955%2024.3H26.2808C26.4037%2024.3%2026.5163%2024.2476%2026.6184%2024.1428C26.7209%2024.0383%2026.7721%2023.9231%2026.7721%2023.7973V5.20266C26.7721%205.07689%2026.7209%204.96174%2026.6184%204.85721C26.5163%204.7524%2026.4037%204.7%2026.2808%204.7H1.71955C1.59662%204.7%201.48407%204.7524%201.3819%204.85721C1.27945%204.96174%201.22823%205.07689%201.22823%205.20266V23.7973C1.22823%2023.9231%201.27945%2024.0383%201.3819%2024.1428C1.48407%2024.2476%201.59662%2024.3%201.71955%2024.3Z%22%20fill%3D%22%23344054%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_1597_130%22%3E%3Crect%20width%3D%2228%22%20height%3D%2228%22%20fill%3D%22white%22%20transform%3D%22translate%280%200.5%29%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
var IconDropDown = "data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2211%22%20viewBox%3D%220%200%2016%2011%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20id%3D%22Shape%22%20d%3D%22M1.41005%201.71004C1.95679%201.1633%202.84322%201.1633%203.38995%201.71004L8%206.32009L12.6101%201.71004C13.1568%201.1633%2014.0432%201.1633%2014.5899%201.71004C15.1367%202.25677%2015.1367%203.1432%2014.5899%203.68994L8.98995%209.28994C8.44322%209.83667%207.55679%209.83667%207.01005%209.28994L1.41005%203.68994C0.863317%203.1432%200.863317%202.25677%201.41005%201.71004Z%22%20fill%3D%22%2398A2B3%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
var IconBackgroundColor = "data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2218%22%20viewBox%3D%220%200%2017%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22background-color%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M13.5093%2012.1849C13.5093%2012.4144%2013.3232%2012.6005%2013.0937%2012.6005C12.8643%2012.6005%2012.6782%2012.4144%2012.6782%2012.1849C12.6782%2012.1873%2012.6782%2012.1886%2012.6783%2012.1886C12.6793%2012.1887%2012.6927%2012.0751%2012.8642%2011.8179C12.9262%2011.7249%2013.0023%2011.6229%2013.0937%2011.5118C13.1852%2011.6229%2013.2613%2011.7249%2013.3233%2011.8179C13.4948%2012.0751%2013.5082%2012.1887%2013.5092%2012.1886C13.5093%2012.1886%2013.5093%2012.1873%2013.5093%2012.1849Z%22%20fill%3D%22%23344054%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M7.37988%202.45471L8.63103%203.70587%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M8.38058%203.45575L2.87549%208.96086L6.8792%2012.9646L12.3843%207.45945L8.38058%203.45575Z%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M4.24658%207.61035L10.2488%209.58373%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_5%22%20d%3D%22M1.41553%2015.7238H15.5708%22%20stroke%3D%22%23344054%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconBackgroundImage = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Group%22%3E%3Cg%20id%3D%22Group_2%22%3E%3Cpath%20id%3D%22Vector%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.34066%204H20.6323C21.1616%204%2021.5907%204.44772%2021.5907%205V19C21.5907%2019.5523%2021.1616%2020%2020.6323%2020H4.34066C3.81138%2020%203.38232%2019.5523%203.38232%2019V5C3.38232%204.44772%203.81138%204%204.34066%204Z%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M7.93457%208.99994C8.33152%208.99994%208.65332%208.66415%208.65332%208.24994C8.65332%207.83573%208.33152%207.49994%207.93457%207.49994C7.53762%207.49994%207.21582%207.83573%207.21582%208.24994C7.21582%208.66415%207.53762%208.99994%207.93457%208.99994Z%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M8.17399%2012L10.5698%2014L13.4448%2010.5L21.5907%2017V19C21.5907%2019.5523%2021.1616%2020%2020.6323%2020H4.34066C3.81138%2020%203.38232%2019.5523%203.38232%2019V17L8.17399%2012Z%22%20fill%3D%22white%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconBackgroundImageOpacity = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Group%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M1.16327%2017.3162V0.683777H17.7957V17.3162H1.16327Z%22%20stroke%3D%22%23344054%22%20stroke-opacity%3D%220.75%22%20stroke-width%3D%220.353881%22%2F%3E%3Cg%20id%3D%22Group_2%22%3E%3Cpath%20id%3D%22Vector_2%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.46362%203.33789H15.4956C15.8865%203.33789%2016.2033%203.65477%2016.2033%204.04565V13.9543C16.2033%2014.3452%2015.8865%2014.6621%2015.4956%2014.6621H3.46362C3.07274%2014.6621%202.75586%2014.3452%202.75586%2013.9543V4.04565C2.75586%203.65477%203.07274%203.33789%203.46362%203.33789Z%22%20stroke%3D%22%23344054%22%20stroke-opacity%3D%220.75%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M6.11774%206.87671C6.4109%206.87671%206.64856%206.63905%206.64856%206.34589C6.64856%206.05272%206.4109%205.81506%206.11774%205.81506C5.82457%205.81506%205.58691%206.05272%205.58691%206.34589C5.58691%206.63905%205.82457%206.87671%206.11774%206.87671Z%22%20stroke%3D%22%23344054%22%20stroke-opacity%3D%220.75%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M6.29467%209L8.06408%2010.4155L10.1874%207.93835L16.2033%2012.5388V13.9543C16.2033%2014.3452%2015.8865%2014.6621%2015.4956%2014.6621H3.46362C3.07274%2014.6621%202.75586%2014.3452%202.75586%2013.9543V12.5388L6.29467%209Z%22%20fill%3D%22white%22%20stroke%3D%22%23344054%22%20stroke-opacity%3D%220.75%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconDropDownSmall = "data:image/svg+xml,%3Csvg%20width%3D%2211%22%20height%3D%226%22%20viewBox%3D%220%200%2011%206%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M9.97266%201L5.97266%205L1.97266%201%22%20stroke%3D%22%2398A2B3%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
var IconFrame = "data:image/svg+xml,%3Csvg%20width%3D%2225%22%20height%3D%2224%22%20viewBox%3D%220%200%2025%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Frame%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M5.97266%2019H19.9727V5H5.97266V19ZM3.97266%2021V3H21.9727V21H3.97266ZM7.97266%2013V11H9.97266V13H7.97266ZM11.9727%2017V15H13.9727V17H11.9727ZM11.9727%2013V11H13.9727V13H11.9727ZM11.9727%209V7H13.9727V9H11.9727ZM15.9727%2013V11H17.9727V13H15.9727Z%22%20fill%3D%22%23344054%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconZoomIn = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2216%22%20viewBox%3D%220%200%2018%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22zoom-in%22%3E%3Cg%20id%3D%22Icon%20color%22%3E%3Cpath%20d%3D%22M8.03174%204.73066C8.42294%204.73066%208.74007%205.02339%208.74007%205.3845V6.69219H10.1567C10.5479%206.69219%2010.8651%206.98493%2010.8651%207.34604C10.8651%207.70715%2010.5479%207.99989%2010.1567%207.99989H8.74007V9.30758C8.74007%209.66869%208.42294%209.96143%208.03174%209.96143C7.64054%209.96143%207.3234%209.66869%207.3234%209.30758V7.99989H5.90674C5.51554%207.99989%205.1984%207.70715%205.1984%207.34604C5.1984%206.98493%205.51554%206.69219%205.90674%206.69219H7.3234V5.3845C7.3234%205.02339%207.64054%204.73066%208.03174%204.73066Z%22%20fill%3D%22%234D6277%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.0109%2011.9439C10.9203%2012.7491%209.53694%2013.2307%208.03174%2013.2307C4.51092%2013.2307%201.65674%2010.596%201.65674%207.34604C1.65674%204.09606%204.51092%201.46143%208.03174%201.46143C11.5526%201.46143%2014.4067%204.09606%2014.4067%207.34604C14.4067%208.73549%2013.8851%2010.0125%2013.0126%2011.0192L15.6159%2013.4222C15.8925%2013.6775%2015.8925%2014.0915%2015.6159%2014.3468C15.3392%2014.6022%2014.8908%2014.6022%2014.6141%2014.3468L12.0109%2011.9439ZM3.0734%207.34604C3.0734%204.81828%205.29333%202.76912%208.03174%202.76912C10.7702%202.76912%2012.9901%204.81828%2012.9901%207.34604C12.9901%208.57907%2012.4619%209.69821%2011.6029%2010.5212C11.5786%2010.5384%2011.5552%2010.5574%2011.5329%2010.5779C11.5106%2010.5985%2011.4901%2010.6201%2011.4714%2010.6426C10.5799%2011.4354%209.36749%2011.923%208.03174%2011.923C5.29333%2011.923%203.0734%209.87381%203.0734%207.34604Z%22%20fill%3D%22%234D6277%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconZoomOut = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22zoom-out%22%3E%3Cg%20id%3D%22Icon%20color%22%3E%3Cpath%20d%3D%22M5.90674%207.58329C5.51554%207.58329%205.1984%207.90042%205.1984%208.29163C5.1984%208.68283%205.51554%208.99996%205.90674%208.99996H10.1567C10.5479%208.99996%2010.8651%208.68283%2010.8651%208.29163C10.8651%207.90042%2010.5479%207.58329%2010.1567%207.58329H5.90674Z%22%20fill%3D%22%234D6277%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.03174%2014.6666C9.53694%2014.6666%2010.9203%2014.145%2012.0109%2013.2726L14.6141%2015.8758C14.8908%2016.1525%2015.3392%2016.1525%2015.6159%2015.8758C15.8925%2015.5992%2015.8925%2015.1507%2015.6159%2014.8741L13.0126%2012.2709C13.8851%2011.1803%2014.4067%209.79686%2014.4067%208.29163C14.4067%204.77081%2011.5526%201.91663%208.03174%201.91663C4.51092%201.91663%201.65674%204.77081%201.65674%208.29163C1.65674%2011.8124%204.51092%2014.6666%208.03174%2014.6666ZM8.03174%203.33329C5.29333%203.33329%203.0734%205.55321%203.0734%208.29163C3.0734%2011.03%205.29333%2013.25%208.03174%2013.25C9.36749%2013.25%2010.5799%2012.7218%2011.4714%2011.8629C11.4901%2011.8385%2011.5106%2011.8151%2011.5329%2011.7928C11.5552%2011.7706%2011.5786%2011.7501%2011.6029%2011.7314C12.4619%2010.8398%2012.9901%209.6274%2012.9901%208.29163C12.9901%205.55321%2010.7702%203.33329%208.03174%203.33329Z%22%20fill%3D%22%234D6277%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconBringFront = "data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22bring-to-front%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M17.0833%207.49988H7.91667C7.68654%207.49988%207.5%207.68642%207.5%207.91654V17.0832C7.5%2017.3133%207.68654%2017.4999%207.91667%2017.4999H17.0833C17.3135%2017.4999%2017.5%2017.3133%2017.5%2017.0832V7.91654C17.5%207.68642%2017.3135%207.49988%2017.0833%207.49988Z%22%20fill%3D%22white%22%20stroke%3D%22%23203040%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M4.15377%202.5H2.5V4.18067%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M4.16544%2012.4999H2.5V10.8383%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M10.8345%202.5H12.5002V4.173%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_5%22%20d%3D%22M6.67871%202.5H8.33704%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_6%22%20d%3D%22M2.5%206.66675C2.5%207.77241%202.5%208.32796%202.5%208.33341%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_7%22%20d%3D%22M12.5%206.66675C12.5%207.78196%2012.5%208.06075%2012.5%207.50316%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_8%22%20d%3D%22M6.66357%2012.5001H7.49999%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconSentBack = "data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22sent-to-back%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M12.5%207.49988H17.0833C17.3135%207.49988%2017.5%207.68642%2017.5%207.91654V17.0832C17.5%2017.3133%2017.3135%2017.4999%2017.0833%2017.4999H7.91667C7.68654%2017.4999%207.5%2017.3133%207.5%2017.0832V12.4999%22%20stroke%3D%22%23203040%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M4.15377%202.5H2.5V4.18067%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M4.16544%2012.4999H2.5V10.8383%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M10.8335%2012.4999H12.499V10.8383%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_5%22%20d%3D%22M10.8345%202.5H12.5002V4.16577%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_6%22%20d%3D%22M6.67871%202.5H8.33704%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_7%22%20d%3D%22M2.5%206.66675V8.33958%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_8%22%20d%3D%22M12.5%206.66675V8.33958%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_9%22%20d%3D%22M6.66357%2012.5001H8.33332%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconLock = "data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2220%22%20viewBox%3D%220%200%2021%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22lock%22%3E%3Cpath%20id%3D%22Icon%20color%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.46566%208.33325V5.83325C5.46566%204.50717%205.99244%203.2354%206.93012%202.29772C7.86781%201.36004%209.13958%200.833252%2010.4657%200.833252C11.7917%200.833252%2013.0635%201.36004%2014.0012%202.29772C14.9389%203.2354%2015.4657%204.50717%2015.4657%205.83325V8.33325H16.299C17.6797%208.33325%2018.799%209.45254%2018.799%2010.8333V16.6666C18.799%2018.0473%2017.6797%2019.1666%2016.299%2019.1666H4.63232C3.25161%2019.1666%202.13232%2018.0473%202.13232%2016.6666V10.8333C2.13232%209.45254%203.25161%208.33325%204.63232%208.33325H5.46566ZM8.10863%203.47623C8.73376%202.85111%209.5816%202.49992%2010.4657%202.49992C11.3497%202.49992%2012.1976%202.85111%2012.8227%203.47623C13.4478%204.10135%2013.799%204.9492%2013.799%205.83325V8.33325H7.13232V5.83325C7.13232%204.9492%207.48351%204.10135%208.10863%203.47623ZM4.63232%209.99992C4.17209%209.99992%203.79899%2010.373%203.79899%2010.8333V16.6666C3.79899%2017.1268%204.17209%2017.4999%204.63232%2017.4999H16.299C16.7592%2017.4999%2017.1323%2017.1268%2017.1323%2016.6666V10.8333C17.1323%2010.373%2016.7592%209.99992%2016.299%209.99992H4.63232Z%22%20fill%3D%22%23383F46%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconCopy = "data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2220%22%20viewBox%3D%220%200%2021%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22copy%22%3E%3Cg%20id%3D%22Icon%20color%22%3E%3Cpath%20d%3D%22M3.27653%203.33337C3.27653%202.87694%203.65343%202.50004%204.10986%202.50004H12.4432C12.8996%202.50004%2013.2765%202.87694%2013.2765%203.33337C13.2765%203.79361%2013.6496%204.16671%2014.1099%204.16671C14.5701%204.16671%2014.9432%203.79361%2014.9432%203.33337C14.9432%201.95647%2013.8201%200.833374%2012.4432%200.833374H4.10986C2.73296%200.833374%201.60986%201.95647%201.60986%203.33337V11.6667C1.60986%2013.0436%202.73296%2014.1667%204.10986%2014.1667C4.5701%2014.1667%204.9432%2013.7936%204.9432%2013.3334C4.9432%2012.8731%204.5701%2012.5%204.10986%2012.5C3.65343%2012.5%203.27653%2012.1231%203.27653%2011.6667V3.33337Z%22%20fill%3D%22%2334C276%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.10986%205.83337C7.72915%205.83337%206.60986%206.95266%206.60986%208.33337V16.6667C6.60986%2018.0474%207.72915%2019.1667%209.10986%2019.1667H17.4432C18.8239%2019.1667%2019.9432%2018.0474%2019.9432%2016.6667V8.33337C19.9432%206.95266%2018.8239%205.83337%2017.4432%205.83337H9.10986ZM8.27653%208.33337C8.27653%207.87314%208.64963%207.50004%209.10986%207.50004H17.4432C17.9034%207.50004%2018.2765%207.87314%2018.2765%208.33337V16.6667C18.2765%2017.1269%2017.9034%2017.5%2017.4432%2017.5H9.10986C8.64963%2017.5%208.27653%2017.1269%208.27653%2016.6667V8.33337Z%22%20fill%3D%22%2334C276%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconDelete = "data:image/svg+xml,%3Csvg%20width%3D%2225%22%20height%3D%2224%22%20viewBox%3D%220%200%2025%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Frame%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M9.48691%2016.1537L12.0869%2013.5537L14.6869%2016.1537L15.7407%2015.1L13.1407%2012.5L15.7407%209.89998L14.6869%208.84623L12.0869%2011.4462L9.48691%208.84623L8.43316%209.89998L11.0332%2012.5L8.43316%2015.1L9.48691%2016.1537ZM7.39466%2020.5C6.8895%2020.5%206.46191%2020.325%206.11191%2019.975C5.76191%2019.625%205.58691%2019.1974%205.58691%2018.6922V5.99998H4.58691V4.49998H9.08691V3.61548H15.0869V4.49998H19.5869V5.99998H18.5869V18.6922C18.5869%2019.1974%2018.4119%2019.625%2018.0619%2019.975C17.7119%2020.325%2017.2843%2020.5%2016.7792%2020.5H7.39466ZM17.0869%205.99998H7.08691V18.6922C7.08691%2018.7692%207.119%2018.8397%207.18316%2018.9037C7.24716%2018.9679%207.31766%2019%207.39466%2019H16.7792C16.8562%2019%2016.9267%2018.9679%2016.9907%2018.9037C17.0548%2018.8397%2017.0869%2018.7692%2017.0869%2018.6922V5.99998Z%22%20fill%3D%22%23D91919%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconUndo = "data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22redo%22%3E%3Cpath%20id%3D%22Icon%20color%22%20d%3D%22M1.66683%205.83333C1.66683%205.3731%202.03993%205%202.50016%205C2.9604%205%203.3335%205.3731%203.3335%205.83333V8.9622L4.44323%207.96344C5.96994%206.59414%207.94893%205.83542%209.99974%205.83333C12.2099%205.83333%2014.3299%206.71131%2015.8927%208.27411C17.4555%209.83691%2018.3335%2011.9565%2018.3335%2014.1667C18.3335%2014.6269%2017.9604%2015%2017.5002%2015C17.0399%2015%2016.6668%2014.6269%2016.6668%2014.1667C16.6668%2012.3986%2015.9645%2010.7029%2014.7142%209.45262C13.4641%208.20248%2011.7685%207.50011%2010.0006%207.5C8.36033%207.50178%206.77775%208.10868%205.55657%209.2037L4.67179%2010H7.50016C7.9604%2010%208.3335%2010.3731%208.3335%2010.8333C8.3335%2011.2936%207.9604%2011.6667%207.50016%2011.6667H2.50016C2.03993%2011.6667%201.66683%2011.2936%201.66683%2010.8333V5.83333Z%22%20fill%3D%22%234D6277%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconRedo = "data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2220%22%20viewBox%3D%220%200%2021%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22redo%22%3E%3Cpath%20id%3D%22Icon%20color%22%20d%3D%22M18.8332%205.83333C18.8332%205.3731%2018.4601%205%2017.9998%205C17.5396%205%2017.1665%205.3731%2017.1665%205.83333V8.9622L16.0568%207.96344C14.5301%206.59414%2012.5511%205.83542%2010.5003%205.83333C8.29012%205.83333%206.17008%206.71131%204.60728%208.27411C3.04448%209.83691%202.1665%2011.9565%202.1665%2014.1667C2.1665%2014.6269%202.5396%2015%202.99984%2015C3.46007%2015%203.83317%2014.6269%203.83317%2014.1667C3.83317%2012.3986%204.53555%2010.7029%205.78579%209.45262C7.03594%208.20248%208.73146%207.50011%2010.4994%207.5C12.1397%207.50178%2013.7222%208.10868%2014.9434%209.2037L15.8282%2010H12.9998C12.5396%2010%2012.1665%2010.3731%2012.1665%2010.8333C12.1665%2011.2936%2012.5396%2011.6667%2012.9998%2011.6667H17.9998C18.4601%2011.6667%2018.8332%2011.2936%2018.8332%2010.8333V5.83333Z%22%20fill%3D%22%234D6277%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconTextSmall = "data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2217%22%20viewBox%3D%220%200%2014%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.78979%2015.7742C4.75579%2015.6209%205.34613%2015.4675%205.56079%2015.3142C5.77546%2015.1455%205.88279%2014.8235%205.88279%2014.3482V1.9282C3.90479%201.95887%202.84679%202.00487%202.70879%202.0662C2.57079%202.12754%202.46346%202.19654%202.38679%202.2732C2.20279%202.51854%201.98046%203.38487%201.71979%204.8722L0.546793%204.7802C0.53146%204.5502%200.523793%204.10554%200.523793%203.4462C0.523793%202.77154%200.592793%201.86687%200.730793%200.732203H13.2658C13.4038%201.86687%2013.4728%202.77154%2013.4728%203.4462C13.4728%204.10554%2013.4651%204.5502%2013.4498%204.7802L12.2768%204.8722C12.0161%203.38487%2011.7861%202.51854%2011.5868%202.2732C11.5255%202.19654%2011.4258%202.12754%2011.2878%202.0662C11.1498%202.00487%2010.0918%201.95887%208.11379%201.9282V14.9002C8.11379%2015.2529%208.26713%2015.4522%208.57379%2015.4982L10.3448%2015.7742L10.2528%2016.6712H3.92779L3.78979%2015.7742Z%22%20fill%3D%22%23344054%22%2F%3E%3C%2Fsvg%3E";
var IconBold = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22text-bold%22%3E%3Cpath%20id%3D%22Vector%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.1463%208.99999C11.0946%208.99999%2012.6741%207.41559%2012.6741%205.46118C12.6741%203.50674%2011.0946%201.92236%209.1463%201.92236H3.69434V8.99999H9.1463Z%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222.12329%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_2%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.4291%2016.0776C12.3775%2016.0776%2013.9569%2014.4932%2013.9569%2012.5388C13.9569%2010.5844%2012.3775%209%2010.4291%209H3.69434V16.0776H10.4291Z%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222.12329%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconLineThrough = "data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2216%22%20viewBox%3D%220%200%2014%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.4649%204.09091H12.1695C12.0914%201.89631%2010.0672%200.255681%207.25471%200.255681C4.47061%200.255681%202.28311%201.875%202.28311%204.31818C2.28311%206.27841%203.70357%207.44318%205.9763%208.09659L7.76607%208.60795C9.30016%209.03409%2010.6638%209.57386%2010.6638%2011.0227C10.6638%2012.6136%209.12971%2013.6648%207.11266%2013.6648C5.37971%2013.6648%203.84561%2012.8977%203.70357%2011.25H1.88539C2.05584%2013.6364%203.98766%2015.2557%207.11266%2015.2557C10.4649%2015.2557%2012.3683%2013.4091%2012.3683%2011.0511C12.3683%208.32386%209.78311%207.44318%208.27743%207.04545L6.80016%206.64773C5.72061%206.36364%203.98766%205.79545%203.98766%204.23295C3.98766%202.84091%205.26607%201.81818%207.19789%201.81818C8.95925%201.81818%2010.2945%202.65625%2010.4649%204.09091Z%22%20fill%3D%22%23344054%22%2F%3E%3Cpath%20d%3D%22M0.749023%208.4517H13.5047V9.81534H0.749023V8.4517Z%22%20fill%3D%22%23344054%22%2F%3E%3C%2Fsvg%3E";
var IconTextItalic = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7.5293%202.63013H13.1914%22%20stroke%3D%22%23344054%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4.69824%2015.3699H10.3603%22%20stroke%3D%22%23344054%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10.7146%202.61328L7.17578%2015.3699%22%20stroke%3D%22%23344054%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
var IconTextUnderLine = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22text-underline%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M2.89062%2016.0776H14.2148%22%20stroke%3D%22%23344054%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M13.1531%202.66443C13.1531%205.02362%2013.1531%205.93299%2013.1531%208.29221C13.1531%2010.833%2011.0934%2012.8927%208.55261%2012.8927C6.01184%2012.8927%203.95215%2010.833%203.95215%208.29221C3.95215%205.93299%203.95215%205.02362%203.95215%202.66443%22%20stroke%3D%22%23344054%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconAlignLeft = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.2192%203.86304H2.47949%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M12.3882%207.40186H2.47949%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M15.2192%2010.9407H2.47949%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M12.3882%2014.4795H2.47949%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
var IconAlignCenter = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.3926%207.40186H4.89941%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M15.5161%203.86304H2.77637%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M15.5161%2010.9407H2.77637%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M13.3926%2014.4795H4.89941%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
var IconAlignRight = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.813%203.86304H3.07324%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M15.813%207.40186H5.9043%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M15.813%2010.9407H3.07324%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M15.813%2014.4795H5.9043%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
var IconOpacity = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2217%22%20viewBox%3D%220%200%2018%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Frame%22%20clip-path%3D%22url%28%23clip0_565_3386%29%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M8.52116%2015.5045C6.65314%2015.5045%205.06461%2014.8885%203.75556%2013.6565C2.44652%2012.4246%201.79199%2010.9167%201.79199%209.13278C1.79199%208.26628%201.96889%207.45244%202.3227%206.69128C2.67635%205.93011%203.15629%205.25038%203.76252%204.6521L8.52116%200.171204L13.2798%204.6521C13.886%205.25038%2014.366%205.93011%2014.7196%206.69128C15.0734%207.45244%2015.2503%208.26628%2015.2503%209.13278C15.2503%2010.9167%2014.5958%2012.4246%2013.2868%2013.6565C11.9777%2014.8885%2010.3892%2015.5045%208.52116%2015.5045ZM3.19121%209.90772H13.8233C14.0027%208.87446%2013.9004%207.98916%2013.5162%207.25182C13.1321%206.51433%2012.7381%205.95903%2012.3344%205.58591L8.52116%201.9695L4.70796%205.58591C4.30421%205.95903%203.90936%206.51433%203.52341%207.25182C3.13745%207.98916%203.02672%208.87446%203.19121%209.90772Z%22%20fill%3D%22%235F6368%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_565_3386%22%3E%3Crect%20width%3D%2217%22%20height%3D%2216%22%20fill%3D%22white%22%20transform%3D%22translate%280.0917969%200.171204%29%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
var IconGrid = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.5%2020.5V3.5H20.5V20.5H3.5ZM19%2019V12.75H12.75V19H19ZM19%205H12.75V11.25H19V5ZM5%205V11.25H11.25V5H5ZM5%2019H11.25V12.75H5V19Z%22%20fill%3D%22%235F6368%22%2F%3E%3C%2Fsvg%3E";
var IconChevronLeft = "data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2218%22%20viewBox%3D%220%200%2010%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9%2016.125L1%208.625L9%201.125%22%20stroke%3D%22%23646464%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
var IconAdd = "data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2217%22%20viewBox%3D%220%200%2017%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Frame%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M7.83317%2012.5H9.1665V10.5H11.1665V9.16665H9.1665V7.16665H7.83317V9.16665H5.83317V10.5H7.83317V12.5ZM4.49984%2015.1666C4.13317%2015.1666%203.81928%2015.0361%203.55817%2014.775C3.29706%2014.5139%203.1665%2014.2%203.1665%2013.8333V3.16665C3.1665%202.79998%203.29706%202.48609%203.55817%202.22498C3.81928%201.96387%204.13317%201.83331%204.49984%201.83331H9.83317L13.8332%205.83331V13.8333C13.8332%2014.2%2013.7026%2014.5139%2013.4415%2014.775C13.1804%2015.0361%2012.8665%2015.1666%2012.4998%2015.1666H4.49984ZM9.1665%206.49998V3.16665H4.49984V13.8333H12.4998V6.49998H9.1665Z%22%20fill%3D%22%235F98D0%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconAddText = "data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2217%22%20viewBox%3D%220%200%2017%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Frame%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M7.83366%2011.1667V7.16669H5.83366V5.83335H11.167V7.16669H9.16699V11.1667H7.83366ZM1.16699%2015.8334V11.8334H2.50033V5.16669H1.16699V1.16669H5.16699V2.50002H11.8337V1.16669H15.8337V5.16669H14.5003V11.8334H15.8337V15.8334H11.8337V14.5H5.16699V15.8334H1.16699ZM5.16699%2013.1667H11.8337V11.8334H13.167V5.16669H11.8337V3.83335H5.16699V5.16669H3.83366V11.8334H5.16699V13.1667ZM2.50033%203.83335H3.83366V2.50002H2.50033V3.83335ZM13.167%203.83335H14.5003V2.50002H13.167V3.83335ZM13.167%2014.5H14.5003V13.1667H13.167V14.5ZM2.50033%2014.5H3.83366V13.1667H2.50033V14.5Z%22%20fill%3D%22%235F98D0%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconUpload = "data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2217%22%20viewBox%3D%220%200%2016%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22upload%22%3E%3Cg%20id%3D%22Icon%20color%22%3E%3Cpath%20d%3D%22M8.25486%201.8839C8.33349%201.91643%208.40716%201.96466%208.47108%202.02858L11.8044%205.36191C12.0648%205.62226%2012.0648%206.04437%2011.8044%206.30472C11.5441%206.56507%2011.122%206.56507%2010.8616%206.30472L8.66634%204.10946V10.5C8.66634%2010.8682%208.36786%2011.1666%207.99967%2011.1666C7.63148%2011.1666%207.33301%2010.8682%207.33301%2010.5V4.10946L5.13775%206.30472C4.8774%206.56507%204.45529%206.56507%204.19494%206.30472C3.93459%206.04437%203.93459%205.62226%204.19494%205.36191L7.52792%202.02893%22%20fill%3D%22%235F98D0%22%2F%3E%3Cpath%20d%3D%22M8.25486%201.8839C8.17626%201.8513%208.09007%201.83331%207.99967%201.83331C7.8163%201.83331%207.65021%201.90735%207.52969%202.02716%22%20fill%3D%22%235F98D0%22%2F%3E%3Cpath%20d%3D%22M1.99967%209.83331C2.36786%209.83331%202.66634%2010.1318%202.66634%2010.5V13.1666C2.66634%2013.3435%202.73658%2013.513%202.8616%2013.6381C2.98663%2013.7631%203.1562%2013.8333%203.33301%2013.8333H12.6663C12.8432%2013.8333%2013.0127%2013.7631%2013.1377%2013.6381C13.2628%2013.513%2013.333%2013.3435%2013.333%2013.1666V10.5C13.333%2010.1318%2013.6315%209.83331%2013.9997%209.83331C14.3679%209.83331%2014.6663%2010.1318%2014.6663%2010.5V13.1666C14.6663%2013.6971%2014.4556%2014.2058%2014.0806%2014.5809C13.7055%2014.9559%2013.1968%2015.1666%2012.6663%2015.1666H3.33301C2.80257%2015.1666%202.29387%2014.9559%201.91879%2014.5809C1.54372%2014.2058%201.33301%2013.6971%201.33301%2013.1666V10.5C1.33301%2010.1318%201.63148%209.83331%201.99967%209.83331Z%22%20fill%3D%22%235F98D0%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconGraph = "data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2220%22%20viewBox%3D%220%200%2021%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Frame%22%20clip-path%3D%22url%28%23clip0_2240_1532%29%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M1.16467%2016L0%2014.8505L7.57326%207.321L11.9943%2011.6846L18.1987%205.63636H14.9211V4H21V10H19.3421V6.78618L11.9943%2014.0385L7.57326%209.67491L1.16467%2016Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_2240_1532%22%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22white%22%20transform%3D%22translate%280.5%29%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
var IconCheveronDown = "data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%227%22%20viewBox%3D%220%200%2012%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11%201L6%206L1%201%22%20stroke%3D%22%23646464%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
var IconInfo = "data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2215%22%20viewBox%3D%220%200%2015%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Frame%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M7.49312%2011.0095C7.67156%2011.0095%207.82229%2010.948%207.94531%2010.8248C8.06833%2010.7016%208.12984%2010.5507%208.12984%2010.3722C8.12984%2010.1938%208.06823%2010.043%207.945%209.92C7.82177%209.79708%207.67094%209.73562%207.4925%209.73562C7.31406%209.73562%207.16333%209.79724%207.04031%209.92047C6.91729%2010.0437%206.85578%2010.1945%206.85578%2010.373C6.85578%2010.5514%206.9174%2010.7021%207.04063%2010.8252C7.16385%2010.9481%207.31469%2011.0095%207.49312%2011.0095ZM7.05047%208.77156H7.93031C7.93833%208.46396%207.98339%208.21818%208.06547%208.03422C8.14766%207.85036%208.34698%207.60661%208.66344%207.30297C8.93833%207.02807%209.14885%206.77422%209.295%206.54141C9.44125%206.3087%209.51437%206.03385%209.51437%205.71688C9.51437%205.17885%209.32109%204.75859%208.93453%204.45609C8.54786%204.1537%208.09052%204.0025%207.5625%204.0025C7.04083%204.0025%206.60917%204.14172%206.2675%204.42016C5.92573%204.69859%205.68193%205.02651%205.53609%205.40391L6.33891%205.72594C6.41505%205.51844%206.54526%205.3163%206.72953%205.11953C6.9138%204.92286%207.18745%204.82453%207.55047%204.82453C7.91984%204.82453%208.19286%204.92568%208.36953%205.12797C8.5463%205.33036%208.63469%205.55292%208.63469%205.79562C8.63469%206.00802%208.57417%206.20234%208.45312%206.37859C8.33219%206.55484%208.17797%206.7251%207.99047%206.88937C7.58016%207.25958%207.32094%207.5549%207.21281%207.77531C7.10458%207.99563%207.05047%208.32771%207.05047%208.77156ZM7.50109%2013.4375C6.67984%2013.4375%205.90792%2013.2817%205.18531%2012.97C4.46271%2012.6583%203.83417%2012.2354%203.29969%2011.7011C2.76521%2011.1668%202.34203%2010.5385%202.03016%209.81625C1.71839%209.09396%201.5625%208.32224%201.5625%207.50109C1.5625%206.67984%201.71833%205.90792%202.03%205.18531C2.34167%204.46271%202.76464%203.83417%203.29891%203.29969C3.83318%202.76521%204.46146%202.34203%205.18375%202.03016C5.90604%201.71839%206.67776%201.5625%207.49891%201.5625C8.32016%201.5625%209.09208%201.71833%209.81469%202.03C10.5373%202.34167%2011.1658%202.76464%2011.7003%203.29891C12.2348%203.83318%2012.658%204.46146%2012.9698%205.18375C13.2816%205.90604%2013.4375%206.67776%2013.4375%207.49891C13.4375%208.32016%2013.2817%209.09208%2012.97%209.81469C12.6583%2010.5373%2012.2354%2011.1658%2011.7011%2011.7003C11.1668%2012.2348%2010.5385%2012.658%209.81625%2012.9698C9.09396%2013.2816%208.32224%2013.4375%207.50109%2013.4375ZM7.5%2012.5C8.89583%2012.5%2010.0781%2012.0156%2011.0469%2011.0469C12.0156%2010.0781%2012.5%208.89583%2012.5%207.5C12.5%206.10417%2012.0156%204.92188%2011.0469%203.95312C10.0781%202.98438%208.89583%202.5%207.5%202.5C6.10417%202.5%204.92188%202.98438%203.95312%203.95312C2.98438%204.92188%202.5%206.10417%202.5%207.5C2.5%208.89583%202.98438%2010.0781%203.95312%2011.0469C4.92188%2012.0156%206.10417%2012.5%207.5%2012.5Z%22%20fill%3D%22%235F6368%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconTools = "data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2230%22%20viewBox%3D%220%200%2028%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22logo22%201%22%20clip-path%3D%22url%28%23clip0_2312_1672%29%22%3E%3Cg%20id%3D%22Clip%20path%20group%22%3E%3Cmask%20id%3D%22mask0_2312_1672%22%20style%3D%22mask-type%3Aluminance%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2228%22%20height%3D%2230%22%3E%3Cg%20id%3D%22clip0_8042_16520%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M27.6442%200H0V30H27.6442V0Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23mask0_2312_1672%29%22%3E%3Cg%20id%3D%22Group%22%3E%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M23.8782%203.46176C24.4391%202.63758%2024.2788%201.56616%2023.4775%200.989232C23.0769%200.741978%2022.6763%200.577144%2022.1955%200.659562C21.7147%200.741978%2021.3141%200.989232%2021.0737%201.40132L12.5801%2013.187L10.657%2015.9068C9.85578%2016.3189%205.04807%2018.5442%201.4423%2018.7914H1.36218C1.12179%2018.7914%200.961536%2018.7914%200.72115%2018.8739C0.24038%2018.9563%200.0801234%2019.3683%20-5.05522e-06%2019.5332C-0.24039%2020.9343%200.480764%2022.665%202.24359%2024.5607C3.44551%2025.9617%204.80769%2026.9508%204.80769%2026.9508C5.1282%2027.198%205.44871%2027.198%205.60897%2026.9508L7.29168%2025.0551L6.41026%2027.6926C6.33011%2027.9398%206.41026%2028.187%206.65065%2028.3519C6.73074%2028.4343%208.73397%2029.6706%2010.0962%2029.9178C10.1763%2029.9178%2010.1763%2029.9178%2010.2564%2029.9178C10.4167%2029.9178%2010.5769%2029.9178%2010.7372%2029.753C11.2179%2029.3409%2011.6186%2028.2695%2011.8589%2027.2804C12.0993%2026.2914%2012.3397%2024.9728%2012.6603%2023.3244C13.0609%2020.9343%2013.3013%2018.6266%2013.3814%2018.0497L15.3045%2015.3299L23.8782%203.46176Z%22%20fill%3D%22%238D8B8B%22%2F%3E%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M26.2819%2019.451C25.4005%2018.5444%2024.1184%2017.9675%2022.7562%2017.9675C22.1953%2017.9675%2021.6344%2018.0499%2021.0735%2018.2971L17.3876%2014.506C17.1472%2014.2587%2016.7466%2014.2587%2016.5062%2014.5883L14.9037%2016.8136C14.7434%2017.0609%2014.7434%2017.3905%2014.9838%2017.5554L18.3492%2021.0169C17.7082%2022.8301%2018.1088%2025.0554%2019.4709%2026.3741C20.3524%2027.2807%2021.5543%2027.7751%2022.7562%2027.7751C23.237%2027.7751%2023.6376%2027.6928%2024.1184%2027.5279L25.0799%2027.1982L22.035%2023.984C21.7947%2023.7367%2021.7947%2023.3246%2022.035%2023.0774L23.237%2021.7587C23.3171%2021.6763%2023.4774%2021.5938%2023.6376%2021.5938C23.7979%2021.5938%2024.0383%2021.6763%2024.1184%2021.8411L27.2434%2025.0554L27.4838%2023.984C27.9646%2022.418%2027.4838%2020.6873%2026.2819%2019.451Z%22%20fill%3D%22%238D8B8B%22%2F%3E%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M5.60925%209.8903C6.17014%209.8903%206.73102%209.80786%207.29195%209.56066L10.8977%2013.2694C11.1381%2013.5167%2011.5387%2013.5167%2011.7791%2013.187L13.3817%2010.9617C13.542%2010.7145%2013.542%2010.3848%2013.3016%2010.22L10.0163%206.84086C10.6573%205.02767%2010.2567%202.8024%208.89449%201.48372C7.61244%200.165035%205.84966%20-0.32947%204.24707%200.247452L3.28553%200.494705L6.41054%203.70899C6.65093%203.95624%206.65093%204.36833%206.41054%204.61558L5.12848%205.85185C4.88809%206.09908%204.40733%206.09908%204.24707%205.85185L1.12207%202.63756L0.881685%203.70899C0.481046%205.35734%200.881685%207.1705%202.08361%208.4068C2.96502%209.3134%204.24707%209.8903%205.60925%209.8903Z%22%20fill%3D%22%238D8B8B%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_2312_1672%22%3E%3Crect%20width%3D%2228%22%20height%3D%2230%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
var IconToolsPink = "data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2230%22%20viewBox%3D%220%200%2028%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22logo22%202%22%20clip-path%3D%22url%28%23clip0_2312_1680%29%22%3E%3Cg%20id%3D%22Clip%20path%20group%22%3E%3Cmask%20id%3D%22mask0_2312_1680%22%20style%3D%22mask-type%3Aluminance%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2228%22%20height%3D%2230%22%3E%3Cg%20id%3D%22clip0_8042_16520%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M27.6442%200H0V30H27.6442V0Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23mask0_2312_1680%29%22%3E%3Cg%20id%3D%22Group%22%3E%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M23.8782%203.46176C24.4391%202.63758%2024.2788%201.56616%2023.4775%200.989232C23.0769%200.741978%2022.6763%200.577144%2022.1955%200.659562C21.7147%200.741978%2021.3141%200.989232%2021.0737%201.40132L12.5801%2013.187L10.657%2015.9068C9.85578%2016.3189%205.04807%2018.5442%201.4423%2018.7914H1.36218C1.12179%2018.7914%200.961536%2018.7914%200.72115%2018.8739C0.24038%2018.9563%200.0801234%2019.3683%20-5.05522e-06%2019.5332C-0.24039%2020.9343%200.480764%2022.665%202.24359%2024.5607C3.44551%2025.9617%204.80769%2026.9508%204.80769%2026.9508C5.1282%2027.198%205.44871%2027.198%205.60897%2026.9508L7.29168%2025.0551L6.41026%2027.6926C6.33011%2027.9398%206.41026%2028.187%206.65065%2028.3519C6.73074%2028.4343%208.73397%2029.6706%2010.0962%2029.9178C10.1763%2029.9178%2010.1763%2029.9178%2010.2564%2029.9178C10.4167%2029.9178%2010.5769%2029.9178%2010.7372%2029.753C11.2179%2029.3409%2011.6186%2028.2695%2011.8589%2027.2804C12.0993%2026.2914%2012.3397%2024.9728%2012.6603%2023.3244C13.0609%2020.9343%2013.3013%2018.6266%2013.3814%2018.0497L15.3045%2015.3299L23.8782%203.46176Z%22%20fill%3D%22%23AC8EBA%22%2F%3E%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M26.2819%2019.451C25.4005%2018.5444%2024.1184%2017.9675%2022.7562%2017.9675C22.1953%2017.9675%2021.6344%2018.0499%2021.0735%2018.2971L17.3876%2014.506C17.1472%2014.2587%2016.7466%2014.2587%2016.5062%2014.5883L14.9037%2016.8136C14.7434%2017.0609%2014.7434%2017.3905%2014.9838%2017.5554L18.3492%2021.0169C17.7082%2022.8301%2018.1088%2025.0554%2019.4709%2026.3741C20.3524%2027.2807%2021.5543%2027.7751%2022.7562%2027.7751C23.237%2027.7751%2023.6376%2027.6928%2024.1184%2027.5279L25.0799%2027.1982L22.035%2023.984C21.7947%2023.7367%2021.7947%2023.3246%2022.035%2023.0774L23.237%2021.7587C23.3171%2021.6763%2023.4774%2021.5938%2023.6376%2021.5938C23.7979%2021.5938%2024.0383%2021.6763%2024.1184%2021.8411L27.2434%2025.0554L27.4838%2023.984C27.9646%2022.418%2027.4838%2020.6873%2026.2819%2019.451Z%22%20fill%3D%22%23AC8EBA%22%2F%3E%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M5.60925%209.8903C6.17014%209.8903%206.73102%209.80786%207.29195%209.56066L10.8977%2013.2694C11.1381%2013.5167%2011.5387%2013.5167%2011.7791%2013.187L13.3817%2010.9617C13.542%2010.7145%2013.542%2010.3848%2013.3016%2010.22L10.0163%206.84086C10.6573%205.02767%2010.2567%202.8024%208.89449%201.48372C7.61244%200.165035%205.84966%20-0.32947%204.24707%200.247452L3.28553%200.494705L6.41054%203.70899C6.65093%203.95624%206.65093%204.36833%206.41054%204.61558L5.12848%205.85185C4.88809%206.09908%204.40733%206.09908%204.24707%205.85185L1.12207%202.63756L0.881685%203.70899C0.481046%205.35734%200.881685%207.1705%202.08361%208.4068C2.96502%209.3134%204.24707%209.8903%205.60925%209.8903Z%22%20fill%3D%22%23AC8EBA%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_2312_1680%22%3E%3Crect%20width%3D%2228%22%20height%3D%2230%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
var IconCircle = "data:image/svg+xml,%3Csvg%20width%3D%2247%22%20height%3D%2247%22%20viewBox%3D%220%200%2047%2047%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M23.5037%2041.7084C20.9852%2041.7084%2018.6179%2041.2305%2016.402%2040.2747C14.186%2039.3189%2012.2584%2038.0218%2010.6194%2036.3834C8.9803%2034.7449%207.68255%2032.8182%206.72614%2030.6032C5.77004%2028.3882%205.29199%2026.0216%205.29199%2023.5034C5.29199%2020.9849%205.76988%2018.6176%206.72566%2016.4016C7.68144%2014.1857%208.97854%2012.2581%2010.617%2010.6191C12.2554%208.97999%2014.1821%207.68225%2016.3972%206.72583C18.6122%205.76974%2020.9788%205.29169%2023.497%205.29169C26.0155%205.29169%2028.3827%205.76958%2030.5987%206.72535C32.8147%207.68113%2034.7422%208.97824%2036.3813%2010.6167C38.0204%2012.2551%2039.3181%2014.1818%2040.2745%2016.3969C41.2306%2018.6119%2041.7087%2020.9785%2041.7087%2023.4967C41.7087%2026.0152%2041.2308%2028.3824%2040.275%2030.5984C39.3192%2032.8144%2038.0221%2034.7419%2036.3837%2036.381C34.7453%2038.0201%2032.8185%2039.3178%2030.6035%2040.2742C28.3885%2041.2303%2026.0219%2041.7084%2023.5037%2041.7084ZM23.5003%2038.8334C27.7809%2038.8334%2031.4066%2037.3479%2034.3774%2034.3771C37.3482%2031.4063%2038.8337%2027.7806%2038.8337%2023.5C38.8337%2019.2195%2037.3482%2015.5938%2034.3774%2012.6229C31.4066%209.6521%2027.7809%208.16669%2023.5003%208.16669C19.2198%208.16669%2015.5941%209.6521%2012.6232%2012.6229C9.65241%2015.5938%208.16699%2019.2195%208.16699%2023.5C8.16699%2027.7806%209.65241%2031.4063%2012.6232%2034.3771C15.5941%2037.3479%2019.2198%2038.8334%2023.5003%2038.8334Z%22%20fill%3D%22%23A7A7A7%22%2F%3E%3C%2Fsvg%3E";
var IconSquare = "data:image/svg+xml,%3Csvg%20width%3D%2237%22%20height%3D%2237%22%20viewBox%3D%220%200%2037%2037%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%221.5%22%20y%3D%221.5%22%20width%3D%2234%22%20height%3D%2234%22%20stroke%3D%22%23A7A7A7%22%20stroke-width%3D%223%22%2F%3E%3C%2Fsvg%3E";
var IconTriangle = "data:image/svg+xml,%3Csvg%20width%3D%2247%22%20height%3D%2247%22%20viewBox%3D%220%200%2047%2047%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5.68652%2038.1875L23.4995%209.67908L41.3125%2038.1875H5.68652ZM10.9662%2035.25H36.0329L23.4995%2015.1771L10.9662%2035.25Z%22%20fill%3D%22%23A7A7A7%22%2F%3E%3C%2Fsvg%3E";
var IconArrowRight = "data:image/svg+xml,%3Csvg%20width%3D%2247%22%20height%3D%2247%22%20viewBox%3D%220%200%2047%2047%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Frame%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M33.9701%2031.6345L31.8761%2029.5709L36.4782%2024.9688H6.85449V22.0313H36.4782L31.906%2017.4292L33.9999%2015.3656L42.1045%2023.5L33.9701%2031.6345Z%22%20fill%3D%22%23A7A7A7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconHorizontalLine = "data:image/svg+xml,%3Csvg%20width%3D%2247%22%20height%3D%2247%22%20viewBox%3D%220%200%2047%2047%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.8125%2024.9688V22.0312H38.1875V24.9688H8.8125Z%22%20fill%3D%22%23A7A7A7%22%2F%3E%3C%2Fsvg%3E";
var IconVerticalLine = "data:image/svg+xml,%3Csvg%20width%3D%2247%22%20height%3D%2247%22%20viewBox%3D%220%200%2047%2047%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M24.9688%2038.1875L22.0312%2038.1875L22.0312%208.8125L24.9687%208.8125L24.9688%2038.1875Z%22%20fill%3D%22%23A7A7A7%22%2F%3E%3C%2Fsvg%3E";
var IconStar = "data:image/svg+xml,%3Csvg%20width%3D%2247%22%20height%3D%2247%22%20viewBox%3D%220%200%2047%2047%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M17.3316%2032.949L23.5003%2029.2281L29.6691%2032.9979L28.0534%2025.9479L33.4878%2021.2479L26.3399%2020.6115L23.5003%2013.9531L20.6607%2020.5625L13.5128%2021.199L18.9472%2025.9479L17.3316%2032.949ZM12.8764%2039.0913L15.6822%2027.0098L6.30859%2018.8867L18.676%2017.8135L23.5003%206.42139L28.3247%2017.8135L40.692%2018.8867L31.3185%2027.0098L34.1243%2039.0913L23.5003%2032.6817L12.8764%2039.0913Z%22%20fill%3D%22%23A7A7A7%22%2F%3E%3C%2Fsvg%3E";
var IconHeart = "data:image/svg+xml,%3Csvg%20width%3D%2247%22%20height%3D%2247%22%20viewBox%3D%220%200%2047%2047%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Frame%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M23.4997%2039.8066L21.3382%2037.8634C18.0919%2034.9184%2015.4074%2032.3877%2013.2845%2030.2714C11.1617%2028.1548%209.47948%2026.2711%208.23789%2024.6202C6.99631%2022.9696%206.12893%2021.4638%205.63576%2020.1028C5.14226%2018.7421%204.89551%2017.3613%204.89551%2015.9604C4.89551%2013.1812%205.83257%2010.8544%207.7067%208.97995C9.58115%207.10582%2011.908%206.16876%2014.6872%206.16876C16.3968%206.16876%2018.0124%206.56859%2019.534%207.36824C21.0557%208.16789%2022.3775%209.31466%2023.4997%2010.8085C24.6218%209.31466%2025.9437%208.16789%2027.4653%207.36824C28.9869%206.56859%2030.6025%206.16876%2032.3122%206.16876C35.0914%206.16876%2037.4182%207.10582%2039.2927%208.97995C41.1668%2010.8544%2042.1038%2013.1812%2042.1038%2015.9604C42.1038%2017.3613%2041.8571%2018.7421%2041.3636%2020.1028C40.8704%2021.4638%2040.003%2022.9696%2038.7615%2024.6202C37.5199%2026.2711%2035.8408%2028.1548%2033.7241%2030.2714C31.6078%2032.3877%2028.9202%2034.9184%2025.6612%2037.8634L23.4997%2039.8066ZM23.4997%2035.8375C26.633%2033.0182%2029.2115%2030.6016%2031.2351%2028.5878C33.2587%2026.5743%2034.858%2024.825%2036.033%2023.3399C37.208%2021.8548%2038.024%2020.5361%2038.4809%2019.3836C38.9379%2018.2314%2039.1663%2017.0904%2039.1663%2015.9604C39.1663%2014.0021%2038.5136%2012.3702%2037.208%2011.0646C35.9025%209.75904%2034.2705%209.10626%2032.3122%209.10626C30.7657%209.10626%2029.3365%209.54493%2028.0244%2010.4223C26.7126%2011.2999%2025.6739%2012.5208%2024.9082%2014.0848H22.0911C21.3127%2012.5081%2020.2707%2011.2841%2018.9652%2010.413C17.6596%209.54183%2016.2336%209.10626%2014.6872%209.10626C12.7412%209.10626%2011.1124%209.75904%209.80064%2011.0646C8.48889%2012.3702%207.83301%2014.0021%207.83301%2015.9604C7.83301%2017.0904%208.06148%2018.2314%208.51842%2019.3836C8.97537%2020.5361%209.79134%2021.8548%2010.9663%2023.3399C12.1413%2024.825%2013.7406%2026.5712%2015.7643%2028.5785C17.7879%2030.5858%2020.3663%2033.0054%2023.4997%2035.8375Z%22%20fill%3D%22%23A7A7A7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconUnlock = "data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2216%22%20viewBox%3D%220%200%2017%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.66368%202.01017C9.32164%201.94371%209.98083%202.1241%2010.5133%202.51632C11.0457%202.90854%2011.4134%203.4846%2011.545%204.13269C11.6183%204.49351%2011.9702%204.72662%2012.331%204.65336C12.6918%204.58009%2012.925%204.22819%2012.8517%203.86736C12.6543%202.89524%2012.1027%202.03114%2011.3041%201.44281C10.5054%200.854482%209.51663%200.583899%208.52969%200.68359C7.54691%200.782861%206.63577%201.24224%205.97161%201.97299L5.96306%201.98228C5.29856%202.71803%204.93098%203.67431%204.93156%204.66567L4.93156%206.66675H4.26489C3.16032%206.66675%202.26489%207.56218%202.26489%208.66675V13.3334C2.26489%2014.438%203.16032%2015.3334%204.26489%2015.3334H13.5982C14.7028%2015.3334%2015.5982%2014.438%2015.5982%2013.3334V8.66675C15.5982%207.56218%2014.7028%206.66675%2013.5982%206.66675H6.26489L6.26489%204.66601C6.26423%204.00811%206.50679%203.37331%206.94572%202.88356L6.95268%202.87597C7.39593%202.3852%208.00572%202.07663%208.66368%202.01017ZM4.26489%208.00008C3.8967%208.00008%203.59823%208.29856%203.59823%208.66675V13.3334C3.59823%2013.7016%203.8967%2014.0001%204.26489%2014.0001H13.5982C13.9664%2014.0001%2014.2649%2013.7016%2014.2649%2013.3334V8.66675C14.2649%208.29856%2013.9664%208.00008%2013.5982%208.00008H4.26489Z%22%20fill%3D%22%234D6277%22%2F%3E%3C%2Fsvg%3E";
var IconCross = "data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20enable-background%3D%22new%200%200%2024%2024%22%3E%3Cpath%20d%3D%22M5.3%2018.7c.2.2.4.3.7.3s.5-.1.7-.3l5.3-5.3%205.3%205.3c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1%200-1.4L13.4%2012l5.3-5.3c.4-.4.4-1%200-1.4s-1-.4-1.4%200L12%2010.6%206.7%205.3c-.4-.4-1-.4-1.4%200s-.4%201%200%201.4l5.3%205.3-5.3%205.3c-.4.4-.4%201%200%201.4z%22%20id%3D%22_icons%22%20fill%3D%22%23ffffff%22%20class%3D%22fill-000000%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E";
var IconRoundedCorner = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20enable-background%3D%22new%200%200%2024%2024%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20fill%3D%22%234D6277%22%3E%3Cg%3E%3Crect%20fill%3D%22none%22%20height%3D%2224%22%20width%3D%2224%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath%20d%3D%22M19%2C19h2v2h-2V19z%20M19%2C17h2v-2h-2V17z%20M3%2C13h2v-2H3V13z%20M3%2C17h2v-2H3V17z%20M3%2C9h2V7H3V9z%20M3%2C5h2V3H3V5z%20M7%2C5h2V3H7V5z%20M15%2C21h2v-2h-2V21z%20M11%2C21h2v-2h-2V21z%20M15%2C21h2v-2h-2V21z%20M7%2C21h2v-2H7V21z%20M3%2C21h2v-2H3V21z%20M21%2C8c0-2.76-2.24-5-5-5h-5v2h5%20c1.65%2C0%2C3%2C1.35%2C3%2C3v5h2V8z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var EditorBg = "/images/small-dots.png";
var topTabBarpadding = '11.51px 14.16px';
var helperSideBarWidth = 280;
var pageSizes = {
A4: 'A4',
A3: 'A3',
A5: 'A5',
Letter: 'Letter',
Legal: 'Legal',
Ledger: 'Ledger',
B5: 'B5',
C5: 'C5'
};
var pageSizesDimensions = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, pageSizes.A4, {
width: 499,
height: 670
}), pageSizes.A3, {
width: 531,
height: 750
}), pageSizes.A5, {
width: 350,
height: 499
}), pageSizes.Letter, {
width: 510,
height: 680
}), pageSizes.Legal, {
width: 440,
height: 750
}), pageSizes.Ledger, {
width: 900,
height: 584
}), pageSizes.B5, {
width: 518,
height: 726
}), pageSizes.C5, {
width: 460,
height: 648
});
var sideBarpillsList = {
template: 'Template',
text: 'Text',
image: 'Image',
shape: 'Shape',
qr: 'QR',
whiteLabel: 'White-label'
};
var ButtonVarients = {
primary: 'primary',
secondary: 'secondary'
};
var defaultSideBarImagesList = [IconTools, IconToolsPink];
var textList = [{
text: '+ Heading 1',
fontFamily: 'Open Sans',
fontSize: 18,
color: '#333333',
fontWeight: theme.fontWeights[700],
textDecoration: 'normal',
fontStyle: 'normal',
textAlign: 'left',
width: 125
}, {
text: '+ Heading 2',
fontFamily: 'Open Sans',
fontSize: 16,
color: '#333333',
fontWeight: theme.fontWeights[700],
textDecoration: 'normal',
fontStyle: 'normal',
textAlign: 'left'
},
// {
// text: 'What problem are you facing in this meeting room?',
// fontFamily: 'Open Sans Condensed',
// fontSize: 18,
// color: '#333333',
// fontWeight: theme.fontWeights[700],
// textDecoration: 'normal',
// fontStyle: 'normal',
// textAlign: 'left',
// },
{
text: 'Scan this QR code from your mobile to report the issue',
fontFamily: 'Open Sans',
fontSize: 16,
color: '#333333',
fontWeight: theme.fontWeights[400],
textDecoration: 'normal',
fontStyle: 'normal',
textAlign: 'left',
width: 220
}, {
text: 'property 1 > building 2 > Room 2',
fontFamily: 'Open Sans',
fontSize: 12,
color: '#6D737B',
fontWeight: theme.fontWeights[400],
textDecoration: 'normal',
fontStyle: 'normal',
textAlign: 'left'
}, {
text: 'www.domain.com',
fontFamily: 'Plus Jakarta Sans',
fontSize: 10,
color: '#333333',
fontWeight: theme.fontWeights[400],
textDecoration: 'normal',
fontStyle: 'normal',
textAlign: 'left'
}];
var elementTypes = {
pageSize: 'pageSize',
backgroundColor: 'backgroundColor',
backgroundImage: 'backgroundImage',
circle: 'circle',
square: 'square',
triangle: 'triangle',
arrowRight: 'arrowRight',
horizontalLine: 'horizontalLine',
verticalLine: 'verticalLine',
star: 'star',
heart: 'heart',
image: 'image',
qr: 'qr',
text: 'text'
};
var shapesList = [{
shape: elementTypes.circle,
icon: IconCircle
}, {
shape: elementTypes.square,
icon: IconSquare
}, {
shape: elementTypes.triangle,
icon: IconTriangle
}, {
shape: elementTypes.arrowRight,
icon: IconArrowRight
}, {
shape: elementTypes.horizontalLine,
icon: IconHorizontalLine
}, {
shape: elementTypes.verticalLine,
icon: IconVerticalLine
}, {
shape: elementTypes.star,
icon: IconStar
}, {
shape: elementTypes.heart,
icon: IconHeart
}];
var defaultElements = [{
type: elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize,
id: "element".concat(Date.now()),
size: pageSizes === null || pageSizes === void 0 ? void 0 : pageSizes.A4,
cuttingGuideStroke: 0,
cuttingGuideStrokeColor: theme.color.black
}];
var basicTextProps = {
opacity: 1,
text: 'Enter Text Here',
fontSize: 16,
fontFamily: 'Open Sans',
color: theme.color.black,
textDecoration: 'normal',
fontStyle: 'normal',
fontWeight: theme.fontWeights[400],
textAlign: 'left',
lineHeight: 1
// width: 125,
};
var normalFonts = ['Open Sans', 'Roboto', 'Lato', 'Montserrat', 'Source Sans Pro', 'Inter', 'Raleway', 'Poppins', 'Merriweather', 'Noto Sans', 'Work Sans', 'Ubuntu', 'Nunito', 'Playfair Display', 'DM Sans', 'PT Sans', 'Quicksand', 'Baloo 2', 'Amatic SC', 'Plus Jakarta Sans', 'Rubik', 'Oswald', 'Kalam', 'Caveat'];
var funkyFonts = ['Open Sans Condensed', 'Lobster', 'Pacifico', 'Bangers', 'Shadows Into Light', 'Indie Flower', 'Fredericka the Great', 'Chewy', 'Coming Soon', 'Gloria Hallelujah', 'Luckiest Guy', 'Patrick Hand', 'Rock Salt', 'Architects Daughter', 'Boogaloo', 'Concert One', 'Courgette', 'Great Vibes', 'Handlee', 'Mansalva', 'Satisfy', 'Special Elite', 'Titan One'];
var fontFamilies = [].concat(normalFonts, funkyFonts);
var BRING_FORWARD$6 = "Bring Forward";
var SEND_BACKWARD$6 = "Send Backward";
var LOCK$6 = "Lock";
var UNLOCK$6 = "Unlock";
var COPY$6 = "Copy";
var DELETE$6 = "Delete";
var BUTTON$6 = "Button";
var COLLAPSABLE$6 = "Collapsable";
var DROPDOWN$6 = "Dropdown";
var TITLE$6 = "Title";
var ADD_IMAGE$6 = "Add Image";
var DEFAULT$6 = "Default";
var CUSTOM_IMAGES$6 = "Custom Images";
var IMAGE_OPACITY$6 = "Image Opacity";
var LOGO$6 = "Logo";
var SHOW_QR_CODE$6 = "Show QR Code";
var SHOW_LOGO_IN_QR$6 = "Show Logo in QR Code";
var ADD_LOGO$6 = "Add Logo";
var SHAPE_FILL$6 = "Shape Fill";
var SHAPE_OPACITY$6 = "Shape Opacity";
var COLLAPSE$6 = "Collapse";
var TEXT$6 = "Text";
var STROKE_WIDTH_AND_COLOR$6 = "Stroke Width & Color";
var NEW_TEMPLATE$6 = "New Template";
var CUSTOM_TEMPLATES$6 = "My Designs";
var PAGE_SIZE$6 = "Page size";
var BACKGROUND_COLOR$6 = "Background Color";
var BACKGROUND_IMAGE$6 = "Background Image";
var BACKGROUND_IMAGE_OPACITY$6 = "Background Image Opacity";
var CUTTING_GUIDE$6 = "Cutting Guide";
var ADD_TEXT$6 = "Add Text";
var HELP_TEXT$6 = "Help Text";
var BOLD$6 = "Bold";
var ITALIC$6 = "Italic";
var LINE_THROUGH$6 = "Line Through";
var UNDERLINE$6 = "Underline";
var LEFT_ALIGN$6 = "Left Align";
var CENTER_ALIGN$6 = "Center Align";
var RIGHT_ALIGN$6 = "Right Align";
var FONT_FAMILY$6 = "Font Family";
var TEXT_SIZE$6 = "Text Size";
var TEXT_LINE_HEIGHT$6 = "Line & Paragraph Spacing";
var TEXT_COLOR$6 = "Text Color";
var TEXT_OPACITY$6 = "Text Opacity";
var UNDO$6 = "Undo";
var REDO$6 = "Redo";
var SHOW_BRANDING$6 = "Show Fixalert Branding";
var UNLOCK_PREMIUM_FEATURE_PARAGRAPH$6 = "Unlock premium features to customize your QR code sticker by hiding the company logo and watermark. Upgrade your plan for full control over your design.";
var UPGRADE_PLAN$6 = "Upgrade your plan";
var PREMIUM_SETTINGS$6 = "Premium settings";
var ZOOM_IN_OUT$6 = "Zoom In/Out";
var TEMPLATE$6 = "Template";
var IMAGE$6 = "Image";
var SHAPE$6 = "Shape";
var QR_CODE$6 = "QR Code";
var BRANDING$6 = "Branding";
var QR$6 = "QR";
var WHITE_LABEL$6 = "White-label";
var OPACITY$6 = "Opacity";
var ADD_SHAPES$6 = "Add shapes";
var SETTINGS$6 = "Settings";
var PLEASE_ADD_IMAGES$6 = "Please Add Images";
var SAVE$6 = "Save";
var enTranslations = {
BRING_FORWARD: BRING_FORWARD$6,
SEND_BACKWARD: SEND_BACKWARD$6,
LOCK: LOCK$6,
UNLOCK: UNLOCK$6,
COPY: COPY$6,
DELETE: DELETE$6,
BUTTON: BUTTON$6,
COLLAPSABLE: COLLAPSABLE$6,
DROPDOWN: DROPDOWN$6,
TITLE: TITLE$6,
ADD_IMAGE: ADD_IMAGE$6,
DEFAULT: DEFAULT$6,
CUSTOM_IMAGES: CUSTOM_IMAGES$6,
IMAGE_OPACITY: IMAGE_OPACITY$6,
LOGO: LOGO$6,
SHOW_QR_CODE: SHOW_QR_CODE$6,
SHOW_LOGO_IN_QR: SHOW_LOGO_IN_QR$6,
ADD_LOGO: ADD_LOGO$6,
SHAPE_FILL: SHAPE_FILL$6,
SHAPE_OPACITY: SHAPE_OPACITY$6,
COLLAPSE: COLLAPSE$6,
TEXT: TEXT$6,
STROKE_WIDTH_AND_COLOR: STROKE_WIDTH_AND_COLOR$6,
NEW_TEMPLATE: NEW_TEMPLATE$6,
CUSTOM_TEMPLATES: CUSTOM_TEMPLATES$6,
PAGE_SIZE: PAGE_SIZE$6,
BACKGROUND_COLOR: BACKGROUND_COLOR$6,
BACKGROUND_IMAGE: BACKGROUND_IMAGE$6,
BACKGROUND_IMAGE_OPACITY: BACKGROUND_IMAGE_OPACITY$6,
CUTTING_GUIDE: CUTTING_GUIDE$6,
ADD_TEXT: ADD_TEXT$6,
HELP_TEXT: HELP_TEXT$6,
BOLD: BOLD$6,
ITALIC: ITALIC$6,
LINE_THROUGH: LINE_THROUGH$6,
UNDERLINE: UNDERLINE$6,
LEFT_ALIGN: LEFT_ALIGN$6,
CENTER_ALIGN: CENTER_ALIGN$6,
RIGHT_ALIGN: RIGHT_ALIGN$6,
FONT_FAMILY: FONT_FAMILY$6,
TEXT_SIZE: TEXT_SIZE$6,
TEXT_LINE_HEIGHT: TEXT_LINE_HEIGHT$6,
TEXT_COLOR: TEXT_COLOR$6,
TEXT_OPACITY: TEXT_OPACITY$6,
UNDO: UNDO$6,
REDO: REDO$6,
SHOW_BRANDING: SHOW_BRANDING$6,
UNLOCK_PREMIUM_FEATURE_PARAGRAPH: UNLOCK_PREMIUM_FEATURE_PARAGRAPH$6,
UPGRADE_PLAN: UPGRADE_PLAN$6,
PREMIUM_SETTINGS: PREMIUM_SETTINGS$6,
ZOOM_IN_OUT: ZOOM_IN_OUT$6,
TEMPLATE: TEMPLATE$6,
IMAGE: IMAGE$6,
SHAPE: SHAPE$6,
QR_CODE: QR_CODE$6,
BRANDING: BRANDING$6,
QR: QR$6,
WHITE_LABEL: WHITE_LABEL$6,
OPACITY: OPACITY$6,
ADD_SHAPES: ADD_SHAPES$6,
SETTINGS: SETTINGS$6,
PLEASE_ADD_IMAGES: PLEASE_ADD_IMAGES$6,
SAVE: SAVE$6
};
var BRING_FORWARD$5 = "Перенести вперёд";
var SEND_BACKWARD$5 = "Отправить назад";
var LOCK$5 = "Заблокировать";
var UNLOCK$5 = "Разблокировать";
var COPY$5 = "Копировать";
var DELETE$5 = "Удалить";
var BUTTON$5 = "Кнопка";
var COLLAPSABLE$5 = "Сворачиваемый";
var DROPDOWN$5 = "Выпадающий список";
var TITLE$5 = "Заголовок";
var ADD_IMAGE$5 = "Добавить изображение";
var DEFAULT$5 = "По умолчанию";
var CUSTOM_IMAGES$5 = "Пользовательские изображения";
var IMAGE_OPACITY$5 = "Прозрачность изображения";
var LOGO$5 = "Логотип";
var SHOW_QR_CODE$5 = "Показать QR-код";
var SHOW_LOGO_IN_QR$5 = "Показать логотип в QR-коде";
var ADD_LOGO$5 = "Добавить логотип";
var SHAPE_FILL$5 = "Заливка формы";
var SHAPE_OPACITY$5 = "Прозрачность формы";
var COLLAPSE$5 = "Свернуть";
var TEXT$5 = "Текст";
var STROKE_WIDTH_AND_COLOR$5 = "Толщина и цвет обводки";
var NEW_TEMPLATE$5 = "Новый шаблон";
var CUSTOM_TEMPLATES$5 = "Мои дизайны";
var PAGE_SIZE$5 = "Размер страницы";
var BACKGROUND_COLOR$5 = "Цвет фона";
var BACKGROUND_IMAGE$5 = "Фоновое изображение";
var BACKGROUND_IMAGE_OPACITY$5 = "Прозрачность фонового изображения";
var CUTTING_GUIDE$5 = "Руководство по обрезке";
var ADD_TEXT$5 = "Добавить текст";
var HELP_TEXT$5 = "Справочный текст";
var BOLD$5 = "Жирный";
var ITALIC$5 = "Курсив";
var LINE_THROUGH$5 = "Зачёркнутый";
var UNDERLINE$5 = "Подчёркнутый";
var LEFT_ALIGN$5 = "Выровнять по левому краю";
var CENTER_ALIGN$5 = "Выровнять по центру";
var RIGHT_ALIGN$5 = "Выровнять по правому краю";
var FONT_FAMILY$5 = "Семейство шрифтов";
var TEXT_SIZE$5 = "Размер текста";
var TEXT_LINE_HEIGHT$5 = "Межстрочный и межабзацный интервал";
var TEXT_COLOR$5 = "Цвет текста";
var TEXT_OPACITY$5 = "Прозрачность текста";
var UNDO$5 = "Отменить";
var REDO$5 = "Повторить";
var SHOW_BRANDING$5 = "Показать брендинг Fixalert";
var UNLOCK_PREMIUM_FEATURE_PARAGRAPH$5 = "Разблокируйте премиум-функции, чтобы настроить наклейку QR-кода, скрыв логотип компании и водяной знак. Обновите свой план для полного контроля над дизайном.";
var UPGRADE_PLAN$5 = "Обновить план";
var PREMIUM_SETTINGS$5 = "Премиум настройки";
var ZOOM_IN_OUT$5 = "Масштабировать";
var TEMPLATE$5 = "Шаблон";
var IMAGE$5 = "Изображение";
var SHAPE$5 = "Фигура";
var QR_CODE$5 = "QR-код";
var BRANDING$5 = "Брендинг";
var QR$5 = "QR";
var WHITE_LABEL$5 = "Белая метка";
var OPACITY$5 = "Прозрачность";
var ADD_SHAPES$5 = "Добавить фигуры";
var SETTINGS$5 = "Настройки";
var PLEASE_ADD_IMAGES$5 = "Пожалуйста, добавьте изображения";
var SAVE$5 = "Сохранить";
var ruTranslations = {
BRING_FORWARD: BRING_FORWARD$5,
SEND_BACKWARD: SEND_BACKWARD$5,
LOCK: LOCK$5,
UNLOCK: UNLOCK$5,
COPY: COPY$5,
DELETE: DELETE$5,
BUTTON: BUTTON$5,
COLLAPSABLE: COLLAPSABLE$5,
DROPDOWN: DROPDOWN$5,
TITLE: TITLE$5,
ADD_IMAGE: ADD_IMAGE$5,
DEFAULT: DEFAULT$5,
CUSTOM_IMAGES: CUSTOM_IMAGES$5,
IMAGE_OPACITY: IMAGE_OPACITY$5,
LOGO: LOGO$5,
SHOW_QR_CODE: SHOW_QR_CODE$5,
SHOW_LOGO_IN_QR: SHOW_LOGO_IN_QR$5,
ADD_LOGO: ADD_LOGO$5,
SHAPE_FILL: SHAPE_FILL$5,
SHAPE_OPACITY: SHAPE_OPACITY$5,
COLLAPSE: COLLAPSE$5,
TEXT: TEXT$5,
STROKE_WIDTH_AND_COLOR: STROKE_WIDTH_AND_COLOR$5,
NEW_TEMPLATE: NEW_TEMPLATE$5,
CUSTOM_TEMPLATES: CUSTOM_TEMPLATES$5,
PAGE_SIZE: PAGE_SIZE$5,
BACKGROUND_COLOR: BACKGROUND_COLOR$5,
BACKGROUND_IMAGE: BACKGROUND_IMAGE$5,
BACKGROUND_IMAGE_OPACITY: BACKGROUND_IMAGE_OPACITY$5,
CUTTING_GUIDE: CUTTING_GUIDE$5,
ADD_TEXT: ADD_TEXT$5,
HELP_TEXT: HELP_TEXT$5,
BOLD: BOLD$5,
ITALIC: ITALIC$5,
LINE_THROUGH: LINE_THROUGH$5,
UNDERLINE: UNDERLINE$5,
LEFT_ALIGN: LEFT_ALIGN$5,
CENTER_ALIGN: CENTER_ALIGN$5,
RIGHT_ALIGN: RIGHT_ALIGN$5,
FONT_FAMILY: FONT_FAMILY$5,
TEXT_SIZE: TEXT_SIZE$5,
TEXT_LINE_HEIGHT: TEXT_LINE_HEIGHT$5,
TEXT_COLOR: TEXT_COLOR$5,
TEXT_OPACITY: TEXT_OPACITY$5,
UNDO: UNDO$5,
REDO: REDO$5,
SHOW_BRANDING: SHOW_BRANDING$5,
UNLOCK_PREMIUM_FEATURE_PARAGRAPH: UNLOCK_PREMIUM_FEATURE_PARAGRAPH$5,
UPGRADE_PLAN: UPGRADE_PLAN$5,
PREMIUM_SETTINGS: PREMIUM_SETTINGS$5,
ZOOM_IN_OUT: ZOOM_IN_OUT$5,
TEMPLATE: TEMPLATE$5,
IMAGE: IMAGE$5,
SHAPE: SHAPE$5,
QR_CODE: QR_CODE$5,
BRANDING: BRANDING$5,
QR: QR$5,
WHITE_LABEL: WHITE_LABEL$5,
OPACITY: OPACITY$5,
ADD_SHAPES: ADD_SHAPES$5,
SETTINGS: SETTINGS$5,
PLEASE_ADD_IMAGES: PLEASE_ADD_IMAGES$5,
SAVE: SAVE$5
};
var BRING_FORWARD$4 = "Przenieś do przodu";
var SEND_BACKWARD$4 = "Przenieś do tyłu";
var LOCK$4 = "Zablokuj";
var UNLOCK$4 = "Odblokuj";
var COPY$4 = "Kopiuj";
var DELETE$4 = "Usuń";
var BUTTON$4 = "Przycisk";
var COLLAPSABLE$4 = "Zwijany";
var DROPDOWN$4 = "Lista rozwijana";
var TITLE$4 = "Tytuł";
var ADD_IMAGE$4 = "Dodaj obraz";
var DEFAULT$4 = "Domyślny";
var CUSTOM_IMAGES$4 = "Niestandardowe obrazy";
var IMAGE_OPACITY$4 = "Przezroczystość obrazu";
var LOGO$4 = "Logo";
var SHOW_QR_CODE$4 = "Pokaż kod QR";
var SHOW_LOGO_IN_QR$4 = "Pokaż logo w kodzie QR";
var ADD_LOGO$4 = "Dodaj logo";
var SHAPE_FILL$4 = "Wypełnienie kształtu";
var SHAPE_OPACITY$4 = "Przezroczystość kształtu";
var COLLAPSE$4 = "Zwiń";
var TEXT$4 = "Tekst";
var STROKE_WIDTH_AND_COLOR$4 = "Szerokość i kolor obramowania";
var NEW_TEMPLATE$4 = "Nowy szablon";
var CUSTOM_TEMPLATES$4 = "Moje projekty";
var PAGE_SIZE$4 = "Rozmiar strony";
var BACKGROUND_COLOR$4 = "Kolor tła";
var BACKGROUND_IMAGE$4 = "Obraz tła";
var BACKGROUND_IMAGE_OPACITY$4 = "Przezroczystość obrazu tła";
var CUTTING_GUIDE$4 = "Przewodnik cięcia";
var ADD_TEXT$4 = "Dodaj tekst";
var HELP_TEXT$4 = "Tekst pomocy";
var BOLD$4 = "Pogrubiony";
var ITALIC$4 = "Kursywa";
var LINE_THROUGH$4 = "Przekreślenie";
var UNDERLINE$4 = "Podkreślenie";
var LEFT_ALIGN$4 = "Wyrównaj do lewej";
var CENTER_ALIGN$4 = "Wyrównaj do środka";
var RIGHT_ALIGN$4 = "Wyrównaj do prawej";
var FONT_FAMILY$4 = "Czcionka";
var TEXT_SIZE$4 = "Rozmiar tekstu";
var TEXT_LINE_HEIGHT$4 = "Odstępy między wierszami i akapitami";
var TEXT_COLOR$4 = "Kolor tekstu";
var TEXT_OPACITY$4 = "Przezroczystość tekstu";
var UNDO$4 = "Cofnij";
var REDO$4 = "Ponów";
var SHOW_BRANDING$4 = "Pokaż branding Fixalert";
var UNLOCK_PREMIUM_FEATURE_PARAGRAPH$4 = "Odblokuj funkcje premium, aby dostosować naklejkę kodu QR, ukrywając logo firmy i znak wodny. Uaktualnij plan, aby uzyskać pełną kontrolę nad projektem.";
var UPGRADE_PLAN$4 = "Uaktualnij plan";
var PREMIUM_SETTINGS$4 = "Ustawienia premium";
var ZOOM_IN_OUT$4 = "Powiększ/Pomniejsz";
var TEMPLATE$4 = "Szablon";
var IMAGE$4 = "Obraz";
var SHAPE$4 = "Kształt";
var QR_CODE$4 = "Kod QR";
var BRANDING$4 = "Branding";
var QR$4 = "QR";
var WHITE_LABEL$4 = "Biała etykieta";
var OPACITY$4 = "Przezroczystość";
var ADD_SHAPES$4 = "Dodaj kształty";
var SETTINGS$4 = "Ustawienia";
var PLEASE_ADD_IMAGES$4 = "Dodaj obrazy";
var SAVE$4 = "Zapisz";
var plTranslations = {
BRING_FORWARD: BRING_FORWARD$4,
SEND_BACKWARD: SEND_BACKWARD$4,
LOCK: LOCK$4,
UNLOCK: UNLOCK$4,
COPY: COPY$4,
DELETE: DELETE$4,
BUTTON: BUTTON$4,
COLLAPSABLE: COLLAPSABLE$4,
DROPDOWN: DROPDOWN$4,
TITLE: TITLE$4,
ADD_IMAGE: ADD_IMAGE$4,
DEFAULT: DEFAULT$4,
CUSTOM_IMAGES: CUSTOM_IMAGES$4,
IMAGE_OPACITY: IMAGE_OPACITY$4,
LOGO: LOGO$4,
SHOW_QR_CODE: SHOW_QR_CODE$4,
SHOW_LOGO_IN_QR: SHOW_LOGO_IN_QR$4,
ADD_LOGO: ADD_LOGO$4,
SHAPE_FILL: SHAPE_FILL$4,
SHAPE_OPACITY: SHAPE_OPACITY$4,
COLLAPSE: COLLAPSE$4,
TEXT: TEXT$4,
STROKE_WIDTH_AND_COLOR: STROKE_WIDTH_AND_COLOR$4,
NEW_TEMPLATE: NEW_TEMPLATE$4,
CUSTOM_TEMPLATES: CUSTOM_TEMPLATES$4,
PAGE_SIZE: PAGE_SIZE$4,
BACKGROUND_COLOR: BACKGROUND_COLOR$4,
BACKGROUND_IMAGE: BACKGROUND_IMAGE$4,
BACKGROUND_IMAGE_OPACITY: BACKGROUND_IMAGE_OPACITY$4,
CUTTING_GUIDE: CUTTING_GUIDE$4,
ADD_TEXT: ADD_TEXT$4,
HELP_TEXT: HELP_TEXT$4,
BOLD: BOLD$4,
ITALIC: ITALIC$4,
LINE_THROUGH: LINE_THROUGH$4,
UNDERLINE: UNDERLINE$4,
LEFT_ALIGN: LEFT_ALIGN$4,
CENTER_ALIGN: CENTER_ALIGN$4,
RIGHT_ALIGN: RIGHT_ALIGN$4,
FONT_FAMILY: FONT_FAMILY$4,
TEXT_SIZE: TEXT_SIZE$4,
TEXT_LINE_HEIGHT: TEXT_LINE_HEIGHT$4,
TEXT_COLOR: TEXT_COLOR$4,
TEXT_OPACITY: TEXT_OPACITY$4,
UNDO: UNDO$4,
REDO: REDO$4,
SHOW_BRANDING: SHOW_BRANDING$4,
UNLOCK_PREMIUM_FEATURE_PARAGRAPH: UNLOCK_PREMIUM_FEATURE_PARAGRAPH$4,
UPGRADE_PLAN: UPGRADE_PLAN$4,
PREMIUM_SETTINGS: PREMIUM_SETTINGS$4,
ZOOM_IN_OUT: ZOOM_IN_OUT$4,
TEMPLATE: TEMPLATE$4,
IMAGE: IMAGE$4,
SHAPE: SHAPE$4,
QR_CODE: QR_CODE$4,
BRANDING: BRANDING$4,
QR: QR$4,
WHITE_LABEL: WHITE_LABEL$4,
OPACITY: OPACITY$4,
ADD_SHAPES: ADD_SHAPES$4,
SETTINGS: SETTINGS$4,
PLEASE_ADD_IMAGES: PLEASE_ADD_IMAGES$4,
SAVE: SAVE$4
};
var BRING_FORWARD$3 = "Nach vorne bringen";
var SEND_BACKWARD$3 = "Nach hinten senden";
var LOCK$3 = "Sperren";
var UNLOCK$3 = "Entsperren";
var COPY$3 = "Kopieren";
var DELETE$3 = "Löschen";
var BUTTON$3 = "Button";
var COLLAPSABLE$3 = "Einklappbar";
var DROPDOWN$3 = "Dropdown";
var TITLE$3 = "Titel";
var ADD_IMAGE$3 = "Bild hinzufügen";
var DEFAULT$3 = "Standard";
var CUSTOM_IMAGES$3 = "Benutzerdefinierte Bilder";
var IMAGE_OPACITY$3 = "Bildtransparenz";
var LOGO$3 = "Logo";
var SHOW_QR_CODE$3 = "QR-Code anzeigen";
var SHOW_LOGO_IN_QR$3 = "Logo im QR-Code anzeigen";
var ADD_LOGO$3 = "Logo hinzufügen";
var SHAPE_FILL$3 = "Formfüllung";
var SHAPE_OPACITY$3 = "Formtransparenz";
var COLLAPSE$3 = "Einklappen";
var TEXT$3 = "Text";
var STROKE_WIDTH_AND_COLOR$3 = "Strichbreite und -farbe";
var NEW_TEMPLATE$3 = "Neue Vorlage";
var CUSTOM_TEMPLATES$3 = "Meine Designs";
var PAGE_SIZE$3 = "Seitengröße";
var BACKGROUND_COLOR$3 = "Hintergrundfarbe";
var BACKGROUND_IMAGE$3 = "Hintergrundbild";
var BACKGROUND_IMAGE_OPACITY$3 = "Transparenz des Hintergrundbildes";
var CUTTING_GUIDE$3 = "Schnittführung";
var ADD_TEXT$3 = "Text hinzufügen";
var HELP_TEXT$3 = "Hilfetext";
var BOLD$3 = "Fett";
var ITALIC$3 = "Kursiv";
var LINE_THROUGH$3 = "Durchgestrichen";
var UNDERLINE$3 = "Unterstrichen";
var LEFT_ALIGN$3 = "Linksbündig";
var CENTER_ALIGN$3 = "Zentriert";
var RIGHT_ALIGN$3 = "Rechtsbündig";
var FONT_FAMILY$3 = "Schriftart";
var TEXT_SIZE$3 = "Textgröße";
var TEXT_LINE_HEIGHT$3 = "Zeilen- & Absatzabstand";
var TEXT_COLOR$3 = "Textfarbe";
var TEXT_OPACITY$3 = "Texttransparenz";
var UNDO$3 = "Rückgängig";
var REDO$3 = "Wiederholen";
var SHOW_BRANDING$3 = "Fixalert-Branding anzeigen";
var UNLOCK_PREMIUM_FEATURE_PARAGRAPH$3 = "Schalte Premiumfunktionen frei, um deinen QR-Code-Sticker anzupassen, indem du das Firmenlogo und das Wasserzeichen ausblendest. Aktualisiere deinen Plan für volle Designkontrolle.";
var UPGRADE_PLAN$3 = "Plan upgraden";
var PREMIUM_SETTINGS$3 = "Premium-Einstellungen";
var ZOOM_IN_OUT$3 = "Vergrößern/Verkleinern";
var TEMPLATE$3 = "Vorlage";
var IMAGE$3 = "Bild";
var SHAPE$3 = "Form";
var QR_CODE$3 = "QR-Code";
var BRANDING$3 = "Branding";
var QR$3 = "QR";
var WHITE_LABEL$3 = "White-Label";
var OPACITY$3 = "Transparenz";
var ADD_SHAPES$3 = "Formen hinzufügen";
var SETTINGS$3 = "Einstellungen";
var PLEASE_ADD_IMAGES$3 = "Bitte Bilder hinzufügen";
var SAVE$3 = "Speichern";
var deTranslations = {
BRING_FORWARD: BRING_FORWARD$3,
SEND_BACKWARD: SEND_BACKWARD$3,
LOCK: LOCK$3,
UNLOCK: UNLOCK$3,
COPY: COPY$3,
DELETE: DELETE$3,
BUTTON: BUTTON$3,
COLLAPSABLE: COLLAPSABLE$3,
DROPDOWN: DROPDOWN$3,
TITLE: TITLE$3,
ADD_IMAGE: ADD_IMAGE$3,
DEFAULT: DEFAULT$3,
CUSTOM_IMAGES: CUSTOM_IMAGES$3,
IMAGE_OPACITY: IMAGE_OPACITY$3,
LOGO: LOGO$3,
SHOW_QR_CODE: SHOW_QR_CODE$3,
SHOW_LOGO_IN_QR: SHOW_LOGO_IN_QR$3,
ADD_LOGO: ADD_LOGO$3,
SHAPE_FILL: SHAPE_FILL$3,
SHAPE_OPACITY: SHAPE_OPACITY$3,
COLLAPSE: COLLAPSE$3,
TEXT: TEXT$3,
STROKE_WIDTH_AND_COLOR: STROKE_WIDTH_AND_COLOR$3,
NEW_TEMPLATE: NEW_TEMPLATE$3,
CUSTOM_TEMPLATES: CUSTOM_TEMPLATES$3,
PAGE_SIZE: PAGE_SIZE$3,
BACKGROUND_COLOR: BACKGROUND_COLOR$3,
BACKGROUND_IMAGE: BACKGROUND_IMAGE$3,
BACKGROUND_IMAGE_OPACITY: BACKGROUND_IMAGE_OPACITY$3,
CUTTING_GUIDE: CUTTING_GUIDE$3,
ADD_TEXT: ADD_TEXT$3,
HELP_TEXT: HELP_TEXT$3,
BOLD: BOLD$3,
ITALIC: ITALIC$3,
LINE_THROUGH: LINE_THROUGH$3,
UNDERLINE: UNDERLINE$3,
LEFT_ALIGN: LEFT_ALIGN$3,
CENTER_ALIGN: CENTER_ALIGN$3,
RIGHT_ALIGN: RIGHT_ALIGN$3,
FONT_FAMILY: FONT_FAMILY$3,
TEXT_SIZE: TEXT_SIZE$3,
TEXT_LINE_HEIGHT: TEXT_LINE_HEIGHT$3,
TEXT_COLOR: TEXT_COLOR$3,
TEXT_OPACITY: TEXT_OPACITY$3,
UNDO: UNDO$3,
REDO: REDO$3,
SHOW_BRANDING: SHOW_BRANDING$3,
UNLOCK_PREMIUM_FEATURE_PARAGRAPH: UNLOCK_PREMIUM_FEATURE_PARAGRAPH$3,
UPGRADE_PLAN: UPGRADE_PLAN$3,
PREMIUM_SETTINGS: PREMIUM_SETTINGS$3,
ZOOM_IN_OUT: ZOOM_IN_OUT$3,
TEMPLATE: TEMPLATE$3,
IMAGE: IMAGE$3,
SHAPE: SHAPE$3,
QR_CODE: QR_CODE$3,
BRANDING: BRANDING$3,
QR: QR$3,
WHITE_LABEL: WHITE_LABEL$3,
OPACITY: OPACITY$3,
ADD_SHAPES: ADD_SHAPES$3,
SETTINGS: SETTINGS$3,
PLEASE_ADD_IMAGES: PLEASE_ADD_IMAGES$3,
SAVE: SAVE$3
};
var BRING_FORWARD$2 = "Traer al frente";
var SEND_BACKWARD$2 = "Enviar hacia atrás";
var LOCK$2 = "Bloquear";
var UNLOCK$2 = "Desbloquear";
var COPY$2 = "Copiar";
var DELETE$2 = "Eliminar";
var BUTTON$2 = "Botón";
var COLLAPSABLE$2 = "Colapsable";
var DROPDOWN$2 = "Desplegable";
var TITLE$2 = "Título";
var ADD_IMAGE$2 = "Agregar imagen";
var DEFAULT$2 = "Predeterminado";
var CUSTOM_IMAGES$2 = "Imágenes personalizadas";
var IMAGE_OPACITY$2 = "Opacidad de imagen";
var LOGO$2 = "Logo";
var SHOW_QR_CODE$2 = "Mostrar código QR";
var SHOW_LOGO_IN_QR$2 = "Mostrar logo en el código QR";
var ADD_LOGO$2 = "Agregar logo";
var SHAPE_FILL$2 = "Relleno de forma";
var SHAPE_OPACITY$2 = "Opacidad de forma";
var COLLAPSE$2 = "Colapsar";
var TEXT$2 = "Texto";
var STROKE_WIDTH_AND_COLOR$2 = "Grosor y color del trazo";
var NEW_TEMPLATE$2 = "Nueva plantilla";
var CUSTOM_TEMPLATES$2 = "Mis diseños";
var PAGE_SIZE$2 = "Tamaño de página";
var BACKGROUND_COLOR$2 = "Color de fondo";
var BACKGROUND_IMAGE$2 = "Imagen de fondo";
var BACKGROUND_IMAGE_OPACITY$2 = "Opacidad de imagen de fondo";
var CUTTING_GUIDE$2 = "Guía de corte";
var ADD_TEXT$2 = "Agregar texto";
var HELP_TEXT$2 = "Texto de ayuda";
var BOLD$2 = "Negrita";
var ITALIC$2 = "Cursiva";
var LINE_THROUGH$2 = "Tachado";
var UNDERLINE$2 = "Subrayado";
var LEFT_ALIGN$2 = "Alinear a la izquierda";
var CENTER_ALIGN$2 = "Centrar";
var RIGHT_ALIGN$2 = "Alinear a la derecha";
var FONT_FAMILY$2 = "Tipo de letra";
var TEXT_SIZE$2 = "Tamaño del texto";
var TEXT_LINE_HEIGHT$2 = "Espaciado de línea y párrafo";
var TEXT_COLOR$2 = "Color del texto";
var TEXT_OPACITY$2 = "Opacidad del texto";
var UNDO$2 = "Deshacer";
var REDO$2 = "Rehacer";
var SHOW_BRANDING$2 = "Mostrar marca de Fixalert";
var UNLOCK_PREMIUM_FEATURE_PARAGRAPH$2 = "Desbloquea funciones premium para personalizar tu etiqueta de código QR ocultando el logotipo y la marca de agua. Mejora tu plan para un control total del diseño.";
var UPGRADE_PLAN$2 = "Mejorar plan";
var PREMIUM_SETTINGS$2 = "Ajustes premium";
var ZOOM_IN_OUT$2 = "Zoom";
var TEMPLATE$2 = "Plantilla";
var IMAGE$2 = "Imagen";
var SHAPE$2 = "Forma";
var QR_CODE$2 = "Código QR";
var BRANDING$2 = "Marca";
var QR$2 = "QR";
var WHITE_LABEL$2 = "Etiqueta blanca";
var OPACITY$2 = "Opacidad";
var ADD_SHAPES$2 = "Agregar formas";
var SETTINGS$2 = "Ajustes";
var PLEASE_ADD_IMAGES$2 = "Por favor agrega imágenes";
var SAVE$2 = "Guardar";
var esTranslations = {
BRING_FORWARD: BRING_FORWARD$2,
SEND_BACKWARD: SEND_BACKWARD$2,
LOCK: LOCK$2,
UNLOCK: UNLOCK$2,
COPY: COPY$2,
DELETE: DELETE$2,
BUTTON: BUTTON$2,
COLLAPSABLE: COLLAPSABLE$2,
DROPDOWN: DROPDOWN$2,
TITLE: TITLE$2,
ADD_IMAGE: ADD_IMAGE$2,
DEFAULT: DEFAULT$2,
CUSTOM_IMAGES: CUSTOM_IMAGES$2,
IMAGE_OPACITY: IMAGE_OPACITY$2,
LOGO: LOGO$2,
SHOW_QR_CODE: SHOW_QR_CODE$2,
SHOW_LOGO_IN_QR: SHOW_LOGO_IN_QR$2,
ADD_LOGO: ADD_LOGO$2,
SHAPE_FILL: SHAPE_FILL$2,
SHAPE_OPACITY: SHAPE_OPACITY$2,
COLLAPSE: COLLAPSE$2,
TEXT: TEXT$2,
STROKE_WIDTH_AND_COLOR: STROKE_WIDTH_AND_COLOR$2,
NEW_TEMPLATE: NEW_TEMPLATE$2,
CUSTOM_TEMPLATES: CUSTOM_TEMPLATES$2,
PAGE_SIZE: PAGE_SIZE$2,
BACKGROUND_COLOR: BACKGROUND_COLOR$2,
BACKGROUND_IMAGE: BACKGROUND_IMAGE$2,
BACKGROUND_IMAGE_OPACITY: BACKGROUND_IMAGE_OPACITY$2,
CUTTING_GUIDE: CUTTING_GUIDE$2,
ADD_TEXT: ADD_TEXT$2,
HELP_TEXT: HELP_TEXT$2,
BOLD: BOLD$2,
ITALIC: ITALIC$2,
LINE_THROUGH: LINE_THROUGH$2,
UNDERLINE: UNDERLINE$2,
LEFT_ALIGN: LEFT_ALIGN$2,
CENTER_ALIGN: CENTER_ALIGN$2,
RIGHT_ALIGN: RIGHT_ALIGN$2,
FONT_FAMILY: FONT_FAMILY$2,
TEXT_SIZE: TEXT_SIZE$2,
TEXT_LINE_HEIGHT: TEXT_LINE_HEIGHT$2,
TEXT_COLOR: TEXT_COLOR$2,
TEXT_OPACITY: TEXT_OPACITY$2,
UNDO: UNDO$2,
REDO: REDO$2,
SHOW_BRANDING: SHOW_BRANDING$2,
UNLOCK_PREMIUM_FEATURE_PARAGRAPH: UNLOCK_PREMIUM_FEATURE_PARAGRAPH$2,
UPGRADE_PLAN: UPGRADE_PLAN$2,
PREMIUM_SETTINGS: PREMIUM_SETTINGS$2,
ZOOM_IN_OUT: ZOOM_IN_OUT$2,
TEMPLATE: TEMPLATE$2,
IMAGE: IMAGE$2,
SHAPE: SHAPE$2,
QR_CODE: QR_CODE$2,
BRANDING: BRANDING$2,
QR: QR$2,
WHITE_LABEL: WHITE_LABEL$2,
OPACITY: OPACITY$2,
ADD_SHAPES: ADD_SHAPES$2,
SETTINGS: SETTINGS$2,
PLEASE_ADD_IMAGES: PLEASE_ADD_IMAGES$2,
SAVE: SAVE$2
};
var BRING_FORWARD$1 = "Mettre au premier plan";
var SEND_BACKWARD$1 = "Envoyer en arrière";
var LOCK$1 = "Verrouiller";
var UNLOCK$1 = "Déverrouiller";
var COPY$1 = "Copier";
var DELETE$1 = "Supprimer";
var BUTTON$1 = "Bouton";
var COLLAPSABLE$1 = "Repliable";
var DROPDOWN$1 = "Menu déroulant";
var TITLE$1 = "Titre";
var ADD_IMAGE$1 = "Ajouter une image";
var DEFAULT$1 = "Par défaut";
var CUSTOM_IMAGES$1 = "Images personnalisées";
var IMAGE_OPACITY$1 = "Opacité de l'image";
var LOGO$1 = "Logo";
var SHOW_QR_CODE$1 = "Afficher le code QR";
var SHOW_LOGO_IN_QR$1 = "Afficher le logo dans le code QR";
var ADD_LOGO$1 = "Ajouter un logo";
var SHAPE_FILL$1 = "Remplissage de forme";
var SHAPE_OPACITY$1 = "Opacité de la forme";
var COLLAPSE$1 = "Réduire";
var TEXT$1 = "Texte";
var STROKE_WIDTH_AND_COLOR$1 = "Largeur et couleur du trait";
var NEW_TEMPLATE$1 = "Nouveau modèle";
var CUSTOM_TEMPLATES$1 = "Mes créations";
var PAGE_SIZE$1 = "Taille de page";
var BACKGROUND_COLOR$1 = "Couleur d’arrière-plan";
var BACKGROUND_IMAGE$1 = "Image d’arrière-plan";
var BACKGROUND_IMAGE_OPACITY$1 = "Opacité de l’image d’arrière-plan";
var CUTTING_GUIDE$1 = "Guide de découpe";
var ADD_TEXT$1 = "Ajouter du texte";
var HELP_TEXT$1 = "Texte d’aide";
var BOLD$1 = "Gras";
var ITALIC$1 = "Italique";
var LINE_THROUGH$1 = "Barré";
var UNDERLINE$1 = "Souligné";
var LEFT_ALIGN$1 = "Aligner à gauche";
var CENTER_ALIGN$1 = "Centrer";
var RIGHT_ALIGN$1 = "Aligner à droite";
var FONT_FAMILY$1 = "Police";
var TEXT_SIZE$1 = "Taille du texte";
var TEXT_LINE_HEIGHT$1 = "Espacement des lignes et des paragraphes";
var TEXT_COLOR$1 = "Couleur du texte";
var TEXT_OPACITY$1 = "Opacité du texte";
var UNDO$1 = "Annuler";
var REDO$1 = "Rétablir";
var SHOW_BRANDING$1 = "Afficher la marque Fixalert";
var UNLOCK_PREMIUM_FEATURE_PARAGRAPH$1 = "Déverrouillez les fonctionnalités premium pour personnaliser votre étiquette QR en masquant le logo et le filigrane. Passez à une formule supérieure pour un contrôle total du design.";
var UPGRADE_PLAN$1 = "Mettre à niveau le plan";
var PREMIUM_SETTINGS$1 = "Paramètres premium";
var ZOOM_IN_OUT$1 = "Zoom";
var TEMPLATE$1 = "Modèle";
var IMAGE$1 = "Image";
var SHAPE$1 = "Forme";
var QR_CODE$1 = "Code QR";
var BRANDING$1 = "Marque";
var QR$1 = "QR";
var WHITE_LABEL$1 = "Étiquette blanche";
var OPACITY$1 = "Opacité";
var ADD_SHAPES$1 = "Ajouter des formes";
var SETTINGS$1 = "Paramètres";
var PLEASE_ADD_IMAGES$1 = "Veuillez ajouter des images";
var SAVE$1 = "Enregistrer";
var frTranslations = {
BRING_FORWARD: BRING_FORWARD$1,
SEND_BACKWARD: SEND_BACKWARD$1,
LOCK: LOCK$1,
UNLOCK: UNLOCK$1,
COPY: COPY$1,
DELETE: DELETE$1,
BUTTON: BUTTON$1,
COLLAPSABLE: COLLAPSABLE$1,
DROPDOWN: DROPDOWN$1,
TITLE: TITLE$1,
ADD_IMAGE: ADD_IMAGE$1,
DEFAULT: DEFAULT$1,
CUSTOM_IMAGES: CUSTOM_IMAGES$1,
IMAGE_OPACITY: IMAGE_OPACITY$1,
LOGO: LOGO$1,
SHOW_QR_CODE: SHOW_QR_CODE$1,
SHOW_LOGO_IN_QR: SHOW_LOGO_IN_QR$1,
ADD_LOGO: ADD_LOGO$1,
SHAPE_FILL: SHAPE_FILL$1,
SHAPE_OPACITY: SHAPE_OPACITY$1,
COLLAPSE: COLLAPSE$1,
TEXT: TEXT$1,
STROKE_WIDTH_AND_COLOR: STROKE_WIDTH_AND_COLOR$1,
NEW_TEMPLATE: NEW_TEMPLATE$1,
CUSTOM_TEMPLATES: CUSTOM_TEMPLATES$1,
PAGE_SIZE: PAGE_SIZE$1,
BACKGROUND_COLOR: BACKGROUND_COLOR$1,
BACKGROUND_IMAGE: BACKGROUND_IMAGE$1,
BACKGROUND_IMAGE_OPACITY: BACKGROUND_IMAGE_OPACITY$1,
CUTTING_GUIDE: CUTTING_GUIDE$1,
ADD_TEXT: ADD_TEXT$1,
HELP_TEXT: HELP_TEXT$1,
BOLD: BOLD$1,
ITALIC: ITALIC$1,
LINE_THROUGH: LINE_THROUGH$1,
UNDERLINE: UNDERLINE$1,
LEFT_ALIGN: LEFT_ALIGN$1,
CENTER_ALIGN: CENTER_ALIGN$1,
RIGHT_ALIGN: RIGHT_ALIGN$1,
FONT_FAMILY: FONT_FAMILY$1,
TEXT_SIZE: TEXT_SIZE$1,
TEXT_LINE_HEIGHT: TEXT_LINE_HEIGHT$1,
TEXT_COLOR: TEXT_COLOR$1,
TEXT_OPACITY: TEXT_OPACITY$1,
UNDO: UNDO$1,
REDO: REDO$1,
SHOW_BRANDING: SHOW_BRANDING$1,
UNLOCK_PREMIUM_FEATURE_PARAGRAPH: UNLOCK_PREMIUM_FEATURE_PARAGRAPH$1,
UPGRADE_PLAN: UPGRADE_PLAN$1,
PREMIUM_SETTINGS: PREMIUM_SETTINGS$1,
ZOOM_IN_OUT: ZOOM_IN_OUT$1,
TEMPLATE: TEMPLATE$1,
IMAGE: IMAGE$1,
SHAPE: SHAPE$1,
QR_CODE: QR_CODE$1,
BRANDING: BRANDING$1,
QR: QR$1,
WHITE_LABEL: WHITE_LABEL$1,
OPACITY: OPACITY$1,
ADD_SHAPES: ADD_SHAPES$1,
SETTINGS: SETTINGS$1,
PLEASE_ADD_IMAGES: PLEASE_ADD_IMAGES$1,
SAVE: SAVE$1
};
var BRING_FORWARD = "Porta in primo piano";
var SEND_BACKWARD = "Invia indietro";
var LOCK = "Blocca";
var UNLOCK = "Sblocca";
var COPY = "Copia";
var DELETE = "Elimina";
var BUTTON = "Pulsante";
var COLLAPSABLE = "Collassabile";
var DROPDOWN = "Menu a discesa";
var TITLE = "Titolo";
var ADD_IMAGE = "Aggiungi immagine";
var DEFAULT = "Predefinito";
var CUSTOM_IMAGES = "Immagini personalizzate";
var IMAGE_OPACITY = "Opacità dell'immagine";
var LOGO = "Logo";
var SHOW_QR_CODE = "Mostra codice QR";
var SHOW_LOGO_IN_QR = "Mostra il logo nel codice QR";
var ADD_LOGO = "Aggiungi logo";
var SHAPE_FILL = "Riempimento forma";
var SHAPE_OPACITY = "Opacità della forma";
var COLLAPSE = "Comprimi";
var TEXT = "Testo";
var STROKE_WIDTH_AND_COLOR = "Spessore e colore del tratto";
var NEW_TEMPLATE = "Nuovo modello";
var CUSTOM_TEMPLATES = "I miei progetti";
var PAGE_SIZE = "Dimensione della pagina";
var BACKGROUND_COLOR = "Colore di sfondo";
var BACKGROUND_IMAGE = "Immagine di sfondo";
var BACKGROUND_IMAGE_OPACITY = "Opacità dell'immagine di sfondo";
var CUTTING_GUIDE = "Guida al taglio";
var ADD_TEXT = "Aggiungi testo";
var HELP_TEXT = "Testo di aiuto";
var BOLD = "Grassetto";
var ITALIC = "Corsivo";
var LINE_THROUGH = "Barrato";
var UNDERLINE = "Sottolineato";
var LEFT_ALIGN = "Allinea a sinistra";
var CENTER_ALIGN = "Centra";
var RIGHT_ALIGN = "Allinea a destra";
var FONT_FAMILY = "Famiglia di font";
var TEXT_SIZE = "Dimensione del testo";
var TEXT_LINE_HEIGHT = "Spaziatura tra righe e paragrafi";
var TEXT_COLOR = "Colore del testo";
var TEXT_OPACITY = "Opacità del testo";
var UNDO = "Annulla";
var REDO = "Ripeti";
var SHOW_BRANDING = "Mostra marchio Fixalert";
var UNLOCK_PREMIUM_FEATURE_PARAGRAPH = "Sblocca le funzionalità premium per personalizzare l'adesivo del codice QR nascondendo il logo e la filigrana. Passa al piano superiore per il pieno controllo sul design.";
var UPGRADE_PLAN = "Aggiorna piano";
var PREMIUM_SETTINGS = "Impostazioni premium";
var ZOOM_IN_OUT = "Zoom avanti/indietro";
var TEMPLATE = "Modello";
var IMAGE = "Immagine";
var SHAPE = "Forma";
var QR_CODE = "Codice QR";
var BRANDING = "Branding";
var QR = "QR";
var WHITE_LABEL = "White-label";
var OPACITY = "Opacità";
var ADD_SHAPES = "Aggiungi forme";
var SETTINGS = "Impostazioni";
var PLEASE_ADD_IMAGES = "Aggiungi immagini";
var SAVE = "Salva";
var itTranslations = {
BRING_FORWARD: BRING_FORWARD,
SEND_BACKWARD: SEND_BACKWARD,
LOCK: LOCK,
UNLOCK: UNLOCK,
COPY: COPY,
DELETE: DELETE,
BUTTON: BUTTON,
COLLAPSABLE: COLLAPSABLE,
DROPDOWN: DROPDOWN,
TITLE: TITLE,
ADD_IMAGE: ADD_IMAGE,
DEFAULT: DEFAULT,
CUSTOM_IMAGES: CUSTOM_IMAGES,
IMAGE_OPACITY: IMAGE_OPACITY,
LOGO: LOGO,
SHOW_QR_CODE: SHOW_QR_CODE,
SHOW_LOGO_IN_QR: SHOW_LOGO_IN_QR,
ADD_LOGO: ADD_LOGO,
SHAPE_FILL: SHAPE_FILL,
SHAPE_OPACITY: SHAPE_OPACITY,
COLLAPSE: COLLAPSE,
TEXT: TEXT,
STROKE_WIDTH_AND_COLOR: STROKE_WIDTH_AND_COLOR,
NEW_TEMPLATE: NEW_TEMPLATE,
CUSTOM_TEMPLATES: CUSTOM_TEMPLATES,
PAGE_SIZE: PAGE_SIZE,
BACKGROUND_COLOR: BACKGROUND_COLOR,
BACKGROUND_IMAGE: BACKGROUND_IMAGE,
BACKGROUND_IMAGE_OPACITY: BACKGROUND_IMAGE_OPACITY,
CUTTING_GUIDE: CUTTING_GUIDE,
ADD_TEXT: ADD_TEXT,
HELP_TEXT: HELP_TEXT,
BOLD: BOLD,
ITALIC: ITALIC,
LINE_THROUGH: LINE_THROUGH,
UNDERLINE: UNDERLINE,
LEFT_ALIGN: LEFT_ALIGN,
CENTER_ALIGN: CENTER_ALIGN,
RIGHT_ALIGN: RIGHT_ALIGN,
FONT_FAMILY: FONT_FAMILY,
TEXT_SIZE: TEXT_SIZE,
TEXT_LINE_HEIGHT: TEXT_LINE_HEIGHT,
TEXT_COLOR: TEXT_COLOR,
TEXT_OPACITY: TEXT_OPACITY,
UNDO: UNDO,
REDO: REDO,
SHOW_BRANDING: SHOW_BRANDING,
UNLOCK_PREMIUM_FEATURE_PARAGRAPH: UNLOCK_PREMIUM_FEATURE_PARAGRAPH,
UPGRADE_PLAN: UPGRADE_PLAN,
PREMIUM_SETTINGS: PREMIUM_SETTINGS,
ZOOM_IN_OUT: ZOOM_IN_OUT,
TEMPLATE: TEMPLATE,
IMAGE: IMAGE,
SHAPE: SHAPE,
QR_CODE: QR_CODE,
BRANDING: BRANDING,
QR: QR,
WHITE_LABEL: WHITE_LABEL,
OPACITY: OPACITY,
ADD_SHAPES: ADD_SHAPES,
SETTINGS: SETTINGS,
PLEASE_ADD_IMAGES: PLEASE_ADD_IMAGES,
SAVE: SAVE
};
/* eslint-disable max-len */
var SUPPPORTED_LOCALES = ['en', 'ru', 'pl', 'de', 'es', 'fr', 'it'];
var TEXT_DICTIONARY = {
en: enTranslations,
ru: ruTranslations,
pl: plTranslations,
de: deTranslations,
es: esTranslations,
fr: frTranslations,
it: itTranslations
};
var SideBar = function SideBar(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _TEXT_DICTIONARY$lang5, _TEXT_DICTIONARY$lang6;
var selectedSideBarItem = _ref.selectedSideBarItem,
_ref$onClickPill = _ref.onClickPill,
onClickPill = _ref$onClickPill === void 0 ? function () {} : _ref$onClickPill,
disableWhiteLabel = _ref.disableWhiteLabel,
styleProps = _ref.styleProps,
languageLocale = _ref.languageLocale;
var sideBarItems = [{
id: sideBarpillsList.template,
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.TEMPLATE,
icon: IconTemplate
}, {
id: sideBarpillsList.text,
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.TEXT,
icon: IconText
}, {
id: sideBarpillsList.image,
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.IMAGE,
icon: IconImage
}, {
id: sideBarpillsList.shape,
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang4 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang4 === void 0 ? void 0 : _TEXT_DICTIONARY$lang4.SHAPE,
icon: IconShape
}, {
id: sideBarpillsList.qr,
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang5 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang5 === void 0 ? void 0 : _TEXT_DICTIONARY$lang5.QR,
icon: IconQrCode
}, {
id: sideBarpillsList.whiteLabel,
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang6 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang6 === void 0 ? void 0 : _TEXT_DICTIONARY$lang6.WHITE_LABEL,
icon: IconWhiteLabel
}];
var onClickSinglePill = React.useCallback(function (e) {
onClickPill(e);
}, [onClickPill]);
var renderPills = React.useMemo(function () {
return sideBarItems === null || sideBarItems === void 0 ? void 0 : sideBarItems.map(function (item) {
if ((item === null || item === void 0 ? void 0 : item.id) === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.whiteLabel) && disableWhiteLabel) {
return null;
}
return /*#__PURE__*/React.createElement(SideBarPill, {
key: item === null || item === void 0 ? void 0 : item.id,
id: item === null || item === void 0 ? void 0 : item.id,
isSelected: selectedSideBarItem === (item === null || item === void 0 ? void 0 : item.id),
onClick: function onClick() {
return onClickSinglePill(item === null || item === void 0 ? void 0 : item.id);
},
icon: item === null || item === void 0 ? void 0 : item.icon,
text: item === null || item === void 0 ? void 0 : item.text,
languageLocale: languageLocale,
pillActiveColor: styleProps === null || styleProps === void 0 ? void 0 : styleProps.primaryColor
});
});
}, [selectedSideBarItem, onClickSinglePill, languageLocale]);
return /*#__PURE__*/React.createElement(SideBarWrapper$1, null, renderPills);
};
SideBar.propTypes = propTypes$z;
var propTypes$x = {
selectedTab: PropTypes.string,
languageLocale: PropTypes.string,
title: PropTypes.string,
zoomPercentage: PropTypes.number,
onChangeZoomPercentage: PropTypes.func,
editorHeight: PropTypes.number,
editorWidth: PropTypes.number,
onSetBackgroundColor: PropTypes.func,
elements: PropTypes.array,
history: PropTypes.array,
redoStack: PropTypes.array,
onSetBackgroundImage: PropTypes.func,
onUndo: PropTypes.func,
onRedo: PropTypes.func,
shapeStrokeColor: PropTypes.string,
shapeStrokeWidth: PropTypes.number,
shapeFillColor: PropTypes.string,
onChangeShapeStrokeColor: PropTypes.func,
onChangeShapeStrokeWidth: PropTypes.func,
onChangeShapeFill: PropTypes.func,
shapeOpacity: PropTypes.number,
onChangeShapeOpacity: PropTypes.func,
selectedElement: PropTypes.object,
onSelectElement: PropTypes.func,
stageRef: PropTypes.object,
saveHistory: PropTypes.func,
onChangeBackgroundImageOpacity: PropTypes.func,
backgroundImageOpacity: PropTypes.number,
onDeleteSelectedElement: PropTypes.func,
onCopySelectedElement: PropTypes.func,
onToggleLockElement: PropTypes.func,
bringSelectedElementToFront: PropTypes.func,
sendSelectedElementToBack: PropTypes.func,
imageStrokeWidth: PropTypes.number,
imageStrokeColor: PropTypes.string,
imageOpacity: PropTypes.number,
onChangeImageStrokeWidth: PropTypes.func,
onChangeImageStrokeColor: PropTypes.func,
onChangeImageOpacity: PropTypes.func,
qrStrokeWidth: PropTypes.number,
qrStrokeColor: PropTypes.string,
qrOpacity: PropTypes.number,
onChangeQrStrokeWidth: PropTypes.func,
onChangeQrStrokeColor: PropTypes.func,
onChangeQrOpacity: PropTypes.func,
defaultTextProps: PropTypes.object,
onChangeTextProperty: PropTypes.func,
onSetPageSize: PropTypes.func,
selectedPageSize: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
loadingImages: PropTypes.bool,
loadingFonts: PropTypes.bool,
uploadImageCallBack: PropTypes.func,
setLoadingUploadImage: PropTypes.func,
cuttingGuideStroke: PropTypes.number,
cuttingGuideStrokeColor: PropTypes.string,
onChangeCuttingGuideProp: PropTypes.func
};
var _templateObject$r, _templateObject2$l, _templateObject3$b, _templateObject4$6, _templateObject5$3;
var Container$4 = styled.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n flex: 1;\n display: flex;\n background-color: ", ";\n background-image: ", ";\n position: relative;\n flex-direction: column;\n overflow: hidden;\n"])), theme.color.white_F7F7F7, function (_ref) {
var selectedTab = _ref.selectedTab;
return selectedTab ? 'none' : "url(".concat(EditorBg, ")");
});
var InnerContainer = styled.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteral(["\n // display: flex;\n // flex-direction: column;\n // overflow: auto;\n // flex: 1;\n // align-items: center;\n // justify-content: center;\n // flex-grow: 1;\n // background: green;\n // // min-height: 100px;\n\n display: grid;\n place-items: center;\n overflow: auto;\n flex: 1;\n position: relative;\n"])));
var InnerContainerWrapper = styled.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n overflow: auto;\n flex: 1;\n justify-content: center;\n min-height: ", "px;\n height: ", "px;\n min-width: ", "px;\n width: ", "px;\n"])), function (_ref2) {
var editorHeight = _ref2.editorHeight;
return editorHeight || 500;
}, function (_ref3) {
var editorHeight = _ref3.editorHeight;
return editorHeight || 500;
}, function (_ref4) {
var editorWidth = _ref4.editorWidth;
return editorWidth || 400;
}, function (_ref5) {
var editorWidth = _ref5.editorWidth;
return editorWidth || 400;
});
var Title = styled.p(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral(["\n border: 1px solid ", ";\n align-self: flex-start;\n font-size: 14px;\n font-family: ", ";\n font-weight: ", ";\n color: ", ";\n padding: 0 6px;\n border-bottom-width: 0;\n"])), theme.color.gray_E8E8E8, theme.fonts.primary, theme.fontWeights[300], theme.color.gray_7A7979);
var EditorBox = styled.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n height: ", "px;\n width: ", "px;\n min-height: ", "px;\n min-width: ", "px;\n background: ", ";\n box-shadow: 1.317px 1.317px 1.317px 0px rgba(0, 0, 0, 0.08);\n // transition: all 0.1s ease-in-out;\n overflow: hidden;\n"])), function (_ref6) {
var editorHeight = _ref6.editorHeight;
return editorHeight || 470;
}, function (_ref7) {
var editorWidth = _ref7.editorWidth;
return editorWidth || 350;
}, function (_ref8) {
var editorHeight = _ref8.editorHeight;
return editorHeight || 470;
}, function (_ref9) {
var editorWidth = _ref9.editorWidth;
return editorWidth || 350;
}, theme.color.gray_25);
var propTypes$w = {
selectedTab: PropTypes.string,
onSetBackgroundColor: PropTypes.func,
canvasBackgroundColor: PropTypes.string,
canvasBackgroundImage: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
onSetBackgroundImage: PropTypes.func,
shapeStrokeColor: PropTypes.string,
shapeStrokeWidth: PropTypes.number,
shapeFillColor: PropTypes.string,
shapeOpacity: PropTypes.number,
onChangeShapeStrokeColor: PropTypes.func,
onChangeShapeStrokeWidth: PropTypes.func,
onChangeShapeFill: PropTypes.func,
onChangeShapeOpacity: PropTypes.func,
selectedElement: PropTypes.object,
onChangeBackgroundImageOpacity: PropTypes.func,
backgroundImageOpacity: PropTypes.number,
imageStrokeWidth: PropTypes.number,
imageStrokeColor: PropTypes.string,
imageOpacity: PropTypes.number,
onChangeImageStrokeWidth: PropTypes.func,
onChangeImageStrokeColor: PropTypes.func,
onChangeImageOpacity: PropTypes.func,
qrStrokeWidth: PropTypes.number,
qrStrokeColor: PropTypes.string,
qrOpacity: PropTypes.number,
onChangeQrStrokeWidth: PropTypes.func,
onChangeQrStrokeColor: PropTypes.func,
onChangeQrOpacity: PropTypes.func,
defaultTextProps: PropTypes.object,
onChangeTextProperty: PropTypes.func,
onSetPageSize: PropTypes.func,
selectedPageSize: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
translation: PropTypes.object,
uploadImageCallBack: PropTypes.func,
setLoadingUploadImage: PropTypes.func,
cuttingGuideStroke: PropTypes.number,
cuttingGuideStrokeColor: PropTypes.string,
onChangeCuttingGuideProp: PropTypes.func
};
var _templateObject$q, _templateObject2$k;
var ToolBarWrapper = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral(["\n display: flex;\n padding: 10px 30px;\n align-items: center;\n border-bottom: 1px solid ", ";\n background: ", ";\n flex-direction: row;\n opacity: ", ";\n // pointer-events: ", ";\n position: relative;\n // overflow: auto;\n"])), theme.color.gray_EAEAEA, theme.color.white, function (_ref) {
var disabled = _ref.disabled;
return disabled ? 0.5 : 1;
}, function (_ref2) {
var disabled = _ref2.disabled;
return disabled ? 'none' : 'all';
});
var OverlayBlocker = styled.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteral(["\n height: 100%;\n width: 100%;\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n background: rgba(255, 255, 255, 0.1);\n z-index: 100;\n cursor: not-allowed;\n"])));
var propTypes$v = {
onSetBackgroundColor: PropTypes.func,
canvasBackgroundColor: PropTypes.string,
onSetBackgroundImage: PropTypes.func,
backgroundImageOpacity: PropTypes.number,
onChangeBackgroundImageOpacity: PropTypes.func,
onSetPageSize: PropTypes.func,
selectedPageSize: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
languageLocale: PropTypes.string,
uploadImageCallBack: PropTypes.func,
setLoadingUploadImage: PropTypes.func,
cuttingGuideStroke: PropTypes.number,
cuttingGuideStrokeColor: PropTypes.string,
onChangeCuttingGuideProp: PropTypes.func
};
var propTypes$u = {
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
paddingTop: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
paddingBottom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
paddingLeft: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
paddingRight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
children: PropTypes.node,
marginLeft: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
marginRight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
justifyContent: PropTypes.string,
gap: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
onClick: PropTypes.func,
disabled: PropTypes.bool,
tooltip: PropTypes.string,
tooltipPosition: PropTypes.string
};
var _templateObject$p;
var StyledContainer$6 = styled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral(["\n border: 1px solid ", ";\n border-radius: 8px;\n background-color: ", ";\n height: ", ";\n margin-left: ", ";\n margin-right: ", ";\n display: flex;\n align-items: center;\n justify-content: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n cursor: ", ";\n gap: ", ";\n opacity: ", ";\n pointer-events: ", ";\n position: relative;\n"])), theme.color.gray_200, theme.color.white, function (_ref) {
var _ref$height = _ref.height,
height = _ref$height === void 0 ? 40 : _ref$height;
return "".concat(height, "px");
}, function (_ref2) {
var _ref2$marginLeft = _ref2.marginLeft,
marginLeft = _ref2$marginLeft === void 0 ? 0 : _ref2$marginLeft;
return "".concat(marginLeft, "px");
}, function (_ref3) {
var _ref3$marginRight = _ref3.marginRight,
marginRight = _ref3$marginRight === void 0 ? 12 : _ref3$marginRight;
return "".concat(marginRight, "px");
}, function (_ref4) {
var _ref4$justifyContent = _ref4.justifyContent,
justifyContent = _ref4$justifyContent === void 0 ? 'center' : _ref4$justifyContent;
return justifyContent;
}, function (_ref5) {
var _ref5$paddingTop = _ref5.paddingTop,
paddingTop = _ref5$paddingTop === void 0 ? 0 : _ref5$paddingTop;
return "".concat(paddingTop, "px");
}, function (_ref6) {
var _ref6$paddingRight = _ref6.paddingRight,
paddingRight = _ref6$paddingRight === void 0 ? 10 : _ref6$paddingRight;
return "".concat(paddingRight, "px");
}, function (_ref7) {
var _ref7$paddingBottom = _ref7.paddingBottom,
paddingBottom = _ref7$paddingBottom === void 0 ? 0 : _ref7$paddingBottom;
return "".concat(paddingBottom, "px");
}, function (_ref8) {
var _ref8$paddingLeft = _ref8.paddingLeft,
paddingLeft = _ref8$paddingLeft === void 0 ? 10 : _ref8$paddingLeft;
return "".concat(paddingLeft, "px");
}, function (_ref9) {
var disabled = _ref9.disabled;
return disabled ? 'not-allowed' : 'pointer';
}, function (_ref0) {
var _ref0$gap = _ref0.gap,
gap = _ref0$gap === void 0 ? 0 : _ref0$gap;
return "".concat(gap, "px");
}, function (_ref1) {
var disabled = _ref1.disabled;
return disabled ? 0.5 : 1;
}, function (_ref10) {
var disabled = _ref10.disabled;
return disabled ? 'none' : 'all';
});
var propTypes$t = {
children: PropTypes.node,
text: PropTypes.string,
position: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
disabled: PropTypes.bool
};
var _templateObject$o, _templateObject2$j, _templateObject3$a, _templateObject4$5, _templateObject5$2, _templateObject6;
var Wrapper = styled.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n position: relative;\n display: inline-block;\n cursor: ", ";\n"])), function (_ref) {
var disabled = _ref.disabled;
return disabled ? 'not-allowed' : 'pointer';
});
var TooltipText = styled.div(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteral(["\n visibility: hidden;\n background-color: rgba(0, 0, 0, 0.7);\n color: white;\n text-align: center;\n padding: 4px 10px;\n border-radius: 4px;\n position: absolute;\n z-index: 9999;\n white-space: nowrap;\n opacity: 0;\n transition: all 0.1s;\n font-size: 13px;\n font-family: ", ";\n font-weight: ", ";\n\n ", "\n ", "\n ", "\n ", "\n\n ", ":hover & {\n visibility: visible;\n opacity: 1;\n }\n"])), theme.fonts.primary, theme.fontWeights[400], function (_ref2) {
var position = _ref2.position;
return position === 'top' && styled.css(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteral(["\n bottom: 110%;\n left: 50%;\n transform: translateX(-50%);\n "])));
}, function (_ref3) {
var position = _ref3.position;
return position === 'right' && styled.css(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n top: 50%;\n left: 105%;\n transform: translateY(-50%);\n "])));
}, function (_ref4) {
var position = _ref4.position;
return position === 'bottom' && styled.css(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n top: 110%;\n left: 50%;\n transform: translateX(-50%);\n "])));
}, function (_ref5) {
var position = _ref5.position;
return position === 'left' && styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n top: 50%;\n right: 105%;\n transform: translateY(-50%);\n "])));
}, Wrapper);
var Tooltip = function Tooltip(_ref) {
var children = _ref.children,
text = _ref.text,
_ref$position = _ref.position,
position = _ref$position === void 0 ? 'top' : _ref$position,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled;
return /*#__PURE__*/React.createElement(Wrapper, {
disabled: disabled
}, children, !disabled && /*#__PURE__*/React.createElement(TooltipText, {
position: position
}, text));
};
Tooltip.propTypes = propTypes$t;
var ToolBarButtonWrapper = function ToolBarButtonWrapper(_ref) {
var height = _ref.height,
paddingTop = _ref.paddingTop,
paddingBottom = _ref.paddingBottom,
paddingLeft = _ref.paddingLeft,
paddingRight = _ref.paddingRight,
children = _ref.children,
marginLeft = _ref.marginLeft,
marginRight = _ref.marginRight,
justifyContent = _ref.justifyContent,
gap = _ref.gap,
_onClick = _ref.onClick,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
tooltip = _ref.tooltip,
tooltipPosition = _ref.tooltipPosition;
return /*#__PURE__*/React.createElement(Tooltip, {
text: tooltip,
position: tooltipPosition,
disabled: disabled
}, /*#__PURE__*/React.createElement(StyledContainer$6, {
height: height,
paddingTop: paddingTop,
paddingBottom: paddingBottom,
paddingLeft: paddingLeft,
paddingRight: paddingRight,
marginLeft: marginLeft,
marginRight: marginRight,
justifyContent: justifyContent,
gap: gap,
onClick: function onClick() {
if (disabled) {
return;
}
_onClick && _onClick();
},
disabled: disabled
}, children));
};
ToolBarButtonWrapper.propTypes = propTypes$u;
var propTypes$s = {
left: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
right: PropTypes.bool,
center: PropTypes.bool,
gap: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
paddingLeft: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
paddingRight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
list: PropTypes.array,
onSelect: PropTypes.func,
fontPicker: PropTypes.any,
tooltip: PropTypes.string
};
var _templateObject$n, _templateObject2$i, _templateObject3$9, _templateObject4$4;
var DropDownItem = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
var IconWrapper$3 = styled.img(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteral(["\n object-fit: contain;\n"])));
var DropDownList = styled.div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n top: 50;\n background-color: white;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n margin-top: 5px;\n z-index: 10;\n width: 100%;\n max-height: 200px;\n overflow-y: auto;\n z-index: 9999;\n"])));
// Individual option in the dropdown
var DropDownOption = styled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n padding: 8px 16px;\n cursor: pointer;\n font-size: 14px;\n color: #333333;\n &:hover {\n background-color: #f0f0f0;\n }\n &:active {\n background-color: #e0e0e0;\n }\n"])));
var DropDown = function DropDown(_ref) {
var left = _ref.left,
right = _ref.right,
center = _ref.center,
gap = _ref.gap,
paddingLeft = _ref.paddingLeft,
paddingRight = _ref.paddingRight,
list = _ref.list,
onSelect = _ref.onSelect,
fontPicker = _ref.fontPicker,
tooltip = _ref.tooltip;
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),
isOpen = _useState2[0],
setIsOpen = _useState2[1];
var dropdownRef = React.useRef(null);
React.useEffect(function () {
var handleClickOutside = function handleClickOutside(event) {
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
setIsOpen(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return function () {
return document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
var handleSelect = function handleSelect(item) {
onSelect(item);
setIsOpen(false);
};
return /*#__PURE__*/React.createElement("div", {
ref: dropdownRef,
style: {
position: 'relative'
},
onClick: function onClick() {
setIsOpen(true);
}
}, /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
justifyContent: center ? 'space-between' : 'center',
gap: gap,
paddingLeft: paddingLeft,
paddingRight: paddingRight,
tooltip: tooltip,
tooltipPosition: 'bottom'
}, /*#__PURE__*/React.createElement(DropDownItem, null, left), /*#__PURE__*/React.createElement(DropDownItem, null, center), /*#__PURE__*/React.createElement(DropDownItem, null, right ? right : /*#__PURE__*/React.createElement(IconWrapper$3, {
src: IconDropDown
}))), isOpen && /*#__PURE__*/React.createElement(DropDownList, null, list === null || list === void 0 ? void 0 : list.map(function (item, index) {
return /*#__PURE__*/React.createElement(DropDownOption, {
key: index,
onClick: function onClick(e) {
handleSelect(item);
e === null || e === void 0 || e.stopPropagation();
},
style: {
padding: '8px 16px',
cursor: 'pointer',
borderBottom: index !== list.length - 1 ? '1px solid #eee' : 'none',
fontFamily: fontPicker ? item : theme.fonts.primary
}
}, item);
})));
};
DropDown.propTypes = propTypes$s;
var _templateObject$m, _templateObject2$h, _templateObject3$8;
var Label$1 = styled.p(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 14px;\n font-weight: ", ";\n font-family: ", ";\n"])), theme.color.gray_700, theme.fontWeights[400], theme.fonts.primary);
var RowContainer$4 = styled.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n flex-wrap: wrap;\n gap: 2px;\n"])));
var RemoveButton = styled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n height: 20px;\n width: 20px;\n border-radius: 20px;\n position: absolute;\n right: -7px;\n top: -7px;\n background: #ff4d4d;\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
var propTypes$r = {
backgroundColor: PropTypes.string,
onChange: PropTypes.func
};
var _templateObject$l;
var Box = styled.input.attrs({
type: 'color'
})(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 22px;\n height: 22px;\n border: none;\n border-radius: 4px;\n border: 1px solid ", ";\n padding: 0;\n cursor: pointer;\n &::-webkit-color-swatch-wrapper {\n padding: 0;\n }\n\n &::-webkit-color-swatch {\n border: none;\n border-radius: 4px;\n }\n\n &::-moz-color-swatch {\n border: none;\n border-radius: 4px;\n }\n"])), theme.color.gray_CCC);
var ColorBox = function ColorBox(_ref) {
var backgroundColor = _ref.backgroundColor,
onChange = _ref.onChange;
var _useState = React.useState(''),
_useState2 = _slicedToArray(_useState, 2),
color = _useState2[0],
setColor = _useState2[1];
React.useEffect(function () {
var handler = setTimeout(function () {
if (!color) {
return;
}
onChange(color);
}, 200);
return function () {
return clearTimeout(handler);
};
}, [color]);
var onChangeColor = function onChangeColor(e) {
setColor(e.target.value);
};
return /*#__PURE__*/React.createElement(Box, {
value: backgroundColor,
onChange: onChangeColor
});
};
ColorBox.propTypes = propTypes$r;
var _templateObject$k, _templateObject2$g;
var StyledImage = styled.img(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n width: ", ";\n height: ", ";\n max-width: ", ";\n max-height: ", ";\n object-fit: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n border-radius: ", ";\n"])), function (_ref) {
var width = _ref.width;
return width + 'px' || 'auto';
}, function (_ref2) {
var height = _ref2.height;
return height + 'px' || 'auto';
}, function (_ref3) {
var maxWidth = _ref3.maxWidth;
return maxWidth + 'px' || 'auto';
}, function (_ref4) {
var maxHeight = _ref4.maxHeight;
return maxHeight + 'px' || 'auto';
}, function (_ref5) {
var objectFit = _ref5.objectFit;
return objectFit || 'contain';
}, function (_ref6) {
var _ref6$marginTop = _ref6.marginTop,
marginTop = _ref6$marginTop === void 0 ? 0 : _ref6$marginTop;
return "".concat(marginTop, "px");
}, function (_ref7) {
var _ref7$marginRight = _ref7.marginRight,
marginRight = _ref7$marginRight === void 0 ? 0 : _ref7$marginRight;
return "".concat(marginRight, "px");
}, function (_ref8) {
var _ref8$marginBottom = _ref8.marginBottom,
marginBottom = _ref8$marginBottom === void 0 ? 0 : _ref8$marginBottom;
return "".concat(marginBottom, "px");
}, function (_ref9) {
var _ref9$marginLeft = _ref9.marginLeft,
marginLeft = _ref9$marginLeft === void 0 ? 0 : _ref9$marginLeft;
return "".concat(marginLeft, "px");
}, function (_ref0) {
var _ref0$paddingTop = _ref0.paddingTop,
paddingTop = _ref0$paddingTop === void 0 ? 0 : _ref0$paddingTop;
return "".concat(paddingTop, "px");
}, function (_ref1) {
var _ref1$paddingRight = _ref1.paddingRight,
paddingRight = _ref1$paddingRight === void 0 ? 0 : _ref1$paddingRight;
return "".concat(paddingRight, "px");
}, function (_ref10) {
var _ref10$paddingBottom = _ref10.paddingBottom,
paddingBottom = _ref10$paddingBottom === void 0 ? 0 : _ref10$paddingBottom;
return "".concat(paddingBottom, "px");
}, function (_ref11) {
var _ref11$paddingLeft = _ref11.paddingLeft,
paddingLeft = _ref11$paddingLeft === void 0 ? 0 : _ref11$paddingLeft;
return "".concat(paddingLeft, "px");
}, function (_ref12) {
var _ref12$borderRadius = _ref12.borderRadius,
borderRadius = _ref12$borderRadius === void 0 ? 0 : _ref12$borderRadius;
return "".concat(borderRadius, "px");
});
var StyledText = styled.p(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteral(["\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n font-weight: ", ";\n line-height: ", ";\n text-align: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n"])), function (_ref13) {
var fontFamily = _ref13.fontFamily;
return fontFamily || theme.fonts.primary;
}, function (_ref14) {
var _ref14$fontSize = _ref14.fontSize,
fontSize = _ref14$fontSize === void 0 ? 14 : _ref14$fontSize;
return "".concat(fontSize, "px");
}, function (_ref15) {
var color = _ref15.color;
return color || theme.color.gray_700;
}, function (_ref16) {
var _ref16$fontWeight = _ref16.fontWeight,
fontWeight = _ref16$fontWeight === void 0 ? 400 : _ref16$fontWeight;
return fontWeight;
}, function (_ref17) {
var lineHeight = _ref17.lineHeight;
return lineHeight || 'normal';
}, function (_ref18) {
var textAlign = _ref18.textAlign;
return textAlign || 'left';
}, function (_ref19) {
var _ref19$marginTop = _ref19.marginTop,
marginTop = _ref19$marginTop === void 0 ? 0 : _ref19$marginTop;
return "".concat(marginTop, "px");
}, function (_ref20) {
var _ref20$marginRight = _ref20.marginRight,
marginRight = _ref20$marginRight === void 0 ? 0 : _ref20$marginRight;
return "".concat(marginRight, "px");
}, function (_ref21) {
var _ref21$marginBottom = _ref21.marginBottom,
marginBottom = _ref21$marginBottom === void 0 ? 0 : _ref21$marginBottom;
return "".concat(marginBottom, "px");
}, function (_ref22) {
var _ref22$marginLeft = _ref22.marginLeft,
marginLeft = _ref22$marginLeft === void 0 ? 0 : _ref22$marginLeft;
return "".concat(marginLeft, "px");
}, function (_ref23) {
var _ref23$paddingTop = _ref23.paddingTop,
paddingTop = _ref23$paddingTop === void 0 ? 0 : _ref23$paddingTop;
return "".concat(paddingTop, "px");
}, function (_ref24) {
var _ref24$paddingRight = _ref24.paddingRight,
paddingRight = _ref24$paddingRight === void 0 ? 0 : _ref24$paddingRight;
return "".concat(paddingRight, "px");
}, function (_ref25) {
var _ref25$paddingBottom = _ref25.paddingBottom,
paddingBottom = _ref25$paddingBottom === void 0 ? 0 : _ref25$paddingBottom;
return "".concat(paddingBottom, "px");
}, function (_ref26) {
var _ref26$paddingLeft = _ref26.paddingLeft,
paddingLeft = _ref26$paddingLeft === void 0 ? 0 : _ref26$paddingLeft;
return "".concat(paddingLeft, "px");
});
var _excluded = ["image"];
var calculatePercentageValue = function calculatePercentageValue(value, percentage) {
return value * percentage / 100;
};
var pickImage = function pickImage() {
return new Promise(function (resolve, reject) {
var input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.style.display = 'none';
input.addEventListener('change', function (event) {
if (event.target.files.length > 0) {
resolve(event.target.files[0]);
} else {
reject(new Error('No file selected'));
}
});
input.click();
});
};
var isElementShape = function isElementShape(elem) {
if ((elem === null || elem === void 0 ? void 0 : elem.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.circle) || (elem === null || elem === void 0 ? void 0 : elem.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.arrowRight) || (elem === null || elem === void 0 ? void 0 : elem.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.heart) || (elem === null || elem === void 0 ? void 0 : elem.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.horizontalLine) || (elem === null || elem === void 0 ? void 0 : elem.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.square) || (elem === null || elem === void 0 ? void 0 : elem.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.star) || (elem === null || elem === void 0 ? void 0 : elem.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.triangle) || (elem === null || elem === void 0 ? void 0 : elem.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.verticalLine)) {
return true;
} else {
return false;
}
};
var isElementOfSameType = function isElementOfSameType(elem, type) {
if (elem && (elem === null || elem === void 0 ? void 0 : elem.type) === type) {
return true;
} else {
return false;
}
};
var debounce = function debounce(func, delay) {
var timeoutId;
return function () {
var _this = this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
clearTimeout(timeoutId);
timeoutId = setTimeout(function () {
func.apply(_this, args);
}, delay);
};
};
var sanitizeNumber = function sanitizeNumber(value) {
var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var precision = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
var num = parseFloat(value);
if (isNaN(num)) return defaultValue;
return parseFloat(num.toFixed(precision));
};
var loadAllGoogleFonts = function loadAllGoogleFonts() {
var weights = [400, 700];
var italics = [0, 1];
var fontParams = fontFamilies.map(function (font) {
var fontName = font.replace(/ /g, '+');
var variantStr = italics.map(function (ital) {
return weights.map(function (w) {
return "".concat(ital, ",").concat(w);
}).join(';');
}).join(';');
return "family=".concat(fontName, ":ital,wght@").concat(variantStr);
});
var fontURL = "https://fonts.googleapis.com/css2?".concat(fontParams.join('&'), "&display=swap");
return new Promise(function (resolve, reject) {
try {
if (!document.querySelector("link[href=\"".concat(fontURL, "\"]"))) {
var link = document.createElement('link');
link.href = fontURL;
link.rel = 'stylesheet';
document.head.appendChild(link);
}
var loadPromises = [];
fontFamilies.forEach(function (font) {
weights.forEach(function (weight) {
italics.forEach(function (ital) {
loadPromises.push(document.fonts.load("".concat(ital ? 'italic' : 'normal', " ").concat(weight, " 16px \"").concat(font, "\"")));
});
});
});
Promise.all(loadPromises).then(function () {
return resolve("\u2705 All ".concat(fontFamilies === null || fontFamilies === void 0 ? void 0 : fontFamilies.length, " fonts loaded"));
})["catch"](function (err) {
return reject(err);
});
} catch (err) {
reject(err);
}
});
};
var preloadRelevantImages = /*#__PURE__*/function () {
var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
var elements,
imagePromises,
_args = arguments;
return _regenerator().w(function (_context) {
while (1) switch (_context.n) {
case 0:
elements = _args.length > 0 && _args[0] !== undefined ? _args[0] : [];
imagePromises = elements === null || elements === void 0 ? void 0 : elements.map(function (elem) {
var src = null;
if ((elem === null || elem === void 0 ? void 0 : elem.type) === 'image' || (elem === null || elem === void 0 ? void 0 : elem.type) === 'backgroundImage') {
src = elem === null || elem === void 0 ? void 0 : elem.src;
} else if ((elem === null || elem === void 0 ? void 0 : elem.type) === 'qr') {
src = elem === null || elem === void 0 ? void 0 : elem.qrLogo;
}
if (!src) return null;
return new Promise(function (resolve, reject) {
var img = new Image();
img.onload = function () {
return resolve({
src: src,
success: true
});
};
img.onerror = function () {
return reject({
src: src,
success: false
});
};
img.src = src;
});
}).filter(Boolean);
return _context.a(2, Promise === null || Promise === void 0 ? void 0 : Promise.allSettled(imagePromises).then(function (results) {
var successes = results === null || results === void 0 ? void 0 : results.filter(function (r) {
return (r === null || r === void 0 ? void 0 : r.status) === 'fulfilled';
}).map(function (r) {
return r === null || r === void 0 ? void 0 : r.value;
});
var errors = results === null || results === void 0 ? void 0 : results.filter(function (r) {
return (r === null || r === void 0 ? void 0 : r.status) === 'rejected';
}).map(function (r) {
return r === null || r === void 0 ? void 0 : r.reason;
});
return {
successes: successes,
errors: errors
};
}));
}
}, _callee);
}));
return function preloadRelevantImages() {
return _ref.apply(this, arguments);
};
}();
var removeImageProperty = function removeImageProperty() {
var elements = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
return elements.map(function (elem) {
if ('image' in elem) {
// eslint-disable-next-line no-unused-vars
elem.image;
var rest = _objectWithoutProperties(elem, _excluded);
return rest;
}
return elem;
});
};
var exportStageAsImage = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(stageRef, pageSizeKey) {
var scale,
_args3 = arguments;
return _regenerator().w(function (_context3) {
while (1) switch (_context3.n) {
case 0:
scale = _args3.length > 2 && _args3[2] !== undefined ? _args3[2] : 2;
return _context3.a(2, new Promise(/*#__PURE__*/function () {
var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(resolve, reject) {
var stage, canvas, dataURL, _t;
return _regenerator().w(function (_context2) {
while (1) switch (_context2.n) {
case 0:
_context2.p = 0;
stage = stageRef === null || stageRef === void 0 ? void 0 : stageRef.current;
if (stage) {
_context2.n = 1;
break;
}
return _context2.a(2, reject('Stage is not available'));
case 1:
_context2.n = 2;
return stage.toCanvas({
pixelRatio: scale
});
case 2:
canvas = _context2.v;
_context2.n = 3;
return canvas.toDataURL('image/png');
case 3:
dataURL = _context2.v;
// Return the data URL as the resolved value
resolve(dataURL);
_context2.n = 5;
break;
case 4:
_context2.p = 4;
_t = _context2.v;
reject(_t);
case 5:
return _context2.a(2);
}
}, _callee2, null, [[0, 4]]);
}));
return function (_x3, _x4) {
return _ref3.apply(this, arguments);
};
}()));
}
}, _callee3);
}));
return function exportStageAsImage(_x, _x2) {
return _ref2.apply(this, arguments);
};
}();
var validateLocale = function validateLocale(locale) {
if (SUPPPORTED_LOCALES.includes(locale)) {
return locale;
} else {
return 'en';
}
};
var propTypes$q = {
value: PropTypes.number,
onChangeOpacity: PropTypes.func,
min: PropTypes.number,
max: PropTypes.number,
step: PropTypes.number,
pickerWidth: PropTypes.number,
leftChild: PropTypes.node,
rightChild: PropTypes.node,
gap: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
showLeftChild: PropTypes.bool,
varient: PropTypes.string,
fontFamily: PropTypes.string,
tooltip: PropTypes.string,
tooltipPosition: PropTypes.string
};
var OpacityPicker = function OpacityPicker(_ref) {
var _TEXT_DICTIONARY$lang;
var _ref$value = _ref.value,
value = _ref$value === void 0 ? 1 : _ref$value,
onChangeOpacity = _ref.onChangeOpacity,
_ref$min = _ref.min,
min = _ref$min === void 0 ? 0 : _ref$min,
_ref$max = _ref.max,
max = _ref$max === void 0 ? 1 : _ref$max,
_ref$step = _ref.step,
step = _ref$step === void 0 ? 0.1 : _ref$step,
_ref$pickerWidth = _ref.pickerWidth,
pickerWidth = _ref$pickerWidth === void 0 ? 100 : _ref$pickerWidth,
leftChild = _ref.leftChild,
rightChild = _ref.rightChild,
_ref$gap = _ref.gap,
gap = _ref$gap === void 0 ? 12 : _ref$gap,
_ref$showLeftChild = _ref.showLeftChild,
showLeftChild = _ref$showLeftChild === void 0 ? true : _ref$showLeftChild,
_ref$varient = _ref.varient,
varient = _ref$varient === void 0 ? 'opacity' : _ref$varient,
_ref$fontFamily = _ref.fontFamily,
fontFamily = _ref$fontFamily === void 0 ? theme.fonts.secondary : _ref$fontFamily,
_ref$languageLocale = _ref.languageLocale,
languageLocale = _ref$languageLocale === void 0 ? 'en' : _ref$languageLocale,
_ref$tooltip = _ref.tooltip,
tooltip = _ref$tooltip === void 0 ? TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.OPACITY : _ref$tooltip,
_ref$tooltipPosition = _ref.tooltipPosition,
tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition,
toolBarIcon = _ref.toolBarIcon;
var pickerRef = React.useRef(null);
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),
opacityPickerVisible = _useState2[0],
setOpacityPickerVisible = _useState2[1];
React.useEffect(function () {
var handleClickOutside = function handleClickOutside(event) {
if (pickerRef.current && !pickerRef.current.contains(event.target)) {
setOpacityPickerVisible(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return function () {
return document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
return /*#__PURE__*/React.createElement("div", {
ref: pickerRef,
style: {
position: 'relative'
},
onClick: function onClick() {
setOpacityPickerVisible(true);
}
}, /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
gap: gap,
tooltip: tooltip,
tooltipPosition: tooltipPosition
}, showLeftChild && (leftChild ? leftChild : /*#__PURE__*/React.createElement(StyledImage, {
src: varient === 'opacity' ? IconOpacity : toolBarIcon
})), /*#__PURE__*/React.createElement(StyledText, {
fontFamily: fontFamily
}, varient === 'opacity' ? "".concat(value * 100, "%") : "".concat(Math.round(value), "px")), rightChild && rightChild), opacityPickerVisible && /*#__PURE__*/React.createElement("div", {
style: {
position: 'absolute',
bottom: -50,
background: 'white',
padding: 10,
borderRadius: 5,
border: 'solid 1px rgba(0,0,0,0.1)',
zIndex: 9999
}
}, /*#__PURE__*/React.createElement("input", {
type: "range",
min: min,
max: max,
step: step,
value: value,
onChange: function onChange(e) {
onChangeOpacity(Number(e.target.value));
},
style: {
width: pickerWidth
}
})));
};
OpacityPicker.propTypes = propTypes$q;
var propTypes$p = {
value: PropTypes.number,
strokeColor: PropTypes.string,
min: PropTypes.number,
max: PropTypes.number,
step: PropTypes.number,
onChangeStrokeWidth: PropTypes.func,
onChangeShapeStrokeColor: PropTypes.func,
pickerWidth: PropTypes.number,
languageLocale: PropTypes.string,
tooltip: PropTypes.string,
leftIcon: PropTypes.elementType
};
var StrokePicker = function StrokePicker(_ref) {
var _TEXT_DICTIONARY$lang;
var value = _ref.value,
strokeColor = _ref.strokeColor,
_ref$min = _ref.min,
min = _ref$min === void 0 ? 0 : _ref$min,
_ref$max = _ref.max,
max = _ref$max === void 0 ? 30 : _ref$max,
_ref$step = _ref.step,
step = _ref$step === void 0 ? 1 : _ref$step,
onChangeStrokeWidth = _ref.onChangeStrokeWidth,
onChangeShapeStrokeColor = _ref.onChangeShapeStrokeColor,
_ref$pickerWidth = _ref.pickerWidth,
pickerWidth = _ref$pickerWidth === void 0 ? 100 : _ref$pickerWidth,
_ref$languageLocale = _ref.languageLocale,
languageLocale = _ref$languageLocale === void 0 ? 'en' : _ref$languageLocale,
_ref$tooltip = _ref.tooltip,
tooltip = _ref$tooltip === void 0 ? TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.STROKE_WIDTH_AND_COLOR : _ref$tooltip,
_ref$leftIcon = _ref.leftIcon,
leftIcon = _ref$leftIcon === void 0 ? IconGrid : _ref$leftIcon;
var pickerRef = React.useRef(null);
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),
strokePickerVisible = _useState2[0],
setStrokePickerVisible = _useState2[1];
var _useState3 = React.useState(''),
_useState4 = _slicedToArray(_useState3, 2),
color = _useState4[0],
setColor = _useState4[1];
React.useEffect(function () {
var handler = setTimeout(function () {
if (!color) {
return;
}
onChangeShapeStrokeColor(color);
}, 200);
return function () {
return clearTimeout(handler);
};
}, [color]);
var onChangeColor = function onChangeColor(e) {
setColor(e.target.value);
};
React.useEffect(function () {
var handleClickOutside = function handleClickOutside(event) {
if (pickerRef.current && !pickerRef.current.contains(event.target)) {
setStrokePickerVisible(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return function () {
return document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
return /*#__PURE__*/React.createElement("div", {
style: {
position: 'relative'
},
ref: pickerRef
}, /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
gap: 12,
tooltip: tooltip,
tooltipPosition: 'bottom'
}, /*#__PURE__*/React.createElement(StyledImage, {
src: leftIcon
}), /*#__PURE__*/React.createElement(StyledText, {
fontFamily: theme.fonts.secondary
// marginRight={10}
,
paddingRight: 10,
onClick: function onClick() {
setStrokePickerVisible(true);
}
}, value), /*#__PURE__*/React.createElement("div", {
style: {
height: 22,
width: 22,
borderRadius: 4,
background: theme.color.gray_EFEFEF,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
position: 'relative'
}
}, /*#__PURE__*/React.createElement("input", {
type: "color",
value: strokeColor,
onChange: onChangeColor,
style: {
width: '100%',
height: '100%',
border: 'none',
cursor: 'pointer',
opacity: 0
}
}), /*#__PURE__*/React.createElement("div", {
style: {
height: 13,
width: 1,
backgroundColor: strokeColor,
transform: 'rotate(38deg)',
position: 'absolute',
pointerEvents: 'none'
}
}))), strokePickerVisible && /*#__PURE__*/React.createElement("div", {
style: {
position: 'absolute',
bottom: -50,
background: 'white',
padding: 10,
borderRadius: 5,
border: 'solid 1px rgba(0,0,0,0.1)',
zIndex: 9999
}
}, /*#__PURE__*/React.createElement("input", {
type: "range",
min: min,
max: max,
step: step,
value: value,
onChange: function onChange(e) {
onChangeStrokeWidth(Number(e.target.value));
},
style: {
width: pickerWidth
}
})));
};
StrokePicker.propTypes = propTypes$p;
var TemplateToolBar = function TemplateToolBar(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _TEXT_DICTIONARY$lang5;
var onSetBackgroundColor = _ref.onSetBackgroundColor,
canvasBackgroundColor = _ref.canvasBackgroundColor,
onSetBackgroundImage = _ref.onSetBackgroundImage,
backgroundImageOpacity = _ref.backgroundImageOpacity,
onChangeBackgroundImageOpacity = _ref.onChangeBackgroundImageOpacity,
onSetPageSize = _ref.onSetPageSize,
selectedPageSize = _ref.selectedPageSize,
languageLocale = _ref.languageLocale,
uploadImageCallBack = _ref.uploadImageCallBack,
setLoadingUploadImage = _ref.setLoadingUploadImage,
cuttingGuideStroke = _ref.cuttingGuideStroke,
cuttingGuideStrokeColor = _ref.cuttingGuideStrokeColor,
onChangeCuttingGuideProp = _ref.onChangeCuttingGuideProp,
canvasBackgroundImage = _ref.canvasBackgroundImage,
onRemoveBackgroundImage = _ref.onRemoveBackgroundImage,
_ref$showBackgroundIm = _ref.showBackgroundImagePicker,
showBackgroundImagePicker = _ref$showBackgroundIm === void 0 ? true : _ref$showBackgroundIm,
_ref$showOpacityPicke = _ref.showOpacityPicker,
showOpacityPicker = _ref$showOpacityPicke === void 0 ? true : _ref$showOpacityPicke;
var selectBackgroundColor = function selectBackgroundColor(e) {
onSetBackgroundColor(e);
};
var handleBackgroundUpload = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
var file, imageUrl, reader;
return _regenerator().w(function (_context) {
while (1) switch (_context.n) {
case 0:
_context.n = 1;
return pickImage();
case 1:
file = _context.v;
if (file) {
_context.n = 2;
break;
}
return _context.a(2);
case 2:
if (!uploadImageCallBack) {
_context.n = 4;
break;
}
setLoadingUploadImage(true);
_context.n = 3;
return uploadImageCallBack(file);
case 3:
imageUrl = _context.v;
onSetBackgroundImage(imageUrl);
setLoadingUploadImage(false);
_context.n = 5;
break;
case 4:
reader = new FileReader();
reader.onload = function () {
onSetBackgroundImage(reader.result);
};
reader.readAsDataURL(file);
case 5:
return _context.a(2);
}
}, _callee);
}));
return function handleBackgroundUpload() {
return _ref2.apply(this, arguments);
};
}();
return /*#__PURE__*/React.createElement(RowContainer$4, null, /*#__PURE__*/React.createElement(DropDown, {
gap: 20,
left: /*#__PURE__*/React.createElement(Label$1, null, selectedPageSize),
list: Object.keys(pageSizes),
onSelect: function onSelect(e) {
onSetPageSize && onSetPageSize(e);
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.PAGE_SIZE
}), /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
gap: 11,
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.BACKGROUND_COLOR,
tooltipPosition: 'bottom'
}, /*#__PURE__*/React.createElement(StyledImage, {
src: IconBackgroundColor
}), /*#__PURE__*/React.createElement(ColorBox, {
backgroundColor: canvasBackgroundColor || theme.color.white,
onChange: selectBackgroundColor
})), showBackgroundImagePicker && /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
paddingRight: 17,
paddingLeft: 17,
onClick: handleBackgroundUpload,
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.BACKGROUND_IMAGE,
tooltipPosition: 'bottom'
}, canvasBackgroundImage && /*#__PURE__*/React.createElement(RemoveButton, {
onClick: function onClick(e) {
onRemoveBackgroundImage && onRemoveBackgroundImage();
e.stopPropagation();
}
}, /*#__PURE__*/React.createElement(StyledImage, {
src: IconCross,
height: 15,
width: 15
})), /*#__PURE__*/React.createElement(StyledImage, {
src: (canvasBackgroundImage === null || canvasBackgroundImage === void 0 ? void 0 : canvasBackgroundImage.src) || IconBackgroundImage,
height: 24,
width: 24
})), showOpacityPicker && /*#__PURE__*/React.createElement(OpacityPicker, {
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang4 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang4 === void 0 ? void 0 : _TEXT_DICTIONARY$lang4.BACKGROUND_IMAGE_OPACITY,
gap: 10,
value: backgroundImageOpacity,
onChangeOpacity: onChangeBackgroundImageOpacity,
leftChild: /*#__PURE__*/React.createElement(StyledImage, {
src: IconBackgroundImageOpacity
}),
rightChild: /*#__PURE__*/React.createElement(StyledImage, {
src: IconDropDownSmall
})
}), /*#__PURE__*/React.createElement(StrokePicker, {
gap: 10,
value: cuttingGuideStroke,
onChangeStrokeWidth: function onChangeStrokeWidth(e) {
onChangeCuttingGuideProp('cuttingGuideStroke', e);
},
strokeColor: cuttingGuideStrokeColor,
onChangeShapeStrokeColor: function onChangeShapeStrokeColor(e) {
onChangeCuttingGuideProp('cuttingGuideStrokeColor', e);
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang5 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang5 === void 0 ? void 0 : _TEXT_DICTIONARY$lang5.CUTTING_GUIDE,
languageLocale: languageLocale,
leftIcon: IconFrame,
max: 10
}));
};
TemplateToolBar.propTypes = propTypes$v;
var propTypes$o = {
fontFamily: PropTypes.string,
fontSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
color: PropTypes.string,
textDecoration: PropTypes.string,
fontStyle: PropTypes.string,
fontWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
textAlign: PropTypes.string,
textOpacity: PropTypes.number,
onChangeTextProperty: PropTypes.func,
languageLocale: PropTypes.string
};
var _templateObject$j, _templateObject2$f;
var Label = styled.p(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 14px;\n font-weight: ", ";\n font-family: ", ";\n width: 100px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n"])), theme.color.gray_700, theme.fontWeights[400], function (_ref) {
var _ref$fontFamily = _ref.fontFamily,
fontFamily = _ref$fontFamily === void 0 ? theme.fonts.primary : _ref$fontFamily;
return fontFamily;
});
var RowContainer$3 = styled.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n flex-wrap: wrap;\n gap: 2px;\n"])));
var propTypes$n = {
tabsData: PropTypes.arrayOf(PropTypes.object),
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
tabPadding: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
marginRight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
disabled: PropTypes.bool,
tooltipPosition: PropTypes.string
};
var _templateObject$i, _templateObject2$e;
var TabBarContainer = styled.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n border: 1px solid ", ";\n height: ", "px;\n margin-right: ", "px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n background: ", ";\n opacity: ", ";\n pointer-events: ", ";\n"])), theme.color.gray_200, function (_ref) {
var height = _ref.height;
return height;
}, function (_ref2) {
var _ref2$marginRight = _ref2.marginRight,
marginRight = _ref2$marginRight === void 0 ? 0 : _ref2$marginRight;
return marginRight;
}, theme.color.white, function (_ref3) {
var disabled = _ref3.disabled;
return disabled ? 0.5 : 1;
}, function (_ref4) {
var disabled = _ref4.disabled;
return disabled ? 'none' : 'all';
});
var TabItem = styled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral(["\n padding: ", ";\n cursor: ", ";\n border-right: ", ";\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: ", ";\n background: ", ";\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n border-top-right-radius: ", "px;\n border-bottom-right-radius: ", "px;\n pointer-events: ", ";\n"])), function (_ref5) {
var tabPadding = _ref5.tabPadding;
return tabPadding;
}, function (_ref6) {
var disabled = _ref6.disabled;
return disabled ? 'not-allowed' : 'pointer';
}, function (_ref7) {
var isLast = _ref7.isLast;
return isLast ? 'none' : "1px solid ".concat(theme.color.gray_200);
}, function (_ref8) {
var disabled = _ref8.disabled;
return disabled ? 0.5 : 1;
}, function (_ref9) {
var _ref9$selected = _ref9.selected,
selected = _ref9$selected === void 0 ? false : _ref9$selected;
return selected ? theme.color.gray_200 : theme.color.white;
}, function (_ref0) {
var isFirst = _ref0.isFirst;
return isFirst ? '5' : '0';
}, function (_ref1) {
var isFirst = _ref1.isFirst;
return isFirst ? '5' : '0';
}, function (_ref10) {
var isLast = _ref10.isLast;
return isLast ? '5' : '0';
}, function (_ref11) {
var isLast = _ref11.isLast;
return isLast ? '5' : '0';
}, function (_ref12) {
var disabled = _ref12.disabled;
return disabled ? 'none' : 'all';
});
var ToolsTabBar = function ToolsTabBar(_ref) {
var _ref$tabsData = _ref.tabsData,
tabsData = _ref$tabsData === void 0 ? [] : _ref$tabsData,
_ref$height = _ref.height,
height = _ref$height === void 0 ? 36 : _ref$height,
_ref$tabPadding = _ref.tabPadding,
tabPadding = _ref$tabPadding === void 0 ? '8px 12px' : _ref$tabPadding,
_ref$marginRight = _ref.marginRight,
marginRight = _ref$marginRight === void 0 ? 0 : _ref$marginRight,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
_ref$tooltipPosition = _ref.tooltipPosition,
tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition;
return /*#__PURE__*/React.createElement(TabBarContainer, {
disabled: disabled,
height: height,
marginRight: marginRight
}, tabsData.map(function (item, index) {
return /*#__PURE__*/React.createElement(Tooltip, {
key: index,
position: tooltipPosition,
text: item === null || item === void 0 ? void 0 : item.tooltip,
disabled: item === null || item === void 0 ? void 0 : item.disabled
}, /*#__PURE__*/React.createElement(TabItem, {
key: index,
tabPadding: tabPadding,
isLast: index === tabsData.length - 1,
isFirst: index === 0,
onClick: item === null || item === void 0 ? void 0 : item.onClick,
disabled: item === null || item === void 0 ? void 0 : item.disabled,
selected: item === null || item === void 0 ? void 0 : item.selected
}, item === null || item === void 0 ? void 0 : item.element));
}));
};
ToolsTabBar.propTypes = propTypes$n;
var TextToolBar = function TextToolBar(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _TEXT_DICTIONARY$lang5, _TEXT_DICTIONARY$lang6, _TEXT_DICTIONARY$lang7, _TEXT_DICTIONARY$lang8, _TEXT_DICTIONARY$lang9, _TEXT_DICTIONARY$lang0, _TEXT_DICTIONARY$lang1, _TEXT_DICTIONARY$lang10;
var fontFamily = _ref.fontFamily,
fontSize = _ref.fontSize,
lineHeight = _ref.lineHeight,
color = _ref.color,
textDecoration = _ref.textDecoration,
fontStyle = _ref.fontStyle,
fontWeight = _ref.fontWeight,
textAlign = _ref.textAlign,
textOpacity = _ref.textOpacity,
onChangeTextProperty = _ref.onChangeTextProperty,
languageLocale = _ref.languageLocale;
var TextTabsData = [{
element: /*#__PURE__*/React.createElement(StyledImage, {
src: IconBold
}),
selected: fontWeight > (theme === null || theme === void 0 ? void 0 : theme.fontWeights[500]) || fontWeight === 'bold',
onClick: function onClick() {
if (fontWeight > (theme === null || theme === void 0 ? void 0 : theme.fontWeights[500]) || fontWeight === 'bold') {
onChangeTextProperty('fontWeight', theme === null || theme === void 0 ? void 0 : theme.fontWeights[400]);
} else {
onChangeTextProperty('fontWeight', theme === null || theme === void 0 ? void 0 : theme.fontWeights[700]);
}
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.BOLD,
disabled: funkyFonts.includes(fontFamily) ? true : false
}, {
element: /*#__PURE__*/React.createElement(StyledImage, {
src: IconTextItalic
}),
selected: fontStyle === 'italic',
onClick: function onClick() {
if (fontStyle === 'italic') {
onChangeTextProperty('fontStyle', 'normal');
} else {
onChangeTextProperty('fontStyle', 'italic');
}
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.ITALIC,
disabled: funkyFonts.includes(fontFamily) ? true : false
}, {
element: /*#__PURE__*/React.createElement(StyledImage, {
src: IconLineThrough
}),
selected: textDecoration === null || textDecoration === void 0 ? void 0 : textDecoration.includes('line-through'),
onClick: function onClick() {
if (textDecoration !== null && textDecoration !== void 0 && textDecoration.includes('line-through')) {
onChangeTextProperty('textDecoration', textDecoration !== null && textDecoration !== void 0 && textDecoration.includes('underline') ? 'underline' : 'normal');
} else {
onChangeTextProperty('textDecoration', textDecoration !== null && textDecoration !== void 0 && textDecoration.includes('underline') ? 'underline line-through' : 'line-through');
}
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.LINE_THROUGH
}, {
element: /*#__PURE__*/React.createElement(StyledImage, {
src: IconTextUnderLine
}),
selected: textDecoration === null || textDecoration === void 0 ? void 0 : textDecoration.includes('underline'),
onClick: function onClick() {
if (textDecoration !== null && textDecoration !== void 0 && textDecoration.includes('underline')) {
onChangeTextProperty('textDecoration', textDecoration !== null && textDecoration !== void 0 && textDecoration.includes('line-through') ? 'line-through' : 'normal');
} else {
onChangeTextProperty('textDecoration', textDecoration !== null && textDecoration !== void 0 && textDecoration.includes('line-through') ? 'underline line-through' : 'underline');
}
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang4 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang4 === void 0 ? void 0 : _TEXT_DICTIONARY$lang4.UNDERLINE
}];
var AlignmentTabsData = [{
element: /*#__PURE__*/React.createElement(StyledImage, {
src: IconAlignLeft
}),
selected: textAlign === 'left',
onClick: function onClick() {
if (textAlign !== 'left') {
onChangeTextProperty('textAlign', 'left');
}
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang5 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang5 === void 0 ? void 0 : _TEXT_DICTIONARY$lang5.LEFT_ALIGN
}, {
element: /*#__PURE__*/React.createElement(StyledImage, {
src: IconAlignCenter
}),
selected: textAlign === 'center',
onClick: function onClick() {
if (textAlign !== 'center') {
onChangeTextProperty('textAlign', 'center');
}
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang6 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang6 === void 0 ? void 0 : _TEXT_DICTIONARY$lang6.CENTER_ALIGN
}, {
element: /*#__PURE__*/React.createElement(StyledImage, {
src: IconAlignRight
}),
selected: textAlign === 'right',
onClick: function onClick() {
if (textAlign !== 'right') {
onChangeTextProperty('textAlign', 'right');
}
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang7 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang7 === void 0 ? void 0 : _TEXT_DICTIONARY$lang7.RIGHT_ALIGN
}];
return /*#__PURE__*/React.createElement(RowContainer$3, null, /*#__PURE__*/React.createElement(DropDown, {
gap: 40,
left: /*#__PURE__*/React.createElement(Label, {
fontFamily: fontFamily
}, fontFamily),
fontPicker: true,
list: fontFamilies,
onSelect: function onSelect(e) {
onChangeTextProperty('fontFamily', e);
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang8 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang8 === void 0 ? void 0 : _TEXT_DICTIONARY$lang8.FONT_FAMILY,
tooltipPosition: 'bottom'
}), /*#__PURE__*/React.createElement(OpacityPicker, {
gap: 11,
value: fontSize,
varient: 'size',
fontFamily: theme.fonts.primary,
min: 5,
max: 100,
step: 1,
onChangeOpacity: function onChangeOpacity(e) {
return onChangeTextProperty('fontSize', e);
},
showLeftChild: false,
rightChild: /*#__PURE__*/React.createElement(StyledImage, {
src: IconDropDown,
marginLeft: 10
}),
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang9 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang9 === void 0 ? void 0 : _TEXT_DICTIONARY$lang9.TEXT_SIZE,
tooltipPosition: 'bottom'
}), /*#__PURE__*/React.createElement(OpacityPicker, {
gap: 11,
value: lineHeight,
varient: 'size',
fontFamily: theme.fonts.primary,
min: 1,
max: 5,
step: 0.5,
onChangeOpacity: function onChangeOpacity(e) {
return onChangeTextProperty('lineHeight', e);
},
showLeftChild: false,
rightChild: /*#__PURE__*/React.createElement(StyledImage, {
src: IconDropDown,
marginLeft: 10
}),
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang0 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang0 === void 0 ? void 0 : _TEXT_DICTIONARY$lang0.TEXT_LINE_HEIGHT,
tooltipPosition: 'bottom'
}), /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
gap: 12,
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang1 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang1 === void 0 ? void 0 : _TEXT_DICTIONARY$lang1.TEXT_COLOR,
tooltipPosition: 'bottom'
}, /*#__PURE__*/React.createElement(StyledImage, {
src: IconTextSmall
}), /*#__PURE__*/React.createElement(ColorBox, {
backgroundColor: color,
onChange: function onChange(e) {
return onChangeTextProperty('color', e);
}
})), /*#__PURE__*/React.createElement(ToolsTabBar, {
tabsData: TextTabsData,
marginRight: 12,
height: 40,
tabPadding: topTabBarpadding,
tooltipPosition: 'bottom'
}), /*#__PURE__*/React.createElement(ToolsTabBar, {
tabsData: AlignmentTabsData,
marginRight: 20,
height: 40,
tabPadding: topTabBarpadding,
tooltipPosition: 'bottom'
}), /*#__PURE__*/React.createElement(OpacityPicker, {
value: textOpacity,
onChangeOpacity: function onChangeOpacity(e) {
return onChangeTextProperty('opacity', e);
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang10 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang10 === void 0 ? void 0 : _TEXT_DICTIONARY$lang10.TEXT_OPACITY,
tooltipPosition: 'bottom'
}));
};
TextToolBar.propTypes = propTypes$o;
var propTypes$m = {
imageStrokeWidth: PropTypes.number,
imageStrokeColor: PropTypes.string,
imageOpacity: PropTypes.number,
onChangeImageStrokeWidth: PropTypes.func,
onChangeImageStrokeColor: PropTypes.func,
onChangeImageOpacity: PropTypes.func,
selectedElement: PropTypes.object,
languageLocale: PropTypes.string
};
var _templateObject$h, _templateObject2$d;
styled.p(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 14px;\n font-weight: ", ";\n font-family: ", ";\n"])), theme.color.gray_700, theme.fontWeights[400], theme.fonts.primary);
var RowContainer$2 = styled.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n flex-wrap: wrap;\n gap: 2px;\n"])));
var ImageToolBar = function ImageToolBar(_ref) {
var _TEXT_DICTIONARY$lang;
var imageStrokeWidth = _ref.imageStrokeWidth,
imageStrokeColor = _ref.imageStrokeColor,
imageOpacity = _ref.imageOpacity,
onChangeImageStrokeWidth = _ref.onChangeImageStrokeWidth,
onChangeImageStrokeColor = _ref.onChangeImageStrokeColor,
onChangeImageOpacity = _ref.onChangeImageOpacity,
selectedElement = _ref.selectedElement,
languageLocale = _ref.languageLocale;
return /*#__PURE__*/React.createElement(RowContainer$2, null, /*#__PURE__*/React.createElement(StrokePicker, {
value: isElementOfSameType(selectedElement, elementTypes.image) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.strokeWidth : imageStrokeWidth,
onChangeStrokeWidth: onChangeImageStrokeWidth,
strokeColor: isElementOfSameType(selectedElement, elementTypes.image) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.stroke : imageStrokeColor,
onChangeShapeStrokeColor: onChangeImageStrokeColor,
languageLocale: languageLocale
}), /*#__PURE__*/React.createElement(OpacityPicker, {
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.IMAGE_OPACITY,
value: isElementOfSameType(selectedElement, elementTypes.image) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.opacity : imageOpacity,
onChangeOpacity: onChangeImageOpacity,
languageLocale: languageLocale
}));
};
ImageToolBar.propTypes = propTypes$m;
var propTypes$l = {
shapeStrokeColor: PropTypes.string,
shapeStrokeWidth: PropTypes.number,
shapeFillColor: PropTypes.string,
shapeOpacity: PropTypes.number,
onChangeShapeStrokeColor: PropTypes.func,
onChangeShapeStrokeWidth: PropTypes.func,
onChangeShapeFill: PropTypes.func,
onChangeShapeOpacity: PropTypes.func,
selectedElement: PropTypes.object,
languageLocale: PropTypes.string,
onChangeCornerRadius: PropTypes.func
};
var _templateObject$g, _templateObject2$c;
styled.p(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 14px;\n font-weight: ", ";\n font-family: ", ";\n"])), theme.color.gray_700, theme.fontWeights[400], theme.fonts.primary);
var RowContainer$1 = styled.div(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n flex-wrap: wrap;\n gap: 2px;\n"])));
var ShapeToolBar = function ShapeToolBar(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3;
var shapeStrokeColor = _ref.shapeStrokeColor,
shapeStrokeWidth = _ref.shapeStrokeWidth,
shapeFillColor = _ref.shapeFillColor,
shapeOpacity = _ref.shapeOpacity,
onChangeShapeStrokeColor = _ref.onChangeShapeStrokeColor,
onChangeShapeStrokeWidth = _ref.onChangeShapeStrokeWidth,
onChangeShapeFill = _ref.onChangeShapeFill,
onChangeShapeOpacity = _ref.onChangeShapeOpacity,
selectedElement = _ref.selectedElement,
languageLocale = _ref.languageLocale,
onChangeCornerRadius = _ref.onChangeCornerRadius;
return /*#__PURE__*/React.createElement(RowContainer$1, null, /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
gap: 11,
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.SHAPE_FILL,
tooltipPosition: "bottom"
}, /*#__PURE__*/React.createElement(StyledImage, {
src: IconBackgroundColor
}), /*#__PURE__*/React.createElement(ColorBox, {
backgroundColor: isElementShape(selectedElement) && (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.fill) || shapeFillColor,
onChange: onChangeShapeFill
})), /*#__PURE__*/React.createElement(StrokePicker, {
value: isElementShape(selectedElement) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.strokeWidth : shapeStrokeWidth,
onChangeStrokeWidth: onChangeShapeStrokeWidth,
strokeColor: isElementShape(selectedElement) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.stroke : shapeStrokeColor,
onChangeShapeStrokeColor: onChangeShapeStrokeColor,
languageLocale: languageLocale
}), /*#__PURE__*/React.createElement(OpacityPicker, {
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.SHAPE_OPACITY,
value: isElementShape(selectedElement) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.opacity : shapeOpacity,
onChangeOpacity: onChangeShapeOpacity,
languageLocale: languageLocale
}), (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.type) === 'square' && /*#__PURE__*/React.createElement(OpacityPicker, {
tooltip: (TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.CORNER_RADIUS) || 'Corner Radius',
value: selectedElement.cornerRadius || 0,
min: 0,
max: 50,
step: 1,
varient: "radius",
onChangeOpacity: onChangeCornerRadius,
languageLocale: languageLocale,
toolBarIcon: IconRoundedCorner
}));
};
ShapeToolBar.propTypes = propTypes$l;
var propTypes$k = {
qrStrokeWidth: PropTypes.number,
qrStrokeColor: PropTypes.string,
qrOpacity: PropTypes.number,
onChangeQrStrokeWidth: PropTypes.func,
onChangeQrStrokeColor: PropTypes.func,
onChangeQrOpacity: PropTypes.func,
selectedElement: PropTypes.object,
languageLocale: PropTypes.string
};
var _templateObject$f, _templateObject2$b;
styled.p(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 14px;\n font-weight: ", ";\n font-family: ", ";\n"])), theme.color.gray_700, theme.fontWeights[400], theme.fonts.primary);
var RowContainer = styled.div(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n flex-wrap: wrap;\n gap: 2px;\n"])));
var QrToolBar = function QrToolBar(_ref) {
var _TEXT_DICTIONARY$lang;
var qrStrokeWidth = _ref.qrStrokeWidth,
qrStrokeColor = _ref.qrStrokeColor,
qrOpacity = _ref.qrOpacity,
onChangeQrStrokeWidth = _ref.onChangeQrStrokeWidth,
onChangeQrStrokeColor = _ref.onChangeQrStrokeColor,
onChangeQrOpacity = _ref.onChangeQrOpacity,
selectedElement = _ref.selectedElement,
languageLocale = _ref.languageLocale;
return /*#__PURE__*/React.createElement(RowContainer, null, /*#__PURE__*/React.createElement(StrokePicker, {
value: isElementOfSameType(selectedElement, elementTypes.qr) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.strokeWidth : qrStrokeWidth,
onChangeStrokeWidth: onChangeQrStrokeWidth,
strokeColor: isElementOfSameType(selectedElement, elementTypes.qr) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.stroke : qrStrokeColor,
onChangeShapeStrokeColor: onChangeQrStrokeColor,
languageLocale: languageLocale
}), /*#__PURE__*/React.createElement(OpacityPicker, {
value: isElementOfSameType(selectedElement, elementTypes.qr) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.opacity : qrOpacity,
onChangeOpacity: onChangeQrOpacity,
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.OPACITY,
languageLocale: languageLocale
}));
};
QrToolBar.propTypes = propTypes$k;
var TopToolBar = function TopToolBar(_ref) {
var selectedTab = _ref.selectedTab,
onSetBackgroundColor = _ref.onSetBackgroundColor,
canvasBackgroundColor = _ref.canvasBackgroundColor,
canvasBackgroundImage = _ref.canvasBackgroundImage,
onSetBackgroundImage = _ref.onSetBackgroundImage,
shapeStrokeColor = _ref.shapeStrokeColor,
shapeStrokeWidth = _ref.shapeStrokeWidth,
shapeFillColor = _ref.shapeFillColor,
shapeOpacity = _ref.shapeOpacity,
onChangeShapeStrokeColor = _ref.onChangeShapeStrokeColor,
onChangeShapeStrokeWidth = _ref.onChangeShapeStrokeWidth,
onChangeShapeFill = _ref.onChangeShapeFill,
onChangeShapeOpacity = _ref.onChangeShapeOpacity,
selectedElement = _ref.selectedElement,
onChangeBackgroundImageOpacity = _ref.onChangeBackgroundImageOpacity,
backgroundImageOpacity = _ref.backgroundImageOpacity,
imageStrokeWidth = _ref.imageStrokeWidth,
imageStrokeColor = _ref.imageStrokeColor,
imageOpacity = _ref.imageOpacity,
onChangeImageStrokeWidth = _ref.onChangeImageStrokeWidth,
onChangeImageStrokeColor = _ref.onChangeImageStrokeColor,
onChangeImageOpacity = _ref.onChangeImageOpacity,
qrStrokeWidth = _ref.qrStrokeWidth,
qrStrokeColor = _ref.qrStrokeColor,
qrOpacity = _ref.qrOpacity,
onChangeQrStrokeWidth = _ref.onChangeQrStrokeWidth,
onChangeQrStrokeColor = _ref.onChangeQrStrokeColor,
onChangeQrOpacity = _ref.onChangeQrOpacity,
defaultTextProps = _ref.defaultTextProps,
onChangeTextProperty = _ref.onChangeTextProperty,
onSetPageSize = _ref.onSetPageSize,
selectedPageSize = _ref.selectedPageSize,
languageLocale = _ref.languageLocale,
uploadImageCallBack = _ref.uploadImageCallBack,
setLoadingUploadImage = _ref.setLoadingUploadImage,
cuttingGuideStroke = _ref.cuttingGuideStroke,
cuttingGuideStrokeColor = _ref.cuttingGuideStrokeColor,
onChangeCuttingGuideProp = _ref.onChangeCuttingGuideProp,
onRemoveBackgroundImage = _ref.onRemoveBackgroundImage,
showBackgroundImagePicker = _ref.showBackgroundImagePicker,
showOpacityPicker = _ref.showOpacityPicker,
changeSelectedElementProperty = _ref.changeSelectedElementProperty;
return /*#__PURE__*/React.createElement(ToolBarWrapper, {
disabled: selectedElement && !(selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable)
}, selectedElement && !(selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable) && /*#__PURE__*/React.createElement(OverlayBlocker, {
onClick: function onClick(e) {
e === null || e === void 0 || e.stopPropagation();
}
}), selectedTab === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.template) ? /*#__PURE__*/React.createElement(TemplateToolBar, {
onSetBackgroundColor: onSetBackgroundColor,
canvasBackgroundColor: canvasBackgroundColor,
canvasBackgroundImage: canvasBackgroundImage,
onSetBackgroundImage: onSetBackgroundImage,
onChangeBackgroundImageOpacity: onChangeBackgroundImageOpacity,
backgroundImageOpacity: backgroundImageOpacity,
onSetPageSize: onSetPageSize,
selectedPageSize: selectedPageSize,
languageLocale: languageLocale,
uploadImageCallBack: uploadImageCallBack,
setLoadingUploadImage: setLoadingUploadImage,
cuttingGuideStroke: cuttingGuideStroke,
cuttingGuideStrokeColor: cuttingGuideStrokeColor,
onChangeCuttingGuideProp: onChangeCuttingGuideProp,
onRemoveBackgroundImage: onRemoveBackgroundImage,
showBackgroundImagePicker: showBackgroundImagePicker,
showOpacityPicker: showOpacityPicker
}) : selectedTab === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.text) ? /*#__PURE__*/React.createElement(TextToolBar, {
fontFamily: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.fontFamily : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontFamily,
fontSize: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.fontSize : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontSize,
lineHeight: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.lineHeight : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.lineHeight,
color: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.color : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.color,
textDecoration: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.textDecoration : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.textDecoration,
fontStyle: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.fontStyle : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontStyle,
fontWeight: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.fontWeight : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontWeight,
textAlign: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.textAlign : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.textAlign,
selectedElement: selectedElement,
textOpacity: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.opacity : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.opacity,
onChangeTextProperty: onChangeTextProperty,
languageLocale: languageLocale
}) : selectedTab === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.image) ? /*#__PURE__*/React.createElement(ImageToolBar, {
imageStrokeWidth: imageStrokeWidth,
imageStrokeColor: imageStrokeColor,
imageOpacity: imageOpacity,
onChangeImageStrokeWidth: onChangeImageStrokeWidth,
onChangeImageStrokeColor: onChangeImageStrokeColor,
onChangeImageOpacity: onChangeImageOpacity,
selectedElement: selectedElement,
languageLocale: languageLocale
}) : selectedTab === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.shape) ? /*#__PURE__*/React.createElement(ShapeToolBar, {
shapeStrokeColor: shapeStrokeColor,
shapeStrokeWidth: shapeStrokeWidth,
shapeFillColor: shapeFillColor,
onChangeShapeStrokeColor: onChangeShapeStrokeColor,
onChangeShapeStrokeWidth: onChangeShapeStrokeWidth,
onChangeShapeFill: onChangeShapeFill,
shapeOpacity: shapeOpacity,
onChangeShapeOpacity: onChangeShapeOpacity,
selectedElement: selectedElement,
languageLocale: languageLocale,
onChangeCornerRadius: function onChangeCornerRadius(val) {
changeSelectedElementProperty('cornerRadius', Number(val));
}
}) : selectedTab === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.qr) ? /*#__PURE__*/React.createElement(QrToolBar, {
qrStrokeWidth: qrStrokeWidth,
qrStrokeColor: qrStrokeColor,
qrOpacity: qrOpacity,
onChangeQrStrokeWidth: onChangeQrStrokeWidth,
onChangeQrStrokeColor: onChangeQrStrokeColor,
onChangeQrOpacity: onChangeQrOpacity,
selectedElement: selectedElement,
languageLocale: languageLocale
}) : null);
};
TopToolBar.propTypes = propTypes$w;
var propTypes$j = {
selectedTab: PropTypes.string,
zoomPercentage: PropTypes.number,
onChangeZoomPercentage: PropTypes.func,
onUndo: PropTypes.func,
onRedo: PropTypes.func,
disableUndo: PropTypes.bool,
disableRedo: PropTypes.bool,
selectedElement: PropTypes.object,
onDeleteSelectedElement: PropTypes.func,
onCopySelectedElement: PropTypes.func,
onToggleLockElement: PropTypes.func,
bringSelectedElementToFront: PropTypes.func,
sendSelectedElementToBack: PropTypes.func,
languageLocale: PropTypes.string
};
var propTypes$i = {
zoomLevel: PropTypes.number,
onZoomIn: PropTypes.func,
onZoomOut: PropTypes.func,
translation: PropTypes.object
};
var _templateObject$e, _templateObject2$a, _templateObject3$7, _templateObject4$3, _templateObject5$1;
var Container$3 = styled.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n"])));
var ZoomControlWrapper = styled.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n border: 1px solid ", ";\n border-radius: 6px;\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n background: white;\n"])), theme.color.gray_200);
var ZoomButton = styled.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0 14px;\n cursor: pointer;\n"])));
var Divider = styled.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n width: 1px;\n height: 80%;\n background: rgba(77, 98, 119, 0.2);\n"])));
var ZoomPercentage = styled.p(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n padding: 0 14px;\n font-family: ", ";\n font-weight: ", ";\n color: ", ";\n"])), theme.fonts.primary, theme.fontWeights[500], theme.color.icon_gray);
var propTypes$h = {
varient: PropTypes.oneOf(Object.values(ButtonVarients)),
left: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
text: PropTypes.string,
marginBottom: PropTypes.number,
marginTop: PropTypes.number,
onClick: PropTypes.func
};
var _templateObject$d, _templateObject2$9;
var StyledButton = styled.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n padding: 10px;\n border-radius: 6px;\n border: 1px solid ", ";\n cursor: pointer;\n margin-top: ", "px;\n margin-bottom: ", "px;\n background: ", ";\n"])), theme.color.primary, function (_ref) {
var marginTop = _ref.marginTop;
return marginTop;
}, function (_ref2) {
var marginBottom = _ref2.marginBottom;
return marginBottom;
}, function (_ref3) {
var varient = _ref3.varient;
return varient === ButtonVarients.primary ? theme.color.primary : theme.color.white;
});
var IconWrapper$2 = styled.div(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral(["\n margin-right: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
var Button = function Button(_ref) {
var _ref$varient = _ref.varient,
varient = _ref$varient === void 0 ? ButtonVarients.secondary : _ref$varient,
left = _ref.left,
text = _ref.text,
_ref$marginBottom = _ref.marginBottom,
marginBottom = _ref$marginBottom === void 0 ? 0 : _ref$marginBottom,
_ref$marginTop = _ref.marginTop,
marginTop = _ref$marginTop === void 0 ? 0 : _ref$marginTop,
onClick = _ref.onClick,
style = _ref.style;
return /*#__PURE__*/React.createElement(StyledButton, {
varient: varient,
marginTop: marginTop,
marginBottom: marginBottom,
onClick: onClick,
style: style
}, left && /*#__PURE__*/React.createElement(IconWrapper$2, null, left), /*#__PURE__*/React.createElement(StyledText, {
fontSize: 14,
fontWeight: theme.fontWeights[600],
color: varient === ButtonVarients.primary ? theme.color.white : theme.color.primary
}, text));
};
Button.propTypes = propTypes$h;
var ZoomControls = function ZoomControls(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2;
var _ref$zoomLevel = _ref.zoomLevel,
zoomLevel = _ref$zoomLevel === void 0 ? 60 : _ref$zoomLevel,
onZoomIn = _ref.onZoomIn,
onZoomOut = _ref.onZoomOut,
languageLocale = _ref.languageLocale,
onSave = _ref.onSave,
showSaveButton = _ref.showSaveButton,
saveButtonText = _ref.saveButtonText;
return /*#__PURE__*/React.createElement(Container$3, null, showSaveButton && /*#__PURE__*/React.createElement(Button, {
text: saveButtonText || (TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.SAVE),
varient: ButtonVarients === null || ButtonVarients === void 0 ? void 0 : ButtonVarients.primary,
marginBottom: 10,
style: {
position: 'absolute',
top: -50,
zIndex: 400,
right: 0
},
onClick: onSave
}), /*#__PURE__*/React.createElement(Tooltip, {
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.ZOOM_IN_OUT,
position: "top"
}, /*#__PURE__*/React.createElement(ZoomControlWrapper, null, /*#__PURE__*/React.createElement(ZoomButton, {
onClick: onZoomOut
}, /*#__PURE__*/React.createElement(StyledImage, {
src: IconZoomOut
})), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(ZoomPercentage, null, zoomLevel, "%"), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(ZoomButton, {
onClick: onZoomIn
}, /*#__PURE__*/React.createElement(StyledImage, {
src: IconZoomIn
})))));
};
ZoomControls.propTypes = propTypes$i;
var propTypes$g = {
onDeleteSelectedElement: PropTypes.func,
onCopySelectedElement: PropTypes.func,
onToggleLockElement: PropTypes.func,
selectedElement: PropTypes.object,
bringSelectedElementToFront: PropTypes.func,
sendSelectedElementToBack: PropTypes.func,
languageLocale: PropTypes.string
};
var _templateObject$c;
var ToolBarContainer = styled.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n display: flex;\n padding: 12px 24px;\n background: ", ";\n gap: 15px;\n border-radius: 10px 10px 0px 0px;\n border: 1px solid ", ";\n border-bottom: none;\n align-items: center;\n"])), theme.color.gray_FDFCFC, theme.color.gray_EDEDED);
var BottomToolBarControls = function BottomToolBarControls(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _TEXT_DICTIONARY$lang5, _TEXT_DICTIONARY$lang6;
var onDeleteSelectedElement = _ref.onDeleteSelectedElement,
onCopySelectedElement = _ref.onCopySelectedElement,
onToggleLockElement = _ref.onToggleLockElement,
selectedElement = _ref.selectedElement,
bringSelectedElementToFront = _ref.bringSelectedElementToFront,
sendSelectedElementToBack = _ref.sendSelectedElementToBack,
languageLocale = _ref.languageLocale;
var BringFrontBackTabsData = [{
element: /*#__PURE__*/React.createElement(StyledImage, {
src: IconBringFront
}),
onClick: function onClick() {
bringSelectedElementToFront && bringSelectedElementToFront();
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.BRING_FORWARD
}, {
element: /*#__PURE__*/React.createElement(StyledImage, {
src: IconSentBack
}),
onClick: function onClick() {
sendSelectedElementToBack && sendSelectedElementToBack();
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.SEND_BACKWARD
}];
return /*#__PURE__*/React.createElement(ToolBarContainer, null, /*#__PURE__*/React.createElement(ToolsTabBar, {
disabled: !(selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable),
tabsData: BringFrontBackTabsData,
tooltipPosition: "top"
}), /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
tooltip: selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable ? TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.LOCK : TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang4 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang4 === void 0 ? void 0 : _TEXT_DICTIONARY$lang4.UNLOCK,
tooltipPosition: "top",
paddingRight: 14.6,
paddingLeft: 14.6,
height: 36,
marginRight: 0,
onClick: onToggleLockElement
}, /*#__PURE__*/React.createElement(StyledImage, {
src: selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable ? IconUnlock : IconLock,
height: 20,
width: 20
})), (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.type) !== (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr) && /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang5 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang5 === void 0 ? void 0 : _TEXT_DICTIONARY$lang5.COPY,
tooltipPosition: "top",
paddingRight: 14.6,
paddingLeft: 14.6,
height: 36,
marginRight: 0,
onClick: onCopySelectedElement,
disabled: !(selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable)
}, /*#__PURE__*/React.createElement(StyledImage, {
src: IconCopy
})), /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang6 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang6 === void 0 ? void 0 : _TEXT_DICTIONARY$lang6.DELETE,
tooltipPosition: "top",
paddingRight: 14.6,
paddingLeft: 14.6,
height: 36,
marginRight: 0,
onClick: onDeleteSelectedElement,
disabled: !(selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable)
}, /*#__PURE__*/React.createElement(StyledImage, {
src: IconDelete
})));
};
BottomToolBarControls.propTypes = propTypes$g;
var _templateObject$b;
var BottomToolbarWrapper = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n padding-right: 3%;\n padding-left: 5%;\n padding-bottom: ", "px;\n flex-wrap: wrap;\n gap: 5px;\n"])), function (_ref) {
var selectedTab = _ref.selectedTab;
return selectedTab ? 'space-between' : 'flex-end';
}, function (_ref2) {
var selectedTab = _ref2.selectedTab;
return selectedTab ? '6' : '14';
});
var propTypes$f = {
onUndo: PropTypes.func,
onRedo: PropTypes.func,
disableUndo: PropTypes.bool,
disableRedo: PropTypes.bool,
translation: PropTypes.object
};
var UndoRedoControls = function UndoRedoControls(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2;
var onUndo = _ref.onUndo,
onRedo = _ref.onRedo,
disableUndo = _ref.disableUndo,
disableRedo = _ref.disableRedo,
languageLocale = _ref.languageLocale;
var UndeRedoTabsData = [{
element: /*#__PURE__*/React.createElement(StyledImage, {
src: IconUndo
}),
onClick: function onClick() {
return onUndo();
},
disabled: disableUndo,
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.UNDO
}, {
element: /*#__PURE__*/React.createElement(StyledImage, {
src: IconRedo
}),
onClick: function onClick() {
return onRedo();
},
disabled: disableRedo,
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.REDO
}];
return /*#__PURE__*/React.createElement(ToolsTabBar, {
height: 44,
tabPadding: "12px 17px",
tabsData: UndeRedoTabsData,
tooltipPosition: "top"
});
};
UndoRedoControls.propTypes = propTypes$f;
var BottomToolBar = function BottomToolBar(_ref) {
var selectedTab = _ref.selectedTab,
zoomPercentage = _ref.zoomPercentage,
onChangeZoomPercentage = _ref.onChangeZoomPercentage,
onUndo = _ref.onUndo,
onRedo = _ref.onRedo,
disableUndo = _ref.disableUndo,
disableRedo = _ref.disableRedo,
selectedElement = _ref.selectedElement,
onDeleteSelectedElement = _ref.onDeleteSelectedElement,
onCopySelectedElement = _ref.onCopySelectedElement,
onToggleLockElement = _ref.onToggleLockElement,
bringSelectedElementToFront = _ref.bringSelectedElementToFront,
sendSelectedElementToBack = _ref.sendSelectedElementToBack,
languageLocale = _ref.languageLocale,
onSave = _ref.onSave,
showSaveButton = _ref.showSaveButton,
saveButtonText = _ref.saveButtonText;
var onZoomIn = function onZoomIn() {
if (zoomPercentage < 300) {
onChangeZoomPercentage(zoomPercentage + 10);
}
};
var onZoomOut = function onZoomOut() {
if (zoomPercentage > 20) {
onChangeZoomPercentage(zoomPercentage - 10);
}
};
return /*#__PURE__*/React.createElement(BottomToolbarWrapper, {
selectedTab: selectedTab
}, selectedTab && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UndoRedoControls, {
onUndo: onUndo,
onRedo: onRedo,
disableUndo: disableUndo,
disableRedo: disableRedo,
languageLocale: languageLocale
}), selectedElement ? /*#__PURE__*/React.createElement(BottomToolBarControls, {
onDeleteSelectedElement: onDeleteSelectedElement,
onCopySelectedElement: onCopySelectedElement,
onToggleLockElement: onToggleLockElement,
selectedElement: selectedElement,
bringSelectedElementToFront: bringSelectedElementToFront,
sendSelectedElementToBack: sendSelectedElementToBack,
languageLocale: languageLocale
}) : /*#__PURE__*/React.createElement("div", {
style: {
height: 63
}
})), /*#__PURE__*/React.createElement(ZoomControls, {
zoomLevel: zoomPercentage,
onZoomIn: onZoomIn,
onZoomOut: onZoomOut,
languageLocale: languageLocale,
onSave: onSave,
showSaveButton: showSaveButton,
saveButtonText: saveButtonText
}));
};
BottomToolBar.propTypes = propTypes$j;
var propTypes$e = {
id: PropTypes.string,
element: PropTypes.object,
onClick: PropTypes.func,
onDragEnd: PropTypes.func,
onTransformEnd: PropTypes.func,
onDragMove: PropTypes.func
};
var CanvasImage = function CanvasImage(_ref) {
var id = _ref.id,
element = _ref.element,
_onClick = _ref.onClick,
_onDragEnd = _ref.onDragEnd,
_onTransformEnd = _ref.onTransformEnd,
onDragMove = _ref.onDragMove;
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),
loaded = _useState2[0],
setLoaded = _useState2[1];
var _useState3 = React.useState(null),
_useState4 = _slicedToArray(_useState3, 2),
image = _useState4[0],
setImage = _useState4[1];
React.useEffect(function () {
// const reader = new FileReader();
// reader.onload = () => {
var img = new window.Image();
img.crossOrigin = 'anonymous';
img.src = element === null || element === void 0 ? void 0 : element.src;
img.onload = function () {
setImage(img);
setLoaded(true);
};
// };
// reader.readAsDataURL(file);
}, [element]);
if (loaded) {
return /*#__PURE__*/React.createElement(reactKonva.Image, _extends({
id: id,
image: image
}, element, {
width: element === null || element === void 0 ? void 0 : element.width,
height: element === null || element === void 0 ? void 0 : element.height,
onClick: function onClick() {
return _onClick && _onClick();
},
onDragEnd: function onDragEnd(e) {
return _onDragEnd && _onDragEnd(e);
},
onDragMove: onDragMove,
onTransformEnd: function onTransformEnd(e) {
_onTransformEnd && _onTransformEnd(e);
},
strokeScaleEnabled: false
}));
} else {
return null;
}
};
CanvasImage.propTypes = propTypes$e;
var propTypes$d = {
element: PropTypes.object,
onClick: PropTypes.func,
onDragEnd: PropTypes.func,
onTransformEnd: PropTypes.func,
onDragMove: PropTypes.func,
LogoTitle: PropTypes.string
};
var QrElement = function QrElement(_ref) {
var element = _ref.element,
_onClick = _ref.onClick,
_onDragEnd = _ref.onDragEnd,
_onTransformEnd = _ref.onTransformEnd,
onDragMove = _ref.onDragMove,
LogoTitle = _ref.LogoTitle;
var innerRectWidth = calculatePercentageValue(element === null || element === void 0 ? void 0 : element.width, 24);
var innerRectHeight = calculatePercentageValue(element === null || element === void 0 ? void 0 : element.height, 24);
var innerRectX = calculatePercentageValue(element === null || element === void 0 ? void 0 : element.width, 38);
var innerRectY = calculatePercentageValue(element === null || element === void 0 ? void 0 : element.height, 38);
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),
loaded = _useState2[0],
setLoaded = _useState2[1];
var _useState3 = React.useState(null),
_useState4 = _slicedToArray(_useState3, 2),
logo = _useState4[0],
setLogo = _useState4[1];
var _useState5 = React.useState(null),
_useState6 = _slicedToArray(_useState5, 2),
image = _useState6[0],
setImage = _useState6[1];
React.useEffect(function () {
if (!(element !== null && element !== void 0 && element.qrLogo)) {
return;
}
var img = new window.Image();
img.crossOrigin = 'anonymous';
img.src = element === null || element === void 0 ? void 0 : element.qrLogo;
img.onload = function () {
var scaleX = innerRectWidth / img.width;
var scaleY = innerRectHeight / img.height;
var scale = Math.min(scaleX, scaleY);
setLogo({
img: img,
scale: scale
});
};
}, [element]);
var addQR = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
return _regenerator().w(function (_context) {
while (1) switch (_context.n) {
case 0:
try {
QRCode.toDataURL(element === null || element === void 0 ? void 0 : element.qrText, {
margin: 0,
width: 110
}, function (err, url) {
var img = new window.Image();
img.crossOrigin = 'anonymous';
img.src = url;
img.onload = function () {
var scaleX = (element === null || element === void 0 ? void 0 : element.width) / img.width;
var scaleY = element.height / img.height;
var scale = Math.min(scaleX, scaleY);
setImage({
img: img,
scale: scale
});
setLoaded(true);
};
});
} catch (err) {
// eslint-disable-next-line no-console
console.error('Failed to generate QR code', err);
}
case 1:
return _context.a(2);
}
}, _callee);
}));
return function addQR() {
return _ref2.apply(this, arguments);
};
}();
React.useEffect(function () {
addQR();
}, [element]);
if (loaded) {
return /*#__PURE__*/React.createElement(reactKonva.Group, _extends({
key: element.id
}, element, {
id: element.id,
onClick: function onClick() {
return _onClick && _onClick();
},
onDragEnd: function onDragEnd(e) {
return _onDragEnd && _onDragEnd(e);
},
onDragMove: onDragMove,
onTransformEnd: function onTransformEnd(e) {
_onTransformEnd && _onTransformEnd(e);
}
}), /*#__PURE__*/React.createElement(reactKonva.Rect, {
width: element === null || element === void 0 ? void 0 : element.width,
height: element === null || element === void 0 ? void 0 : element.height,
fillPatternImage: image === null || image === void 0 ? void 0 : image.img,
fillPatternRepeat: "no-repeat",
fillPatternScale: {
x: (element === null || element === void 0 ? void 0 : element.width) / (image === null || image === void 0 ? void 0 : image.img.width),
y: (element === null || element === void 0 ? void 0 : element.height) / (image === null || image === void 0 ? void 0 : image.img.height)
},
stroke: element === null || element === void 0 ? void 0 : element.stroke,
strokeWidth: element === null || element === void 0 ? void 0 : element.strokeWidth,
opacity: element === null || element === void 0 ? void 0 : element.opacity,
strokeScaleEnabled: false
}), (element === null || element === void 0 ? void 0 : element.logoVisible) && /*#__PURE__*/React.createElement(reactKonva.Group, {
x: innerRectX,
y: innerRectY
}, /*#__PURE__*/React.createElement(reactKonva.Rect, {
width: innerRectWidth,
height: innerRectHeight,
fill: theme.color.white
}), logo ? /*#__PURE__*/React.createElement(reactKonva.Rect, {
width: innerRectWidth,
height: innerRectHeight,
fillPatternImage: logo === null || logo === void 0 ? void 0 : logo.img,
fillPatternRepeat: "no-repeat",
fillPatternScale: {
x: innerRectHeight / (logo === null || logo === void 0 ? void 0 : logo.img.width),
y: innerRectHeight / (logo === null || logo === void 0 ? void 0 : logo.img.height)
}
}) : /*#__PURE__*/React.createElement(reactKonva.Text, {
text: LogoTitle,
fontSize: 8,
fill: theme.color.gray_9DA1A7,
x: 3,
y: innerRectHeight / 2 - 3,
fontFamily: theme.fonts.primary,
fontStyle: theme.fontWeights[600]
})));
} else {
return null;
}
};
QrElement.propTypes = propTypes$d;
var propTypes$c = {
element: PropTypes.object,
onClick: PropTypes.func,
onDragEnd: PropTypes.func,
onTransformEnd: PropTypes.func,
onTransform: PropTypes.func,
onChangeTextContent: PropTypes.func,
onChangeTextProperty: PropTypes.func,
onDragMove: PropTypes.func
};
var TextEditor = function TextEditor(_ref) {
var textNodeRef = _ref.textNodeRef,
value = _ref.value,
onBlur = _ref.onBlur,
_onChange = _ref.onChange,
textWidth = _ref.textWidth;
var textareaRef = React.useRef(null);
var _useState = React.useState({}),
_useState2 = _slicedToArray(_useState, 2),
styles = _useState2[0],
setStyles = _useState2[1];
React.useEffect(function () {
var _textNodeRef$attrs, _stg$attrs, _stg$attrs2, _textNodeRef$fontStyl, _textNodeRef$fontVari, _textNodeRef$textDeco;
if (!textNodeRef) return;
// const position = textNodeRef?.absolutePosition();
// const scale = textNodeRef?.getAbsoluteScale();
var stg = textNodeRef === null || textNodeRef === void 0 ? void 0 : textNodeRef.getStage().findOne("#".concat(textNodeRef === null || textNodeRef === void 0 || (_textNodeRef$attrs = textNodeRef.attrs) === null || _textNodeRef$attrs === void 0 ? void 0 : _textNodeRef$attrs.id));
var styleObj = {
position: 'absolute',
top: "".concat(stg === null || stg === void 0 || (_stg$attrs = stg.attrs) === null || _stg$attrs === void 0 ? void 0 : _stg$attrs.y, "px"),
left: "".concat(stg === null || stg === void 0 || (_stg$attrs2 = stg.attrs) === null || _stg$attrs2 === void 0 ? void 0 : _stg$attrs2.x, "px"),
width: "".concat(textWidth, "px"),
height: "".concat(textNodeRef === null || textNodeRef === void 0 ? void 0 : textNodeRef.getHeight(), "px"),
fontSize: "".concat(textNodeRef.fontSize(), "px"),
fontFamily: textNodeRef.fontFamily(),
lineHeight: textNodeRef.lineHeight(),
color: textNodeRef.fill(),
background: 'transparent',
border: 'none',
padding: '0px',
margin: '0px',
overflow: 'hidden',
outline: 'none',
resize: 'none',
transformOrigin: 'left top',
textAlign: textNodeRef.align(),
transform: "rotateZ(".concat(textNodeRef.rotation(), "deg)"),
minHeight: '1em',
whiteSpace: 'normal',
userSelect: 'text',
fontStyle: (textNodeRef === null || textNodeRef === void 0 || (_textNodeRef$fontStyl = textNodeRef.fontStyle) === null || _textNodeRef$fontStyl === void 0 ? void 0 : _textNodeRef$fontStyl.call(textNodeRef)) || 'normal',
fontWeight: (textNodeRef === null || textNodeRef === void 0 || (_textNodeRef$fontVari = textNodeRef.fontVariant) === null || _textNodeRef$fontVari === void 0 ? void 0 : _textNodeRef$fontVari.call(textNodeRef)) || 400,
textDecoration: (textNodeRef === null || textNodeRef === void 0 || (_textNodeRef$textDeco = textNodeRef.textDecoration) === null || _textNodeRef$textDeco === void 0 ? void 0 : _textNodeRef$textDeco.call(textNodeRef)) || 'none'
};
setStyles(styleObj);
}, [textNodeRef === null || textNodeRef === void 0 ? void 0 : textNodeRef.current, value, PropTypes.element]);
React.useEffect(function () {
setTimeout(function () {
if (textareaRef !== null && textareaRef !== void 0 && textareaRef.current) {
var _textareaRef$current, _textareaRef$current2;
textareaRef === null || textareaRef === void 0 || (_textareaRef$current = textareaRef.current) === null || _textareaRef$current === void 0 || _textareaRef$current.focus();
textareaRef === null || textareaRef === void 0 || (_textareaRef$current2 = textareaRef.current) === null || _textareaRef$current2 === void 0 || _textareaRef$current2.select();
}
}, 200);
}, []);
return /*#__PURE__*/React.createElement(reactKonvaUtils.Html, null, /*#__PURE__*/React.createElement("textarea", {
ref: textareaRef,
style: styles,
value: value,
onChange: function onChange(e) {
_onChange(e.target.value);
},
onBlur: onBlur
}));
};
TextEditor.propTypes = propTypes$c;
var EditableText = function EditableText(_ref) {
var element = _ref.element,
trRef = _ref.trRef,
onClick = _ref.onClick,
_onDragEnd = _ref.onDragEnd,
onTransformEnd = _ref.onTransformEnd,
id = _ref.id,
onTransform = _ref.onTransform,
onChangeTextContent = _ref.onChangeTextContent,
onDragMove = _ref.onDragMove;
var textRef = React.useRef();
var _useState = React.useState(element === null || element === void 0 ? void 0 : element.width),
_useState2 = _slicedToArray(_useState, 2),
textWidth = _useState2[0],
setTextWidth = _useState2[1];
var _useState3 = React.useState(element === null || element === void 0 ? void 0 : element.fontSize),
_useState4 = _slicedToArray(_useState3, 2),
textFontSize = _useState4[0],
setTextFontSize = _useState4[1];
var _useState5 = React.useState(false),
_useState6 = _slicedToArray(_useState5, 2),
isEditing = _useState6[0],
setIsEditing = _useState6[1];
var _useState7 = React.useState(element === null || element === void 0 ? void 0 : element.text),
_useState8 = _slicedToArray(_useState7, 2),
text = _useState8[0],
setText = _useState8[1];
var _useState9 = React.useState(false),
_useState0 = _slicedToArray(_useState9, 2),
isFontLoaded = _useState0[0],
setIsFontLoaded = _useState0[1];
React.useEffect(function () {
setIsFontLoaded(false);
setTimeout(function () {
setIsFontLoaded(true);
}, 150);
}, [element === null || element === void 0 ? void 0 : element.fontFamily, element === null || element === void 0 ? void 0 : element.fontWeight, element === null || element === void 0 ? void 0 : element.fontStyle]);
React.useEffect(function () {
setTextWidth(element === null || element === void 0 ? void 0 : element.width);
setText(element === null || element === void 0 ? void 0 : element.text);
setTextFontSize(element === null || element === void 0 ? void 0 : element.fontSize);
}, [element]);
var tranform = function tranform(e) {
var transformer = trRef.current;
var activeAnchor = transformer.getActiveAnchor();
if (activeAnchor === 'middle-right' || activeAnchor === 'middle-left') {
var node = e.target;
var scaleX = sanitizeNumber(node.scaleX(), 1);
var updatedWidth = sanitizeNumber(node.width() * scaleX, element.width);
var updatedObject = _objectSpread2(_objectSpread2({}, node.attrs), {}, {
width: updatedWidth,
scaleX: 1,
scaleY: 1
});
delete updatedObject['ref'];
setTextWidth(updatedWidth);
onTransform && onTransform(updatedObject);
node.scaleX(1);
node.scaleY(1);
}
};
var handleTransformEnd = function handleTransformEnd(e) {
var transformer = trRef.current;
var activeAnchor = transformer.getActiveAnchor();
if (activeAnchor === 'middle-right' || activeAnchor === 'middle-left') {
onTransformEnd && onTransformEnd(e);
return;
}
var node = textRef.current;
var nodeAttrs = node.attrs;
var scaleX = sanitizeNumber(node.scaleX(), 1);
var newFontSize = nodeAttrs.fontSize * scaleX;
var updatedWidth = sanitizeNumber(node.width() * scaleX, nodeAttrs.width);
node.scaleX(1);
node.scaleY(1);
var updatedObject = _objectSpread2(_objectSpread2({}, nodeAttrs), {}, {
width: updatedWidth,
fontSize: newFontSize
});
setTextFontSize(newFontSize);
setTextWidth(updatedWidth);
delete updatedObject['ref'];
onTransform && onTransform(updatedObject);
onTransformEnd && onTransformEnd(e);
};
var handleTextDblClick = function handleTextDblClick() {
setIsEditing(true);
};
var handleTextChange = function handleTextChange(newText) {
setText(newText);
onChangeTextContent(newText);
};
var onSelect = function onSelect() {
var _textRef$current;
// const node = textRef?.current?.target;
var width = textRef === null || textRef === void 0 || (_textRef$current = textRef.current) === null || _textRef$current === void 0 ? void 0 : _textRef$current.getWidth();
if (width) {
setTextWidth(width);
// onChangeTextProperty('width', width);
}
// const scaleX = sanitizeNumber(node?.scaleX(), 1);
// const updatedWidth = sanitizeNumber(node?.width() * scaleX, element?.width);
// console.error(textRef?.current?.getWidth());
onClick && onClick();
};
if (!isFontLoaded) {
return /*#__PURE__*/React.createElement(reactKonva.Text, _extends({
ref: textRef,
key: id
}, element, {
id: element.id,
fontVariant: element === null || element === void 0 ? void 0 : element.fontWeight,
align: element === null || element === void 0 ? void 0 : element.textAlign,
width: textWidth,
fontSize: textFontSize,
text: text,
fill: element === null || element === void 0 ? void 0 : element.color,
opacity: 0,
visible: false
}));
}
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(reactKonva.Text, _extends({
ref: textRef,
key: id
}, element, {
id: element.id,
fontVariant: element === null || element === void 0 ? void 0 : element.fontWeight,
align: element === null || element === void 0 ? void 0 : element.textAlign,
width: textWidth,
fontSize: textFontSize,
text: text,
fill: element === null || element === void 0 ? void 0 : element.color,
onClick: function onClick() {
return onSelect();
},
onTransform: function onTransform(e) {
return tranform(e);
},
onDragEnd: function onDragEnd(e) {
return _onDragEnd && _onDragEnd(e);
},
onTransformEnd: function onTransformEnd(e) {
handleTransformEnd(e);
},
onDragMove: onDragMove,
onDblClick: handleTextDblClick,
onDblTap: handleTextDblClick,
visible: !isEditing
})), isEditing && /*#__PURE__*/React.createElement(TextEditor, {
value: text,
textWidth: textWidth,
textNodeRef: textRef === null || textRef === void 0 ? void 0 : textRef.current,
onChange: handleTextChange,
onBlur: function onBlur() {
setIsEditing(false);
// onChangeTextContent(text);
}
}));
};
EditableText.propTypes = propTypes$c;
var useKonvaSnapping = function useKonvaSnapping(params) {
var _params$snapRange, _params$guidelineColo, _params$guidelineDash, _params$showGuideline, _params$guidelineThic, _params$snapToStageCe, _params$snapToStageBo, _params$snapToShapes;
var defaultParams = {
snapRange: (_params$snapRange = params.snapRange) !== null && _params$snapRange !== void 0 ? _params$snapRange : 3,
guidelineColor: (_params$guidelineColo = params.guidelineColor) !== null && _params$guidelineColo !== void 0 ? _params$guidelineColo : 'rgb(0, 161, 255)',
guidelineDash: (_params$guidelineDash = params.guidelineDash) !== null && _params$guidelineDash !== void 0 ? _params$guidelineDash : true,
showGuidelines: (_params$showGuideline = params.showGuidelines) !== null && _params$showGuideline !== void 0 ? _params$showGuideline : true,
guidelineThickness: (_params$guidelineThic = params.guidelineThickness) !== null && _params$guidelineThic !== void 0 ? _params$guidelineThic : 1,
snapToStageCenter: (_params$snapToStageCe = params.snapToStageCenter) !== null && _params$snapToStageCe !== void 0 ? _params$snapToStageCe : true,
snapToStageBorders: (_params$snapToStageBo = params.snapToStageBorders) !== null && _params$snapToStageBo !== void 0 ? _params$snapToStageBo : true,
snapToShapes: (_params$snapToShapes = params.snapToShapes) !== null && _params$snapToShapes !== void 0 ? _params$snapToShapes : true
};
var oppositeAnchors = {
'top-left': 'bottom-right',
'top-right': 'bottom-left',
'bottom-right': 'top-left',
'bottom-left': 'top-right'
};
var getSnappingPoints = function getSnappingPoints(e) {
var snapToStageCenter = defaultParams.snapToStageCenter,
snapToStageBorders = defaultParams.snapToStageBorders,
snapToShapes = defaultParams.snapToShapes;
var stage = e.currentTarget.getStage();
var vertical = [];
var horizontal = [];
if (snapToStageCenter) {
vertical.push(stage.attrs.width / 2);
horizontal.push(stage.attrs.height / 2);
}
if (snapToStageBorders) {
horizontal.push(0, stage.attrs.height);
vertical.push(0, stage.attrs.width);
}
if (snapToShapes) {
var _stage$children;
stage === null || stage === void 0 || (_stage$children = stage.children) === null || _stage$children === void 0 || _stage$children.forEach(function (layer) {
var _layer$children;
layer === null || layer === void 0 || (_layer$children = layer.children) === null || _layer$children === void 0 || _layer$children.forEach(function (layerChild) {
var _layerChild$children;
layerChild === null || layerChild === void 0 || (_layerChild$children = layerChild.children) === null || _layerChild$children === void 0 || _layerChild$children.forEach(function (obj) {
var box = obj.getClientRect();
if (e.target !== obj && obj.getName() !== 'guid-line' && !(obj instanceof Konva.Transformer)) {
vertical.push(box.x, box.x + box.width, box.x + box.width / 2);
horizontal.push(box.y, box.y + box.height, box.y + box.height / 2);
}
});
});
});
}
return {
vertical: vertical,
horizontal: horizontal
};
};
var createLine = function createLine(Layer, isHorizontal, lineX, lineY) {
var guidelineColor = defaultParams.guidelineColor,
showGuidelines = defaultParams.showGuidelines,
guidelineThickness = defaultParams.guidelineThickness,
guidelineDash = defaultParams.guidelineDash;
if (!showGuidelines) return;
var points = isHorizontal ? [-6e3, 0, 6000, 0] : [0, -6e3, 0, 6000];
var line = new Konva.Line({
points: points,
stroke: guidelineColor,
strokeWidth: guidelineThickness,
name: 'guid-line',
dash: guidelineDash ? [4, 6] : [0, 0]
});
Layer.add(line);
line.absolutePosition({
x: lineX,
y: lineY
});
};
function dotProduct(v1, v2) {
return v1.x * v2.x + v1.y * v2.y;
}
function vectorProject(a, b) {
var dotAB = dotProduct(a, b);
var dotBB = dotProduct(b, b);
var scalar = dotAB / dotBB;
return {
x: scalar * b.x,
y: scalar * b.y
};
}
function calculateSlope(point1, point2) {
var deltaX = point2.x - point1.x;
if (deltaX === 0) {
throw new Error("Slope is undefined for vertical lines (deltaX is zero). ".concat(point2.x, ", ").concat(point1.x));
}
var deltaY = point2.y - point1.y;
return deltaY / deltaX;
}
var handleDragging = function handleDragging(e) {
var Layer = e.target.parent;
// Clear existing guidelines
Layer.find('.guid-line').forEach(function (line) {
return line.destroy();
});
var _getSnappingPoints = getSnappingPoints(e),
horizontal = _getSnappingPoints.horizontal,
vertical = _getSnappingPoints.vertical;
var newPos = {
x: e.target.absolutePosition().x,
y: e.target.absolutePosition().y
};
var guideLinesX = [];
var guideLinesY = [];
var snapRange = defaultParams.snapRange;
// Snap vertically
vertical.forEach(function (breakPoint) {
if (Math.abs(e.target.getClientRect().x - breakPoint) <= snapRange) {
newPos.x = breakPoint + e.target.absolutePosition().x - e.target.getClientRect().x;
guideLinesX.push(breakPoint);
}
if (Math.abs(e.target.getClientRect().x - breakPoint + e.target.getClientRect().width / 2) <= snapRange) {
newPos.x = breakPoint + e.target.absolutePosition().x - e.target.getClientRect().x - e.target.getClientRect().width / 2;
guideLinesX.push(breakPoint);
}
if (Math.abs(e.target.getClientRect().x - breakPoint + e.target.getClientRect().width) <= snapRange) {
newPos.x = breakPoint + e.target.absolutePosition().x - e.target.getClientRect().x - e.target.getClientRect().width;
guideLinesX.push(breakPoint);
}
});
e.target.absolutePosition(newPos);
guideLinesX.forEach(function (line) {
if (Math.round(e.target.getClientRect().x - line) === 0 || Math.round(e.target.getClientRect().x - line + e.target.getClientRect().width / 2) === 0 || Math.round(e.target.getClientRect().x - line + e.target.getClientRect().width) === 0) {
createLine(Layer, false, line, 0);
}
});
// Snap horizontally
horizontal.forEach(function (breakPoint) {
if (Math.abs(e.target.getClientRect().y - breakPoint) <= snapRange) {
newPos.y = breakPoint + e.target.absolutePosition().y - e.target.getClientRect().y;
guideLinesY.push(breakPoint);
}
if (Math.abs(e.target.getClientRect().y - breakPoint + e.target.getClientRect().height) <= snapRange) {
newPos.y = breakPoint + e.target.absolutePosition().y - e.target.getClientRect().y - e.target.getClientRect().height;
guideLinesY.push(breakPoint);
}
if (Math.abs(e.target.getClientRect().y - breakPoint + e.target.getClientRect().height / 2) <= snapRange) {
newPos.y = breakPoint + e.target.absolutePosition().y - e.target.getClientRect().y - e.target.getClientRect().height / 2;
guideLinesY.push(breakPoint);
}
});
e.target.absolutePosition(newPos);
guideLinesY.forEach(function (line) {
if (Math.round(e.target.getClientRect().y - line) === 0 || Math.round(e.target.getClientRect().y - line + e.target.getClientRect().height) === 0 || Math.round(e.target.getClientRect().y - line + e.target.getClientRect().height / 2) === 0) {
createLine(Layer, true, 0, line);
}
});
};
var handleResizing = function handleResizing(e) {
var Layer = e.target.parent;
var snapRange = defaultParams.snapRange;
var _getSnappingPoints2 = getSnappingPoints(e),
horizontal = _getSnappingPoints2.horizontal,
vertical = _getSnappingPoints2.vertical;
if (!e.currentTarget.keepRatio() || e.currentTarget.keepRatio() && !!!oppositeAnchors[e.currentTarget._movingAnchorName]) {
e.currentTarget.anchorDragBoundFunc(function (oldAbsPos, newAbsPos) {
Layer.find('.guid-line').forEach(function (line) {
return line.destroy();
});
var bounds = {
x: newAbsPos.x,
y: newAbsPos.y
};
//console.log(Konva.Util.haveIntersection(e.target.getClientRect(),breakPoint))
if (e.currentTarget.getActiveAnchor() === 'rotater') return bounds;
var _iterator = _createForOfIteratorHelper(vertical),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var breakPoint = _step.value;
if (Math.abs(newAbsPos.x - breakPoint) <= snapRange && Math.abs(oldAbsPos.x - breakPoint) <= snapRange + 1) {
bounds.x = breakPoint;
createLine(Layer, false, breakPoint, 0);
break;
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
var _iterator2 = _createForOfIteratorHelper(horizontal),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var _breakPoint = _step2.value;
if (Math.abs(newAbsPos.y - _breakPoint) <= snapRange && Math.abs(oldAbsPos.y - _breakPoint) <= snapRange + 1) {
bounds.y = _breakPoint;
createLine(Layer, true, 0, _breakPoint);
break;
}
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
return bounds;
});
} else {
e.currentTarget.anchorDragBoundFunc(function (oldAbsPos, newPos) {
Layer.find('.guid-line').forEach(function (line) {
return line.destroy();
});
var currentAnchorName = e.currentTarget._movingAnchorName;
var oppositeAnchorName = oppositeAnchors[currentAnchorName];
var movingAnchor = e.currentTarget.findOne(".".concat(currentAnchorName));
// Capture the anchor's starting absolute position:
var anchorStartPosition = movingAnchor.getAbsolutePosition();
// Do nothing for the rotater anchor.
if (currentAnchorName === 'rotater') {
return newPos;
}
var oppositeElement = e.currentTarget.findOne(".".concat(oppositeAnchorName));
if (!oppositeElement) return newPos;
var oppositePoint = oppositeElement.getAbsolutePosition();
var slope = calculateSlope(anchorStartPosition, oppositePoint);
// Calculate the vector from the starting anchor position to the opposite anchor.
var transformVector = {
x: anchorStartPosition.x - oppositePoint.x,
y: anchorStartPosition.y - oppositePoint.y
};
// Compute the movement delta from the starting position.
var delta = {
x: newPos.x - anchorStartPosition.x,
y: newPos.y - anchorStartPosition.y
};
// Project the delta onto the transform vector.
var projectedDelta = vectorProject(delta, transformVector);
// Compute the candidate new position (before snapping).
var nextPos = {
x: anchorStartPosition.x + projectedDelta.x,
y: anchorStartPosition.y + projectedDelta.y
};
var _iterator3 = _createForOfIteratorHelper(horizontal),
_step3;
try {
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
var breakPoint = _step3.value;
if (Math.abs(nextPos.y - breakPoint) <= snapRange) {
nextPos.y = breakPoint;
nextPos.x = anchorStartPosition.x + (breakPoint - anchorStartPosition.y) / slope;
createLine(Layer, true, 0, breakPoint);
break;
}
}
} catch (err) {
_iterator3.e(err);
} finally {
_iterator3.f();
}
var _iterator4 = _createForOfIteratorHelper(vertical),
_step4;
try {
for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
var _breakPoint2 = _step4.value;
if (Math.abs(nextPos.x - _breakPoint2) <= snapRange) {
nextPos.x = _breakPoint2;
nextPos.y = anchorStartPosition.y + slope * (_breakPoint2 - anchorStartPosition.x);
createLine(Layer, false, _breakPoint2, 0);
break;
}
}
} catch (err) {
_iterator4.e(err);
} finally {
_iterator4.f();
}
return nextPos;
});
}
};
var handleResizeEnd = function handleResizeEnd(e) {
var Layer = e.target.parent;
e.currentTarget.anchorDragBoundFunc(function (oldAbsPos, newPos) {
return newPos;
});
Layer.find('.guid-line').forEach(function (line) {
return line.destroy();
});
};
var handleDragEnd = function handleDragEnd(e) {
var Layer = e.target.parent;
Layer.find('.guid-line').forEach(function (line) {
return line.destroy();
});
};
return {
handleDragging: handleDragging,
handleResizing: handleResizing,
handleResizeEnd: handleResizeEnd,
handleDragEnd: handleDragEnd
};
};
var Editor = function Editor(_ref) {
var _TEXT_DICTIONARY$lang;
var selectedTab = _ref.selectedTab,
languageLocale = _ref.languageLocale,
_ref$title = _ref.title,
title = _ref$title === void 0 ? TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.TITLE : _ref$title,
zoomPercentage = _ref.zoomPercentage,
onChangeZoomPercentage = _ref.onChangeZoomPercentage,
editorHeight = _ref.editorHeight,
editorWidth = _ref.editorWidth,
onSetBackgroundColor = _ref.onSetBackgroundColor,
elements = _ref.elements,
history = _ref.history,
redoStack = _ref.redoStack,
onSetBackgroundImage = _ref.onSetBackgroundImage,
onUndo = _ref.onUndo,
onRedo = _ref.onRedo,
shapeStrokeColor = _ref.shapeStrokeColor,
shapeStrokeWidth = _ref.shapeStrokeWidth,
shapeFillColor = _ref.shapeFillColor,
onChangeShapeStrokeColor = _ref.onChangeShapeStrokeColor,
onChangeShapeStrokeWidth = _ref.onChangeShapeStrokeWidth,
onChangeShapeFill = _ref.onChangeShapeFill,
shapeOpacity = _ref.shapeOpacity,
onChangeShapeOpacity = _ref.onChangeShapeOpacity,
selectedElement = _ref.selectedElement,
onSelectElement = _ref.onSelectElement,
stageRef = _ref.stageRef,
saveHistory = _ref.saveHistory,
onChangeBackgroundImageOpacity = _ref.onChangeBackgroundImageOpacity,
backgroundImageOpacity = _ref.backgroundImageOpacity,
onDeleteSelectedElement = _ref.onDeleteSelectedElement,
onCopySelectedElement = _ref.onCopySelectedElement,
onToggleLockElement = _ref.onToggleLockElement,
bringSelectedElementToFront = _ref.bringSelectedElementToFront,
sendSelectedElementToBack = _ref.sendSelectedElementToBack,
imageStrokeWidth = _ref.imageStrokeWidth,
imageStrokeColor = _ref.imageStrokeColor,
imageOpacity = _ref.imageOpacity,
onChangeImageStrokeWidth = _ref.onChangeImageStrokeWidth,
onChangeImageStrokeColor = _ref.onChangeImageStrokeColor,
onChangeImageOpacity = _ref.onChangeImageOpacity,
qrStrokeWidth = _ref.qrStrokeWidth,
qrStrokeColor = _ref.qrStrokeColor,
qrOpacity = _ref.qrOpacity,
onChangeQrStrokeWidth = _ref.onChangeQrStrokeWidth,
onChangeQrStrokeColor = _ref.onChangeQrStrokeColor,
onChangeQrOpacity = _ref.onChangeQrOpacity,
defaultTextProps = _ref.defaultTextProps,
onChangeTextProperty = _ref.onChangeTextProperty,
onSetPageSize = _ref.onSetPageSize,
selectedPageSize = _ref.selectedPageSize,
loadingImages = _ref.loadingImages,
loadingFonts = _ref.loadingFonts,
uploadImageCallBack = _ref.uploadImageCallBack,
setLoadingUploadImage = _ref.setLoadingUploadImage,
cuttingGuideStroke = _ref.cuttingGuideStroke,
cuttingGuideStrokeColor = _ref.cuttingGuideStrokeColor,
onChangeCuttingGuideProp = _ref.onChangeCuttingGuideProp,
onSave = _ref.onSave,
showSaveButton = _ref.showSaveButton,
onSetSelectedTab = _ref.onSetSelectedTab,
saveButtonText = _ref.saveButtonText,
onRemoveBackgroundImage = _ref.onRemoveBackgroundImage,
showBackgroundImagePicker = _ref.showBackgroundImagePicker,
showOpacityPicker = _ref.showOpacityPicker,
changeSelectedElementProperty = _ref.changeSelectedElementProperty;
var transformerRef = React.useRef(null);
React.useEffect(function () {
if (transformerRef !== null && transformerRef !== void 0 && transformerRef.current) {
var _stageRef$current;
var selectedNode = stageRef === null || stageRef === void 0 || (_stageRef$current = stageRef.current) === null || _stageRef$current === void 0 ? void 0 : _stageRef$current.findOne("#".concat(selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id));
if (selectedNode) {
transformerRef === null || transformerRef === void 0 || transformerRef.current.nodes([selectedNode]);
transformerRef === null || transformerRef === void 0 || transformerRef.current.getLayer().batchDraw();
} else {
transformerRef === null || transformerRef === void 0 || transformerRef.current.nodes([]);
}
}
}, [selectedElement]);
var _useKonvaSnapping = useKonvaSnapping({
guidelineColor: 'blue',
guidelineDash: true,
snapToStageCenter: true,
snapRange: 5,
guidelineThickness: 1,
showGuidelines: true,
snapToShapes: true,
snapToStageBorders: true
}),
handleDragging = _useKonvaSnapping.handleDragging,
handleDragEnd = _useKonvaSnapping.handleDragEnd,
handleResizing = _useKonvaSnapping.handleResizing,
handleResizeEnd = _useKonvaSnapping.handleResizeEnd;
// console.error({ selectedElement });
var canvasBackgroundColor = React.useMemo(function () {
var backgroundColor;
var backgroundIndex = elements === null || elements === void 0 ? void 0 : elements.findIndex(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundColor);
});
if (backgroundIndex > -1) {
var _elements$backgroundI;
backgroundColor = elements === null || elements === void 0 || (_elements$backgroundI = elements[backgroundIndex]) === null || _elements$backgroundI === void 0 ? void 0 : _elements$backgroundI.color;
}
return backgroundColor;
}, [elements]);
var canvasBackgroundImage = React.useMemo(function () {
var backgroundImage;
var backgroundImageIndex = elements === null || elements === void 0 ? void 0 : elements.findIndex(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundImage);
});
if (backgroundImageIndex > -1) {
backgroundImage = elements === null || elements === void 0 ? void 0 : elements[backgroundImageIndex];
}
return backgroundImage;
}, [elements]);
var handleTransform = function handleTransform(id, newAttrs) {
var newAttributes = _objectSpread2({}, newAttrs);
delete newAttributes['ref'];
var updatedElements = elements === null || elements === void 0 ? void 0 : elements.map(function (el) {
return el.id === id ? _objectSpread2(_objectSpread2({}, el), newAttributes) : el;
});
saveHistory(updatedElements);
onSelectElement(_objectSpread2({}, newAttributes));
};
var handleSelect = function handleSelect(elem) {
onSelectElement(elem);
};
var debouncedTransform = debounce(function (id, attrs) {
var updatedElements = elements === null || elements === void 0 ? void 0 : elements.map(function (el) {
return el.id === id ? _objectSpread2(_objectSpread2({}, el), attrs) : el;
});
saveHistory(updatedElements);
onSelectElement(_objectSpread2({}, attrs));
}, 100);
var debouncedChangeText = debounce(function (e) {
onChangeTextProperty('text', e);
}, 300);
var handleTextTransform = function handleTextTransform(id, attrs) {
debouncedTransform(id, attrs);
};
var onChangeTextContent = function onChangeTextContent(e) {
debouncedChangeText(e);
};
var renderElements = React.useCallback(function (el) {
var _TEXT_DICTIONARY$lang2;
switch (el.type) {
case elementTypes.circle:
return /*#__PURE__*/React.createElement(reactKonva.Circle, _extends({
key: el.id
}, el, {
id: el.id,
onClick: function onClick() {
return handleSelect(el);
},
onDragEnd: function onDragEnd(e) {
handleTransform(el.id, e.target.attrs);
handleDragEnd(e);
},
onDragMove: handleDragging,
onTransformEnd: function onTransformEnd(e) {
handleTransform(el.id, e.target.attrs);
},
strokeScaleEnabled: false
}));
case elementTypes.square:
return /*#__PURE__*/React.createElement(reactKonva.Rect, _extends({
key: el.id
}, el, {
id: el.id,
cornerRadius: el.cornerRadius || 0,
onClick: function onClick() {
return handleSelect(el);
},
onDragEnd: function onDragEnd(e) {
handleTransform(el.id, e.target.attrs);
handleDragEnd(e);
},
onDragMove: handleDragging,
onTransformEnd: function onTransformEnd(e) {
handleTransform(el.id, e.target.attrs);
},
strokeScaleEnabled: false
}));
case elementTypes.arrowRight:
return /*#__PURE__*/React.createElement(reactKonva.Arrow, _extends({
key: el.id
}, el, {
id: el.id,
onClick: function onClick() {
return handleSelect(el);
},
onDragEnd: function onDragEnd(e) {
handleTransform(el.id, e.target.attrs);
handleDragEnd(e);
},
onDragMove: handleDragging,
onTransformEnd: function onTransformEnd(e) {
handleTransform(el.id, e.target.attrs);
},
strokeScaleEnabled: false
}));
case elementTypes.triangle:
return /*#__PURE__*/React.createElement(reactKonva.RegularPolygon, _extends({
key: el.id
}, el, {
id: el.id,
onClick: function onClick() {
return handleSelect(el);
},
onDragEnd: function onDragEnd(e) {
handleTransform(el.id, e.target.attrs);
handleDragEnd(e);
},
onDragMove: handleDragging,
onTransformEnd: function onTransformEnd(e) {
handleTransform(el.id, e.target.attrs);
},
strokeScaleEnabled: false
}));
case elementTypes.heart:
return /*#__PURE__*/React.createElement(reactKonva.Path, _extends({
key: el.id
}, el, {
id: el.id,
onClick: function onClick() {
return handleSelect(el);
},
onDragEnd: function onDragEnd(e) {
handleTransform(el.id, e.target.attrs);
handleDragEnd(e);
},
onDragMove: handleDragging,
onTransformEnd: function onTransformEnd(e) {
handleTransform(el.id, e.target.attrs);
},
strokeScaleEnabled: false
}));
case elementTypes.star:
return /*#__PURE__*/React.createElement(reactKonva.Star, _extends({
key: el.id
}, el, {
id: el.id,
onClick: function onClick() {
return handleSelect(el);
},
onDragEnd: function onDragEnd(e) {
handleTransform(el.id, e.target.attrs);
handleDragEnd(e);
},
onDragMove: handleDragging,
onTransformEnd: function onTransformEnd(e) {
handleTransform(el.id, e.target.attrs);
},
strokeScaleEnabled: false
}));
case elementTypes.horizontalLine:
return /*#__PURE__*/React.createElement(reactKonva.Line, _extends({
key: el.id
}, el, {
id: el.id,
onClick: function onClick() {
return handleSelect(el);
},
onDragEnd: function onDragEnd(e) {
handleTransform(el.id, e.target.attrs);
handleDragEnd(e);
},
onDragMove: handleDragging,
onTransformEnd: function onTransformEnd(e) {
handleTransform(el.id, e.target.attrs);
},
strokeScaleEnabled: false
}));
case elementTypes.verticalLine:
return /*#__PURE__*/React.createElement(reactKonva.Line, _extends({
key: el.id
}, el, {
id: el.id,
onClick: function onClick() {
return handleSelect(el);
},
onDragEnd: function onDragEnd(e) {
handleTransform(el.id, e.target.attrs);
handleDragEnd(e);
},
onDragMove: handleDragging,
onTransformEnd: function onTransformEnd(e) {
handleTransform(el.id, e.target.attrs);
},
strokeScaleEnabled: false
}));
case elementTypes.image:
return /*#__PURE__*/React.createElement(CanvasImage, {
key: el.id,
id: el.id,
element: _objectSpread2({}, el),
onClick: function onClick() {
return handleSelect(el);
},
onDragEnd: function onDragEnd(e) {
handleTransform(el.id, e.target.attrs);
handleDragEnd(e);
},
onDragMove: handleDragging,
onTransformEnd: function onTransformEnd(e) {
handleTransform(el.id, e.target.attrs);
}
});
case elementTypes.qr:
return /*#__PURE__*/React.createElement(QrElement, {
key: el.id,
element: el,
onClick: function onClick() {
return handleSelect(el);
},
onDragEnd: function onDragEnd(e) {
handleTransform(el.id, e.target.attrs);
handleDragEnd(e);
},
onTransformEnd: function onTransformEnd(e) {
handleTransform(el.id, e.target.attrs);
},
onDragMove: handleDragging,
languageLocale: languageLocale,
LogoTitle: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.LOGO
});
case elementTypes.text:
return /*#__PURE__*/React.createElement(EditableText, {
trRef: transformerRef,
key: el.id,
id: el.id,
element: el,
onClick: function onClick() {
return handleSelect(el);
},
onTransform: function onTransform(e) {
return handleTextTransform(el.id, e);
},
onDragEnd: function onDragEnd(e) {
handleTransform(el.id, e.target.attrs);
handleDragEnd(e);
},
onDragMove: handleDragging,
onChangeTextContent: onChangeTextContent
});
default:
return null;
}
}, [elements, selectedElement, languageLocale]);
return /*#__PURE__*/React.createElement(Container$4, {
selectedTab: selectedTab
}, selectedTab && selectedTab !== (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.whiteLabel) && /*#__PURE__*/React.createElement(TopToolBar, {
selectedTab: selectedTab,
onSetBackgroundColor: onSetBackgroundColor,
elements: elements,
canvasBackgroundColor: canvasBackgroundColor,
onSetBackgroundImage: onSetBackgroundImage,
canvasBackgroundImage: canvasBackgroundImage,
shapeStrokeColor: shapeStrokeColor,
shapeStrokeWidth: shapeStrokeWidth,
shapeFillColor: shapeFillColor,
onChangeShapeStrokeColor: onChangeShapeStrokeColor,
onChangeShapeStrokeWidth: onChangeShapeStrokeWidth,
onChangeShapeFill: onChangeShapeFill,
shapeOpacity: shapeOpacity,
onChangeShapeOpacity: onChangeShapeOpacity,
selectedElement: selectedElement,
onChangeBackgroundImageOpacity: onChangeBackgroundImageOpacity,
backgroundImageOpacity: backgroundImageOpacity,
imageStrokeWidth: imageStrokeWidth,
imageStrokeColor: imageStrokeColor,
imageOpacity: imageOpacity,
onChangeImageStrokeWidth: onChangeImageStrokeWidth,
onChangeImageStrokeColor: onChangeImageStrokeColor,
onChangeImageOpacity: onChangeImageOpacity,
qrStrokeWidth: qrStrokeWidth,
qrStrokeColor: qrStrokeColor,
qrOpacity: qrOpacity,
onChangeQrStrokeWidth: onChangeQrStrokeWidth,
onChangeQrStrokeColor: onChangeQrStrokeColor,
onChangeQrOpacity: onChangeQrOpacity,
defaultTextProps: defaultTextProps,
onChangeTextProperty: onChangeTextProperty,
onSetPageSize: onSetPageSize,
selectedPageSize: selectedPageSize,
languageLocale: languageLocale,
uploadImageCallBack: uploadImageCallBack,
setLoadingUploadImage: setLoadingUploadImage,
cuttingGuideStroke: cuttingGuideStroke,
cuttingGuideStrokeColor: cuttingGuideStrokeColor,
onChangeCuttingGuideProp: onChangeCuttingGuideProp,
onRemoveBackgroundImage: onRemoveBackgroundImage,
showBackgroundImagePicker: showBackgroundImagePicker,
showOpacityPicker: showOpacityPicker,
changeSelectedElementProperty: changeSelectedElementProperty
}), /*#__PURE__*/React.createElement(InnerContainer, null, /*#__PURE__*/React.createElement(InnerContainerWrapper, {
editorHeight: editorHeight + 50,
editorWidth: editorWidth
}, title && /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement(EditorBox, {
editorHeight: editorHeight,
editorWidth: editorWidth
}, !loadingImages && !loadingFonts && /*#__PURE__*/React.createElement(reactKonva.Stage, {
width: editorWidth,
height: editorHeight,
ref: stageRef,
onMouseDown: function onMouseDown(e) {
if (e.target === e.target.getStage()) {
onSelectElement(null);
onSetSelectedTab === null || onSetSelectedTab === void 0 || onSetSelectedTab(sideBarpillsList.template);
}
}
}, /*#__PURE__*/React.createElement(reactKonva.Layer, {
onClick: function onClick() {
onSelectElement(null);
onSetSelectedTab === null || onSetSelectedTab === void 0 || onSetSelectedTab(sideBarpillsList.template);
},
listening: false
}, /*#__PURE__*/React.createElement(reactKonva.Rect, {
width: editorWidth,
height: editorHeight,
fill: canvasBackgroundColor || theme.color.white
}), canvasBackgroundImage && /*#__PURE__*/React.createElement(CanvasImage, {
element: _objectSpread2(_objectSpread2({}, canvasBackgroundImage), {}, {
width: editorWidth,
height: editorHeight
})
})), /*#__PURE__*/React.createElement(reactKonva.Layer, null, /*#__PURE__*/React.createElement(reactKonva.Group, {
scaleX: zoomPercentage / 100,
scaleY: zoomPercentage / 100
}, elements === null || elements === void 0 ? void 0 : elements.map(function (el) {
return renderElements(el);
}), selectedElement && /*#__PURE__*/React.createElement(reactKonva.Transformer, {
ref: transformerRef,
onTransform: handleResizing,
onTransformEnd: handleResizeEnd,
enabledAnchors: selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable ? (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.text) ? ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'middle-left', 'middle-right'] : ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'middle-left', 'middle-right', 'top-center', 'bottom-center'] : [],
borderStroke: theme.color.primary,
borderStrokeWidth: 2
// add anchors
,
anchorFill: theme.color.white,
anchorStroke: theme.color.primary,
anchorStrokeWidth: 2,
anchorSize: 8,
rotateEnabled: selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable ? true : false
// make all anchors look like circles
// anchorCornerRadius={50}
,
boundBoxFunc: function boundBoxFunc(oldBox, newBox) {
// limit resize
if (!(selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable) ||
// Handle element flliping
newBox.width < 1 || newBox.height < 1) {
return oldBox;
}
return newBox;
}
}))), /*#__PURE__*/React.createElement(reactKonva.Layer, {
listening: false
}, /*#__PURE__*/React.createElement(reactKonva.Rect, {
listening: false,
x: 0,
y: 0,
width: editorWidth,
height: editorHeight,
stroke: cuttingGuideStrokeColor,
strokeWidth: cuttingGuideStroke,
strokeScaleEnabled: false,
fill: 'transparent',
dash: [10, 5] // [dash length, gap length]
})))))), /*#__PURE__*/React.createElement(BottomToolBar, {
disableUndo: history.length === 0,
disableRedo: redoStack.length === 0,
selectedTab: selectedTab,
zoomPercentage: zoomPercentage,
onChangeZoomPercentage: onChangeZoomPercentage,
onUndo: onUndo,
onRedo: onRedo,
selectedElement: selectedElement,
onDeleteSelectedElement: onDeleteSelectedElement,
onCopySelectedElement: onCopySelectedElement,
onToggleLockElement: onToggleLockElement,
bringSelectedElementToFront: bringSelectedElementToFront,
sendSelectedElementToBack: sendSelectedElementToBack,
languageLocale: languageLocale,
onSave: onSave,
showSaveButton: showSaveButton,
saveButtonText: saveButtonText
}));
};
Editor.propTypes = propTypes$x;
var propTypes$b = {
selectedSideBarItem: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
helperSideBarVisible: PropTypes.bool,
onCollapse: PropTypes.func,
onAddShape: PropTypes.func,
defaultImagesList: PropTypes.array,
customImagesList: PropTypes.array,
onAddCustomImageToList: PropTypes.func,
onAddImageToCanvas: PropTypes.func,
toggleQr: PropTypes.func,
qrPresent: PropTypes.bool,
toggleQrLogo: PropTypes.func,
addQrLogo: PropTypes.func,
elements: PropTypes.array,
qrLogo: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
onAddTextToCanvas: PropTypes.func,
oncreateNewTemplate: PropTypes.func,
languageLocale: PropTypes.string,
uploadImageCallBack: PropTypes.func,
setLoadingUploadImage: PropTypes.func,
defaultTemplatesList: PropTypes.array,
customTemplatesList: PropTypes.array,
styleProps: PropTypes.object
};
var propTypes$a = {
onCollapse: PropTypes.func,
selectedSideBarItem: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
languageLocale: PropTypes.string
};
var _templateObject$a, _templateObject2$8;
var Container$2 = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n height: 55px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding-left: 17px;\n background: ", ";\n border-bottom: 1px solid ", ";\n"])), theme.color.gray_FBFBFB, theme.color.gray_EDEDED);
var IconWrapper$1 = styled.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n height: 100%;\n padding: 0px 17px;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
var SideBarHeader = function SideBarHeader(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _TEXT_DICTIONARY$lang5, _TEXT_DICTIONARY$lang6, _TEXT_DICTIONARY$lang7;
var _ref$onCollapse = _ref.onCollapse,
onCollapse = _ref$onCollapse === void 0 ? function () {} : _ref$onCollapse,
selectedSideBarItem = _ref.selectedSideBarItem,
languageLocale = _ref.languageLocale;
var sideBarpillsText = {
Template: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.TEMPLATE,
Text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.TEXT,
Image: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.IMAGE,
Shape: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang4 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang4 === void 0 ? void 0 : _TEXT_DICTIONARY$lang4.SHAPE,
QR: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang5 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang5 === void 0 ? void 0 : _TEXT_DICTIONARY$lang5.QR_CODE,
'White-label': TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang6 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang6 === void 0 ? void 0 : _TEXT_DICTIONARY$lang6.BRANDING
};
return /*#__PURE__*/React.createElement(Container$2, null, /*#__PURE__*/React.createElement(StyledText, {
fontWeight: theme.fontWeights[600],
color: theme.color.gray_545454,
fontSize: 16
}, sideBarpillsText === null || sideBarpillsText === void 0 ? void 0 : sideBarpillsText[selectedSideBarItem]), /*#__PURE__*/React.createElement(Tooltip, {
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang7 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang7 === void 0 ? void 0 : _TEXT_DICTIONARY$lang7.COLLAPSE,
position: "left"
}, /*#__PURE__*/React.createElement(IconWrapper$1, {
onClick: onCollapse
}, /*#__PURE__*/React.createElement(StyledImage, {
src: IconChevronLeft
}))));
};
SideBarHeader.propTypes = propTypes$a;
var _templateObject$9, _templateObject2$7;
var SideBarWrapper = styled.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n width: ", "px;\n display: flex;\n flex-direction: column;\n background: ", ";\n border-left: 1px solid ", ";\n transition: width 0.3s ease-in-out;\n overflow: hidden;\n"])), function (_ref) {
var _ref$visible = _ref.visible,
visible = _ref$visible === void 0 ? true : _ref$visible;
return visible ? helperSideBarWidth : 0;
}, theme.color.gray_FBFBFB, theme.color.gray_F5F6F6);
var SideBarContainer = styled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n flex: 1;\n overflow: auto;\n display: flex;\n flex-direction: column;\n width: ", "px;\n"])), helperSideBarWidth);
var propTypes$9 = {
oncreateNewTemplate: PropTypes.func,
languageLocale: PropTypes.string,
defaultTemplatesList: PropTypes.array,
customTemplatesList: PropTypes.array
};
var propTypes$8 = {
title: PropTypes.string,
left: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
hideIcon: PropTypes.bool,
marginTop: PropTypes.number,
marginBottom: PropTypes.number,
content: PropTypes.node
};
var _templateObject$8, _templateObject2$6, _templateObject3$6, _templateObject4$2, _templateObject5;
var CollapsableContainer = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n margin-top: ", "px;\n margin-bottom: ", "px;\n"])), function (_ref) {
var marginTop = _ref.marginTop;
return marginTop;
}, function (_ref2) {
var marginBottom = _ref2.marginBottom;
return marginBottom;
});
var CollapsableHeader = styled.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n justify-content: flex-start;\n align-self: flex-start;\n margin-bottom: 14px;\n"])));
var LeftIconWrapper = styled.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n margin-right: 6px;\n display: flex;\n align-items: center;\n"])));
var IconWrapper = styled.div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-top: 3px;\n"])));
var CollapsableContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: ", ";\n"])), function (_ref3) {
var visible = _ref3.visible;
return visible ? 'flex' : 'none';
});
var Collapsable = function Collapsable(_ref) {
var title = _ref.title,
left = _ref.left,
_ref$hideIcon = _ref.hideIcon,
hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
_ref$marginTop = _ref.marginTop,
marginTop = _ref$marginTop === void 0 ? 0 : _ref$marginTop,
_ref$marginBottom = _ref.marginBottom,
marginBottom = _ref$marginBottom === void 0 ? 30 : _ref$marginBottom,
content = _ref.content;
var _useState = React.useState(true),
_useState2 = _slicedToArray(_useState, 2),
visible = _useState2[0],
setVisible = _useState2[1];
var toggleVisibility = React.useCallback(function () {
if (hideIcon) return;
setVisible(!visible);
}, [visible, setVisible]);
return /*#__PURE__*/React.createElement(CollapsableContainer, {
marginTop: marginTop,
marginBottom: marginBottom
}, /*#__PURE__*/React.createElement(CollapsableHeader, {
onClick: toggleVisibility
}, left && /*#__PURE__*/React.createElement(LeftIconWrapper, null, left), /*#__PURE__*/React.createElement(StyledText, {
color: theme.color.gray_646464,
fontWeight: theme.fontWeights[500],
marginRight: 6
}, title), !hideIcon && /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(StyledImage, {
src: IconCheveronDown
}))), /*#__PURE__*/React.createElement(CollapsableContent, {
visible: visible
}, content));
};
Collapsable.propTypes = propTypes$8;
var _templateObject$7, _templateObject2$5, _templateObject3$5, _templateObject4$1;
var TemplatesContainer = styled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: 10px;\n align-items: flex-start;\n"])));
var TemplateItem = styled.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.2);\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: 1;\n }\n\n &:hover::before {\n opacity: 1;\n }\n &:hover > button {\n display: flex;\n z-index: 2;\n }\n"])));
var StyledDeleteButton = styled.button(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n display: none;\n justify-content: center;\n align-items: center;\n height: 30px;\n width: 30px;\n padding: 8px;\n border-radius: 100%;\n background: rgba(255, 255, 255, 1);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n &:hover {\n border-color: #d91919;\n }\n &:focus {\n outline: none;\n }\n"])));
var StyledContainer$5 = styled.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: 20px 18px;\n overflow: auto;\n"])));
var TemplateSideBar = function TemplateSideBar(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3;
var oncreateNewTemplate = _ref.oncreateNewTemplate,
languageLocale = _ref.languageLocale,
onDeleteCustomTemplate = _ref.onDeleteCustomTemplate,
defaultTemplatesList = _ref.defaultTemplatesList,
customTemplatesList = _ref.customTemplatesList,
onTemplateSelect = _ref.onTemplateSelect;
var renderDefaultContent = React.useMemo(function () {
return /*#__PURE__*/React.createElement(TemplatesContainer, null, defaultTemplatesList === null || defaultTemplatesList === void 0 ? void 0 : defaultTemplatesList.map(function (item, index) {
return /*#__PURE__*/React.createElement(TemplateItem, {
key: index,
onClick: function onClick() {
oncreateNewTemplate(item === null || item === void 0 ? void 0 : item.elements);
if (typeof onTemplateSelect === 'function') {
onTemplateSelect(item === null || item === void 0 ? void 0 : item.id);
}
}
}, /*#__PURE__*/React.createElement(StyledImage, {
src: item === null || item === void 0 ? void 0 : item.image,
maxHeight: 125,
maxWidth: 115,
borderRadius: 6
}), /*#__PURE__*/React.createElement(StyledText, {
color: theme.color.gray_A1A1A1,
fontSize: 10,
style: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
maxWidth: 115
}
}, item === null || item === void 0 ? void 0 : item.title));
}));
}, []);
var renderCustomContent = React.useMemo(function () {
return /*#__PURE__*/React.createElement(TemplatesContainer, null, customTemplatesList === null || customTemplatesList === void 0 ? void 0 : customTemplatesList.map(function (item, index) {
return /*#__PURE__*/React.createElement(TemplateItem, {
key: index,
onClick: function onClick() {
oncreateNewTemplate(item === null || item === void 0 ? void 0 : item.elements);
if (typeof onTemplateSelect === 'function') {
onTemplateSelect(item === null || item === void 0 ? void 0 : item.id);
}
}
}, /*#__PURE__*/React.createElement(StyledImage, {
src: item === null || item === void 0 ? void 0 : item.image,
maxHeight: 125,
maxWidth: 115,
borderRadius: 6
}), /*#__PURE__*/React.createElement(StyledDeleteButton, {
onClick: function onClick(e) {
e.stopPropagation(); // ⛔ Prevents parent onClick
onDeleteCustomTemplate === null || onDeleteCustomTemplate === void 0 || onDeleteCustomTemplate(item);
}
}, /*#__PURE__*/React.createElement(StyledImage, {
src: IconDelete,
height: 24
})), /*#__PURE__*/React.createElement(StyledText, {
color: theme.color.gray_A1A1A1,
fontSize: 10,
style: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
maxWidth: 115
}
}, item === null || item === void 0 ? void 0 : item.title));
}));
}, []);
return /*#__PURE__*/React.createElement(StyledContainer$5, null, /*#__PURE__*/React.createElement(Button, {
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.NEW_TEMPLATE,
left: /*#__PURE__*/React.createElement(StyledImage, {
src: IconAdd
}),
marginBottom: 38,
onClick: function onClick() {
return oncreateNewTemplate();
}
}), /*#__PURE__*/React.createElement(Collapsable, {
title: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.DEFAULT,
content: renderDefaultContent
}), customTemplatesList.length > 0 && /*#__PURE__*/React.createElement(Collapsable, {
title: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.CUSTOM_TEMPLATES,
content: renderCustomContent
}));
};
TemplateSideBar.propTypes = propTypes$9;
var propTypes$7 = {
onAddTextToCanvas: PropTypes.func,
languageLocale: PropTypes.string
};
var _templateObject$6, _templateObject2$4, _templateObject3$4;
var StyledContainer$4 = styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: 20px 18px;\n overflow: auto;\n"])));
var Container$1 = styled.div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n"])));
var ItemWrapper = styled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n margin-bottom: 18px;\n cursor: pointer;\n transition: background-color 0.1s ease;\n padding: 5px;\n &:hover {\n background-color: ", ";\n }\n"])), theme.color.gray_F0F2F7);
var TextSideBar = function TextSideBar(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2;
var onAddTextToCanvas = _ref.onAddTextToCanvas,
languageLocale = _ref.languageLocale,
defaultText = _ref.defaultText;
var renderTextListContent = function renderTextListContent() {
return /*#__PURE__*/React.createElement(Container$1, null, textList === null || textList === void 0 ? void 0 : textList.map(function (item, index) {
return /*#__PURE__*/React.createElement(ItemWrapper, {
key: index,
onClick: function onClick() {
onAddTextToCanvas(_objectSpread2(_objectSpread2({}, item), {}, {
text: defaultText || (item === null || item === void 0 ? void 0 : item.text)
}));
}
}, /*#__PURE__*/React.createElement(StyledText, {
color: item === null || item === void 0 ? void 0 : item.color,
fontFamily: item === null || item === void 0 ? void 0 : item.fontFamily,
fontWeight: item === null || item === void 0 ? void 0 : item.fontWeight,
fontSize: item === null || item === void 0 ? void 0 : item.fontSize
}, defaultText || (item === null || item === void 0 ? void 0 : item.text)));
}));
};
return /*#__PURE__*/React.createElement(StyledContainer$4, null, /*#__PURE__*/React.createElement(Button, {
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.ADD_TEXT,
left: /*#__PURE__*/React.createElement(StyledImage, {
src: IconAddText
}),
marginBottom: 38,
onClick: function onClick() {
return onAddTextToCanvas(null);
}
}), /*#__PURE__*/React.createElement(Collapsable, {
title: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.HELP_TEXT,
content: renderTextListContent(),
left: /*#__PURE__*/React.createElement(StyledImage, {
src: IconInfo
})
}));
};
TextSideBar.propTypes = propTypes$7;
var propTypes$6 = {
defaultImagesList: PropTypes.array,
customImagesList: PropTypes.array,
onAddCustomImageToList: PropTypes.func,
onAddImageToCanvas: PropTypes.func,
languageLocale: PropTypes.string,
uploadImageCallBack: PropTypes.func,
setLoadingUploadImage: PropTypes.func
};
var _templateObject$5, _templateObject2$3, _templateObject3$3;
var StyledContainer$3 = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: 20px 18px;\n overflow: auto;\n"])));
var ImagesContainer = styled.div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: 20px;\n align-items: flex-start;\n"])));
var SingleItem$1 = styled.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n cursor: pointer;\n align-items: center;\n width: ", ";\n"])), function () {
var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'calc(50% - 20px)';
return width;
});
var ImageSideBar = function ImageSideBar(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _TEXT_DICTIONARY$lang5;
var defaultImagesList = _ref.defaultImagesList,
customImagesList = _ref.customImagesList,
onAddCustomImageToList = _ref.onAddCustomImageToList,
onAddImageToCanvas = _ref.onAddImageToCanvas,
languageLocale = _ref.languageLocale,
uploadImageCallBack = _ref.uploadImageCallBack,
setLoadingUploadImage = _ref.setLoadingUploadImage;
var renderDefaultContent = /*#__PURE__*/React.createElement(ImagesContainer, null, (defaultImagesList === null || defaultImagesList === void 0 ? void 0 : defaultImagesList.length) === 0 && /*#__PURE__*/React.createElement(StyledText, {
fontSize: 10,
color: theme.color.gray_535354
}, TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.PLEASE_ADD_IMAGES), defaultImagesList === null || defaultImagesList === void 0 ? void 0 : defaultImagesList.map(function (item, index) {
return /*#__PURE__*/React.createElement(SingleItem$1, {
key: index,
width: 'auto',
onClick: function onClick() {
onAddImageToCanvas(item);
}
}, /*#__PURE__*/React.createElement(StyledImage, {
src: item,
maxHeight: 100,
maxWidth: 100
}));
}));
var renderCustomImages = /*#__PURE__*/React.createElement(ImagesContainer, null, (customImagesList === null || customImagesList === void 0 ? void 0 : customImagesList.length) === 0 && /*#__PURE__*/React.createElement(StyledText, {
fontSize: 10,
color: theme.color.gray_535354
}, TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.PLEASE_ADD_IMAGES), customImagesList === null || customImagesList === void 0 ? void 0 : customImagesList.map(function (item, index) {
return /*#__PURE__*/React.createElement(SingleItem$1, {
key: index,
onClick: function onClick() {
onAddImageToCanvas(item);
}
}, /*#__PURE__*/React.createElement(StyledImage, {
src: item,
maxHeight: 100,
maxWidth: 100
}));
}));
var addImageToList = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
var file, imageUrl, reader;
return _regenerator().w(function (_context) {
while (1) switch (_context.n) {
case 0:
_context.n = 1;
return pickImage();
case 1:
file = _context.v;
if (file) {
_context.n = 2;
break;
}
return _context.a(2);
case 2:
if (!uploadImageCallBack) {
_context.n = 4;
break;
}
setLoadingUploadImage(true);
_context.n = 3;
return uploadImageCallBack(file);
case 3:
imageUrl = _context.v;
onAddCustomImageToList(imageUrl);
setLoadingUploadImage(false);
_context.n = 5;
break;
case 4:
reader = new FileReader();
reader.onload = function () {
onAddCustomImageToList(reader.result);
};
reader.readAsDataURL(file);
case 5:
return _context.a(2);
}
}, _callee);
}));
return function addImageToList() {
return _ref2.apply(this, arguments);
};
}();
return /*#__PURE__*/React.createElement(StyledContainer$3, null, /*#__PURE__*/React.createElement(Button, {
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.ADD_IMAGE,
left: /*#__PURE__*/React.createElement(StyledImage, {
src: IconUpload
}),
marginBottom: 38,
onClick: addImageToList
}), /*#__PURE__*/React.createElement(Collapsable, {
title: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang4 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang4 === void 0 ? void 0 : _TEXT_DICTIONARY$lang4.DEFAULT,
content: renderDefaultContent
}), /*#__PURE__*/React.createElement(Collapsable, {
title: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang5 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang5 === void 0 ? void 0 : _TEXT_DICTIONARY$lang5.CUSTOM_IMAGES,
content: renderCustomImages
}));
};
ImageSideBar.propTypes = propTypes$6;
var propTypes$5 = {
onAddShape: PropTypes.func,
languageLocale: PropTypes.string
};
var _templateObject$4, _templateObject2$2, _templateObject3$2;
var StyledContainer$2 = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: 20px 18px;\n overflow: auto;\n"])));
var ShapesContainer = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n gap: 15px;\n align-items: flex-start;\n"])));
var SingleItem = styled.div(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n width: 71px;\n height: 71px;\n transition: background-color 0.1s ease;\n &:hover {\n background-color: ", ";\n }\n"])), theme.color.gray_F0F2F7);
var ShapeSideBar = function ShapeSideBar(_ref) {
var _TEXT_DICTIONARY$lang;
var onAddShape = _ref.onAddShape,
languageLocale = _ref.languageLocale;
return /*#__PURE__*/React.createElement(StyledContainer$2, null, /*#__PURE__*/React.createElement(StyledText, {
color: theme.color.gray_646464,
fontWeight: theme.fontWeights[500],
marginRight: 6,
marginBottom: 15
}, TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.ADD_SHAPES), /*#__PURE__*/React.createElement(ShapesContainer, null, shapesList.map(function (item, index) {
return /*#__PURE__*/React.createElement(SingleItem, {
key: index,
onClick: function onClick() {
return onAddShape(item === null || item === void 0 ? void 0 : item.shape);
}
}, /*#__PURE__*/React.createElement(StyledImage, {
src: item === null || item === void 0 ? void 0 : item.icon
}));
})));
};
ShapeSideBar.propTypes = propTypes$5;
var propTypes$4 = {
toggleQr: PropTypes.func,
qrPresent: PropTypes.bool,
toggleQrLogo: PropTypes.func,
addQrLogo: PropTypes.func,
elements: PropTypes.array,
qrLogo: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
languageLocale: PropTypes.string
};
var _templateObject$3;
var StyledContainer$1 = styled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: 20px 18px;\n overflow: auto;\n"])));
var propTypes$3 = {
text: PropTypes.string,
onToggle: PropTypes.func,
isActive: PropTypes.bool,
disabled: PropTypes.bool
};
var _templateObject$2, _templateObject2$1, _templateObject3$1, _templateObject4;
var ToggleContainer = styled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n width: 44px;\n height: 24px;\n background-color: ", ";\n border-radius: 25px;\n display: flex;\n align-items: center;\n padding: 2px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n position: relative;\n"])), function (_ref) {
var isActive = _ref.isActive;
return isActive ? theme.color.green_80D965 : theme.color.gray_E8E8E8;
});
var ToggleCircle = styled.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n width: 20px;\n height: 20px;\n background-color: white;\n border-radius: 50%;\n position: absolute;\n left: ", ";\n transition:\n left 0.3s ease,\n box-shadow 0.3s ease;\n box-shadow: ", ";\n"])), function (_ref2) {
var isActive = _ref2.isActive;
return isActive ? 'calc(100% - 24px)' : '4px';
}, function (_ref3) {
var isActive = _ref3.isActive;
return isActive ? '2px 2px 5px rgba(0, 0, 0, 0.2)' : '-2px 2px 5px rgba(0, 0, 0, 0.2)';
});
var Container = styled.div(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n padding: 10px 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n"])));
var InfoContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
var RadioSection = function RadioSection(_ref) {
var text = _ref.text,
onToggle = _ref.onToggle,
isActive = _ref.isActive,
disabled = _ref.disabled;
return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(InfoContainer, null, /*#__PURE__*/React.createElement(StyledText, {
marginLeft: 6,
color: theme.color.black,
fontSize: 12,
fontWeight: theme.fontWeights[500]
}, text)), /*#__PURE__*/React.createElement(ToggleContainer, {
isActive: isActive,
onClick: function onClick() {
if (disabled) {
return;
}
onToggle && onToggle();
}
}, /*#__PURE__*/React.createElement(ToggleCircle, {
isActive: isActive
})));
};
RadioSection.propTypes = propTypes$3;
var QrSideBar = function QrSideBar(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4;
var toggleQr = _ref.toggleQr,
qrPresent = _ref.qrPresent,
toggleQrLogo = _ref.toggleQrLogo,
addQrLogo = _ref.addQrLogo,
elements = _ref.elements,
qrLogo = _ref.qrLogo,
languageLocale = _ref.languageLocale;
var logoVisible = React.useMemo(function () {
var _elements$index;
var index = elements === null || elements === void 0 ? void 0 : elements.findIndex(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr);
});
if (index < 0) {
return false;
}
return elements === null || elements === void 0 || (_elements$index = elements[index]) === null || _elements$index === void 0 ? void 0 : _elements$index.logoVisible;
}, [elements]);
return /*#__PURE__*/React.createElement(StyledContainer$1, null, /*#__PURE__*/React.createElement(StyledText, {
color: theme.color.gray_646464,
fontWeight: theme.fontWeights[500],
marginRight: 6,
marginBottom: 17
}, TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.SETTINGS), /*#__PURE__*/React.createElement(RadioSection, {
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.SHOW_QR_CODE,
isActive: qrPresent,
onToggle: toggleQr
}), /*#__PURE__*/React.createElement(RadioSection, {
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.SHOW_LOGO_IN_QR,
isActive: qrPresent && logoVisible,
onToggle: toggleQrLogo,
disabled: !qrPresent
}), /*#__PURE__*/React.createElement(Button, {
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang4 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang4 === void 0 ? void 0 : _TEXT_DICTIONARY$lang4.ADD_LOGO,
left: /*#__PURE__*/React.createElement(StyledImage, {
src: IconUpload
}),
marginBottom: 30,
marginTop: 24,
onClick: addQrLogo
}), qrLogo && /*#__PURE__*/React.createElement(StyledImage, {
src: qrLogo,
height: 89,
width: 89
}));
};
QrSideBar.propTypes = propTypes$4;
var propTypes$2 = {
translation: PropTypes.object
};
var _templateObject$1;
var StyledContainer = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: 20px 18px;\n overflow: auto;\n"])));
var WhiteLabelSideBar = function WhiteLabelSideBar(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4;
var languageLocale = _ref.languageLocale;
return /*#__PURE__*/React.createElement(StyledContainer, null, /*#__PURE__*/React.createElement(StyledText, {
color: theme.color.gray_646464,
fontWeight: theme.fontWeights[500],
marginRight: 6,
marginBottom: 17
}, TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.PREMIUM_SETTINGS), /*#__PURE__*/React.createElement(RadioSection, {
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.SHOW_BRANDING
}), /*#__PURE__*/React.createElement(StyledText, {
fontSize: 12,
color: theme.color.gray_333,
marginTop: 16,
marginBottom: 30,
lineHeight: '20px'
}, TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.UNLOCK_PREMIUM_FEATURE_PARAGRAPH), /*#__PURE__*/React.createElement(Button, {
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang4 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang4 === void 0 ? void 0 : _TEXT_DICTIONARY$lang4.UPGRADE_PLAN,
left: /*#__PURE__*/React.createElement(StyledImage, {
src: IconGraph
}),
varient: ButtonVarients.primary
}));
};
WhiteLabelSideBar.propTypes = propTypes$2;
var HelperSideBar = function HelperSideBar(_ref) {
var selectedSideBarItem = _ref.selectedSideBarItem,
helperSideBarVisible = _ref.helperSideBarVisible,
_ref$onCollapse = _ref.onCollapse,
onCollapse = _ref$onCollapse === void 0 ? function () {} : _ref$onCollapse,
onAddShape = _ref.onAddShape,
defaultImagesList = _ref.defaultImagesList,
customImagesList = _ref.customImagesList,
onAddCustomImageToList = _ref.onAddCustomImageToList,
onAddImageToCanvas = _ref.onAddImageToCanvas,
toggleQr = _ref.toggleQr,
qrPresent = _ref.qrPresent,
toggleQrLogo = _ref.toggleQrLogo,
addQrLogo = _ref.addQrLogo,
elements = _ref.elements,
qrLogo = _ref.qrLogo,
onAddTextToCanvas = _ref.onAddTextToCanvas,
oncreateNewTemplate = _ref.oncreateNewTemplate,
uploadImageCallBack = _ref.uploadImageCallBack,
setLoadingUploadImage = _ref.setLoadingUploadImage,
defaultTemplatesList = _ref.defaultTemplatesList,
customTemplatesList = _ref.customTemplatesList,
onDeleteCustomTemplate = _ref.onDeleteCustomTemplate,
styleProps = _ref.styleProps,
defaultText = _ref.defaultText,
languageLocale = _ref.languageLocale,
onTemplateSelect = _ref.onTemplateSelect;
return /*#__PURE__*/React.createElement(SideBarWrapper, {
visible: selectedSideBarItem && helperSideBarVisible
}, /*#__PURE__*/React.createElement(SideBarHeader, {
onCollapse: onCollapse,
selectedSideBarItem: selectedSideBarItem,
languageLocale: languageLocale
}), /*#__PURE__*/React.createElement(SideBarContainer, {
visible: selectedSideBarItem && helperSideBarVisible
}, selectedSideBarItem === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.template) ? /*#__PURE__*/React.createElement(TemplateSideBar, {
oncreateNewTemplate: oncreateNewTemplate,
languageLocale: languageLocale,
onDeleteCustomTemplate: onDeleteCustomTemplate,
defaultTemplatesList: defaultTemplatesList,
customTemplatesList: customTemplatesList,
onTemplateSelect: onTemplateSelect,
styleProps: styleProps
}) : selectedSideBarItem === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.text) ? /*#__PURE__*/React.createElement(TextSideBar, {
onAddTextToCanvas: onAddTextToCanvas,
languageLocale: languageLocale,
styleProps: styleProps,
defaultText: defaultText
}) : selectedSideBarItem === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.image) ? /*#__PURE__*/React.createElement(ImageSideBar, {
defaultImagesList: defaultImagesList,
customImagesList: customImagesList,
onAddCustomImageToList: onAddCustomImageToList,
onAddImageToCanvas: onAddImageToCanvas,
languageLocale: languageLocale,
uploadImageCallBack: uploadImageCallBack,
setLoadingUploadImage: setLoadingUploadImage,
styleProps: styleProps
}) : selectedSideBarItem === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.shape) ? /*#__PURE__*/React.createElement(ShapeSideBar, {
onAddShape: onAddShape,
languageLocale: languageLocale
}) : selectedSideBarItem === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.qr) ? /*#__PURE__*/React.createElement(QrSideBar, {
toggleQr: toggleQr,
qrPresent: qrPresent,
toggleQrLogo: toggleQrLogo,
addQrLogo: addQrLogo,
elements: elements,
qrLogo: qrLogo,
languageLocale: languageLocale,
styleProps: styleProps
}) : selectedSideBarItem === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.whiteLabel) ? /*#__PURE__*/React.createElement(WhiteLabelSideBar, {
languageLocale: languageLocale,
styleProps: styleProps
}) : null));
};
HelperSideBar.propTypes = propTypes$b;
var propTypes$1 = {
children: PropTypes.node,
backgroundColor: PropTypes.string
};
var Overlay = function Overlay(_ref) {
var children = _ref.children,
_ref$backgroundColor = _ref.backgroundColor,
backgroundColor = _ref$backgroundColor === void 0 ? theme.color.black_transparent : _ref$backgroundColor;
return /*#__PURE__*/React.createElement("div", {
style: {
height: '100%',
width: '100%',
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
background: backgroundColor,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
zIndex: 99999
}
}, children);
};
Overlay.propTypes = propTypes$1;
var propTypes = {
size: PropTypes.string,
color: PropTypes.string,
borderWidth: PropTypes.string
};
var _templateObject, _templateObject2, _templateObject3;
var spin = styled.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n to {\n transform: rotate(360deg);\n }\n"])));
var SpinnerWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
var Spinner = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: ", ";\n height: ", ";\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 50%;\n animation: ", " 1s linear infinite;\n"])), function (props) {
return props.size || '40px';
}, function (props) {
return props.size || '40px';
}, function (props) {
return props.borderWidth || '4px';
}, function (props) {
return props.color + '33' || 'rgba(0, 123, 255, 0.2)';
}, function (props) {
return props.color || '#007bff';
}, spin);
var LoadingSpinner = function LoadingSpinner(_ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? '40px' : _ref$size,
_ref$color = _ref.color,
color = _ref$color === void 0 ? '#007bff' : _ref$color,
_ref$borderWidth = _ref.borderWidth,
borderWidth = _ref$borderWidth === void 0 ? '4px' : _ref$borderWidth;
return /*#__PURE__*/React.createElement(SpinnerWrapper, null, /*#__PURE__*/React.createElement(Spinner, {
size: size,
color: color,
borderWidth: borderWidth
}));
};
LoadingSpinner.propTypes = propTypes;
function memoize(fn) {
var cache = Object.create(null);
return function (arg) {
if (cache[arg] === undefined) cache[arg] = fn(arg);
return cache[arg];
};
}
// eslint-disable-next-line no-undef
var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|fetchpriority|fetchPriority|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
var isPropValid = /* #__PURE__ */memoize(function (prop) {
return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
/* o */
&& prop.charCodeAt(1) === 110
/* n */
&& prop.charCodeAt(2) < 91;
}
/* Z+1 */
);
/**
* @typedef {Object} StudioProps
* @property {string} [title]
* @property {string} [defaultQrLogo]
* @property {string} [languageLocale]
* @property {Array} [elementsList]
* @property {Array} [customImages]
* @property {Array} [defaultImages]
* @property {boolean} [disableWhiteLabel]
* @property {Array} [defaultTemplatesList]
* @property {Array} [customTemplatesList]
* @property {string} [qrLink]
* @property {Object} [styleProps]
* @property {string} [defaultText]
* @property {Function} onSave
* @property {string} [saveButtonText]
* @property {'en'|'ru'|'pl'|'de'|'es'|'fr'|'it'} [locale]
* @property {Function} [onCreateNewTemplate] - called when user creates a new template, passes new canvas elements
* @property {Function} [onTemplateSelect] - called when a template is selected, passes template id
* @property {Function} [uploadQRLogoImage] - Optional callback to upload the QR logo image. Should return a string or an object with `{ url }`
* @property {number} [zoomLevel] - Optional zoom level (e.g. 100 for 100%)
* @property {boolean} [showBackgroundImagePicker] - Used to set background image on entire canvas
* @property {boolean} [showOpacityPicker] - Related to showBackgroundImagePicker and it's opacity
*/
/**
* @type {React.ForwardRefExoticComponent<StudioProps & React.RefAttributes<HTMLDivElement>>}
*/
var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _elements$elements$fi, _elements$find5, _elements$find6, _elements$find7;
var _ref$title = _ref.title,
title = _ref$title === void 0 ? '' : _ref$title,
_ref$defaultQrLogo = _ref.defaultQrLogo,
defaultQrLogo = _ref$defaultQrLogo === void 0 ? null : _ref$defaultQrLogo,
_ref$elementsList = _ref.elementsList,
elementsList = _ref$elementsList === void 0 ? defaultElements : _ref$elementsList,
uploadImageCallBack = _ref.uploadImageCallBack,
customImages = _ref.customImages,
_ref$defaultImages = _ref.defaultImages,
defaultImages = _ref$defaultImages === void 0 ? defaultSideBarImagesList : _ref$defaultImages,
disableWhiteLabel = _ref.disableWhiteLabel,
_ref$defaultTemplates = _ref.defaultTemplatesList,
defaultTemplatesList = _ref$defaultTemplates === void 0 ? [] : _ref$defaultTemplates,
_ref$customTemplatesL = _ref.customTemplatesList,
customTemplatesList = _ref$customTemplatesL === void 0 ? [] : _ref$customTemplatesL,
onDeleteCustomTemplate = _ref.onDeleteCustomTemplate,
_ref$qrLink = _ref.qrLink,
qrLink = _ref$qrLink === void 0 ? 'www.google.com' : _ref$qrLink,
_ref$styleProps = _ref.styleProps,
styleProps = _ref$styleProps === void 0 ? {} : _ref$styleProps,
defaultText = _ref.defaultText,
onSave = _ref.onSave,
showSaveButton = _ref.showSaveButton,
saveButtonText = _ref.saveButtonText,
_ref$locale = _ref.locale,
locale = _ref$locale === void 0 ? 'en' : _ref$locale,
onCreateNewTemplate = _ref.onCreateNewTemplate,
onTemplateSelect = _ref.onTemplateSelect,
showBackgroundImagePicker = _ref.showBackgroundImagePicker,
showOpacityPicker = _ref.showOpacityPicker,
uploadQRLogoImage = _ref.uploadQRLogoImage,
zoomLevel = _ref.zoomLevel;
var stageRef = React.useRef(null);
var _useState = React.useState(null),
_useState2 = _slicedToArray(_useState, 2),
copiedElement = _useState2[0],
setCopiedElement = _useState2[1];
var _useState3 = React.useState(sideBarpillsList.template),
_useState4 = _slicedToArray(_useState3, 2),
selectedTab = _useState4[0],
setSelectedTab = _useState4[1];
var _useState5 = React.useState(validateLocale(locale)),
_useState6 = _slicedToArray(_useState5, 2),
languageLocale = _useState6[0],
setLanguageLocale = _useState6[1];
var _useState7 = React.useState(true),
_useState8 = _slicedToArray(_useState7, 2),
loadingFonts = _useState8[0],
setLoadingFonts = _useState8[1];
var _useState9 = React.useState(true),
_useState0 = _slicedToArray(_useState9, 2),
loadingImages = _useState0[0],
setLoadingImages = _useState0[1];
var _useState1 = React.useState(false),
_useState10 = _slicedToArray(_useState1, 2),
loading = _useState10[0],
setLoading = _useState10[1];
var _useState11 = React.useState(false),
_useState12 = _slicedToArray(_useState11, 2),
loadingUploadImage = _useState12[0],
setLoadingUploadImage = _useState12[1];
var _useState13 = React.useState(true),
_useState14 = _slicedToArray(_useState13, 2),
helperSideBarVisible = _useState14[0],
setHelperSideBarVisible = _useState14[1];
var _useState15 = React.useState(zoomLevel !== null && zoomLevel !== void 0 ? zoomLevel : 100),
_useState16 = _slicedToArray(_useState15, 2),
zoomPercentage = _useState16[0],
setZoomPercentage = _useState16[1];
var _useState17 = React.useState(elementsList),
_useState18 = _slicedToArray(_useState17, 2),
elements = _useState18[0],
setElements = _useState18[1];
var _useState19 = React.useState(1),
_useState20 = _slicedToArray(_useState19, 2),
backgroundImageOpacity = _useState20[0],
setBackgroundImageOpacity = _useState20[1];
var _useState21 = React.useState([]),
_useState22 = _slicedToArray(_useState21, 2),
history = _useState22[0],
setHistory = _useState22[1];
var _useState23 = React.useState([]),
_useState24 = _slicedToArray(_useState23, 2),
redoStack = _useState24[0],
setRedoStack = _useState24[1];
var _useState25 = React.useState(theme.color.white),
_useState26 = _slicedToArray(_useState25, 2),
shapeFillColor = _useState26[0],
setShapeFillColor = _useState26[1];
var _useState27 = React.useState(1),
_useState28 = _slicedToArray(_useState27, 2),
shapeStrokeWidth = _useState28[0],
setShapeStrokeWidth = _useState28[1];
var _useState29 = React.useState(theme.color.black),
_useState30 = _slicedToArray(_useState29, 2),
shapeStrokeColor = _useState30[0],
setShapeStrokeColor = _useState30[1];
var _useState31 = React.useState(1),
_useState32 = _slicedToArray(_useState31, 2),
shapeOpacity = _useState32[0],
setShapeOpacity = _useState32[1];
var _useState33 = React.useState(0),
_useState34 = _slicedToArray(_useState33, 2),
imageStrokeWidth = _useState34[0],
setImageStrokeWidth = _useState34[1];
var _useState35 = React.useState(theme.color.black),
_useState36 = _slicedToArray(_useState35, 2),
imageStrokeColor = _useState36[0],
setImageStrokeColor = _useState36[1];
var _useState37 = React.useState(1),
_useState38 = _slicedToArray(_useState37, 2),
imageOpacity = _useState38[0],
setImageOpacity = _useState38[1];
var _useState39 = React.useState(2),
_useState40 = _slicedToArray(_useState39, 2),
qrStrokeWidth = _useState40[0],
setQrStrokeWidth = _useState40[1];
var _useState41 = React.useState(theme.color.black),
_useState42 = _slicedToArray(_useState41, 2),
qrStrokeColor = _useState42[0],
setQrStrokeColor = _useState42[1];
var _useState43 = React.useState(1),
_useState44 = _slicedToArray(_useState43, 2),
qrOpacity = _useState44[0],
setQrOpacity = _useState44[1];
var _useState45 = React.useState(null),
_useState46 = _slicedToArray(_useState45, 2),
selectedElement = _useState46[0],
setSelectedElement = _useState46[1];
var _useState47 = React.useState(customImages || []),
_useState48 = _slicedToArray(_useState47, 2),
customImagesList = _useState48[0],
setCustomImagesList = _useState48[1];
var _useState49 = React.useState(defaultQrLogo),
_useState50 = _slicedToArray(_useState49, 2),
qrLogo = _useState50[0],
setQrLogo = _useState50[1];
var _useState51 = React.useState(basicTextProps),
_useState52 = _slicedToArray(_useState51, 2),
defaultTextProps = _useState52[0],
setDefaultTextProps = _useState52[1];
var overallLoading = loadingFonts || loadingImages || loadingUploadImage || loading;
var undo = React.useCallback(function () {
if (history.length > 0) {
setSelectedElement(null);
var previousState = history[history.length - 1];
setRedoStack([elements].concat(_toConsumableArray(redoStack)));
setHistory(history.slice(0, -1));
setElements(previousState);
}
}, [history, elements, redoStack, setRedoStack, setHistory, setElements]);
var redo = React.useCallback(function () {
if (redoStack.length > 0) {
setSelectedElement(null);
var nextState = redoStack[0];
setHistory([].concat(_toConsumableArray(history), [elements]));
setRedoStack(redoStack.slice(1));
setElements(nextState);
}
}, [history, elements, redoStack, setHistory, setRedoStack, setElements]);
React.useImperativeHandle(ref, function () {
return {
onSave: function () {
var _onSave = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
var processedElements, dataURL;
return _regenerator().w(function (_context) {
while (1) switch (_context.n) {
case 0:
setLoading(true);
setSelectedElement(null);
_context.n = 1;
return new Promise(function (resolve) {
return setTimeout(resolve, 100);
});
case 1:
processedElements = removeImageProperty(elements);
_context.n = 2;
return exportStageAsImage(stageRef);
case 2:
dataURL = _context.v;
setLoading(false);
return _context.a(2, {
elements: processedElements,
image: dataURL
});
}
}, _callee);
}));
function onSave() {
return _onSave.apply(this, arguments);
}
return onSave;
}(),
loading: overallLoading,
setLoading: setLoading,
undoCount: history.length,
hasChanges: history.length > 0,
redoCount: redoStack.length
};
});
React.useEffect(function () {
if (typeof zoomLevel === 'number') {
setZoomPercentage(zoomLevel);
}
}, [zoomLevel]);
React.useEffect(function () {
var handleKeyDown = function handleKeyDown(e) {
var isMac = navigator.platform.toUpperCase().includes('MAC');
var ctrlOrCmd = isMac ? e.metaKey : e.ctrlKey;
var shiftKey = e.shiftKey;
// Delete
if ((e.key === 'Delete' || e.key === 'Backspace') && selectedElement && (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.draggable) !== false && !['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName) && !document.activeElement.isContentEditable) {
e.preventDefault();
onDeleteSelectedElement();
}
// Copy
if (ctrlOrCmd && e.key.toLowerCase() === 'c') {
if (selectedElement) {
e.preventDefault();
var copied = _objectSpread2({}, selectedElement);
delete copied.ref;
setCopiedElement(copied);
}
}
// Paste
if (ctrlOrCmd && e.key.toLowerCase() === 'v') {
if (copiedElement) {
e.preventDefault();
var newElement = _objectSpread2(_objectSpread2({}, copiedElement), {}, {
id: "element".concat(Date.now()),
x: copiedElement.x + 10,
y: copiedElement.y + 10,
draggable: true
});
addElement(newElement);
setSelectedElement(newElement);
}
}
// Undo: Ctrl/Cmd + Z
if (ctrlOrCmd && !shiftKey && e.key.toLowerCase() === 'z') {
e.preventDefault();
undo();
}
// Redo: Ctrl/Cmd + Shift + Z or Ctrl + Y
if (ctrlOrCmd && shiftKey && e.key.toLowerCase() === 'z' || ctrlOrCmd && e.key.toLowerCase() === 'y') {
e.preventDefault();
redo();
}
};
window.addEventListener('keydown', handleKeyDown);
return function () {
window.removeEventListener('keydown', handleKeyDown);
};
}, [selectedElement, copiedElement, undo, redo]);
// console.log(isPropValid('onClick'));
React.useEffect(function () {
setLanguageLocale(validateLocale(locale));
}, [locale]);
React.useEffect(function () {
setCustomImagesList(customImages || []);
}, [customImages]);
React.useEffect(function () {
setLoadingFonts(true);
loadAllGoogleFonts().then(function () {
// eslint-disable-next-line no-console
// console.log(msg);
})["catch"](function (err) {
// eslint-disable-next-line no-console
console.error('❌ Error loading fonts:', err);
})["finally"](function () {
setTimeout(function () {
setLoadingFonts(false);
}, 1000);
// eslint-disable-next-line no-console
console.log('🎉 Font loading complete!');
});
}, []);
React.useEffect(function () {
LoadImages(elementsList);
setElements(elementsList);
}, _toConsumableArray(elementsList));
var LoadImages = function LoadImages(elems) {
setLoadingImages(true);
preloadRelevantImages(elems).then(function (_ref2) {
var errors = _ref2.errors;
// eslint-disable-next-line no-console
// console.log('✅ Loaded images:', successes);
if ((errors === null || errors === void 0 ? void 0 : errors.length) > 0) {
// eslint-disable-next-line no-console
console.log('❌ Failed images:', errors);
}
})["catch"](function (err) {
// eslint-disable-next-line no-console
console.error('Something went really wrong:', err);
})["finally"](function () {
setLoadingImages(false);
});
};
var editorHeight = React.useMemo(function () {
var _pageSizesDimensions, _elements$find;
return calculatePercentageValue((_pageSizesDimensions = pageSizesDimensions[(elements === null || elements === void 0 || (_elements$find = elements.find(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
})) === null || _elements$find === void 0 ? void 0 : _elements$find.size) || (pageSizes === null || pageSizes === void 0 ? void 0 : pageSizes.A4)]) === null || _pageSizesDimensions === void 0 ? void 0 : _pageSizesDimensions.height, zoomPercentage);
}, [zoomPercentage, elements]);
var editorWidth = React.useMemo(function () {
var _pageSizesDimensions2, _elements$find2;
return calculatePercentageValue((_pageSizesDimensions2 = pageSizesDimensions[(elements === null || elements === void 0 || (_elements$find2 = elements.find(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
})) === null || _elements$find2 === void 0 ? void 0 : _elements$find2.size) || (pageSizes === null || pageSizes === void 0 ? void 0 : pageSizes.A4)]) === null || _pageSizesDimensions2 === void 0 ? void 0 : _pageSizesDimensions2.width, zoomPercentage);
}, [zoomPercentage, elements]);
var selectedPageSize = React.useMemo(function () {
var _elements$find3;
return (elements === null || elements === void 0 || (_elements$find3 = elements.find(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
})) === null || _elements$find3 === void 0 ? void 0 : _elements$find3.size) || (pageSizes === null || pageSizes === void 0 ? void 0 : pageSizes.A4);
}, [elements]);
var onSelectedTab = React.useCallback(function (tab) {
setSelectedElement(null);
setSelectedTab(tab);
setHelperSideBarVisible(true);
}, [setSelectedTab]);
var onCollapseHelperSideBar = React.useCallback(function () {
setHelperSideBarVisible(false);
}, [setHelperSideBarVisible]);
var onChangeZoomPercentage = function onChangeZoomPercentage(percentage) {
setZoomPercentage(percentage);
};
var saveHistory = function saveHistory(newElements) {
setHistory([].concat(_toConsumableArray(history), [elements]));
setRedoStack([]);
setElements(newElements);
};
var onSetBackgroundColor = function onSetBackgroundColor(color) {
if (!color) {
return;
}
var newElement;
var elemClone = _toConsumableArray(elements);
var backgroundColorIndex = elemClone.findIndex(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundColor);
});
if (backgroundColorIndex > -1) {
elemClone.splice(backgroundColorIndex, 1);
}
newElement = {
type: elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundColor,
id: "element".concat(Date.now()),
color: color
};
saveHistory([].concat(_toConsumableArray(elemClone), [newElement]));
};
var onSetPageSize = function onSetPageSize(newSize) {
var _elements$find4;
if (!newSize) return;
var oldSize = (elements === null || elements === void 0 || (_elements$find4 = elements.find(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
})) === null || _elements$find4 === void 0 ? void 0 : _elements$find4.size) || pageSizes.A4;
var oldDims = pageSizesDimensions[oldSize];
var newDims = pageSizesDimensions[newSize];
var scaleX = newDims.width / oldDims.width;
var scaleY = newDims.height / oldDims.height;
var scaledElements = elements.map(function (elem) {
if (elem.type === elementTypes.pageSize) {
return _objectSpread2(_objectSpread2({}, elem), {}, {
size: newSize
}); // Just update the size
}
var scaled = _objectSpread2({}, elem);
// Scale common position and size props
if (typeof scaled.x === 'number') scaled.x *= scaleX;
if (typeof scaled.y === 'number') scaled.y *= scaleY;
if (typeof scaled.width === 'number') scaled.width *= scaleX;
if (typeof scaled.height === 'number') scaled.height *= scaleY;
if (typeof scaled.radius === 'number') scaled.radius *= Math.min(scaleX, scaleY); // for circles, stars
if (typeof scaled.fontSize === 'number') scaled.fontSize *= Math.min(scaleX, scaleY);
// Special case: QR codes or icons that have scale or size props
if (scaled.points && Array.isArray(scaled.points)) {
scaled.points = scaled.points.map(function (val, idx) {
return idx % 2 === 0 ? val * scaleX : val * scaleY;
});
}
return scaled;
});
saveHistory(removeImageProperty(scaledElements));
};
var _onChangeCuttingGuideProp = function onChangeCuttingGuideProp(type, value) {
var elemClone = JSON.parse(JSON.stringify(elements));
var sizeIndex = elemClone.findIndex(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
});
if (sizeIndex > -1) {
elemClone[sizeIndex][type] = value;
} else {
var sizeElement = {
type: elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize,
id: "element".concat(Date.now())
};
sizeElement[type] = value;
elemClone.push(sizeElement);
}
saveHistory(removeImageProperty(elemClone));
};
var addElement = function addElement(elem) {
saveHistory([].concat(_toConsumableArray(elements), [elem]));
setSelectedElement(elem);
};
var addShape = function addShape(type) {
var shapeProps = {
id: "element".concat(Date.now()),
x: editorWidth / 2 - 50,
y: editorHeight / 2 - 50,
fill: shapeFillColor,
stroke: shapeStrokeColor,
strokeWidth: shapeStrokeWidth,
opacity: shapeOpacity,
type: type,
draggable: true
};
if (type === elementTypes.circle) {
shapeProps['radius'] = 70;
shapeProps['x'] = editorWidth / 2;
shapeProps['y'] = editorHeight / 2;
addElement(shapeProps);
} else if (type === elementTypes.square) {
shapeProps['height'] = 100;
shapeProps['width'] = 100;
shapeProps['name'] = elementTypes.square;
shapeProps['cornerRadius'] = 0;
addElement(shapeProps);
} else if (type === elementTypes.arrowRight) {
shapeProps['points'] = [0, 0, 100, 0];
shapeProps['pointerLength'] = 20;
shapeProps['pointerWidth'] = 20;
shapeProps['strokeWidth'] = 4;
shapeProps['fill'] = shapeStrokeColor;
addElement(shapeProps);
} else if (type === elementTypes.triangle) {
shapeProps['sides'] = 3;
shapeProps['radius'] = 60;
shapeProps['rotation'] = 0;
shapeProps['x'] = editorWidth / 2;
shapeProps['y'] = editorHeight / 2;
addElement(shapeProps);
} else if (type === elementTypes.heart) {
shapeProps['data'] = "M 50,20 \n C 20,-10 -30,40 50,90 \n C 130,40 80,-10 50,20 Z";
shapeProps['scale'] = {
x: 1,
y: 1
};
addElement(shapeProps);
} else if (type === elementTypes.star) {
shapeProps['numPoints'] = 5;
shapeProps['innerRadius'] = 30;
shapeProps['outerRadius'] = 70;
shapeProps['x'] = editorWidth / 2;
shapeProps['y'] = editorHeight / 2;
addElement(shapeProps);
} else if (type === elementTypes.horizontalLine) {
var centerY = editorHeight / 2;
shapeProps['points'] = [50, centerY, editorWidth - 50, centerY];
shapeProps['x'] = 0;
shapeProps['y'] = 0;
shapeProps['strokeWidth'] = 4;
addElement(shapeProps);
} else if (type === elementTypes.verticalLine) {
var centerX = editorWidth / 2;
shapeProps['points'] = [centerX, 50, centerX, editorHeight - 50];
shapeProps['x'] = 0;
shapeProps['y'] = 0;
shapeProps['strokeWidth'] = 4;
addElement(shapeProps);
}
// console.error(type);
};
var onSetBackgroundImage = function onSetBackgroundImage(img) {
var newElement;
var elemClone = _toConsumableArray(elements);
var backgroundImageIndex = elemClone.findIndex(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundImage);
});
if (backgroundImageIndex > -1) {
elemClone.splice(backgroundImageIndex, 1);
}
newElement = {
type: elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundImage,
id: "element".concat(Date.now()),
src: img,
opacity: backgroundImageOpacity
};
saveHistory([].concat(_toConsumableArray(elemClone), [newElement]));
};
var onRemoveBackgroundImage = function onRemoveBackgroundImage() {
var elemClone = JSON.parse(JSON.stringify(elements));
var backgroundImageIndex = elemClone.findIndex(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundImage);
});
if (backgroundImageIndex > -1) {
elemClone.splice(backgroundImageIndex, 1);
saveHistory(elemClone);
}
};
var onChangeBackgroundImageOpacity = function onChangeBackgroundImageOpacity(val) {
var backgroundImageIndex = elements === null || elements === void 0 ? void 0 : elements.findIndex(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundImage);
});
if (backgroundImageIndex > -1) {
var updatedElements = elements === null || elements === void 0 ? void 0 : elements.map(function (el) {
return el.type === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundImage) ? _objectSpread2(_objectSpread2({}, el), {}, {
opacity: val
}) : el;
});
saveHistory(updatedElements);
}
setBackgroundImageOpacity(val);
};
var onSelectElement = function onSelectElement(element) {
if (isElementShape(element)) {
setSelectedTab(sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.shape);
} else if (isElementOfSameType(element, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.image)) {
setSelectedTab(sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.image);
} else if (isElementOfSameType(element, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr)) {
setSelectedTab(sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.qr);
} else if (isElementOfSameType(element, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.text)) {
setSelectedTab(sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.text);
}
if (element) {
var elem = element;
delete elem['ref'];
setSelectedElement(_objectSpread2({}, elem));
setHelperSideBarVisible(true);
} else {
setSelectedElement(null);
}
};
var changeSelectedElementProperty = function changeSelectedElementProperty(key, value) {
var selectedElementCopy = _objectSpread2({}, selectedElement);
selectedElementCopy[key] = value;
delete selectedElementCopy['ref'];
if (key === 'fontWeight') {
selectedElementCopy['fontVariant'] = value;
}
var updatedElements = elements === null || elements === void 0 ? void 0 : elements.map(function (el) {
return el.id === (selectedElementCopy === null || selectedElementCopy === void 0 ? void 0 : selectedElementCopy.id) ? _objectSpread2({}, selectedElementCopy) : el;
});
saveHistory(updatedElements);
setSelectedElement(selectedElementCopy);
};
var onChangeShapeFill = function onChangeShapeFill(e) {
if (selectedElement && isElementShape(selectedElement)) {
changeSelectedElementProperty('fill', e);
} else {
setShapeFillColor(e);
}
};
var onChangeShapeStrokeWidth = function onChangeShapeStrokeWidth(e) {
if (selectedElement && isElementShape(selectedElement)) {
changeSelectedElementProperty('strokeWidth', e);
} else {
setShapeStrokeWidth(e);
}
};
var onChangeShapeStrokeColor = function onChangeShapeStrokeColor(e) {
if (selectedElement && isElementShape(selectedElement)) {
changeSelectedElementProperty('stroke', e);
} else {
setShapeStrokeColor(e);
}
};
var onChangeShapeOpacity = function onChangeShapeOpacity(e) {
if (selectedElement && isElementShape(selectedElement)) {
changeSelectedElementProperty('opacity', e);
} else {
setShapeOpacity(e);
}
};
var onDeleteSelectedElement = function onDeleteSelectedElement() {
var index = elements === null || elements === void 0 ? void 0 : elements.findIndex(function (e) {
return (e === null || e === void 0 ? void 0 : e.id) === (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id);
});
if (index < 0) {
return;
}
var copy = _toConsumableArray(elements);
copy.splice(index, 1);
setSelectedElement(null);
saveHistory(_toConsumableArray(copy));
};
var onCopySelectedElement = function onCopySelectedElement() {
var copyElement = _objectSpread2({}, selectedElement);
copyElement['id'] = "element".concat(Date.now());
copyElement['x'] = (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.x) + 10;
copyElement['y'] = (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.y) + 10;
copyElement['draggable'] = true;
addElement(copyElement);
};
var onToggleLockElement = function onToggleLockElement() {
changeSelectedElementProperty('draggable', !(selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable));
// setSelectedElement(null);
};
var bringSelectedElementToFront = function bringSelectedElementToFront() {
var copyElements = _toConsumableArray(elements);
var index = copyElements === null || copyElements === void 0 ? void 0 : copyElements.findIndex(function (elem) {
return elem.id === (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id);
});
if (index === -1) {
return;
}
var _copyElements$splice = copyElements === null || copyElements === void 0 ? void 0 : copyElements.splice(index, 1),
_copyElements$splice2 = _slicedToArray(_copyElements$splice, 1),
selectedElem = _copyElements$splice2[0];
copyElements === null || copyElements === void 0 || copyElements.push(selectedElem);
saveHistory(_toConsumableArray(copyElements));
};
var createNewTemplate = function createNewTemplate() {
var elems = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [].concat(_toConsumableArray(defaultElements), [{
type: elementTypes.qr,
id: "element".concat(Date.now() + 1),
width: 110,
height: 110,
x: 194.5,
y: 280,
fill: theme.color.green_80D965,
stroke: theme.color.black,
strokeWidth: 2,
draggable: true,
qrLogo: null,
qrText: qrLink,
opacity: 1,
logoVisible: false
}]);
setElements(_toConsumableArray(elems));
setHistory([]);
setRedoStack([]);
if (typeof onCreateNewTemplate === 'function') {
onCreateNewTemplate(elems);
}
// Clear selected template ID
if (typeof onTemplateSelect === 'function') {
onTemplateSelect(null);
}
};
var sendSelectedElementToBack = function sendSelectedElementToBack() {
var copyElements = _toConsumableArray(elements);
var index = copyElements === null || copyElements === void 0 ? void 0 : copyElements.findIndex(function (elem) {
return elem.id === (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id);
});
if (index === -1) {
return;
}
var _copyElements$splice3 = copyElements === null || copyElements === void 0 ? void 0 : copyElements.splice(index, 1),
_copyElements$splice4 = _slicedToArray(_copyElements$splice3, 1),
selectedElem = _copyElements$splice4[0];
copyElements === null || copyElements === void 0 || copyElements.unshift(selectedElem);
saveHistory(_toConsumableArray(copyElements));
};
var onChangeImageStrokeWidth = function onChangeImageStrokeWidth(e) {
if (isElementOfSameType(selectedElement, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.image)) {
changeSelectedElementProperty('strokeWidth', e);
} else {
setImageStrokeWidth(e);
}
};
var onChangeImageStrokeColor = function onChangeImageStrokeColor(e) {
if (isElementOfSameType(selectedElement, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.image)) {
changeSelectedElementProperty('stroke', e);
} else {
setImageStrokeColor(e);
}
};
var onChangeImageOpacity = function onChangeImageOpacity(e) {
if (isElementOfSameType(selectedElement, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.image)) {
changeSelectedElementProperty('opacity', e);
} else {
setImageOpacity(e);
}
};
var addCustomImageToList = function addCustomImageToList(img) {
// console.error({img});
setCustomImagesList([].concat(_toConsumableArray(customImagesList), [img]));
};
var addImageToCanvas = function addImageToCanvas(img) {
var imgProps = {
id: "element".concat(Date.now()),
x: editorWidth / 2 - 50,
y: editorHeight / 2 - 50,
stroke: imageStrokeColor,
strokeWidth: imageStrokeWidth,
opacity: imageOpacity,
type: elementTypes.image,
draggable: true,
// width: 100,
// height: 100,
src: img
};
addElement(imgProps);
};
var addTextToCanvas = function addTextToCanvas(e) {
var text = e ? e : defaultTextProps;
var textProps = {
id: "element".concat(Date.now()),
x: editorWidth / 2 - 100,
y: editorHeight / 2,
opacity: (text === null || text === void 0 ? void 0 : text.opacity) || (defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.opacity),
type: elementTypes.text,
draggable: true,
text: (text === null || text === void 0 ? void 0 : text.text) || (defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.text),
fontSize: (text === null || text === void 0 ? void 0 : text.fontSize) || (defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontSize),
fontFamily: (text === null || text === void 0 ? void 0 : text.fontFamily) || (defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontFamily),
color: (text === null || text === void 0 ? void 0 : text.color) || (defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.color),
textDecoration: (text === null || text === void 0 ? void 0 : text.textDecoration) || (defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.textDecoration),
fontStyle: (text === null || text === void 0 ? void 0 : text.fontStyle) || (defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontStyle),
fontWeight: (text === null || text === void 0 ? void 0 : text.fontWeight) || (defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontWeight),
textAlign: (text === null || text === void 0 ? void 0 : text.textAlign) || (defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.textAlign)
};
if (text !== null && text !== void 0 && text.width) {
textProps['width'] = text === null || text === void 0 ? void 0 : text.width;
}
addElement(textProps);
};
var addQrCode = function addQrCode() {
var qrProps = {
id: "element".concat(Date.now()),
type: elementTypes.qr,
height: 110,
width: 110,
x: editorWidth / 2 - 50,
y: editorHeight / 2 - 50,
fill: theme.color.green_80D965,
stroke: qrStrokeColor,
strokeWidth: qrStrokeWidth,
draggable: true,
qrLogo: null,
qrText: qrLink,
opacity: qrOpacity,
logoVisible: false
};
addElement(qrProps);
};
var removeQrCode = function removeQrCode() {
var copy = elements === null || elements === void 0 ? void 0 : elements.filter(function (el) {
return el.type !== (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr);
});
if ((selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr)) {
setSelectedElement(null);
}
saveHistory(_toConsumableArray(copy));
};
var onChangeQrStrokeWidth = function onChangeQrStrokeWidth(e) {
if (isElementOfSameType(selectedElement, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr)) {
changeSelectedElementProperty('strokeWidth', e);
} else {
setQrStrokeWidth(e);
}
};
var onChangeQrStrokeColor = function onChangeQrStrokeColor(e) {
if (isElementOfSameType(selectedElement, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr)) {
changeSelectedElementProperty('stroke', e);
} else {
setQrStrokeColor(e);
}
};
var onChangeQrOpacity = function onChangeQrOpacity(e) {
if (isElementOfSameType(selectedElement, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr)) {
changeSelectedElementProperty('opacity', e);
} else {
setQrOpacity(e);
}
};
var toggleQr = function toggleQr() {
if ((elements === null || elements === void 0 ? void 0 : elements.findIndex(function (elem) {
return elem.type === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr);
})) > -1) {
removeQrCode();
} else {
addQrCode();
}
};
var turnLogoVisibiltyOn = function turnLogoVisibiltyOn() {
var updatedElements = elements === null || elements === void 0 ? void 0 : elements.map(function (el) {
return el.type === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr) ? _objectSpread2(_objectSpread2({}, el), {}, {
logoVisible: true,
qrLogo: (el === null || el === void 0 ? void 0 : el.qrLogo) || qrLogo
}) : el;
});
saveHistory(updatedElements);
};
var turnLogoVisibiltyOff = function turnLogoVisibiltyOff() {
var updatedElements = elements === null || elements === void 0 ? void 0 : elements.map(function (el) {
return el.type === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr) ? _objectSpread2(_objectSpread2({}, el), {}, {
logoVisible: false
}) : el;
});
saveHistory(updatedElements);
};
var toggleQrLogo = function toggleQrLogo() {
var index = elements === null || elements === void 0 ? void 0 : elements.findIndex(function (elem) {
return elem.type === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr);
});
if (index > -1) {
var _elements$index;
setSelectedElement(null);
if (elements !== null && elements !== void 0 && (_elements$index = elements[index]) !== null && _elements$index !== void 0 && _elements$index.logoVisible) {
turnLogoVisibiltyOff();
} else {
turnLogoVisibiltyOn();
}
}
};
var addQrLogo = /*#__PURE__*/function () {
var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
var file, result, imageUrl, reader, _t;
return _regenerator().w(function (_context2) {
while (1) switch (_context2.n) {
case 0:
_context2.n = 1;
return pickImage();
case 1:
file = _context2.v;
if (file) {
_context2.n = 2;
break;
}
return _context2.a(2);
case 2:
if (!uploadQRLogoImage) {
_context2.n = 8;
break;
}
_context2.p = 3;
setLoadingUploadImage(true);
_context2.n = 4;
return uploadQRLogoImage(file);
case 4:
result = _context2.v;
imageUrl = typeof result === 'string' ? result : result === null || result === void 0 ? void 0 : result.url;
if (imageUrl) {
addLogo(imageUrl);
} else {
console.warn('uploadQRLogoImage did not return a valid image URL');
}
_context2.n = 6;
break;
case 5:
_context2.p = 5;
_t = _context2.v;
console.error('Error uploading QR logo image:', _t);
case 6:
_context2.p = 6;
setLoadingUploadImage(false);
return _context2.f(6);
case 7:
_context2.n = 9;
break;
case 8:
reader = new FileReader();
reader.onload = function () {
addLogo(reader.result);
};
reader.readAsDataURL(file);
case 9:
return _context2.a(2);
}
}, _callee2, null, [[3, 5, 6, 7]]);
}));
return function addQrLogo() {
return _ref3.apply(this, arguments);
};
}();
var addLogo = function addLogo(url) {
var index = elements === null || elements === void 0 ? void 0 : elements.findIndex(function (elem) {
return elem.type === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr);
});
setQrLogo(url);
if (index > -1) {
// if (elements[index]?.logoVisible) {
var updatedElements = elements === null || elements === void 0 ? void 0 : elements.map(function (el) {
return el.type === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr) ? _objectSpread2(_objectSpread2({}, el), {}, {
qrLogo: url
}) : el;
});
saveHistory(updatedElements);
// }
}
};
var onChangeTextProperty = function onChangeTextProperty(key, value) {
if (isElementOfSameType(selectedElement, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.text)) {
changeSelectedElementProperty(key, value);
} else {
var copyDefultProps = _objectSpread2({}, defaultTextProps);
copyDefultProps[key] = value;
setDefaultTextProps(_objectSpread2({}, copyDefultProps));
}
};
var onSaveProgress = /*#__PURE__*/function () {
var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
var processedElements, dataURL;
return _regenerator().w(function (_context3) {
while (1) switch (_context3.n) {
case 0:
if (onSave) {
_context3.n = 1;
break;
}
return _context3.a(2);
case 1:
setLoading(true);
setSelectedElement(null);
_context3.n = 2;
return new Promise(function (resolve) {
return setTimeout(resolve, 100);
});
case 2:
processedElements = removeImageProperty(elements);
_context3.n = 3;
return exportStageAsImage(stageRef);
case 3:
dataURL = _context3.v;
setLoading(false);
onSave({
elements: processedElements,
image: dataURL
});
case 4:
return _context3.a(2);
}
}, _callee3);
}));
return function onSaveProgress() {
return _ref4.apply(this, arguments);
};
}();
return /*#__PURE__*/React.createElement(styled.StyleSheetManager, {
shouldForwardProp: isPropValid
}, /*#__PURE__*/React.createElement(StudioWrapper, null, /*#__PURE__*/React.createElement(SideBar, {
selectedSideBarItem: selectedTab,
onClickPill: onSelectedTab,
languageLocale: languageLocale,
disableWhiteLabel: disableWhiteLabel,
styleProps: styleProps
}), /*#__PURE__*/React.createElement(HelperSideBar, {
selectedSideBarItem: selectedTab,
onCollapse: onCollapseHelperSideBar,
helperSideBarVisible: helperSideBarVisible,
onAddShape: addShape,
defaultImagesList: defaultImages,
customImagesList: customImagesList,
onAddCustomImageToList: addCustomImageToList,
onAddImageToCanvas: addImageToCanvas,
onAddTextToCanvas: addTextToCanvas,
toggleQr: toggleQr,
qrPresent: (elements === null || elements === void 0 ? void 0 : elements.findIndex(function (elem) {
return elem.type === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr);
})) > -1,
toggleQrLogo: toggleQrLogo,
addQrLogo: addQrLogo,
qrLogo: (elements === null || elements === void 0 || (_elements$elements$fi = elements[elements === null || elements === void 0 ? void 0 : elements.findIndex(function (elem) {
return elem.type === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr);
})]) === null || _elements$elements$fi === void 0 ? void 0 : _elements$elements$fi.qrLogo) || qrLogo,
elements: elements,
oncreateNewTemplate: createNewTemplate,
uploadImageCallBack: uploadImageCallBack,
setLoadingUploadImage: setLoadingUploadImage,
defaultTemplatesList: defaultTemplatesList,
customTemplatesList: customTemplatesList,
onDeleteCustomTemplate: onDeleteCustomTemplate,
styleProps: styleProps,
defaultText: defaultText,
languageLocale: languageLocale,
onTemplateSelect: onTemplateSelect
}), loadingFonts ? null : /*#__PURE__*/React.createElement(Editor
// canvasSize={canvasSize}
, {
cuttingGuideStroke: (elements === null || elements === void 0 || (_elements$find5 = elements.find(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
})) === null || _elements$find5 === void 0 ? void 0 : _elements$find5.cuttingGuideStroke) || 0,
cuttingGuideStrokeColor: (elements === null || elements === void 0 || (_elements$find6 = elements.find(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
})) === null || _elements$find6 === void 0 ? void 0 : _elements$find6.cuttingGuideStrokeColor) || (theme === null || theme === void 0 ? void 0 : theme.color.black),
onChangeCuttingGuideProp: function onChangeCuttingGuideProp(type, value) {
_onChangeCuttingGuideProp(type, value);
},
editorHeight: editorHeight,
editorWidth: editorWidth,
selectedTab: selectedTab,
title: title,
zoomPercentage: zoomPercentage,
onChangeZoomPercentage: onChangeZoomPercentage,
onSetBackgroundColor: onSetBackgroundColor,
elements: elements,
history: history,
redoStack: redoStack,
onSetBackgroundImage: onSetBackgroundImage,
onUndo: undo,
onRedo: redo,
shapeStrokeColor: shapeStrokeColor,
shapeStrokeWidth: shapeStrokeWidth,
shapeFillColor: shapeFillColor,
imageStrokeWidth: imageStrokeWidth,
imageStrokeColor: imageStrokeColor,
imageOpacity: imageOpacity,
onChangeImageStrokeWidth: onChangeImageStrokeWidth,
onChangeImageStrokeColor: onChangeImageStrokeColor,
onChangeImageOpacity: onChangeImageOpacity,
onChangeShapeStrokeColor: onChangeShapeStrokeColor,
onChangeShapeStrokeWidth: onChangeShapeStrokeWidth,
onChangeShapeFill: onChangeShapeFill,
shapeOpacity: shapeOpacity,
onChangeShapeOpacity: onChangeShapeOpacity,
qrStrokeWidth: qrStrokeWidth,
qrStrokeColor: qrStrokeColor,
qrOpacity: qrOpacity,
onChangeQrStrokeWidth: onChangeQrStrokeWidth,
onChangeQrStrokeColor: onChangeQrStrokeColor,
onChangeQrOpacity: onChangeQrOpacity,
selectedElement: selectedElement,
onSelectElement: onSelectElement,
stageRef: stageRef,
saveHistory: saveHistory,
onChangeBackgroundImageOpacity: onChangeBackgroundImageOpacity,
backgroundImageOpacity: (elements === null || elements === void 0 || (_elements$find7 = elements.find(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundImage);
})) === null || _elements$find7 === void 0 ? void 0 : _elements$find7.opacity) || backgroundImageOpacity,
onDeleteSelectedElement: onDeleteSelectedElement,
onCopySelectedElement: onCopySelectedElement,
onToggleLockElement: onToggleLockElement,
bringSelectedElementToFront: bringSelectedElementToFront,
sendSelectedElementToBack: sendSelectedElementToBack,
defaultTextProps: defaultTextProps,
onChangeTextProperty: onChangeTextProperty,
onSetPageSize: onSetPageSize,
selectedPageSize: selectedPageSize,
loadingImages: loadingImages,
loadingFonts: loadingFonts,
uploadImageCallBack: uploadImageCallBack,
setLoadingUploadImage: setLoadingUploadImage,
onSave: onSave && onSaveProgress,
showSaveButton: showSaveButton,
onSetSelectedTab: onSelectedTab,
saveButtonText: saveButtonText,
languageLocale: languageLocale,
onRemoveBackgroundImage: onRemoveBackgroundImage,
showBackgroundImagePicker: showBackgroundImagePicker,
showOpacityPicker: showOpacityPicker,
changeSelectedElementProperty: changeSelectedElementProperty
}), overallLoading && /*#__PURE__*/React.createElement(Overlay, null, /*#__PURE__*/React.createElement(LoadingSpinner, {
size: "60px",
color: theme.color.secondary
}))));
});
Studio.propTypes = propTypes$A;
Studio.displayName = 'Studio';
exports.Studio = Studio;
//# sourceMappingURL=index.js.map