@operato/input 9.0.14 → 9.0.17

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 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)
 
 

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-secret.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@material/web/icon/icon.js';
+import { OxFormField } from './ox-form-field.js';
+export declare class OxInputSecret extends OxFormField<string | undefined> {
+    static styles: import("lit").CSSResult[];
+    placeholder?: string;
+    selectAfterChange?: boolean;
+    value?: string | undefined;
+    input: HTMLInputElement;
+    private togglePasswordVisibility;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    dispatchChangeEvent(value: string): void;
+}

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

@@ -0,0 +1,173 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { OxFormField } from './ox-form-field.js';
+let OxInputSecret = class OxInputSecret extends OxFormField {
+    static { this.styles = [
+        css `
+      :host {
+        display: flex;
+        position: relative;
+        align-items: center;
+
+        color: var(--ox-input-secret-color, var(--md-sys-color-on-surface-variant));
+        background-color: var(--ox-input-secret-background-color, var(--md-sys-color-surface-variant));
+
+        --md-icon-size: 20px;
+      }
+
+      .secret-container {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        position: relative;
+        width: 100%;
+      }
+
+      input {
+        flex: 1;
+        color: inherit;
+        background-color: transparent;
+        border: 0;
+        padding: var(--input-secret-padding, var(--spacing-tiny));
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-family: inherit;
+        font-size: inherit;
+        letter-spacing: 0.5px;
+      }
+
+      input:focus {
+        outline: none;
+      }
+
+      input:focus {
+        outline: none;
+        border: none;
+        box-shadow: none;
+      }
+
+      .secret-toggle {
+        position: absolute;
+        right: 0px;
+        cursor: pointer;
+        font-size: 16px;
+        color: var(--md-sys-color-on-surface-variant);
+        user-select: none;
+        opacity: 0.7;
+        transition: opacity 0.2s;
+      }
+
+      .secret-toggle:hover {
+        opacity: 1;
+        color: var(--md-sys-color-primary);
+      }
+
+      .secret-container:hover .secret-toggle {
+        opacity: 1;
+      }
+    `
+    ]; }
+    togglePasswordVisibility() {
+        if (!this.input)
+            return;
+        if (this.input.type === 'password') {
+            this.input.type = 'text';
+            const icon = this.renderRoot.querySelector('.secret-toggle');
+            if (icon) {
+                icon.textContent = 'visibility';
+                icon.title = i18next.t('text.input-secret-hide');
+            }
+        }
+        else {
+            this.input.type = 'password';
+            const icon = this.renderRoot.querySelector('.secret-toggle');
+            if (icon) {
+                icon.textContent = 'visibility_off';
+                icon.title = i18next.t('text.input-secret-show');
+            }
+        }
+    }
+    render() {
+        return html `
+      <div class="secret-container">
+        <input
+          type="password"
+          .value=${this.value || ''}
+          .placeholder=${this.placeholder || i18next.t('text.input-secret-placeholder')}
+          @change=${(e) => {
+            e.stopPropagation();
+            this.dispatchChangeEvent(e.target.value);
+        }}
+          @keydown=${(e) => {
+            if (e.key === 'Enter') {
+                if (e.target.value == this.value) {
+                    /* Even if the value has not changed, the enter key triggers a change event. */
+                    e.preventDefault(); /* Prevent change event from occurring twice. */
+                    this.input.dispatchEvent(new CustomEvent('change', {
+                        detail: e.target.value
+                    }));
+                }
+            }
+        }}
+          ?disabled=${this.disabled}
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
+          data-form-type="other"
+        />
+        <md-icon
+          class="secret-toggle"
+          @click=${(e) => {
+            e.stopPropagation();
+            this.togglePasswordVisibility();
+        }}
+          title=${i18next.t('text.input-secret-toggle')}
+        >
+          visibility_off
+        </md-icon>
+      </div>
+    `;
+    }
+    firstUpdated() {
+        if (this.autofocus) {
+            this.input.focus();
+        }
+    }
+    dispatchChangeEvent(value) {
+        this.value = value;
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: value
+        }));
+        if (this.selectAfterChange) {
+            requestAnimationFrame(() => {
+                this.input.select();
+            });
+        }
+    }
+};
+__decorate([
+    property({ type: String })
+], OxInputSecret.prototype, "placeholder", void 0);
+__decorate([
+    property({ attribute: 'select-after-change', type: Boolean })
+], OxInputSecret.prototype, "selectAfterChange", void 0);
+__decorate([
+    property({ type: String })
+], OxInputSecret.prototype, "value", void 0);
+__decorate([
+    query('input')
+], OxInputSecret.prototype, "input", void 0);
+OxInputSecret = __decorate([
+    customElement('ox-input-secret')
+], OxInputSecret);
+export { OxInputSecret };
+//# sourceMappingURL=ox-input-secret.js.map

package/dist/src/ox-input-secret.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-secret.js","sourceRoot":"","sources":["../../src/ox-input-secret.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGzC,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAA+B;aACzD,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8DF;KACF,AAhEY,CAgEZ;IAQO,wBAAwB;QAC9B,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAM;QAEvB,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YACnC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,MAAM,CAAA;YACxB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAgB,CAAA;YAC3E,IAAI,IAAI,EAAE,CAAC;gBACT,IAAI,CAAC,WAAW,GAAG,YAAY,CAAA;gBAC/B,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAA;YAClD,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,UAAU,CAAA;YAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAgB,CAAA;YAC3E,IAAI,IAAI,EAAE,CAAC;gBACT,IAAI,CAAC,WAAW,GAAG,gBAAgB,CAAA;gBACnC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAA;YAClD,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;mBAII,IAAI,CAAC,KAAK,IAAI,EAAE;yBACV,IAAI,CAAC,WAAW,IAAI,OAAO,CAAC,CAAC,CAAC,+BAA+B,CAAC;oBACnE,CAAC,CAAQ,EAAE,EAAE;YACrB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,mBAAmB,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;QAChE,CAAC;qBACU,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBACtB,IAAK,CAAC,CAAC,MAA2B,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;oBACvD,+EAA+E;oBAC/E,CAAC,CAAC,cAAc,EAAE,CAAA,CAAC,gDAAgD;oBAEnE,IAAI,CAAC,KAAK,CAAC,aAAa,CACtB,IAAI,WAAW,CAAC,QAAQ,EAAE;wBACxB,MAAM,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK;qBAC7C,CAAC,CACH,CAAA;gBACH,CAAC;YACH,CAAC;QACH,CAAC;sBACW,IAAI,CAAC,QAAQ;;;;;;;;;mBAShB,CAAC,CAAQ,EAAE,EAAE;YACpB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,wBAAwB,EAAE,CAAA;QACjC,CAAC;kBACO,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC;;;;;KAKlD,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QACpB,CAAC;IACH,CAAC;IAED,mBAAmB,CAAC,KAAa;QAC/B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAElB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,KAAK;SACd,CAAC,CACH,CAAA;QAED,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAA;YACrB,CAAC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;;AA9F2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAqB;AACe;IAA9D,QAAQ,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDAA4B;AAC9D;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAA2B;AAEtC;IAAf,KAAK,CAAC,OAAO,CAAC;4CAAyB;AAvE7B,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAkKzB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-secret')\nexport class OxInputSecret extends OxFormField<string | undefined> {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        position: relative;\n        align-items: center;\n\n        color: var(--ox-input-secret-color, var(--md-sys-color-on-surface-variant));\n        background-color: var(--ox-input-secret-background-color, var(--md-sys-color-surface-variant));\n\n        --md-icon-size: 20px;\n      }\n\n      .secret-container {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        position: relative;\n        width: 100%;\n      }\n\n      input {\n        flex: 1;\n        color: inherit;\n        background-color: transparent;\n        border: 0;\n        padding: var(--input-secret-padding, var(--spacing-tiny));\n        overflow: hidden;\n        text-overflow: ellipsis;\n        font-family: inherit;\n        font-size: inherit;\n        letter-spacing: 0.5px;\n      }\n\n      input:focus {\n        outline: none;\n      }\n\n      input:focus {\n        outline: none;\n        border: none;\n        box-shadow: none;\n      }\n\n      .secret-toggle {\n        position: absolute;\n        right: 0px;\n        cursor: pointer;\n        font-size: 16px;\n        color: var(--md-sys-color-on-surface-variant);\n        user-select: none;\n        opacity: 0.7;\n        transition: opacity 0.2s;\n      }\n\n      .secret-toggle:hover {\n        opacity: 1;\n        color: var(--md-sys-color-primary);\n      }\n\n      .secret-container:hover .secret-toggle {\n        opacity: 1;\n      }\n    `\n  ]\n\n  @property({ type: String }) placeholder?: string\n  @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean\n  @property({ type: String }) value?: string | undefined\n\n  @query('input') input!: HTMLInputElement\n\n  private togglePasswordVisibility() {\n    if (!this.input) return\n\n    if (this.input.type === 'password') {\n      this.input.type = 'text'\n      const icon = this.renderRoot.querySelector('.secret-toggle') as HTMLElement\n      if (icon) {\n        icon.textContent = 'visibility'\n        icon.title = i18next.t('text.input-secret-hide')\n      }\n    } else {\n      this.input.type = 'password'\n      const icon = this.renderRoot.querySelector('.secret-toggle') as HTMLElement\n      if (icon) {\n        icon.textContent = 'visibility_off'\n        icon.title = i18next.t('text.input-secret-show')\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"secret-container\">\n        <input\n          type=\"password\"\n          .value=${this.value || ''}\n          .placeholder=${this.placeholder || i18next.t('text.input-secret-placeholder')}\n          @change=${(e: Event) => {\n            e.stopPropagation()\n            this.dispatchChangeEvent((e.target as HTMLInputElement).value)\n          }}\n          @keydown=${(e: KeyboardEvent) => {\n            if (e.key === 'Enter') {\n              if ((e.target as HTMLInputElement).value == this.value) {\n                /* Even if the value has not changed, the enter key triggers a change event. */\n                e.preventDefault() /* Prevent change event from occurring twice. */\n\n                this.input.dispatchEvent(\n                  new CustomEvent('change', {\n                    detail: (e.target as HTMLInputElement).value\n                  })\n                )\n              }\n            }\n          }}\n          ?disabled=${this.disabled}\n          autocomplete=\"off\"\n          autocorrect=\"off\"\n          autocapitalize=\"off\"\n          spellcheck=\"false\"\n          data-form-type=\"other\"\n        />\n        <md-icon\n          class=\"secret-toggle\"\n          @click=${(e: Event) => {\n            e.stopPropagation()\n            this.togglePasswordVisibility()\n          }}\n          title=${i18next.t('text.input-secret-toggle')}\n        >\n          visibility_off\n        </md-icon>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    if (this.autofocus) {\n      this.input.focus()\n    }\n  }\n\n  dispatchChangeEvent(value: string) {\n    this.value = value\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: value\n      })\n    )\n\n    if (this.selectAfterChange) {\n      requestAnimationFrame(() => {\n        this.input.select()\n      })\n    }\n  }\n}\n"]}