@operato/input 10.0.0 → 10.1.0

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

@@ -9,6 +9,7 @@ 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 { InputStyles } from './input-styles.js';
 import { ScrollbarStyles } from '@operato/styles';
 /**
  * Formula editor component for KPI calculations
@@ -160,57 +161,57 @@ let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
         ];
     }
     static { this.styles = [
+        InputStyles,
         ScrollbarStyles,
         css `
       :host {
         display: flex;
         flex-direction: column;
         overflow: hidden;
-        margin-bottom: var(--spacing-large);
-        gap: var(--spacing-medium);
+        margin-bottom: calc(var(--ox-input-gap) * 3);
+        gap: calc(var(--ox-input-gap) * 2);
       }
 
       .formula-container {
         display: flex;
         flex-direction: column;
-        gap: var(--spacing-small);
+        gap: var(--ox-input-gap);
       }
 
       .formula-input-container {
         display: flex;
         flex-direction: column;
-        gap: var(--spacing-small);
+        gap: var(--ox-input-gap);
       }
 
       .formula-textarea {
-        min-height: 120px;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-        border-radius: 4px;
-        padding: var(--spacing-medium);
-        font-family: 'Courier New', monospace;
-        font-size: 14px;
-        line-height: 1.4;
+        min-height: var(--ox-formula-textarea-min-height, 120px);
+        border: var(--ox-input-border);
+        border-radius: var(--ox-input-radius);
+        padding: var(--ox-input-padding);
+        font-family: var(--ox-formula-font-family, 'Courier New', monospace);
+        font-size: var(--ox-formula-textarea-font-size, 1.3rem);
+        line-height: var(--ox-input-line-height);
         resize: vertical;
-        background-color: #f8f9fa;
-        font-size: 1.3rem;
+        background-color: var(--ox-formula-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));
       }
 
       .formula-textarea:focus {
         outline: none;
         border-color: var(--md-sys-color-primary);
-        background-color: white;
+        background-color: var(--ox-input-background);
       }
 
       .variables-container {
         display: flex;
         flex-direction: column;
-        gap: var(--spacing-small);
+        gap: var(--ox-input-gap);
       }
 
       .variables-header {
         display: flex;
         align-items: center;
-        gap: var(--spacing-small);
+        gap: var(--ox-input-gap);
         font-weight: 500;
         color: var(--md-sys-color-on-surface);
       }
@@ -218,24 +219,24 @@ let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
       .variables-grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-        gap: var(--spacing-small);
-        max-height: 200px;
+        gap: var(--ox-input-gap);
+        max-height: var(--ox-formula-grid-max-height, 200px);
         overflow-y: auto;
-        border: 1px solid rgba(0, 0, 0, 0.1);
-        border-radius: 4px;
-        padding: var(--spacing-small);
-        background-color: #f8f9fa;
+        border: var(--ox-input-border);
+        border-radius: var(--ox-input-radius);
+        padding: var(--ox-input-gap);
+        background-color: var(--ox-formula-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));
       }
 
       .variable-item {
         display: flex;
         flex-direction: column;
-        padding: var(--spacing-small);
-        border: 1px solid rgba(0, 0, 0, 0.1);
-        border-radius: 4px;
-        background-color: white;
+        padding: var(--ox-input-gap);
+        border: var(--ox-input-border);
+        border-radius: var(--ox-input-radius);
+        background-color: var(--ox-input-background);
         cursor: pointer;
-        transition: all 0.2s ease;
+        transition: var(--ox-input-transition);
         position: relative;
       }
 
@@ -243,24 +244,24 @@ let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
         border-color: var(--md-sys-color-primary);
         background-color: var(--md-sys-color-primary-container);
         transform: translateY(-1px);
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        box-shadow: var(--ox-input-shadow);
       }
 
       .variable-name {
         font-weight: 500;
         color: var(--md-sys-color-primary);
-        font-size: 12px;
-        font-family: 'Courier New', monospace;
+        font-size: var(--ox-formula-font-size-small, 0.75rem);
+        font-family: var(--ox-formula-font-family, 'Courier New', monospace);
       }
 
       .variable-description {
-        font-size: 11px;
+        font-size: var(--ox-formula-font-size-tiny, 0.6875rem);
         color: var(--md-sys-color-on-surface-variant);
         margin-top: 2px;
       }
 
       .variable-type {
-        font-size: 10px;
+        font-size: var(--ox-formula-font-size-tiny, 0.6875rem);
         color: var(--md-sys-color-outline);
         margin-top: 2px;
         text-transform: uppercase;
@@ -270,12 +271,12 @@ let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
         position: absolute;
         top: 4px;
         right: 4px;
-        font-size: 14px;
+        font-size: var(--ox-input-font-size);
         color: var(--md-sys-color-outline);
         cursor: pointer;
-        padding: 2px;
-        border-radius: 2px;
-        transition: all 0.2s ease;
+        padding: var(--ox-formula-icon-padding, 2px);
+        border-radius: var(--ox-input-radius);
+        transition: var(--ox-input-transition);
       }
 
       .help-icon:hover {
@@ -286,19 +287,19 @@ let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
       .operators-container {
         display: flex;
         flex-wrap: wrap;
-        gap: var(--spacing-small);
-        margin-top: var(--spacing-small);
+        gap: var(--ox-input-gap);
+        margin-top: var(--ox-input-gap);
       }
 
       .operator-button {
-        padding: var(--spacing-small) var(--spacing-medium);
-        border: 1px solid rgba(0, 0, 0, 0.2);
-        border-radius: 4px;
-        background-color: white;
+        padding: var(--ox-input-padding);
+        border: var(--ox-input-border);
+        border-radius: var(--ox-input-radius);
+        background-color: var(--ox-input-background);
         cursor: pointer;
-        font-family: 'Courier New', monospace;
-        font-size: 12px;
-        transition: all 0.2s ease;
+        font-family: var(--ox-formula-font-family, 'Courier New', monospace);
+        font-size: var(--ox-formula-font-size-small, 0.75rem);
+        transition: var(--ox-input-transition);
       }
 
       .operator-button:hover {
@@ -309,8 +310,8 @@ let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
       .functions-container {
         display: flex;
         flex-direction: column;
-        gap: var(--spacing-small);
-        margin-top: var(--spacing-small);
+        gap: var(--ox-input-gap);
+        margin-top: var(--ox-input-gap);
       }
 
       .functions-header {
@@ -321,19 +322,19 @@ let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
       .functions-grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-        gap: var(--spacing-small);
+        gap: var(--ox-input-gap);
       }
 
       .function-button {
-        padding: var(--spacing-small);
-        border: 1px solid rgba(0, 0, 0, 0.2);
-        border-radius: 4px;
-        background-color: white;
+        padding: var(--ox-input-gap);
+        border: var(--ox-input-border);
+        border-radius: var(--ox-input-radius);
+        background-color: var(--ox-input-background);
         cursor: pointer;
-        font-family: 'Courier New', monospace;
-        font-size: 11px;
+        font-family: var(--ox-formula-font-family, 'Courier New', monospace);
+        font-size: var(--ox-formula-font-size-tiny, 0.6875rem);
         text-align: left;
-        transition: all 0.2s ease;
+        transition: var(--ox-input-transition);
         position: relative;
       }
 
@@ -343,39 +344,39 @@ let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
       }
 
       .preview-container {
-        margin-top: var(--spacing-medium);
-        padding: var(--spacing-medium);
-        background-color: #f8f9fa;
-        border-radius: 4px;
-        border: 1px solid rgba(0, 0, 0, 0.1);
+        margin-top: calc(var(--ox-input-gap) * 2);
+        padding: var(--ox-input-padding);
+        background-color: var(--ox-formula-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));
+        border-radius: var(--ox-input-radius);
+        border: var(--ox-input-border);
       }
 
       .preview-title {
         font-weight: 500;
-        margin-bottom: var(--spacing-small);
+        margin-bottom: var(--ox-input-gap);
         color: var(--md-sys-color-on-surface);
       }
 
       .preview-formula {
-        font-family: 'Courier New', monospace;
-        background-color: white;
-        padding: var(--spacing-small);
-        border-radius: 4px;
-        border: 1px solid rgba(0, 0, 0, 0.1);
+        font-family: var(--ox-formula-font-family, 'Courier New', monospace);
+        background-color: var(--ox-input-background);
+        padding: var(--ox-input-gap);
+        border-radius: var(--ox-input-radius);
+        border: var(--ox-input-border);
         white-space: pre-wrap;
         word-break: break-all;
       }
 
       .error-message {
         color: var(--md-sys-color-error);
-        font-size: 12px;
-        margin-top: var(--spacing-small);
+        font-size: var(--ox-formula-font-size-small, 0.75rem);
+        margin-top: var(--ox-input-gap);
       }
 
       .info-message {
         color: var(--md-sys-color-on-surface-variant);
-        font-size: 12px;
-        margin-top: var(--spacing-small);
+        font-size: var(--ox-formula-font-size-small, 0.75rem);
+        margin-top: var(--ox-input-gap);
       }
 
       /* 도움말 팝업 스타일 */
@@ -383,9 +384,9 @@ 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);
+        background: var(--ox-input-background);
+        border-radius: var(--ox-input-popup-radius);
+        box-shadow: var(--ox-input-shadow);
       }
 
       .help-title {
@@ -394,9 +395,9 @@ let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
         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;
+        background: var(--ox-formula-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));
+        border-bottom: var(--ox-input-border);
+        border-radius: var(--ox-input-popup-radius) var(--ox-input-popup-radius) 0 0;
       }
 
       .help-section {
@@ -407,38 +408,38 @@ let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
       .help-section-title {
         font-weight: 600;
         margin-bottom: 8px;
-        color: #333;
-        font-size: 14px;
-        border-bottom: 1px solid #e0e0e0;
+        color: var(--ox-input-color);
+        font-size: var(--ox-input-font-size);
+        border-bottom: var(--ox-input-border);
         padding-bottom: 4px;
       }
 
       .help-content {
-        font-size: 14px;
+        font-size: var(--ox-input-font-size);
         line-height: 1.6;
-        color: #555;
+        color: var(--ox-input-placeholder-color);
         padding: 4px 0;
       }
 
       .help-syntax {
-        background: #f5f5f5;
-        border: 1px solid #e0e0e0;
-        border-radius: 4px;
+        background: var(--ox-formula-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));
+        border: var(--ox-input-border);
+        border-radius: var(--ox-input-radius);
         padding: 12px;
-        font-family: 'Courier New', monospace;
+        font-family: var(--ox-formula-font-family, 'Courier New', monospace);
         font-size: 13px;
-        color: #333;
+        color: var(--ox-input-color);
         margin: 8px 0;
       }
 
       .help-example {
-        background: #f0f8ff;
-        border: 1px solid #c8e6c9;
-        border-radius: 4px;
+        background: var(--md-sys-color-secondary-container);
+        border: 1px solid var(--md-sys-color-tertiary-container);
+        border-radius: var(--ox-input-radius);
         padding: 12px;
-        font-family: 'Courier New', monospace;
+        font-family: var(--ox-formula-font-family, 'Courier New', monospace);
         font-size: 13px;
-        color: #2e7d32;
+        color: var(--md-sys-color-on-tertiary-container);
         margin: 8px 0;
       }
 
@@ -447,58 +448,58 @@ let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
       }
 
       .help-parameter {
-        background: #f8f9fa;
+        background: var(--ox-formula-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));
         border-left: 3px solid var(--md-sys-color-primary);
-        border-radius: 4px;
+        border-radius: var(--ox-input-radius);
         padding: 8px 12px;
         margin-bottom: 4px;
         font-size: 13px;
       }
 
       .help-parameter-desc {
-        color: #555;
+        color: var(--ox-input-placeholder-color);
       }
 
       /* Dialog specific styles */
       .help-dialog {
         border: none;
-        border-radius: 8px;
-        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+        border-radius: var(--ox-input-popup-radius);
+        box-shadow: var(--ox-input-shadow);
         padding: 0;
         max-width: 500px;
         max-height: 80vh;
         overflow-y: auto;
-        background-color: white;
+        background-color: var(--ox-input-background);
       }
 
       .help-dialog::backdrop {
-        background-color: rgba(0, 0, 0, 0.5);
+        background-color: var(--ox-input-scrim);
       }
 
       .dialog-actions {
         display: flex;
         justify-content: flex-end;
         padding: 16px 20px;
-        border-top: 1px solid #e0e0e0;
-        background: #f8f9fa;
+        border-top: var(--ox-input-border);
+        background: var(--ox-formula-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));
         border-radius: 0 0 8px 8px;
       }
 
       .close-btn {
         padding: 8px 16px;
         border: 1px solid var(--md-sys-color-primary);
-        border-radius: 4px;
+        border-radius: var(--ox-input-radius);
         background-color: var(--md-sys-color-primary);
-        color: white;
+        color: var(--md-sys-color-on-primary);
         cursor: pointer;
-        font-size: 14px;
+        font-size: var(--ox-input-font-size);
         font-weight: 500;
-        transition: all 0.2s ease;
+        transition: var(--ox-input-transition);
       }
 
       .close-btn:hover {
-        background-color: #1565c0;
-        border-color: #1565c0;
+        background-color: var(--ox-input-focus-color);
+        border-color: var(--ox-input-focus-color);
       }
 
       .middle-align {
@@ -641,7 +642,7 @@ let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
                   ${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);">
+                        <div style="font-size: var(--ox-formula-font-size-tiny, 0.6875rem); color: var(--md-sys-color-on-surface-variant);">
                           ${func.description}
                         </div>
                         ${func.help
@@ -649,7 +650,7 @@ let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
                               <md-icon
                                 class="help-icon"
                                 @click=${(e) => this._showFunctionHelp(e, func)}
-                                style="position: absolute; top: 4px; right: 4px; font-size: 12px;"
+                                style="position: absolute; top: 4px; right: 4px; font-size: var(--ox-formula-font-size-small, 0.75rem);"
                               >
                                 help
                               </md-icon>
@@ -836,13 +837,13 @@ let KpiFormulaEditor = class KpiFormulaEditor extends OxFormField {
         const dialog = document.createElement('dialog');
         dialog.style.cssText = `
       border: none;
-      border-radius: 8px;
-      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+      border-radius: var(--ox-input-popup-radius);
+      box-shadow: var(--ox-input-shadow);
       padding: 0;
       max-width: 500px;
       max-height: 80vh;
       overflow-y: auto;
-      background-color: white;
+      background-color: var(--ox-input-background);
     `;
         const helpPopup = document.createElement('ox-input-formula-help-popup');
         helpPopup.content = content;