@tradecanvas/chart 1.71.0 → 1.72.1

package/dist/WidgetSettings-eOo93L7Z.js

@@ -0,0 +1,546 @@
+import { a as e, c as t, d as n, f as r, i, m as a, o, p as s, r as c, s as l, t as u, u as d, y as f } from "./widgetLocales-DgTR8JSu.js";
+import { i as p, n as m, r as h, t as g } from "./focusTrap-Br9Zfje0.js";
+import { f as _, l as v } from "./settingsControls-DIjzCFHI.js";
+import { r as y } from "./i18n-C5v6Tzp1.js";
+import { CHART_STYLE_KEYS as b } from "@tradecanvas/commons";
+//#region src/widget/settingsRows.ts
+var x = 0, S = 0, C = 20;
+function w(e) {
+	let t = document.createElement("div");
+	if (t.className = "tcw-settings-section", e) {
+		let n = document.createElement("div");
+		n.className = "tcw-settings-section-title", n.textContent = e, t.appendChild(n), t.setAttribute("role", "group"), t.setAttribute("aria-label", e);
+	}
+	return t;
+}
+function T(e) {
+	let t = document.createElement("div");
+	t.className = "tcw-settings-row";
+	let n = document.createElement("span");
+	return n.className = "tcw-settings-label", n.textContent = e, t.appendChild(n), t;
+}
+function E(e, t, n, r, i) {
+	let a = T(e), o = document.createElement("div");
+	o.className = "tcw-color-picker-wrap";
+	let s = document.createElement("input");
+	s.type = "color", s.setAttribute("aria-label", e);
+	let c = document.createElement("span");
+	c.className = "tcw-color-hex", c.id = `tcw-color-${++x}`, s.setAttribute("aria-describedby", c.id);
+	let l = null, u = (t) => {
+		s.value = v(t ?? r.start?.()), c.textContent = t ?? i("settings.auto"), a.classList.toggle("tcw-color-auto", t === null), t !== null && r.start && !l ? (l = document.createElement("button"), l.type = "button", l.className = "tcw-color-auto-btn", l.textContent = i("settings.auto"), l.setAttribute("aria-label", `${e}: ${i("settings.auto")}`), l.addEventListener("click", () => {
+			n(null), s.focus(), u(r.read());
+		}), o.appendChild(l)) : t === null && l && (l.remove(), l = null);
+	};
+	return s.addEventListener("input", () => {
+		n(s.value), u(s.value);
+	}), o.append(s, c), a.appendChild(o), u(t), {
+		row: a,
+		sync: () => u(r.read())
+	};
+}
+function D(e, t, n) {
+	let r = T(e), i = document.createElement("button");
+	return i.type = "button", i.className = `tcw-toggle${t ? " tcw-on" : ""}`, i.setAttribute("role", "switch"), i.setAttribute("aria-checked", String(t)), i.setAttribute("aria-label", e), i.addEventListener("click", () => {
+		let e = !i.classList.contains("tcw-on");
+		i.classList.toggle("tcw-on", e), i.setAttribute("aria-checked", String(e)), n(e);
+	}), r.appendChild(i), r;
+}
+function O(e, t, n, r) {
+	let i = T(e), a = document.createElement("select");
+	a.className = "tcw-settings-select", a.setAttribute("aria-label", e);
+	for (let e of n) {
+		let n = document.createElement("option");
+		n.value = e.value, n.textContent = e.label, e.value === t && (n.selected = !0), a.appendChild(n);
+	}
+	return n.some((e) => e.value === t) || (a.selectedIndex = -1), a.addEventListener("change", () => r(a.value)), i.appendChild(a), i;
+}
+function k(e, t, n, r, i = (e) => String(e)) {
+	let a = T(e), o = document.createElement("div");
+	o.className = "tcw-settings-range";
+	let s = document.createElement("input");
+	s.type = "range", s.min = String(n.min), s.max = String(n.max), s.step = String(n.step), s.value = String(t), s.setAttribute("aria-label", e);
+	let c = document.createElement("span");
+	return c.className = "tcw-settings-range-val", c.textContent = i(t), s.addEventListener("input", () => {
+		let e = Number(s.value);
+		c.textContent = i(e), r(e);
+	}), o.append(s, c), a.appendChild(o), a;
+}
+function A(e, t, n) {
+	let r = new Intl.NumberFormat(n, { maximumFractionDigits: C }).format;
+	return e.step === "1" && Number.isFinite(e.max) ? y(t("settings.numberWhole"), {
+		min: r(Math.max(1, e.min ?? 1)),
+		max: r(e.max)
+	}) : y(t("settings.numberAtLeast"), { min: r(e.min ?? 0) });
+}
+function j(e, t, n, r, i, a = "en-US") {
+	let o = document.createElement("div");
+	o.className = "tcw-settings-row tcw-settings-row--number";
+	let s = document.createElement("label");
+	s.className = "tcw-settings-label", s.textContent = e, o.appendChild(s);
+	let c = document.createElement("input");
+	c.type = "number", c.className = "tcw-settings-number", c.min = "0", c.step = n.step, Number.isFinite(n.max) && (c.max = String(n.max)), c.placeholder = i("settings.auto"), c.value = t === null ? "" : String(t), c.setAttribute("aria-label", e);
+	let l = document.createElement("div");
+	l.className = "tcw-settings-hint", l.id = `tcw-number-hint-${++S}`, l.setAttribute("role", "status"), c.setAttribute("aria-describedby", l.id);
+	let u = (e) => {
+		e ? c.removeAttribute("aria-invalid") : c.setAttribute("aria-invalid", "true"), l.textContent = e ? "" : A(n, i, a);
+	};
+	return c.addEventListener("change", () => {
+		if (c.value.trim() === "") {
+			u(!0), r(null);
+			return;
+		}
+		let e = Number(c.value), t = Number.isFinite(e) && e > 0 && e >= (n.min ?? 0) && e <= n.max && (n.step !== "1" || Number.isInteger(e));
+		u(t), t && r(e);
+	}), o.append(c, l), o;
+}
+//#endregion
+//#region src/widget/WidgetSettings.ts
+var M = [
+	{
+		id: "symbol",
+		icon: "chartType:candlestick"
+	},
+	{
+		id: "statusLine",
+		icon: "type"
+	},
+	{
+		id: "scales",
+		icon: "ruler"
+	},
+	{
+		id: "appearance",
+		icon: "palette"
+	},
+	{
+		id: "layers",
+		icon: "layers"
+	},
+	{
+		id: "trading",
+		icon: "trendingUp"
+	}
+], N = [
+	1,
+	2,
+	3,
+	4
+], P = "t:", F = {
+	step: "any",
+	max: Infinity,
+	min: 1e-8
+}, I = 1, L = class {
+	callbacks;
+	t;
+	backdrop = null;
+	modal = null;
+	bodyEl = null;
+	tabButtons = [];
+	templateBtn = null;
+	menu = null;
+	currentTab = "symbol";
+	currentSettings = null;
+	chartType = null;
+	lookRows = [];
+	returnFocus = null;
+	uid = I++;
+	constructor(e, t, n = {}, r = () => document.body) {
+		this.available = n, this.host = r, this.callbacks = e, this.t = t;
+	}
+	open(e, t = null, n = "symbol") {
+		this.modal && this.remove(), this.returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null, this.currentSettings = { ...e }, this.chartType = t, this.currentTab = n, this.buildModal(), this.tabButtons.find((e) => e.dataset.tab === n)?.focus();
+	}
+	isOpen() {
+		return this.modal !== null;
+	}
+	refresh(e, t) {
+		if (!this.modal) return;
+		this.currentSettings = { ...e }, t !== void 0 && (this.chartType = t);
+		let n = this.focusedControl();
+		this.renderTabContent(), n !== null && this.focusControl(n);
+	}
+	focusedControl() {
+		let e = document.activeElement;
+		if (!this.bodyEl || !(e instanceof HTMLElement) || !this.bodyEl.contains(e)) return null;
+		let t = this.panelControls().indexOf(e);
+		return t < 0 ? null : t;
+	}
+	focusControl(e) {
+		let t = this.panelControls();
+		(t[Math.min(e, t.length - 1)] ?? this.tabButtons.find((e) => e.dataset.tab === this.currentTab))?.focus();
+	}
+	panelControls() {
+		return this.bodyEl ? [...this.bodyEl.querySelectorAll(g)] : [];
+	}
+	close() {
+		this.finish(!0);
+	}
+	destroy() {
+		this.remove();
+	}
+	finish(e) {
+		this.modal && (e ? this.callbacks.onClose() : this.callbacks.onCancel?.(), this.remove(), this.returnFocus?.isConnected && this.returnFocus.focus(), this.returnFocus = null);
+	}
+	remove() {
+		this.menu?.destroy(), this.menu = null, this.backdrop?.remove(), this.backdrop = this.modal = this.bodyEl = this.templateBtn = null, this.tabButtons = [];
+	}
+	buildModal() {
+		let e = document.createElement("div");
+		e.className = "tcw-modal-backdrop";
+		let t = !1;
+		e.addEventListener("pointerdown", (n) => {
+			t = n.target === e;
+		}), e.addEventListener("click", (n) => {
+			n.target === e && t && this.finish(!1), t = !1;
+		});
+		let n = document.createElement("div");
+		n.className = "tcw-modal tcw-set", n.setAttribute("role", "dialog"), n.setAttribute("aria-modal", "true"), n.setAttribute("aria-labelledby", `tcw-set-title-${this.uid}`), n.tabIndex = -1, n.addEventListener("keydown", (e) => {
+			if (e.key === "Escape") {
+				e.preventDefault(), e.stopPropagation(), this.finish(!1);
+				return;
+			}
+			m(e, n);
+		}), this.backdrop = e, this.modal = n, n.append(this.buildHeader(), this.buildBody(), this.buildFooter()), e.appendChild(n), this.host().appendChild(e), this.markTabs(), this.renderTabContent();
+	}
+	buildHeader() {
+		let e = document.createElement("div");
+		e.className = "tcw-modal-header";
+		let t = document.createElement("h3");
+		t.id = `tcw-set-title-${this.uid}`, t.textContent = this.t("settings.title");
+		let n = document.createElement("button");
+		return n.type = "button", n.className = "tcw-modal-close", n.setAttribute("aria-label", this.t("common.close")), n.innerHTML = p("x", 16), n.addEventListener("click", () => this.finish(!1)), e.append(t, n), e;
+	}
+	buildBody() {
+		let e = document.createElement("div");
+		e.className = "tcw-set-body";
+		let t = document.createElement("div");
+		t.className = "tcw-set-nav", t.setAttribute("role", "tablist"), t.setAttribute("aria-orientation", "vertical"), t.setAttribute("aria-label", this.t("settings.title")), t.addEventListener("keydown", (e) => this.onTabKey(e)), this.tabButtons = M.map(({ id: e, icon: t }) => {
+			let n = document.createElement("button");
+			return n.type = "button", n.className = "tcw-set-tab", n.id = `tcw-set-tab-${this.uid}-${e}`, n.dataset.tab = e, n.setAttribute("role", "tab"), n.setAttribute("aria-controls", `tcw-set-panel-${this.uid}`), n.innerHTML = `${t.startsWith("chartType:") ? h(t.slice(10), 16) : p(t, 16)}<span></span>`, n.querySelector("span").textContent = this.t(`settings.tab.${e}`), n.addEventListener("click", () => this.selectTab(e)), n;
+		}), t.append(...this.tabButtons);
+		let n = document.createElement("div");
+		return n.className = "tcw-modal-body tcw-set-panel", n.id = `tcw-set-panel-${this.uid}`, n.setAttribute("role", "tabpanel"), this.bodyEl = n, e.append(t, n), e;
+	}
+	buildFooter() {
+		let e = document.createElement("div");
+		e.className = "tcw-modal-footer";
+		let t = this.footerButton("template", "tcw-footer-menu", () => this.openTemplates());
+		t.setAttribute("aria-haspopup", "menu"), t.setAttribute("aria-expanded", "false"), t.innerHTML = `<span></span>${p("chevronDown", 12)}`, t.querySelector("span").textContent = this.t("settings.template"), this.templateBtn = t;
+		let n = document.createElement("div");
+		return n.className = "tcw-footer-end", n.append(this.footerButton("cancel", "tcw-footer-cancel", () => this.finish(!1), this.t("common.cancel")), this.footerButton("ok", "tcw-done-btn", () => this.finish(!0), this.t("drawingSettings.ok"))), e.append(t, n), e;
+	}
+	footerButton(e, t, n, r) {
+		let i = document.createElement("button");
+		return i.type = "button", i.className = t, i.dataset.act = e, r && (i.textContent = r), i.addEventListener("click", n), i;
+	}
+	markTabs() {
+		for (let e of this.tabButtons) {
+			let t = e.dataset.tab === this.currentTab;
+			e.classList.toggle("tcw-active", t), e.setAttribute("aria-selected", String(t)), e.tabIndex = t ? 0 : -1, t && this.bodyEl?.setAttribute("aria-labelledby", e.id);
+		}
+	}
+	selectTab(e, t = !1) {
+		this.currentTab = e, this.markTabs(), this.renderTabContent(), t && this.tabButtons.find((t) => t.dataset.tab === e)?.focus();
+	}
+	onTabKey(e) {
+		let t = M.findIndex((e) => e.id === this.currentTab), n = e.key === "ArrowDown" || e.key === "ArrowRight" ? (t + 1) % M.length : e.key === "ArrowUp" || e.key === "ArrowLeft" ? (t - 1 + M.length) % M.length : e.key === "Home" ? 0 : e.key === "End" ? M.length - 1 : -1;
+		n < 0 || (e.preventDefault(), this.selectTab(M[n].id, !0));
+	}
+	openTemplates() {
+		let e = this.templateBtn;
+		if (!this.modal || !e) return;
+		if (this.menu?.isOpen()) {
+			this.menu.close();
+			return;
+		}
+		let t = this.callbacks.templates, n = (t?.list() ?? []).map((e) => ({
+			id: `${P}${e}`,
+			label: e,
+			icon: "layers",
+			remove: y(this.t("templates.delete"), { name: e })
+		})), r = [
+			...n,
+			...n.length > 0 ? ["separator"] : [],
+			...t ? [{
+				id: "save",
+				label: this.t("settings.saveTemplate"),
+				icon: "save"
+			}] : [],
+			{
+				id: "reset",
+				label: this.t("settings.resetToDefaults"),
+				icon: "reset"
+			}
+		];
+		this.menu ??= new _(this.modal, this.t("settings.template"));
+		let i = e.getBoundingClientRect(), a = this.modal.getBoundingClientRect();
+		this.menu.open(r, i.left - a.left, i.top - a.top, (e) => {
+			e === "reset" ? this.callbacks.onReset() : e === "save" ? t?.save() : e.startsWith(P) && t?.apply(e.slice(2));
+		}, e, (e) => t?.remove(e.slice(2)));
+	}
+	renderTabContent() {
+		if (!(!this.bodyEl || !this.currentSettings)) switch (this.bodyEl.replaceChildren(), this.lookRows = [], this.currentTab) {
+			case "symbol":
+				this.renderSymbolTab(this.currentSettings);
+				break;
+			case "statusLine":
+				this.renderStatusLineTab(this.currentSettings);
+				break;
+			case "scales":
+				this.renderScalesTab(this.currentSettings);
+				break;
+			case "appearance":
+				this.renderAppearanceTab(this.currentSettings);
+				break;
+			case "layers":
+				this.renderLayersTab(this.currentSettings);
+				break;
+			case "trading":
+				for (let e of n) (!e.trading || this.available.trading !== !1) && this.renderLookSection(e);
+				break;
+		}
+	}
+	renderSymbolTab(t) {
+		this.renderChartTypeSection(), this.addSection(void 0, [D(this.t("settings.mainSeries"), t.mainSeriesVisible, (e) => this.patch({ mainSeriesVisible: e })), D(this.t("settings.extendedHours"), t.extendedHours, (e) => this.patch({ extendedHours: e }))]);
+		let n = this.t("common.show");
+		this.renderLookSection(o), this.available.volume !== !1 && this.renderLookSection(r, [D(n, t.volumeVisible, (e) => this.patch({ volumeVisible: e }))]), this.renderLookSection(e, [D(n, t.highLowLines, (e) => this.patch({ highLowLines: e }))]);
+	}
+	renderStatusLineTab(e) {
+		let t = this.available.legend !== !1, n = t ? d : d.filter((e) => !l.includes(e));
+		this.addSection(void 0, [...t ? [D(this.t("settings.ohlcLegend"), e.legendVisible, (e) => this.patch({ legendVisible: e }))] : [], ...n.map((e) => this.lookRow(e))]);
+	}
+	renderScalesTab(e) {
+		let n = [
+			{
+				value: "regular",
+				label: this.t("settings.scale.regular")
+			},
+			{
+				value: "logarithmic",
+				label: this.t("settings.scale.logarithmic")
+			},
+			{
+				value: "percentage",
+				label: this.t("settings.scale.percentage")
+			},
+			{
+				value: "indexedTo100",
+				label: this.t("settings.scale.indexedTo100")
+			}
+		].filter((e) => e.value !== "logarithmic" || this.available.logScale !== !1), r = this.available.exchangeZone?.(), i = f(e.timezone, Date.now(), this.t("settings.timezone.local"), r === void 0 ? void 0 : {
+			label: this.t("settings.timezone.exchange"),
+			zone: r
+		});
+		this.addSection(void 0, [
+			O(this.t("settings.priceScale"), e.scaleMode, n, (e) => this.patch({ scaleMode: e })),
+			D(this.t("settings.autoScale"), e.autoScale, (e) => this.patch({ autoScale: e })),
+			D(this.t("settings.invertScale"), e.invertScale, (e) => this.patch({ invertScale: e })),
+			D(this.t("settings.leftScale"), e.leftPriceScale, (e) => this.patch({ leftPriceScale: e })),
+			D(this.t("settings.indicatorValues"), e.indicatorValueLabels, (e) => this.patch({ indicatorValueLabels: e })),
+			D(this.t("settings.alignAxisLabels"), e.alignAxisLabels, (e) => this.patch({ alignAxisLabels: e })),
+			...this.available.barCountdown === !1 ? [] : [D(this.t("settings.barCountdown"), e.barCountdown, (e) => this.patch({ barCountdown: e }))],
+			O(this.t("settings.timezone"), e.timezone, i, (e) => this.patch({ timezone: e })),
+			O(this.t("settings.numberLocale"), e.numberLocale, c(e.numberLocale), (e) => this.patch({ numberLocale: e }))
+		]), this.addSection(this.t("settings.section.axes"), t.map((e) => this.lookRow(e)));
+	}
+	renderAppearanceTab(e) {
+		let [t, n, r, ...a] = i;
+		this.renderLookSection(t), this.renderLookSection(n, [D(this.t("common.show"), e.gridVisible, (e) => this.patch({ gridVisible: e }))]), this.renderLookSection(r, [O(this.t("settings.crosshairMode"), e.crosshairMode, [
+			{
+				label: this.t("settings.crosshair.magnet"),
+				value: "magnet"
+			},
+			{
+				label: this.t("settings.crosshair.normal"),
+				value: "normal"
+			},
+			{
+				label: this.t("settings.crosshair.hidden"),
+				value: "hidden"
+			}
+		], (e) => this.patch({ crosshairMode: e }))]);
+		for (let e of a) this.renderLookSection(e);
+	}
+	renderLayersTab(e) {
+		let t = (e) => `${Math.round(e * 100)}%`, n = (e) => this.t(e);
+		this.addSection(void 0, [D(n("settings.volumeProfile"), e.volumeProfileVisible, (e) => this.patch({ volumeProfileVisible: e }))]), this.addSection(void 0, [
+			D(n("settings.marketProfile"), e.marketProfileVisible, (e) => this.patch({ marketProfileVisible: e })),
+			D(n("settings.marketProfileSplit"), e.marketProfileSplit, (e) => this.patch({ marketProfileSplit: e })),
+			D(n("settings.marketProfileLetters"), e.marketProfileLetters, (e) => this.patch({ marketProfileLetters: e })),
+			k(n("settings.marketProfileBuckets"), e.marketProfileBuckets, {
+				min: 8,
+				max: 200,
+				step: 1
+			}, (e) => this.patch({ marketProfileBuckets: e })),
+			k(n("settings.marketProfileOpacity"), e.marketProfileOpacity, {
+				min: .05,
+				max: 1,
+				step: .05
+			}, (e) => this.patch({ marketProfileOpacity: e }), t)
+		]), this.addSection(void 0, [D(n("settings.depthHeatmap"), e.depthHeatmapVisible, (e) => this.patch({ depthHeatmapVisible: e })), k(n("settings.depthHeatmapOpacity"), e.depthHeatmapOpacity, {
+			min: .1,
+			max: 1,
+			step: .05
+		}, (e) => this.patch({ depthHeatmapOpacity: e }), t)]), this.addSection(void 0, [
+			D(n("settings.swingMarkers"), e.pivotMarkersVisible, (e) => this.patch({ pivotMarkersVisible: e })),
+			k(n("settings.swingStrength"), e.pivotStrength, {
+				min: 2,
+				max: 20,
+				step: 1
+			}, (e) => this.patch({ pivotStrength: e })),
+			D(n("settings.swingStructure"), e.pivotStructureLabels, (e) => this.patch({ pivotStructureLabels: e }))
+		]), this.addSection(void 0, [
+			D(n("settings.sessionShading"), e.sessionShadingVisible, (e) => this.patch({ sessionShadingVisible: e })),
+			D(n("settings.periodLevels"), e.periodLevelsVisible, (e) => this.patch({ periodLevelsVisible: e })),
+			O(n("settings.periodLevelsBasis"), e.periodLevelsPeriod, [{
+				value: "day",
+				label: n("settings.priorDay")
+			}, {
+				value: "week",
+				label: n("settings.priorWeek")
+			}], (e) => this.patch({ periodLevelsPeriod: e }))
+		]);
+	}
+	addSection(e, t) {
+		let n = w(e);
+		return n.append(...t), this.bodyEl?.appendChild(n), n;
+	}
+	renderLookSection(e, t = []) {
+		this.addSection(this.t(e.title), [...t, ...e.rows.map((e) => this.lookRow(e))]);
+	}
+	lookRow(e) {
+		let t = this.t(e.label), n = () => this.callbacks.styleValue(e.keys[0]), r = () => {
+			let t = e.keys.map((e) => this.callbacks.styleValue(e));
+			return t.every((e) => e === t[0]) && t[0] !== null ? String(t[0]) : "";
+		}, i, a = (t) => {
+			this.callbacks.onStyleChange(Object.fromEntries(e.keys.map((e) => [e, t])));
+			for (let e of this.lookRows) e.el !== i && e.sync();
+		}, o = e.auto ? [{
+			value: "",
+			label: this.t("settings.auto")
+		}] : [], s;
+		switch (b[e.keys[0]]) {
+			case "boolean": {
+				i = D(t, n() === !0, a);
+				let e = i.querySelector("button");
+				s = () => {
+					let t = n() === !0;
+					e.classList.toggle("tcw-on", t), e.setAttribute("aria-checked", String(t));
+				};
+				break;
+			}
+			case "lineStyle":
+				i = O(t, r(), [...o, ...this.lineStyles()], (e) => a(e === "" ? null : z(e))), s = () => {
+					i.querySelector("select").value = r();
+				};
+				break;
+			case "width": {
+				let e = n(), c = typeof e == "number" && !N.includes(e) ? [...N, e].sort((e, t) => e - t) : N;
+				i = O(t, r(), [...o, ...c.map((e) => ({
+					value: String(e),
+					label: `${e}px`
+				}))], (e) => a(e === "" ? null : Number(e))), s = () => {
+					i.querySelector("select").value = r();
+				};
+				break;
+			}
+			default: {
+				let r = n(), o = E(t, typeof r == "string" ? r : null, a, {
+					read: () => {
+						let e = n();
+						return typeof e == "string" ? e : null;
+					},
+					start: e.auto ? () => (e.auto?.from ? this.callbacks.styleValue(e.auto.from) : e.auto?.hint) ?? null : void 0
+				}, this.t);
+				i = o.row, s = o.sync;
+			}
+		}
+		return this.lookRows.push({
+			el: i,
+			sync: s
+		}), i;
+	}
+	lineStyles() {
+		return [
+			{
+				value: "solid",
+				label: this.t("drawingSettings.lineStyle.solid")
+			},
+			{
+				value: "dashed",
+				label: this.t("drawingSettings.lineStyle.dashed")
+			},
+			{
+				value: "dotted",
+				label: this.t("drawingSettings.lineStyle.dotted")
+			}
+		];
+	}
+	renderChartTypeSection() {
+		if (!this.bodyEl || !this.currentSettings || !this.chartType) return;
+		let e = this.chartType, t = this.currentSettings.chartTypeOptions ?? {}, n = a.find((t) => t.value === e), r = w(n ? u(n, this.t) : e), i = () => this.currentSettings?.chartTypeOptions ?? {}, o = (e, t) => this.patch({ chartTypeOptions: {
+			...i(),
+			[e]: t
+		} }), c = (e, t, n, i) => r.appendChild(j(this.t(e), t, n, i, this.t, this.currentSettings?.numberLocale || void 0));
+		switch (e) {
+			case "renko": {
+				let e = t.renko ?? {};
+				c("settings.boxSize", typeof e.boxSize == "number" ? e.boxSize : null, F, (e) => o("renko", {
+					...i().renko ?? {},
+					boxSize: e ?? "atr"
+				})), c("settings.atrPeriod", e.atrPeriod ?? null, {
+					step: "1",
+					max: 500
+				}, (e) => o("renko", R(i().renko, "atrPeriod", e)));
+				break;
+			}
+			case "lineBreak":
+				c("settings.lineBreakLines", t.lineBreak?.lines ?? null, {
+					step: "1",
+					max: 10
+				}, (e) => o("lineBreak", R(i().lineBreak, "lines", e)));
+				break;
+			case "kagi":
+				c("settings.reversal", t.kagi?.reversal ?? null, F, (e) => o("kagi", R(i().kagi, "reversal", e))), r.appendChild(O(this.t("settings.reversalType"), t.kagi?.reversalType ?? "percent", [{
+					value: "percent",
+					label: this.t("settings.reversalType.percent")
+				}, {
+					value: "price",
+					label: this.t("settings.reversalType.price")
+				}], (e) => o("kagi", {
+					...i().kagi ?? {},
+					reversalType: e === "price" ? "price" : "percent"
+				})));
+				break;
+			case "pointAndFigure":
+				c("settings.boxSize", typeof t.pointAndFigure?.boxSize == "number" ? t.pointAndFigure.boxSize : null, F, (e) => o("pointAndFigure", {
+					...i().pointAndFigure ?? {},
+					boxSize: e ?? "auto"
+				})), c("settings.reversalBoxes", t.pointAndFigure?.reversal ?? null, {
+					step: "1",
+					max: 10
+				}, (e) => o("pointAndFigure", R(i().pointAndFigure, "reversal", e)));
+				break;
+			case "rangeBars":
+				c("settings.barRange", typeof t.rangeBars?.range == "number" ? t.rangeBars.range : null, F, (e) => o("rangeBars", { range: e ?? "auto" }));
+				break;
+			default: break;
+		}
+		for (let t of s(e)) r.appendChild(this.lookRow(t));
+		this.bodyEl.appendChild(r);
+	}
+	patch(e) {
+		this.currentSettings && Object.assign(this.currentSettings, e), this.callbacks.onChange(e);
+	}
+};
+function R(e, t, n) {
+	let r = { ...e ?? {} };
+	return n === null ? delete r[t] : r[t] = n, r;
+}
+function z(e) {
+	return e === "dashed" || e === "dotted" ? e : "solid";
+}
+//#endregion
+export { L as WidgetSettings };
+
+//# sourceMappingURL=WidgetSettings-eOo93L7Z.js.map