@operato/input 9.0.13 → 9.0.17

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [9.0.17](https://github.com/hatiolab/operato/compare/v9.0.16...v9.0.17) (2025-08-02)
+
+
+### :bug: Bug Fix
+
+* add ox-input-secret, ox-property-editor-secret, ox-grist-secret ([8afbeae](https://github.com/hatiolab/operato/commit/8afbeae2c8eee9c3983d35ce5a709e25329eb6a7))
+
+
+
+### [9.0.14](https://github.com/hatiolab/operato/compare/v9.0.13...v9.0.14) (2025-07-27)
+
+
+### :bug: Bug Fix
+
+* help popup style for ox-input-formula ([a2fec19](https://github.com/hatiolab/operato/commit/a2fec1918584b85329566f5df80dac3864d104f3))
+
+
+
 ### [9.0.13](https://github.com/hatiolab/operato/compare/v9.0.12...v9.0.13) (2025-07-27)
 
 

package/dist/src/index.d.ts

@@ -28,4 +28,5 @@ export * from './ox-input-textarea.js';
 export * from './ox-input-direction.js';
 export * from './ox-input-table-column-config.js';
 export * from './ox-input-search.js';
+export * from './ox-input-secret.js';
 export * from './ox-input-signature.js';

package/dist/src/index.js

@@ -28,5 +28,6 @@ export * from './ox-input-textarea.js';
 export * from './ox-input-direction.js';
 export * from './ox-input-table-column-config.js';
 export * from './ox-input-search.js';
+export * from './ox-input-secret.js';
 export * from './ox-input-signature.js';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mCAAmC,CAAA;AACjD,cAAc,sBAAsB,CAAA;AACpC,cAAc,yBAAyB,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-switch.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-3axis.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab.js'\nexport * from './ox-input-partition-keys.js'\nexport * from './ox-input-duration.js'\nexport * from './ox-input-quantifier.js'\nexport * from './ox-input-select-buttons.js'\nexport * from './ox-input-textarea.js'\nexport * from './ox-input-direction.js'\nexport * from './ox-input-table-column-config.js'\nexport * from './ox-input-search.js'\nexport * from './ox-input-signature.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mCAAmC,CAAA;AACjD,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,yBAAyB,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-switch.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-3axis.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab.js'\nexport * from './ox-input-partition-keys.js'\nexport * from './ox-input-duration.js'\nexport * from './ox-input-quantifier.js'\nexport * from './ox-input-select-buttons.js'\nexport * from './ox-input-textarea.js'\nexport * from './ox-input-direction.js'\nexport * from './ox-input-table-column-config.js'\nexport * from './ox-input-search.js'\nexport * from './ox-input-secret.js'\nexport * from './ox-input-signature.js'\n"]}

package/dist/src/ox-input-formula-help-popup.d.ts

@@ -0,0 +1,18 @@
+import '@material/web/icon/icon.js';
+import { LitElement } from 'lit';
+export type HelpContent = {
+    title: string;
+    sections: Array<{
+        title: string;
+        content: string;
+        type?: 'text' | 'code' | 'parameter' | 'example';
+    }>;
+};
+export declare class OxInputFormulaHelpPopup extends LitElement {
+    static styles: import("lit").CSSResult[];
+    content?: HelpContent;
+    onClose?: () => void;
+    render(): import("lit-html").TemplateResult<1>;
+    private _renderSectionContent;
+    private _onClose;
+}

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

@@ -0,0 +1,166 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+let OxInputFormulaHelpPopup = class OxInputFormulaHelpPopup extends LitElement {
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      .help-popup {
+        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: 20px;
+        font-weight: 600;
+        margin-bottom: 16px;
+        color: #1976d2;
+        padding: 20px 20px 16px 20px;
+        background: #f8f9fa;
+        border-bottom: 1px solid #e0e0e0;
+        border-radius: 8px 8px 0 0;
+      }
+
+      .help-content {
+        padding: 0 20px;
+      }
+
+      .help-section {
+        margin-bottom: 16px;
+      }
+
+      .help-section-title {
+        font-weight: 600;
+        margin-bottom: 8px;
+        color: #333;
+        font-size: 14px;
+        border-bottom: 1px solid #e0e0e0;
+        padding-bottom: 4px;
+      }
+
+      .help-section-content {
+        font-size: 14px;
+        line-height: 1.6;
+        color: #555;
+        padding: 4px 0;
+      }
+
+      .help-code {
+        background: #f5f5f5;
+        border: 1px solid #e0e0e0;
+        border-radius: 4px;
+        padding: 12px;
+        font-family: 'Courier New', monospace;
+        font-size: 13px;
+        color: #333;
+        margin: 8px 0;
+      }
+
+      .help-example {
+        background: #f0f8ff;
+        border: 1px solid #c8e6c9;
+        border-radius: 4px;
+        padding: 12px;
+        font-family: 'Courier New', monospace;
+        font-size: 13px;
+        color: #2e7d32;
+        margin: 8px 0;
+      }
+
+      .help-parameter {
+        background: #f8f9fa;
+        border-left: 3px solid #1976d2;
+        border-radius: 4px;
+        padding: 8px 12px;
+        margin-bottom: 4px;
+        font-size: 13px;
+        color: #555;
+      }
+
+      .help-footer {
+        display: flex;
+        justify-content: flex-end;
+        padding: 16px 20px;
+        border-top: 1px solid #e0e0e0;
+        background: #f8f9fa;
+        border-radius: 0 0 8px 8px;
+      }
+
+      .close-btn {
+        padding: 8px 16px;
+        border: 1px solid #1976d2;
+        border-radius: 4px;
+        background-color: #1976d2;
+        color: white;
+        cursor: pointer;
+        font-size: 14px;
+        font-weight: 500;
+        transition: all 0.2s ease;
+      }
+
+      .close-btn:hover {
+        background-color: #1565c0;
+        border-color: #1565c0;
+      }
+    `
+    ]; }
+    render() {
+        if (!this.content) {
+            return html ``;
+        }
+        return html `
+      <div class="help-popup">
+        <div class="help-title">${this.content.title}</div>
+
+        <div class="help-content">
+          ${this.content.sections.map(section => html `
+              <div class="help-section">
+                <div class="help-section-title">${section.title}</div>
+                ${this._renderSectionContent(section)}
+              </div>
+            `)}
+        </div>
+
+        <div class="help-footer">
+          <button class="close-btn" @click=${this._onClose}>닫기</button>
+        </div>
+      </div>
+    `;
+    }
+    _renderSectionContent(section) {
+        switch (section.type) {
+            case 'code':
+                return html `<div class="help-code">${section.content}</div>`;
+            case 'parameter':
+                return html `<div class="help-parameter">${section.content}</div>`;
+            case 'example':
+                return html `<div class="help-example">${section.content}</div>`;
+            default:
+                return html `<div class="help-section-content">${section.content}</div>`;
+        }
+    }
+    _onClose() {
+        this.onClose?.();
+    }
+};
+__decorate([
+    property({ type: Object })
+], OxInputFormulaHelpPopup.prototype, "content", void 0);
+__decorate([
+    property({ type: Object })
+], OxInputFormulaHelpPopup.prototype, "onClose", void 0);
+OxInputFormulaHelpPopup = __decorate([
+    customElement('ox-input-formula-help-popup')
+], OxInputFormulaHelpPopup);
+export { OxInputFormulaHelpPopup };
+//# sourceMappingURL=ox-input-formula-help-popup.js.map

package/dist/src/ox-input-formula-help-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-formula-help-popup.js","sourceRoot":"","sources":["../../src/ox-input-formula-help-popup.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAY1C,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;aAC9C,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0GF;KACF,AA7GY,CA6GZ;IAKD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO,IAAI,CAAA,EAAE,CAAA;QACf,CAAC;QAED,OAAO,IAAI,CAAA;;kCAEmB,IAAI,CAAC,OAAO,CAAC,KAAK;;;YAGxC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CACzB,OAAO,CAAC,EAAE,CAAC,IAAI,CAAA;;kDAEuB,OAAO,CAAC,KAAK;kBAC7C,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC;;aAExC,CACF;;;;6CAIkC,IAAI,CAAC,QAAQ;;;KAGrD,CAAA;IACH,CAAC;IAEO,qBAAqB,CAAC,OAAY;QACxC,QAAQ,OAAO,CAAC,IAAI,EAAE,CAAC;YACrB,KAAK,MAAM;gBACT,OAAO,IAAI,CAAA,0BAA0B,OAAO,CAAC,OAAO,QAAQ,CAAA;YAC9D,KAAK,WAAW;gBACd,OAAO,IAAI,CAAA,+BAA+B,OAAO,CAAC,OAAO,QAAQ,CAAA;YACnE,KAAK,SAAS;gBACZ,OAAO,IAAI,CAAA,6BAA6B,OAAO,CAAC,OAAO,QAAQ,CAAA;YACjE;gBACE,OAAO,IAAI,CAAA,qCAAqC,OAAO,CAAC,OAAO,QAAQ,CAAA;QAC3E,CAAC;IACH,CAAC;IAEO,QAAQ;QACd,IAAI,CAAC,OAAO,EAAE,EAAE,CAAA;IAClB,CAAC;;AA7C2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAqB;AAjHrC,uBAAuB;IADnC,aAAa,CAAC,6BAA6B,CAAC;GAChC,uBAAuB,CA8JnC","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nexport type HelpContent = {\n  title: string\n  sections: Array<{\n    title: string\n    content: string\n    type?: 'text' | 'code' | 'parameter' | 'example'\n  }>\n}\n\n@customElement('ox-input-formula-help-popup')\nexport class OxInputFormulaHelpPopup extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .help-popup {\n        max-width: 500px;\n        max-height: 400px;\n        overflow-y: auto;\n        background: white;\n        border-radius: 8px;\n        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\n      }\n\n      .help-title {\n        font-size: 20px;\n        font-weight: 600;\n        margin-bottom: 16px;\n        color: #1976d2;\n        padding: 20px 20px 16px 20px;\n        background: #f8f9fa;\n        border-bottom: 1px solid #e0e0e0;\n        border-radius: 8px 8px 0 0;\n      }\n\n      .help-content {\n        padding: 0 20px;\n      }\n\n      .help-section {\n        margin-bottom: 16px;\n      }\n\n      .help-section-title {\n        font-weight: 600;\n        margin-bottom: 8px;\n        color: #333;\n        font-size: 14px;\n        border-bottom: 1px solid #e0e0e0;\n        padding-bottom: 4px;\n      }\n\n      .help-section-content {\n        font-size: 14px;\n        line-height: 1.6;\n        color: #555;\n        padding: 4px 0;\n      }\n\n      .help-code {\n        background: #f5f5f5;\n        border: 1px solid #e0e0e0;\n        border-radius: 4px;\n        padding: 12px;\n        font-family: 'Courier New', monospace;\n        font-size: 13px;\n        color: #333;\n        margin: 8px 0;\n      }\n\n      .help-example {\n        background: #f0f8ff;\n        border: 1px solid #c8e6c9;\n        border-radius: 4px;\n        padding: 12px;\n        font-family: 'Courier New', monospace;\n        font-size: 13px;\n        color: #2e7d32;\n        margin: 8px 0;\n      }\n\n      .help-parameter {\n        background: #f8f9fa;\n        border-left: 3px solid #1976d2;\n        border-radius: 4px;\n        padding: 8px 12px;\n        margin-bottom: 4px;\n        font-size: 13px;\n        color: #555;\n      }\n\n      .help-footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: 16px 20px;\n        border-top: 1px solid #e0e0e0;\n        background: #f8f9fa;\n        border-radius: 0 0 8px 8px;\n      }\n\n      .close-btn {\n        padding: 8px 16px;\n        border: 1px solid #1976d2;\n        border-radius: 4px;\n        background-color: #1976d2;\n        color: white;\n        cursor: pointer;\n        font-size: 14px;\n        font-weight: 500;\n        transition: all 0.2s ease;\n      }\n\n      .close-btn:hover {\n        background-color: #1565c0;\n        border-color: #1565c0;\n      }\n    `\n  ]\n\n  @property({ type: Object }) content?: HelpContent\n  @property({ type: Object }) onClose?: () => void\n\n  render() {\n    if (!this.content) {\n      return html``\n    }\n\n    return html`\n      <div class=\"help-popup\">\n        <div class=\"help-title\">${this.content.title}</div>\n\n        <div class=\"help-content\">\n          ${this.content.sections.map(\n            section => html`\n              <div class=\"help-section\">\n                <div class=\"help-section-title\">${section.title}</div>\n                ${this._renderSectionContent(section)}\n              </div>\n            `\n          )}\n        </div>\n\n        <div class=\"help-footer\">\n          <button class=\"close-btn\" @click=${this._onClose}>닫기</button>\n        </div>\n      </div>\n    `\n  }\n\n  private _renderSectionContent(section: any) {\n    switch (section.type) {\n      case 'code':\n        return html`<div class=\"help-code\">${section.content}</div>`\n      case 'parameter':\n        return html`<div class=\"help-parameter\">${section.content}</div>`\n      case 'example':\n        return html`<div class=\"help-example\">${section.content}</div>`\n      default:\n        return html`<div class=\"help-section-content\">${section.content}</div>`\n    }\n  }\n\n  private _onClose() {\n    this.onClose?.()\n  }\n}\n"]}

package/dist/src/ox-input-formula.d.ts

@@ -3,6 +3,7 @@
  */
 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 { OxFormField } from '@operato/input';
 type FormulaVariable = {
@@ -65,6 +66,7 @@ export declare class KpiFormulaEditor extends OxFormField {
     _insertFunction(template: string): void;
     _showVariableHelp(e: Event, variable: FormulaVariable): void;
     _showFunctionHelp(e: Event, func: FormulaFunction): void;
+    private _showHelpPopup;
     _validateFormula(): void;
     _updateValue(): void;
 }