@operato/data-grist 8.2.19 → 8.2.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "8.2.19",
+  "version": "8.2.22",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -108,5 +108,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "3fece375d09fadfd6293cabc3f0d326585293f17"
+  "gitHead": "20482100c0d80ab15d0b19dafe9c07ae3dedffec"
 }

package/dist/src/editors/ox-grist-editor-json5.d.ts

@@ -1,8 +0,0 @@
-import './ox-popup-code-input.js';
-import { OxGristEditor } from './ox-grist-editor.js';
-export declare class OxGristEditorJson5 extends OxGristEditor {
-    get editorTemplate(): import("lit-html").TemplateResult<1>;
-    _onclick(e: Event): void;
-    _onkeydown(e: KeyboardEvent): void;
-    showEditorPopup(): void;
-}

package/dist/src/editors/ox-grist-editor-json5.js

@@ -1,66 +0,0 @@
-import { __decorate } from "tslib";
-import './ox-popup-code-input.js';
-import { html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import JSON5 from 'json5';
-import { OxGristEditor } from './ox-grist-editor.js';
-import { i18next } from '@operato/i18n';
-import { openPopup } from '@operato/layout';
-let OxGristEditorJson5 = class OxGristEditorJson5 extends OxGristEditor {
-    get editorTemplate() {
-        var parsed = this.value;
-        if (typeof this.value === 'string') {
-            try {
-                parsed = JSON5.parse(this.value);
-            }
-            catch (_a) { }
-        }
-        const text = parsed == null ? '' : JSON5.stringify(parsed);
-        return html ` <div tabindex="0">${text}</div> `;
-    }
-    _onclick(e) {
-        e.stopPropagation();
-        this.showEditorPopup();
-    }
-    _onkeydown(e) {
-        const key = e.key;
-        if (key == 'Enter') {
-            e.stopPropagation();
-            this.showEditorPopup();
-        }
-    }
-    showEditorPopup() {
-        var _a;
-        var { mode, language = 'javascript' } = ((_a = this.column.record) === null || _a === void 0 ? void 0 : _a.options) || {};
-        var change = (value) => {
-            this.dispatchEvent(new CustomEvent('field-change', {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    before: this.value,
-                    after: value,
-                    column: this.column,
-                    record: this.record,
-                    row: this.row
-                }
-            }));
-        };
-        var popup = openPopup(html `
-        <ox-popup-code-input
-          .value=${this.value}
-          mode=${mode}
-          .confirmCallback=${change.bind(this)}
-          language=${language}
-        ></ox-popup-code-input>
-      `, {
-            backdrop: true,
-            title: i18next.t('title.edit code'),
-            help: 'data-grist/grist-editor/code'
-        });
-    }
-};
-OxGristEditorJson5 = __decorate([
-    customElement('ox-grist-editor-json5')
-], OxGristEditorJson5);
-export { OxGristEditorJson5 };
-//# sourceMappingURL=ox-grist-editor-json5.js.map

package/dist/src/editors/ox-grist-editor-json5.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-grist-editor-json5.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor-json5.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAGpC,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,aAAa;IACnD,IAAI,cAAc;QAChB,IAAI,MAAM,GAAQ,IAAI,CAAC,KAAK,CAAA;QAE5B,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC;YACnC,IAAI,CAAC;gBACH,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YAClC,CAAC;YAAC,WAAM,CAAC,CAAA,CAAC;QACZ,CAAC;QAED,MAAM,IAAI,GAAG,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;QAE1D,OAAO,IAAI,CAAA,sBAAsB,IAAI,SAAS,CAAA;IAChD,CAAC;IAED,QAAQ,CAAC,CAAQ;QACf,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,eAAe,EAAE,CAAA;IACxB,CAAC;IAED,UAAU,CAAC,CAAgB;QACzB,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,CAAA;QACjB,IAAI,GAAG,IAAI,OAAO,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,eAAe,EAAE,CAAA;QACxB,CAAC;IACH,CAAC;IAED,eAAe;;QACb,IAAI,EAAE,IAAI,EAAE,QAAQ,GAAG,YAAY,EAAE,GAAG,CAAA,MAAA,IAAI,CAAC,MAAM,CAAC,MAAM,0CAAE,OAAO,KAAI,EAAE,CAAA;QAEzE,IAAI,MAAM,GAAG,CAAC,KAAa,EAAE,EAAE;YAC7B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;gBAC9B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,MAAM,EAAE,IAAI,CAAC,KAAK;oBAClB,KAAK,EAAE,KAAK;oBACZ,MAAM,EAAE,IAAI,CAAC,MAAM;oBACnB,MAAM,EAAE,IAAI,CAAC,MAAM;oBACnB,GAAG,EAAE,IAAI,CAAC,GAAG;iBACd;aACF,CAAC,CACH,CAAA;QACH,CAAC,CAAA;QAED,IAAI,KAAK,GAAG,SAAS,CACnB,IAAI,CAAA;;mBAES,IAAI,CAAC,KAAK;iBACZ,IAAI;6BACQ,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;qBACzB,QAAQ;;OAEtB,EACD;YACE,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC;YACnC,IAAI,EAAE,8BAA8B;SACrC,CACF,CAAA;IACH,CAAC;CACF,CAAA;AA/DY,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CA+D9B","sourcesContent":["import './ox-popup-code-input.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport JSON5 from 'json5'\n\nimport { OxGristEditor } from './ox-grist-editor.js'\nimport { i18next } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\n@customElement('ox-grist-editor-json5')\nexport class OxGristEditorJson5 extends OxGristEditor {\n  get editorTemplate() {\n    var parsed: any = this.value\n\n    if (typeof this.value === 'string') {\n      try {\n        parsed = JSON5.parse(this.value)\n      } catch {}\n    }\n\n    const text = parsed == null ? '' : JSON5.stringify(parsed)\n\n    return html` <div tabindex=\"0\">${text}</div> `\n  }\n\n  _onclick(e: Event): void {\n    e.stopPropagation()\n    this.showEditorPopup()\n  }\n\n  _onkeydown(e: KeyboardEvent): void {\n    const key = e.key\n    if (key == 'Enter') {\n      e.stopPropagation()\n      this.showEditorPopup()\n    }\n  }\n\n  showEditorPopup() {\n    var { mode, language = 'javascript' } = this.column.record?.options || {}\n\n    var change = (value: string) => {\n      this.dispatchEvent(\n        new CustomEvent('field-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            before: this.value,\n            after: value,\n            column: this.column,\n            record: this.record,\n            row: this.row\n          }\n        })\n      )\n    }\n\n    var popup = openPopup(\n      html`\n        <ox-popup-code-input\n          .value=${this.value}\n          mode=${mode}\n          .confirmCallback=${change.bind(this)}\n          language=${language}\n        ></ox-popup-code-input>\n      `,\n      {\n        backdrop: true,\n        title: i18next.t('title.edit code'),\n        help: 'data-grist/grist-editor/code'\n      }\n    )\n  }\n}\n"]}

package/dist/src/editors/ox-grist-editor-secret.d.ts

@@ -1,5 +0,0 @@
-import '@operato/input/ox-input-secret.js';
-import { OxGristEditor } from './ox-grist-editor.js';
-export declare class OxGristEditorSecret extends OxGristEditor {
-    get editorTemplate(): import("lit-html").TemplateResult<1>;
-}

package/dist/src/editors/ox-grist-editor-secret.js

@@ -1,23 +0,0 @@
-import { __decorate } from "tslib";
-import '@operato/input/ox-input-secret.js';
-import { OxGristEditor } from './ox-grist-editor.js';
-import { customElement } from 'lit/decorators.js';
-import { html } from 'lit';
-let OxGristEditorSecret = class OxGristEditorSecret extends OxGristEditor {
-    get editorTemplate() {
-        return html `
-      <ox-input-secret
-        .value=${this.value}
-        @change=${this._onchange}
-        @keydown=${this._onkeydown}
-        @focusout=${this._onfocusout}
-      >
-      </ox-input-secret>
-    `;
-    }
-};
-OxGristEditorSecret = __decorate([
-    customElement('ox-grist-editor-secret')
-], OxGristEditorSecret);
-export { OxGristEditorSecret };
-//# sourceMappingURL=ox-grist-editor-secret.js.map

package/dist/src/editors/ox-grist-editor-secret.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-grist-editor-secret.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor-secret.ts"],"names":[],"mappings":";AAAA,OAAO,mCAAmC,CAAA;AAE1C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAGnB,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,aAAa;IACpD,IAAI,cAAc;QAChB,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;kBACT,IAAI,CAAC,SAAS;mBACb,IAAI,CAAC,UAAU;oBACd,IAAI,CAAC,WAAW;;;KAG/B,CAAA;IACH,CAAC;CACF,CAAA;AAZY,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAY/B","sourcesContent":["import '@operato/input/ox-input-secret.js'\n\nimport { OxGristEditor } from './ox-grist-editor.js'\nimport { customElement } from 'lit/decorators.js'\nimport { html } from 'lit'\n\n@customElement('ox-grist-editor-secret')\nexport class OxGristEditorSecret extends OxGristEditor {\n  get editorTemplate() {\n    return html`\n      <ox-input-secret\n        .value=${this.value}\n        @change=${this._onchange}\n        @keydown=${this._onkeydown}\n        @focusout=${this._onfocusout}\n      >\n      </ox-input-secret>\n    `\n  }\n}\n"]}

package/dist/src/editors/ox-grist-editor-timezone.d.ts

@@ -1,6 +0,0 @@
-import { OxGristEditor } from './ox-grist-editor.js';
-export declare class OxGristEditorTimezone extends OxGristEditor {
-    private static _timezoneOptions;
-    private static get TIMEZONE_OPTIONS();
-    get editorTemplate(): import("lit-html").TemplateResult<1>;
-}

package/dist/src/editors/ox-grist-editor-timezone.js

@@ -1,41 +0,0 @@
-var OxGristEditorTimezone_1;
-import { __decorate } from "tslib";
-import { OxGristEditor } from './ox-grist-editor.js';
-import { customElement } from 'lit/decorators.js';
-import { html } from 'lit';
-import moment from '@operato/moment-timezone-es';
-function getSystemTimeZone() {
-    try {
-        const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-        if (!timeZone) {
-            throw new Error('Unable to resolve timeZone');
-        }
-        return timeZone;
-    }
-    catch (e) {
-        console.warn('Failed to get system timeZone, falling back to UTC.', e);
-        return 'UTC';
-    }
-}
-let OxGristEditorTimezone = OxGristEditorTimezone_1 = class OxGristEditorTimezone extends OxGristEditor {
-    static get TIMEZONE_OPTIONS() {
-        if (!this._timezoneOptions) {
-            const DEFAULT_TZ = getSystemTimeZone();
-            this._timezoneOptions = ['', DEFAULT_TZ, ...moment.tz.names().filter((tz) => tz !== DEFAULT_TZ)];
-        }
-        return this._timezoneOptions;
-    }
-    get editorTemplate() {
-        return html `
-      <select>
-        ${OxGristEditorTimezone_1.TIMEZONE_OPTIONS.map((tz) => html ` <option ?selected=${tz == this.value} value=${tz}>${tz}</option> `)}
-      </select>
-    `;
-    }
-};
-OxGristEditorTimezone._timezoneOptions = null;
-OxGristEditorTimezone = OxGristEditorTimezone_1 = __decorate([
-    customElement('ox-grist-editor-timezone')
-], OxGristEditorTimezone);
-export { OxGristEditorTimezone };
-//# sourceMappingURL=ox-grist-editor-timezone.js.map

package/dist/src/editors/ox-grist-editor-timezone.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-grist-editor-timezone.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor-timezone.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAEhD,SAAS,iBAAiB;IACxB,IAAI,CAAC;QACH,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,eAAe,EAAE,CAAC,QAAQ,CAAA;QACjE,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,MAAM,IAAI,KAAK,CAAC,4BAA4B,CAAC,CAAA;QAC/C,CAAC;QACD,OAAO,QAAQ,CAAA;IACjB,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACX,OAAO,CAAC,IAAI,CAAC,qDAAqD,EAAE,CAAC,CAAC,CAAA;QACtE,OAAO,KAAK,CAAA;IACd,CAAC;AACH,CAAC;AAGM,IAAM,qBAAqB,6BAA3B,MAAM,qBAAsB,SAAQ,aAAa;IAG9C,MAAM,KAAK,gBAAgB;QACjC,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC3B,MAAM,UAAU,GAAG,iBAAiB,EAAE,CAAA;YACtC,IAAI,CAAC,gBAAgB,GAAG,CAAC,EAAE,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC,EAAU,EAAE,EAAE,CAAC,EAAE,KAAK,UAAU,CAAC,CAAC,CAAA;QAC1G,CAAC;QACD,OAAO,IAAI,CAAC,gBAAgB,CAAA;IAC9B,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,CAAA;;UAEL,uBAAqB,CAAC,gBAAgB,CAAC,GAAG,CAC1C,CAAC,EAAO,EAAE,EAAE,CAAC,IAAI,CAAA,sBAAsB,EAAE,IAAI,IAAI,CAAC,KAAK,UAAU,EAAE,IAAI,EAAE,YAAY,CACtF;;KAEJ,CAAA;IACH,CAAC;;AAlBc,sCAAgB,GAAoB,IAAI,AAAxB,CAAwB;AAD5C,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAoBjC","sourcesContent":["import { OxGristEditor } from './ox-grist-editor.js'\nimport { customElement } from 'lit/decorators.js'\nimport { html } from 'lit'\nimport moment from '@operato/moment-timezone-es'\n\nfunction getSystemTimeZone(): string {\n  try {\n    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone\n    if (!timeZone) {\n      throw new Error('Unable to resolve timeZone')\n    }\n    return timeZone\n  } catch (e) {\n    console.warn('Failed to get system timeZone, falling back to UTC.', e)\n    return 'UTC'\n  }\n}\n\n@customElement('ox-grist-editor-timezone')\nexport class OxGristEditorTimezone extends OxGristEditor {\n  private static _timezoneOptions: string[] | null = null\n\n  private static get TIMEZONE_OPTIONS() {\n    if (!this._timezoneOptions) {\n      const DEFAULT_TZ = getSystemTimeZone()\n      this._timezoneOptions = ['', DEFAULT_TZ, ...moment.tz.names().filter((tz: string) => tz !== DEFAULT_TZ)]\n    }\n    return this._timezoneOptions\n  }\n\n  get editorTemplate() {\n    return html`\n      <select>\n        ${OxGristEditorTimezone.TIMEZONE_OPTIONS.map(\n          (tz: any) => html` <option ?selected=${tz == this.value} value=${tz}>${tz}</option> `\n        )}\n      </select>\n    `\n  }\n}\n"]}

package/dist/src/editors/ox-popup-code-input.d.ts

@@ -1,14 +0,0 @@
-import '@material/web/icon/icon.js';
-import '@operato/input/ox-input-code.js';
-import { LitElement } from 'lit';
-export declare class OxPopupCodeInput extends LitElement {
-    static styles: import("lit").CSSResult[];
-    value: any;
-    mode: string;
-    confirmCallback: (newval: any) => void;
-    language?: string;
-    render(): import("lit-html").TemplateResult<1>;
-    private onChange;
-    private onCancel;
-    private onConfirm;
-}

package/dist/src/editors/ox-popup-code-input.js

@@ -1,78 +0,0 @@
-import { __decorate } from "tslib";
-import '@material/web/icon/icon.js';
-import '@operato/input/ox-input-code.js';
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { i18next } from '@operato/i18n';
-import { closePopup } from '@operato/popup';
-import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
-let OxPopupCodeInput = class OxPopupCodeInput extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.mode = 'javascript';
-        this.language = 'javascript';
-    }
-    render() {
-        return html `
-      <ox-input-code .value=${this.value} @change=${this.onChange.bind(this)} .language=${this.language}>
-      </ox-input-code>
-
-      <div class="footer">
-        <div filler></div>
-        <button @click=${this.onCancel.bind(this)} danger>
-          <md-icon>cancel</md-icon>${i18next.t('button.cancel')}
-        </button>
-        <button @click=${this.onConfirm.bind(this)} done><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
-      </div>
-    `;
-    }
-    onChange(e) {
-        e.stopPropagation();
-        this.value = e.detail;
-    }
-    onCancel(e) {
-        closePopup(this);
-    }
-    onConfirm(e) {
-        this.confirmCallback && this.confirmCallback(this.value);
-        closePopup(this);
-    }
-};
-OxPopupCodeInput.styles = [
-    CommonHeaderStyles,
-    ScrollbarStyles,
-    css `
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        background-color: var(--md-sys-color-surface);
-
-        width: var(--overlay-center-normal-width, 50%);
-        height: var(--overlay-center-normal-height, 50%);
-      }
-
-      ox-input-code {
-        flex: 1;
-        overflow-y: auto;
-        margin: var(--spacing-small);
-      }
-    `
-];
-__decorate([
-    property({ type: Object })
-], OxPopupCodeInput.prototype, "value", void 0);
-__decorate([
-    property({ type: String })
-], OxPopupCodeInput.prototype, "mode", void 0);
-__decorate([
-    property({ type: Object })
-], OxPopupCodeInput.prototype, "confirmCallback", void 0);
-__decorate([
-    property({ type: String })
-], OxPopupCodeInput.prototype, "language", void 0);
-OxPopupCodeInput = __decorate([
-    customElement('ox-popup-code-input')
-], OxPopupCodeInput);
-export { OxPopupCodeInput };
-//# sourceMappingURL=ox-popup-code-input.js.map

package/dist/src/editors/ox-popup-code-input.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-popup-code-input.js","sourceRoot":"","sources":["../../../src/editors/ox-popup-code-input.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAG9D,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAwBuB,SAAI,GAAW,YAAY,CAAA;QAE3B,aAAQ,GAAY,YAAY,CAAA;IA+B9D,CAAC;IA7BC,MAAM;QACJ,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,KAAK,YAAY,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,QAAQ;;;;;yBAK9E,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;qCACZ,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;;yBAEtC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,gCAAgC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;KAExG,CAAA;IACH,CAAC;IAEO,QAAQ,CAAC,CAAc;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;IACvB,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IAEO,SAAS,CAAC,CAAQ;QACxB,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxD,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;;AAvDM,uBAAM,GAAG;IACd,kBAAkB;IAClB,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;KAgBF;CACF,AApBY,CAoBZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAwC;AACvC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAiC;AA1BjD,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CAyD5B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/input/ox-input-code.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { closePopup } from '@operato/popup'\nimport { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-popup-code-input')\nexport class OxPopupCodeInput extends LitElement {\n  static styles = [\n    CommonHeaderStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: var(--md-sys-color-surface);\n\n        width: var(--overlay-center-normal-width, 50%);\n        height: var(--overlay-center-normal-height, 50%);\n      }\n\n      ox-input-code {\n        flex: 1;\n        overflow-y: auto;\n        margin: var(--spacing-small);\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: any\n  @property({ type: String }) mode: string = 'javascript'\n  @property({ type: Object }) confirmCallback!: (newval: any) => void\n  @property({ type: String }) language?: string = 'javascript'\n\n  render() {\n    return html`\n      <ox-input-code .value=${this.value} @change=${this.onChange.bind(this)} .language=${this.language}>\n      </ox-input-code>\n\n      <div class=\"footer\">\n        <div filler></div>\n        <button @click=${this.onCancel.bind(this)} danger>\n          <md-icon>cancel</md-icon>${i18next.t('button.cancel')}\n        </button>\n        <button @click=${this.onConfirm.bind(this)} done><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>\n      </div>\n    `\n  }\n\n  private onChange(e: CustomEvent) {\n    e.stopPropagation()\n\n    this.value = e.detail\n  }\n\n  private onCancel(e: Event) {\n    closePopup(this)\n  }\n\n  private onConfirm(e: Event) {\n    this.confirmCallback && this.confirmCallback(this.value)\n    closePopup(this)\n  }\n}\n"]}

package/dist/src/renderers/ox-grist-renderer-secret.d.ts

@@ -1,2 +0,0 @@
-import { FieldRenderer } from '../types.js';
-export declare const OxGristRendererSecret: FieldRenderer;

package/dist/src/renderers/ox-grist-renderer-secret.js

@@ -1,77 +0,0 @@
-import { html, css } from 'lit';
-import { i18next } from '@operato/i18n';
-const STYLE = css `
-  .secret-container {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    position: relative;
-  }
-
-  .secret-value {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: var(--md-sys-color-on-background);
-    font-family: inherit;
-    font-size: inherit;
-    letter-spacing: 0.5px;
-  }
-
-  .secret-toggle {
-    position: absolute;
-    right: 4px;
-    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;
-  }
-`;
-export const OxGristRendererSecret = (value, column, record, rowIndex, field) => {
-    if (!value) {
-        return html `<span>-</span>`;
-    }
-    const toggleVisibility = (event) => {
-        event.stopPropagation();
-        const container = event.target.closest('.secret-container');
-        const valueSpan = container === null || container === void 0 ? void 0 : container.querySelector('.secret-value');
-        const icon = event.target;
-        if (!valueSpan || !icon)
-            return;
-        if (valueSpan.textContent === '••••••••••••••••') {
-            valueSpan.textContent = value;
-            icon.textContent = 'visibility';
-            icon.title = i18next.t('text.input-secret-hide');
-        }
-        else {
-            valueSpan.textContent = '••••••••••••••••';
-            icon.textContent = 'visibility_off';
-            icon.title = i18next.t('text.input-secret-show');
-        }
-    };
-    return html `
-    <style>
-      ${STYLE}
-    </style>
-    <div class="secret-container">
-      <span class="secret-value" title=${i18next.t('text.input-secret-placeholder')}>••••••••••••••••</span>
-      <md-icon class="secret-toggle" @click=${toggleVisibility} title=${i18next.t('text.input-secret-toggle')}>
-        visibility_off
-      </md-icon>
-    </div>
-  `;
-};
-//# sourceMappingURL=ox-grist-renderer-secret.js.map

package/dist/src/renderers/ox-grist-renderer-secret.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-grist-renderer-secret.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-secret.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAIvC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuChB,CAAA;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC7F,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,IAAI,CAAA,gBAAgB,CAAA;IAC7B,CAAC;IAED,MAAM,gBAAgB,GAAG,CAAC,KAAY,EAAE,EAAE;QACxC,KAAK,CAAC,eAAe,EAAE,CAAA;QAEvB,MAAM,SAAS,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAA;QAC5E,MAAM,SAAS,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,aAAa,CAAC,eAAe,CAAgB,CAAA;QAC1E,MAAM,IAAI,GAAG,KAAK,CAAC,MAAqB,CAAA;QAExC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI;YAAE,OAAM;QAE/B,IAAI,SAAS,CAAC,WAAW,KAAK,kBAAkB,EAAE,CAAC;YACjD,SAAS,CAAC,WAAW,GAAG,KAAK,CAAA;YAC7B,IAAI,CAAC,WAAW,GAAG,YAAY,CAAA;YAC/B,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAA;QAClD,CAAC;aAAM,CAAC;YACN,SAAS,CAAC,WAAW,GAAG,kBAAkB,CAAA;YAC1C,IAAI,CAAC,WAAW,GAAG,gBAAgB,CAAA;YACnC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAA;QAClD,CAAC;IACH,CAAC,CAAA;IAED,OAAO,IAAI,CAAA;;QAEL,KAAK;;;yCAG4B,OAAO,CAAC,CAAC,CAAC,+BAA+B,CAAC;8CACrC,gBAAgB,UAAU,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC;;;;GAI1G,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { html, css } from 'lit'\nimport { i18next } from '@operato/i18n'\n\nimport { FieldRenderer } from '../types.js'\n\nconst STYLE = css`\n  .secret-container {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    position: relative;\n  }\n\n  .secret-value {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: var(--md-sys-color-on-background);\n    font-family: inherit;\n    font-size: inherit;\n    letter-spacing: 0.5px;\n  }\n\n  .secret-toggle {\n    position: absolute;\n    right: 4px;\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\nexport const OxGristRendererSecret: FieldRenderer = (value, column, record, rowIndex, field) => {\n  if (!value) {\n    return html`<span>-</span>`\n  }\n\n  const toggleVisibility = (event: Event) => {\n    event.stopPropagation()\n\n    const container = (event.target as HTMLElement).closest('.secret-container')\n    const valueSpan = container?.querySelector('.secret-value') as HTMLElement\n    const icon = event.target as HTMLElement\n\n    if (!valueSpan || !icon) return\n\n    if (valueSpan.textContent === '••••••••••••••••') {\n      valueSpan.textContent = value\n      icon.textContent = 'visibility'\n      icon.title = i18next.t('text.input-secret-hide')\n    } else {\n      valueSpan.textContent = '••••••••••••••••'\n      icon.textContent = 'visibility_off'\n      icon.title = i18next.t('text.input-secret-show')\n    }\n  }\n\n  return html`\n    <style>\n      ${STYLE}\n    </style>\n    <div class=\"secret-container\">\n      <span class=\"secret-value\" title=${i18next.t('text.input-secret-placeholder')}>••••••••••••••••</span>\n      <md-icon class=\"secret-toggle\" @click=${toggleVisibility} title=${i18next.t('text.input-secret-toggle')}>\n        visibility_off\n      </md-icon>\n    </div>\n  `\n}\n"]}

package/dist/stories/append-position.stories.d.ts

@@ -1,8 +0,0 @@
-import '../src/data-grist.js';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {};
-};
-export default _default;
-export declare const AddRecordToTop: () => import("lit-html").TemplateResult<1>;

package/dist/stories/append-position.stories.js

@@ -1,183 +0,0 @@
-import '../src/data-grist.js';
-import { html } from 'lit';
-import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-export default {
-    title: 'Data-grist/append record position',
-    component: 'ox-grist',
-    argTypes: {}
-};
-const fetchHandler = async (param) => {
-    const { page = 1, limit = 10 } = param;
-    const total = 10;
-    const start = (page - 1) * limit;
-    await new Promise(resolve => setTimeout(resolve, 500));
-    return {
-        total,
-        records: Array(Math.min(limit, total - start))
-            .fill('')
-            .map((item, idx) => {
-            return {
-                id: String(start + idx + 1),
-                name: `Record ${start + idx + 1}`,
-                description: `Description for record ${start + idx + 1}`,
-                price: Math.round(Math.random() * 100000),
-                qty: Math.round(Math.random() * 10)
-            };
-        })
-    };
-};
-const config = {
-    list: {
-        fields: ['name', 'description']
-    },
-    pagination: {
-        infinite: false,
-        page: 1,
-        limit: 5
-    },
-    rows: {
-        selectable: {
-            multiple: true
-        },
-        appendable: false,
-        editable: true,
-        classifier: () => { },
-        handlers: {},
-        groups: [],
-        totals: []
-    },
-    columns: [
-        {
-            type: 'gutter',
-            gutterName: 'sequence'
-        },
-        {
-            type: 'gutter',
-            gutterName: 'row-selector',
-            multiple: true
-        },
-        {
-            type: 'string',
-            name: 'id',
-            hidden: true
-        },
-        {
-            type: 'string',
-            name: 'name',
-            header: '이름',
-            record: {
-                editable: true
-            },
-            sortable: true,
-            width: 180
-        },
-        {
-            type: 'string',
-            name: 'description',
-            header: '설명',
-            record: {
-                editable: true
-            },
-            sortable: true,
-            width: 200
-        },
-        {
-            type: 'number',
-            name: 'price',
-            header: '가격',
-            record: {
-                editable: true,
-                align: 'right'
-            },
-            sortable: true,
-            width: 100
-        },
-        {
-            type: 'number',
-            name: 'qty',
-            header: '수량',
-            record: {
-                editable: true,
-                align: 'right'
-            },
-            sortable: true,
-            width: 80
-        }
-    ]
-};
-export const AddRecordToTop = () => {
-    return html `
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
-
-    <link href="/themes/light.css" rel="stylesheet" />
-    <link href="/themes/dark.css" rel="stylesheet" />
-    <link href="/themes/spacing.css" rel="stylesheet" />
-    <link href="/themes/grist-theme.css" rel="stylesheet" />
-
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-
-    <style>
-      .button-container {
-        margin-bottom: 16px;
-      }
-
-      button {
-        padding: 8px 16px;
-        background-color: var(--md-sys-color-primary);
-        color: var(--md-sys-color-on-primary);
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        font-weight: 500;
-      }
-
-      button:hover {
-        background-color: var(--md-sys-color-primary-container);
-        color: var(--md-sys-color-on-primary-container);
-      }
-    </style>
-
-    <style>
-      ${MDTypeScaleStyles.cssText}
-    </style>
-
-    <style>
-      ${CommonGristStyles.cssText}
-      ${CommonHeaderStyles.cssText}
-    </style>
-
-    <h2>addRecordToTop 메서드 사용 예시</h2>
-    <p>버튼을 클릭하면 새 레코드가 그리드 최상단에 추가됩니다.</p>
-
-    <ox-grist .mode=${'GRID'} .config=${config} .fetchHandler=${fetchHandler}>
-      <div class="button-container" slot="headroom">
-        <button
-          @click=${(e) => {
-        const grist = e.target.closest('ox-grist');
-        grist.addRecordToTop({
-            name: `신규 레코드 ${new Date().toLocaleTimeString()}`,
-            description: '상단에 추가된 레코드',
-            price: Math.round(Math.random() * 100000),
-            qty: Math.round(Math.random() * 10)
-        });
-    }}
-        >
-          상단에 행 추가
-        </button>
-      </div>
-    </ox-grist>
-  `;
-};
-//# sourceMappingURL=append-position.stories.js.map

package/dist/stories/append-position.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"append-position.stories.js","sourceRoot":"","sources":["../../stories/append-position.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/data-grist.js'\n\nimport { html } from 'lit'\nimport { FetchHandler, FetchOption, GristRecord } from '../src/types.js'\n\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\nimport { DataGrist } from '../src/data-grist.js'\n\nexport default {\n  title: 'Data-grist/append record position',\n  component: 'ox-grist',\n  argTypes: {}\n}\n\nconst fetchHandler: FetchHandler = async (param: FetchOption) => {\n  const { page = 1, limit = 10 } = param\n  const total = 10\n  const start = (page - 1) * limit\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  return {\n    total,\n    records: Array(Math.min(limit, total - start))\n      .fill('')\n      .map((item, idx) => {\n        return {\n          id: String(start + idx + 1),\n          name: `Record ${start + idx + 1}`,\n          description: `Description for record ${start + idx + 1}`,\n          price: Math.round(Math.random() * 100000),\n          qty: Math.round(Math.random() * 10)\n        } as GristRecord\n      })\n  }\n}\n\nconst config = {\n  list: {\n    fields: ['name', 'description']\n  },\n  pagination: {\n    infinite: false,\n    page: 1,\n    limit: 5\n  },\n  rows: {\n    selectable: {\n      multiple: true\n    },\n    appendable: false,\n    editable: true,\n    classifier: () => {},\n    handlers: {},\n    groups: [],\n    totals: []\n  },\n  columns: [\n    {\n      type: 'gutter',\n      gutterName: 'sequence'\n    },\n    {\n      type: 'gutter',\n      gutterName: 'row-selector',\n      multiple: true\n    },\n    {\n      type: 'string',\n      name: 'id',\n      hidden: true\n    },\n    {\n      type: 'string',\n      name: 'name',\n      header: '이름',\n      record: {\n        editable: true\n      },\n      sortable: true,\n      width: 180\n    },\n    {\n      type: 'string',\n      name: 'description',\n      header: '설명',\n      record: {\n        editable: true\n      },\n      sortable: true,\n      width: 200\n    },\n    {\n      type: 'number',\n      name: 'price',\n      header: '가격',\n      record: {\n        editable: true,\n        align: 'right'\n      },\n      sortable: true,\n      width: 100\n    },\n    {\n      type: 'number',\n      name: 'qty',\n      header: '수량',\n      record: {\n        editable: true,\n        align: 'right'\n      },\n      sortable: true,\n      width: 80\n    }\n  ]\n}\n\nexport const AddRecordToTop = () => {\n  return html`\n    <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n    <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      .button-container {\n        margin-bottom: 16px;\n      }\n\n      button {\n        padding: 8px 16px;\n        background-color: var(--md-sys-color-primary);\n        color: var(--md-sys-color-on-primary);\n        border: none;\n        border-radius: 4px;\n        cursor: pointer;\n        font-weight: 500;\n      }\n\n      button:hover {\n        background-color: var(--md-sys-color-primary-container);\n        color: var(--md-sys-color-on-primary-container);\n      }\n    </style>\n\n    <style>\n      ${MDTypeScaleStyles.cssText}\n    </style>\n\n    <style>\n      ${CommonGristStyles.cssText}\n      ${CommonHeaderStyles.cssText}\n    </style>\n\n    <h2>addRecordToTop 메서드 사용 예시</h2>\n    <p>버튼을 클릭하면 새 레코드가 그리드 최상단에 추가됩니다.</p>\n\n    <ox-grist .mode=${'GRID'} .config=${config} .fetchHandler=${fetchHandler}>\n      <div class=\"button-container\" slot=\"headroom\">\n        <button\n          @click=${(e: Event) => {\n            const grist = (e.target as HTMLElement).closest('ox-grist') as DataGrist\n            grist.addRecordToTop({\n              name: `신규 레코드 ${new Date().toLocaleTimeString()}`,\n              description: '상단에 추가된 레코드',\n              price: Math.round(Math.random() * 100000),\n              qty: Math.round(Math.random() * 10)\n            })\n          }}\n        >\n          상단에 행 추가\n        </button>\n      </div>\n    </ox-grist>\n  `\n}\n"]}

package/dist/stories/secret.stories.d.ts

@@ -1,37 +0,0 @@
-import '../src/index.js';
-import '../src/filters/filters-form.js';
-import '../src/sorters/sorters-control.js';
-import '../src/record-view/ox-record-creator.js';
-import '@operato/popup/ox-popup-list.js';
-import '@material/web/icon/icon.js';
-import { TemplateResult } from 'lit';
-import { FetchHandler } from '../src/types.js';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        config: {
-            control: string;
-        };
-        mode: {
-            control: string;
-            options: string[];
-        };
-        urlParamsSensitive: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    config: object;
-    mode: 'GRID' | 'LIST' | 'CARD';
-    urlParamsSensitive: boolean;
-    fetchHandler: FetchHandler;
-}
-export declare const SecretEditor: Story<ArgTypes>;