UNPKG

@lanaco/lnc-react-ui

Version:

React component library

1,856 lines (1,833 loc) 45.8 kB
import { jsx as m, jsxs as de, Fragment as x } from "react/jsx-runtime"; import { useLayoutEffect as Kr, useEffect as je, useState as Ht, useMemo as Xr, createElement as z, isValidElement as qr, forwardRef as Jr, useImperativeHandle as Zr } from "react"; import { n as v } from "./emotion-styled.browser.esm-CjCaF13H.js"; import { P as o } from "./index-S5Cd7WrG.js"; import { y as jt, z as Qr, b as S, c as Ne, A as xt, u as en, B as U, r as P, i as B } from "./utils-DtRLzzTZ.js"; import { c as F, g as De } from "./_commonjsHelpers-DaMA6jEr.js"; import { u as M } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js"; import { i as tn } from "./index-BlxaTV-D.js"; import $t from "./CheckBoxInput.js"; import rn from "./Icon.js"; import nn from "./Spinner.js"; var on = jt ? Kr : je, Nt = { x: 0, y: 0, width: 0, height: 0, top: 0, left: 0, bottom: 0, right: 0 }; function an() { var t = Ht(null), h = t[0], l = t[1], i = Ht(Nt), g = i[0], b = i[1], T = Xr(function() { return new window.ResizeObserver(function(E) { if (E[0]) { var w = E[0].contentRect, A = w.x, C = w.y, R = w.width, y = w.height, O = w.top, W = w.left, Y = w.bottom, _ = w.right; b({ x: A, y: C, width: R, height: y, top: O, left: W, bottom: Y, right: _ }); } }); }, []); return on(function() { if (h) return T.observe(h), function() { T.disconnect(); }; }, [h]), [l, g]; } const ln = jt && typeof window.ResizeObserver < "u" ? an : function() { return [Qr, Nt]; }; var $e = { exports: {} }; $e.exports; (function(t, h) { var l = 200, i = "__lodash_hash_undefined__", g = 9007199254740991, b = "[object Arguments]", T = "[object Array]", E = "[object Boolean]", w = "[object Date]", A = "[object Error]", C = "[object Function]", R = "[object GeneratorFunction]", y = "[object Map]", O = "[object Number]", W = "[object Object]", Y = "[object Promise]", _ = "[object RegExp]", d = "[object Set]", H = "[object String]", re = "[object Symbol]", ue = "[object WeakMap]", X = "[object ArrayBuffer]", j = "[object DataView]", _e = "[object Float32Array]", pe = "[object Float64Array]", ye = "[object Int8Array]", fe = "[object Int16Array]", Te = "[object Int32Array]", Ee = "[object Uint8Array]", we = "[object Uint8ClampedArray]", ke = "[object Uint16Array]", Ce = "[object Uint32Array]", ne = /[\\^$.*+?()[\]{}|]/g, Se = /\w*$/, L = /^\[object .+?Constructor\]$/, ze = /^(?:0|[1-9]\d*)$/, u = {}; u[b] = u[T] = u[X] = u[j] = u[E] = u[w] = u[_e] = u[pe] = u[ye] = u[fe] = u[Te] = u[y] = u[O] = u[W] = u[_] = u[d] = u[H] = u[re] = u[Ee] = u[we] = u[ke] = u[Ce] = !0, u[A] = u[C] = u[ue] = !1; var We = typeof F == "object" && F && F.Object === Object && F, q = typeof self == "object" && self && self.Object === Object && self, $ = We || q || Function("return this")(), Ae = h && !h.nodeType && h, Oe = Ae && !0 && t && !t.nodeType && t, J = Oe && Oe.exports === Ae; function Ye(e, r) { return e.set(r[0], r[1]), e; } function Ge(e, r) { return e.add(r), e; } function Fe(e, r) { for (var n = -1, a = e ? e.length : 0; ++n < a && r(e[n], n, e) !== !1; ) ; return e; } function Me(e, r) { for (var n = -1, a = r.length, I = e.length; ++n < a; ) e[I + n] = r[n]; return e; } function Le(e, r, n, a) { for (var I = -1, D = e ? e.length : 0; ++I < D; ) n = r(n, e[I], I, e); return n; } function Ue(e, r) { for (var n = -1, a = Array(e); ++n < e; ) a[n] = r(n); return a; } function Ve(e, r) { return e == null ? void 0 : e[r]; } function Re(e) { var r = !1; if (e != null && typeof e.toString != "function") try { r = !!(e + ""); } catch { } return r; } function ve(e) { var r = -1, n = Array(e.size); return e.forEach(function(a, I) { n[++r] = [I, a]; }), n; } function he(e, r) { return function(n) { return e(r(n)); }; } function Ie(e) { var r = -1, n = Array(e.size); return e.forEach(function(a) { n[++r] = a; }), n; } var Ke = Array.prototype, Xe = Function.prototype, oe = Object.prototype, be = $["__core-js_shared__"], qe = function() { var e = /[^.]+$/.exec(be && be.keys && be.keys.IE_PROTO || ""); return e ? "Symbol(src)_1." + e : ""; }(), s = Xe.toString, c = oe.hasOwnProperty, f = oe.toString, p = RegExp( "^" + s.call(c).replace(ne, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$" ), N = J ? $.Buffer : void 0, G = $.Symbol, ae = $.Uint8Array, Je = he(Object.getPrototypeOf, Object), Wt = Object.create, Yt = oe.propertyIsEnumerable, Gt = Ke.splice, _t = Object.getOwnPropertySymbols, Ft = N ? N.isBuffer : void 0, Mt = he(Object.keys, Object), Ze = se($, "DataView"), ge = se($, "Map"), Qe = se($, "Promise"), et = se($, "Set"), tt = se($, "WeakMap"), me = se(Object, "create"), Ut = ee(Ze), Vt = ee(ge), Kt = ee(Qe), Xt = ee(et), qt = ee(tt), pt = G ? G.prototype : void 0, yt = pt ? pt.valueOf : void 0; function Z(e) { var r = -1, n = e ? e.length : 0; for (this.clear(); ++r < n; ) { var a = e[r]; this.set(a[0], a[1]); } } function Jt() { this.__data__ = me ? me(null) : {}; } function Zt(e) { return this.has(e) && delete this.__data__[e]; } function Qt(e) { var r = this.__data__; if (me) { var n = r[e]; return n === i ? void 0 : n; } return c.call(r, e) ? r[e] : void 0; } function er(e) { var r = this.__data__; return me ? r[e] !== void 0 : c.call(r, e); } function tr(e, r) { var n = this.__data__; return n[e] = me && r === void 0 ? i : r, this; } Z.prototype.clear = Jt, Z.prototype.delete = Zt, Z.prototype.get = Qt, Z.prototype.has = er, Z.prototype.set = tr; function V(e) { var r = -1, n = e ? e.length : 0; for (this.clear(); ++r < n; ) { var a = e[r]; this.set(a[0], a[1]); } } function rr() { this.__data__ = []; } function nr(e) { var r = this.__data__, n = He(r, e); if (n < 0) return !1; var a = r.length - 1; return n == a ? r.pop() : Gt.call(r, n, 1), !0; } function or(e) { var r = this.__data__, n = He(r, e); return n < 0 ? void 0 : r[n][1]; } function ar(e) { return He(this.__data__, e) > -1; } function lr(e, r) { var n = this.__data__, a = He(n, e); return a < 0 ? n.push([e, r]) : n[a][1] = r, this; } V.prototype.clear = rr, V.prototype.delete = nr, V.prototype.get = or, V.prototype.has = ar, V.prototype.set = lr; function le(e) { var r = -1, n = e ? e.length : 0; for (this.clear(); ++r < n; ) { var a = e[r]; this.set(a[0], a[1]); } } function ir() { this.__data__ = { hash: new Z(), map: new (ge || V)(), string: new Z() }; } function sr(e) { return xe(this, e).delete(e); } function cr(e) { return xe(this, e).get(e); } function dr(e) { return xe(this, e).has(e); } function ur(e, r) { return xe(this, e).set(e, r), this; } le.prototype.clear = ir, le.prototype.delete = sr, le.prototype.get = cr, le.prototype.has = dr, le.prototype.set = ur; function ie(e) { this.__data__ = new V(e); } function fr() { this.__data__ = new V(); } function hr(e) { return this.__data__.delete(e); } function br(e) { return this.__data__.get(e); } function gr(e) { return this.__data__.has(e); } function mr(e, r) { var n = this.__data__; if (n instanceof V) { var a = n.__data__; if (!ge || a.length < l - 1) return a.push([e, r]), this; n = this.__data__ = new le(a); } return n.set(e, r), this; } ie.prototype.clear = fr, ie.prototype.delete = hr, ie.prototype.get = br, ie.prototype.has = gr, ie.prototype.set = mr; function _r(e, r) { var n = ot(e) || Wr(e) ? Ue(e.length, String) : [], a = n.length, I = !!a; for (var D in e) c.call(e, D) && !(I && (D == "length" || Nr(D, a))) && n.push(D); return n; } function Tt(e, r, n) { var a = e[r]; (!(c.call(e, r) && St(a, n)) || n === void 0 && !(r in e)) && (e[r] = n); } function He(e, r) { for (var n = e.length; n--; ) if (St(e[n][0], r)) return n; return -1; } function pr(e, r) { return e && Et(r, at(r), e); } function rt(e, r, n, a, I, D, K) { var k; if (a && (k = D ? a(e, I, D, K) : a(e)), k !== void 0) return k; if (!Pe(e)) return e; var Lt = ot(e); if (Lt) { if (k = Br(e), !r) return Hr(e, k); } else { var ce = Q(e), Rt = ce == C || ce == R; if (Gr(e)) return Sr(e, r); if (ce == W || ce == b || Rt && !D) { if (Re(e)) return D ? e : {}; if (k = jr(Rt ? {} : e), !r) return xr(e, pr(k, e)); } else { if (!u[ce]) return D ? e : {}; k = $r(e, ce, rt, r); } } K || (K = new ie()); var vt = K.get(e); if (vt) return vt; if (K.set(e, k), !Lt) var It = n ? Pr(e) : at(e); return Fe(It || e, function(lt, Be) { It && (Be = lt, lt = e[Be]), Tt(k, Be, rt(lt, r, n, a, Be, e, K)); }), k; } function yr(e) { return Pe(e) ? Wt(e) : {}; } function Tr(e, r, n) { var a = r(e); return ot(e) ? a : Me(a, n(e)); } function Er(e) { return f.call(e); } function wr(e) { if (!Pe(e) || kr(e)) return !1; var r = Ot(e) || Re(e) ? p : L; return r.test(ee(e)); } function Cr(e) { if (!Ct(e)) return Mt(e); var r = []; for (var n in Object(e)) c.call(e, n) && n != "constructor" && r.push(n); return r; } function Sr(e, r) { if (r) return e.slice(); var n = new e.constructor(e.length); return e.copy(n), n; } function nt(e) { var r = new e.constructor(e.byteLength); return new ae(r).set(new ae(e)), r; } function Ar(e, r) { var n = r ? nt(e.buffer) : e.buffer; return new e.constructor(n, e.byteOffset, e.byteLength); } function Or(e, r, n) { var a = r ? n(ve(e), !0) : ve(e); return Le(a, Ye, new e.constructor()); } function Lr(e) { var r = new e.constructor(e.source, Se.exec(e)); return r.lastIndex = e.lastIndex, r; } function Rr(e, r, n) { var a = r ? n(Ie(e), !0) : Ie(e); return Le(a, Ge, new e.constructor()); } function vr(e) { return yt ? Object(yt.call(e)) : {}; } function Ir(e, r) { var n = r ? nt(e.buffer) : e.buffer; return new e.constructor(n, e.byteOffset, e.length); } function Hr(e, r) { var n = -1, a = e.length; for (r || (r = Array(a)); ++n < a; ) r[n] = e[n]; return r; } function Et(e, r, n, a) { n || (n = {}); for (var I = -1, D = r.length; ++I < D; ) { var K = r[I], k = void 0; Tt(n, K, k === void 0 ? e[K] : k); } return n; } function xr(e, r) { return Et(e, wt(e), r); } function Pr(e) { return Tr(e, at, wt); } function xe(e, r) { var n = e.__data__; return Dr(r) ? n[typeof r == "string" ? "string" : "hash"] : n.map; } function se(e, r) { var n = Ve(e, r); return wr(n) ? n : void 0; } var wt = _t ? he(_t, Object) : Ur, Q = Er; (Ze && Q(new Ze(new ArrayBuffer(1))) != j || ge && Q(new ge()) != y || Qe && Q(Qe.resolve()) != Y || et && Q(new et()) != d || tt && Q(new tt()) != ue) && (Q = function(e) { var r = f.call(e), n = r == W ? e.constructor : void 0, a = n ? ee(n) : void 0; if (a) switch (a) { case Ut: return j; case Vt: return y; case Kt: return Y; case Xt: return d; case qt: return ue; } return r; }); function Br(e) { var r = e.length, n = e.constructor(r); return r && typeof e[0] == "string" && c.call(e, "index") && (n.index = e.index, n.input = e.input), n; } function jr(e) { return typeof e.constructor == "function" && !Ct(e) ? yr(Je(e)) : {}; } function $r(e, r, n, a) { var I = e.constructor; switch (r) { case X: return nt(e); case E: case w: return new I(+e); case j: return Ar(e, a); case _e: case pe: case ye: case fe: case Te: case Ee: case we: case ke: case Ce: return Ir(e, a); case y: return Or(e, a, n); case O: case H: return new I(e); case _: return Lr(e); case d: return Rr(e, a, n); case re: return vr(e); } } function Nr(e, r) { return r = r ?? g, !!r && (typeof e == "number" || ze.test(e)) && e > -1 && e % 1 == 0 && e < r; } function Dr(e) { var r = typeof e; return r == "string" || r == "number" || r == "symbol" || r == "boolean" ? e !== "__proto__" : e === null; } function kr(e) { return !!qe && qe in e; } function Ct(e) { var r = e && e.constructor, n = typeof r == "function" && r.prototype || oe; return e === n; } function ee(e) { if (e != null) { try { return s.call(e); } catch { } try { return e + ""; } catch { } } return ""; } function zr(e) { return rt(e, !1, !0); } function St(e, r) { return e === r || e !== e && r !== r; } function Wr(e) { return Yr(e) && c.call(e, "callee") && (!Yt.call(e, "callee") || f.call(e) == b); } var ot = Array.isArray; function At(e) { return e != null && Fr(e.length) && !Ot(e); } function Yr(e) { return Mr(e) && At(e); } var Gr = Ft || Vr; function Ot(e) { var r = Pe(e) ? f.call(e) : ""; return r == C || r == R; } function Fr(e) { return typeof e == "number" && e > -1 && e % 1 == 0 && e <= g; } function Pe(e) { var r = typeof e; return !!e && (r == "object" || r == "function"); } function Mr(e) { return !!e && typeof e == "object"; } function at(e) { return At(e) ? _r(e) : Cr(e); } function Ur() { return []; } function Vr() { return !1; } t.exports = zr; })($e, $e.exports); var sn = $e.exports; const Pt = /* @__PURE__ */ De(sn); var cn = typeof F == "object" && F && F.Object === Object && F, dn = typeof self == "object" && self && self.Object === Object && self, un = cn || dn || Function("return this")(), fn = un.isFinite; function hn(t) { return typeof t == "number" && fn(t); } var bn = hn; const gn = /* @__PURE__ */ De(bn); function mn(t) { var h = typeof t; return !!t && (h == "object" || h == "function"); } var _n = mn; const pn = /* @__PURE__ */ De(_n), yn = v.tbody``, it = (t) => { const { __TYPE__: h = "TABLE_BODY", className: l = "", size: i = "small", color: g = "primary" } = t, b = M(); return /* @__PURE__ */ m(yn, { "data-tbody": !0, ...{ className: l, size: i, color: g, theme: b }, children: t.children }); }; it.propTypes = { __TYPE__: o.string, //---------------------------------------- className: o.string, size: o.oneOf(["small", "medium", "large"]), color: o.oneOf([ "primary", "secondary", "success", "danger", "warning", "information", "neutral", "gray" ]) }; it.displayName = "TABLE_BODY"; const Tn = v.thead` border-radius: 0.5rem 0.5rem 0 0; `, st = (t) => { const { __TYPE__: h = "TABLE_HEAD", className: l = "", size: i = "small", color: g = "primary" } = t, b = M(); return /* @__PURE__ */ m(Tn, { ...{ className: l, size: i, color: g, theme: b }, children: t.children }); }; st.propTypes = { __TYPE__: o.string, //---------------------------------------- className: o.string, size: o.oneOf(["small", "medium", "large"]), color: o.oneOf([ "primary", "secondary", "success", "warning", "danger", "information", "neutral", "gray" ]) }; st.displayName = "TABLE_HEAD"; const En = v.tr` ${(t) => t.noBorder == !1 && `border-bottom: 1px solid ${S( t.theme, "TableRow", null, "enabled", "border" )};`} ${(t) => t.noBorder == !1 && `border-left: 1px solid ${S( t.theme, "TableRow", null, "enabled", "border" )};`} ${(t) => t.noBorder == !1 && `border-right: 1px solid ${S( t.theme, "TableRow", null, "enabled", "border" )};`} &:last-of-type > td:first-of-type { border-radius: 0 0 0 0.5rem; } &:last-of-type > td:last-of-type { border-radius: 0 0 0.5rem 0; } ${(t) => t.IsSelected !== !0 ? ` &:hover { & > td { background-color: ${S( t.theme, "TableRow", null, "hover", "background" )}; } }` : ""} ${(t) => t.IsSelected === !0 ? ` & > td { background-color: ${S( t.theme, "TableRow", t.color, "active", "background" )}; } ` : ""} `, ct = (t) => { const { __TYPE__: h = "TABLE_ROW", onRowClick: l = () => { }, RowData: i = {}, Index: g, IsSelected: b = null, noBorder: T = !1, //---------------- className: E = "", size: w = "small", color: A = "primary" } = t, C = M(); return /* @__PURE__ */ z( En, { ...{ className: E, size: w, color: A, theme: C }, IsSelected: b, key: g, onClick: (O) => { O.stopPropagation(), O.nativeEvent.stopImmediatePropagation(), l && l(O, i); }, noBorder: T }, t.children ); }; ct.propTypes = { __TYPE__: o.string, //---------------------------------------- onRowClick: o.func, RowData: o.object, //---------------------------------------- IsSelected: o.bool, noBorder: o.bool, //---------------------------------------- className: o.string, size: o.oneOf(["small", "medium", "large"]), color: o.oneOf([ "primary", "secondary", "success", "warning", "danger", "information", "neutral", "gray" ]) }; ct.displayName = "TABLE_ROW"; var wn = "[object AsyncFunction]", Cn = "[object Function]", Sn = "[object GeneratorFunction]", An = "[object Null]", On = "[object Proxy]", Ln = "[object Undefined]", Rn = typeof F == "object" && F && F.Object === Object && F, vn = typeof self == "object" && self && self.Object === Object && self, In = Rn || vn || Function("return this")(), Dt = Object.prototype, Hn = Dt.hasOwnProperty, kt = Dt.toString, Bt = In.Symbol, te = Bt ? Bt.toStringTag : void 0; function xn(t) { return t == null ? t === void 0 ? Ln : An : te && te in Object(t) ? Pn(t) : Bn(t); } function Pn(t) { var h = Hn.call(t, te), l = t[te]; try { t[te] = void 0; var i = !0; } catch { } var g = kt.call(t); return i && (h ? t[te] = l : delete t[te]), g; } function Bn(t) { return kt.call(t); } function jn(t) { if (!$n(t)) return !1; var h = xn(t); return h == Cn || h == Sn || h == wn || h == On; } function $n(t) { var h = typeof t; return t != null && (h == "object" || h == "function"); } var Nn = jn; const Dn = /* @__PURE__ */ De(Nn), kn = v.td` white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: ${(t) => t.width}; padding: 0.875rem 1.5rem; background-color: ${(t) => S(t.theme, "TableRow", null, "enabled", "background")}; ${(t) => t.bgColor} ${(t) => Ne(t.theme, "TableCell", t.size, "enabled")}; `, dt = (t) => { const { __TYPE__: h = "TABLE_CELL", Column: l = {}, RowData: i = {}, Index: g = 0, EnableSelection: b = !1, EnableRowHighlight: T = !1, GetRowHighlightColor: E = () => "", //---------------- className: w = "", size: A = "small", color: C = "primary" } = t, R = M(), y = { className: w, size: A, color: C, theme: R }, O = (d) => { const H = new Option().style; return H.color = d, H.color !== ""; }, W = () => l && l.width ? l.width + "%" : "auto", Y = () => { var d = E(i); return T === !0 && O(d) ? ` background-color: ${d}; ` : ""; }, _ = () => { if (l.render && Dn(l.render)) { var d = l.render(i); if (qr(d)) return d; console.error( `${l.id}/${l.accessor}: invalid render function.` ); } return tn(l.accessor) && console.error( `${l.index}: accessor property is required when the render function is not suplied` ), i[l.accessor]; }; return /* @__PURE__ */ z( kn, { ...y, bgColor: Y(), selection: b, width: W(), key: g, title: i[l.accessor] }, _() ); }; dt.propTypes = { __TYPE__: o.string, //---------------------------------------- Column: o.object, RowData: o.object, Index: o.number, EnableSelection: o.bool, EnableRowHighlight: o.bool, GetRowHighlightColor: o.func, //---------------------------------------- className: o.string, size: o.oneOf(["small", "medium", "large"]), color: o.oneOf([ "primary", "secondary", "success", "warning", "danger", "information", "neutral", "gray" ]) }; dt.displayName = "TABLE_CELL"; const zn = v.td` padding: 0 0 0 1.25rem; background-color: ${(t) => S(t.theme, "TableRow", null, "enabled", "background")}; width: ${(t) => t.width}%; ${(t) => t.bgColor} `, ut = (t) => { const { __TYPE__: h = "TABLE_SELECTION_CELL", RowData: l = {}, onSelectRow: i = () => { }, IsSelected: g = null, Index: b = 0, EnableRowHighlight: T = !1, GetRowHighlightColor: E = () => "", //---------------- className: w = "", size: A = "small", color: C = "primary" } = t, R = M(), y = { className: w, size: A, color: C, theme: R }, O = (_, d) => { i(_, l, g); }, W = (_) => { const d = new Option().style; return d.color = _, d.color !== ""; }; return /* @__PURE__ */ z( zn, { bgColor: (() => { var _ = E(l); return T === !0 && W(_) ? ` background-color: ${_}; ` : ""; })(), ...y, key: b, width: t.width }, /* @__PURE__ */ m($t, { id: b, checked: g, onChange: O }) ); }; ut.propTypes = { __TYPE__: o.string, //---------------------------------------- Column: o.object, RowData: o.object, onSelectRow: o.func, Index: o.number, SelectedData: o.array, IsSelected: o.bool, EnableRowHighlight: o.bool, GetRowHighlightColor: o.func, //---------------------------------------- className: o.string, size: o.oneOf(["small", "medium", "large"]), color: o.oneOf([ "primary", "secondary", "success", "danger", "warning", "information", "neutral", "gray" ]) }; ut.displayName = "TABLE_SELECTION_CELL"; const Wn = v.tr` border-radius: 0.5rem 0.5rem 0 0; `, ft = (t) => { const { __TYPE__: h = "TABLE_HEAD_ROW", Index: l = 0, //------------- className: i = "", size: g = "small", color: b = "primary" } = t, T = M(); return /* @__PURE__ */ z(Wn, { ...{ className: i, size: g, color: b, theme: T }, key: l }, t.children); }; ft.propTypes = { __TYPE__: o.string, //---------------------------------------- Index: o.any, //---------------------------------------- className: o.string, size: o.oneOf(["small", "medium", "large"]), color: o.oneOf([ "primary", "secondary", "success", "danger", "warning", "information", "neutral", "gray" ]) }; ft.displayName = "TABLE_HEAD_ROW"; const Yn = v.th` white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; transition: all 250ms ease; padding: 0.875rem 1.5rem; cursor: ${(t) => t.ordering ? "pointer" : "default"}; width: ${(t) => t.width}; &:hover { ${(t) => t.ordering ? `background-color: ${S( t.theme, "TableHeadCell", null, "hover", "background" )};` : ""} } ${(t) => Ne( t.theme, "TableHeadCell", t.size, "enabled" )}; color: ${(t) => S(t.theme, "TableHeadCell", null, "enabled", "text")}}; background-color: ${(t) => S( t.theme, "TableHeadCell", null, "enabled", "background" )}}; border-top: ${(t) => "1px solid " + S( t.theme, "TableHeadCell", null, "enabled", "border" )}}; border-bottom: ${(t) => "1px solid " + S( t.theme, "TableHeadCell", null, "enabled", "border" )}}; &:first-of-type { border-radius: 0.5rem 0 0 0; border-left: ${(t) => "1px solid " + S( t.theme, "TableHeadCell", null, "enabled", "border" )}}; } &:last-of-type { border-radius: 0 0.5rem 0 0; border-right: ${(t) => "1px solid " + S( t.theme, "TableHeadCell", null, "enabled", "border" )}}; } `, Gn = v.div` display: flex; flex-direction: row; align-items: center; `, Fn = v.span` padding-right: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: ${(t) => S( t.theme, "TableHeadCell", t.color, "enabled", "text" )}; font-weight: ${(t) => S( t.theme, "TableHeadCell", t.color, "enabled", "fontWeight" )}; `, Mn = v.span` & i { color: ${(t) => t.sort ? "transparent" : S( t.theme, "TableHeadCell", t.color, "enabled", "text" )}; font-weight: ${(t) => S( t.theme, "TableHeadCell", t.color, "enabled", "fontWeight" )}; } `, ht = (t) => { const { __TYPE__: h = "TABLE_HEAD_CELL", Column: l = {}, Ordering: i = {}, Index: g = 0, onColumnClick: b = () => { }, EnableSelectAll: T = !1, EnableOrdering: E = !1, //----------- className: w = "", size: A = "small", color: C = "primary" } = t, R = M(), y = { className: w, size: A, color: C, theme: R }, O = () => { if (l.sortable === !0 && E === !0) { let _; return i && i.columnId === l.id ? (i.ascending === !0 && (_ = "angle-up"), i.descending === !0 && (_ = "angle-down"), i.ascending && i.descending && (_ = "sort")) : _ = "sort", /* @__PURE__ */ m(Mn, { ...y, sort: _ === "sort", children: /* @__PURE__ */ m(rn, { ...y, sizeInUnits: "14px", icon: _ }) }); } return /* @__PURE__ */ m(x, {}); }, W = (_) => { var d = { columnId: l.id, ascending: !1, descending: !0 }; E === !0 && l.sortable === !0 && i && i.columnId === l.id && (i.ascending === !0 && (d.ascending = !1, d.descending = !1), i.descending === !0 && (d.ascending = !0, d.descending = !1), i.descending === !1 && i.ascending === !1 && (d.ascending = !1, d.descending = !0), b(_, l, d)), E === !0 && l.sortable === !0 && i && i.columnId !== l.id && b(_, l, d), (l.sortable !== !0 || E !== !0) && b(_, l); }, Y = () => l && l.width ? l.width + "%" : "auto"; return /* @__PURE__ */ z( Yn, { onClick: W, ...y, selection: T, ordering: E === !0 && l.sortable === !0, key: g, width: Y(), title: l.displayName }, /* @__PURE__ */ de(Gn, { ...y, children: [ /* @__PURE__ */ m(Fn, { ...y, children: l.displayName }), O() ] }) ); }; ht.propTypes = { __TYPE__: o.string, //---------------------------------------- Columns: o.object, Ordering: o.object, Index: o.any, EnableSelectAll: o.bool, EnableOrdering: o.bool, onColumnClick: o.func, //---------------------------------------- className: o.string, size: o.oneOf(["small", "medium", "large"]), color: o.oneOf([ "primary", "secondary", "success", "danger", "warning", "information", "neutral", "gray" ]) }; ht.displayName = "TABLE_HEAD_CELL"; const Un = v.th` text-align: left; width: ${(t) => t.width}; padding-left: 1.25rem; background-color: ${(t) => S( t.theme, "TableHeadCell", null, "enabled", "background" )}}; border-top: ${(t) => "1px solid " + S( t.theme, "TableHeadCell", null, "enabled", "border" )}}; border-bottom: ${(t) => "1px solid " + S( t.theme, "TableHeadCell", null, "enabled", "border" )}}; border-radius: 0.5rem 0 0 0; `, bt = (t) => { const { __TYPE__: h = "TABLE_HEAD_SELECTION_CELL", EnableSelectAll: l, IsSelected: i = null, Index: g = 0, onSelectAll: b, //---------------- className: T = "", size: E = "small", color: w = "primary" } = t, A = M(); return /* @__PURE__ */ z( Un, { ...{ className: T, size: E, color: w, theme: A }, selection: l, key: g, width: t.width }, l && /* @__PURE__ */ m( $t, { id: g, checked: i || !1, onChange: (R) => b(R, i) } ) ); }; bt.propTypes = { __TYPE__: o.string, //---------------------------------------- Index: o.number, IsSelected: o.bool, EnableSelectAll: o.bool, //---------------------------------------- className: o.string, size: o.oneOf(["small", "medium", "large"]), color: o.oneOf([ "primary", "secondary", "success", "danger", "warning", "information", "neutral", "gray" ]) }; bt.displayName = "TABLE_HEAD_SELECTION_CELL"; const Vn = v.td` white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0.25rem 0.125rem; `, Kn = v.div` width: ${(t) => t.width}; height: 100%; border-radius: 100px; background-color: ${(t) => t.bgColor} !important; `, gt = (t) => { const { __TYPE__: h = "TABLE_ROW_STATUS_INDICATOR_CELL", RowData: l = {}, Index: i, GetRowStatusIndicatorColor: g, //---------------- className: b = "", size: T = "small", color: E = "Primary" } = t, w = M(), A = { className: b, size: T, color: E, theme: w }, C = () => "4px", R = (y) => { const O = new Option().style; return O.color = y, O.color !== ""; }; return /* @__PURE__ */ z( Vn, { ...A, width: C(), key: i, bgColor: () => { var y = g(l); return R(y) ? y : xt.NONE; } }, /* @__PURE__ */ m( Kn, { ...A, width: C(), bgColor: () => { var y = g(l); return R(y) ? y : xt.NONE; } } ) ); }; gt.propTypes = { __TYPE__: o.string, //---------------------------------------- Column: o.object, RowData: o.object, //---------------------------------------- className: o.string, size: o.oneOf(["small", "medium", "large"]), color: o.oneOf([ "primary", "secondary", "success", "danger", "warning", "information", "neutral", "gray" ]) }; gt.displayName = "TABLE_ROW_STATUS_INDICATOR_CELL"; const Xn = v.th` padding: 0.125rem; width: 8px; background-color: ${(t) => S( t.theme, "TableHeadCell", null, "enabled", "background" )}}; border-bottom: ${(t) => "1px solid " + S( t.theme, "TableHeadCell", null, "enabled", "border" )}}; border-radius: 0.5rem 0 0 0; `, mt = (t) => { const { __TYPE__: h = "TABLE_HEAD_ROW_STATUS_INDICATOR_CELL", Index: l, //----------- className: i = "", size: g = "small", color: b = "primary" } = t, T = M(); return /* @__PURE__ */ z(Xn, { ...{ className: i, size: g, color: b, theme: T }, key: l }); }; mt.propTypes = { __TYPE__: o.string, //---------------------------------------- className: o.string, size: o.oneOf(["small", "medium", "large"]), color: o.oneOf([ "primary", "secondary", "success", "warning", "danger", "information", "neutral", "gray" ]) }; mt.displayName = "TABLE_HEAD_ROW_STATUS_INDICATOR_CELL"; const qn = v.div` display: flex; flex-direction: column; padding: 0.625rem; margin: 0.125rem; border-radius: 0.125rem; overflow-x: ${(t) => t.isLoading ? "hidden" : "auto"}; white-space: nowrap; position: relative; ${(t) => Ne(t.theme, "Table", t.size, "enabled")}; `, Jn = v.div` position: absolute; top: 0px; right: 0px; width: 100%; height: 100%; overflow: auto; z-index: 1000; opacity: 0.7; background-color: ${(t) => S( t.theme, "Background", "primary", "enabled", "background" )}; filter: alpha(opacity=10); display: flex; align-items: center; justify-content: center; `, Zn = v.table` height: 1px; width: ${(t) => t.tableWidth}; white-space: nowrap; border-collapse: collapse; border-radius: 0.5rem; border-style: hidden; table-layout: fixed; ${(t) => t.noBorder == !1 && `box-shadow: 0 0 0 0.0625rem ${S( t.theme, "Table", null, "enabled", "border" )};`} `, Qn = v.span` display: flex; align-items: center; justify-content: center; ${(t) => Ne(t.theme, "Table", t.size, "enabled")}; padding: 0.5rem; `, fo = { TableContainer: "TABLE_CONTAINER", TableRow: "TABLE_ROW", TableCell: "TABLE_CELL", TableSelectionCell: "TABLE_SELLECTION_CELL", TableHeadRow: "TABLE_HEAD_ROW", TableHeadCell: "TABLE_HEAD_CELL", TableHeadSelectionCell: "TABLE_HEAD_SELECTION_CELL", TableHeader: "TABLE_HEADER", TableFooter: "TABLE_FOOTER", TableSpecialLastRow: "TABLE_SPECIAL_LAST_ROW", TableRowStatusIndicatorCell: "TABLE_ROW_STATUS_INDICATOR_CELL", TableHeadRowStatusIndicatorCell: "TABLE_HEAD_ROW_STATUS_INDICATOR_CELL", TableLoader: "TABLE_LOADER", TableBody: "TABLE_BODY", TableHead: "TABLE_HEAD" }, zt = Jr((t, h) => { var { __TYPE__: l = "TABLE", EnableSelection: i = !1, EnableOrdering: g = !1, EnableSelectAll: b = !1, EnableLoader: T = !1, PreRenderedTableBody: E = !1, PreRenderedTableHead: w = !1, noBorder: A = !1, //-------------------- EnableRowStatusIndicator: C = !1, EnableRowHighlight: R = !1, GetRowStatusIndicatorColor: y = () => { }, GetRowHighlightColor: O = () => { }, //-------------------- NoDataText: W = "No data to show", NoDataComponent: Y = null, //-------------------- Loading: _ = !1, // TODO: add alignText prop to Column object Columns: d = [], Data: H = [], SelectedData: re = [], SelectedEntirePage: ue = !1, RowIdentifier: X = "id", VisibilityPattern: j = null, Ordering: _e = {}, //-------------------- onColumnClick: pe = () => { }, onRowClick: ye = () => { }, onSelectRow: fe = () => { }, onSelectAll: Te = () => { }, //-------------------- tableWidth: Ee = "100%", className: we = "", style: ke = {}, color: Ce = "primary", size: ne = "small" } = t; const Se = M(), L = { theme: Se, color: Ce, size: ne }; Zr( h, () => ({ getTableData: () => H }), [ H // Update functions when certain state changes ] ); const [ze, { width: u }] = ln(); var We = en(); je(() => { i === !0 && (X === null || X === "") && console.error( "Error: Selection is enabled but the 'RowIdentifier' is empty" ); }, []), je(() => { (d == null || d.length === 0) && console.error("Error: Columns array must have at least one item."); }, [d]), je(() => { j && (j.hasOwnProperty(U.XS.type) || console.error(q(U.XS.type)), j.hasOwnProperty(U.S.type) || console.error(q(U.S.type)), j.hasOwnProperty(U.M.type) || console.error(q(U.M.type)), j.hasOwnProperty(U.L.type) || console.error(q(U.L.type)), j.hasOwnProperty(U.XL.type) || console.error(q(U.XL.type))); }, [j]); const q = (s) => `Error: 'VisibilityPattern' missing property ${s}.`, $ = () => { let s = []; if (pn(j)) { var c = 0; if (s = j[We].map((f) => ({ ...d.find((N) => String(N.id) === String(f.id)), ...f })), i === !0) { var c = J() / u * 100 / s.length; C === !0 && (c += 3 / u * 100), s = s.map((p) => ({ ...p, width: p.width - c })); } } else if (s = d.map((f) => ({ ...f })), i === !0) { var c = J() / u * 100 / s.length; C === !0 && (c += 3 / u * 100), s = s.map((p) => ({ ...p, width: p.width - c })); } return s; }, Ae = (s, c) => { if (s && s.length > 0) { var f = 0, p = s.map((G) => G.width).reduce((G, ae) => G + ae); i === !0 && (f = J() / u * 100); var N = p + f; gn(N) && (N > 101 || N < 98) && console.error(`Error: Row ${c} - sum of column widths is ${N}.`); } }, Oe = (s) => { let c = {}, f = re.find( (p) => String(p[X]) === String(s[X]) ); return f != null ? c.IsSelected = !0 : c.IsSelected = !1, c; }, J = () => ne === "small" ? 37 : ne === "medium" ? 43 : ne === "large" ? 49 : 37, Ye = (s = {}, c) => { let f = {}; var p = $(); Ae(p, c), i === !0 && (f = Oe(s)); var N = { onRowClick: ye, onSelectRow: fe, RowData: s, SelectedData: re, EnableSelection: i, Columns: d, ColumnsToRender: p, Index: c, key: c, ...L, ...f }, G = /* @__PURE__ */ de(x, { children: [ C === !0 && Ie(s), i === !0 && Fe(f.IsSelected, s), p.map((ae, Je) => Ge(s, ae, Je, c, p)) ] }); return P( B("TABLE_ROW", t.children), N, G ) || /* @__PURE__ */ z(ct, { ...N, key: c, noBorder: A }, G); }, Ge = (s, c, f, p, N) => { var G = { RowData: s, Column: c, ColumnsToRender: N, Index: f, RowIndex: p, key: f, EnableSelection: i, RowIdentifier: X, EnableRowHighlight: R, GetRowHighlightColor: O, ...L }; return P( B("TABLE_CELL", t.children), G ) || /* @__PURE__ */ z(dt, { ...G, key: f }); }, Fe = (s, c, f = -1) => { var p = { SelectedData: re, RowData: c, onSelectRow: fe, Index: f, key: f, IsSelected: s, EnableRowHighlight: R, GetRowHighlightColor: O, ...L }; return P( B("TABLE_SELLECTION_CELL", t.children), p ) || /* @__PURE__ */ z( ut, { ...p, key: f, width: J() / u * 100 } ); }, Me = () => { var s = { Columns: d, ...L }, c = /* @__PURE__ */ de(x, { children: [ C === !0 && Ke(), i === !0 && Ue(), $().map((f, p) => Le(f, p)) ] }); return P( B("TABLE_HEAD_ROW", t.children), s, c ) || /* @__PURE__ */ z(ft, { ...s, key: 0 }, c); }, Le = (s, c, f) => { var p = { Index: c, Column: s, Ordering: _e, EnableOrdering: g, EnableSelectAll: b, onColumnClick: pe, ColumnsToRender: f, ...L }; return P( B("TABLE_HEAD_CELL", t.children), p ) || /* @__PURE__ */ z(ht, { ...p, key: c }); }, Ue = () => { var s = { Index: -1, IsSelected: ue, onSelectAll: Te, EnableSelectAll: b, ...L }; return P( B("TABLE_HEAD_SELECTION_CELL", t.children), s ) || /* @__PURE__ */ z( bt, { ...s, key: -1, width: J() / u * 100 } ); }, Ve = () => P(B("TABLE_HEADER", t.children), { Data: H, Columns: d, ...L }) || /* @__PURE__ */ m(x, {}), Re = () => P(B("TABLE_FOOTER", t.children), { Data: H, Columns: d, ...L }) || /* @__PURE__ */ m(x, {}), ve = () => P( B("TABLE_SPECIAL_LAST_ROW", t.children), { Data: H, Columns: d, ColumnsToRender: $(), Disabled: _, ...L } ) || /* @__PURE__ */ m(x, {}), he = () => { if (H == null || H && H.length === 0) { var s = $().length; return i === !0 && s++, C === !0 && s++, /* @__PURE__ */ m("tr", { children: /* @__PURE__ */ m("td", { colSpan: s, children: Y ? /* @__PURE__ */ m(Y, {}) : /* @__PURE__ */ m(Qn, { ...L, children: W }) }) }); } return /* @__PURE__ */ m(x, {}); }, Ie = (s) => { var c = { ...L, key: -1, RowData: s, GetRowStatusIndicatorColor: y }; return C === !0 ? /* @__PURE__ */ m(x, { children: P( B("TABLE_ROW_STATUS_INDICATOR_CELL", t.children), c ) || /* @__PURE__ */ m(gt, { ...c, noBorder: A }) }) : /* @__PURE__ */ m(x, {}); }, Ke = () => { var s = { ...L, key: -1 }; return C === !0 ? /* @__PURE__ */ m(x, { children: P( B( "TABLE_HEAD_ROW_STATUS_INDICATOR_CELL", t.children ), s ) || /* @__PURE__ */ m(mt, { ...s }) }) : /* @__PURE__ */ m(x, {}); }, Xe = () => T === !0 && _ === !0 ? /* @__PURE__ */ m(x, { children: /* @__PURE__ */ m(Jn, { theme: Se, children: P( B("TABLE_LOADER", t.children), { ...L, Loading: _ } ) || /* @__PURE__ */ m(nn, { ...L }) }) }) : /* @__PURE__ */ m(x, {}), oe = () => { var s = Pt(t); delete s.__TYPE__; var c = /* @__PURE__ */ de(x, { children: [ H.map((f, p) => Ye(f, p)), he() ] }); return P( B("TABLE_BODY", t.children), s, E ? c : void 0 ) || /* @__PURE__ */ m(it, { ...L, children: c }); }, be = () => { var s = Pt(t); delete s.__TYPE__; var c = /* @__PURE__ */ m(x, { children: Me() }); return P( B("TABLE_HEAD", t.children), s, w ? c : null ) || /* @__PURE__ */ m(st, { ...L, children: c }); }; return (() => { var s = { className: we, Loading: _, ...L }, c = /* @__PURE__ */ de(x, { children: [ Xe(), Ve(), /* @__PURE__ */ de( Zn, { ...L, width: Ee || "100%", "data-table": !0, ref: ze, noBorder: A, children: [ be(), oe() ] } ), ve(), Re() ] }); return P( B("TABLE_CONTAINER", t.children), s, c ) || /* @__PURE__ */ m( qn, { ...s, isLoading: T ? _ : !1, children: c } ); })(); }); zt.propTypes = { /** * This property determines where the component is rendered. * Should not be overridden! */ __TYPE__: o.string, /** * */ ID: o.string, //---------------------------------------- noBorder: o.bool, /** * Show a selection checkbox in the first cell of every row. * Value of the checkbox is determined by the `SelectedData` property. */ EnableSelection: o.bool, /** * Show ordering arrows in header cells. */ EnableOrdering: o.bool, /** * Show a spinner with backdrop on top of the table when `Loading` is set to `true`. */ EnableLoader: o.bool, /** * Show a selection checkbox in the first cell of the table header. * Value of the checkbox is determined by the `SelectedEntirePage` property. */ EnableSelectAll: o.bool, /** * Show a special status indicator cell on the left edge of the row */ EnableRowStatusIndicator: o.bool, /** * */ EnableRowHighlight: o.bool, /** * */ GetRowStatusIndicatorColor: o.func, /** * */ GetRowHighlightColor: o.func, //---------------------------------------- /** * Specify the text that is shown when there are 0 rows in the `Data`. */ NoDataText: o.string, /** * React component to show instead of the `NoDataText` */ NoDataComponet: o.node, //-------------------- /** * Disables some events and actions when set to `true`. Also triggers the spinner if `EnableLoader` is set to `true`. */ Loading: o.bool, /** * Defines the table columns. * @param id - Column identifier * @param displayName - Text displayed in the header * @param accessor - Access the property in `Data` * @param width - Default column width (overridden by the VisibilityPattern) * @param sortable - Can be sorted * */ Columns: o.arrayOf(o.object), /** * Defines the data displayed in each row. */ Data: o.arrayOf(o.object), /** * Define the selected data. * @param id - Column identifier (mandatory field) */ SelectedData: o.arrayOf(o.object), /** * Value of the `SelectAll` checkbox. */ SelectedEntirePage: o.bool, /** * Defines which field in a data object is the row identifier. */ RowIdentifier: o.string, /** * An object that defines the width and order of columns for different screen sizes. * (`XS`,`S`,`M`,`L`,`XL`) */ VisibilityPattern: o.object, /** * Describe how the data is ordered. * @param columnId - Column identifier, maps to the id on the Column object */ Ordering: o.shape({ columnId: o.number, ascending: o.bool, descending: o.bool }), //---------------------------------------- /** * Triggered on header cell click. * @param event - event object * @param column - column definition * @param ordering - updated ordering object, or undefined if ordering is not enabled or the column is not sortable */ onColumnClick: o.func, /** * Triggered on table row click. * @param event - event object * @param rowData - row data */ onRowClick: o.func, /** * Triggered on selection checkbox click. * @param event - event object * @param rowData - row data * @param isSelected - the value of selection checkbox */ onSelectRow: o.func, /** * Triggered on select all checkbox click. * @param event - event object * @param isSelected - the value of select all checkbox */ onSelectAll: o.func, //---------------------------------------- /** * `width` applied to html table. */ tableWidth: o.string, /** * `className` applied to the component container. */ className: o.string, /** * Defines size of the component (padding, margin, font etc.). */ size: o.oneOf(["small", "medium", "large"]), /** * Defines the palette color for the component. */ color: o.oneOf([ "primary", "secondary", "success", "warning", "danger", "information", "neutral", "gray" ]) }; zt.displayName = "TABLE"; export { fo as TableComponentOverrides, zt as default };