@operato/data-grist 2.0.0-alpha.12 → 2.0.0-alpha.121

package/docs/default-value/value-generator/hour-time-generator.md

@@ -30,14 +30,47 @@ function getRelativeHourTime(params: RelativeHourTimeParams = {}): string | numb
 ## 예제
 
 ```typescript
+/* get Date() object */
 const relativeHourTime = getRelativeHourTime({
   relativeHour: 2,
   relativeSeconds: 120,
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 
 console.log(relativeHourTime)
 ```
 
+```typescript
+/* text format style */
+const relativeHourTime = getRelativeHourTime({
+  relativeHour: 2,
+  relativeSeconds: 120,
+  timeZone: 'Asia/Seoul',
+  format: 'h:mm:ss'
+})
+
+console.log(relativeHourTime)
+```
+
+```typescript
+/* Intl.DateTimeFormat style */
+const relativeHourTime = getRelativeHourTime({
+  relativeHour: 2,
+  relativeSeconds: 120,
+  timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
+  format: {
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    hour12: false,
+    timeZone: 'America/Los_Angeles'
+  }
+})
+
+console.log(relativeHourTime)
+```
+
 이 코드는 현재 시간으로부터 2시간 후와 2분 후의 시간을 `'Asia/Seoul'` 시간대에서의 Date 객체로 반환합니다.

package/docs/default-value/value-generator/minute-time-generator.md

@@ -30,14 +30,47 @@ function getRelativeMinuteTime(params: RelativeMinuteTimeParams = {}): string |
 ## 예제
 
 ```typescript
+/* get Date() object */
 const relativeMinuteTime = getRelativeMinuteTime({
   relativeMinutes: 15,
   relativeSeconds: 30,
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 
 console.log(relativeMinuteTime)
 ```
 
+```typescript
+/* text format style */
+const relativeMinuteTime = getRelativeMinuteTime({
+  relativeMinutes: 15,
+  relativeSeconds: 30,
+  timeZone: 'Asia/Seoul',
+  format: 'mm:ss'
+})
+
+console.log(relativeMinuteTime)
+```
+
+```typescript
+/* Intl.DateTimeFormat style */
+const relativeMinuteTime = getRelativeMinuteTime({
+  relativeMinutes: 15,
+  relativeSeconds: 30,
+  timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
+  format: {
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    hour12: false,
+    timeZone: 'America/Los_Angeles'
+  }
+})
+
+console.log(relativeMinuteTime)
+```
+
 이 코드는 현재 시간으로부터 15분 30초 후의 시간을 `'Asia/Seoul'` 시간대에서의 Date 객체로 반환합니다.

package/docs/default-value/value-generator/month-date-generator.md

@@ -14,7 +14,7 @@ function getRelativeMonthDate(params: RelativeMonthDateParams = {}): string | nu
 
 - `relativeMonths?: number`: 상대적인 월을 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 월 수를 나타냅니다. 예를 들어, 이 값이 3이면 현재 날짜로부터 3개월 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 월을 의미합니다.
 
-- `relativeDates?: number`: 상대적인 일수를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 2이면 현재 날짜로부터 2일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
+- `relativeDays?: number`: 상대적인 일수를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 2이면 현재 날짜로부터 2일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
 
 - `timeZone?: string`: 날짜를 얻고자 하는 시간대를 나타내는 문자열입니다. 이 값이 주어지지 않으면 사용자의 로컬 시간대가 사용됩니다.
 
@@ -30,10 +30,12 @@ function getRelativeMonthDate(params: RelativeMonthDateParams = {}): string | nu
 ## 예제
 
 ```typescript
+/* get Date() object */
 const relativeMonthDate = getRelativeMonthDate({
   relativeMonths: 2,
-  relativeDates: 3,
+  relativeDays: 3,
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 

package/docs/default-value/value-generator/now-generator.md

@@ -28,12 +28,41 @@ function getCurrentTime(
 ## 예제
 
 ```typescript
+/* get Date() object */
 const currentTime = getCurrentTime({
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 
 console.log(currentTime)
 ```
 
+```typescript
+/* text format style */
+const relativeDate = getCurrentTime({
+  relativeDays: 1,
+  timeZone: 'Asia/Seoul',
+  format: 'YYYY-MM-DD'
+})
+
+console.log(relativeDate)
+```
+
+```typescript
+/* Intl.DateTimeFormat style */
+const relativeDate = getCurrentTime({
+  relativeDays: 1,
+  timeZone: 'Asia/Seoul',
+  loclae: 'en-CA' /* YYYY-MM-DD format */,
+  format: {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  }
+})
+
+console.log(relativeDate)
+```
+
 이 코드는 현재 시간을 `'Asia/Seoul'` 시간대에서의 Date 객체로 반환합니다.

package/docs/default-value/value-generator/time-generator.md

@@ -28,13 +28,44 @@ function getRelativeTime(params: RelativeTimeParams = {}): string | number | Dat
 ## 예제
 
 ```typescript
+/* get Date() object */
 const relativeTime = getRelativeTime({
   relativeSeconds: 3600,
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 
 console.log(relativeTime)
 ```
 
+```typescript
+/* text format style */
+const relativeTime = getRelativeTime({
+  relativeSeconds: 3600,
+  timeZone: 'Asia/Seoul',
+  format: 'hh:mm:ss'
+})
+
+console.log(relativeTime)
+```
+
+```typescript
+/* Intl.DateTimeFormat style */
+const relativeTime = getRelativeTime({
+  relativeSeconds: 3600,
+  timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
+  format: {
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    hour12: false,
+    timeZone: 'America/Los_Angeles'
+  }
+})
+
+console.log(relativeTime)
+```
+
 이 코드는 현재 시간으로부터 1시간 후의 시간을 `'Asia/Seoul'` 시간대에서의 Date 객체로 반환합니다.

package/docs/default-value/value-generator/today-generator.md

@@ -28,12 +28,41 @@ function getToday(
 ## 예제
 
 ```typescript
+/* get Date() object */
 const todayDate = getToday({
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 
 console.log(todayDate)
 ```
 
+```typescript
+/* text format style */
+const relativeDate = getToday({
+  relativeDays: 1,
+  timeZone: 'Asia/Seoul',
+  format: 'YYYY-MM-DD'
+})
+
+console.log(relativeDate)
+```
+
+```typescript
+/* Intl.DateTimeFormat style */
+const relativeDate = getToday({
+  relativeDays: 1,
+  timeZone: 'Asia/Seoul',
+  loclae: 'en-CA' /* YYYY-MM-DD format */,
+  format: {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  }
+})
+
+console.log(relativeDate)
+```
+
 이 코드는 오늘의 날짜를 `'Asia/Seoul'` 시간대에서의 Date 객체로 반환합니다.

package/docs/default-value/value-generator/week-date-generator.md

@@ -14,7 +14,7 @@ function getRelativeWeekDate(params: RelativeWeekDateParams = {}): string | numb
 
 - `relativeWeeks?: number`: 상대적인 주를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 주 수를 나타냅니다. 예를 들어, 이 값이 3이면 현재 날짜로부터 3주 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 주를 의미합니다.
 
-- `relativeDates?: number`: 상대적인 일수를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 2이면 현재 날짜로부터 2일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
+- `relativeDays?: number`: 상대적인 일수를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 2이면 현재 날짜로부터 2일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
 
 - `timeZone?: string`: 날짜를 얻고자 하는 시간대를 나타내는 문자열입니다. 이 값이 주어지지 않으면 사용자의 로컬 시간대가 사용됩니다.
 
@@ -30,14 +30,45 @@ function getRelativeWeekDate(params: RelativeWeekDateParams = {}): string | numb
 ## 예제
 
 ```typescript
+/* get Date() object */
 const relativeWeekDate = getRelativeWeekDate({
   relativeWeeks: 2,
-  relativeDates: 3,
+  relativeDays: 3,
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 
 console.log(relativeWeekDate)
 ```
 
+```typescript
+/* text format style */
+const relativeWeekDate = getRelativeWeekDate({
+  relativeWeeks: 2,
+  relativeDays: 3,
+  timeZone: 'Asia/Seoul',
+  format: 'YYYY-MM-DD'
+})
+
+console.log(relativeWeekDate)
+```
+
+```typescript
+/* Intl.DateTimeFormat style */
+const relativeWeekDate = getRelativeWeekDate({
+  relativeWeeks: 2,
+  relativeDays: 3,
+  timeZone: 'Asia/Seoul',
+  loclae: 'en-CA' /* YYYY-MM-DD format */,
+  format: {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  }
+})
+
+console.log(relativeWeekDate)
+```
+
 이 코드는 현재 시간으로부터 2주 후와 3일 후의 날짜를 `'Asia/Seoul'` 시간대에서의 Date 객체로 반환합니다.

package/docs/default-value/value-generator/year-date-generator.md

@@ -14,7 +14,7 @@ function getRelativeYearDate(params: RelativeYearDateParams = {}): string | numb
 
 - `relativeYears?: number`: 상대적인 연도를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 연도 수를 나타냅니다. 예를 들어, 이 값이 3이면 현재 날짜로부터 3년 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 연도를 의미합니다.
 
-- `relativeDates?: number`: 상대적인 일수를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 2이면 현재 날짜로부터 2일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
+- `relativeDays?: number`: 상대적인 일수를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 2이면 현재 날짜로부터 2일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
 
 - `timeZone?: string`: 날짜를 얻고자 하는 시간대를 나타내는 문자열입니다. 이 값이 주어지지 않으면 사용자의 로컬 시간대가 사용됩니다.
 
@@ -30,14 +30,45 @@ function getRelativeYearDate(params: RelativeYearDateParams = {}): string | numb
 ## 예제
 
 ```typescript
+/* get Date() object */
 const relativeYearDate = getRelativeYearDate({
   relativeYears: 2,
-  relativeDates: 3,
+  relativeDays: 3,
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 
 console.log(relativeYearDate)
 ```
 
+```typescript
+/* text format style */
+const relativeYearDate = getRelativeYearDate({
+  relativeYears: 2,
+  relativeDays: 3,
+  timeZone: 'Asia/Seoul',
+  format: 'YYYY-MM-DD'
+})
+
+console.log(relativeYearDate)
+```
+
+```typescript
+/* Intl.DateTimeFormat style */
+const relativeYearDate = getRelativeYearDate({
+  relativeYears: 2,
+  relativeDays: 3,
+  timeZone: 'Asia/Seoul',
+  loclae: 'en-CA' /* YYYY-MM-DD format */,
+  format: {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  }
+})
+
+console.log(relativeYearDate)
+```
+
 이 코드는 현재 시간으로부터 2년 후와 3일 후의 날짜를 `'Asia/Seoul'` 시간대에서의 Date 객체로 반환합니다.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "2.0.0-alpha.12",
+  "version": "2.0.0-alpha.121",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "main": "dist/index.js",
@@ -21,7 +21,8 @@
     "./ox-report.js": "./dist/src/data-report.js",
     "./ox-filters-form.js": "./dist/src/filters/filters-form.js",
     "./ox-sorters-control.js": "./dist/src/sorters/sorters-control.js",
-    "./ox-record-creator.js": "./dist/src/record-view/record-creator.js"
+    "./ox-record-creator.js": "./dist/src/record-view/record-creator.js",
+    "./ox-grist-personalizer.js": "./dist/src/personalizer/ox-grist-personalizer.js"
   },
   "typesVersions": {
     "*": {
@@ -39,6 +40,9 @@
       ],
       "ox-record-creator.js": [
         "dist/src/record-view/record-creator.d.ts"
+      ],
+      "ox-grist-personalizer.js": [
+        "dist/src/personalizer/ox-grist-personalizer.d.ts"
       ]
     }
   },
@@ -55,35 +59,36 @@
     "storybook:build": "tsc && build-storybook"
   },
   "dependencies": {
-    "@material/mwc-icon": "^0.27.0",
-    "@operato/headroom": "^2.0.0-alpha.0",
-    "@operato/input": "^2.0.0-alpha.11",
-    "@operato/popup": "^2.0.0-alpha.9",
-    "@operato/pull-to-refresh": "^2.0.0-alpha.0",
-    "@operato/styles": "^2.0.0-alpha.0",
-    "@operato/utils": "^2.0.0-alpha.8",
+    "@material/web": "^1.4.0",
+    "@operato/headroom": "^2.0.0-alpha.111",
+    "@operato/input": "^2.0.0-alpha.120",
+    "@operato/popup": "^2.0.0-alpha.120",
+    "@operato/pull-to-refresh": "^2.0.0-alpha.111",
+    "@operato/styles": "^2.0.0-alpha.118",
+    "@operato/time-calculator": "^2.0.0-alpha.111",
+    "@operato/utils": "^2.0.0-alpha.111",
     "i18next": "^21.5.4",
     "json5": "^2.2.0",
-    "lit": "^2.5.0",
+    "lit": "^3.1.2",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.8.1",
+    "@custom-elements-manifest/analyzer": "^0.9.2",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@open-wc/eslint-config": "^10.0.0",
+    "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^3.1.6",
     "@types/lodash-es": "^4.17.5",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "@web/dev-server": "^0.3.0",
-    "@web/dev-server-storybook": "^0.7.4",
-    "@web/test-runner": "^0.17.0",
+    "@web/dev-server-storybook": "^2.0.1",
+    "@web/test-runner": "^0.18.0",
     "concurrently": "^8.0.1",
     "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.3.0",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.4.1",
+    "eslint-config-prettier": "^9.1.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
     "tslib": "^2.3.1",
     "typescript": "^5.0.4"
   },
@@ -100,5 +105,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "ccec2e280e088b9a2976a496d2a196c085d948ba"
+  "gitHead": "966388e24e41832927ac3df25012ecd67620c00c"
 }

package/src/configure/column-builder.ts

@@ -58,6 +58,7 @@ export const buildColumn = (column: any): ColumnConfig => {
   var { renderer: recordRenderer, editor, editable, classifier } = record || {}
 
   recordRenderer = getRenderer(recordRenderer || column.type)
+
   if (editable !== false && typeof editor !== 'function') {
     editor = getEditor(column.type)
   }

package/src/configure/rows-option-builder.ts

@@ -3,7 +3,16 @@ import { RowsConfig } from '../types'
 import { getGristEventHandler } from '../handlers'
 
 export const buildRowsOptions = (rows: any): RowsConfig => {
-  var { appendable = true, insertable = false, selectable, groups = [], totals = [], classifier, accumulator } = rows
+  var {
+    appendable = true,
+    editable = true,
+    insertable = false,
+    selectable,
+    groups = [],
+    totals = [],
+    classifier,
+    accumulator
+  } = rows
 
   /* handler */
   var { click, dblclick, focus } = rows.handlers || {}
@@ -14,6 +23,7 @@ export const buildRowsOptions = (rows: any): RowsConfig => {
   return {
     accumulator,
     appendable,
+    editable,
     insertable,
     selectable,
     groups,

package/src/configure/zero-config.ts

@@ -45,6 +45,7 @@ export const ZERO_COLUMN: ColumnConfig = {
 export const ZERO_ROWS: RowsConfig = {
   appendable: false,
   insertable: false,
+  editable: false,
   groups: ZERO_GROUPS,
   totals: ZERO_TOTALS,
   classifier: ZERO_CLASSIFIER,

package/src/data-card/data-card-gutter-menu.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './data-card-gutter.js'
 
 import { css, html, LitElement } from 'lit'
@@ -19,7 +19,7 @@ class DataCardGutterMenu extends LitElement {
       padding: 4px;
     }
 
-    mwc-icon {
+    md-icon {
       flex: 1;
       margin: 0;
       margin-bottom: 1px;
@@ -29,7 +29,7 @@ class DataCardGutterMenu extends LitElement {
       font-size: var(--grid-record-fontsize);
     }
 
-    mwc-icon:hover {
+    md-icon:hover {
       cursor: pointer;
       color: var(--grid-record-color-hover);
     }
@@ -41,11 +41,11 @@ class DataCardGutterMenu extends LitElement {
   @property() clickHandler!: EventListener
   @property() dblclickHandler!: EventListener
 
-  @query('mwc-icon') icon!: Element
+  @query('md-icon') icon!: Element
 
   render() {
     return html`
-      <mwc-icon @click=${(e: Event) => this.open(e)}>more_horiz</mwc-icon>
+      <md-icon @click=${(e: Event) => this.open(e)}>more_horiz</md-icon>
       <slot></slot>
     `
   }

package/src/data-card/data-card.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '../empty-note'
 import './record-card'
 
@@ -42,7 +42,7 @@ export class DataCard extends DataManipulator {
       }
 
       #upward {
-        --mdc-icon-size: 26px;
+        --md-icon-size: 26px;
         position: absolute;
         top: var(--data-card-fab-position-vertical);
         right: var(--data-card-fab-position-horizontal);
@@ -142,7 +142,7 @@ export class DataCard extends DataManipulator {
       ${this.empty ? html` <ox-empty-note title="NO RECORDS"></ox-empty-note> ` : html``}
       ${this.isTop
         ? html``
-        : html` <mwc-icon id="upward" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}
+        : html` <md-icon id="upward" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `}
     `
   }
 

package/src/data-card/event-handlers/record-card-click-handler.ts

@@ -29,6 +29,6 @@ export function recordCardClickHandler(this: RecordCard, e: MouseEvent): void {
     rowsClick(this.config.columns, this.data, column, this.record, rowIndex, target)
   } else {
     /* content 가 클릭된 경우 - 레코드뷰 팝업을 실행한다. */
-    this.popupRecordView()
+    this.config.rows.editable && this.popupRecordView()
   }
 }

package/src/data-card/record-card.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './data-card-field'
 import '../record-view'
 import './data-card-gutter'
@@ -183,7 +183,7 @@ export class RecordCard extends LitElement {
     }
 
     return html`
-      ${dirtyIcon ? html` <mwc-icon dirty>${dirtyIcon}</mwc-icon> ` : html``}
+      ${dirtyIcon ? html` <md-icon dirty>${dirtyIcon}</md-icon> ` : html``}
       ${thumbnailColumn
         ? html` <ox-card-field
             thumbnail
@@ -216,46 +216,44 @@ export class RecordCard extends LitElement {
                 ></ox-card-gutter>
               `
             : gutters.length > 2
-            ? html`
-                <ox-card-gutter-menu
-                  .gutters=${gutters}
-                  .rowIndex=${rowIndex}
-                  .record=${record}
-                  .clickHandler=${this.clickHandler}
-                  .dblclickHandler=${this.dblclickHandler}
-                ></ox-card-gutter-menu>
-              `
-            : html``}
+              ? html`
+                  <ox-card-gutter-menu
+                    .gutters=${gutters}
+                    .rowIndex=${rowIndex}
+                    .record=${record}
+                    .clickHandler=${this.clickHandler}
+                    .dblclickHandler=${this.dblclickHandler}
+                  ></ox-card-gutter-menu>
+                `
+              : html``}
         </div>
 
         <div brief>
           ${briefFields.map(
-            (column, idx) =>
-              html`
-                <ox-card-field
-                  .rowIndex=${rowIndex}
-                  .column=${column}
-                  .record=${record}
-                  .value=${record[column?.name || '']}
-                  ?name=${idx == 0}
-                  ?desc=${idx == 1}
-                ></ox-card-field>
-              `
+            (column, idx) => html`
+              <ox-card-field
+                .rowIndex=${rowIndex}
+                .column=${column}
+                .record=${record}
+                .value=${record[column?.name || '']}
+                ?name=${idx == 0}
+                ?desc=${idx == 1}
+              ></ox-card-field>
+            `
           )}
         </div>
         ${detailFields.length > 0
           ? html`
               <div detail>
                 ${detailFields.map(
-                  (column, idx) =>
-                    html`
-                      <ox-card-field
-                        .rowIndex=${rowIndex}
-                        .column=${column}
-                        .record=${record}
-                        .value=${record[column?.name || '']}
-                      ></ox-card-field>
-                    `
+                  (column, idx) => html`
+                    <ox-card-field
+                      .rowIndex=${rowIndex}
+                      .column=${column}
+                      .record=${record}
+                      .value=${record[column?.name || '']}
+                    ></ox-card-field>
+                  `
                 )}
               </div>
             `