@zentto/report-designer 1.6.7 → 1.7.1

package/dist/zentto-report-designer.js

@@ -72,14 +72,35 @@ const ELEMENT_TYPE_ICONS = {
     totalPages: '#',
 };
 const TOOLBOX_ITEMS = [
-    { type: 'text', label: 'Text', icon: 'T', preview: 'Aa', description: 'Static text label or title' },
-    { type: 'field', label: 'Field', icon: 'F', preview: '[Field]', description: 'Data-bound field from a source' },
-    { type: 'image', label: 'Image', icon: '\u{1F5BC}', preview: '\u{1F304}', description: 'Static or dynamic image' },
-    { type: 'line', label: 'Line', icon: '/', preview: '\u2500\u2500\u2500', description: 'Horizontal or vertical line' },
-    { type: 'rect', label: 'Rectangle', icon: '[]', preview: '\u25AD', description: 'Rectangle or filled box' },
-    { type: 'barcode', label: 'Barcode', icon: 'BC', preview: '||||', description: 'QR, Code128, EAN13, Code39' },
-    { type: 'pageNumber', label: 'Page #', icon: '#', preview: '1/5', description: 'Current page number' },
-    { type: 'currentDate', label: 'Date', icon: 'D', preview: '27/03', description: 'Current date/time stamp' },
+    // ─── Text & Data ───
+    { type: 'text', label: 'Text', icon: 'T', preview: 'Aa', description: 'Static text label or title', category: 'Text & Data' },
+    { type: 'field', label: 'Field', icon: 'F', preview: '[Field]', description: 'Data-bound field from a source', category: 'Text & Data' },
+    { type: 'text', label: 'Title', icon: 'H', preview: 'Title', description: 'Large bold title text', category: 'Text & Data', extraProps: { content: 'Title', style: { fontSize: 18, fontWeight: 'bold' }, width: 80, height: 10 } },
+    { type: 'text', label: 'Subtitle', icon: 'h', preview: 'Subtitle', description: 'Medium subtitle text', category: 'Text & Data', extraProps: { content: 'Subtitle', style: { fontSize: 13, fontWeight: 'bold', color: '#666' }, width: 60, height: 8 } },
+    { type: 'text', label: 'Label', icon: 'L', preview: 'Label:', description: 'Small bold label', category: 'Text & Data', extraProps: { content: 'Label:', style: { fontSize: 9, fontWeight: 'bold' }, width: 25, height: 6 } },
+    // ─── Shapes & Lines ───
+    { type: 'line', label: 'Line', icon: '\u2500', preview: '\u2500\u2500\u2500', description: 'Horizontal line separator', category: 'Shapes' },
+    { type: 'line', label: 'Thick Line', icon: '\u2501', preview: '\u2501\u2501\u2501', description: 'Thick separator line', category: 'Shapes', extraProps: { lineStyle: { color: '#000', width: 3, style: 'solid' }, width: 80 } },
+    { type: 'line', label: 'Dashed Line', icon: '\u2504', preview: '- - -', description: 'Dashed separator', category: 'Shapes', extraProps: { lineStyle: { color: '#999', width: 1, style: 'dashed' }, width: 80 } },
+    { type: 'rect', label: 'Rectangle', icon: '\u25AD', preview: '\u25AD', description: 'Rectangle or filled box', category: 'Shapes' },
+    { type: 'rect', label: 'Filled Box', icon: '\u25A0', preview: '\u25A0', description: 'Filled color box', category: 'Shapes', extraProps: { fill: '#1976d2', lineStyle: { width: 0 }, width: 30, height: 15 } },
+    { type: 'rect', label: 'Rounded Box', icon: '\u25A2', preview: '\u25A2', description: 'Box with rounded corners', category: 'Shapes', extraProps: { cornerRadius: 6, lineStyle: { color: '#ccc', width: 1, style: 'solid' }, width: 40, height: 15 } },
+    // ─── Media ───
+    { type: 'image', label: 'Image', icon: '\u{1F5BC}', preview: '\u{1F304}', description: 'Static or dynamic image', category: 'Media' },
+    { type: 'barcode', label: 'QR Code', icon: '\u2588', preview: 'QR', description: 'QR code from field or value', category: 'Media', extraProps: { barcodeType: 'qr', value: '12345', width: 20, height: 20 } },
+    { type: 'barcode', label: 'Barcode 128', icon: '|||', preview: '||||', description: 'Code128 barcode', category: 'Media', extraProps: { barcodeType: 'code128', value: '12345' } },
+    { type: 'barcode', label: 'EAN-13', icon: '\u2584', preview: 'EAN', description: 'EAN-13 product barcode', category: 'Media', extraProps: { barcodeType: 'ean13', value: '5901234123457' } },
+    // ─── Charts ───
+    { type: 'chart', label: 'Bar Chart', icon: '\u{1F4CA}', preview: '\u{2581}\u{2583}\u{2585}\u{2587}', description: 'Bar chart visualization', category: 'Charts', extraProps: { chartType: 'bar', labelField: '', valueFields: [], width: 80, height: 50 } },
+    { type: 'chart', label: 'Line Chart', icon: '\u{1F4C8}', preview: '\u{2571}\u{2572}\u{2571}', description: 'Line chart with trends', category: 'Charts', extraProps: { chartType: 'line', labelField: '', valueFields: [], width: 80, height: 50 } },
+    { type: 'chart', label: 'Pie Chart', icon: '\u{1F967}', preview: '\u{25D4}', description: 'Pie/donut chart', category: 'Charts', extraProps: { chartType: 'pie', labelField: '', valueFields: [], width: 50, height: 50 } },
+    { type: 'chart', label: 'Area Chart', icon: '\u{1F30A}', preview: '\u{2586}\u{2584}\u{2582}', description: 'Area chart with fill', category: 'Charts', extraProps: { chartType: 'area', labelField: '', valueFields: [], width: 80, height: 50 } },
+    { type: 'chart', label: 'Combo Chart', icon: '\u{1F4CA}', preview: '\u{2581}\u{2571}\u{2585}', description: 'Bars + lines combined', category: 'Charts', extraProps: { chartType: 'combo', labelField: '', valueFields: [], width: 80, height: 50 } },
+    // ─── Page & Special ───
+    { type: 'pageNumber', label: 'Page Number', icon: '#', preview: '1/5', description: 'Page N of M', category: 'Special' },
+    { type: 'currentDate', label: 'Print Date', icon: '\u{1F4C5}', preview: '27/03', description: 'Current date/time', category: 'Special' },
+    { type: 'currentDate', label: 'Print Time', icon: '\u{1F552}', preview: '14:30', description: 'Current time only', category: 'Special', extraProps: { format: 'HH:mm:ss' } },
+    { type: 'text', label: 'Watermark', icon: '\u{1F4A7}', preview: 'DRAFT', description: 'Semi-transparent watermark text', category: 'Special', extraProps: { content: 'DRAFT', style: { fontSize: 48, fontWeight: 'bold', color: '#ccc', textAlign: 'center', opacity: 0.3 }, width: 120, height: 30 } },
 ];
 let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
     constructor() {
@@ -130,6 +151,10 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
         this._zenttoConnectorOpen = false;
         this._showCode = false;
         this._formulaEditorOpen = false;
+        this._showLeftPanel = true;
+        this._showRightPanel = true;
+        this._leftWidth = 200;
+        this._rightWidth = 240;
         this._undoStack = [];
         this._redoStack = [];
         this._editingReportName = false;
@@ -219,12 +244,15 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
 
     .designer {
       display: grid;
-      grid-template-columns: 220px 1fr 260px;
       grid-template-rows: auto auto 1fr;
       height: 100%;
       background: var(--zrd-bg);
       color: var(--zrd-text);
     }
+    .designer.panels-both { grid-template-columns: var(--left-w, 200px) 1fr var(--right-w, 240px); }
+    .designer.panels-left { grid-template-columns: var(--left-w, 200px) 1fr; }
+    .designer.panels-right { grid-template-columns: 1fr var(--right-w, 240px); }
+    .designer.panels-none { grid-template-columns: 1fr; }
 
     /* ─── Top Toolbar ─── */
     .top-toolbar {
@@ -296,53 +324,94 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
       color: var(--zrd-accent);
       font-weight: 600;
     }
-    .panel-content { padding: 8px; }
+    .panel-content {
+      padding: 4px;
+      overflow-y: auto;
+      flex: 1;
+    }
+
+    /* ─── Resize Handle (between panels) ─── */
+    .panel-resize {
+      width: 4px;
+      cursor: col-resize;
+      background: transparent;
+      transition: background 0.15s;
+      flex-shrink: 0;
+    }
+    .panel-resize:hover, .panel-resize.active { background: var(--zrd-accent); }
+
+    /* ─── Panel Toggle Buttons (in toolbar) ─── */
+    .panel-toggle {
+      padding: 2px 6px;
+      border: 1px solid var(--zrd-border);
+      border-radius: 3px;
+      cursor: pointer;
+      font-size: 10px;
+      background: var(--zrd-panel-bg);
+      color: var(--zrd-text);
+    }
+    .panel-toggle:hover { background: var(--zrd-accent-light); }
+    .panel-toggle.hidden { opacity: 0.4; text-decoration: line-through; }
 
-    /* ─── Toolbox ─── */
+    /* ─── Toolbox (2-column grid) ─── */
+    .toolbox-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 3px;
+      padding: 2px;
+    }
+    .toolbox-category {
+      grid-column: 1 / -1;
+      padding: 4px 6px 2px;
+      font-size: 9px;
+      font-weight: 600;
+      color: var(--zrd-text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-top: 2px;
+    }
     .toolbox-item {
       display: flex;
-      align-items: flex-start;
-      gap: 8px;
-      padding: 8px;
+      flex-direction: column;
+      align-items: center;
+      gap: 2px;
+      padding: 6px 4px;
       border: 1px solid var(--zrd-border);
       border-radius: 4px;
-      margin-bottom: 4px;
       cursor: grab;
       user-select: none;
+      text-align: center;
+      min-height: 48px;
+      justify-content: center;
     }
-    .toolbox-item:hover { background: var(--zrd-accent-light); }
+    .toolbox-item:hover { background: var(--zrd-accent-light); border-color: var(--zrd-accent); }
+    .toolbox-item:active { cursor: grabbing; }
     .toolbox-icon {
-      width: 36px;
-      height: 36px;
+      width: 28px;
+      height: 28px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: var(--zrd-accent-light);
       border-radius: 4px;
       font-weight: bold;
-      font-size: 14px;
+      font-size: 13px;
       color: var(--zrd-accent);
       flex-shrink: 0;
     }
     .toolbox-icon[data-type="text"] { font-family: Georgia, serif; font-style: italic; }
-    .toolbox-icon[data-type="field"] { background: #e3f2fd; font-size: 11px; }
-    .toolbox-icon[data-type="line"] { font-size: 16px; letter-spacing: -3px; }
-    .toolbox-icon[data-type="rect"] { font-size: 20px; }
-    .toolbox-icon[data-type="barcode"] { font-family: monospace; letter-spacing: -1px; font-size: 16px; }
-    .toolbox-info {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      min-width: 0;
-    }
+    .toolbox-icon[data-type="field"] { background: #e3f2fd; font-size: 10px; }
+    .toolbox-icon[data-type="line"] { font-size: 14px; letter-spacing: -3px; }
+    .toolbox-icon[data-type="rect"] { font-size: 18px; }
+    .toolbox-icon[data-type="barcode"] { font-family: monospace; letter-spacing: -1px; font-size: 14px; }
     .toolbox-label {
-      font-weight: 600;
-      font-size: 12px;
-    }
-    .toolbox-desc {
-      font-size: 10px;
-      color: var(--zrd-text-muted);
-      line-height: 1.3;
+      font-size: 9px;
+      font-weight: 500;
+      line-height: 1.1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%;
     }
 
     /* ─── Canvas Area ─── */
@@ -1163,9 +1232,7 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
 
     /* ─── Responsive: Grid Layout ─── */
     @media (max-width: 1024px) {
-      .designer {
-        grid-template-columns: 180px 1fr 220px;
-      }
+      .designer.panels-both { grid-template-columns: 160px 1fr 200px; }
     }
     @media (max-width: 768px) {
       .designer {
@@ -1575,6 +1642,9 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
             case 'barcode':
                 element = { ...baseProps, type: 'barcode', barcodeType: 'qr', value: '12345', width: 15, height: 15 };
                 break;
+            case 'chart':
+                element = { ...baseProps, type: 'chart', chartType: 'bar', dataSource: '', labelField: '', valueFields: [], width: 80, height: 50 };
+                break;
             case 'pageNumber':
                 element = { ...baseProps, type: 'pageNumber', format: 'Page {page} of {pages}', width: 30 };
                 break;
@@ -1901,7 +1971,10 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
             });
         }
         else if (type) {
-            this._addElementToBand(bandId, type);
+            // Check for extra props from toolbox items (Title, Watermark, etc.)
+            const extraJson = e.dataTransfer?.getData('extra-props');
+            const extraProps = extraJson ? JSON.parse(extraJson) : undefined;
+            this._addElementToBand(bandId, type, extraProps);
         }
     }
     _onBandDragOver(e) {
@@ -2327,7 +2400,8 @@ REGLAS:
         const marginLeftPx = this._toPx(this._layout.margins.left);
         const gridSize = this._toPx(this.gridSnap);
         return html `
-      <div class="designer">
+      <div class="designer ${this._showLeftPanel && this._showRightPanel ? 'panels-both' : this._showLeftPanel ? 'panels-left' : this._showRightPanel ? 'panels-right' : 'panels-none'}"
+           style="--left-w:${this._leftWidth}px;--right-w:${this._rightWidth}px">
         ${this._renderTopToolbar()}
         ${this._renderPageSetupBar()}
 
@@ -2335,7 +2409,7 @@ REGLAS:
           <div class="mobile-overlay" @click=${() => { this._mobileLeftOpen = false; this._mobileRightOpen = false; }}></div>
         ` : nothing}
 
-        <div class="left-panel ${this._mobileLeftOpen ? 'mobile-open' : ''}">
+        ${this._showLeftPanel ? html `<div class="left-panel ${this._mobileLeftOpen ? 'mobile-open' : ''}" style="display:flex;flex-direction:column;overflow:hidden;">
           <div class="panel-tabs">
             <div class="panel-tab ${this._activePanel === 'toolbox' ? 'active' : ''}"
                  @click=${() => this._activePanel = 'toolbox'}>Toolbox</div>
@@ -2346,7 +2420,7 @@ REGLAS:
             ${this._activePanel === 'toolbox' ? this._renderToolbox() : null}
             ${this._activePanel === 'data' ? this._renderDataPanel() : null}
           </div>
-        </div>
+        </div>` : nothing}
 
         <div class="canvas-area"
              @wheel=${(e) => this._handleWheel(e)}
@@ -2397,9 +2471,9 @@ REGLAS:
           </div>
         </div>
 
-        <div class="right-panel ${this._mobileRightOpen ? 'mobile-open' : ''}">
+        ${this._showRightPanel ? html `<div class="right-panel ${this._mobileRightOpen ? 'mobile-open' : ''}">
           ${this._renderPropertiesPanel()}
-        </div>
+        </div>` : nothing}
       </div>
       ${this._renderContextMenu()}
       ${this._renderPageSetupDialog()}
@@ -2978,23 +3052,51 @@ REGLAS:
           <button @click=${() => { this._zoom = 1.5; }} title="Zoom 150%">150%</button>
           <button @click=${() => { this._zoom = 2; }} title="Zoom 200%">200%</button>
         </div>
+
+        <!-- Panel Toggles -->
+        <div style="display:flex;gap:2px;margin-left:4px;border-left:1px solid var(--zrd-border);padding-left:6px;">
+          <button class="panel-toggle ${this._showLeftPanel ? '' : 'hidden'}"
+                  title="${this._showLeftPanel ? 'Hide Toolbox/Data' : 'Show Toolbox/Data'}"
+                  @click=${() => { this._showLeftPanel = !this._showLeftPanel; }}>
+            \u{2630}
+          </button>
+          <button class="panel-toggle ${this._showRightPanel ? '' : 'hidden'}"
+                  title="${this._showRightPanel ? 'Hide Properties' : 'Show Properties'}"
+                  @click=${() => { this._showRightPanel = !this._showRightPanel; }}>
+            \u{2699}
+          </button>
+        </div>
       </div>
     `;
     }
     // ─── Toolbox ──────────────────────────────────────────────────
     _renderToolbox() {
+        const categories = new Map();
+        for (const item of TOOLBOX_ITEMS) {
+            if (!categories.has(item.category))
+                categories.set(item.category, []);
+            categories.get(item.category).push(item);
+        }
         return html `
-      ${TOOLBOX_ITEMS.map(item => html `
-        <div class="toolbox-item"
-             draggable="true"
-             @dragstart=${(e) => this._onToolboxDragStart(e, item.type)}>
-          <div class="toolbox-icon" data-type="${item.type}">${item.preview}</div>
-          <div class="toolbox-info">
-            <span class="toolbox-label">${item.label}</span>
-            <span class="toolbox-desc">${item.description}</span>
-          </div>
-        </div>
-      `)}
+      <div class="toolbox-grid">
+        ${[...categories.entries()].map(([cat, items]) => html `
+          <div class="toolbox-category">${cat}</div>
+          ${items.map(item => html `
+            <div class="toolbox-item"
+                 draggable="true"
+                 title="${item.description}"
+                 @dragstart=${(e) => {
+            this._onToolboxDragStart(e, item.type);
+            if (item.extraProps) {
+                e.dataTransfer?.setData('extra-props', JSON.stringify(item.extraProps));
+            }
+        }}>
+              <div class="toolbox-icon" data-type="${item.type}">${item.preview}</div>
+              <span class="toolbox-label">${item.label}</span>
+            </div>
+          `)}
+        `)}
+      </div>
     `;
     }
     // ─── Data Panel (Tree + Actions) ─────────────────────────────
@@ -3023,31 +3125,28 @@ REGLAS:
         ${this._renderOverlays()}
       `;
         }
-        // Action buttons bar
-        const hasActions = this.dbProvider || this.zenttoProvider || this._layout.dataSources.length > 0;
+        // Action buttons bar — always show so user can connect data sources
         return html `
-      ${hasActions ? html `
-        <div style="padding:6px 8px;display:flex;gap:4px;border-bottom:1px solid var(--zrd-border,#e0e0e0);flex-shrink:0;flex-wrap:wrap;">
-          ${this.dbProvider ? html `
-            <button style="flex:1;padding:5px 6px;border:1px solid var(--zrd-border,#ddd);border-radius:4px;cursor:pointer;font-size:10px;font-weight:600;background:var(--zrd-input-bg,#fff);color:var(--zrd-primary,#1976d2);min-width:70px;"
-                    @click=${() => { this._dbConnectorOpen = true; }}>
-              \u{1F5C4} DB
-            </button>
-          ` : nothing}
-          ${this.zenttoProvider ? html `
-            <button style="flex:1;padding:5px 6px;border:1px solid var(--zrd-border,#ddd);border-radius:4px;cursor:pointer;font-size:10px;font-weight:600;background:var(--zrd-input-bg,#fff);color:#e65100;min-width:70px;"
-                    @click=${() => { this._zenttoConnectorOpen = true; }}>
-              \u{1F310} Zentto
-            </button>
-          ` : nothing}
-          ${this._layout.dataSources.length > 0 ? html `
-            <button style="flex:1;padding:5px 6px;border:1px solid var(--zrd-border,#ddd);border-radius:4px;cursor:pointer;font-size:10px;font-weight:600;background:var(--zrd-input-bg,#fff);color:var(--zrd-text,#555);min-width:70px;"
-                    @click=${() => { this._erOverlayOpen = true; }}>
-              \u{1F4CA} ER
-            </button>
-          ` : nothing}
-        </div>
-      ` : nothing}
+      <div style="padding:6px 8px;display:flex;gap:4px;border-bottom:1px solid var(--zrd-border,#e0e0e0);flex-shrink:0;flex-wrap:wrap;">
+        <button style="flex:1;padding:5px 6px;border:1px solid var(--zrd-border,#ddd);border-radius:4px;cursor:pointer;font-size:10px;font-weight:600;background:var(--zrd-input-bg,#fff);color:var(--zrd-primary,#1976d2);min-width:50px;"
+                @click=${() => { this._dbConnectorOpen = true; }}>
+          \u{1F5C4} DB
+        </button>
+        <button style="flex:1;padding:5px 6px;border:1px solid var(--zrd-border,#ddd);border-radius:4px;cursor:pointer;font-size:10px;font-weight:600;background:var(--zrd-input-bg,#fff);color:#e65100;min-width:50px;"
+                @click=${() => { this._zenttoConnectorOpen = true; }}>
+          \u{1F310} Zentto
+        </button>
+        <button style="flex:1;padding:5px 6px;border:1px solid var(--zrd-border,#ddd);border-radius:4px;cursor:pointer;font-size:10px;font-weight:600;background:var(--zrd-input-bg,#fff);color:#2e7d32;min-width:50px;"
+                @click=${() => { this.dispatchEvent(new CustomEvent('add-rest-source', { bubbles: true, composed: true })); }}>
+          \u{1F517} REST
+        </button>
+        ${this._layout.dataSources.length > 0 ? html `
+          <button style="flex:1;padding:5px 6px;border:1px solid var(--zrd-border,#ddd);border-radius:4px;cursor:pointer;font-size:10px;font-weight:600;background:var(--zrd-input-bg,#fff);color:var(--zrd-text,#555);min-width:50px;"
+                  @click=${() => { this._erOverlayOpen = true; }}>
+            \u{1F4CA} ER
+          </button>
+        ` : nothing}
+      </div>
       <zrd-data-source-tree
         .dataSources=${this._layout.dataSources}
         .relations=${this._layout.relations || []}
@@ -3091,7 +3190,10 @@ REGLAS:
     _renderErOverlay() {
         return html `
       <div style="position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:10000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);"
-           @click=${() => { this._erOverlayOpen = false; }}>
+           @click=${() => { this._erOverlayOpen = false; }}
+           @keydown=${(e) => { if (e.key === 'Escape')
+            this._erOverlayOpen = false; }}
+           tabindex="-1">
         <div style="background:var(--zrd-panel-bg,#fff);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.3);width:85vw;height:80vh;display:flex;flex-direction:column;overflow:hidden;"
              @click=${(e) => e.stopPropagation()}>
           <div style="padding:16px 20px;border-bottom:1px solid var(--zrd-border,#eee);display:flex;justify-content:space-between;align-items:center;">
@@ -3103,6 +3205,8 @@ REGLAS:
             <zrd-er-diagram
               .dataSources=${this._layout.dataSources}
               .relations=${this._layout.relations || []}
+              .dbProvider=${this.dbProvider}
+              .zenttoProvider=${this.zenttoProvider}
               @relation-edit=${(e) => {
             this._editingRelation = e.detail.relation;
             this._relationEditorOpen = true;
@@ -3115,8 +3219,7 @@ REGLAS:
             this._layout = { ...this._layout, relations: (this._layout.relations || []).filter(r => r.id !== id) };
             this._commitChange();
         }}
-              @add-datasource=${() => { this._erOverlayOpen = false; this._dbConnectorOpen = true; this._activePanel = 'data'; }}
-              @add-zentto=${() => { this._erOverlayOpen = false; this._zenttoConnectorOpen = true; this._activePanel = 'data'; }}
+              @datasources-ready=${(e) => this._onDatasourcesReady(e.detail)}
               @add-rest=${() => { }}
               @table-focus=${() => {
             this._erOverlayOpen = false;
@@ -3385,6 +3488,9 @@ REGLAS:
             case 'barcode':
                 content = `[${el.barcodeType}]`;
                 break;
+            case 'chart':
+                content = `\u{1F4CA} [${el.chartType || 'chart'}]`;
+                break;
             case 'pageNumber':
                 content = el.format || 'Page #';
                 break;
@@ -4182,6 +4288,18 @@ __decorate([
 __decorate([
     state()
 ], ZenttoReportDesigner.prototype, "_formulaEditorOpen", void 0);
+__decorate([
+    state()
+], ZenttoReportDesigner.prototype, "_showLeftPanel", void 0);
+__decorate([
+    state()
+], ZenttoReportDesigner.prototype, "_showRightPanel", void 0);
+__decorate([
+    state()
+], ZenttoReportDesigner.prototype, "_leftWidth", void 0);
+__decorate([
+    state()
+], ZenttoReportDesigner.prototype, "_rightWidth", void 0);
 __decorate([
     state()
 ], ZenttoReportDesigner.prototype, "_undoStack", void 0);