@deviceinsight/ng-ui-basic-components 3.16.0 → 4.0.0-alpha.2

package/dist/index.js

@@ -0,0 +1,725 @@
+import { jsx as a, jsxs as m, Fragment as R } from "react/jsx-runtime";
+import * as w from "react";
+import T, { useRef as V, useEffect as N, useState as y, createContext as q, useContext as X } from "react";
+import g from "classnames";
+import { withTranslation as M, Trans as k, useTranslation as Y } from "react-i18next";
+import G from "react-dom";
+import J from "react-draggable";
+import { useFloating as Q, size as ee, offset as te, shift as ne, arrow as ie, autoUpdate as L, useClick as se, useHover as ae, safePolygon as oe, useFocus as re, useDismiss as ce, useInteractions as le, FloatingPortal as de } from "@floating-ui/react";
+class qe extends w.Component {
+  state = {
+    currentPageIndex: -1
+  };
+  componentDidMount() {
+    const { defaultOpenPageIndex: e } = this.props;
+    e != null && this.handleAccordionToggle(e);
+  }
+  handleAccordionToggle = (e) => {
+    const { onPageChange: n } = this.props, i = this.state.currentPageIndex !== e ? e : -1;
+    this.setState({
+      currentPageIndex: i
+    }), n && n(i);
+  };
+  render() {
+    const { children: e, accordionClass: n } = this.props, { currentPageIndex: i } = this.state;
+    return /* @__PURE__ */ a("div", { className: n ? `di accordion ${n}` : "di accordion", children: e && e.map(
+      (s, o) => s ? /* @__PURE__ */ a(
+        s.type,
+        {
+          index: o,
+          isOpen: i === o,
+          toggle: () => this.handleAccordionToggle(o),
+          ...s.props
+        },
+        o
+      ) : null
+    ) });
+  }
+}
+class Xe extends w.PureComponent {
+  render() {
+    const { badge: e, children: n, isOpen: i, info1: s, itemClasses: o, title: r, titleTooltip: c, toggle: l, tools: u, ...h } = this.props, d = ["item"];
+    return o && d.push(o), i && d.push("open"), /* @__PURE__ */ m("div", { className: d.join(" "), children: [
+      /* @__PURE__ */ m("div", { className: "head", children: [
+        /* @__PURE__ */ m("span", { className: "title", onClick: l, "data-testid": h["data-testid"], children: [
+          /* @__PURE__ */ a("h1", { title: c, children: r }),
+          e && /* @__PURE__ */ a(
+            "span",
+            {
+              className: "di label",
+              style: {
+                margin: "0 0 0 10px",
+                backgroundColor: "#ddd",
+                borderColor: "transparent"
+              },
+              children: e
+            }
+          ),
+          s && /* @__PURE__ */ a("span", { style: s.cssStyle, children: s.text })
+        ] }),
+        /* @__PURE__ */ a("span", { className: "tools", children: u && u.map((p, f) => /* @__PURE__ */ a("span", { className: "tool", children: p }, f)) })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "cont", children: n })
+    ] });
+  }
+}
+function ue({
+  children: t,
+  title: e,
+  type: n,
+  disabled: i,
+  onClick: s,
+  style: o,
+  tabIndex: r,
+  t: c,
+  primary: l,
+  danger: u,
+  naked: h,
+  className: d,
+  small: p,
+  ...f
+}) {
+  let v = e;
+  return e && typeof e != "string" && (v = c(e.id, {
+    defaultValue: e.defaultValue
+  })), /* @__PURE__ */ a(
+    "button",
+    {
+      "data-testid": f["data-testid"],
+      type: n || "button",
+      className: g("di button", d, { small: p, primary: l, danger: u, link: h }),
+      title: typeof v == "string" ? v : void 0,
+      disabled: i,
+      onClick: s,
+      style: o,
+      tabIndex: r,
+      children: t
+    }
+  );
+}
+const x = M()(ue), he = ({ children: t, dividing: e, className: n, style: i }) => /* @__PURE__ */ a("div", { style: i, className: `di button-row ${e ? "dividing" : ""} ${n || ""}`, children: t });
+he.defaultProps = {
+  dividing: !1
+};
+const pe = (t) => !!t.touches, me = (t, e) => {
+  const n = t.getBoundingClientRect();
+  let i, s;
+  return pe(e) ? (i = e.touches[0].pageX, s = e.touches[0].pageY) : (i = e.pageX, s = e.pageY), n.left <= i && n.right >= i && n.top <= s && n.bottom >= s;
+}, fe = (t, e) => {
+  const n = V(e);
+  N(() => {
+    n.current = e;
+  }, [e]), N(() => {
+    const i = (s) => {
+      t.filter((r) => r != null).every(
+        (r) => r !== s.target && !r.contains(s.target) && !me(r, s)
+      ) && n.current(s);
+    };
+    return document.addEventListener("mousedown", i, !0), document.addEventListener("touchstart", i, !0), () => {
+      document.removeEventListener("mousedown", i, !0), document.removeEventListener("touchstart", i, !0);
+    };
+  }, [t]);
+};
+function ge({ className: t, width: e, header: n, content: i, footer: s, onOutsideClick: o }) {
+  const r = V(null), [c, l] = y(null);
+  return N(() => {
+    l(r.current);
+  }, []), fe([c], () => {
+    o && o();
+  }), /* @__PURE__ */ a(J, { handle: ".modal-header", nodeRef: r, children: /* @__PURE__ */ m(
+    "div",
+    {
+      ref: r,
+      className: `modal-window ${t || ""}`,
+      style: {
+        maxWidth: e
+      },
+      children: [
+        n && /* @__PURE__ */ a("div", { className: "modal-header", children: n }),
+        i && /* @__PURE__ */ a("div", { className: "modal-content", children: i }),
+        s && /* @__PURE__ */ a("div", { className: "modal-footer", children: s })
+      ]
+    }
+  ) });
+}
+class ve extends T.Component {
+  static defaultProps = {
+    width: "60%"
+  };
+  container;
+  modalRoot;
+  timeoutId;
+  constructor(e) {
+    super(e), this.state = {
+      className: "di modal"
+    };
+  }
+  componentDidMount() {
+    this.container = document.createElement("div"), this.modalRoot = document.getElementById("modal-root"), this.modalRoot ? this.modalRoot.appendChild(this.container) : document.body && document.body.appendChild(this.container), this.props.onOutsideClick && window.addEventListener("keydown", this.keyEventHandler), this.timeoutId = setTimeout(
+      () => this.setState({
+        className: `di modal show ${this.props.className || ""}`
+      }),
+      10
+    );
+  }
+  componentWillUnmount() {
+    this.container && (this.modalRoot ? this.modalRoot.removeChild(this.container) : document.body && document.body.removeChild(this.container)), this.props.onOutsideClick && window.removeEventListener("keydown", this.keyEventHandler), this.timeoutId && clearTimeout(this.timeoutId);
+  }
+  keyEventHandler = (e) => {
+    e.key === "Escape" && this.props.onOutsideClick && this.props.onOutsideClick(e);
+  };
+  render() {
+    return this.container ? G.createPortal(
+      /* @__PURE__ */ a("div", { className: this.state.className, onMouseDown: this.props.onMouseDown, children: /* @__PURE__ */ a(ge, { ...this.props }) }),
+      this.container
+    ) : null;
+  }
+}
+class Ye extends T.PureComponent {
+  render() {
+    return /* @__PURE__ */ a("div", { id: "modal-root" });
+  }
+}
+class we extends T.Component {
+  static defaultProps = {
+    size: 56,
+    center: !1
+  };
+  render() {
+    const { size: e = 56, center: n, ...i } = this.props;
+    let s = {
+      width: e,
+      height: e
+    };
+    return n && (s = {
+      ...s,
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      marginTop: -e / 2,
+      marginLeft: -e / 2
+    }), /* @__PURE__ */ a("div", { className: "di spinner", style: s, ...i });
+  }
+}
+class Ge extends T.Component {
+  static defaultProps = {
+    size: 56
+  };
+  render() {
+    const { show: e, size: n, children: i, className: s } = this.props, o = `di spinner-wrapper ${s || ""}`;
+    return /* @__PURE__ */ m("div", { className: o, children: [
+      /* @__PURE__ */ a(
+        "div",
+        {
+          className: `di spinner-container ${e ? "visible" : ""}`,
+          "data-testid": this.props["data-testid"],
+          children: /* @__PURE__ */ a(we, { size: n, center: !0 })
+        }
+      ),
+      i
+    ] });
+  }
+}
+const ye = (t, e) => {
+  switch (t) {
+    case "checkbox":
+    case "radio":
+      return "di checkbox";
+    case "toggle":
+      return e ? "di toggle toggle-small" : "di toggle";
+    default:
+      throw Error(`type not support: ${t}`);
+  }
+}, xe = (t, e) => {
+  switch (t) {
+    case "checkbox":
+      return "box";
+    case "radio":
+      return "radio";
+    case "toggle":
+      return e ? "switch switch-small" : "switch";
+    default:
+      throw Error(`type not support: ${t}`);
+  }
+}, be = ({
+  type: t = "checkbox",
+  value: e,
+  onChange: n,
+  title: i,
+  label: s,
+  disabled: o = !1,
+  toggleSmall: r = !1,
+  toggleColor: c = "#259b23",
+  t: l,
+  ...u
+}) => {
+  const h = t === "toggle" ? {
+    backgroundColor: e ? c : "gray"
+  } : {}, d = i ? l(i.id, {
+    defaultValue: i.defaultValue
+  }) : void 0, p = s ? l(s.id, {
+    defaultValue: s.defaultValue
+  }) : null;
+  return /* @__PURE__ */ m(
+    "label",
+    {
+      title: d,
+      className: ye(t, r),
+      "data-testid": u["wrapper-data-testid"],
+      children: [
+        /* @__PURE__ */ a(
+          "input",
+          {
+            type: "checkbox",
+            checked: e,
+            disabled: o,
+            onChange: () => n(!e),
+            "data-testid": u["data-testid"]
+          }
+        ),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: xe(t, r),
+            style: h,
+            "data-testid": u["innerdiv-data-testid"]
+          }
+        ),
+        s && /* @__PURE__ */ a("span", { className: "textlabel", children: p })
+      ]
+    }
+  );
+}, Je = M()(be);
+function P(t) {
+  const e = typeof t == "object" && typeof t.id == "string" && typeof t.defaultValue == "string";
+  return e && console.warn(
+    "Please use strings instead of TranslationDescriptors to initialize the Confirm modal, because TranslationDescriptors are deprecated"
+  ), e;
+}
+function C(t) {
+  return P(t) ? /* @__PURE__ */ a(k, { i18nKey: t.id, children: t.defaultValue }) : t;
+}
+function Ce({
+  title: t,
+  message: e,
+  onAccept: n,
+  onDecline: i,
+  acceptButtonLabel: s,
+  declineButtonLabel: o,
+  acceptButtonStyle: r = "primary"
+}) {
+  return /* @__PURE__ */ a(
+    ve,
+    {
+      header: C(t),
+      content: C(e),
+      footer: /* @__PURE__ */ m("div", { children: [
+        /* @__PURE__ */ a(
+          x,
+          {
+            primary: r === "primary",
+            danger: r === "danger",
+            onClick: n,
+            children: s ? C(s) : /* @__PURE__ */ a(k, { i18nKey: "form.accept", children: "Accept" })
+          }
+        ),
+        /* @__PURE__ */ a(x, { onClick: i, children: o ? C(o) : /* @__PURE__ */ a(k, { i18nKey: "form.decline", children: "Decline" }) })
+      ] }),
+      width: 500
+    }
+  );
+}
+const Z = q({
+  confirm: () => Promise.reject(new Error("ConfirmProvider is missing!"))
+});
+function Ne({ children: t }) {
+  const [e, n] = y(!1), [i, s] = y({
+    title: "",
+    message: "",
+    onAccept: () => {
+    },
+    onDecline: () => {
+    }
+  });
+  async function o(r) {
+    return new Promise((c) => {
+      n(!0), s({
+        ...r,
+        onAccept: () => {
+          n(!1), c(!0);
+        },
+        onDecline: () => {
+          n(!1), c(!1);
+        }
+      });
+    });
+  }
+  return /* @__PURE__ */ m(Z.Provider, { value: { confirm: o }, children: [
+    t,
+    e && /* @__PURE__ */ a(Ce, { ...i })
+  ] });
+}
+function ke() {
+  const t = X(Z);
+  if (!t)
+    throw new Error("ConfirmProvider is missing");
+  const { confirm: e } = t;
+  return e;
+}
+function Qe(t) {
+  function e(n) {
+    const i = ke(), { t: s } = Y();
+    function o(c) {
+      return P(c) ? s(c.id, { defaultValue: c.defaultValue }) : c;
+    }
+    async function r(c, l, u, h, d, p) {
+      const f = await i({
+        title: o(c),
+        message: P(l) ? o(l) : l,
+        acceptButtonLabel: u ? o(u) : void 0,
+        declineButtonLabel: h ? o(h) : void 0,
+        acceptButtonStyle: p
+      });
+      if (d)
+        return f;
+      if (!f)
+        return new Promise(() => {
+        });
+    }
+    return /* @__PURE__ */ a(t, { ...n, confirm: r });
+  }
+  return function(i) {
+    return /* @__PURE__ */ a(Ne, { children: /* @__PURE__ */ a(e, { ...i }) });
+  };
+}
+const Ae = "data:image/svg+xml,%3csvg%20id='icon-add_24_sga'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpolygon%20id='plus'%20points='20%2010%2014%2010%2014%204%2010%204%2010%2010%204%2010%204%2014%2010%2014%2010%2020%2014%2020%2014%2014%2020%2014%2020%2010'/%3e%3c/svg%3e", Te = "data:image/svg+xml,%3csvg%20id='icon-cross_24_sga'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpolygon%20id='icon-cross_24'%20points='20%206.28%2017.87%204%2012%209.78%206.13%204%204%206.28%209.78%2011.97%204%2017.66%206.13%2019.93%2012%2014.15%2017.87%2019.93%2020%2017.66%2014.22%2011.97%2020%206.28'/%3e%3c/svg%3e", Pe = "data:image/svg+xml,%3csvg%20id='icon-edit-24_sga'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cg%20id='stift'%3e%3cpath%20d='M7.35,12.65a.5.5,0,0,0,0,.7l3.3,3.3a.5.5,0,0,0,.7,0l8.3-8.3A1.4,1.4,0,0,0,20,7.5v-1a1.4,1.4,0,0,0-.35-.85l-1.3-1.3A1.4,1.4,0,0,0,17.5,4h-1a1.4,1.4,0,0,0-.85.35Z'/%3e%3c/g%3e%3cpath%20d='M5.9,14.49c.06-.27.26-.33.45-.14l3.3,3.3c.19.19.13.39-.14.45l-4,.8a.3.3,0,0,1-.39-.39Z'/%3e%3c/svg%3e", Ve = "data:image/svg+xml,%3csvg%20id='icon-gear-24_sga'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cg%20id='icon-gear-24_sga-2'%20data-name='icon-gear-24_sga'%3e%3cpath%20d='M22.82,14.06A1.25,1.25,0,0,0,24,13,7.66,7.66,0,0,0,24,12,7.66,7.66,0,0,0,24,11a1.25,1.25,0,0,0-1.13-1l-1.09,0A1.49,1.49,0,0,1,20.44,9c-.15-.47-.44-2-.07-2.37l.74-.81a1.16,1.16,0,0,0,0-1.5L19.7,2.87a1.16,1.16,0,0,0-1.5,0l-.81.74a1.5,1.5,0,0,1-1.54.27c-.44-.23-1.72-1.08-1.74-1.63l0-1.09A1.25,1.25,0,0,0,13,.05a7.66,7.66,0,0,0-1,0,7.66,7.66,0,0,0-1,.05,1.25,1.25,0,0,0-1,1.13l0,1.09A1.52,1.52,0,0,1,9,3.56c-.47.15-2,.44-2.37.07L5.8,2.89a1.16,1.16,0,0,0-1.5,0L2.86,4.3a1.18,1.18,0,0,0,0,1.5l.74.81A1.5,1.5,0,0,1,3.9,8.15c-.23.44-1.08,1.72-1.63,1.74l-1.09,0A1.25,1.25,0,0,0,.05,11a7.66,7.66,0,0,0,0,1,7.66,7.66,0,0,0,.05,1,1.25,1.25,0,0,0,1.13,1l1.09,0A1.47,1.47,0,0,1,3.55,15c.16.48.45,2,.08,2.37l-.74.81a1.16,1.16,0,0,0,0,1.5L4.3,21.13a1.16,1.16,0,0,0,1.5,0l.81-.74a1.5,1.5,0,0,1,1.54-.27c.44.23,1.72,1.08,1.75,1.63l0,1.09A1.25,1.25,0,0,0,11,24,7.66,7.66,0,0,0,12,24,7.66,7.66,0,0,0,13,24a1.25,1.25,0,0,0,1-1.13l0-1.09A1.49,1.49,0,0,1,15,20.44c.47-.15,2-.44,2.37-.07l.81.74a1.16,1.16,0,0,0,1.5,0l1.43-1.43a1.16,1.16,0,0,0,0-1.5l-.74-.81a1.5,1.5,0,0,1-.27-1.54c.23-.44,1.08-1.72,1.63-1.74ZM12,15.5A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z'/%3e%3c/g%3e%3c/svg%3e", Me = "data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cg%3e%3cpath%20d='M22.1,4.91a3,3,0,0,0-3-3H6.44a2.4,2.4,0,0,1,1.34-.4h12.6A2.12,2.12,0,0,1,22.5,3.62V17.26a1.42,1.42,0,0,1-.4,1Z'/%3e%3cpath%20d='M20.38,1H7.78A3,3,0,0,0,5.26,2.4H19.09A2.51,2.51,0,0,1,21.6,4.91V19.12A1.94,1.94,0,0,0,23,17.26V3.62A2.62,2.62,0,0,0,20.38,1Z'/%3e%3c/g%3e%3cg%3e%3cpath%20d='M4,21.5A1.5,1.5,0,0,1,2.5,20V5.8A1.5,1.5,0,0,1,4,4.3H18.2a1.5,1.5,0,0,1,1.5,1.5V20a1.5,1.5,0,0,1-1.5,1.5ZM9.5,18a.5.5,0,0,0,.5.5h2a.5.5,0,0,0,.5-.5V14.5H16a.5.5,0,0,0,.5-.5V12a.5.5,0,0,0-.5-.5H12.5V8a.5.5,0,0,0-.5-.5H10a.5.5,0,0,0-.5.5v3.5H6a.5.5,0,0,0-.5.5v2a.5.5,0,0,0,.5.5H9.5Z'/%3e%3cpath%20d='M18.2,4.8a1,1,0,0,1,1,1V20a1,1,0,0,1-1,1H4a1,1,0,0,1-1-1V5.8a1,1,0,0,1,1-1H18.2M9,11H6a1,1,0,0,0-1,1v2a1,1,0,0,0,1,1H9v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1V15h3a1,1,0,0,0,1-1V12a1,1,0,0,0-1-1H13V8a1,1,0,0,0-1-1H10A1,1,0,0,0,9,8v3m9.2-7.2H4a2,2,0,0,0-2,2V20a2,2,0,0,0,2,2H18.2a2,2,0,0,0,2-2V5.8a2,2,0,0,0-2-2ZM6,14V12h4V8h2v4h4v2H12v4H10V14Z'/%3e%3c/g%3e%3c/svg%3e", Ee = "data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cpolygon%20points='7.92%2012%202.84%207%2013%207%207.92%2012'/%3e%3crect%20x='5'%20y='2'%20width='6'%20height='5'/%3e%3crect%20x='2'%20y='14'%20width='12'%20height='1'/%3e%3c/svg%3e", Be = "data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cdefs%3e%3cstyle%3e%20.cls-1%20{%20fill:%20%23fff;%20}%20%3c/style%3e%3c/defs%3e%3cg%3e%3ccircle%20class='cls-1'%20cx='5.5'%20cy='5.5'%20r='4.5'/%3e%3cpath%20d='M5.5,2A3.5,3.5,0,1,1,2,5.5,3.5,3.5,0,0,1,5.5,2m0-1A4.5,4.5,0,1,0,10,5.5,4.49,4.49,0,0,0,5.5,1Z'/%3e%3c/g%3e%3crect%20x='6.79'%20y='10.04'%20width='7.74'%20height='2.16'%20transform='translate(10.98%20-4.28)%20rotate(45)'/%3e%3c/svg%3e", He = "data:image/svg+xml,%3csvg%20data-name='icon_key'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2027.02%2027'%3e%3cpath%20d='M35.07,16.5a8.52,8.52,0,0,0-7.69,12L17.2,38.8a2.46,2.46,0,0,0,0,3.46,2.41,2.41,0,0,0,3.42,0l1.69-1.7,2.91,2.94L31,37.63l-2.92-3,2.44-2.46a8.31,8.31,0,0,0,4.51,1.33,8.53,8.53,0,0,0,0-17Zm0,3.91A4.62,4.62,0,1,1,30.5,25,4.6,4.6,0,0,1,35.07,20.41Z'%20transform='translate(-16.49%20-16.5)'/%3e%3c/svg%3e", Le = "data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cg%20id='Pfeilende'%3e%3cpath%20d='M24,10H15l9-8.93Z'/%3e%3c/g%3e%3cpath%20d='M18.45,18.78A9.33,9.33,0,0,1,2.62,14.86,9.8,9.8,0,0,1,8.89,2.69,9.42,9.42,0,0,1,20.72,9.14H23A11.72,11.72,0,0,0,11.68,0,11.74,11.74,0,0,0,.34,9.14,12,12,0,0,0,8.89,23.65a11.43,11.43,0,0,0,11.16-3.31Z'/%3e%3c/svg%3e", _e = "data:image/svg+xml,%3csvg%20data-name='icon_fullscreen_sga'%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3e%3cpolygon%20id='ecke'%20points='2%2014%202%2010%200%2010%200%2016%206%2016%206%2014%202%2014'/%3e%3cpolygon%20id='ecke-2'%20data-name='ecke'%20points='2%202%206%202%206%200%200%200%200%206%202%206%202%202'/%3e%3cpolygon%20id='ecke-3'%20data-name='ecke'%20points='14%2014%2010%2014%2010%2016%2016%2016%2016%2010%2014%2010%2014%2014'/%3e%3cpolygon%20id='ecke-4'%20data-name='ecke'%20points='10%200%2010%202%2014%202%2014%206%2016%206%2016%200%2010%200'/%3e%3c/svg%3e", $e = "data:image/svg+xml,%3csvg%20id='Icon_help'%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20id='icon_help-2'%20data-name='icon_help'%20d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm1,16H11V15h2Zm1.7-6.26a4.85,4.85,0,0,1-.49.81l-1,1.37a1.36,1.36,0,0,0-.18.34,1,1,0,0,0-.07.38L13,14H11l.1-.49a2,2,0,0,1,.13-.77,3.18,3.18,0,0,1,.4-.69l1-1.33a3.21,3.21,0,0,0,.29-.46,1.19,1.19,0,0,0,.11-.47,1.17,1.17,0,0,0-.3-.82,1.07,1.07,0,0,0-.83-.33A1,1,0,0,0,11.1,9a1.25,1.25,0,0,0-.28.83H9a2.94,2.94,0,0,1,.23-1.17,2.45,2.45,0,0,1,.63-.88,2.9,2.9,0,0,1,.93-.55A3.13,3.13,0,0,1,11.94,7a3.31,3.31,0,0,1,1.13.19,2.82,2.82,0,0,1,.94.54,2.62,2.62,0,0,1,.65.88A3,3,0,0,1,14.9,9.8,2.16,2.16,0,0,1,14.7,10.74Z'%20style='opacity:%200.2'/%3e%3c/svg%3e", Re = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='icon_star_16'%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3e%3cpath%20id='star'%20d='M8,0l2.45,4.97,5.55,.76-4.04,3.83,.99,5.44-4.94-2.61-4.94,2.61,.99-5.44L0,5.73l5.55-.76L8,0Z'/%3e%3c/svg%3e";
+function Ze(t) {
+  const { add: e, del: n, edit: i, config: s, duplicate: o, search: r, download: c, sync: l, fullscreen: u, iconKey: h, documentation: d, star: p } = t;
+  if (e)
+    return Ae;
+  if (n)
+    return Te;
+  if (i)
+    return Pe;
+  if (s)
+    return Ve;
+  if (o)
+    return Me;
+  if (r)
+    return Be;
+  if (c)
+    return Ee;
+  if (l)
+    return Le;
+  if (u)
+    return _e;
+  if (h)
+    return He;
+  if (d)
+    return $e;
+  if (p)
+    return Re;
+  throw Error("getSrc: no icon type specified");
+}
+function Ie(t) {
+  const { add: e, del: n, edit: i, config: s, duplicate: o, search: r, download: c, sync: l, fullscreen: u, iconKey: h, documentation: d, star: p } = t;
+  if (e)
+    return "icon add";
+  if (n)
+    return "icon delete";
+  if (i)
+    return "icon edit";
+  if (s)
+    return "icon config";
+  if (o)
+    return "icon duplicate";
+  if (r)
+    return "icon search";
+  if (c)
+    return "icon download";
+  if (l)
+    return "icon sync";
+  if (u)
+    return "icon fullscreen";
+  if (h)
+    return "icon iconKey";
+  if (d)
+    return "icon documentation";
+  if (p)
+    return "icon star";
+  throw Error("getAlt: no icon type specified");
+}
+function A(t) {
+  let e;
+  return t.large ? e = { width: 24, height: 24 } : e = { width: 16, height: 16 }, t.inverted && (e = { ...e, filter: "invert(1)" }), /* @__PURE__ */ a("img", { src: Ze(t), className: `di icon ${t.className || ""}`, alt: Ie(t), style: e });
+}
+function et({
+  text: t,
+  small: e = !1,
+  large: n = !1,
+  onDelete: i,
+  className: s,
+  onClick: o,
+  children: r,
+  ...c
+}) {
+  function l(u) {
+    u.stopPropagation(), i && i();
+  }
+  return /* @__PURE__ */ m(
+    "span",
+    {
+      onClick: o,
+      className: g("di label", s, { large: n, small: e, removable: i, clickable: !!o }),
+      "data-testid": c["data-testid"],
+      children: [
+        typeof t == "string" ? t : t && /* @__PURE__ */ a(k, { i18nKey: t.id, children: t.defaultValue }),
+        /* @__PURE__ */ a(R, { children: r }),
+        i && /* @__PURE__ */ a("span", { "data-testid": c["delete-button-data-testid"], className: "remove", onClick: l, children: /* @__PURE__ */ a(A, { del: !0, inverted: !0 }) })
+      ]
+    }
+  );
+}
+const _ = 16;
+function I({
+  placement: t = "bottom",
+  mode: e = ["click"],
+  disabled: n,
+  handler: i,
+  handlerWrapperClassName: s,
+  preventDestroyContentOnHide: o,
+  open: r,
+  onOpenChange: c,
+  className: l,
+  children: u
+}) {
+  const h = V(null), { elements: d, update: p, refs: f, floatingStyles: v, context: b, middlewareData: E } = Q({
+    placement: t,
+    open: r,
+    onOpenChange: c,
+    whileElementsMounted: o ? void 0 : L,
+    middleware: [
+      ee({
+        apply({ availableHeight: B, availableWidth: j, elements: H }) {
+          const z = `${Math.max(0, j - _)}px`, U = `${Math.max(0, B - _)}px`;
+          H.floating.style.maxWidth = z, H.floating.style.maxHeight = U;
+        }
+      }),
+      te({
+        mainAxis: 12
+      }),
+      ne(),
+      ie({
+        element: h
+      })
+    ]
+  });
+  N(() => {
+    if (o && r && d.reference && d.floating)
+      return L(d.reference, d.floating, p);
+  }, [d.floating, d.reference, r, p, o]);
+  const S = se(b, { enabled: !n && e.includes("click") }), D = ae(b, {
+    enabled: !n && e.includes("hover"),
+    handleClose: oe()
+  }), K = re(b, { enabled: !n && e.includes("focus") }), F = ce(b), { getReferenceProps: O, getFloatingProps: W } = le([S, D, K, F]);
+  return /* @__PURE__ */ m(R, { children: [
+    /* @__PURE__ */ a(
+      "span",
+      {
+        style: { display: "inline-block" },
+        className: g("popup-handler-wrapper", s),
+        ref: f.setReference,
+        ...O(),
+        children: i
+      }
+    ),
+    (r || o) && /* @__PURE__ */ a(de, { children: /* @__PURE__ */ a(
+      "div",
+      {
+        className: g("di popup-wrapper", { hidden: o && !r }),
+        ref: f.setFloating,
+        style: v,
+        ...W(),
+        children: /* @__PURE__ */ m("div", { className: g("di popup", t, l), children: [
+          /* @__PURE__ */ a(
+            "div",
+            {
+              className: g("popup-arrow", t),
+              ref: h,
+              style: { left: E.arrow?.x, top: E.arrow?.y }
+            }
+          ),
+          /* @__PURE__ */ a("div", { className: "popup-content", children: u })
+        ] })
+      }
+    ) })
+  ] });
+}
+function Se({ content: t, inverted: e, children: n, disabled: i, style: s, direction: o, className: r }) {
+  const [c, l] = y(!1);
+  return /* @__PURE__ */ a(
+    I,
+    {
+      open: c,
+      onOpenChange: l,
+      handler: n,
+      disabled: i,
+      mode: ["hover"],
+      placement: o || "top",
+      className: `bubble ${e ? "inverted" : ""} ${r || ""}`,
+      children: /* @__PURE__ */ a("span", { className: "bubble-content", style: s, children: t })
+    }
+  );
+}
+function tt({ content: t, children: e, className: n, direction: i, disabled: s }) {
+  const [o, r] = y(!1);
+  return /* @__PURE__ */ a(
+    I,
+    {
+      open: o,
+      disabled: s,
+      mode: ["hover"],
+      onOpenChange: r,
+      handler: e,
+      placement: i || "right",
+      className: `tooltip inverted ${n || ""}`,
+      children: /* @__PURE__ */ a("span", { className: "tooltip-content", children: t })
+    }
+  );
+}
+class nt extends w.Component {
+  state = {
+    currentTab: this.props.pages.length ? this.props.pages[0].name : null
+  };
+  handleClick = (e) => {
+    this.props.onChange ? this.props.onChange(e) : typeof this.props.currentTab > "u" && this.setState({
+      currentTab: e
+    });
+  };
+  currentTabPage = () => {
+    const e = typeof this.props.currentTab == "string" ? this.props.currentTab : this.state.currentTab;
+    return this.props.pages.find(({ name: n }) => e === n);
+  };
+  isCurrentTab = (e) => (typeof this.props.currentTab == "string" ? this.props.currentTab : this.state.currentTab) === e;
+  renderBody = () => {
+    const e = this.currentTabPage();
+    return e && typeof e.renderBody == "function" ? e.renderBody() : null;
+  };
+  render() {
+    const { pages: e, disabled: n } = this.props;
+    return /* @__PURE__ */ m("div", { children: [
+      /* @__PURE__ */ a("div", { className: "di tabs", children: e.map(
+        ({ name: i, renderHeading: s, tabDescription: o }) => o ? /* @__PURE__ */ a(Se, { inverted: !0, content: o, className: "bubble-tab-description", children: /* @__PURE__ */ a(
+          "button",
+          {
+            "data-testid": "tab-button",
+            className: `item ${n ? "disabled" : ""} ${this.isCurrentTab(i) ? "active" : ""}`,
+            onClick: () => !n && this.handleClick(i),
+            children: s()
+          }
+        ) }, i) : /* @__PURE__ */ a(
+          "button",
+          {
+            "data-testid": "tab-button",
+            className: `item ${n ? "disabled" : ""} ${this.isCurrentTab(i) ? "active" : ""}`,
+            onClick: () => !n && this.handleClick(i),
+            children: s()
+          },
+          i
+        )
+      ) }),
+      this.renderBody()
+    ] });
+  }
+}
+const $ = ({
+  onChange: t,
+  inputElement: e,
+  style: n
+}) => /* @__PURE__ */ a(
+  x,
+  {
+    naked: !0,
+    onClick: () => {
+      t(""), e && e.focus();
+    },
+    style: n,
+    children: /* @__PURE__ */ a(A, { del: !0 })
+  }
+);
+class De extends w.Component {
+  state = {
+    query: this.props.initialValue || ""
+  };
+  input;
+  printPlaceholder() {
+    const { t: e, placeholder: n } = this.props;
+    return typeof n == "object" ? e(n.id, {
+      defaultValue: n.defaultValue
+    }) : n;
+  }
+  handleChange = (e) => {
+    const { onChange: n } = this.props;
+    this.setState({
+      query: e
+    }), n(e);
+  };
+  handleKeyUp = ({ key: e }) => {
+    const { onSubmit: n } = this.props, { query: i } = this.state;
+    e === "Enter" && typeof n == "function" && n(i);
+  };
+  render() {
+    const { onSubmit: e, style: n, clearable: i } = this.props, { query: s } = this.state;
+    return /* @__PURE__ */ m("div", { className: "search-box", style: n, children: [
+      /* @__PURE__ */ a(
+        "input",
+        {
+          ref: (o) => {
+            this.input = o;
+          },
+          type: "text",
+          value: s,
+          placeholder: this.printPlaceholder(),
+          onKeyUp: this.handleKeyUp,
+          onChange: ({ target: { value: o } }) => this.handleChange(o)
+        }
+      ),
+      typeof e == "function" ? /* @__PURE__ */ m(w.Fragment, { children: [
+        s && i && /* @__PURE__ */ a(
+          $,
+          {
+            onChange: this.handleChange,
+            inputElement: this.input,
+            style: {
+              right: 30
+            }
+          }
+        ),
+        /* @__PURE__ */ a(x, { naked: !0, onClick: () => e(s), children: /* @__PURE__ */ a(A, { search: !0 }) })
+      ] }) : s && i ? /* @__PURE__ */ a($, { onChange: this.handleChange, inputElement: this.input }) : /* @__PURE__ */ a(x, { naked: !0, disabled: !0, children: /* @__PURE__ */ a(A, { search: !0 }) })
+    ] });
+  }
+}
+const it = M()(De);
+export {
+  qe as Accordion,
+  Xe as AccordionItem,
+  Se as Bubble,
+  x as Button,
+  he as ButtonRow,
+  Je as Checkbox,
+  Ne as ConfirmProvider,
+  A as Icon,
+  et as Label,
+  ve as Modal,
+  Ye as ModalContainer,
+  I as Popup,
+  it as SearchBox,
+  we as Spinner,
+  Ge as SpinnerContainer,
+  nt as Tabs,
+  tt as Tooltip,
+  ke as useConfirm,
+  Qe as withConfirm
+};
+//# sourceMappingURL=index.js.map