overview-components 1.0.75 → 1.0.77

package/dist/shared/lit-tooltip.js

@@ -0,0 +1,137 @@
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as c } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as f } from "../node_modules/lit-element/lit-element.js";
+import { customElement as g } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as v } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import { query as h } from "../node_modules/@lit/reactive-element/decorators/query.js";
+import { autoUpdate as T, computePosition as w, offset as x, flip as y, shift as b, arrow as H } from "../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { css as E } from "../node_modules/@lit/reactive-element/css-tag.js";
+var L = Object.defineProperty, S = Object.getOwnPropertyDescriptor, n = (e, t, i, s) => {
+  for (var o = s > 1 ? void 0 : s ? S(t, i) : t, a = e.length - 1, l; a >= 0; a--)
+    (l = e[a]) && (o = (s ? l(t, i, o) : l(o)) || o);
+  return s && o && L(t, i, o), o;
+};
+let r = class extends f {
+  constructor() {
+    super(...arguments), this.placement = "top", this.cleanup = null, this.isHoveringTrigger = !1, this.isHoveringTooltip = !1, this.hideTimeout = null;
+  }
+  firstUpdated() {
+    const e = this.triggerSlot.assignedElements()[0], t = this.tooltipSlot.assignedElements()[0];
+    !e || !t || (e.addEventListener("mouseenter", () => {
+      this.isHoveringTrigger = !0, this.clearHideTimeout(), this.showTooltip(e, t);
+    }), e.addEventListener("mouseleave", () => {
+      this.isHoveringTrigger = !1, this.startHideTimeout();
+    }), e.addEventListener("focus", () => this.showTooltip(e, t)), e.addEventListener("blur", () => this.hideTooltip(t)), e.addEventListener("keydown", (i) => {
+      i.key === "Escape" && this.hideTooltip(t);
+    }), t.addEventListener("mouseenter", () => {
+      this.isHoveringTooltip = !0, this.clearHideTimeout();
+    }), t.addEventListener("mouseleave", () => {
+      this.isHoveringTooltip = !1, this.startHideTimeout();
+    }));
+  }
+  startHideTimeout() {
+    this.clearHideTimeout(), this.hideTimeout = window.setTimeout(() => {
+      if (!this.isHoveringTrigger && !this.isHoveringTooltip) {
+        const e = this.tooltipSlot.assignedElements()[0];
+        e && this.hideTooltip(e);
+      }
+    }, 200);
+  }
+  clearHideTimeout() {
+    this.hideTimeout !== null && (clearTimeout(this.hideTimeout), this.hideTimeout = null);
+  }
+  async showTooltip(e, t) {
+    t.setAttribute("data-visible", "");
+    let i = t.querySelector(".arrow");
+    i || (i = document.createElement("div"), i.classList.add("arrow"), t.appendChild(i)), this.cleanup = T(e, t, async () => {
+      const s = await w(e, t, {
+        placement: this.placement,
+        middleware: [x(8), y(), b({ padding: 5 }), H({ element: i })]
+      }), { x: o, y: a, placement: l, middlewareData: u } = s, { arrow: p } = u;
+      if (Object.assign(t.style, {
+        left: `${o}px`,
+        top: `${a}px`
+      }), p) {
+        const { x: d, y: m } = p;
+        Object.assign(i.style, {
+          left: d != null ? `${d}px` : "",
+          top: m != null ? `${m}px` : ""
+        });
+      }
+      i.setAttribute("data-placement", l);
+    });
+  }
+  hideTooltip(e) {
+    var t;
+    e.removeAttribute("data-visible"), (t = this.cleanup) == null || t.call(this), this.cleanup = null;
+  }
+  render() {
+    return c`
+            <slot name="trigger"></slot>
+            <slot name="tooltip"></slot>
+        `;
+  }
+};
+r.styles = E`
+        :host {
+            position: relative;
+            display: inline-block;
+        }
+
+        ::slotted([slot='tooltip']) {
+            position: absolute;
+            z-index: 9999;
+            background: #111;
+            color: #fff;
+            padding: 6px 10px;
+            border-radius: 4px;
+            font-size: 12px;
+            opacity: 0;
+            transition: opacity 0.2s ease;
+            pointer-events: none;
+        }
+
+        ::slotted([slot='tooltip'][data-visible]) {
+            opacity: 1;
+            pointer-events: auto;
+        }
+
+        .arrow {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            background: inherit;
+            transform: rotate(45deg);
+        }
+
+        .arrow[data-placement^='top'] {
+            bottom: -4px;
+        }
+
+        .arrow[data-placement^='bottom'] {
+            top: -4px;
+        }
+
+        .arrow[data-placement^='left'] {
+            right: -4px;
+        }
+
+        .arrow[data-placement^='right'] {
+            left: -4px;
+        }
+    `;
+n([
+  v({ type: String })
+], r.prototype, "placement", 2);
+n([
+  h('slot[name="trigger"]')
+], r.prototype, "triggerSlot", 2);
+n([
+  h('slot[name="tooltip"]')
+], r.prototype, "tooltipSlot", 2);
+r = n([
+  g("perf-tooltip")
+], r);
+export {
+  r as PerfTooltip
+};

package/dist/shared/simple-tooltip.js

@@ -1,15 +1,17 @@
-import { css as m, LitElement as f, html as u } from "lit";
-import { customElement as g } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
-import { property as a } from "../node_modules/@lit/reactive-element/decorators/property.js";
-import { directive as v, Directive as w } from "../node_modules/lit-html/directive.js";
-import { render as p } from "../node_modules/lit-html/lit-html.js";
-import { computePosition as y, offset as E, flip as b, shift as x, size as T, arrow as _ } from "@floating-ui/dom";
-var k = Object.defineProperty, L = Object.getOwnPropertyDescriptor, h = (i, t, n, r) => {
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { render as p, html as d } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as f } from "../node_modules/lit-element/lit-element.js";
+import { customElement as u } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as h } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import { directive as g, Directive as v } from "../node_modules/lit-html/directive.js";
+import { computePosition as w, offset as y, flip as E, shift as b, size as x, arrow as T } from "../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { css as _ } from "../node_modules/@lit/reactive-element/css-tag.js";
+var k = Object.defineProperty, L = Object.getOwnPropertyDescriptor, a = (i, t, n, r) => {
   for (var o = r > 1 ? void 0 : r ? L(t, n) : t, e = i.length - 1, s; e >= 0; e--)
     (s = i[e]) && (o = (r ? s(t, n, o) : s(o)) || o);
   return r && o && k(t, n, o), o;
 };
-const c = ["pointerenter", "mouseenter"], d = ["pointerleave", "mouseleave", "blur", "keydown", "click", "scroll"];
+const m = ["pointerenter", "mouseenter"], c = ["pointerleave", "mouseleave", "blur", "keydown", "click", "scroll"];
 let l = class extends f {
   constructor() {
     super(...arguments), this.showing = !1, this.placement = "top", this.offset = 8, this.openDelayMs = 300, this._target = null, this.openTimeout = null, this.isHoveringTarget = !1, this.scheduleShow = () => {
@@ -17,15 +19,15 @@ let l = class extends f {
         this._target && this.isHoveringTarget && this.showTooltipNow();
       }, this.openDelayMs);
     }, this.showTooltipNow = () => {
-      this.style.removeProperty("display"), this.style.zIndex = "100000", this.showing = !0, !(!this.target || !this.arrowElement) && y(this.target, this, {
+      this.style.removeProperty("display"), this.style.zIndex = "100000", this.showing = !0, !(!this.target || !this.arrowElement) && w(this.target, this, {
         placement: this.placement,
         strategy: "absolute",
         middleware: [
-          E(this.offset),
-          b(),
+          y(this.offset),
+          E(),
+          b({ padding: 8 }),
           x({ padding: 8 }),
-          T({ padding: 8 }),
-          _({ element: this.arrowElement })
+          T({ element: this.arrowElement })
         ]
       }).then(({ x: i, y: t, placement: n, middlewareData: r }) => {
         r.hide && Object.assign(this.style, {
@@ -62,11 +64,11 @@ let l = class extends f {
     return this._target;
   }
   set target(i) {
-    this._target && (c.forEach((t) => {
+    this._target && (m.forEach((t) => {
       this._target.removeEventListener(t, this.scheduleShow), this._target.removeEventListener(t, this.markHovering);
-    }), d.forEach((t) => this._target.removeEventListener(t, this.hide))), i && (c.forEach((t) => {
+    }), c.forEach((t) => this._target.removeEventListener(t, this.hide))), i && (m.forEach((t) => {
       i.addEventListener(t, this.scheduleShow), i.addEventListener(t, this.markHovering);
-    }), d.forEach((t) => {
+    }), c.forEach((t) => {
       i.addEventListener(t, this.markNotHovering), i.addEventListener(t, this.hide);
     })), this._target = i;
   }
@@ -77,13 +79,13 @@ let l = class extends f {
     this.arrowElement = this.shadowRoot.getElementById("arrow");
   }
   render() {
-    return u`
+    return d`
             <div id="arrow"></div>
             <slot></slot>
         `;
   }
 };
-l.styles = m`
+l.styles = _`
         :host {
             position: absolute;
             display: inline-block;
@@ -127,22 +129,22 @@ l.styles = m`
             max-height: 70vh;
         }
     `;
-h([
-  a({ type: Boolean, reflect: !0 })
+a([
+  h({ type: Boolean, reflect: !0 })
 ], l.prototype, "showing", 2);
-h([
-  a({ type: String, reflect: !0 })
+a([
+  h({ type: String, reflect: !0 })
 ], l.prototype, "placement", 2);
-h([
-  a({ type: Number })
+a([
+  h({ type: Number })
 ], l.prototype, "offset", 2);
-h([
-  a({ type: Number })
+a([
+  h({ type: Number })
 ], l.prototype, "openDelayMs", 2);
-l = h([
-  g("simple-tooltip")
+l = a([
+  u("simple-tooltip")
 ], l);
-class H extends w {
+class H extends v {
   constructor() {
     super(...arguments), this.initialized = !1;
   }
@@ -165,8 +167,8 @@ class H extends w {
     this.tooltip && (this.tooltip.openDelayMs = this.delay, this.tooltip.placement = this.placement, p(this.content, this.tooltip, this.part.options), document.body.contains(e) || this.tooltip.hide());
   }
 }
-const P = v(H);
+const j = g(H);
 export {
   l as SimpleTooltip,
-  P as tooltip
+  j as tooltip
 };

package/dist/shared/styles/button-shared-styles.js

@@ -1,5 +1,8 @@
-import { css as o } from "lit";
-const t = o`
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import { css as o } from "../../node_modules/@lit/reactive-element/css-tag.js";
+const e = o`
     button {
         font-family: inherit;
         border-radius: var(--border-radius-small, 0.5rem);
@@ -198,5 +201,5 @@ const t = o`
     }
 `;
 export {
-  t as default
+  e as default
 };

package/dist/styles.js

@@ -0,0 +1,174 @@
+import "./node_modules/@lit/reactive-element/reactive-element.js";
+import "./node_modules/lit-html/lit-html.js";
+import "./node_modules/lit-element/lit-element.js";
+import { css as o } from "./node_modules/@lit/reactive-element/css-tag.js";
+const n = o`
+    :host {
+        --breakpoint-sm: 600px;
+        --breakpoint-md: 960px;
+        --breakpoint-lg: 1280px;
+        --breakpoint-xl: 1536px;
+
+        --color-primary-main: #76b703;
+        --color-primary-light: #f0fadf;
+        --color-primary-dark: #5f9402;
+        --color-primary-disabled: #d0d3db;
+
+        --color-secondary-main: #111827;
+        --color-secondary-light: #d0d3db;
+        --color-secondary-dark: #010204;
+
+        --color-info-main: #00687e;
+        --color-info-light: #cbf6ff;
+        --color-info-dark: #004452;
+
+        --color-warning-main: #875900;
+        --color-warning-light: #ffe1a8;
+        --color-warning-dark: #684500;
+
+        --color-error-main: #ca2d0a;
+        --color-error-light: #ffd6cd;
+        --color-error-dark: #a52103;
+
+        --color-success-main: #76b703;
+        --color-success-light: #f0fadf;
+        --color-success-dark: #5f9402;
+
+        --color-divider: #d0d3db;
+
+        --text-primary: #111827;
+        --text-secondary: #5d6371;
+        --text-disabled: #d0d3db;
+
+        --background-paper: #ffffff;
+        --background-default: #eff3f4;
+
+        --border-radius-small: 0.5rem;
+        --border-radius-medium: 0.75rem;
+
+        --box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+
+        --section-padding: 0.75rem 1rem;
+
+        font-family: Inter, sans-serif;
+        box-sizing: border-box;
+
+        *,
+        *::before,
+        *::after {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+
+        article,
+        aside,
+        details,
+        figcaption,
+        figure,
+        footer,
+        header,
+        hgroup,
+        main,
+        menu,
+        nav,
+        section {
+            display: block;
+        }
+
+        ol,
+        ul {
+            list-style: none;
+        }
+        a {
+            text-decoration: none;
+            color: inherit;
+        }
+
+        img,
+        video {
+            max-width: 100%;
+            height: auto;
+        }
+
+        button,
+        input,
+        optgroup,
+        select,
+        textarea {
+            font: inherit;
+            color: inherit;
+            margin: 0;
+            border: none;
+            background: none;
+            padding: 0;
+            appearance: none;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+        }
+
+        table {
+            border-collapse: collapse;
+            border-spacing: 0;
+            width: 100%;
+        }
+
+        html {
+            font-size: 100%; /* 16px base */
+            line-height: 1.5;
+            scroll-behavior: smooth;
+            -webkit-text-size-adjust: 100%; /* Prevent font scaling in Safari */
+        }
+
+        body {
+            font-family:
+                system-ui,
+                -apple-system,
+                BlinkMacSystemFont,
+                'Segoe UI',
+                Roboto,
+                Oxygen,
+                Ubuntu,
+                Cantarell,
+                'Open Sans',
+                'Helvetica Neue',
+                sans-serif;
+            line-height: 1.6;
+            color: #333;
+            background-color: #fff;
+        }
+
+        strong {
+            font-weight: bold;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            font-size: inherit;
+            font-weight: inherit;
+        }
+
+        blockquote,
+        q {
+            quotes: none;
+        }
+
+        blockquote::before,
+        blockquote::after,
+        q::before,
+        q::after {
+            content: '';
+        }
+    }
+`;
+export {
+  n as default
+};

package/dist/utils/custom-filters.js

@@ -1,17 +1,18 @@
-import { DateTime as M } from "luxon";
-const i = (e, r, y) => {
+import M from "../node_modules/luxon/src/datetime.js";
+import "../node_modules/luxon/src/duration.js";
+const l = (e, r, y) => {
   const t = e.getValue(r);
   if (!t) return !1;
   const s = a(t), d = y.startDate, n = y.endDate;
   return d && n ? s >= d && s <= n : d ? s >= d : n ? s <= n : !0;
 };
-function l(e, r, y) {
+function u(e, r, y) {
   const t = e.getValue(r);
   if (!t) return !1;
   const s = a(t), d = y;
   return !s || !d ? !1 : s === d;
 }
-const u = (e, r, y) => {
+const f = (e, r, y) => {
   const t = e.getValue(r);
   return t ? y.includes(t) : !1;
 };
@@ -43,7 +44,7 @@ function a(e) {
   return (!y || !y.isValid) && (y = M.fromISO(e)), y.isValid ? y.toJSDate().toISOString() : null;
 }
 export {
-  l as dateFilterFn,
-  i as dateRangeFilterFn,
-  u as multiselectFilterFn
+  u as dateFilterFn,
+  l as dateRangeFilterFn,
+  f as multiselectFilterFn
 };

package/dist/utils/date.js

@@ -1,14 +1,15 @@
-import { DateTime as t } from "luxon";
-const m = (r, e, n = !1, o) => {
+import t from "../node_modules/luxon/src/datetime.js";
+import "../node_modules/luxon/src/duration.js";
+const u = (r, e, n = !1, o) => {
   if (r === null)
     return null;
   if (r === "")
     return "";
-  const f = n ? `${o} HH:mm` : `${o}`, i = new Date(r);
-  return isNaN(i.getTime()) ? "Invalid date" : o ? t.fromISO(r).toFormat(f) : t.fromISO(r).setLocale(e).toLocaleString(
+  const i = n ? `${o} HH:mm` : `${o}`, f = new Date(r);
+  return isNaN(f.getTime()) ? "Invalid date" : o ? t.fromISO(r).toFormat(i) : t.fromISO(r).setLocale(e).toLocaleString(
     n ? t.DATETIME_SHORT : void 0
   );
 };
 export {
-  m as formatDate
+  u as formatDate
 };

package/dist/utils/getOperatorByType.js

@@ -1,5 +1,6 @@
-import { msg as e } from "@lit/localize";
-function n(l) {
+import { msg as e } from "../node_modules/@lit/localize/init/install.js";
+import "../node_modules/@lit/localize/init/runtime.js";
+function v(l) {
   switch (l) {
     case "string":
       return [
@@ -47,5 +48,5 @@ function n(l) {
   }
 }
 export {
-  n as getOperatorsByColumnType
+  v as getOperatorsByColumnType
 };

package/dist/utils/localization.js

@@ -1,4 +1,4 @@
-import { configureLocalization as s } from "@lit/localize";
+import { configureLocalization as s } from "../node_modules/@lit/localize/init/runtime.js";
 import * as o from "../assets/generated/locales/en.js";
 import * as t from "../assets/generated/locales/pl.js";
 import * as a from "../assets/generated/locales/de.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "overview-components",
-  "version": "1.0.75",
+  "version": "1.0.77",
   "description": "A reusable design Lit components for case overview section.",
   "main": "dist/index.js",
   "module": "dist/index.js",