Skip to content

Instantly share code, notes, and snippets.

@integryiosama

integryiosama/index.umd.js Secret

Last active September 27, 2022 19:14
Show Gist options
  • Save integryiosama/41b6f3394c954367723bfbce8b7535d0 to your computer and use it in GitHub Desktop.
Save integryiosama/41b6f3394c954367723bfbce8b7535d0 to your computer and use it in GitHub Desktop.
Download ZIP
Generated SDK UMD build
Raw
index.umd.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.IntegryJS = factory());
}(this, (function () { 'use strict';
(function() {
const env = {"DEBUG":true};
try {
if (process) {
process.env = Object.assign({}, process.env);
Object.assign(process.env, env);
return;
}
} catch (e) {} // avoid ReferenceError: process is not defined
globalThis.process = { env:env };
})();
var n$2,
l$2,
u$2,
t$2,
o$2,
r$1,
e$2 = {},
c$2 = [],
s$2 = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
function a$2(n, l) {
for (var u in l) n[u] = l[u];
return n;
}
function h$1(n) {
var l = n.parentNode;
l && l.removeChild(n);
}
function v$1(l, u, i) {
var t,
o,
r,
f = {};
for (r in u) "key" == r ? t = u[r] : "ref" == r ? o = u[r] : f[r] = u[r];
if (arguments.length > 2 && (f.children = arguments.length > 3 ? n$2.call(arguments, 2) : i), "function" == typeof l && null != l.defaultProps) for (r in l.defaultProps) void 0 === f[r] && (f[r] = l.defaultProps[r]);
return y$2(l, f, t, o, null);
}
function y$2(n, i, t, o, r) {
var f = {
type: n,
props: i,
key: t,
ref: o,
__k: null,
__: null,
__b: 0,
__e: null,
__d: void 0,
__c: null,
__h: null,
constructor: void 0,
__v: null == r ? ++u$2 : r
};
return null != l$2.vnode && l$2.vnode(f), f;
}
function d$2(n) {
return n.children;
}
function _(n, l) {
this.props = n, this.context = l;
}
function k$1(n, l) {
if (null == l) return n.__ ? k$1(n.__, n.__.__k.indexOf(n) + 1) : null;
for (var u; l < n.__k.length; l++) if (null != (u = n.__k[l]) && null != u.__e) return u.__e;
return "function" == typeof n.type ? k$1(n) : null;
}
function b$1(n) {
var l, u;
if (null != (n = n.__) && null != n.__c) {
for (n.__e = n.__c.base = null, l = 0; l < n.__k.length; l++) if (null != (u = n.__k[l]) && null != u.__e) {
n.__e = n.__c.base = u.__e;
break;
}
return b$1(n);
}
}
function m$2(n) {
(!n.__d && (n.__d = !0) && t$2.push(n) && !g$1.__r++ || r$1 !== l$2.debounceRendering) && ((r$1 = l$2.debounceRendering) || o$2)(g$1);
}
function g$1() {
for (var n; g$1.__r = t$2.length;) n = t$2.sort(function (n, l) {
return n.__v.__b - l.__v.__b;
}), t$2 = [], n.some(function (n) {
var l, u, i, t, o, r;
n.__d && (o = (t = (l = n).__v).__e, (r = l.__P) && (u = [], (i = a$2({}, t)).__v = t.__v + 1, j$1(r, t, i, l.__n, void 0 !== r.ownerSVGElement, null != t.__h ? [o] : null, u, null == o ? k$1(t) : o, t.__h), z(u, t), t.__e != o && b$1(t)));
});
}
function w$1(n, l, u, i, t, o, r, f, s, a) {
var h,
v,
p,
_,
b,
m,
g,
w = i && i.__k || c$2,
A = w.length;
for (u.__k = [], h = 0; h < l.length; h++) if (null != (_ = u.__k[h] = null == (_ = l[h]) || "boolean" == typeof _ ? null : "string" == typeof _ || "number" == typeof _ || "bigint" == typeof _ ? y$2(null, _, null, null, _) : Array.isArray(_) ? y$2(d$2, {
children: _
}, null, null, null) : _.__b > 0 ? y$2(_.type, _.props, _.key, null, _.__v) : _)) {
if (_.__ = u, _.__b = u.__b + 1, null === (p = w[h]) || p && _.key == p.key && _.type === p.type) w[h] = void 0;else for (v = 0; v < A; v++) {
if ((p = w[v]) && _.key == p.key && _.type === p.type) {
w[v] = void 0;
break;
}
p = null;
}
j$1(n, _, p = p || e$2, t, o, r, f, s, a), b = _.__e, (v = _.ref) && p.ref != v && (g || (g = []), p.ref && g.push(p.ref, null, _), g.push(v, _.__c || b, _)), null != b ? (null == m && (m = b), "function" == typeof _.type && null != _.__k && _.__k === p.__k ? _.__d = s = x$1(_, s, n) : s = P(n, _, p, w, b, s), a || "option" !== u.type ? "function" == typeof u.type && (u.__d = s) : n.value = "") : s && p.__e == s && s.parentNode != n && (s = k$1(p));
}
for (u.__e = m, h = A; h--;) null != w[h] && ("function" == typeof u.type && null != w[h].__e && w[h].__e == u.__d && (u.__d = k$1(i, h + 1)), N(w[h], w[h]));
if (g) for (h = 0; h < g.length; h++) M(g[h], g[++h], g[++h]);
}
function x$1(n, l, u) {
var i, t;
for (i = 0; i < n.__k.length; i++) (t = n.__k[i]) && (t.__ = n, l = "function" == typeof t.type ? x$1(t, l, u) : P(u, t, t, n.__k, t.__e, l));
return l;
}
function P(n, l, u, i, t, o) {
var r, f, e;
if (void 0 !== l.__d) r = l.__d, l.__d = void 0;else if (null == u || t != o || null == t.parentNode) n: if (null == o || o.parentNode !== n) n.appendChild(t), r = null;else {
for (f = o, e = 0; (f = f.nextSibling) && e < i.length; e += 2) if (f == t) break n;
n.insertBefore(t, o), r = o;
}
return void 0 !== r ? r : t.nextSibling;
}
function C(n, l, u, i, t) {
var o;
for (o in u) "children" === o || "key" === o || o in l || H(n, o, null, u[o], i);
for (o in l) t && "function" != typeof l[o] || "children" === o || "key" === o || "value" === o || "checked" === o || u[o] === l[o] || H(n, o, l[o], u[o], i);
}
function $(n, l, u) {
"-" === l[0] ? n.setProperty(l, u) : n[l] = null == u ? "" : "number" != typeof u || s$2.test(l) ? u : u + "px";
}
function H(n, l, u, i, t) {
var o;
n: if ("style" === l) {
if ("string" == typeof u) n.style.cssText = u;else {
if ("string" == typeof i && (n.style.cssText = i = ""), i) for (l in i) u && l in u || $(n.style, l, "");
if (u) for (l in u) i && u[l] === i[l] || $(n.style, l, u[l]);
}
} else if ("o" === l[0] && "n" === l[1]) o = l !== (l = l.replace(/Capture$/, "")), l = l.toLowerCase() in n ? l.toLowerCase().slice(2) : l.slice(2), n.l || (n.l = {}), n.l[l + o] = u, u ? i || n.addEventListener(l, o ? T : I, o) : n.removeEventListener(l, o ? T : I, o);else if ("dangerouslySetInnerHTML" !== l) {
if (t) l = l.replace(/xlink[H:h]/, "h").replace(/sName$/, "s");else if ("href" !== l && "list" !== l && "form" !== l && "tabIndex" !== l && "download" !== l && l in n) try {
n[l] = null == u ? "" : u;
break n;
} catch (n) {}
"function" == typeof u || (null != u && (!1 !== u || "a" === l[0] && "r" === l[1]) ? n.setAttribute(l, u) : n.removeAttribute(l));
}
}
function I(n) {
this.l[n.type + !1](l$2.event ? l$2.event(n) : n);
}
function T(n) {
this.l[n.type + !0](l$2.event ? l$2.event(n) : n);
}
function j$1(n, u, i, t, o, r, f, e, c) {
var s,
h,
v,
y,
p,
k,
b,
m,
g,
x,
A,
P = u.type;
if (void 0 !== u.constructor) return null;
null != i.__h && (c = i.__h, e = u.__e = i.__e, u.__h = null, r = [e]), (s = l$2.__b) && s(u);
try {
n: if ("function" == typeof P) {
if (m = u.props, g = (s = P.contextType) && t[s.__c], x = s ? g ? g.props.value : s.__ : t, i.__c ? b = (h = u.__c = i.__c).__ = h.__E : ("prototype" in P && P.prototype.render ? u.__c = h = new P(m, x) : (u.__c = h = new _(m, x), h.constructor = P, h.render = O), g && g.sub(h), h.props = m, h.state || (h.state = {}), h.context = x, h.__n = t, v = h.__d = !0, h.__h = []), null == h.__s && (h.__s = h.state), null != P.getDerivedStateFromProps && (h.__s == h.state && (h.__s = a$2({}, h.__s)), a$2(h.__s, P.getDerivedStateFromProps(m, h.__s))), y = h.props, p = h.state, v) null == P.getDerivedStateFromProps && null != h.componentWillMount && h.componentWillMount(), null != h.componentDidMount && h.__h.push(h.componentDidMount);else {
if (null == P.getDerivedStateFromProps && m !== y && null != h.componentWillReceiveProps && h.componentWillReceiveProps(m, x), !h.__e && null != h.shouldComponentUpdate && !1 === h.shouldComponentUpdate(m, h.__s, x) || u.__v === i.__v) {
h.props = m, h.state = h.__s, u.__v !== i.__v && (h.__d = !1), h.__v = u, u.__e = i.__e, u.__k = i.__k, u.__k.forEach(function (n) {
n && (n.__ = u);
}), h.__h.length && f.push(h);
break n;
}
null != h.componentWillUpdate && h.componentWillUpdate(m, h.__s, x), null != h.componentDidUpdate && h.__h.push(function () {
h.componentDidUpdate(y, p, k);
});
}
h.context = x, h.props = m, h.state = h.__s, (s = l$2.__r) && s(u), h.__d = !1, h.__v = u, h.__P = n, s = h.render(h.props, h.state, h.context), h.state = h.__s, null != h.getChildContext && (t = a$2(a$2({}, t), h.getChildContext())), v || null == h.getSnapshotBeforeUpdate || (k = h.getSnapshotBeforeUpdate(y, p)), A = null != s && s.type === d$2 && null == s.key ? s.props.children : s, w$1(n, Array.isArray(A) ? A : [A], u, i, t, o, r, f, e, c), h.base = u.__e, u.__h = null, h.__h.length && f.push(h), b && (h.__E = h.__ = null), h.__e = !1;
} else null == r && u.__v === i.__v ? (u.__k = i.__k, u.__e = i.__e) : u.__e = L(i.__e, u, i, t, o, r, f, c);
(s = l$2.diffed) && s(u);
} catch (n) {
u.__v = null, (c || null != r) && (u.__e = e, u.__h = !!c, r[r.indexOf(e)] = null), l$2.__e(n, u, i);
}
}
function z(n, u) {
l$2.__c && l$2.__c(u, n), n.some(function (u) {
try {
n = u.__h, u.__h = [], n.some(function (n) {
n.call(u);
});
} catch (n) {
l$2.__e(n, u.__v);
}
});
}
function L(l, u, i, t, o, r, f, c) {
var s,
a,
v,
y = i.props,
p = u.props,
d = u.type,
_ = 0;
if ("svg" === d && (o = !0), null != r) for (; _ < r.length; _++) if ((s = r[_]) && (s === l || (d ? s.localName == d : 3 == s.nodeType))) {
l = s, r[_] = null;
break;
}
if (null == l) {
if (null === d) return document.createTextNode(p);
l = o ? document.createElementNS("http://www.w3.org/2000/svg", d) : document.createElement(d, p.is && p), r = null, c = !1;
}
if (null === d) y === p || c && l.data === p || (l.data = p);else {
if (r = r && n$2.call(l.childNodes), a = (y = i.props || e$2).dangerouslySetInnerHTML, v = p.dangerouslySetInnerHTML, !c) {
if (null != r) for (y = {}, _ = 0; _ < l.attributes.length; _++) y[l.attributes[_].name] = l.attributes[_].value;
(v || a) && (v && (a && v.__html == a.__html || v.__html === l.innerHTML) || (l.innerHTML = v && v.__html || ""));
}
if (C(l, p, y, o, c), v) u.__k = [];else if (_ = u.props.children, w$1(l, Array.isArray(_) ? _ : [_], u, i, t, o && "foreignObject" !== d, r, f, r ? r[0] : i.__k && k$1(i, 0), c), null != r) for (_ = r.length; _--;) null != r[_] && h$1(r[_]);
c || ("value" in p && void 0 !== (_ = p.value) && (_ !== l.value || "progress" === d && !_) && H(l, "value", _, y.value, !1), "checked" in p && void 0 !== (_ = p.checked) && _ !== l.checked && H(l, "checked", _, y.checked, !1));
}
return l;
}
function M(n, u, i) {
try {
"function" == typeof n ? n(u) : n.current = u;
} catch (n) {
l$2.__e(n, i);
}
}
function N(n, u, i) {
var t, o;
if (l$2.unmount && l$2.unmount(n), (t = n.ref) && (t.current && t.current !== n.__e || M(t, null, u)), null != (t = n.__c)) {
if (t.componentWillUnmount) try {
t.componentWillUnmount();
} catch (n) {
l$2.__e(n, u);
}
t.base = t.__P = null;
}
if (t = n.__k) for (o = 0; o < t.length; o++) t[o] && N(t[o], u, "function" != typeof n.type);
i || null == n.__e || h$1(n.__e), n.__e = n.__d = void 0;
}
function O(n, l, u) {
return this.constructor(n, u);
}
function S(u, i, t) {
var o, r, f;
l$2.__ && l$2.__(u, i), r = (o = "function" == typeof t) ? null : t && t.__k || i.__k, f = [], j$1(i, u = (!o && t || i).__k = v$1(d$2, null, [u]), r || e$2, e$2, void 0 !== i.ownerSVGElement, !o && t ? [t] : r ? null : i.firstChild ? n$2.call(i.childNodes) : null, f, !o && t ? t : r ? r.__e : i.firstChild, o), z(f, u);
}
n$2 = c$2.slice, l$2 = {
__e: function (n, l) {
for (var u, i, t; l = l.__;) if ((u = l.__c) && !u.__) try {
if ((i = u.constructor) && null != i.getDerivedStateFromError && (u.setState(i.getDerivedStateFromError(n)), t = u.__d), null != u.componentDidCatch && (u.componentDidCatch(n), t = u.__d), t) return u.__E = u;
} catch (l) {
n = l;
}
throw n;
}
}, u$2 = 0, _.prototype.setState = function (n, l) {
var u;
u = null != this.__s && this.__s !== this.state ? this.__s : this.__s = a$2({}, this.state), "function" == typeof n && (n = n(a$2({}, u), this.props)), n && a$2(u, n), null != n && this.__v && (l && this.__h.push(l), m$2(this));
}, _.prototype.forceUpdate = function (n) {
this.__v && (this.__e = !0, n && this.__h.push(n), m$2(this));
}, _.prototype.render = d$2, t$2 = [], o$2 = "function" == typeof Promise ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, g$1.__r = 0, 0;
"undefined" != typeof window && window.__PREACT_DEVTOOLS__ && window.__PREACT_DEVTOOLS__.attachPreact("10.5.14", l$2, {
Fragment: d$2,
Component: _
});
var o$1 = {};
function a$1(n) {
return n.type === d$2 ? "Fragment" : "function" == typeof n.type ? n.type.displayName || n.type.name : "string" == typeof n.type ? n.type : "#text";
}
var i$1 = [],
s$1 = [];
function c$1() {
return i$1.length > 0 ? i$1[i$1.length - 1] : null;
}
var l$1 = !1;
function u$1(n) {
return "function" == typeof n.type && n.type != d$2;
}
function f$1(n) {
for (var t = [n], e = n; null != e.__o;) t.push(e.__o), e = e.__o;
return t.reduce(function (n, t) {
n += " in " + a$1(t);
var e = t.__source;
return e ? n += " (at " + e.fileName + ":" + e.lineNumber + ")" : l$1 || (l$1 = !0, console.warn("Add @babel/plugin-transform-react-jsx-source to get a more detailed component stack. Note that you should not add it to production builds of your App for bundle size reasons.")), n + "\n";
}, "");
}
var p$1 = "function" == typeof WeakMap,
d$1 = _.prototype.setState;
_.prototype.setState = function (n, t) {
return null == this.__v ? null == this.state && console.warn('Calling "this.setState" inside the constructor of a component is a no-op and might be a bug in your application. Instead, set "this.state = {}" directly.\n\n' + f$1(c$1())) : null == this.__P && console.warn('Can\'t call "this.setState" on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.\n\n' + f$1(this.__v)), d$1.call(this, n, t);
};
var h = _.prototype.forceUpdate;
function y$1(n) {
var t = n.props,
e = a$1(n),
o = "";
for (var r in t) if (t.hasOwnProperty(r) && "children" !== r) {
var i = t[r];
"function" == typeof i && (i = "function " + (i.displayName || i.name) + "() {}"), i = Object(i) !== i || i.toString ? i + "" : Object.prototype.toString.call(i), o += " " + r + "=" + JSON.stringify(i);
}
var s = t.children;
return "<" + e + o + (s && s.length ? ">..</" + e + ">" : " />");
}
_.prototype.forceUpdate = function (n) {
return null == this.__v ? console.warn('Calling "this.forceUpdate" inside the constructor of a component is a no-op and might be a bug in your application.\n\n' + f$1(c$1())) : null == this.__P && console.warn('Can\'t call "this.forceUpdate" on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.\n\n' + f$1(this.__v)), h.call(this, n);
}, function () {
!function () {
var t = l$2.__b,
e = l$2.diffed,
o = l$2.__,
r = l$2.vnode,
a = l$2.__r;
l$2.diffed = function (n) {
u$1(n) && s$1.pop(), i$1.pop(), e && e(n);
}, l$2.__b = function (n) {
u$1(n) && i$1.push(n), t && t(n);
}, l$2.__ = function (n, t) {
s$1 = [], o && o(n, t);
}, l$2.vnode = function (n) {
n.__o = s$1.length > 0 ? s$1[s$1.length - 1] : null, r && r(n);
}, l$2.__r = function (n) {
u$1(n) && s$1.push(n), a && a(n);
};
}();
var t = !1,
e = l$2.__b,
r = l$2.diffed,
c = l$2.vnode,
l = l$2.__e,
d = l$2.__,
h = l$2.__h,
m = p$1 ? {
useEffect: new WeakMap(),
useLayoutEffect: new WeakMap(),
lazyPropTypes: new WeakMap()
} : null,
v = [];
l$2.__e = function (n, t, e) {
if (t && t.__c && "function" == typeof n.then) {
var o = n;
n = new Error("Missing Suspense. The throwing component was: " + a$1(t));
for (var r = t; r; r = r.__) if (r.__c && r.__c.__c) {
n = o;
break;
}
if (n instanceof Error) throw n;
}
try {
l(n, t, e), "function" != typeof n.then && setTimeout(function () {
throw n;
});
} catch (n) {
throw n;
}
}, l$2.__ = function (n, t) {
if (!t) throw new Error("Undefined parent passed to render(), this is the second argument.\nCheck if the element is available in the DOM/has the correct id.");
var e;
switch (t.nodeType) {
case 1:
case 11:
case 9:
e = !0;
break;
default:
e = !1;
}
if (!e) {
var o = a$1(n);
throw new Error("Expected a valid HTML node as a second argument to render.\tReceived " + t + " instead: render(<" + o + " />, " + t + ");");
}
d && d(n, t);
}, l$2.__b = function (n) {
var r = n.type,
i = function n(t) {
return t ? "function" == typeof t.type ? n(t.__) : t : {};
}(n.__);
if (t = !0, void 0 === r) throw new Error("Undefined component passed to createElement()\n\nYou likely forgot to export your component or might have mixed up default and named imports" + y$1(n) + "\n\n" + f$1(n));
if (null != r && "object" == typeof r) {
if (void 0 !== r.__k && void 0 !== r.__e) throw new Error("Invalid type passed to createElement(): " + r + "\n\nDid you accidentally pass a JSX literal as JSX twice?\n\n let My" + a$1(n) + " = " + y$1(r) + ";\n let vnode = <My" + a$1(n) + " />;\n\nThis usually happens when you export a JSX literal and not the component.\n\n" + f$1(n));
throw new Error("Invalid type passed to createElement(): " + (Array.isArray(r) ? "array" : r));
}
if ("thead" !== r && "tfoot" !== r && "tbody" !== r || "table" === i.type ? "tr" === r && "thead" !== i.type && "tfoot" !== i.type && "tbody" !== i.type && "table" !== i.type ? console.error("Improper nesting of table. Your <tr> should have a <thead/tbody/tfoot/table> parent." + y$1(n) + "\n\n" + f$1(n)) : "td" === r && "tr" !== i.type ? console.error("Improper nesting of table. Your <td> should have a <tr> parent." + y$1(n) + "\n\n" + f$1(n)) : "th" === r && "tr" !== i.type && console.error("Improper nesting of table. Your <th> should have a <tr>." + y$1(n) + "\n\n" + f$1(n)) : console.error("Improper nesting of table. Your <thead/tbody/tfoot> should have a <table> parent." + y$1(n) + "\n\n" + f$1(n)), void 0 !== n.ref && "function" != typeof n.ref && "object" != typeof n.ref && !("$$typeof" in n)) throw new Error('Component\'s "ref" property should be a function, or an object created by createRef(), but got [' + typeof n.ref + "] instead\n" + y$1(n) + "\n\n" + f$1(n));
if ("string" == typeof n.type) for (var s in n.props) if ("o" === s[0] && "n" === s[1] && "function" != typeof n.props[s] && null != n.props[s]) throw new Error("Component's \"" + s + '" property should be a function, but got [' + typeof n.props[s] + "] instead\n" + y$1(n) + "\n\n" + f$1(n));
if ("function" == typeof n.type && n.type.propTypes) {
if ("Lazy" === n.type.displayName && m && !m.lazyPropTypes.has(n.type)) {
var c = "PropTypes are not supported on lazy(). Use propTypes on the wrapped component itself. ";
try {
var l = n.type();
m.lazyPropTypes.set(n.type, !0), console.warn(c + "Component wrapped in lazy() is " + a$1(l));
} catch (n) {
console.warn(c + "We will log the wrapped component's name once it is loaded.");
}
}
var u = n.props;
n.type.__f && delete (u = function (n, t) {
for (var e in t) n[e] = t[e];
return n;
}({}, u)).ref, function (n, t, e, r, a) {
Object.keys(n).forEach(function (e) {
var i;
try {
i = n[e](t, e, r, "prop", null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
} catch (n) {
i = n;
}
!i || i.message in o$1 || (o$1[i.message] = !0, console.error("Failed prop type: " + i.message + (a && "\n" + a() || "")));
});
}(n.type.propTypes, u, 0, a$1(n), function () {
return f$1(n);
});
}
e && e(n);
}, l$2.__h = function (n, e, o) {
if (!n || !t) throw new Error("Hook can only be invoked from render methods.");
h && h(n, e, o);
};
var b = function (n, t) {
return {
get: function () {
var e = "get" + n + t;
v && v.indexOf(e) < 0 && (v.push(e), console.warn("getting vnode." + n + " is deprecated, " + t));
},
set: function () {
var e = "set" + n + t;
v && v.indexOf(e) < 0 && (v.push(e), console.warn("setting vnode." + n + " is not allowed, " + t));
}
};
},
w = {
nodeName: b("nodeName", "use vnode.type"),
attributes: b("attributes", "use vnode.props"),
children: b("children", "use vnode.props.children")
},
g = Object.create({}, w);
l$2.vnode = function (n) {
var t = n.props;
if (null !== n.type && null != t && ("__source" in t || "__self" in t)) {
var e = n.props = {};
for (var o in t) {
var r = t[o];
"__source" === o ? n.__source = r : "__self" === o ? n.__self = r : e[o] = r;
}
}
n.__proto__ = g, c && c(n);
}, l$2.diffed = function (n) {
if (n.__k && n.__k.forEach(function (t) {
if (t && void 0 === t.type) {
delete t.__, delete t.__b;
var e = Object.keys(t).join(",");
throw new Error("Objects are not valid as a child. Encountered an object with the keys {" + e + "}.\n\n" + f$1(n));
}
}), t = !1, r && r(n), null != n.__k) for (var e = [], o = 0; o < n.__k.length; o++) {
var a = n.__k[o];
if (a && null != a.key) {
var i = a.key;
if (-1 !== e.indexOf(i)) {
console.error('Following component has two or more children with the same key attribute: "' + i + '". This may cause glitches and misbehavior in rendering process. Component: \n\n' + y$1(n) + "\n\n" + f$1(n));
break;
}
e.push(i);
}
}
};
}();
var n$1 = function (t, s, r, e) {
var u;
s[0] = 0;
for (var h = 1; h < s.length; h++) {
var p = s[h++],
a = s[h] ? (s[0] |= p ? 1 : 2, r[s[h++]]) : s[++h];
3 === p ? e[0] = a : 4 === p ? e[1] = Object.assign(e[1] || {}, a) : 5 === p ? (e[1] = e[1] || {})[s[++h]] = a : 6 === p ? e[1][s[++h]] += a + "" : p ? (u = t.apply(a, n$1(t, a, r, ["", null])), e.push(u), a[0] ? s[0] |= 2 : (s[h - 2] = 0, s[h] = u)) : e.push(a);
}
return e;
},
t$1 = new Map();
function e$1 (s) {
var r = t$1.get(this);
return r || (r = new Map(), t$1.set(this, r)), (r = n$1(this, r.get(s) || (r.set(s, r = function (n) {
for (var t, s, r = 1, e = "", u = "", h = [0], p = function (n) {
1 === r && (n || (e = e.replace(/^\s*\n\s*|\s*\n\s*$/g, ""))) ? h.push(0, n, e) : 3 === r && (n || e) ? (h.push(3, n, e), r = 2) : 2 === r && "..." === e && n ? h.push(4, n, 0) : 2 === r && e && !n ? h.push(5, 0, !0, e) : r >= 5 && ((e || !n && 5 === r) && (h.push(r, 0, e, s), r = 6), n && (h.push(r, n, 0, s), r = 6)), e = "";
}, a = 0; a < n.length; a++) {
a && (1 === r && p(), p(a));
for (var l = 0; l < n[a].length; l++) t = n[a][l], 1 === r ? "<" === t ? (p(), h = [h], r = 3) : e += t : 4 === r ? "--" === e && ">" === t ? (r = 1, e = "") : e = t + e[0] : u ? t === u ? u = "" : e += t : '"' === t || "'" === t ? u = t : ">" === t ? (p(), r = 1) : r && ("=" === t ? (r = 5, s = e, e = "") : "/" === t && (r < 5 || ">" === n[a][l + 1]) ? (p(), 3 === r && (h = h[0]), r = h, (h = h[0]).push(2, 0, r), r = 0) : " " === t || "\t" === t || "\n" === t || "\r" === t ? (p(), r = 2) : e += t), 3 === r && "!--" === e && (r = 4, h = h[0]);
}
return p(), h;
}(s)), r), arguments, [])).length > 1 ? r : r[0];
}
var m$1 = e$1.bind(v$1);
function fetch (e, n) {
return n = n || {}, new Promise(function (t, r) {
var s = new XMLHttpRequest(),
o = [],
u = [],
i = {},
a = function () {
return {
ok: 2 == (s.status / 100 | 0),
statusText: s.statusText,
status: s.status,
url: s.responseURL,
text: function () {
return Promise.resolve(s.responseText);
},
json: function () {
return Promise.resolve(s.responseText).then(JSON.parse);
},
blob: function () {
return Promise.resolve(new Blob([s.response]));
},
clone: a,
headers: {
keys: function () {
return o;
},
entries: function () {
return u;
},
get: function (e) {
return i[e.toLowerCase()];
},
has: function (e) {
return e.toLowerCase() in i;
}
}
};
};
for (var l in s.open(n.method || "get", e, !0), s.onload = function () {
s.getAllResponseHeaders().replace(/^(.*?):[^\S\n]*([\s\S]*?)$/gm, function (e, n, t) {
o.push(n = n.toLowerCase()), u.push([n, t]), i[n] = i[n] ? i[n] + "," + t : t;
}), t(a());
}, s.onerror = r, s.withCredentials = "include" == n.credentials, n.headers) s.setRequestHeader(l, n.headers[l]);
s.send(n.body || null);
});
}
/**
* Extend default Error class
*/
class IntegryAPIError extends Error {
constructor(errorMessage, response) {
super(errorMessage);
this.name = this.constructor.name;
this.statusCode = response === null || response === void 0 ? void 0 : response.status;
this.response = response;
}
}
const ResponseHandler = async response => {
const debugMode = !!process.env.DEBUG;
if (response.ok) {
try {
const parsedResponse = await response.json();
if (debugMode) console.log(parsedResponse);
return parsedResponse;
} catch (error) {
return Promise.reject(error);
}
}
if (debugMode) console.log('Received a non-2xx status code');
const error = new IntegryAPIError(response.statusText, response);
return Promise.reject(error);
};
class IntegryAPI {
constructor(config) {
this.getTemplate = async templateId => {
const url = new URL(`${this.config.baseUrlv2}/template/${templateId}/`);
IntegryAPI.addUrlSearchParams(url, {
app_key: this.config.appKey,
hash: this.config.hash,
user_id: this.config.userId
});
try {
const response = await fetch(url.toString()).then(ResponseHandler);
return response;
} catch (error) {
return error;
}
};
this.getAuthUrl = authorizationTypeId => {
const url = new URL(`${this.config.baseUrl}/auth/login/${authorizationTypeId}/`);
IntegryAPI.addUrlSearchParams(url, {
app_key: this.config.appKey,
hash: this.config.hash,
user_id: this.config.userId
});
return url.toString();
};
this.getTemplateStep = async stepId => {
const url = new URL(`${this.config.baseUrl}/template_step/${stepId}/`);
IntegryAPI.addUrlSearchParams(url, {
app_key: this.config.appKey,
hash: this.config.hash,
user_id: this.config.userId
});
try {
const response = await fetch(url.toString()).then(ResponseHandler);
return response;
} catch (error) {
return error;
}
};
this.verifyOAuth = async authId => {
const url = new URL(`${this.config.baseUrl}/${this.config.oauthVerifyPath}`);
IntegryAPI.addUrlSearchParams(url, {
authorization_id: `${authId}`,
app_key: this.config.appKey,
hash: this.config.hash,
user_id: this.config.userId
});
try {
const response = await fetch(url.toString(), {
method: 'POST'
}).then(ResponseHandler);
return response;
} catch (error) {
return error;
}
};
this.callDynamicDataEndpoint = async (url, endpointData) => {
IntegryAPI.addUrlSearchParams(url, {
app_key: this.config.appKey,
hash: this.config.hash,
user_id: this.config.userId,
...endpointData
});
try {
const response = await fetch(url.toString()).then(ResponseHandler);
return response;
} catch (error) {
return error;
}
};
this.getTemplateListing = async bundleId => {
const url = new URL(`${this.config.baseUrl}/bundle/${bundleId}/`);
IntegryAPI.addUrlSearchParams(url, {
app_key: this.config.appKey,
hash: this.config.hash,
user_id: this.config.userId
});
try {
const response = await fetch(url.toString()).then(ResponseHandler);
return response;
} catch (error) {
return error;
}
};
this.saveIntegration = async body => {
const url = new URL(`${this.config.baseUrlv2}/integration/`);
IntegryAPI.addUrlSearchParams(url, {
async: false,
app_key: this.config.appKey,
hash: this.config.hash,
user_id: this.config.userId,
activate: true
});
try {
const response = await fetch(url.toString(), {
method: 'POST',
body: JSON.stringify(body),
headers: {
'Content-Type': 'application/json'
}
}).then(ResponseHandler);
return response;
} catch (error) {
return error;
}
};
this.updateIntegration = async (integrationId, body) => {
const url = new URL(`${this.config.baseUrlv2}/integration/${integrationId}/`);
IntegryAPI.addUrlSearchParams(url, {
async: false,
app_key: this.config.appKey,
hash: this.config.hash,
user_id: this.config.userId,
activate: true
});
try {
const response = await fetch(url.toString(), {
method: 'PUT',
body: JSON.stringify(body),
headers: {
'Content-Type': 'application/json'
}
}).then(ResponseHandler);
return response;
} catch (error) {
return error;
}
};
this.getIntegrationStatuses = async integrationIds => {
const url = new URL(`${this.config.baseUrlv2}/integration_status/`);
IntegryAPI.addUrlSearchParams(url, {
app_key: this.config.appKey,
hash: this.config.hash,
user_id: this.config.userId
});
try {
const response = await fetch(url.toString(), {
method: 'PUT',
body: JSON.stringify(integrationIds),
headers: {
'Content-Type': 'application/json'
}
}).then(ResponseHandler);
return response;
} catch (error) {
return error;
}
};
this.config = config;
}
}
IntegryAPI.addUrlSearchParams = (url, paramList) => Object.keys(paramList).map(objKey => url.searchParams.append(objKey, `${paramList[objKey]}`));
/**
*
* @param key Key to sign hash
* @param message Message to hash
* @returns {string}
*/
async function HMAC(message, key) {
const g = str => new Uint8Array([...unescape(encodeURIComponent(str))].map(c => c.charCodeAt(0)));
const k = g(key);
const m = g(message);
const c = await crypto.subtle.importKey('raw', k, {
name: 'HMAC',
hash: 'SHA-256'
}, true, ['sign']);
const s = await crypto.subtle.sign('HMAC', c, m);
return [...new Uint8Array(s)].map(b => b.toString(16).padStart(2, '0')).join('');
}
function createCommonjsModule(fn) {
var module = { exports: {} };
return fn(module, module.exports), module.exports;
}
var preact$1 = createCommonjsModule(function (module, exports) {
var n,
l,
u,
t,
i,
o,
r,
f,
e = {},
c = [],
s = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
function a(n, l) {
for (var u in l) n[u] = l[u];
return n;
}
function p(n) {
var l = n.parentNode;
l && l.removeChild(n);
}
function v(l, u, t) {
var i,
o,
r,
f = {};
for (r in u) "key" == r ? i = u[r] : "ref" == r ? o = u[r] : f[r] = u[r];
if (arguments.length > 2 && (f.children = arguments.length > 3 ? n.call(arguments, 2) : t), "function" == typeof l && null != l.defaultProps) for (r in l.defaultProps) void 0 === f[r] && (f[r] = l.defaultProps[r]);
return h(l, f, i, o, null);
}
function h(n, t, i, o, r) {
var f = {
type: n,
props: t,
key: i,
ref: o,
__k: null,
__: null,
__b: 0,
__e: null,
__d: void 0,
__c: null,
__h: null,
constructor: void 0,
__v: null == r ? ++u : r
};
return null != l.vnode && l.vnode(f), f;
}
function y(n) {
return n.children;
}
function d(n, l) {
this.props = n, this.context = l;
}
function _(n, l) {
if (null == l) return n.__ ? _(n.__, n.__.__k.indexOf(n) + 1) : null;
for (var u; l < n.__k.length; l++) if (null != (u = n.__k[l]) && null != u.__e) return u.__e;
return "function" == typeof n.type ? _(n) : null;
}
function k(n) {
var l, u;
if (null != (n = n.__) && null != n.__c) {
for (n.__e = n.__c.base = null, l = 0; l < n.__k.length; l++) if (null != (u = n.__k[l]) && null != u.__e) {
n.__e = n.__c.base = u.__e;
break;
}
return k(n);
}
}
function x(n) {
(!n.__d && (n.__d = !0) && i.push(n) && !b.__r++ || r !== l.debounceRendering) && ((r = l.debounceRendering) || o)(b);
}
function b() {
for (var n; b.__r = i.length;) n = i.sort(function (n, l) {
return n.__v.__b - l.__v.__b;
}), i = [], n.some(function (n) {
var l, u, t, i, o, r;
n.__d && (o = (i = (l = n).__v).__e, (r = l.__P) && (u = [], (t = a({}, i)).__v = i.__v + 1, I(r, i, t, l.__n, void 0 !== r.ownerSVGElement, null != i.__h ? [o] : null, u, null == o ? _(i) : o, i.__h), T(u, i), i.__e != o && k(i)));
});
}
function m(n, l, u, t, i, o, r, f, s, a) {
var p,
v,
d,
k,
x,
b,
m,
A = t && t.__k || c,
P = A.length;
for (u.__k = [], p = 0; p < l.length; p++) if (null != (k = u.__k[p] = null == (k = l[p]) || "boolean" == typeof k ? null : "string" == typeof k || "number" == typeof k || "bigint" == typeof k ? h(null, k, null, null, k) : Array.isArray(k) ? h(y, {
children: k
}, null, null, null) : k.__b > 0 ? h(k.type, k.props, k.key, null, k.__v) : k)) {
if (k.__ = u, k.__b = u.__b + 1, null === (d = A[p]) || d && k.key == d.key && k.type === d.type) A[p] = void 0;else for (v = 0; v < P; v++) {
if ((d = A[v]) && k.key == d.key && k.type === d.type) {
A[v] = void 0;
break;
}
d = null;
}
I(n, k, d = d || e, i, o, r, f, s, a), x = k.__e, (v = k.ref) && d.ref != v && (m || (m = []), d.ref && m.push(d.ref, null, k), m.push(v, k.__c || x, k)), null != x ? (null == b && (b = x), "function" == typeof k.type && null != k.__k && k.__k === d.__k ? k.__d = s = g(k, s, n) : s = w(n, k, d, A, x, s), a || "option" !== u.type ? "function" == typeof u.type && (u.__d = s) : n.value = "") : s && d.__e == s && s.parentNode != n && (s = _(d));
}
for (u.__e = b, p = P; p--;) null != A[p] && ("function" == typeof u.type && null != A[p].__e && A[p].__e == u.__d && (u.__d = _(t, p + 1)), L(A[p], A[p]));
if (m) for (p = 0; p < m.length; p++) z(m[p], m[++p], m[++p]);
}
function g(n, l, u) {
var t, i;
for (t = 0; t < n.__k.length; t++) (i = n.__k[t]) && (i.__ = n, l = "function" == typeof i.type ? g(i, l, u) : w(u, i, i, n.__k, i.__e, l));
return l;
}
function w(n, l, u, t, i, o) {
var r, f, e;
if (void 0 !== l.__d) r = l.__d, l.__d = void 0;else if (null == u || i != o || null == i.parentNode) n: if (null == o || o.parentNode !== n) n.appendChild(i), r = null;else {
for (f = o, e = 0; (f = f.nextSibling) && e < t.length; e += 2) if (f == i) break n;
n.insertBefore(i, o), r = o;
}
return void 0 !== r ? r : i.nextSibling;
}
function A(n, l, u, t, i) {
var o;
for (o in u) "children" === o || "key" === o || o in l || C(n, o, null, u[o], t);
for (o in l) i && "function" != typeof l[o] || "children" === o || "key" === o || "value" === o || "checked" === o || u[o] === l[o] || C(n, o, l[o], u[o], t);
}
function P(n, l, u) {
"-" === l[0] ? n.setProperty(l, u) : n[l] = null == u ? "" : "number" != typeof u || s.test(l) ? u : u + "px";
}
function C(n, l, u, t, i) {
var o;
n: if ("style" === l) {
if ("string" == typeof u) n.style.cssText = u;else {
if ("string" == typeof t && (n.style.cssText = t = ""), t) for (l in t) u && l in u || P(n.style, l, "");
if (u) for (l in u) t && u[l] === t[l] || P(n.style, l, u[l]);
}
} else if ("o" === l[0] && "n" === l[1]) o = l !== (l = l.replace(/Capture$/, "")), l = l.toLowerCase() in n ? l.toLowerCase().slice(2) : l.slice(2), n.l || (n.l = {}), n.l[l + o] = u, u ? t || n.addEventListener(l, o ? H : $, o) : n.removeEventListener(l, o ? H : $, o);else if ("dangerouslySetInnerHTML" !== l) {
if (i) l = l.replace(/xlink[H:h]/, "h").replace(/sName$/, "s");else if ("href" !== l && "list" !== l && "form" !== l && "tabIndex" !== l && "download" !== l && l in n) try {
n[l] = null == u ? "" : u;
break n;
} catch (n) {}
"function" == typeof u || (null != u && (!1 !== u || "a" === l[0] && "r" === l[1]) ? n.setAttribute(l, u) : n.removeAttribute(l));
}
}
function $(n) {
this.l[n.type + !1](l.event ? l.event(n) : n);
}
function H(n) {
this.l[n.type + !0](l.event ? l.event(n) : n);
}
function I(n, u, t, i, o, r, f, e, c) {
var s,
p,
v,
h,
_,
k,
x,
b,
g,
w,
A,
P = u.type;
if (void 0 !== u.constructor) return null;
null != t.__h && (c = t.__h, e = u.__e = t.__e, u.__h = null, r = [e]), (s = l.__b) && s(u);
try {
n: if ("function" == typeof P) {
if (b = u.props, g = (s = P.contextType) && i[s.__c], w = s ? g ? g.props.value : s.__ : i, t.__c ? x = (p = u.__c = t.__c).__ = p.__E : ("prototype" in P && P.prototype.render ? u.__c = p = new P(b, w) : (u.__c = p = new d(b, w), p.constructor = P, p.render = M), g && g.sub(p), p.props = b, p.state || (p.state = {}), p.context = w, p.__n = i, v = p.__d = !0, p.__h = []), null == p.__s && (p.__s = p.state), null != P.getDerivedStateFromProps && (p.__s == p.state && (p.__s = a({}, p.__s)), a(p.__s, P.getDerivedStateFromProps(b, p.__s))), h = p.props, _ = p.state, v) null == P.getDerivedStateFromProps && null != p.componentWillMount && p.componentWillMount(), null != p.componentDidMount && p.__h.push(p.componentDidMount);else {
if (null == P.getDerivedStateFromProps && b !== h && null != p.componentWillReceiveProps && p.componentWillReceiveProps(b, w), !p.__e && null != p.shouldComponentUpdate && !1 === p.shouldComponentUpdate(b, p.__s, w) || u.__v === t.__v) {
p.props = b, p.state = p.__s, u.__v !== t.__v && (p.__d = !1), p.__v = u, u.__e = t.__e, u.__k = t.__k, u.__k.forEach(function (n) {
n && (n.__ = u);
}), p.__h.length && f.push(p);
break n;
}
null != p.componentWillUpdate && p.componentWillUpdate(b, p.__s, w), null != p.componentDidUpdate && p.__h.push(function () {
p.componentDidUpdate(h, _, k);
});
}
p.context = w, p.props = b, p.state = p.__s, (s = l.__r) && s(u), p.__d = !1, p.__v = u, p.__P = n, s = p.render(p.props, p.state, p.context), p.state = p.__s, null != p.getChildContext && (i = a(a({}, i), p.getChildContext())), v || null == p.getSnapshotBeforeUpdate || (k = p.getSnapshotBeforeUpdate(h, _)), A = null != s && s.type === y && null == s.key ? s.props.children : s, m(n, Array.isArray(A) ? A : [A], u, t, i, o, r, f, e, c), p.base = u.__e, u.__h = null, p.__h.length && f.push(p), x && (p.__E = p.__ = null), p.__e = !1;
} else null == r && u.__v === t.__v ? (u.__k = t.__k, u.__e = t.__e) : u.__e = j(t.__e, u, t, i, o, r, f, c);
(s = l.diffed) && s(u);
} catch (n) {
u.__v = null, (c || null != r) && (u.__e = e, u.__h = !!c, r[r.indexOf(e)] = null), l.__e(n, u, t);
}
}
function T(n, u) {
l.__c && l.__c(u, n), n.some(function (u) {
try {
n = u.__h, u.__h = [], n.some(function (n) {
n.call(u);
});
} catch (n) {
l.__e(n, u.__v);
}
});
}
function j(l, u, t, i, o, r, f, c) {
var s,
a,
v,
h = t.props,
y = u.props,
d = u.type,
k = 0;
if ("svg" === d && (o = !0), null != r) for (; k < r.length; k++) if ((s = r[k]) && (s === l || (d ? s.localName == d : 3 == s.nodeType))) {
l = s, r[k] = null;
break;
}
if (null == l) {
if (null === d) return document.createTextNode(y);
l = o ? document.createElementNS("http://www.w3.org/2000/svg", d) : document.createElement(d, y.is && y), r = null, c = !1;
}
if (null === d) h === y || c && l.data === y || (l.data = y);else {
if (r = r && n.call(l.childNodes), a = (h = t.props || e).dangerouslySetInnerHTML, v = y.dangerouslySetInnerHTML, !c) {
if (null != r) for (h = {}, k = 0; k < l.attributes.length; k++) h[l.attributes[k].name] = l.attributes[k].value;
(v || a) && (v && (a && v.__html == a.__html || v.__html === l.innerHTML) || (l.innerHTML = v && v.__html || ""));
}
if (A(l, y, h, o, c), v) u.__k = [];else if (k = u.props.children, m(l, Array.isArray(k) ? k : [k], u, t, i, o && "foreignObject" !== d, r, f, r ? r[0] : t.__k && _(t, 0), c), null != r) for (k = r.length; k--;) null != r[k] && p(r[k]);
c || ("value" in y && void 0 !== (k = y.value) && (k !== l.value || "progress" === d && !k) && C(l, "value", k, h.value, !1), "checked" in y && void 0 !== (k = y.checked) && k !== l.checked && C(l, "checked", k, h.checked, !1));
}
return l;
}
function z(n, u, t) {
try {
"function" == typeof n ? n(u) : n.current = u;
} catch (n) {
l.__e(n, t);
}
}
function L(n, u, t) {
var i, o;
if (l.unmount && l.unmount(n), (i = n.ref) && (i.current && i.current !== n.__e || z(i, null, u)), null != (i = n.__c)) {
if (i.componentWillUnmount) try {
i.componentWillUnmount();
} catch (n) {
l.__e(n, u);
}
i.base = i.__P = null;
}
if (i = n.__k) for (o = 0; o < i.length; o++) i[o] && L(i[o], u, "function" != typeof n.type);
t || null == n.__e || p(n.__e), n.__e = n.__d = void 0;
}
function M(n, l, u) {
return this.constructor(n, u);
}
function N(u, t, i) {
var o, r, f;
l.__ && l.__(u, t), r = (o = "function" == typeof i) ? null : i && i.__k || t.__k, f = [], I(t, u = (!o && i || t).__k = v(y, null, [u]), r || e, e, void 0 !== t.ownerSVGElement, !o && i ? [i] : r ? null : t.firstChild ? n.call(t.childNodes) : null, f, !o && i ? i : r ? r.__e : t.firstChild, o), T(f, u);
}
n = c.slice, l = {
__e: function (n, l) {
for (var u, t, i; l = l.__;) if ((u = l.__c) && !u.__) try {
if ((t = u.constructor) && null != t.getDerivedStateFromError && (u.setState(t.getDerivedStateFromError(n)), i = u.__d), null != u.componentDidCatch && (u.componentDidCatch(n), i = u.__d), i) return u.__E = u;
} catch (l) {
n = l;
}
throw n;
}
}, u = 0, t = function (n) {
return null != n && void 0 === n.constructor;
}, d.prototype.setState = function (n, l) {
var u;
u = null != this.__s && this.__s !== this.state ? this.__s : this.__s = a({}, this.state), "function" == typeof n && (n = n(a({}, u), this.props)), n && a(u, n), null != n && this.__v && (l && this.__h.push(l), x(this));
}, d.prototype.forceUpdate = function (n) {
this.__v && (this.__e = !0, n && this.__h.push(n), x(this));
}, d.prototype.render = y, i = [], o = "function" == typeof Promise ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, b.__r = 0, f = 0, exports.render = N, exports.hydrate = function n(l, u) {
N(l, u, n);
}, exports.createElement = v, exports.h = v, exports.Fragment = y, exports.createRef = function () {
return {
current: null
};
}, exports.isValidElement = t, exports.Component = d, exports.cloneElement = function (l, u, t) {
var i,
o,
r,
f = a({}, l.props);
for (r in u) "key" == r ? i = u[r] : "ref" == r ? o = u[r] : f[r] = u[r];
return arguments.length > 2 && (f.children = arguments.length > 3 ? n.call(arguments, 2) : t), h(l.type, f, i || l.key, o || l.ref, null);
}, exports.createContext = function (n, l) {
var u = {
__c: l = "__cC" + f++,
__: n,
Consumer: function (n, l) {
return n.children(l);
},
Provider: function (n) {
var u, t;
return this.getChildContext || (u = [], (t = {})[l] = this, this.getChildContext = function () {
return t;
}, this.shouldComponentUpdate = function (n) {
this.props.value !== n.value && u.some(x);
}, this.sub = function (n) {
u.push(n);
var l = n.componentWillUnmount;
n.componentWillUnmount = function () {
u.splice(u.indexOf(n), 1), l && l.call(n);
};
}), n.children;
}
};
return u.Provider.__ = u.Consumer.contextType = u;
}, exports.toChildArray = function n(l, u) {
return u = u || [], null == l || "boolean" == typeof l || (Array.isArray(l) ? l.some(function (l) {
n(l, u);
}) : u.push(l)), u;
}, exports.options = l;
});
var preact = createCommonjsModule(function (module, exports) {
var t = preact$1;
function n(t, n) {
for (var r in n) t[r] = n[r];
return t;
}
function r(t) {
this.getChildContext = function () {
return {
store: t.store
};
};
}
r.prototype.render = function (t) {
return t.children && t.children[0] || t.children;
}, exports.connect = function (r, e) {
var o;
return "function" != typeof r && ("string" == typeof (o = r || {}) && (o = o.split(/\s*,\s*/)), r = function (t) {
for (var n = {}, r = 0; r < o.length; r++) n[o[r]] = t[o[r]];
return n;
}), function (o) {
function i(i, u) {
var c = this,
f = u.store,
s = r(f ? f.getState() : {}, i),
a = e ? function (t, n) {
"function" == typeof t && (t = t(n));
var r = {};
for (var e in t) r[e] = n.action(t[e]);
return r;
}(e, f) : {
store: f
},
p = function () {
var t = r(f ? f.getState() : {}, i);
for (var n in t) if (t[n] !== s[n]) return s = t, c.setState({});
for (var e in s) if (!(e in t)) return s = t, c.setState({});
};
this.componentWillReceiveProps = function (t) {
i = t, p();
}, this.componentDidMount = function () {
f.subscribe(p);
}, this.componentWillUnmount = function () {
f.unsubscribe(p);
}, this.render = function (r) {
return t.h(o, n(n(n({}, a), r), s));
};
}
return (i.prototype = new t.Component()).constructor = i;
};
}, exports.Provider = r;
});
function styleInject(css, ref) {
if (ref === void 0) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') {
return;
}
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z$e = ".styles-module_search__1xZvN {\n margin-bottom: 0.5rem;\n display: flex;\n width: 100%;\n flex: 1 1 0%;\n overflow: hidden;\n border-radius: 0.25rem;\n border-width: 1px;\n border-style: solid;\n --tw-border-opacity: 1;\n border-color: rgba(229, 231, 235, var(--tw-border-opacity))\n}\n .styles-module_search__1xZvN input {\n margin: 0.25rem;\n height: 100%;\n width: 100%;\n flex: 1 1 0%;\n border-style: none;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n .styles-module_search__1xZvN input:focus {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.styles-module_resultCount__22jr6 {\n display: flex;\n align-items: center;\n justify-content: center;\n border-left-width: 1px;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-style: solid;\n --tw-border-opacity: 1;\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 700;\n --tw-text-opacity: 1;\n color: rgba(156, 163, 175, var(--tw-text-opacity))\n}\n";
var styles$b = {
"search": "styles-module_search__1xZvN",
"resultCount": "styles-module_resultCount__22jr6"
};
styleInject(css_248z$e);
class TemplateSearch extends _ {
constructor(props) {
super(props);
this.onInput = e => {
if (e.target instanceof HTMLInputElement) {
const {
value
} = e.target;
this.setState({
value
});
this.props.onChange(value);
}
};
this.state = {
value: this.props.initialValue || ''
};
}
render() {
return m$1`
<div class=${styles$b.search} ${'integry-search'}>
<input
placeholder=${this.props.placeholder || 'Search...'}
value=${this.state.value}
oninput=${this.onInput}
/>
<div class=${styles$b.resultCount}>${this.props.resultCount} results</div>
</div>
`;
}
}
var css_248z$d = ".styles-module_loader__2ufbr {\n margin-right: 0.75rem;\n height: 1.25rem;\n width: 1.25rem\n}\n@keyframes styles-module_spin__17FW8 {\n to {\n transform: rotate(360deg)\n }\n}\n.styles-module_loader__2ufbr {\n animation: styles-module_spin__17FW8 1s linear infinite\n}\n";
var styles$a = {
"loader": "styles-module_loader__2ufbr",
"spin": "styles-module_spin__17FW8"
};
styleInject(css_248z$d);
const Loader = () => m$1`
<svg class="${styles$a.loader}" viewBox="0 0 24 24">
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="#888"
stroke-width="4"
></circle>
<path
class="opacity-50"
fill="#555"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
`;
var t,
u,
r,
o = 0,
i = [],
c = l$2.__b,
f = l$2.__r,
e = l$2.diffed,
a = l$2.__c,
v = l$2.unmount;
function m(t, r) {
l$2.__h && l$2.__h(u, t, o || r), o = 0;
var i = u.__H || (u.__H = {
__: [],
__h: []
});
return t >= i.__.length && i.__.push({}), i.__[t];
}
function l(n) {
return o = 1, p(w, n);
}
function p(n, r, o) {
var i = m(t++, 2);
return i.t = n, i.__c || (i.__ = [o ? o(r) : w(void 0, r), function (n) {
var t = i.t(i.__[0], n);
i.__[0] !== t && (i.__ = [t, i.__[1]], i.__c.setState({}));
}], i.__c = u), i.__;
}
function y(r, o) {
var i = m(t++, 3);
!l$2.__s && k(i.__H, o) && (i.__ = r, i.__H = o, u.__H.__h.push(i));
}
function s(n) {
return o = 5, d(function () {
return {
current: n
};
}, []);
}
function d(n, u) {
var r = m(t++, 7);
return k(r.__H, u) && (r.__ = n(), r.__H = u, r.__h = n), r.__;
}
function x() {
i.forEach(function (t) {
if (t.__P) try {
t.__H.__h.forEach(g), t.__H.__h.forEach(j), t.__H.__h = [];
} catch (u) {
t.__H.__h = [], l$2.__e(u, t.__v);
}
}), i = [];
}
l$2.__b = function (n) {
u = null, c && c(n);
}, l$2.__r = function (n) {
f && f(n), t = 0;
var r = (u = n.__c).__H;
r && (r.__h.forEach(g), r.__h.forEach(j), r.__h = []);
}, l$2.diffed = function (t) {
e && e(t);
var o = t.__c;
o && o.__H && o.__H.__h.length && (1 !== i.push(o) && r === l$2.requestAnimationFrame || ((r = l$2.requestAnimationFrame) || function (n) {
var t,
u = function () {
clearTimeout(r), b && cancelAnimationFrame(t), setTimeout(n);
},
r = setTimeout(u, 100);
b && (t = requestAnimationFrame(u));
})(x)), u = void 0;
}, l$2.__c = function (t, u) {
u.some(function (t) {
try {
t.__h.forEach(g), t.__h = t.__h.filter(function (n) {
return !n.__ || j(n);
});
} catch (r) {
u.some(function (n) {
n.__h && (n.__h = []);
}), u = [], l$2.__e(r, t.__v);
}
}), a && a(t, u);
}, l$2.unmount = function (t) {
v && v(t);
var u = t.__c;
if (u && u.__H) try {
u.__H.__.forEach(g);
} catch (t) {
l$2.__e(t, u.__v);
}
};
var b = "function" == typeof requestAnimationFrame;
function g(n) {
var t = u;
"function" == typeof n.__c && n.__c(), u = t;
}
function j(n) {
var t = u;
n.__c = n.__(), u = t;
}
function k(n, t) {
return !n || n.length !== t.length || t.some(function (t, u) {
return t !== n[u];
});
}
function w(n, t) {
return "function" == typeof t ? t(n) : t;
}
var css_248z$c = ".styles-module_nav__bKw4L {\n\n margin-bottom: 0.5rem;\n\n margin-top: 0px;\n\n padding: 0px;\n\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n\n border-top-width: 0px;\n\n border-right-width: 0px;\n\n border-left-width: 0px;\n\n border-bottom-width: 1px;\n\n border-style: solid;\n\n --tw-border-opacity: 1;\n\n border-color: rgba(107, 114, 128, var(--tw-border-opacity));\n\n --tw-border-opacity: 0.25\n}\n\n.styles-module_tab__3xQCg {\n\n display: inline-block;\n\n cursor: pointer;\n\n list-style-type: none;\n\n border-bottom-width: 2px;\n\n border-color: transparent;\n\n padding-left: 0.75rem;\n\n padding-right: 0.75rem;\n\n padding-bottom: 0.25rem;\n\n line-height: 2rem;\n\n transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-duration: 150ms\n}\n .styles-module_tab__3xQCg:hover {\n\n border-width: 0px;\n\n border-bottom-width: 2px;\n\n border-style: solid;\n\n --tw-border-opacity: 1;\n\n border-color: rgba(80, 156, 246, var(--tw-border-opacity));\n\n --tw-border-opacity: 0.4\n}\n\n.styles-module_tabactive__2JeoG {\n\n border-width: 0px;\n\n border-bottom-width: 2px;\n\n border-style: solid;\n\n --tw-border-opacity: 1;\n\n border-color: rgba(80, 156, 246, var(--tw-border-opacity))\n}\n .styles-module_tabactive__2JeoG:hover {\n\n border-width: 0px;\n\n border-bottom-width: 2px;\n\n border-style: solid;\n\n --tw-border-opacity: 1;\n\n border-color: rgba(80, 156, 246, var(--tw-border-opacity))\n}\n";
var styles$9 = {
"nav": "styles-module_nav__bKw4L",
"tab": "styles-module_tab__3xQCg",
"tabactive": "styles-module_tabactive__2JeoG"
};
styleInject(css_248z$c);
const Tab = props => {
const {
label,
activeTab,
onClick
} = props;
const onClickHandler = () => {
onClick(label);
};
return m$1`
<li
class=${`${styles$9.tab} ${activeTab === label ? styles$9.tabactive : ''}`}
onclick=${onClickHandler}
>
${label}
</li>
`;
};
const TabBar = props => {
const {
preSelectedTab,
children
} = props;
if (!Array.isArray(children) || children.length < 2) {
throw new Error('Tab Bar must have at least two children');
} // either select preselected if specified, or the first tab
const [activeTab, setActiveTab] = l(preSelectedTab || children[0].props.label);
const onClickTabItem = label => {
setActiveTab(label);
};
return m$1`
<div>
<ol class=${styles$9.nav}>
${children.map(child => {
const {
label
} = child.props;
return m$1`
<${Tab}
activeTab=${activeTab}
key=${label}
label=${label}
onClick=${onClickTabItem}
>
<//>
`;
})}
</ol>
<div className="tab-content">
${children.map(child => {
if (child.props.label !== activeTab) return undefined;
return child.props.children;
})}
</div>
</div>
`;
};
var css_248z$b = ".styles-module_template_list__uK6RM {\n\n display: grid;\n\n grid-template-columns: repeat(1, minmax(0, 1fr));\n\n gap: 0.5rem\n}\n\n.styles-module_template_grid__22x3Q {\n\n display: grid;\n\n grid-template-columns: repeat(1, minmax(0, 1fr));\n\n gap: 0.5rem;\n\n padding-top: 0.5rem;\n\n padding-bottom: 0.5rem\n}\n\n@media (min-width: 768px) {\n\n .styles-module_template_grid__22x3Q {\n\n grid-template-columns: repeat(3, minmax(0, 1fr))\n }\n}\n\n@media (min-width: 1280px) {\n\n .styles-module_template_grid__22x3Q {\n\n grid-template-columns: repeat(5, minmax(0, 1fr))\n }\n}\n\n.styles-module_integrations__qUmJd {\n\n margin-top: 0.5rem;\n\n margin-bottom: 0.5rem;\n\n display: flex;\n\n flex-direction: column\n}\n\n.styles-module_integrations__qUmJd > :not([hidden]) ~ :not([hidden]) {\n\n --tw-space-y-reverse: 0;\n\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))\n}\n\n.styles-module_integrations__qUmJd {\n\n border-radius: 0.25rem;\n\n border-width: 1px;\n\n border-style: solid;\n\n --tw-border-opacity: 1;\n\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n\n padding-left: 0.75rem;\n\n padding-right: 0.75rem;\n\n padding-top: 1rem;\n\n padding-bottom: 1rem\n}\n\n.styles-module_integrations__qUmJd:hover {\n\n --tw-border-opacity: 1;\n\n border-color: rgba(156, 163, 175, var(--tw-border-opacity))\n}\n .styles-module_integrations__qUmJd .styles-module_integration__3QaeB {\n\n display: flex;\n\n align-items: center;\n\n justify-content: space-between;\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n\n white-space: nowrap\n}\n .styles-module_integrations__qUmJd .styles-module_integration__3QaeB img {\n\n margin-right: 0.75rem;\n\n height: 2rem;\n\n width: 2rem\n}\n .styles-module_integrations__qUmJd .styles-module_integration__3QaeB .styles-module_left__1bMSI {\n\n display: flex;\n\n flex: 1 1 0%;\n\n align-items: center\n}\n .styles-module_integrations__qUmJd .styles-module_integration__3QaeB .styles-module_right__Sc3Nd {\n\n display: flex;\n\n width: 16rem;\n\n justify-content: flex-end\n}\n\n.styles-module_header__2P56z {\n\n margin-bottom: 0.75rem;\n\n margin-top: 1.5rem;\n\n letter-spacing: 0.025em;\n\n --tw-text-opacity: 1;\n\n color: rgba(80, 156, 246, var(--tw-text-opacity))\n}\n\n.styles-module_textSmall__2aE9A {\n\n margin-top: 0.25rem;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n --tw-text-opacity: 1;\n\n color: rgba(156, 163, 175, var(--tw-text-opacity))\n}\n\n.styles-module_statusGreen__FHwLk {\n\n margin-left: 0.5rem;\n\n margin-right: 0.5rem;\n\n height: 0.75rem;\n\n width: 0.75rem;\n\n border-radius: 9999px;\n\n --tw-bg-opacity: 1;\n\n background-color: rgba(52, 211, 153, var(--tw-bg-opacity))\n}\n\n.styles-module_statusRed__3zQQ6 {\n\n margin-left: 0.5rem;\n\n margin-right: 0.5rem;\n\n height: 0.75rem;\n\n width: 0.75rem;\n\n border-radius: 9999px;\n\n --tw-bg-opacity: 1;\n\n background-color: rgba(220, 38, 38, var(--tw-bg-opacity))\n}\n";
var style$1 = {
"template_list": "styles-module_template_list__uK6RM",
"template_grid": "styles-module_template_grid__22x3Q",
"integrations": "styles-module_integrations__qUmJd",
"integration": "styles-module_integration__3QaeB",
"left": "styles-module_left__1bMSI",
"right": "styles-module_right__Sc3Nd",
"header": "styles-module_header__2P56z",
"textSmall": "styles-module_textSmall__2aE9A",
"statusGreen": "styles-module_statusGreen__FHwLk",
"statusRed": "styles-module_statusRed__3zQQ6"
};
styleInject(css_248z$b);
var TemplateFormRenderModes;
(function (TemplateFormRenderModes) {
TemplateFormRenderModes["MODAL"] = "MODAL";
TemplateFormRenderModes["INLINE"] = "INLINE";
TemplateFormRenderModes["DETACHED"] = "DETACHED";
TemplateFormRenderModes["CUSTOM"] = "CUSTOM";
})(TemplateFormRenderModes || (TemplateFormRenderModes = {}));
var TemplateListingRenderModes;
(function (TemplateListingRenderModes) {
TemplateListingRenderModes["GRID"] = "GRID";
TemplateListingRenderModes["LIST"] = "LIST";
})(TemplateListingRenderModes || (TemplateListingRenderModes = {}));
class TemplatesView extends _ {
constructor() {
super();
this.filterTemplates = query => {
if (query) ; else {
this.setState({
filteredTemplates: this.state.templates
});
}
};
this.onTemplateClick = templateId => {
if (this.props.onTemplateClick) {
this.props.onTemplateClick(templateId);
}
};
this.state = {
loading: false,
integrations: [],
templates: [],
filteredTemplates: []
};
} // Adding the this argument restricts binding
static handleClick(event) {
event.preventDefault();
if (event.target instanceof HTMLElement) {
console.info(event.target.localName);
}
}
componentDidMount() {
this.setState({
loading: true
});
this.props.apiHandler.getTemplateListing(this.props.bundleId).then(data => {
this.props.eventEmitter.emit('bundleData', data);
this.setState({
integrations: data.integrations,
templates: data.templates,
filteredTemplates: data.templates,
loading: false
});
});
}
render() {
return m$1`
<div>
${this.state.loading ? m$1` <${Loader} //> ` : m$1`
<${TabBar}>
<div label="Templates">
<div class="mt-4" />
<h2 class=${style$1.header}>Available Templates</h2>
<div>
<${TemplateSearch}
resultCount=${this.state.filteredTemplates.length}
onChange=${val => this.filterTemplates(val)}
>
<//>
</div>
<div
class="${this.props.layout === TemplateListingRenderModes.LIST ? style$1.template_list : style$1.template_grid} ${'integry-container_TemplatesView'}"
>
${this.state.filteredTemplates.map(template => m$1`
<${this.props.templateContainerTemplate}
name=${template.name}
description=${template.description}
layout=${this.props.layout}
tags=${template.branding_app.tags}
imgUrl=${template.branding_app.icon_url}
onClick=${() => this.onTemplateClick(template.id)}
>
<//>
`)}
</div>
</div>
<div label="Integrations">
${this.state.integrations.length > 0 && m$1`
<div class="mt-4">
<h2 class=${style$1.header}>Connected Integrations</h2>
<div class=${style$1.integrations}>
${this.state.integrations.map(el => m$1`
<div class=${style$1.integration}>
<div class=${style$1.left}>
<img src=${el.icon_url} />
<div>
<div>${el.name}</div>
<div class=${style$1.textSmall}>
Modified:${' '}
${new Date(el.last_modified).toLocaleString()}
</div>
</div>
</div>
<div class=${style$1.right}>
<div>
${el.status === 'ACTIVE' ? m$1`<div class=${style$1.statusGreen} />` : m$1`<div class=${style$1.statusRed} />`}
</div>
</div>
</div>
`)}
</div>
</div>
`}
</div>
<//>
`}
</div>
`;
}
}
var css_248z$a = ".styles-module_selectWrapper__wU7p8 {\n position: relative;\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"\n}\n .styles-module_selectWrapper__wU7p8 fieldset {\n margin: 0px;\n border-style: none;\n padding: 0px\n}\n .styles-module_selectWrapper__wU7p8 select {\n position: relative;\n box-sizing: border-box;\n width: 100%;\n appearance: none;\n border-radius: 0.25rem;\n border-width: 1px;\n border-style: solid;\n --tw-border-opacity: 1;\n border-color: rgba(156, 163, 175, var(--tw-border-opacity));\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n padding-right: 2rem;\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"\n}\n .styles-module_selectWrapper__wU7p8 select:focus {\n border-color: transparent;\n outline: 2px solid transparent;\n outline-offset: 2px;\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n --tw-ring-opacity: 1;\n --tw-ring-color: rgba(156, 163, 175, var(--tw-ring-opacity))\n}\n .styles-module_selectWrapper__wU7p8 svg {\n position: absolute;\n right: 0.5rem;\n top: 0.75rem\n}\n";
var styles$8 = {
"selectWrapper": "styles-module_selectWrapper__wU7p8"
};
styleInject(css_248z$a);
/**
* Input component
*
*/
const Select = props => {
const {
placeholder,
ariaLabel,
value,
options = [],
onChange = () => null
} = props;
const handleInputChange = e => {
if (e.currentTarget instanceof HTMLSelectElement) {
const {
value: newValue
} = e.currentTarget;
const val = options.findIndex(el => `${el.key}` === `${newValue}`);
onChange(val);
}
};
return m$1`
<div class="${styles$8.selectWrapper}">
<select aria-label=${ariaLabel} onchange=${handleInputChange}>
<option value="" disabled selected hidden>${placeholder}</option>
${options.map(el => m$1`
<option value=${el.key} selected=${value === el.key}>
${el.label}
</option>
`)}
</select>
<svg
width="12"
height="12"
viewBox="0 0 12 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 1L6 6L1 1"
stroke="#999999"
stroke-width="2"
stroke-linecap="round"
/>
</svg>
</div>
`;
};
var css_248z$9 = ".styles-module_authSelectorWrap__1nMw5 {\n margin-bottom: 0.5rem\n}\n .styles-module_authSelectorWrap__1nMw5 .styles-module_title__3bhJa {\n padding-bottom: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n .styles-module_authSelectorWrap__1nMw5 .styles-module_selectContainer__lPTv0 {\n display: flex;\n align-items: center\n}\n .styles-module_authSelectorWrap__1nMw5 .styles-module_selectContainer__lPTv0 .styles-module_status___LKyD {\n margin-left: 0.5rem;\n font-size: 0.75rem;\n line-height: 1rem\n}\n";
var styles$7 = {
"authSelectorWrap": "styles-module_authSelectorWrap__1nMw5",
"title": "styles-module_title__3bhJa",
"selectContainer": "styles-module_selectContainer__lPTv0",
"status": "styles-module_status___LKyD"
};
styleInject(css_248z$9);
class AuthSelector extends _ {
constructor(props) {
super(props);
this.verifyAuth = authIndex => {
const auth = this.props.authorizations[authIndex];
this.setState({
isLoading: true
});
this.props.apiHandler.verifyOAuth(auth.id).then(res => {
if (res) {
this.setState({
isVerified: true
});
}
}).catch(err => console.error(err)).finally(() => this.setState({
isLoading: false
}));
};
this.state = {
isVerified: false,
isLoading: false
};
}
render() {
return m$1`
<div class=${styles$7.authSelectorWrap}>
<div class=${styles$7.title}>${this.props.title}</div>
<div class=${styles$7.selectContainer}>
<${Select}
ariaLabel="Select an auth"
options=${this.props.authorizations.map(el => ({
key: el.id,
label: el.user_identity
}))}
placeholder="Select an auth"
onChange=${this.verifyAuth}
><//>
<div class=${styles$7.status}>
${this.state.isLoading ? m$1`<${Loader} //>` : m$1`
${this.state.isVerified ? 'Verified ✅' : 'Unverified ❌'}
`}
</div>
</div>
</div>
`;
}
}
/**
*
* @param url Url to open in this popup window
* @param windowName Given name
* @param win Original window reference
* @param w Width in px
* @param h Height in px
* @returns Reference to the newly created popup window
*/
function openPopupWindow(url, windowName, win, w, h) {
const y = win.top.outerHeight / 2 + win.top.screenY - h / 2;
const x = win.top.outerWidth / 2 + win.top.screenX - w / 2;
return win.open(url, windowName, `toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=${w}, height=${h}, top=${y}, left=${x}`);
}
var css_248z$8 = ".styles-module_listboxGroupWrapper__1Kt5M {\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"\n}\n .styles-module_listboxGroupWrapper__1Kt5M fieldset {\n margin: 0px;\n border-style: none;\n padding: 0px\n}\n\n.styles-module_listbox__2x2uP {\n position: relative;\n width: 100%;\n user-select: none;\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"\n}\n .styles-module_listbox__2x2uP .styles-module_customSelect__3d-hM {\n position: relative;\n display: flex;\n flex-direction: column;\n --tw-text-opacity: 1;\n color: rgba(107, 114, 128, var(--tw-text-opacity))\n}\n .styles-module_listbox__2x2uP .styles-module_customSelect__3d-hM.styles-module_open__2fBAx .styles-module_customOptions__3iNrM {\n pointer-events: auto;\n visibility: visible;\n opacity: 1\n}\n .styles-module_listbox__2x2uP .styles-module_customSelectTrigger__2MlIG {\n position: relative;\n display: flex;\n cursor: pointer;\n align-items: center;\n justify-content: space-between;\n border-radius: 0.375rem;\n border-width: 1px;\n border-style: solid;\n --tw-border-opacity: 1;\n border-color: rgba(209, 213, 219, var(--tw-border-opacity));\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n padding-left: 0.75rem;\n padding-right: 1rem;\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n .styles-module_listbox__2x2uP .styles-module_customSelectTrigger__2MlIG:focus {\n border-color: transparent;\n outline: 2px solid transparent;\n outline-offset: 2px;\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n --tw-ring-opacity: 1;\n --tw-ring-color: rgba(209, 213, 219, var(--tw-ring-opacity))\n}\n .styles-module_listbox__2x2uP .styles-module_customSelectTrigger__2MlIG .styles-module_arrow__TPQOZ {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transition-property: transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n .styles-module_listbox__2x2uP .styles-module_customSelectTrigger__2MlIG .styles-module_arrow__TPQOZ.styles-module_close__3wlz1 {\n --tw-rotate: 180deg\n}\n .styles-module_listbox__2x2uP .styles-module_customOptions__3iNrM {\n position: absolute;\n top: 100%;\n left: 0px;\n right: 0px;\n z-index: 10;\n margin-top: 0.5rem;\n display: block;\n overflow: hidden;\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n font-size: 0.875rem;\n line-height: 1.25rem;\n --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n pointer-events: none;\n visibility: hidden;\n max-height: 16rem;\n min-height: 100%;\n overflow: auto;\n border-width: 1px;\n border-style: solid;\n --tw-border-opacity: 1;\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n opacity: 0;\n border-radius: 0.375rem\n}\n .styles-module_listbox__2x2uP .styles-module_customOptions__3iNrM:focus {\n border-color: transparent;\n outline: 2px solid transparent;\n outline-offset: 2px;\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n --tw-ring-opacity: 1;\n --tw-ring-color: rgba(156, 163, 175, var(--tw-ring-opacity))\n}\n\n.styles-module_listboxItem__2jMpi {\n position: relative;\n display: block;\n cursor: pointer;\n border-width: 0px;\n border-bottom-width: 1px;\n border-style: solid;\n --tw-border-opacity: 1;\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n padding-left: 2.5rem;\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n .styles-module_listboxItem__2jMpi svg {\n position: absolute;\n left: 1rem;\n top: 0px;\n height: 100%;\n width: 0.75rem\n}\n .styles-module_listboxItem__2jMpi:last-child {\n border-style: none\n}\n .styles-module_listboxItem__2jMpi:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(80, 156, 246, var(--tw-bg-opacity));\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity))\n}\n .styles-module_listboxItem__2jMpi.styles-module_selected__nLzUy {\n font-weight: 600;\n --tw-text-opacity: 1;\n color: rgba(75, 85, 99, var(--tw-text-opacity))\n}\n";
var styles$6 = {
"listboxGroupWrapper": "styles-module_listboxGroupWrapper__1Kt5M",
"listbox": "styles-module_listbox__2x2uP",
"customSelect": "styles-module_customSelect__3d-hM",
"open": "styles-module_open__2fBAx",
"customOptions": "styles-module_customOptions__3iNrM",
"customSelectTrigger": "styles-module_customSelectTrigger__2MlIG",
"arrow": "styles-module_arrow__TPQOZ",
"close": "styles-module_close__3wlz1",
"listboxItem": "styles-module_listboxItem__2jMpi",
"selected": "styles-module_selected__nLzUy"
};
styleInject(css_248z$8);
const ListBoxItem = props => {
const {
id,
value,
isSelected,
onClick
} = props;
return m$1`
<span
class=${`${styles$6.listboxItem} ${isSelected ? styles$6.selected : ''}`}
data-value=${id}
onclick=${onClick}
>
${isSelected && m$1`
<svg
width="7"
height="7"
viewBox="0 0 7 7"
fill="none"
xmlns="http://www.w3.org/2000/svg"
stroke="#333"
>
<path
d="M6.33333 1.5L2.83522 5.5L1 3.40148"
stroke-width="1.2"
stroke-linecap="round"
/>
</svg>
`}
${value}
</span>
`;
};
var css_248z$7 = ".styles-module_label__PbFlo {\n margin-bottom: 0.75rem;\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"\n}\n .styles-module_label__PbFlo label > div:first-child {\n line-height: 1.75rem\n}\n .styles-module_label__PbFlo label > div:nth-child(2) {\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 300;\n --tw-text-opacity: 1;\n color: rgba(156, 163, 175, var(--tw-text-opacity))\n}\n";
var styles$5 = {
"label": "styles-module_label__PbFlo"
};
styleInject(css_248z$7);
const Label = props => {
const {
title,
description
} = props;
return m$1`
<div class=${styles$5.label}>
<label>
<div>${title}</div>
${description && m$1`<div>${description}</div>`}
</label>
</div>
`;
};
function useOnClickOutside(ref, handler) {
y(() => {
const listener = event => {
// Do nothing if clicking ref's element or descendent elements
if (event.target instanceof HTMLElement) {
if (!ref.current || ref.current.contains(event.target)) {
return;
}
}
handler(event);
};
document.addEventListener('mousedown', listener);
document.addEventListener('touchstart', listener);
return () => {
document.removeEventListener('mousedown', listener);
document.removeEventListener('touchstart', listener);
};
}, // Add ref and handler to effect dependencies
// It's worth noting that because passed in handler is a new ...
// ... function on every render that will cause this effect ...
// ... callback/cleanup to run every render. It's not a big deal ...
// ... but to optimize you can wrap handler in useCallback before ...
// ... passing it into this hook.
[ref, handler]);
}
const ListBox = props => {
const {
title,
description,
items: passedItems = [],
selectedItemIndex = null,
isOpen = false,
isDynamic = false,
endpointData,
onItemSelected = () => null,
responseMapper = input => input
} = props;
const [items, setItems] = l(passedItems);
const [loading, setLoading] = l(isDynamic && !passedItems.length);
const [isDropdownOpen, setIsDropdownOpen] = l(isOpen);
const dropdownRef = s(null);
useOnClickOutside(dropdownRef, () => isDropdownOpen && setIsDropdownOpen(false));
y(() => {
// eslint-disable-next-line @typescript-eslint/no-shadow
const {
apiHandler,
isDynamic,
endpointUrl
} = props;
if (isDynamic && endpointUrl) {
apiHandler.callDynamicDataEndpoint(new URL(endpointUrl), endpointData).then(res => {
console.info({
res
});
setLoading(false);
setItems(responseMapper(res));
});
}
}, []);
const toggleDropdown = () => {
setIsDropdownOpen(prev => !prev);
};
const onEnterClicked = () => {
toggleDropdown();
};
return m$1`
<div class="${styles$6.listboxGroupWrapper}">
<fieldset>
<${Label} title=${title} description=${description} //>
<div class=${styles$6.listbox}>
<div
class=${`${styles$6.customSelect} ${isDropdownOpen ? styles$6.open : ''}`}
>
<div
class=${styles$6.customSelectTrigger}
role="button"
tabindex=${0}
onclick=${toggleDropdown}
onkeyup=${e => {
if (e.key === 'Enter') {
onEnterClicked();
}
}}
>
${loading ? m$1`Loading` : m$1`
${items.length > 0 ? m$1`
${selectedItemIndex !== null && selectedItemIndex !== undefined && items[selectedItemIndex].value ? m$1`${items[selectedItemIndex].value}` : m$1`Please select an option`}
` : m$1`No options`}
`}
<div
ref=${dropdownRef}
class=${`${styles$6.arrow} ${isDropdownOpen ? styles$6.close : ''}`}
>
<svg
width="12"
height="8"
viewBox="0 0 12 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 1.5L6 6.5L1 1.5"
stroke="#999999"
stroke-width="2"
stroke-linecap="round"
/>
</svg>
</div>
</div>
<div class=${styles$6.customOptions}>
${items.length > 0 && !loading && m$1`
${items.map((el, idx) => m$1`
<${ListBoxItem}
key=${el.id}
id=${el.id}
value=${el.value}
isSelected=${selectedItemIndex === idx}
onClick=${() => {
onItemSelected(idx);
}}
><//>
`)}
`}
</div>
</div>
</div>
</fieldset>
</div>
`;
};
var classnames = createCommonjsModule(function (module) {
/* global define */
(function () {
var hasOwn = {}.hasOwnProperty;
function classNames() {
var classes = [];
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes.push(arg);
} else if (Array.isArray(arg)) {
if (arg.length) {
var inner = classNames.apply(null, arg);
if (inner) {
classes.push(inner);
}
}
} else if (argType === 'object') {
if (arg.toString === Object.prototype.toString) {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
} else {
classes.push(arg.toString());
}
}
}
return classes.join(' ');
}
if (module.exports) {
classNames.default = classNames;
module.exports = classNames;
} else {
window.classNames = classNames;
}
})();
});
var css_248z$6 = ".styles-module_button__osBYJ {\n cursor: pointer;\n appearance: none;\n border-radius: 0.25rem\n}\n.styles-module_button__osBYJ:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)\n}\n .styles-module_button__osBYJ.styles-module_buttonPrimary__1u5p2 {\n border-style: solid;\n --tw-border-opacity: 1;\n border-color: rgba(80, 156, 246, var(--tw-border-opacity));\n --tw-bg-opacity: 1;\n background-color: rgba(80, 156, 246, var(--tw-bg-opacity));\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity))\n}\n .styles-module_button__osBYJ.styles-module_buttonSecondary__2HV1m {\n border-width: 1px;\n border-style: solid;\n --tw-border-opacity: 1;\n border-color: rgba(80, 156, 246, var(--tw-border-opacity));\n background-color: transparent;\n --tw-text-opacity: 1;\n color: rgba(80, 156, 246, var(--tw-text-opacity))\n}\n .styles-module_button__osBYJ.styles-module_buttonLink__39jcU {\n margin: 0px;\n border-style: none;\n background-color: transparent;\n padding: 0px;\n font-weight: 600;\n --tw-text-opacity: 1;\n color: rgba(80, 156, 246, var(--tw-text-opacity))\n}\n .styles-module_button__osBYJ.styles-module_small__Yftmu {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n font-size: 0.75rem;\n line-height: 1rem\n}\n .styles-module_button__osBYJ.styles-module_medium__Wi0Uh {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n .styles-module_button__osBYJ.styles-module_large__3t5pH {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n padding-top: 0.75rem;\n padding-bottom: 0.75rem\n}\n";
var styles$4 = {
"button": "styles-module_button__osBYJ",
"buttonPrimary": "styles-module_buttonPrimary__1u5p2",
"buttonSecondary": "styles-module_buttonSecondary__2HV1m",
"buttonLink": "styles-module_buttonLink__39jcU",
"small": "styles-module_small__Yftmu",
"medium": "styles-module_medium__Wi0Uh",
"large": "styles-module_large__3t5pH"
};
styleInject(css_248z$6);
var ButtonTypes;
(function (ButtonTypes) {
ButtonTypes["PRIMARY"] = "primary";
ButtonTypes["SECONDARY"] = "secondary";
ButtonTypes["LINK"] = "link";
})(ButtonTypes || (ButtonTypes = {}));
var ButtonSizes;
(function (ButtonSizes) {
ButtonSizes["LARGE"] = "large";
ButtonSizes["MEDIUM"] = "medium";
ButtonSizes["SMALL"] = "small";
})(ButtonSizes || (ButtonSizes = {}));
/**
* Button component
*
*/
const Button = props => {
const {
label,
type = ButtonTypes.PRIMARY,
color = null,
backgroundColor = null,
size = ButtonSizes.MEDIUM,
onClick = undefined,
...restOfProps
} = props;
return m$1` <button
type="button"
onclick=${onClick}
class=${classnames(styles$4.button, {
[styles$4.buttonPrimary]: type === ButtonTypes.PRIMARY,
[styles$4.buttonSecondary]: type === ButtonTypes.SECONDARY,
[styles$4.buttonLink]: type === ButtonTypes.LINK,
[styles$4.small]: size === ButtonSizes.SMALL && type !== ButtonTypes.LINK,
[styles$4.medium]: size === ButtonSizes.MEDIUM && type !== ButtonTypes.LINK,
[styles$4.large]: size === ButtonSizes.LARGE && type !== ButtonTypes.LINK
})}
style=${{
backgroundColor: type === ButtonTypes.PRIMARY ? backgroundColor : null,
borderColor: type === ButtonTypes.PRIMARY ? backgroundColor : color,
color
}}
${{ ...restOfProps
}}
>
${label}
</button>`;
};
function n(n, t) {
for (var r in t) n[r] = t[r];
return n;
}
function createStore (t) {
var r = [];
function u(n) {
for (var t = [], u = 0; u < r.length; u++) r[u] === n ? n = null : t.push(r[u]);
r = t;
}
function e(u, e, f) {
t = e ? u : n(n({}, t), u);
for (var i = r, o = 0; o < i.length; o++) i[o](t, f);
}
return t = t || {}, {
action: function (n) {
function r(t) {
e(t, !1, n);
}
return function () {
for (var u = arguments, e = [t], f = 0; f < arguments.length; f++) e.push(u[f]);
var i = n.apply(this, e);
if (null != i) return i.then ? i.then(r) : r(i);
};
},
setState: e,
subscribe: function (n) {
return r.push(n), function () {
u(n);
};
},
unsubscribe: u,
getState: function () {
return t;
}
};
}
var devtools = function unistoreDevTools(store) {
var extension = window.__REDUX_DEVTOOLS_EXTENSION__ || window.top.__REDUX_DEVTOOLS_EXTENSION__;
var ignoreState = false;
if (!extension) {
console.warn('Please install/enable Redux devtools extension');
store.devtools = null;
return store;
}
if (!store.devtools) {
store.devtools = extension.connect();
store.devtools.subscribe(function (message) {
if (message.type === 'DISPATCH' && message.state) {
ignoreState = message.payload.type === 'JUMP_TO_ACTION' || message.payload.type === 'JUMP_TO_STATE';
store.setState(JSON.parse(message.state), true);
}
});
store.devtools.init(store.getState());
store.subscribe(function (state, action) {
var actionName = action && action.name || 'setState';
if (!ignoreState) {
store.devtools.send(actionName, state);
} else {
ignoreState = false;
}
});
}
return store;
};
const stepActions = {
setSteps(state, stepState) {
return {
stepState
};
},
gotoNextStep(state) {
if (state.stepState) {
return {
stepState: { ...state.stepState,
currentStep: state.stepState.currentStep + 1
}
};
}
return state;
},
gotoPreviousStep: state => {
if (state.stepState) {
return {
stepState: { ...state.stepState,
currentStep: state.stepState.currentStep + 1
}
};
}
return state;
},
gotoStep: (state, stepIndex) => {
if (state.stepState) {
return {
stepState: { ...state.stepState,
currentStep: stepIndex
}
};
}
return state;
}
};
const actionFunctions = storeSnapshot => ({
getStepState() {
return storeSnapshot.getState().stepState;
},
setStepMapping(state, step) {
return {
stepMapping: { ...state.stepMapping,
[step.id]: step
}
};
} // // ... or just actions that call store.setState() later:
// clearOutStuff(store: Store<State>) {
// setTimeout(() => {
// store.setState({ stuff: [] }); // clear 'stuff' after 1 second
// }, 1000);
// },
// Remember that the state passed to the action function could be stale after
// doing async work, so use getState() instead:
// async incrementAfterStuff(store: Store<State>) {
// const res = await fetch('foo.json');
// const resJson = await res.json();
// // the variable 'state' above could now be old,
// // better get a new one from the store
// const upToDateState = store.getState();
// return {
// stuff: resJson,
// count: upToDateState.count + resJson.length,
// };
// },
// Async actions can be pure async/promise functions:
// async getStuff(store: Store<State>) {
// // async actions already typically do an initial store update to indicate pending state.
// // the suggestion is to also write a lock of some kind here:
// const lock = {};
// store.setState({ pending: true, lock });
// const res = await fetch('/foo.json');
// const stuff = await res.json();
// // if someone else overwrote our lock, discard the action's return value.
// if (store.getState().lock !== lock) return null;
// return { pending: false, stuff };
// },
});
const createStoreWrapper = () => createStore({
stepState: null,
count: 0,
pending: false,
lock: {},
stepMapping: {}
});
const store = process.env.NODE_ENV === 'production' ? createStoreWrapper() : devtools(createStoreWrapper());
var css_248z$5 = ".styles-module_stepWrap__3iCC9 {\n margin-bottom: 1rem\n}\n";
var styles$3 = {
"stepWrap": "styles-module_stepWrap__3iCC9"
};
styleInject(css_248z$5);
function isAuthMessage(msg) {
return msg !== undefined;
}
const Step = props => {
const [loading, setLoading] = l(true);
const [stepData, setStepData] = l();
y(() => {
// eslint-disable-next-line no-use-before-define
fetchData();
const onAuthResponseReceived = messageEvent => {
if (isAuthMessage(messageEvent) && messageEvent.data.activity_name) console.info(messageEvent.data);
};
window.addEventListener('message', onAuthResponseReceived);
return () => {
window.removeEventListener('message', onAuthResponseReceived);
};
}, []); // componentDidUpdate(prevProps: StepPropsType) {
// if (prevProps.step !== this.props.step) {
// this.fetchData();
// }
// }
// componentDidMount() {
// this.fetchData();
// }
// const componentWillUnmount() {
// }
const fetchData = () => {
setLoading(true);
props.apiHandler.getTemplateStep(props.step.id).then(retrievedStepData => {
props.setStepMapping(retrievedStepData);
setLoading(false);
setStepData(stepData);
}).catch(err => {
throw err;
});
};
const openAuthWindow = () => {
if (stepData) {
const url = props.apiHandler.getAuthUrl(stepData === null || stepData === void 0 ? void 0 : stepData.authorization_type.id);
openPopupWindow(url, 'Auth Window', window, 800, 600);
}
};
const authType = stepData === null || stepData === void 0 ? void 0 : stepData.authorization_type;
return m$1`
${loading ? m$1`<${Loader} //>` : m$1`
${stepData ? m$1`
<div class=${styles$3.stepWrap}>
${authType ? m$1`
<${AuthSelector}
id=${authType.id}
apiHandler=${props.apiHandler}
provider=${authType.provider}
title=${stepData.title}
type${authType.type}
authorizations=${authType.authorizations}
>
<//>
<${Button}
onClick=${openAuthWindow}
label="Add Auth"
type=${ButtonTypes.LINK}
>
<//>
` : m$1` ${stepData.title} `}
${stepData.template_fields.map(el => {
if (!el.is_hidden) {
switch (el.activity_field.type) {
case 'SELECT':
return m$1`
<${ListBox}
key=${el.activity_field.id}
apiHandler=${props.apiHandler}
title=${el.activity_field.title}
description=${el.activity_field.description}
selectedItemIndex=${null}
endpointUrl=${el.activity_field.data_src}
isDynamic=${el.activity_field.is_dynamic}
endpointData=${{
authorization_id: ''
}}
><//>
`;
default:
return m$1`<div>
Unsupported field: ${el.activity_field.type}
</div>`;
}
}
return m$1``;
})}
</div>
` : m$1`Step data could not be loaded`}
`}
`;
};
var Step$1 = preact.connect('', actionFunctions)(Step);
var css_248z$4 = ".styles-module_navigation__Qithv {\n\n width: 10rem;\n\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"\n}\n\n.styles-module_navItem__SNnC8 {\n\n margin-bottom: 0.5rem;\n\n cursor: pointer;\n\n --tw-text-opacity: 1;\n\n color: rgba(31, 41, 55, var(--tw-text-opacity))\n}\n .styles-module_navItem__SNnC8 .styles-module_navItemContent__22eH0 {\n\n display: flex;\n\n height: 2rem;\n\n align-items: center;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem\n}\n .styles-module_navItem__SNnC8 .styles-module_navItemContent__22eH0 .styles-module_imgContainer__3YziN {\n\n height: 1.5rem;\n\n width: 1rem;\n\n padding-right: 0.5rem\n}\n .styles-module_navItem__SNnC8 .styles-module_navItemContent__22eH0 .styles-module_imgContainer__3YziN img {\n\n height: 100%;\n\n width: 100%;\n\n object-fit: contain\n}\n .styles-module_navItem__SNnC8 .styles-module_navItemContent__22eH0 .styles-module_imgContainer__3YziN svg {\n\n height: 100%;\n\n width: 100%;\n\n object-fit: contain\n}\n .styles-module_navItem__SNnC8.styles-module_active__bgoAQ {\n\n opacity: 1\n}\n .styles-module_navItem__SNnC8.styles-module_disabled__ny7MW {\n\n user-select: none;\n\n opacity: 0.5\n}\n";
var styles$2 = {
"navigation": "styles-module_navigation__Qithv",
"navItem": "styles-module_navItem__SNnC8",
"navItemContent": "styles-module_navItemContent__22eH0",
"imgContainer": "styles-module_imgContainer__3YziN",
"active": "styles-module_active__bgoAQ",
"disabled": "styles-module_disabled__ny7MW"
};
styleInject(css_248z$4);
const TickMark = m$1` <svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect opacity="0.7" width="15" height="15" rx="7.5" fill="#2ECC71" />
<path
d="M9.23107 6.34619L6.96066 8.94234L5.76953 7.58033"
stroke="white"
stroke-width="1.2"
stroke-linecap="round"
/>
</svg>`;
const FinalTickMark = m$1`
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="7.5"
cy="7.5"
r="6.75"
fill="white"
stroke="#2ECC71"
stroke-width="1.5"
/>
<path
d="M10.3333 5.5L6.83522 9.5L5 7.40148"
stroke="#2ECC71"
stroke-width="1.5"
stroke-linecap="round"
/>
</svg>
`;
class NavItem extends _ {
render() {
const {
logoUrl,
isActive = false,
isCompleted = false,
isDisabled = false,
isLastStep = false,
onClick = () => null
} = this.props;
return m$1`
<div
class=${`${styles$2.navItem} ${isDisabled ? styles$2.disabled : ''} ${isActive ? styles$2.active : ''}`}
onclick=${onClick}
tabindex="-1"
role="button"
>
<div class=${styles$2.navItemContent}>
<div class=${styles$2.imgContainer}>
${isCompleted && !isLastStep && m$1`${TickMark}`}
${isLastStep && isCompleted && m$1`${FinalTickMark}`}
${!isCompleted && m$1`<img src=${logoUrl} />`}
</div>
<div>${this.props.label}</div>
</div>
<!-- <div>
<div>isActive: ${isActive ? 'true' : 'false'}</div>
<div>isDisabled: ${isDisabled ? 'true' : 'false'}</div>
<div>isCompleted: ${isCompleted ? 'true' : 'false'}</div>
</div> -->
</div>
`;
}
}
class StepNavigation extends _ {
constructor() {
super(...arguments);
this.changeStep = stepIndex => {
this.props.gotoStep(stepIndex);
};
}
render() {
var _this$props$stepState, _this$props$stepState4, _this$props$stepState5;
return m$1`
<div class=${styles$2.navigation}>
<div>
${(_this$props$stepState = this.props.stepState) === null || _this$props$stepState === void 0 ? void 0 : _this$props$stepState.steps.map((el, idx) => {
var _this$props$stepState2, _this$props$stepState3;
return m$1` <${NavItem}
label=${el.title}
logoUrl=${el.iconUrl}
isCompleted=${this.props.completedTillIndex !== undefined && this.props.completedTillIndex > -1 && idx <= this.props.completedTillIndex}
isActive=${((_this$props$stepState2 = this.props.stepState) === null || _this$props$stepState2 === void 0 ? void 0 : _this$props$stepState2.currentStep) !== undefined && this.props.stepState.currentStep === idx}
isDisabled=${((_this$props$stepState3 = this.props.stepState) === null || _this$props$stepState3 === void 0 ? void 0 : _this$props$stepState3.currentStep) !== undefined && this.props.stepState.currentStep !== idx}
isLastStep=${idx + 1 === this.props.steps.length}
onClick=${() => this.changeStep(idx)}
/>`;
})}
<${NavItem}
label="Confirmation"
logoUrl=""
isCompleted=${true}
isActive=${((_this$props$stepState4 = this.props.stepState) === null || _this$props$stepState4 === void 0 ? void 0 : _this$props$stepState4.currentStep) !== undefined && this.props.stepState.currentStep === this.props.stepState.steps.length}
isDisabled=${((_this$props$stepState5 = this.props.stepState) === null || _this$props$stepState5 === void 0 ? void 0 : _this$props$stepState5.currentStep) !== undefined && this.props.stepState.currentStep !== this.props.stepState.steps.length}
isLastStep=${true}
onClick=${() => {
var _this$props$stepState6;
return this.changeStep(((_this$props$stepState6 = this.props.stepState) === null || _this$props$stepState6 === void 0 ? void 0 : _this$props$stepState6.steps.length) ?? 0);
}}
/>
</div>
</div>
`;
}
}
StepNavigation.defaultProps = {
currentStepIndex: -1,
completedTillIndex: -1
};
var StepNavigation$1 = preact.connect('stepState', stepActions)(StepNavigation);
var css_248z$3 = ".styles-module_stepsWrap__15a4M {\n margin-top: 1rem;\n display: flex;\n min-height: 400px\n}\n .styles-module_stepsWrap__15a4M .styles-module_stepsContainer__22IVg {\n border-width: 0px;\n border-right-width: 1px;\n border-style: solid;\n --tw-border-opacity: 1;\n border-color: rgba(209, 213, 219, var(--tw-border-opacity));\n padding-right: 1rem\n}\n .styles-module_stepsWrap__15a4M .styles-module_stepContainer__bh-a9 {\n display: flex;\n width: 100%;\n flex-direction: column;\n padding-left: 1rem\n}\n .styles-module_stepsWrap__15a4M .styles-module_stepContainer__bh-a9 .styles-module_top__1-EdE {\n display: flex;\n width: 100%;\n flex: 1 1 0%\n}\n .styles-module_stepsWrap__15a4M .styles-module_stepContainer__bh-a9 .styles-module_bottom__qOtLl {\n display: flex;\n justify-content: flex-end\n}\n .styles-module_stepsWrap__15a4M .styles-module_stepContainer__bh-a9 .styles-module_save__2kXm5 {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n";
var styles$1 = {
"stepsWrap": "styles-module_stepsWrap__15a4M",
"stepsContainer": "styles-module_stepsContainer__22IVg",
"stepContainer": "styles-module_stepContainer__bh-a9",
"top": "styles-module_top__1-EdE",
"bottom": "styles-module_bottom__qOtLl",
"save": "styles-module_save__2kXm5"
};
styleInject(css_248z$3);
class Steps extends _ {
constructor() {
super(...arguments);
this.createIntegration = () => {
const {
stepMapping
} = this.props;
console.info(stepMapping);
const payload = {
id: '',
name: '',
notification_email: '',
template: '',
bundle_id: '',
bundle_instance_id: '',
steps: Object.keys(stepMapping).map(el => ({
id: stepMapping[el].id,
authorization: '',
template_step: '',
app_user_data: stepMapping[el].template_fields.map(tField => ({
id: '',
value: '',
template_field: tField.id
}))
}))
};
console.info(payload);
};
}
render() {
var _this$props$stepState, _this$props$steps, _this$props$stepState2, _this$props$stepState3, _this$props$stepState4, _this$props$stepState5;
let selectedStep;
if (((_this$props$stepState = this.props.stepState) === null || _this$props$stepState === void 0 ? void 0 : _this$props$stepState.currentStep) !== undefined && this.props.stepState.currentStep > -1) {
selectedStep = this.props.steps[this.props.stepState.currentStep];
}
return m$1`
<div class=${styles$1.stepsWrap}>
<div class=${styles$1.stepsContainer}>
<${StepNavigation$1}
steps=${(_this$props$steps = this.props.steps) === null || _this$props$steps === void 0 ? void 0 : _this$props$steps.map(el => ({
label: el.title,
logoUrl: el.activity.app.icon_url
}))}
currentStepIndex=${-1}
completedTillIndex=${-1}
><//>
</div>
<div class=${styles$1.stepContainer}>
${((_this$props$stepState2 = this.props.stepState) === null || _this$props$stepState2 === void 0 ? void 0 : _this$props$stepState2.currentStep) === ((_this$props$stepState3 = this.props.stepState) === null || _this$props$stepState3 === void 0 ? void 0 : _this$props$stepState3.steps.length) && m$1`
<div class=${styles$1.save}>
Your integration is ready to be enabled. Click “Save” to continue.
</div>
`}
<div class=${styles$1.top}>
${selectedStep && m$1`
<${Step$1}
step=${selectedStep}
apiHandler=${this.props.apiHandler}
eventEmitter=${this.props.eventEmitter}
/>
`}
</div>
<div class=${styles$1.bottom}>
${((_this$props$stepState4 = this.props.stepState) === null || _this$props$stepState4 === void 0 ? void 0 : _this$props$stepState4.currentStep) === ((_this$props$stepState5 = this.props.stepState) === null || _this$props$stepState5 === void 0 ? void 0 : _this$props$stepState5.steps.length) ? m$1`
<${Button}
label="Save"
onClick=${() => this.createIntegration()}
><//>
` : m$1`
<${Button}
label="Next"
onClick=${() => this.props.gotoNextStep()}
><//>
`}
</div>
</div>
</div>
`;
}
}
var Steps$1 = preact.connect(['stepState', 'stepMapping'], stepActions)(Steps);
class TemplateForm extends _ {
constructor() {
super();
this.state = {
loading: true,
template: null
};
}
componentDidMount() {
this.props.apiHandler.getTemplate(this.props.templateId).then(data => {
this.props.setSteps({
steps: data.steps.map(el => ({
id: el.id,
title: el.title,
iconUrl: el.activity.app.icon_url,
isCompleted: false,
hasErrors: false
})),
currentStep: 0
});
this.setState({
template: data,
loading: false
});
}).catch(err => {
throw new Error(err);
});
}
render() {
var _template$wizard_step;
const {
template
} = this.state;
return m$1`
<div>
${this.state.loading ? m$1`<${Loader} //>` : m$1`
<div class="flex h-full w-full items-center mb-4">
<img
class="rounded-full mr-2"
src=${template === null || template === void 0 ? void 0 : template.branding_app.icon_url}
width="40"
/>
<div>
<div class="font-bold leading-relaxed">${template === null || template === void 0 ? void 0 : template.name}</div>
<div class="font-light text-sm">${template === null || template === void 0 ? void 0 : template.description}</div>
</div>
</div>
${template !== null && template !== void 0 && template.is_wizard ? m$1` <div>
<p>Wizard Steps</p>
${template === null || template === void 0 ? void 0 : (_template$wizard_step = template.wizard_steps) === null || _template$wizard_step === void 0 ? void 0 : _template$wizard_step.map(el => m$1`
<div>
<div>${el.title}</div>
</div>
`)}
</div>` : m$1`<${Steps$1}
steps=${template === null || template === void 0 ? void 0 : template.steps}
apiHandler=${this.props.apiHandler}
eventEmitter=${this.props.eventEmitter}
/>`}
`}
</div>
`;
}
}
var TemplateForm$1 = preact.connect('', stepActions)(TemplateForm);
var css_248z$2 = ".styles-module_name__7I2oc {\n\n margin-bottom: 0.5rem;\n\n --tw-text-opacity: 1;\n\n color: rgba(31, 41, 55, var(--tw-text-opacity))\n}\n\n.styles-module_description__3g6sc {\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n --tw-text-opacity: 1;\n\n color: rgba(107, 114, 128, var(--tw-text-opacity))\n}\n\n.styles-module_tags__3U60f {\n\n margin-top: 0.5rem;\n\n margin-bottom: -0.5rem;\n\n display: flex;\n\n flex-wrap: wrap\n}\n .styles-module_tags__3U60f .styles-module_tag__3ux7q {\n\n margin-right: 0.5rem;\n\n margin-bottom: 0.5rem;\n\n border-radius: 0.75rem;\n\n --tw-bg-opacity: 1;\n\n background-color: rgba(229, 231, 235, var(--tw-bg-opacity));\n\n padding: 0.25rem;\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n --tw-text-opacity: 1;\n\n color: rgba(107, 114, 128, var(--tw-text-opacity))\n}\n\n.styles-module_template_list_view__2F6yC {\n\n display: flex;\n\n cursor: pointer;\n\n align-items: center;\n\n justify-content: space-between;\n\n border-radius: 0.25rem;\n\n border-width: 1px;\n\n border-style: solid;\n\n --tw-border-opacity: 1;\n\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n\n padding: 0.75rem\n}\n\n.styles-module_template_list_view__2F6yC:hover {\n\n --tw-border-opacity: 1;\n\n border-color: rgba(156, 163, 175, var(--tw-border-opacity))\n}\n .styles-module_template_list_view__2F6yC img {\n\n margin-bottom: 0.5rem;\n\n height: 2.5rem;\n\n width: 2.5rem\n}\n\n.styles-module_template_grid_view__2TsM_ {\n\n display: flex;\n\n cursor: pointer;\n\n flex-direction: column;\n\n justify-content: space-between;\n\n border-radius: 0.25rem;\n\n border-width: 1px;\n\n border-style: solid;\n\n --tw-border-opacity: 1;\n\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n\n padding-left: 1rem;\n\n padding-right: 1rem;\n\n padding-top: 1.25rem;\n\n padding-bottom: 1.25rem\n}\n\n.styles-module_template_grid_view__2TsM_:hover {\n\n --tw-border-opacity: 1;\n\n border-color: rgba(156, 163, 175, var(--tw-border-opacity))\n}\n .styles-module_template_grid_view__2TsM_ img {\n\n margin-bottom: 0.75rem;\n\n height: 2.5rem;\n\n width: 2.5rem\n}\n";
var style = {
"name": "styles-module_name__7I2oc",
"description": "styles-module_description__3g6sc",
"tags": "styles-module_tags__3U60f",
"tag": "styles-module_tag__3ux7q",
"template_list_view": "styles-module_template_list_view__2F6yC",
"template_grid_view": "styles-module_template_grid_view__2TsM_"
};
styleInject(css_248z$2);
class Template extends _ {
constructor(props) {
super(props);
this.handleClick = () => {
console.info(this.props.name);
};
this.state = {
templateName: this.props.name
};
} // Adding the this argument restricts binding
static handleClick(event) {
event.preventDefault();
if (event.target instanceof HTMLElement) {
console.info(event.target.localName);
}
}
render() {
return m$1`
<div
onclick=${this.props.onClick}
class="${this.props.layout === TemplateListingRenderModes.LIST ? style.template_list_view : style.template_grid_view} ${'integry-container_Template'}"
>
<div>
<img src=${this.props.imgUrl} />
<p class=${style.name}>${this.state.templateName}</p>
<p class=${style.description}>${this.props.description}</p>
</div>
${this.props.tags.length > 0 && m$1`
<div class=${style.tags}>
${this.props.tags.split(',').map(el => m$1` <div class=${style.tag}>${el}</div> `)}
</div>
`}
</div>
`;
}
}
class Modal extends _ {
render() {
return m$1`
<div
class="${this.props.isOpen ? 'fixed' : 'hidden'} z-10 inset-0 overflow-y-auto"
aria-labelledby="modal-title"
role="dialog"
aria-modal="true"
>
<div
class="flex items-end justify-center min-h-screen pt-3 px-4 pb-20 text-center sm:block sm:p-0"
>
<div
class="fixed inset-0 bg-gray-900 bg-opacity-75 transition-opacity"
aria-hidden="true"
></div>
<span
class="hidden sm:inline-block sm:align-middle sm:h-screen"
aria-hidden="true"
></span>
<div
class="${this.props.isOpen ? 'inline-block' : 'hidden'} align-bottom bg-white rounded-md text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full"
>
<div class="bg-white px-4 pt-4 pb-4 sm:p-6 sm:pb-4">
<div
onclick=${this.props.onClose}
class="absolute cursor-pointer right-2 top-2"
>
<svg
width="20"
height="22"
viewBox="0 0 20 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.2426 16.1822L5.75732 6.86328"
stroke="#999999"
stroke-width="2"
stroke-linecap="round"
/>
<path
d="M14.2426 6.86328L5.75732 16.1822"
stroke="#999999"
stroke-width="2"
stroke-linecap="round"
/>
</svg>
</div>
${this.props.isOpen && m$1` ${this.props.children} `}
</div>
</div>
</div>
</div>
`;
}
}
var css_248z$1 = "* {\n\n --tw-shadow: 0 0 #0000;\n\n --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgba(59, 130, 246, 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000\n}\n\n.container {\n\n width: 100%\n}\n\n@media (min-width: 640px) {\n\n .container {\n\n max-width: 640px\n }\n}\n\n@media (min-width: 768px) {\n\n .container {\n\n max-width: 768px\n }\n}\n\n@media (min-width: 1024px) {\n\n .container {\n\n max-width: 1024px\n }\n}\n\n@media (min-width: 1280px) {\n\n .container {\n\n max-width: 1280px\n }\n}\n\n@media (min-width: 1536px) {\n\n .container {\n\n max-width: 1536px\n }\n}\n\n.static {\n\n position: static\n}\n\n.fixed {\n\n position: fixed\n}\n\n.absolute {\n\n position: absolute\n}\n\n.inset-0 {\n\n top: 0px;\n\n right: 0px;\n\n bottom: 0px;\n\n left: 0px\n}\n\n.right-2 {\n\n right: 0.5rem\n}\n\n.top-2 {\n\n top: 0.5rem\n}\n\n.z-10 {\n\n z-index: 10\n}\n\n.mb-4 {\n\n margin-bottom: 1rem\n}\n\n.mr-2 {\n\n margin-right: 0.5rem\n}\n\n.mt-4 {\n\n margin-top: 1rem\n}\n\n.inline-block {\n\n display: inline-block\n}\n\n.flex {\n\n display: flex\n}\n\n.hidden {\n\n display: none\n}\n\n.h-full {\n\n height: 100%\n}\n\n.min-h-screen {\n\n min-height: 100vh\n}\n\n.w-full {\n\n width: 100%\n}\n\n.transform {\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n\n.cursor-pointer {\n\n cursor: pointer\n}\n\n.items-end {\n\n align-items: flex-end\n}\n\n.items-center {\n\n align-items: center\n}\n\n.justify-center {\n\n justify-content: center\n}\n\n.overflow-y-auto {\n\n overflow-y: auto\n}\n\n.overflow-hidden {\n\n overflow: hidden\n}\n\n.rounded-md {\n\n border-radius: 0.375rem\n}\n\n.rounded-full {\n\n border-radius: 9999px\n}\n\n.bg-gray-900 {\n\n --tw-bg-opacity: 1;\n\n background-color: rgba(17, 24, 39, var(--tw-bg-opacity))\n}\n\n.bg-white {\n\n --tw-bg-opacity: 1;\n\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity))\n}\n\n.bg-opacity-75 {\n\n --tw-bg-opacity: 0.75\n}\n\n.px-4 {\n\n padding-left: 1rem;\n\n padding-right: 1rem\n}\n\n.pt-3 {\n\n padding-top: 0.75rem\n}\n\n.pb-20 {\n\n padding-bottom: 5rem\n}\n\n.pt-4 {\n\n padding-top: 1rem\n}\n\n.pb-4 {\n\n padding-bottom: 1rem\n}\n\n.text-center {\n\n text-align: center\n}\n\n.text-left {\n\n text-align: left\n}\n\n.align-bottom {\n\n vertical-align: bottom\n}\n\n.text-sm {\n\n font-size: 0.875rem;\n\n line-height: 1.25rem\n}\n\n.font-bold {\n\n font-weight: 700\n}\n\n.font-light {\n\n font-weight: 300\n}\n\n.leading-relaxed {\n\n line-height: 1.625\n}\n\n.opacity-25 {\n\n opacity: 0.25\n}\n\n.opacity-50 {\n\n opacity: 0.5\n}\n\n.shadow-xl {\n\n --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.filter {\n\n --tw-blur: var(--tw-empty,/*!*/ /*!*/);\n\n --tw-brightness: var(--tw-empty,/*!*/ /*!*/);\n\n --tw-contrast: var(--tw-empty,/*!*/ /*!*/);\n\n --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);\n\n --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);\n\n --tw-invert: var(--tw-empty,/*!*/ /*!*/);\n\n --tw-saturate: var(--tw-empty,/*!*/ /*!*/);\n\n --tw-sepia: var(--tw-empty,/*!*/ /*!*/);\n\n --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);\n\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)\n}\n\n.transition-opacity {\n\n transition-property: opacity;\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-duration: 150ms\n}\n\n.transition-all {\n\n transition-property: all;\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-duration: 150ms\n}\n\n@media (min-width: 640px) {\n\n .sm\\:my-8 {\n\n margin-top: 2rem;\n\n margin-bottom: 2rem\n }\n\n .sm\\:block {\n\n display: block\n }\n\n .sm\\:inline-block {\n\n display: inline-block\n }\n\n .sm\\:h-screen {\n\n height: 100vh\n }\n\n .sm\\:w-full {\n\n width: 100%\n }\n\n .sm\\:max-w-3xl {\n\n max-width: 48rem\n }\n\n .sm\\:p-0 {\n\n padding: 0px\n }\n\n .sm\\:p-6 {\n\n padding: 1.5rem\n }\n\n .sm\\:pb-4 {\n\n padding-bottom: 1rem\n }\n\n .sm\\:align-middle {\n\n vertical-align: middle\n }\n}\n";
styleInject(css_248z$1);
var css_248z = ".styles-module_integry-container___f8vZ {\n\n margin: 0.5rem;\n\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n\n line-height: 1.5\n}\n\n.styles-module_modal__jkt61 {\n\n position: fixed;\n\n top: 0px;\n\n right: 0px;\n\n bottom: 0px;\n\n left: 0px;\n\n z-index: 10;\n\n overflow-y: auto\n}\n";
var styles = {
"integry-container": "styles-module_integry-container___f8vZ",
"modal": "styles-module_modal__jkt61"
};
styleInject(css_248z);
class Container extends _ {
constructor() {
super();
this.onTemplateClick = templateId => {
this.setState({
isModalOpen: true,
templateId
});
};
this.state = {
isModalOpen: false,
templateId: null
};
}
componentWillMount() {
var _this$props$customTem, _this$props$customTem2;
this.templateComponent = ((_this$props$customTem = this.props.customTemplates) === null || _this$props$customTem === void 0 ? void 0 : _this$props$customTem.template) || Template;
if ((_this$props$customTem2 = this.props.customTemplates) !== null && _this$props$customTem2 !== void 0 && _this$props$customTem2.templateList) {
this.templateListComponent = this.props.customTemplates.templateList;
} else this.templateListComponent = TemplatesView;
}
render() {
return m$1`
<>
<div class="${styles['integry-container']} ${'integry-container'}">
<${this.templateListComponent}
layout=${this.props.layout}
bundleId=${this.props.bundleId}
templateContainerTemplate=${this.templateComponent}
apiHandler=${this.props.apiHandler}
eventEmitter=${this.props.eventEmitter}
onTemplateClick=${this.onTemplateClick}
>
</div>
<${Modal}
isOpen=${this.state.isModalOpen}
onClose=${() => this.setState({
isModalOpen: false,
templateId: null
})}
>
<${preact.Provider} store=${store}>
<${TemplateForm$1}
apiHandler=${this.props.apiHandler}
templateId=${this.state.templateId}
>
<//>
<//>
<//>
</>
`;
}
}
class EventRunnerAbstract {
// eslint-disable-next-line no-useless-constructor
constructor(emitter, handler) {
this.emitter = emitter;
this.handler = handler;
}
getHandler() {
return this.handler;
}
}
class EventRunnerDefault extends EventRunnerAbstract {
run(_eventName, ...args) {
this.handler.apply(null, args);
}
}
class EventRunnerNTimes extends EventRunnerDefault {
constructor(emitter, handler, total = 1) {
super(emitter, handler);
this.total = total;
this.i = 0;
if (this.total < 1) {
throw new Error(`{total} can not be less than 1`);
}
}
run(eventName, ...args) {
super.run(eventName, ...args); // eslint-disable-next-line no-plusplus
if (++this.i >= this.total) {
this.emitter.off(eventName, this.handler);
}
}
}
class EventEmitter {
constructor() {
this.events = Object.create(null);
}
on(eventName, handler) {
this.addEventListener(eventName, new EventRunnerDefault(this, handler));
}
once(eventName, handler) {
this.addEventListener(eventName, new EventRunnerNTimes(this, handler, 1));
}
off(eventName, handler) {
const events = this.events[eventName];
if (!(events !== null && events !== void 0 && events.length)) {
return;
}
this.events[eventName] = events.filter(h => h.getHandler() !== handler);
}
offAll() {
Object.keys(this.events).forEach(eventName => {
const events = this.events[eventName];
if (events) {
events.length = 0;
}
});
this.events = Object.create(null);
}
emit(eventName, ...args) {
const events = this.events[eventName];
if (events) {
events.forEach(handler => handler.run(eventName, ...args));
}
}
addEventListener(eventName, runner) {
const events = this.events[eventName];
if (Array.isArray(events)) {
events.push(runner);
} else {
this.events[eventName] = [runner];
}
}
}
/**
* Integry JS SDK
*/
class IntegryJS {
constructor(config) {
this.eventEmitter = new EventEmitter();
this.renderMode = null;
/**
*
* @param length Length of string to randomly generate
* @returns {string} Returns a random string
*/
this.getRandomTemplateId = length => {
const result = [];
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
const charactersLength = characters.length;
for (let i = 0; i < length; i += 1) {
result.push(characters.charAt(Math.floor(Math.random() * charactersLength)));
}
return `x-integry-modal-${result.join('')}`;
};
/**
* Prints version number of this SDK version
*/
this.printVersion = () => {
console.info(IntegryJS.SDK_VERSION, this.config.appKey, this.config.bundleId);
};
this.getTemplatesList = async () => this.apiHandler.getTemplateListing(this.config.bundleId);
/**
*
* @param renderMode
* @param templateContainerId
* @returns {HTMLElement | null}
*/
this.setupTemplateFormDestination = (renderMode, templateContainerId) => {
let el = null;
if (templateContainerId) {
if (renderMode === TemplateFormRenderModes.MODAL || renderMode === TemplateFormRenderModes.INLINE) {
throw new Error('The `templateContainerId` property is unsupported when render mode is set to "MODAL" or "INLINE"');
}
el = document.getElementById(templateContainerId);
if (!el) {
throw new Error('The template form render target was not found');
}
}
switch (renderMode) {
case TemplateFormRenderModes.MODAL:
el = document.createElement('div');
el.id = this.getRandomTemplateId(8);
document.body.appendChild(el);
return el;
case TemplateFormRenderModes.INLINE:
return null;
case TemplateFormRenderModes.DETACHED:
return el;
case TemplateFormRenderModes.CUSTOM:
return el;
default:
throw new Error(`Unsupported renderMode ${renderMode} configuration, please provide one of ${JSON.stringify(Object.keys(TemplateFormRenderModes))}`);
}
};
/**
*
* @param templateId
*/
this.loadTemplate = templateId => {
this.eventEmitter.emit('should-load-template', {
templateId
});
};
/**
*
* @param initConfig
*/
this.init = initConfig => {
const {
containerId,
templateContainerId,
renderMode,
customTemplates = {}
} = initConfig;
const target = document.getElementById(containerId);
if (!renderMode) {
throw new Error('Template form render mode needs to be defined');
}
this.setupTemplateFormDestination(renderMode, templateContainerId);
if (target) {
const layout = target.getAttribute('x-integry-layout') || TemplateListingRenderModes.LIST;
this.renderMode = renderMode;
S(v$1(Container, {
bundleId: this.config.bundleId,
customTemplates,
apiHandler: this.apiHandler,
eventEmitter: this.eventEmitter,
layout
}), target);
} else {
throw new Error('The render target was not found');
}
};
this.config = config;
this.apiHandler = new IntegryAPI({
baseUrl: 'https://app.integry.io',
baseUrlv2: 'https://app.integry.io/v2',
appKey: this.config.appKey,
hash: this.config.hash,
userId: this.config.userId,
oauthVerifyPath: 'auth/verify',
endpointsUrl: 'https://integry-app.appspot.com'
});
this.templateContainer = null;
setInterval(() => {
this.eventEmitter.emit('integryData', `I was emitted inside the SDK: ${Math.random()}`);
this.eventEmitter.emit('sampleData');
}, 10000);
}
}
IntegryJS.SDK_VERSION = '0.0.11'; // allow customers to use template tagging
// static html = html;
// static Component = Component;
IntegryJS.RenderModes = TemplateFormRenderModes; // export { Widgets, Helpers };
IntegryJS.Widgets = {
Template,
TemplatesView,
TemplateSearch
};
IntegryJS.Helpers = {
getAuthHash: HMAC
};
return IntegryJS;
})));
//# sourceMappingURL=index.umd.js.map
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment