web-mojo 2.2.3 → 2.2.5

package/dist/chunks/{DataView-CsYXM9vF.js.map → DataView-BYNjIf--.js.map}

@@ -1 +1 @@
-{"version":3,"file":"DataView-CsYXM9vF.js","sources":["../../src/core/views/data/DataView.js"],"sourcesContent":["/**\n * DataView - Key/Value data display component for MOJO framework\n * Extends View to display object data in a responsive grid layout with intelligent formatting support\n *\n * Features:\n * - Automatic field generation from data with intelligent type inference\n * - Smart DataFormatter pipe chains (e.g., \"date('MMM D, YYYY')|capitalize\")\n * - Contextual formatting based on field names and values\n * - Support for complex pipe chains like \"truncate(100)|capitalize|badge\"\n * - Nested DataView support with type=\"dataview\" for complex objects\n * - Custom format overrides with fluent API\n * - No format collision: custom field.format completely overrides DataView formatting\n *\n * Format Behavior:\n * - No field.format: DataView applies type-based HTML formatting (badges, links, etc.)\n * - With field.format: DataFormatter handles ALL formatting, DataView only escapes HTML\n *\n * Example Usage:\n * ```javascript\n * const dataView = new DataView({\n *   data: {\n *     name: 'john doe',\n *     email: 'john@example.com',\n *     createdAt: '2024-01-15T10:30:00Z',\n *     price: 99.99,\n *     description: 'A very long description that should be truncated...',\n *     isActive: true\n *   }\n * });\n *\n * // Auto-inferred formats (DataView adds HTML styling):\n * // name: \"truncate(50)|capitalize\"\n * // email: no format → DataView creates mailto: link\n * // createdAt: \"date('MMM D, YYYY')\"\n * // price: \"currency\"\n * // description: \"truncate(200)\"\n * // isActive: no format → DataView creates badge styling\n *\n * // Custom format overrides (DataFormatter handles ALL formatting):\n * dataView\n *   .setFieldFormat('name', 'uppercase|truncate(20)')      // No DataView HTML styling\n *   .setFieldFormat('email', 'email|uppercase')           // No mailto: link\n *   .setFieldFormat('isActive', 'boolean|uppercase')      // No badge styling\n *   .setFieldFormats({\n *     description: 'truncate(50)|capitalize',\n *     createdAt: 'relative'\n *   });\n *\n * // Nested DataView for complex objects:\n * dataView.setFieldFormat('permissions', null); // Clear auto-format\n * // Then configure field: { name: 'permissions', type: 'dataview', label: 'User Permissions' }\n * ```\n */\n\nimport View from '@core/View.js';\nimport dataFormatter from '@core/utils/DataFormatter.js';\n\nclass DataView extends View {\n  constructor(options = {}) {\n    // Extract DataView-specific options\n    const {\n      data,\n      model,\n      fields,\n      columns,\n      responsive,\n      showEmptyValues,\n      emptyValueText,\n      ...viewOptions\n    } = options;\n\n    // Set default view options\n    super({\n      tagName: 'div',\n      className: 'data-view',\n      ...viewOptions\n    });\n\n    // Core properties\n    this.data = data || {};\n    this.fields = fields || [];\n    this.model = model || null;\n\n    // If a model is provided, use it as data source\n    if (this.model) {\n      this.data = this.model;\n    }\n\n    // DataView-specific configuration\n    this.dataViewOptions = {\n      columns: columns || 2,\n      responsive: responsive !== false,  // Default to true\n      showEmptyValues: showEmptyValues || false,\n      emptyValueText: emptyValueText || '—',\n      rowClass: 'row g-3',\n      itemClass: 'data-view-item',\n      labelClass: 'data-view-label fw-semibold text-muted small text-uppercase',\n      valueClass: 'data-view-value'\n    };\n  }\n\n  /**\n   * Lifecycle hook - prepare data and fields before rendering\n   */\n  async onBeforeRender() {\n\n    // Auto-generate fields from data if none provided\n    if (this.fields.length === 0 && this.getData()) {\n      this.generateFieldsFromData();\n    }\n  }\n\n  /**\n   * Override renderTemplate to generate HTML directly\n   * @returns {string} Complete HTML string\n   */\n  async renderTemplate() {\n    const items = this.buildItemsHTML();\n\n    return `\n      <div class=\"${this.dataViewOptions.rowClass}\">\n        ${items}\n      </div>\n    `;\n  }\n\n  /**\n   * Auto-generate field definitions from data object with intelligent type inference\n   */\n  generateFieldsFromData() {\n    const dataObj = this.getData();\n\n    if (dataObj && typeof dataObj === 'object') {\n      this.fields = Object.keys(dataObj).map(key => {\n        const value = dataObj[key];\n        const fieldType = this.inferFieldType(value, key);\n        const formatter = this.inferFormatter(value, key, fieldType);\n\n        return {\n          name: key,\n          label: this.formatLabel(key),\n          type: fieldType,\n          format: formatter,\n          formatter: formatter  // Alias for consistency with TableView\n        };\n      });\n    }\n  }\n\n  /**\n   * Format field name into a readable label\n   * @param {string} name - Field name\n   * @returns {string} Formatted label\n   */\n  formatLabel(name) {\n    return name\n      .replace(/([A-Z])/g, ' $1')  // Add space before capital letters\n      .replace(/[_-]/g, ' ')        // Replace underscores and hyphens with spaces\n      .replace(/\\b\\w/g, l => l.toUpperCase())  // Title case\n      .trim();\n  }\n\n  /**\n   * Infer field type from value and key with improved intelligence\n   * @param {*} value - Field value\n   * @param {string} key - Field key\n   * @returns {string} Field type\n   */\n  inferFieldType(value, key = '') {\n    if (value === null || value === undefined) return 'text';\n\n    const keyLower = key.toLowerCase();\n    const type = typeof value;\n\n    // Date/time patterns\n    if (keyLower.includes('date') || keyLower.includes('time') ||\n        keyLower.includes('created') || keyLower.includes('updated') ||\n        keyLower.includes('modified') || keyLower.includes('last_login') ||\n        keyLower.includes('expires') || keyLower.includes('last_activity')) {\n      return 'datetime';\n    }\n\n    // Email patterns\n    if (keyLower.includes('email') || keyLower.includes('mail')) {\n      return 'email';\n    }\n\n    // URL patterns\n    if (keyLower.includes('url') || keyLower.includes('link') ||\n        keyLower.includes('website') || keyLower.includes('homepage')) {\n      return 'url';\n    }\n\n    // Phone patterns\n    if (keyLower.includes('phone') || keyLower.includes('tel') ||\n        keyLower.includes('mobile') || keyLower.includes('cell')) {\n      return 'phone';\n    }\n\n    // Currency/price patterns\n    if (keyLower.includes('price') || keyLower.includes('cost') ||\n        keyLower.includes('amount') || keyLower.includes('fee') ||\n        keyLower.includes('salary') || keyLower.includes('revenue')) {\n      return 'currency';\n    }\n\n    // File size patterns\n    if (keyLower.includes('size') || keyLower.includes('bytes')) {\n      return 'filesize';\n    }\n\n    // Percentage patterns\n    if (keyLower.includes('percent') || keyLower.includes('rate') ||\n        keyLower.includes('ratio') && type === 'number') {\n      return 'percent';\n    }\n\n    // Type-based inference\n    if (type === 'boolean') return 'boolean';\n    if (type === 'number') return 'number';\n\n    if (type === 'object') {\n      if (Array.isArray(value)) return 'array';\n      if (value && value.renditions) return 'file';\n\n      // Check if object should be displayed as nested DataView\n      if (this.shouldUseDataView(value, keyLower)) {\n        return 'dataview';\n      }\n\n      return 'object';\n    }\n\n    if (type === 'string') {\n      // Pattern matching for strings\n      if (value.includes('@') && value.includes('.')) return 'email';\n      if (value.match(/^\\d{4}-\\d{2}-\\d{2}/)) return 'date';\n      if (value.match(/^https?:\\/\\//)) return 'url';\n      if (value.match(/^\\+?[\\d\\s\\-\\(\\)]+$/)) return 'phone';\n    }\n\n    return 'text';\n  }\n\n  /**\n   * Infer appropriate formatter based on type and context\n   * @param {*} value - Field value\n   * @param {string} key - Field key\n   * @param {string} fieldType - Inferred field type\n   * @returns {string|null} Formatter pipe string\n   */\n  inferFormatter(value, key, fieldType) {\n    const keyLower = key.toLowerCase();\n    const formatters = [];\n\n    switch (fieldType) {\n      case 'datetime':\n        if (keyLower.includes('time') && !keyLower.includes('date')) {\n          formatters.push('time');\n        } else if (keyLower.includes('relative') || keyLower.includes('ago') || keyLower.includes('last_')) {\n          formatters.push('relative');\n        } else if (keyLower.includes('created') || keyLower.includes('updated') || keyLower.includes('modified')) {\n          formatters.push('date(\"MMM D, YYYY\")');\n        } else {\n          formatters.push('date(\"MMMM D, YYYY\")');\n        }\n        break;\n\n      case 'date':\n        if (keyLower.includes('birth') || keyLower.includes('dob')) {\n          formatters.push('date(\"MMMM D, YYYY\")');\n        } else {\n          formatters.push('date(\"MMM D, YYYY\")');\n        }\n        break;\n\n      case 'email':\n        // Don't apply email formatter - DataView handles mailto: links automatically\n        break;\n\n      case 'url':\n        // Don't apply url formatter - DataView handles clickable links automatically\n        break;\n\n      case 'phone':\n        formatters.push('phone');\n        break;\n\n      case 'currency':\n        formatters.push('currency');\n        // Add currency symbol detection if needed\n        if (keyLower.includes('eur') || keyLower.includes('euro')) {\n          formatters[formatters.length - 1] = 'currency(\"EUR\")';\n        } else if (keyLower.includes('gbp') || keyLower.includes('pound')) {\n          formatters[formatters.length - 1] = 'currency(\"GBP\")';\n        }\n        break;\n\n      case 'filesize':\n        formatters.push('filesize');\n        break;\n\n      case 'percent':\n        formatters.push('percent');\n        break;\n\n      case 'number':\n        // Smart number formatting with pipe chains\n        if (typeof value === 'number') {\n          if (keyLower.includes('count') || keyLower.includes('total') || keyLower.includes('followers') || keyLower.includes('views')) {\n            if (value >= 1000) {\n              formatters.push('compact');\n            } else {\n              formatters.push('number');\n            }\n          } else if (keyLower.includes('score') || keyLower.includes('rating')) {\n            formatters.push('number');\n            // Add decimal places for scores\n            if (value % 1 !== 0) {\n              formatters[formatters.length - 1] = 'number(1)';\n            }\n          } else if (keyLower.includes('version') || keyLower.includes('id')) {\n            // Don't format IDs and versions\n            return null;\n          } else {\n            formatters.push('number');\n          }\n        }\n        break;\n\n      case 'boolean':\n        // Don't apply boolean formatter - DataView handles badge styling automatically\n        break;\n\n      case 'text':\n        // Smart text formatting with contextual pipe chains\n        if (typeof value === 'string') {\n          // Handle different text contexts\n          if (keyLower.includes('description') || keyLower.includes('content') || keyLower.includes('body')) {\n            if (value.length > 200) {\n              formatters.push('truncate(200)');\n            } else if (value.length > 100) {\n              formatters.push('truncate(100)');\n            }\n          } else if (keyLower.includes('summary') || keyLower.includes('excerpt')) {\n            if (value.length > 150) {\n              formatters.push('truncate(150)');\n            }\n          } else if (keyLower.includes('name') || keyLower.includes('title') || keyLower.includes('label')) {\n            formatters.push('capitalize');\n            if (value.length > 50) {\n              formatters.unshift('truncate(50)'); // Truncate first, then capitalize\n            }\n          } else if (keyLower.includes('slug') || keyLower.includes('handle') || keyLower.includes('username')) {\n            formatters.push('slug');\n          } else if (keyLower.includes('code') || keyLower.includes('token') || keyLower.includes('key')) {\n            // Show codes/tokens with masking if long\n            if (value.length > 20) {\n              formatters.push('mask');\n            }\n          } else {\n            // Generic text handling\n            if (value.length > 100) {\n              formatters.push('truncate(100)');\n            }\n          }\n        }\n        break;\n\n      case 'array':\n      case 'object':\n        // Don't apply json formatter - DataView handles JSON display automatically\n        break;\n\n      case 'dataview':\n        // Don't apply any formatter - nested DataView handles its own formatting\n        break;\n\n      default:\n        // Handle any missed cases with basic text formatting\n        if (typeof value === 'string' && value.length > 100) {\n          formatters.push('truncate(100)');\n        }\n        break;\n    }\n\n    return formatters.length > 0 ? formatters.join('|') : null;\n  }\n\n  /**\n   * Determine if an object should be displayed as nested DataView vs JSON\n   * @param {object} value - Object value to check\n   * @param {string} keyLower - Lowercase field key\n   * @returns {boolean} True if should use DataView\n   */\n  shouldUseDataView(value, keyLower) {\n    if (!value || typeof value !== 'object' || Array.isArray(value)) {\n      return false;\n    }\n\n    // Check for common patterns that benefit from DataView display\n    const dataViewPatterns = [\n      'permissions', 'perms', 'access', 'rights',\n      'settings', 'config', 'configuration', 'options',\n      'profile', 'info', 'details', 'data',\n      'metadata', 'meta', 'attributes', 'props',\n      'preferences', 'prefs', 'user_data',\n      'contact', 'address', 'location',\n      'stats', 'statistics', 'metrics', 'counts'\n    ];\n\n    if (window.utils && window.utils.isObject(value) && value.id) {\n        return true;\n    }\n\n    // Check if key matches common patterns\n    const matchesPattern = dataViewPatterns.some(pattern => keyLower.includes(pattern));\n\n    if (matchesPattern) {\n      // Additional checks to ensure it's suitable for DataView\n      const keys = Object.keys(value);\n\n      // Good candidates: objects with multiple simple key-value pairs\n      if (keys.length >= 2 && keys.length <= 20) {\n        const hasComplexNesting = keys.some(k =>\n          typeof value[k] === 'object' &&\n          value[k] !== null &&\n          !Array.isArray(value[k]) &&\n          Object.keys(value[k]).length > 3\n        );\n\n        // Use DataView if not too deeply nested\n        if (!hasComplexNesting) {\n          return true;\n        }\n      }\n    }\n\n    return false;\n  }\n\n  /**\n   * Get data object (handles both raw objects and Models)\n   * @returns {object} Data object\n   */\n  getData() {\n    if (this.model && this.model.attributes) {\n      return { ...this.model.attributes };\n    }\n    return this.data || {};\n  }\n\n  /**\n   * Get field value with formatting support\n   * @param {object} field - Field definition\n   * @returns {*} Field value (formatted if specified)\n   */\n  getFieldValue(field) {\n    let value;\n    let key = field.name || field.key;\n    let formatString = field.format || field.formatter;\n    if (!key) return null;\n\n    // Check if the name field contains a pipe (e.g., 'is_tor|status_text')\n    // This allows inline formatter syntax in the name field\n    if (key && key.includes('|')) {\n      const parts = key.split('|');\n      key = parts[0].trim();\n      // If no explicit formatter was set, use the one from the name\n      if (!formatString) {\n        formatString = parts.slice(1).join('|').trim();\n      }\n    }\n\n    // Get raw value from data source\n    if (this.model && typeof this.model.get === 'function') {\n      // For models, get raw value first, then apply formatting separately\n      // This ensures we don't break pipe chains by concatenating strings\n      value = this.model.get(key);\n    } else {\n      // Plain object access\n      value = this.getData()[key];\n    }\n\n    // Apply formatting using DataFormatter pipe system if specified\n    // Support both 'format' and 'formatter' for consistency with TableView\n    if (formatString) {\n      value = dataFormatter.pipe(value, formatString);\n    }\n\n    // Handle empty values\n    if (value === null || value === undefined || value === '') {\n      return this.dataViewOptions.showEmptyValues ? this.dataViewOptions.emptyValueText : null;\n    }\n\n    // Apply template if provided\n    if (field.template) {\n      const modelData = this.model ? this.model : this.data;\n      return this.renderTemplateString(field.template, modelData);\n    }\n\n    return value;\n  }\n\n  /**\n   * Render a template string with data from a model or object.\n   * Replaces {{key}} and {{nested.key}} placeholders.\n   * @param {string} templateString - The template string.\n   * @param {object} data - The data object or model.\n   * @returns {string} The rendered string.\n   */\n  renderTemplateString(templateString, data) {\n    if (!templateString || !data) {\n      return '';\n    }\n\n    // Regex to find all {{...}} placeholders\n    return templateString.replace(/\\{\\{([^}]+)\\}\\}/g, (match, key) => {\n      const trimmedKey = key.trim();\n      let value;\n\n      // Handle potential formatters in the template key\n      const parts = trimmedKey.split('|');\n      const dataKey = parts[0];\n      const formatters = parts.slice(1).join('|');\n\n      // Get value from model or plain object\n      if (this.model && typeof this.model.get === 'function') {\n        value = this.model.get(dataKey);\n      } else {\n        // Handle nested keys for plain objects\n        value = dataKey.split('.').reduce((o, i) => (o ? o[i] : undefined), data);\n      }\n\n      // Apply formatters if any\n      if (formatters) {\n        value = dataFormatter.pipe(value, formatters);\n      }\n\n      return value !== undefined && value !== null ? value : '';\n    });\n  }\n\n  /**\n   * Generate column classes based on configuration\n   * @param {object} field - Field definition\n   * @returns {string} CSS classes\n   */\n  getColumnClasses(field) {\n      let classes = this.getColumnSizeClasses(field);\n      if (field.justify == \"right\") {\n        classes += ` d-flex justify-content-end`;\n      } else if (field.justify == \"center\") {\n        classes += ` d-flex justify-content-center`;\n      }\n      return classes;\n  }\n\n  /**\n   * Generate column size classes based on configuration\n   * @param {object} field - Field definition\n   * @returns {string} CSS classes\n   */\n  getColumnSizeClasses(field) {\n    // JSON objects and nested DataViews always use full width for better display\n    if (field.type === 'array' || field.type === 'object' || field.type === 'dataview') {\n      return 'col-12';\n    }\n\n    const colSize = field.columns || field.colSize || field.cols || Math.floor(12 / this.dataViewOptions.columns);\n\n    if (this.dataViewOptions.responsive) {\n      // Responsive breakpoints: 1 column on small, configured on larger screens\n      return `col-12 col-md-${colSize}`;\n    }\n\n    return `col-${colSize}`;\n  }\n\n  /**\n   * Build HTML for all data items\n   * @returns {string} Items HTML\n   */\n  buildItemsHTML() {\n    return this.fields\n      .map(field => this.buildItemHTML(field))\n      .filter(Boolean)  // Remove empty items\n      .join('');\n  }\n\n  /**\n   * Build HTML for a single data item\n   * @param {object} field - Field definition\n   * @returns {string} Item HTML\n   */\n  buildItemHTML(field) {\n    const value = this.getFieldValue(field);\n\n    // Skip fields with no value if showEmptyValues is false\n    if (value === null && !this.dataViewOptions.showEmptyValues) {\n      return '';\n    }\n\n    const label = field.label || this.formatLabel(field.name);\n    const colClasses = this.getColumnClasses(field);\n\n    return `\n      <div class=\"${colClasses}\">\n        <div class=\"${this.dataViewOptions.itemClass} ${field.className}\" data-field=\"${field.name}\">\n          ${this.buildLabelHTML(label, field)}\n          ${this.buildValueHTML(value, field)}\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Build label HTML\n   * @param {string} label - Label text\n   * @param {object} field - Field definition\n   * @returns {string} Label HTML\n   */\n  buildLabelHTML(label, field) {\n    const labelClass = field.labelClass || this.dataViewOptions.labelClass;\n    return `<div class=\"${labelClass}\">${this.escapeHtml(label)}:</div>`;\n  }\n\n  /**\n   * Build value HTML with type-specific formatting\n   * @param {*} value - Field value\n   * @param {object} field - Field definition\n   * @returns {string} Value HTML\n   */\n  buildValueHTML(value, field) {\n    const valueClass = field.valueClass || this.dataViewOptions.valueClass;\n    const displayValue = this.formatDisplayValue(value, field);\n    return `<div class=\"${valueClass}\">${displayValue}</div>`;\n  }\n\n  /**\n   * Format value for display with enhanced type handling\n   * @param {*} value - Formatted value from DataFormatter (or raw if no format)\n   * @param {object} field - Field definition\n   * @returns {string} Formatted display value with HTML markup\n   */\n  formatDisplayValue(value, field) {\n    if (value === null || value === undefined) {\n      return this.dataViewOptions.emptyValueText;\n    }\n\n    // If a template was used, the value is already the final HTML. Return it directly.\n    if (field.template) {\n      return String(value);\n    }\n\n    // If a custom format is specified, trust the DataFormatter output.\n    // Support both 'format' and 'formatter' for consistency with TableView\n    const formatString = field.format || field.formatter;\n    if (formatString) {\n      // If a formatter is explicitly specified, render its output as HTML\n      // The DataFormatter is responsible for proper escaping when needed\n      return String(value);\n    }\n\n    // No custom format - apply DataView's default type-specific HTML formatting\n    // Get original raw value for special cases\n    const rawValue = this.getData()[field.name];\n\n    // Handle types that need special HTML presentation (only when no custom format)\n    switch (field.type) {\n      case 'boolean':\n        // Use standard boolean badges (no custom format was applied)\n        return rawValue ?\n          '<span class=\"badge bg-success\">Yes</span>' :\n          '<span class=\"badge bg-secondary\">No</span>';\n\n      case 'email':\n        // Create clickable email links (no custom format was applied)\n        const emailStr = String(value);\n        return `<a href=\"mailto:${this.escapeHtml(emailStr)}\" class=\"text-decoration-none\">${this.escapeHtml(emailStr)}</a>`;\n\n      case 'url':\n        // Create clickable URL links (no custom format was applied)\n        const urlStr = String(value);\n        return `<a href=\"${this.escapeHtml(urlStr)}\" target=\"_blank\" rel=\"noopener\" class=\"text-decoration-none\">${this.escapeHtml(urlStr)} <i class=\"bi bi-box-arrow-up-right\"></i></a>`;\n\n      case 'array':\n      case 'object':\n        // Display as JSON with special HTML formatting (no custom format was applied)\n        return this.formatAsJson(rawValue);\n\n      case 'dataview':\n        // Create nested DataView for complex objects\n        return this.formatAsDataView(rawValue, field);\n\n      case 'phone':\n        // Create tel: links for phone numbers (no custom format was applied)\n        const phoneStr = String(value);\n        const telHref = phoneStr.replace(/[^\\d\\+]/g, ''); // Clean for tel: link\n        return `<a href=\"tel:${telHref}\" class=\"text-decoration-none\">${this.escapeHtml(phoneStr)}</a>`;\n\n      default:\n        // For all other types with no custom format, just escape and return\n        return this.escapeHtml(String(value));\n    }\n  }\n\n  /**\n   * Format object/array values as styled JSON\n   * @param {*} value - Object or array value\n   * @returns {string} Formatted JSON HTML\n   */\n  formatAsJson(value) {\n    try {\n      const jsonString = JSON.stringify(value, null, 2);\n      const escapedJson = this.escapeHtml(jsonString);\n      const lines = jsonString.split('\\n').length;\n      const isLarge = lines > 10 || jsonString.length > 500;\n      const uniqueId = `json-${Math.random().toString(36).substr(2, 9)}`;\n\n      // Create collapsible JSON display for large objects\n      if (isLarge) {\n        const preview = JSON.stringify(value).substring(0, 100) + (JSON.stringify(value).length > 100 ? '...' : '');\n        const escapedPreview = this.escapeHtml(preview);\n\n        return `\n          <div class=\"json-container\">\n            <div class=\"d-flex align-items-center justify-content-between mb-1\">\n              <small class=\"text-muted\">${Array.isArray(value) ? 'Array' : 'Object'} (${lines} lines)</small>\n              <div class=\"btn-group btn-group-sm\" role=\"group\">\n                <button type=\"button\" class=\"btn btn-outline-secondary btn-sm json-toggle\" data-bs-toggle=\"collapse\" data-bs-target=\"#${uniqueId}\" aria-expanded=\"false\">\n                  <i class=\"bi bi-eye\"></i> Show\n                </button>\n                <button type=\"button\" class=\"btn btn-outline-secondary btn-sm json-copy\" data-json='${this.escapeHtml(jsonString)}' title=\"Copy JSON\">\n                  <i class=\"bi bi-clipboard\"></i>\n                </button>\n              </div>\n            </div>\n            <div class=\"json-preview bg-light p-2 rounded small border\" style=\"font-family: 'Courier New', monospace;\">\n              <code class=\"text-muted\">${escapedPreview}</code>\n            </div>\n            <div class=\"collapse mt-2\" id=\"${uniqueId}\">\n              <pre class=\"json-display p-3 rounded small mb-0\" style=\"max-height: 400px; overflow-y: auto; white-space: pre-wrap; font-family: 'Courier New', monospace;\"><code>${this.syntaxHighlightJson(escapedJson)}</code></pre>\n            </div>\n          </div>\n        `;\n      } else {\n        // Small objects - show directly with copy button\n        return `\n          <div class=\"json-container\">\n            <div class=\"d-flex align-items-center justify-content-between mb-1\">\n              <small class=\"text-muted\">${Array.isArray(value) ? 'Array' : 'Object'}</small>\n              <button type=\"button\" class=\"btn btn-outline-secondary btn-sm json-copy\" data-json='${this.escapeHtml(jsonString)}' title=\"Copy JSON\">\n                <i class=\"bi bi-clipboard\"></i>\n              </button>\n            </div>\n            <pre class=\"json-display bg-light p-2 rounded small mb-0 border\" style=\"white-space: pre-wrap; font-family: 'Courier New', monospace;\"><code>${this.syntaxHighlightJson(escapedJson)}</code></pre>\n          </div>\n        `;\n      }\n    } catch (error) {\n      // Fallback for objects that can't be stringified\n      return `<span class=\"text-muted fst-italic\">[Object: ${typeof value}] - Cannot display as JSON</span>`;\n    }\n  }\n\n  /**\n   * Apply basic syntax highlighting to JSON\n   * @param {string} json - Escaped JSON string\n   * @returns {string} JSON with basic syntax highlighting\n   */\n  syntaxHighlightJson(json) {\n    return json\n      .replace(/(\"([^\"\\\\]|\\\\.)*\")\\s*:/g, '<span style=\"color: #0969da;\">$1</span>:') // Keys (blue)\n      .replace(/:\\s*(\"([^\"\\\\]|\\\\.)*\")/g, ': <span style=\"color: #0a3069;\">$1</span>') // String values (dark blue)\n      .replace(/:\\s*(true|false)/g, ': <span style=\"color: #8250df;\">$1</span>') // Booleans (purple)\n      .replace(/:\\s*(null)/g, ': <span style=\"color: #656d76;\">$1</span>') // Null (gray)\n      .replace(/:\\s*(-?\\d+\\.?\\d*)/g, ': <span style=\"color: #0550ae;\">$1</span>'); // Numbers (blue)\n  }\n\n  /**\n   * Bind events including JSON interaction handlers\n   */\n  bindEvents() {\n    super.bindEvents();\n\n    if (!this.element) return;\n\n    // Add click handler for field interactions\n    this.element.addEventListener('click', (e) => {\n      const fieldElement = e.target.closest('[data-field]');\n      if (fieldElement) {\n        const fieldName = fieldElement.dataset.field;\n        const field = this.fields.find(f => f.name === fieldName);\n        this.emit('field:click', { field, fieldName, element: fieldElement, event: e });\n      }\n\n      // Handle JSON copy button clicks\n      if (e.target.closest('.json-copy')) {\n        e.preventDefault();\n        e.stopPropagation();\n        this.handleJsonCopy(e.target.closest('.json-copy'));\n      }\n\n      // Handle JSON toggle button clicks\n      if (e.target.closest('.json-toggle')) {\n        this.handleJsonToggle(e.target.closest('.json-toggle'));\n      }\n    });\n  }\n\n  /**\n   * Handle copying JSON to clipboard\n   * @param {HTMLElement} button - Copy button element\n   */\n  handleJsonCopy(button) {\n    const jsonData = button.getAttribute('data-json');\n    if (!jsonData) return;\n\n    try {\n      // Use modern clipboard API if available\n      if (navigator.clipboard && window.isSecureContext) {\n        navigator.clipboard.writeText(jsonData).then(() => {\n          this.showCopyFeedback(button);\n        });\n      } else {\n        // Fallback for older browsers\n        const textarea = document.createElement('textarea');\n        textarea.value = jsonData;\n        document.body.appendChild(textarea);\n        textarea.select();\n        document.execCommand('copy');\n        document.body.removeChild(textarea);\n        this.showCopyFeedback(button);\n      }\n    } catch (error) {\n      console.warn('Failed to copy JSON:', error);\n    }\n  }\n\n  /**\n   * Handle JSON toggle button state\n   * @param {HTMLElement} button - Toggle button element\n   */\n  handleJsonToggle(button) {\n    const icon = button.querySelector('i');\n    const isExpanded = button.getAttribute('aria-expanded') === 'true';\n\n    // Update button text and icon\n    setTimeout(() => {\n      if (isExpanded) {\n        icon.className = 'bi bi-eye-slash';\n        button.innerHTML = '<i class=\"bi bi-eye-slash\"></i> Hide';\n      } else {\n        icon.className = 'bi bi-eye';\n        button.innerHTML = '<i class=\"bi bi-eye\"></i> Show';\n      }\n    }, 10);\n  }\n\n  /**\n   * Show visual feedback for successful copy\n   * @param {HTMLElement} button - Copy button element\n   */\n  showCopyFeedback(button) {\n    const originalIcon = button.querySelector('i').className;\n    const icon = button.querySelector('i');\n\n    // Show success state\n    icon.className = 'bi bi-check text-success';\n    button.classList.add('btn-success');\n    button.classList.remove('btn-outline-secondary');\n\n    // Reset after 1 second\n    setTimeout(() => {\n      icon.className = originalIcon;\n      button.classList.remove('btn-success');\n      button.classList.add('btn-outline-secondary');\n    }, 1000);\n  }\n\n  /**\n   * Format complex objects as nested DataView\n   * @param {object} value - Object value to display as DataView\n   * @param {object} field - Field definition\n   * @returns {string} Formatted DataView HTML\n   */\n  formatAsDataView(value, field) {\n    if (!value || typeof value !== 'object') {\n      return `<span class=\"text-muted fst-italic\">No data available</span>`;\n    }\n\n    try {\n      // Create nested DataView instance\n      const nestedView = new (this.constructor)({\n        data: value,\n        columns: field.dataViewColumns || 2,\n        showEmptyValues: field.showEmptyValues ?? true,\n        emptyValueText: field.emptyValueText || 'Not set',\n        // Pass any other dataView-specific options from field config\n        ...(field.dataViewOptions || {})\n      });\n\n        nestedView.onInit();\n        nestedView.generateFieldsFromData();\n      // Generate the nested DataView HTML\n      const nestedHtml = nestedView.buildItemsHTML();\n\n      // Wrap in a styled container with optional label\n      // const labelHtml = field.label ?\n      //   `<h6 class=\"fw-semibold text-muted mb-3 border-bottom pb-2\">${this.escapeHtml(field.label)}</h6>` :\n      //   '';\n\n      return `\n        <div class=\"nested-dataview border rounded p-3 bg-light\">\n          <div class=\"${nestedView.dataViewOptions.rowClass}\">\n            ${nestedHtml}\n          </div>\n        </div>\n      `;\n    } catch (error) {\n      console.error('Error creating nested DataView:', error);\n      return `<span class=\"text-danger\">Error displaying nested data</span>`;\n    }\n  }\n\n  /**\n   * Update the data and re-render\n   * @param {object} newData - New data object\n   * @returns {Promise<DataView>} Promise resolving to this instance\n   */\n  async updateData(newData) {\n    this.data = newData;\n\n    // If model is provided, update it instead\n    if (this.model && typeof this.model.set === 'function') {\n      this.model.set(newData);\n    }\n\n    // Clear fields to trigger regeneration on next render\n    if (this.fields.length > 0 && !this.options.fields) {\n      this.fields = [];\n    }\n\n    await this.render();\n    this.emit('data:updated', { data: newData });\n    return this;\n  }\n\n  /**\n   * Update field configuration and re-render\n   * @param {array} newFields - New field configuration\n   * @returns {Promise<DataView>} Promise resolving to this instance\n   */\n  async updateFields(newFields) {\n    this.fields = newFields;\n    await this.render();\n    this.emit('fields:updated', { fields: newFields });\n    return this;\n  }\n\n  /**\n   * Update configuration and re-render\n   * @param {object} newOptions - New configuration options\n   * @returns {Promise<DataView>} Promise resolving to this instance\n   */\n  async updateConfig(newOptions) {\n    this.dataViewOptions = { ...this.dataViewOptions, ...newOptions };\n    await this.render();\n    this.emit('config:updated', { options: this.dataViewOptions });\n    return this;\n  }\n\n  /**\n   * Refresh data from model if available\n   * @returns {Promise<DataView>} Promise resolving to this instance\n   */\n  async refresh() {\n    if (this.model && typeof this.model.fetch === 'function') {\n      try {\n        await this.model.fetch();\n        this.emit('data:refreshed', { model: this.model });\n      } catch (error) {\n        this.emit('error', { error, message: 'Failed to refresh data' });\n        throw error;\n      }\n    }\n    return this;\n  }\n\n  /**\n   * Get current data\n   * @returns {object} Current data object\n   */\n  getCurrentData() {\n    return this.getData();\n  }\n\n  /**\n   * Get field definition by name\n   * @param {string} name - Field name\n   * @returns {object|null} Field definition\n   */\n  getField(name) {\n    return this.fields.find(field => field.name === name) || null;\n  }\n\n  /**\n   * Set custom format for a specific field\n   * @param {string} fieldName - Name of the field\n   * @param {string} format - Pipe format string (e.g., \"currency|uppercase\")\n   * @returns {DataView} This instance for chaining\n   */\n  setFieldFormat(fieldName, format) {\n    const field = this.getField(fieldName);\n    if (field) {\n      field.format = format;\n      field.formatter = format;  // Keep both in sync\n    } else {\n      // Create new field if it doesn't exist\n      this.fields.push({\n        name: fieldName,\n        label: this.formatLabel(fieldName),\n        type: this.inferFieldType(this.getData()[fieldName], fieldName),\n        format: format,\n        formatter: format  // Keep both in sync\n      });\n    }\n    return this;\n  }\n\n  /**\n   * Add additional formatter to existing field format pipe chain\n   * @param {string} fieldName - Name of the field\n   * @param {string} formatter - Formatter to add (e.g., \"uppercase\", \"truncate(50)\")\n   * @returns {DataView} This instance for chaining\n   */\n  addFormatPipe(fieldName, formatter) {\n    const field = this.getField(fieldName);\n    if (field) {\n      if (field.format) {\n        field.format += `|${formatter}`;\n        field.formatter = field.format;  // Keep both in sync\n      } else {\n        field.format = formatter;\n        field.formatter = formatter;  // Keep both in sync\n      }\n    }\n    return this;\n  }\n\n  /**\n   * Clear custom format for a field (revert to auto-inferred format)\n   * @param {string} fieldName - Name of the field\n   * @returns {DataView} This instance for chaining\n   */\n  clearFieldFormat(fieldName) {\n    const field = this.getField(fieldName);\n    if (field) {\n      const data = this.getData();\n      const inferred = this.inferFormatter(data[fieldName], fieldName, field.type);\n      field.format = inferred;\n      field.formatter = inferred;  // Keep both in sync\n    }\n    return this;\n  }\n\n  /**\n   * Get formatted value for a specific field without rendering\n   * @param {string} fieldName - Name of the field\n   * @param {*} value - Optional value to format (uses current data if not provided)\n   * @returns {*} Formatted value\n   */\n  getFormattedValue(fieldName, value = null) {\n    const field = this.getField(fieldName);\n    if (!field) return null;\n\n    const targetValue = value !== null ? value : this.getData()[fieldName];\n\n    // Support both 'format' and 'formatter' for consistency with TableView\n    const formatString = field.format || field.formatter;\n    if (formatString && targetValue != null) {\n      return dataFormatter.pipe(targetValue, formatString);\n    }\n\n    return targetValue;\n  }\n\n  /**\n   * Set multiple field formats at once\n   * @param {object} formats - Object mapping field names to format strings\n   * @returns {DataView} This instance for chaining\n   */\n  setFieldFormats(formats) {\n    Object.entries(formats).forEach(([fieldName, format]) => {\n      this.setFieldFormat(fieldName, format);\n    });\n    return this;\n  }\n\n  /**\n   * Get all current field formats as an object\n   * @returns {object} Object mapping field names to their current formats\n   */\n  getFieldFormats() {\n    const formats = {};\n    this.fields.forEach(field => {\n      const formatString = field.format || field.formatter;\n      if (formatString) {\n        formats[field.name] = formatString;\n      }\n    });\n    return formats;\n  }\n\n  /**\n   * Set up model event listeners if model is provided\n   */\n  onInit() {\n    super.onInit();\n\n    // Listen for model changes\n    if (this.model && typeof this.model.on === 'function') {\n      this.model.on('change', () => {\n        this.render();\n      });\n    }\n  }\n\n  /**\n   * Static factory method\n   * @param {object} options - DataView options\n   * @returns {DataView} New DataView instance\n   */\n  static create(options = {}) {\n    return new DataView(options);\n  }\n}\n\nexport default DataView;\n"],"names":["DataView","View","constructor","options","data","model","fields","columns","responsive","showEmptyValues","emptyValueText","viewOptions","super","tagName","className","this","dataViewOptions","rowClass","itemClass","labelClass","valueClass","onBeforeRender","length","getData","generateFieldsFromData","renderTemplate","items","buildItemsHTML","dataObj","Object","keys","map","key","value","fieldType","inferFieldType","formatter","inferFormatter","name","label","formatLabel","type","format","replace","l","toUpperCase","trim","keyLower","toLowerCase","includes","Array","isArray","renditions","shouldUseDataView","match","formatters","push","unshift","join","window","utils","isObject","id","some","pattern","k","attributes","getFieldValue","field","formatString","parts","split","slice","get","dataFormatter","pipe","template","modelData","renderTemplateString","templateString","dataKey","reduce","o","i","getColumnClasses","classes","getColumnSizeClasses","justify","colSize","cols","Math","floor","buildItemHTML","filter","Boolean","buildLabelHTML","buildValueHTML","escapeHtml","formatDisplayValue","String","rawValue","emailStr","urlStr","formatAsJson","formatAsDataView","phoneStr","jsonString","JSON","stringify","escapedJson","lines","isLarge","uniqueId","random","toString","substr","preview","substring","escapedPreview","syntaxHighlightJson","error","json","bindEvents","element","addEventListener","e","fieldElement","target","closest","fieldName","dataset","find","f","emit","event","preventDefault","stopPropagation","handleJsonCopy","handleJsonToggle","button","jsonData","getAttribute","navigator","clipboard","isSecureContext","writeText","then","showCopyFeedback","textarea","document","createElement","body","appendChild","select","execCommand","removeChild","console","warn","icon","querySelector","isExpanded","setTimeout","innerHTML","originalIcon","classList","add","remove","nestedView","dataViewColumns","onInit","nestedHtml","updateData","newData","set","render","updateFields","newFields","updateConfig","newOptions","refresh","fetch","message","getCurrentData","getField","setFieldFormat","addFormatPipe","clearFieldFormat","inferred","getFormattedValue","targetValue","setFieldFormats","formats","entries","forEach","getFieldFormats","on","create"],"mappings":"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"}
+{"version":3,"file":"DataView-BYNjIf--.js","sources":["../../src/core/views/data/DataView.js"],"sourcesContent":["/**\n * DataView - Key/Value data display component for MOJO framework\n * Extends View to display object data in a responsive grid layout with intelligent formatting support\n *\n * Features:\n * - Automatic field generation from data with intelligent type inference\n * - Smart DataFormatter pipe chains (e.g., \"date('MMM D, YYYY')|capitalize\")\n * - Contextual formatting based on field names and values\n * - Support for complex pipe chains like \"truncate(100)|capitalize|badge\"\n * - Nested DataView support with type=\"dataview\" for complex objects\n * - Custom format overrides with fluent API\n * - No format collision: custom field.format completely overrides DataView formatting\n *\n * Format Behavior:\n * - No field.format: DataView applies type-based HTML formatting (badges, links, etc.)\n * - With field.format: DataFormatter handles ALL formatting, DataView only escapes HTML\n *\n * Example Usage:\n * ```javascript\n * const dataView = new DataView({\n *   data: {\n *     name: 'john doe',\n *     email: 'john@example.com',\n *     createdAt: '2024-01-15T10:30:00Z',\n *     price: 99.99,\n *     description: 'A very long description that should be truncated...',\n *     isActive: true\n *   }\n * });\n *\n * // Auto-inferred formats (DataView adds HTML styling):\n * // name: \"truncate(50)|capitalize\"\n * // email: no format → DataView creates mailto: link\n * // createdAt: \"date('MMM D, YYYY')\"\n * // price: \"currency\"\n * // description: \"truncate(200)\"\n * // isActive: no format → DataView creates badge styling\n *\n * // Custom format overrides (DataFormatter handles ALL formatting):\n * dataView\n *   .setFieldFormat('name', 'uppercase|truncate(20)')      // No DataView HTML styling\n *   .setFieldFormat('email', 'email|uppercase')           // No mailto: link\n *   .setFieldFormat('isActive', 'boolean|uppercase')      // No badge styling\n *   .setFieldFormats({\n *     description: 'truncate(50)|capitalize',\n *     createdAt: 'relative'\n *   });\n *\n * // Nested DataView for complex objects:\n * dataView.setFieldFormat('permissions', null); // Clear auto-format\n * // Then configure field: { name: 'permissions', type: 'dataview', label: 'User Permissions' }\n * ```\n */\n\nimport View from '@core/View.js';\nimport dataFormatter from '@core/utils/DataFormatter.js';\n\nclass DataView extends View {\n  constructor(options = {}) {\n    // Extract DataView-specific options\n    const {\n      data,\n      model,\n      fields,\n      columns,\n      responsive,\n      showEmptyValues,\n      emptyValueText,\n      ...viewOptions\n    } = options;\n\n    // Set default view options\n    super({\n      tagName: 'div',\n      className: 'data-view',\n      ...viewOptions\n    });\n\n    // Core properties\n    this.data = data || {};\n    this.fields = fields || [];\n    this.model = model || null;\n\n    // If a model is provided, use it as data source\n    if (this.model) {\n      this.data = this.model;\n    }\n\n    // DataView-specific configuration\n    this.dataViewOptions = {\n      columns: columns || 2,\n      responsive: responsive !== false,  // Default to true\n      showEmptyValues: showEmptyValues || false,\n      emptyValueText: emptyValueText || '—',\n      rowClass: 'row g-3',\n      itemClass: 'data-view-item',\n      labelClass: 'data-view-label fw-semibold text-muted small text-uppercase',\n      valueClass: 'data-view-value'\n    };\n  }\n\n  /**\n   * Lifecycle hook - prepare data and fields before rendering\n   */\n  async onBeforeRender() {\n\n    // Auto-generate fields from data if none provided\n    if (this.fields.length === 0 && this.getData()) {\n      this.generateFieldsFromData();\n    }\n  }\n\n  /**\n   * Override renderTemplate to generate HTML directly\n   * @returns {string} Complete HTML string\n   */\n  async renderTemplate() {\n    const items = this.buildItemsHTML();\n\n    return `\n      <div class=\"${this.dataViewOptions.rowClass}\">\n        ${items}\n      </div>\n    `;\n  }\n\n  /**\n   * Auto-generate field definitions from data object with intelligent type inference\n   */\n  generateFieldsFromData() {\n    const dataObj = this.getData();\n\n    if (dataObj && typeof dataObj === 'object') {\n      this.fields = Object.keys(dataObj).map(key => {\n        const value = dataObj[key];\n        const fieldType = this.inferFieldType(value, key);\n        const formatter = this.inferFormatter(value, key, fieldType);\n\n        return {\n          name: key,\n          label: this.formatLabel(key),\n          type: fieldType,\n          format: formatter,\n          formatter: formatter  // Alias for consistency with TableView\n        };\n      });\n    }\n  }\n\n  /**\n   * Format field name into a readable label\n   * @param {string} name - Field name\n   * @returns {string} Formatted label\n   */\n  formatLabel(name) {\n    return name\n      .replace(/([A-Z])/g, ' $1')  // Add space before capital letters\n      .replace(/[_-]/g, ' ')        // Replace underscores and hyphens with spaces\n      .replace(/\\b\\w/g, l => l.toUpperCase())  // Title case\n      .trim();\n  }\n\n  /**\n   * Infer field type from value and key with improved intelligence\n   * @param {*} value - Field value\n   * @param {string} key - Field key\n   * @returns {string} Field type\n   */\n  inferFieldType(value, key = '') {\n    if (value === null || value === undefined) return 'text';\n\n    const keyLower = key.toLowerCase();\n    const type = typeof value;\n\n    // Date/time patterns\n    if (keyLower.includes('date') || keyLower.includes('time') ||\n        keyLower.includes('created') || keyLower.includes('updated') ||\n        keyLower.includes('modified') || keyLower.includes('last_login') ||\n        keyLower.includes('expires') || keyLower.includes('last_activity')) {\n      return 'datetime';\n    }\n\n    // Email patterns\n    if (keyLower.includes('email') || keyLower.includes('mail')) {\n      return 'email';\n    }\n\n    // URL patterns\n    if (keyLower.includes('url') || keyLower.includes('link') ||\n        keyLower.includes('website') || keyLower.includes('homepage')) {\n      return 'url';\n    }\n\n    // Phone patterns\n    if (keyLower.includes('phone') || keyLower.includes('tel') ||\n        keyLower.includes('mobile') || keyLower.includes('cell')) {\n      return 'phone';\n    }\n\n    // Currency/price patterns\n    if (keyLower.includes('price') || keyLower.includes('cost') ||\n        keyLower.includes('amount') || keyLower.includes('fee') ||\n        keyLower.includes('salary') || keyLower.includes('revenue')) {\n      return 'currency';\n    }\n\n    // File size patterns\n    if (keyLower.includes('size') || keyLower.includes('bytes')) {\n      return 'filesize';\n    }\n\n    // Percentage patterns\n    if (keyLower.includes('percent') || keyLower.includes('rate') ||\n        keyLower.includes('ratio') && type === 'number') {\n      return 'percent';\n    }\n\n    // Type-based inference\n    if (type === 'boolean') return 'boolean';\n    if (type === 'number') return 'number';\n\n    if (type === 'object') {\n      if (Array.isArray(value)) return 'array';\n      if (value && value.renditions) return 'file';\n\n      // Check if object should be displayed as nested DataView\n      if (this.shouldUseDataView(value, keyLower)) {\n        return 'dataview';\n      }\n\n      return 'object';\n    }\n\n    if (type === 'string') {\n      // Pattern matching for strings\n      if (value.includes('@') && value.includes('.')) return 'email';\n      if (value.match(/^\\d{4}-\\d{2}-\\d{2}/)) return 'date';\n      if (value.match(/^https?:\\/\\//)) return 'url';\n      if (value.match(/^\\+?[\\d\\s\\-\\(\\)]+$/)) return 'phone';\n    }\n\n    return 'text';\n  }\n\n  /**\n   * Infer appropriate formatter based on type and context\n   * @param {*} value - Field value\n   * @param {string} key - Field key\n   * @param {string} fieldType - Inferred field type\n   * @returns {string|null} Formatter pipe string\n   */\n  inferFormatter(value, key, fieldType) {\n    const keyLower = key.toLowerCase();\n    const formatters = [];\n\n    switch (fieldType) {\n      case 'datetime':\n        if (keyLower.includes('time') && !keyLower.includes('date')) {\n          formatters.push('time');\n        } else if (keyLower.includes('relative') || keyLower.includes('ago') || keyLower.includes('last_')) {\n          formatters.push('relative');\n        } else if (keyLower.includes('created') || keyLower.includes('updated') || keyLower.includes('modified')) {\n          formatters.push('date(\"MMM D, YYYY\")');\n        } else {\n          formatters.push('date(\"MMMM D, YYYY\")');\n        }\n        break;\n\n      case 'date':\n        if (keyLower.includes('birth') || keyLower.includes('dob')) {\n          formatters.push('date(\"MMMM D, YYYY\")');\n        } else {\n          formatters.push('date(\"MMM D, YYYY\")');\n        }\n        break;\n\n      case 'email':\n        // Don't apply email formatter - DataView handles mailto: links automatically\n        break;\n\n      case 'url':\n        // Don't apply url formatter - DataView handles clickable links automatically\n        break;\n\n      case 'phone':\n        formatters.push('phone');\n        break;\n\n      case 'currency':\n        formatters.push('currency');\n        // Add currency symbol detection if needed\n        if (keyLower.includes('eur') || keyLower.includes('euro')) {\n          formatters[formatters.length - 1] = 'currency(\"EUR\")';\n        } else if (keyLower.includes('gbp') || keyLower.includes('pound')) {\n          formatters[formatters.length - 1] = 'currency(\"GBP\")';\n        }\n        break;\n\n      case 'filesize':\n        formatters.push('filesize');\n        break;\n\n      case 'percent':\n        formatters.push('percent');\n        break;\n\n      case 'number':\n        // Smart number formatting with pipe chains\n        if (typeof value === 'number') {\n          if (keyLower.includes('count') || keyLower.includes('total') || keyLower.includes('followers') || keyLower.includes('views')) {\n            if (value >= 1000) {\n              formatters.push('compact');\n            } else {\n              formatters.push('number');\n            }\n          } else if (keyLower.includes('score') || keyLower.includes('rating')) {\n            formatters.push('number');\n            // Add decimal places for scores\n            if (value % 1 !== 0) {\n              formatters[formatters.length - 1] = 'number(1)';\n            }\n          } else if (keyLower.includes('version') || keyLower.includes('id')) {\n            // Don't format IDs and versions\n            return null;\n          } else {\n            formatters.push('number');\n          }\n        }\n        break;\n\n      case 'boolean':\n        // Don't apply boolean formatter - DataView handles badge styling automatically\n        break;\n\n      case 'text':\n        // Smart text formatting with contextual pipe chains\n        if (typeof value === 'string') {\n          // Handle different text contexts\n          if (keyLower.includes('description') || keyLower.includes('content') || keyLower.includes('body')) {\n            if (value.length > 200) {\n              formatters.push('truncate(200)');\n            } else if (value.length > 100) {\n              formatters.push('truncate(100)');\n            }\n          } else if (keyLower.includes('summary') || keyLower.includes('excerpt')) {\n            if (value.length > 150) {\n              formatters.push('truncate(150)');\n            }\n          } else if (keyLower.includes('name') || keyLower.includes('title') || keyLower.includes('label')) {\n            formatters.push('capitalize');\n            if (value.length > 50) {\n              formatters.unshift('truncate(50)'); // Truncate first, then capitalize\n            }\n          } else if (keyLower.includes('slug') || keyLower.includes('handle') || keyLower.includes('username')) {\n            formatters.push('slug');\n          } else if (keyLower.includes('code') || keyLower.includes('token') || keyLower.includes('key')) {\n            // Show codes/tokens with masking if long\n            if (value.length > 20) {\n              formatters.push('mask');\n            }\n          } else {\n            // Generic text handling\n            if (value.length > 100) {\n              formatters.push('truncate(100)');\n            }\n          }\n        }\n        break;\n\n      case 'array':\n      case 'object':\n        // Don't apply json formatter - DataView handles JSON display automatically\n        break;\n\n      case 'dataview':\n        // Don't apply any formatter - nested DataView handles its own formatting\n        break;\n\n      default:\n        // Handle any missed cases with basic text formatting\n        if (typeof value === 'string' && value.length > 100) {\n          formatters.push('truncate(100)');\n        }\n        break;\n    }\n\n    return formatters.length > 0 ? formatters.join('|') : null;\n  }\n\n  /**\n   * Determine if an object should be displayed as nested DataView vs JSON\n   * @param {object} value - Object value to check\n   * @param {string} keyLower - Lowercase field key\n   * @returns {boolean} True if should use DataView\n   */\n  shouldUseDataView(value, keyLower) {\n    if (!value || typeof value !== 'object' || Array.isArray(value)) {\n      return false;\n    }\n\n    // Check for common patterns that benefit from DataView display\n    const dataViewPatterns = [\n      'permissions', 'perms', 'access', 'rights',\n      'settings', 'config', 'configuration', 'options',\n      'profile', 'info', 'details', 'data',\n      'metadata', 'meta', 'attributes', 'props',\n      'preferences', 'prefs', 'user_data',\n      'contact', 'address', 'location',\n      'stats', 'statistics', 'metrics', 'counts'\n    ];\n\n    if (window.utils && window.utils.isObject(value) && value.id) {\n        return true;\n    }\n\n    // Check if key matches common patterns\n    const matchesPattern = dataViewPatterns.some(pattern => keyLower.includes(pattern));\n\n    if (matchesPattern) {\n      // Additional checks to ensure it's suitable for DataView\n      const keys = Object.keys(value);\n\n      // Good candidates: objects with multiple simple key-value pairs\n      if (keys.length >= 2 && keys.length <= 20) {\n        const hasComplexNesting = keys.some(k =>\n          typeof value[k] === 'object' &&\n          value[k] !== null &&\n          !Array.isArray(value[k]) &&\n          Object.keys(value[k]).length > 3\n        );\n\n        // Use DataView if not too deeply nested\n        if (!hasComplexNesting) {\n          return true;\n        }\n      }\n    }\n\n    return false;\n  }\n\n  /**\n   * Get data object (handles both raw objects and Models)\n   * @returns {object} Data object\n   */\n  getData() {\n    if (this.model && this.model.attributes) {\n      return { ...this.model.attributes };\n    }\n    return this.data || {};\n  }\n\n  /**\n   * Get field value with formatting support\n   * @param {object} field - Field definition\n   * @returns {*} Field value (formatted if specified)\n   */\n  getFieldValue(field) {\n    let value;\n    let key = field.name || field.key;\n    let formatString = field.format || field.formatter;\n    if (!key) return null;\n\n    // Check if the name field contains a pipe (e.g., 'is_tor|status_text')\n    // This allows inline formatter syntax in the name field\n    if (key && key.includes('|')) {\n      const parts = key.split('|');\n      key = parts[0].trim();\n      // If no explicit formatter was set, use the one from the name\n      if (!formatString) {\n        formatString = parts.slice(1).join('|').trim();\n      }\n    }\n\n    // Get raw value from data source\n    if (this.model && typeof this.model.get === 'function') {\n      // For models, get raw value first, then apply formatting separately\n      // This ensures we don't break pipe chains by concatenating strings\n      value = this.model.get(key);\n    } else {\n      // Plain object access\n      value = this.getData()[key];\n    }\n\n    // Apply formatting using DataFormatter pipe system if specified\n    // Support both 'format' and 'formatter' for consistency with TableView\n    if (formatString) {\n      value = dataFormatter.pipe(value, formatString);\n    }\n\n    // Handle empty values\n    if (value === null || value === undefined || value === '') {\n      return this.dataViewOptions.showEmptyValues ? this.dataViewOptions.emptyValueText : null;\n    }\n\n    // Apply template if provided\n    if (field.template) {\n      const modelData = this.model ? this.model : this.data;\n      return this.renderTemplateString(field.template, modelData);\n    }\n\n    return value;\n  }\n\n  /**\n   * Render a template string with data from a model or object.\n   * Replaces {{key}} and {{nested.key}} placeholders.\n   * @param {string} templateString - The template string.\n   * @param {object} data - The data object or model.\n   * @returns {string} The rendered string.\n   */\n  renderTemplateString(templateString, data) {\n    if (!templateString || !data) {\n      return '';\n    }\n\n    // Regex to find all {{...}} placeholders\n    return templateString.replace(/\\{\\{([^}]+)\\}\\}/g, (match, key) => {\n      const trimmedKey = key.trim();\n      let value;\n\n      // Handle potential formatters in the template key\n      const parts = trimmedKey.split('|');\n      const dataKey = parts[0];\n      const formatters = parts.slice(1).join('|');\n\n      // Get value from model or plain object\n      if (this.model && typeof this.model.get === 'function') {\n        value = this.model.get(dataKey);\n      } else {\n        // Handle nested keys for plain objects\n        value = dataKey.split('.').reduce((o, i) => (o ? o[i] : undefined), data);\n      }\n\n      // Apply formatters if any\n      if (formatters) {\n        value = dataFormatter.pipe(value, formatters);\n      }\n\n      return value !== undefined && value !== null ? value : '';\n    });\n  }\n\n  /**\n   * Generate column classes based on configuration\n   * @param {object} field - Field definition\n   * @returns {string} CSS classes\n   */\n  getColumnClasses(field) {\n      let classes = this.getColumnSizeClasses(field);\n      if (field.justify == \"right\") {\n        classes += ` d-flex justify-content-end`;\n      } else if (field.justify == \"center\") {\n        classes += ` d-flex justify-content-center`;\n      }\n      return classes;\n  }\n\n  /**\n   * Generate column size classes based on configuration\n   * @param {object} field - Field definition\n   * @returns {string} CSS classes\n   */\n  getColumnSizeClasses(field) {\n    // JSON objects and nested DataViews always use full width for better display\n    if (field.type === 'array' || field.type === 'object' || field.type === 'dataview') {\n      return 'col-12';\n    }\n\n    const colSize = field.columns || field.colSize || field.cols || Math.floor(12 / this.dataViewOptions.columns);\n\n    if (this.dataViewOptions.responsive) {\n      // Responsive breakpoints: 1 column on small, configured on larger screens\n      return `col-12 col-md-${colSize}`;\n    }\n\n    return `col-${colSize}`;\n  }\n\n  /**\n   * Build HTML for all data items\n   * @returns {string} Items HTML\n   */\n  buildItemsHTML() {\n    return this.fields\n      .map(field => this.buildItemHTML(field))\n      .filter(Boolean)  // Remove empty items\n      .join('');\n  }\n\n  /**\n   * Build HTML for a single data item\n   * @param {object} field - Field definition\n   * @returns {string} Item HTML\n   */\n  buildItemHTML(field) {\n    const value = this.getFieldValue(field);\n\n    // Skip fields with no value if showEmptyValues is false\n    if (value === null && !this.dataViewOptions.showEmptyValues) {\n      return '';\n    }\n\n    const label = field.label || this.formatLabel(field.name);\n    const colClasses = this.getColumnClasses(field);\n\n    return `\n      <div class=\"${colClasses}\">\n        <div class=\"${this.dataViewOptions.itemClass} ${field.className}\" data-field=\"${field.name}\">\n          ${this.buildLabelHTML(label, field)}\n          ${this.buildValueHTML(value, field)}\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Build label HTML\n   * @param {string} label - Label text\n   * @param {object} field - Field definition\n   * @returns {string} Label HTML\n   */\n  buildLabelHTML(label, field) {\n    const labelClass = field.labelClass || this.dataViewOptions.labelClass;\n    return `<div class=\"${labelClass}\">${this.escapeHtml(label)}:</div>`;\n  }\n\n  /**\n   * Build value HTML with type-specific formatting\n   * @param {*} value - Field value\n   * @param {object} field - Field definition\n   * @returns {string} Value HTML\n   */\n  buildValueHTML(value, field) {\n    const valueClass = field.valueClass || this.dataViewOptions.valueClass;\n    const displayValue = this.formatDisplayValue(value, field);\n    return `<div class=\"${valueClass}\">${displayValue}</div>`;\n  }\n\n  /**\n   * Format value for display with enhanced type handling\n   * @param {*} value - Formatted value from DataFormatter (or raw if no format)\n   * @param {object} field - Field definition\n   * @returns {string} Formatted display value with HTML markup\n   */\n  formatDisplayValue(value, field) {\n    if (value === null || value === undefined) {\n      return this.dataViewOptions.emptyValueText;\n    }\n\n    // If a template was used, the value is already the final HTML. Return it directly.\n    if (field.template) {\n      return String(value);\n    }\n\n    // If a custom format is specified, trust the DataFormatter output.\n    // Support both 'format' and 'formatter' for consistency with TableView\n    const formatString = field.format || field.formatter;\n    if (formatString) {\n      // If a formatter is explicitly specified, render its output as HTML\n      // The DataFormatter is responsible for proper escaping when needed\n      return String(value);\n    }\n\n    // No custom format - apply DataView's default type-specific HTML formatting\n    // Get original raw value for special cases\n    const rawValue = this.getData()[field.name];\n\n    // Handle types that need special HTML presentation (only when no custom format)\n    switch (field.type) {\n      case 'boolean':\n        // Use standard boolean badges (no custom format was applied)\n        return rawValue ?\n          '<span class=\"badge bg-success\">Yes</span>' :\n          '<span class=\"badge bg-secondary\">No</span>';\n\n      case 'email':\n        // Create clickable email links (no custom format was applied)\n        const emailStr = String(value);\n        return `<a href=\"mailto:${this.escapeHtml(emailStr)}\" class=\"text-decoration-none\">${this.escapeHtml(emailStr)}</a>`;\n\n      case 'url':\n        // Create clickable URL links (no custom format was applied)\n        const urlStr = String(value);\n        return `<a href=\"${this.escapeHtml(urlStr)}\" target=\"_blank\" rel=\"noopener\" class=\"text-decoration-none\">${this.escapeHtml(urlStr)} <i class=\"bi bi-box-arrow-up-right\"></i></a>`;\n\n      case 'array':\n      case 'object':\n        // Display as JSON with special HTML formatting (no custom format was applied)\n        return this.formatAsJson(rawValue);\n\n      case 'dataview':\n        // Create nested DataView for complex objects\n        return this.formatAsDataView(rawValue, field);\n\n      case 'phone':\n        // Create tel: links for phone numbers (no custom format was applied)\n        const phoneStr = String(value);\n        const telHref = phoneStr.replace(/[^\\d\\+]/g, ''); // Clean for tel: link\n        return `<a href=\"tel:${telHref}\" class=\"text-decoration-none\">${this.escapeHtml(phoneStr)}</a>`;\n\n      default:\n        // For all other types with no custom format, just escape and return\n        return this.escapeHtml(String(value));\n    }\n  }\n\n  /**\n   * Format object/array values as styled JSON\n   * @param {*} value - Object or array value\n   * @returns {string} Formatted JSON HTML\n   */\n  formatAsJson(value) {\n    try {\n      const jsonString = JSON.stringify(value, null, 2);\n      const escapedJson = this.escapeHtml(jsonString);\n      const lines = jsonString.split('\\n').length;\n      const isLarge = lines > 10 || jsonString.length > 500;\n      const uniqueId = `json-${Math.random().toString(36).substr(2, 9)}`;\n\n      // Create collapsible JSON display for large objects\n      if (isLarge) {\n        const preview = JSON.stringify(value).substring(0, 100) + (JSON.stringify(value).length > 100 ? '...' : '');\n        const escapedPreview = this.escapeHtml(preview);\n\n        return `\n          <div class=\"json-container\">\n            <div class=\"d-flex align-items-center justify-content-between mb-1\">\n              <small class=\"text-muted\">${Array.isArray(value) ? 'Array' : 'Object'} (${lines} lines)</small>\n              <div class=\"btn-group btn-group-sm\" role=\"group\">\n                <button type=\"button\" class=\"btn btn-outline-secondary btn-sm json-toggle\" data-bs-toggle=\"collapse\" data-bs-target=\"#${uniqueId}\" aria-expanded=\"false\">\n                  <i class=\"bi bi-eye\"></i> Show\n                </button>\n                <button type=\"button\" class=\"btn btn-outline-secondary btn-sm json-copy\" data-json='${this.escapeHtml(jsonString)}' title=\"Copy JSON\">\n                  <i class=\"bi bi-clipboard\"></i>\n                </button>\n              </div>\n            </div>\n            <div class=\"json-preview bg-light p-2 rounded small border\" style=\"font-family: 'Courier New', monospace;\">\n              <code class=\"text-muted\">${escapedPreview}</code>\n            </div>\n            <div class=\"collapse mt-2\" id=\"${uniqueId}\">\n              <pre class=\"json-display p-3 rounded small mb-0\" style=\"max-height: 400px; overflow-y: auto; white-space: pre-wrap; font-family: 'Courier New', monospace;\"><code>${this.syntaxHighlightJson(escapedJson)}</code></pre>\n            </div>\n          </div>\n        `;\n      } else {\n        // Small objects - show directly with copy button\n        return `\n          <div class=\"json-container\">\n            <div class=\"d-flex align-items-center justify-content-between mb-1\">\n              <small class=\"text-muted\">${Array.isArray(value) ? 'Array' : 'Object'}</small>\n              <button type=\"button\" class=\"btn btn-outline-secondary btn-sm json-copy\" data-json='${this.escapeHtml(jsonString)}' title=\"Copy JSON\">\n                <i class=\"bi bi-clipboard\"></i>\n              </button>\n            </div>\n            <pre class=\"json-display bg-light p-2 rounded small mb-0 border\" style=\"white-space: pre-wrap; font-family: 'Courier New', monospace;\"><code>${this.syntaxHighlightJson(escapedJson)}</code></pre>\n          </div>\n        `;\n      }\n    } catch (error) {\n      // Fallback for objects that can't be stringified\n      return `<span class=\"text-muted fst-italic\">[Object: ${typeof value}] - Cannot display as JSON</span>`;\n    }\n  }\n\n  /**\n   * Apply basic syntax highlighting to JSON\n   * @param {string} json - Escaped JSON string\n   * @returns {string} JSON with basic syntax highlighting\n   */\n  syntaxHighlightJson(json) {\n    return json\n      .replace(/(\"([^\"\\\\]|\\\\.)*\")\\s*:/g, '<span style=\"color: #0969da;\">$1</span>:') // Keys (blue)\n      .replace(/:\\s*(\"([^\"\\\\]|\\\\.)*\")/g, ': <span style=\"color: #0a3069;\">$1</span>') // String values (dark blue)\n      .replace(/:\\s*(true|false)/g, ': <span style=\"color: #8250df;\">$1</span>') // Booleans (purple)\n      .replace(/:\\s*(null)/g, ': <span style=\"color: #656d76;\">$1</span>') // Null (gray)\n      .replace(/:\\s*(-?\\d+\\.?\\d*)/g, ': <span style=\"color: #0550ae;\">$1</span>'); // Numbers (blue)\n  }\n\n  /**\n   * Bind events including JSON interaction handlers\n   */\n  bindEvents() {\n    super.bindEvents();\n\n    if (!this.element) return;\n\n    // Add click handler for field interactions\n    this.element.addEventListener('click', (e) => {\n      const fieldElement = e.target.closest('[data-field]');\n      if (fieldElement) {\n        const fieldName = fieldElement.dataset.field;\n        const field = this.fields.find(f => f.name === fieldName);\n        this.emit('field:click', { field, fieldName, element: fieldElement, event: e });\n      }\n\n      // Handle JSON copy button clicks\n      if (e.target.closest('.json-copy')) {\n        e.preventDefault();\n        e.stopPropagation();\n        this.handleJsonCopy(e.target.closest('.json-copy'));\n      }\n\n      // Handle JSON toggle button clicks\n      if (e.target.closest('.json-toggle')) {\n        this.handleJsonToggle(e.target.closest('.json-toggle'));\n      }\n    });\n  }\n\n  /**\n   * Handle copying JSON to clipboard\n   * @param {HTMLElement} button - Copy button element\n   */\n  handleJsonCopy(button) {\n    const jsonData = button.getAttribute('data-json');\n    if (!jsonData) return;\n\n    try {\n      // Use modern clipboard API if available\n      if (navigator.clipboard && window.isSecureContext) {\n        navigator.clipboard.writeText(jsonData).then(() => {\n          this.showCopyFeedback(button);\n        });\n      } else {\n        // Fallback for older browsers\n        const textarea = document.createElement('textarea');\n        textarea.value = jsonData;\n        document.body.appendChild(textarea);\n        textarea.select();\n        document.execCommand('copy');\n        document.body.removeChild(textarea);\n        this.showCopyFeedback(button);\n      }\n    } catch (error) {\n      console.warn('Failed to copy JSON:', error);\n    }\n  }\n\n  /**\n   * Handle JSON toggle button state\n   * @param {HTMLElement} button - Toggle button element\n   */\n  handleJsonToggle(button) {\n    const icon = button.querySelector('i');\n    const isExpanded = button.getAttribute('aria-expanded') === 'true';\n\n    // Update button text and icon\n    setTimeout(() => {\n      if (isExpanded) {\n        icon.className = 'bi bi-eye-slash';\n        button.innerHTML = '<i class=\"bi bi-eye-slash\"></i> Hide';\n      } else {\n        icon.className = 'bi bi-eye';\n        button.innerHTML = '<i class=\"bi bi-eye\"></i> Show';\n      }\n    }, 10);\n  }\n\n  /**\n   * Show visual feedback for successful copy\n   * @param {HTMLElement} button - Copy button element\n   */\n  showCopyFeedback(button) {\n    const originalIcon = button.querySelector('i').className;\n    const icon = button.querySelector('i');\n\n    // Show success state\n    icon.className = 'bi bi-check text-success';\n    button.classList.add('btn-success');\n    button.classList.remove('btn-outline-secondary');\n\n    // Reset after 1 second\n    setTimeout(() => {\n      icon.className = originalIcon;\n      button.classList.remove('btn-success');\n      button.classList.add('btn-outline-secondary');\n    }, 1000);\n  }\n\n  /**\n   * Format complex objects as nested DataView\n   * @param {object} value - Object value to display as DataView\n   * @param {object} field - Field definition\n   * @returns {string} Formatted DataView HTML\n   */\n  formatAsDataView(value, field) {\n    if (!value || typeof value !== 'object') {\n      return `<span class=\"text-muted fst-italic\">No data available</span>`;\n    }\n\n    try {\n      // Create nested DataView instance\n      const nestedView = new (this.constructor)({\n        data: value,\n        columns: field.dataViewColumns || 2,\n        showEmptyValues: field.showEmptyValues ?? true,\n        emptyValueText: field.emptyValueText || 'Not set',\n        // Pass any other dataView-specific options from field config\n        ...(field.dataViewOptions || {})\n      });\n\n        nestedView.onInit();\n        nestedView.generateFieldsFromData();\n      // Generate the nested DataView HTML\n      const nestedHtml = nestedView.buildItemsHTML();\n\n      // Wrap in a styled container with optional label\n      // const labelHtml = field.label ?\n      //   `<h6 class=\"fw-semibold text-muted mb-3 border-bottom pb-2\">${this.escapeHtml(field.label)}</h6>` :\n      //   '';\n\n      return `\n        <div class=\"nested-dataview border rounded p-3 bg-light\">\n          <div class=\"${nestedView.dataViewOptions.rowClass}\">\n            ${nestedHtml}\n          </div>\n        </div>\n      `;\n    } catch (error) {\n      console.error('Error creating nested DataView:', error);\n      return `<span class=\"text-danger\">Error displaying nested data</span>`;\n    }\n  }\n\n  /**\n   * Update the data and re-render\n   * @param {object} newData - New data object\n   * @returns {Promise<DataView>} Promise resolving to this instance\n   */\n  async updateData(newData) {\n    this.data = newData;\n\n    // If model is provided, update it instead\n    if (this.model && typeof this.model.set === 'function') {\n      this.model.set(newData);\n    }\n\n    // Clear fields to trigger regeneration on next render\n    if (this.fields.length > 0 && !this.options.fields) {\n      this.fields = [];\n    }\n\n    await this.render();\n    this.emit('data:updated', { data: newData });\n    return this;\n  }\n\n  /**\n   * Update field configuration and re-render\n   * @param {array} newFields - New field configuration\n   * @returns {Promise<DataView>} Promise resolving to this instance\n   */\n  async updateFields(newFields) {\n    this.fields = newFields;\n    await this.render();\n    this.emit('fields:updated', { fields: newFields });\n    return this;\n  }\n\n  /**\n   * Update configuration and re-render\n   * @param {object} newOptions - New configuration options\n   * @returns {Promise<DataView>} Promise resolving to this instance\n   */\n  async updateConfig(newOptions) {\n    this.dataViewOptions = { ...this.dataViewOptions, ...newOptions };\n    await this.render();\n    this.emit('config:updated', { options: this.dataViewOptions });\n    return this;\n  }\n\n  /**\n   * Refresh data from model if available\n   * @returns {Promise<DataView>} Promise resolving to this instance\n   */\n  async refresh() {\n    if (this.model && typeof this.model.fetch === 'function') {\n      try {\n        await this.model.fetch();\n        this.emit('data:refreshed', { model: this.model });\n      } catch (error) {\n        this.emit('error', { error, message: 'Failed to refresh data' });\n        throw error;\n      }\n    }\n    return this;\n  }\n\n  /**\n   * Get current data\n   * @returns {object} Current data object\n   */\n  getCurrentData() {\n    return this.getData();\n  }\n\n  /**\n   * Get field definition by name\n   * @param {string} name - Field name\n   * @returns {object|null} Field definition\n   */\n  getField(name) {\n    return this.fields.find(field => field.name === name) || null;\n  }\n\n  /**\n   * Set custom format for a specific field\n   * @param {string} fieldName - Name of the field\n   * @param {string} format - Pipe format string (e.g., \"currency|uppercase\")\n   * @returns {DataView} This instance for chaining\n   */\n  setFieldFormat(fieldName, format) {\n    const field = this.getField(fieldName);\n    if (field) {\n      field.format = format;\n      field.formatter = format;  // Keep both in sync\n    } else {\n      // Create new field if it doesn't exist\n      this.fields.push({\n        name: fieldName,\n        label: this.formatLabel(fieldName),\n        type: this.inferFieldType(this.getData()[fieldName], fieldName),\n        format: format,\n        formatter: format  // Keep both in sync\n      });\n    }\n    return this;\n  }\n\n  /**\n   * Add additional formatter to existing field format pipe chain\n   * @param {string} fieldName - Name of the field\n   * @param {string} formatter - Formatter to add (e.g., \"uppercase\", \"truncate(50)\")\n   * @returns {DataView} This instance for chaining\n   */\n  addFormatPipe(fieldName, formatter) {\n    const field = this.getField(fieldName);\n    if (field) {\n      if (field.format) {\n        field.format += `|${formatter}`;\n        field.formatter = field.format;  // Keep both in sync\n      } else {\n        field.format = formatter;\n        field.formatter = formatter;  // Keep both in sync\n      }\n    }\n    return this;\n  }\n\n  /**\n   * Clear custom format for a field (revert to auto-inferred format)\n   * @param {string} fieldName - Name of the field\n   * @returns {DataView} This instance for chaining\n   */\n  clearFieldFormat(fieldName) {\n    const field = this.getField(fieldName);\n    if (field) {\n      const data = this.getData();\n      const inferred = this.inferFormatter(data[fieldName], fieldName, field.type);\n      field.format = inferred;\n      field.formatter = inferred;  // Keep both in sync\n    }\n    return this;\n  }\n\n  /**\n   * Get formatted value for a specific field without rendering\n   * @param {string} fieldName - Name of the field\n   * @param {*} value - Optional value to format (uses current data if not provided)\n   * @returns {*} Formatted value\n   */\n  getFormattedValue(fieldName, value = null) {\n    const field = this.getField(fieldName);\n    if (!field) return null;\n\n    const targetValue = value !== null ? value : this.getData()[fieldName];\n\n    // Support both 'format' and 'formatter' for consistency with TableView\n    const formatString = field.format || field.formatter;\n    if (formatString && targetValue != null) {\n      return dataFormatter.pipe(targetValue, formatString);\n    }\n\n    return targetValue;\n  }\n\n  /**\n   * Set multiple field formats at once\n   * @param {object} formats - Object mapping field names to format strings\n   * @returns {DataView} This instance for chaining\n   */\n  setFieldFormats(formats) {\n    Object.entries(formats).forEach(([fieldName, format]) => {\n      this.setFieldFormat(fieldName, format);\n    });\n    return this;\n  }\n\n  /**\n   * Get all current field formats as an object\n   * @returns {object} Object mapping field names to their current formats\n   */\n  getFieldFormats() {\n    const formats = {};\n    this.fields.forEach(field => {\n      const formatString = field.format || field.formatter;\n      if (formatString) {\n        formats[field.name] = formatString;\n      }\n    });\n    return formats;\n  }\n\n  /**\n   * Set up model event listeners if model is provided\n   */\n  onInit() {\n    super.onInit();\n\n    // Listen for model changes\n    if (this.model && typeof this.model.on === 'function') {\n      this.model.on('change', () => {\n        this.render();\n      });\n    }\n  }\n\n  /**\n   * Static factory method\n   * @param {object} options - DataView options\n   * @returns {DataView} New DataView instance\n   */\n  static create(options = {}) {\n    return new DataView(options);\n  }\n}\n\nexport default DataView;\n"],"names":["DataView","View","constructor","options","data","model","fields","columns","responsive","showEmptyValues","emptyValueText","viewOptions","super","tagName","className","this","dataViewOptions","rowClass","itemClass","labelClass","valueClass","onBeforeRender","length","getData","generateFieldsFromData","renderTemplate","items","buildItemsHTML","dataObj","Object","keys","map","key","value","fieldType","inferFieldType","formatter","inferFormatter","name","label","formatLabel","type","format","replace","l","toUpperCase","trim","keyLower","toLowerCase","includes","Array","isArray","renditions","shouldUseDataView","match","formatters","push","unshift","join","window","utils","isObject","id","some","pattern","k","attributes","getFieldValue","field","formatString","parts","split","slice","get","dataFormatter","pipe","template","modelData","renderTemplateString","templateString","dataKey","reduce","o","i","getColumnClasses","classes","getColumnSizeClasses","justify","colSize","cols","Math","floor","buildItemHTML","filter","Boolean","buildLabelHTML","buildValueHTML","escapeHtml","formatDisplayValue","String","rawValue","emailStr","urlStr","formatAsJson","formatAsDataView","phoneStr","jsonString","JSON","stringify","escapedJson","lines","isLarge","uniqueId","random","toString","substr","preview","substring","escapedPreview","syntaxHighlightJson","error","json","bindEvents","element","addEventListener","e","fieldElement","target","closest","fieldName","dataset","find","f","emit","event","preventDefault","stopPropagation","handleJsonCopy","handleJsonToggle","button","jsonData","getAttribute","navigator","clipboard","isSecureContext","writeText","then","showCopyFeedback","textarea","document","createElement","body","appendChild","select","execCommand","removeChild","console","warn","icon","querySelector","isExpanded","setTimeout","innerHTML","originalIcon","classList","add","remove","nestedView","dataViewColumns","onInit","nestedHtml","updateData","newData","set","render","updateFields","newFields","updateConfig","newOptions","refresh","fetch","message","getCurrentData","getField","setFieldFormat","addFormatPipe","clearFieldFormat","inferred","getFormattedValue","targetValue","setFieldFormats","formats","entries","forEach","getFieldFormats","on","create"],"mappings":"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"}

package/dist/chunks/{DataView-CHvoEI4M.js → DataView-i7kpJjVQ.js}

@@ -1,4 +1,4 @@
-import { V as View, d as dataFormatter } from "./Rest-C3fPzCIA.js";
+import { V as View, d as dataFormatter } from "./Rest-ChN4Ntac.js";
 class DataView extends View {
   constructor(options = {}) {
     const {
@@ -859,4 +859,4 @@ class DataView extends View {
 export {
   DataView as default
 };
-//# sourceMappingURL=DataView-CHvoEI4M.js.map
+//# sourceMappingURL=DataView-i7kpJjVQ.js.map

package/dist/chunks/{DataView-CHvoEI4M.js.map → DataView-i7kpJjVQ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"DataView-CHvoEI4M.js","sources":["../../src/core/views/data/DataView.js"],"sourcesContent":["/**\n * DataView - Key/Value data display component for MOJO framework\n * Extends View to display object data in a responsive grid layout with intelligent formatting support\n *\n * Features:\n * - Automatic field generation from data with intelligent type inference\n * - Smart DataFormatter pipe chains (e.g., \"date('MMM D, YYYY')|capitalize\")\n * - Contextual formatting based on field names and values\n * - Support for complex pipe chains like \"truncate(100)|capitalize|badge\"\n * - Nested DataView support with type=\"dataview\" for complex objects\n * - Custom format overrides with fluent API\n * - No format collision: custom field.format completely overrides DataView formatting\n *\n * Format Behavior:\n * - No field.format: DataView applies type-based HTML formatting (badges, links, etc.)\n * - With field.format: DataFormatter handles ALL formatting, DataView only escapes HTML\n *\n * Example Usage:\n * ```javascript\n * const dataView = new DataView({\n *   data: {\n *     name: 'john doe',\n *     email: 'john@example.com',\n *     createdAt: '2024-01-15T10:30:00Z',\n *     price: 99.99,\n *     description: 'A very long description that should be truncated...',\n *     isActive: true\n *   }\n * });\n *\n * // Auto-inferred formats (DataView adds HTML styling):\n * // name: \"truncate(50)|capitalize\"\n * // email: no format → DataView creates mailto: link\n * // createdAt: \"date('MMM D, YYYY')\"\n * // price: \"currency\"\n * // description: \"truncate(200)\"\n * // isActive: no format → DataView creates badge styling\n *\n * // Custom format overrides (DataFormatter handles ALL formatting):\n * dataView\n *   .setFieldFormat('name', 'uppercase|truncate(20)')      // No DataView HTML styling\n *   .setFieldFormat('email', 'email|uppercase')           // No mailto: link\n *   .setFieldFormat('isActive', 'boolean|uppercase')      // No badge styling\n *   .setFieldFormats({\n *     description: 'truncate(50)|capitalize',\n *     createdAt: 'relative'\n *   });\n *\n * // Nested DataView for complex objects:\n * dataView.setFieldFormat('permissions', null); // Clear auto-format\n * // Then configure field: { name: 'permissions', type: 'dataview', label: 'User Permissions' }\n * ```\n */\n\nimport View from '@core/View.js';\nimport dataFormatter from '@core/utils/DataFormatter.js';\n\nclass DataView extends View {\n  constructor(options = {}) {\n    // Extract DataView-specific options\n    const {\n      data,\n      model,\n      fields,\n      columns,\n      responsive,\n      showEmptyValues,\n      emptyValueText,\n      ...viewOptions\n    } = options;\n\n    // Set default view options\n    super({\n      tagName: 'div',\n      className: 'data-view',\n      ...viewOptions\n    });\n\n    // Core properties\n    this.data = data || {};\n    this.fields = fields || [];\n    this.model = model || null;\n\n    // If a model is provided, use it as data source\n    if (this.model) {\n      this.data = this.model;\n    }\n\n    // DataView-specific configuration\n    this.dataViewOptions = {\n      columns: columns || 2,\n      responsive: responsive !== false,  // Default to true\n      showEmptyValues: showEmptyValues || false,\n      emptyValueText: emptyValueText || '—',\n      rowClass: 'row g-3',\n      itemClass: 'data-view-item',\n      labelClass: 'data-view-label fw-semibold text-muted small text-uppercase',\n      valueClass: 'data-view-value'\n    };\n  }\n\n  /**\n   * Lifecycle hook - prepare data and fields before rendering\n   */\n  async onBeforeRender() {\n\n    // Auto-generate fields from data if none provided\n    if (this.fields.length === 0 && this.getData()) {\n      this.generateFieldsFromData();\n    }\n  }\n\n  /**\n   * Override renderTemplate to generate HTML directly\n   * @returns {string} Complete HTML string\n   */\n  async renderTemplate() {\n    const items = this.buildItemsHTML();\n\n    return `\n      <div class=\"${this.dataViewOptions.rowClass}\">\n        ${items}\n      </div>\n    `;\n  }\n\n  /**\n   * Auto-generate field definitions from data object with intelligent type inference\n   */\n  generateFieldsFromData() {\n    const dataObj = this.getData();\n\n    if (dataObj && typeof dataObj === 'object') {\n      this.fields = Object.keys(dataObj).map(key => {\n        const value = dataObj[key];\n        const fieldType = this.inferFieldType(value, key);\n        const formatter = this.inferFormatter(value, key, fieldType);\n\n        return {\n          name: key,\n          label: this.formatLabel(key),\n          type: fieldType,\n          format: formatter,\n          formatter: formatter  // Alias for consistency with TableView\n        };\n      });\n    }\n  }\n\n  /**\n   * Format field name into a readable label\n   * @param {string} name - Field name\n   * @returns {string} Formatted label\n   */\n  formatLabel(name) {\n    return name\n      .replace(/([A-Z])/g, ' $1')  // Add space before capital letters\n      .replace(/[_-]/g, ' ')        // Replace underscores and hyphens with spaces\n      .replace(/\\b\\w/g, l => l.toUpperCase())  // Title case\n      .trim();\n  }\n\n  /**\n   * Infer field type from value and key with improved intelligence\n   * @param {*} value - Field value\n   * @param {string} key - Field key\n   * @returns {string} Field type\n   */\n  inferFieldType(value, key = '') {\n    if (value === null || value === undefined) return 'text';\n\n    const keyLower = key.toLowerCase();\n    const type = typeof value;\n\n    // Date/time patterns\n    if (keyLower.includes('date') || keyLower.includes('time') ||\n        keyLower.includes('created') || keyLower.includes('updated') ||\n        keyLower.includes('modified') || keyLower.includes('last_login') ||\n        keyLower.includes('expires') || keyLower.includes('last_activity')) {\n      return 'datetime';\n    }\n\n    // Email patterns\n    if (keyLower.includes('email') || keyLower.includes('mail')) {\n      return 'email';\n    }\n\n    // URL patterns\n    if (keyLower.includes('url') || keyLower.includes('link') ||\n        keyLower.includes('website') || keyLower.includes('homepage')) {\n      return 'url';\n    }\n\n    // Phone patterns\n    if (keyLower.includes('phone') || keyLower.includes('tel') ||\n        keyLower.includes('mobile') || keyLower.includes('cell')) {\n      return 'phone';\n    }\n\n    // Currency/price patterns\n    if (keyLower.includes('price') || keyLower.includes('cost') ||\n        keyLower.includes('amount') || keyLower.includes('fee') ||\n        keyLower.includes('salary') || keyLower.includes('revenue')) {\n      return 'currency';\n    }\n\n    // File size patterns\n    if (keyLower.includes('size') || keyLower.includes('bytes')) {\n      return 'filesize';\n    }\n\n    // Percentage patterns\n    if (keyLower.includes('percent') || keyLower.includes('rate') ||\n        keyLower.includes('ratio') && type === 'number') {\n      return 'percent';\n    }\n\n    // Type-based inference\n    if (type === 'boolean') return 'boolean';\n    if (type === 'number') return 'number';\n\n    if (type === 'object') {\n      if (Array.isArray(value)) return 'array';\n      if (value && value.renditions) return 'file';\n\n      // Check if object should be displayed as nested DataView\n      if (this.shouldUseDataView(value, keyLower)) {\n        return 'dataview';\n      }\n\n      return 'object';\n    }\n\n    if (type === 'string') {\n      // Pattern matching for strings\n      if (value.includes('@') && value.includes('.')) return 'email';\n      if (value.match(/^\\d{4}-\\d{2}-\\d{2}/)) return 'date';\n      if (value.match(/^https?:\\/\\//)) return 'url';\n      if (value.match(/^\\+?[\\d\\s\\-\\(\\)]+$/)) return 'phone';\n    }\n\n    return 'text';\n  }\n\n  /**\n   * Infer appropriate formatter based on type and context\n   * @param {*} value - Field value\n   * @param {string} key - Field key\n   * @param {string} fieldType - Inferred field type\n   * @returns {string|null} Formatter pipe string\n   */\n  inferFormatter(value, key, fieldType) {\n    const keyLower = key.toLowerCase();\n    const formatters = [];\n\n    switch (fieldType) {\n      case 'datetime':\n        if (keyLower.includes('time') && !keyLower.includes('date')) {\n          formatters.push('time');\n        } else if (keyLower.includes('relative') || keyLower.includes('ago') || keyLower.includes('last_')) {\n          formatters.push('relative');\n        } else if (keyLower.includes('created') || keyLower.includes('updated') || keyLower.includes('modified')) {\n          formatters.push('date(\"MMM D, YYYY\")');\n        } else {\n          formatters.push('date(\"MMMM D, YYYY\")');\n        }\n        break;\n\n      case 'date':\n        if (keyLower.includes('birth') || keyLower.includes('dob')) {\n          formatters.push('date(\"MMMM D, YYYY\")');\n        } else {\n          formatters.push('date(\"MMM D, YYYY\")');\n        }\n        break;\n\n      case 'email':\n        // Don't apply email formatter - DataView handles mailto: links automatically\n        break;\n\n      case 'url':\n        // Don't apply url formatter - DataView handles clickable links automatically\n        break;\n\n      case 'phone':\n        formatters.push('phone');\n        break;\n\n      case 'currency':\n        formatters.push('currency');\n        // Add currency symbol detection if needed\n        if (keyLower.includes('eur') || keyLower.includes('euro')) {\n          formatters[formatters.length - 1] = 'currency(\"EUR\")';\n        } else if (keyLower.includes('gbp') || keyLower.includes('pound')) {\n          formatters[formatters.length - 1] = 'currency(\"GBP\")';\n        }\n        break;\n\n      case 'filesize':\n        formatters.push('filesize');\n        break;\n\n      case 'percent':\n        formatters.push('percent');\n        break;\n\n      case 'number':\n        // Smart number formatting with pipe chains\n        if (typeof value === 'number') {\n          if (keyLower.includes('count') || keyLower.includes('total') || keyLower.includes('followers') || keyLower.includes('views')) {\n            if (value >= 1000) {\n              formatters.push('compact');\n            } else {\n              formatters.push('number');\n            }\n          } else if (keyLower.includes('score') || keyLower.includes('rating')) {\n            formatters.push('number');\n            // Add decimal places for scores\n            if (value % 1 !== 0) {\n              formatters[formatters.length - 1] = 'number(1)';\n            }\n          } else if (keyLower.includes('version') || keyLower.includes('id')) {\n            // Don't format IDs and versions\n            return null;\n          } else {\n            formatters.push('number');\n          }\n        }\n        break;\n\n      case 'boolean':\n        // Don't apply boolean formatter - DataView handles badge styling automatically\n        break;\n\n      case 'text':\n        // Smart text formatting with contextual pipe chains\n        if (typeof value === 'string') {\n          // Handle different text contexts\n          if (keyLower.includes('description') || keyLower.includes('content') || keyLower.includes('body')) {\n            if (value.length > 200) {\n              formatters.push('truncate(200)');\n            } else if (value.length > 100) {\n              formatters.push('truncate(100)');\n            }\n          } else if (keyLower.includes('summary') || keyLower.includes('excerpt')) {\n            if (value.length > 150) {\n              formatters.push('truncate(150)');\n            }\n          } else if (keyLower.includes('name') || keyLower.includes('title') || keyLower.includes('label')) {\n            formatters.push('capitalize');\n            if (value.length > 50) {\n              formatters.unshift('truncate(50)'); // Truncate first, then capitalize\n            }\n          } else if (keyLower.includes('slug') || keyLower.includes('handle') || keyLower.includes('username')) {\n            formatters.push('slug');\n          } else if (keyLower.includes('code') || keyLower.includes('token') || keyLower.includes('key')) {\n            // Show codes/tokens with masking if long\n            if (value.length > 20) {\n              formatters.push('mask');\n            }\n          } else {\n            // Generic text handling\n            if (value.length > 100) {\n              formatters.push('truncate(100)');\n            }\n          }\n        }\n        break;\n\n      case 'array':\n      case 'object':\n        // Don't apply json formatter - DataView handles JSON display automatically\n        break;\n\n      case 'dataview':\n        // Don't apply any formatter - nested DataView handles its own formatting\n        break;\n\n      default:\n        // Handle any missed cases with basic text formatting\n        if (typeof value === 'string' && value.length > 100) {\n          formatters.push('truncate(100)');\n        }\n        break;\n    }\n\n    return formatters.length > 0 ? formatters.join('|') : null;\n  }\n\n  /**\n   * Determine if an object should be displayed as nested DataView vs JSON\n   * @param {object} value - Object value to check\n   * @param {string} keyLower - Lowercase field key\n   * @returns {boolean} True if should use DataView\n   */\n  shouldUseDataView(value, keyLower) {\n    if (!value || typeof value !== 'object' || Array.isArray(value)) {\n      return false;\n    }\n\n    // Check for common patterns that benefit from DataView display\n    const dataViewPatterns = [\n      'permissions', 'perms', 'access', 'rights',\n      'settings', 'config', 'configuration', 'options',\n      'profile', 'info', 'details', 'data',\n      'metadata', 'meta', 'attributes', 'props',\n      'preferences', 'prefs', 'user_data',\n      'contact', 'address', 'location',\n      'stats', 'statistics', 'metrics', 'counts'\n    ];\n\n    if (window.utils && window.utils.isObject(value) && value.id) {\n        return true;\n    }\n\n    // Check if key matches common patterns\n    const matchesPattern = dataViewPatterns.some(pattern => keyLower.includes(pattern));\n\n    if (matchesPattern) {\n      // Additional checks to ensure it's suitable for DataView\n      const keys = Object.keys(value);\n\n      // Good candidates: objects with multiple simple key-value pairs\n      if (keys.length >= 2 && keys.length <= 20) {\n        const hasComplexNesting = keys.some(k =>\n          typeof value[k] === 'object' &&\n          value[k] !== null &&\n          !Array.isArray(value[k]) &&\n          Object.keys(value[k]).length > 3\n        );\n\n        // Use DataView if not too deeply nested\n        if (!hasComplexNesting) {\n          return true;\n        }\n      }\n    }\n\n    return false;\n  }\n\n  /**\n   * Get data object (handles both raw objects and Models)\n   * @returns {object} Data object\n   */\n  getData() {\n    if (this.model && this.model.attributes) {\n      return { ...this.model.attributes };\n    }\n    return this.data || {};\n  }\n\n  /**\n   * Get field value with formatting support\n   * @param {object} field - Field definition\n   * @returns {*} Field value (formatted if specified)\n   */\n  getFieldValue(field) {\n    let value;\n    let key = field.name || field.key;\n    let formatString = field.format || field.formatter;\n    if (!key) return null;\n\n    // Check if the name field contains a pipe (e.g., 'is_tor|status_text')\n    // This allows inline formatter syntax in the name field\n    if (key && key.includes('|')) {\n      const parts = key.split('|');\n      key = parts[0].trim();\n      // If no explicit formatter was set, use the one from the name\n      if (!formatString) {\n        formatString = parts.slice(1).join('|').trim();\n      }\n    }\n\n    // Get raw value from data source\n    if (this.model && typeof this.model.get === 'function') {\n      // For models, get raw value first, then apply formatting separately\n      // This ensures we don't break pipe chains by concatenating strings\n      value = this.model.get(key);\n    } else {\n      // Plain object access\n      value = this.getData()[key];\n    }\n\n    // Apply formatting using DataFormatter pipe system if specified\n    // Support both 'format' and 'formatter' for consistency with TableView\n    if (formatString) {\n      value = dataFormatter.pipe(value, formatString);\n    }\n\n    // Handle empty values\n    if (value === null || value === undefined || value === '') {\n      return this.dataViewOptions.showEmptyValues ? this.dataViewOptions.emptyValueText : null;\n    }\n\n    // Apply template if provided\n    if (field.template) {\n      const modelData = this.model ? this.model : this.data;\n      return this.renderTemplateString(field.template, modelData);\n    }\n\n    return value;\n  }\n\n  /**\n   * Render a template string with data from a model or object.\n   * Replaces {{key}} and {{nested.key}} placeholders.\n   * @param {string} templateString - The template string.\n   * @param {object} data - The data object or model.\n   * @returns {string} The rendered string.\n   */\n  renderTemplateString(templateString, data) {\n    if (!templateString || !data) {\n      return '';\n    }\n\n    // Regex to find all {{...}} placeholders\n    return templateString.replace(/\\{\\{([^}]+)\\}\\}/g, (match, key) => {\n      const trimmedKey = key.trim();\n      let value;\n\n      // Handle potential formatters in the template key\n      const parts = trimmedKey.split('|');\n      const dataKey = parts[0];\n      const formatters = parts.slice(1).join('|');\n\n      // Get value from model or plain object\n      if (this.model && typeof this.model.get === 'function') {\n        value = this.model.get(dataKey);\n      } else {\n        // Handle nested keys for plain objects\n        value = dataKey.split('.').reduce((o, i) => (o ? o[i] : undefined), data);\n      }\n\n      // Apply formatters if any\n      if (formatters) {\n        value = dataFormatter.pipe(value, formatters);\n      }\n\n      return value !== undefined && value !== null ? value : '';\n    });\n  }\n\n  /**\n   * Generate column classes based on configuration\n   * @param {object} field - Field definition\n   * @returns {string} CSS classes\n   */\n  getColumnClasses(field) {\n      let classes = this.getColumnSizeClasses(field);\n      if (field.justify == \"right\") {\n        classes += ` d-flex justify-content-end`;\n      } else if (field.justify == \"center\") {\n        classes += ` d-flex justify-content-center`;\n      }\n      return classes;\n  }\n\n  /**\n   * Generate column size classes based on configuration\n   * @param {object} field - Field definition\n   * @returns {string} CSS classes\n   */\n  getColumnSizeClasses(field) {\n    // JSON objects and nested DataViews always use full width for better display\n    if (field.type === 'array' || field.type === 'object' || field.type === 'dataview') {\n      return 'col-12';\n    }\n\n    const colSize = field.columns || field.colSize || field.cols || Math.floor(12 / this.dataViewOptions.columns);\n\n    if (this.dataViewOptions.responsive) {\n      // Responsive breakpoints: 1 column on small, configured on larger screens\n      return `col-12 col-md-${colSize}`;\n    }\n\n    return `col-${colSize}`;\n  }\n\n  /**\n   * Build HTML for all data items\n   * @returns {string} Items HTML\n   */\n  buildItemsHTML() {\n    return this.fields\n      .map(field => this.buildItemHTML(field))\n      .filter(Boolean)  // Remove empty items\n      .join('');\n  }\n\n  /**\n   * Build HTML for a single data item\n   * @param {object} field - Field definition\n   * @returns {string} Item HTML\n   */\n  buildItemHTML(field) {\n    const value = this.getFieldValue(field);\n\n    // Skip fields with no value if showEmptyValues is false\n    if (value === null && !this.dataViewOptions.showEmptyValues) {\n      return '';\n    }\n\n    const label = field.label || this.formatLabel(field.name);\n    const colClasses = this.getColumnClasses(field);\n\n    return `\n      <div class=\"${colClasses}\">\n        <div class=\"${this.dataViewOptions.itemClass} ${field.className}\" data-field=\"${field.name}\">\n          ${this.buildLabelHTML(label, field)}\n          ${this.buildValueHTML(value, field)}\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Build label HTML\n   * @param {string} label - Label text\n   * @param {object} field - Field definition\n   * @returns {string} Label HTML\n   */\n  buildLabelHTML(label, field) {\n    const labelClass = field.labelClass || this.dataViewOptions.labelClass;\n    return `<div class=\"${labelClass}\">${this.escapeHtml(label)}:</div>`;\n  }\n\n  /**\n   * Build value HTML with type-specific formatting\n   * @param {*} value - Field value\n   * @param {object} field - Field definition\n   * @returns {string} Value HTML\n   */\n  buildValueHTML(value, field) {\n    const valueClass = field.valueClass || this.dataViewOptions.valueClass;\n    const displayValue = this.formatDisplayValue(value, field);\n    return `<div class=\"${valueClass}\">${displayValue}</div>`;\n  }\n\n  /**\n   * Format value for display with enhanced type handling\n   * @param {*} value - Formatted value from DataFormatter (or raw if no format)\n   * @param {object} field - Field definition\n   * @returns {string} Formatted display value with HTML markup\n   */\n  formatDisplayValue(value, field) {\n    if (value === null || value === undefined) {\n      return this.dataViewOptions.emptyValueText;\n    }\n\n    // If a template was used, the value is already the final HTML. Return it directly.\n    if (field.template) {\n      return String(value);\n    }\n\n    // If a custom format is specified, trust the DataFormatter output.\n    // Support both 'format' and 'formatter' for consistency with TableView\n    const formatString = field.format || field.formatter;\n    if (formatString) {\n      // If a formatter is explicitly specified, render its output as HTML\n      // The DataFormatter is responsible for proper escaping when needed\n      return String(value);\n    }\n\n    // No custom format - apply DataView's default type-specific HTML formatting\n    // Get original raw value for special cases\n    const rawValue = this.getData()[field.name];\n\n    // Handle types that need special HTML presentation (only when no custom format)\n    switch (field.type) {\n      case 'boolean':\n        // Use standard boolean badges (no custom format was applied)\n        return rawValue ?\n          '<span class=\"badge bg-success\">Yes</span>' :\n          '<span class=\"badge bg-secondary\">No</span>';\n\n      case 'email':\n        // Create clickable email links (no custom format was applied)\n        const emailStr = String(value);\n        return `<a href=\"mailto:${this.escapeHtml(emailStr)}\" class=\"text-decoration-none\">${this.escapeHtml(emailStr)}</a>`;\n\n      case 'url':\n        // Create clickable URL links (no custom format was applied)\n        const urlStr = String(value);\n        return `<a href=\"${this.escapeHtml(urlStr)}\" target=\"_blank\" rel=\"noopener\" class=\"text-decoration-none\">${this.escapeHtml(urlStr)} <i class=\"bi bi-box-arrow-up-right\"></i></a>`;\n\n      case 'array':\n      case 'object':\n        // Display as JSON with special HTML formatting (no custom format was applied)\n        return this.formatAsJson(rawValue);\n\n      case 'dataview':\n        // Create nested DataView for complex objects\n        return this.formatAsDataView(rawValue, field);\n\n      case 'phone':\n        // Create tel: links for phone numbers (no custom format was applied)\n        const phoneStr = String(value);\n        const telHref = phoneStr.replace(/[^\\d\\+]/g, ''); // Clean for tel: link\n        return `<a href=\"tel:${telHref}\" class=\"text-decoration-none\">${this.escapeHtml(phoneStr)}</a>`;\n\n      default:\n        // For all other types with no custom format, just escape and return\n        return this.escapeHtml(String(value));\n    }\n  }\n\n  /**\n   * Format object/array values as styled JSON\n   * @param {*} value - Object or array value\n   * @returns {string} Formatted JSON HTML\n   */\n  formatAsJson(value) {\n    try {\n      const jsonString = JSON.stringify(value, null, 2);\n      const escapedJson = this.escapeHtml(jsonString);\n      const lines = jsonString.split('\\n').length;\n      const isLarge = lines > 10 || jsonString.length > 500;\n      const uniqueId = `json-${Math.random().toString(36).substr(2, 9)}`;\n\n      // Create collapsible JSON display for large objects\n      if (isLarge) {\n        const preview = JSON.stringify(value).substring(0, 100) + (JSON.stringify(value).length > 100 ? '...' : '');\n        const escapedPreview = this.escapeHtml(preview);\n\n        return `\n          <div class=\"json-container\">\n            <div class=\"d-flex align-items-center justify-content-between mb-1\">\n              <small class=\"text-muted\">${Array.isArray(value) ? 'Array' : 'Object'} (${lines} lines)</small>\n              <div class=\"btn-group btn-group-sm\" role=\"group\">\n                <button type=\"button\" class=\"btn btn-outline-secondary btn-sm json-toggle\" data-bs-toggle=\"collapse\" data-bs-target=\"#${uniqueId}\" aria-expanded=\"false\">\n                  <i class=\"bi bi-eye\"></i> Show\n                </button>\n                <button type=\"button\" class=\"btn btn-outline-secondary btn-sm json-copy\" data-json='${this.escapeHtml(jsonString)}' title=\"Copy JSON\">\n                  <i class=\"bi bi-clipboard\"></i>\n                </button>\n              </div>\n            </div>\n            <div class=\"json-preview bg-light p-2 rounded small border\" style=\"font-family: 'Courier New', monospace;\">\n              <code class=\"text-muted\">${escapedPreview}</code>\n            </div>\n            <div class=\"collapse mt-2\" id=\"${uniqueId}\">\n              <pre class=\"json-display p-3 rounded small mb-0\" style=\"max-height: 400px; overflow-y: auto; white-space: pre-wrap; font-family: 'Courier New', monospace;\"><code>${this.syntaxHighlightJson(escapedJson)}</code></pre>\n            </div>\n          </div>\n        `;\n      } else {\n        // Small objects - show directly with copy button\n        return `\n          <div class=\"json-container\">\n            <div class=\"d-flex align-items-center justify-content-between mb-1\">\n              <small class=\"text-muted\">${Array.isArray(value) ? 'Array' : 'Object'}</small>\n              <button type=\"button\" class=\"btn btn-outline-secondary btn-sm json-copy\" data-json='${this.escapeHtml(jsonString)}' title=\"Copy JSON\">\n                <i class=\"bi bi-clipboard\"></i>\n              </button>\n            </div>\n            <pre class=\"json-display bg-light p-2 rounded small mb-0 border\" style=\"white-space: pre-wrap; font-family: 'Courier New', monospace;\"><code>${this.syntaxHighlightJson(escapedJson)}</code></pre>\n          </div>\n        `;\n      }\n    } catch (error) {\n      // Fallback for objects that can't be stringified\n      return `<span class=\"text-muted fst-italic\">[Object: ${typeof value}] - Cannot display as JSON</span>`;\n    }\n  }\n\n  /**\n   * Apply basic syntax highlighting to JSON\n   * @param {string} json - Escaped JSON string\n   * @returns {string} JSON with basic syntax highlighting\n   */\n  syntaxHighlightJson(json) {\n    return json\n      .replace(/(\"([^\"\\\\]|\\\\.)*\")\\s*:/g, '<span style=\"color: #0969da;\">$1</span>:') // Keys (blue)\n      .replace(/:\\s*(\"([^\"\\\\]|\\\\.)*\")/g, ': <span style=\"color: #0a3069;\">$1</span>') // String values (dark blue)\n      .replace(/:\\s*(true|false)/g, ': <span style=\"color: #8250df;\">$1</span>') // Booleans (purple)\n      .replace(/:\\s*(null)/g, ': <span style=\"color: #656d76;\">$1</span>') // Null (gray)\n      .replace(/:\\s*(-?\\d+\\.?\\d*)/g, ': <span style=\"color: #0550ae;\">$1</span>'); // Numbers (blue)\n  }\n\n  /**\n   * Bind events including JSON interaction handlers\n   */\n  bindEvents() {\n    super.bindEvents();\n\n    if (!this.element) return;\n\n    // Add click handler for field interactions\n    this.element.addEventListener('click', (e) => {\n      const fieldElement = e.target.closest('[data-field]');\n      if (fieldElement) {\n        const fieldName = fieldElement.dataset.field;\n        const field = this.fields.find(f => f.name === fieldName);\n        this.emit('field:click', { field, fieldName, element: fieldElement, event: e });\n      }\n\n      // Handle JSON copy button clicks\n      if (e.target.closest('.json-copy')) {\n        e.preventDefault();\n        e.stopPropagation();\n        this.handleJsonCopy(e.target.closest('.json-copy'));\n      }\n\n      // Handle JSON toggle button clicks\n      if (e.target.closest('.json-toggle')) {\n        this.handleJsonToggle(e.target.closest('.json-toggle'));\n      }\n    });\n  }\n\n  /**\n   * Handle copying JSON to clipboard\n   * @param {HTMLElement} button - Copy button element\n   */\n  handleJsonCopy(button) {\n    const jsonData = button.getAttribute('data-json');\n    if (!jsonData) return;\n\n    try {\n      // Use modern clipboard API if available\n      if (navigator.clipboard && window.isSecureContext) {\n        navigator.clipboard.writeText(jsonData).then(() => {\n          this.showCopyFeedback(button);\n        });\n      } else {\n        // Fallback for older browsers\n        const textarea = document.createElement('textarea');\n        textarea.value = jsonData;\n        document.body.appendChild(textarea);\n        textarea.select();\n        document.execCommand('copy');\n        document.body.removeChild(textarea);\n        this.showCopyFeedback(button);\n      }\n    } catch (error) {\n      console.warn('Failed to copy JSON:', error);\n    }\n  }\n\n  /**\n   * Handle JSON toggle button state\n   * @param {HTMLElement} button - Toggle button element\n   */\n  handleJsonToggle(button) {\n    const icon = button.querySelector('i');\n    const isExpanded = button.getAttribute('aria-expanded') === 'true';\n\n    // Update button text and icon\n    setTimeout(() => {\n      if (isExpanded) {\n        icon.className = 'bi bi-eye-slash';\n        button.innerHTML = '<i class=\"bi bi-eye-slash\"></i> Hide';\n      } else {\n        icon.className = 'bi bi-eye';\n        button.innerHTML = '<i class=\"bi bi-eye\"></i> Show';\n      }\n    }, 10);\n  }\n\n  /**\n   * Show visual feedback for successful copy\n   * @param {HTMLElement} button - Copy button element\n   */\n  showCopyFeedback(button) {\n    const originalIcon = button.querySelector('i').className;\n    const icon = button.querySelector('i');\n\n    // Show success state\n    icon.className = 'bi bi-check text-success';\n    button.classList.add('btn-success');\n    button.classList.remove('btn-outline-secondary');\n\n    // Reset after 1 second\n    setTimeout(() => {\n      icon.className = originalIcon;\n      button.classList.remove('btn-success');\n      button.classList.add('btn-outline-secondary');\n    }, 1000);\n  }\n\n  /**\n   * Format complex objects as nested DataView\n   * @param {object} value - Object value to display as DataView\n   * @param {object} field - Field definition\n   * @returns {string} Formatted DataView HTML\n   */\n  formatAsDataView(value, field) {\n    if (!value || typeof value !== 'object') {\n      return `<span class=\"text-muted fst-italic\">No data available</span>`;\n    }\n\n    try {\n      // Create nested DataView instance\n      const nestedView = new (this.constructor)({\n        data: value,\n        columns: field.dataViewColumns || 2,\n        showEmptyValues: field.showEmptyValues ?? true,\n        emptyValueText: field.emptyValueText || 'Not set',\n        // Pass any other dataView-specific options from field config\n        ...(field.dataViewOptions || {})\n      });\n\n        nestedView.onInit();\n        nestedView.generateFieldsFromData();\n      // Generate the nested DataView HTML\n      const nestedHtml = nestedView.buildItemsHTML();\n\n      // Wrap in a styled container with optional label\n      // const labelHtml = field.label ?\n      //   `<h6 class=\"fw-semibold text-muted mb-3 border-bottom pb-2\">${this.escapeHtml(field.label)}</h6>` :\n      //   '';\n\n      return `\n        <div class=\"nested-dataview border rounded p-3 bg-light\">\n          <div class=\"${nestedView.dataViewOptions.rowClass}\">\n            ${nestedHtml}\n          </div>\n        </div>\n      `;\n    } catch (error) {\n      console.error('Error creating nested DataView:', error);\n      return `<span class=\"text-danger\">Error displaying nested data</span>`;\n    }\n  }\n\n  /**\n   * Update the data and re-render\n   * @param {object} newData - New data object\n   * @returns {Promise<DataView>} Promise resolving to this instance\n   */\n  async updateData(newData) {\n    this.data = newData;\n\n    // If model is provided, update it instead\n    if (this.model && typeof this.model.set === 'function') {\n      this.model.set(newData);\n    }\n\n    // Clear fields to trigger regeneration on next render\n    if (this.fields.length > 0 && !this.options.fields) {\n      this.fields = [];\n    }\n\n    await this.render();\n    this.emit('data:updated', { data: newData });\n    return this;\n  }\n\n  /**\n   * Update field configuration and re-render\n   * @param {array} newFields - New field configuration\n   * @returns {Promise<DataView>} Promise resolving to this instance\n   */\n  async updateFields(newFields) {\n    this.fields = newFields;\n    await this.render();\n    this.emit('fields:updated', { fields: newFields });\n    return this;\n  }\n\n  /**\n   * Update configuration and re-render\n   * @param {object} newOptions - New configuration options\n   * @returns {Promise<DataView>} Promise resolving to this instance\n   */\n  async updateConfig(newOptions) {\n    this.dataViewOptions = { ...this.dataViewOptions, ...newOptions };\n    await this.render();\n    this.emit('config:updated', { options: this.dataViewOptions });\n    return this;\n  }\n\n  /**\n   * Refresh data from model if available\n   * @returns {Promise<DataView>} Promise resolving to this instance\n   */\n  async refresh() {\n    if (this.model && typeof this.model.fetch === 'function') {\n      try {\n        await this.model.fetch();\n        this.emit('data:refreshed', { model: this.model });\n      } catch (error) {\n        this.emit('error', { error, message: 'Failed to refresh data' });\n        throw error;\n      }\n    }\n    return this;\n  }\n\n  /**\n   * Get current data\n   * @returns {object} Current data object\n   */\n  getCurrentData() {\n    return this.getData();\n  }\n\n  /**\n   * Get field definition by name\n   * @param {string} name - Field name\n   * @returns {object|null} Field definition\n   */\n  getField(name) {\n    return this.fields.find(field => field.name === name) || null;\n  }\n\n  /**\n   * Set custom format for a specific field\n   * @param {string} fieldName - Name of the field\n   * @param {string} format - Pipe format string (e.g., \"currency|uppercase\")\n   * @returns {DataView} This instance for chaining\n   */\n  setFieldFormat(fieldName, format) {\n    const field = this.getField(fieldName);\n    if (field) {\n      field.format = format;\n      field.formatter = format;  // Keep both in sync\n    } else {\n      // Create new field if it doesn't exist\n      this.fields.push({\n        name: fieldName,\n        label: this.formatLabel(fieldName),\n        type: this.inferFieldType(this.getData()[fieldName], fieldName),\n        format: format,\n        formatter: format  // Keep both in sync\n      });\n    }\n    return this;\n  }\n\n  /**\n   * Add additional formatter to existing field format pipe chain\n   * @param {string} fieldName - Name of the field\n   * @param {string} formatter - Formatter to add (e.g., \"uppercase\", \"truncate(50)\")\n   * @returns {DataView} This instance for chaining\n   */\n  addFormatPipe(fieldName, formatter) {\n    const field = this.getField(fieldName);\n    if (field) {\n      if (field.format) {\n        field.format += `|${formatter}`;\n        field.formatter = field.format;  // Keep both in sync\n      } else {\n        field.format = formatter;\n        field.formatter = formatter;  // Keep both in sync\n      }\n    }\n    return this;\n  }\n\n  /**\n   * Clear custom format for a field (revert to auto-inferred format)\n   * @param {string} fieldName - Name of the field\n   * @returns {DataView} This instance for chaining\n   */\n  clearFieldFormat(fieldName) {\n    const field = this.getField(fieldName);\n    if (field) {\n      const data = this.getData();\n      const inferred = this.inferFormatter(data[fieldName], fieldName, field.type);\n      field.format = inferred;\n      field.formatter = inferred;  // Keep both in sync\n    }\n    return this;\n  }\n\n  /**\n   * Get formatted value for a specific field without rendering\n   * @param {string} fieldName - Name of the field\n   * @param {*} value - Optional value to format (uses current data if not provided)\n   * @returns {*} Formatted value\n   */\n  getFormattedValue(fieldName, value = null) {\n    const field = this.getField(fieldName);\n    if (!field) return null;\n\n    const targetValue = value !== null ? value : this.getData()[fieldName];\n\n    // Support both 'format' and 'formatter' for consistency with TableView\n    const formatString = field.format || field.formatter;\n    if (formatString && targetValue != null) {\n      return dataFormatter.pipe(targetValue, formatString);\n    }\n\n    return targetValue;\n  }\n\n  /**\n   * Set multiple field formats at once\n   * @param {object} formats - Object mapping field names to format strings\n   * @returns {DataView} This instance for chaining\n   */\n  setFieldFormats(formats) {\n    Object.entries(formats).forEach(([fieldName, format]) => {\n      this.setFieldFormat(fieldName, format);\n    });\n    return this;\n  }\n\n  /**\n   * Get all current field formats as an object\n   * @returns {object} Object mapping field names to their current formats\n   */\n  getFieldFormats() {\n    const formats = {};\n    this.fields.forEach(field => {\n      const formatString = field.format || field.formatter;\n      if (formatString) {\n        formats[field.name] = formatString;\n      }\n    });\n    return formats;\n  }\n\n  /**\n   * Set up model event listeners if model is provided\n   */\n  onInit() {\n    super.onInit();\n\n    // Listen for model changes\n    if (this.model && typeof this.model.on === 'function') {\n      this.model.on('change', () => {\n        this.render();\n      });\n    }\n  }\n\n  /**\n   * Static factory method\n   * @param {object} options - DataView options\n   * @returns {DataView} New DataView instance\n   */\n  static create(options = {}) {\n    return new DataView(options);\n  }\n}\n\nexport default DataView;\n"],"names":[],"mappings":";AAyDA,MAAM,iBAAiB,KAAK;AAAA,EAC1B,YAAY,UAAU,IAAI;AAExB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACT,IAAQ;AAGJ,UAAM;AAAA,MACJ,SAAS;AAAA,MACT,WAAW;AAAA,MACX,GAAG;AAAA,IACT,CAAK;AAGD,SAAK,OAAO,QAAQ,CAAA;AACpB,SAAK,SAAS,UAAU,CAAA;AACxB,SAAK,QAAQ,SAAS;AAGtB,QAAI,KAAK,OAAO;AACd,WAAK,OAAO,KAAK;AAAA,IACnB;AAGA,SAAK,kBAAkB;AAAA,MACrB,SAAS,WAAW;AAAA,MACpB,YAAY,eAAe;AAAA;AAAA,MAC3B,iBAAiB,mBAAmB;AAAA,MACpC,gBAAgB,kBAAkB;AAAA,MAClC,UAAU;AAAA,MACV,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,YAAY;AAAA,IAClB;AAAA,EACE;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,iBAAiB;AAGrB,QAAI,KAAK,OAAO,WAAW,KAAK,KAAK,WAAW;AAC9C,WAAK,uBAAsB;AAAA,IAC7B;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,iBAAiB;AACrB,UAAM,QAAQ,KAAK,eAAc;AAEjC,WAAO;AAAA,oBACS,KAAK,gBAAgB,QAAQ;AAAA,UACvC,KAAK;AAAA;AAAA;AAAA,EAGb;AAAA;AAAA;AAAA;AAAA,EAKA,yBAAyB;AACvB,UAAM,UAAU,KAAK,QAAO;AAE5B,QAAI,WAAW,OAAO,YAAY,UAAU;AAC1C,WAAK,SAAS,OAAO,KAAK,OAAO,EAAE,IAAI,SAAO;AAC5C,cAAM,QAAQ,QAAQ,GAAG;AACzB,cAAM,YAAY,KAAK,eAAe,OAAO,GAAG;AAChD,cAAM,YAAY,KAAK,eAAe,OAAO,KAAK,SAAS;AAE3D,eAAO;AAAA,UACL,MAAM;AAAA,UACN,OAAO,KAAK,YAAY,GAAG;AAAA,UAC3B,MAAM;AAAA,UACN,QAAQ;AAAA,UACR;AAAA;AAAA,QACV;AAAA,MACM,CAAC;AAAA,IACH;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAY,MAAM;AAChB,WAAO,KACJ,QAAQ,YAAY,KAAK,EACzB,QAAQ,SAAS,GAAG,EACpB,QAAQ,SAAS,OAAK,EAAE,YAAW,CAAE,EACrC,KAAI;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,eAAe,OAAO,MAAM,IAAI;AAC9B,QAAI,UAAU,QAAQ,UAAU,OAAW,QAAO;AAElD,UAAM,WAAW,IAAI,YAAW;AAChC,UAAM,OAAO,OAAO;AAGpB,QAAI,SAAS,SAAS,MAAM,KAAK,SAAS,SAAS,MAAM,KACrD,SAAS,SAAS,SAAS,KAAK,SAAS,SAAS,SAAS,KAC3D,SAAS,SAAS,UAAU,KAAK,SAAS,SAAS,YAAY,KAC/D,SAAS,SAAS,SAAS,KAAK,SAAS,SAAS,eAAe,GAAG;AACtE,aAAO;AAAA,IACT;AAGA,QAAI,SAAS,SAAS,OAAO,KAAK,SAAS,SAAS,MAAM,GAAG;AAC3D,aAAO;AAAA,IACT;AAGA,QAAI,SAAS,SAAS,KAAK,KAAK,SAAS,SAAS,MAAM,KACpD,SAAS,SAAS,SAAS,KAAK,SAAS,SAAS,UAAU,GAAG;AACjE,aAAO;AAAA,IACT;AAGA,QAAI,SAAS,SAAS,OAAO,KAAK,SAAS,SAAS,KAAK,KACrD,SAAS,SAAS,QAAQ,KAAK,SAAS,SAAS,MAAM,GAAG;AAC5D,aAAO;AAAA,IACT;AAGA,QAAI,SAAS,SAAS,OAAO,KAAK,SAAS,SAAS,MAAM,KACtD,SAAS,SAAS,QAAQ,KAAK,SAAS,SAAS,KAAK,KACtD,SAAS,SAAS,QAAQ,KAAK,SAAS,SAAS,SAAS,GAAG;AAC/D,aAAO;AAAA,IACT;AAGA,QAAI,SAAS,SAAS,MAAM,KAAK,SAAS,SAAS,OAAO,GAAG;AAC3D,aAAO;AAAA,IACT;AAGA,QAAI,SAAS,SAAS,SAAS,KAAK,SAAS,SAAS,MAAM,KACxD,SAAS,SAAS,OAAO,KAAK,SAAS,UAAU;AACnD,aAAO;AAAA,IACT;AAGA,QAAI,SAAS,UAAW,QAAO;AAC/B,QAAI,SAAS,SAAU,QAAO;AAE9B,QAAI,SAAS,UAAU;AACrB,UAAI,MAAM,QAAQ,KAAK,EAAG,QAAO;AACjC,UAAI,SAAS,MAAM,WAAY,QAAO;AAGtC,UAAI,KAAK,kBAAkB,OAAO,QAAQ,GAAG;AAC3C,eAAO;AAAA,MACT;AAEA,aAAO;AAAA,IACT;AAEA,QAAI,SAAS,UAAU;AAErB,UAAI,MAAM,SAAS,GAAG,KAAK,MAAM,SAAS,GAAG,EAAG,QAAO;AACvD,UAAI,MAAM,MAAM,oBAAoB,EAAG,QAAO;AAC9C,UAAI,MAAM,MAAM,cAAc,EAAG,QAAO;AACxC,UAAI,MAAM,MAAM,oBAAoB,EAAG,QAAO;AAAA,IAChD;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,eAAe,OAAO,KAAK,WAAW;AACpC,UAAM,WAAW,IAAI,YAAW;AAChC,UAAM,aAAa,CAAA;AAEnB,YAAQ,WAAS;AAAA,MACf,KAAK;AACH,YAAI,SAAS,SAAS,MAAM,KAAK,CAAC,SAAS,SAAS,MAAM,GAAG;AAC3D,qBAAW,KAAK,MAAM;AAAA,QACxB,WAAW,SAAS,SAAS,UAAU,KAAK,SAAS,SAAS,KAAK,KAAK,SAAS,SAAS,OAAO,GAAG;AAClG,qBAAW,KAAK,UAAU;AAAA,QAC5B,WAAW,SAAS,SAAS,SAAS,KAAK,SAAS,SAAS,SAAS,KAAK,SAAS,SAAS,UAAU,GAAG;AACxG,qBAAW,KAAK,qBAAqB;AAAA,QACvC,OAAO;AACL,qBAAW,KAAK,sBAAsB;AAAA,QACxC;AACA;AAAA,MAEF,KAAK;AACH,YAAI,SAAS,SAAS,OAAO,KAAK,SAAS,SAAS,KAAK,GAAG;AAC1D,qBAAW,KAAK,sBAAsB;AAAA,QACxC,OAAO;AACL,qBAAW,KAAK,qBAAqB;AAAA,QACvC;AACA;AAAA,MAEF,KAAK;AAEH;AAAA,MAEF,KAAK;AAEH;AAAA,MAEF,KAAK;AACH,mBAAW,KAAK,OAAO;AACvB;AAAA,MAEF,KAAK;AACH,mBAAW,KAAK,UAAU;AAE1B,YAAI,SAAS,SAAS,KAAK,KAAK,SAAS,SAAS,MAAM,GAAG;AACzD,qBAAW,WAAW,SAAS,CAAC,IAAI;AAAA,QACtC,WAAW,SAAS,SAAS,KAAK,KAAK,SAAS,SAAS,OAAO,GAAG;AACjE,qBAAW,WAAW,SAAS,CAAC,IAAI;AAAA,QACtC;AACA;AAAA,MAEF,KAAK;AACH,mBAAW,KAAK,UAAU;AAC1B;AAAA,MAEF,KAAK;AACH,mBAAW,KAAK,SAAS;AACzB;AAAA,MAEF,KAAK;AAEH,YAAI,OAAO,UAAU,UAAU;AAC7B,cAAI,SAAS,SAAS,OAAO,KAAK,SAAS,SAAS,OAAO,KAAK,SAAS,SAAS,WAAW,KAAK,SAAS,SAAS,OAAO,GAAG;AAC5H,gBAAI,SAAS,KAAM;AACjB,yBAAW,KAAK,SAAS;AAAA,YAC3B,OAAO;AACL,yBAAW,KAAK,QAAQ;AAAA,YAC1B;AAAA,UACF,WAAW,SAAS,SAAS,OAAO,KAAK,SAAS,SAAS,QAAQ,GAAG;AACpE,uBAAW,KAAK,QAAQ;AAExB,gBAAI,QAAQ,MAAM,GAAG;AACnB,yBAAW,WAAW,SAAS,CAAC,IAAI;AAAA,YACtC;AAAA,UACF,WAAW,SAAS,SAAS,SAAS,KAAK,SAAS,SAAS,IAAI,GAAG;AAElE,mBAAO;AAAA,UACT,OAAO;AACL,uBAAW,KAAK,QAAQ;AAAA,UAC1B;AAAA,QACF;AACA;AAAA,MAEF,KAAK;AAEH;AAAA,MAEF,KAAK;AAEH,YAAI,OAAO,UAAU,UAAU;AAE7B,cAAI,SAAS,SAAS,aAAa,KAAK,SAAS,SAAS,SAAS,KAAK,SAAS,SAAS,MAAM,GAAG;AACjG,gBAAI,MAAM,SAAS,KAAK;AACtB,yBAAW,KAAK,eAAe;AAAA,YACjC,WAAW,MAAM,SAAS,KAAK;AAC7B,yBAAW,KAAK,eAAe;AAAA,YACjC;AAAA,UACF,WAAW,SAAS,SAAS,SAAS,KAAK,SAAS,SAAS,SAAS,GAAG;AACvE,gBAAI,MAAM,SAAS,KAAK;AACtB,yBAAW,KAAK,eAAe;AAAA,YACjC;AAAA,UACF,WAAW,SAAS,SAAS,MAAM,KAAK,SAAS,SAAS,OAAO,KAAK,SAAS,SAAS,OAAO,GAAG;AAChG,uBAAW,KAAK,YAAY;AAC5B,gBAAI,MAAM,SAAS,IAAI;AACrB,yBAAW,QAAQ,cAAc;AAAA,YACnC;AAAA,UACF,WAAW,SAAS,SAAS,MAAM,KAAK,SAAS,SAAS,QAAQ,KAAK,SAAS,SAAS,UAAU,GAAG;AACpG,uBAAW,KAAK,MAAM;AAAA,UACxB,WAAW,SAAS,SAAS,MAAM,KAAK,SAAS,SAAS,OAAO,KAAK,SAAS,SAAS,KAAK,GAAG;AAE9F,gBAAI,MAAM,SAAS,IAAI;AACrB,yBAAW,KAAK,MAAM;AAAA,YACxB;AAAA,UACF,OAAO;AAEL,gBAAI,MAAM,SAAS,KAAK;AACtB,yBAAW,KAAK,eAAe;AAAA,YACjC;AAAA,UACF;AAAA,QACF;AACA;AAAA,MAEF,KAAK;AAAA,MACL,KAAK;AAEH;AAAA,MAEF,KAAK;AAEH;AAAA,MAEF;AAEE,YAAI,OAAO,UAAU,YAAY,MAAM,SAAS,KAAK;AACnD,qBAAW,KAAK,eAAe;AAAA,QACjC;AACA;AAAA,IACR;AAEI,WAAO,WAAW,SAAS,IAAI,WAAW,KAAK,GAAG,IAAI;AAAA,EACxD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,kBAAkB,OAAO,UAAU;AACjC,QAAI,CAAC,SAAS,OAAO,UAAU,YAAY,MAAM,QAAQ,KAAK,GAAG;AAC/D,aAAO;AAAA,IACT;AAGA,UAAM,mBAAmB;AAAA,MACvB;AAAA,MAAe;AAAA,MAAS;AAAA,MAAU;AAAA,MAClC;AAAA,MAAY;AAAA,MAAU;AAAA,MAAiB;AAAA,MACvC;AAAA,MAAW;AAAA,MAAQ;AAAA,MAAW;AAAA,MAC9B;AAAA,MAAY;AAAA,MAAQ;AAAA,MAAc;AAAA,MAClC;AAAA,MAAe;AAAA,MAAS;AAAA,MACxB;AAAA,MAAW;AAAA,MAAW;AAAA,MACtB;AAAA,MAAS;AAAA,MAAc;AAAA,MAAW;AAAA,IACxC;AAEI,QAAI,OAAO,SAAS,OAAO,MAAM,SAAS,KAAK,KAAK,MAAM,IAAI;AAC1D,aAAO;AAAA,IACX;AAGA,UAAM,iBAAiB,iBAAiB,KAAK,aAAW,SAAS,SAAS,OAAO,CAAC;AAElF,QAAI,gBAAgB;AAElB,YAAM,OAAO,OAAO,KAAK,KAAK;AAG9B,UAAI,KAAK,UAAU,KAAK,KAAK,UAAU,IAAI;AACzC,cAAM,oBAAoB,KAAK;AAAA,UAAK,OAClC,OAAO,MAAM,CAAC,MAAM,YACpB,MAAM,CAAC,MAAM,QACb,CAAC,MAAM,QAAQ,MAAM,CAAC,CAAC,KACvB,OAAO,KAAK,MAAM,CAAC,CAAC,EAAE,SAAS;AAAA,QACzC;AAGQ,YAAI,CAAC,mBAAmB;AACtB,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU;AACR,QAAI,KAAK,SAAS,KAAK,MAAM,YAAY;AACvC,aAAO,EAAE,GAAG,KAAK,MAAM,WAAU;AAAA,IACnC;AACA,WAAO,KAAK,QAAQ,CAAA;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,cAAc,OAAO;AACnB,QAAI;AACJ,QAAI,MAAM,MAAM,QAAQ,MAAM;AAC9B,QAAI,eAAe,MAAM,UAAU,MAAM;AACzC,QAAI,CAAC,IAAK,QAAO;AAIjB,QAAI,OAAO,IAAI,SAAS,GAAG,GAAG;AAC5B,YAAM,QAAQ,IAAI,MAAM,GAAG;AAC3B,YAAM,MAAM,CAAC,EAAE,KAAI;AAEnB,UAAI,CAAC,cAAc;AACjB,uBAAe,MAAM,MAAM,CAAC,EAAE,KAAK,GAAG,EAAE,KAAI;AAAA,MAC9C;AAAA,IACF;AAGA,QAAI,KAAK,SAAS,OAAO,KAAK,MAAM,QAAQ,YAAY;AAGtD,cAAQ,KAAK,MAAM,IAAI,GAAG;AAAA,IAC5B,OAAO;AAEL,cAAQ,KAAK,QAAO,EAAG,GAAG;AAAA,IAC5B;AAIA,QAAI,cAAc;AAChB,cAAQ,cAAc,KAAK,OAAO,YAAY;AAAA,IAChD;AAGA,QAAI,UAAU,QAAQ,UAAU,UAAa,UAAU,IAAI;AACzD,aAAO,KAAK,gBAAgB,kBAAkB,KAAK,gBAAgB,iBAAiB;AAAA,IACtF;AAGA,QAAI,MAAM,UAAU;AAClB,YAAM,YAAY,KAAK,QAAQ,KAAK,QAAQ,KAAK;AACjD,aAAO,KAAK,qBAAqB,MAAM,UAAU,SAAS;AAAA,IAC5D;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,qBAAqB,gBAAgB,MAAM;AACzC,QAAI,CAAC,kBAAkB,CAAC,MAAM;AAC5B,aAAO;AAAA,IACT;AAGA,WAAO,eAAe,QAAQ,oBAAoB,CAAC,OAAO,QAAQ;AAChE,YAAM,aAAa,IAAI,KAAI;AAC3B,UAAI;AAGJ,YAAM,QAAQ,WAAW,MAAM,GAAG;AAClC,YAAM,UAAU,MAAM,CAAC;AACvB,YAAM,aAAa,MAAM,MAAM,CAAC,EAAE,KAAK,GAAG;AAG1C,UAAI,KAAK,SAAS,OAAO,KAAK,MAAM,QAAQ,YAAY;AACtD,gBAAQ,KAAK,MAAM,IAAI,OAAO;AAAA,MAChC,OAAO;AAEL,gBAAQ,QAAQ,MAAM,GAAG,EAAE,OAAO,CAAC,GAAG,MAAO,IAAI,EAAE,CAAC,IAAI,QAAY,IAAI;AAAA,MAC1E;AAGA,UAAI,YAAY;AACd,gBAAQ,cAAc,KAAK,OAAO,UAAU;AAAA,MAC9C;AAEA,aAAO,UAAU,UAAa,UAAU,OAAO,QAAQ;AAAA,IACzD,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,iBAAiB,OAAO;AACpB,QAAI,UAAU,KAAK,qBAAqB,KAAK;AAC7C,QAAI,MAAM,WAAW,SAAS;AAC5B,iBAAW;AAAA,IACb,WAAW,MAAM,WAAW,UAAU;AACpC,iBAAW;AAAA,IACb;AACA,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,qBAAqB,OAAO;AAE1B,QAAI,MAAM,SAAS,WAAW,MAAM,SAAS,YAAY,MAAM,SAAS,YAAY;AAClF,aAAO;AAAA,IACT;AAEA,UAAM,UAAU,MAAM,WAAW,MAAM,WAAW,MAAM,QAAQ,KAAK,MAAM,KAAK,KAAK,gBAAgB,OAAO;AAE5G,QAAI,KAAK,gBAAgB,YAAY;AAEnC,aAAO,iBAAiB,OAAO;AAAA,IACjC;AAEA,WAAO,OAAO,OAAO;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,iBAAiB;AACf,WAAO,KAAK,OACT,IAAI,WAAS,KAAK,cAAc,KAAK,CAAC,EACtC,OAAO,OAAO,EACd,KAAK,EAAE;AAAA,EACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,cAAc,OAAO;AACnB,UAAM,QAAQ,KAAK,cAAc,KAAK;AAGtC,QAAI,UAAU,QAAQ,CAAC,KAAK,gBAAgB,iBAAiB;AAC3D,aAAO;AAAA,IACT;AAEA,UAAM,QAAQ,MAAM,SAAS,KAAK,YAAY,MAAM,IAAI;AACxD,UAAM,aAAa,KAAK,iBAAiB,KAAK;AAE9C,WAAO;AAAA,oBACS,UAAU;AAAA,sBACR,KAAK,gBAAgB,SAAS,IAAI,MAAM,SAAS,iBAAiB,MAAM,IAAI;AAAA,YACtF,KAAK,eAAe,OAAO,KAAK,CAAC;AAAA,YACjC,KAAK,eAAe,OAAO,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA,EAI3C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,eAAe,OAAO,OAAO;AAC3B,UAAM,aAAa,MAAM,cAAc,KAAK,gBAAgB;AAC5D,WAAO,eAAe,UAAU,KAAK,KAAK,WAAW,KAAK,CAAC;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,eAAe,OAAO,OAAO;AAC3B,UAAM,aAAa,MAAM,cAAc,KAAK,gBAAgB;AAC5D,UAAM,eAAe,KAAK,mBAAmB,OAAO,KAAK;AACzD,WAAO,eAAe,UAAU,KAAK,YAAY;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,mBAAmB,OAAO,OAAO;AAC/B,QAAI,UAAU,QAAQ,UAAU,QAAW;AACzC,aAAO,KAAK,gBAAgB;AAAA,IAC9B;AAGA,QAAI,MAAM,UAAU;AAClB,aAAO,OAAO,KAAK;AAAA,IACrB;AAIA,UAAM,eAAe,MAAM,UAAU,MAAM;AAC3C,QAAI,cAAc;AAGhB,aAAO,OAAO,KAAK;AAAA,IACrB;AAIA,UAAM,WAAW,KAAK,QAAO,EAAG,MAAM,IAAI;AAG1C,YAAQ,MAAM,MAAI;AAAA,MAChB,KAAK;AAEH,eAAO,WACL,8CACA;AAAA,MAEJ,KAAK;AAEH,cAAM,WAAW,OAAO,KAAK;AAC7B,eAAO,mBAAmB,KAAK,WAAW,QAAQ,CAAC,kCAAkC,KAAK,WAAW,QAAQ,CAAC;AAAA,MAEhH,KAAK;AAEH,cAAM,SAAS,OAAO,KAAK;AAC3B,eAAO,YAAY,KAAK,WAAW,MAAM,CAAC,iEAAiE,KAAK,WAAW,MAAM,CAAC;AAAA,MAEpI,KAAK;AAAA,MACL,KAAK;AAEH,eAAO,KAAK,aAAa,QAAQ;AAAA,MAEnC,KAAK;AAEH,eAAO,KAAK,iBAAiB,UAAU,KAAK;AAAA,MAE9C,KAAK;AAEH,cAAM,WAAW,OAAO,KAAK;AAC7B,cAAM,UAAU,SAAS,QAAQ,YAAY,EAAE;AAC/C,eAAO,gBAAgB,OAAO,kCAAkC,KAAK,WAAW,QAAQ,CAAC;AAAA,MAE3F;AAEE,eAAO,KAAK,WAAW,OAAO,KAAK,CAAC;AAAA,IAC5C;AAAA,EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,aAAa,OAAO;AAClB,QAAI;AACF,YAAM,aAAa,KAAK,UAAU,OAAO,MAAM,CAAC;AAChD,YAAM,cAAc,KAAK,WAAW,UAAU;AAC9C,YAAM,QAAQ,WAAW,MAAM,IAAI,EAAE;AACrC,YAAM,UAAU,QAAQ,MAAM,WAAW,SAAS;AAClD,YAAM,WAAW,QAAQ,KAAK,OAAM,EAAG,SAAS,EAAE,EAAE,OAAO,GAAG,CAAC,CAAC;AAGhE,UAAI,SAAS;AACX,cAAM,UAAU,KAAK,UAAU,KAAK,EAAE,UAAU,GAAG,GAAG,KAAK,KAAK,UAAU,KAAK,EAAE,SAAS,MAAM,QAAQ;AACxG,cAAM,iBAAiB,KAAK,WAAW,OAAO;AAE9C,eAAO;AAAA;AAAA;AAAA,0CAG2B,MAAM,QAAQ,KAAK,IAAI,UAAU,QAAQ,KAAK,KAAK;AAAA;AAAA,wIAE2C,QAAQ;AAAA;AAAA;AAAA,sGAG1C,KAAK,WAAW,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yCAMxF,cAAc;AAAA;AAAA,6CAEV,QAAQ;AAAA,kLAC6H,KAAK,oBAAoB,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA,MAIjN,OAAO;AAEL,eAAO;AAAA;AAAA;AAAA,0CAG2B,MAAM,QAAQ,KAAK,IAAI,UAAU,QAAQ;AAAA,oGACiB,KAAK,WAAW,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,2JAI4B,KAAK,oBAAoB,WAAW,CAAC;AAAA;AAAA;AAAA,MAG1L;AAAA,IACF,SAAS,OAAO;AAEd,aAAO,gDAAgD,OAAO,KAAK;AAAA,IACrE;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,oBAAoB,MAAM;AACxB,WAAO,KACJ,QAAQ,0BAA0B,0CAA0C,EAC5E,QAAQ,0BAA0B,2CAA2C,EAC7E,QAAQ,qBAAqB,2CAA2C,EACxE,QAAQ,eAAe,2CAA2C,EAClE,QAAQ,sBAAsB,2CAA2C;AAAA,EAC9E;AAAA;AAAA;AAAA;AAAA,EAKA,aAAa;AACX,UAAM,WAAU;AAEhB,QAAI,CAAC,KAAK,QAAS;AAGnB,SAAK,QAAQ,iBAAiB,SAAS,CAAC,MAAM;AAC5C,YAAM,eAAe,EAAE,OAAO,QAAQ,cAAc;AACpD,UAAI,cAAc;AAChB,cAAM,YAAY,aAAa,QAAQ;AACvC,cAAM,QAAQ,KAAK,OAAO,KAAK,OAAK,EAAE,SAAS,SAAS;AACxD,aAAK,KAAK,eAAe,EAAE,OAAO,WAAW,SAAS,cAAc,OAAO,GAAG;AAAA,MAChF;AAGA,UAAI,EAAE,OAAO,QAAQ,YAAY,GAAG;AAClC,UAAE,eAAc;AAChB,UAAE,gBAAe;AACjB,aAAK,eAAe,EAAE,OAAO,QAAQ,YAAY,CAAC;AAAA,MACpD;AAGA,UAAI,EAAE,OAAO,QAAQ,cAAc,GAAG;AACpC,aAAK,iBAAiB,EAAE,OAAO,QAAQ,cAAc,CAAC;AAAA,MACxD;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,eAAe,QAAQ;AACrB,UAAM,WAAW,OAAO,aAAa,WAAW;AAChD,QAAI,CAAC,SAAU;AAEf,QAAI;AAEF,UAAI,UAAU,aAAa,OAAO,iBAAiB;AACjD,kBAAU,UAAU,UAAU,QAAQ,EAAE,KAAK,MAAM;AACjD,eAAK,iBAAiB,MAAM;AAAA,QAC9B,CAAC;AAAA,MACH,OAAO;AAEL,cAAM,WAAW,SAAS,cAAc,UAAU;AAClD,iBAAS,QAAQ;AACjB,iBAAS,KAAK,YAAY,QAAQ;AAClC,iBAAS,OAAM;AACf,iBAAS,YAAY,MAAM;AAC3B,iBAAS,KAAK,YAAY,QAAQ;AAClC,aAAK,iBAAiB,MAAM;AAAA,MAC9B;AAAA,IACF,SAAS,OAAO;AACd,cAAQ,KAAK,wBAAwB,KAAK;AAAA,IAC5C;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,iBAAiB,QAAQ;AACvB,UAAM,OAAO,OAAO,cAAc,GAAG;AACrC,UAAM,aAAa,OAAO,aAAa,eAAe,MAAM;AAG5D,eAAW,MAAM;AACf,UAAI,YAAY;AACd,aAAK,YAAY;AACjB,eAAO,YAAY;AAAA,MACrB,OAAO;AACL,aAAK,YAAY;AACjB,eAAO,YAAY;AAAA,MACrB;AAAA,IACF,GAAG,EAAE;AAAA,EACP;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,iBAAiB,QAAQ;AACvB,UAAM,eAAe,OAAO,cAAc,GAAG,EAAE;AAC/C,UAAM,OAAO,OAAO,cAAc,GAAG;AAGrC,SAAK,YAAY;AACjB,WAAO,UAAU,IAAI,aAAa;AAClC,WAAO,UAAU,OAAO,uBAAuB;AAG/C,eAAW,MAAM;AACf,WAAK,YAAY;AACjB,aAAO,UAAU,OAAO,aAAa;AACrC,aAAO,UAAU,IAAI,uBAAuB;AAAA,IAC9C,GAAG,GAAI;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,iBAAiB,OAAO,OAAO;AAC7B,QAAI,CAAC,SAAS,OAAO,UAAU,UAAU;AACvC,aAAO;AAAA,IACT;AAEA,QAAI;AAEF,YAAM,aAAa,IAAK,KAAK,YAAa;AAAA,QACxC,MAAM;AAAA,QACN,SAAS,MAAM,mBAAmB;AAAA,QAClC,iBAAiB,MAAM,mBAAmB;AAAA,QAC1C,gBAAgB,MAAM,kBAAkB;AAAA;AAAA,QAExC,GAAI,MAAM,mBAAmB,CAAA;AAAA,MACrC,CAAO;AAEC,iBAAW,OAAM;AACjB,iBAAW,uBAAsB;AAEnC,YAAM,aAAa,WAAW,eAAc;AAO5C,aAAO;AAAA;AAAA,wBAEW,WAAW,gBAAgB,QAAQ;AAAA,cAC7C,UAAU;AAAA;AAAA;AAAA;AAAA,IAIpB,SAAS,OAAO;AACd,cAAQ,MAAM,mCAAmC,KAAK;AACtD,aAAO;AAAA,IACT;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,MAAM,WAAW,SAAS;AACxB,SAAK,OAAO;AAGZ,QAAI,KAAK,SAAS,OAAO,KAAK,MAAM,QAAQ,YAAY;AACtD,WAAK,MAAM,IAAI,OAAO;AAAA,IACxB;AAGA,QAAI,KAAK,OAAO,SAAS,KAAK,CAAC,KAAK,QAAQ,QAAQ;AAClD,WAAK,SAAS,CAAA;AAAA,IAChB;AAEA,UAAM,KAAK,OAAM;AACjB,SAAK,KAAK,gBAAgB,EAAE,MAAM,QAAO,CAAE;AAC3C,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,MAAM,aAAa,WAAW;AAC5B,SAAK,SAAS;AACd,UAAM,KAAK,OAAM;AACjB,SAAK,KAAK,kBAAkB,EAAE,QAAQ,UAAS,CAAE;AACjD,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,MAAM,aAAa,YAAY;AAC7B,SAAK,kBAAkB,EAAE,GAAG,KAAK,iBAAiB,GAAG,WAAU;AAC/D,UAAM,KAAK,OAAM;AACjB,SAAK,KAAK,kBAAkB,EAAE,SAAS,KAAK,iBAAiB;AAC7D,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,UAAU;AACd,QAAI,KAAK,SAAS,OAAO,KAAK,MAAM,UAAU,YAAY;AACxD,UAAI;AACF,cAAM,KAAK,MAAM,MAAK;AACtB,aAAK,KAAK,kBAAkB,EAAE,OAAO,KAAK,OAAO;AAAA,MACnD,SAAS,OAAO;AACd,aAAK,KAAK,SAAS,EAAE,OAAO,SAAS,0BAA0B;AAC/D,cAAM;AAAA,MACR;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,iBAAiB;AACf,WAAO,KAAK,QAAO;AAAA,EACrB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,SAAS,MAAM;AACb,WAAO,KAAK,OAAO,KAAK,WAAS,MAAM,SAAS,IAAI,KAAK;AAAA,EAC3D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,eAAe,WAAW,QAAQ;AAChC,UAAM,QAAQ,KAAK,SAAS,SAAS;AACrC,QAAI,OAAO;AACT,YAAM,SAAS;AACf,YAAM,YAAY;AAAA,IACpB,OAAO;AAEL,WAAK,OAAO,KAAK;AAAA,QACf,MAAM;AAAA,QACN,OAAO,KAAK,YAAY,SAAS;AAAA,QACjC,MAAM,KAAK,eAAe,KAAK,UAAU,SAAS,GAAG,SAAS;AAAA,QAC9D;AAAA,QACA,WAAW;AAAA;AAAA,MACnB,CAAO;AAAA,IACH;AACA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,cAAc,WAAW,WAAW;AAClC,UAAM,QAAQ,KAAK,SAAS,SAAS;AACrC,QAAI,OAAO;AACT,UAAI,MAAM,QAAQ;AAChB,cAAM,UAAU,IAAI,SAAS;AAC7B,cAAM,YAAY,MAAM;AAAA,MAC1B,OAAO;AACL,cAAM,SAAS;AACf,cAAM,YAAY;AAAA,MACpB;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,iBAAiB,WAAW;AAC1B,UAAM,QAAQ,KAAK,SAAS,SAAS;AACrC,QAAI,OAAO;AACT,YAAM,OAAO,KAAK,QAAO;AACzB,YAAM,WAAW,KAAK,eAAe,KAAK,SAAS,GAAG,WAAW,MAAM,IAAI;AAC3E,YAAM,SAAS;AACf,YAAM,YAAY;AAAA,IACpB;AACA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,kBAAkB,WAAW,QAAQ,MAAM;AACzC,UAAM,QAAQ,KAAK,SAAS,SAAS;AACrC,QAAI,CAAC,MAAO,QAAO;AAEnB,UAAM,cAAc,UAAU,OAAO,QAAQ,KAAK,QAAO,EAAG,SAAS;AAGrE,UAAM,eAAe,MAAM,UAAU,MAAM;AAC3C,QAAI,gBAAgB,eAAe,MAAM;AACvC,aAAO,cAAc,KAAK,aAAa,YAAY;AAAA,IACrD;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,gBAAgB,SAAS;AACvB,WAAO,QAAQ,OAAO,EAAE,QAAQ,CAAC,CAAC,WAAW,MAAM,MAAM;AACvD,WAAK,eAAe,WAAW,MAAM;AAAA,IACvC,CAAC;AACD,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,kBAAkB;AAChB,UAAM,UAAU,CAAA;AAChB,SAAK,OAAO,QAAQ,WAAS;AAC3B,YAAM,eAAe,MAAM,UAAU,MAAM;AAC3C,UAAI,cAAc;AAChB,gBAAQ,MAAM,IAAI,IAAI;AAAA,MACxB;AAAA,IACF,CAAC;AACD,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,UAAM,OAAM;AAGZ,QAAI,KAAK,SAAS,OAAO,KAAK,MAAM,OAAO,YAAY;AACrD,WAAK,MAAM,GAAG,UAAU,MAAM;AAC5B,aAAK,OAAM;AAAA,MACb,CAAC;AAAA,IACH;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO,OAAO,UAAU,IAAI;AAC1B,WAAO,IAAI,SAAS,OAAO;AAAA,EAC7B;AACF;"}
+{"version":3,"file":"DataView-i7kpJjVQ.js","sources":["../../src/core/views/data/DataView.js"],"sourcesContent":["/**\n * DataView - Key/Value data display component for MOJO framework\n * Extends View to display object data in a responsive grid layout with intelligent formatting support\n *\n * Features:\n * - Automatic field generation from data with intelligent type inference\n * - Smart DataFormatter pipe chains (e.g., \"date('MMM D, YYYY')|capitalize\")\n * - Contextual formatting based on field names and values\n * - Support for complex pipe chains like \"truncate(100)|capitalize|badge\"\n * - Nested DataView support with type=\"dataview\" for complex objects\n * - Custom format overrides with fluent API\n * - No format collision: custom field.format completely overrides DataView formatting\n *\n * Format Behavior:\n * - No field.format: DataView applies type-based HTML formatting (badges, links, etc.)\n * - With field.format: DataFormatter handles ALL formatting, DataView only escapes HTML\n *\n * Example Usage:\n * ```javascript\n * const dataView = new DataView({\n *   data: {\n *     name: 'john doe',\n *     email: 'john@example.com',\n *     createdAt: '2024-01-15T10:30:00Z',\n *     price: 99.99,\n *     description: 'A very long description that should be truncated...',\n *     isActive: true\n *   }\n * });\n *\n * // Auto-inferred formats (DataView adds HTML styling):\n * // name: \"truncate(50)|capitalize\"\n * // email: no format → DataView creates mailto: link\n * // createdAt: \"date('MMM D, YYYY')\"\n * // price: \"currency\"\n * // description: \"truncate(200)\"\n * // isActive: no format → DataView creates badge styling\n *\n * // Custom format overrides (DataFormatter handles ALL formatting):\n * dataView\n *   .setFieldFormat('name', 'uppercase|truncate(20)')      // No DataView HTML styling\n *   .setFieldFormat('email', 'email|uppercase')           // No mailto: link\n *   .setFieldFormat('isActive', 'boolean|uppercase')      // No badge styling\n *   .setFieldFormats({\n *     description: 'truncate(50)|capitalize',\n *     createdAt: 'relative'\n *   });\n *\n * // Nested DataView for complex objects:\n * dataView.setFieldFormat('permissions', null); // Clear auto-format\n * // Then configure field: { name: 'permissions', type: 'dataview', label: 'User Permissions' }\n * ```\n */\n\nimport View from '@core/View.js';\nimport dataFormatter from '@core/utils/DataFormatter.js';\n\nclass DataView extends View {\n  constructor(options = {}) {\n    // Extract DataView-specific options\n    const {\n      data,\n      model,\n      fields,\n      columns,\n      responsive,\n      showEmptyValues,\n      emptyValueText,\n      ...viewOptions\n    } = options;\n\n    // Set default view options\n    super({\n      tagName: 'div',\n      className: 'data-view',\n      ...viewOptions\n    });\n\n    // Core properties\n    this.data = data || {};\n    this.fields = fields || [];\n    this.model = model || null;\n\n    // If a model is provided, use it as data source\n    if (this.model) {\n      this.data = this.model;\n    }\n\n    // DataView-specific configuration\n    this.dataViewOptions = {\n      columns: columns || 2,\n      responsive: responsive !== false,  // Default to true\n      showEmptyValues: showEmptyValues || false,\n      emptyValueText: emptyValueText || '—',\n      rowClass: 'row g-3',\n      itemClass: 'data-view-item',\n      labelClass: 'data-view-label fw-semibold text-muted small text-uppercase',\n      valueClass: 'data-view-value'\n    };\n  }\n\n  /**\n   * Lifecycle hook - prepare data and fields before rendering\n   */\n  async onBeforeRender() {\n\n    // Auto-generate fields from data if none provided\n    if (this.fields.length === 0 && this.getData()) {\n      this.generateFieldsFromData();\n    }\n  }\n\n  /**\n   * Override renderTemplate to generate HTML directly\n   * @returns {string} Complete HTML string\n   */\n  async renderTemplate() {\n    const items = this.buildItemsHTML();\n\n    return `\n      <div class=\"${this.dataViewOptions.rowClass}\">\n        ${items}\n      </div>\n    `;\n  }\n\n  /**\n   * Auto-generate field definitions from data object with intelligent type inference\n   */\n  generateFieldsFromData() {\n    const dataObj = this.getData();\n\n    if (dataObj && typeof dataObj === 'object') {\n      this.fields = Object.keys(dataObj).map(key => {\n        const value = dataObj[key];\n        const fieldType = this.inferFieldType(value, key);\n        const formatter = this.inferFormatter(value, key, fieldType);\n\n        return {\n          name: key,\n          label: this.formatLabel(key),\n          type: fieldType,\n          format: formatter,\n          formatter: formatter  // Alias for consistency with TableView\n        };\n      });\n    }\n  }\n\n  /**\n   * Format field name into a readable label\n   * @param {string} name - Field name\n   * @returns {string} Formatted label\n   */\n  formatLabel(name) {\n    return name\n      .replace(/([A-Z])/g, ' $1')  // Add space before capital letters\n      .replace(/[_-]/g, ' ')        // Replace underscores and hyphens with spaces\n      .replace(/\\b\\w/g, l => l.toUpperCase())  // Title case\n      .trim();\n  }\n\n  /**\n   * Infer field type from value and key with improved intelligence\n   * @param {*} value - Field value\n   * @param {string} key - Field key\n   * @returns {string} Field type\n   */\n  inferFieldType(value, key = '') {\n    if (value === null || value === undefined) return 'text';\n\n    const keyLower = key.toLowerCase();\n    const type = typeof value;\n\n    // Date/time patterns\n    if (keyLower.includes('date') || keyLower.includes('time') ||\n        keyLower.includes('created') || keyLower.includes('updated') ||\n        keyLower.includes('modified') || keyLower.includes('last_login') ||\n        keyLower.includes('expires') || keyLower.includes('last_activity')) {\n      return 'datetime';\n    }\n\n    // Email patterns\n    if (keyLower.includes('email') || keyLower.includes('mail')) {\n      return 'email';\n    }\n\n    // URL patterns\n    if (keyLower.includes('url') || keyLower.includes('link') ||\n        keyLower.includes('website') || keyLower.includes('homepage')) {\n      return 'url';\n    }\n\n    // Phone patterns\n    if (keyLower.includes('phone') || keyLower.includes('tel') ||\n        keyLower.includes('mobile') || keyLower.includes('cell')) {\n      return 'phone';\n    }\n\n    // Currency/price patterns\n    if (keyLower.includes('price') || keyLower.includes('cost') ||\n        keyLower.includes('amount') || keyLower.includes('fee') ||\n        keyLower.includes('salary') || keyLower.includes('revenue')) {\n      return 'currency';\n    }\n\n    // File size patterns\n    if (keyLower.includes('size') || keyLower.includes('bytes')) {\n      return 'filesize';\n    }\n\n    // Percentage patterns\n    if (keyLower.includes('percent') || keyLower.includes('rate') ||\n        keyLower.includes('ratio') && type === 'number') {\n      return 'percent';\n    }\n\n    // Type-based inference\n    if (type === 'boolean') return 'boolean';\n    if (type === 'number') return 'number';\n\n    if (type === 'object') {\n      if (Array.isArray(value)) return 'array';\n      if (value && value.renditions) return 'file';\n\n      // Check if object should be displayed as nested DataView\n      if (this.shouldUseDataView(value, keyLower)) {\n        return 'dataview';\n      }\n\n      return 'object';\n    }\n\n    if (type === 'string') {\n      // Pattern matching for strings\n      if (value.includes('@') && value.includes('.')) return 'email';\n      if (value.match(/^\\d{4}-\\d{2}-\\d{2}/)) return 'date';\n      if (value.match(/^https?:\\/\\//)) return 'url';\n      if (value.match(/^\\+?[\\d\\s\\-\\(\\)]+$/)) return 'phone';\n    }\n\n    return 'text';\n  }\n\n  /**\n   * Infer appropriate formatter based on type and context\n   * @param {*} value - Field value\n   * @param {string} key - Field key\n   * @param {string} fieldType - Inferred field type\n   * @returns {string|null} Formatter pipe string\n   */\n  inferFormatter(value, key, fieldType) {\n    const keyLower = key.toLowerCase();\n    const formatters = [];\n\n    switch (fieldType) {\n      case 'datetime':\n        if (keyLower.includes('time') && !keyLower.includes('date')) {\n          formatters.push('time');\n        } else if (keyLower.includes('relative') || keyLower.includes('ago') || keyLower.includes('last_')) {\n          formatters.push('relative');\n        } else if (keyLower.includes('created') || keyLower.includes('updated') || keyLower.includes('modified')) {\n          formatters.push('date(\"MMM D, YYYY\")');\n        } else {\n          formatters.push('date(\"MMMM D, YYYY\")');\n        }\n        break;\n\n      case 'date':\n        if (keyLower.includes('birth') || keyLower.includes('dob')) {\n          formatters.push('date(\"MMMM D, YYYY\")');\n        } else {\n          formatters.push('date(\"MMM D, YYYY\")');\n        }\n        break;\n\n      case 'email':\n        // Don't apply email formatter - DataView handles mailto: links automatically\n        break;\n\n      case 'url':\n        // Don't apply url formatter - DataView handles clickable links automatically\n        break;\n\n      case 'phone':\n        formatters.push('phone');\n        break;\n\n      case 'currency':\n        formatters.push('currency');\n        // Add currency symbol detection if needed\n        if (keyLower.includes('eur') || keyLower.includes('euro')) {\n          formatters[formatters.length - 1] = 'currency(\"EUR\")';\n        } else if (keyLower.includes('gbp') || keyLower.includes('pound')) {\n          formatters[formatters.length - 1] = 'currency(\"GBP\")';\n        }\n        break;\n\n      case 'filesize':\n        formatters.push('filesize');\n        break;\n\n      case 'percent':\n        formatters.push('percent');\n        break;\n\n      case 'number':\n        // Smart number formatting with pipe chains\n        if (typeof value === 'number') {\n          if (keyLower.includes('count') || keyLower.includes('total') || keyLower.includes('followers') || keyLower.includes('views')) {\n            if (value >= 1000) {\n              formatters.push('compact');\n            } else {\n              formatters.push('number');\n            }\n          } else if (keyLower.includes('score') || keyLower.includes('rating')) {\n            formatters.push('number');\n            // Add decimal places for scores\n            if (value % 1 !== 0) {\n              formatters[formatters.length - 1] = 'number(1)';\n            }\n          } else if (keyLower.includes('version') || keyLower.includes('id')) {\n            // Don't format IDs and versions\n            return null;\n          } else {\n            formatters.push('number');\n          }\n        }\n        break;\n\n      case 'boolean':\n        // Don't apply boolean formatter - DataView handles badge styling automatically\n        break;\n\n      case 'text':\n        // Smart text formatting with contextual pipe chains\n        if (typeof value === 'string') {\n          // Handle different text contexts\n          if (keyLower.includes('description') || keyLower.includes('content') || keyLower.includes('body')) {\n            if (value.length > 200) {\n              formatters.push('truncate(200)');\n            } else if (value.length > 100) {\n              formatters.push('truncate(100)');\n            }\n          } else if (keyLower.includes('summary') || keyLower.includes('excerpt')) {\n            if (value.length > 150) {\n              formatters.push('truncate(150)');\n            }\n          } else if (keyLower.includes('name') || keyLower.includes('title') || keyLower.includes('label')) {\n            formatters.push('capitalize');\n            if (value.length > 50) {\n              formatters.unshift('truncate(50)'); // Truncate first, then capitalize\n            }\n          } else if (keyLower.includes('slug') || keyLower.includes('handle') || keyLower.includes('username')) {\n            formatters.push('slug');\n          } else if (keyLower.includes('code') || keyLower.includes('token') || keyLower.includes('key')) {\n            // Show codes/tokens with masking if long\n            if (value.length > 20) {\n              formatters.push('mask');\n            }\n          } else {\n            // Generic text handling\n            if (value.length > 100) {\n              formatters.push('truncate(100)');\n            }\n          }\n        }\n        break;\n\n      case 'array':\n      case 'object':\n        // Don't apply json formatter - DataView handles JSON display automatically\n        break;\n\n      case 'dataview':\n        // Don't apply any formatter - nested DataView handles its own formatting\n        break;\n\n      default:\n        // Handle any missed cases with basic text formatting\n        if (typeof value === 'string' && value.length > 100) {\n          formatters.push('truncate(100)');\n        }\n        break;\n    }\n\n    return formatters.length > 0 ? formatters.join('|') : null;\n  }\n\n  /**\n   * Determine if an object should be displayed as nested DataView vs JSON\n   * @param {object} value - Object value to check\n   * @param {string} keyLower - Lowercase field key\n   * @returns {boolean} True if should use DataView\n   */\n  shouldUseDataView(value, keyLower) {\n    if (!value || typeof value !== 'object' || Array.isArray(value)) {\n      return false;\n    }\n\n    // Check for common patterns that benefit from DataView display\n    const dataViewPatterns = [\n      'permissions', 'perms', 'access', 'rights',\n      'settings', 'config', 'configuration', 'options',\n      'profile', 'info', 'details', 'data',\n      'metadata', 'meta', 'attributes', 'props',\n      'preferences', 'prefs', 'user_data',\n      'contact', 'address', 'location',\n      'stats', 'statistics', 'metrics', 'counts'\n    ];\n\n    if (window.utils && window.utils.isObject(value) && value.id) {\n        return true;\n    }\n\n    // Check if key matches common patterns\n    const matchesPattern = dataViewPatterns.some(pattern => keyLower.includes(pattern));\n\n    if (matchesPattern) {\n      // Additional checks to ensure it's suitable for DataView\n      const keys = Object.keys(value);\n\n      // Good candidates: objects with multiple simple key-value pairs\n      if (keys.length >= 2 && keys.length <= 20) {\n        const hasComplexNesting = keys.some(k =>\n          typeof value[k] === 'object' &&\n          value[k] !== null &&\n          !Array.isArray(value[k]) &&\n          Object.keys(value[k]).length > 3\n        );\n\n        // Use DataView if not too deeply nested\n        if (!hasComplexNesting) {\n          return true;\n        }\n      }\n    }\n\n    return false;\n  }\n\n  /**\n   * Get data object (handles both raw objects and Models)\n   * @returns {object} Data object\n   */\n  getData() {\n    if (this.model && this.model.attributes) {\n      return { ...this.model.attributes };\n    }\n    return this.data || {};\n  }\n\n  /**\n   * Get field value with formatting support\n   * @param {object} field - Field definition\n   * @returns {*} Field value (formatted if specified)\n   */\n  getFieldValue(field) {\n    let value;\n    let key = field.name || field.key;\n    let formatString = field.format || field.formatter;\n    if (!key) return null;\n\n    // Check if the name field contains a pipe (e.g., 'is_tor|status_text')\n    // This allows inline formatter syntax in the name field\n    if (key && key.includes('|')) {\n      const parts = key.split('|');\n      key = parts[0].trim();\n      // If no explicit formatter was set, use the one from the name\n      if (!formatString) {\n        formatString = parts.slice(1).join('|').trim();\n      }\n    }\n\n    // Get raw value from data source\n    if (this.model && typeof this.model.get === 'function') {\n      // For models, get raw value first, then apply formatting separately\n      // This ensures we don't break pipe chains by concatenating strings\n      value = this.model.get(key);\n    } else {\n      // Plain object access\n      value = this.getData()[key];\n    }\n\n    // Apply formatting using DataFormatter pipe system if specified\n    // Support both 'format' and 'formatter' for consistency with TableView\n    if (formatString) {\n      value = dataFormatter.pipe(value, formatString);\n    }\n\n    // Handle empty values\n    if (value === null || value === undefined || value === '') {\n      return this.dataViewOptions.showEmptyValues ? this.dataViewOptions.emptyValueText : null;\n    }\n\n    // Apply template if provided\n    if (field.template) {\n      const modelData = this.model ? this.model : this.data;\n      return this.renderTemplateString(field.template, modelData);\n    }\n\n    return value;\n  }\n\n  /**\n   * Render a template string with data from a model or object.\n   * Replaces {{key}} and {{nested.key}} placeholders.\n   * @param {string} templateString - The template string.\n   * @param {object} data - The data object or model.\n   * @returns {string} The rendered string.\n   */\n  renderTemplateString(templateString, data) {\n    if (!templateString || !data) {\n      return '';\n    }\n\n    // Regex to find all {{...}} placeholders\n    return templateString.replace(/\\{\\{([^}]+)\\}\\}/g, (match, key) => {\n      const trimmedKey = key.trim();\n      let value;\n\n      // Handle potential formatters in the template key\n      const parts = trimmedKey.split('|');\n      const dataKey = parts[0];\n      const formatters = parts.slice(1).join('|');\n\n      // Get value from model or plain object\n      if (this.model && typeof this.model.get === 'function') {\n        value = this.model.get(dataKey);\n      } else {\n        // Handle nested keys for plain objects\n        value = dataKey.split('.').reduce((o, i) => (o ? o[i] : undefined), data);\n      }\n\n      // Apply formatters if any\n      if (formatters) {\n        value = dataFormatter.pipe(value, formatters);\n      }\n\n      return value !== undefined && value !== null ? value : '';\n    });\n  }\n\n  /**\n   * Generate column classes based on configuration\n   * @param {object} field - Field definition\n   * @returns {string} CSS classes\n   */\n  getColumnClasses(field) {\n      let classes = this.getColumnSizeClasses(field);\n      if (field.justify == \"right\") {\n        classes += ` d-flex justify-content-end`;\n      } else if (field.justify == \"center\") {\n        classes += ` d-flex justify-content-center`;\n      }\n      return classes;\n  }\n\n  /**\n   * Generate column size classes based on configuration\n   * @param {object} field - Field definition\n   * @returns {string} CSS classes\n   */\n  getColumnSizeClasses(field) {\n    // JSON objects and nested DataViews always use full width for better display\n    if (field.type === 'array' || field.type === 'object' || field.type === 'dataview') {\n      return 'col-12';\n    }\n\n    const colSize = field.columns || field.colSize || field.cols || Math.floor(12 / this.dataViewOptions.columns);\n\n    if (this.dataViewOptions.responsive) {\n      // Responsive breakpoints: 1 column on small, configured on larger screens\n      return `col-12 col-md-${colSize}`;\n    }\n\n    return `col-${colSize}`;\n  }\n\n  /**\n   * Build HTML for all data items\n   * @returns {string} Items HTML\n   */\n  buildItemsHTML() {\n    return this.fields\n      .map(field => this.buildItemHTML(field))\n      .filter(Boolean)  // Remove empty items\n      .join('');\n  }\n\n  /**\n   * Build HTML for a single data item\n   * @param {object} field - Field definition\n   * @returns {string} Item HTML\n   */\n  buildItemHTML(field) {\n    const value = this.getFieldValue(field);\n\n    // Skip fields with no value if showEmptyValues is false\n    if (value === null && !this.dataViewOptions.showEmptyValues) {\n      return '';\n    }\n\n    const label = field.label || this.formatLabel(field.name);\n    const colClasses = this.getColumnClasses(field);\n\n    return `\n      <div class=\"${colClasses}\">\n        <div class=\"${this.dataViewOptions.itemClass} ${field.className}\" data-field=\"${field.name}\">\n          ${this.buildLabelHTML(label, field)}\n          ${this.buildValueHTML(value, field)}\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Build label HTML\n   * @param {string} label - Label text\n   * @param {object} field - Field definition\n   * @returns {string} Label HTML\n   */\n  buildLabelHTML(label, field) {\n    const labelClass = field.labelClass || this.dataViewOptions.labelClass;\n    return `<div class=\"${labelClass}\">${this.escapeHtml(label)}:</div>`;\n  }\n\n  /**\n   * Build value HTML with type-specific formatting\n   * @param {*} value - Field value\n   * @param {object} field - Field definition\n   * @returns {string} Value HTML\n   */\n  buildValueHTML(value, field) {\n    const valueClass = field.valueClass || this.dataViewOptions.valueClass;\n    const displayValue = this.formatDisplayValue(value, field);\n    return `<div class=\"${valueClass}\">${displayValue}</div>`;\n  }\n\n  /**\n   * Format value for display with enhanced type handling\n   * @param {*} value - Formatted value from DataFormatter (or raw if no format)\n   * @param {object} field - Field definition\n   * @returns {string} Formatted display value with HTML markup\n   */\n  formatDisplayValue(value, field) {\n    if (value === null || value === undefined) {\n      return this.dataViewOptions.emptyValueText;\n    }\n\n    // If a template was used, the value is already the final HTML. Return it directly.\n    if (field.template) {\n      return String(value);\n    }\n\n    // If a custom format is specified, trust the DataFormatter output.\n    // Support both 'format' and 'formatter' for consistency with TableView\n    const formatString = field.format || field.formatter;\n    if (formatString) {\n      // If a formatter is explicitly specified, render its output as HTML\n      // The DataFormatter is responsible for proper escaping when needed\n      return String(value);\n    }\n\n    // No custom format - apply DataView's default type-specific HTML formatting\n    // Get original raw value for special cases\n    const rawValue = this.getData()[field.name];\n\n    // Handle types that need special HTML presentation (only when no custom format)\n    switch (field.type) {\n      case 'boolean':\n        // Use standard boolean badges (no custom format was applied)\n        return rawValue ?\n          '<span class=\"badge bg-success\">Yes</span>' :\n          '<span class=\"badge bg-secondary\">No</span>';\n\n      case 'email':\n        // Create clickable email links (no custom format was applied)\n        const emailStr = String(value);\n        return `<a href=\"mailto:${this.escapeHtml(emailStr)}\" class=\"text-decoration-none\">${this.escapeHtml(emailStr)}</a>`;\n\n      case 'url':\n        // Create clickable URL links (no custom format was applied)\n        const urlStr = String(value);\n        return `<a href=\"${this.escapeHtml(urlStr)}\" target=\"_blank\" rel=\"noopener\" class=\"text-decoration-none\">${this.escapeHtml(urlStr)} <i class=\"bi bi-box-arrow-up-right\"></i></a>`;\n\n      case 'array':\n      case 'object':\n        // Display as JSON with special HTML formatting (no custom format was applied)\n        return this.formatAsJson(rawValue);\n\n      case 'dataview':\n        // Create nested DataView for complex objects\n        return this.formatAsDataView(rawValue, field);\n\n      case 'phone':\n        // Create tel: links for phone numbers (no custom format was applied)\n        const phoneStr = String(value);\n        const telHref = phoneStr.replace(/[^\\d\\+]/g, ''); // Clean for tel: link\n        return `<a href=\"tel:${telHref}\" class=\"text-decoration-none\">${this.escapeHtml(phoneStr)}</a>`;\n\n      default:\n        // For all other types with no custom format, just escape and return\n        return this.escapeHtml(String(value));\n    }\n  }\n\n  /**\n   * Format object/array values as styled JSON\n   * @param {*} value - Object or array value\n   * @returns {string} Formatted JSON HTML\n   */\n  formatAsJson(value) {\n    try {\n      const jsonString = JSON.stringify(value, null, 2);\n      const escapedJson = this.escapeHtml(jsonString);\n      const lines = jsonString.split('\\n').length;\n      const isLarge = lines > 10 || jsonString.length > 500;\n      const uniqueId = `json-${Math.random().toString(36).substr(2, 9)}`;\n\n      // Create collapsible JSON display for large objects\n      if (isLarge) {\n        const preview = JSON.stringify(value).substring(0, 100) + (JSON.stringify(value).length > 100 ? '...' : '');\n        const escapedPreview = this.escapeHtml(preview);\n\n        return `\n          <div class=\"json-container\">\n            <div class=\"d-flex align-items-center justify-content-between mb-1\">\n              <small class=\"text-muted\">${Array.isArray(value) ? 'Array' : 'Object'} (${lines} lines)</small>\n              <div class=\"btn-group btn-group-sm\" role=\"group\">\n                <button type=\"button\" class=\"btn btn-outline-secondary btn-sm json-toggle\" data-bs-toggle=\"collapse\" data-bs-target=\"#${uniqueId}\" aria-expanded=\"false\">\n                  <i class=\"bi bi-eye\"></i> Show\n                </button>\n                <button type=\"button\" class=\"btn btn-outline-secondary btn-sm json-copy\" data-json='${this.escapeHtml(jsonString)}' title=\"Copy JSON\">\n                  <i class=\"bi bi-clipboard\"></i>\n                </button>\n              </div>\n            </div>\n            <div class=\"json-preview bg-light p-2 rounded small border\" style=\"font-family: 'Courier New', monospace;\">\n              <code class=\"text-muted\">${escapedPreview}</code>\n            </div>\n            <div class=\"collapse mt-2\" id=\"${uniqueId}\">\n              <pre class=\"json-display p-3 rounded small mb-0\" style=\"max-height: 400px; overflow-y: auto; white-space: pre-wrap; font-family: 'Courier New', monospace;\"><code>${this.syntaxHighlightJson(escapedJson)}</code></pre>\n            </div>\n          </div>\n        `;\n      } else {\n        // Small objects - show directly with copy button\n        return `\n          <div class=\"json-container\">\n            <div class=\"d-flex align-items-center justify-content-between mb-1\">\n              <small class=\"text-muted\">${Array.isArray(value) ? 'Array' : 'Object'}</small>\n              <button type=\"button\" class=\"btn btn-outline-secondary btn-sm json-copy\" data-json='${this.escapeHtml(jsonString)}' title=\"Copy JSON\">\n                <i class=\"bi bi-clipboard\"></i>\n              </button>\n            </div>\n            <pre class=\"json-display bg-light p-2 rounded small mb-0 border\" style=\"white-space: pre-wrap; font-family: 'Courier New', monospace;\"><code>${this.syntaxHighlightJson(escapedJson)}</code></pre>\n          </div>\n        `;\n      }\n    } catch (error) {\n      // Fallback for objects that can't be stringified\n      return `<span class=\"text-muted fst-italic\">[Object: ${typeof value}] - Cannot display as JSON</span>`;\n    }\n  }\n\n  /**\n   * Apply basic syntax highlighting to JSON\n   * @param {string} json - Escaped JSON string\n   * @returns {string} JSON with basic syntax highlighting\n   */\n  syntaxHighlightJson(json) {\n    return json\n      .replace(/(\"([^\"\\\\]|\\\\.)*\")\\s*:/g, '<span style=\"color: #0969da;\">$1</span>:') // Keys (blue)\n      .replace(/:\\s*(\"([^\"\\\\]|\\\\.)*\")/g, ': <span style=\"color: #0a3069;\">$1</span>') // String values (dark blue)\n      .replace(/:\\s*(true|false)/g, ': <span style=\"color: #8250df;\">$1</span>') // Booleans (purple)\n      .replace(/:\\s*(null)/g, ': <span style=\"color: #656d76;\">$1</span>') // Null (gray)\n      .replace(/:\\s*(-?\\d+\\.?\\d*)/g, ': <span style=\"color: #0550ae;\">$1</span>'); // Numbers (blue)\n  }\n\n  /**\n   * Bind events including JSON interaction handlers\n   */\n  bindEvents() {\n    super.bindEvents();\n\n    if (!this.element) return;\n\n    // Add click handler for field interactions\n    this.element.addEventListener('click', (e) => {\n      const fieldElement = e.target.closest('[data-field]');\n      if (fieldElement) {\n        const fieldName = fieldElement.dataset.field;\n        const field = this.fields.find(f => f.name === fieldName);\n        this.emit('field:click', { field, fieldName, element: fieldElement, event: e });\n      }\n\n      // Handle JSON copy button clicks\n      if (e.target.closest('.json-copy')) {\n        e.preventDefault();\n        e.stopPropagation();\n        this.handleJsonCopy(e.target.closest('.json-copy'));\n      }\n\n      // Handle JSON toggle button clicks\n      if (e.target.closest('.json-toggle')) {\n        this.handleJsonToggle(e.target.closest('.json-toggle'));\n      }\n    });\n  }\n\n  /**\n   * Handle copying JSON to clipboard\n   * @param {HTMLElement} button - Copy button element\n   */\n  handleJsonCopy(button) {\n    const jsonData = button.getAttribute('data-json');\n    if (!jsonData) return;\n\n    try {\n      // Use modern clipboard API if available\n      if (navigator.clipboard && window.isSecureContext) {\n        navigator.clipboard.writeText(jsonData).then(() => {\n          this.showCopyFeedback(button);\n        });\n      } else {\n        // Fallback for older browsers\n        const textarea = document.createElement('textarea');\n        textarea.value = jsonData;\n        document.body.appendChild(textarea);\n        textarea.select();\n        document.execCommand('copy');\n        document.body.removeChild(textarea);\n        this.showCopyFeedback(button);\n      }\n    } catch (error) {\n      console.warn('Failed to copy JSON:', error);\n    }\n  }\n\n  /**\n   * Handle JSON toggle button state\n   * @param {HTMLElement} button - Toggle button element\n   */\n  handleJsonToggle(button) {\n    const icon = button.querySelector('i');\n    const isExpanded = button.getAttribute('aria-expanded') === 'true';\n\n    // Update button text and icon\n    setTimeout(() => {\n      if (isExpanded) {\n        icon.className = 'bi bi-eye-slash';\n        button.innerHTML = '<i class=\"bi bi-eye-slash\"></i> Hide';\n      } else {\n        icon.className = 'bi bi-eye';\n        button.innerHTML = '<i class=\"bi bi-eye\"></i> Show';\n      }\n    }, 10);\n  }\n\n  /**\n   * Show visual feedback for successful copy\n   * @param {HTMLElement} button - Copy button element\n   */\n  showCopyFeedback(button) {\n    const originalIcon = button.querySelector('i').className;\n    const icon = button.querySelector('i');\n\n    // Show success state\n    icon.className = 'bi bi-check text-success';\n    button.classList.add('btn-success');\n    button.classList.remove('btn-outline-secondary');\n\n    // Reset after 1 second\n    setTimeout(() => {\n      icon.className = originalIcon;\n      button.classList.remove('btn-success');\n      button.classList.add('btn-outline-secondary');\n    }, 1000);\n  }\n\n  /**\n   * Format complex objects as nested DataView\n   * @param {object} value - Object value to display as DataView\n   * @param {object} field - Field definition\n   * @returns {string} Formatted DataView HTML\n   */\n  formatAsDataView(value, field) {\n    if (!value || typeof value !== 'object') {\n      return `<span class=\"text-muted fst-italic\">No data available</span>`;\n    }\n\n    try {\n      // Create nested DataView instance\n      const nestedView = new (this.constructor)({\n        data: value,\n        columns: field.dataViewColumns || 2,\n        showEmptyValues: field.showEmptyValues ?? true,\n        emptyValueText: field.emptyValueText || 'Not set',\n        // Pass any other dataView-specific options from field config\n        ...(field.dataViewOptions || {})\n      });\n\n        nestedView.onInit();\n        nestedView.generateFieldsFromData();\n      // Generate the nested DataView HTML\n      const nestedHtml = nestedView.buildItemsHTML();\n\n      // Wrap in a styled container with optional label\n      // const labelHtml = field.label ?\n      //   `<h6 class=\"fw-semibold text-muted mb-3 border-bottom pb-2\">${this.escapeHtml(field.label)}</h6>` :\n      //   '';\n\n      return `\n        <div class=\"nested-dataview border rounded p-3 bg-light\">\n          <div class=\"${nestedView.dataViewOptions.rowClass}\">\n            ${nestedHtml}\n          </div>\n        </div>\n      `;\n    } catch (error) {\n      console.error('Error creating nested DataView:', error);\n      return `<span class=\"text-danger\">Error displaying nested data</span>`;\n    }\n  }\n\n  /**\n   * Update the data and re-render\n   * @param {object} newData - New data object\n   * @returns {Promise<DataView>} Promise resolving to this instance\n   */\n  async updateData(newData) {\n    this.data = newData;\n\n    // If model is provided, update it instead\n    if (this.model && typeof this.model.set === 'function') {\n      this.model.set(newData);\n    }\n\n    // Clear fields to trigger regeneration on next render\n    if (this.fields.length > 0 && !this.options.fields) {\n      this.fields = [];\n    }\n\n    await this.render();\n    this.emit('data:updated', { data: newData });\n    return this;\n  }\n\n  /**\n   * Update field configuration and re-render\n   * @param {array} newFields - New field configuration\n   * @returns {Promise<DataView>} Promise resolving to this instance\n   */\n  async updateFields(newFields) {\n    this.fields = newFields;\n    await this.render();\n    this.emit('fields:updated', { fields: newFields });\n    return this;\n  }\n\n  /**\n   * Update configuration and re-render\n   * @param {object} newOptions - New configuration options\n   * @returns {Promise<DataView>} Promise resolving to this instance\n   */\n  async updateConfig(newOptions) {\n    this.dataViewOptions = { ...this.dataViewOptions, ...newOptions };\n    await this.render();\n    this.emit('config:updated', { options: this.dataViewOptions });\n    return this;\n  }\n\n  /**\n   * Refresh data from model if available\n   * @returns {Promise<DataView>} Promise resolving to this instance\n   */\n  async refresh() {\n    if (this.model && typeof this.model.fetch === 'function') {\n      try {\n        await this.model.fetch();\n        this.emit('data:refreshed', { model: this.model });\n      } catch (error) {\n        this.emit('error', { error, message: 'Failed to refresh data' });\n        throw error;\n      }\n    }\n    return this;\n  }\n\n  /**\n   * Get current data\n   * @returns {object} Current data object\n   */\n  getCurrentData() {\n    return this.getData();\n  }\n\n  /**\n   * Get field definition by name\n   * @param {string} name - Field name\n   * @returns {object|null} Field definition\n   */\n  getField(name) {\n    return this.fields.find(field => field.name === name) || null;\n  }\n\n  /**\n   * Set custom format for a specific field\n   * @param {string} fieldName - Name of the field\n   * @param {string} format - Pipe format string (e.g., \"currency|uppercase\")\n   * @returns {DataView} This instance for chaining\n   */\n  setFieldFormat(fieldName, format) {\n    const field = this.getField(fieldName);\n    if (field) {\n      field.format = format;\n      field.formatter = format;  // Keep both in sync\n    } else {\n      // Create new field if it doesn't exist\n      this.fields.push({\n        name: fieldName,\n        label: this.formatLabel(fieldName),\n        type: this.inferFieldType(this.getData()[fieldName], fieldName),\n        format: format,\n        formatter: format  // Keep both in sync\n      });\n    }\n    return this;\n  }\n\n  /**\n   * Add additional formatter to existing field format pipe chain\n   * @param {string} fieldName - Name of the field\n   * @param {string} formatter - Formatter to add (e.g., \"uppercase\", \"truncate(50)\")\n   * @returns {DataView} This instance for chaining\n   */\n  addFormatPipe(fieldName, formatter) {\n    const field = this.getField(fieldName);\n    if (field) {\n      if (field.format) {\n        field.format += `|${formatter}`;\n        field.formatter = field.format;  // Keep both in sync\n      } else {\n        field.format = formatter;\n        field.formatter = formatter;  // Keep both in sync\n      }\n    }\n    return this;\n  }\n\n  /**\n   * Clear custom format for a field (revert to auto-inferred format)\n   * @param {string} fieldName - Name of the field\n   * @returns {DataView} This instance for chaining\n   */\n  clearFieldFormat(fieldName) {\n    const field = this.getField(fieldName);\n    if (field) {\n      const data = this.getData();\n      const inferred = this.inferFormatter(data[fieldName], fieldName, field.type);\n      field.format = inferred;\n      field.formatter = inferred;  // Keep both in sync\n    }\n    return this;\n  }\n\n  /**\n   * Get formatted value for a specific field without rendering\n   * @param {string} fieldName - Name of the field\n   * @param {*} value - Optional value to format (uses current data if not provided)\n   * @returns {*} Formatted value\n   */\n  getFormattedValue(fieldName, value = null) {\n    const field = this.getField(fieldName);\n    if (!field) return null;\n\n    const targetValue = value !== null ? value : this.getData()[fieldName];\n\n    // Support both 'format' and 'formatter' for consistency with TableView\n    const formatString = field.format || field.formatter;\n    if (formatString && targetValue != null) {\n      return dataFormatter.pipe(targetValue, formatString);\n    }\n\n    return targetValue;\n  }\n\n  /**\n   * Set multiple field formats at once\n   * @param {object} formats - Object mapping field names to format strings\n   * @returns {DataView} This instance for chaining\n   */\n  setFieldFormats(formats) {\n    Object.entries(formats).forEach(([fieldName, format]) => {\n      this.setFieldFormat(fieldName, format);\n    });\n    return this;\n  }\n\n  /**\n   * Get all current field formats as an object\n   * @returns {object} Object mapping field names to their current formats\n   */\n  getFieldFormats() {\n    const formats = {};\n    this.fields.forEach(field => {\n      const formatString = field.format || field.formatter;\n      if (formatString) {\n        formats[field.name] = formatString;\n      }\n    });\n    return formats;\n  }\n\n  /**\n   * Set up model event listeners if model is provided\n   */\n  onInit() {\n    super.onInit();\n\n    // Listen for model changes\n    if (this.model && typeof this.model.on === 'function') {\n      this.model.on('change', () => {\n        this.render();\n      });\n    }\n  }\n\n  /**\n   * Static factory method\n   * @param {object} options - DataView options\n   * @returns {DataView} New DataView instance\n   */\n  static create(options = {}) {\n    return new DataView(options);\n  }\n}\n\nexport default DataView;\n"],"names":[],"mappings":"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"}