@mhmo91/schmancy 0.7.7 → 0.8.3

package/dist/pills-C3fIvfn8.js

@@ -0,0 +1,346 @@
+import { css as z, html as u } from "lit";
+import { property as l, state as f, customElement as j } from "lit/decorators.js";
+import { createRef as L, ref as R } from "lit/directives/ref.js";
+import "rxjs";
+import "rxjs/operators";
+import "lit/directives/class-map.js";
+import "lit/directives/style-map.js";
+import "./tailwind.mixin-Ddt05Frc.js";
+import { $ as W } from "./litElement.mixin-Wcu4yIIs.js";
+import { repeat as S } from "lit/directives/repeat.js";
+function U(e, t, s, a, i) {
+  const r = i * i, h = r * i;
+  return { x: 0.5 * (2 * t.x + (-e.x + s.x) * i + (2 * e.x - 5 * t.x + 4 * s.x - a.x) * r + (-e.x + 3 * t.x - 3 * s.x + a.x) * h), y: 0.5 * (2 * t.y + (-e.y + s.y) * i + (2 * e.y - 5 * t.y + 4 * s.y - a.y) * r + (-e.y + 3 * t.y - 3 * s.y + a.y) * h) };
+}
+function F(e, t) {
+  if (e.startsWith("rgb")) {
+    const a = e.match(/[\d.]+/g);
+    if (a && a.length >= 3) return `rgba(${a[0]}, ${a[1]}, ${a[2]}, ${t})`;
+  }
+  let s = e.replace("#", "");
+  return s.length === 3 && (s = s.split("").map((a) => a + a).join("")), `rgba(${parseInt(s.substring(0, 2), 16)}, ${parseInt(s.substring(2, 4), 16)}, ${parseInt(s.substring(4, 6), 16)}, ${t})`;
+}
+function H(e) {
+  return 1 - Math.pow(1 - e, 3);
+}
+var K = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, p = (e, t, s, a) => {
+  for (var i, r = a > 1 ? void 0 : a ? Q(t, s) : t, h = e.length - 1; h >= 0; h--) (i = e[h]) && (r = (a ? i(t, s, r) : i(r)) || r);
+  return a && r && K(t, s, r), r;
+};
+let c = class extends W(z`
+	:host {
+		display: block;
+	}
+`) {
+  constructor() {
+    super(...arguments), this.data = [], this.height = 200, this.showGrid = !0, this.showLabels = !0, this.showTooltip = !0, this.peakCount = 3, this.animationDuration = 800, this.animated = !0, this.valuePrefix = "", this.valueSuffix = "", this.valueDecimals = 2, this.theme = {}, this.tooltipData = { visible: !1, x: 0, y: 0, label: "", value: 0 }, this.animationProgress = 0, this.isVisible = !1, this.canvasRef = L(), this.containerRef = L(), this.animationFrameId = null, this.observer = null, this.processedData = [], this.resizeObserver = null, this.handlePointerMove = (e) => {
+      if (this.processedData.length === 0 || !this.showTooltip) return;
+      const t = this.canvasRef.value;
+      if (!t) return;
+      const s = t.getBoundingClientRect(), a = e.clientX - s.left;
+      let i = null, r = 1 / 0;
+      this.processedData.forEach((h) => {
+        const y = Math.abs(h.x - a);
+        y < r && (r = y, i = h);
+      }), this.tooltipData = i && r < 30 ? { visible: !0, x: i.x, y: i.y, label: i.label, value: i.value, metadata: i.metadata } : { ...this.tooltipData, visible: !1 };
+    }, this.handlePointerLeave = () => {
+      this.tooltipData = { ...this.tooltipData, visible: !1 };
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setupIntersectionObserver();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.cleanup();
+  }
+  cleanup() {
+    this.animationFrameId !== null && (cancelAnimationFrame(this.animationFrameId), this.animationFrameId = null), this.observer && (this.observer.disconnect(), this.observer = null), this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null);
+  }
+  setupIntersectionObserver() {
+    this.observer = new IntersectionObserver((e) => {
+      const t = e[0];
+      t.isIntersecting && !this.isVisible ? (this.isVisible = !0, this.animated ? this.startAnimation() : (this.animationProgress = 1, this.drawChart())) : t.isIntersecting || (this.isVisible = !1, this.animationFrameId !== null && (cancelAnimationFrame(this.animationFrameId), this.animationFrameId = null));
+    }, { threshold: 0.1 });
+  }
+  updated(e) {
+    super.updated(e), this.containerRef.value && this.observer && this.observer.observe(this.containerRef.value), this.canvasRef.value && !this.resizeObserver && (this.resizeObserver = new ResizeObserver(() => {
+      this.drawChart();
+    }), this.resizeObserver.observe(this.canvasRef.value)), e.has("data") && this.isVisible && (this.animated ? (this.animationProgress = 0, this.startAnimation()) : (this.animationProgress = 1, this.drawChart())), (e.has("theme") || e.has("showGrid") || e.has("showLabels") || e.has("peakCount")) && this.isVisible && this.drawChart();
+  }
+  startAnimation() {
+    const e = performance.now(), t = this.animationDuration, s = (a) => {
+      const i = a - e, r = Math.min(i / t, 1);
+      this.animationProgress = H(r), this.drawChart(), r < 1 && this.isVisible && (this.animationFrameId = requestAnimationFrame(s));
+    };
+    this.animationFrameId = requestAnimationFrame(s);
+  }
+  processData() {
+    if (!this.data || this.data.length === 0) return [];
+    const e = [...this.data].sort((s, a) => a.value - s.value), t = new Set(e.slice(0, this.peakCount).map((s) => s.label));
+    return this.data.map((s) => ({ ...s, x: 0, y: 0, isPeak: t.has(s.label) }));
+  }
+  getThemeValue(e, t) {
+    return this.theme[e] ?? t;
+  }
+  drawChart() {
+    const e = this.canvasRef.value;
+    if (!e) return;
+    const t = e.getContext("2d");
+    if (!t) return;
+    const s = window.devicePixelRatio || 1, a = e.getBoundingClientRect(), i = a.width, r = a.height;
+    e.width = i * s, e.height = r * s, t.scale(s, s), t.clearRect(0, 0, i, r);
+    const h = this.processData();
+    if (h.length === 0) return;
+    const y = 20, w = 20, O = this.showLabels ? 40 : 20, P = 20, M = i - P - w, b = r - y - O, E = Math.max(...h.map((o) => o.value), 1), n = h.map((o, g) => ({ ...o, x: P + (h.length > 1 ? g / (h.length - 1) * M : M / 2), y: y + b - o.value / E * b }));
+    this.processedData = n;
+    const N = getComputedStyle(this).getPropertyValue("--schmancy-sys-color-primary").trim() || "#6750A4", x = this.getThemeValue("primaryColor", N), [G, q] = this.getThemeValue("gradientOpacity", [0.4, 0.05]), X = this.getThemeValue("strokeWidth", 2), D = this.getThemeValue("pointRadius", 4), T = this.getThemeValue("peakRadius", 6);
+    if (this.showGrid) {
+      t.strokeStyle = "rgba(128, 128, 128, 0.15)", t.lineWidth = 1, t.setLineDash([4, 4]);
+      for (let o = 1; o <= 3; o++) {
+        const g = y + b * o / 4;
+        t.beginPath(), t.moveTo(P, g), t.lineTo(i - w, g), t.stroke();
+      }
+      t.setLineDash([]);
+    }
+    const k = new Path2D(), v = new Path2D();
+    if (n.length >= 2) {
+      v.moveTo(n[0].x, y + b), k.moveTo(n[0].x, n[0].y), v.lineTo(n[0].x, n[0].y);
+      for (let o = 0; o < n.length - 1; o++) {
+        const g = n[Math.max(0, o - 1)], $ = n[o], V = n[Math.min(n.length - 1, o + 1)], J = n[Math.min(n.length - 1, o + 2)], A = 16;
+        for (let I = 1; I <= A; I++) {
+          const C = U(g, $, V, J, I / A);
+          k.lineTo(C.x, C.y), v.lineTo(C.x, C.y);
+        }
+      }
+      v.lineTo(n[n.length - 1].x, y + b), v.closePath();
+    } else n.length === 1 && k.arc(n[0].x, n[0].y, D, 0, 2 * Math.PI);
+    if (t.save(), t.beginPath(), t.rect(0, 0, P + M * this.animationProgress, r), t.clip(), n.length >= 2) {
+      const o = t.createLinearGradient(0, y, 0, y + b);
+      o.addColorStop(0, F(x, G)), o.addColorStop(1, F(x, q)), t.fillStyle = o, t.fill(v);
+    }
+    if (t.strokeStyle = x, t.lineWidth = X, t.lineCap = "round", t.lineJoin = "round", t.stroke(k), n.forEach((o, g) => {
+      if (g / (n.length - 1 || 1) * this.animationProgress < g / (n.length || 1)) return;
+      const $ = o.isPeak ? T - 1 : D - 1, V = o.isPeak ? T + 4 : D + 2;
+      o.isPeak && (t.beginPath(), t.arc(o.x, o.y, V, 0, 2 * Math.PI), t.fillStyle = F(x, 0.2), t.fill()), t.beginPath(), t.arc(o.x, o.y, $, 0, 2 * Math.PI), t.fillStyle = x, t.fill(), o.isPeak && (t.beginPath(), t.arc(o.x, o.y, 2, 0, 2 * Math.PI), t.fillStyle = "white", t.fill());
+    }), t.restore(), this.showLabels && n.length > 0) {
+      t.fillStyle = "rgba(128, 128, 128, 0.8)", t.font = "11px system-ui, sans-serif", t.textAlign = "center", t.textBaseline = "top";
+      const o = i < 400 ? 3 : i < 600 ? 2 : 1;
+      n.forEach((g, $) => {
+        $ % o === 0 && t.fillText(g.label, g.x, r - O + 8);
+      });
+    }
+  }
+  formatValue(e) {
+    const t = e.toFixed(this.valueDecimals);
+    return `${this.valuePrefix}${t}${this.valueSuffix}`;
+  }
+  renderMetadata() {
+    return this.tooltipData.metadata ? Object.entries(this.tooltipData.metadata).map(([e, t]) => u`
+				<schmancy-typography type="body" token="sm" class="text-surface-onVariant">
+					${e}: ${String(t)}
+				</schmancy-typography>
+			`) : "";
+  }
+  render() {
+    return this.data && this.data.length !== 0 ? u`
+			<div ${R(this.containerRef)} class="relative">
+				<div class="relative" style="height: ${this.height}px; touch-action: pan-y;">
+					<canvas
+						${R(this.canvasRef)}
+						class="w-full h-full"
+						style="display: block;"
+						@pointermove=${this.handlePointerMove}
+						@pointerleave=${this.handlePointerLeave}
+					></canvas>
+
+					<!-- Tooltip -->
+					${this.showTooltip ? u`
+								<div
+									class="absolute pointer-events-none transition-opacity duration-150 ${this.tooltipData.visible ? "opacity-100" : "opacity-0"}"
+									style="
+                    left: ${this.tooltipData.x}px;
+                    top: ${this.tooltipData.y - 60}px;
+                    transform: translateX(-50%);
+                  "
+								>
+									<schmancy-surface elevation="3" rounded="all" class="px-3 py-2 min-w-max">
+										<schmancy-typography type="label" token="sm" class="text-surface-onVariant">
+											${this.tooltipData.label}
+										</schmancy-typography>
+										<schmancy-typography type="title" token="md" class="text-surface-on font-semibold">
+											${this.formatValue(this.tooltipData.value)}
+										</schmancy-typography>
+										${this.renderMetadata()}
+									</schmancy-surface>
+								</div>
+						  ` : ""}
+				</div>
+			</div>
+		` : u``;
+  }
+};
+p([l({ type: Array })], c.prototype, "data", 2), p([l({ type: Number })], c.prototype, "height", 2), p([l({ type: Boolean })], c.prototype, "showGrid", 2), p([l({ type: Boolean })], c.prototype, "showLabels", 2), p([l({ type: Boolean })], c.prototype, "showTooltip", 2), p([l({ type: Number })], c.prototype, "peakCount", 2), p([l({ type: Number })], c.prototype, "animationDuration", 2), p([l({ type: Boolean })], c.prototype, "animated", 2), p([l({ type: String })], c.prototype, "valuePrefix", 2), p([l({ type: String })], c.prototype, "valueSuffix", 2), p([l({ type: Number })], c.prototype, "valueDecimals", 2), p([l({ type: Object })], c.prototype, "theme", 2), p([f()], c.prototype, "tooltipData", 2), p([f()], c.prototype, "animationProgress", 2), p([f()], c.prototype, "isVisible", 2), c = p([j("schmancy-area-chart")], c);
+var Y = Object.defineProperty, Z = Object.getOwnPropertyDescriptor, m = (e, t, s, a) => {
+  for (var i, r = a > 1 ? void 0 : a ? Z(t, s) : t, h = e.length - 1; h >= 0; h--) (i = e[h]) && (r = (a ? i(t, s, r) : i(r)) || r);
+  return a && r && Y(t, s, r), r;
+};
+const B = ["bg-primary", "bg-secondary", "bg-tertiary", "bg-success", "bg-warning", "bg-error", "bg-primary/70", "bg-secondary/70", "bg-tertiary/70", "bg-success/70", "bg-warning/70", "bg-error/70", "bg-primary/40", "bg-secondary/40", "bg-tertiary/40"];
+let d = class extends W(z`
+	:host {
+		display: block;
+	}
+`) {
+  constructor() {
+    super(...arguments), this.data = [], this.valuePrefix = "", this.valueSuffix = "", this.valueDecimals = 2, this.showMedals = !0, this.showLegend = !0, this.animationDuration = 500, this.animated = !0, this.labelWidth = "w-14", this.valueWidth = "w-20", this.animationProgress = 0, this.isVisible = !1, this.categoryColorMap = /* @__PURE__ */ new Map(), this.observer = null, this.animationFrameId = null;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setupIntersectionObserver();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.cleanup();
+  }
+  cleanup() {
+    this.animationFrameId !== null && (cancelAnimationFrame(this.animationFrameId), this.animationFrameId = null), this.observer && (this.observer.disconnect(), this.observer = null);
+  }
+  setupIntersectionObserver() {
+    this.observer = new IntersectionObserver((e) => {
+      e[0].isIntersecting && !this.isVisible && (this.isVisible = !0, this.animated ? this.startAnimation() : this.animationProgress = 1);
+    }, { threshold: 0.1 });
+  }
+  firstUpdated() {
+    this.observer && this.observer.observe(this);
+  }
+  updated(e) {
+    super.updated(e), e.has("data") && this.isVisible && this.animated && (this.animationProgress = 0, this.startAnimation());
+  }
+  startAnimation() {
+    const e = performance.now(), t = this.animationDuration, s = (a) => {
+      const i = a - e, r = Math.min(i / t, 1);
+      this.animationProgress = 1 - Math.pow(1 - r, 3), r < 1 && this.isVisible && (this.animationFrameId = requestAnimationFrame(s));
+    };
+    this.animationFrameId = requestAnimationFrame(s);
+  }
+  initializeCategoryColors() {
+    const e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map();
+    this.data.forEach((i) => {
+      i.segments && i.segments.forEach((r) => {
+        e.set(r.label, (e.get(r.label) || 0) + r.value), r.color && !t.has(r.label) && t.set(r.label, r.color);
+      });
+    });
+    const s = Array.from(e.entries()).sort((i, r) => r[1] - i[1]).map(([i]) => i);
+    this.categoryColorMap.clear();
+    let a = 0;
+    s.forEach((i) => {
+      t.has(i) ? this.categoryColorMap.set(i, t.get(i)) : (this.categoryColorMap.set(i, B[a % B.length]), a++);
+    });
+  }
+  getSegmentColor(e) {
+    return e.color ? e.color : this.categoryColorMap.get(e.label) || "bg-primary";
+  }
+  formatValue(e) {
+    const t = e.toFixed(this.valueDecimals);
+    return `${this.valuePrefix}${t}${this.valueSuffix}`;
+  }
+  getMedalEmoji(e) {
+    return this.showMedals && e ? e === 1 ? "🥇" : e === 2 ? "🥈" : e === 3 ? "🥉" : "" : "";
+  }
+  getMaxValue() {
+    return this.data.length === 0 ? 0 : Math.max(...this.data.map((e) => e.value), 1);
+  }
+  renderBar(e, t) {
+    const s = (t > 0 ? e.value / t * 100 : 0) * this.animationProgress;
+    if (!e.segments || e.segments.length === 0) {
+      const a = e.isPeak ? "bg-success" : e.isLow ? "bg-tertiary opacity-70" : e.value === 0 ? "bg-tertiary/40" : "bg-primary";
+      return u`
+				<div
+					class="${a} h-full transition-all rounded-full"
+					style="width: ${Math.max(s, e.value > 0 ? 2 : 0)}%; transition-duration: ${this.animated ? "0ms" : "300ms"}"
+					title="${this.formatValue(e.value)}"
+				></div>
+			`;
+    }
+    return u`
+			<div
+				class="h-full flex"
+				style="width: ${Math.max(s, 2)}%; transition-duration: ${this.animated ? "0ms" : "300ms"}"
+			>
+				${S(e.segments, (a) => a.label, (a, i) => {
+      const r = e.value > 0 ? a.value / e.value * 100 : 0, h = i > 0 ? "ml-px" : "", y = e.isPeak ? "brightness-110" : "", w = this.getSegmentColor(a);
+      return u`
+							<div
+								class="${w} ${h} ${y} h-full transition-all
+									${i === 0 ? "rounded-l-full" : ""}
+									${i === e.segments.length - 1 ? "rounded-r-full" : ""}"
+								style="width: ${r}%"
+								title="${a.label}: ${this.formatValue(a.value)}"
+							></div>
+						`;
+    })}
+			</div>
+		`;
+  }
+  renderLegend() {
+    return this.showLegend && this.categoryColorMap.size !== 0 ? u`
+			<div class="flex flex-wrap gap-3 mt-4 pt-4 border-t border-outline-variant">
+				${S(Array.from(this.categoryColorMap.entries()), ([e]) => e, ([e, t]) => u`
+						<div class="flex items-center gap-1.5">
+							<div class="${t} w-3 h-3 rounded-sm"></div>
+							<schmancy-typography type="label" token="sm" class="text-surface-onVariant">
+								${e}
+							</schmancy-typography>
+						</div>
+					`)}
+			</div>
+		` : u``;
+  }
+  render() {
+    if (this.initializeCategoryColors(), !this.data || this.data.length === 0) return u``;
+    const e = this.getMaxValue();
+    return u`
+			<div class="space-y-1">
+				${S(this.data, (t) => t.label, (t) => {
+      const s = t.isPeak ? "bg-success/10 rounded-lg" : "", a = t.isPeak ? "text-success font-bold" : "text-surface-on";
+      return u`
+							<div class="flex items-center gap-3 py-2 px-2 ${s}">
+								<!-- Label -->
+								<div class="${this.labelWidth} shrink-0 text-right">
+									<schmancy-typography type="label" token="md" class="${a}">
+										${t.label}
+									</schmancy-typography>
+								</div>
+
+								<!-- Medal -->
+								<div class="w-6 shrink-0 text-center">
+									${t.isPeak || t.rank && t.rank <= 3 ? u`<span class="text-sm">${this.getMedalEmoji(t.rank)}</span>` : ""}
+								</div>
+
+								<!-- Bar -->
+								<div class="flex-1 h-6 bg-secondary/15 rounded-full overflow-hidden">
+									${this.renderBar(t, e)}
+								</div>
+
+								<!-- Value -->
+								<div class="${this.valueWidth} shrink-0 text-right">
+									<schmancy-typography type="label" token="md" class="${a}">
+										${this.formatValue(t.value)}
+									</schmancy-typography>
+								</div>
+							</div>
+						`;
+    })}
+			</div>
+
+			<!-- Legend -->
+			${this.renderLegend()}
+		`;
+  }
+};
+m([l({ type: Array })], d.prototype, "data", 2), m([l({ type: String })], d.prototype, "valuePrefix", 2), m([l({ type: String })], d.prototype, "valueSuffix", 2), m([l({ type: Number })], d.prototype, "valueDecimals", 2), m([l({ type: Boolean })], d.prototype, "showMedals", 2), m([l({ type: Boolean })], d.prototype, "showLegend", 2), m([l({ type: Number })], d.prototype, "animationDuration", 2), m([l({ type: Boolean })], d.prototype, "animated", 2), m([l({ type: String })], d.prototype, "labelWidth", 2), m([l({ type: String })], d.prototype, "valueWidth", 2), m([f()], d.prototype, "animationProgress", 2), m([f()], d.prototype, "isVisible", 2), m([f()], d.prototype, "categoryColorMap", 2), d = m([j("schmancy-pills")], d);
+export {
+  c as S,
+  d as a,
+  U as c,
+  H as e,
+  F as h
+};
+//# sourceMappingURL=pills-C3fIvfn8.js.map

package/dist/pills-C3fIvfn8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pills-C3fIvfn8.js","sources":["../src/charts/utils.ts","../src/charts/area-chart.ts","../src/charts/pills.ts"],"sourcesContent":["/**\n * Catmull-Rom spline interpolation for smooth curves\n * Returns the interpolated point between p1 and p2\n */\nexport function catmullRomSpline(\n\tp0: { x: number; y: number },\n\tp1: { x: number; y: number },\n\tp2: { x: number; y: number },\n\tp3: { x: number; y: number },\n\tt: number\n): { x: number; y: number } {\n\tconst t2 = t * t\n\tconst t3 = t2 * t\n\n\tconst x =\n\t\t0.5 *\n\t\t(2 * p1.x +\n\t\t\t(-p0.x + p2.x) * t +\n\t\t\t(2 * p0.x - 5 * p1.x + 4 * p2.x - p3.x) * t2 +\n\t\t\t(-p0.x + 3 * p1.x - 3 * p2.x + p3.x) * t3)\n\n\tconst y =\n\t\t0.5 *\n\t\t(2 * p1.y +\n\t\t\t(-p0.y + p2.y) * t +\n\t\t\t(2 * p0.y - 5 * p1.y + 4 * p2.y - p3.y) * t2 +\n\t\t\t(-p0.y + 3 * p1.y - 3 * p2.y + p3.y) * t3)\n\n\treturn { x, y }\n}\n\n/**\n * Converts hex or rgb color to rgba string\n */\nexport function hexToRgba(color: string, alpha: number): string {\n\t// Handle rgb/rgba format\n\tif (color.startsWith('rgb')) {\n\t\tconst match = color.match(/[\\d.]+/g)\n\t\tif (match && match.length >= 3) {\n\t\t\treturn `rgba(${match[0]}, ${match[1]}, ${match[2]}, ${alpha})`\n\t\t}\n\t}\n\n\t// Handle hex format\n\tlet hex = color.replace('#', '')\n\tif (hex.length === 3) {\n\t\thex = hex\n\t\t\t.split('')\n\t\t\t.map(c => c + c)\n\t\t\t.join('')\n\t}\n\n\tconst r = parseInt(hex.substring(0, 2), 16)\n\tconst g = parseInt(hex.substring(2, 4), 16)\n\tconst b = parseInt(hex.substring(4, 6), 16)\n\n\treturn `rgba(${r}, ${g}, ${b}, ${alpha})`\n}\n\n/**\n * Cubic ease-out animation function\n */\nexport function easeOutCubic(t: number): number {\n\treturn 1 - Math.pow(1 - t, 3)\n}\n","import { html, css, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ref, createRef, Ref } from 'lit/directives/ref.js'\nimport { $LitElement } from '@mixins/index'\nimport type { ChartDataPoint, ChartTheme, ProcessedDataPoint } from './types'\nimport { catmullRomSpline, hexToRgba, easeOutCubic } from './utils'\n\ninterface TooltipData {\n\tvisible: boolean\n\tx: number\n\ty: number\n\tlabel: string\n\tvalue: number\n\tmetadata?: Record<string, unknown>\n}\n\n@customElement('schmancy-area-chart')\nexport class SchmancyAreaChart extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t}\n`) {\n\t/** Chart data points */\n\t@property({ type: Array })\n\tdata: ChartDataPoint[] = []\n\n\t/** Chart height in pixels */\n\t@property({ type: Number })\n\theight = 200\n\n\t/** Show grid lines */\n\t@property({ type: Boolean })\n\tshowGrid = true\n\n\t/** Show x-axis labels */\n\t@property({ type: Boolean })\n\tshowLabels = true\n\n\t/** Enable tooltips */\n\t@property({ type: Boolean })\n\tshowTooltip = true\n\n\t/** Number of peaks to highlight */\n\t@property({ type: Number })\n\tpeakCount = 3\n\n\t/** Animation duration in milliseconds */\n\t@property({ type: Number })\n\tanimationDuration = 800\n\n\t/** Enable entrance animation */\n\t@property({ type: Boolean })\n\tanimated = true\n\n\t/** Prefix for values (e.g., \"EUR \") */\n\t@property({ type: String })\n\tvaluePrefix = ''\n\n\t/** Suffix for values (e.g., \"%\") */\n\t@property({ type: String })\n\tvalueSuffix = ''\n\n\t/** Decimal places for value display */\n\t@property({ type: Number })\n\tvalueDecimals = 2\n\n\t/** Theme overrides */\n\t@property({ type: Object })\n\ttheme: Partial<ChartTheme> = {}\n\n\t@state() private tooltipData: TooltipData = {\n\t\tvisible: false,\n\t\tx: 0,\n\t\ty: 0,\n\t\tlabel: '',\n\t\tvalue: 0,\n\t}\n\n\t@state() private animationProgress = 0\n\t@state() private isVisible = false\n\n\tprivate canvasRef: Ref<HTMLCanvasElement> = createRef()\n\tprivate containerRef: Ref<HTMLDivElement> = createRef()\n\tprivate animationFrameId: number | null = null\n\tprivate observer: IntersectionObserver | null = null\n\tprivate processedData: ProcessedDataPoint[] = []\n\tprivate resizeObserver: ResizeObserver | null = null\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.setupIntersectionObserver()\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.cleanup()\n\t}\n\n\tprivate cleanup() {\n\t\tif (this.animationFrameId !== null) {\n\t\t\tcancelAnimationFrame(this.animationFrameId)\n\t\t\tthis.animationFrameId = null\n\t\t}\n\t\tif (this.observer) {\n\t\t\tthis.observer.disconnect()\n\t\t\tthis.observer = null\n\t\t}\n\t\tif (this.resizeObserver) {\n\t\t\tthis.resizeObserver.disconnect()\n\t\t\tthis.resizeObserver = null\n\t\t}\n\t}\n\n\tprivate setupIntersectionObserver() {\n\t\tthis.observer = new IntersectionObserver(\n\t\t\tentries => {\n\t\t\t\tconst entry = entries[0]\n\t\t\t\tif (entry.isIntersecting && !this.isVisible) {\n\t\t\t\t\tthis.isVisible = true\n\t\t\t\t\tif (this.animated) {\n\t\t\t\t\t\tthis.startAnimation()\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.animationProgress = 1\n\t\t\t\t\t\tthis.drawChart()\n\t\t\t\t\t}\n\t\t\t\t} else if (!entry.isIntersecting) {\n\t\t\t\t\tthis.isVisible = false\n\t\t\t\t\tif (this.animationFrameId !== null) {\n\t\t\t\t\t\tcancelAnimationFrame(this.animationFrameId)\n\t\t\t\t\t\tthis.animationFrameId = null\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t\t{ threshold: 0.1 }\n\t\t)\n\t}\n\n\tprotected updated(changedProperties: PropertyValues) {\n\t\tsuper.updated(changedProperties)\n\n\t\tif (this.containerRef.value && this.observer) {\n\t\t\tthis.observer.observe(this.containerRef.value)\n\t\t}\n\n\t\tif (this.canvasRef.value && !this.resizeObserver) {\n\t\t\tthis.resizeObserver = new ResizeObserver(() => {\n\t\t\t\tthis.drawChart()\n\t\t\t})\n\t\t\tthis.resizeObserver.observe(this.canvasRef.value)\n\t\t}\n\n\t\t// Redraw when data changes\n\t\tif (changedProperties.has('data') && this.isVisible) {\n\t\t\tif (this.animated) {\n\t\t\t\tthis.animationProgress = 0\n\t\t\t\tthis.startAnimation()\n\t\t\t} else {\n\t\t\t\tthis.animationProgress = 1\n\t\t\t\tthis.drawChart()\n\t\t\t}\n\t\t}\n\n\t\t// Redraw on theme or config changes\n\t\tif (\n\t\t\t(changedProperties.has('theme') ||\n\t\t\t\tchangedProperties.has('showGrid') ||\n\t\t\t\tchangedProperties.has('showLabels') ||\n\t\t\t\tchangedProperties.has('peakCount')) &&\n\t\t\tthis.isVisible\n\t\t) {\n\t\t\tthis.drawChart()\n\t\t}\n\t}\n\n\tprivate startAnimation() {\n\t\tconst startTime = performance.now()\n\t\tconst duration = this.animationDuration\n\n\t\tconst animateFrame = (currentTime: number) => {\n\t\t\tconst elapsed = currentTime - startTime\n\t\t\tconst progress = Math.min(elapsed / duration, 1)\n\n\t\t\tthis.animationProgress = easeOutCubic(progress)\n\t\t\tthis.drawChart()\n\n\t\t\tif (progress < 1 && this.isVisible) {\n\t\t\t\tthis.animationFrameId = requestAnimationFrame(animateFrame)\n\t\t\t}\n\t\t}\n\n\t\tthis.animationFrameId = requestAnimationFrame(animateFrame)\n\t}\n\n\tprivate processData(): ProcessedDataPoint[] {\n\t\tif (!this.data || this.data.length === 0) return []\n\n\t\t// Find top N peak values\n\t\tconst sortedByValue = [...this.data].sort((a, b) => b.value - a.value)\n\t\tconst peakLabels = new Set(sortedByValue.slice(0, this.peakCount).map(d => d.label))\n\n\t\treturn this.data.map(d => ({\n\t\t\t...d,\n\t\t\tx: 0, // Will be calculated during draw\n\t\t\ty: 0, // Will be calculated during draw\n\t\t\tisPeak: peakLabels.has(d.label),\n\t\t}))\n\t}\n\n\tprivate getThemeValue<K extends keyof ChartTheme>(\n\t\tkey: K,\n\t\tdefaultValue: NonNullable<ChartTheme[K]>\n\t): NonNullable<ChartTheme[K]> {\n\t\treturn (this.theme[key] as NonNullable<ChartTheme[K]>) ?? defaultValue\n\t}\n\n\tprivate drawChart() {\n\t\tconst canvas = this.canvasRef.value\n\t\tif (!canvas) return\n\n\t\tconst ctx = canvas.getContext('2d')\n\t\tif (!ctx) return\n\n\t\tconst dpr = window.devicePixelRatio || 1\n\t\tconst rect = canvas.getBoundingClientRect()\n\t\tconst width = rect.width\n\t\tconst height = rect.height\n\n\t\t// Set canvas size for high DPI\n\t\tcanvas.width = width * dpr\n\t\tcanvas.height = height * dpr\n\t\tctx.scale(dpr, dpr)\n\n\t\t// Clear canvas\n\t\tctx.clearRect(0, 0, width, height)\n\n\t\tconst data = this.processData()\n\t\tif (data.length === 0) return\n\n\t\tconst padding = { top: 20, right: 20, bottom: this.showLabels ? 40 : 20, left: 20 }\n\t\tconst chartWidth = width - padding.left - padding.right\n\t\tconst chartHeight = height - padding.top - padding.bottom\n\n\t\t// Find max value for scaling\n\t\tconst maxValue = Math.max(...data.map(d => d.value), 1)\n\n\t\t// Calculate positions\n\t\tconst points = data.map((d, i) => ({\n\t\t\t...d,\n\t\t\tx: padding.left + (data.length > 1 ? (i / (data.length - 1)) * chartWidth : chartWidth / 2),\n\t\t\ty: padding.top + chartHeight - (d.value / maxValue) * chartHeight,\n\t\t}))\n\n\t\tthis.processedData = points\n\n\t\t// Get primary color from CSS or theme\n\t\tconst computedStyle = getComputedStyle(this)\n\t\tconst defaultPrimaryColor =\n\t\t\tcomputedStyle.getPropertyValue('--schmancy-sys-color-primary').trim() || '#6750A4'\n\t\tconst primaryColor = this.getThemeValue('primaryColor', defaultPrimaryColor)\n\t\tconst [gradientOpacityTop, gradientOpacityBottom] = this.getThemeValue('gradientOpacity', [0.4, 0.05])\n\t\tconst strokeWidth = this.getThemeValue('strokeWidth', 2)\n\t\tconst pointRadius = this.getThemeValue('pointRadius', 4)\n\t\tconst peakRadius = this.getThemeValue('peakRadius', 6)\n\n\t\t// Draw grid lines\n\t\tif (this.showGrid) {\n\t\t\tctx.strokeStyle = 'rgba(128, 128, 128, 0.15)'\n\t\t\tctx.lineWidth = 1\n\t\t\tctx.setLineDash([4, 4])\n\n\t\t\tfor (let i = 1; i <= 3; i++) {\n\t\t\t\tconst y = padding.top + (chartHeight * i) / 4\n\t\t\t\tctx.beginPath()\n\t\t\t\tctx.moveTo(padding.left, y)\n\t\t\t\tctx.lineTo(width - padding.right, y)\n\t\t\t\tctx.stroke()\n\t\t\t}\n\n\t\t\tctx.setLineDash([])\n\t\t}\n\n\t\t// Create smooth curve path using Catmull-Rom spline\n\t\tconst curvePath = new Path2D()\n\t\tconst areaPath = new Path2D()\n\n\t\tif (points.length >= 2) {\n\t\t\t// Start area path from bottom left\n\t\t\tareaPath.moveTo(points[0].x, padding.top + chartHeight)\n\t\t\tcurvePath.moveTo(points[0].x, points[0].y)\n\t\t\tareaPath.lineTo(points[0].x, points[0].y)\n\n\t\t\tfor (let i = 0; i < points.length - 1; i++) {\n\t\t\t\tconst p0 = points[Math.max(0, i - 1)]\n\t\t\t\tconst p1 = points[i]\n\t\t\t\tconst p2 = points[Math.min(points.length - 1, i + 1)]\n\t\t\t\tconst p3 = points[Math.min(points.length - 1, i + 2)]\n\n\t\t\t\t// Draw curve segments\n\t\t\t\tconst segments = 16\n\t\t\t\tfor (let j = 1; j <= segments; j++) {\n\t\t\t\t\tconst t = j / segments\n\t\t\t\t\tconst point = catmullRomSpline(p0, p1, p2, p3, t)\n\t\t\t\t\tcurvePath.lineTo(point.x, point.y)\n\t\t\t\t\tareaPath.lineTo(point.x, point.y)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Close area path\n\t\t\tareaPath.lineTo(points[points.length - 1].x, padding.top + chartHeight)\n\t\t\tareaPath.closePath()\n\t\t} else if (points.length === 1) {\n\t\t\t// Single point - draw a dot\n\t\t\tcurvePath.arc(points[0].x, points[0].y, pointRadius, 0, Math.PI * 2)\n\t\t}\n\n\t\t// Apply animation clipping\n\t\tctx.save()\n\t\tctx.beginPath()\n\t\tctx.rect(0, 0, padding.left + chartWidth * this.animationProgress, height)\n\t\tctx.clip()\n\n\t\t// Draw gradient fill\n\t\tif (points.length >= 2) {\n\t\t\tconst gradient = ctx.createLinearGradient(0, padding.top, 0, padding.top + chartHeight)\n\t\t\tgradient.addColorStop(0, hexToRgba(primaryColor, gradientOpacityTop))\n\t\t\tgradient.addColorStop(1, hexToRgba(primaryColor, gradientOpacityBottom))\n\n\t\t\tctx.fillStyle = gradient\n\t\t\tctx.fill(areaPath)\n\t\t}\n\n\t\t// Draw stroke\n\t\tctx.strokeStyle = primaryColor\n\t\tctx.lineWidth = strokeWidth\n\t\tctx.lineCap = 'round'\n\t\tctx.lineJoin = 'round'\n\t\tctx.stroke(curvePath)\n\n\t\t// Draw data points\n\t\tpoints.forEach((point, index) => {\n\t\t\tconst pointProgress = (index / (points.length - 1 || 1)) * this.animationProgress\n\t\t\tif (pointProgress < index / (points.length || 1)) return\n\n\t\t\tconst radius = point.isPeak ? peakRadius - 1 : pointRadius - 1\n\t\t\tconst outerRadius = point.isPeak ? peakRadius + 4 : pointRadius + 2\n\n\t\t\t// Outer glow for peaks\n\t\t\tif (point.isPeak) {\n\t\t\t\tctx.beginPath()\n\t\t\t\tctx.arc(point.x, point.y, outerRadius, 0, Math.PI * 2)\n\t\t\t\tctx.fillStyle = hexToRgba(primaryColor, 0.2)\n\t\t\t\tctx.fill()\n\t\t\t}\n\n\t\t\t// Inner dot\n\t\t\tctx.beginPath()\n\t\t\tctx.arc(point.x, point.y, radius, 0, Math.PI * 2)\n\t\t\tctx.fillStyle = primaryColor\n\t\t\tctx.fill()\n\n\t\t\t// White center for peaks\n\t\t\tif (point.isPeak) {\n\t\t\t\tctx.beginPath()\n\t\t\t\tctx.arc(point.x, point.y, 2, 0, Math.PI * 2)\n\t\t\t\tctx.fillStyle = 'white'\n\t\t\t\tctx.fill()\n\t\t\t}\n\t\t})\n\n\t\tctx.restore()\n\n\t\t// Draw labels\n\t\tif (this.showLabels && points.length > 0) {\n\t\t\tctx.fillStyle = 'rgba(128, 128, 128, 0.8)'\n\t\t\tctx.font = '11px system-ui, sans-serif'\n\t\t\tctx.textAlign = 'center'\n\t\t\tctx.textBaseline = 'top'\n\n\t\t\t// Show fewer labels on narrow charts\n\t\t\tconst labelStep = width < 400 ? 3 : width < 600 ? 2 : 1\n\t\t\tpoints.forEach((point, index) => {\n\t\t\t\tif (index % labelStep === 0) {\n\t\t\t\t\tctx.fillText(point.label, point.x, height - padding.bottom + 8)\n\t\t\t\t}\n\t\t\t})\n\t\t}\n\t}\n\n\tprivate formatValue(value: number): string {\n\t\tconst formatted = value.toFixed(this.valueDecimals)\n\t\treturn `${this.valuePrefix}${formatted}${this.valueSuffix}`\n\t}\n\n\tprivate handlePointerMove = (e: PointerEvent) => {\n\t\tif (this.processedData.length === 0 || !this.showTooltip) return\n\n\t\tconst canvas = this.canvasRef.value\n\t\tif (!canvas) return\n\n\t\tconst rect = canvas.getBoundingClientRect()\n\t\tconst x = e.clientX - rect.left\n\n\t\t// Find closest data point\n\t\tlet closestPoint: ProcessedDataPoint | null = null\n\t\tlet minDistance = Infinity\n\n\t\tthis.processedData.forEach(point => {\n\t\t\tconst distance = Math.abs(point.x - x)\n\t\t\tif (distance < minDistance) {\n\t\t\t\tminDistance = distance\n\t\t\t\tclosestPoint = point\n\t\t\t}\n\t\t})\n\n\t\tif (closestPoint && minDistance < 30) {\n\t\t\tthis.tooltipData = {\n\t\t\t\tvisible: true,\n\t\t\t\tx: closestPoint.x,\n\t\t\t\ty: closestPoint.y,\n\t\t\t\tlabel: closestPoint.label,\n\t\t\t\tvalue: closestPoint.value,\n\t\t\t\tmetadata: closestPoint.metadata,\n\t\t\t}\n\t\t} else {\n\t\t\tthis.tooltipData = { ...this.tooltipData, visible: false }\n\t\t}\n\t}\n\n\tprivate handlePointerLeave = () => {\n\t\tthis.tooltipData = { ...this.tooltipData, visible: false }\n\t}\n\n\tprivate renderMetadata() {\n\t\tif (!this.tooltipData.metadata) return ''\n\t\treturn Object.entries(this.tooltipData.metadata).map(\n\t\t\t([key, value]) => html`\n\t\t\t\t<schmancy-typography type=\"body\" token=\"sm\" class=\"text-surface-onVariant\">\n\t\t\t\t\t${key}: ${String(value)}\n\t\t\t\t</schmancy-typography>\n\t\t\t`\n\t\t)\n\t}\n\n\trender() {\n\t\tif (!this.data || this.data.length === 0) {\n\t\t\treturn html``\n\t\t}\n\n\t\treturn html`\n\t\t\t<div ${ref(this.containerRef)} class=\"relative\">\n\t\t\t\t<div class=\"relative\" style=\"height: ${this.height}px; touch-action: pan-y;\">\n\t\t\t\t\t<canvas\n\t\t\t\t\t\t${ref(this.canvasRef)}\n\t\t\t\t\t\tclass=\"w-full h-full\"\n\t\t\t\t\t\tstyle=\"display: block;\"\n\t\t\t\t\t\t@pointermove=${this.handlePointerMove}\n\t\t\t\t\t\t@pointerleave=${this.handlePointerLeave}\n\t\t\t\t\t></canvas>\n\n\t\t\t\t\t<!-- Tooltip -->\n\t\t\t\t\t${this.showTooltip\n\t\t\t\t\t\t? html`\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclass=\"absolute pointer-events-none transition-opacity duration-150 ${this.tooltipData.visible\n\t\t\t\t\t\t\t\t\t\t? 'opacity-100'\n\t\t\t\t\t\t\t\t\t\t: 'opacity-0'}\"\n\t\t\t\t\t\t\t\t\tstyle=\"\n                    left: ${this.tooltipData.x}px;\n                    top: ${this.tooltipData.y - 60}px;\n                    transform: translateX(-50%);\n                  \"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<schmancy-surface elevation=\"3\" rounded=\"all\" class=\"px-3 py-2 min-w-max\">\n\t\t\t\t\t\t\t\t\t\t<schmancy-typography type=\"label\" token=\"sm\" class=\"text-surface-onVariant\">\n\t\t\t\t\t\t\t\t\t\t\t${this.tooltipData.label}\n\t\t\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t\t\t\t<schmancy-typography type=\"title\" token=\"md\" class=\"text-surface-on font-semibold\">\n\t\t\t\t\t\t\t\t\t\t\t${this.formatValue(this.tooltipData.value)}\n\t\t\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t\t\t\t${this.renderMetadata()}\n\t\t\t\t\t\t\t\t\t</schmancy-surface>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t  `\n\t\t\t\t\t\t: ''}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-area-chart': SchmancyAreaChart\n\t}\n}\n","import { html, css, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { $LitElement } from '@mixins/index'\nimport type { PillDataPoint, PillSegment } from './types'\n\n/** Default color palette for segments - expanded for uniqueness */\nconst DEFAULT_COLORS = [\n\t'bg-primary',\n\t'bg-secondary',\n\t'bg-tertiary',\n\t'bg-success',\n\t'bg-warning',\n\t'bg-error',\n\t'bg-primary/70',\n\t'bg-secondary/70',\n\t'bg-tertiary/70',\n\t'bg-success/70',\n\t'bg-warning/70',\n\t'bg-error/70',\n\t'bg-primary/40',\n\t'bg-secondary/40',\n\t'bg-tertiary/40',\n]\n\n@customElement('schmancy-pills')\nexport class SchmancyPills extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t}\n`) {\n\t/** Chart data points */\n\t@property({ type: Array })\n\tdata: PillDataPoint[] = []\n\n\t/** Prefix for values (e.g., \"EUR \") */\n\t@property({ type: String })\n\tvaluePrefix = ''\n\n\t/** Suffix for values (e.g., \"%\") */\n\t@property({ type: String })\n\tvalueSuffix = ''\n\n\t/** Decimal places for value display */\n\t@property({ type: Number })\n\tvalueDecimals = 2\n\n\t/** Show medals for top 3 */\n\t@property({ type: Boolean })\n\tshowMedals = true\n\n\t/** Show legend for segments */\n\t@property({ type: Boolean })\n\tshowLegend = true\n\n\t/** Animation duration in milliseconds */\n\t@property({ type: Number })\n\tanimationDuration = 500\n\n\t/** Enable entrance animation */\n\t@property({ type: Boolean })\n\tanimated = true\n\n\t/** Label column width (Tailwind class) */\n\t@property({ type: String })\n\tlabelWidth = 'w-14'\n\n\t/** Value column width (Tailwind class) */\n\t@property({ type: String })\n\tvalueWidth = 'w-20'\n\n\t@state() private animationProgress = 0\n\t@state() private isVisible = false\n\t@state() private categoryColorMap = new Map<string, string>()\n\n\tprivate observer: IntersectionObserver | null = null\n\tprivate animationFrameId: number | null = null\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.setupIntersectionObserver()\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.cleanup()\n\t}\n\n\tprivate cleanup() {\n\t\tif (this.animationFrameId !== null) {\n\t\t\tcancelAnimationFrame(this.animationFrameId)\n\t\t\tthis.animationFrameId = null\n\t\t}\n\t\tif (this.observer) {\n\t\t\tthis.observer.disconnect()\n\t\t\tthis.observer = null\n\t\t}\n\t}\n\n\tprivate setupIntersectionObserver() {\n\t\tthis.observer = new IntersectionObserver(\n\t\t\tentries => {\n\t\t\t\tconst entry = entries[0]\n\t\t\t\tif (entry.isIntersecting && !this.isVisible) {\n\t\t\t\t\tthis.isVisible = true\n\t\t\t\t\tif (this.animated) {\n\t\t\t\t\t\tthis.startAnimation()\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.animationProgress = 1\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t\t{ threshold: 0.1 }\n\t\t)\n\t}\n\n\tprotected firstUpdated() {\n\t\tif (this.observer) {\n\t\t\tthis.observer.observe(this)\n\t\t}\n\t}\n\n\tprotected updated(changedProperties: PropertyValues) {\n\t\tsuper.updated(changedProperties)\n\n\t\t// Restart animation when data changes\n\t\tif (changedProperties.has('data') && this.isVisible && this.animated) {\n\t\t\tthis.animationProgress = 0\n\t\t\tthis.startAnimation()\n\t\t}\n\t}\n\n\tprivate startAnimation() {\n\t\tconst startTime = performance.now()\n\t\tconst duration = this.animationDuration\n\n\t\tconst animateFrame = (currentTime: number) => {\n\t\t\tconst elapsed = currentTime - startTime\n\t\t\tconst progress = Math.min(elapsed / duration, 1)\n\n\t\t\t// Ease out cubic\n\t\t\tthis.animationProgress = 1 - Math.pow(1 - progress, 3)\n\n\t\t\tif (progress < 1 && this.isVisible) {\n\t\t\t\tthis.animationFrameId = requestAnimationFrame(animateFrame)\n\t\t\t}\n\t\t}\n\n\t\tthis.animationFrameId = requestAnimationFrame(animateFrame)\n\t}\n\n\tprivate initializeCategoryColors(): void {\n\t\t// Build consistent color map from all segments in data\n\t\tconst categoryTotals = new Map<string, number>()\n\t\tconst explicitColors = new Map<string, string>()\n\n\t\tthis.data.forEach(d => {\n\t\t\tif (d.segments) {\n\t\t\t\td.segments.forEach(seg => {\n\t\t\t\t\tcategoryTotals.set(seg.label, (categoryTotals.get(seg.label) || 0) + seg.value)\n\t\t\t\t\t// Capture explicit colors from segments\n\t\t\t\t\tif (seg.color && !explicitColors.has(seg.label)) {\n\t\t\t\t\t\texplicitColors.set(seg.label, seg.color)\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\n\t\t// Sort by total value (most = first color)\n\t\tconst sortedCategories = Array.from(categoryTotals.entries())\n\t\t\t.sort((a, b) => b[1] - a[1])\n\t\t\t.map(([cat]) => cat)\n\n\t\t// Clear and rebuild - use explicit colors if available, otherwise default palette\n\t\tthis.categoryColorMap.clear()\n\t\tlet defaultColorIndex = 0\n\t\tsortedCategories.forEach(cat => {\n\t\t\tif (explicitColors.has(cat)) {\n\t\t\t\tthis.categoryColorMap.set(cat, explicitColors.get(cat)!)\n\t\t\t} else {\n\t\t\t\tthis.categoryColorMap.set(cat, DEFAULT_COLORS[defaultColorIndex % DEFAULT_COLORS.length])\n\t\t\t\tdefaultColorIndex++\n\t\t\t}\n\t\t})\n\t}\n\n\tprivate getSegmentColor(segment: PillSegment): string {\n\t\t// Use explicit color if provided\n\t\tif (segment.color) return segment.color\n\t\t// Otherwise use from color map\n\t\treturn this.categoryColorMap.get(segment.label) || 'bg-primary'\n\t}\n\n\tprivate formatValue(value: number): string {\n\t\tconst formatted = value.toFixed(this.valueDecimals)\n\t\treturn `${this.valuePrefix}${formatted}${this.valueSuffix}`\n\t}\n\n\tprivate getMedalEmoji(rank: number | undefined): string {\n\t\tif (!this.showMedals || !rank) return ''\n\t\tif (rank === 1) return '🥇'\n\t\tif (rank === 2) return '🥈'\n\t\tif (rank === 3) return '🥉'\n\t\treturn ''\n\t}\n\n\tprivate getMaxValue(): number {\n\t\tif (this.data.length === 0) return 0\n\t\treturn Math.max(...this.data.map(d => d.value), 1)\n\t}\n\n\tprivate renderBar(dataPoint: PillDataPoint, maxValue: number): ReturnType<typeof html> {\n\t\tconst percentage = maxValue > 0 ? (dataPoint.value / maxValue) * 100 : 0\n\t\tconst animatedPercentage = percentage * this.animationProgress\n\n\t\t// If no segments, render solid bar\n\t\tif (!dataPoint.segments || dataPoint.segments.length === 0) {\n\t\t\tconst barColorClass = dataPoint.isPeak\n\t\t\t\t? 'bg-success'\n\t\t\t\t: dataPoint.isLow\n\t\t\t\t\t? 'bg-tertiary opacity-70'\n\t\t\t\t\t: dataPoint.value === 0\n\t\t\t\t\t\t? 'bg-tertiary/40'\n\t\t\t\t\t\t: 'bg-primary'\n\n\t\t\treturn html`\n\t\t\t\t<div\n\t\t\t\t\tclass=\"${barColorClass} h-full transition-all rounded-full\"\n\t\t\t\t\tstyle=\"width: ${Math.max(animatedPercentage, dataPoint.value > 0 ? 2 : 0)}%; transition-duration: ${this.animated ? '0ms' : '300ms'}\"\n\t\t\t\t\ttitle=\"${this.formatValue(dataPoint.value)}\"\n\t\t\t\t></div>\n\t\t\t`\n\t\t}\n\n\t\t// Stacked bar with segments\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=\"h-full flex\"\n\t\t\t\tstyle=\"width: ${Math.max(animatedPercentage, 2)}%; transition-duration: ${this.animated ? '0ms' : '300ms'}\"\n\t\t\t>\n\t\t\t\t${repeat(\n\t\t\t\t\tdataPoint.segments,\n\t\t\t\t\tseg => seg.label,\n\t\t\t\t\t(seg, index) => {\n\t\t\t\t\t\tconst segmentPercentage = dataPoint.value > 0 ? (seg.value / dataPoint.value) * 100 : 0\n\t\t\t\t\t\tconst marginLeft = index > 0 ? 'ml-px' : ''\n\t\t\t\t\t\tconst brightenClass = dataPoint.isPeak ? 'brightness-110' : ''\n\t\t\t\t\t\tconst colorClass = this.getSegmentColor(seg)\n\n\t\t\t\t\t\treturn html`\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"${colorClass} ${marginLeft} ${brightenClass} h-full transition-all\n\t\t\t\t\t\t\t\t\t${index === 0 ? 'rounded-l-full' : ''}\n\t\t\t\t\t\t\t\t\t${index === dataPoint.segments!.length - 1 ? 'rounded-r-full' : ''}\"\n\t\t\t\t\t\t\t\tstyle=\"width: ${segmentPercentage}%\"\n\t\t\t\t\t\t\t\ttitle=\"${seg.label}: ${this.formatValue(seg.value)}\"\n\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t)}\n\t\t\t</div>\n\t\t`\n\t}\n\n\tprivate renderLegend(): ReturnType<typeof html> {\n\t\tif (!this.showLegend || this.categoryColorMap.size === 0) {\n\t\t\treturn html``\n\t\t}\n\n\t\treturn html`\n\t\t\t<div class=\"flex flex-wrap gap-3 mt-4 pt-4 border-t border-outline-variant\">\n\t\t\t\t${repeat(\n\t\t\t\t\tArray.from(this.categoryColorMap.entries()),\n\t\t\t\t\t([cat]) => cat,\n\t\t\t\t\t([cat, color]) => html`\n\t\t\t\t\t\t<div class=\"flex items-center gap-1.5\">\n\t\t\t\t\t\t\t<div class=\"${color} w-3 h-3 rounded-sm\"></div>\n\t\t\t\t\t\t\t<schmancy-typography type=\"label\" token=\"sm\" class=\"text-surface-onVariant\">\n\t\t\t\t\t\t\t\t${cat}\n\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`\n\t\t\t\t)}\n\t\t\t</div>\n\t\t`\n\t}\n\n\trender() {\n\t\t// Initialize colors before rendering\n\t\tthis.initializeCategoryColors()\n\n\t\tif (!this.data || this.data.length === 0) {\n\t\t\treturn html``\n\t\t}\n\n\t\tconst maxValue = this.getMaxValue()\n\n\t\treturn html`\n\t\t\t<div class=\"space-y-1\">\n\t\t\t\t${repeat(\n\t\t\t\t\tthis.data,\n\t\t\t\t\td => d.label,\n\t\t\t\t\td => {\n\t\t\t\t\t\tconst rowBgClass = d.isPeak ? 'bg-success/10 rounded-lg' : ''\n\t\t\t\t\t\tconst textColorClass = d.isPeak ? 'text-success font-bold' : 'text-surface-on'\n\n\t\t\t\t\t\treturn html`\n\t\t\t\t\t\t\t<div class=\"flex items-center gap-3 py-2 px-2 ${rowBgClass}\">\n\t\t\t\t\t\t\t\t<!-- Label -->\n\t\t\t\t\t\t\t\t<div class=\"${this.labelWidth} shrink-0 text-right\">\n\t\t\t\t\t\t\t\t\t<schmancy-typography type=\"label\" token=\"md\" class=\"${textColorClass}\">\n\t\t\t\t\t\t\t\t\t\t${d.label}\n\t\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<!-- Medal -->\n\t\t\t\t\t\t\t\t<div class=\"w-6 shrink-0 text-center\">\n\t\t\t\t\t\t\t\t\t${d.isPeak || (d.rank && d.rank <= 3)\n\t\t\t\t\t\t\t\t\t\t? html`<span class=\"text-sm\">${this.getMedalEmoji(d.rank)}</span>`\n\t\t\t\t\t\t\t\t\t\t: ''}\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<!-- Bar -->\n\t\t\t\t\t\t\t\t<div class=\"flex-1 h-6 bg-secondary/15 rounded-full overflow-hidden\">\n\t\t\t\t\t\t\t\t\t${this.renderBar(d, maxValue)}\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<!-- Value -->\n\t\t\t\t\t\t\t\t<div class=\"${this.valueWidth} shrink-0 text-right\">\n\t\t\t\t\t\t\t\t\t<schmancy-typography type=\"label\" token=\"md\" class=\"${textColorClass}\">\n\t\t\t\t\t\t\t\t\t\t${this.formatValue(d.value)}\n\t\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t<!-- Legend -->\n\t\t\t${this.renderLegend()}\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-pills': SchmancyPills\n\t}\n}\n"],"names":["catmullRomSpline","p0","p1","p2","p3","t","t2","t3","x","y","hexToRgba","color","alpha","startsWith","match","length","hex","replace","split","map","c","join","parseInt","substring","easeOutCubic","Math","pow","SchmancyAreaChart","$LitElement","css","constructor","super","arguments","this","data","height","showGrid","showLabels","showTooltip","peakCount","animationDuration","animated","valuePrefix","valueSuffix","valueDecimals","theme","tooltipData","visible","label","value","animationProgress","isVisible","canvasRef","createRef","containerRef","animationFrameId","observer","processedData","resizeObserver","handlePointerMove","e","canvas","rect","getBoundingClientRect","clientX","left","closestPoint","minDistance","Infinity","forEach","point","distance","abs","metadata","handlePointerLeave","connectedCallback","setupIntersectionObserver","disconnectedCallback","cleanup","cancelAnimationFrame","disconnect","IntersectionObserver","entries","entry","isIntersecting","startAnimation","drawChart","threshold","changedProperties","updated","observe","ResizeObserver","has","startTime","performance","now","duration","animateFrame","currentTime","elapsed","progress","min","requestAnimationFrame","processData","sortedByValue","sort","a","b","peakLabels","Set","slice","d","isPeak","key","defaultValue","ctx","getContext","dpr","window","devicePixelRatio","width","scale","clearRect","padding","chartWidth","chartHeight","maxValue","max","points","i","defaultPrimaryColor","getComputedStyle","getPropertyValue","trim","primaryColor","getThemeValue","gradientOpacityTop","gradientOpacityBottom","strokeWidth","pointRadius","peakRadius","strokeStyle","lineWidth","setLineDash","beginPath","moveTo","lineTo","stroke","curvePath","Path2D","areaPath","segments","j","closePath","arc","PI","save","clip","gradient","createLinearGradient","addColorStop","fillStyle","fill","lineCap","lineJoin","index","radius","outerRadius","restore","font","textAlign","textBaseline","labelStep","fillText","formatted","toFixed","renderMetadata","Object","html","String","render","ref","formatValue","__decorateClass","property","type","Array","prototype","Number","Boolean","state","customElement","DEFAULT_COLORS","SchmancyPills","showMedals","showLegend","labelWidth","valueWidth","categoryColorMap","Map","firstUpdated","categoryTotals","explicitColors","seg","set","get","sortedCategories","from","cat","clear","defaultColorIndex","segment","rank","getMaxValue","dataPoint","animatedPercentage","barColorClass","isLow","repeat","segmentPercentage","marginLeft","brightenClass","colorClass","getSegmentColor","size","initializeCategoryColors","rowBgClass","textColorClass","getMedalEmoji","renderBar","renderLegend"],"mappings":"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"}

package/dist/pills-MmHyBGQu.cjs

@@ -0,0 +1,113 @@
+"use strict";const p=require("lit"),o=require("lit/decorators.js"),$=require("lit/directives/ref.js");require("rxjs"),require("rxjs/operators"),require("lit/directives/class-map.js"),require("lit/directives/style-map.js"),require("./tailwind.mixin-UijsBrYW.cjs");const R=require("./litElement.mixin-BVBdv0GP.cjs"),D=require("lit/directives/repeat.js");function T(e,t,i,a,s){const r=s*s,h=r*s;return{x:.5*(2*t.x+(-e.x+i.x)*s+(2*e.x-5*t.x+4*i.x-a.x)*r+(-e.x+3*t.x-3*i.x+a.x)*h),y:.5*(2*t.y+(-e.y+i.y)*s+(2*e.y-5*t.y+4*i.y-a.y)*r+(-e.y+3*t.y-3*i.y+a.y)*h)}}function w(e,t){if(e.startsWith("rgb")){const a=e.match(/[\d.]+/g);if(a&&a.length>=3)return`rgba(${a[0]}, ${a[1]}, ${a[2]}, ${t})`}let i=e.replace("#","");return i.length===3&&(i=i.split("").map(a=>a+a).join("")),`rgba(${parseInt(i.substring(0,2),16)}, ${parseInt(i.substring(2,4),16)}, ${parseInt(i.substring(4,6),16)}, ${t})`}function L(e){return 1-Math.pow(1-e,3)}var N=Object.defineProperty,G=Object.getOwnPropertyDescriptor,c=(e,t,i,a)=>{for(var s,r=a>1?void 0:a?G(t,i):t,h=e.length-1;h>=0;h--)(s=e[h])&&(r=(a?s(t,i,r):s(r))||r);return a&&r&&N(t,i,r),r};exports.SchmancyAreaChart=class extends R.$LitElement(p.css`
+	:host {
+		display: block;
+	}
+`){constructor(){super(...arguments),this.data=[],this.height=200,this.showGrid=!0,this.showLabels=!0,this.showTooltip=!0,this.peakCount=3,this.animationDuration=800,this.animated=!0,this.valuePrefix="",this.valueSuffix="",this.valueDecimals=2,this.theme={},this.tooltipData={visible:!1,x:0,y:0,label:"",value:0},this.animationProgress=0,this.isVisible=!1,this.canvasRef=$.createRef(),this.containerRef=$.createRef(),this.animationFrameId=null,this.observer=null,this.processedData=[],this.resizeObserver=null,this.handlePointerMove=e=>{if(this.processedData.length===0||!this.showTooltip)return;const t=this.canvasRef.value;if(!t)return;const i=t.getBoundingClientRect(),a=e.clientX-i.left;let s=null,r=1/0;this.processedData.forEach(h=>{const y=Math.abs(h.x-a);y<r&&(r=y,s=h)}),this.tooltipData=s&&r<30?{visible:!0,x:s.x,y:s.y,label:s.label,value:s.value,metadata:s.metadata}:{...this.tooltipData,visible:!1}},this.handlePointerLeave=()=>{this.tooltipData={...this.tooltipData,visible:!1}}}connectedCallback(){super.connectedCallback(),this.setupIntersectionObserver()}disconnectedCallback(){super.disconnectedCallback(),this.cleanup()}cleanup(){this.animationFrameId!==null&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null),this.observer&&(this.observer.disconnect(),this.observer=null),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}setupIntersectionObserver(){this.observer=new IntersectionObserver(e=>{const t=e[0];t.isIntersecting&&!this.isVisible?(this.isVisible=!0,this.animated?this.startAnimation():(this.animationProgress=1,this.drawChart())):t.isIntersecting||(this.isVisible=!1,this.animationFrameId!==null&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null))},{threshold:.1})}updated(e){super.updated(e),this.containerRef.value&&this.observer&&this.observer.observe(this.containerRef.value),this.canvasRef.value&&!this.resizeObserver&&(this.resizeObserver=new ResizeObserver(()=>{this.drawChart()}),this.resizeObserver.observe(this.canvasRef.value)),e.has("data")&&this.isVisible&&(this.animated?(this.animationProgress=0,this.startAnimation()):(this.animationProgress=1,this.drawChart())),(e.has("theme")||e.has("showGrid")||e.has("showLabels")||e.has("peakCount"))&&this.isVisible&&this.drawChart()}startAnimation(){const e=performance.now(),t=this.animationDuration,i=a=>{const s=a-e,r=Math.min(s/t,1);this.animationProgress=L(r),this.drawChart(),r<1&&this.isVisible&&(this.animationFrameId=requestAnimationFrame(i))};this.animationFrameId=requestAnimationFrame(i)}processData(){if(!this.data||this.data.length===0)return[];const e=[...this.data].sort((i,a)=>a.value-i.value),t=new Set(e.slice(0,this.peakCount).map(i=>i.label));return this.data.map(i=>({...i,x:0,y:0,isPeak:t.has(i.label)}))}getThemeValue(e,t){return this.theme[e]??t}drawChart(){const e=this.canvasRef.value;if(!e)return;const t=e.getContext("2d");if(!t)return;const i=window.devicePixelRatio||1,a=e.getBoundingClientRect(),s=a.width,r=a.height;e.width=s*i,e.height=r*i,t.scale(i,i),t.clearRect(0,0,s,r);const h=this.processData();if(h.length===0)return;const y=20,f=20,V=this.showLabels?40:20,x=20,C=s-x-f,d=r-y-V,q=Math.max(...h.map(n=>n.value),1),l=h.map((n,u)=>({...n,x:x+(h.length>1?u/(h.length-1)*C:C/2),y:y+d-n.value/q*d}));this.processedData=l;const B=getComputedStyle(this).getPropertyValue("--schmancy-sys-color-primary").trim()||"#6750A4",b=this.getThemeValue("primaryColor",B),[E,z]=this.getThemeValue("gradientOpacity",[.4,.05]),j=this.getThemeValue("strokeWidth",2),k=this.getThemeValue("pointRadius",4),I=this.getThemeValue("peakRadius",6);if(this.showGrid){t.strokeStyle="rgba(128, 128, 128, 0.15)",t.lineWidth=1,t.setLineDash([4,4]);for(let n=1;n<=3;n++){const u=y+d*n/4;t.beginPath(),t.moveTo(x,u),t.lineTo(s-f,u),t.stroke()}t.setLineDash([])}const P=new Path2D,g=new Path2D;if(l.length>=2){g.moveTo(l[0].x,y+d),P.moveTo(l[0].x,l[0].y),g.lineTo(l[0].x,l[0].y);for(let n=0;n<l.length-1;n++){const u=l[Math.max(0,n-1)],v=l[n],M=l[Math.min(l.length-1,n+1)],W=l[Math.min(l.length-1,n+2)],F=16;for(let A=1;A<=F;A++){const S=T(u,v,M,W,A/F);P.lineTo(S.x,S.y),g.lineTo(S.x,S.y)}}g.lineTo(l[l.length-1].x,y+d),g.closePath()}else l.length===1&&P.arc(l[0].x,l[0].y,k,0,2*Math.PI);if(t.save(),t.beginPath(),t.rect(0,0,x+C*this.animationProgress,r),t.clip(),l.length>=2){const n=t.createLinearGradient(0,y,0,y+d);n.addColorStop(0,w(b,E)),n.addColorStop(1,w(b,z)),t.fillStyle=n,t.fill(g)}if(t.strokeStyle=b,t.lineWidth=j,t.lineCap="round",t.lineJoin="round",t.stroke(P),l.forEach((n,u)=>{if(u/(l.length-1||1)*this.animationProgress<u/(l.length||1))return;const v=n.isPeak?I-1:k-1,M=n.isPeak?I+4:k+2;n.isPeak&&(t.beginPath(),t.arc(n.x,n.y,M,0,2*Math.PI),t.fillStyle=w(b,.2),t.fill()),t.beginPath(),t.arc(n.x,n.y,v,0,2*Math.PI),t.fillStyle=b,t.fill(),n.isPeak&&(t.beginPath(),t.arc(n.x,n.y,2,0,2*Math.PI),t.fillStyle="white",t.fill())}),t.restore(),this.showLabels&&l.length>0){t.fillStyle="rgba(128, 128, 128, 0.8)",t.font="11px system-ui, sans-serif",t.textAlign="center",t.textBaseline="top";const n=s<400?3:s<600?2:1;l.forEach((u,v)=>{v%n===0&&t.fillText(u.label,u.x,r-V+8)})}}formatValue(e){const t=e.toFixed(this.valueDecimals);return`${this.valuePrefix}${t}${this.valueSuffix}`}renderMetadata(){return this.tooltipData.metadata?Object.entries(this.tooltipData.metadata).map(([e,t])=>p.html`
+				<schmancy-typography type="body" token="sm" class="text-surface-onVariant">
+					${e}: ${String(t)}
+				</schmancy-typography>
+			`):""}render(){return this.data&&this.data.length!==0?p.html`
+			<div ${$.ref(this.containerRef)} class="relative">
+				<div class="relative" style="height: ${this.height}px; touch-action: pan-y;">
+					<canvas
+						${$.ref(this.canvasRef)}
+						class="w-full h-full"
+						style="display: block;"
+						@pointermove=${this.handlePointerMove}
+						@pointerleave=${this.handlePointerLeave}
+					></canvas>
+
+					<!-- Tooltip -->
+					${this.showTooltip?p.html`
+								<div
+									class="absolute pointer-events-none transition-opacity duration-150 ${this.tooltipData.visible?"opacity-100":"opacity-0"}"
+									style="
+                    left: ${this.tooltipData.x}px;
+                    top: ${this.tooltipData.y-60}px;
+                    transform: translateX(-50%);
+                  "
+								>
+									<schmancy-surface elevation="3" rounded="all" class="px-3 py-2 min-w-max">
+										<schmancy-typography type="label" token="sm" class="text-surface-onVariant">
+											${this.tooltipData.label}
+										</schmancy-typography>
+										<schmancy-typography type="title" token="md" class="text-surface-on font-semibold">
+											${this.formatValue(this.tooltipData.value)}
+										</schmancy-typography>
+										${this.renderMetadata()}
+									</schmancy-surface>
+								</div>
+						  `:""}
+				</div>
+			</div>
+		`:p.html``}},c([o.property({type:Array})],exports.SchmancyAreaChart.prototype,"data",2),c([o.property({type:Number})],exports.SchmancyAreaChart.prototype,"height",2),c([o.property({type:Boolean})],exports.SchmancyAreaChart.prototype,"showGrid",2),c([o.property({type:Boolean})],exports.SchmancyAreaChart.prototype,"showLabels",2),c([o.property({type:Boolean})],exports.SchmancyAreaChart.prototype,"showTooltip",2),c([o.property({type:Number})],exports.SchmancyAreaChart.prototype,"peakCount",2),c([o.property({type:Number})],exports.SchmancyAreaChart.prototype,"animationDuration",2),c([o.property({type:Boolean})],exports.SchmancyAreaChart.prototype,"animated",2),c([o.property({type:String})],exports.SchmancyAreaChart.prototype,"valuePrefix",2),c([o.property({type:String})],exports.SchmancyAreaChart.prototype,"valueSuffix",2),c([o.property({type:Number})],exports.SchmancyAreaChart.prototype,"valueDecimals",2),c([o.property({type:Object})],exports.SchmancyAreaChart.prototype,"theme",2),c([o.state()],exports.SchmancyAreaChart.prototype,"tooltipData",2),c([o.state()],exports.SchmancyAreaChart.prototype,"animationProgress",2),c([o.state()],exports.SchmancyAreaChart.prototype,"isVisible",2),exports.SchmancyAreaChart=c([o.customElement("schmancy-area-chart")],exports.SchmancyAreaChart);var X=Object.defineProperty,J=Object.getOwnPropertyDescriptor,m=(e,t,i,a)=>{for(var s,r=a>1?void 0:a?J(t,i):t,h=e.length-1;h>=0;h--)(s=e[h])&&(r=(a?s(t,i,r):s(r))||r);return a&&r&&X(t,i,r),r};const O=["bg-primary","bg-secondary","bg-tertiary","bg-success","bg-warning","bg-error","bg-primary/70","bg-secondary/70","bg-tertiary/70","bg-success/70","bg-warning/70","bg-error/70","bg-primary/40","bg-secondary/40","bg-tertiary/40"];exports.SchmancyPills=class extends R.$LitElement(p.css`
+	:host {
+		display: block;
+	}
+`){constructor(){super(...arguments),this.data=[],this.valuePrefix="",this.valueSuffix="",this.valueDecimals=2,this.showMedals=!0,this.showLegend=!0,this.animationDuration=500,this.animated=!0,this.labelWidth="w-14",this.valueWidth="w-20",this.animationProgress=0,this.isVisible=!1,this.categoryColorMap=new Map,this.observer=null,this.animationFrameId=null}connectedCallback(){super.connectedCallback(),this.setupIntersectionObserver()}disconnectedCallback(){super.disconnectedCallback(),this.cleanup()}cleanup(){this.animationFrameId!==null&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null),this.observer&&(this.observer.disconnect(),this.observer=null)}setupIntersectionObserver(){this.observer=new IntersectionObserver(e=>{e[0].isIntersecting&&!this.isVisible&&(this.isVisible=!0,this.animated?this.startAnimation():this.animationProgress=1)},{threshold:.1})}firstUpdated(){this.observer&&this.observer.observe(this)}updated(e){super.updated(e),e.has("data")&&this.isVisible&&this.animated&&(this.animationProgress=0,this.startAnimation())}startAnimation(){const e=performance.now(),t=this.animationDuration,i=a=>{const s=a-e,r=Math.min(s/t,1);this.animationProgress=1-Math.pow(1-r,3),r<1&&this.isVisible&&(this.animationFrameId=requestAnimationFrame(i))};this.animationFrameId=requestAnimationFrame(i)}initializeCategoryColors(){const e=new Map,t=new Map;this.data.forEach(s=>{s.segments&&s.segments.forEach(r=>{e.set(r.label,(e.get(r.label)||0)+r.value),r.color&&!t.has(r.label)&&t.set(r.label,r.color)})});const i=Array.from(e.entries()).sort((s,r)=>r[1]-s[1]).map(([s])=>s);this.categoryColorMap.clear();let a=0;i.forEach(s=>{t.has(s)?this.categoryColorMap.set(s,t.get(s)):(this.categoryColorMap.set(s,O[a%O.length]),a++)})}getSegmentColor(e){return e.color?e.color:this.categoryColorMap.get(e.label)||"bg-primary"}formatValue(e){const t=e.toFixed(this.valueDecimals);return`${this.valuePrefix}${t}${this.valueSuffix}`}getMedalEmoji(e){return this.showMedals&&e?e===1?"🥇":e===2?"🥈":e===3?"🥉":"":""}getMaxValue(){return this.data.length===0?0:Math.max(...this.data.map(e=>e.value),1)}renderBar(e,t){const i=(t>0?e.value/t*100:0)*this.animationProgress;if(!e.segments||e.segments.length===0){const a=e.isPeak?"bg-success":e.isLow?"bg-tertiary opacity-70":e.value===0?"bg-tertiary/40":"bg-primary";return p.html`
+				<div
+					class="${a} h-full transition-all rounded-full"
+					style="width: ${Math.max(i,e.value>0?2:0)}%; transition-duration: ${this.animated?"0ms":"300ms"}"
+					title="${this.formatValue(e.value)}"
+				></div>
+			`}return p.html`
+			<div
+				class="h-full flex"
+				style="width: ${Math.max(i,2)}%; transition-duration: ${this.animated?"0ms":"300ms"}"
+			>
+				${D.repeat(e.segments,a=>a.label,(a,s)=>{const r=e.value>0?a.value/e.value*100:0,h=s>0?"ml-px":"",y=e.isPeak?"brightness-110":"",f=this.getSegmentColor(a);return p.html`
+							<div
+								class="${f} ${h} ${y} h-full transition-all
+									${s===0?"rounded-l-full":""}
+									${s===e.segments.length-1?"rounded-r-full":""}"
+								style="width: ${r}%"
+								title="${a.label}: ${this.formatValue(a.value)}"
+							></div>
+						`})}
+			</div>
+		`}renderLegend(){return this.showLegend&&this.categoryColorMap.size!==0?p.html`
+			<div class="flex flex-wrap gap-3 mt-4 pt-4 border-t border-outline-variant">
+				${D.repeat(Array.from(this.categoryColorMap.entries()),([e])=>e,([e,t])=>p.html`
+						<div class="flex items-center gap-1.5">
+							<div class="${t} w-3 h-3 rounded-sm"></div>
+							<schmancy-typography type="label" token="sm" class="text-surface-onVariant">
+								${e}
+							</schmancy-typography>
+						</div>
+					`)}
+			</div>
+		`:p.html``}render(){if(this.initializeCategoryColors(),!this.data||this.data.length===0)return p.html``;const e=this.getMaxValue();return p.html`
+			<div class="space-y-1">
+				${D.repeat(this.data,t=>t.label,t=>{const i=t.isPeak?"bg-success/10 rounded-lg":"",a=t.isPeak?"text-success font-bold":"text-surface-on";return p.html`
+							<div class="flex items-center gap-3 py-2 px-2 ${i}">
+								<!-- Label -->
+								<div class="${this.labelWidth} shrink-0 text-right">
+									<schmancy-typography type="label" token="md" class="${a}">
+										${t.label}
+									</schmancy-typography>
+								</div>
+
+								<!-- Medal -->
+								<div class="w-6 shrink-0 text-center">
+									${t.isPeak||t.rank&&t.rank<=3?p.html`<span class="text-sm">${this.getMedalEmoji(t.rank)}</span>`:""}
+								</div>
+
+								<!-- Bar -->
+								<div class="flex-1 h-6 bg-secondary/15 rounded-full overflow-hidden">
+									${this.renderBar(t,e)}
+								</div>
+
+								<!-- Value -->
+								<div class="${this.valueWidth} shrink-0 text-right">
+									<schmancy-typography type="label" token="md" class="${a}">
+										${this.formatValue(t.value)}
+									</schmancy-typography>
+								</div>
+							</div>
+						`})}
+			</div>
+
+			<!-- Legend -->
+			${this.renderLegend()}
+		`}},m([o.property({type:Array})],exports.SchmancyPills.prototype,"data",2),m([o.property({type:String})],exports.SchmancyPills.prototype,"valuePrefix",2),m([o.property({type:String})],exports.SchmancyPills.prototype,"valueSuffix",2),m([o.property({type:Number})],exports.SchmancyPills.prototype,"valueDecimals",2),m([o.property({type:Boolean})],exports.SchmancyPills.prototype,"showMedals",2),m([o.property({type:Boolean})],exports.SchmancyPills.prototype,"showLegend",2),m([o.property({type:Number})],exports.SchmancyPills.prototype,"animationDuration",2),m([o.property({type:Boolean})],exports.SchmancyPills.prototype,"animated",2),m([o.property({type:String})],exports.SchmancyPills.prototype,"labelWidth",2),m([o.property({type:String})],exports.SchmancyPills.prototype,"valueWidth",2),m([o.state()],exports.SchmancyPills.prototype,"animationProgress",2),m([o.state()],exports.SchmancyPills.prototype,"isVisible",2),m([o.state()],exports.SchmancyPills.prototype,"categoryColorMap",2),exports.SchmancyPills=m([o.customElement("schmancy-pills")],exports.SchmancyPills),exports.catmullRomSpline=T,exports.easeOutCubic=L,exports.hexToRgba=w;
+//# sourceMappingURL=pills-MmHyBGQu.cjs.map