@operato/data-grist 1.0.0-alpha.5 → 1.0.0-alpha.50

package/CHANGELOG.md

@@ -3,6 +3,402 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.50](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.49...v1.0.0-alpha.50) (2022-04-04)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.49](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.48...v1.0.0-alpha.49) (2022-04-04)
+
+
+### :bug: Bug Fix
+
+* lit@2.2.1 ([6707752](https://github.com/hatiolab/operato/commit/6707752907d24f7ecbe248cba18a4b18cfda282f))
+
+
+
+## [1.0.0-alpha.48](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.47...v1.0.0-alpha.48) (2022-04-03)
+
+
+### :bug: Bug Fix
+
+* event handling for clicking magnify icon in filters-form - fetch data forcely ([cc17a05](https://github.com/hatiolab/operato/commit/cc17a056807a6e5018ee89d1f6be91e463671bac))
+
+
+### :rocket: New Features
+
+* support copy and paste in data-grid ([9dd686f](https://github.com/hatiolab/operato/commit/9dd686f6817500863a1c36140ef01b39fcafef9f))
+* support data-grist block selection ([b9238ae](https://github.com/hatiolab/operato/commit/b9238ae7848b9824466b2ce843d56d3eac789104))
+* support data-grist block selection ([537577a](https://github.com/hatiolab/operato/commit/537577a160abc0aa0d9df4374eca0ddcadf0bd7f))
+
+
+
+## [1.0.0-alpha.47](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.46...v1.0.0-alpha.47) (2022-04-02)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.46](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.45...v1.0.0-alpha.46) (2022-04-02)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.45](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.44...v1.0.0-alpha.45) (2022-03-31)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.44](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.43...v1.0.0-alpha.44) (2022-03-31)
+
+
+### :rocket: New Features
+
+* select member method for ox-grist ([e18bca1](https://github.com/hatiolab/operato/commit/e18bca1756fc78acdff7c820d4b350f05cb7114f))
+
+
+
+## [1.0.0-alpha.43](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.42...v1.0.0-alpha.43) (2022-03-30)
+
+
+### :rocket: New Features
+
+* url-params-sensitive property for data-grist ([25de73e](https://github.com/hatiolab/operato/commit/25de73e0b4498fb301d0d94e420c7acbbd70856f))
+
+
+### :bug: Bug Fix
+
+* filters-change event handling in data-grist ([8e03e4c](https://github.com/hatiolab/operato/commit/8e03e4cbcb837102d4df8a803b2b20a30b67271e))
+* ox-grist-renderer-color ([2554cfa](https://github.com/hatiolab/operato/commit/2554cfad505e22798448426177c2da4ff9e7dba6))
+
+
+
+## [1.0.0-alpha.42](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.41...v1.0.0-alpha.42) (2022-03-29)
+
+
+### :bug: Bug Fix
+
+* data-grist sorters, filters ([960830a](https://github.com/hatiolab/operato/commit/960830ab877ada67cf8701fce7aa1740ec83bcc2))
+* filter-select in data-grid-header ([61e2aa0](https://github.com/hatiolab/operato/commit/61e2aa060e41f61bef9ebc7d5890f84632ee73bf))
+
+
+### :rocket: New Features
+
+* add filters and sorters property in grist ([099757f](https://github.com/hatiolab/operato/commit/099757fd211411795120ed4c2fa9e23e8e2d398a))
+* url-params-sensitive property for data-grist ([8bae25f](https://github.com/hatiolab/operato/commit/8bae25f210c0185f0b307dbda4797b568231618a))
+* url-params-sensitive property for data-grist ([32523c0](https://github.com/hatiolab/operato/commit/32523c0ec4e69c603317c6a05eba0c0338663886))
+
+
+
+## [1.0.0-alpha.41](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.40...v1.0.0-alpha.41) (2022-03-27)
+
+
+### :rocket: New Features
+
+* grid-header filter integrated with filters-form ([ebecb71](https://github.com/hatiolab/operato/commit/ebecb71133d38bb8358909660319de6cb5b45d7d))
+
+
+
+## [1.0.0-alpha.40](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.39...v1.0.0-alpha.40) (2022-03-26)
+
+
+### :bug: Bug Fix
+
+* filter-select support object type select options ([ab5a877](https://github.com/hatiolab/operato/commit/ab5a877157979bc96b252b6b527b4666c22e0b09))
+
+
+
+## [1.0.0-alpha.39](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.38...v1.0.0-alpha.39) (2022-03-25)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.38](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.37...v1.0.0-alpha.38) (2022-03-25)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.37](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.36...v1.0.0-alpha.37) (2022-03-25)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.36](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.35...v1.0.0-alpha.36) (2022-03-21)
+
+
+### :bug: Bug Fix
+
+* datetime grist-renderer ([d551750](https://github.com/hatiolab/operato/commit/d55175091f9b928c56b02a087922c2fe8dcad9a9))
+
+
+
+## [1.0.0-alpha.35](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.34...v1.0.0-alpha.35) (2022-03-21)
+
+
+### :bug: Bug Fix
+
+* prevent text overflow of grist-renderers ([73e7538](https://github.com/hatiolab/operato/commit/73e7538f9a0c8941689fefd3d4212529a75c413d))
+
+
+
+## [1.0.0-alpha.34](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.33...v1.0.0-alpha.34) (2022-03-20)
+
+
+### :bug: Bug Fix
+
+* data-grist field styles for tooltip ([5f90650](https://github.com/hatiolab/operato/commit/5f90650ef36023834af3d3bf027cd300cc6bffc1))
+
+
+
+## [1.0.0-alpha.33](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.32...v1.0.0-alpha.33) (2022-03-19)
+
+
+### :bug: Bug Fix
+
+* ox-grist json5 renderer ([1ff95e2](https://github.com/hatiolab/operato/commit/1ff95e21ac1b467620327a2a3f7aacd105b83414))
+
+
+
+## [1.0.0-alpha.32](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.31...v1.0.0-alpha.32) (2022-03-19)
+
+
+### :bug: Bug Fix
+
+* typo ([2f2e3fc](https://github.com/hatiolab/operato/commit/2f2e3fcce771dcbfe2f1d09cbd25638094a6dc99))
+
+
+
+## [1.0.0-alpha.31](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.30...v1.0.0-alpha.31) (2022-03-19)
+
+
+### :bug: Bug Fix
+
+* ox-grist-renderer support class type renderer (refer ox-grist-renderer-progress) ([ad7c8e1](https://github.com/hatiolab/operato/commit/ad7c8e1b453d19af9daa13ae4eb7c2059d85dfbb))
+
+
+
+## [1.0.0-alpha.30](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.29...v1.0.0-alpha.30) (2022-03-18)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.29](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.28...v1.0.0-alpha.29) (2022-03-17)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.28](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.26...v1.0.0-alpha.28) (2022-03-17)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.27](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.26...v1.0.0-alpha.27) (2022-03-17)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.26](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.25...v1.0.0-alpha.26) (2022-03-17)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.25](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.24...v1.0.0-alpha.25) (2022-03-17)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.24](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.23...v1.0.0-alpha.24) (2022-03-17)
+
+
+### :bug: Bug Fix
+
+* refactoring grist-editor, property-editor and input ([ea7431a](https://github.com/hatiolab/operato/commit/ea7431a5e2dfd96ef392c1905e9622df7c2ef88c))
+
+
+
+## [1.0.0-alpha.23](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.22...v1.0.0-alpha.23) (2022-03-17)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.22](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.21...v1.0.0-alpha.22) (2022-03-17)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.21](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.20...v1.0.0-alpha.21) (2022-03-16)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.20](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.19...v1.0.0-alpha.20) (2022-03-15)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.19](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.18...v1.0.0-alpha.19) (2022-03-14)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.18](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.17...v1.0.0-alpha.18) (2022-03-14)
+
+
+### :bug: Bug Fix
+
+* data-grist click eventhandler and thumbnail layout ([c232bbf](https://github.com/hatiolab/operato/commit/c232bbf3d6ca90b48cc4ddb0a5ddb839acb14cdb))
+
+
+
+## [1.0.0-alpha.17](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.16...v1.0.0-alpha.17) (2022-03-13)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.16](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.15...v1.0.0-alpha.16) (2022-03-13)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.15](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.14...v1.0.0-alpha.15) (2022-03-13)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.14](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.13...v1.0.0-alpha.14) (2022-03-13)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.13](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.12...v1.0.0-alpha.13) (2022-03-13)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.12](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.11...v1.0.0-alpha.12) (2022-03-13)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.11](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.10...v1.0.0-alpha.11) (2022-03-12)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.10](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.9...v1.0.0-alpha.10) (2022-03-12)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.9](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.8...v1.0.0-alpha.9) (2022-03-12)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.8](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.7...v1.0.0-alpha.8) (2022-03-11)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.7](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.6...v1.0.0-alpha.7) (2022-03-11)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [1.0.0-alpha.6](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.5...v1.0.0-alpha.6) (2022-03-11)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
 ## [1.0.0-alpha.5](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.4...v1.0.0-alpha.5) (2022-03-11)
 
 **Note:** Version bump only for package @operato/data-grist

package/demo/index.html

@@ -106,7 +106,9 @@
                     : `http://deadpool.hatiolab.com/${start + idx + 1}`,
                 json5: {
                   abc: 'abc',
-                  value: 123
+                  value: 123,
+                  xyz: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
+                  quantity: 6782341
                 },
                 createdAt: Date.now(),
                 updatedAt: Date.now()
@@ -119,7 +121,7 @@
         list: {
           thumbnail: 'thumbnail',
           fields: ['name', 'description'],
-          details: ['role', 'email']
+          details: ['role', 'email', 'json5']
         },
         columns: [
           {
@@ -283,6 +285,16 @@
             type: 'json5',
             name: 'json5',
             header: 'JSON5',
+            label: true,
+            width: 200
+          },
+          {
+            type: 'progress',
+            name: 'rate',
+            header: 'progress',
+            record: {
+              editable: true
+            },
             width: 200
           },
           {
@@ -291,7 +303,13 @@
             header: 'thumbnail',
             record: {
               editable: true
-            }
+            },
+            handlers: {
+              click: () => {
+                console.log('thumbnail clicked...')
+              }
+            },
+            width: 200
           },
           {
             type: 'datetime',
@@ -372,6 +390,8 @@
 
         static get properties() {
           return {
+            sorters: Object,
+            filters: Object,
             mode: String
           }
         }
@@ -384,9 +404,16 @@
           const mode = this.mode || 'CARD'
 
           return html`
-            <ox-grist .config=${config} .mode=${mode} auto-fetch .fetchHandler=${fetchHandler}>
+            <ox-grist
+              .config=${config}
+              .mode=${mode}
+              auto-fetch
+              url-params-sensitive
+              .fetchHandler=${fetchHandler}
+              @filters-change=${e => console.log('changed', e.detail)}
+            >
               <div id="filters" slot="headroom">
-                <ox-filters-form @filters-change=${e => console.log('changed', e.detail)}></ox-filters-form>
+                <ox-filters-form></ox-filters-form>
               </div>
 
               <div slot="headroom" id="headroom">
@@ -445,7 +472,7 @@
       customElements.define('grist-demo', GristDemo)
 
       setTimeout(() => {
-        render(html` <grist-demo mode="LIST"></grist-demo> `, document.querySelector('#demo'))
+        render(html` <grist-demo mode="GRID"></grist-demo> `, document.querySelector('#demo'))
       })
     </script>
 

package/dist/src/const.d.ts

@@ -1,13 +1 @@
 export declare const NOOP: () => void;
-export declare enum KEYCODE {
-    KEY_LEFT = 37,
-    KEY_UP = 38,
-    KEY_RIGHT = 39,
-    KEY_DOWN = 40,
-    KEY_ENTER = 13,
-    KEY_TAP = 9,
-    KEY_BACKSPACE = 8,
-    KEY_ESC = 27,
-    KEY_PAGEUP = 33,
-    KEY_PAGEDOWN = 34
-}

package/dist/src/const.js

@@ -1,15 +1,2 @@
 export const NOOP = function () { };
-export var KEYCODE;
-(function (KEYCODE) {
-    KEYCODE[KEYCODE["KEY_LEFT"] = 37] = "KEY_LEFT";
-    KEYCODE[KEYCODE["KEY_UP"] = 38] = "KEY_UP";
-    KEYCODE[KEYCODE["KEY_RIGHT"] = 39] = "KEY_RIGHT";
-    KEYCODE[KEYCODE["KEY_DOWN"] = 40] = "KEY_DOWN";
-    KEYCODE[KEYCODE["KEY_ENTER"] = 13] = "KEY_ENTER";
-    KEYCODE[KEYCODE["KEY_TAP"] = 9] = "KEY_TAP";
-    KEYCODE[KEYCODE["KEY_BACKSPACE"] = 8] = "KEY_BACKSPACE";
-    KEYCODE[KEYCODE["KEY_ESC"] = 27] = "KEY_ESC";
-    KEYCODE[KEYCODE["KEY_PAGEUP"] = 33] = "KEY_PAGEUP";
-    KEYCODE[KEYCODE["KEY_PAGEDOWN"] = 34] = "KEY_PAGEDOWN";
-})(KEYCODE || (KEYCODE = {}));
 //# sourceMappingURL=const.js.map

package/dist/src/const.js.map

@@ -1 +1 @@
-{"version":3,"file":"const.js","sourceRoot":"","sources":["../../src/const.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG,cAAa,CAAC,CAAA;AAElC,MAAM,CAAN,IAAY,OAWX;AAXD,WAAY,OAAO;IACjB,8CAAa,CAAA;IACb,0CAAW,CAAA;IACX,gDAAc,CAAA;IACd,8CAAa,CAAA;IACb,gDAAc,CAAA;IACd,2CAAW,CAAA;IACX,uDAAiB,CAAA;IACjB,4CAAY,CAAA;IACZ,kDAAe,CAAA;IACf,sDAAiB,CAAA;AACnB,CAAC,EAXW,OAAO,KAAP,OAAO,QAWlB","sourcesContent":["export const NOOP = function () {}\n\nexport enum KEYCODE {\n  KEY_LEFT = 37,\n  KEY_UP = 38,\n  KEY_RIGHT = 39,\n  KEY_DOWN = 40,\n  KEY_ENTER = 13,\n  KEY_TAP = 9,\n  KEY_BACKSPACE = 8,\n  KEY_ESC = 27,\n  KEY_PAGEUP = 33,\n  KEY_PAGEDOWN = 34\n}\n"]}
+{"version":3,"file":"const.js","sourceRoot":"","sources":["../../src/const.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG,cAAa,CAAC,CAAA","sourcesContent":["export const NOOP = function () {}\n"]}

package/dist/src/data-card/data-card-field.d.ts

@@ -1,5 +1,5 @@
-import { LitElement, TemplateResult } from 'lit';
 import { ColumnConfig, GristRecord } from '../types';
+import { LitElement, TemplateResult } from 'lit';
 export declare class DataCardField extends LitElement {
     static styles: import("lit").CSSResult[];
     align?: string;

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

@@ -1,7 +1,8 @@
 import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { LitElement, css, html } from 'lit';
 import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config';
+import { customElement, property } from 'lit/decorators.js';
+import { TooltipStyles } from '@operato/styles';
 let DataCardField = class DataCardField extends LitElement {
     constructor() {
         super(...arguments);
@@ -22,6 +23,7 @@ let DataCardField = class DataCardField extends LitElement {
     }
 };
 DataCardField.styles = [
+    TooltipStyles,
     css `
       :host {
         display: flex;
@@ -31,11 +33,15 @@ DataCardField.styles = [
 
         white-space: nowrap;
 
-        padding: 1px 7px 1px 0;
-
         font: inherit;
       }
 
+      :host([thumbnail]) > * {
+        object-fit: contain;
+        max-width: 100%;
+        max-height: 100%;
+      }
+
       * {
         flex: 1;
         margin: 0;
@@ -51,14 +57,17 @@ DataCardField.styles = [
         flex: none;
         margin: 0 auto;
       }
+
       :host([name]) {
         display: block;
       }
+
       :host([name]) label {
         display: block;
         font: var(--data-card-item-name-label-font);
         color: var(--data-card-item-name-label-color);
       }
+
       label {
         flex: none;
         width: 33%;
@@ -66,6 +75,7 @@ DataCardField.styles = [
         font: var(--data-card-item-etc-label-font);
         text-transform: capitalize;
       }
+
       label + a {
         display: block;
         min-width: 100%;

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

@@ -1 +1 @@
-{"version":3,"file":"data-card-field.js","sourceRoot":"","sources":["../../../src/data-card/data-card-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAInE,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAiE8B,WAAM,GAAgB,WAAW,CAAA;QACjC,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAkBnD,CAAC;IAfC,MAAM;QACJ,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAE9C,IAAI,EACF,KAAK,EACL,MAAM,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,EACrC,GAAG,MAAM,CAAA;QAEV,IAAI,OAAO,KAAK,IAAI,QAAQ,EAAE;YAC5B,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;YACvC,OAAO,IAAI,CAAA,UAAU,aAAa,EAAE,WAAW,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;SACvG;aAAM;YACL,OAAO,IAAI,CAAA,GAAG,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;SACtE;IACH,CAAC;CACF,CAAA;AApFQ,oBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2DF;CACF,CAAA;AAE8B;IAA9B,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;4CAAe;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAe;AApE/B,aAAa;IADzB,aAAa,CAAC,eAAe,CAAC;GAClB,aAAa,CAqFzB;SArFY,aAAa","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord } from '../types'\n\n@customElement('ox-card-field')\nexport class DataCardField extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        position: relative;\n\n        white-space: nowrap;\n\n        padding: 1px 7px 1px 0;\n\n        font: inherit;\n      }\n\n      * {\n        flex: 1;\n        margin: 0;\n\n        width: 100px;\n        overflow: hidden;\n\n        text-overflow: ellipsis;\n        text-align: left;\n      }\n\n      *[center] {\n        flex: none;\n        margin: 0 auto;\n      }\n      :host([name]) {\n        display: block;\n      }\n      :host([name]) label {\n        display: block;\n        font: var(--data-card-item-name-label-font);\n        color: var(--data-card-item-name-label-color);\n      }\n      label {\n        flex: none;\n        width: 33%;\n        padding-bottom: 2px;\n        font: var(--data-card-item-etc-label-font);\n        text-transform: capitalize;\n      }\n      label + a {\n        display: block;\n        min-width: 100%;\n      }\n\n      input[type='checkbox'],\n      input[type='radio'] {\n        zoom: var(--grist-input-zoom);\n      }\n\n      @media only screen and (max-width: 460px) {\n        *[center] {\n          margin: initial;\n        }\n      }\n    `\n  ]\n\n  @property({ attribute: true }) align?: string\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Number }) rowIndex: number = -1\n  @property({ type: Object }) value?: object\n\n  render(): TemplateResult {\n    var { value, column, record, rowIndex } = this\n\n    var {\n      label,\n      record: { renderer: recordRenderer }\n    } = column\n\n    if (typeof label == 'object') {\n      let { renderer: labelRenderer } = label\n      return html`<label>${labelRenderer()}</label>${recordRenderer(value, column, record, rowIndex, this)}`\n    } else {\n      return html`${recordRenderer(value, column, record, rowIndex, this)}`\n    }\n  }\n}\n"]}
+{"version":3,"file":"data-card-field.js","sourceRoot":"","sources":["../../../src/data-card/data-card-field.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAG/C,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QA0E8B,WAAM,GAAgB,WAAW,CAAA;QACjC,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAkBnD,CAAC;IAfC,MAAM;QACJ,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAE9C,IAAI,EACF,KAAK,EACL,MAAM,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,EACrC,GAAG,MAAM,CAAA;QAEV,IAAI,OAAO,KAAK,IAAI,QAAQ,EAAE;YAC5B,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;YACvC,OAAO,IAAI,CAAA,UAAU,aAAa,EAAE,WAAW,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;SACvG;aAAM;YACL,OAAO,IAAI,CAAA,GAAG,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;SACtE;IACH,CAAC;CACF,CAAA;AA7FQ,oBAAM,GAAG;IACd,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmEF;CACF,CAAA;AAE8B;IAA9B,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;4CAAe;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAe;AA7E/B,aAAa;IADzB,aAAa,CAAC,eAAe,CAAC;GAClB,aAAa,CA8FzB;SA9FY,aAAa","sourcesContent":["import { ColumnConfig, GristRecord } from '../types'\nimport { LitElement, TemplateResult, css, html } from 'lit'\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { TooltipStyles } from '@operato/styles'\n\n@customElement('ox-card-field')\nexport class DataCardField extends LitElement {\n  static styles = [\n    TooltipStyles,\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        position: relative;\n\n        white-space: nowrap;\n\n        font: inherit;\n      }\n\n      :host([thumbnail]) > * {\n        object-fit: contain;\n        max-width: 100%;\n        max-height: 100%;\n      }\n\n      * {\n        flex: 1;\n        margin: 0;\n\n        width: 100px;\n        overflow: hidden;\n\n        text-overflow: ellipsis;\n        text-align: left;\n      }\n\n      *[center] {\n        flex: none;\n        margin: 0 auto;\n      }\n\n      :host([name]) {\n        display: block;\n      }\n\n      :host([name]) label {\n        display: block;\n        font: var(--data-card-item-name-label-font);\n        color: var(--data-card-item-name-label-color);\n      }\n\n      label {\n        flex: none;\n        width: 33%;\n        padding-bottom: 2px;\n        font: var(--data-card-item-etc-label-font);\n        text-transform: capitalize;\n      }\n\n      label + a {\n        display: block;\n        min-width: 100%;\n      }\n\n      input[type='checkbox'],\n      input[type='radio'] {\n        zoom: var(--grist-input-zoom);\n      }\n\n      @media only screen and (max-width: 460px) {\n        *[center] {\n          margin: initial;\n        }\n      }\n    `\n  ]\n\n  @property({ attribute: true }) align?: string\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Number }) rowIndex: number = -1\n  @property({ type: Object }) value?: object\n\n  render(): TemplateResult {\n    var { value, column, record, rowIndex } = this\n\n    var {\n      label,\n      record: { renderer: recordRenderer }\n    } = column\n\n    if (typeof label == 'object') {\n      let { renderer: labelRenderer } = label\n      return html`<label>${labelRenderer()}</label>${recordRenderer(value, column, record, rowIndex, this)}`\n    } else {\n      return html`${recordRenderer(value, column, record, rowIndex, this)}`\n    }\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"data-card.js","sourceRoot":"","sources":["../../../src/data-card/data-card.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,eAAe,CAAA;AAEtB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAIrD,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,eAAe;IAA7C;;QAsD+B,UAAK,GAAY,KAAK,CAAA;QAChB,aAAQ,GAAkB,EAAE,CAAA;QAEvD,WAAM,GAAW,CAAC,CAAA;QAClB,WAAM,GAAW,EAAE,CAAA;QACnB,UAAK,GAAW,CAAC,CAAA;IAqE3B,CAAC;IAnEC,YAAY,CAAC,OAA6B;QACxC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;QAEjB,wBAAwB;QACxB,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE;YAClC,MAAM,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAA;YAC3C,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAA;YACtC,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAA;YAEvC,IAAI,iBAAiB,IAAI,YAAY,GAAG,gBAAgB,GAAG,CAAC,EAAE;gBAC5D,8BAA8B;gBAC9B,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,CAAA;gBAEnD,IAAI,IAAI,CAAC,KAAK,GAAG,QAAQ,EAAE;oBACzB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;iBACtF;aACF;YAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,CAAA;QAClC,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACzB,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAA;YAClB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAA;SACf;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACvB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAA;YACjC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAA;YAClC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;YACnC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAA;SACjC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,OAAO,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAEjC,OAAO,IAAI,CAAA;QACP,OAAO,CAAC,GAAG,CACX,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAA;;sBAEZ,IAAI,CAAC,MAAM;oBACb,IAAI,CAAC,IAAI;sBACP,MAAM;wBACJ,QAAQ;4BACJ,MAAM,CAAC,cAAc,CAAC;qBAC7B,MAAM,CAAC,WAAW,CAAC;;SAE/B,CACF;QACC,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,IAAI,CAAA,iCAAiC,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,2BAA2B;KAClG,CAAA;IACH,CAAC;IAED,OAAO,CAAC,CAAQ;QACd,IAAI,CAAC,SAAS,GAAG,CAAC,CAAA;QAElB,CAAC,CAAC,eAAe,EAAE,CAAA;IACrB,CAAC;IAED,IAAI,mBAAmB;QACrB,OAAO,IAAI,CAAA;IACb,CAAC;CACF,CAAA;AA/HQ,eAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiDF;CACF,CAAA;AAE4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAAuB;AACxB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;0CAAqC;AAvDpD,QAAQ;IADpB,aAAa,CAAC,SAAS,CAAC;GACZ,QAAQ,CAgIpB;SAhIY,QAAQ","sourcesContent":["import '@material/mwc-icon'\nimport './record-card'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { DataManipulator } from '../data-manipulator'\nimport { GristRecord } from '../types'\n\n@customElement('ox-card')\nexport class DataCard extends DataManipulator {\n  static styles = [\n    css`\n      :host {\n        background-color: var(--data-card-background-color);\n        overflow-y: auto;\n        padding: var(--padding-wide);\n\n        display: grid;\n        grid-template-columns: var(--data-card-template);\n        grid-template-rows: min-content;\n        grid-gap: var(--margin-wide);\n      }\n\n      ox-record-card {\n        align-items: stretch;\n        background-color: var(--data-card-record-card-background-color);\n        border: var(--data-card-record-card-border);\n        border-radius: var(--data-card-record-card-border-radius);\n      }\n      ox-record-card:hover {\n        border: var(--data-card-record-card-border-hover);\n        box-shadow: var(--data-card-record-card-boxshadow-hover);\n      }\n\n      [selected-row] {\n        background-color: var(--data-card-record-card-selected-border);\n      }\n\n      #upward {\n        --mdc-icon-size: 26px;\n        position: absolute;\n        top: var(--data-card-fab-position-vertical);\n        right: var(--data-card-fab-position-horizontal);\n        background-color: rgba(255, 255, 255, 0.7);\n        border-radius: 20px;\n        color: var(--data-card-fab-color);\n        box-shadow: var(--data-card-fab-shadow);\n        padding: 7px;\n      }\n\n      slot {\n        width: 100%;\n      }\n\n      @media screen and (max-width: 460px) {\n        #setting {\n          grid-template-columns: 1fr;\n          grid-template-rows: 1fr 1fr;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) isTop: boolean = false\n  @property({ type: Array }) private _records: GristRecord[] = []\n\n  private _total: number = 0\n  private _limit: number = 20\n  private _page: number = 1\n\n  firstUpdated(changes: PropertyValues<this>) {\n    this.isTop = true\n\n    /* infinite scrolling */\n    this.addEventListener('scroll', e => {\n      const totalScrollHeight = this.scrollHeight\n      const screenHeight = this.offsetHeight\n      const currentScrollTop = this.scrollTop\n\n      if (totalScrollHeight <= screenHeight + currentScrollTop + 1) {\n        /* 마지막 페이지까지 계속 페이지를 증가시킨다. */\n        var lastPage = Math.ceil(this._total / this._limit)\n\n        if (this._page < lastPage) {\n          this.dispatchEvent(new CustomEvent('attach-page', { bubbles: true, composed: true }))\n        }\n      }\n\n      this.isTop = this.scrollTop == 0\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      this._records = []\n      this._page = 1\n    }\n\n    if (changes.has('data')) {\n      this._records = this.data.records\n      this._total = this.data.total || 0\n      this._limit = this.data.limit || 20\n      this._page = this.data.page || 0\n    }\n  }\n\n  render() {\n    var records = this._records || []\n\n    return html`\n      ${records.map(\n        (record, rowIndex) => html`\n          <ox-record-card\n            .config=${this.config}\n            .data=${this.data}\n            .record=${record}\n            .rowIndex=${rowIndex}\n            ?selected-row=${record['__selected__']}\n            ?dirty=${record['__dirty__']}\n          ></ox-record-card>\n        `\n      )}\n      ${this.isTop\n        ? html``\n        : html` <mwc-icon id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}\n    `\n  }\n\n  gotoTop(e: Event) {\n    this.scrollTop = 0\n\n    e.stopPropagation()\n  }\n\n  get pullToRefreshTarget() {\n    return this\n  }\n}\n"]}
+{"version":3,"file":"data-card.js","sourceRoot":"","sources":["../../../src/data-card/data-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport './record-card'\n\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { DataManipulator } from '../data-manipulator'\nimport { GristRecord } from '../types'\n\n@customElement('ox-card')\nexport class DataCard extends DataManipulator {\n  static styles = [\n    css`\n      :host {\n        background-color: var(--data-card-background-color);\n        overflow-y: auto;\n        padding: var(--padding-wide);\n\n        display: grid;\n        grid-template-columns: var(--data-card-template);\n        grid-template-rows: min-content;\n        grid-gap: var(--margin-wide);\n      }\n\n      ox-record-card {\n        align-items: stretch;\n        background-color: var(--data-card-record-card-background-color);\n        border: var(--data-card-record-card-border);\n        border-radius: var(--data-card-record-card-border-radius);\n      }\n      ox-record-card:hover {\n        border: var(--data-card-record-card-border-hover);\n        box-shadow: var(--data-card-record-card-boxshadow-hover);\n      }\n\n      [selected-row] {\n        background-color: var(--data-card-record-card-selected-border);\n      }\n\n      #upward {\n        --mdc-icon-size: 26px;\n        position: absolute;\n        top: var(--data-card-fab-position-vertical);\n        right: var(--data-card-fab-position-horizontal);\n        background-color: rgba(255, 255, 255, 0.7);\n        border-radius: 20px;\n        color: var(--data-card-fab-color);\n        box-shadow: var(--data-card-fab-shadow);\n        padding: 7px;\n      }\n\n      slot {\n        width: 100%;\n      }\n\n      @media screen and (max-width: 460px) {\n        #setting {\n          grid-template-columns: 1fr;\n          grid-template-rows: 1fr 1fr;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) isTop: boolean = false\n  @property({ type: Array }) private _records: GristRecord[] = []\n\n  private _total: number = 0\n  private _limit: number = 20\n  private _page: number = 1\n\n  firstUpdated(changes: PropertyValues<this>) {\n    this.isTop = true\n\n    /* infinite scrolling */\n    this.addEventListener('scroll', e => {\n      const totalScrollHeight = this.scrollHeight\n      const screenHeight = this.offsetHeight\n      const currentScrollTop = this.scrollTop\n\n      if (totalScrollHeight <= screenHeight + currentScrollTop + 1) {\n        /* 마지막 페이지까지 계속 페이지를 증가시킨다. */\n        var lastPage = Math.ceil(this._total / this._limit)\n\n        if (this._page < lastPage) {\n          this.dispatchEvent(new CustomEvent('attach-page', { bubbles: true, composed: true }))\n        }\n      }\n\n      this.isTop = this.scrollTop == 0\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      this._records = []\n      this._page = 1\n    }\n\n    if (changes.has('data')) {\n      this._records = this.data.records\n      this._total = this.data.total || 0\n      this._limit = this.data.limit || 20\n      this._page = this.data.page || 0\n    }\n  }\n\n  render() {\n    var records = this._records || []\n\n    return html`\n      ${records.map(\n        (record, rowIndex) => html`\n          <ox-record-card\n            .config=${this.config}\n            .data=${this.data}\n            .record=${record}\n            .rowIndex=${rowIndex}\n            ?selected-row=${record['__selected__']}\n            ?dirty=${record['__dirty__']}\n          ></ox-record-card>\n        `\n      )}\n      ${this.isTop\n        ? html``\n        : html` <mwc-icon id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}\n    `\n  }\n\n  gotoTop(e: Event) {\n    this.scrollTop = 0\n\n    e.stopPropagation()\n  }\n\n  get pullToRefreshTarget() {\n    return this\n  }\n}\n"]}

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

@@ -6,8 +6,8 @@
 export function recordCardClickHandler(e) {
     e.stopPropagation();
     /* target should be [content] or 'ox-card-field' or 'ox-card-gutter' */
-    var target = e.target;
-    var { column, rowIndex } = target;
+    var target = e.target.closest('ox-card-field, ox-card-gutter');
+    var { column, rowIndex } = target || {};
     /* do column click handler */
     if (column) {
         var { click } = column.handlers;

package/dist/src/data-card/event-handlers/record-card-click-handler.js.map

@@ -1 +1 @@
-{"version":3,"file":"record-card-click-handler.js","sourceRoot":"","sources":["../../../../src/data-card/event-handlers/record-card-click-handler.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,MAAM,UAAU,sBAAsB,CAAmB,CAAa;IACpE,CAAC,CAAC,eAAe,EAAE,CAAA;IAEnB,uEAAuE;IACvE,IAAI,MAAM,GAAG,CAAC,CAAC,MAAa,CAAA;IAC5B,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,MAG1B,CAAA;IAED,6BAA6B;IAC7B,IAAI,MAAM,EAAE;QACV,IAAI,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAA;QAC/B,IAAI,KAAK,EAAE;YACT,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;YAC5E,OAAM;SACP;KACF;IAED,2BAA2B;IAC3B,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAA;IACpD,IAAI,SAAS,EAAE;QACb,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;KACjF;SAAM;QACL,uCAAuC;QACvC,IAAI,CAAC,eAAe,EAAE,CAAA;KACvB;AACH,CAAC","sourcesContent":["import { ColumnConfig } from '../../types'\nimport { RecordCard } from '../record-card'\n\n/**\n * ox-record-card 의 click handler\n *\n * - handler의 this 는 ox-record-card임.\n */\nexport function recordCardClickHandler(this: RecordCard, e: MouseEvent): void {\n  e.stopPropagation()\n\n  /* target should be [content] or 'ox-card-field' or 'ox-card-gutter' */\n  var target = e.target as any\n  var { column, rowIndex } = target as {\n    column: ColumnConfig\n    rowIndex: number\n  }\n\n  /* do column click handler */\n  if (column) {\n    var { click } = column.handlers\n    if (click) {\n      click(this.config.columns, this.data, column, this.record, rowIndex, target)\n      return\n    }\n  }\n\n  /* do rows click handler */\n  var { click: rowsClick } = this.config.rows.handlers\n  if (rowsClick) {\n    rowsClick(this.config.columns, this.data, column, this.record, rowIndex, target)\n  } else {\n    /* content 가 클릭된 경우 - 레코드뷰 팝업을 실행한다. */\n    this.popupRecordView()\n  }\n}\n"]}
+{"version":3,"file":"record-card-click-handler.js","sourceRoot":"","sources":["../../../../src/data-card/event-handlers/record-card-click-handler.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,MAAM,UAAU,sBAAsB,CAAmB,CAAa;IACpE,CAAC,CAAC,eAAe,EAAE,CAAA;IAEnB,uEAAuE;IACvE,IAAI,MAAM,GAAI,CAAC,CAAC,MAAkB,CAAC,OAAO,CAAC,+BAA+B,CAAmC,CAAA;IAC7G,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,IAAI,EAAE,CAAA;IAEvC,6BAA6B;IAC7B,IAAI,MAAM,EAAE;QACV,IAAI,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAA;QAC/B,IAAI,KAAK,EAAE;YACT,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;YAC5E,OAAM;SACP;KACF;IAED,2BAA2B;IAC3B,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAA;IACpD,IAAI,SAAS,EAAE;QACb,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;KACjF;SAAM;QACL,uCAAuC;QACvC,IAAI,CAAC,eAAe,EAAE,CAAA;KACvB;AACH,CAAC","sourcesContent":["import { DataCardField } from '../data-card-field'\nimport { DataCardGutter } from '../data-card-gutter'\nimport { RecordCard } from '../record-card'\n\n/**\n * ox-record-card 의 click handler\n *\n * - handler의 this 는 ox-record-card임.\n */\nexport function recordCardClickHandler(this: RecordCard, e: MouseEvent): void {\n  e.stopPropagation()\n\n  /* target should be [content] or 'ox-card-field' or 'ox-card-gutter' */\n  var target = (e.target as Element).closest('ox-card-field, ox-card-gutter') as DataCardField | DataCardGutter\n  var { column, rowIndex } = target || {}\n\n  /* do column click handler */\n  if (column) {\n    var { click } = column.handlers\n    if (click) {\n      click(this.config.columns, this.data, column, this.record, rowIndex, target)\n      return\n    }\n  }\n\n  /* do rows click handler */\n  var { click: rowsClick } = this.config.rows.handlers\n  if (rowsClick) {\n    rowsClick(this.config.columns, this.data, column, this.record, rowIndex, target)\n  } else {\n    /* content 가 클릭된 경우 - 레코드뷰 팝업을 실행한다. */\n    this.popupRecordView()\n  }\n}\n"]}