@operato/data-grist 10.0.0-beta.50 → 10.0.0-beta.52

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.0.0-beta.52](https://github.com/hatiolab/operato/compare/v10.0.0-beta.51...v10.0.0-beta.52) (2026-05-22)
+
+
+### :sparkles: Styling
+
+* **data-grist:** record-card 시각 정돈 + danger hover 가독성 ([60cf583](https://github.com/hatiolab/operato/commit/60cf583d3096286f074d1b412e3737bc9b283258))
+
+
+### :bug: Bug Fix
+
+* **data-grist:** card gutter button hover 효과 정리 ([20b54da](https://github.com/hatiolab/operato/commit/20b54daaf8f01cc327ab465f7d26dbe03b839bf2))
+* 그리드 필드 text-select 추가 ([6dfbacb](https://github.com/hatiolab/operato/commit/6dfbacbaaab4d58b0ff6e126c5d4632cb922744a))
+
+
+
 ## [10.0.0-beta.50](https://github.com/hatiolab/operato/compare/v10.0.0-beta.49...v10.0.0-beta.50) (2026-05-12)
 
 

package/dist/src/data-card/data-card-field.js

@@ -43,6 +43,9 @@ DataCardField.styles = [
         object-fit: contain;
         max-width: 100%;
         max-height: 100%;
+        /* 그림 본체 모서리도 둥글게 — wrapper 의 radius 와 동일 (record-card 의
+         * [thumbnail] wrapper 와 같은 변수 / fallback). */
+        border-radius: var(--data-card-thumbnail-radius, var(--md-sys-shape-corner-small));
       }
 
       :host > * {

package/dist/src/data-card/data-card-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-card-field.js","sourceRoot":"","sources":["../../../src/data-card/data-card-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAI/D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAkEuB,WAAM,GAAgB,WAAW,CAAA;QACjC,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAkBnD,CAAC;IAfC,MAAM;QACJ,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAE9C,IAAI,EACF,KAAK,EACL,MAAM,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,EACrC,GAAG,MAAM,CAAA;QAEV,IAAI,OAAO,KAAK,IAAI,QAAQ,EAAE,CAAC;YAC7B,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;YACvC,OAAO,IAAI,CAAA,UAAU,aAAa,CAAC,MAAM,CAAC,WAAW,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;QAC9G,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAA,GAAG,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;QACvE,CAAC;IACH,CAAC;;AApFM,oBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4DF;CACF,AA9DY,CA8DZ;AAE8B;IAA9B,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;4CAAe;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAe;AArE/B,aAAa;IADzB,aAAa,CAAC,eAAe,CAAC;GAClB,aAAa,CAsFzB","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config.js'\nimport { ColumnConfig, GristRecord } from '../types.js'\n\n@customElement('ox-card-field')\nexport class DataCardField extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        position: relative;\n\n        white-space: nowrap;\n\n        font: inherit;\n      }\n\n      :host([thumbnail]) {\n        flex-direction: column;\n        justify-content: center;\n      }\n\n      :host([thumbnail]) > * {\n        object-fit: contain;\n        max-width: 100%;\n        max-height: 100%;\n      }\n\n      :host > * {\n        margin: var(--spacing-none);\n\n        overflow: hidden;\n\n        text-overflow: ellipsis;\n        text-align: left;\n      }\n\n      :host > *[center] {\n        flex: none;\n        margin: var(--spacing-none) auto;\n      }\n\n      :host([name]) label {\n        display: none;\n      }\n\n      label {\n        flex: none;\n        width: 33%;\n        padding-bottom: 2px;\n        font: var(--data-card-item-etc-label-font);\n        text-transform: capitalize;\n      }\n\n      :host([name]) > span,\n      label + a {\n        display: block;\n        min-width: 100%;\n      }\n\n      @media only screen and (max-width: 460px) {\n        *[center] {\n          margin: initial;\n        }\n      }\n    `\n  ]\n\n  @property({ attribute: true }) align?: string\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Number }) rowIndex: number = -1\n  @property({ type: Object }) value?: object\n\n  render(): TemplateResult {\n    var { value, column, record, rowIndex } = this\n\n    var {\n      label,\n      record: { renderer: recordRenderer }\n    } = column\n\n    if (typeof label == 'object') {\n      let { renderer: labelRenderer } = label\n      return html`<label>${labelRenderer(column)}</label>${recordRenderer(value, column, record, rowIndex, this)}`\n    } else {\n      return html`${recordRenderer(value, column, record, rowIndex, this)}`\n    }\n  }\n}\n"]}
+{"version":3,"file":"data-card-field.js","sourceRoot":"","sources":["../../../src/data-card/data-card-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAI/D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAqEuB,WAAM,GAAgB,WAAW,CAAA;QACjC,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAkBnD,CAAC;IAfC,MAAM;QACJ,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAE9C,IAAI,EACF,KAAK,EACL,MAAM,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,EACrC,GAAG,MAAM,CAAA;QAEV,IAAI,OAAO,KAAK,IAAI,QAAQ,EAAE,CAAC;YAC7B,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;YACvC,OAAO,IAAI,CAAA,UAAU,aAAa,CAAC,MAAM,CAAC,WAAW,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;QAC9G,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAA,GAAG,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;QACvE,CAAC;IACH,CAAC;;AAvFM,oBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+DF;CACF,AAjEY,CAiEZ;AAE8B;IAA9B,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;4CAAe;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAe;AAxE/B,aAAa;IADzB,aAAa,CAAC,eAAe,CAAC;GAClB,aAAa,CAyFzB","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config.js'\nimport { ColumnConfig, GristRecord } from '../types.js'\n\n@customElement('ox-card-field')\nexport class DataCardField extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        position: relative;\n\n        white-space: nowrap;\n\n        font: inherit;\n      }\n\n      :host([thumbnail]) {\n        flex-direction: column;\n        justify-content: center;\n      }\n\n      :host([thumbnail]) > * {\n        object-fit: contain;\n        max-width: 100%;\n        max-height: 100%;\n        /* 그림 본체 모서리도 둥글게 — wrapper 의 radius 와 동일 (record-card 의\n         * [thumbnail] wrapper 와 같은 변수 / fallback). */\n        border-radius: var(--data-card-thumbnail-radius, var(--md-sys-shape-corner-small));\n      }\n\n      :host > * {\n        margin: var(--spacing-none);\n\n        overflow: hidden;\n\n        text-overflow: ellipsis;\n        text-align: left;\n      }\n\n      :host > *[center] {\n        flex: none;\n        margin: var(--spacing-none) auto;\n      }\n\n      :host([name]) label {\n        display: none;\n      }\n\n      label {\n        flex: none;\n        width: 33%;\n        padding-bottom: 2px;\n        font: var(--data-card-item-etc-label-font);\n        text-transform: capitalize;\n      }\n\n      :host([name]) > span,\n      label + a {\n        display: block;\n        min-width: 100%;\n      }\n\n      @media only screen and (max-width: 460px) {\n        *[center] {\n          margin: initial;\n        }\n      }\n    `\n  ]\n\n  @property({ attribute: true }) align?: string\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Number }) rowIndex: number = -1\n  @property({ type: Object }) value?: object\n\n  render(): TemplateResult {\n    var { value, column, record, rowIndex } = this\n\n    var {\n      label,\n      record: { renderer: recordRenderer }\n    } = column\n\n    if (typeof label == 'object') {\n      let { renderer: labelRenderer } = label\n      return html`<label>${labelRenderer(column)}</label>${recordRenderer(value, column, record, rowIndex, this)}`\n    } else {\n      return html`${recordRenderer(value, column, record, rowIndex, this)}`\n    }\n  }\n}\n"]}

package/dist/src/data-card/data-card-gutter.js

@@ -62,7 +62,10 @@ DataCardGutter.styles = [
         padding: var(--spacing-small);
       }
 
-      *:hover {
+      /* button hover 효과는 button 자체에만 — *:hover 로 광범위 적용 시 자식
+       * (span/md-icon) 의 individual hover 가 secondary background 작은 박스를
+       * 그려서 부자연. 자식들은 button hover 의 효과를 상속받기만 한다. */
+      button:hover {
         cursor: pointer;
         color: var(--md-sys-color-on-secondary);
         background-color: var(--md-sys-color-secondary);
@@ -87,6 +90,13 @@ DataCardGutter.styles = [
         align-items: center;
       }
 
+      /* 자식 (span / md-icon) 은 button 의 color 를 inherit — button hover / danger
+       * 상태에서 color 가 변하면 자식 글자 / 아이콘 색도 함께 반전. 상위의 *{...}
+       * 가 모든 자식에 color 박아서 inherit 안 되던 문제 보수. */
+      button > * {
+        color: inherit;
+      }
+
       button md-icon {
         border: 0;
         padding: 0;

package/dist/src/data-card/data-card-gutter.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-card-gutter.js","sourceRoot":"","sources":["../../../src/data-card/data-card-gutter.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkC,MAAM,KAAK,CAAA;AAC3E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAI/D,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAkEuB,WAAM,GAAgB,WAAW,CAAA;QACjC,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAgCnD,CAAC;IA7BC,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO,IAAI,CAAA,EAAE,CAAA;QACf,CAAC;QAED,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAC9C,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,MAAM,CAAA;QAEhC,oEAAoE;QACpE,OAAO,IAAI,CAAA,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAA;IACnE,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;YAE1C,IAAI,UAAU,IAAI,cAAc,EAAE,CAAC;gBACjC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAA;YACvC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,CAAA;YACtC,CAAC;YAED,IAAI,MAAM,EAAE,CAAC;gBACX,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;YACjC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;YAChC,CAAC;QACH,CAAC;IACH,CAAC;;AAlGM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4DF;CACF,AA9DY,CA8DZ;AAE8B;IAA9B,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;6CAAe;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AArE/B,cAAc;IAD1B,aAAa,CAAC,gBAAgB,CAAC;GACnB,cAAc,CAoG1B","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config.js'\nimport { ColumnConfig, GristRecord } from '../types.js'\n\n@customElement('ox-card-gutter')\nexport class DataCardGutter extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        background-color: transparent;\n        align-content: center;\n        align-items: center;\n        text-overflow: ellipsis;\n      }\n\n      :host([row-selector]) {\n        margin-right: auto;\n      }\n\n      * {\n        border: 0;\n        font-size: var(--md-sys-typescale-label-medium-size, 0.8rem);\n        line-height: var(--md-sys-typescale-label-medium-size, 0.8rem);\n\n        color: var(--md-sys-color-on-primary);\n        background-color: var(--md-sys-color-primary);\n        border-radius: var(--data-card-item-btn-border-radius, var(--md-sys-shape-corner-tiny));\n\n        padding: var(--spacing-small);\n      }\n\n      *:hover {\n        cursor: pointer;\n        color: var(--md-sys-color-on-secondary);\n        background-color: var(--md-sys-color-secondary);\n      }\n\n      :host([danger]) button {\n        color: var(--md-sys-color-on-error);\n        background-color: var(--md-sys-color-error);\n        border-color: var(--md-sys-color-error);\n      }\n\n      :host([danger]) button:hover {\n        color: var(--md-sys-color-error);\n        background-color: var(--md-sys-color-on-secondary);\n        border-color: var(--md-sys-color-on-secondary);\n      }\n\n      button {\n        display: flex;\n        gap: var(--spacing-small);\n        border: 0;\n        align-items: center;\n      }\n\n      button md-icon {\n        border: 0;\n        padding: 0;\n        background-color: unset;\n      }\n\n      button span {\n        padding: 0;\n        background-color: transparent;\n      }\n    `\n  ]\n\n  @property({ attribute: true }) align?: string\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Number }) rowIndex: number = -1\n  @property({ type: Object }) value?: object\n\n  render(): TemplateResult {\n    if (!this.column) {\n      return html``\n    }\n\n    var { value, column, record, rowIndex } = this\n    var { renderer } = column.record\n\n    /* renderer가 html template이 아니고 단순한 값인 경우가 있으므로, html 템플릿으로 감싸준다. */\n    return html` ${renderer(value, column, record, rowIndex, this)} `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('column')) {\n      const { gutterName, danger } = this.column\n\n      if (gutterName == 'row-selector') {\n        this.setAttribute('row-selector', '')\n      } else {\n        this.removeAttribute('row-selector')\n      }\n\n      if (danger) {\n        this.setAttribute('danger', '')\n      } else {\n        this.removeAttribute('danger')\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"data-card-gutter.js","sourceRoot":"","sources":["../../../src/data-card/data-card-gutter.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkC,MAAM,KAAK,CAAA;AAC3E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAI/D,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QA4EuB,WAAM,GAAgB,WAAW,CAAA;QACjC,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAgCnD,CAAC;IA7BC,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO,IAAI,CAAA,EAAE,CAAA;QACf,CAAC;QAED,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAC9C,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,MAAM,CAAA;QAEhC,oEAAoE;QACpE,OAAO,IAAI,CAAA,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAA;IACnE,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;YAE1C,IAAI,UAAU,IAAI,cAAc,EAAE,CAAC;gBACjC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAA;YACvC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,CAAA;YACtC,CAAC;YAED,IAAI,MAAM,EAAE,CAAC;gBACX,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;YACjC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;YAChC,CAAC;QACH,CAAC;IACH,CAAC;;AA5GM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsEF;CACF,AAxEY,CAwEZ;AAE8B;IAA9B,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;6CAAe;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AA/E/B,cAAc;IAD1B,aAAa,CAAC,gBAAgB,CAAC;GACnB,cAAc,CA8G1B","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config.js'\nimport { ColumnConfig, GristRecord } from '../types.js'\n\n@customElement('ox-card-gutter')\nexport class DataCardGutter extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        background-color: transparent;\n        align-content: center;\n        align-items: center;\n        text-overflow: ellipsis;\n      }\n\n      :host([row-selector]) {\n        margin-right: auto;\n      }\n\n      * {\n        border: 0;\n        font-size: var(--md-sys-typescale-label-medium-size, 0.8rem);\n        line-height: var(--md-sys-typescale-label-medium-size, 0.8rem);\n\n        color: var(--md-sys-color-on-primary);\n        background-color: var(--md-sys-color-primary);\n        border-radius: var(--data-card-item-btn-border-radius, var(--md-sys-shape-corner-tiny));\n\n        padding: var(--spacing-small);\n      }\n\n      /* button hover 효과는 button 자체에만 — *:hover 로 광범위 적용 시 자식\n       * (span/md-icon) 의 individual hover 가 secondary background 작은 박스를\n       * 그려서 부자연. 자식들은 button hover 의 효과를 상속받기만 한다. */\n      button:hover {\n        cursor: pointer;\n        color: var(--md-sys-color-on-secondary);\n        background-color: var(--md-sys-color-secondary);\n      }\n\n      :host([danger]) button {\n        color: var(--md-sys-color-on-error);\n        background-color: var(--md-sys-color-error);\n        border-color: var(--md-sys-color-error);\n      }\n\n      :host([danger]) button:hover {\n        color: var(--md-sys-color-error);\n        background-color: var(--md-sys-color-on-secondary);\n        border-color: var(--md-sys-color-on-secondary);\n      }\n\n      button {\n        display: flex;\n        gap: var(--spacing-small);\n        border: 0;\n        align-items: center;\n      }\n\n      /* 자식 (span / md-icon) 은 button 의 color 를 inherit — button hover / danger\n       * 상태에서 color 가 변하면 자식 글자 / 아이콘 색도 함께 반전. 상위의 *{...}\n       * 가 모든 자식에 color 박아서 inherit 안 되던 문제 보수. */\n      button > * {\n        color: inherit;\n      }\n\n      button md-icon {\n        border: 0;\n        padding: 0;\n        background-color: unset;\n      }\n\n      button span {\n        padding: 0;\n        background-color: transparent;\n      }\n    `\n  ]\n\n  @property({ attribute: true }) align?: string\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Number }) rowIndex: number = -1\n  @property({ type: Object }) value?: object\n\n  render(): TemplateResult {\n    if (!this.column) {\n      return html``\n    }\n\n    var { value, column, record, rowIndex } = this\n    var { renderer } = column.record\n\n    /* renderer가 html template이 아니고 단순한 값인 경우가 있으므로, html 템플릿으로 감싸준다. */\n    return html` ${renderer(value, column, record, rowIndex, this)} `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('column')) {\n      const { gutterName, danger } = this.column\n\n      if (gutterName == 'row-selector') {\n        this.setAttribute('row-selector', '')\n      } else {\n        this.removeAttribute('row-selector')\n      }\n\n      if (danger) {\n        this.setAttribute('danger', '')\n      } else {\n        this.removeAttribute('danger')\n      }\n    }\n  }\n}\n"]}

package/dist/src/data-card/record-card.js

@@ -176,7 +176,8 @@ RecordCard.styles = [
         align-items: stretch;
         position: relative;
         background-color: var(--data-card-record-card-background-color);
-        border-radius: var(--data-card-record-card-border-radius);
+        /* Theme 정의가 누락된 application 에서도 합리적 radius 보장. */
+        border-radius: var(--data-card-record-card-border-radius, var(--md-sys-shape-corner-medium));
         border: var(--data-card-record-card-border);
         height: min-content;
         padding: var(--spacing-small) var(--spacing-none);
@@ -219,8 +220,11 @@ RecordCard.styles = [
 
       [thumbnail] {
         height: var(--data-card-thumbnail-height);
-        border-top-left-radius: var(--data-card-record-card-border-radius);
-        border-top-right-radius: var(--data-card-record-card-border-radius);
+        padding: var(--spacing-large);
+        box-sizing: border-box;
+        /* 동심 안쪽 radius — Material 3 shape token (외곽 = corner-medium, 안쪽 =
+         * corner-small). board-ui 카드와 동일 톤. */
+        border-radius: var(--data-card-thumbnail-radius, var(--md-sys-shape-corner-small));
         overflow: hidden;
       }
 

package/dist/src/data-card/record-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"record-card.js","sourceRoot":"","sources":["../../../src/data-card/record-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../record-view/record-view.js'\nimport './data-card-field.js'\nimport './data-card-gutter.js'\nimport './data-card-gutter-menu.js'\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { GristConfig, GristData, GristRecord } from '../types.js'\nimport { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config.js'\nimport { RecordViewHandler } from '../record-view/record-view-handler.js'\nimport { recordCardClickHandler } from './event-handlers/record-card-click-handler.js'\nimport { recordCardDblClickHandler } from './event-handlers/record-card-dblclick-handler.js'\n\n// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.\nconst OPTIONS: Intl.DateTimeFormatOptions = {\n  year: 'numeric',\n  month: 'numeric',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: false\n  // timeZone: 'America/Los_Angeles'\n}\n\nfunction getSafeFormatter(locale: string, options: Intl.DateTimeFormatOptions) {\n  try {\n    const safeLocale = locale || 'en-US'\n    return new Intl.DateTimeFormat(safeLocale, options)\n  } catch (e) {\n    return new Intl.DateTimeFormat('en-US', options)\n  }\n}\n\nconst formatter = getSafeFormatter(navigator.language, OPTIONS)\n\n@customElement('ox-record-card')\nexport class RecordCard extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-items: stretch;\n        position: relative;\n        background-color: var(--data-card-record-card-background-color);\n        border-radius: var(--data-card-record-card-border-radius);\n        border: var(--data-card-record-card-border);\n        height: min-content;\n        padding: var(--spacing-small) var(--spacing-none);\n      }\n\n      :host(:hover) {\n        background-color: var(--md-sys-color-surface);\n        border: var(--data-card-record-card-border-hover);\n        box-shadow: var(--data-card-record-card-boxshadow-hover);\n      }\n\n      :host([dirty])::before {\n        content: '';\n        position: absolute;\n        left: var(--spacing-none);\n        top: var(--spacing-none);\n\n        width: var(--spacing-none);\n        height: var(--spacing-none);\n        border-top: var(--grid-record-dirty-border-top);\n        border-right: var(--grid-record-dirty-border-left);\n      }\n\n      :host[emphasized-row] {\n        background-color: var(--grid-record-emphasized-background-color);\n        color: var(--grid-record-emphasized-color);\n      }\n\n      [dirty] {\n        position: absolute;\n        margin: var(--spacing-none);\n        height: 20px;\n\n        font: var(--grid-record-dirty-icon-font);\n        text-indent: 1px;\n        left: var(--spacing-none);\n        top: var(--spacing-none);\n        color: var(--grid-record-dirty-color, var(--md-sys-color-error));\n      }\n\n      [thumbnail] {\n        height: var(--data-card-thumbnail-height);\n        border-top-left-radius: var(--data-card-record-card-border-radius);\n        border-top-right-radius: var(--data-card-record-card-border-radius);\n        overflow: hidden;\n      }\n\n      [content] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-tiny);\n        margin: var(--data-card-item-margin);\n      }\n\n      [brief] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-tiny);\n        overflow: hidden;\n      }\n\n      [gutters] {\n        display: flex;\n        flex-direction: row;\n        gap: var(--spacing-small);\n        margin: var(--spacing-small) var(--spacing-medium);\n        justify-content: end;\n        align-items: stretch;\n      }\n\n      ox-card-field {\n        font: var(--data-card-item-etc-font);\n        color: var(--data-card-item-etc-color, var(--md-sys-color-on-surface));\n      }\n\n      ox-card-field[name] {\n        font: var(--data-card-item-name-font);\n        color: var(--data-card-item-name-color, var(--md-sys-color-secondary));\n      }\n\n      ox-card-field[desc] {\n        font: var(--data-card-item-disc-font);\n        color: var(--data-card-item-disc-color, var(--md-sys-color-tertiary));\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex: number = -1\n  /*\n   * row-selector를 사용자가 변경할 때, record-card의 update를 유도하기 위해 selected-row attribute를 property에 추가함.\n   * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)\n   */\n  @property({ type: Boolean, attribute: 'selected-row' }) selectedRow: boolean = false\n  @property({ attribute: false }) emphasized: any = false\n\n  private _recordView: any\n  private clickHandler = recordCardClickHandler.bind(this) as EventListener\n  private dblclickHandler = recordCardDblClickHandler.bind(this) as EventListener\n\n  firstUpdated() {\n    /*\n      long-press\n      TODO. performance를 확인한 후에 활성화하자.\n    */\n    // longpressable(this.renderRoot.querySelector('[content]'))\n    // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))\n    this.renderRoot.addEventListener('click', this.clickHandler)\n    this.renderRoot.addEventListener('dblclick', this.dblclickHandler)\n\n    this.addEventListener('show-record-view', () => this.popupRecordView())\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('record') && this._recordView) {\n      this._recordView.record = this.record\n    }\n\n    const emphasized = this.emphasized\n\n    if (!!emphasized) {\n      this.setAttribute('emphasized-row', '')\n\n      if (Symbol.iterator in Object(emphasized)) {\n        const [backgroundColor, foregroundColor] = emphasized as string[]\n        backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor)\n        foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor)\n      }\n    } else {\n      this.removeAttribute('emphasized-row')\n    }\n  }\n\n  render() {\n    const record = this.record\n    const rowIndex = this.rowIndex\n    const { columns, list } = this.config\n    const { thumbnail, fields, details } = list || {}\n\n    const briefFields = fields.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n    const detailFields =\n      details.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n\n    const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined\n\n    const gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)\n\n    if (this.hasAttribute('dirty')) {\n      var dirtyIcon\n\n      switch (this.record['__dirty__']) {\n        case 'M':\n          dirtyIcon = 'done'\n          break\n        case '+':\n          dirtyIcon = 'add'\n          break\n        case '-':\n          dirtyIcon = 'remove'\n          break\n      }\n    }\n\n    return html`\n      ${dirtyIcon ? html` <md-icon dirty>${dirtyIcon}</md-icon> ` : html``}\n      ${thumbnailColumn\n        ? html` <ox-card-field\n            thumbnail\n            .rowIndex=${rowIndex}\n            .column=${thumbnailColumn}\n            .record=${record}\n            .value=${record[thumbnailColumn?.name || '']}\n          ></ox-card-field>`\n        : html``}\n\n      <div content>\n        <div brief>\n          ${briefFields.map(\n            (column, idx) => html`\n              <ox-card-field\n                .rowIndex=${rowIndex}\n                .column=${column}\n                .record=${record}\n                .value=${record[column?.name || '']}\n                ?name=${idx == 0}\n                ?desc=${idx == 1}\n              ></ox-card-field>\n            `\n          )}\n        </div>\n        ${detailFields.length > 0\n          ? html`\n              <div detail>\n                ${detailFields.map(\n                  (column, idx) => html`\n                    <ox-card-field\n                      .rowIndex=${rowIndex}\n                      .column=${column}\n                      .record=${record}\n                      .value=${record[column?.name || '']}\n                    ></ox-card-field>\n                  `\n                )}\n              </div>\n            `\n          : html``}\n      </div>\n\n      <div gutters>\n        ${gutters.map(gutter => {\n          return html`\n            <ox-card-gutter\n              .rowIndex=${rowIndex}\n              .column=${gutter}\n              .record=${record}\n              .value=${record[gutter.name]}\n            ></ox-card-gutter>\n          `\n        })}\n      </div>\n    `\n  }\n\n  popupRecordView() {\n    var titleField = this.config.list.fields[0] || 'name'\n    var title = this.record[titleField]\n\n    /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n    if (typeof title == 'object') {\n      var column = this.config.columns.find(column => column.name == titleField)\n      title = column?.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */)\n    }\n\n    this._recordView = RecordViewHandler(\n      this.config.columns,\n      this.record,\n      this.rowIndex,\n      this,\n      {\n        title\n      },\n      () => {\n        delete this._recordView\n      }\n    )\n  }\n}\n"]}
+{"version":3,"file":"record-card.js","sourceRoot":"","sources":["../../../src/data-card/record-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../record-view/record-view.js'\nimport './data-card-field.js'\nimport './data-card-gutter.js'\nimport './data-card-gutter-menu.js'\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { GristConfig, GristData, GristRecord } from '../types.js'\nimport { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config.js'\nimport { RecordViewHandler } from '../record-view/record-view-handler.js'\nimport { recordCardClickHandler } from './event-handlers/record-card-click-handler.js'\nimport { recordCardDblClickHandler } from './event-handlers/record-card-dblclick-handler.js'\n\n// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.\nconst OPTIONS: Intl.DateTimeFormatOptions = {\n  year: 'numeric',\n  month: 'numeric',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: false\n  // timeZone: 'America/Los_Angeles'\n}\n\nfunction getSafeFormatter(locale: string, options: Intl.DateTimeFormatOptions) {\n  try {\n    const safeLocale = locale || 'en-US'\n    return new Intl.DateTimeFormat(safeLocale, options)\n  } catch (e) {\n    return new Intl.DateTimeFormat('en-US', options)\n  }\n}\n\nconst formatter = getSafeFormatter(navigator.language, OPTIONS)\n\n@customElement('ox-record-card')\nexport class RecordCard extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-items: stretch;\n        position: relative;\n        background-color: var(--data-card-record-card-background-color);\n        /* Theme 정의가 누락된 application 에서도 합리적 radius 보장. */\n        border-radius: var(--data-card-record-card-border-radius, var(--md-sys-shape-corner-medium));\n        border: var(--data-card-record-card-border);\n        height: min-content;\n        padding: var(--spacing-small) var(--spacing-none);\n      }\n\n      :host(:hover) {\n        background-color: var(--md-sys-color-surface);\n        border: var(--data-card-record-card-border-hover);\n        box-shadow: var(--data-card-record-card-boxshadow-hover);\n      }\n\n      :host([dirty])::before {\n        content: '';\n        position: absolute;\n        left: var(--spacing-none);\n        top: var(--spacing-none);\n\n        width: var(--spacing-none);\n        height: var(--spacing-none);\n        border-top: var(--grid-record-dirty-border-top);\n        border-right: var(--grid-record-dirty-border-left);\n      }\n\n      :host[emphasized-row] {\n        background-color: var(--grid-record-emphasized-background-color);\n        color: var(--grid-record-emphasized-color);\n      }\n\n      [dirty] {\n        position: absolute;\n        margin: var(--spacing-none);\n        height: 20px;\n\n        font: var(--grid-record-dirty-icon-font);\n        text-indent: 1px;\n        left: var(--spacing-none);\n        top: var(--spacing-none);\n        color: var(--grid-record-dirty-color, var(--md-sys-color-error));\n      }\n\n      [thumbnail] {\n        height: var(--data-card-thumbnail-height);\n        padding: var(--spacing-large);\n        box-sizing: border-box;\n        /* 동심 안쪽 radius — Material 3 shape token (외곽 = corner-medium, 안쪽 =\n         * corner-small). board-ui 카드와 동일 톤. */\n        border-radius: var(--data-card-thumbnail-radius, var(--md-sys-shape-corner-small));\n        overflow: hidden;\n      }\n\n      [content] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-tiny);\n        margin: var(--data-card-item-margin);\n      }\n\n      [brief] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-tiny);\n        overflow: hidden;\n      }\n\n      [gutters] {\n        display: flex;\n        flex-direction: row;\n        gap: var(--spacing-small);\n        margin: var(--spacing-small) var(--spacing-medium);\n        justify-content: end;\n        align-items: stretch;\n      }\n\n      ox-card-field {\n        font: var(--data-card-item-etc-font);\n        color: var(--data-card-item-etc-color, var(--md-sys-color-on-surface));\n      }\n\n      ox-card-field[name] {\n        font: var(--data-card-item-name-font);\n        color: var(--data-card-item-name-color, var(--md-sys-color-secondary));\n      }\n\n      ox-card-field[desc] {\n        font: var(--data-card-item-disc-font);\n        color: var(--data-card-item-disc-color, var(--md-sys-color-tertiary));\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex: number = -1\n  /*\n   * row-selector를 사용자가 변경할 때, record-card의 update를 유도하기 위해 selected-row attribute를 property에 추가함.\n   * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)\n   */\n  @property({ type: Boolean, attribute: 'selected-row' }) selectedRow: boolean = false\n  @property({ attribute: false }) emphasized: any = false\n\n  private _recordView: any\n  private clickHandler = recordCardClickHandler.bind(this) as EventListener\n  private dblclickHandler = recordCardDblClickHandler.bind(this) as EventListener\n\n  firstUpdated() {\n    /*\n      long-press\n      TODO. performance를 확인한 후에 활성화하자.\n    */\n    // longpressable(this.renderRoot.querySelector('[content]'))\n    // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))\n    this.renderRoot.addEventListener('click', this.clickHandler)\n    this.renderRoot.addEventListener('dblclick', this.dblclickHandler)\n\n    this.addEventListener('show-record-view', () => this.popupRecordView())\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('record') && this._recordView) {\n      this._recordView.record = this.record\n    }\n\n    const emphasized = this.emphasized\n\n    if (!!emphasized) {\n      this.setAttribute('emphasized-row', '')\n\n      if (Symbol.iterator in Object(emphasized)) {\n        const [backgroundColor, foregroundColor] = emphasized as string[]\n        backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor)\n        foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor)\n      }\n    } else {\n      this.removeAttribute('emphasized-row')\n    }\n  }\n\n  render() {\n    const record = this.record\n    const rowIndex = this.rowIndex\n    const { columns, list } = this.config\n    const { thumbnail, fields, details } = list || {}\n\n    const briefFields = fields.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n    const detailFields =\n      details.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n\n    const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined\n\n    const gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)\n\n    if (this.hasAttribute('dirty')) {\n      var dirtyIcon\n\n      switch (this.record['__dirty__']) {\n        case 'M':\n          dirtyIcon = 'done'\n          break\n        case '+':\n          dirtyIcon = 'add'\n          break\n        case '-':\n          dirtyIcon = 'remove'\n          break\n      }\n    }\n\n    return html`\n      ${dirtyIcon ? html` <md-icon dirty>${dirtyIcon}</md-icon> ` : html``}\n      ${thumbnailColumn\n        ? html` <ox-card-field\n            thumbnail\n            .rowIndex=${rowIndex}\n            .column=${thumbnailColumn}\n            .record=${record}\n            .value=${record[thumbnailColumn?.name || '']}\n          ></ox-card-field>`\n        : html``}\n\n      <div content>\n        <div brief>\n          ${briefFields.map(\n            (column, idx) => html`\n              <ox-card-field\n                .rowIndex=${rowIndex}\n                .column=${column}\n                .record=${record}\n                .value=${record[column?.name || '']}\n                ?name=${idx == 0}\n                ?desc=${idx == 1}\n              ></ox-card-field>\n            `\n          )}\n        </div>\n        ${detailFields.length > 0\n          ? html`\n              <div detail>\n                ${detailFields.map(\n                  (column, idx) => html`\n                    <ox-card-field\n                      .rowIndex=${rowIndex}\n                      .column=${column}\n                      .record=${record}\n                      .value=${record[column?.name || '']}\n                    ></ox-card-field>\n                  `\n                )}\n              </div>\n            `\n          : html``}\n      </div>\n\n      <div gutters>\n        ${gutters.map(gutter => {\n          return html`\n            <ox-card-gutter\n              .rowIndex=${rowIndex}\n              .column=${gutter}\n              .record=${record}\n              .value=${record[gutter.name]}\n            ></ox-card-gutter>\n          `\n        })}\n      </div>\n    `\n  }\n\n  popupRecordView() {\n    var titleField = this.config.list.fields[0] || 'name'\n    var title = this.record[titleField]\n\n    /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n    if (typeof title == 'object') {\n      var column = this.config.columns.find(column => column.name == titleField)\n      title = column?.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */)\n    }\n\n    this._recordView = RecordViewHandler(\n      this.config.columns,\n      this.record,\n      this.rowIndex,\n      this,\n      {\n        title\n      },\n      () => {\n        delete this._recordView\n      }\n    )\n  }\n}\n"]}

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

@@ -0,0 +1,17 @@
+import { OxGristEditor } from './ox-grist-editor.js';
+export declare class OxGristEditorTextSelect extends OxGristEditor {
+    static styles: import("lit").CSSResult[];
+    private _showDropdown;
+    private _resolvedOptions;
+    private _dropdownEl;
+    get inlineEditable(): boolean;
+    get editorTemplate(): import("lit-html").TemplateResult<1>;
+    private _buildTemplate;
+    private _onInputFocus;
+    private _onInputChange;
+    private _showFloatingDropdown;
+    private _selectOption;
+    private _removeFloatingDropdown;
+    _onfocusout(): void;
+    disconnectedCallback(): void;
+}

package/dist/src/editors/ox-grist-editor-text-select.js

@@ -0,0 +1,177 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { until } from 'lit/directives/until.js';
+import { OxGristEditor } from './ox-grist-editor.js';
+function toOptionObjects(options) {
+    return options.map(option => {
+        switch (typeof option) {
+            case 'string':
+                return { display: option, value: option };
+            case 'object':
+                return { display: option.display || option.name, value: option.value };
+            default:
+                return option;
+        }
+    });
+}
+let OxGristEditorTextSelect = class OxGristEditorTextSelect extends OxGristEditor {
+    constructor() {
+        super(...arguments);
+        this._showDropdown = false;
+        this._resolvedOptions = [];
+        this._dropdownEl = null;
+    }
+    get inlineEditable() {
+        return true;
+    }
+    get editorTemplate() {
+        var rowOptionField = this.record[this.column.record.rowOptionField || ''];
+        var { options = [] } = rowOptionField ? rowOptionField : this.column.record;
+        if (typeof options == 'function') {
+            options = options.call(null, this.value, this.column, this.record, this.rowIndex, this.field);
+            if (options instanceof Promise) {
+                return html `${until(options.then(opts => {
+                    this._resolvedOptions = toOptionObjects((opts || []));
+                    return this._buildTemplate();
+                }))}`;
+            }
+            else {
+                this._resolvedOptions = toOptionObjects((options || []));
+                return this._buildTemplate();
+            }
+        }
+        else {
+            this._resolvedOptions = toOptionObjects((options || []));
+            return this._buildTemplate();
+        }
+    }
+    _buildTemplate() {
+        return html `<input
+      type="text"
+      .value=${this.value == null ? '' : this.value}
+      @focus=${this._onInputFocus}
+      @input=${this._onInputChange}
+    />`;
+    }
+    _onInputFocus() {
+        if (this._resolvedOptions.length > 0) {
+            this._showFloatingDropdown();
+        }
+    }
+    _onInputChange(e) {
+        const value = e.target.value;
+        this._dirtyValue = this.formatFromEditor(value);
+    }
+    _showFloatingDropdown() {
+        this._removeFloatingDropdown();
+        const rect = this.getBoundingClientRect();
+        const dropdown = document.createElement('div');
+        dropdown.style.cssText = `
+      position: fixed;
+      top: ${rect.bottom}px;
+      left: ${rect.left}px;
+      width: ${rect.width * 2}px;
+      background: #fff;
+      border: 1px solid #ccc;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+      z-index: 99999;
+      max-height: 200px;
+      overflow-y: auto;
+      border-radius: 0 0 4px 4px;
+    `;
+        this._resolvedOptions.forEach(opt => {
+            const item = document.createElement('div');
+            item.textContent = String(opt.display || opt.value);
+            item.style.cssText = `
+        padding: 8px 12px;
+        cursor: pointer;
+        font-size: 13px;
+        border-bottom: 1px solid #eee;
+      `;
+            item.addEventListener('mouseenter', () => {
+                item.style.backgroundColor = '#e3f2fd';
+            });
+            item.addEventListener('mouseleave', () => {
+                item.style.backgroundColor = '#fff';
+            });
+            item.addEventListener('pointerdown', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this._selectOption(opt);
+            });
+            dropdown.appendChild(item);
+        });
+        document.body.appendChild(dropdown);
+        this._dropdownEl = dropdown;
+    }
+    _selectOption(opt) {
+        this._removeFloatingDropdown();
+        const newValue = this.formatFromEditor(opt.value);
+        const { name = '' } = this.column;
+        const currentValue = this.record[name] || '';
+        // input 값 갱신
+        const input = this.renderRoot.querySelector('input');
+        if (input) {
+            input.value = String(opt.value);
+        }
+        // field-change 직접 dispatch
+        this._dirtyValue = newValue;
+        this.dispatchEvent(new CustomEvent('field-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                before: currentValue,
+                after: newValue,
+                column: this.column,
+                record: this.record,
+                row: this.row
+            }
+        }));
+    }
+    _removeFloatingDropdown() {
+        if (this._dropdownEl) {
+            this._dropdownEl.remove();
+            this._dropdownEl = null;
+        }
+    }
+    _onfocusout() {
+        setTimeout(() => {
+            this._removeFloatingDropdown();
+            super._onfocusout();
+        }, 150);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._removeFloatingDropdown();
+    }
+};
+OxGristEditorTextSelect.styles = [
+    ...([OxGristEditor.styles].flat()),
+    css `
+      input {
+        flex: 1;
+        width: 100%;
+        height: 100%;
+        border: 0;
+        background-color: transparent;
+        box-sizing: border-box;
+        color: var(--md-sys-color-on-background);
+      }
+
+      input:focus {
+        outline: none;
+      }
+    `
+];
+__decorate([
+    state()
+], OxGristEditorTextSelect.prototype, "_showDropdown", void 0);
+__decorate([
+    state()
+], OxGristEditorTextSelect.prototype, "_resolvedOptions", void 0);
+OxGristEditorTextSelect = __decorate([
+    customElement('ox-grist-editor-text-select')
+], OxGristEditorTextSelect);
+export { OxGristEditorTextSelect };
+//# sourceMappingURL=ox-grist-editor-text-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-editor-text-select.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor-text-select.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { until } from 'lit/directives/until.js'\n\nimport { OxGristEditor } from './ox-grist-editor.js'\nimport { SelectOption, SelectOptionObject } from '../types.js'\n\nfunction toOptionObjects(options: SelectOption[]): SelectOptionObject[] {\n  return options.map(option => {\n    switch (typeof option) {\n      case 'string':\n        return { display: option, value: option }\n      case 'object':\n        return { display: option.display || option.name, value: option.value }\n      default:\n        return option\n    }\n  }) as SelectOptionObject[]\n}\n\n@customElement('ox-grist-editor-text-select')\nexport class OxGristEditorTextSelect extends OxGristEditor {\n  static styles = [\n    ...([OxGristEditor.styles].flat()),\n    css`\n      input {\n        flex: 1;\n        width: 100%;\n        height: 100%;\n        border: 0;\n        background-color: transparent;\n        box-sizing: border-box;\n        color: var(--md-sys-color-on-background);\n      }\n\n      input:focus {\n        outline: none;\n      }\n    `\n  ]\n\n  @state() private _showDropdown: boolean = false\n  @state() private _resolvedOptions: SelectOptionObject[] = []\n\n  private _dropdownEl: HTMLDivElement | null = null\n\n  get inlineEditable() {\n    return true\n  }\n\n  get editorTemplate() {\n    var rowOptionField = this.record[this.column.record.rowOptionField || '']\n    var { options = [] } = rowOptionField ? rowOptionField : this.column.record\n\n    if (typeof options == 'function') {\n      options = options.call(null, this.value, this.column, this.record, this.rowIndex, this.field)\n\n      if (options instanceof Promise) {\n        return html`${until(\n          options.then(opts => {\n            this._resolvedOptions = toOptionObjects((opts || []) as SelectOption[])\n            return this._buildTemplate()\n          })\n        )}`\n      } else {\n        this._resolvedOptions = toOptionObjects((options || []) as SelectOption[])\n        return this._buildTemplate()\n      }\n    } else {\n      this._resolvedOptions = toOptionObjects((options || []) as SelectOption[])\n      return this._buildTemplate()\n    }\n  }\n\n  private _buildTemplate() {\n    return html`<input\n      type=\"text\"\n      .value=${this.value == null ? '' : this.value}\n      @focus=${this._onInputFocus}\n      @input=${this._onInputChange}\n    />`\n  }\n\n  private _onInputFocus() {\n    if (this._resolvedOptions.length > 0) {\n      this._showFloatingDropdown()\n    }\n  }\n\n  private _onInputChange(e: Event) {\n    const value = (e.target as HTMLInputElement).value\n    this._dirtyValue = this.formatFromEditor(value)\n  }\n\n  private _showFloatingDropdown() {\n    this._removeFloatingDropdown()\n\n    const rect = this.getBoundingClientRect()\n\n    const dropdown = document.createElement('div')\n    dropdown.style.cssText = `\n      position: fixed;\n      top: ${rect.bottom}px;\n      left: ${rect.left}px;\n      width: ${rect.width * 2}px;\n      background: #fff;\n      border: 1px solid #ccc;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.2);\n      z-index: 99999;\n      max-height: 200px;\n      overflow-y: auto;\n      border-radius: 0 0 4px 4px;\n    `\n\n    this._resolvedOptions.forEach(opt => {\n      const item = document.createElement('div')\n      item.textContent = String(opt.display || opt.value)\n      item.style.cssText = `\n        padding: 8px 12px;\n        cursor: pointer;\n        font-size: 13px;\n        border-bottom: 1px solid #eee;\n      `\n      item.addEventListener('mouseenter', () => {\n        item.style.backgroundColor = '#e3f2fd'\n      })\n      item.addEventListener('mouseleave', () => {\n        item.style.backgroundColor = '#fff'\n      })\n      item.addEventListener('pointerdown', (e: Event) => {\n        e.preventDefault()\n        e.stopPropagation()\n        this._selectOption(opt)\n      })\n      dropdown.appendChild(item)\n    })\n\n    document.body.appendChild(dropdown)\n    this._dropdownEl = dropdown\n  }\n\n  private _selectOption(opt: SelectOptionObject) {\n    this._removeFloatingDropdown()\n\n    const newValue = this.formatFromEditor(opt.value)\n    const { name = '' } = this.column\n    const currentValue = this.record[name] || ''\n\n    // input 값 갱신\n    const input = this.renderRoot.querySelector('input') as HTMLInputElement\n    if (input) {\n      input.value = String(opt.value)\n    }\n\n    // field-change 직접 dispatch\n    this._dirtyValue = newValue\n    this.dispatchEvent(\n      new CustomEvent('field-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          before: currentValue,\n          after: newValue,\n          column: this.column,\n          record: this.record,\n          row: this.row\n        }\n      })\n    )\n  }\n\n  private _removeFloatingDropdown() {\n    if (this._dropdownEl) {\n      this._dropdownEl.remove()\n      this._dropdownEl = null\n    }\n  }\n\n  override _onfocusout() {\n    setTimeout(() => {\n      this._removeFloatingDropdown()\n      super._onfocusout()\n    }, 150)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this._removeFloatingDropdown()\n  }\n}\n"]}

package/dist/src/editors/registry.js

@@ -20,6 +20,7 @@ import { OxGristEditorVarname } from './ox-grist-editor-varname.js';
 import { OxGristEditorJson5 } from './ox-grist-editor-json5.js';
 import { OxGristEditorTimezone } from './ox-grist-editor-timezone.js';
 import { OxGristEditorSecret } from './ox-grist-editor-secret.js';
+import { OxGristEditorTextSelect } from './ox-grist-editor-text-select.js';
 var EDITORS = {
     string: OxGristEditorText,
     text: OxGristEditorText,
@@ -48,7 +49,8 @@ var EDITORS = {
     varname: OxGristEditorVarname,
     json5: OxGristEditorJson5,
     timezone: OxGristEditorTimezone,
-    secret: OxGristEditorSecret
+    secret: OxGristEditorSecret,
+    'text-select': OxGristEditorTextSelect
 };
 export function registerEditor(type, editor) {
     EDITORS[type] = editor;

package/dist/src/editors/registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../src/editors/registry.ts"],"names":[],"mappings":"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","sourcesContent":["import { DataGridField } from '../data-grid/data-grid-field.js'\nimport { ColumnConfig, FieldEditor, GristRecord } from '../types.js'\nimport { OxGristEditor } from './ox-grist-editor.js'\nimport { OxGristEditorCheckbox } from './ox-grist-editor-checkbox.js'\nimport { OxGristEditorColor } from './ox-grist-editor-color.js'\nimport { OxGristEditorDate } from './ox-grist-editor-date.js'\nimport { OxGristEditorDateTime } from './ox-grist-editor-datetime.js'\nimport { OxGristEditorEmail } from './ox-grist-editor-email.js'\nimport { OxGristEditorFile } from './ox-grist-editor-file.js'\nimport { OxGristEditorImage } from './ox-grist-editor-image.js'\nimport { OxGristEditorMonth } from './ox-grist-editor-month.js'\nimport { OxGristEditorMultipleSelect } from './ox-grist-editor-multiple-select.js'\nimport { OxGristEditorNumber } from './ox-grist-editor-number.js'\nimport { OxGristEditorPassword } from './ox-grist-editor-password.js'\nimport { OxGristEditorSelect } from './ox-grist-editor-select.js'\nimport { OxGristEditorTel } from './ox-grist-editor-tel.js'\nimport { OxGristEditorText } from './ox-grist-editor-text.js'\nimport { OxGristEditorTextarea } from './ox-grist-editor-textarea.js'\nimport { OxGristEditorTime } from './ox-grist-editor-time.js'\nimport { OxGristEditorTree } from './ox-grist-editor-tree.js'\nimport { OxGristEditorWeek } from './ox-grist-editor-week.js'\nimport { OxGristEditorVarname } from './ox-grist-editor-varname.js'\nimport { OxGristEditorJson5 } from './ox-grist-editor-json5.js'\nimport { OxGristEditorTimezone } from './ox-grist-editor-timezone.js'\nimport { OxGristEditorSecret } from './ox-grist-editor-secret.js'\n\nvar EDITORS: { [name: string]: { new (): OxGristEditor } } = {\n  string: OxGristEditorText,\n  text: OxGristEditorText,\n  textarea: OxGristEditorTextarea,\n  email: OxGristEditorEmail,\n  tel: OxGristEditorTel,\n  password: OxGristEditorPassword,\n  integer: OxGristEditorNumber,\n  float: OxGristEditorNumber,\n  number: OxGristEditorNumber,\n  select: OxGristEditorSelect,\n  boolean: OxGristEditorCheckbox,\n  checkbox: OxGristEditorCheckbox,\n  month: OxGristEditorMonth,\n  week: OxGristEditorWeek,\n  date: OxGristEditorDate,\n  time: OxGristEditorTime,\n  datetime: OxGristEditorDateTime,\n  color: OxGristEditorColor,\n  progress: OxGristEditorNumber,\n  link: OxGristEditorText,\n  image: OxGristEditorImage,\n  file: OxGristEditorFile,\n  'string[]': OxGristEditorMultipleSelect,\n  tree: OxGristEditorTree,\n  varname: OxGristEditorVarname,\n  json5: OxGristEditorJson5,\n  timezone: OxGristEditorTimezone,\n  secret: OxGristEditorSecret\n}\n\nexport function registerEditor(type: string, editor: { new (): OxGristEditor }) {\n  EDITORS[type] = editor\n}\n\nexport function unregisterEditor(type: string) {\n  delete EDITORS[type]\n}\n\nexport function getEditors(): { [name: string]: { new (): OxGristEditor } } {\n  return { ...EDITORS }\n}\n\nexport function getEditor(type: string): FieldEditor {\n  if (typeof type == 'function') {\n    return type\n  }\n\n  return function (value: any, column: ColumnConfig, record: GristRecord, rowIndex: number, field: DataGridField) {\n    var clazz = EDITORS[type || 'text'] || OxGristEditorText\n\n    var element = new clazz()\n\n    element.value = value\n    element.record = record\n    element.column = column\n    element.row = rowIndex\n    element.field = field\n\n    return element\n  }\n}\n"]}
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../src/editors/registry.ts"],"names":[],"mappings":"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","sourcesContent":["import { DataGridField } from '../data-grid/data-grid-field.js'\nimport { ColumnConfig, FieldEditor, GristRecord } from '../types.js'\nimport { OxGristEditor } from './ox-grist-editor.js'\nimport { OxGristEditorCheckbox } from './ox-grist-editor-checkbox.js'\nimport { OxGristEditorColor } from './ox-grist-editor-color.js'\nimport { OxGristEditorDate } from './ox-grist-editor-date.js'\nimport { OxGristEditorDateTime } from './ox-grist-editor-datetime.js'\nimport { OxGristEditorEmail } from './ox-grist-editor-email.js'\nimport { OxGristEditorFile } from './ox-grist-editor-file.js'\nimport { OxGristEditorImage } from './ox-grist-editor-image.js'\nimport { OxGristEditorMonth } from './ox-grist-editor-month.js'\nimport { OxGristEditorMultipleSelect } from './ox-grist-editor-multiple-select.js'\nimport { OxGristEditorNumber } from './ox-grist-editor-number.js'\nimport { OxGristEditorPassword } from './ox-grist-editor-password.js'\nimport { OxGristEditorSelect } from './ox-grist-editor-select.js'\nimport { OxGristEditorTel } from './ox-grist-editor-tel.js'\nimport { OxGristEditorText } from './ox-grist-editor-text.js'\nimport { OxGristEditorTextarea } from './ox-grist-editor-textarea.js'\nimport { OxGristEditorTime } from './ox-grist-editor-time.js'\nimport { OxGristEditorTree } from './ox-grist-editor-tree.js'\nimport { OxGristEditorWeek } from './ox-grist-editor-week.js'\nimport { OxGristEditorVarname } from './ox-grist-editor-varname.js'\nimport { OxGristEditorJson5 } from './ox-grist-editor-json5.js'\nimport { OxGristEditorTimezone } from './ox-grist-editor-timezone.js'\nimport { OxGristEditorSecret } from './ox-grist-editor-secret.js'\nimport { OxGristEditorTextSelect } from './ox-grist-editor-text-select.js'\n\nvar EDITORS: { [name: string]: { new (): OxGristEditor } } = {\n  string: OxGristEditorText,\n  text: OxGristEditorText,\n  textarea: OxGristEditorTextarea,\n  email: OxGristEditorEmail,\n  tel: OxGristEditorTel,\n  password: OxGristEditorPassword,\n  integer: OxGristEditorNumber,\n  float: OxGristEditorNumber,\n  number: OxGristEditorNumber,\n  select: OxGristEditorSelect,\n  boolean: OxGristEditorCheckbox,\n  checkbox: OxGristEditorCheckbox,\n  month: OxGristEditorMonth,\n  week: OxGristEditorWeek,\n  date: OxGristEditorDate,\n  time: OxGristEditorTime,\n  datetime: OxGristEditorDateTime,\n  color: OxGristEditorColor,\n  progress: OxGristEditorNumber,\n  link: OxGristEditorText,\n  image: OxGristEditorImage,\n  file: OxGristEditorFile,\n  'string[]': OxGristEditorMultipleSelect,\n  tree: OxGristEditorTree,\n  varname: OxGristEditorVarname,\n  json5: OxGristEditorJson5,\n  timezone: OxGristEditorTimezone,\n  secret: OxGristEditorSecret,\n  'text-select': OxGristEditorTextSelect\n}\n\nexport function registerEditor(type: string, editor: { new (): OxGristEditor }) {\n  EDITORS[type] = editor\n}\n\nexport function unregisterEditor(type: string) {\n  delete EDITORS[type]\n}\n\nexport function getEditors(): { [name: string]: { new (): OxGristEditor } } {\n  return { ...EDITORS }\n}\n\nexport function getEditor(type: string): FieldEditor {\n  if (typeof type == 'function') {\n    return type\n  }\n\n  return function (value: any, column: ColumnConfig, record: GristRecord, rowIndex: number, field: DataGridField) {\n    var clazz = EDITORS[type || 'text'] || OxGristEditorText\n\n    var element = new clazz()\n\n    element.value = value\n    element.record = record\n    element.column = column\n    element.row = rowIndex\n    element.field = field\n\n    return element\n  }\n}\n"]}

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

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

package/dist/src/renderers/ox-grist-renderer-text-select.js

@@ -0,0 +1,6 @@
+import { html } from 'lit';
+export const OxGristRendererTextSelect = (value, column, record, rowIndex, field) => {
+    var text = value == null ? '' : value;
+    return html `<span data-reactive-tooltip>${text}</span>`;
+};
+//# sourceMappingURL=ox-grist-renderer-text-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-renderer-text-select.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-text-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAI1B,MAAM,CAAC,MAAM,yBAAyB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IACjG,IAAI,IAAI,GAAG,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAA;IACrC,OAAO,IAAI,CAAA,+BAA+B,IAAI,SAAS,CAAA;AACzD,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\n\nimport { FieldRenderer } from '../types.js'\n\nexport const OxGristRendererTextSelect: FieldRenderer = (value, column, record, rowIndex, field) => {\n  var text = value == null ? '' : value\n  return html`<span data-reactive-tooltip>${text}</span>`\n}\n"]}

package/dist/src/renderers/registry.js

@@ -12,6 +12,7 @@ import { OxGristRendererSelect } from './ox-grist-renderer-select.js';
 import { OxGristRendererText } from './ox-grist-renderer-text.js';
 import { OxGristRendererTextarea } from './ox-grist-renderer-textarea.js';
 import { OxGristRendererTree } from './ox-grist-renderer-tree.js';
+import { OxGristRendererTextSelect } from './ox-grist-renderer-text-select.js';
 function isClass(func) {
     return typeof func === 'function' && /^class\s/.test(Function.prototype.toString.call(func));
 }
@@ -40,7 +41,8 @@ var RENDERERS = {
     image: OxGristRendererImage,
     file: OxGristRendererFile,
     json5: OxGristRendererJson5,
-    tree: OxGristRendererTree
+    tree: OxGristRendererTree,
+    'text-select': OxGristRendererTextSelect
 };
 export function registerRenderer(type, renderer) {
     RENDERERS[type] = renderer;

package/dist/src/renderers/registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../src/renderers/registry.ts"],"names":[],"mappings":"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","sourcesContent":["import { DataCardField } from '../data-card/data-card-field.js'\nimport { DataCardGutter } from '../data-card/data-card-gutter.js'\nimport { RecordCard } from '../data-card/record-card.js'\nimport { DataGridField } from '../data-grid/data-grid-field.js'\nimport { DataListField } from '../data-list/data-list-field.js'\nimport { DataListGutter } from '../data-list/data-list-gutter.js'\nimport { RecordPartial } from '../data-list/record-partial.js'\nimport { DataReportField } from '../data-report/data-report-field.js'\nimport { ColumnConfig, FieldRenderer, GristRecord } from '../types.js'\nimport { OxGristRendererBoolean } from './ox-grist-renderer-boolean.js'\nimport { OxGristRendererColor } from './ox-grist-renderer-color.js'\nimport { OxGristRendererDate } from './ox-grist-renderer-date.js'\nimport { OxGristRendererFile } from './ox-grist-renderer-file.js'\nimport { OxGristRendererImage } from './ox-grist-renderer-image.js'\nimport { OxGristRendererJson5 } from './ox-grist-renderer-json5.js'\nimport { OxGristRendererLink } from './ox-grist-renderer-link.js'\nimport { OxGristRendererPassword } from './ox-grist-renderer-password.js'\nimport { OxGristRendererProgress } from './ox-grist-renderer-progress.js'\nimport { OxGristRendererSecret } from './ox-grist-renderer-secret.js'\nimport { OxGristRendererSelect } from './ox-grist-renderer-select.js'\nimport { OxGristRendererText } from './ox-grist-renderer-text.js'\nimport { OxGristRendererTextarea } from './ox-grist-renderer-textarea.js'\nimport { OxGristRendererTree } from './ox-grist-renderer-tree.js'\nimport { OxGristRenderer } from './ox-grist-renderer.js'\n\ninterface OxGristRendererConstructor {\n  new (): OxGristRenderer\n}\n\nfunction isClass(func: Function) {\n  return typeof func === 'function' && /^class\\s/.test(Function.prototype.toString.call(func))\n}\n\nvar RENDERERS: {\n  [name: string]: FieldRenderer | OxGristRendererConstructor\n} = {\n  string: OxGristRendererText,\n  text: OxGristRendererText,\n  textarea: OxGristRendererTextarea,\n  email: OxGristRendererText,\n  tel: OxGristRendererText,\n  password: OxGristRendererPassword,\n  secret: OxGristRendererSecret,\n  integer: OxGristRendererText,\n  float: OxGristRendererText,\n  number: OxGristRendererText,\n  select: OxGristRendererSelect,\n  boolean: OxGristRendererBoolean,\n  checkbox: OxGristRendererBoolean,\n  month: OxGristRendererText,\n  week: OxGristRendererText,\n  date: OxGristRendererDate,\n  time: OxGristRendererDate,\n  datetime: OxGristRendererDate,\n  color: OxGristRendererColor,\n  progress: OxGristRendererProgress,\n  link: OxGristRendererLink,\n  image: OxGristRendererImage,\n  file: OxGristRendererFile,\n  json5: OxGristRendererJson5,\n  tree: OxGristRendererTree\n}\n\nexport function registerRenderer(type: string, renderer: FieldRenderer) {\n  RENDERERS[type] = renderer\n}\n\nexport function unregisterRenderer(type: string): void {\n  delete RENDERERS[type]\n}\n\nexport function getRenderers(): { [name: string]: FieldRenderer | OxGristRendererConstructor } {\n  return { ...RENDERERS }\n}\n\nexport function getRenderer(type: string | FieldRenderer): FieldRenderer {\n  if (typeof type === 'function') {\n    return type\n  }\n\n  var renderer: FieldRenderer | OxGristRendererConstructor = RENDERERS[type || 'text'] || OxGristRendererText\n\n  if (!isClass(renderer)) {\n    return renderer as FieldRenderer\n  }\n\n  return function (\n    value: any,\n    column: ColumnConfig,\n    record: GristRecord,\n    rowIndex: number,\n    field:\n      | DataGridField\n      | RecordCard\n      | DataCardGutter\n      | DataCardField\n      | DataListGutter\n      | DataListField\n      | RecordPartial\n      | DataReportField\n      | Element\n  ) {\n    var element: OxGristRenderer = new (renderer as OxGristRendererConstructor)() as any\n\n    element.value = value\n    element.record = record\n    element.column = column\n    element.row = rowIndex\n    element.field = field as DataGridField\n\n    return element as OxGristRenderer\n  }\n}\n"]}
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../src/renderers/registry.ts"],"names":[],"mappings":"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","sourcesContent":["import { DataCardField } from '../data-card/data-card-field.js'\nimport { DataCardGutter } from '../data-card/data-card-gutter.js'\nimport { RecordCard } from '../data-card/record-card.js'\nimport { DataGridField } from '../data-grid/data-grid-field.js'\nimport { DataListField } from '../data-list/data-list-field.js'\nimport { DataListGutter } from '../data-list/data-list-gutter.js'\nimport { RecordPartial } from '../data-list/record-partial.js'\nimport { DataReportField } from '../data-report/data-report-field.js'\nimport { ColumnConfig, FieldRenderer, GristRecord } from '../types.js'\nimport { OxGristRendererBoolean } from './ox-grist-renderer-boolean.js'\nimport { OxGristRendererColor } from './ox-grist-renderer-color.js'\nimport { OxGristRendererDate } from './ox-grist-renderer-date.js'\nimport { OxGristRendererFile } from './ox-grist-renderer-file.js'\nimport { OxGristRendererImage } from './ox-grist-renderer-image.js'\nimport { OxGristRendererJson5 } from './ox-grist-renderer-json5.js'\nimport { OxGristRendererLink } from './ox-grist-renderer-link.js'\nimport { OxGristRendererPassword } from './ox-grist-renderer-password.js'\nimport { OxGristRendererProgress } from './ox-grist-renderer-progress.js'\nimport { OxGristRendererSecret } from './ox-grist-renderer-secret.js'\nimport { OxGristRendererSelect } from './ox-grist-renderer-select.js'\nimport { OxGristRendererText } from './ox-grist-renderer-text.js'\nimport { OxGristRendererTextarea } from './ox-grist-renderer-textarea.js'\nimport { OxGristRendererTree } from './ox-grist-renderer-tree.js'\nimport { OxGristRenderer } from './ox-grist-renderer.js'\nimport { OxGristRendererTextSelect } from './ox-grist-renderer-text-select.js'\n\ninterface OxGristRendererConstructor {\n  new (): OxGristRenderer\n}\n\nfunction isClass(func: Function) {\n  return typeof func === 'function' && /^class\\s/.test(Function.prototype.toString.call(func))\n}\n\nvar RENDERERS: {\n  [name: string]: FieldRenderer | OxGristRendererConstructor\n} = {\n  string: OxGristRendererText,\n  text: OxGristRendererText,\n  textarea: OxGristRendererTextarea,\n  email: OxGristRendererText,\n  tel: OxGristRendererText,\n  password: OxGristRendererPassword,\n  secret: OxGristRendererSecret,\n  integer: OxGristRendererText,\n  float: OxGristRendererText,\n  number: OxGristRendererText,\n  select: OxGristRendererSelect,\n  boolean: OxGristRendererBoolean,\n  checkbox: OxGristRendererBoolean,\n  month: OxGristRendererText,\n  week: OxGristRendererText,\n  date: OxGristRendererDate,\n  time: OxGristRendererDate,\n  datetime: OxGristRendererDate,\n  color: OxGristRendererColor,\n  progress: OxGristRendererProgress,\n  link: OxGristRendererLink,\n  image: OxGristRendererImage,\n  file: OxGristRendererFile,\n  json5: OxGristRendererJson5,\n  tree: OxGristRendererTree,\n  'text-select': OxGristRendererTextSelect\n}\n\nexport function registerRenderer(type: string, renderer: FieldRenderer) {\n  RENDERERS[type] = renderer\n}\n\nexport function unregisterRenderer(type: string): void {\n  delete RENDERERS[type]\n}\n\nexport function getRenderers(): { [name: string]: FieldRenderer | OxGristRendererConstructor } {\n  return { ...RENDERERS }\n}\n\nexport function getRenderer(type: string | FieldRenderer): FieldRenderer {\n  if (typeof type === 'function') {\n    return type\n  }\n\n  var renderer: FieldRenderer | OxGristRendererConstructor = RENDERERS[type || 'text'] || OxGristRendererText\n\n  if (!isClass(renderer)) {\n    return renderer as FieldRenderer\n  }\n\n  return function (\n    value: any,\n    column: ColumnConfig,\n    record: GristRecord,\n    rowIndex: number,\n    field:\n      | DataGridField\n      | RecordCard\n      | DataCardGutter\n      | DataCardField\n      | DataListGutter\n      | DataListField\n      | RecordPartial\n      | DataReportField\n      | Element\n  ) {\n    var element: OxGristRenderer = new (renderer as OxGristRendererConstructor)() as any\n\n    element.value = value\n    element.record = record\n    element.column = column\n    element.row = rowIndex\n    element.field = field as DataGridField\n\n    return element as OxGristRenderer\n  }\n}\n"]}