overview-components 1.0.92 → 1.0.95

package/dist/shared/lit-button.js

@@ -0,0 +1,142 @@
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as r } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as d } 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 e } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import m from "./styles/button-shared-styles.js";
+import { css as h } from "../node_modules/@lit/reactive-element/css-tag.js";
+var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (s, n, a, l) => {
+  for (var o = l > 1 ? void 0 : l ? f(n, a) : n, p = s.length - 1, c; p >= 0; p--)
+    (c = s[p]) && (o = (l ? c(n, a, o) : c(o)) || o);
+  return l && o && b(n, a, o), o;
+};
+let t = class extends d {
+  constructor() {
+    super(...arguments), this.variant = "contained", this.size = "medium", this.label = "Button", this.fullWidth = !1, this.disabled = !1, this.count = void 0, this.active = !1, this.isLoading = !1;
+  }
+  render() {
+    const s = `button--${this.size} button--${this.variant} ${this.fullWidth ? "button--fullWidth" : ""} ${this.active ? "active" : ""}`, n = this.count !== void 0 && this.count !== null && this.count >= 0;
+    return r`
+            <button ?disabled=${this.disabled} @click=${this.onClick} class=${s}>
+                <div class="button--content">
+                    ${this.isLoading ? r` <lit-loader size="small" class="button--loader"></lit-loader> ` : null}
+
+                    <div
+                        class="button-inner"
+                        style="visibility: ${this.isLoading ? "hidden" : "visible"};
+                    "
+                    >
+                        <slot name="start-icon">
+                            ${this.icon ? r`<lit-icon
+                                      class="start-icon"
+                                      size="1.25rem"
+                                      icon="${this.icon}"
+                                  ></lit-icon>` : ""}
+                        </slot>
+                        ${this.label}
+                        ${n ? r`<lit-pill count=${this.count}></lit-pill>` : ""}
+                    </div>
+                </div>
+            </button>
+        `;
+  }
+};
+t.styles = [
+  // styles,
+  m,
+  h`
+            /* Basic button styles */
+            button {
+                line-height: 1.5rem;
+                flex-direction: row;
+                justify-content: center;
+            }
+
+            /* Size Variants */
+            .button--small {
+                -webkit-padding: 0.375rem 1rem;
+                padding: 0.1875rem 0.375rem;
+                font-size: 11px;
+            }
+            .button--medium {
+                font-size: 0.75rem;
+                font-weight: 500;
+                -webkit-padding: 0.375rem 0.75rem;
+                padding: 0.375rem 0.75rem;
+            }
+            .button--large {
+                font-weight: 700;
+                -webkit-padding: 0.75rem 1.5rem;
+                padding: 0.75rem 1.5rem;
+                font-size: 0.875rem;
+            }
+
+            /* FullWidth style */
+            .button--fullWidth {
+                width: 100%;
+                display: block;
+            }
+            ::slotted([slot='start-icon']),
+            .start-icon {
+                //margin-right: 8px;
+                font-size: 1.25rem !important;
+            }
+
+            .button--content {
+                position: relative;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            .button--loader {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%);
+            }
+
+            .button-inner {
+                display: inline-flex;
+                align-items: center;
+                gap: 0.5rem;
+                visibility: visible;
+            }
+        `
+];
+i([
+  e({ type: String })
+], t.prototype, "variant", 2);
+i([
+  e({ type: String })
+], t.prototype, "size", 2);
+i([
+  e({ type: String })
+], t.prototype, "label", 2);
+i([
+  e({ type: String })
+], t.prototype, "icon", 2);
+i([
+  e({ type: Boolean })
+], t.prototype, "fullWidth", 2);
+i([
+  e({ type: Boolean })
+], t.prototype, "disabled", 2);
+i([
+  e({ type: Number })
+], t.prototype, "count", 2);
+i([
+  e({ type: Function })
+], t.prototype, "onClick", 2);
+i([
+  e({ type: Boolean })
+], t.prototype, "active", 2);
+i([
+  e({ type: Boolean })
+], t.prototype, "isLoading", 2);
+t = i([
+  u("lit-button")
+], t);
+export {
+  t as LitButton
+};

package/dist/shared/lit-progress-bar.js

@@ -0,0 +1,83 @@
+import { customElement as c } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as n } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as g } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as d } from "../node_modules/lit-element/lit-element.js";
+import { css as m } from "../node_modules/@lit/reactive-element/css-tag.js";
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (e, t, i, o) => {
+  for (var r = o > 1 ? void 0 : o ? v(t, i) : t, a = e.length - 1, p; a >= 0; a--)
+    (p = e[a]) && (r = (o ? p(t, i, r) : p(r)) || r);
+  return o && r && f(t, i, r), r;
+};
+let s = class extends d {
+  constructor() {
+    super(...arguments), this.label = "", this.progress = 0;
+  }
+  render() {
+    const e = Math.min(100, Math.max(0, this.progress));
+    return g`
+            <div class="container">
+                <div class="label">${this.label}</div>
+                <div class="progress-bar-container">
+                    <div class="percentage">${e}%</div>
+                    <div class="progress-bar">
+                        <div class="progress-fill" style="width: ${e}%"></div>
+                    </div>
+                </div>
+            </div>
+        `;
+  }
+};
+s.styles = [
+  m`
+            .container {
+                gap: 4px;
+            }
+
+            .label {
+                font-weight: 500;
+                font-size: 14px;
+                color: var(--text-secondary, #5d6371);
+                gap: 10px;
+                line-height: 24px;
+            }
+
+            .progress-bar-container {
+                display: flex;
+                align-items: center;
+                gap: 4px;
+            }
+
+            .progress-bar {
+                display: flex;
+                width: 100%;
+                height: 12px;
+                border-radius: 8px;
+                background-color: var(--color-primary-light, #f0fadf);
+                overflow: hidden;
+            }
+
+            .progress-fill {
+                height: 100%;
+                background-color: var(--color-primary-main, #76b703);
+                transition: width 0.05s ease-in-out;
+            }
+
+            .percentage {
+                font-weight: 500;
+                font-size: 14px;
+            }
+        `
+];
+l([
+  n({ type: String })
+], s.prototype, "label", 2);
+l([
+  n({ type: Number })
+], s.prototype, "progress", 2);
+s = l([
+  c("lit-progress-bar")
+], s);
+export {
+  s as LitProgressBar
+};

package/dist/shared/simple-tooltip.js

@@ -0,0 +1,174 @@
+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 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 = () => {
+      this.clearOpenTimeout(), this.openTimeout = window.setTimeout(() => {
+        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) && w(this.target, this, {
+        placement: this.placement,
+        strategy: "absolute",
+        middleware: [
+          y(this.offset),
+          E(),
+          b({ padding: 8 }),
+          x({ padding: 8 }),
+          T({ element: this.arrowElement })
+        ]
+      }).then(({ x: i, y: t, placement: n, middlewareData: r }) => {
+        r.hide && Object.assign(this.style, {
+          display: r.hide.referenceHidden || !this.showing ? "none" : "block"
+        }), Object.assign(this.style, {
+          left: `${i}px`,
+          top: `${t}px`
+        });
+        const o = {
+          top: "bottom",
+          bottom: "top",
+          left: "right",
+          right: "left"
+        }[n.split("-")[0]], { x: e, y: s } = r.arrow || {};
+        Object.assign(this.arrowElement.style, {
+          left: e != null ? `${e}px` : "",
+          top: s != null ? `${s}px` : "",
+          right: "",
+          bottom: "",
+          [o]: "-4px"
+        });
+      });
+    }, this.clearOpenTimeout = () => {
+      this.openTimeout !== null && (clearTimeout(this.openTimeout), this.openTimeout = null);
+    }, this.markHovering = () => {
+      this.isHoveringTarget = !0;
+    }, this.markNotHovering = () => {
+      this.isHoveringTarget = !1, this.clearOpenTimeout();
+    }, this.hide = () => {
+      this.showing = !1, this.style.display = "none";
+    };
+  }
+  get target() {
+    return this._target;
+  }
+  set target(i) {
+    this._target && (m.forEach((t) => {
+      this._target.removeEventListener(t, this.scheduleShow), this._target.removeEventListener(t, this.markHovering);
+    }), c.forEach((t) => this._target.removeEventListener(t, this.hide))), i && (m.forEach((t) => {
+      i.addEventListener(t, this.scheduleShow), i.addEventListener(t, this.markHovering);
+    }), c.forEach((t) => {
+      i.addEventListener(t, this.markNotHovering), i.addEventListener(t, this.hide);
+    })), this._target = i;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.style.display = "none";
+  }
+  firstUpdated() {
+    this.arrowElement = this.shadowRoot.getElementById("arrow");
+  }
+  render() {
+    return d`
+            <div id="arrow"></div>
+            <slot></slot>
+        `;
+  }
+};
+l.styles = _`
+        :host {
+            position: absolute;
+            display: inline-block;
+            background: black;
+            color: white;
+            font-size: 12px;
+            padding: 4px 8px;
+            border-radius: 6px;
+            line-height: 1.5;
+            pointer-events: none;
+            z-index: 9999;
+            opacity: 0;
+            transform: scale(0.85);
+            transition:
+                opacity 0.2s ease,
+                transform 0.2s ease;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            max-width: 300px;
+            width: max-content;
+        }
+
+        :host([showing]) {
+            opacity: 1;
+            transform: scale(1);
+        }
+
+        #arrow {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            background: black;
+            transform: rotate(45deg);
+        }
+        slot {
+            display: -webkit-box;
+            -webkit-line-clamp: 30; /* Limit to 3 lines */
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            word-wrap: break-word;
+            max-height: 70vh;
+        }
+    `;
+a([
+  h({ type: Boolean, reflect: !0 })
+], l.prototype, "showing", 2);
+a([
+  h({ type: String, reflect: !0 })
+], l.prototype, "placement", 2);
+a([
+  h({ type: Number })
+], l.prototype, "offset", 2);
+a([
+  h({ type: Number })
+], l.prototype, "openDelayMs", 2);
+l = a([
+  u("simple-tooltip")
+], l);
+class H extends v {
+  constructor() {
+    super(...arguments), this.initialized = !1;
+  }
+  disconnect() {
+    this.tooltip && (this.tooltip.hide(), this.tooltip.parentElement && this.tooltip.parentElement.removeChild(this.tooltip), this.tooltip = void 0, this.initialized = !1);
+  }
+  render() {
+  }
+  // required override
+  update(t, [n, r = "top", o = 200]) {
+    this.part = t, this.content = n, this.placement = r, this.delay = o;
+    const e = this.part.element;
+    if (!this.initialized) {
+      this.initialized = !0;
+      const s = () => {
+        this.tooltip || (this.tooltip = document.createElement("simple-tooltip"), this.tooltip.placement = this.placement, this.tooltip.openDelayMs = this.delay, document.body.appendChild(this.tooltip), p(this.content, this.tooltip, this.part.options)), this.tooltip.target = e, this.tooltip.openDelayMs = this.delay, this.tooltip.placement = this.placement, this.tooltip.scheduleShow(), e.removeEventListener("mouseenter", s), e.removeEventListener("pointerenter", s);
+      };
+      e.addEventListener("mouseenter", s), e.addEventListener("pointerenter", s);
+    }
+    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 j = g(H);
+export {
+  l as SimpleTooltip,
+  j as tooltip
+};

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

@@ -0,0 +1,205 @@
+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);
+        cursor: pointer;
+        transition:
+            background-color 0.3s,
+            color 0.3s,
+            border 0.3s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    /* Disabled button state */
+
+    .button--contained:disabled {
+        background-color: var(--color-primary-disabled, #d0d3db);
+        cursor: not-allowed;
+    }
+
+    .button--outlined:disabled {
+        color: var(--color-primary-disabled);
+        border: 1px solid var(--color-primary-disabled, #d0d3db);
+        cursor: not-allowed;
+    }
+
+    .button--text:disabled {
+        color: var(--color-primary-disabled, #d0d3db);
+        cursor: not-allowed;
+    }
+
+    .button--dashed:disabled {
+        color: var(--color-primary-disabled, #d0d3db);
+        cursor: not-allowed;
+        border: 1px dashed var(--color-primary-disabled, #d0d3db);
+    }
+
+    .button--error:disabled {
+        background-color: var(--color-primary-disabled, #d0d3db);
+        cursor: not-allowed;
+    }
+
+    .button--ai:disabled {
+        background: var(--color-primary-disabled, #d0d3db);
+        cursor: not-allowed;
+    }
+
+    .button--outlined-ai:disabled {
+        color: var(--color-primary-disabled);
+        cursor: not-allowed;
+    }
+
+    .button--outlined-ai:disabled::before {
+        background: var(--color-primary-disabled);
+    }
+
+    .button--outlined-ai:disabled .button-inner {
+        background: none;
+        color: var(--color-primary-disabled);
+        -webkit-text-fill-color: var(--color-primary-disabled);
+        -webkit-background-clip: border-box;
+    }
+
+    /* Button Variants */
+    .button--outlined {
+        color: var(--text-primary);
+        border: 1px solid var(--text-primary, #111827);
+        background-color: var(--background-paper, #fff);
+    }
+    .button--outlined:not(:disabled):hover {
+        background-color: var(--color-primary-light, #f0fadf);
+    }
+
+    .button--contained {
+        border: none;
+        color: #fff;
+        background-color: var(--color-primary-main, #76b703);
+    }
+    .button--contained:not(:disabled):hover {
+        background-color: var(--color-primary-dark, #5f9402);
+    }
+
+    .button--error {
+        border: none;
+        color: var(--color-error-light, #ffd6cd);
+        background-color: var(--color-error-main, #ca2d0a);
+    }
+
+    .button--error:not(:disabled):hover {
+        background-color: var(--color-error-dark, #a52103);
+    }
+
+    .button--ai {
+        border: none;
+        color: #fff;
+        background: linear-gradient(to right, #573493, #e78047);
+    }
+
+    .button--ai:not(:disabled):hover {
+        opacity: 80%;
+    }
+
+    .button--outlined-ai {
+        position: relative;
+        background-color: var(--background-paper, #fff);
+        border: none;
+        z-index: 0;
+        color: transparent;
+
+        background-image: linear-gradient(to right, #573493, #e78047);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+
+    .button--outlined-ai::before {
+        content: '';
+        position: absolute;
+        top: -1px;
+        left: -1px;
+        right: -1px;
+        bottom: -1px;
+        z-index: -1;
+        background: linear-gradient(to right, #573493, #e78047);
+        border-radius: inherit;
+        padding: 1px;
+        -webkit-mask:
+            linear-gradient(#fff 0 0) content-box,
+            linear-gradient(#fff 0 0);
+        mask-composite: exclude;
+    }
+    .button--outlined-ai .button-inner {
+        background: linear-gradient(to right, #573493, #e78047);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .button--outlined-ai:not(:disabled) .out-ai {
+        color: #573493;
+    }
+
+    .button--outlined-ai:not(:disabled) .start-icon {
+        color: #573493;
+    }
+
+    .button--outlined-ai:not(:disabled):hover {
+        opacity: 80%;
+    }
+
+    .button--text {
+        border: none;
+        color: var(--text-primary, #111827);
+        background-color: var(--background-paper, #fff);
+    }
+
+    .button--text:not(:disabled):hover {
+        background-color: var(--color-primary-light, #f0fadf);
+    }
+
+    .button--dashed {
+        position: relative;
+        border: none;
+        color: var(--text-primary, #111827);
+        background-color: var(--background-paper, #fff);
+        display: flex !important;
+    }
+
+    .button--dashed::before {
+        content: '';
+        top: 1px;
+        left: 1px;
+        right: 1px;
+        bottom: 1px;
+        position: absolute;
+        border: 1px dashed var(--color-divider, #d0d3db);
+        border-radius: 6px; /* 2px less than main radius */
+        box-sizing: border-box;
+        z-index: 1;
+    }
+
+    .button--dashed:not(:disabled):hover {
+        background-color: var(--color-primary-light, #f0fadf);
+    }
+
+    .button--text.active {
+        background-color: var(--color-primary-light, #f0fadf);
+    }
+    .button--dashed.active {
+        background-color: var(--color-primary-light, #f0fadf);
+    }
+    .button--inherit {
+        background-color: inherit;
+        color: var(--text-primary, #111827);
+        border: none;
+    }
+`;
+export {
+  e as default
+};

package/dist/utils/currency.js

@@ -0,0 +1,13 @@
+const e = (r, t) => {
+  if (r === null)
+    return null;
+  if (r === "")
+    return "";
+  const n = typeof r == "string" ? parseFloat(r) : r;
+  return isNaN(n) ? "Invalid number" : new Intl.NumberFormat(t, {
+    style: "decimal"
+  }).format(n);
+};
+export {
+  e as formatCurrency
+};

package/dist/utils/custom-filters.js

@@ -0,0 +1,50 @@
+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 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 f = (e, r, y) => {
+  const t = e.getValue(r);
+  return t ? y.includes(t) : !1;
+};
+function a(e) {
+  if (!e) return null;
+  const r = [
+    "yyyy-MM-dd",
+    "dd-MM-yyyy",
+    "MM-dd-yyyy",
+    "d. M. yyyy",
+    "d. M. yyyy.",
+    "d.M.yyyy",
+    "yyyy/MM/dd",
+    "dd/MM/yyyy",
+    "M/d/yyyy",
+    "MM/dd/yyyy",
+    "dd MMMM yyyy",
+    "yyyy-MM-dd'T'HH:mm:ss",
+    "yyyy-MM-dd'T'HH:mm:ss.SSS",
+    "yyyy-MM-dd'T'HH:mm:ss.SSSZ",
+    "dd.MM.yyyy",
+    "MM.dd.yyyy",
+    "EEE, d MMM yyyy",
+    "EEE, d MMM yyyy HH:mm:ss Z"
+  ];
+  let y;
+  for (const t of r)
+    if (y = M.fromFormat(e, t), y.isValid) break;
+  return (!y || !y.isValid) && (y = M.fromISO(e)), y.isValid ? y.toJSDate().toISOString() : null;
+}
+export {
+  u as dateFilterFn,
+  l as dateRangeFilterFn,
+  f as multiselectFilterFn
+};

package/dist/utils/date.js

@@ -0,0 +1,15 @@
+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 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 {
+  u as formatDate
+};