@operato/data-grist 10.8.1 → 10.10.0

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

@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config.js';
+import { columnText } from '../utils/column-text.js';
 import { getDefaultValue } from '@operato/time-calculator';
 const STYLE = css `
   :host {
@@ -41,6 +42,28 @@ const STYLE = css `
     color: var(--md-sys-color-on-background);
   }
 
+  /*
+   * ── 편집기도 칸과 같은 쪽으로 붙는다 (2026-09-05) ──────────────────────────
+   *
+   * 정렬은 host 에 놓인다(firstUpdated 의 this.style.textAlign). 그런데 입력 요소는 그것을
+   * 물려받지 못한다 — 브라우저 기본 스타일시트가 text-align: start 를 **직접 선언**해 두고,
+   * 직접 선언은 상속값을 이긴다.
+   *
+   * [확인함] 2026-09-05 · 검사 명세의 「하한」 칸
+   *   host  text-align: right
+   *   input text-align: start
+   *
+   * 그래서 숫자 칸은 읽을 때 오른쪽 끝에 있다가 고치려고 들어가면 왼쪽으로 튀었고, 값이 없는
+   * 칸에서는 캐럿이 왼쪽 끝에서 깜박였다 — 숫자가 설 자리와 어긋난다.
+   *
+   * inherit 라고 적어 두면 그 선언이 기본 선언을 밀어내고 host 의 값을 그대로 받는다.
+   */
+  :host > input,
+  :host > select,
+  :host > textarea {
+    text-align: inherit;
+  }
+
   :host > input[type='checkbox'] {
     width: initial;
     margin: 0;
@@ -109,14 +132,37 @@ let OxGristEditor = class OxGristEditor extends LitElement {
             currentValue = getDefaultValue(defaultValue, this.record);
         }
         this.value = this._dirtyValue = this.formatForEditor(currentValue);
-        // 입력을 위한 키를 누르면서 편집모드가 될때는 누른 키가 처음에 입력되도록, enter 같은 것을 눌러서 편집모드가 되면 현재 값으로 편집모드 전환
+        // 입력 키로 편집 모드에 들어갈 때는 그 키가 처음에 입력되도록 하고, enter 로 편집 모드가 되면 현재 값을 그대로 둔다
         const valueWith = this.inlineEditable && ((_a = this.field) === null || _a === void 0 ? void 0 : _a.valueWith);
         this.value = this._dirtyValue = valueWith ? this.formatFromEditor(valueWith) : this.formatForEditor(currentValue);
+        this.nameEditor();
         requestAnimationFrame(() => {
             this.focus();
             !valueWith && this.select();
         });
     }
+    /**
+     * 편집기에 이름을 붙인다 — **모든 편집기가 여기 한 곳을 지난다.**
+     *
+     * 칸에 role=gridcell 을 세우면 읽기 상태의 값은 열 머리와 함께 읽힌다. 그런데 편집을 열면 그
+     * 자리에 진짜 입력칸이 생기고, 포커스가 그리로 간다. 그때 보조기술이 읽는 것은 **칸이 아니라
+     * 그 입력칸**이라 열 머리의 이름이 따라오지 않는다 — 「편집 텍스트, 비어 있음」이 전부다.
+     *
+     * 이름은 열 정의 하나에서 가져온다(columnText). 편집기가 열다섯 가지가 넘는데 각자 이름을 적게
+     * 두면 새 편집기를 더할 때마다 빠뜨린다. 그래서 공통 조상인 여기서 한 번 붙인다.
+     *
+     * 부르는 쪽이 이미 이름을 적어 두었으면 건드리지 않는다.
+     */
+    nameEditor() {
+        const editor = this.editor;
+        if (!editor || editor.hasAttribute('aria-label') || editor.hasAttribute('aria-labelledby')) {
+            return;
+        }
+        const name = columnText(this.column);
+        if (name) {
+            editor.setAttribute('aria-label', name);
+        }
+    }
     select() {
         const editor = this.editor;
         if (editor === null || editor === void 0 ? void 0 : editor.select) {
@@ -174,6 +220,20 @@ let OxGristEditor = class OxGristEditor extends LitElement {
     }
 };
 OxGristEditor.styles = [STYLE];
+/**
+ * 이 편집기가 **팝업을 여나.**
+ *
+ * ── 왜 필요한가 (2026-09-05) ────────────────────────────────────────────
+ * 팝업으로 고치는 칸은 글자 칸과 똑같이 생겼다. 열어 보기 전에는 고칠 수 있는지도, 어떻게
+ * 고치는지도 모른다. 사용자의 말 그대로 — 「실제 더블클릭을 하기 전에는 모르는 막막함」.
+ *
+ * 그래서 그런 칸에는 표식을 둔다. 어느 칸이 그런지는 **편집기가 스스로 밝힌다** — 칸이
+ * 목록을 두고 판단하면 팝업 편집기가 새로 생길 때마다 그 목록을 고쳐야 하고, 그러면
+ * 반드시 빠뜨린다.
+ *
+ * 팝업을 여는 편집기가 이 값을 참으로 둔다.
+ */
+OxGristEditor.opensPopup = false;
 __decorate([
     property({ type: Object })
 ], OxGristEditor.prototype, "value", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"ox-grist-editor.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config.js'\nimport { DataGridField } from '../data-grid/data-grid-field.js'\nimport { ColumnConfig, GristRecord } from '../types.js'\nimport { getDefaultValue } from '@operato/time-calculator'\n\nconst STYLE = css`\n  :host {\n    display: flex;\n\n    align-items: center;\n\n    width: 100%;\n    height: 100%;\n\n    border: 0;\n    background-color: transparent;\n\n    overflow: hidden;\n    justify-content: var(--data-grid-field-justify-content, flex-start);\n  }\n\n  :host > * {\n    display: flex;\n\n    width: 100%;\n    height: 100%;\n\n    border: 0;\n    background-color: transparent;\n\n    box-sizing: border-box;\n\n    align-items: center;\n  }\n\n  :host > style {\n    display: none;\n  }\n\n  :host > input {\n    color: var(--md-sys-color-on-background);\n  }\n\n  :host > input[type='checkbox'] {\n    width: initial;\n    margin: 0;\n  }\n  *:focus {\n    outline: none;\n  }\n\n  input[type='file'] {\n    opacity: 0%;\n  }\n\n  @media screen and (max-width: 460px) {\n    :host > * {\n      border: initial;\n      background-color: initial;\n    }\n\n    *:focus {\n      outline: none;\n    }\n\n    input,\n    select,\n    textarea {\n      background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n      color: var(--input-field-color, var(--md-sys-color-on-surface));\n      font-size: 16px;\n    }\n  }\n`\n\n@customElement('ox-grist-editor')\nexport class OxGristEditor extends LitElement {\n  static styles = [STYLE]\n\n  @property({ type: Object }) value?: any\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex?: number\n  @property({ type: Object }) field?: DataGridField\n  @property({ type: Number }) row?: number\n\n  protected _dirtyValue?: any\n\n  render() {\n    return this.editorTemplate\n  }\n\n  get editor(): HTMLElement | null {\n    return this.renderRoot.firstElementChild as HTMLElement\n  }\n\n  get inlineEditable() {\n    return false\n  }\n\n  async firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onchange.bind(this))\n    this.renderRoot.addEventListener('focusout', this._onfocusout.bind(this))\n    this.addEventListener('click', this._onclick.bind(this))\n    this.addEventListener('dblclick', this._ondblclick.bind(this))\n    this.addEventListener('keydown', this._onkeydown.bind(this))\n\n    /* editor mode 인 경우의 마우스 움직임이, grist-body의 이벤트 처리에 의해서 에디터를 리셋시킬 수 있으므로, 이벤트 전파를 막는다. */\n    this.addEventListener('pointerdown', (e: Event) => e.stopPropagation())\n    this.addEventListener('pointermove', (e: Event) => e.stopPropagation())\n    this.addEventListener('pointerup', (e: Event) => e.stopPropagation())\n\n    const { name = '' } = this.column\n    const { align, defaultValue } = this.column.record\n\n    if (align) {\n      this.style.textAlign = align\n      this.style.textAlignLast = align /* for select */\n    }\n\n    var currentValue = this.record[name]\n\n    if (typeof currentValue == 'undefined' && defaultValue) {\n      currentValue = getDefaultValue(defaultValue, this.record)\n    }\n\n    this.value = this._dirtyValue = this.formatForEditor(currentValue)\n\n    // 입력을 위한 키를 누르면서 편집모드가 될때는 누른 키가 처음에 입력되도록, enter 같은 것을 눌러서 편집모드가 되면 현재 값으로 편집모드 전환\n    const valueWith = this.inlineEditable && this.field?.valueWith\n    this.value = this._dirtyValue = valueWith ? this.formatFromEditor(valueWith) : this.formatForEditor(currentValue)\n\n    requestAnimationFrame(() => {\n      this.focus()\n      !valueWith && this.select()\n    })\n  }\n\n  select() {\n    const editor = this.editor\n    if ((editor as HTMLInputElement)?.select) {\n      return (editor as HTMLInputElement).select()\n    }\n  }\n\n  focus() {\n    const editor = this.editor\n    if (editor) {\n      editor.focus()\n    }\n  }\n\n  formatForEditor(value: any): any {\n    return value == null ? '' : value\n  }\n\n  formatFromEditor(value: any): any {\n    return value\n  }\n\n  _onfocusout() {\n    // paste시 field-change는 Body에서 하므로 X\n    if (this.field?.isWorking === true) return\n\n    const { name = '' } = this.column\n    var currentValue = this.record[name] || ''\n\n    if (this._dirtyValue !== currentValue) {\n      this.dispatchEvent(\n        new CustomEvent('field-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            before: currentValue,\n            after: this._dirtyValue,\n            column: this.column,\n            record: this.record,\n            row: this.row\n          }\n        })\n      )\n    }\n  }\n\n  _onchange(e: Event): void {\n    e.stopPropagation()\n\n    const value = (e.target as any)?.value\n\n    this._dirtyValue = this.formatFromEditor(value)\n  }\n\n  _onkeydown(e: Event): void {}\n\n  _onclick(e: Event): void {\n    e.stopPropagation()\n  }\n\n  _ondblclick(e: Event): void {\n    e.stopPropagation()\n  }\n\n  get editorTemplate() {\n    return html``\n  }\n}\n"]}
+{"version":3,"file":"ox-grist-editor.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config.js'\nimport { columnText } from '../utils/column-text.js'\nimport { DataGridField } from '../data-grid/data-grid-field.js'\nimport { ColumnConfig, GristRecord } from '../types.js'\nimport { getDefaultValue } from '@operato/time-calculator'\n\nconst STYLE = css`\n  :host {\n    display: flex;\n\n    align-items: center;\n\n    width: 100%;\n    height: 100%;\n\n    border: 0;\n    background-color: transparent;\n\n    overflow: hidden;\n    justify-content: var(--data-grid-field-justify-content, flex-start);\n  }\n\n  :host > * {\n    display: flex;\n\n    width: 100%;\n    height: 100%;\n\n    border: 0;\n    background-color: transparent;\n\n    box-sizing: border-box;\n\n    align-items: center;\n  }\n\n  :host > style {\n    display: none;\n  }\n\n  :host > input {\n    color: var(--md-sys-color-on-background);\n  }\n\n  /*\n   * ── 편집기도 칸과 같은 쪽으로 붙는다 (2026-09-05) ──────────────────────────\n   *\n   * 정렬은 host 에 놓인다(firstUpdated 의 this.style.textAlign). 그런데 입력 요소는 그것을\n   * 물려받지 못한다 — 브라우저 기본 스타일시트가 text-align: start 를 **직접 선언**해 두고,\n   * 직접 선언은 상속값을 이긴다.\n   *\n   * [확인함] 2026-09-05 · 검사 명세의 「하한」 칸\n   *   host  text-align: right\n   *   input text-align: start\n   *\n   * 그래서 숫자 칸은 읽을 때 오른쪽 끝에 있다가 고치려고 들어가면 왼쪽으로 튀었고, 값이 없는\n   * 칸에서는 캐럿이 왼쪽 끝에서 깜박였다 — 숫자가 설 자리와 어긋난다.\n   *\n   * inherit 라고 적어 두면 그 선언이 기본 선언을 밀어내고 host 의 값을 그대로 받는다.\n   */\n  :host > input,\n  :host > select,\n  :host > textarea {\n    text-align: inherit;\n  }\n\n  :host > input[type='checkbox'] {\n    width: initial;\n    margin: 0;\n  }\n  *:focus {\n    outline: none;\n  }\n\n  input[type='file'] {\n    opacity: 0%;\n  }\n\n  @media screen and (max-width: 460px) {\n    :host > * {\n      border: initial;\n      background-color: initial;\n    }\n\n    *:focus {\n      outline: none;\n    }\n\n    input,\n    select,\n    textarea {\n      background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n      color: var(--input-field-color, var(--md-sys-color-on-surface));\n      font-size: 16px;\n    }\n  }\n`\n\n@customElement('ox-grist-editor')\nexport class OxGristEditor extends LitElement {\n  static styles = [STYLE]\n\n  /**\n   * 이 편집기가 **팝업을 여나.**\n   *\n   * ── 왜 필요한가 (2026-09-05) ────────────────────────────────────────────\n   * 팝업으로 고치는 칸은 글자 칸과 똑같이 생겼다. 열어 보기 전에는 고칠 수 있는지도, 어떻게\n   * 고치는지도 모른다. 사용자의 말 그대로 — 「실제 더블클릭을 하기 전에는 모르는 막막함」.\n   *\n   * 그래서 그런 칸에는 표식을 둔다. 어느 칸이 그런지는 **편집기가 스스로 밝힌다** — 칸이\n   * 목록을 두고 판단하면 팝업 편집기가 새로 생길 때마다 그 목록을 고쳐야 하고, 그러면\n   * 반드시 빠뜨린다.\n   *\n   * 팝업을 여는 편집기가 이 값을 참으로 둔다.\n   */\n  static opensPopup: boolean = false\n\n  @property({ type: Object }) value?: any\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex?: number\n  @property({ type: Object }) field?: DataGridField\n  @property({ type: Number }) row?: number\n\n  protected _dirtyValue?: any\n\n  render() {\n    return this.editorTemplate\n  }\n\n  get editor(): HTMLElement | null {\n    return this.renderRoot.firstElementChild as HTMLElement\n  }\n\n  get inlineEditable() {\n    return false\n  }\n\n  async firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onchange.bind(this))\n    this.renderRoot.addEventListener('focusout', this._onfocusout.bind(this))\n    this.addEventListener('click', this._onclick.bind(this))\n    this.addEventListener('dblclick', this._ondblclick.bind(this))\n    this.addEventListener('keydown', this._onkeydown.bind(this))\n\n    /* editor mode 인 경우의 마우스 움직임이, grist-body의 이벤트 처리에 의해서 에디터를 리셋시킬 수 있으므로, 이벤트 전파를 막는다. */\n    this.addEventListener('pointerdown', (e: Event) => e.stopPropagation())\n    this.addEventListener('pointermove', (e: Event) => e.stopPropagation())\n    this.addEventListener('pointerup', (e: Event) => e.stopPropagation())\n\n    const { name = '' } = this.column\n    const { align, defaultValue } = this.column.record\n\n    if (align) {\n      this.style.textAlign = align\n      this.style.textAlignLast = align /* for select */\n    }\n\n    var currentValue = this.record[name]\n\n    if (typeof currentValue == 'undefined' && defaultValue) {\n      currentValue = getDefaultValue(defaultValue, this.record)\n    }\n\n    this.value = this._dirtyValue = this.formatForEditor(currentValue)\n\n    // 입력 키로 편집 모드에 들어갈 때는 그 키가 처음에 입력되도록 하고, enter 로 편집 모드가 되면 현재 값을 그대로 둔다\n    const valueWith = this.inlineEditable && this.field?.valueWith\n    this.value = this._dirtyValue = valueWith ? this.formatFromEditor(valueWith) : this.formatForEditor(currentValue)\n\n    this.nameEditor()\n\n    requestAnimationFrame(() => {\n      this.focus()\n      !valueWith && this.select()\n    })\n  }\n\n  /**\n   * 편집기에 이름을 붙인다 — **모든 편집기가 여기 한 곳을 지난다.**\n   *\n   * 칸에 role=gridcell 을 세우면 읽기 상태의 값은 열 머리와 함께 읽힌다. 그런데 편집을 열면 그\n   * 자리에 진짜 입력칸이 생기고, 포커스가 그리로 간다. 그때 보조기술이 읽는 것은 **칸이 아니라\n   * 그 입력칸**이라 열 머리의 이름이 따라오지 않는다 — 「편집 텍스트, 비어 있음」이 전부다.\n   *\n   * 이름은 열 정의 하나에서 가져온다(columnText). 편집기가 열다섯 가지가 넘는데 각자 이름을 적게\n   * 두면 새 편집기를 더할 때마다 빠뜨린다. 그래서 공통 조상인 여기서 한 번 붙인다.\n   *\n   * 부르는 쪽이 이미 이름을 적어 두었으면 건드리지 않는다.\n   */\n  protected nameEditor() {\n    const editor = this.editor\n\n    if (!editor || editor.hasAttribute('aria-label') || editor.hasAttribute('aria-labelledby')) {\n      return\n    }\n\n    const name = columnText(this.column)\n\n    if (name) {\n      editor.setAttribute('aria-label', name)\n    }\n  }\n\n  select() {\n    const editor = this.editor\n    if ((editor as HTMLInputElement)?.select) {\n      return (editor as HTMLInputElement).select()\n    }\n  }\n\n  focus() {\n    const editor = this.editor\n    if (editor) {\n      editor.focus()\n    }\n  }\n\n  formatForEditor(value: any): any {\n    return value == null ? '' : value\n  }\n\n  formatFromEditor(value: any): any {\n    return value\n  }\n\n  _onfocusout() {\n    // paste시 field-change는 Body에서 하므로 X\n    if (this.field?.isWorking === true) return\n\n    const { name = '' } = this.column\n    var currentValue = this.record[name] || ''\n\n    if (this._dirtyValue !== currentValue) {\n      this.dispatchEvent(\n        new CustomEvent('field-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            before: currentValue,\n            after: this._dirtyValue,\n            column: this.column,\n            record: this.record,\n            row: this.row\n          }\n        })\n      )\n    }\n  }\n\n  _onchange(e: Event): void {\n    e.stopPropagation()\n\n    const value = (e.target as any)?.value\n\n    this._dirtyValue = this.formatFromEditor(value)\n  }\n\n  _onkeydown(e: Event): void {}\n\n  _onclick(e: Event): void {\n    e.stopPropagation()\n  }\n\n  _ondblclick(e: Event): void {\n    e.stopPropagation()\n  }\n\n  get editorTemplate() {\n    return html``\n  }\n}\n"]}

package/dist/src/editors/registry.d.ts

@@ -9,4 +9,14 @@ export declare function getEditors(): {
         new (): OxGristEditor;
     };
 };
+/**
+ * 이 열이 **팝업으로 고쳐지나.**
+ *
+ * 칸이 표식을 붙일지 판단할 때 쓴다. 편집기가 스스로 밝힌 값을 그대로 읽는다 — 칸이 목록을
+ * 들고 있으면 팝업 편집기가 새로 등록될 때마다 그 목록을 고쳐야 하고, 그러면 빠뜨린다.
+ *
+ * 편집기를 함수로 직접 준 열은 판단하지 않는다. 그 함수가 무엇을 여는지 알 길이 없고,
+ * 지어내는 것보다 표식을 안 붙이는 편이 낫다.
+ */
+export declare function editorOpensPopup(type: unknown): boolean;
 export declare function getEditor(type: string): FieldEditor;

package/dist/src/editors/registry.js

@@ -61,6 +61,22 @@ export function unregisterEditor(type) {
 export function getEditors() {
     return { ...EDITORS };
 }
+/**
+ * 이 열이 **팝업으로 고쳐지나.**
+ *
+ * 칸이 표식을 붙일지 판단할 때 쓴다. 편집기가 스스로 밝힌 값을 그대로 읽는다 — 칸이 목록을
+ * 들고 있으면 팝업 편집기가 새로 등록될 때마다 그 목록을 고쳐야 하고, 그러면 빠뜨린다.
+ *
+ * 편집기를 함수로 직접 준 열은 판단하지 않는다. 그 함수가 무엇을 여는지 알 길이 없고,
+ * 지어내는 것보다 표식을 안 붙이는 편이 낫다.
+ */
+export function editorOpensPopup(type) {
+    var _a;
+    if (typeof type !== 'string') {
+        return false;
+    }
+    return !!((_a = EDITORS[type]) === null || _a === void 0 ? void 0 : _a.opensPopup);
+}
 export function getEditor(type) {
     if (typeof type == 'function') {
         return type;

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'\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"]}
+{"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\n/**\n * 이 열이 **팝업으로 고쳐지나.**\n *\n * 칸이 표식을 붙일지 판단할 때 쓴다. 편집기가 스스로 밝힌 값을 그대로 읽는다 — 칸이 목록을\n * 들고 있으면 팝업 편집기가 새로 등록될 때마다 그 목록을 고쳐야 하고, 그러면 빠뜨린다.\n *\n * 편집기를 함수로 직접 준 열은 판단하지 않는다. 그 함수가 무엇을 여는지 알 길이 없고,\n * 지어내는 것보다 표식을 안 붙이는 편이 낫다.\n */\nexport function editorOpensPopup(type: unknown): boolean {\n  if (typeof type !== 'string') {\n    return false\n  }\n\n  return !!(EDITORS[type] as any)?.opensPopup\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/filters/filter-input.js

@@ -1,4 +1,15 @@
 import { html } from 'lit-html';
+import { i18next } from '@operato/i18n';
+import { columnText } from '../utils/column-text.js';
+/*
+ * 머리줄의 filter 입력칸에 이름을 붙인다.
+ *
+ * 이 상자들은 머리줄 이름 **바로 아래**에 놓여서, 눈으로 보는 사람에게는 어느 column 을 좁히는지가
+ * 자리만으로 읽힌다. 그런데 그 관계는 그림일 뿐이라 화면을 못 보는 사람에게는 전달되지 않는다 —
+ * 스크린 리더에게는 이름 없는 입력칸이 column 수만큼 늘어선 것이다.
+ *
+ * 이름은 columnText() 한 곳에서 가져온다. 여기서 다시 적어 두면 header 를 고쳤을 때 옛 이름이 남는다.
+ */
 export const FilterInput = (column, value, owner) => {
     const filter = column.filter;
     const type = (filter === null || filter === void 0 ? void 0 : filter.type) || column.type;
@@ -6,6 +17,10 @@ export const FilterInput = (column, value, owner) => {
     <input
       type=${type}
       name=${column.name}
+      aria-label=${i18next.t('text.grid-filter-of', {
+        name: columnText(column),
+        defaultValue: columnText(column)
+    })}
       .value=${value == null ? '' : value}
       @change=${(e) => {
         const input = e.target;

package/dist/src/filters/filter-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-input.js","sourceRoot":"","sources":["../../../src/filters/filter-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IACxE,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,IAAI,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,MAAM,CAAC,IAAI,CAAA;IAExC,OAAO,IAAI,CAAA;;aAEA,IAAW;aACX,MAAM,CAAC,IAAI;eACT,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;gBACzB,CAAC,CAAc,EAAE,EAAE;QAC3B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ;gBACzB,KAAK,EAAE,KAAK,CAAC,KAAK;aACnB;SACF,CAAC,CACH,CAAA;IACH,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types.js'\n\nexport const FilterInput: FilterSelectRenderer = (column, value, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const type = filter?.type || column.type\n\n  return html`\n    <input\n      type=${type as any}\n      name=${column.name}\n      .value=${value == null ? '' : value}\n      @change=${(e: CustomEvent) => {\n        const input = e.target as HTMLInputElement\n        input.dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name: column.name,\n              operator: filter.operator,\n              value: input.value\n            }\n          })\n        )\n      }}\n    />\n  `\n}\n"]}
+{"version":3,"file":"filter-input.js","sourceRoot":"","sources":["../../../src/filters/filter-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAEpD;;;;;;;;GAQG;AAEH,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IACxE,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,IAAI,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,MAAM,CAAC,IAAI,CAAA;IAExC,OAAO,IAAI,CAAA;;aAEA,IAAW;aACX,MAAM,CAAC,IAAI;mBACL,OAAO,CAAC,CAAC,CAAC,qBAAqB,EAAE;QAC5C,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC;QACxB,YAAY,EAAE,UAAU,CAAC,MAAM,CAAC;KACjC,CAAC;eACO,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;gBACzB,CAAC,CAAc,EAAE,EAAE;QAC3B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ;gBACzB,KAAK,EAAE,KAAK,CAAC,KAAK;aACnB;SACF,CAAC,CACH,CAAA;IACH,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { i18next } from '@operato/i18n'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types.js'\nimport { columnText } from '../utils/column-text.js'\n\n/*\n * 머리줄의 filter 입력칸에 이름을 붙인다.\n *\n * 이 상자들은 머리줄 이름 **바로 아래**에 놓여서, 눈으로 보는 사람에게는 어느 column 을 좁히는지가\n * 자리만으로 읽힌다. 그런데 그 관계는 그림일 뿐이라 화면을 못 보는 사람에게는 전달되지 않는다 —\n * 스크린 리더에게는 이름 없는 입력칸이 column 수만큼 늘어선 것이다.\n *\n * 이름은 columnText() 한 곳에서 가져온다. 여기서 다시 적어 두면 header 를 고쳤을 때 옛 이름이 남는다.\n */\n\nexport const FilterInput: FilterSelectRenderer = (column, value, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const type = filter?.type || column.type\n\n  return html`\n    <input\n      type=${type as any}\n      name=${column.name}\n      aria-label=${i18next.t('text.grid-filter-of', {\n        name: columnText(column),\n        defaultValue: columnText(column)\n      })}\n      .value=${value == null ? '' : value}\n      @change=${(e: CustomEvent) => {\n        const input = e.target as HTMLInputElement\n        input.dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name: column.name,\n              operator: filter.operator,\n              value: input.value\n            }\n          })\n        )\n      }}\n    />\n  `\n}\n"]}

package/dist/src/filters/filter-range-date.js

@@ -1,4 +1,11 @@
 import { html } from 'lit-html';
+import { i18next } from '@operato/i18n';
+import { columnText } from '../utils/column-text.js';
+/*
+ * 범위를 좁히는 입력칸 둘 — 시작과 끝. 이름이 없으면 스크린 리더가 둘을 구별하지 못한다
+ * (같은 자리에 같은 모양의 상자 둘이라 「입력칸, 입력칸」으로만 읽힌다).
+ * 눈으로는 가운데의 ~ 가 그 뜻을 말해 주지만, 그것은 글자로 그려 둔 것일 뿐 관계가 아니다.
+ */
 function formatDate(type, date) {
     var year = date.getFullYear();
     var month = ('0' + (date.getMonth() + 1)).slice(-2);
@@ -23,6 +30,7 @@ export const FilterRangeDate = (column, value, owner) => {
       type=${type}
       .value=${from}
       from
+      aria-label=${i18next.t('text.grid-filter-from', { name: columnText(column), defaultValue: columnText(column) })}
       @keyup=${(e) => {
         if (e.key !== 'Enter') {
             return;
@@ -45,6 +53,7 @@ export const FilterRangeDate = (column, value, owner) => {
       type=${type}
       .value=${to}
       to
+      aria-label=${i18next.t('text.grid-filter-to', { name: columnText(column), defaultValue: columnText(column) })}
       @keyup=${(e) => {
         if (e.key !== 'Enter') {
             return;

package/dist/src/filters/filter-range-date.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-range-date.js","sourceRoot":"","sources":["../../../src/filters/filter-range-date.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types.js'\n\nfunction formatDate(type: string, date: Date) {\n  var year = date.getFullYear()\n  var month = ('0' + (date.getMonth() + 1)).slice(-2)\n  var day = ('0' + date.getDate()).slice(-2)\n  var hours = ('0' + date.getHours()).slice(-2)\n  var minutes = ('0' + date.getMinutes()).slice(-2)\n\n  var formatDate = year + '-' + month + '-' + day\n\n  return type == 'date' ? formatDate : formatDate + 'T' + hours + ':' + minutes\n}\n\nexport const FilterRangeDate: FilterSelectRenderer = (column, value, owner) => {\n  const filter = column.filter as FilterConfigObject\n\n  var [from, to] = value instanceof Array ? value : []\n\n  var type: any = filter?.type || column.type\n  if (type === 'datetime') {\n    type = 'datetime-local'\n  }\n\n  from = formatDate(type, new Date(from))\n  to = formatDate(type, new Date(to))\n\n  return html`\n    <input\n      name=${column.name}\n      type=${type}\n      .value=${from}\n      from\n      @keyup=${(e: KeyboardEvent) => {\n        if (e.key !== 'Enter') {\n          return\n        }\n        ;(e.target as HTMLElement).dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name: column.name,\n              operator: filter.operator,\n              value: Array.from(\n                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')\n              ).map(input => (input as HTMLInputElement).value)\n            }\n          })\n        )\n      }}\n    />\n    ~\n    <input\n      name=${column.name}\n      type=${type}\n      .value=${to}\n      to\n      @keyup=${(e: KeyboardEvent) => {\n        if (e.key !== 'Enter') {\n          return\n        }\n        ;(e.target as HTMLElement).dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name: column.name,\n              operator: filter.operator,\n              value: Array.from(\n                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')\n              ).map(input => (input as HTMLInputElement).value)\n            }\n          })\n        )\n      }}\n    />\n  `\n}\n"]}
+{"version":3,"file":"filter-range-date.js","sourceRoot":"","sources":["../../../src/filters/filter-range-date.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit-html'\n\nimport { i18next } from '@operato/i18n'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types.js'\nimport { columnText } from '../utils/column-text.js'\n\n/*\n * 범위를 좁히는 입력칸 둘 — 시작과 끝. 이름이 없으면 스크린 리더가 둘을 구별하지 못한다\n * (같은 자리에 같은 모양의 상자 둘이라 「입력칸, 입력칸」으로만 읽힌다).\n * 눈으로는 가운데의 ~ 가 그 뜻을 말해 주지만, 그것은 글자로 그려 둔 것일 뿐 관계가 아니다.\n */\n\n\nfunction formatDate(type: string, date: Date) {\n  var year = date.getFullYear()\n  var month = ('0' + (date.getMonth() + 1)).slice(-2)\n  var day = ('0' + date.getDate()).slice(-2)\n  var hours = ('0' + date.getHours()).slice(-2)\n  var minutes = ('0' + date.getMinutes()).slice(-2)\n\n  var formatDate = year + '-' + month + '-' + day\n\n  return type == 'date' ? formatDate : formatDate + 'T' + hours + ':' + minutes\n}\n\nexport const FilterRangeDate: FilterSelectRenderer = (column, value, owner) => {\n  const filter = column.filter as FilterConfigObject\n\n  var [from, to] = value instanceof Array ? value : []\n\n  var type: any = filter?.type || column.type\n  if (type === 'datetime') {\n    type = 'datetime-local'\n  }\n\n  from = formatDate(type, new Date(from))\n  to = formatDate(type, new Date(to))\n\n  return html`\n    <input\n      name=${column.name}\n      type=${type}\n      .value=${from}\n      from\n      aria-label=${i18next.t('text.grid-filter-from', { name: columnText(column), defaultValue: columnText(column) })}\n      @keyup=${(e: KeyboardEvent) => {\n        if (e.key !== 'Enter') {\n          return\n        }\n        ;(e.target as HTMLElement).dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name: column.name,\n              operator: filter.operator,\n              value: Array.from(\n                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')\n              ).map(input => (input as HTMLInputElement).value)\n            }\n          })\n        )\n      }}\n    />\n    ~\n    <input\n      name=${column.name}\n      type=${type}\n      .value=${to}\n      to\n      aria-label=${i18next.t('text.grid-filter-to', { name: columnText(column), defaultValue: columnText(column) })}\n      @keyup=${(e: KeyboardEvent) => {\n        if (e.key !== 'Enter') {\n          return\n        }\n        ;(e.target as HTMLElement).dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name: column.name,\n              operator: filter.operator,\n              value: Array.from(\n                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')\n              ).map(input => (input as HTMLInputElement).value)\n            }\n          })\n        )\n      }}\n    />\n  `\n}\n"]}

package/dist/src/filters/filter-range-number.js

@@ -1,4 +1,11 @@
 import { html } from 'lit-html';
+import { i18next } from '@operato/i18n';
+import { columnText } from '../utils/column-text.js';
+/*
+ * 범위를 좁히는 입력칸 둘 — 시작과 끝. 이름이 없으면 스크린 리더가 둘을 구별하지 못한다
+ * (같은 자리에 같은 모양의 상자 둘이라 「입력칸, 입력칸」으로만 읽힌다).
+ * 눈으로는 가운데의 ~ 가 그 뜻을 말해 주지만, 그것은 글자로 그려 둔 것일 뿐 관계가 아니다.
+ */
 export const FilterRangeNumber = (column, value, owner) => {
     const filter = column.filter;
     const type = (filter === null || filter === void 0 ? void 0 : filter.type) || column.type;
@@ -10,6 +17,7 @@ export const FilterRangeNumber = (column, value, owner) => {
       placeholder="minimum"
       .value=${from}
       from
+      aria-label=${i18next.t('text.grid-filter-from', { name: columnText(column), defaultValue: columnText(column) })}
       @keyup=${(e) => {
         if (e.key !== 'Enter') {
             return;
@@ -33,6 +41,7 @@ export const FilterRangeNumber = (column, value, owner) => {
       placeholder="maximum"
       .value=${to}
       to
+      aria-label=${i18next.t('text.grid-filter-to', { name: columnText(column), defaultValue: columnText(column) })}
       @keyup=${(e) => {
         if (e.key !== 'Enter') {
             return;

package/dist/src/filters/filter-range-number.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-range-number.js","sourceRoot":"","sources":["../../../src/filters/filter-range-number.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,iBAAiB,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAC9E,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,IAAI,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,MAAM,CAAC,IAAI,CAAA;IAExC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IAEtD,OAAO,IAAI,CAAA;;aAEA,MAAM,CAAC,IAAI;;;eAGT,IAAI;;eAEJ,CAAC,CAAgB,EAAE,EAAE;QAC5B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtB,OAAM;QACR,CAAC;QACD,CAAC;QAAC,CAAC,CAAC,MAAsB,CAAC,aAAa,CACtC,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ;gBACzB,KAAK,EAAE,KAAK,CAAC,IAAI,CACd,CAAC,CAAC,MAAsB,CAAC,aAAc,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CACpF,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAE,KAA0B,CAAC,KAAK,CAAC;aAClD;SACF,CAAC,CACH,CAAA;IACH,CAAC;;;;aAIM,MAAM,CAAC,IAAI;;;eAGT,EAAE;;eAEF,CAAC,CAAgB,EAAE,EAAE;QAC5B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtB,OAAM;QACR,CAAC;QACD,CAAC;QAAC,CAAC,CAAC,MAAsB,CAAC,aAAa,CACtC,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ;gBACzB,KAAK,EAAE,KAAK,CAAC,IAAI,CACd,CAAC,CAAC,MAAsB,CAAC,aAAc,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CACpF,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAE,KAA0B,CAAC,KAAK,CAAC;aAClD;SACF,CAAC,CACH,CAAA;IACH,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types.js'\n\nexport const FilterRangeNumber: FilterSelectRenderer = (column, value, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const type = filter?.type || column.type\n\n  const [from, to] = value instanceof Array ? value : []\n\n  return html`\n    <input\n      name=${column.name}\n      type=\"number\"\n      placeholder=\"minimum\"\n      .value=${from}\n      from\n      @keyup=${(e: KeyboardEvent) => {\n        if (e.key !== 'Enter') {\n          return\n        }\n        ;(e.target as HTMLElement).dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name: column.name,\n              operator: filter.operator,\n              value: Array.from(\n                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')\n              ).map(input => (input as HTMLInputElement).value)\n            }\n          })\n        )\n      }}\n    />\n    ~\n    <input\n      name=${column.name}\n      type=\"number\"\n      placeholder=\"maximum\"\n      .value=${to}\n      to\n      @keyup=${(e: KeyboardEvent) => {\n        if (e.key !== 'Enter') {\n          return\n        }\n        ;(e.target as HTMLElement).dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name: column.name,\n              operator: filter.operator,\n              value: Array.from(\n                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')\n              ).map(input => (input as HTMLInputElement).value)\n            }\n          })\n        )\n      }}\n    />\n  `\n}\n"]}
+{"version":3,"file":"filter-range-number.js","sourceRoot":"","sources":["../../../src/filters/filter-range-number.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAEpD;;;;GAIG;AAGH,MAAM,CAAC,MAAM,iBAAiB,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAC9E,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,IAAI,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,MAAM,CAAC,IAAI,CAAA;IAExC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IAEtD,OAAO,IAAI,CAAA;;aAEA,MAAM,CAAC,IAAI;;;eAGT,IAAI;;mBAEA,OAAO,CAAC,CAAC,CAAC,uBAAuB,EAAE,EAAE,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,EAAE,YAAY,EAAE,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC;eACtG,CAAC,CAAgB,EAAE,EAAE;QAC5B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtB,OAAM;QACR,CAAC;QACD,CAAC;QAAC,CAAC,CAAC,MAAsB,CAAC,aAAa,CACtC,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ;gBACzB,KAAK,EAAE,KAAK,CAAC,IAAI,CACd,CAAC,CAAC,MAAsB,CAAC,aAAc,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CACpF,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAE,KAA0B,CAAC,KAAK,CAAC;aAClD;SACF,CAAC,CACH,CAAA;IACH,CAAC;;;;aAIM,MAAM,CAAC,IAAI;;;eAGT,EAAE;;mBAEE,OAAO,CAAC,CAAC,CAAC,qBAAqB,EAAE,EAAE,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,EAAE,YAAY,EAAE,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC;eACpG,CAAC,CAAgB,EAAE,EAAE;QAC5B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtB,OAAM;QACR,CAAC;QACD,CAAC;QAAC,CAAC,CAAC,MAAsB,CAAC,aAAa,CACtC,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ;gBACzB,KAAK,EAAE,KAAK,CAAC,IAAI,CACd,CAAC,CAAC,MAAsB,CAAC,aAAc,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CACpF,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAE,KAA0B,CAAC,KAAK,CAAC;aAClD;SACF,CAAC,CACH,CAAA;IACH,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { i18next } from '@operato/i18n'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types.js'\nimport { columnText } from '../utils/column-text.js'\n\n/*\n * 범위를 좁히는 입력칸 둘 — 시작과 끝. 이름이 없으면 스크린 리더가 둘을 구별하지 못한다\n * (같은 자리에 같은 모양의 상자 둘이라 「입력칸, 입력칸」으로만 읽힌다).\n * 눈으로는 가운데의 ~ 가 그 뜻을 말해 주지만, 그것은 글자로 그려 둔 것일 뿐 관계가 아니다.\n */\n\n\nexport const FilterRangeNumber: FilterSelectRenderer = (column, value, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const type = filter?.type || column.type\n\n  const [from, to] = value instanceof Array ? value : []\n\n  return html`\n    <input\n      name=${column.name}\n      type=\"number\"\n      placeholder=\"minimum\"\n      .value=${from}\n      from\n      aria-label=${i18next.t('text.grid-filter-from', { name: columnText(column), defaultValue: columnText(column) })}\n      @keyup=${(e: KeyboardEvent) => {\n        if (e.key !== 'Enter') {\n          return\n        }\n        ;(e.target as HTMLElement).dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name: column.name,\n              operator: filter.operator,\n              value: Array.from(\n                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')\n              ).map(input => (input as HTMLInputElement).value)\n            }\n          })\n        )\n      }}\n    />\n    ~\n    <input\n      name=${column.name}\n      type=\"number\"\n      placeholder=\"maximum\"\n      .value=${to}\n      to\n      aria-label=${i18next.t('text.grid-filter-to', { name: columnText(column), defaultValue: columnText(column) })}\n      @keyup=${(e: KeyboardEvent) => {\n        if (e.key !== 'Enter') {\n          return\n        }\n        ;(e.target as HTMLElement).dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name: column.name,\n              operator: filter.operator,\n              value: Array.from(\n                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')\n              ).map(input => (input as HTMLInputElement).value)\n            }\n          })\n        )\n      }}\n    />\n  `\n}\n"]}

package/dist/src/gutters/gutter-row-selector.js

@@ -1,4 +1,15 @@
 import { html } from 'lit';
+import { i18next } from '@operato/i18n';
+/*
+ * 행을 고르는 칸 — **머리줄에 하나, 행마다 하나.**
+ *
+ * 둘 다 이름이 없는 입력칸이었다. 눈으로 보는 사람에게는 자리가 뜻을 말해 준다(맨 왼쪽 좁은 칸,
+ * 머리줄의 것은 전체) — 그런데 그것은 그림이고, 스크린 리더는 「체크박스」 라고만 읽는다.
+ * 행이 스물이면 구별되지 않는 체크박스가 스물한 개다.
+ *
+ * 이 둘의 이름은 column 이름이 아니라 **동작**이다. 그래서 columnText() 를 쓰지 않고 여기서
+ * 문구를 갖는다 — 무엇을 고르는지가 아니라 무엇을 하는지를 말해야 하기 때문이다.
+ */
 export class GutterRowSelector {
     static instance(config = { type: 'gutter', name: '__selected__' }) {
         return Object.assign({}, {
@@ -18,6 +29,7 @@ export class GutterRowSelector {
                     return html `
               <input
                 type="checkbox"
+                aria-label=${i18next.t('text.grid-select-all-records', { defaultValue: 'select all rows' })}
                 .checked=${!!checked}
                 @change=${(e) => {
                         let selected = column.multiple ? e.target.checked : false;
@@ -40,6 +52,10 @@ export class GutterRowSelector {
                     return html `
               <input
                 type=${column.multiple ? 'checkbox' : 'radio'}
+                aria-label=${i18next.t('text.grid-select-record', {
+                        row: rowIndex + 1,
+                        defaultValue: `select row ${rowIndex + 1}`
+                    })}
                 .checked=${!!value}
                 @click=${(e) => {
                         e.stopPropagation();

package/dist/src/gutters/gutter-row-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"gutter-row-selector.js","sourceRoot":"","sources":["../../../src/gutters/gutter-row-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAO1B,MAAM,OAAO,iBAAiB;IAC5B,MAAM,CAAC,QAAQ,CAAC,SAAgC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,cAAc,EAAE;QACtF,OAAO,MAAM,CAAC,MAAM,CAClB,EAAE,EACF;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,cAAc;YACpB,UAAU,EAAE,cAAc;YAC1B,KAAK,EAAE,EAAE;YACT,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE,KAAK;YACf,MAAM,EAAE;gBACN,QAAQ,EAAE,UAAgD,MAAM;oBAC9D,8CAA8C;oBAC9C,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;wBACrB,OAAO,IAAI,CAAA,EAAE,CAAA;oBACf,CAAC;oBAED,IAAI,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAA;oBAEtF,OAAO,IAAI,CAAA;;;2BAGI,CAAC,CAAC,OAAO;0BACV,CAAC,CAAQ,EAAE,EAAE;wBACrB,IAAI,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAE,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAA;wBAE/E,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,mBAAmB,EAAE;4BACnC,OAAO,EAAE,IAAI;4BACb,QAAQ,EAAE,IAAI;4BACd,MAAM,EAAE;gCACN,QAAQ;6BACT;yBACF,CAAC,CACH,CAAA;wBAED,CAAC,CAAC,eAAe,EAAE,CAAA;oBACrB,CAAC;;aAEJ,CAAA;gBACH,CAAmB;aACpB;YACD,MAAM,EAAE;gBACN,KAAK,EAAE,QAAQ;gBACf,QAAQ,EAAE,UAAU,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK;oBACxD,OAAO,IAAI,CAAA;;uBAEA,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO;2BAClC,CAAC,CAAC,KAAK;yBACT,CAAC,CAAQ,EAAE,EAAE;wBACpB,CAAC,CAAC,eAAe,EAAE,CAAA;oBACrB,CAAC;0BACS,CAAC,CAAQ,EAAE,EAAE;wBACrB,IAAI,QAAQ,GAAI,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAA;wBAErD,IAAI,MAAM,GAAG,MAAM,CAAC,QAAQ;4BAC1B,CAAC,CAAC;gCACE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE;gCAC/B,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;6BAClC;4BACH,CAAC,CAAC;gCACE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE;6BAClC,CAAA;wBAEL,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,sBAAsB,EAAE;4BACtC,OAAO,EAAE,IAAI;4BACb,QAAQ,EAAE,IAAI;4BACd,MAAM;yBACP,CAAC,CACH,CAAA;wBAED,CAAC,CAAC,eAAe,EAAE,CAAA;oBACrB,CAAC;;aAEJ,CAAA;gBACH,CAAkB;aACnB;YACD,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;SACd,EACD,MAAM,CACP,CAAA;IACH,CAAC;CACF","sourcesContent":["import { html } from 'lit'\n\nimport { DataCard } from '../data-card/data-card.js'\nimport { DataGrid } from '../data-grid/data-grid.js'\nimport { DataList } from '../data-list/data-list.js'\nimport { ColumnConfig, FieldRenderer, HeaderRenderer } from '../types.js'\n\nexport class GutterRowSelector {\n  static instance(config: Partial<ColumnConfig> = { type: 'gutter', name: '__selected__' }) {\n    return Object.assign(\n      {},\n      {\n        type: 'gutter',\n        name: '__selected__',\n        gutterName: 'row-selector',\n        width: 30,\n        resizable: false,\n        sortable: false,\n        header: {\n          renderer: function (this: DataGrid | DataList | DataCard, column) {\n            // column.multiple가 true인 경우에만 헤더의 체크박스를 표시한다.\n            if (!column.multiple) {\n              return html``\n            }\n\n            var checked = ((this.data || {}).records || []).find(record => record['__selected__'])\n\n            return html`\n              <input\n                type=\"checkbox\"\n                .checked=${!!checked}\n                @change=${(e: Event) => {\n                  let selected = column.multiple ? (e.target as HTMLInputElement).checked : false\n\n                  this.dispatchEvent(\n                    new CustomEvent('select-all-change', {\n                      bubbles: true,\n                      composed: true,\n                      detail: {\n                        selected\n                      }\n                    })\n                  )\n\n                  e.stopPropagation()\n                }}\n              />\n            `\n          } as HeaderRenderer\n        },\n        record: {\n          align: 'center',\n          renderer: function (value, column, record, rowIndex, field) {\n            return html`\n              <input\n                type=${column.multiple ? 'checkbox' : 'radio'}\n                .checked=${!!value}\n                @click=${(e: Event) => {\n                  e.stopPropagation()\n                }}\n                @change=${(e: Event) => {\n                  let selected = (e.target as HTMLInputElement).checked\n\n                  let detail = column.multiple\n                    ? {\n                        added: selected ? [record] : [],\n                        removed: selected ? [] : [record]\n                      }\n                    : {\n                        records: selected ? [record] : []\n                      }\n\n                  field.dispatchEvent(\n                    new CustomEvent('select-record-change', {\n                      bubbles: true,\n                      composed: true,\n                      detail\n                    })\n                  )\n\n                  e.stopPropagation()\n                }}\n              />\n            `\n          } as FieldRenderer\n        },\n        forGrid: true,\n        forList: true,\n        forCard: true\n      },\n      config\n    )\n  }\n}\n"]}
+{"version":3,"file":"gutter-row-selector.js","sourceRoot":"","sources":["../../../src/gutters/gutter-row-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit'\n\nimport { i18next } from '@operato/i18n'\n\nimport { DataCard } from '../data-card/data-card.js'\nimport { DataGrid } from '../data-grid/data-grid.js'\nimport { DataList } from '../data-list/data-list.js'\nimport { ColumnConfig, FieldRenderer, HeaderRenderer } from '../types.js'\n\n/*\n * 행을 고르는 칸 — **머리줄에 하나, 행마다 하나.**\n *\n * 둘 다 이름이 없는 입력칸이었다. 눈으로 보는 사람에게는 자리가 뜻을 말해 준다(맨 왼쪽 좁은 칸,\n * 머리줄의 것은 전체) — 그런데 그것은 그림이고, 스크린 리더는 「체크박스」 라고만 읽는다.\n * 행이 스물이면 구별되지 않는 체크박스가 스물한 개다.\n *\n * 이 둘의 이름은 column 이름이 아니라 **동작**이다. 그래서 columnText() 를 쓰지 않고 여기서\n * 문구를 갖는다 — 무엇을 고르는지가 아니라 무엇을 하는지를 말해야 하기 때문이다.\n */\nexport class GutterRowSelector {\n  static instance(config: Partial<ColumnConfig> = { type: 'gutter', name: '__selected__' }) {\n    return Object.assign(\n      {},\n      {\n        type: 'gutter',\n        name: '__selected__',\n        gutterName: 'row-selector',\n        width: 30,\n        resizable: false,\n        sortable: false,\n        header: {\n          renderer: function (this: DataGrid | DataList | DataCard, column) {\n            // column.multiple가 true인 경우에만 헤더의 체크박스를 표시한다.\n            if (!column.multiple) {\n              return html``\n            }\n\n            var checked = ((this.data || {}).records || []).find(record => record['__selected__'])\n\n            return html`\n              <input\n                type=\"checkbox\"\n                aria-label=${i18next.t('text.grid-select-all-records', { defaultValue: 'select all rows' })}\n                .checked=${!!checked}\n                @change=${(e: Event) => {\n                  let selected = column.multiple ? (e.target as HTMLInputElement).checked : false\n\n                  this.dispatchEvent(\n                    new CustomEvent('select-all-change', {\n                      bubbles: true,\n                      composed: true,\n                      detail: {\n                        selected\n                      }\n                    })\n                  )\n\n                  e.stopPropagation()\n                }}\n              />\n            `\n          } as HeaderRenderer\n        },\n        record: {\n          align: 'center',\n          renderer: function (value, column, record, rowIndex, field) {\n            return html`\n              <input\n                type=${column.multiple ? 'checkbox' : 'radio'}\n                aria-label=${i18next.t('text.grid-select-record', {\n                  row: rowIndex + 1,\n                  defaultValue: `select row ${rowIndex + 1}`\n                })}\n                .checked=${!!value}\n                @click=${(e: Event) => {\n                  e.stopPropagation()\n                }}\n                @change=${(e: Event) => {\n                  let selected = (e.target as HTMLInputElement).checked\n\n                  let detail = column.multiple\n                    ? {\n                        added: selected ? [record] : [],\n                        removed: selected ? [] : [record]\n                      }\n                    : {\n                        records: selected ? [record] : []\n                      }\n\n                  field.dispatchEvent(\n                    new CustomEvent('select-record-change', {\n                      bubbles: true,\n                      composed: true,\n                      detail\n                    })\n                  )\n\n                  e.stopPropagation()\n                }}\n              />\n            `\n          } as FieldRenderer\n        },\n        forGrid: true,\n        forList: true,\n        forCard: true\n      },\n      config\n    )\n  }\n}\n"]}

package/dist/src/index.d.ts

@@ -11,4 +11,5 @@ export * from './filters/index.js';
 export * from './sorters/sorters-control.js';
 export * from './record-view/index.js';
 export * from './personalizer/index.js';
+export * from './utils/column-text.js';
 export * from './utils/list-param.js';

package/dist/src/index.js

@@ -11,5 +11,6 @@ export * from './filters/index.js';
 export * from './sorters/sorters-control.js';
 export * from './record-view/index.js';
 export * from './personalizer/index.js';
+export * from './utils/column-text.js';
 export * from './utils/list-param.js';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAE1B,cAAc,4BAA4B,CAAA;AAC1C,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAEhC,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AAEvC,cAAc,uBAAuB,CAAA","sourcesContent":["export * from './types.js'\n\nexport * from './configure/zero-config.js'\nexport * from './data-grist.js'\nexport * from './data-report.js'\n\nexport * from './editors/index.js'\nexport * from './renderers/index.js'\nexport * from './handlers/index.js'\nexport * from './formatters/index.js'\nexport * from './gutters/index.js'\nexport * from './filters/index.js'\nexport * from './sorters/sorters-control.js'\nexport * from './record-view/index.js'\nexport * from './personalizer/index.js'\n\nexport * from './utils/list-param.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAE1B,cAAc,4BAA4B,CAAA;AAC1C,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAEhC,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AAEvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA","sourcesContent":["export * from './types.js'\n\nexport * from './configure/zero-config.js'\nexport * from './data-grist.js'\nexport * from './data-report.js'\n\nexport * from './editors/index.js'\nexport * from './renderers/index.js'\nexport * from './handlers/index.js'\nexport * from './formatters/index.js'\nexport * from './gutters/index.js'\nexport * from './filters/index.js'\nexport * from './sorters/sorters-control.js'\nexport * from './record-view/index.js'\nexport * from './personalizer/index.js'\n\nexport * from './utils/column-text.js'\nexport * from './utils/list-param.js'\n"]}

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

@@ -1,4 +1,11 @@
 import { html } from 'lit';
+import { columnText } from '../utils/column-text.js';
+/*
+ * 예 · 아니오 칸 — 값을 **읽기 상태에서 바로 바꿀 수 있는** 체크박스다(편집기를 열지 않는다).
+ *
+ * 그래서 이 입력칸은 칸 안에 그려지는 것이지만 진짜 조작 대상이다. 이름이 없으면 「체크박스, 선택됨」
+ * 하나로만 읽히고, 줄마다 같은 것이 반복된다. 이름은 열 정의에서 가져온다.
+ */
 export const OxGristRendererBoolean = (value, column, record, rowIndex, field) => {
     let { editable } = column.record;
     if (typeof editable === 'function') {
@@ -7,6 +14,7 @@ export const OxGristRendererBoolean = (value, column, record, rowIndex, field) =
     return html `
     <input
       type="checkbox"
+      aria-label=${columnText(column)}
       .checked=${!!value && !!String(value).match(/true/i)}
       ?disabled=${!editable}
       @pointerdown=${(e) => {

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

@@ -1 +1 @@
-{"version":3,"file":"ox-grist-renderer-boolean.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-boolean.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,MAAM,CAAC,MAAM,sBAAsB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC9F,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,MAAM,CAAA;IAChC,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACnC,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAA;IACzE,CAAC;IAED,OAAO,IAAI,CAAA;;;iBAGI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;kBACxC,CAAC,QAAQ;qBACN,CAAC,CAAQ,EAAE,EAAE;QAC1B,yDAAyD;QACzD,CAAC,CAAC,eAAe,EAAE,CAAA;IACrB,CAAC;eACQ,CAAC,CAAQ,EAAE,EAAE;QACpB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB;;;;;WAKG;QACH,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,MAAM,EAAE,KAAK;gBACb,KAAK,EAAG,CAAC,CAAC,MAA2B,CAAC,OAAO;gBAC7C,MAAM,EAAE,MAAM;gBACd,MAAM,EAAE,MAAM;gBACd,GAAG,EAAE,QAAQ;aACd;SACF,CAAC,CACH,CAAA;IACH,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types.js'\nimport { html } from 'lit'\n\nexport const OxGristRendererBoolean: FieldRenderer = (value, column, record, rowIndex, field) => {\n  let { editable } = column.record\n  if (typeof editable === 'function') {\n    editable = editable.call(field, value, column, record, rowIndex, field)\n  }\n\n  return html`\n    <input\n      type=\"checkbox\"\n      .checked=${!!value && !!String(value).match(/true/i)}\n      ?disabled=${!editable}\n      @pointerdown=${(e: Event) => {\n        /* edit mode로 전환되지 않도록 차단함. 체크박스인풋은 렌더러 모드에서도 처리가능하므로. */\n        e.stopPropagation()\n      }}\n      @click=${(e: Event) => {\n        e.stopPropagation()\n        /*\n         * 특별하게, checkbox인 경우에, editor가 활성화되지 않아도, renderer에서 값을 변경할 수 있게 함.\n         * checkbox가 클릭되면, 클릭에 의해 변경된 값을 레코드에 반영하기 위해서 value-changed 이벤트를 발생시킨다.\n         *\n         * 만일, readonly인 경우에는 click 이벤트가 발생하지 않으므로, 클릭으로 에디트할 수 없게 됨.\n         */\n        field.dispatchEvent(\n          new CustomEvent('field-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              before: value,\n              after: (e.target as HTMLInputElement).checked,\n              column: column,\n              record: record,\n              row: rowIndex\n            }\n          })\n        )\n      }}\n    />\n  `\n}\n"]}
+{"version":3,"file":"ox-grist-renderer-boolean.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-boolean.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAEpD;;;;;GAKG;AAEH,MAAM,CAAC,MAAM,sBAAsB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC9F,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,MAAM,CAAA;IAChC,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACnC,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAA;IACzE,CAAC;IAED,OAAO,IAAI,CAAA;;;mBAGM,UAAU,CAAC,MAAM,CAAC;iBACpB,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;kBACxC,CAAC,QAAQ;qBACN,CAAC,CAAQ,EAAE,EAAE;QAC1B,yDAAyD;QACzD,CAAC,CAAC,eAAe,EAAE,CAAA;IACrB,CAAC;eACQ,CAAC,CAAQ,EAAE,EAAE;QACpB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB;;;;;WAKG;QACH,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,MAAM,EAAE,KAAK;gBACb,KAAK,EAAG,CAAC,CAAC,MAA2B,CAAC,OAAO;gBAC7C,MAAM,EAAE,MAAM;gBACd,MAAM,EAAE,MAAM;gBACd,GAAG,EAAE,QAAQ;aACd;SACF,CAAC,CACH,CAAA;IACH,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types.js'\nimport { html } from 'lit'\n\nimport { columnText } from '../utils/column-text.js'\n\n/*\n * 예 · 아니오 칸 — 값을 **읽기 상태에서 바로 바꿀 수 있는** 체크박스다(편집기를 열지 않는다).\n *\n * 그래서 이 입력칸은 칸 안에 그려지는 것이지만 진짜 조작 대상이다. 이름이 없으면 「체크박스, 선택됨」\n * 하나로만 읽히고, 줄마다 같은 것이 반복된다. 이름은 열 정의에서 가져온다.\n */\n\nexport const OxGristRendererBoolean: FieldRenderer = (value, column, record, rowIndex, field) => {\n  let { editable } = column.record\n  if (typeof editable === 'function') {\n    editable = editable.call(field, value, column, record, rowIndex, field)\n  }\n\n  return html`\n    <input\n      type=\"checkbox\"\n      aria-label=${columnText(column)}\n      .checked=${!!value && !!String(value).match(/true/i)}\n      ?disabled=${!editable}\n      @pointerdown=${(e: Event) => {\n        /* edit mode로 전환되지 않도록 차단함. 체크박스인풋은 렌더러 모드에서도 처리가능하므로. */\n        e.stopPropagation()\n      }}\n      @click=${(e: Event) => {\n        e.stopPropagation()\n        /*\n         * 특별하게, checkbox인 경우에, editor가 활성화되지 않아도, renderer에서 값을 변경할 수 있게 함.\n         * checkbox가 클릭되면, 클릭에 의해 변경된 값을 레코드에 반영하기 위해서 value-changed 이벤트를 발생시킨다.\n         *\n         * 만일, readonly인 경우에는 click 이벤트가 발생하지 않으므로, 클릭으로 에디트할 수 없게 됨.\n         */\n        field.dispatchEvent(\n          new CustomEvent('field-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              before: value,\n              after: (e.target as HTMLInputElement).checked,\n              column: column,\n              record: record,\n              row: rowIndex\n            }\n          })\n        )\n      }}\n    />\n  `\n}\n"]}

package/dist/src/types.d.ts

@@ -293,7 +293,7 @@ export type ColumnConfig = {
      * "gutter" 타입의 컬럼인 경우, 등록된 gutter들 중의 하나의 이름을 명시합니다(type이 gutter인 경우에만 설정합니다).
      * (e.g., 'button', 'sequence', 'row-selector', 'dirty', etc)
      *
-     * "Gutter"는 테이블 형태에서 각 행의 왼쪽 또는 오른쪽에 위치한 추가적인 열(column)을 가리킵니다.
+     * "Gutter" 는 테이블에서 각 행의 왼쪽이나 오른쪽에 놓이는 추가 열(column)을 뜻합니다.
      * 이 열은 주로 각 행(row)을 식별하거나 특정 작업을 수행하기 위한 버튼 또는 링크와 같은 요소를 표시하는 데 사용됩니다.
      * Gutter 열은 주로 데이터 행에 대한 조작 또는 행의 상태를 나타내는 데 사용됩니다.
      * 예를 들어, 테이블에서 각 행이 특정 작업을 수행하는 버튼을 포함할 때, 이러한 버튼이 Gutter 열에 배치될 수 있습니다.
@@ -362,6 +362,8 @@ export type ValidationCallback = (after: any, before: any, record: GristRecord,
  */
 export type LabelConfig = string | boolean | {
     renderer: LabelRenderer;
+    /** HeaderConfig.text 와 같은 뜻 — 그린 결과가 아니라 이름 그 자체. */
+    text?: string;
 };
 /**
  * Custom label renderer function for generating column labels.
@@ -390,6 +392,14 @@ export type ColumnWidthCallback = (column: ColumnConfig) => string;
  */
 export type HeaderConfig = {
     renderer: HeaderRenderer;
+    /**
+     * column 의 이름을 **글자 그대로** 담는다.
+     *
+     * renderer 는 화면에 그릴 것을 돌려주는 함수라 lit template 일 수도 있고 아이콘일 수도 있다.
+     * 그린 결과에서 이름을 되꺼낼 방법이 없으므로, 설정에 문자열로 들어온 이름은 여기에 남긴다.
+     * 화면 밖에서 이름이 필요한 곳(스크린 리더가 읽을 이름 · filter 입력칸의 이름)이 이것을 쓴다.
+     */
+    text?: string;
     style?: string;
     group?: string;
     groupStyle?: string;