@design.estate/dees-catalog 3.98.1 → 3.99.1

package/dist_bundle/bundle.js

@@ -150293,6 +150293,15 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     __privateAdd(this, _dataName, __runInitializers(_init39, 36, this)), __runInitializers(_init39, 39, this);
     __privateAdd(this, _searchable, __runInitializers(_init39, 40, this, true)), __runInitializers(_init39, 43, this);
     __privateAdd(this, _dataActions, __runInitializers(_init39, 44, this, [])), __runInitializers(_init39, 47, this);
+    __publicField(this, "__searchAction", {
+      name: "Search",
+      iconName: "lucide:Search",
+      type: ["header"],
+      actionFunc: /* @__PURE__ */ __name(async () => {
+        const searchGrid = this.shadowRoot.querySelector(".searchGrid");
+        searchGrid.classList.toggle("hidden");
+      }, "actionFunc")
+    });
     __privateAdd(this, _columns, __runInitializers(_init39, 48, this, [])), __runInitializers(_init39, 51, this);
     __privateAdd(this, _rowKey, __runInitializers(_init39, 52, this)), __runInitializers(_init39, 55, this);
     __privateAdd(this, _augmentFromDisplayFunction, __runInitializers(_init39, 56, this, false)), __runInitializers(_init39, 59, this);
@@ -150455,7 +150464,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
         this.startEditing(cell2.item, cell2.col);
         return;
       }
-      const dblAction = this.dataActions.find(
+      const dblAction = this.__getEffectiveDataActions().find(
         (action) => action.type?.includes("doubleClick") && this.isActionRelevant(action, cell2.item)
       );
       if (dblAction) dblAction.actionFunc({ item: cell2.item, table: this });
@@ -150884,7 +150893,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
                 ${this.renderSortIndicator(col)}
               </th>`;
     })}
-        ${this.dataActions && this.dataActions.length > 0 ? b2`<th class="actionsCol">Actions</th>` : b2``}
+        ${this.__getEffectiveDataActions().length > 0 ? b2`<th class="actionsCol">Actions</th>` : b2``}
       </tr>
       ${this.showColumnFilters ? b2`<tr class="filtersRow">
             ${this.showSelectionCheckbox ? b2`<th style="width:42px;"></th>` : b2``}
@@ -150896,7 +150905,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
                     @input=${(e10) => this.setColumnFilter(key2, e10.target.value)} />
                 </th>`;
     })}
-            ${this.dataActions && this.dataActions.length > 0 ? b2`<th></th>` : b2``}
+            ${this.__getEffectiveDataActions().length > 0 ? b2`<th></th>` : b2``}
           </tr>` : b2``}
     `;
   }
@@ -151379,22 +151388,6 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
       this.__syncFloatingHeader();
     }
     if (this.searchable) {
-      const existing = this.dataActions.find((actionArg) => actionArg.type?.includes("header") && actionArg.name === "Search");
-      if (!existing) {
-        this.dataActions.unshift({
-          name: "Search",
-          iconName: "lucide:Search",
-          type: ["header"],
-          actionFunc: /* @__PURE__ */ __name(async () => {
-            console.log("open search");
-            const searchGrid = this.shadowRoot.querySelector(".searchGrid");
-            searchGrid.classList.toggle("hidden");
-          }, "actionFunc")
-        });
-        console.log(this.dataActions);
-        this.requestUpdate();
-      }
-      ;
       this.wireSearchInputs();
     }
   }
@@ -151450,7 +151443,9 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
       const cell2 = cells2[i11];
       const width = window.getComputedStyle(cell2).width;
       if (cell2.textContent.includes("Actions")) {
-        const neededWidth = this.dataActions.filter((actionArg) => actionArg.type?.includes("inRow")).length * 36;
+        const neededWidth = this.__getEffectiveDataActions().filter(
+          (actionArg) => actionArg.type?.includes("inRow")
+        ).length * 36;
         cell2.style.width = `${Math.max(neededWidth, 68)}px`;
       } else {
         cell2.style.width = width;
@@ -152000,9 +151995,17 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
   isActionRelevant(actionArg, itemArg) {
     return !actionArg.actionRelevancyCheckFunc || actionArg.actionRelevancyCheckFunc(itemArg);
   }
+  __getEffectiveDataActions() {
+    if (!this.searchable || this.dataActions.some(
+      (actionArg) => actionArg.type?.includes("header") && actionArg.name === "Search"
+    )) {
+      return this.dataActions;
+    }
+    return [this.__searchAction, ...this.dataActions];
+  }
   getActionsForType(typeArg) {
     const actions = [];
-    for (const action of this.dataActions) {
+    for (const action of this.__getEffectiveDataActions()) {
       if (!action.type?.includes(typeArg)) continue;
       actions.push(action);
     }
@@ -160989,6 +160992,16 @@ var chartAreaStyles = [
         position: absolute;
         inset: 0 0 4px 0;
       }
+      .rangeSelectionOverlay {
+        position: absolute;
+        display: none;
+        top: 0;
+        bottom: 0;
+        z-index: 3;
+        pointer-events: none;
+        background: color-mix(in srgb, var(--dees-color-accent, #3b82f6) 18%, transparent);
+        border-inline: 1px solid color-mix(in srgb, var(--dees-color-accent, #3b82f6) 70%, transparent);
+      }
       .statsBar {
         min-height: 32px;
         padding: 4px 16px;
@@ -161054,7 +161067,9 @@ var renderChartArea = /* @__PURE__ */ __name((component) => {
               <dees-icon .icon=${component.isFullPage ? "lucide:Minimize2" : "lucide:Maximize2"} .iconSize=${14}></dees-icon>
             </button>
           </div>
-          <div class="chartContainer"></div>
+          <div class="chartContainer">
+            <div class="rangeSelectionOverlay" aria-hidden="true"></div>
+          </div>
           ${component.seriesStats.length > 0 && !component.hideLegend ? b2`
             <div slot="footer" class="statsBar">
               ${component.seriesStats.map((s9) => b2`
@@ -161223,10 +161238,10 @@ init_dist_ts25();
 init_dist_ts24();
 init_services();
 init_dees_tile();
-var _chartLines_dec, _hideLegend_dec, _legendStats_dec, _autoScrollInterval_dec, _yAxisMax_dec, _yAxisScaling_dec, _realtimeMode_dec, _rollingWindow_dec, _yAxisFormatter_dec, _series_dec, _label_dec5, _isFullPage_dec, _seriesStats_dec, _chart_dec, _a56, _DeesChartArea_decorators, _init57, _chart, _seriesStats, _isFullPage, _label5, _series, _yAxisFormatter, _rollingWindow, _realtimeMode, _yAxisScaling, _yAxisMax, _autoScrollInterval, _legendStats, _hideLegend, _chartLines;
+var _selectedRange_dec, _rangeSelectionEnabled_dec, _chartLines_dec, _hideLegend_dec, _legendStats_dec, _autoScrollInterval_dec, _yAxisMax_dec, _yAxisScaling_dec, _realtimeMode_dec, _rollingWindow_dec, _yAxisFormatter_dec, _series_dec, _label_dec5, _isFullPage_dec, _seriesStats_dec, _chart_dec, _a56, _DeesChartArea_decorators, _init57, _chart, _seriesStats, _isFullPage, _label5, _series, _yAxisFormatter, _rollingWindow, _realtimeMode, _yAxisScaling, _yAxisMax, _autoScrollInterval, _legendStats, _hideLegend, _chartLines, _rangeSelectionEnabled, _selectedRange;
 var CHART_LEGEND_STATS = ["latest", "min", "max", "avg"];
 _DeesChartArea_decorators = [customElement("dees-chart-area")];
-var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_dec = [r5()], _seriesStats_dec = [r5()], _isFullPage_dec = [r5()], _label_dec5 = [n5()], _series_dec = [n5({ type: Array })], _yAxisFormatter_dec = [n5({ attribute: false })], _rollingWindow_dec = [n5({ type: Number })], _realtimeMode_dec = [n5({ type: Boolean })], _yAxisScaling_dec = [n5({ type: String })], _yAxisMax_dec = [n5({ type: Number })], _autoScrollInterval_dec = [n5({ type: Number })], _legendStats_dec = [n5({ type: Array })], _hideLegend_dec = [n5({ type: Boolean })], _chartLines_dec = [n5({ type: Array })], _a56) {
+var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_dec = [r5()], _seriesStats_dec = [r5()], _isFullPage_dec = [r5()], _label_dec5 = [n5()], _series_dec = [n5({ type: Array })], _yAxisFormatter_dec = [n5({ attribute: false })], _rollingWindow_dec = [n5({ type: Number })], _realtimeMode_dec = [n5({ type: Boolean })], _yAxisScaling_dec = [n5({ type: String })], _yAxisMax_dec = [n5({ type: Number })], _autoScrollInterval_dec = [n5({ type: Number })], _legendStats_dec = [n5({ type: Array })], _hideLegend_dec = [n5({ type: Boolean })], _chartLines_dec = [n5({ type: Array })], _rangeSelectionEnabled_dec = [n5({ type: Boolean })], _selectedRange_dec = [n5({ attribute: false })], _a56) {
   constructor() {
     super();
     __privateAdd(this, _chart, __runInitializers(_init57, 8, this, null)), __runInitializers(_init57, 11, this);
@@ -161243,6 +161258,8 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
     __privateAdd(this, _legendStats, __runInitializers(_init57, 52, this, [...CHART_LEGEND_STATS])), __runInitializers(_init57, 55, this);
     __privateAdd(this, _hideLegend, __runInitializers(_init57, 56, this, false)), __runInitializers(_init57, 59, this);
     __privateAdd(this, _chartLines, __runInitializers(_init57, 60, this, ["avg", "max"])), __runInitializers(_init57, 63, this);
+    __privateAdd(this, _rangeSelectionEnabled, __runInitializers(_init57, 64, this, false)), __runInitializers(_init57, 67, this);
+    __privateAdd(this, _selectedRange, __runInitializers(_init57, 68, this, null)), __runInitializers(_init57, 71, this);
     __publicField(this, "internalChartData", []);
     __publicField(this, "autoScrollTimer", null);
     __publicField(this, "lcBundle", null);
@@ -161253,6 +161270,65 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
     __publicField(this, "pendingRealtimePrune", false);
     __publicField(this, "crosshairMoveHandler", null);
     __publicField(this, "chartContainer", null);
+    __publicField(this, "rangeOverlay", null);
+    __publicField(this, "rangeResizeObserver", null);
+    __publicField(this, "rangeDrag", null);
+    __publicField(this, "rangePointerDownHandler", /* @__PURE__ */ __name((event) => {
+      if (!this.rangeSelectionEnabled || event.button !== 0 || !this.chartContainer) return;
+      const x3 = this.getRangePointerX(event);
+      const timeMs = this.coordinateToEpochMs(x3);
+      if (timeMs === null) return;
+      event.preventDefault();
+      this.rangeDrag = { pointerId: event.pointerId, startX: x3, startMs: timeMs };
+      try {
+        this.chartContainer.setPointerCapture(event.pointerId);
+      } catch {
+      }
+      window.addEventListener("keydown", this.rangeKeydownHandler);
+      this.paintRangeOverlay(x3, x3);
+    }, "rangePointerDownHandler"));
+    __publicField(this, "rangePointerMoveHandler", /* @__PURE__ */ __name((event) => {
+      if (!this.rangeDrag || event.pointerId !== this.rangeDrag.pointerId) return;
+      event.preventDefault();
+      this.paintRangeOverlay(this.rangeDrag.startX, this.getRangePointerX(event));
+    }, "rangePointerMoveHandler"));
+    __publicField(this, "rangePointerUpHandler", /* @__PURE__ */ __name((event) => {
+      const drag = this.rangeDrag;
+      if (!drag || event.pointerId !== drag.pointerId) return;
+      const endX = this.getRangePointerX(event);
+      const endMs = this.coordinateToEpochMs(endX);
+      this.finishRangeDrag(event.pointerId);
+      if (endMs === null || Math.abs(endX - drag.startX) < 4) {
+        this.syncRangeOverlay();
+        return;
+      }
+      const from3 = Math.min(drag.startMs, endMs);
+      const to = Math.max(drag.startMs, endMs);
+      if (!Number.isSafeInteger(from3) || !Number.isSafeInteger(to) || from3 >= to) {
+        this.syncRangeOverlay();
+        return;
+      }
+      this.dispatchEvent(new CustomEvent("range-change", {
+        detail: { from: from3, to },
+        bubbles: true,
+        composed: true
+      }));
+      this.syncRangeOverlay();
+    }, "rangePointerUpHandler"));
+    __publicField(this, "rangePointerCancelHandler", /* @__PURE__ */ __name((event) => {
+      if (!this.rangeDrag || event.pointerId !== this.rangeDrag.pointerId) return;
+      this.finishRangeDrag(event.pointerId);
+      this.syncRangeOverlay();
+    }, "rangePointerCancelHandler"));
+    __publicField(this, "rangeKeydownHandler", /* @__PURE__ */ __name((event) => {
+      if (event.key !== "Escape" || !this.rangeDrag) return;
+      const pointerId = this.rangeDrag.pointerId;
+      this.finishRangeDrag(pointerId);
+      this.syncRangeOverlay();
+    }, "rangeKeydownHandler"));
+    __publicField(this, "rangeVisibleTimeChangeHandler", /* @__PURE__ */ __name(() => {
+      this.syncRangeOverlay();
+    }, "rangeVisibleTimeChangeHandler"));
     __publicField(this, "chartMouseLeaveHandler", /* @__PURE__ */ __name(() => {
       this.chart?.clearCrosshairPosition();
       this.handleCrosshairCleared();
@@ -161262,11 +161338,15 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
       this.stopAutoScroll();
       const chart = this.chart;
       const crosshairMoveHandler = this.crosshairMoveHandler;
-      this.chart = null;
       this.crosshairMoveHandler = null;
       this.chartContainer?.removeEventListener("mouseleave", this.chartMouseLeaveHandler);
+      this.teardownRangeSelection();
+      this.chart = null;
+      this.rangeResizeObserver?.disconnect();
+      this.rangeResizeObserver = null;
       this.chartContainer = null;
       this.tooltipEl = null;
+      this.rangeOverlay = null;
       this.crosshairActive = false;
       this.pendingRealtimePrune = false;
       if (crosshairMoveHandler && chart) {
@@ -161293,6 +161373,84 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
     return renderChartArea(this);
   }
   // --- Helpers ---
+  getRangePointerX(event) {
+    const rect = this.chartContainer.getBoundingClientRect();
+    return Math.min(Math.max(event.clientX - rect.left, 0), rect.width);
+  }
+  coordinateToEpochMs(coordinateArg) {
+    const time = this.chart?.timeScale().coordinateToTime(coordinateArg);
+    if (typeof time !== "number" || !Number.isFinite(time)) return null;
+    const epochMs = Math.round(time * 1e3);
+    return Number.isSafeInteger(epochMs) && epochMs >= 0 ? epochMs : null;
+  }
+  paintRangeOverlay(firstXArg, secondXArg) {
+    if (!this.rangeOverlay) return;
+    const left = Math.min(firstXArg, secondXArg);
+    const width = Math.abs(secondXArg - firstXArg);
+    this.rangeOverlay.style.display = "block";
+    this.rangeOverlay.style.left = `${left}px`;
+    this.rangeOverlay.style.width = `${Math.max(width, 1)}px`;
+  }
+  finishRangeDrag(pointerIdArg) {
+    this.rangeDrag = null;
+    window.removeEventListener("keydown", this.rangeKeydownHandler);
+    try {
+      this.chartContainer?.releasePointerCapture(pointerIdArg);
+    } catch {
+    }
+  }
+  setupRangeSelection() {
+    if (!this.chartContainer) return;
+    this.rangeOverlay = this.chartContainer.querySelector(".rangeSelectionOverlay");
+    this.chart?.timeScale().subscribeVisibleTimeRangeChange(this.rangeVisibleTimeChangeHandler);
+    this.chartContainer.addEventListener("pointerdown", this.rangePointerDownHandler);
+    this.chartContainer.addEventListener("pointermove", this.rangePointerMoveHandler);
+    this.chartContainer.addEventListener("pointerup", this.rangePointerUpHandler);
+    this.chartContainer.addEventListener("pointercancel", this.rangePointerCancelHandler);
+    this.chartContainer.addEventListener("lostpointercapture", this.rangePointerCancelHandler);
+    this.rangeResizeObserver = new ResizeObserver(() => this.syncRangeOverlay());
+    this.rangeResizeObserver.observe(this.chartContainer);
+    this.syncRangeOverlay();
+  }
+  teardownRangeSelection() {
+    if (!this.chartContainer) return;
+    this.chart?.timeScale().unsubscribeVisibleTimeRangeChange(this.rangeVisibleTimeChangeHandler);
+    this.chartContainer.removeEventListener("pointerdown", this.rangePointerDownHandler);
+    this.chartContainer.removeEventListener("pointermove", this.rangePointerMoveHandler);
+    this.chartContainer.removeEventListener("pointerup", this.rangePointerUpHandler);
+    this.chartContainer.removeEventListener("pointercancel", this.rangePointerCancelHandler);
+    this.chartContainer.removeEventListener("lostpointercapture", this.rangePointerCancelHandler);
+    window.removeEventListener("keydown", this.rangeKeydownHandler);
+    if (this.rangeDrag) {
+      try {
+        this.chartContainer.releasePointerCapture(this.rangeDrag.pointerId);
+      } catch {
+      }
+    }
+    this.rangeDrag = null;
+  }
+  syncRangeOverlay() {
+    if (!this.rangeOverlay || !this.chart || !this.rangeSelectionEnabled || !this.selectedRange) {
+      if (this.rangeOverlay) this.rangeOverlay.style.display = "none";
+      return;
+    }
+    const { from: from3, to } = this.selectedRange;
+    if (!Number.isSafeInteger(from3) || !Number.isSafeInteger(to) || from3 < 0 || to <= from3) {
+      this.rangeOverlay.style.display = "none";
+      return;
+    }
+    const fromCoordinate = this.chart.timeScale().timeToCoordinate(
+      Math.floor(from3 / 1e3)
+    );
+    const toCoordinate = this.chart.timeScale().timeToCoordinate(
+      Math.floor(to / 1e3)
+    );
+    if (fromCoordinate === null || toCoordinate === null) {
+      this.rangeOverlay.style.display = "none";
+      return;
+    }
+    this.paintRangeOverlay(fromCoordinate, toCoordinate);
+  }
   convertDataToLC(data) {
     const pointsByTime = /* @__PURE__ */ new Map();
     for (const point4 of data) {
@@ -161658,6 +161816,7 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
       this.internalChartData = canonicalSeries;
       this.recreateSeries(canonicalSeries);
       this.setupTooltip();
+      this.setupRangeSelection();
       this.syncAutoScroll();
     } catch (error) {
       console.error("Failed to initialize chart:", error);
@@ -161689,6 +161848,9 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
     if (this.chart && autoScrollConfigurationChanged) {
       this.syncAutoScroll();
     }
+    if (changedProperties.has("selectedRange") || changedProperties.has("rangeSelectionEnabled")) {
+      this.syncRangeOverlay();
+    }
     if (changedProperties.has("chartLines") && this.chart) {
       this.refreshPriceLines();
     }
@@ -161893,6 +162055,8 @@ _autoScrollInterval = new WeakMap();
 _legendStats = new WeakMap();
 _hideLegend = new WeakMap();
 _chartLines = new WeakMap();
+_rangeSelectionEnabled = new WeakMap();
+_selectedRange = new WeakMap();
 __decorateElement(_init57, 4, "chart", _chart_dec, _DeesChartArea, _chart);
 __decorateElement(_init57, 4, "seriesStats", _seriesStats_dec, _DeesChartArea, _seriesStats);
 __decorateElement(_init57, 4, "isFullPage", _isFullPage_dec, _DeesChartArea, _isFullPage);
@@ -161907,6 +162071,8 @@ __decorateElement(_init57, 4, "autoScrollInterval", _autoScrollInterval_dec, _De
 __decorateElement(_init57, 4, "legendStats", _legendStats_dec, _DeesChartArea, _legendStats);
 __decorateElement(_init57, 4, "hideLegend", _hideLegend_dec, _DeesChartArea, _hideLegend);
 __decorateElement(_init57, 4, "chartLines", _chartLines_dec, _DeesChartArea, _chartLines);
+__decorateElement(_init57, 4, "rangeSelectionEnabled", _rangeSelectionEnabled_dec, _DeesChartArea, _rangeSelectionEnabled);
+__decorateElement(_init57, 4, "selectedRange", _selectedRange_dec, _DeesChartArea, _selectedRange);
 _DeesChartArea = __decorateElement(_init57, 0, "DeesChartArea", _DeesChartArea_decorators, _DeesChartArea);
 __name(_DeesChartArea, "DeesChartArea");
 __publicField(_DeesChartArea, "demo", demoFunc37);
@@ -198221,7 +198387,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "3.98.1",
+  version: "3.99.1",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };
 

package/dist_ts_web/00_commitinfo_data.js

@@ -3,7 +3,7 @@
  */
 export const commitinfo = {
     name: '@design.estate/dees-catalog',
-    version: '3.98.1',
+    version: '3.99.1',
     description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 };
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUsNkJBQTZCO0lBQ25DLE9BQU8sRUFBRSxRQUFRO0lBQ2pCLFdBQVcsRUFBRSxzSkFBc0o7Q0FDcEssQ0FBQSJ9

package/dist_ts_web/elements/00group-chart/dees-chart-area/component.d.ts

@@ -13,6 +13,10 @@ export type ChartSeriesConfig = {
 export type TChartLegendStat = 'latest' | 'min' | 'max' | 'avg';
 export type TChartPriceLine = 'avg' | 'max';
 export declare const CHART_LEGEND_STATS: TChartLegendStat[];
+export interface IChartSelectedRange {
+    from: number;
+    to: number;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'dees-chart-area': DeesChartArea;
@@ -53,6 +57,8 @@ export declare class DeesChartArea extends DeesElement {
      * keeps its existing rule of only appearing when max exceeds avg by >10%.
      */
     accessor chartLines: TChartPriceLine[];
+    accessor rangeSelectionEnabled: boolean;
+    accessor selectedRange: IChartSelectedRange | null;
     private internalChartData;
     private autoScrollTimer;
     private lcBundle;
@@ -63,10 +69,26 @@ export declare class DeesChartArea extends DeesElement {
     private pendingRealtimePrune;
     private crosshairMoveHandler;
     private chartContainer;
+    private rangeOverlay;
+    private rangeResizeObserver;
+    private rangeDrag;
+    private readonly rangePointerDownHandler;
+    private readonly rangePointerMoveHandler;
+    private readonly rangePointerUpHandler;
+    private readonly rangePointerCancelHandler;
+    private readonly rangeKeydownHandler;
+    private readonly rangeVisibleTimeChangeHandler;
     private readonly chartMouseLeaveHandler;
     constructor();
     static styles: import("@design.estate/dees-element").CSSResult[];
     render(): TemplateResult;
+    private getRangePointerX;
+    private coordinateToEpochMs;
+    private paintRangeOverlay;
+    private finishRangeDrag;
+    private setupRangeSelection;
+    private teardownRangeSelection;
+    private syncRangeOverlay;
     private convertDataToLC;
     private getSeriesName;
     private getSeriesKey;