minerva-design 1.2.0 → 1.4.0

package/dist/web-components/components/chart/charts.d.ts

@@ -0,0 +1,252 @@
+import { ChartDragEvent, ChartHoverEvent, ChartOptions, ChartPlotClickEvent, ChartSeries, HeatmapCell, QuadrantAxisLabels, QuadrantPoint, QuadrantRegions } from '../../../charts/core.js';
+import { MinervaCartesianChartElement } from './chart.js';
+/** Engine options other than the series (axes, legend, tooltip, annotations...) */
+export type ChartBaseOptions = Partial<ChartOptions>;
+/** Base of the elements drawing `series` with a default series type */
+export declare abstract class SeriesChartElement extends MinervaCartesianChartElement {
+    /** Data series (`ChartSeries[]`); each may set its own `type`. Replace the array (or a `data` array) to update the chart; property only */
+    series?: readonly ChartSeries[];
+    /** Other engine options (`ChartOptions` of minerva-design/charts/core: axes, legend, tooltip, annotations...); property only */
+    options?: ChartBaseOptions;
+    protected abstract typed(series: readonly ChartSeries[]): ChartSeries[];
+    protected stackMode(): ChartOptions["stackMode"];
+    protected engineOptions(): ChartOptions | null;
+}
+/**
+ * Line chart (or area chart with `area`) of `minerva-design/charts/core`,
+ * handling millions of points on the GPU: the `<LineChart>` of React. The
+ * series without a `type` are drawn as lines.
+ *
+ * Published as the optional entry `minerva-design/web-components/chart`.
+ *
+ * @summary GPU line chart: straight, smooth or stepped, stacked or 100%.
+ * @tag minerva-line-chart
+ * @csspart root - The sized box of the chart
+ * @csspart surface - The element the engine renders into
+ */
+export declare class MinervaLineChart extends SeriesChartElement {
+    static tagName: string;
+    /** Fills the area under the lines */
+    area: boolean;
+    /** Shape of the lines: straight, smooth (monotone) or steps */
+    curve: "linear" | "smooth" | "step";
+    /** Stacks the series on top of each other */
+    stacked: boolean;
+    /** Scales the stacks to 100% (implies `stacked`) */
+    percent: boolean;
+    protected typed(series: readonly ChartSeries[]): ChartSeries[];
+    protected stackMode(): ChartOptions["stackMode"];
+}
+/**
+ * Area chart of `minerva-design/charts/core`: smooth by default, stacked or
+ * 100% stacked (the `<AreaChart>` of React). The series without a `type`
+ * are drawn as areas.
+ *
+ * Published as the optional entry `minerva-design/web-components/chart`.
+ *
+ * @summary GPU area chart: smooth, stacked or 100% stacked.
+ * @tag minerva-area-chart
+ * @csspart root - The sized box of the chart
+ * @csspart surface - The element the engine renders into
+ */
+export declare class MinervaAreaChart extends SeriesChartElement {
+    static tagName: string;
+    /** Shape of the edges: straight, smooth (monotone) or steps */
+    curve: "linear" | "smooth" | "step";
+    /** Stacks the areas on top of each other */
+    stacked: boolean;
+    /** Scales the stacks to 100% (implies `stacked`) */
+    percent: boolean;
+    protected typed(series: readonly ChartSeries[]): ChartSeries[];
+    protected stackMode(): ChartOptions["stackMode"];
+}
+/**
+ * Bar chart of `minerva-design/charts/core`: grouped side by side, stacked
+ * or 100% stacked, with optional value labels (the `<BarChart>` of React).
+ * The series without a `type` are drawn as bars (set `type: "line"` on a
+ * series for an overlay).
+ *
+ * Published as the optional entry `minerva-design/web-components/chart`.
+ *
+ * @summary GPU bar chart: grouped, stacked or 100%, with value labels.
+ * @tag minerva-bar-chart
+ * @csspart root - The sized box of the chart
+ * @csspart surface - The element the engine renders into
+ */
+export declare class MinervaBarChart extends SeriesChartElement {
+    static tagName: string;
+    /** Stacks the bars of every series (otherwise they are grouped side by side) */
+    stacked: boolean;
+    /** Scales the stacks to 100% (implies `stacked`) */
+    percent: boolean;
+    /** Writes the value above every bar */
+    labels: boolean;
+    protected typed(series: readonly ChartSeries[]): ChartSeries[];
+    protected stackMode(): ChartOptions["stackMode"];
+}
+/**
+ * Scatter chart of `minerva-design/charts/core`: zooms on both axes, hit
+ * testing through a spatial index (the `<ScatterChart>` of React). The
+ * series without a `type` are drawn as dots.
+ *
+ * Published as the optional entry `minerva-design/web-components/chart`.
+ *
+ * @summary GPU scatter chart zooming on both axes.
+ * @tag minerva-scatter-chart
+ * @csspart root - The sized box of the chart
+ * @csspart surface - The element the engine renders into
+ */
+export declare class MinervaScatterChart extends SeriesChartElement {
+    static tagName: string;
+    protected typed(series: readonly ChartSeries[]): ChartSeries[];
+}
+/**
+ * Candlestick (OHLC) chart of `minerva-design/charts/core` (the
+ * `<CandlestickChart>` of React): data points carry `open`, `high`, `low`
+ * and `y` (the close). The series without a `type` are drawn as candles
+ * (e.g. add a moving average with `type: "line"`).
+ *
+ * Published as the optional entry `minerva-design/web-components/chart`.
+ *
+ * @summary GPU candlestick chart of rising and falling candles.
+ * @tag minerva-candlestick-chart
+ * @csspart root - The sized box of the chart
+ * @csspart surface - The element the engine renders into
+ */
+export declare class MinervaCandlestickChart extends SeriesChartElement {
+    static tagName: string;
+    protected typed(series: readonly ChartSeries[]): ChartSeries[];
+}
+/**
+ * Heatmap of `minerva-design/charts/core` (the `<HeatmapChart>` of React):
+ * a grid of cells colored by value, categories (or numbers) on both axes.
+ *
+ * Published as the optional entry `minerva-design/web-components/chart`.
+ *
+ * @summary GPU heatmap: a grid of cells colored by value.
+ * @tag minerva-heatmap-chart
+ * @csspart root - The sized box of the chart
+ * @csspart surface - The element the engine renders into
+ */
+export declare class MinervaHeatmapChart extends MinervaCartesianChartElement {
+    static tagName: string;
+    /** Cells `{ x, y, value }`; property only */
+    data?: readonly HeatmapCell[];
+    /** Column names in order (collected from the data when omitted); property only */
+    xCategories?: readonly string[];
+    /** Row names from bottom to top (collected from the data when omitted); property only */
+    yCategories?: readonly string[];
+    /** Colors from the lowest to the highest value (a ramp of the first palette color by default); property only */
+    colorScale?: readonly string[];
+    /** Values at the ends of the color scale (the data range by default); property only */
+    valueRange?: readonly [number, number];
+    /** Name of the value in the tooltip */
+    valueName?: string;
+    /** Corner radius of the cells, in pixels */
+    radius?: number;
+    /** Formats the values in the tooltip; property only */
+    format?: (value: number) => string;
+    /** Other engine options (axes, legend, tooltip, padding...); property only */
+    options?: ChartBaseOptions;
+    protected engineOptions(): ChartOptions | null;
+}
+/**
+ * Word-sized chart without axes (a trend in a table cell, a KPI card...) of
+ * `minerva-design/charts/core`: the `<Sparkline>` of React.
+ *
+ * Published as the optional entry `minerva-design/web-components/chart`.
+ *
+ * @summary Small line, area or bar trend without axes.
+ * @tag minerva-sparkline
+ * @csspart root - The sized box of the chart
+ * @csspart surface - The element the engine renders into
+ */
+export declare class MinervaSparkline extends MinervaCartesianChartElement {
+    static tagName: string;
+    /** Height of the sparkline: pixels or any CSS length */
+    height?: string | number;
+    /** Values (or `[x, y]` pairs, typed arrays...); property only */
+    data?: ChartSeries["data"];
+    /** How the values are drawn */
+    type: "line" | "area" | "bar";
+    /** Color (any CSS color); the first palette color by default */
+    color?: string;
+    /** Shape of the line */
+    curve: "linear" | "smooth" | "step";
+    /** Draws a dashed reference line at this value (a target, the average...) */
+    reference?: number;
+    /** Name of the value in the tooltip */
+    valueName?: string;
+    /** Formats the value in the tooltip; property only */
+    format?: (value: number) => string;
+    /** Other engine options (tooltip, palette, renderer...); property only */
+    options?: ChartBaseOptions;
+    protected engineOptions(): ChartOptions | null;
+}
+/**
+ * Four-quadrant matrix (priority matrix, Eisenhower, BCG...) of
+ * `minerva-design/charts/core` (the `<QuadrantChart>` of React): tinted
+ * quadrants with titles, dividers and labelled dots placed without
+ * overlapping labels. With `drag-points`, dots can be dragged to another
+ * quadrant (`minerva-point-drop`; update `points` to move them).
+ *
+ * Published as the optional entry `minerva-design/web-components/chart`.
+ *
+ * @summary Four-quadrant matrix of labelled, draggable dots.
+ * @tag minerva-quadrant-chart
+ * @csspart root - The sized box of the chart
+ * @csspart surface - The element the engine renders into
+ * @fires minerva-point-click - A dot was clicked; detail: { point, index }
+ * @fires minerva-quadrant-click - The empty area of a quadrant was clicked; detail: { quadrant, x, y }
+ * @fires minerva-point-drop - A dragged dot was released; detail: { point, index, x, y, quadrant }
+ */
+export declare class MinervaQuadrantChart extends MinervaCartesianChartElement {
+    static tagName: string;
+    /** Points `{ x, y, label, color, size }` to place; property only */
+    points?: readonly QuadrantPoint[];
+    /** Titles and colors of the quadrants (`topLeft`, `topRight`, `bottomLeft`, `bottomRight`); property only */
+    quadrants?: QuadrantRegions;
+    /** Title of the horizontal axis */
+    xLabel?: string;
+    /** Title of the vertical axis */
+    yLabel?: string;
+    /** Texts at the ends of the dividers, drawn inside the plot; property only */
+    axisLabels?: QuadrantAxisLabels;
+    /** Range of the horizontal axis (default [0, 10]); property only */
+    xDomain?: [number, number];
+    /** Range of the vertical axis (default [0, 10]); property only */
+    yDomain?: [number, number];
+    /** X value of the vertical divider (the middle of the x domain by default) */
+    xSplit?: number;
+    /** Y value of the horizontal divider (the middle of the y domain by default) */
+    ySplit?: number;
+    /** Reverses the horizontal axis (e.g. "urgent" on the left) */
+    reverseX: boolean;
+    /** Hides the numeric ticks of the axes (only the matrix remains) */
+    hideTicks: boolean;
+    /** Hides the labels next to the dots */
+    hideLabels: boolean;
+    /** Dot diameter in pixels */
+    pointSize: number;
+    /** Lets the user drag the dots (`minerva-point-drop`) */
+    dragPoints: boolean;
+    /** Other engine options (legend, tooltip, padding, palette...); property only */
+    options?: Omit<ChartOptions, "series">;
+    private geometry;
+    protected engineOptions(): ChartOptions | null;
+    protected pointClicked(event: ChartHoverEvent): void;
+    protected plotClicked(event: ChartPlotClickEvent): void;
+    protected pointDropped(event: ChartDragEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "minerva-line-chart": MinervaLineChart;
+        "minerva-area-chart": MinervaAreaChart;
+        "minerva-bar-chart": MinervaBarChart;
+        "minerva-scatter-chart": MinervaScatterChart;
+        "minerva-candlestick-chart": MinervaCandlestickChart;
+        "minerva-heatmap-chart": MinervaHeatmapChart;
+        "minerva-sparkline": MinervaSparkline;
+        "minerva-quadrant-chart": MinervaQuadrantChart;
+    }
+}

package/dist/web-components/components/chart/charts.js

@@ -0,0 +1,201 @@
+import e from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
+import { MinervaCartesianChartElement as t } from "./chart.js";
+import { withSeriesType as n } from "./series.js";
+import { property as r } from "lit/decorators.js";
+import { heatmapChartOptions as i, quadrantChartOptions as a, quadrantOf as o, sparklineOptions as s } from "../../../charts/core.js";
+//#region src/components/chart/charts.ts
+var c = class extends t {
+	stackMode() {
+		return this.options?.stackMode;
+	}
+	engineOptions() {
+		let e = this.series ?? this.options?.series;
+		return e ? {
+			...this.options,
+			series: this.typed(e),
+			stackMode: this.stackMode()
+		} : null;
+	}
+};
+e([r({ attribute: !1 })], c.prototype, "series", void 0), e([r({ attribute: !1 })], c.prototype, "options", void 0);
+var l = class extends c {
+	constructor(...e) {
+		super(...e), this.area = !1, this.curve = "linear", this.stacked = !1, this.percent = !1;
+	}
+	static {
+		this.tagName = "minerva-line-chart";
+	}
+	typed(e) {
+		return n(e, this.area ? "area" : "line", this.stacked || this.percent ? "stack" : void 0, this.curve);
+	}
+	stackMode() {
+		return this.percent ? "percent" : super.stackMode();
+	}
+};
+e([r({ type: Boolean })], l.prototype, "area", void 0), e([r()], l.prototype, "curve", void 0), e([r({ type: Boolean })], l.prototype, "stacked", void 0), e([r({ type: Boolean })], l.prototype, "percent", void 0);
+var u = class extends c {
+	constructor(...e) {
+		super(...e), this.curve = "smooth", this.stacked = !1, this.percent = !1;
+	}
+	static {
+		this.tagName = "minerva-area-chart";
+	}
+	typed(e) {
+		return n(e, "area", this.stacked || this.percent ? "stack" : void 0, this.curve);
+	}
+	stackMode() {
+		return this.percent ? "percent" : super.stackMode();
+	}
+};
+e([r()], u.prototype, "curve", void 0), e([r({ type: Boolean })], u.prototype, "stacked", void 0), e([r({ type: Boolean })], u.prototype, "percent", void 0);
+var d = class extends c {
+	constructor(...e) {
+		super(...e), this.stacked = !1, this.percent = !1, this.labels = !1;
+	}
+	static {
+		this.tagName = "minerva-bar-chart";
+	}
+	typed(e) {
+		return n(e, "bar", this.stacked || this.percent ? "stack" : void 0).map((e) => this.labels && e.type === "bar" ? {
+			...e,
+			showLabels: e.showLabels ?? !0
+		} : e);
+	}
+	stackMode() {
+		return this.percent ? "percent" : super.stackMode();
+	}
+};
+e([r({ type: Boolean })], d.prototype, "stacked", void 0), e([r({ type: Boolean })], d.prototype, "percent", void 0), e([r({ type: Boolean })], d.prototype, "labels", void 0);
+var f = class extends c {
+	static {
+		this.tagName = "minerva-scatter-chart";
+	}
+	typed(e) {
+		return n(e, "scatter");
+	}
+}, p = class extends c {
+	static {
+		this.tagName = "minerva-candlestick-chart";
+	}
+	typed(e) {
+		return n(e, "candlestick");
+	}
+}, m = class extends t {
+	static {
+		this.tagName = "minerva-heatmap-chart";
+	}
+	engineOptions() {
+		return this.data ? i({
+			data: this.data,
+			xCategories: this.xCategories,
+			yCategories: this.yCategories,
+			colorScale: this.colorScale,
+			valueRange: this.valueRange,
+			name: this.valueName,
+			radius: this.radius,
+			format: this.format
+		}, this.options) : null;
+	}
+};
+e([r({ attribute: !1 })], m.prototype, "data", void 0), e([r({ attribute: !1 })], m.prototype, "xCategories", void 0), e([r({ attribute: !1 })], m.prototype, "yCategories", void 0), e([r({ attribute: !1 })], m.prototype, "colorScale", void 0), e([r({ attribute: !1 })], m.prototype, "valueRange", void 0), e([r({ attribute: "value-name" })], m.prototype, "valueName", void 0), e([r({ type: Number })], m.prototype, "radius", void 0), e([r({ attribute: !1 })], m.prototype, "format", void 0), e([r({ attribute: !1 })], m.prototype, "options", void 0);
+var h = class extends t {
+	constructor(...e) {
+		super(...e), this.height = 48, this.type = "line", this.curve = "smooth";
+	}
+	static {
+		this.tagName = "minerva-sparkline";
+	}
+	engineOptions() {
+		return this.data ? s({
+			data: this.data,
+			type: this.type,
+			color: this.color,
+			curve: this.curve,
+			name: this.valueName,
+			reference: this.reference,
+			format: this.format
+		}, this.options) : null;
+	}
+};
+e([r()], h.prototype, "height", void 0), e([r({ attribute: !1 })], h.prototype, "data", void 0), e([r()], h.prototype, "type", void 0), e([r()], h.prototype, "color", void 0), e([r()], h.prototype, "curve", void 0), e([r({ type: Number })], h.prototype, "reference", void 0), e([r({ attribute: "value-name" })], h.prototype, "valueName", void 0), e([r({ attribute: !1 })], h.prototype, "format", void 0), e([r({ attribute: !1 })], h.prototype, "options", void 0);
+var g = class extends t {
+	constructor(...e) {
+		super(...e), this.reverseX = !1, this.hideTicks = !1, this.hideLabels = !1, this.pointSize = 12, this.dragPoints = !1;
+	}
+	static {
+		this.tagName = "minerva-quadrant-chart";
+	}
+	geometry() {
+		return {
+			xDomain: this.xDomain,
+			yDomain: this.yDomain,
+			xSplit: this.xSplit,
+			ySplit: this.ySplit,
+			reverseX: this.reverseX
+		};
+	}
+	engineOptions() {
+		return this.points ? a({
+			...this.geometry(),
+			points: this.points,
+			quadrants: this.quadrants,
+			xLabel: this.xLabel,
+			yLabel: this.yLabel,
+			axisLabels: this.axisLabels,
+			showTicks: !this.hideTicks,
+			showLabels: !this.hideLabels,
+			pointSize: this.pointSize,
+			draggable: this.dragPoints
+		}, this.options) : null;
+	}
+	pointClicked(e) {
+		let t = e.items[0]?.index, n = t === void 0 ? void 0 : this.points?.[t];
+		n && this.emit("minerva-point-click", {
+			point: n,
+			index: t
+		});
+	}
+	plotClicked(e) {
+		this.emit("minerva-quadrant-click", {
+			quadrant: o(this.geometry(), e.x, e.y),
+			x: e.x,
+			y: e.y
+		});
+	}
+	pointDropped(e) {
+		let t = e.item.index, n = this.points?.[t];
+		n && this.emit("minerva-point-drop", {
+			point: n,
+			index: t,
+			x: e.x,
+			y: e.y,
+			quadrant: o(this.geometry(), e.x, e.y)
+		});
+	}
+};
+e([r({ attribute: !1 })], g.prototype, "points", void 0), e([r({ attribute: !1 })], g.prototype, "quadrants", void 0), e([r({ attribute: "x-label" })], g.prototype, "xLabel", void 0), e([r({ attribute: "y-label" })], g.prototype, "yLabel", void 0), e([r({ attribute: !1 })], g.prototype, "axisLabels", void 0), e([r({ attribute: !1 })], g.prototype, "xDomain", void 0), e([r({ attribute: !1 })], g.prototype, "yDomain", void 0), e([r({
+	type: Number,
+	attribute: "x-split"
+})], g.prototype, "xSplit", void 0), e([r({
+	type: Number,
+	attribute: "y-split"
+})], g.prototype, "ySplit", void 0), e([r({
+	type: Boolean,
+	attribute: "reverse-x"
+})], g.prototype, "reverseX", void 0), e([r({
+	type: Boolean,
+	attribute: "hide-ticks"
+})], g.prototype, "hideTicks", void 0), e([r({
+	type: Boolean,
+	attribute: "hide-labels"
+})], g.prototype, "hideLabels", void 0), e([r({
+	type: Number,
+	attribute: "point-size"
+})], g.prototype, "pointSize", void 0), e([r({
+	type: Boolean,
+	attribute: "drag-points"
+})], g.prototype, "dragPoints", void 0), e([r({ attribute: !1 })], g.prototype, "options", void 0);
+//#endregion
+export { u as MinervaAreaChart, d as MinervaBarChart, p as MinervaCandlestickChart, m as MinervaHeatmapChart, l as MinervaLineChart, g as MinervaQuadrantChart, f as MinervaScatterChart, h as MinervaSparkline, c as SeriesChartElement };
+
+//# sourceMappingURL=charts.js.map

package/dist/web-components/components/chart/charts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"charts.js","names":["_decorate","__decorate","SeriesChartElement","MinervaCartesianChartElement","series","property","MinervaLineChart","_args","withSeriesType","MinervaAreaChart","_args2","MinervaBarChart","_args3","s","MinervaScatterChart","MinervaCandlestickChart","MinervaHeatmapChart","heatmapChartOptions","MinervaSparkline","_args4","sparklineOptions","MinervaQuadrantChart","_args5","quadrantChartOptions","index","event","point","quadrantOf"],"sources":["../../../../../web-components/src/components/chart/charts.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport {\n  heatmapChartOptions,\n  quadrantChartOptions,\n  quadrantOf,\n  sparklineOptions,\n  type ChartDragEvent,\n  type ChartHoverEvent,\n  type ChartOptions,\n  type ChartPlotClickEvent,\n  type ChartSeries,\n  type HeatmapCell,\n  type QuadrantAxisLabels,\n  type QuadrantConfig,\n  type QuadrantPoint,\n  type QuadrantRegions,\n} from \"minerva-design/charts/core\";\nimport { MinervaCartesianChartElement } from \"./chart\";\nimport { withSeriesType } from \"./series\";\n\n/** Engine options other than the series (axes, legend, tooltip, annotations...) */\nexport type ChartBaseOptions = Partial<ChartOptions>;\n\n/** Base of the elements drawing `series` with a default series type */\nexport abstract class SeriesChartElement extends MinervaCartesianChartElement {\n  /** Data series (`ChartSeries[]`); each may set its own `type`. Replace the array (or a `data` array) to update the chart; property only */\n  @property({ attribute: false })\n  series?: readonly ChartSeries[];\n\n  /** Other engine options (`ChartOptions` of minerva-design/charts/core: axes, legend, tooltip, annotations...); property only */\n  @property({ attribute: false })\n  options?: ChartBaseOptions;\n\n  protected abstract typed(series: readonly ChartSeries[]): ChartSeries[];\n\n  protected stackMode(): ChartOptions[\"stackMode\"] {\n    return this.options?.stackMode;\n  }\n\n  protected engineOptions(): ChartOptions | null {\n    const series = this.series ?? this.options?.series;\n    if (!series) return null;\n    return {\n      ...this.options,\n      series: this.typed(series),\n      stackMode: this.stackMode(),\n    };\n  }\n}\n\n/**\n * Line chart (or area chart with `area`) of `minerva-design/charts/core`,\n * handling millions of points on the GPU: the `<LineChart>` of React. The\n * series without a `type` are drawn as lines.\n *\n * Published as the optional entry `minerva-design/web-components/chart`.\n *\n * @summary GPU line chart: straight, smooth or stepped, stacked or 100%.\n * @tag minerva-line-chart\n * @csspart root - The sized box of the chart\n * @csspart surface - The element the engine renders into\n */\nexport class MinervaLineChart extends SeriesChartElement {\n  static override tagName = \"minerva-line-chart\";\n\n  /** Fills the area under the lines */\n  @property({ type: Boolean })\n  area = false;\n\n  /** Shape of the lines: straight, smooth (monotone) or steps */\n  @property()\n  curve: \"linear\" | \"smooth\" | \"step\" = \"linear\";\n\n  /** Stacks the series on top of each other */\n  @property({ type: Boolean })\n  stacked = false;\n\n  /** Scales the stacks to 100% (implies `stacked`) */\n  @property({ type: Boolean })\n  percent = false;\n\n  protected typed(series: readonly ChartSeries[]): ChartSeries[] {\n    return withSeriesType(\n      series,\n      this.area ? \"area\" : \"line\",\n      this.stacked || this.percent ? \"stack\" : undefined,\n      this.curve,\n    );\n  }\n\n  protected override stackMode(): ChartOptions[\"stackMode\"] {\n    return this.percent ? \"percent\" : super.stackMode();\n  }\n}\n\n/**\n * Area chart of `minerva-design/charts/core`: smooth by default, stacked or\n * 100% stacked (the `<AreaChart>` of React). The series without a `type`\n * are drawn as areas.\n *\n * Published as the optional entry `minerva-design/web-components/chart`.\n *\n * @summary GPU area chart: smooth, stacked or 100% stacked.\n * @tag minerva-area-chart\n * @csspart root - The sized box of the chart\n * @csspart surface - The element the engine renders into\n */\nexport class MinervaAreaChart extends SeriesChartElement {\n  static override tagName = \"minerva-area-chart\";\n\n  /** Shape of the edges: straight, smooth (monotone) or steps */\n  @property()\n  curve: \"linear\" | \"smooth\" | \"step\" = \"smooth\";\n\n  /** Stacks the areas on top of each other */\n  @property({ type: Boolean })\n  stacked = false;\n\n  /** Scales the stacks to 100% (implies `stacked`) */\n  @property({ type: Boolean })\n  percent = false;\n\n  protected typed(series: readonly ChartSeries[]): ChartSeries[] {\n    return withSeriesType(\n      series,\n      \"area\",\n      this.stacked || this.percent ? \"stack\" : undefined,\n      this.curve,\n    );\n  }\n\n  protected override stackMode(): ChartOptions[\"stackMode\"] {\n    return this.percent ? \"percent\" : super.stackMode();\n  }\n}\n\n/**\n * Bar chart of `minerva-design/charts/core`: grouped side by side, stacked\n * or 100% stacked, with optional value labels (the `<BarChart>` of React).\n * The series without a `type` are drawn as bars (set `type: \"line\"` on a\n * series for an overlay).\n *\n * Published as the optional entry `minerva-design/web-components/chart`.\n *\n * @summary GPU bar chart: grouped, stacked or 100%, with value labels.\n * @tag minerva-bar-chart\n * @csspart root - The sized box of the chart\n * @csspart surface - The element the engine renders into\n */\nexport class MinervaBarChart extends SeriesChartElement {\n  static override tagName = \"minerva-bar-chart\";\n\n  /** Stacks the bars of every series (otherwise they are grouped side by side) */\n  @property({ type: Boolean })\n  stacked = false;\n\n  /** Scales the stacks to 100% (implies `stacked`) */\n  @property({ type: Boolean })\n  percent = false;\n\n  /** Writes the value above every bar */\n  @property({ type: Boolean })\n  labels = false;\n\n  protected typed(series: readonly ChartSeries[]): ChartSeries[] {\n    return withSeriesType(\n      series,\n      \"bar\",\n      this.stacked || this.percent ? \"stack\" : undefined,\n    ).map((s) =>\n      this.labels && s.type === \"bar\"\n        ? { ...s, showLabels: s.showLabels ?? true }\n        : s,\n    );\n  }\n\n  protected override stackMode(): ChartOptions[\"stackMode\"] {\n    return this.percent ? \"percent\" : super.stackMode();\n  }\n}\n\n/**\n * Scatter chart of `minerva-design/charts/core`: zooms on both axes, hit\n * testing through a spatial index (the `<ScatterChart>` of React). The\n * series without a `type` are drawn as dots.\n *\n * Published as the optional entry `minerva-design/web-components/chart`.\n *\n * @summary GPU scatter chart zooming on both axes.\n * @tag minerva-scatter-chart\n * @csspart root - The sized box of the chart\n * @csspart surface - The element the engine renders into\n */\nexport class MinervaScatterChart extends SeriesChartElement {\n  static override tagName = \"minerva-scatter-chart\";\n\n  protected typed(series: readonly ChartSeries[]): ChartSeries[] {\n    return withSeriesType(series, \"scatter\");\n  }\n}\n\n/**\n * Candlestick (OHLC) chart of `minerva-design/charts/core` (the\n * `<CandlestickChart>` of React): data points carry `open`, `high`, `low`\n * and `y` (the close). The series without a `type` are drawn as candles\n * (e.g. add a moving average with `type: \"line\"`).\n *\n * Published as the optional entry `minerva-design/web-components/chart`.\n *\n * @summary GPU candlestick chart of rising and falling candles.\n * @tag minerva-candlestick-chart\n * @csspart root - The sized box of the chart\n * @csspart surface - The element the engine renders into\n */\nexport class MinervaCandlestickChart extends SeriesChartElement {\n  static override tagName = \"minerva-candlestick-chart\";\n\n  protected typed(series: readonly ChartSeries[]): ChartSeries[] {\n    return withSeriesType(series, \"candlestick\");\n  }\n}\n\n/**\n * Heatmap of `minerva-design/charts/core` (the `<HeatmapChart>` of React):\n * a grid of cells colored by value, categories (or numbers) on both axes.\n *\n * Published as the optional entry `minerva-design/web-components/chart`.\n *\n * @summary GPU heatmap: a grid of cells colored by value.\n * @tag minerva-heatmap-chart\n * @csspart root - The sized box of the chart\n * @csspart surface - The element the engine renders into\n */\nexport class MinervaHeatmapChart extends MinervaCartesianChartElement {\n  static override tagName = \"minerva-heatmap-chart\";\n\n  /** Cells `{ x, y, value }`; property only */\n  @property({ attribute: false })\n  data?: readonly HeatmapCell[];\n\n  /** Column names in order (collected from the data when omitted); property only */\n  @property({ attribute: false })\n  xCategories?: readonly string[];\n\n  /** Row names from bottom to top (collected from the data when omitted); property only */\n  @property({ attribute: false })\n  yCategories?: readonly string[];\n\n  /** Colors from the lowest to the highest value (a ramp of the first palette color by default); property only */\n  @property({ attribute: false })\n  colorScale?: readonly string[];\n\n  /** Values at the ends of the color scale (the data range by default); property only */\n  @property({ attribute: false })\n  valueRange?: readonly [number, number];\n\n  /** Name of the value in the tooltip */\n  @property({ attribute: \"value-name\" })\n  valueName?: string;\n\n  /** Corner radius of the cells, in pixels */\n  @property({ type: Number })\n  radius?: number;\n\n  /** Formats the values in the tooltip; property only */\n  @property({ attribute: false })\n  format?: (value: number) => string;\n\n  /** Other engine options (axes, legend, tooltip, padding...); property only */\n  @property({ attribute: false })\n  options?: ChartBaseOptions;\n\n  protected engineOptions(): ChartOptions | null {\n    if (!this.data) return null;\n    return heatmapChartOptions(\n      {\n        data: this.data,\n        xCategories: this.xCategories,\n        yCategories: this.yCategories,\n        colorScale: this.colorScale,\n        valueRange: this.valueRange,\n        name: this.valueName,\n        radius: this.radius,\n        format: this.format,\n      },\n      this.options,\n    );\n  }\n}\n\n/**\n * Word-sized chart without axes (a trend in a table cell, a KPI card...) of\n * `minerva-design/charts/core`: the `<Sparkline>` of React.\n *\n * Published as the optional entry `minerva-design/web-components/chart`.\n *\n * @summary Small line, area or bar trend without axes.\n * @tag minerva-sparkline\n * @csspart root - The sized box of the chart\n * @csspart surface - The element the engine renders into\n */\nexport class MinervaSparkline extends MinervaCartesianChartElement {\n  static override tagName = \"minerva-sparkline\";\n\n  /** Height of the sparkline: pixels or any CSS length */\n  @property()\n  override height?: string | number = 48;\n\n  /** Values (or `[x, y]` pairs, typed arrays...); property only */\n  @property({ attribute: false })\n  data?: ChartSeries[\"data\"];\n\n  /** How the values are drawn */\n  @property()\n  type: \"line\" | \"area\" | \"bar\" = \"line\";\n\n  /** Color (any CSS color); the first palette color by default */\n  @property()\n  color?: string;\n\n  /** Shape of the line */\n  @property()\n  curve: \"linear\" | \"smooth\" | \"step\" = \"smooth\";\n\n  /** Draws a dashed reference line at this value (a target, the average...) */\n  @property({ type: Number })\n  reference?: number;\n\n  /** Name of the value in the tooltip */\n  @property({ attribute: \"value-name\" })\n  valueName?: string;\n\n  /** Formats the value in the tooltip; property only */\n  @property({ attribute: false })\n  format?: (value: number) => string;\n\n  /** Other engine options (tooltip, palette, renderer...); property only */\n  @property({ attribute: false })\n  options?: ChartBaseOptions;\n\n  protected engineOptions(): ChartOptions | null {\n    if (!this.data) return null;\n    return sparklineOptions(\n      {\n        data: this.data,\n        type: this.type,\n        color: this.color,\n        curve: this.curve,\n        name: this.valueName,\n        reference: this.reference,\n        format: this.format,\n      },\n      this.options,\n    );\n  }\n}\n\n/**\n * Four-quadrant matrix (priority matrix, Eisenhower, BCG...) of\n * `minerva-design/charts/core` (the `<QuadrantChart>` of React): tinted\n * quadrants with titles, dividers and labelled dots placed without\n * overlapping labels. With `drag-points`, dots can be dragged to another\n * quadrant (`minerva-point-drop`; update `points` to move them).\n *\n * Published as the optional entry `minerva-design/web-components/chart`.\n *\n * @summary Four-quadrant matrix of labelled, draggable dots.\n * @tag minerva-quadrant-chart\n * @csspart root - The sized box of the chart\n * @csspart surface - The element the engine renders into\n * @fires minerva-point-click - A dot was clicked; detail: { point, index }\n * @fires minerva-quadrant-click - The empty area of a quadrant was clicked; detail: { quadrant, x, y }\n * @fires minerva-point-drop - A dragged dot was released; detail: { point, index, x, y, quadrant }\n */\nexport class MinervaQuadrantChart extends MinervaCartesianChartElement {\n  static override tagName = \"minerva-quadrant-chart\";\n\n  /** Points `{ x, y, label, color, size }` to place; property only */\n  @property({ attribute: false })\n  points?: readonly QuadrantPoint[];\n\n  /** Titles and colors of the quadrants (`topLeft`, `topRight`, `bottomLeft`, `bottomRight`); property only */\n  @property({ attribute: false })\n  quadrants?: QuadrantRegions;\n\n  /** Title of the horizontal axis */\n  @property({ attribute: \"x-label\" })\n  xLabel?: string;\n\n  /** Title of the vertical axis */\n  @property({ attribute: \"y-label\" })\n  yLabel?: string;\n\n  /** Texts at the ends of the dividers, drawn inside the plot; property only */\n  @property({ attribute: false })\n  axisLabels?: QuadrantAxisLabels;\n\n  /** Range of the horizontal axis (default [0, 10]); property only */\n  @property({ attribute: false })\n  xDomain?: [number, number];\n\n  /** Range of the vertical axis (default [0, 10]); property only */\n  @property({ attribute: false })\n  yDomain?: [number, number];\n\n  /** X value of the vertical divider (the middle of the x domain by default) */\n  @property({ type: Number, attribute: \"x-split\" })\n  xSplit?: number;\n\n  /** Y value of the horizontal divider (the middle of the y domain by default) */\n  @property({ type: Number, attribute: \"y-split\" })\n  ySplit?: number;\n\n  /** Reverses the horizontal axis (e.g. \"urgent\" on the left) */\n  @property({ type: Boolean, attribute: \"reverse-x\" })\n  reverseX = false;\n\n  /** Hides the numeric ticks of the axes (only the matrix remains) */\n  @property({ type: Boolean, attribute: \"hide-ticks\" })\n  hideTicks = false;\n\n  /** Hides the labels next to the dots */\n  @property({ type: Boolean, attribute: \"hide-labels\" })\n  hideLabels = false;\n\n  /** Dot diameter in pixels */\n  @property({ type: Number, attribute: \"point-size\" })\n  pointSize = 12;\n\n  /** Lets the user drag the dots (`minerva-point-drop`) */\n  @property({ type: Boolean, attribute: \"drag-points\" })\n  dragPoints = false;\n\n  /** Other engine options (legend, tooltip, padding, palette...); property only */\n  @property({ attribute: false })\n  options?: Omit<ChartOptions, \"series\">;\n\n  private geometry(): Pick<\n    QuadrantConfig,\n    \"xDomain\" | \"yDomain\" | \"xSplit\" | \"ySplit\" | \"reverseX\"\n  > {\n    return {\n      xDomain: this.xDomain,\n      yDomain: this.yDomain,\n      xSplit: this.xSplit,\n      ySplit: this.ySplit,\n      reverseX: this.reverseX,\n    };\n  }\n\n  protected engineOptions(): ChartOptions | null {\n    if (!this.points) return null;\n    return quadrantChartOptions(\n      {\n        ...this.geometry(),\n        points: this.points,\n        quadrants: this.quadrants,\n        xLabel: this.xLabel,\n        yLabel: this.yLabel,\n        axisLabels: this.axisLabels,\n        showTicks: !this.hideTicks,\n        showLabels: !this.hideLabels,\n        pointSize: this.pointSize,\n        draggable: this.dragPoints,\n      },\n      this.options,\n    );\n  }\n\n  protected override pointClicked(event: ChartHoverEvent): void {\n    const index = event.items[0]?.index;\n    const point = index === undefined ? undefined : this.points?.[index];\n    if (point) this.emit(\"minerva-point-click\", { point, index });\n  }\n\n  protected override plotClicked(event: ChartPlotClickEvent): void {\n    this.emit(\"minerva-quadrant-click\", {\n      quadrant: quadrantOf(this.geometry(), event.x, event.y),\n      x: event.x,\n      y: event.y,\n    });\n  }\n\n  protected override pointDropped(event: ChartDragEvent): void {\n    const index = event.item.index;\n    const point = this.points?.[index];\n    if (!point) return;\n    this.emit(\"minerva-point-drop\", {\n      point,\n      index,\n      x: event.x,\n      y: event.y,\n      quadrant: quadrantOf(this.geometry(), event.x, event.y),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"minerva-line-chart\": MinervaLineChart;\n    \"minerva-area-chart\": MinervaAreaChart;\n    \"minerva-bar-chart\": MinervaBarChart;\n    \"minerva-scatter-chart\": MinervaScatterChart;\n    \"minerva-candlestick-chart\": MinervaCandlestickChart;\n    \"minerva-heatmap-chart\": MinervaHeatmapChart;\n    \"minerva-sparkline\": MinervaSparkline;\n    \"minerva-quadrant-chart\": MinervaQuadrantChart;\n  }\n}\n"],"mappings":"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"}

package/dist/web-components/components/chart/engine-element.d.ts

@@ -0,0 +1,53 @@
+import { PropertyValues } from 'lit';
+import { MinervaElement } from '../../internal/minerva-element.js';
+/**
+ * What a chart engine factory of `minerva-design/charts/core` returns
+ * (`createChart`, `createShapeChart`, ...): options can be replaced, the
+ * instance destroyed.
+ */
+export interface EngineInstance<O> {
+    setOptions(options: O): void;
+    destroy(): void;
+}
+/**
+ * Base of the chart elements: mounts an engine of
+ * `minerva-design/charts/core` into a sized surface of the shadow root once
+ * the element is rendered and connected, passes the new options on every
+ * property change, and destroys it when the element is disconnected (a
+ * reconnected element creates a new engine). Nothing runs on the server.
+ *
+ * A subclass names the factory (`createEngine`), turns its properties into
+ * engine options (`engineOptions`, `null` while there is nothing to draw)
+ * and forwards the engine events (`bindEngine`).
+ */
+export declare abstract class MinervaEngineElement<O, I extends EngineInstance<O>> extends MinervaElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** Height of the chart, the legend included: pixels or any CSS length (default 320, sparkline 48, gauge 240) */
+    height?: string | number;
+    private engine;
+    private offs;
+    /** The engine instance (`minerva-design/charts/core`), `null` until the element is rendered and connected */
+    get instance(): I | null;
+    /** Height used when the `height` attribute is not set */
+    protected get defaultHeight(): string | number;
+    /** Creates the engine (e.g. `createChart(container, options)`) */
+    protected abstract createEngine(container: HTMLElement, options: O): I;
+    /** Engine options of the current properties; `null` while there is nothing to draw */
+    protected abstract engineOptions(): O | null;
+    /** Subscribes to the engine events; returns the unsubscribe functions */
+    protected bindEngine?(engine: I): Array<() => void>;
+    /** Called once the engine is created (e.g. to pass data streamed apart from the options) */
+    protected engineMounted?(engine: I): void;
+    /**
+     * Applies a property change to the live engine; replaces the default
+     * (`setOptions` with the new engine options) when data such as an order
+     * book is passed through its own engine method
+     */
+    protected syncEngine?(engine: I, changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    private mountEngine;
+    private unmountEngine;
+    protected render(): import('lit').TemplateResult<1>;
+}

package/dist/web-components/components/chart/engine-element.js

@@ -0,0 +1,77 @@
+import { MinervaElement as e, hostStyles as t } from "../../internal/minerva-element.js";
+import n from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
+import { css as r, html as i } from "lit";
+import { property as a } from "lit/decorators.js";
+import { styleMap as o } from "lit/directives/style-map.js";
+//#region src/components/chart/engine-element.ts
+var s = (e) => typeof e == "number" || /^\d+(\.\d+)?$/.test(e) ? `${e}px` : e, c = class extends e {
+	constructor(...e) {
+		super(...e), this.engine = null, this.offs = [];
+	}
+	static {
+		this.styles = [t, r`
+:host{
+display: block;
+width: 100%;
+}
+.root{
+position: relative;
+width: 100%;
+}
+.surface{
+position: absolute;
+inset: 0;
+}
+`];
+	}
+	get instance() {
+		return this.engine;
+	}
+	get defaultHeight() {
+		return 320;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.hasUpdated && this.mountEngine();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.unmountEngine();
+	}
+	updated(e) {
+		if (super.updated(e), !this.engine) {
+			this.mountEngine();
+			return;
+		}
+		if ([...e.keys()].every((e) => e === "height")) return;
+		if (this.syncEngine) {
+			this.syncEngine(this.engine, e);
+			return;
+		}
+		let t = this.engineOptions();
+		t && this.engine.setOptions(t);
+	}
+	mountEngine() {
+		if (this.engine || !this.isConnected) return;
+		let e = this.renderRoot.querySelector("[part=surface]"), t = e ? this.engineOptions() : null;
+		if (!e || !t) return;
+		let n = this.createEngine(e, t);
+		this.engine = n, this.offs = this.bindEngine?.(n) ?? [], this.engineMounted?.(n);
+	}
+	unmountEngine() {
+		for (let e of this.offs) e();
+		this.offs = [], this.engine?.destroy(), this.engine = null;
+	}
+	render() {
+		return i`<div
+part="root"
+class="root"
+style=${o({ height: s(this.height ?? this.defaultHeight) })}
+>
+<div part="surface" class="surface"></div>
+</div>`;
+	}
+};
+n([a()], c.prototype, "height", void 0);
+//#endregion
+export { c as MinervaEngineElement };
+
+//# sourceMappingURL=engine-element.js.map

package/dist/web-components/components/chart/engine-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"engine-element.js","names":["_decorate","__decorate","cssLength","value","MinervaEngineElement","MinervaElement","_args","hostStyles","changed","key","options","surface","engine","off","styleMap","property"],"sources":["../../../../../web-components/src/components/chart/engine-element.ts"],"sourcesContent":["import { css, html, type PropertyValues } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { MinervaElement, hostStyles } from \"../../internal/minerva-element\";\n\n/**\n * What a chart engine factory of `minerva-design/charts/core` returns\n * (`createChart`, `createShapeChart`, ...): options can be replaced, the\n * instance destroyed.\n */\nexport interface EngineInstance<O> {\n  setOptions(options: O): void;\n  destroy(): void;\n}\n\nconst cssLength = (value: string | number) =>\n  typeof value === \"number\" || /^\\d+(\\.\\d+)?$/.test(value)\n    ? `${value}px`\n    : value;\n\n/**\n * Base of the chart elements: mounts an engine of\n * `minerva-design/charts/core` into a sized surface of the shadow root once\n * the element is rendered and connected, passes the new options on every\n * property change, and destroys it when the element is disconnected (a\n * reconnected element creates a new engine). Nothing runs on the server.\n *\n * A subclass names the factory (`createEngine`), turns its properties into\n * engine options (`engineOptions`, `null` while there is nothing to draw)\n * and forwards the engine events (`bindEngine`).\n */\nexport abstract class MinervaEngineElement<\n  O,\n  I extends EngineInstance<O>,\n> extends MinervaElement {\n  static override styles = [\n    hostStyles,\n    css`\n:host{\ndisplay: block;\nwidth: 100%;\n}\n.root{\nposition: relative;\nwidth: 100%;\n}\n.surface{\nposition: absolute;\ninset: 0;\n}\n`,\n  ];\n\n  /** Height of the chart, the legend included: pixels or any CSS length (default 320, sparkline 48, gauge 240) */\n  @property()\n  height?: string | number;\n\n  private engine: I | null = null;\n  private offs: Array<() => void> = [];\n\n  /** The engine instance (`minerva-design/charts/core`), `null` until the element is rendered and connected */\n  get instance(): I | null {\n    return this.engine;\n  }\n\n  /** Height used when the `height` attribute is not set */\n  protected get defaultHeight(): string | number {\n    return 320;\n  }\n\n  /** Creates the engine (e.g. `createChart(container, options)`) */\n  protected abstract createEngine(container: HTMLElement, options: O): I;\n\n  /** Engine options of the current properties; `null` while there is nothing to draw */\n  protected abstract engineOptions(): O | null;\n\n  /** Subscribes to the engine events; returns the unsubscribe functions */\n  protected bindEngine?(engine: I): Array<() => void>;\n\n  /** Called once the engine is created (e.g. to pass data streamed apart from the options) */\n  protected engineMounted?(engine: I): void;\n\n  /**\n   * Applies a property change to the live engine; replaces the default\n   * (`setOptions` with the new engine options) when data such as an order\n   * book is passed through its own engine method\n   */\n  protected syncEngine?(engine: I, changed: PropertyValues): void;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.hasUpdated) this.mountEngine();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.unmountEngine();\n  }\n\n  protected override updated(changed: PropertyValues): void {\n    super.updated(changed);\n    if (!this.engine) {\n      this.mountEngine();\n      return;\n    }\n    // the height only resizes the surface (the engine observes its size)\n    if ([...changed.keys()].every((key) => key === \"height\")) return;\n    if (this.syncEngine) {\n      this.syncEngine(this.engine, changed);\n      return;\n    }\n    const options = this.engineOptions();\n    if (options) this.engine.setOptions(options);\n  }\n\n  private mountEngine(): void {\n    if (this.engine || !this.isConnected) return;\n    const surface =\n      this.renderRoot.querySelector<HTMLElement>(\"[part=surface]\");\n    const options = surface ? this.engineOptions() : null;\n    if (!surface || !options) return;\n    const engine = this.createEngine(surface, options);\n    this.engine = engine;\n    this.offs = this.bindEngine?.(engine) ?? [];\n    this.engineMounted?.(engine);\n  }\n\n  private unmountEngine(): void {\n    for (const off of this.offs) off();\n    this.offs = [];\n    this.engine?.destroy();\n    this.engine = null;\n  }\n\n  protected override render() {\n    return html`<div\npart=\"root\"\nclass=\"root\"\nstyle=${styleMap({ height: cssLength(this.height ?? this.defaultHeight) })}\n>\n<div part=\"surface\" class=\"surface\"></div>\n</div>`;\n  }\n}\n"],"mappings":";;;;;;AAeA,IAAME,KAAa,MACjB,OAAOC,KAAU,YAAY,gBAAgB,KAAKA,CAAK,IACnD,GAAGA,EAAM,MACTA,GAagBC,IAAtB,cAGUC,EAAe;;EAwBW,aADP,KAAA,SAAA,MACO,KAAA,OAAA,CAAC;;;EAvBV,KAAA,SAAA,CACvBE,GACA,CAAG;;;;;;;;;;;;;CAcL;;CAUA,IAAI,WAAqB;EACvB,OAAO,KAAK;CACd;CAGA,IAAc,gBAAiC;EAC7C,OAAO;CACT;CAqBA,oBAAmC;EAEjC,AADA,MAAM,kBAAkB,GACpB,KAAK,cAAY,KAAK,YAAY;CACxC;CAEA,uBAAsC;EAEpC,AADA,MAAM,qBAAqB,GAC3B,KAAK,cAAc;CACrB;CAEA,QAA2B,GAA+B;EAExD,IADA,MAAM,QAAQC,CAAO,GACjB,CAAC,KAAK,QAAQ;GAChB,KAAK,YAAY;GACjB;EACF;EAEA,IAAI,CAAC,GAAGA,EAAQ,KAAK,CAAC,CAAC,CAAC,OAAO,MAAQC,MAAQ,QAAQ,GAAG;EAC1D,IAAI,KAAK,YAAY;GACnB,KAAK,WAAW,KAAK,QAAQD,CAAO;GACpC;EACF;EACA,IAAME,IAAU,KAAK,cAAc;EACnC,AAAIA,KAAS,KAAK,OAAO,WAAWA,CAAO;CAC7C;CAEA,cAA4B;EAC1B,IAAI,KAAK,UAAU,CAAC,KAAK,aAAa;EACtC,IAAMC,IACJ,KAAK,WAAW,cAA2B,gBAAgB,GACvDD,IAAUC,IAAU,KAAK,cAAc,IAAI;EACjD,IAAI,CAACA,KAAW,CAACD,GAAS;EAC1B,IAAME,IAAS,KAAK,aAAaD,GAASD,CAAO;EAGjD,AAFA,KAAK,SAASE,GACd,KAAK,OAAO,KAAK,aAAaA,CAAM,KAAK,CAAC,GAC1C,KAAK,gBAAgBA,CAAM;CAC7B;CAEA,gBAA8B;EAC5B,KAAK,IAAMC,KAAO,KAAK,MAAM,EAAI;EAGjC,AAFA,KAAK,OAAO,CAAC,GACb,KAAK,QAAQ,QAAQ,GACrB,KAAK,SAAS;CAChB;CAEA,SAA4B;EAC1B,OAAO,CAAI;;;QAGPC,EAAS,EAAE,QAAQZ,EAAU,KAAK,UAAU,KAAK,aAAa,EAAE,CAAC,EAAE;;;;CAIzE;AACF;AAzFGF,EAAA,CAAAe,EAAS,CAAA,GAAAX,EAAA,WAAA,UAAA,KAAA,CAAA"}