@operato/input 9.0.13 → 9.0.17

package/dist/src/ox-input-formula.js

@@ -4,10 +4,12 @@
 import { __decorate } from "tslib";
 import '@material/web/icon/icon.js';
 import '@material/web/button/elevated-button.js';
+import './ox-input-formula-help-popup.js';
 import '@operato/i18n/ox-i18n.js';
 import { css, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { OxFormField } from '@operato/input';
+import { ScrollbarStyles } from '@operato/styles';
 /**
  * Formula editor component for KPI calculations
  *
@@ -158,6 +160,7 @@ let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
         ];
     }
     static { this.styles = [
+        ScrollbarStyles,
         css `
       :host {
         display: flex;
@@ -380,69 +383,80 @@ let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
         max-width: 500px;
         max-height: 400px;
         overflow-y: auto;
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
       }
 
       .help-title {
-        font-size: 16px;
+        font-size: 20px;
         font-weight: 600;
-        margin-bottom: var(--spacing-medium);
+        margin-bottom: 16px;
         color: var(--md-sys-color-primary);
+        padding: 20px 20px 16px 20px;
+        background: #f8f9fa;
+        border-bottom: 1px solid #e0e0e0;
+        border-radius: 8px 8px 0 0;
       }
 
       .help-section {
-        margin-bottom: var(--spacing-medium);
+        margin-bottom: 16px;
+        padding: 0 20px;
       }
 
       .help-section-title {
-        font-weight: 500;
-        margin-bottom: var(--spacing-small);
-        color: var(--md-sys-color-on-surface);
+        font-weight: 600;
+        margin-bottom: 8px;
+        color: #333;
+        font-size: 14px;
+        border-bottom: 1px solid #e0e0e0;
+        padding-bottom: 4px;
       }
 
       .help-content {
         font-size: 14px;
-        line-height: 1.5;
-        color: var(--md-sys-color-on-surface);
+        line-height: 1.6;
+        color: #555;
+        padding: 4px 0;
       }
 
       .help-syntax {
-        background-color: #f8f9fa;
-        padding: var(--spacing-small);
+        background: #f5f5f5;
+        border: 1px solid #e0e0e0;
         border-radius: 4px;
+        padding: 12px;
         font-family: 'Courier New', monospace;
-        font-size: 12px;
-        margin: var(--spacing-small) 0;
-        border-left: 3px solid var(--md-sys-color-primary);
+        font-size: 13px;
+        color: #333;
+        margin: 8px 0;
       }
 
       .help-example {
-        background-color: #f0f8ff;
-        padding: var(--spacing-small);
+        background: #f0f8ff;
+        border: 1px solid #c8e6c9;
         border-radius: 4px;
+        padding: 12px;
         font-family: 'Courier New', monospace;
-        font-size: 12px;
-        margin: var(--spacing-small) 0;
-        border-left: 3px solid var(--md-sys-color-secondary);
+        font-size: 13px;
+        color: #2e7d32;
+        margin: 8px 0;
       }
 
       .help-parameters {
-        margin: var(--spacing-small) 0;
+        margin: 8px 0;
       }
 
       .help-parameter {
-        display: flex;
-        justify-content: space-between;
-        padding: 2px 0;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-      }
-
-      .help-parameter-name {
-        font-weight: 500;
-        font-family: 'Courier New', monospace;
+        background: #f8f9fa;
+        border-left: 3px solid var(--md-sys-color-primary);
+        border-radius: 4px;
+        padding: 8px 12px;
+        margin-bottom: 4px;
+        font-size: 13px;
       }
 
       .help-parameter-desc {
-        color: var(--md-sys-color-on-surface-variant);
+        color: #555;
       }
 
       /* Dialog specific styles */
@@ -464,25 +478,27 @@ let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
       .dialog-actions {
         display: flex;
         justify-content: flex-end;
-        gap: var(--spacing-small);
-        margin-top: var(--spacing-medium);
-        padding: var(--spacing-medium);
-        border-top: 1px solid var(--md-sys-color-outline);
+        padding: 16px 20px;
+        border-top: 1px solid #e0e0e0;
+        background: #f8f9fa;
+        border-radius: 0 0 8px 8px;
       }
 
       .close-btn {
-        padding: var(--spacing-small) var(--spacing-medium);
-        border: 1px solid var(--md-sys-color-outline);
+        padding: 8px 16px;
+        border: 1px solid var(--md-sys-color-primary);
         border-radius: 4px;
-        background-color: white;
+        background-color: var(--md-sys-color-primary);
+        color: white;
         cursor: pointer;
         font-size: 14px;
+        font-weight: 500;
         transition: all 0.2s ease;
       }
 
       .close-btn:hover {
-        background-color: var(--md-sys-color-secondary-container);
-        border-color: var(--md-sys-color-secondary);
+        background-color: #1565c0;
+        border-color: #1565c0;
       }
 
       .middle-align {
@@ -730,170 +746,110 @@ let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
     }
     _showVariableHelp(e, variable) {
         e.stopPropagation();
-        // 간단한 테스트 버전
-        const message = `
-변수: ${variable.name}
-설명: ${variable.description || '없음'}
-타입: ${variable.type || '없음'}
-단위: ${variable.unit || '없음'}
-예시: ${variable.example || '없음'}
-    `.trim();
-        console.log('Variable help:', message);
-        // dialog 지원 여부 확인
-        if (typeof HTMLDialogElement !== 'undefined') {
-            const dialog = document.createElement('dialog');
-            dialog.className = 'help-dialog';
-            // HTML 문자열로 직접 작성
-            dialog.innerHTML = `
-        <div class="help-popup">
-          <div class="help-title">${variable.name}</div>
-          
-          ${variable.description
-                ? `
-            <div class="help-section">
-              <div class="help-section-title">설명</div>
-              <div class="help-content">${variable.description}</div>
-            </div>
-          `
-                : ''}
-          
-          ${variable.type
-                ? `
-            <div class="help-section">
-              <div class="help-section-title">타입</div>
-              <div class="help-content">${variable.type}</div>
-            </div>
-          `
-                : ''}
-          
-          ${variable.unit
-                ? `
-            <div class="help-section">
-              <div class="help-section-title">단위</div>
-              <div class="help-content">${variable.unit}</div>
-            </div>
-          `
-                : ''}
-          
-          ${variable.help
-                ? `
-            <div class="help-section">
-              <div class="help-section-title">상세 설명</div>
-              <div class="help-content">${variable.help}</div>
-            </div>
-          `
-                : ''}
-          
-          ${variable.example
-                ? `
-            <div class="help-section">
-              <div class="help-section-title">사용 예시</div>
-              <div class="help-example">${variable.example}</div>
-            </div>
-          `
-                : ''}
-        </div>
-        
-        <div class="dialog-actions">
-          <button class="close-btn" onclick="this.closest('dialog').close()">닫기</button>
-        </div>
-      `;
-            document.body.appendChild(dialog);
-            dialog.showModal();
-            // 외부 클릭으로 닫기
-            dialog.addEventListener('click', event => {
-                const rect = dialog.getBoundingClientRect();
-                const isInDialog = event.clientX >= rect.left &&
-                    event.clientX <= rect.right &&
-                    event.clientY >= rect.top &&
-                    event.clientY <= rect.bottom;
-                if (!isInDialog) {
-                    dialog.close();
-                }
+        const sections = [];
+        if (variable.description) {
+            sections.push({
+                title: '설명',
+                content: variable.description,
+                type: 'text'
             });
-            dialog.addEventListener('close', () => {
-                if (document.body.contains(dialog)) {
-                    document.body.removeChild(dialog);
-                }
+        }
+        if (variable.type) {
+            sections.push({
+                title: '타입',
+                content: variable.type,
+                type: 'text'
+            });
+        }
+        if (variable.unit) {
+            sections.push({
+                title: '단위',
+                content: variable.unit,
+                type: 'text'
+            });
+        }
+        if (variable.help) {
+            sections.push({
+                title: '상세 설명',
+                content: variable.help,
+                type: 'text'
             });
-            // ESC 키로 닫기
-            const handleEsc = (e) => {
-                if (e.key === 'Escape') {
-                    dialog.close();
-                    document.removeEventListener('keydown', handleEsc);
-                }
-            };
-            document.addEventListener('keydown', handleEsc);
         }
-        else {
-            // dialog를 지원하지 않는 브라우저에서는 alert 사용
-            alert(message);
+        if (variable.example) {
+            sections.push({
+                title: '사용 예시',
+                content: variable.example,
+                type: 'example'
+            });
         }
+        const helpContent = {
+            title: variable.name,
+            sections
+        };
+        this._showHelpPopup(helpContent);
     }
     _showFunctionHelp(e, func) {
         e.stopPropagation();
+        const sections = [
+            {
+                title: '설명',
+                content: func.description,
+                type: 'text'
+            },
+            {
+                title: '구문',
+                content: func.syntax,
+                type: 'code'
+            },
+            {
+                title: '매개변수',
+                content: func.parameters.join('\n'),
+                type: 'parameter'
+            },
+            {
+                title: '반환 타입',
+                content: func.returnType,
+                type: 'text'
+            }
+        ];
+        if (func.help) {
+            sections.push({
+                title: '상세 설명',
+                content: func.help,
+                type: 'text'
+            });
+        }
+        if (func.examples && func.examples.length > 0) {
+            sections.push({
+                title: '사용 예시',
+                content: func.examples.join('\n'),
+                type: 'example'
+            });
+        }
+        const helpContent = {
+            title: func.name,
+            sections
+        };
+        this._showHelpPopup(helpContent);
+    }
+    _showHelpPopup(content) {
         const dialog = document.createElement('dialog');
-        dialog.className = 'help-dialog';
-        // HTML 문자열로 직접 작성
-        dialog.innerHTML = `
-      <div class="help-popup">
-        <div class="help-title">${func.name}</div>
-
-        <div class="help-section">
-          <div class="help-section-title">설명</div>
-          <div class="help-content">${func.description}</div>
-        </div>
-
-        <div class="help-section">
-          <div class="help-section-title">구문</div>
-          <div class="help-syntax">${func.syntax}</div>
-        </div>
-
-        <div class="help-section">
-          <div class="help-section-title">매개변수</div>
-          <div class="help-parameters">
-            ${func.parameters
-            .map(param => `
-              <div class="help-parameter">
-                <span class="help-parameter-desc">${param}</span>
-              </div>
-            `)
-            .join('')}
-          </div>
-        </div>
-
-        <div class="help-section">
-          <div class="help-section-title">반환 타입</div>
-          <div class="help-content">${func.returnType}</div>
-        </div>
-
-        ${func.help
-            ? `
-          <div class="help-section">
-            <div class="help-section-title">상세 설명</div>
-            <div class="help-content">${func.help}</div>
-          </div>
-        `
-            : ''}
-        
-        ${func.examples && func.examples.length > 0
-            ? `
-          <div class="help-section">
-            <div class="help-section-title">사용 예시</div>
-            ${func.examples
-                .map(example => `
-              <div class="help-example">${example}</div>
-            `)
-                .join('')}
-          </div>
-        `
-            : ''}
-      </div>
-      
-      <div class="dialog-actions">
-        <button class="close-btn" onclick="this.closest('dialog').close()">닫기</button>
-      </div>
+        dialog.style.cssText = `
+      border: none;
+      border-radius: 8px;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+      padding: 0;
+      max-width: 500px;
+      max-height: 80vh;
+      overflow-y: auto;
+      background-color: white;
     `;
+        const helpPopup = document.createElement('ox-input-formula-help-popup');
+        helpPopup.content = content;
+        helpPopup.onClose = () => {
+            dialog.close();
+        };
+        dialog.appendChild(helpPopup);
         document.body.appendChild(dialog);
         dialog.showModal();
         // 외부 클릭으로 닫기