@operato/data-grist 10.9.0 → 10.10.1

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

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

package/dist/src/editors/registry.js

@@ -64,10 +64,10 @@ export function getEditors() {
 /**
  * 이 열이 **팝업으로 고쳐지나.**
  *
- * 칸이 표식을 붙일지 판정할 때 쓴다. 편집기가 스스로 밝힌 값을 그대로 읽는다 — 칸이 목록을
+ * 칸이 표식을 붙일지 판단할 때 쓴다. 편집기가 스스로 밝힌 값을 그대로 읽는다 — 칸이 목록을
  * 들고 있으면 팝업 편집기가 새로 등록될 때마다 그 목록을 고쳐야 하고, 그러면 빠뜨린다.
  *
- * 편집기를 함수로 직접 준 열은 판정하지 않는다. 그 함수가 무엇을 여는지 알 길이 없고,
+ * 편집기를 함수로 직접 준 열은 판단하지 않는다. 그 함수가 무엇을 여는지 알 길이 없고,
  * 지어내는 것보다 표식을 안 붙이는 편이 낫다.
  */
 export function editorOpensPopup(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\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"]}
+{"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,16 @@
 import { html } from 'lit-html';
+import { i18next } from '@operato/i18n';
+import { columnText } from '../utils/column-text.js';
+/*
+ * Name the filter inputs in the header row.
+ *
+ * These boxes sit directly under the column name, so which column they narrow is obvious from
+ * position alone — to a sighted reader. That relationship is a picture and reaches no one else: a
+ * screen reader finds as many unnamed inputs as there are columns.
+ *
+ * The name comes from columnText(). Spelling it out here instead would leave the old name behind
+ * whenever `header` changes.
+ */
 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 +18,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;;;;;;;;;GASG;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 * Name the filter inputs in the header row.\n *\n * These boxes sit directly under the column name, so which column they narrow is obvious from\n * position alone — to a sighted reader. That relationship is a picture and reaches no one else: a\n * screen reader finds as many unnamed inputs as there are columns.\n *\n * The name comes from columnText(). Spelling it out here instead would leave the old name behind\n * whenever `header` changes.\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';
+/*
+ * Two inputs bounding a range: from and to. Without names a screen reader cannot tell them apart —
+ * two identical boxes in the same place read as "edit, edit". The ~ between them says which is
+ * which to the eye, but that is a drawn character, not a relationship.
+ */
 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 * Two inputs bounding a range: from and to. Without names a screen reader cannot tell them apart —\n * two identical boxes in the same place read as \"edit, edit\". The ~ between them says which is\n * which to the eye, but that is a drawn character, not a relationship.\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';
+/*
+ * Two inputs bounding a range: from and to. Without names a screen reader cannot tell them apart —
+ * two identical boxes in the same place read as "edit, edit". The ~ between them says which is
+ * which to the eye, but that is a drawn character, not a relationship.
+ */
 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;AAEH,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 * Two inputs bounding a range: from and to. Without names a screen reader cannot tell them apart —\n * two identical boxes in the same place read as \"edit, edit\". The ~ between them says which is\n * which to the eye, but that is a drawn character, not a relationship.\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';
+/*
+ * Row selection: one box in the header, one per row.
+ *
+ * Both were unnamed inputs. Position carries the meaning for a sighted reader — a narrow leftmost
+ * column, and the one in the header means all — but that is a picture, and a screen reader says
+ * only "checkbox". Twenty rows means twenty-one indistinguishable checkboxes.
+ *
+ * What names these is the action, not the column, so they carry their own strings rather than
+ * calling columnText(): they have to say what they do, not what they hold.
+ */
 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 * Row selection: one box in the header, one per row.\n *\n * Both were unnamed inputs. Position carries the meaning for a sighted reader — a narrow leftmost\n * column, and the one in the header means all — but that is a picture, and a screen reader says\n * only \"checkbox\". Twenty rows means twenty-one indistinguishable checkboxes.\n *\n * What names these is the action, not the column, so they carry their own strings rather than\n * calling columnText(): they have to say what they do, not what they hold.\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';
+/*
+ * Yes/no cell — a checkbox that changes the value in place, without opening an editor.
+ *
+ * So this input is drawn inside the cell but is a real control. Unnamed it reads as "checkbox,
+ * checked", identically on every row. The name comes from the column definition.
+ */
 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 * Yes/no cell — a checkbox that changes the value in place, without opening an editor.\n *\n * So this input is drawn inside the cell but is a real control. Unnamed it reads as \"checkbox,\n * checked\", identically on every row. The name comes from the column definition.\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;
+    /** Same as HeaderConfig.text — the name itself, not what was drawn from it. */
+    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;
+    /**
+     * The column's name as plain text.
+     *
+     * `renderer` returns whatever gets drawn — a lit template, an icon — and the name cannot be read
+     * back out of that. So a name given as a string in the config is kept here, for the places that
+     * need it outside of rendering: the accessible name of a cell, and header filter inputs.
+     */
+    text?: string;
     style?: string;
     group?: string;
     groupStyle?: string;

package/dist/src/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AA6LA;;;;;;;;GAQG;AACH,MAAM,CAAN,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC5B,mCAAa,CAAA;IACb,yCAAmB,CAAA;IACnB,mCAAa,CAAA;AACf,CAAC,EAJW,kBAAkB,KAAlB,kBAAkB,QAI7B;AAwmBD,MAAM,CAAN,IAAY,gBAKX;AALD,WAAY,gBAAgB;IAC1B,2CAAuB,CAAA;IACvB,qCAAiB,CAAA;IACjB,mCAAe,CAAA;IACf,qCAAiB,CAAA;AACnB,CAAC,EALW,gBAAgB,KAAhB,gBAAgB,QAK3B","sourcesContent":["import { TemplateResult } from 'lit-html'\n\nimport { 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 { OxGristEditor } from './editors/index.js'\nimport { QueryFilter, OxFiltersForm } from './filters/index.js'\nimport { OxGristRenderer } from './renderers/ox-grist-renderer.js'\n\n/**\n * Configuration object for defining the structure and behavior of a Grist table.\n *\n * @typedef {Object} GristConfig\n * @property {ColumnConfig[]} columns - An array of column configurations.\n * @property {RowsConfig} rows - Configuration for rows and their behavior.\n * @property {ListConfig} list - Configuration for the list view.\n * @property {TreeConfig} tree - Configuration for tree-related settings.\n * @property {PaginationConfig} [pagination] - Configuration for pagination settings (optional).\n * @property {SortersConfig} [sorters] - Configuration for sorting settings (optional).\n * @property {FiltersConfig} [filters] - Configuration for filtering settings (optional).\n */\nexport type GristConfig = {\n  columns: ColumnConfig[]\n  rows: RowsConfig\n  list: ListConfig\n  tree: TreeConfig\n  pagination?: PaginationConfig\n  sorters?: SortersConfig\n  filters?: FiltersConfig\n  /**\n   * 아직 아무것도 없을 때 화면이 하는 말.\n   *\n   * 전에는 「NO RECORDS」가 컴포넌트에 박혀 있었다. 그 문장은 다음에 무엇을 할지 알려 주지 않는다 —\n   * **비어 있는 화면이야말로** 「여기서 무엇을 만들 수 있고 그것이 무엇에 쓰이나」를 말해야 하는 자리이고,\n   * 처음 오는 사람이 가장 먼저 보는 화면이기도 하다.\n   *\n   * 정하지 않으면 예전 문장이 그대로 나온다.\n   */\n  emptyNote?: { title?: string; description?: string; icon?: string }\n}\n\n/**\n * Configuration object for specifying sorting options.\n *\n * @typedef {Object} SorterConfig\n * @property {string} name - The name of the sorting option.\n * @property {boolean} [desc] - Optional. Indicates whether the sorting is in descending order (optional).\n */\nexport type SorterConfig = { name: string; desc?: boolean }\n\n/**\n * Configuration array for specifying multiple sorting options.\n *\n * @typedef {SorterConfig[]} SortersConfig\n */\nexport type SortersConfig = SorterConfig[]\n\n/**\n * Enumeration of filter operators used to define filter conditions.\n *\n * @typedef {'search' | 'eq' | 'between' | 'gte' | 'lte' | 'is_not_true' | 'in' | 'like' | 'i_like' | 'noteq' |\n * 'is_empty_num_id' | 'is_blank' | 'is_present' | 'is_not_false' | 'is_true' | 'is_false' | 'is_not_null' |\n * 'is_null' | 'notin_with_null' | 'notin' | 'gt' | 'lt' | 'i_nlike' | 'nlike'} FilterOperator\n */\nexport type FilterOperator =\n  | 'search'\n  | 'eq'\n  | 'between'\n  | 'gte'\n  | 'lte'\n  | 'is_not_true'\n  | 'in'\n  | 'like'\n  | 'i_like'\n  | 'noteq'\n  | 'is_empty_num_id'\n  | 'is_blank'\n  | 'is_present'\n  | 'is_not_false'\n  | 'is_true'\n  | 'is_false'\n  | 'is_not_null'\n  | 'is_null'\n  | 'notin_with_null'\n  | 'notin'\n  | 'gt'\n  | 'lt'\n  | 'i_nlike'\n  | 'nlike'\n\nexport type SelectOptionObject =\n  | {\n      name: string\n      display?: never\n      value: string\n    }\n  | {\n      display: string\n      name?: never\n      value: string\n    }\n\nexport type SelectOption = SelectOptionObject | string\n\nexport type FilterChangedCallback = (value: any, form: OxFiltersForm) => boolean\n\n/**\n * Configuration object for specifying filter conditions.\n *\n * @typedef {Object} FilterConfigObject\n * @property {string} type - The type of the filter condition.\n * @property {FilterOperator} [operator] - The filter operator used to compare values (optional).\n * @property {Object} [options] - Additional options or parameters for the filter condition (optional).\n * @property {boolean|undefined} [hidden] - The hidden flag for the filter condition (optional).\n * @property {string|number|boolean|string[]|number[]|undefined} [value] - The value to compare with in the filter condition (optional).\n * @property {string} [label] - The label to display for the filter condition (optional).\n */\nexport type FilterConfigObject = {\n  type: string\n  operator?: FilterOperator\n  options?: { [key: string]: any }\n  value?: string | number | boolean | string[] | number[] | undefined\n  label?: string\n  boundTo?: string[]\n  hidden?: boolean\n  onchange?: FilterChangedCallback\n}\n\n/**\n * Configuration option for specifying filter conditions.\n *\n * The `FilterConfig` type can take one of the following forms:\n * - A `FilterConfigObject` representing a specific filter condition.\n * - A `FilterOperator` representing a predefined filter operator.\n * - A boolean value to enable or disable filtering for a specific column.\n *\n * @typedef {Object|FilterOperator|boolean} FilterConfig\n */\nexport type FilterConfig = FilterConfigObject | FilterOperator | boolean\n\n/**\n * Represents a filter condition with the following properties:\n *\n * - `name`: The name of the column or field being filtered.\n * - `operator`: The filter operator used for comparison.\n * - `value`: The value or values to compare against.\n *\n * @typedef {Object} FilterValue\n * @property {string} name - The name of the column or field.\n * @property {FilterOperator} operator - The filter operator.\n * @property {string|number|boolean|string[]|number[]|undefined} value - The value(s) to compare.\n */\nexport type FilterValue = {\n  name: string\n  operator: FilterOperator\n  value: string | number | boolean | string[] | number[] | undefined\n}\n\n/**\n * Configuration options for filters.\n *\n * @typedef {Object} FiltersConfig\n * @property {boolean} [header] - Specifies whether to provide filtering functionality in the header.\n */\nexport type FiltersConfig = {\n  header?: boolean\n}\n\n/**\n * Configuration options for pagination.\n *\n * @typedef {Object} PaginationConfig\n * @property {number} [page] - The current page number.\n * @property {number} [limit] - The maximum number of records to display per page.\n * @property {number[]} [pages] - An array of available page numbers.\n * @property {boolean} [infinite] - Specifies whether to use infinite scrolling for pagination.\n */\nexport type PaginationConfig = {\n  page?: number\n  limit?: number\n  pages?: number[]\n  infinite?: boolean\n}\n\n/**\n * Option to specify the inheritance behavior for including data from parent domains.\n *\n * - 'None': Do not include data from the parent domain.\n * - 'Include': Include data from the parent domain along with current domain data.\n * - 'Only': Include data only from the parent domain, excluding current domain data.\n *\n * @enum {string}\n */\nexport enum InheritedValueType {\n  None = 'None',\n  Include = 'Include',\n  Only = 'Only'\n}\n\n/**\n * Configuration options for fetching data from a data source.\n *\n * @typedef {Object} FetchOption\n * @property {number} [page] - The page number to retrieve.\n * @property {number} [limit] - The maximum number of records to retrieve per page.\n * @property {SortersConfig} [sorters] - An array of sorting configurations for data. Only one of these options needs to be set.\n * @property {SortersConfig} [sortings] - An array of sorting configurations for data. Only one of these options needs to be set.\n * @property {QueryFilter[]} [filters] - An array of filtering criteria.\n * @property {InheritedValueType} [inherited] - Specifies the inheritance behavior for including data from parent domains.\n * @property {object} [options] - Additional options for customizing data fetching behavior.\n */\nexport type FetchOption = {\n  page?: number\n  limit?: number\n  sorters?: SortersConfig\n  sortings?: SortersConfig\n  filters?: QueryFilter[]\n  inherited?: InheritedValueType\n  options?: object\n}\n\n/**\n * Represents the result of a data fetching operation.\n *\n * @typedef {Object} FetchResult\n * @property {number} [page] - The page number of the fetched data.\n * @property {number} [limit] - The maximum number of records per page.\n * @property {number} total - The total number of records in the data source.\n * @property {GristRecord[]} records - An array of fetched data records.\n */\nexport type FetchResult = {\n  page?: number\n  limit?: number\n  total: number\n  records: GristRecord[]\n} | void\n\n/**\n * A function that handles data fetching operations.\n *\n * @param param - The fetch options specifying how data should be retrieved.\n * @returns A promise that resolves to a `FetchResult`.\n */\nexport type FetchHandler = (param: FetchOption) => Promise<FetchResult>\n\n/**\n * Represents a Grist event handler function.\n *\n * @typedef {Function} GristEventHandler\n * @param {ColumnConfig[]} columns - An array of column configurations.\n * @param {GristData} [data] - The Grist data associated with the event.\n * @param {ColumnConfig} [column] - The column configuration related to the event (if applicable).\n * @param {GristRecord} [record] - The Grist record related to the event (if applicable).\n * @param {number} [rowIndex] - The index of the row related to the event (if applicable).\n * @param {any} [target] - The target element or object related to the event (if applicable).\n * @param {Event} [e] - The event object (if applicable).\n * @returns {void}\n */\nexport type GristEventHandler = (\n  columns: ColumnConfig[],\n  data?: GristData,\n  column?: ColumnConfig,\n  record?: GristRecord,\n  rowIndex?: number,\n  target?: any,\n  e?: Event\n) => void\n\n/**\n * Represents an accumulator function for data aggregation and accumulation.\n *\n * @typedef {string|'sum'|'avg'|'count'|'min'|'max'|Function} AccumulatorFunc\n * @param {GristData} data - The Grist data for aggregation.\n * @param {ColumnConfig} column - The column configuration for aggregation.\n * @returns {string|number} - The aggregated result.\n */\nexport type AccumulatorFunc =\n  | 'sum'\n  | 'avg'\n  | 'count'\n  | 'min'\n  | 'max'\n  | ((data: GristData, column: ColumnConfig) => string | number)\n\n/**\n * Type representing an accumulator function or configuration object.\n *\n * An accumulator is used for data aggregation and accumulation purposes. It can be either\n * a predefined accumulator function (e.g., 'sum', 'avg', 'count', etc.) or a configuration\n * object specifying the type of accumulator and labeling options.\n *\n * @typedef {AccumulatorFunc|{type: AccumulatorFunc, tag?: boolean}} AccumulatorObject\n * @property {AccumulatorFunc} [type] - The type of accumulator function or predefined function name.\n * @property {boolean} [tag] - An option for adding a label to represent the result of an aggregation function. This label is added in front of the aggregated value.\n *\n * @example\n * // Using a predefined accumulator function:\n * const accumulator: AccumulatorObject = 'sum'; // Represents a 'sum' accumulator.\n *\n * // Using an accumulator configuration object:\n * const accumulatorConfig: AccumulatorObject = {\n *   type: 'avg', // Specifies the type of accumulator ('avg' for average).\n *   tag: true,   // Option for adding a label to represent the result of an aggregation function. This label is added in front of the aggregated value.\n * };\n */\nexport type AccumulatorObject =\n  | AccumulatorFunc\n  | {\n      type: AccumulatorFunc\n      tag?: boolean\n    }\n\n/**\n * Type representing column configuration information.\n *\n * @typedef {object} ColumnConfig\n * @property {string} type - Represents the data type of the column (e.g., 'text', 'number', 'date', 'gutter', etc.).\n * @property {string} name - Represents the name of the column.\n * @property {('button'|'sequence'|'row-selector'|'dirty')} [gutterName] - If the column type is 'gutter', specifies the name of one of the registered gutters (only set when the type is 'gutter').\n * @property {boolean} [fixed] - In case of a grid type column, specifies whether the column's position should be fixed and unaffected by horizontal scrolling (optional).\n * @property {HeaderConfig} header - Object representing the header configuration of the column.\n * @property {RecordConfig} record - Object representing the record configuration of the column.\n * @property {GristEventHandlerSet} handlers - Object representing the Grist event handler settings.\n * @property {LabelConfig} label - Object representing the label configuration of the column. This property is used to represent the label of the column's information in list mode, card mode, and when displaying the column in a filter form (ox-filters-form).\n * @property {boolean} [hidden] - Indicates whether the column is hidden or not (optional).\n * @property {boolean} [sortable] - Indicates whether the column is sortable or not (optional). If this setting is true, the header provides the ability to toggle the sorting direction.\n * @property {boolean} [resizable] - Indicates whether the column is resizable or not (optional). This setting determines whether the column's width can be adjusted.\n * @property {(number|string|ColumnWidthCallback)} [width] - Represents the width of the column (e.g., 100, '50%', or a callback function to calculate width).\n * @property {boolean} [forList] - Indicates whether the column is intended for display in list mode (optional, applicable only to gutter type columns).\n * @property {boolean} [forCard] - Indicates whether the column is intended for display in card mode (optional, applicable only to gutter type columns).\n * @property {ValidationCallback} [validation] - Callback function for column validation (optional). This function validates whether the value of the column is valid when edited.\n * @property {AccumulatorObject} [accumulator] - Object used for accumulating values of the column (optional, applicable only in grid mode). It specifies a function to automatically aggregate the values of the column for all records. The aggregated result is displayed in a row below the last record (accumulation record).\n * @property {FilterConfig} [filter] - Object representing the filter configuration of the column.\n * @property {(ImexConfig|boolean)} [imex] - Object or boolean value representing the configuration for importing and exporting column data.\n * @property {boolean} [multiple] - Indicates whether the column allows multiple selections or not (optional).\n * @property {boolean} [rowCount] - Indicates whether the column shows the row count or not (optional).\n */\nexport type ColumnConfig = {\n  type: string\n  name: string\n  /**\n   * \"gutter\" 타입의 컬럼인 경우, 등록된 gutter들 중의 하나의 이름을 명시합니다(type이 gutter인 경우에만 설정합니다).\n   * (e.g., 'button', 'sequence', 'row-selector', 'dirty', etc)\n   *\n   * \"Gutter\"는 테이블 형태에서 각 행의 왼쪽 또는 오른쪽에 위치한 추가적인 열(column)을 가리킵니다.\n   * 이 열은 주로 각 행(row)을 식별하거나 특정 작업을 수행하기 위한 버튼 또는 링크와 같은 요소를 표시하는 데 사용됩니다.\n   * Gutter 열은 주로 데이터 행에 대한 조작 또는 행의 상태를 나타내는 데 사용됩니다.\n   * 예를 들어, 테이블에서 각 행이 특정 작업을 수행하는 버튼을 포함할 때, 이러한 버튼이 Gutter 열에 배치될 수 있습니다.\n   * 또한 Gutter 열은 행을 선택하거나 행의 상태를 나타내는 체크박스를 포함할 수도 있습니다.\n   */\n  gutterName?: 'button' | 'sequence' | 'row-selector' | 'dirty'\n  title?: string\n  fixed?: boolean\n  /** [begin] only for button gutter column */\n  icon?: string\n  iconOnly?: boolean\n  danger?: boolean\n  /** [end] only for button gutter column */\n  header: HeaderConfig\n  record: RecordConfig\n  handlers: GristEventHandlerSet\n  label: LabelConfig\n  hidden?: boolean\n  sortable?: boolean\n  resizable?: boolean\n  width?: number | string | ColumnWidthCallback\n  forList?: boolean\n  forCard?: boolean\n  validation?: ValidationCallback\n  accumulator?: AccumulatorObject\n  filter?: FilterConfig\n  imex?: ImexConfig | boolean\n  multiple?: boolean\n  rowCount?: boolean\n  /** 특정 도구에 의해서 사용되는 옵션으로, 일반적인 용도로 사용되지 않음을 표현할 수 있다. */\n  unusable?: boolean\n  multiline?: boolean // 멀티라인 여부\n}\n\n/**\n * Callback function type for column validation.\n *\n * This function is used to validate whether the value of a column is valid when edited.\n *\n * @callback ValidationCallback\n * @param {any} after - The new value of the column after editing.\n * @param {any} before - The previous value of the column before editing.\n * @param {GristRecord} record - The record being edited.\n * @param {ColumnConfig} column - The configuration of the column being edited.\n * @returns {boolean} - Returns `true` if the value is valid, `false` otherwise.\n */\nexport type ValidationCallback = (\n  after: any,\n  before: any,\n  record: GristRecord,\n  column: ColumnConfig\n) => boolean | Promise<boolean>\n\n/**\n * Configuration options for column labels.\n *\n * The label for a column can be customized using various options.\n *\n * @typedef {string|boolean|Object} LabelConfig\n * @property {LabelRenderer} [renderer] - A custom renderer function for the column label.\n *\n * @example\n * // Using a string as a label:\n * const label: LabelConfig = \"Column Label\"; // Sets the label as \"Column Label\".\n *\n * // Using a boolean to determine label visibility:\n * const label: LabelConfig = true; // Shows the default label based on the header configuration.\n *\n * // Using a custom renderer function for the label:\n * const label: LabelConfig = {\n *   renderer: customLabelRenderer, // Specifies a custom renderer function.\n * };\n */\nexport type LabelConfig =\n  | string\n  | boolean\n  | {\n      renderer: LabelRenderer\n    }\n\n/**\n * Custom label renderer function for generating column labels.\n *\n * @callback LabelRenderer\n * @param {ColumnConfig} column - The column configuration object for which the label is being generated.\n * @returns {void}\n */\nexport type LabelRenderer = (column: ColumnConfig) => void\n\n/**\n * Custom callback function for calculating column width.\n *\n * @callback ColumnWidthCallback\n * @param {ColumnConfig} column - The column configuration object for which the width is being calculated.\n * @returns {string} - The calculated width as a string (e.g., '100', '50%').\n */\nexport type ColumnWidthCallback = (column: ColumnConfig) => string\n\n/**\n * Configuration for defining the header of a column.\n *\n * @typedef {Object} HeaderConfig\n * @property {HeaderRenderer} renderer - The function used to render the column header.\n * @property {string} [style] - Optional CSS style for the column header.\n * @property {string} [group] - Optional group identifier for the column header.\n * @property {string} [groupStyle] - Optional CSS style for the header group.\n */\nexport type HeaderConfig = {\n  renderer: HeaderRenderer\n  style?: string\n  group?: string\n  groupStyle?: string\n}\n\n/**\n * Function type for rendering column headers.\n *\n * @callback HeaderRenderer\n * @param {ColumnConfig} column - The column configuration object.\n * @returns {*} - The rendered header content.\n */\nexport type HeaderRenderer = (column: ColumnConfig) => any\n\n/**\n * Configuration for specifying default values for fields in a record.\n * Default values can be set using predefined value generator functions or custom user-defined functions.\n * This configuration allows you to define the default value generation method and any additional parameters.\n *\n * @typedef {Object|Function} DefaultValueFnConfig\n * @property {string} [name] - The name of the default value function to be used for the column.\n * @property {any[]} [params] - The parameters to be passed to the default value function.\n * @property {Function} [Function] - A custom user-defined function for generating default values.\n */\nexport type DefaultValueFnConfig =\n  | {\n      /**\n       * The name of the default value function to be used for the column.\n       */\n      name: string\n\n      /**\n       * The parameters to be passed to the default value function.\n       */\n      params?: any[]\n    }\n  | Function\n\n/**\n * Configuration for defining fields within a record.\n * Each field can have various settings such as rendering, editing, alignment, etc.\n * The 'defaultValue' property is used to specify the default value generation method and parameters.\n *\n * @typedef {Object} RecordConfig\n * @property {FieldRenderer} renderer - The rendering function for the field.\n * @property {FieldEditor|undefined} [editor] - The editing function for the field (optional).\n * @property {boolean|Function} [editable] - Specifies if the field is editable. It can be a boolean or a function (optional).\n * @property {boolean} [mandatory] - Specifies if the field is mandatory (optional).\n * @property {GristClassifier} classifier - A classifier function for the field.\n * @property {'left'|'right'|'center'} [align] - The alignment of the field's content (optional).\n * @property {*} options - Additional options for the field.\n * @property {string|undefined} [rowOptionField] - The name of a field for row-level options associated with this field (optional).\n * @property {DefaultValueFnConfig|undefined} [defaultValue] - Configuration for specifying the default value for the field.\n *                                                             It can be a predefined value generator function or a custom user-defined function (optional).\n * @property {Object.<string, *>|undefined} [extended] - Additional extended properties that can be added as needed for specific field configurations (optional).\n * @property {boolean} [wide] - Specifies if the field should occupy a larger width within the viewer or editor.\n *                              When set to `true`, the field will attempt to span across multiple columns or occupy more space horizontally.\n */\nexport type RecordConfig = {\n  renderer: FieldRenderer\n  editor?: FieldEditor\n  editable?: boolean | Function\n  mandatory?: boolean\n  disabled?: boolean | Function\n  classifier: GristClassifier\n  align?: 'left' | 'right' | 'center'\n  options: any\n  rowOptionField?: string\n  defaultValue?: DefaultValueFnConfig\n  wide?: boolean\n  [extended: string]: any\n}\n\n/**\n * A function type used for rendering the content of a field in various components.\n *\n * @callback FieldRenderer\n * @param {*} value - The value of the field to be rendered.\n * @param {ColumnConfig} column - The configuration of the column to which the field belongs.\n * @param {GristRecord} record - The record object containing the field's data.\n * @param {number} rowIndex - The index of the row to which the field belongs.\n * @param {DataGridField|RecordCard|DataCardGutter|DataCardField|DataListGutter|DataListField|RecordPartial|DataReportField|Element} owner - The component or element that owns the field.\n * @returns {OxGristRenderer|TemplateResult|string|void} - The rendered content, which can be of different types depending on the implementation.\n */\nexport type FieldRenderer = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  owner:\n    | DataGridField\n    | RecordCard\n    | DataCardGutter\n    | DataCardField\n    | DataListGutter\n    | DataListField\n    | RecordPartial\n    | DataReportField\n    | Element\n) => OxGristRenderer | TemplateResult | string | void\n\n/**\n * A function type used for defining a custom editor for a field in a data grid.\n *\n * @callback FieldEditor\n * @param {*} value - The current value of the field.\n * @param {ColumnConfig} column - The configuration of the column to which the field belongs.\n * @param {GristRecord} record - The record object containing the field's data.\n * @param {number} rowIndex - The index of the row to which the field belongs.\n * @param {DataGridField} field - The data grid field that owns the editor.\n * @returns {OxGristEditor} - The custom editor component.\n */\nexport type FieldEditor = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField\n) => OxGristEditor\n\n/**\n * A function type used for rendering the filter select options in a filter form.\n *\n * @callback FilterSelectRenderer\n * @param {ColumnConfig} column - The configuration of the column for which the filter is being rendered.\n * @param {(string|number|boolean|string[]|number[]|any|undefined)} value - The current value of the filter.\n * @param {Element} owner - The DOM element that owns the filter select renderer.\n * @returns {(TemplateResult|string|void)} - The rendered filter select options as a Lit HTML template result, a string, or nothing.\n */\nexport type FilterSelectRenderer = (\n  column: ColumnConfig,\n  value: string | number | boolean | string[] | number[] | any | undefined,\n  owner: Element\n) => TemplateResult | string | void\n\n/**\n * An object representing a set of event handler functions for various events in Grist.\n *\n * @typedef {Object} GristEventHandlerSet\n * @property {GristEventHandler} [click] - The click event handler function.\n * @property {GristEventHandler} [dblclick] - The double-click event handler function.\n * @property {GristEventHandler} [focus] - The focus event handler function.\n * @property {GristEventHandler} [contextmenu] - The context menu event handler function.\n */\nexport type GristEventHandlerSet = {\n  click?: GristEventHandler\n  dblclick?: GristEventHandler\n  focus?: GristEventHandler\n  contextmenu?: GristEventHandler\n}\n\n/**\n * Configuration options for defining how records are displayed in list mode in a Grist.\n *\n * @typedef {Object} ListConfig\n * @property {string} [thumbnail] - The name of the field to use as a thumbnail image for records in list mode.\n * @property {string[]} fields - An array of field names to display in the list mode.\n * @property {string[]} details - An array of field names to display as additional details in the list mode.\n */\nexport type ListConfig = {\n  thumbnail?: string\n  fields: string[]\n  details: string[]\n}\n\n/**\n * Configuration options for managing tree-like structures in a Grist table.\n *\n * @typedef {Object} TreeConfig\n * @property {string} [childrenProperty] - The property name that specifies the children of a record.\n * @property {boolean | Function} [expanded] - Specifies whether tree nodes are initially expanded or a function to determine the initial expansion state for a given record.\n */\nexport type TreeConfig = {\n  childrenProperty?: string\n  expanded?: boolean | ((x: GristRecord) => boolean)\n}\n\n/**\n * Configuration options for importing and exporting column data.\n *\n * @typedef {Object} ImexConfig\n * @property {string} header - The header text for the column in import/export settings.\n * @property {string} key - The key or identifier for the column in import/export settings.\n * @property {number} width - The width of the column in import/export settings.\n * @property {string} type - The data type of the column in import/export settings.\n */\nexport type ImexConfig = {\n  header: string\n  key: string\n  width: number\n  type: string\n}\n\n/**\n * Configuration options for defining rows within a Grist table or view.\n *\n * @typedef {Object} RowsConfig\n * @property {boolean} [accumulator] - Specifies whether an accumulator row should be displayed.\n * @property {boolean} appendable - Indicates whether new rows can be appended to the table.\n * @property {boolean} insertable - Indicates whether new rows can be inserted into the table.\n * @property {RowSelectableConfig} [selectable] - Configuration for row selection options.\n * @property {GroupConfig[]} groups - An array of group configuration options.\n * @property {string[]} totals - An array of field names for which totals should be calculated and displayed.\n * @property {GristClassifier} classifier - A function that classifies rows based on their attributes.\n * @property {GristEventHandlerSet} handlers - An object containing event handler functions for various row-level events.\n */\nexport type RowsConfig = {\n  accumulator?: boolean\n  appendable: boolean\n  editable: boolean\n  insertable: boolean\n  selectable?: RowSelectableConfig\n  groups: GroupConfig[]\n  totals: string[]\n  classifier: GristClassifier\n  handlers: GristEventHandlerSet\n}\n\n/**\n * A function used to classify and style individual records in a Grist table.\n *\n * @typedef {Function} GristClassifier\n *\n * @param {GristRecord} record - The record to be classified.\n * @param {number} rowIndex - The index of the row in the table.\n *\n * @returns {Object|void} An object containing classification properties or `void`.\n * - `emphasized` (optional): A boolean, string, or array of strings indicating the emphasis style.\n * - Additional properties can be added as needed for custom styling.\n */\nexport type GristClassifier = (\n  record: GristRecord,\n  rowIndex: number\n) => { emphasized?: boolean | string | string[]; [key: string]: any } | void\n\n/**\n * Configuration options for defining group headers in a Grist table.\n *\n * @typedef {Object} GroupConfig\n *\n * @property {string} align - The alignment of the group header ('left', 'center', or 'right').\n * @property {ColumnConfig} [titleColumn] - The column configuration used as the title of the group (optional).\n * @property {string} title - The title of the group.\n * @property {string} [value] - A value associated with the group (optional).\n * @property {string} [groupName] - The name of the group (optional).\n * @property {number} [row] - The row index where the group header should appear (optional).\n * @property {string|number} column - The column name or index where the group header should appear.\n * @property {number} rowspan - The number of rows the group header should span.\n * @property {number} [colspan] - The number of columns the group header should span (optional).\n */\nexport type GroupConfig = {\n  align: string\n  titleColumn?: ColumnConfig\n  title: string\n  value?: string\n  groupName?: string\n  row?: number\n  column: string | number\n  rowspan: number\n  colspan?: number\n}\n\n/**\n * Configuration options for specifying row selectability in a Grist table.\n *\n * @typedef {Object} RowSelectableConfig\n *\n * @property {boolean} [multiple] - Indicates whether multiple rows can be selected (optional).\n */\nexport type RowSelectableConfig = {\n  multiple?: boolean\n}\n\n/**\n * Represents a data record in Grist.\n *\n * @typedef {Object} GristRecord\n * @property {string} [id] - The unique identifier for the record.\n * @property {string} [name] - The name or label associated with the record.\n * @property {GristRecord[]} [children] - An array of child records, if applicable.\n * @property {number} [__seq__] - A numeric sequence identifier for the record.\n * @property {string} [__dirty__] - Indicates if the record is dirty (changed).\n * @property {boolean} [__selected__] - Indicates if the record is selected.\n * @property {object[]} [__changes__] - An array of changes made to the record.\n * @property {object} [__dirtyfields__] - An object representing dirty (changed) fields in the record.\n * @property {any} [__origin__] - The original data or source of the record.\n * @property {boolean} [__collapsed__] - Indicates if the record is collapsed (e.g., in a tree view).\n * @property {number} [__depth__] - The depth or level of the record in a hierarchical structure.\n * @property {'checked' | 'half-checked' | 'unchecked'} [__check_in_tree__] - Indicates the check state of the record in a tree view.\n * @property {GristRecord[]} [__children__] - An array of child records in a tree view.\n * @property {any} [key] - Additional custom properties specific to the record.\n */\nexport type GristRecord = {\n  id?: string\n  name?: string\n  children?: GristRecord[]\n  __seq__?: number\n  __dirty__?: string\n  __selected__?: boolean\n  __changes__?: object[]\n  __dirtyfields__?: { [key: string]: any }\n  __origin__?: any\n  __collapsed__?: boolean\n  __depth__?: number\n  __check_in_tree__?: 'checked' | 'half-checked' | 'unchecked'\n  __children__?: GristRecord[]\n  [key: string]: any\n}\n\n/**\n * Represents a set of data retrieved from a Grist table.\n *\n * @typedef {Object} GristData\n *\n * @property {number} [page] - The page number of the retrieved data (optional).\n * @property {number} [total] - The total number of records in the data source (optional).\n * @property {number} [limit] - The maximum number of records per page (optional).\n * @property {GristRecord[]} records - An array of fetched data records.\n */\nexport type GristData = {\n  page?: number\n  total?: number\n  limit?: number\n  records: GristRecord[]\n}\n\n/**\n * A function that determines whether a Grist record should be selected or not.\n *\n * @callback GristSelectFunction\n * @param {GristRecord} record - The Grist record to evaluate.\n * @returns {boolean} - `true` if the record should be selected, `false` otherwise.\n */\nexport type GristSelectFunction = (record: GristRecord) => boolean\n\n/**\n * Defines a type for personalized grid settings. It includes individual column settings and additional configurations specific to a user's grid view.\n *\n * @typedef {Object} PersonalGristPreference\n * @property {Partial<ColumnConfig>[]} [columns] - Partially defines the configuration for each column in the grid.\n *   Each element can include only some properties of the `ColumnConfig`, used for optionally overriding column settings.\n * @property {any} [key] - Allows for storing additional user-defined properties with dynamic keys.\n *   This property can include various custom settings beyond the grid configuration, and the keys can be freely defined.\n */\nexport type PersonalGristPreference = {\n  columns?: Partial<ColumnConfig>[]\n  filters?: FilterPreference[]\n  pagination?: PaginationConfig\n  sorters?: SortersConfig\n  mode?: 'GRID' | 'LIST' | 'CARD'\n  [key: string]: any\n}\n\nexport type FilterPreference = {\n  name: string\n  hidden?: boolean\n  value?: any\n}\n\nexport enum ValidationReason {\n  MANDATORY = 'MANDATORY',\n  FORMAT = 'FORMAT',\n  RANGE = 'RANGE',\n  UNIQUE = 'UNIQUE'\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AA6LA;;;;;;;;GAQG;AACH,MAAM,CAAN,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC5B,mCAAa,CAAA;IACb,yCAAmB,CAAA;IACnB,mCAAa,CAAA;AACf,CAAC,EAJW,kBAAkB,KAAlB,kBAAkB,QAI7B;AAknBD,MAAM,CAAN,IAAY,gBAKX;AALD,WAAY,gBAAgB;IAC1B,2CAAuB,CAAA;IACvB,qCAAiB,CAAA;IACjB,mCAAe,CAAA;IACf,qCAAiB,CAAA;AACnB,CAAC,EALW,gBAAgB,KAAhB,gBAAgB,QAK3B","sourcesContent":["import { TemplateResult } from 'lit-html'\n\nimport { 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 { OxGristEditor } from './editors/index.js'\nimport { QueryFilter, OxFiltersForm } from './filters/index.js'\nimport { OxGristRenderer } from './renderers/ox-grist-renderer.js'\n\n/**\n * Configuration object for defining the structure and behavior of a Grist table.\n *\n * @typedef {Object} GristConfig\n * @property {ColumnConfig[]} columns - An array of column configurations.\n * @property {RowsConfig} rows - Configuration for rows and their behavior.\n * @property {ListConfig} list - Configuration for the list view.\n * @property {TreeConfig} tree - Configuration for tree-related settings.\n * @property {PaginationConfig} [pagination] - Configuration for pagination settings (optional).\n * @property {SortersConfig} [sorters] - Configuration for sorting settings (optional).\n * @property {FiltersConfig} [filters] - Configuration for filtering settings (optional).\n */\nexport type GristConfig = {\n  columns: ColumnConfig[]\n  rows: RowsConfig\n  list: ListConfig\n  tree: TreeConfig\n  pagination?: PaginationConfig\n  sorters?: SortersConfig\n  filters?: FiltersConfig\n  /**\n   * 아직 아무것도 없을 때 화면이 하는 말.\n   *\n   * 전에는 「NO RECORDS」가 컴포넌트에 박혀 있었다. 그 문장은 다음에 무엇을 할지 알려 주지 않는다 —\n   * **비어 있는 화면이야말로** 「여기서 무엇을 만들 수 있고 그것이 무엇에 쓰이나」를 말해야 하는 자리이고,\n   * 처음 오는 사람이 가장 먼저 보는 화면이기도 하다.\n   *\n   * 정하지 않으면 예전 문장이 그대로 나온다.\n   */\n  emptyNote?: { title?: string; description?: string; icon?: string }\n}\n\n/**\n * Configuration object for specifying sorting options.\n *\n * @typedef {Object} SorterConfig\n * @property {string} name - The name of the sorting option.\n * @property {boolean} [desc] - Optional. Indicates whether the sorting is in descending order (optional).\n */\nexport type SorterConfig = { name: string; desc?: boolean }\n\n/**\n * Configuration array for specifying multiple sorting options.\n *\n * @typedef {SorterConfig[]} SortersConfig\n */\nexport type SortersConfig = SorterConfig[]\n\n/**\n * Enumeration of filter operators used to define filter conditions.\n *\n * @typedef {'search' | 'eq' | 'between' | 'gte' | 'lte' | 'is_not_true' | 'in' | 'like' | 'i_like' | 'noteq' |\n * 'is_empty_num_id' | 'is_blank' | 'is_present' | 'is_not_false' | 'is_true' | 'is_false' | 'is_not_null' |\n * 'is_null' | 'notin_with_null' | 'notin' | 'gt' | 'lt' | 'i_nlike' | 'nlike'} FilterOperator\n */\nexport type FilterOperator =\n  | 'search'\n  | 'eq'\n  | 'between'\n  | 'gte'\n  | 'lte'\n  | 'is_not_true'\n  | 'in'\n  | 'like'\n  | 'i_like'\n  | 'noteq'\n  | 'is_empty_num_id'\n  | 'is_blank'\n  | 'is_present'\n  | 'is_not_false'\n  | 'is_true'\n  | 'is_false'\n  | 'is_not_null'\n  | 'is_null'\n  | 'notin_with_null'\n  | 'notin'\n  | 'gt'\n  | 'lt'\n  | 'i_nlike'\n  | 'nlike'\n\nexport type SelectOptionObject =\n  | {\n      name: string\n      display?: never\n      value: string\n    }\n  | {\n      display: string\n      name?: never\n      value: string\n    }\n\nexport type SelectOption = SelectOptionObject | string\n\nexport type FilterChangedCallback = (value: any, form: OxFiltersForm) => boolean\n\n/**\n * Configuration object for specifying filter conditions.\n *\n * @typedef {Object} FilterConfigObject\n * @property {string} type - The type of the filter condition.\n * @property {FilterOperator} [operator] - The filter operator used to compare values (optional).\n * @property {Object} [options] - Additional options or parameters for the filter condition (optional).\n * @property {boolean|undefined} [hidden] - The hidden flag for the filter condition (optional).\n * @property {string|number|boolean|string[]|number[]|undefined} [value] - The value to compare with in the filter condition (optional).\n * @property {string} [label] - The label to display for the filter condition (optional).\n */\nexport type FilterConfigObject = {\n  type: string\n  operator?: FilterOperator\n  options?: { [key: string]: any }\n  value?: string | number | boolean | string[] | number[] | undefined\n  label?: string\n  boundTo?: string[]\n  hidden?: boolean\n  onchange?: FilterChangedCallback\n}\n\n/**\n * Configuration option for specifying filter conditions.\n *\n * The `FilterConfig` type can take one of the following forms:\n * - A `FilterConfigObject` representing a specific filter condition.\n * - A `FilterOperator` representing a predefined filter operator.\n * - A boolean value to enable or disable filtering for a specific column.\n *\n * @typedef {Object|FilterOperator|boolean} FilterConfig\n */\nexport type FilterConfig = FilterConfigObject | FilterOperator | boolean\n\n/**\n * Represents a filter condition with the following properties:\n *\n * - `name`: The name of the column or field being filtered.\n * - `operator`: The filter operator used for comparison.\n * - `value`: The value or values to compare against.\n *\n * @typedef {Object} FilterValue\n * @property {string} name - The name of the column or field.\n * @property {FilterOperator} operator - The filter operator.\n * @property {string|number|boolean|string[]|number[]|undefined} value - The value(s) to compare.\n */\nexport type FilterValue = {\n  name: string\n  operator: FilterOperator\n  value: string | number | boolean | string[] | number[] | undefined\n}\n\n/**\n * Configuration options for filters.\n *\n * @typedef {Object} FiltersConfig\n * @property {boolean} [header] - Specifies whether to provide filtering functionality in the header.\n */\nexport type FiltersConfig = {\n  header?: boolean\n}\n\n/**\n * Configuration options for pagination.\n *\n * @typedef {Object} PaginationConfig\n * @property {number} [page] - The current page number.\n * @property {number} [limit] - The maximum number of records to display per page.\n * @property {number[]} [pages] - An array of available page numbers.\n * @property {boolean} [infinite] - Specifies whether to use infinite scrolling for pagination.\n */\nexport type PaginationConfig = {\n  page?: number\n  limit?: number\n  pages?: number[]\n  infinite?: boolean\n}\n\n/**\n * Option to specify the inheritance behavior for including data from parent domains.\n *\n * - 'None': Do not include data from the parent domain.\n * - 'Include': Include data from the parent domain along with current domain data.\n * - 'Only': Include data only from the parent domain, excluding current domain data.\n *\n * @enum {string}\n */\nexport enum InheritedValueType {\n  None = 'None',\n  Include = 'Include',\n  Only = 'Only'\n}\n\n/**\n * Configuration options for fetching data from a data source.\n *\n * @typedef {Object} FetchOption\n * @property {number} [page] - The page number to retrieve.\n * @property {number} [limit] - The maximum number of records to retrieve per page.\n * @property {SortersConfig} [sorters] - An array of sorting configurations for data. Only one of these options needs to be set.\n * @property {SortersConfig} [sortings] - An array of sorting configurations for data. Only one of these options needs to be set.\n * @property {QueryFilter[]} [filters] - An array of filtering criteria.\n * @property {InheritedValueType} [inherited] - Specifies the inheritance behavior for including data from parent domains.\n * @property {object} [options] - Additional options for customizing data fetching behavior.\n */\nexport type FetchOption = {\n  page?: number\n  limit?: number\n  sorters?: SortersConfig\n  sortings?: SortersConfig\n  filters?: QueryFilter[]\n  inherited?: InheritedValueType\n  options?: object\n}\n\n/**\n * Represents the result of a data fetching operation.\n *\n * @typedef {Object} FetchResult\n * @property {number} [page] - The page number of the fetched data.\n * @property {number} [limit] - The maximum number of records per page.\n * @property {number} total - The total number of records in the data source.\n * @property {GristRecord[]} records - An array of fetched data records.\n */\nexport type FetchResult = {\n  page?: number\n  limit?: number\n  total: number\n  records: GristRecord[]\n} | void\n\n/**\n * A function that handles data fetching operations.\n *\n * @param param - The fetch options specifying how data should be retrieved.\n * @returns A promise that resolves to a `FetchResult`.\n */\nexport type FetchHandler = (param: FetchOption) => Promise<FetchResult>\n\n/**\n * Represents a Grist event handler function.\n *\n * @typedef {Function} GristEventHandler\n * @param {ColumnConfig[]} columns - An array of column configurations.\n * @param {GristData} [data] - The Grist data associated with the event.\n * @param {ColumnConfig} [column] - The column configuration related to the event (if applicable).\n * @param {GristRecord} [record] - The Grist record related to the event (if applicable).\n * @param {number} [rowIndex] - The index of the row related to the event (if applicable).\n * @param {any} [target] - The target element or object related to the event (if applicable).\n * @param {Event} [e] - The event object (if applicable).\n * @returns {void}\n */\nexport type GristEventHandler = (\n  columns: ColumnConfig[],\n  data?: GristData,\n  column?: ColumnConfig,\n  record?: GristRecord,\n  rowIndex?: number,\n  target?: any,\n  e?: Event\n) => void\n\n/**\n * Represents an accumulator function for data aggregation and accumulation.\n *\n * @typedef {string|'sum'|'avg'|'count'|'min'|'max'|Function} AccumulatorFunc\n * @param {GristData} data - The Grist data for aggregation.\n * @param {ColumnConfig} column - The column configuration for aggregation.\n * @returns {string|number} - The aggregated result.\n */\nexport type AccumulatorFunc =\n  | 'sum'\n  | 'avg'\n  | 'count'\n  | 'min'\n  | 'max'\n  | ((data: GristData, column: ColumnConfig) => string | number)\n\n/**\n * Type representing an accumulator function or configuration object.\n *\n * An accumulator is used for data aggregation and accumulation purposes. It can be either\n * a predefined accumulator function (e.g., 'sum', 'avg', 'count', etc.) or a configuration\n * object specifying the type of accumulator and labeling options.\n *\n * @typedef {AccumulatorFunc|{type: AccumulatorFunc, tag?: boolean}} AccumulatorObject\n * @property {AccumulatorFunc} [type] - The type of accumulator function or predefined function name.\n * @property {boolean} [tag] - An option for adding a label to represent the result of an aggregation function. This label is added in front of the aggregated value.\n *\n * @example\n * // Using a predefined accumulator function:\n * const accumulator: AccumulatorObject = 'sum'; // Represents a 'sum' accumulator.\n *\n * // Using an accumulator configuration object:\n * const accumulatorConfig: AccumulatorObject = {\n *   type: 'avg', // Specifies the type of accumulator ('avg' for average).\n *   tag: true,   // Option for adding a label to represent the result of an aggregation function. This label is added in front of the aggregated value.\n * };\n */\nexport type AccumulatorObject =\n  | AccumulatorFunc\n  | {\n      type: AccumulatorFunc\n      tag?: boolean\n    }\n\n/**\n * Type representing column configuration information.\n *\n * @typedef {object} ColumnConfig\n * @property {string} type - Represents the data type of the column (e.g., 'text', 'number', 'date', 'gutter', etc.).\n * @property {string} name - Represents the name of the column.\n * @property {('button'|'sequence'|'row-selector'|'dirty')} [gutterName] - If the column type is 'gutter', specifies the name of one of the registered gutters (only set when the type is 'gutter').\n * @property {boolean} [fixed] - In case of a grid type column, specifies whether the column's position should be fixed and unaffected by horizontal scrolling (optional).\n * @property {HeaderConfig} header - Object representing the header configuration of the column.\n * @property {RecordConfig} record - Object representing the record configuration of the column.\n * @property {GristEventHandlerSet} handlers - Object representing the Grist event handler settings.\n * @property {LabelConfig} label - Object representing the label configuration of the column. This property is used to represent the label of the column's information in list mode, card mode, and when displaying the column in a filter form (ox-filters-form).\n * @property {boolean} [hidden] - Indicates whether the column is hidden or not (optional).\n * @property {boolean} [sortable] - Indicates whether the column is sortable or not (optional). If this setting is true, the header provides the ability to toggle the sorting direction.\n * @property {boolean} [resizable] - Indicates whether the column is resizable or not (optional). This setting determines whether the column's width can be adjusted.\n * @property {(number|string|ColumnWidthCallback)} [width] - Represents the width of the column (e.g., 100, '50%', or a callback function to calculate width).\n * @property {boolean} [forList] - Indicates whether the column is intended for display in list mode (optional, applicable only to gutter type columns).\n * @property {boolean} [forCard] - Indicates whether the column is intended for display in card mode (optional, applicable only to gutter type columns).\n * @property {ValidationCallback} [validation] - Callback function for column validation (optional). This function validates whether the value of the column is valid when edited.\n * @property {AccumulatorObject} [accumulator] - Object used for accumulating values of the column (optional, applicable only in grid mode). It specifies a function to automatically aggregate the values of the column for all records. The aggregated result is displayed in a row below the last record (accumulation record).\n * @property {FilterConfig} [filter] - Object representing the filter configuration of the column.\n * @property {(ImexConfig|boolean)} [imex] - Object or boolean value representing the configuration for importing and exporting column data.\n * @property {boolean} [multiple] - Indicates whether the column allows multiple selections or not (optional).\n * @property {boolean} [rowCount] - Indicates whether the column shows the row count or not (optional).\n */\nexport type ColumnConfig = {\n  type: string\n  name: string\n  /**\n   * \"gutter\" 타입의 컬럼인 경우, 등록된 gutter들 중의 하나의 이름을 명시합니다(type이 gutter인 경우에만 설정합니다).\n   * (e.g., 'button', 'sequence', 'row-selector', 'dirty', etc)\n   *\n   * \"Gutter\" 는 테이블에서 각 행의 왼쪽이나 오른쪽에 놓이는 추가 열(column)을 뜻합니다.\n   * 이 열은 주로 각 행(row)을 식별하거나 특정 작업을 수행하기 위한 버튼 또는 링크와 같은 요소를 표시하는 데 사용됩니다.\n   * Gutter 열은 주로 데이터 행에 대한 조작 또는 행의 상태를 나타내는 데 사용됩니다.\n   * 예를 들어, 테이블에서 각 행이 특정 작업을 수행하는 버튼을 포함할 때, 이러한 버튼이 Gutter 열에 배치될 수 있습니다.\n   * 또한 Gutter 열은 행을 선택하거나 행의 상태를 나타내는 체크박스를 포함할 수도 있습니다.\n   */\n  gutterName?: 'button' | 'sequence' | 'row-selector' | 'dirty'\n  title?: string\n  fixed?: boolean\n  /** [begin] only for button gutter column */\n  icon?: string\n  iconOnly?: boolean\n  danger?: boolean\n  /** [end] only for button gutter column */\n  header: HeaderConfig\n  record: RecordConfig\n  handlers: GristEventHandlerSet\n  label: LabelConfig\n  hidden?: boolean\n  sortable?: boolean\n  resizable?: boolean\n  width?: number | string | ColumnWidthCallback\n  forList?: boolean\n  forCard?: boolean\n  validation?: ValidationCallback\n  accumulator?: AccumulatorObject\n  filter?: FilterConfig\n  imex?: ImexConfig | boolean\n  multiple?: boolean\n  rowCount?: boolean\n  /** 특정 도구에 의해서 사용되는 옵션으로, 일반적인 용도로 사용되지 않음을 표현할 수 있다. */\n  unusable?: boolean\n  multiline?: boolean // 멀티라인 여부\n}\n\n/**\n * Callback function type for column validation.\n *\n * This function is used to validate whether the value of a column is valid when edited.\n *\n * @callback ValidationCallback\n * @param {any} after - The new value of the column after editing.\n * @param {any} before - The previous value of the column before editing.\n * @param {GristRecord} record - The record being edited.\n * @param {ColumnConfig} column - The configuration of the column being edited.\n * @returns {boolean} - Returns `true` if the value is valid, `false` otherwise.\n */\nexport type ValidationCallback = (\n  after: any,\n  before: any,\n  record: GristRecord,\n  column: ColumnConfig\n) => boolean | Promise<boolean>\n\n/**\n * Configuration options for column labels.\n *\n * The label for a column can be customized using various options.\n *\n * @typedef {string|boolean|Object} LabelConfig\n * @property {LabelRenderer} [renderer] - A custom renderer function for the column label.\n *\n * @example\n * // Using a string as a label:\n * const label: LabelConfig = \"Column Label\"; // Sets the label as \"Column Label\".\n *\n * // Using a boolean to determine label visibility:\n * const label: LabelConfig = true; // Shows the default label based on the header configuration.\n *\n * // Using a custom renderer function for the label:\n * const label: LabelConfig = {\n *   renderer: customLabelRenderer, // Specifies a custom renderer function.\n * };\n */\nexport type LabelConfig =\n  | string\n  | boolean\n  | {\n      renderer: LabelRenderer\n      /** Same as HeaderConfig.text — the name itself, not what was drawn from it. */\n      text?: string\n    }\n\n/**\n * Custom label renderer function for generating column labels.\n *\n * @callback LabelRenderer\n * @param {ColumnConfig} column - The column configuration object for which the label is being generated.\n * @returns {void}\n */\nexport type LabelRenderer = (column: ColumnConfig) => void\n\n/**\n * Custom callback function for calculating column width.\n *\n * @callback ColumnWidthCallback\n * @param {ColumnConfig} column - The column configuration object for which the width is being calculated.\n * @returns {string} - The calculated width as a string (e.g., '100', '50%').\n */\nexport type ColumnWidthCallback = (column: ColumnConfig) => string\n\n/**\n * Configuration for defining the header of a column.\n *\n * @typedef {Object} HeaderConfig\n * @property {HeaderRenderer} renderer - The function used to render the column header.\n * @property {string} [style] - Optional CSS style for the column header.\n * @property {string} [group] - Optional group identifier for the column header.\n * @property {string} [groupStyle] - Optional CSS style for the header group.\n */\nexport type HeaderConfig = {\n  renderer: HeaderRenderer\n  /**\n   * The column's name as plain text.\n   *\n   * `renderer` returns whatever gets drawn — a lit template, an icon — and the name cannot be read\n   * back out of that. So a name given as a string in the config is kept here, for the places that\n   * need it outside of rendering: the accessible name of a cell, and header filter inputs.\n   */\n  text?: string\n  style?: string\n  group?: string\n  groupStyle?: string\n}\n\n/**\n * Function type for rendering column headers.\n *\n * @callback HeaderRenderer\n * @param {ColumnConfig} column - The column configuration object.\n * @returns {*} - The rendered header content.\n */\nexport type HeaderRenderer = (column: ColumnConfig) => any\n\n/**\n * Configuration for specifying default values for fields in a record.\n * Default values can be set using predefined value generator functions or custom user-defined functions.\n * This configuration allows you to define the default value generation method and any additional parameters.\n *\n * @typedef {Object|Function} DefaultValueFnConfig\n * @property {string} [name] - The name of the default value function to be used for the column.\n * @property {any[]} [params] - The parameters to be passed to the default value function.\n * @property {Function} [Function] - A custom user-defined function for generating default values.\n */\nexport type DefaultValueFnConfig =\n  | {\n      /**\n       * The name of the default value function to be used for the column.\n       */\n      name: string\n\n      /**\n       * The parameters to be passed to the default value function.\n       */\n      params?: any[]\n    }\n  | Function\n\n/**\n * Configuration for defining fields within a record.\n * Each field can have various settings such as rendering, editing, alignment, etc.\n * The 'defaultValue' property is used to specify the default value generation method and parameters.\n *\n * @typedef {Object} RecordConfig\n * @property {FieldRenderer} renderer - The rendering function for the field.\n * @property {FieldEditor|undefined} [editor] - The editing function for the field (optional).\n * @property {boolean|Function} [editable] - Specifies if the field is editable. It can be a boolean or a function (optional).\n * @property {boolean} [mandatory] - Specifies if the field is mandatory (optional).\n * @property {GristClassifier} classifier - A classifier function for the field.\n * @property {'left'|'right'|'center'} [align] - The alignment of the field's content (optional).\n * @property {*} options - Additional options for the field.\n * @property {string|undefined} [rowOptionField] - The name of a field for row-level options associated with this field (optional).\n * @property {DefaultValueFnConfig|undefined} [defaultValue] - Configuration for specifying the default value for the field.\n *                                                             It can be a predefined value generator function or a custom user-defined function (optional).\n * @property {Object.<string, *>|undefined} [extended] - Additional extended properties that can be added as needed for specific field configurations (optional).\n * @property {boolean} [wide] - Specifies if the field should occupy a larger width within the viewer or editor.\n *                              When set to `true`, the field will attempt to span across multiple columns or occupy more space horizontally.\n */\nexport type RecordConfig = {\n  renderer: FieldRenderer\n  editor?: FieldEditor\n  editable?: boolean | Function\n  mandatory?: boolean\n  disabled?: boolean | Function\n  classifier: GristClassifier\n  align?: 'left' | 'right' | 'center'\n  options: any\n  rowOptionField?: string\n  defaultValue?: DefaultValueFnConfig\n  wide?: boolean\n  [extended: string]: any\n}\n\n/**\n * A function type used for rendering the content of a field in various components.\n *\n * @callback FieldRenderer\n * @param {*} value - The value of the field to be rendered.\n * @param {ColumnConfig} column - The configuration of the column to which the field belongs.\n * @param {GristRecord} record - The record object containing the field's data.\n * @param {number} rowIndex - The index of the row to which the field belongs.\n * @param {DataGridField|RecordCard|DataCardGutter|DataCardField|DataListGutter|DataListField|RecordPartial|DataReportField|Element} owner - The component or element that owns the field.\n * @returns {OxGristRenderer|TemplateResult|string|void} - The rendered content, which can be of different types depending on the implementation.\n */\nexport type FieldRenderer = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  owner:\n    | DataGridField\n    | RecordCard\n    | DataCardGutter\n    | DataCardField\n    | DataListGutter\n    | DataListField\n    | RecordPartial\n    | DataReportField\n    | Element\n) => OxGristRenderer | TemplateResult | string | void\n\n/**\n * A function type used for defining a custom editor for a field in a data grid.\n *\n * @callback FieldEditor\n * @param {*} value - The current value of the field.\n * @param {ColumnConfig} column - The configuration of the column to which the field belongs.\n * @param {GristRecord} record - The record object containing the field's data.\n * @param {number} rowIndex - The index of the row to which the field belongs.\n * @param {DataGridField} field - The data grid field that owns the editor.\n * @returns {OxGristEditor} - The custom editor component.\n */\nexport type FieldEditor = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField\n) => OxGristEditor\n\n/**\n * A function type used for rendering the filter select options in a filter form.\n *\n * @callback FilterSelectRenderer\n * @param {ColumnConfig} column - The configuration of the column for which the filter is being rendered.\n * @param {(string|number|boolean|string[]|number[]|any|undefined)} value - The current value of the filter.\n * @param {Element} owner - The DOM element that owns the filter select renderer.\n * @returns {(TemplateResult|string|void)} - The rendered filter select options as a Lit HTML template result, a string, or nothing.\n */\nexport type FilterSelectRenderer = (\n  column: ColumnConfig,\n  value: string | number | boolean | string[] | number[] | any | undefined,\n  owner: Element\n) => TemplateResult | string | void\n\n/**\n * An object representing a set of event handler functions for various events in Grist.\n *\n * @typedef {Object} GristEventHandlerSet\n * @property {GristEventHandler} [click] - The click event handler function.\n * @property {GristEventHandler} [dblclick] - The double-click event handler function.\n * @property {GristEventHandler} [focus] - The focus event handler function.\n * @property {GristEventHandler} [contextmenu] - The context menu event handler function.\n */\nexport type GristEventHandlerSet = {\n  click?: GristEventHandler\n  dblclick?: GristEventHandler\n  focus?: GristEventHandler\n  contextmenu?: GristEventHandler\n}\n\n/**\n * Configuration options for defining how records are displayed in list mode in a Grist.\n *\n * @typedef {Object} ListConfig\n * @property {string} [thumbnail] - The name of the field to use as a thumbnail image for records in list mode.\n * @property {string[]} fields - An array of field names to display in the list mode.\n * @property {string[]} details - An array of field names to display as additional details in the list mode.\n */\nexport type ListConfig = {\n  thumbnail?: string\n  fields: string[]\n  details: string[]\n}\n\n/**\n * Configuration options for managing tree-like structures in a Grist table.\n *\n * @typedef {Object} TreeConfig\n * @property {string} [childrenProperty] - The property name that specifies the children of a record.\n * @property {boolean | Function} [expanded] - Specifies whether tree nodes are initially expanded or a function to determine the initial expansion state for a given record.\n */\nexport type TreeConfig = {\n  childrenProperty?: string\n  expanded?: boolean | ((x: GristRecord) => boolean)\n}\n\n/**\n * Configuration options for importing and exporting column data.\n *\n * @typedef {Object} ImexConfig\n * @property {string} header - The header text for the column in import/export settings.\n * @property {string} key - The key or identifier for the column in import/export settings.\n * @property {number} width - The width of the column in import/export settings.\n * @property {string} type - The data type of the column in import/export settings.\n */\nexport type ImexConfig = {\n  header: string\n  key: string\n  width: number\n  type: string\n}\n\n/**\n * Configuration options for defining rows within a Grist table or view.\n *\n * @typedef {Object} RowsConfig\n * @property {boolean} [accumulator] - Specifies whether an accumulator row should be displayed.\n * @property {boolean} appendable - Indicates whether new rows can be appended to the table.\n * @property {boolean} insertable - Indicates whether new rows can be inserted into the table.\n * @property {RowSelectableConfig} [selectable] - Configuration for row selection options.\n * @property {GroupConfig[]} groups - An array of group configuration options.\n * @property {string[]} totals - An array of field names for which totals should be calculated and displayed.\n * @property {GristClassifier} classifier - A function that classifies rows based on their attributes.\n * @property {GristEventHandlerSet} handlers - An object containing event handler functions for various row-level events.\n */\nexport type RowsConfig = {\n  accumulator?: boolean\n  appendable: boolean\n  editable: boolean\n  insertable: boolean\n  selectable?: RowSelectableConfig\n  groups: GroupConfig[]\n  totals: string[]\n  classifier: GristClassifier\n  handlers: GristEventHandlerSet\n}\n\n/**\n * A function used to classify and style individual records in a Grist table.\n *\n * @typedef {Function} GristClassifier\n *\n * @param {GristRecord} record - The record to be classified.\n * @param {number} rowIndex - The index of the row in the table.\n *\n * @returns {Object|void} An object containing classification properties or `void`.\n * - `emphasized` (optional): A boolean, string, or array of strings indicating the emphasis style.\n * - Additional properties can be added as needed for custom styling.\n */\nexport type GristClassifier = (\n  record: GristRecord,\n  rowIndex: number\n) => { emphasized?: boolean | string | string[]; [key: string]: any } | void\n\n/**\n * Configuration options for defining group headers in a Grist table.\n *\n * @typedef {Object} GroupConfig\n *\n * @property {string} align - The alignment of the group header ('left', 'center', or 'right').\n * @property {ColumnConfig} [titleColumn] - The column configuration used as the title of the group (optional).\n * @property {string} title - The title of the group.\n * @property {string} [value] - A value associated with the group (optional).\n * @property {string} [groupName] - The name of the group (optional).\n * @property {number} [row] - The row index where the group header should appear (optional).\n * @property {string|number} column - The column name or index where the group header should appear.\n * @property {number} rowspan - The number of rows the group header should span.\n * @property {number} [colspan] - The number of columns the group header should span (optional).\n */\nexport type GroupConfig = {\n  align: string\n  titleColumn?: ColumnConfig\n  title: string\n  value?: string\n  groupName?: string\n  row?: number\n  column: string | number\n  rowspan: number\n  colspan?: number\n}\n\n/**\n * Configuration options for specifying row selectability in a Grist table.\n *\n * @typedef {Object} RowSelectableConfig\n *\n * @property {boolean} [multiple] - Indicates whether multiple rows can be selected (optional).\n */\nexport type RowSelectableConfig = {\n  multiple?: boolean\n}\n\n/**\n * Represents a data record in Grist.\n *\n * @typedef {Object} GristRecord\n * @property {string} [id] - The unique identifier for the record.\n * @property {string} [name] - The name or label associated with the record.\n * @property {GristRecord[]} [children] - An array of child records, if applicable.\n * @property {number} [__seq__] - A numeric sequence identifier for the record.\n * @property {string} [__dirty__] - Indicates if the record is dirty (changed).\n * @property {boolean} [__selected__] - Indicates if the record is selected.\n * @property {object[]} [__changes__] - An array of changes made to the record.\n * @property {object} [__dirtyfields__] - An object representing dirty (changed) fields in the record.\n * @property {any} [__origin__] - The original data or source of the record.\n * @property {boolean} [__collapsed__] - Indicates if the record is collapsed (e.g., in a tree view).\n * @property {number} [__depth__] - The depth or level of the record in a hierarchical structure.\n * @property {'checked' | 'half-checked' | 'unchecked'} [__check_in_tree__] - Indicates the check state of the record in a tree view.\n * @property {GristRecord[]} [__children__] - An array of child records in a tree view.\n * @property {any} [key] - Additional custom properties specific to the record.\n */\nexport type GristRecord = {\n  id?: string\n  name?: string\n  children?: GristRecord[]\n  __seq__?: number\n  __dirty__?: string\n  __selected__?: boolean\n  __changes__?: object[]\n  __dirtyfields__?: { [key: string]: any }\n  __origin__?: any\n  __collapsed__?: boolean\n  __depth__?: number\n  __check_in_tree__?: 'checked' | 'half-checked' | 'unchecked'\n  __children__?: GristRecord[]\n  [key: string]: any\n}\n\n/**\n * Represents a set of data retrieved from a Grist table.\n *\n * @typedef {Object} GristData\n *\n * @property {number} [page] - The page number of the retrieved data (optional).\n * @property {number} [total] - The total number of records in the data source (optional).\n * @property {number} [limit] - The maximum number of records per page (optional).\n * @property {GristRecord[]} records - An array of fetched data records.\n */\nexport type GristData = {\n  page?: number\n  total?: number\n  limit?: number\n  records: GristRecord[]\n}\n\n/**\n * A function that determines whether a Grist record should be selected or not.\n *\n * @callback GristSelectFunction\n * @param {GristRecord} record - The Grist record to evaluate.\n * @returns {boolean} - `true` if the record should be selected, `false` otherwise.\n */\nexport type GristSelectFunction = (record: GristRecord) => boolean\n\n/**\n * Defines a type for personalized grid settings. It includes individual column settings and additional configurations specific to a user's grid view.\n *\n * @typedef {Object} PersonalGristPreference\n * @property {Partial<ColumnConfig>[]} [columns] - Partially defines the configuration for each column in the grid.\n *   Each element can include only some properties of the `ColumnConfig`, used for optionally overriding column settings.\n * @property {any} [key] - Allows for storing additional user-defined properties with dynamic keys.\n *   This property can include various custom settings beyond the grid configuration, and the keys can be freely defined.\n */\nexport type PersonalGristPreference = {\n  columns?: Partial<ColumnConfig>[]\n  filters?: FilterPreference[]\n  pagination?: PaginationConfig\n  sorters?: SortersConfig\n  mode?: 'GRID' | 'LIST' | 'CARD'\n  [key: string]: any\n}\n\nexport type FilterPreference = {\n  name: string\n  hidden?: boolean\n  value?: any\n}\n\nexport enum ValidationReason {\n  MANDATORY = 'MANDATORY',\n  FORMAT = 'FORMAT',\n  RANGE = 'RANGE',\n  UNIQUE = 'UNIQUE'\n}\n"]}

package/dist/src/utils/column-text.d.ts

@@ -0,0 +1,18 @@
+import { ColumnConfig } from '../types.js';
+/**
+ * The column's name as plain text.
+ *
+ * A header renderer returns a lit template, so the name cannot be read back out of it. Three places
+ * need the name outside of rendering:
+ *
+ *   screen readers      an input inside a cell has to say which column it edits
+ *   header filters      the boxes under the header row had no name at all
+ *   the IME buffer      which cell the keyboard is currently on
+ *
+ * This is the single source. Callers must not spell the name out again — then a change to `header`
+ * leaves the old name behind everywhere else.
+ *
+ * Lookup order matches what a sighted reader sees: header, then label, then `column.name`.
+ * `column.name` is a developer identifier and may be meaningless, but it beats no name.
+ */
+export declare function columnText(column?: Partial<ColumnConfig> | null): string;