@operato/input 9.0.10 → 9.0.14

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
  *
@@ -16,6 +18,8 @@ import { OxFormField } from '@operato/input';
  *   <ox-input-formula
  *     .value=${formulaValue}
  *     .availableVariables=${variables}
+ *     .availableFunctions=${functions}
+ *     .includeDefaultFunctions=${true}
  *   ></ox-input-formula>
  */
 let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
@@ -23,28 +27,13 @@ let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
         super(...arguments);
         this.value = '';
         this.availableVariables = [];
+        this.availableFunctions = [];
+        this.includeDefaultFunctions = true;
         this.errorMessage = '';
         this.isValid = true;
         this._changingNow = false;
-        // 기본 연산자들
-        this.operators = [
-            { symbol: '+', description: '더하기' },
-            { symbol: '-', description: '빼기' },
-            { symbol: '*', description: '곱하기' },
-            { symbol: '/', description: '나누기' },
-            { symbol: '(', description: '여는 괄호' },
-            { symbol: ')', description: '닫는 괄호' },
-            { symbol: '=', description: '같음' },
-            { symbol: '>', description: '보다 큼' },
-            { symbol: '<', description: '보다 작음' },
-            { symbol: '>=', description: '보다 크거나 같음' },
-            { symbol: '<=', description: '보다 작거나 같음' },
-            { symbol: '!=', description: '다름' },
-            { symbol: '&&', description: 'AND' },
-            { symbol: '||', description: 'OR' }
-        ];
         // 기본 함수들 (도움말 정보 포함)
-        this.functions = [
+        this._defaultFunctions = [
             {
                 name: 'SUM()',
                 description: '합계',
@@ -152,8 +141,26 @@ let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
                 ]
             }
         ];
+        // 기본 연산자들
+        this.operators = [
+            { symbol: '+', description: '더하기' },
+            { symbol: '-', description: '빼기' },
+            { symbol: '*', description: '곱하기' },
+            { symbol: '/', description: '나누기' },
+            { symbol: '(', description: '여는 괄호' },
+            { symbol: ')', description: '닫는 괄호' },
+            { symbol: '=', description: '같음' },
+            { symbol: '>', description: '보다 큼' },
+            { symbol: '<', description: '보다 작음' },
+            { symbol: '>=', description: '보다 크거나 같음' },
+            { symbol: '<=', description: '보다 작거나 같음' },
+            { symbol: '!=', description: '다름' },
+            { symbol: '&&', description: 'AND' },
+            { symbol: '||', description: 'OR' }
+        ];
     }
     static { this.styles = [
+        ScrollbarStyles,
         css `
       :host {
         display: flex;
@@ -376,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 */
@@ -460,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 {
@@ -487,6 +507,29 @@ let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
       }
     `
     ]; }
+    // 사용 가능한 함수 목록을 가져오는 getter
+    get functions() {
+        let resultFunctions = [];
+        // 기본 함수 포함 여부 확인
+        if (this.includeDefaultFunctions) {
+            resultFunctions = [...this._defaultFunctions];
+        }
+        // 사용자 정의 함수들 추가
+        if (this.availableFunctions && this.availableFunctions.length > 0) {
+            for (const customFunc of this.availableFunctions) {
+                const existingIndex = resultFunctions.findIndex(f => f.name === customFunc.name);
+                if (existingIndex >= 0) {
+                    // 기존 함수를 사용자 정의 함수로 교체
+                    resultFunctions[existingIndex] = customFunc;
+                }
+                else {
+                    // 새로운 함수 추가
+                    resultFunctions.push(customFunc);
+                }
+            }
+        }
+        return resultFunctions;
+    }
     getValue() {
         return this.value;
     }
@@ -513,8 +556,6 @@ let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
         this.isValid = true;
         this._updateValue();
     }
-    // 변수명 정규화 헬퍼 메서드
-    // _normalizeVariableName 메서드 완전히 삭제
     firstUpdated() {
         this.addEventListener('change', this._onChange.bind(this));
     }
@@ -588,33 +629,38 @@ let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
             `)}
         </div>
 
-        <div class="functions-container">
-          <div class="functions-header middle-align">
-            <md-icon>functions</md-icon>
-            <ox-i18n msgid="label.functions"></ox-i18n>
-          </div>
-
-          <div class="functions-grid">
-            ${this.functions.map(func => html `
-                <div class="function-button" @click=${() => this._insertFunction(func.template)}>
-                  <div style="font-weight: 500;">${func.name}</div>
-                  <div style="font-size: 10px; color: var(--md-sys-color-on-surface-variant);">${func.description}</div>
-                  ${func.help
+        ${this.functions.length > 0
             ? html `
-                        <md-icon
-                          class="help-icon"
-                          @click=${(e) => this._showFunctionHelp(e, func)}
-                          style="position: absolute; top: 4px; right: 4px; font-size: 12px;"
-                        >
-                          help
-                        </md-icon>
-                      `
-            : ''}
+              <div class="functions-container">
+                <div class="functions-header middle-align">
+                  <md-icon>functions</md-icon>
+                  <ox-i18n msgid="label.functions"></ox-i18n>
                 </div>
-              `)}
-          </div>
-        </div>
 
+                <div class="functions-grid">
+                  ${this.functions.map(func => html `
+                      <div class="function-button" @click=${() => this._insertFunction(func.template)}>
+                        <div style="font-weight: 500;">${func.name}</div>
+                        <div style="font-size: 10px; color: var(--md-sys-color-on-surface-variant);">
+                          ${func.description}
+                        </div>
+                        ${func.help
+                ? html `
+                              <md-icon
+                                class="help-icon"
+                                @click=${(e) => this._showFunctionHelp(e, func)}
+                                style="position: absolute; top: 4px; right: 4px; font-size: 12px;"
+                              >
+                                help
+                              </md-icon>
+                            `
+                : ''}
+                      </div>
+                    `)}
+                </div>
+              </div>
+            `
+            : ''}
         ${this.value
             ? html `
               <div class="preview-container">
@@ -700,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();
         // 외부 클릭으로 닫기
@@ -949,6 +935,12 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], KpiFormulaEditor.prototype, "availableVariables", void 0);
+__decorate([
+    property({ type: Array })
+], KpiFormulaEditor.prototype, "availableFunctions", void 0);
+__decorate([
+    property({ type: Boolean })
+], KpiFormulaEditor.prototype, "includeDefaultFunctions", void 0);
 __decorate([
     state()
 ], KpiFormulaEditor.prototype, "errorMessage", void 0);