myio-js-library 0.1.21 → 0.1.22

package/README.md

@@ -945,6 +945,241 @@ The component includes premium MyIO styling with:
 - Responsive design for mobile and desktop
 - Portuguese month names and day abbreviations
 
+### Premium Date Range Input Component
+
+#### `createInputDateRangePickerInsideDIV(params: CreateInputDateRangePickerInsideDIVParams): Promise<DateRangeInputController>`
+
+Creates a complete, beautifully styled date range input inside a target DIV container, combining the functionality of `createDateRangePicker` with premium MyIO styling. This component automatically creates the HTML structure, injects styling, and provides a clean API for ThingsBoard widgets and other applications.
+
+**Parameters:**
+- `params: CreateInputDateRangePickerInsideDIVParams` - Configuration object:
+  - `containerId: string` - The DIV id where the input will be created (required)
+  - `inputId: string` - The id to set on the created input (required)
+  - `label?: string` - Optional label text (default: "Período de Datas")
+  - `placeholder?: string` - Input placeholder (default: "Clique para selecionar período")
+  - `pickerOptions?: CreateDateRangePickerOptions` - Pass-through options for createDateRangePicker
+  - `classNames?: object` - Custom CSS classes for wrapper, label, input, and helper
+  - `injectStyles?: boolean` - Inject premium MyIO styling (default: true)
+  - `showHelper?: boolean` - Show helper text with format info (default: true)
+
+**Returns:** Promise resolving to `DateRangeInputController` object with:
+- `input: HTMLInputElement` - The created input element
+- `container: HTMLElement` - The target container element
+- `wrapper: HTMLElement` - The wrapper element created by this component
+- `picker: DateRangeControl` - The date range picker instance
+- `getDisplayValue(): string` - Get current display value from input
+- `getDates(): DateRangeResult` - Get current date range data
+- `setDates(startISO: string, endISO: string): void` - Set date range programmatically
+- `setHelperText(text: string, type?: 'default' | 'success' | 'error'): void` - Update helper text
+- `destroy(): void` - Clean up and remove all created elements
+
+**Key Features:**
+- **Automatic HTML Creation**: Creates complete styled input structure inside target DIV
+- **Premium MyIO Styling**: Beautiful styling matching demos/energy.html with purple brand colors
+- **Container-Based**: Works with any DIV container, perfect for ThingsBoard widgets
+- **Accessibility Built-in**: ARIA labels, keyboard navigation, screen reader support
+- **Responsive Design**: Mobile-friendly with proper touch targets
+- **Error Handling**: Robust validation and graceful error recovery
+- **Memory Management**: Proper cleanup with destroy() method
+
+**Usage Example:**
+```javascript
+import { createInputDateRangePickerInsideDIV } from 'myio-js-library';
+
+const controller = await createInputDateRangePickerInsideDIV({
+  containerId: 'date-picker-container',
+  inputId: 'energy-date-range',
+  label: 'Período de Análise',
+  pickerOptions: {
+    presetStart: '2025-09-01',
+    presetEnd: '2025-09-25',
+    onApply: (result) => {
+      console.log('Date range selected:', result);
+      // result.startISO: "2025-09-01T00:00:00-03:00"
+      // result.endISO: "2025-09-25T23:59:59-03:00"
+      loadEnergyData(result.startISO, result.endISO);
+    }
+  }
+});
+
+// Get current selection
+const dates = controller.getDates();
+console.log('Current range:', dates.startISO, 'to', dates.endISO);
+
+// Update helper text
+controller.setHelperText('Período válido selecionado', 'success');
+
+// Clean up when done
+controller.destroy();
+```
+
+**ThingsBoard Widget Integration:**
+```html
+<script src="https://unpkg.com/myio-js-library@latest/dist/myio-js-library.umd.min.js"></script>
+<script>
+  const { createInputDateRangePickerInsideDIV } = MyIOLibrary;
+  
+  // In your widget's onInit function
+  self.onInit = async function() {
+    try {
+      // Create date range picker in existing container
+      self.dateRangePicker = await createInputDateRangePickerInsideDIV({
+        containerId: 'widget-date-container',
+        inputId: 'energy-widget-dates',
+        label: 'Período de Datas',
+        placeholder: 'Selecione o período de análise',
+        pickerOptions: {
+          maxRangeDays: 31,
+          onApply: (result) => {
+            // Update widget state and reload data
+            updateWidgetData(result.startISO, result.endISO);
+          }
+        }
+      });
+      
+      console.log('[ENERGY] Date range picker initialized successfully');
+    } catch (error) {
+      console.error('[ENERGY] Failed to initialize date picker:', error);
+      // Fallback to legacy implementation
+      initLegacyDatePicker();
+    }
+  };
+
+  // Clean up on widget destroy
+  self.onDestroy = function() {
+    if (self.dateRangePicker) {
+      self.dateRangePicker.destroy();
+    }
+  };
+</script>
+```
+
+**Premium Styling Features:**
+- **MyIO Brand Colors**: Purple theme (#4A148C) with hover effects
+- **Responsive Layout**: Adapts to mobile and desktop with proper spacing
+- **Accessibility**: High contrast mode support, reduced motion support
+- **Visual Feedback**: Hover states, focus indicators, success/error states
+- **Typography**: Roboto font family with proper line heights
+- **Shadow Effects**: Subtle shadows and smooth transitions
+
+**Migration from Basic Implementation:**
+```javascript
+// OLD: Manual HTML + basic styling
+var $inputStart = $('input[name="startDatetimes"]');
+MyIOLibrary.createDateRangePicker($inputStart[0], options);
+
+// NEW: Automatic creation + premium styling
+const controller = await MyIOLibrary.createInputDateRangePickerInsideDIV({
+  containerId: 'date-container',
+  inputId: 'startDatetimes',
+  label: 'Período de Datas',
+  pickerOptions: options
+});
+```
+
+### Premium Modal Components
+
+The library includes four premium modal components for ThingsBoard dashboards that provide comprehensive device analytics and reporting capabilities.
+
+#### `openDashboardPopupReport(params: OpenDeviceReportParams): ModalHandle`
+
+Opens a device-specific daily consumption report modal with built-in date range picker, sortable table, and CSV export functionality.
+
+**Parameters:**
+- `ingestionId: string` - Data ingestion identifier (required)
+- `deviceId?: string` - Optional device ID for additional metadata
+- `identifier?: string` - Device identifier/code (e.g., "ENTRADA-001", "CHILLER-A")
+- `label?: string` - Human-readable label/name (e.g., "Outback", "Shopping Center Norte")
+- `ui?: object` - UI configuration (theme, width)
+- `api: object` - API configuration:
+  - `clientId?: string` - Client ID for data API
+  - `clientSecret?: string` - Client secret for data API
+  - `dataApiBaseUrl?: string` - Data API base URL
+  - `ingestionToken?: string` - Token for data ingestion access
+
+**Returns:** `ModalHandle` object with:
+- `close(): void` - Close the modal
+- `on(event: 'close'|'loaded'|'error', handler: Function): void` - Event listeners
+
+**Key Features:**
+- **Built-in Date Range Picker**: No need to specify dates in parameters
+- **Automatic Data Loading**: Fetches daily consumption data for selected period
+- **Sortable Table**: Click column headers to sort by date or consumption
+- **CSV Export**: Download report data with proper Brazilian formatting
+- **Responsive Design**: Works on desktop and mobile devices
+- **Error Handling**: Graceful error display and recovery
+
+**Usage Example:**
+```javascript
+import { openDashboardPopupReport } from 'myio-js-library';
+
+const modal = openDashboardPopupReport({
+  ingestionId: 'abc123-ingestion-id',
+  deviceId: 'device-uuid',
+  identifier: 'ENTRADA-001',
+  label: 'Outback Shopping',
+  api: {
+    clientId: 'your-client-id',
+    clientSecret: 'your-client-secret',
+    dataApiBaseUrl: 'https://api.data.apps.myio-bas.com',
+    ingestionToken: 'your-ingestion-token'
+  }
+});
+
+modal.on('loaded', (data) => {
+  console.log('Report loaded:', data.count, 'days');
+});
+
+modal.on('close', () => {
+  console.log('Modal closed');
+});
+```
+
+**UMD Usage (ThingsBoard widgets):**
+```html
+<script src="https://unpkg.com/myio-js-library@latest/dist/myio-js-library.umd.min.js"></script>
+<script>
+  const { openDashboardPopupReport } = MyIOLibrary;
+  
+  const modal = openDashboardPopupReport({
+    ingestionId: 'demo-ingestion-123',
+    deviceId: 'demo-device-123',
+    identifier: 'ENTRADA-001',
+    label: 'Outback',
+    api: { 
+      clientId: 'demo-client',
+      clientSecret: 'demo-secret',
+      dataApiBaseUrl: 'https://api.data.apps.myio-bas.com',
+      ingestionToken: 'demo-ingestion-token'
+    }
+  });
+  
+  modal.on('loaded', (data) => {
+    console.log('Device report loaded with', data.count, 'days of data');
+  });
+</script>
+```
+
+**Migration from Legacy API:**
+```javascript
+// OLD API (deprecated)
+MyIOLibrary.openDashboardPopupReport({
+  ingestionId: 'demo-ingestion-123',
+  deviceLabel: 'Entrada Subestação',    // ❌ Deprecated
+  storeLabel: 'Outback',                // ❌ Deprecated
+  date: { start: '2025-09-01', end: '2025-09-25' }, // ❌ Deprecated
+  api: { tbJwtToken: 'jwt-token' }      // ❌ Deprecated
+});
+
+// NEW API (recommended)
+MyIOLibrary.openDashboardPopupReport({
+  ingestionId: 'demo-ingestion-123',
+  identifier: 'ENTRADA-001',           // ✅ Clear device identifier
+  label: 'Outback',                    // ✅ Clear human-readable name
+  api: { ingestionToken: 'ingestion-token' } // ✅ Clear token purpose
+});
+```
+
 ### MYIO Components - Drag-to-Footer Dock Implementation
 
 The library includes three main interactive components for building comparative selection interfaces:

package/dist/index.cjs

@@ -582,6 +582,7 @@ __export(index_exports, {
   classifyWaterLabel: () => classifyWaterLabel,
   classifyWaterLabels: () => classifyWaterLabels,
   createDateRangePicker: () => createDateRangePicker2,
+  createInputDateRangePickerInsideDIV: () => createInputDateRangePickerInsideDIV,
   decodePayload: () => decodePayload,
   decodePayloadBase64Xor: () => decodePayloadBase64Xor,
   detectDeviceType: () => detectDeviceType,
@@ -5414,7 +5415,6 @@ function createDateRangePicker($2, input, opts) {
   helpText.className = "myio-text-muted";
   helpText.style.fontSize = "12px";
   helpText.style.marginTop = "4px";
-  helpText.textContent = "Formato: DD/MM/YY HH:mm at\xE9 DD/MM/YY HH:mm";
   input.parentNode?.appendChild(helpText);
   const moment = window.moment;
   const startDate = opts.presetStart ? moment(opts.presetStart).startOf("day") : moment().startOf("month");
@@ -5493,6 +5493,25 @@ var DateRangePickerJQ = {
 };
 
 // src/components/premium-modals/report-device/DeviceReportModal.ts
+var createDefaultEnergyFetcher = (params) => {
+  return async ({ baseUrl, ingestionId, startISO, endISO }) => {
+    const url = `${baseUrl}/api/v1/telemetry/devices/${ingestionId}/energy?startTime=${encodeURIComponent(startISO)}&endTime=${encodeURIComponent(endISO)}&granularity=1d&page=1&pageSize=1000&deep=0`;
+    const token = params.api.ingestionToken;
+    if (!token) {
+      throw new Error("ingestionToken is required for Data/Ingestion API calls");
+    }
+    const response = await fetch(url, {
+      headers: {
+        "Authorization": `Bearer ${token}`,
+        "Content-Type": "application/json"
+      }
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+    return response.json();
+  };
+};
 var DeviceReportModal = class {
   constructor(params) {
     this.params = params;
@@ -5501,16 +5520,18 @@ var DeviceReportModal = class {
       clientSecret: params.api.clientSecret,
       base: params.api.dataApiBaseUrl
     });
+    this.energyFetcher = params.fetcher || createDefaultEnergyFetcher(params);
   }
   modal;
   authClient;
+  energyFetcher;
   data = [];
   isLoading = false;
   eventHandlers = {};
   dateRangePicker = null;
   show() {
     this.modal = createModal({
-      title: `Relat\xF3rio - ${this.params.deviceLabel || "Dispositivo"}`,
+      title: `Relat\xF3rio - ${this.params.identifier || "SEM IDENTIFICADOR"} - ${this.params.label || "SEM ETIQUETA"}`,
       width: "80vw",
       height: "90vh",
       theme: this.params.ui?.theme || "light"
@@ -5570,8 +5591,8 @@ var DeviceReportModal = class {
     exportBtn?.addEventListener("click", () => this.exportCSV());
     try {
       this.dateRangePicker = await attach(dateRangeInput, {
-        presetStart: this.params.date?.start || this.getDefaultStartDate(),
-        presetEnd: this.params.date?.end || this.getDefaultEndDate(),
+        presetStart: this.getDefaultStartDate(),
+        presetEnd: this.getDefaultEndDate(),
         maxRangeDays: 31,
         parentEl: this.modal.element,
         onApply: ({ startISO, endISO }) => {
@@ -5605,8 +5626,13 @@ var DeviceReportModal = class {
       const startDate = startISO.split("T")[0];
       const endDate = endISO.split("T")[0];
       const dateRange = rangeDaysInclusive(startDate, endDate);
-      const mockData = this.generateMockData(dateRange);
-      this.data = mockData;
+      const apiResponse = await this.energyFetcher({
+        baseUrl: this.params.api.dataApiBaseUrl || "https://api.data.apps.myio-bas.com",
+        ingestionId: this.params.ingestionId,
+        startISO,
+        endISO
+      });
+      this.data = this.processApiResponse(apiResponse, dateRange);
       this.renderTable();
       exportBtn.disabled = false;
       this.emit("loaded", {
@@ -5624,6 +5650,28 @@ var DeviceReportModal = class {
       spinner.style.display = "none";
     }
   }
+  processApiResponse(apiResponse, dateRange) {
+    const dataArray = Array.isArray(apiResponse) ? apiResponse : apiResponse.data || [];
+    if (!Array.isArray(dataArray) || dataArray.length === 0) {
+      console.warn("[DeviceReportModal] API returned empty or invalid response, zero-filling date range");
+      return dateRange.map((date) => ({ date, consumption: 0 }));
+    }
+    const deviceData = dataArray[0];
+    const consumption = deviceData.consumption || [];
+    const dailyMap = {};
+    consumption.forEach((item) => {
+      if (item.timestamp && item.value != null) {
+        const date = item.timestamp.slice(0, 10);
+        const value = Number(item.value);
+        if (!dailyMap[date]) dailyMap[date] = 0;
+        dailyMap[date] += value;
+      }
+    });
+    return dateRange.map((date) => ({
+      date,
+      consumption: dailyMap[date] || 0
+    }));
+  }
   generateMockData(dateRange) {
     return dateRange.map((date) => ({
       date,
@@ -5698,14 +5746,14 @@ var DeviceReportModal = class {
     const now = /* @__PURE__ */ new Date();
     const timestamp = now.toLocaleDateString("pt-BR") + " - " + now.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" });
     const csvData = [
-      ["Dispositivo/Loja", this.params.deviceLabel || "N/A", this.params.storeLabel || ""],
+      ["Dispositivo/Loja", this.params.identifier || "N/A", this.params.label || ""],
       ["DATA EMISS\xC3O", timestamp, ""],
       ["Total", fmtPt(total), ""],
       ["Data", "Consumo", ""],
       ...this.data.map((row) => [this.formatDate(row.date), fmtPt(row.consumption)])
     ];
     const csvContent = toCsv(csvData);
-    this.downloadCSV(csvContent, `relatorio-${this.params.deviceLabel || "dispositivo"}-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.csv`);
+    this.downloadCSV(csvContent, `relatorio-${this.params.identifier || "dispositivo"}-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.csv`);
   }
   downloadCSV(content, filename) {
     const blob = new Blob([content], { type: "text/csv;charset=utf-8;" });
@@ -6667,8 +6715,8 @@ var AllReportModal = class {
     });
     try {
       this.dateRangePicker = await attach(dateRangeInput, {
-        presetStart: this.params.date?.start || this.getDefaultStartDate(),
-        presetEnd: this.params.date?.end || this.getDefaultEndDate(),
+        presetStart: this.getDefaultStartDate(),
+        presetEnd: this.getDefaultEndDate(),
         maxRangeDays: 31,
         parentEl: this.modal.element,
         onApply: ({ startISO, endISO }) => {
@@ -7123,6 +7171,268 @@ async function createDateRangePicker2(input, options = {}) {
   };
   return await DateRangePickerJQ.attach(input, defaultOptions);
 }
+
+// src/components/createInputDateRangePickerInsideDIV.ts
+var PREMIUM_STYLES = `
+  .myio-daterange-wrapper {
+    font-family: 'Roboto', Arial, sans-serif;
+    background: #f9f9f9;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    transition: all 0.2s ease;
+  }
+  
+  .myio-daterange-wrapper:hover {
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+  }
+  
+  .myio-daterange-label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 500;
+    color: #333;
+    font-size: 14px;
+    line-height: 1.4;
+  }
+  
+  .myio-daterange-input {
+    width: 100%;
+    max-width: 300px;
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background: white;
+    font-size: 14px;
+    color: #333;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-family: inherit;
+    line-height: 1.4;
+  }
+  
+  .myio-daterange-input:hover {
+    border-color: #4A148C;
+    box-shadow: 0 0 0 2px rgba(74, 20, 140, 0.1);
+  }
+  
+  .myio-daterange-input:focus {
+    outline: none;
+    border-color: #4A148C;
+    box-shadow: 0 0 0 3px rgba(74, 20, 140, 0.2);
+  }
+  
+  .myio-daterange-input::placeholder {
+    color: #999;
+    opacity: 1;
+  }
+  
+  .myio-daterange-helper {
+    font-size: 12px;
+    color: #666;
+    margin-top: 4px;
+    line-height: 1.3;
+    transition: color 0.2s ease;
+  }
+  
+  .myio-daterange-helper.success {
+    color: #28a745;
+    font-weight: 500;
+  }
+  
+  .myio-daterange-helper.error {
+    color: #dc3545;
+    font-weight: 500;
+  }
+  
+  /* Responsive design */
+  @media (max-width: 768px) {
+    .myio-daterange-wrapper {
+      padding: 16px;
+      margin-bottom: 16px;
+    }
+    
+    .myio-daterange-input {
+      max-width: 100%;
+      font-size: 16px; /* Prevents zoom on iOS */
+    }
+  }
+  
+  /* High contrast mode support */
+  @media (prefers-contrast: high) {
+    .myio-daterange-wrapper {
+      border: 2px solid #000;
+    }
+    
+    .myio-daterange-input {
+      border: 2px solid #000;
+    }
+  }
+  
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    .myio-daterange-wrapper,
+    .myio-daterange-input,
+    .myio-daterange-helper {
+      transition: none;
+    }
+  }
+`;
+function injectPremiumStyles() {
+  const styleId = "myio-daterange-premium-styles";
+  if (document.getElementById(styleId)) {
+    return;
+  }
+  const styleEl = document.createElement("style");
+  styleEl.id = styleId;
+  styleEl.textContent = PREMIUM_STYLES;
+  document.head.appendChild(styleEl);
+  console.log("[MyIO] Premium date range styles injected");
+}
+function validateId(id, context) {
+  if (!id || typeof id !== "string") {
+    throw new Error(`[createInputDateRangePickerInsideDIV] ${context} must be a non-empty string`);
+  }
+  if (!/^[a-zA-Z][a-zA-Z0-9_-]*$/.test(id)) {
+    throw new Error(`[createInputDateRangePickerInsideDIV] ${context} '${id}' is not a valid HTML ID`);
+  }
+}
+async function createInputDateRangePickerInsideDIV(params) {
+  const {
+    containerId,
+    inputId,
+    label = "Per\xEDodo de Datas",
+    placeholder = "Clique para selecionar per\xEDodo",
+    pickerOptions = {},
+    classNames = {},
+    injectStyles = true,
+    showHelper = true
+  } = params;
+  validateId(containerId, "containerId");
+  validateId(inputId, "inputId");
+  const container = document.getElementById(containerId);
+  if (!container) {
+    throw new Error(`[createInputDateRangePickerInsideDIV] Container '#${containerId}' not found`);
+  }
+  if (injectStyles) {
+    injectPremiumStyles();
+  }
+  let inputEl = document.getElementById(inputId);
+  if (inputEl && inputEl.tagName.toLowerCase() !== "input") {
+    throw new Error(`[createInputDateRangePickerInsideDIV] Element '#${inputId}' exists but is not an input element`);
+  }
+  const wrapper = document.createElement("div");
+  wrapper.className = classNames.wrapper || "myio-daterange-wrapper";
+  wrapper.setAttribute("data-myio-component", "daterange-input");
+  wrapper.setAttribute("data-version", "1.0.0");
+  let labelEl = null;
+  if (label) {
+    labelEl = document.createElement("label");
+    labelEl.className = classNames.label || "myio-daterange-label";
+    labelEl.textContent = label;
+    labelEl.setAttribute("for", inputId);
+    wrapper.appendChild(labelEl);
+  }
+  if (!inputEl) {
+    inputEl = document.createElement("input");
+    inputEl.type = "text";
+    inputEl.id = inputId;
+    inputEl.name = inputId;
+  }
+  inputEl.className = classNames.input || "myio-daterange-input";
+  inputEl.readOnly = true;
+  inputEl.placeholder = placeholder;
+  inputEl.autocomplete = "off";
+  inputEl.setAttribute("aria-label", label || "Date range selector");
+  if (showHelper) {
+    inputEl.setAttribute("aria-describedby", `${inputId}-helper`);
+  }
+  let helperEl = null;
+  if (showHelper) {
+    helperEl = document.createElement("div");
+    helperEl.id = `${inputId}-helper`;
+    helperEl.className = classNames.helper || "myio-daterange-helper";
+    helperEl.setAttribute("aria-live", "polite");
+  }
+  wrapper.appendChild(inputEl);
+  if (helperEl) {
+    wrapper.appendChild(helperEl);
+  }
+  const existingWrapper = container.querySelector('[data-myio-component="daterange-input"]');
+  if (existingWrapper) {
+    console.warn(`[createInputDateRangePickerInsideDIV] Replacing existing daterange input in container '#${containerId}'`);
+    existingWrapper.remove();
+  }
+  container.appendChild(wrapper);
+  const enhancedOptions = {
+    maxRangeDays: 31,
+    onApply: (result) => {
+      if (helperEl) {
+        const startDate = new Date(result.startISO);
+        const endDate = new Date(result.endISO);
+        const days = Math.ceil((endDate.getTime() - startDate.getTime()) / (1e3 * 60 * 60 * 24)) + 1;
+        helperEl.textContent = `Per\xEDodo selecionado: ${days} dia${days !== 1 ? "s" : ""}`;
+        helperEl.className = (classNames.helper || "myio-daterange-helper") + " success";
+        setTimeout(() => {
+          if (helperEl) {
+            helperEl.className = classNames.helper || "myio-daterange-helper";
+          }
+        }, 3e3);
+      }
+      if (pickerOptions.onApply) {
+        pickerOptions.onApply(result);
+      }
+    },
+    ...pickerOptions
+  };
+  let picker;
+  try {
+    picker = await createDateRangePicker2(inputEl, enhancedOptions);
+    console.log(`[createInputDateRangePickerInsideDIV] Successfully initialized for input '#${inputId}'`);
+  } catch (error) {
+    wrapper.remove();
+    throw new Error(`[createInputDateRangePickerInsideDIV] Failed to initialize date picker: ${error.message}`);
+  }
+  const controller = {
+    input: inputEl,
+    container,
+    wrapper,
+    picker,
+    getDisplayValue: () => inputEl.value,
+    getDates: () => picker.getDates(),
+    setDates: (startISO, endISO) => {
+      try {
+        picker.setDates(startISO, endISO);
+      } catch (error) {
+        console.error(`[createInputDateRangePickerInsideDIV] Error setting dates:`, error);
+        throw error;
+      }
+    },
+    setHelperText: (text, type = "default") => {
+      if (helperEl) {
+        helperEl.textContent = text;
+        const baseClass = classNames.helper || "myio-daterange-helper";
+        helperEl.className = type === "default" ? baseClass : `${baseClass} ${type}`;
+      }
+    },
+    destroy: () => {
+      try {
+        picker.destroy();
+        console.log(`[createInputDateRangePickerInsideDIV] Date picker destroyed for input '#${inputId}'`);
+      } catch (error) {
+        console.warn(`[createInputDateRangePickerInsideDIV] Error destroying picker:`, error);
+      }
+      try {
+        wrapper.remove();
+        console.log(`[createInputDateRangePickerInsideDIV] Wrapper removed for input '#${inputId}'`);
+      } catch (error) {
+        console.warn(`[createInputDateRangePickerInsideDIV] Error removing wrapper:`, error);
+      }
+    }
+  };
+  return controller;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   MyIOChartModal,
@@ -7139,6 +7449,7 @@ async function createDateRangePicker2(input, options = {}) {
   classifyWaterLabel,
   classifyWaterLabels,
   createDateRangePicker,
+  createInputDateRangePickerInsideDIV,
   decodePayload,
   decodePayloadBase64Xor,
   detectDeviceType,