@magmonium/one 0.4.60 → 0.4.63

package/fesm2022/magmonium-one.mjs

@@ -7670,106 +7670,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-var SectionFooterComponent = class SectionFooterComponent {
-	sticky = input(false, ...ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []);
-	align = input("right", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
-	scrollSticky = injectScrollSticky(0, "none");
-	isSticky = computed(() => this.sticky() && this.scrollSticky(), ...ngDevMode ? [{ debugName: "isSticky" }] : /* istanbul ignore next */ []);
-	sectionContext = inject(SECTION_CONTEXT, { optional: true });
-	sidepanel = computed(() => this.sectionContext?.sidepanel() ?? false, ...ngDevMode ? [{ debugName: "sidepanel" }] : /* istanbul ignore next */ []);
-	noBorder = computed(() => this.sectionContext?.variant() === "noBorder", ...ngDevMode ? [{ debugName: "noBorder" }] : /* istanbul ignore next */ []);
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.1",
-		ngImport: i0,
-		type: SectionFooterComponent,
-		deps: [],
-		target: i0.ɵɵFactoryTarget.Component
-	});
-	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.1.0",
-		version: "22.2.1",
-		type: SectionFooterComponent,
-		isStandalone: true,
-		selector: "m-section-footer",
-		inputs: {
-			sticky: {
-				classPropertyName: "sticky",
-				publicName: "sticky",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			align: {
-				classPropertyName: "align",
-				publicName: "align",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			}
-		},
-		host: {
-			properties: {
-				"class.is-sticky-enabled": "sticky()",
-				"class.is-sticky": "isSticky()",
-				"class.align-left": "align() === \"left\"",
-				"class.align-center": "align() === \"center\"",
-				"class.align-right": "align() === \"right\"",
-				"class.has-sidepanel": "sidepanel()",
-				"class.no-border": "noBorder()"
-			},
-			classAttribute: "m-section-footer"
-		},
-		ngImport: i0,
-		template: `<ng-content />`,
-		isInline: true,
-		styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;min-height:var(--section-footer-min-height, calc(var(--section-footer-py, .5rem) * 2 + 1.25rem));border-top:1px solid var(--m-backdrop-border);padding:var(--section-footer-py, .85rem) var(--section-px, 1rem);width:100%}:host(.no-border){border-top:none}:host(.align-left){justify-content:flex-start}:host(.align-center){justify-content:center}:host(.align-right){justify-content:flex-end}:host(.is-sticky-enabled){position:sticky;bottom:0;z-index:10}:host(.is-sticky-enabled){background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}\n"],
-		changeDetection: i0.ChangeDetectionStrategy.OnPush
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.1",
-	ngImport: i0,
-	type: SectionFooterComponent,
-	decorators: [{
-		type: Component,
-		args: [{
-			selector: "m-section-footer",
-			template: `<ng-content />`,
-			changeDetection: ChangeDetectionStrategy.OnPush,
-			host: {
-				class: "m-section-footer",
-				"[class.is-sticky-enabled]": "sticky()",
-				"[class.is-sticky]": "isSticky()",
-				"[class.align-left]": "align() === \"left\"",
-				"[class.align-center]": "align() === \"center\"",
-				"[class.align-right]": "align() === \"right\"",
-				"[class.has-sidepanel]": "sidepanel()",
-				"[class.no-border]": "noBorder()"
-			},
-			styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;min-height:var(--section-footer-min-height, calc(var(--section-footer-py, .5rem) * 2 + 1.25rem));border-top:1px solid var(--m-backdrop-border);padding:var(--section-footer-py, .85rem) var(--section-px, 1rem);width:100%}:host(.no-border){border-top:none}:host(.align-left){justify-content:flex-start}:host(.align-center){justify-content:center}:host(.align-right){justify-content:flex-end}:host(.is-sticky-enabled){position:sticky;bottom:0;z-index:10}:host(.is-sticky-enabled){background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}\n"]
-		}]
-	}],
-	propDecorators: {
-		sticky: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "sticky",
-				required: false
-			}]
-		}],
-		align: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "align",
-				required: false
-			}]
-		}]
-	}
-});
 const DEFAULT_PER_PAGE_OPTIONS = [
 	10,
 	25,
@@ -9781,7 +9681,6 @@ var SectionComponent = class SectionComponent extends ConfigComponent {
 	hero = contentChild(SectionHeroComponent, ...ngDevMode ? [{ debugName: "hero" }] : /* istanbul ignore next */ []);
 	jumbotron = contentChild(JumbotronComponent, ...ngDevMode ? [{ debugName: "jumbotron" }] : /* istanbul ignore next */ []);
 	carousel = contentChild(CarouselComponent, ...ngDevMode ? [{ debugName: "carousel" }] : /* istanbul ignore next */ []);
-	footer = contentChild(SectionFooterComponent, ...ngDevMode ? [{ debugName: "footer" }] : /* istanbul ignore next */ []);
 	pagination = contentChild(SectionPaginationComponent, ...ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []);
 	variant = input(void 0, ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
 	maxWidth = input(...ngDevMode ? [void 0, { debugName: "maxWidth" }] : /* istanbul ignore next */ []);
@@ -10031,13 +9930,6 @@ var SectionComponent = class SectionComponent extends ConfigComponent {
 				descendants: true,
 				isSignal: true
 			},
-			{
-				propertyName: "footer",
-				first: true,
-				predicate: SectionFooterComponent,
-				descendants: true,
-				isSignal: true
-			},
 			{
 				propertyName: "pagination",
 				first: true,
@@ -10100,9 +9992,10 @@ var SectionComponent = class SectionComponent extends ConfigComponent {
         @if (pagination()) {
           <ng-content select="m-section-pagination" />
         }
-        @if (footer()) {
-          <ng-content select="m-section-footer" />
-        }
+        <!-- Ungated for the header's reason: the design Canvas draws its
+             footer through an ngTemplateOutlet, which a contentChild query
+             never sees. -->
+        <ng-content select="m-section-footer" />
       </div>
     </div>
   `,
@@ -10172,9 +10065,10 @@ i0.ɵɵngDeclareClassMetadata({
         @if (pagination()) {
           <ng-content select="m-section-pagination" />
         }
-        @if (footer()) {
-          <ng-content select="m-section-footer" />
-        }
+        <!-- Ungated for the header's reason: the design Canvas draws its
+             footer through an ngTemplateOutlet, which a contentChild query
+             never sees. -->
+        <ng-content select="m-section-footer" />
       </div>
     </div>
   `,
@@ -10267,10 +10161,6 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.ContentChild,
 			args: [i0.forwardRef(() => CarouselComponent), { isSignal: true }]
 		}],
-		footer: [{
-			type: i0.ContentChild,
-			args: [i0.forwardRef(() => SectionFooterComponent), { isSignal: true }]
-		}],
 		pagination: [{
 			type: i0.ContentChild,
 			args: [i0.forwardRef(() => SectionPaginationComponent), { isSignal: true }]
@@ -14536,7 +14426,7 @@ const NavStore = signalStore({ providedIn: "root" }, withState(initialState$3),
 	}, ...ngDevMode ? [{ debugName: "instanceLoaders" }] : /* istanbul ignore next */ []);
 	const resolvedWidget = computed(() => {
 		const hit = widgetEntry();
-		if (!hit || isNavMenuConfig(hit.entry) || isNavRowsConfig(hit.entry)) return null;
+		if (!hit || isNavMenuConfig(hit.entry)) return null;
 		const entry = hit.entry;
 		if (typeof entry !== "function" && !("content" in entry)) return null;
 		const config = normalizeNavWidgetEntry(entry);
@@ -17293,6 +17183,106 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+var SectionFooterComponent = class SectionFooterComponent {
+	sticky = input(false, ...ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []);
+	align = input("right", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	scrollSticky = injectScrollSticky(0, "none");
+	isSticky = computed(() => this.sticky() && this.scrollSticky(), ...ngDevMode ? [{ debugName: "isSticky" }] : /* istanbul ignore next */ []);
+	sectionContext = inject(SECTION_CONTEXT, { optional: true });
+	sidepanel = computed(() => this.sectionContext?.sidepanel() ?? false, ...ngDevMode ? [{ debugName: "sidepanel" }] : /* istanbul ignore next */ []);
+	noBorder = computed(() => this.sectionContext?.variant() === "noBorder", ...ngDevMode ? [{ debugName: "noBorder" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SectionFooterComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: SectionFooterComponent,
+		isStandalone: true,
+		selector: "m-section-footer",
+		inputs: {
+			sticky: {
+				classPropertyName: "sticky",
+				publicName: "sticky",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			align: {
+				classPropertyName: "align",
+				publicName: "align",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"class.is-sticky-enabled": "sticky()",
+				"class.is-sticky": "isSticky()",
+				"class.align-left": "align() === \"left\"",
+				"class.align-center": "align() === \"center\"",
+				"class.align-right": "align() === \"right\"",
+				"class.has-sidepanel": "sidepanel()",
+				"class.no-border": "noBorder()"
+			},
+			classAttribute: "m-section-footer"
+		},
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true,
+		styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;min-height:var(--section-footer-min-height, calc(var(--section-footer-py, .5rem) * 2 + 1.25rem));border-top:1px solid var(--m-backdrop-border);padding:var(--section-footer-py, .85rem) var(--section-px, 1rem);width:100%}:host(.no-border){border-top:none}:host(.align-left){justify-content:flex-start}:host(.align-center){justify-content:center}:host(.align-right){justify-content:flex-end}:host(.is-sticky-enabled){position:sticky;bottom:0;z-index:10}:host(.is-sticky-enabled){background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: SectionFooterComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "m-section-footer",
+			template: `<ng-content />`,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "m-section-footer",
+				"[class.is-sticky-enabled]": "sticky()",
+				"[class.is-sticky]": "isSticky()",
+				"[class.align-left]": "align() === \"left\"",
+				"[class.align-center]": "align() === \"center\"",
+				"[class.align-right]": "align() === \"right\"",
+				"[class.has-sidepanel]": "sidepanel()",
+				"[class.no-border]": "noBorder()"
+			},
+			styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;min-height:var(--section-footer-min-height, calc(var(--section-footer-py, .5rem) * 2 + 1.25rem));border-top:1px solid var(--m-backdrop-border);padding:var(--section-footer-py, .85rem) var(--section-px, 1rem);width:100%}:host(.no-border){border-top:none}:host(.align-left){justify-content:flex-start}:host(.align-center){justify-content:center}:host(.align-right){justify-content:flex-end}:host(.is-sticky-enabled){position:sticky;bottom:0;z-index:10}:host(.is-sticky-enabled){background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}\n"]
+		}]
+	}],
+	propDecorators: {
+		sticky: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sticky",
+				required: false
+			}]
+		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}]
+	}
+});
 const SECTION_TABLE_CONTEXT = new InjectionToken("SECTION_TABLE_CONTEXT");
 const FOLDED_WIDTH = "3rem";
 var SectionTableComponent = class SectionTableComponent extends ConfigComponent {
@@ -18164,6 +18154,34 @@ const linePath = (t, y, sx, sy) => {
 	for (let i = 0; i < t.length; i++) d += `${i ? "L" : "M"}${sx(t[i]).toFixed(1)} ${sy(y[i]).toFixed(1)}`;
 	return d;
 };
+const smoothPath = (t, y, sx, sy) => {
+	const n = t.length;
+	if (n < 3) return linePath(t, y, sx, sy);
+	const xs = t.map(sx);
+	const ys = y.map(sy);
+	const h = xs.slice(1).map((x, i) => x - xs[i]);
+	const d = h.map((w, i) => w ? (ys[i + 1] - ys[i]) / w : 0);
+	const m = new Array(n);
+	for (let i = 1; i < n - 1; i++) {
+		const [h0, h1, d0, d1] = [
+			h[i - 1],
+			h[i],
+			d[i - 1],
+			d[i]
+		];
+		const p = h0 + h1 ? (d0 * h1 + d1 * h0) / (h0 + h1) : 0;
+		m[i] = (Math.sign(d0) + Math.sign(d1)) * Math.min(Math.abs(d0), Math.abs(d1), .5 * Math.abs(p)) || 0;
+	}
+	m[0] = h[0] ? (3 * d[0] - m[1]) / 2 : m[1];
+	m[n - 1] = h[n - 2] ? (3 * d[n - 2] - m[n - 2]) / 2 : m[n - 2];
+	const f = (v) => v.toFixed(1);
+	let path = `M${f(xs[0])} ${f(ys[0])}`;
+	for (let i = 0; i < n - 1; i++) {
+		const third = h[i] / 3;
+		path += `C${f(xs[i] + third)} ${f(ys[i] + m[i] * third)} ${f(xs[i + 1] - third)} ${f(ys[i + 1] - m[i + 1] * third)} ${f(xs[i + 1])} ${f(ys[i + 1])}`;
+	}
+	return path;
+};
 const sampleChartPoints = (index, end = Date.UTC(2026, 0, 2)) => {
 	const weeks = 52;
 	const t = [];
@@ -18226,7 +18244,8 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
 	window = model(void 0, ...ngDevMode ? [{ debugName: "window" }] : /* istanbul ignore next */ []);
 	members = signal([], ...ngDevMode ? [{ debugName: "members" }] : /* istanbul ignore next */ []);
 	locale = inject(LOCALE_ID);
-	tableId = `m-section-chart-table-${nextId++}`;
+	uid = nextId++;
+	tableId = `m-section-chart-table-${this.uid}`;
 	width = signal(FALLBACK_WIDTH, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
 	dateFormat = new Intl.DateTimeFormat(this.locale, {
 		day: "numeric",
@@ -18387,12 +18406,21 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
 	paths = computed(() => {
 		const sx = this.sx();
 		const sy = this.sy();
-		return this.plotted().map(({ line, shown, ds }) => ({
-			d: linePath(ds.t, ds.y, sx, sy),
-			color: line.color,
-			endX: sx(line.t[line.t.length - 1]),
-			endY: sy(shown[shown.length - 1])
-		}));
+		const minimal = this.minimal();
+		const bottom = this.bottom().toFixed(1);
+		return this.plotted().map(({ line, shown, ds }, i) => {
+			const d = (minimal ? smoothPath : linePath)(ds.t, ds.y, sx, sy);
+			const fillId = `m-section-chart-fill-${this.uid}-${i}`;
+			return {
+				d,
+				color: line.color,
+				endX: sx(line.t[line.t.length - 1]),
+				endY: sy(shown[shown.length - 1]),
+				area: minimal ? `${d}L${sx(ds.t[ds.t.length - 1]).toFixed(1)} ${bottom}L${sx(ds.t[0]).toFixed(1)} ${bottom}Z` : null,
+				fillId,
+				fill: `url(#${fillId})`
+			};
+		});
 	}, ...ngDevMode ? [{ debugName: "paths" }] : /* istanbul ignore next */ []);
 	yTicks = computed(() => {
 		const extent = this.extent();
@@ -18888,8 +18916,8 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
 		}],
 		usesInheritance: true,
 		ngImport: i0,
-		template: "<div class=\"m-section-chart__top\">\n  <!-- Each series draws its own legend row: the row is the series' element,\n       which is what the editor's Canvas selects it by. -->\n  <div class=\"m-section-chart__legend\" role=\"list\">\n    <ng-content />\n  </div>\n  @if (periodLabel(); as label) {\n    <span class=\"m-section-chart__window\">{{ label }}</span>\n  }\n</div>\n\n<div class=\"m-section-chart__plot\">\n  <svg\n    class=\"m-section-chart__svg\"\n    role=\"img\"\n    tabindex=\"0\"\n    [class.is-measurable]=\"canMeasure()\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"resolvedHeight()\"\n    [attr.viewBox]=\"viewBox()\"\n    [attr.aria-label]=\"windowLabel()\"\n    [attr.aria-describedby]=\"tableId\"\n    (pointerdown)=\"onPlotDown($event)\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerup)=\"onPlotUp()\"\n    (pointercancel)=\"onPlotUp()\"\n    (pointerleave)=\"clearHover()\"\n    (blur)=\"clearHover()\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    @for (tick of yTicks(); track $index) {\n      <svg:line\n        class=\"m-section-chart__grid\"\n        [class.m-section-chart__grid--zero]=\"tick.zero\"\n        [attr.x1]=\"left()\"\n        [attr.x2]=\"right()\"\n        [attr.y1]=\"tick.y\"\n        [attr.y2]=\"tick.y\"\n      />\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"end\"\n        [attr.x]=\"left() - 8\"\n        [attr.y]=\"tick.y + 4\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    @if (!minimal()) {\n      <svg:line\n        class=\"m-section-chart__axis\"\n        [attr.x1]=\"left()\"\n        [attr.x2]=\"right()\"\n        [attr.y1]=\"bottom()\"\n        [attr.y2]=\"bottom()\"\n      />\n    }\n    @for (tick of xTicks(); track $index) {\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"middle\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"bottom() + 18\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    @if (measureView(); as band) {\n      <svg:rect\n        class=\"m-section-chart__band\"\n        [attr.x]=\"band.start\"\n        [attr.y]=\"top()\"\n        [attr.width]=\"band.width\"\n        [attr.height]=\"bottom() - top()\"\n      />\n      <svg:line\n        class=\"m-section-chart__band-edge\"\n        [attr.x1]=\"band.start\"\n        [attr.x2]=\"band.start\"\n        [attr.y1]=\"top()\"\n        [attr.y2]=\"bottom()\"\n      />\n      <svg:line\n        class=\"m-section-chart__band-edge\"\n        [attr.x1]=\"band.start + band.width\"\n        [attr.x2]=\"band.start + band.width\"\n        [attr.y1]=\"top()\"\n        [attr.y2]=\"bottom()\"\n      />\n    }\n    @for (path of paths(); track $index) {\n      <svg:path\n        class=\"m-section-chart__line\"\n        [attr.d]=\"path.d\"\n        [style.stroke]=\"path.color\"\n      />\n    }\n    @if (!minimal()) {\n      @for (path of paths(); track $index) {\n        <svg:circle\n          class=\"m-section-chart__dot\"\n          r=\"4\"\n          [attr.cx]=\"path.endX\"\n          [attr.cy]=\"path.endY\"\n          [style.fill]=\"path.color\"\n        />\n      }\n    }\n    @if (hover(); as h) {\n      <svg:line\n        class=\"m-section-chart__cross\"\n        [attr.x1]=\"h.x\"\n        [attr.x2]=\"h.x\"\n        [attr.y1]=\"top()\"\n        [attr.y2]=\"bottom()\"\n      />\n      @for (row of h.rows; track $index) {\n        <svg:circle\n          class=\"m-section-chart__dot\"\n          r=\"4\"\n          [attr.cx]=\"row.cx\"\n          [attr.cy]=\"row.cy\"\n          [style.fill]=\"row.color\"\n        />\n      }\n    }\n  </svg>\n\n  @if (hover(); as h) {\n    <div\n      class=\"m-section-chart__tip\"\n      role=\"status\"\n      [class.m-section-chart__tip--flip]=\"h.flip\"\n      [style.left.px]=\"h.x\"\n    >\n      <span class=\"m-section-chart__tip-title\">{{ h.title }}</span>\n      @for (row of h.rows; track $index) {\n        <span class=\"m-section-chart__tip-row\">\n          <span class=\"m-section-chart__tip-key\" [style.background]=\"row.color\"></span>\n          <span class=\"m-section-chart__tip-value\">{{ row.value }}</span>\n          <span class=\"m-section-chart__tip-label\">{{\n            row.noTranslate ? row.label : (row.label | translate: row.params)\n          }}</span>\n          <span class=\"m-section-chart__tip-sub\">{{ row.sub }}</span>\n        </span>\n      }\n    </div>\n  }\n\n  @if (measureView()?.card; as card) {\n    <div\n      class=\"m-section-chart__measure\"\n      role=\"status\"\n      [class.m-section-chart__measure--flip]=\"card.flip\"\n      [style.left.px]=\"card.x\"\n    >\n      <span class=\"m-section-chart__tip-title\">{{ card.title }}</span>\n      @for (row of card.rows; track $index) {\n        <span class=\"m-section-chart__tip-row\">\n          <span class=\"m-section-chart__tip-key\" [style.background]=\"row.color\"></span>\n          <span class=\"m-section-chart__tip-value\">{{ row.value }}</span>\n          <span class=\"m-section-chart__tip-label\">{{\n            row.noTranslate ? row.label : (row.label | translate: row.params)\n          }}</span>\n          <span class=\"m-section-chart__tip-sub\">{{ row.sub }}</span>\n        </span>\n      }\n    </div>\n  }\n</div>\n\n@if (presets().length > 1 && !minimal()) {\n  <div class=\"m-section-chart__presets\">\n    <m-section-toggle\n      [items]=\"presets()\"\n      [selectedIndex]=\"presetIndex()\"\n      [border]=\"false\"\n      (action)=\"selectPreset($event)\"\n    >\n      <ng-template [mSectionToggleItem]=\"presets()\" let-preset>\n        <span class=\"m-section-chart__preset\">{{ preset.label }}</span>\n      </ng-template>\n    </m-section-toggle>\n  </div>\n}\n\n@if (navigatorView(); as nav) {\n  <svg\n    class=\"m-section-chart__navigator\"\n    role=\"slider\"\n    tabindex=\"0\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-label]=\"'zoom' | translate\"\n    [attr.aria-valuenow]=\"nav.position\"\n    [attr.aria-valuetext]=\"windowLabel()\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"navHeight\"\n    [attr.viewBox]=\"navViewBox()\"\n    (pointerdown)=\"onNavigatorDown($event)\"\n    (pointermove)=\"onNavigatorMove($event)\"\n    (pointerup)=\"onNavigatorUp()\"\n    (pointercancel)=\"onNavigatorUp()\"\n    (keydown)=\"onNavigatorKeydown($event)\"\n  >\n    <svg:path class=\"m-section-chart__nav-area\" [attr.d]=\"nav.area\" />\n    <svg:path class=\"m-section-chart__nav-line\" [attr.d]=\"nav.d\" />\n    <svg:line\n      class=\"m-section-chart__axis\"\n      [attr.x1]=\"left()\"\n      [attr.x2]=\"right()\"\n      [attr.y1]=\"nav.base\"\n      [attr.y2]=\"nav.base\"\n    />\n    @for (tick of nav.ticks; track $index) {\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"middle\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"nav.base + 15\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    <svg:rect\n      class=\"m-section-chart__nav-dim\"\n      [attr.x]=\"left()\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"nav.start - left()\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-dim\"\n      [attr.x]=\"nav.end\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"right() - nav.end\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-window\"\n      [attr.x]=\"nav.start\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"nav.end - nav.start\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-handle\"\n      rx=\"2\"\n      width=\"6\"\n      height=\"20\"\n      [attr.x]=\"nav.start - 3\"\n      [attr.y]=\"(nav.base + navTop) / 2 - 10\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-handle\"\n      rx=\"2\"\n      width=\"6\"\n      height=\"20\"\n      [attr.x]=\"nav.end - 3\"\n      [attr.y]=\"(nav.base + navTop) / 2 - 10\"\n    />\n  </svg>\n}\n\n<table class=\"m-section-chart__table\" [id]=\"tableId\">\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ 'date' | translate }}</th>\n      @for (column of table().columns; track $index) {\n        <th scope=\"col\">\n          {{ column.noTranslate ? column.label : (column.label | translate: column.params) }}\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (row of table().rows; track $index) {\n      <tr>\n        <td>{{ row.date }}</td>\n        @for (cell of row.cells; track $index) {\n          <td>{{ cell }}</td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n",
-		styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;position:relative;width:100%;min-width:0}.m-section-chart__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.5rem 1rem;margin-bottom:.5rem}.m-section-chart__legend{display:grid;gap:.15rem;min-width:0}.m-section-chart__tip-key{display:inline-block;width:.75rem;height:2px;border-radius:1px}.m-section-chart__window{color:var(--m-text-tertiary);font-size:.8rem}:host(.m-section-chart--minimal) .m-section-chart__top{flex-direction:column;gap:.15rem}:host(.m-section-chart--minimal) .m-section-chart__svg{cursor:default}.m-section-chart__plot{position:relative}.m-section-chart__svg{display:block;overflow:visible}.m-section-chart__svg:focus{outline:none}.m-section-chart__svg:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__svg.is-measurable{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.m-section-chart__band{fill:var(--m-text);opacity:.06}.m-section-chart__band-edge{stroke:var(--m-text-secondary);stroke-width:1}.m-section-chart__grid{stroke:var(--m-text-septenary);stroke-width:1}.m-section-chart__grid--zero{stroke:var(--m-text-quinary);stroke-width:1.5}.m-section-chart__axis{stroke:var(--m-text-quinary);stroke-width:1}.m-section-chart__tick{fill:var(--m-text-tertiary);font-size:11px;font-variant-numeric:tabular-nums}.m-section-chart__line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.m-section-chart__dot{stroke:var(--m-background);stroke-width:2}.m-section-chart__cross{stroke:var(--m-text-secondary);stroke-width:1;opacity:.55}.m-section-chart__tip,.m-section-chart__measure{position:absolute;z-index:2;display:grid;gap:.25rem;min-width:10rem;padding:.5rem .625rem;border:1px solid var(--m-backdrop-border);border-radius:.5rem;background:var(--m-background);box-shadow:0 6px 20px var(--m-backdrop-shadow);font-size:.75rem;pointer-events:none}.m-section-chart__tip{top:0;margin-left:.875rem}.m-section-chart__tip--flip{transform:translate(calc(-100% - 1.75rem))}.m-section-chart__measure{bottom:2.25rem}.m-section-chart__measure--flip{transform:translate(-100%)}.m-section-chart__tip-title{color:var(--m-text-secondary);font-weight:600}.m-section-chart__tip-row{display:grid;grid-template-columns:.75rem auto 1fr auto;align-items:center;gap:.5rem}.m-section-chart__tip-value{color:var(--m-text);font-weight:650;font-variant-numeric:tabular-nums}.m-section-chart__tip-label{color:var(--m-text-secondary);white-space:nowrap}.m-section-chart__tip-sub{color:var(--m-text-tertiary);font-variant-numeric:tabular-nums}.m-section-chart__presets{--section-px: 0;margin-top:.5rem}.m-section-chart__preset{font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}.m-section-chart__navigator{display:block;margin-top:.25rem;overflow:visible;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}.m-section-chart__navigator:focus{outline:none}.m-section-chart__navigator:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__nav-area{fill:var(--m-text-tertiary);opacity:.12}.m-section-chart__nav-line{fill:none;stroke:var(--m-text-tertiary);stroke-width:1.25}.m-section-chart__nav-dim{fill:var(--m-background);opacity:.6}.m-section-chart__nav-window{fill:transparent;stroke:var(--m-text-secondary);stroke-width:1;cursor:grab}.m-section-chart__nav-handle{fill:var(--m-text-secondary);cursor:ew-resize}.m-section-chart__table{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"],
+		template: "<div class=\"m-section-chart__top\">\n  <!-- Each series draws its own legend row: the row is the series' element,\n       which is what the editor's Canvas selects it by. -->\n  <div class=\"m-section-chart__legend\" role=\"list\">\n    <ng-content />\n  </div>\n  @if (periodLabel(); as label) {\n    <span class=\"m-section-chart__window\">{{ label }}</span>\n  }\n</div>\n\n<div class=\"m-section-chart__plot\">\n  <svg\n    class=\"m-section-chart__svg\"\n    role=\"img\"\n    tabindex=\"0\"\n    [class.is-measurable]=\"canMeasure()\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"resolvedHeight()\"\n    [attr.viewBox]=\"viewBox()\"\n    [attr.aria-label]=\"windowLabel()\"\n    [attr.aria-describedby]=\"tableId\"\n    (pointerdown)=\"onPlotDown($event)\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerup)=\"onPlotUp()\"\n    (pointercancel)=\"onPlotUp()\"\n    (pointerleave)=\"clearHover()\"\n    (blur)=\"clearHover()\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    @for (tick of yTicks(); track $index) {\n      <svg:line\n        class=\"m-section-chart__grid\"\n        [class.m-section-chart__grid--zero]=\"tick.zero\"\n        [attr.x1]=\"left()\"\n        [attr.x2]=\"right()\"\n        [attr.y1]=\"tick.y\"\n        [attr.y2]=\"tick.y\"\n      />\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"end\"\n        [attr.x]=\"left() - 8\"\n        [attr.y]=\"tick.y + 4\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    @if (!minimal()) {\n      <svg:line\n        class=\"m-section-chart__axis\"\n        [attr.x1]=\"left()\"\n        [attr.x2]=\"right()\"\n        [attr.y1]=\"bottom()\"\n        [attr.y2]=\"bottom()\"\n      />\n    }\n    @for (tick of xTicks(); track $index) {\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"middle\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"bottom() + 18\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    @if (measureView(); as band) {\n      <svg:rect\n        class=\"m-section-chart__band\"\n        [attr.x]=\"band.start\"\n        [attr.y]=\"top()\"\n        [attr.width]=\"band.width\"\n        [attr.height]=\"bottom() - top()\"\n      />\n      <svg:line\n        class=\"m-section-chart__band-edge\"\n        [attr.x1]=\"band.start\"\n        [attr.x2]=\"band.start\"\n        [attr.y1]=\"top()\"\n        [attr.y2]=\"bottom()\"\n      />\n      <svg:line\n        class=\"m-section-chart__band-edge\"\n        [attr.x1]=\"band.start + band.width\"\n        [attr.x2]=\"band.start + band.width\"\n        [attr.y1]=\"top()\"\n        [attr.y2]=\"bottom()\"\n      />\n    }\n    @for (path of paths(); track $index) {\n      @if (path.area; as area) {\n        <svg:defs>\n          <svg:linearGradient [attr.id]=\"path.fillId\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <svg:stop offset=\"0\" stop-opacity=\"0.22\" [attr.stop-color]=\"path.color\" />\n            <svg:stop offset=\"1\" stop-opacity=\"0\" [attr.stop-color]=\"path.color\" />\n          </svg:linearGradient>\n        </svg:defs>\n        <svg:path class=\"m-section-chart__area\" [attr.d]=\"area\" [attr.fill]=\"path.fill\" />\n      }\n    }\n    @for (path of paths(); track $index) {\n      <svg:path\n        class=\"m-section-chart__line\"\n        [attr.d]=\"path.d\"\n        [style.stroke]=\"path.color\"\n      />\n    }\n    @if (!minimal()) {\n      @for (path of paths(); track $index) {\n        <svg:circle\n          class=\"m-section-chart__dot\"\n          r=\"4\"\n          [attr.cx]=\"path.endX\"\n          [attr.cy]=\"path.endY\"\n          [style.fill]=\"path.color\"\n        />\n      }\n    }\n    @if (hover(); as h) {\n      <svg:line\n        class=\"m-section-chart__cross\"\n        [attr.x1]=\"h.x\"\n        [attr.x2]=\"h.x\"\n        [attr.y1]=\"top()\"\n        [attr.y2]=\"bottom()\"\n      />\n      @for (row of h.rows; track $index) {\n        <svg:circle\n          class=\"m-section-chart__dot\"\n          r=\"4\"\n          [attr.cx]=\"row.cx\"\n          [attr.cy]=\"row.cy\"\n          [style.fill]=\"row.color\"\n        />\n      }\n    }\n  </svg>\n\n  @if (hover(); as h) {\n    <div\n      class=\"m-section-chart__tip\"\n      role=\"status\"\n      [class.m-section-chart__tip--flip]=\"h.flip\"\n      [style.left.px]=\"h.x\"\n    >\n      <span class=\"m-section-chart__tip-title\">{{ h.title }}</span>\n      @for (row of h.rows; track $index) {\n        <span class=\"m-section-chart__tip-row\">\n          <span class=\"m-section-chart__tip-key\" [style.background]=\"row.color\"></span>\n          <span class=\"m-section-chart__tip-value\">{{ row.value }}</span>\n          <span class=\"m-section-chart__tip-label\">{{\n            row.noTranslate ? row.label : (row.label | translate: row.params)\n          }}</span>\n          <span class=\"m-section-chart__tip-sub\">{{ row.sub }}</span>\n        </span>\n      }\n    </div>\n  }\n\n  @if (measureView()?.card; as card) {\n    <div\n      class=\"m-section-chart__measure\"\n      role=\"status\"\n      [class.m-section-chart__measure--flip]=\"card.flip\"\n      [style.left.px]=\"card.x\"\n    >\n      <span class=\"m-section-chart__tip-title\">{{ card.title }}</span>\n      @for (row of card.rows; track $index) {\n        <span class=\"m-section-chart__tip-row\">\n          <span class=\"m-section-chart__tip-key\" [style.background]=\"row.color\"></span>\n          <span class=\"m-section-chart__tip-value\">{{ row.value }}</span>\n          <span class=\"m-section-chart__tip-label\">{{\n            row.noTranslate ? row.label : (row.label | translate: row.params)\n          }}</span>\n          <span class=\"m-section-chart__tip-sub\">{{ row.sub }}</span>\n        </span>\n      }\n    </div>\n  }\n</div>\n\n@if (presets().length > 1 && !minimal()) {\n  <div class=\"m-section-chart__presets\">\n    <m-section-toggle\n      [items]=\"presets()\"\n      [selectedIndex]=\"presetIndex()\"\n      [border]=\"false\"\n      (action)=\"selectPreset($event)\"\n    >\n      <ng-template [mSectionToggleItem]=\"presets()\" let-preset>\n        <span class=\"m-section-chart__preset\">{{ preset.label }}</span>\n      </ng-template>\n    </m-section-toggle>\n  </div>\n}\n\n@if (navigatorView(); as nav) {\n  <svg\n    class=\"m-section-chart__navigator\"\n    role=\"slider\"\n    tabindex=\"0\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-label]=\"'zoom' | translate\"\n    [attr.aria-valuenow]=\"nav.position\"\n    [attr.aria-valuetext]=\"windowLabel()\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"navHeight\"\n    [attr.viewBox]=\"navViewBox()\"\n    (pointerdown)=\"onNavigatorDown($event)\"\n    (pointermove)=\"onNavigatorMove($event)\"\n    (pointerup)=\"onNavigatorUp()\"\n    (pointercancel)=\"onNavigatorUp()\"\n    (keydown)=\"onNavigatorKeydown($event)\"\n  >\n    <svg:path class=\"m-section-chart__nav-area\" [attr.d]=\"nav.area\" />\n    <svg:path class=\"m-section-chart__nav-line\" [attr.d]=\"nav.d\" />\n    <svg:line\n      class=\"m-section-chart__axis\"\n      [attr.x1]=\"left()\"\n      [attr.x2]=\"right()\"\n      [attr.y1]=\"nav.base\"\n      [attr.y2]=\"nav.base\"\n    />\n    @for (tick of nav.ticks; track $index) {\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"middle\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"nav.base + 15\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    <svg:rect\n      class=\"m-section-chart__nav-dim\"\n      [attr.x]=\"left()\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"nav.start - left()\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-dim\"\n      [attr.x]=\"nav.end\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"right() - nav.end\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-window\"\n      [attr.x]=\"nav.start\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"nav.end - nav.start\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-handle\"\n      rx=\"2\"\n      width=\"6\"\n      height=\"20\"\n      [attr.x]=\"nav.start - 3\"\n      [attr.y]=\"(nav.base + navTop) / 2 - 10\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-handle\"\n      rx=\"2\"\n      width=\"6\"\n      height=\"20\"\n      [attr.x]=\"nav.end - 3\"\n      [attr.y]=\"(nav.base + navTop) / 2 - 10\"\n    />\n  </svg>\n}\n\n<table class=\"m-section-chart__table\" [id]=\"tableId\">\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ 'date' | translate }}</th>\n      @for (column of table().columns; track $index) {\n        <th scope=\"col\">\n          {{ column.noTranslate ? column.label : (column.label | translate: column.params) }}\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (row of table().rows; track $index) {\n      <tr>\n        <td>{{ row.date }}</td>\n        @for (cell of row.cells; track $index) {\n          <td>{{ cell }}</td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n",
+		styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;position:relative;width:100%;min-width:0}.m-section-chart__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.5rem 1rem;margin-bottom:.5rem}.m-section-chart__legend{display:grid;gap:.15rem;min-width:0}.m-section-chart__tip-key{display:inline-block;width:.75rem;height:2px;border-radius:1px}.m-section-chart__window{color:var(--m-text-tertiary);font-size:.8rem}:host(.m-section-chart--minimal) .m-section-chart__svg{cursor:default}:host(.m-section-chart--minimal) .m-section-chart__line{stroke-width:2.25}.m-section-chart__area{stroke:none}.m-section-chart__plot{position:relative}.m-section-chart__svg{display:block;overflow:visible}.m-section-chart__svg:focus{outline:none}.m-section-chart__svg:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__svg.is-measurable{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.m-section-chart__band{fill:var(--m-text);opacity:.06}.m-section-chart__band-edge{stroke:var(--m-text-secondary);stroke-width:1}.m-section-chart__grid{stroke:var(--m-text-septenary);stroke-width:1}.m-section-chart__grid--zero{stroke:var(--m-text-quinary);stroke-width:1.5}.m-section-chart__axis{stroke:var(--m-text-quinary);stroke-width:1}.m-section-chart__tick{fill:var(--m-text-tertiary);font-size:11px;font-variant-numeric:tabular-nums}.m-section-chart__line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.m-section-chart__dot{stroke:var(--m-background);stroke-width:2}.m-section-chart__cross{stroke:var(--m-text-secondary);stroke-width:1;opacity:.55}.m-section-chart__tip,.m-section-chart__measure{position:absolute;z-index:2;display:grid;gap:.25rem;min-width:10rem;padding:.5rem .625rem;border:1px solid var(--m-backdrop-border);border-radius:.5rem;background:var(--m-background);box-shadow:0 6px 20px var(--m-backdrop-shadow);font-size:.75rem;pointer-events:none}.m-section-chart__tip{top:0;margin-left:.875rem}.m-section-chart__tip--flip{transform:translate(calc(-100% - 1.75rem))}.m-section-chart__measure{bottom:2.25rem}.m-section-chart__measure--flip{transform:translate(-100%)}.m-section-chart__tip-title{color:var(--m-text-secondary);font-weight:600}.m-section-chart__tip-row{display:grid;grid-template-columns:.75rem auto 1fr auto;align-items:center;gap:.5rem}.m-section-chart__tip-value{color:var(--m-text);font-weight:650;font-variant-numeric:tabular-nums}.m-section-chart__tip-label{color:var(--m-text-secondary);white-space:nowrap}.m-section-chart__tip-sub{color:var(--m-text-tertiary);font-variant-numeric:tabular-nums}.m-section-chart__presets{--section-px: 0;margin-top:.5rem}.m-section-chart__preset{font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}.m-section-chart__navigator{display:block;margin-top:.25rem;overflow:visible;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}.m-section-chart__navigator:focus{outline:none}.m-section-chart__navigator:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__nav-area{fill:var(--m-text-tertiary);opacity:.12}.m-section-chart__nav-line{fill:none;stroke:var(--m-text-tertiary);stroke-width:1.25}.m-section-chart__nav-dim{fill:var(--m-background);opacity:.6}.m-section-chart__nav-window{fill:transparent;stroke:var(--m-text-secondary);stroke-width:1;cursor:grab}.m-section-chart__nav-handle{fill:var(--m-text-secondary);cursor:ew-resize}.m-section-chart__table{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"],
 		dependencies: [
 			{
 				kind: "component",
@@ -18949,8 +18977,8 @@ i0.ɵɵngDeclareClassMetadata({
 					};
 				}
 			}],
-			template: "<div class=\"m-section-chart__top\">\n  <!-- Each series draws its own legend row: the row is the series' element,\n       which is what the editor's Canvas selects it by. -->\n  <div class=\"m-section-chart__legend\" role=\"list\">\n    <ng-content />\n  </div>\n  @if (periodLabel(); as label) {\n    <span class=\"m-section-chart__window\">{{ label }}</span>\n  }\n</div>\n\n<div class=\"m-section-chart__plot\">\n  <svg\n    class=\"m-section-chart__svg\"\n    role=\"img\"\n    tabindex=\"0\"\n    [class.is-measurable]=\"canMeasure()\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"resolvedHeight()\"\n    [attr.viewBox]=\"viewBox()\"\n    [attr.aria-label]=\"windowLabel()\"\n    [attr.aria-describedby]=\"tableId\"\n    (pointerdown)=\"onPlotDown($event)\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerup)=\"onPlotUp()\"\n    (pointercancel)=\"onPlotUp()\"\n    (pointerleave)=\"clearHover()\"\n    (blur)=\"clearHover()\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    @for (tick of yTicks(); track $index) {\n      <svg:line\n        class=\"m-section-chart__grid\"\n        [class.m-section-chart__grid--zero]=\"tick.zero\"\n        [attr.x1]=\"left()\"\n        [attr.x2]=\"right()\"\n        [attr.y1]=\"tick.y\"\n        [attr.y2]=\"tick.y\"\n      />\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"end\"\n        [attr.x]=\"left() - 8\"\n        [attr.y]=\"tick.y + 4\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    @if (!minimal()) {\n      <svg:line\n        class=\"m-section-chart__axis\"\n        [attr.x1]=\"left()\"\n        [attr.x2]=\"right()\"\n        [attr.y1]=\"bottom()\"\n        [attr.y2]=\"bottom()\"\n      />\n    }\n    @for (tick of xTicks(); track $index) {\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"middle\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"bottom() + 18\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    @if (measureView(); as band) {\n      <svg:rect\n        class=\"m-section-chart__band\"\n        [attr.x]=\"band.start\"\n        [attr.y]=\"top()\"\n        [attr.width]=\"band.width\"\n        [attr.height]=\"bottom() - top()\"\n      />\n      <svg:line\n        class=\"m-section-chart__band-edge\"\n        [attr.x1]=\"band.start\"\n        [attr.x2]=\"band.start\"\n        [attr.y1]=\"top()\"\n        [attr.y2]=\"bottom()\"\n      />\n      <svg:line\n        class=\"m-section-chart__band-edge\"\n        [attr.x1]=\"band.start + band.width\"\n        [attr.x2]=\"band.start + band.width\"\n        [attr.y1]=\"top()\"\n        [attr.y2]=\"bottom()\"\n      />\n    }\n    @for (path of paths(); track $index) {\n      <svg:path\n        class=\"m-section-chart__line\"\n        [attr.d]=\"path.d\"\n        [style.stroke]=\"path.color\"\n      />\n    }\n    @if (!minimal()) {\n      @for (path of paths(); track $index) {\n        <svg:circle\n          class=\"m-section-chart__dot\"\n          r=\"4\"\n          [attr.cx]=\"path.endX\"\n          [attr.cy]=\"path.endY\"\n          [style.fill]=\"path.color\"\n        />\n      }\n    }\n    @if (hover(); as h) {\n      <svg:line\n        class=\"m-section-chart__cross\"\n        [attr.x1]=\"h.x\"\n        [attr.x2]=\"h.x\"\n        [attr.y1]=\"top()\"\n        [attr.y2]=\"bottom()\"\n      />\n      @for (row of h.rows; track $index) {\n        <svg:circle\n          class=\"m-section-chart__dot\"\n          r=\"4\"\n          [attr.cx]=\"row.cx\"\n          [attr.cy]=\"row.cy\"\n          [style.fill]=\"row.color\"\n        />\n      }\n    }\n  </svg>\n\n  @if (hover(); as h) {\n    <div\n      class=\"m-section-chart__tip\"\n      role=\"status\"\n      [class.m-section-chart__tip--flip]=\"h.flip\"\n      [style.left.px]=\"h.x\"\n    >\n      <span class=\"m-section-chart__tip-title\">{{ h.title }}</span>\n      @for (row of h.rows; track $index) {\n        <span class=\"m-section-chart__tip-row\">\n          <span class=\"m-section-chart__tip-key\" [style.background]=\"row.color\"></span>\n          <span class=\"m-section-chart__tip-value\">{{ row.value }}</span>\n          <span class=\"m-section-chart__tip-label\">{{\n            row.noTranslate ? row.label : (row.label | translate: row.params)\n          }}</span>\n          <span class=\"m-section-chart__tip-sub\">{{ row.sub }}</span>\n        </span>\n      }\n    </div>\n  }\n\n  @if (measureView()?.card; as card) {\n    <div\n      class=\"m-section-chart__measure\"\n      role=\"status\"\n      [class.m-section-chart__measure--flip]=\"card.flip\"\n      [style.left.px]=\"card.x\"\n    >\n      <span class=\"m-section-chart__tip-title\">{{ card.title }}</span>\n      @for (row of card.rows; track $index) {\n        <span class=\"m-section-chart__tip-row\">\n          <span class=\"m-section-chart__tip-key\" [style.background]=\"row.color\"></span>\n          <span class=\"m-section-chart__tip-value\">{{ row.value }}</span>\n          <span class=\"m-section-chart__tip-label\">{{\n            row.noTranslate ? row.label : (row.label | translate: row.params)\n          }}</span>\n          <span class=\"m-section-chart__tip-sub\">{{ row.sub }}</span>\n        </span>\n      }\n    </div>\n  }\n</div>\n\n@if (presets().length > 1 && !minimal()) {\n  <div class=\"m-section-chart__presets\">\n    <m-section-toggle\n      [items]=\"presets()\"\n      [selectedIndex]=\"presetIndex()\"\n      [border]=\"false\"\n      (action)=\"selectPreset($event)\"\n    >\n      <ng-template [mSectionToggleItem]=\"presets()\" let-preset>\n        <span class=\"m-section-chart__preset\">{{ preset.label }}</span>\n      </ng-template>\n    </m-section-toggle>\n  </div>\n}\n\n@if (navigatorView(); as nav) {\n  <svg\n    class=\"m-section-chart__navigator\"\n    role=\"slider\"\n    tabindex=\"0\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-label]=\"'zoom' | translate\"\n    [attr.aria-valuenow]=\"nav.position\"\n    [attr.aria-valuetext]=\"windowLabel()\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"navHeight\"\n    [attr.viewBox]=\"navViewBox()\"\n    (pointerdown)=\"onNavigatorDown($event)\"\n    (pointermove)=\"onNavigatorMove($event)\"\n    (pointerup)=\"onNavigatorUp()\"\n    (pointercancel)=\"onNavigatorUp()\"\n    (keydown)=\"onNavigatorKeydown($event)\"\n  >\n    <svg:path class=\"m-section-chart__nav-area\" [attr.d]=\"nav.area\" />\n    <svg:path class=\"m-section-chart__nav-line\" [attr.d]=\"nav.d\" />\n    <svg:line\n      class=\"m-section-chart__axis\"\n      [attr.x1]=\"left()\"\n      [attr.x2]=\"right()\"\n      [attr.y1]=\"nav.base\"\n      [attr.y2]=\"nav.base\"\n    />\n    @for (tick of nav.ticks; track $index) {\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"middle\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"nav.base + 15\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    <svg:rect\n      class=\"m-section-chart__nav-dim\"\n      [attr.x]=\"left()\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"nav.start - left()\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-dim\"\n      [attr.x]=\"nav.end\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"right() - nav.end\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-window\"\n      [attr.x]=\"nav.start\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"nav.end - nav.start\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-handle\"\n      rx=\"2\"\n      width=\"6\"\n      height=\"20\"\n      [attr.x]=\"nav.start - 3\"\n      [attr.y]=\"(nav.base + navTop) / 2 - 10\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-handle\"\n      rx=\"2\"\n      width=\"6\"\n      height=\"20\"\n      [attr.x]=\"nav.end - 3\"\n      [attr.y]=\"(nav.base + navTop) / 2 - 10\"\n    />\n  </svg>\n}\n\n<table class=\"m-section-chart__table\" [id]=\"tableId\">\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ 'date' | translate }}</th>\n      @for (column of table().columns; track $index) {\n        <th scope=\"col\">\n          {{ column.noTranslate ? column.label : (column.label | translate: column.params) }}\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (row of table().rows; track $index) {\n      <tr>\n        <td>{{ row.date }}</td>\n        @for (cell of row.cells; track $index) {\n          <td>{{ cell }}</td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n",
-			styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;position:relative;width:100%;min-width:0}.m-section-chart__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.5rem 1rem;margin-bottom:.5rem}.m-section-chart__legend{display:grid;gap:.15rem;min-width:0}.m-section-chart__tip-key{display:inline-block;width:.75rem;height:2px;border-radius:1px}.m-section-chart__window{color:var(--m-text-tertiary);font-size:.8rem}:host(.m-section-chart--minimal) .m-section-chart__top{flex-direction:column;gap:.15rem}:host(.m-section-chart--minimal) .m-section-chart__svg{cursor:default}.m-section-chart__plot{position:relative}.m-section-chart__svg{display:block;overflow:visible}.m-section-chart__svg:focus{outline:none}.m-section-chart__svg:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__svg.is-measurable{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.m-section-chart__band{fill:var(--m-text);opacity:.06}.m-section-chart__band-edge{stroke:var(--m-text-secondary);stroke-width:1}.m-section-chart__grid{stroke:var(--m-text-septenary);stroke-width:1}.m-section-chart__grid--zero{stroke:var(--m-text-quinary);stroke-width:1.5}.m-section-chart__axis{stroke:var(--m-text-quinary);stroke-width:1}.m-section-chart__tick{fill:var(--m-text-tertiary);font-size:11px;font-variant-numeric:tabular-nums}.m-section-chart__line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.m-section-chart__dot{stroke:var(--m-background);stroke-width:2}.m-section-chart__cross{stroke:var(--m-text-secondary);stroke-width:1;opacity:.55}.m-section-chart__tip,.m-section-chart__measure{position:absolute;z-index:2;display:grid;gap:.25rem;min-width:10rem;padding:.5rem .625rem;border:1px solid var(--m-backdrop-border);border-radius:.5rem;background:var(--m-background);box-shadow:0 6px 20px var(--m-backdrop-shadow);font-size:.75rem;pointer-events:none}.m-section-chart__tip{top:0;margin-left:.875rem}.m-section-chart__tip--flip{transform:translate(calc(-100% - 1.75rem))}.m-section-chart__measure{bottom:2.25rem}.m-section-chart__measure--flip{transform:translate(-100%)}.m-section-chart__tip-title{color:var(--m-text-secondary);font-weight:600}.m-section-chart__tip-row{display:grid;grid-template-columns:.75rem auto 1fr auto;align-items:center;gap:.5rem}.m-section-chart__tip-value{color:var(--m-text);font-weight:650;font-variant-numeric:tabular-nums}.m-section-chart__tip-label{color:var(--m-text-secondary);white-space:nowrap}.m-section-chart__tip-sub{color:var(--m-text-tertiary);font-variant-numeric:tabular-nums}.m-section-chart__presets{--section-px: 0;margin-top:.5rem}.m-section-chart__preset{font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}.m-section-chart__navigator{display:block;margin-top:.25rem;overflow:visible;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}.m-section-chart__navigator:focus{outline:none}.m-section-chart__navigator:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__nav-area{fill:var(--m-text-tertiary);opacity:.12}.m-section-chart__nav-line{fill:none;stroke:var(--m-text-tertiary);stroke-width:1.25}.m-section-chart__nav-dim{fill:var(--m-background);opacity:.6}.m-section-chart__nav-window{fill:transparent;stroke:var(--m-text-secondary);stroke-width:1;cursor:grab}.m-section-chart__nav-handle{fill:var(--m-text-secondary);cursor:ew-resize}.m-section-chart__table{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"]
+			template: "<div class=\"m-section-chart__top\">\n  <!-- Each series draws its own legend row: the row is the series' element,\n       which is what the editor's Canvas selects it by. -->\n  <div class=\"m-section-chart__legend\" role=\"list\">\n    <ng-content />\n  </div>\n  @if (periodLabel(); as label) {\n    <span class=\"m-section-chart__window\">{{ label }}</span>\n  }\n</div>\n\n<div class=\"m-section-chart__plot\">\n  <svg\n    class=\"m-section-chart__svg\"\n    role=\"img\"\n    tabindex=\"0\"\n    [class.is-measurable]=\"canMeasure()\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"resolvedHeight()\"\n    [attr.viewBox]=\"viewBox()\"\n    [attr.aria-label]=\"windowLabel()\"\n    [attr.aria-describedby]=\"tableId\"\n    (pointerdown)=\"onPlotDown($event)\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerup)=\"onPlotUp()\"\n    (pointercancel)=\"onPlotUp()\"\n    (pointerleave)=\"clearHover()\"\n    (blur)=\"clearHover()\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    @for (tick of yTicks(); track $index) {\n      <svg:line\n        class=\"m-section-chart__grid\"\n        [class.m-section-chart__grid--zero]=\"tick.zero\"\n        [attr.x1]=\"left()\"\n        [attr.x2]=\"right()\"\n        [attr.y1]=\"tick.y\"\n        [attr.y2]=\"tick.y\"\n      />\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"end\"\n        [attr.x]=\"left() - 8\"\n        [attr.y]=\"tick.y + 4\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    @if (!minimal()) {\n      <svg:line\n        class=\"m-section-chart__axis\"\n        [attr.x1]=\"left()\"\n        [attr.x2]=\"right()\"\n        [attr.y1]=\"bottom()\"\n        [attr.y2]=\"bottom()\"\n      />\n    }\n    @for (tick of xTicks(); track $index) {\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"middle\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"bottom() + 18\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    @if (measureView(); as band) {\n      <svg:rect\n        class=\"m-section-chart__band\"\n        [attr.x]=\"band.start\"\n        [attr.y]=\"top()\"\n        [attr.width]=\"band.width\"\n        [attr.height]=\"bottom() - top()\"\n      />\n      <svg:line\n        class=\"m-section-chart__band-edge\"\n        [attr.x1]=\"band.start\"\n        [attr.x2]=\"band.start\"\n        [attr.y1]=\"top()\"\n        [attr.y2]=\"bottom()\"\n      />\n      <svg:line\n        class=\"m-section-chart__band-edge\"\n        [attr.x1]=\"band.start + band.width\"\n        [attr.x2]=\"band.start + band.width\"\n        [attr.y1]=\"top()\"\n        [attr.y2]=\"bottom()\"\n      />\n    }\n    @for (path of paths(); track $index) {\n      @if (path.area; as area) {\n        <svg:defs>\n          <svg:linearGradient [attr.id]=\"path.fillId\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <svg:stop offset=\"0\" stop-opacity=\"0.22\" [attr.stop-color]=\"path.color\" />\n            <svg:stop offset=\"1\" stop-opacity=\"0\" [attr.stop-color]=\"path.color\" />\n          </svg:linearGradient>\n        </svg:defs>\n        <svg:path class=\"m-section-chart__area\" [attr.d]=\"area\" [attr.fill]=\"path.fill\" />\n      }\n    }\n    @for (path of paths(); track $index) {\n      <svg:path\n        class=\"m-section-chart__line\"\n        [attr.d]=\"path.d\"\n        [style.stroke]=\"path.color\"\n      />\n    }\n    @if (!minimal()) {\n      @for (path of paths(); track $index) {\n        <svg:circle\n          class=\"m-section-chart__dot\"\n          r=\"4\"\n          [attr.cx]=\"path.endX\"\n          [attr.cy]=\"path.endY\"\n          [style.fill]=\"path.color\"\n        />\n      }\n    }\n    @if (hover(); as h) {\n      <svg:line\n        class=\"m-section-chart__cross\"\n        [attr.x1]=\"h.x\"\n        [attr.x2]=\"h.x\"\n        [attr.y1]=\"top()\"\n        [attr.y2]=\"bottom()\"\n      />\n      @for (row of h.rows; track $index) {\n        <svg:circle\n          class=\"m-section-chart__dot\"\n          r=\"4\"\n          [attr.cx]=\"row.cx\"\n          [attr.cy]=\"row.cy\"\n          [style.fill]=\"row.color\"\n        />\n      }\n    }\n  </svg>\n\n  @if (hover(); as h) {\n    <div\n      class=\"m-section-chart__tip\"\n      role=\"status\"\n      [class.m-section-chart__tip--flip]=\"h.flip\"\n      [style.left.px]=\"h.x\"\n    >\n      <span class=\"m-section-chart__tip-title\">{{ h.title }}</span>\n      @for (row of h.rows; track $index) {\n        <span class=\"m-section-chart__tip-row\">\n          <span class=\"m-section-chart__tip-key\" [style.background]=\"row.color\"></span>\n          <span class=\"m-section-chart__tip-value\">{{ row.value }}</span>\n          <span class=\"m-section-chart__tip-label\">{{\n            row.noTranslate ? row.label : (row.label | translate: row.params)\n          }}</span>\n          <span class=\"m-section-chart__tip-sub\">{{ row.sub }}</span>\n        </span>\n      }\n    </div>\n  }\n\n  @if (measureView()?.card; as card) {\n    <div\n      class=\"m-section-chart__measure\"\n      role=\"status\"\n      [class.m-section-chart__measure--flip]=\"card.flip\"\n      [style.left.px]=\"card.x\"\n    >\n      <span class=\"m-section-chart__tip-title\">{{ card.title }}</span>\n      @for (row of card.rows; track $index) {\n        <span class=\"m-section-chart__tip-row\">\n          <span class=\"m-section-chart__tip-key\" [style.background]=\"row.color\"></span>\n          <span class=\"m-section-chart__tip-value\">{{ row.value }}</span>\n          <span class=\"m-section-chart__tip-label\">{{\n            row.noTranslate ? row.label : (row.label | translate: row.params)\n          }}</span>\n          <span class=\"m-section-chart__tip-sub\">{{ row.sub }}</span>\n        </span>\n      }\n    </div>\n  }\n</div>\n\n@if (presets().length > 1 && !minimal()) {\n  <div class=\"m-section-chart__presets\">\n    <m-section-toggle\n      [items]=\"presets()\"\n      [selectedIndex]=\"presetIndex()\"\n      [border]=\"false\"\n      (action)=\"selectPreset($event)\"\n    >\n      <ng-template [mSectionToggleItem]=\"presets()\" let-preset>\n        <span class=\"m-section-chart__preset\">{{ preset.label }}</span>\n      </ng-template>\n    </m-section-toggle>\n  </div>\n}\n\n@if (navigatorView(); as nav) {\n  <svg\n    class=\"m-section-chart__navigator\"\n    role=\"slider\"\n    tabindex=\"0\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-label]=\"'zoom' | translate\"\n    [attr.aria-valuenow]=\"nav.position\"\n    [attr.aria-valuetext]=\"windowLabel()\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"navHeight\"\n    [attr.viewBox]=\"navViewBox()\"\n    (pointerdown)=\"onNavigatorDown($event)\"\n    (pointermove)=\"onNavigatorMove($event)\"\n    (pointerup)=\"onNavigatorUp()\"\n    (pointercancel)=\"onNavigatorUp()\"\n    (keydown)=\"onNavigatorKeydown($event)\"\n  >\n    <svg:path class=\"m-section-chart__nav-area\" [attr.d]=\"nav.area\" />\n    <svg:path class=\"m-section-chart__nav-line\" [attr.d]=\"nav.d\" />\n    <svg:line\n      class=\"m-section-chart__axis\"\n      [attr.x1]=\"left()\"\n      [attr.x2]=\"right()\"\n      [attr.y1]=\"nav.base\"\n      [attr.y2]=\"nav.base\"\n    />\n    @for (tick of nav.ticks; track $index) {\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"middle\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"nav.base + 15\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    <svg:rect\n      class=\"m-section-chart__nav-dim\"\n      [attr.x]=\"left()\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"nav.start - left()\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-dim\"\n      [attr.x]=\"nav.end\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"right() - nav.end\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-window\"\n      [attr.x]=\"nav.start\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"nav.end - nav.start\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-handle\"\n      rx=\"2\"\n      width=\"6\"\n      height=\"20\"\n      [attr.x]=\"nav.start - 3\"\n      [attr.y]=\"(nav.base + navTop) / 2 - 10\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-handle\"\n      rx=\"2\"\n      width=\"6\"\n      height=\"20\"\n      [attr.x]=\"nav.end - 3\"\n      [attr.y]=\"(nav.base + navTop) / 2 - 10\"\n    />\n  </svg>\n}\n\n<table class=\"m-section-chart__table\" [id]=\"tableId\">\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ 'date' | translate }}</th>\n      @for (column of table().columns; track $index) {\n        <th scope=\"col\">\n          {{ column.noTranslate ? column.label : (column.label | translate: column.params) }}\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (row of table().rows; track $index) {\n      <tr>\n        <td>{{ row.date }}</td>\n        @for (cell of row.cells; track $index) {\n          <td>{{ cell }}</td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n",
+			styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;position:relative;width:100%;min-width:0}.m-section-chart__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.5rem 1rem;margin-bottom:.5rem}.m-section-chart__legend{display:grid;gap:.15rem;min-width:0}.m-section-chart__tip-key{display:inline-block;width:.75rem;height:2px;border-radius:1px}.m-section-chart__window{color:var(--m-text-tertiary);font-size:.8rem}:host(.m-section-chart--minimal) .m-section-chart__svg{cursor:default}:host(.m-section-chart--minimal) .m-section-chart__line{stroke-width:2.25}.m-section-chart__area{stroke:none}.m-section-chart__plot{position:relative}.m-section-chart__svg{display:block;overflow:visible}.m-section-chart__svg:focus{outline:none}.m-section-chart__svg:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__svg.is-measurable{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.m-section-chart__band{fill:var(--m-text);opacity:.06}.m-section-chart__band-edge{stroke:var(--m-text-secondary);stroke-width:1}.m-section-chart__grid{stroke:var(--m-text-septenary);stroke-width:1}.m-section-chart__grid--zero{stroke:var(--m-text-quinary);stroke-width:1.5}.m-section-chart__axis{stroke:var(--m-text-quinary);stroke-width:1}.m-section-chart__tick{fill:var(--m-text-tertiary);font-size:11px;font-variant-numeric:tabular-nums}.m-section-chart__line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.m-section-chart__dot{stroke:var(--m-background);stroke-width:2}.m-section-chart__cross{stroke:var(--m-text-secondary);stroke-width:1;opacity:.55}.m-section-chart__tip,.m-section-chart__measure{position:absolute;z-index:2;display:grid;gap:.25rem;min-width:10rem;padding:.5rem .625rem;border:1px solid var(--m-backdrop-border);border-radius:.5rem;background:var(--m-background);box-shadow:0 6px 20px var(--m-backdrop-shadow);font-size:.75rem;pointer-events:none}.m-section-chart__tip{top:0;margin-left:.875rem}.m-section-chart__tip--flip{transform:translate(calc(-100% - 1.75rem))}.m-section-chart__measure{bottom:2.25rem}.m-section-chart__measure--flip{transform:translate(-100%)}.m-section-chart__tip-title{color:var(--m-text-secondary);font-weight:600}.m-section-chart__tip-row{display:grid;grid-template-columns:.75rem auto 1fr auto;align-items:center;gap:.5rem}.m-section-chart__tip-value{color:var(--m-text);font-weight:650;font-variant-numeric:tabular-nums}.m-section-chart__tip-label{color:var(--m-text-secondary);white-space:nowrap}.m-section-chart__tip-sub{color:var(--m-text-tertiary);font-variant-numeric:tabular-nums}.m-section-chart__presets{--section-px: 0;margin-top:.5rem}.m-section-chart__preset{font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}.m-section-chart__navigator{display:block;margin-top:.25rem;overflow:visible;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}.m-section-chart__navigator:focus{outline:none}.m-section-chart__navigator:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__nav-area{fill:var(--m-text-tertiary);opacity:.12}.m-section-chart__nav-line{fill:none;stroke:var(--m-text-tertiary);stroke-width:1.25}.m-section-chart__nav-dim{fill:var(--m-background);opacity:.6}.m-section-chart__nav-window{fill:transparent;stroke:var(--m-text-secondary);stroke-width:1;cursor:grab}.m-section-chart__nav-handle{fill:var(--m-text-secondary);cursor:ew-resize}.m-section-chart__table{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -38194,11 +38222,13 @@ var TreeGridComponent = class TreeGridComponent extends ConfigComponent {
         [style.max-height.px]="config()?.maxHeight || null"
       >
         <table class="m-table__table">
-          <m-table-header
-            [visibleColumns]="visibleColumns()"
-            [fixedCount]="effectiveFixedCount()"
-            [fixedOffset]="fixedOffsetFn()"
-          />
+          @if (!config()?.hideHeader) {
+            <m-table-header
+              [visibleColumns]="visibleColumns()"
+              [fixedCount]="effectiveFixedCount()"
+              [fixedOffset]="fixedOffsetFn()"
+            />
+          }
           <tbody class="m-table-body">
             @for (flat of displayRows(); track flat.pathKey) {
               <tr
@@ -38624,11 +38654,13 @@ i0.ɵɵngDeclareClassMetadata({
         [style.max-height.px]="config()?.maxHeight || null"
       >
         <table class="m-table__table">
-          <m-table-header
-            [visibleColumns]="visibleColumns()"
-            [fixedCount]="effectiveFixedCount()"
-            [fixedOffset]="fixedOffsetFn()"
-          />
+          @if (!config()?.hideHeader) {
+            <m-table-header
+              [visibleColumns]="visibleColumns()"
+              [fixedCount]="effectiveFixedCount()"
+              [fixedOffset]="fixedOffsetFn()"
+            />
+          }
           <tbody class="m-table-body">
             @for (flat of displayRows(); track flat.pathKey) {
               <tr
@@ -45306,133 +45338,6 @@ function provideUserTabs(tabs) {
 		useValue: tabs
 	}];
 }
-var FooterComponent = class FooterComponent {
-	#navStore = inject(NavStore);
-	currentYear = (/* @__PURE__ */ new Date()).getFullYear();
-	activeApp = this.#navStore.currentWcConfig;
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.1",
-		ngImport: i0,
-		type: FooterComponent,
-		deps: [],
-		target: i0.ɵɵFactoryTarget.Component
-	});
-	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.0.0",
-		version: "22.2.1",
-		type: FooterComponent,
-		isStandalone: true,
-		selector: "m-footer",
-		ngImport: i0,
-		template: `
-    <footer class="m-footer">
-      <div class="m-footer__inner">
-        <div class="m-footer__brand">
-          <m-icon name="copyright"></m-icon>
-          <span class="m-footer__copy">{{ 'with' | translate }} <span class="m-footer__heart">♥</span> {{ 'magmonium' | translate }}</span>
-          @if (activeApp(); as app) {
-            <span class="m-footer__sep">|</span>
-            <span class="m-footer__v">v{{ app.version }}</span>
-          }
-        </div>
-        @if (activeApp(); as app) {
-          <div class="m-footer__meta">
-            <div class="m-footer__meta-item">
-              <span class="m-footer__label">{{ 'app' | translate }}:</span>
-              <span class="m-footer__val">{{ app.app }}</span>
-            </div>
-            @if (app.timestamp) {
-              <div class="m-footer__meta-item">
-                <span class="m-footer__label">{{ 'built' | translate }}:</span>
-                <span class="m-footer__val">{{ app.timestamp | date: 'MMM d, HH:mm' }}</span>
-              </div>
-            }
-          </div>
-        }
-      </div>
-    </footer>
-  `,
-		isInline: true,
-		styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.m-footer{width:100%;padding:1.5rem 32px;border-top:1px solid var(--m-border);background:var(--m-background);color:var(--m-text-secondary);font-size:11px;font-weight:500;letter-spacing:.02em}.m-footer__inner{display:flex;justify-content:space-between;align-items:center;max-width:1920px;margin:0 auto}.m-footer__brand{display:flex;align-items:center;gap:.5rem}.m-footer__sep{opacity:.3;margin:0 .25rem}.m-footer__heart{color:var(--m-error)}.m-footer__v,.m-footer__copy{font-weight:700}.m-footer__meta{display:flex;gap:1.5rem}.m-footer__meta-item{display:flex;gap:.35rem}.m-footer__meta .m-footer__val{color:var(--m-text);font-weight:600}@media(max-width:768px){.m-footer{padding:1.25rem 20px}.m-footer__inner{flex-direction:column;align-items:flex-start;gap:.75rem}.m-footer__meta{gap:1rem;font-size:10px}}\n"],
-		dependencies: [
-			{
-				kind: "component",
-				type: IconComponent,
-				selector: "m-icon, m-one-icon",
-				inputs: [
-					"config",
-					"name",
-					"color",
-					"size",
-					"one",
-					"baseUrl",
-					"remote",
-					"shadow"
-				],
-				outputs: ["configChange"]
-			},
-			{
-				kind: "pipe",
-				type: DatePipe,
-				name: "date"
-			},
-			{
-				kind: "pipe",
-				type: TranslatePipe,
-				name: "translate"
-			}
-		],
-		changeDetection: i0.ChangeDetectionStrategy.OnPush
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.1",
-	ngImport: i0,
-	type: FooterComponent,
-	decorators: [{
-		type: Component,
-		args: [{
-			selector: "m-footer",
-			imports: [
-				IconComponent,
-				DatePipe,
-				TranslatePipe
-			],
-			template: `
-    <footer class="m-footer">
-      <div class="m-footer__inner">
-        <div class="m-footer__brand">
-          <m-icon name="copyright"></m-icon>
-          <span class="m-footer__copy">{{ 'with' | translate }} <span class="m-footer__heart">♥</span> {{ 'magmonium' | translate }}</span>
-          @if (activeApp(); as app) {
-            <span class="m-footer__sep">|</span>
-            <span class="m-footer__v">v{{ app.version }}</span>
-          }
-        </div>
-        @if (activeApp(); as app) {
-          <div class="m-footer__meta">
-            <div class="m-footer__meta-item">
-              <span class="m-footer__label">{{ 'app' | translate }}:</span>
-              <span class="m-footer__val">{{ app.app }}</span>
-            </div>
-            @if (app.timestamp) {
-              <div class="m-footer__meta-item">
-                <span class="m-footer__label">{{ 'built' | translate }}:</span>
-                <span class="m-footer__val">{{ app.timestamp | date: 'MMM d, HH:mm' }}</span>
-              </div>
-            }
-          </div>
-        }
-      </div>
-    </footer>
-  `,
-			changeDetection: ChangeDetectionStrategy.OnPush,
-			styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.m-footer{width:100%;padding:1.5rem 32px;border-top:1px solid var(--m-border);background:var(--m-background);color:var(--m-text-secondary);font-size:11px;font-weight:500;letter-spacing:.02em}.m-footer__inner{display:flex;justify-content:space-between;align-items:center;max-width:1920px;margin:0 auto}.m-footer__brand{display:flex;align-items:center;gap:.5rem}.m-footer__sep{opacity:.3;margin:0 .25rem}.m-footer__heart{color:var(--m-error)}.m-footer__v,.m-footer__copy{font-weight:700}.m-footer__meta{display:flex;gap:1.5rem}.m-footer__meta-item{display:flex;gap:.35rem}.m-footer__meta .m-footer__val{color:var(--m-text);font-weight:600}@media(max-width:768px){.m-footer{padding:1.25rem 20px}.m-footer__inner{flex-direction:column;align-items:flex-start;gap:.75rem}.m-footer__meta{gap:1rem;font-size:10px}}\n"]
-		}]
-	}]
-});
 var NotificationElementComponent = class NotificationElementComponent {
 	NotificationType = NotificationType;
 	#notificationService = inject(NotificationService);
@@ -46011,33 +45916,22 @@ var FrameComponent = class FrameComponent {
       <div class="content">
         <ng-content />
       </div>
-      @if (!isPreview) {
-        <m-footer />
-      }
     </div>
   `,
 		isInline: true,
 		styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%;min-height:100vh}.main{display:flex;flex-direction:column;width:100%;z-index:0;background-color:var(--m-background);min-height:100vh;box-sizing:border-box;transition:padding .5s cubic-bezier(.16,1,.3,1);padding-left:var(--m-nav-padding, 0)}.main.is-mobile{padding-left:0;padding-bottom:56px}.main .content{flex:1;width:100%}\n"],
-		dependencies: [
-			{
-				kind: "component",
-				type: NavComponent,
-				selector: "m-nav",
-				inputs: ["isHost", "showLogo"],
-				outputs: ["menuClicked"]
-			},
-			{
-				kind: "component",
-				type: FooterComponent,
-				selector: "m-footer"
-			},
-			{
-				kind: "component",
-				type: NotificationPopupComponent,
-				selector: "m-notification-popup",
-				outputs: ["actionClicked"]
-			}
-		],
+		dependencies: [{
+			kind: "component",
+			type: NavComponent,
+			selector: "m-nav",
+			inputs: ["isHost", "showLogo"],
+			outputs: ["menuClicked"]
+		}, {
+			kind: "component",
+			type: NotificationPopupComponent,
+			selector: "m-notification-popup",
+			outputs: ["actionClicked"]
+		}],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -46050,11 +45944,7 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "m-frame",
-			imports: [
-				NavComponent,
-				FooterComponent,
-				NotificationPopupComponent
-			],
+			imports: [NavComponent, NotificationPopupComponent],
 			template: `
     <m-notification-popup />
     @if (!isPreview) {
@@ -46069,9 +45959,6 @@ i0.ɵɵngDeclareClassMetadata({
       <div class="content">
         <ng-content />
       </div>
-      @if (!isPreview) {
-        <m-footer />
-      }
     </div>
   `,
 			changeDetection: ChangeDetectionStrategy.OnPush,