@operato/data-grist 1.11.2 → 1.11.3

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.11.3](https://github.com/hatiolab/operato/compare/v1.11.2...v1.11.3) (2023-12-14)
+
+
+### :bug: Bug Fix
+
+* app-theme for table ([dd55434](https://github.com/hatiolab/operato/commit/dd55434223e73c3d710d1df96ec151e9bd0756f1))
+
+
+
 ### [1.11.2](https://github.com/hatiolab/operato/compare/v1.11.1...v1.11.2) (2023-12-13)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "1.11.2",
+  "version": "1.11.3",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "main": "dist/index.js",
@@ -57,8 +57,8 @@
   "dependencies": {
     "@material/mwc-icon": "^0.27.0",
     "@operato/headroom": "^1.4.64",
-    "@operato/input": "^1.7.4",
-    "@operato/popup": "^1.7.3",
+    "@operato/input": "^1.11.3",
+    "@operato/popup": "^1.11.3",
     "@operato/pull-to-refresh": "^1.4.64",
     "@operato/styles": "^1.7.3",
     "@operato/utils": "^1.5.44",
@@ -100,5 +100,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "759acb9c2d51cd4c114ae57e4eccb7e865d8e559"
+  "gitHead": "f4c3cf2f3a6e66f0b52b1b69cc21719706d2ac68"
 }

package/themes/app-theme.css

@@ -102,7 +102,7 @@ body {
   --button-primary-font: bold 16px var(--theme-font);
 
   /* table style */
-  --th-padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);
+  --th-padding: var(--padding-default);
   --th-border-top: 2px solid var(--secondary-color);
   --th-text-transform: capitalize;
   --th-font: bold var(--fontsize-small) var(--theme-font);
@@ -111,11 +111,14 @@ body {
   --tr-background-color: var(--theme-white-color);
   --tr-background-odd-color: rgba(255, 255, 255, 0.4);
   --tr-background-hover-color: #e1f5fe;
+  --td-border-line: 1px solid rgba(0, 0, 0, 0.05);
   --td-border-bottom: 1px solid rgba(0, 0, 0, 0.09);
   --td-padding: var(--padding-default);
   --td-font: normal 13px var(--theme-font);
   --td-color: var(--secondary-color);
 
+  --label-cell-background-color: #f6f6f6; /* th or td common background color */
+
   /* form style */
   --label-font: normal var(--fontsize-default) var(--theme-font);
   --label-color: var(--secondary-color);

package/dist/src/data-grid/data-grid-field-header.d.ts

@@ -1,24 +0,0 @@
-import '@operato/popup/ox-popup.js';
-import '@material/mwc-icon';
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
-import { ColumnConfig, FilterValue, SortersConfig } from '../types';
-export declare class DataGridFieldHeader extends LitElement {
-    static styles: import("lit").CSSResult[];
-    column: ColumnConfig;
-    fixed: boolean;
-    filteringFeature: boolean;
-    sorters: SortersConfig;
-    filters: FilterValue[];
-    index: number;
-    private _lastAccVal?;
-    private _throttledNotifier?;
-    render(): TemplateResult;
-    updated(changes: PropertyValues<this>): void;
-    _renderHeader(column: ColumnConfig): TemplateResult<1>;
-    _renderSortHeader(column: ColumnConfig): TemplateResult<1>;
-    _renderFilterHeader(column: ColumnConfig): TemplateResult<1>;
-    _changeSort(column: ColumnConfig): void;
-    _accumalate(x: number): number;
-    _notifyWidthChange(idx: number, width: number): void;
-    _mousedown(e: MouseEvent): void;
-}

package/dist/src/data-grid/data-grid-field-header.js

@@ -1,381 +0,0 @@
-import { __decorate } from "tslib";
-import '@operato/popup/ox-popup.js';
-import '@material/mwc-icon';
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import throttle from 'lodash-es/throttle';
-import { TooltipStyles } from '@operato/styles';
-import { detectOverflow } from '@operato/utils';
-import { ZERO_COLUMN } from '../configure/zero-config';
-import { FilterStyles } from '../filters/filter-styles';
-import { getFilterRenderer } from '../filters/registry';
-let DataGridFieldHeader = class DataGridFieldHeader extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.column = ZERO_COLUMN;
-        this.fixed = false;
-        this.filteringFeature = false;
-        this.sorters = [];
-        this.filters = [];
-    }
-    render() {
-        var _a;
-        const column = this.column;
-        return html `
-      <div ?gutter=${column.type == 'gutter'} ?fixed=${column.fixed} column>
-        <span
-          for-title
-          style="text-align:${column.record.align || 'left'};${((_a = column.header) === null || _a === void 0 ? void 0 : _a.style) || ''}"
-          @click=${(e) => this._changeSort(column)}
-          @mouseover=${(e) => {
-            const element = e.target;
-            if (detectOverflow(element)) {
-                element.setAttribute('data-tooltip', element.textContent.trim());
-            }
-        }}
-          @mouseout=${(e) => {
-            const element = e.target;
-            element.removeAttribute('data-tooltip');
-        }}
-          >${this._renderHeader(column)}
-        </span>
-
-        ${column.sortable
-            ? html `
-              <span sorter @click=${(e) => this._changeSort(column)}>
-                ${this._renderSortHeader(column)}
-              </span>
-            `
-            : undefined}
-        ${this.filteringFeature && column.filter && column.filter.operator !== 'search'
-            ? html ` <span filter> ${this._renderFilterHeader(column)} </span> `
-            : undefined}
-        ${column.resizable !== false
-            ? html ` <span splitter draggable="false" @mousedown=${(e) => this._mousedown(e)}>&nbsp;</span> `
-            : undefined}
-      </div>
-    `;
-    }
-    updated(changes) {
-        if (changes.has('fixed')) {
-            if (this.fixed) {
-                this.style.left = this.offsetLeft + 'px';
-            }
-        }
-    }
-    _renderHeader(column) {
-        var { renderer } = column.header || {};
-        var title = renderer.call(this, column);
-        return html ` ${title} `;
-    }
-    _renderSortHeader(column) {
-        var sorters = this.sorters || [];
-        var sorter = sorters.find(sorter => column.type !== 'gutter' && column.name == sorter.name);
-        if (!sorter) {
-            return html ``;
-        }
-        if (sorters.length > 1) {
-            var rank = sorters.indexOf(sorter) + 1;
-            return sorter.desc
-                ? html ` <mwc-icon>keyboard_arrow_down</mwc-icon><sub>${rank}</sub> `
-                : html ` <mwc-icon>keyboard_arrow_up</mwc-icon><sub>${rank}</sub> `;
-        }
-        else {
-            return sorter.desc
-                ? html ` <mwc-icon>keyboard_arrow_down</mwc-icon> `
-                : html ` <mwc-icon>keyboard_arrow_up</mwc-icon> `;
-        }
-    }
-    _renderFilterHeader(column) {
-        var _a;
-        const name = column.name;
-        const filter = column.filter;
-        const type = filter.type;
-        const value = (_a = this.filters.find(filter => filter.name === name)) === null || _a === void 0 ? void 0 : _a.value;
-        const idx = filter.operator === 'between' ? 1 : 0;
-        const renderer = getFilterRenderer(type)[idx];
-        return html `
-      <mwc-icon
-        @click=${(e) => {
-            const parent = e.target.closest('[column]');
-            const popup = parent.querySelector('ox-popup, ox-popup-list');
-            // const popup = (e.target as HTMLElement).nextSibling as OxPopupList | null
-            // absolute position인 popup의 위치 부모는 grist 이므로,
-            // data-grid-header 의 포지션 부모(grist)의 위치로부터 계산해야함.
-            // this의 position을 relative로 하지 못하는 이유 : ox-popup-list가 grid body에 덮히기 때문.
-            const top = parent.offsetTop + parent.offsetHeight;
-            const right = this.clientWidth - (parent.offsetLeft + parent.offsetWidth - this.scrollLeft);
-            popup === null || popup === void 0 ? void 0 : popup.open({
-                right,
-                top
-            });
-        }}
-        >filter_alt</mwc-icon
-      >
-
-      ${!renderer
-            ? html ``
-            : type !== 'select'
-                ? html ` <ox-popup
-            ><div filter-title><mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong></div>
-            ${renderer(column, value, this)}</ox-popup
-          >`
-                : filter.operator === 'in'
-                    ? html `<ox-popup-list
-            multiple
-            attr-selected="checked"
-            .value=${value}
-            with-search
-            @select=${(e) => {
-                        var _a;
-                        return (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('filter-change', {
-                            bubbles: true,
-                            composed: true,
-                            detail: {
-                                name,
-                                operator: filter.operator,
-                                value: !e.detail
-                                    ? undefined
-                                    : e.detail instanceof Array && e.detail.length === 0
-                                        ? undefined
-                                        : e.detail
-                            }
-                        }));
-                    }}
-            ><div filter-title slot="header">
-              <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>
-            </div>
-            ${renderer(column, value, this)}</ox-popup-list
-          >`
-                    : html `<ox-popup-list
-            .value=${value}
-            with-search
-            @select=${(e) => {
-                        var _a;
-                        return (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('filter-change', {
-                            bubbles: true,
-                            composed: true,
-                            detail: {
-                                name,
-                                operator: filter.operator,
-                                value: e.detail ? e.detail : undefined
-                            }
-                        }));
-                    }}
-            ><div filter-title slot="header">
-              <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>
-            </div>
-            ${renderer(column, value, this)}</ox-popup-list
-          >`}
-    `;
-    }
-    _changeSort(column) {
-        if (!column.sortable) {
-            return;
-        }
-        var sorters = [...this.sorters];
-        var idx = sorters.findIndex(sorter => sorter.name == column.name);
-        if (idx !== -1) {
-            let sorter = sorters[idx];
-            if (sorter.desc) {
-                sorters.splice(idx, 1);
-            }
-            else {
-                sorter.desc = true;
-            }
-        }
-        else {
-            var sorter = {
-                name: column.name
-            };
-            sorters.push(sorter);
-        }
-        this.sorters = sorters;
-        this.dispatchEvent(new CustomEvent('fetch-params-change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                sorters: this.sorters,
-                from: 'data-grid-header'
-            }
-        }));
-    }
-    _accumalate(x) {
-        var _a;
-        this._lastAccVal = ((_a = this._lastAccVal) !== null && _a !== void 0 ? _a : 0) + x;
-        return this._lastAccVal;
-    }
-    _notifyWidthChange(idx, width) {
-        if (!this._throttledNotifier) {
-            this._throttledNotifier = throttle((idx, width) => {
-                this.dispatchEvent(new CustomEvent('column-width-change', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        idx,
-                        width
-                    }
-                }));
-                this._lastAccVal = 0;
-            }, 100);
-        }
-        this._throttledNotifier(idx, width);
-    }
-    _mousedown(e) {
-        e.stopPropagation();
-        e.preventDefault();
-        var mousemoveHandler = ((e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            let column = this.column;
-            let width = Math.max(0, Number(column.width) + this._accumalate(e.movementX));
-            if (width == 0) {
-                /* CLARIFY-ME 왜 마지막 이벤트의 offsetX로 음수 값이 오는가 */
-                return;
-            }
-            this._notifyWidthChange(this.index, width);
-        }).bind(this);
-        var mouseupHandler = ((e) => {
-            document.removeEventListener('mousemove', mousemoveHandler);
-            document.removeEventListener('mouseup', mouseupHandler);
-            mousemoveHandler(e);
-        }).bind(this);
-        document.addEventListener('mousemove', mousemoveHandler);
-        document.addEventListener('mouseup', mouseupHandler);
-    }
-};
-DataGridFieldHeader.styles = [
-    FilterStyles,
-    TooltipStyles,
-    css `
-      :host {
-        display: grid;
-        grid-template-columns: var(--grid-template-columns);
-
-        overflow: hidden;
-      }
-
-      div[column] {
-        display: flex;
-
-        white-space: nowrap;
-        overflow: hidden;
-        background-color: var(--grid-header-background-color);
-        border-top: var(--grid-header-top-border);
-        border-bottom: var(--grid-header-bottom-border);
-        padding: var(--grid-header-padding);
-
-        text-overflow: ellipsis;
-        font: var(--grid-header-font);
-        color: var(--grid-header-color);
-      }
-
-      div[gutter] {
-        padding: var(--padding-default) 0 var(--padding-narrow) 0;
-        text-align: center;
-      }
-
-      span {
-        display: block;
-        white-space: nowrap;
-        overflow: hidden;
-      }
-
-      span[for-title] {
-        flex: 1;
-        text-overflow: ellipsis;
-        line-height: 1.6;
-        text-transform: capitalize;
-      }
-
-      span[for-title] mwc-icon {
-        font-size: var(--grid-record-fontsize);
-      }
-
-      span[sorter],
-      span[filter] {
-        padding: 0;
-        border: 0;
-      }
-
-      span[sorter] mwc-icon {
-        font-size: var(--grid-header-sorter-size);
-      }
-
-      span[filter] > mwc-icon {
-        font-size: var(--fontsize-default);
-        line-height: 20px;
-      }
-
-      span[splitter] {
-        cursor: col-resize;
-        border-right: var(--grid-header-splitter-border);
-        margin-right: 0;
-      }
-
-      span[splitter]:hover {
-        border-right: var(--grid-header-splitter-border-hover);
-      }
-
-      input[type='checkbox'],
-      input[type='radio'] {
-        margin: 3px 0 0 0;
-        zoom: var(--grist-input-zoom);
-      }
-
-      [filter-title] {
-        color: var(--grid-header-filter-title-color);
-        font: var(--grid-header-filter-title-font);
-        text-transform: capitalize;
-      }
-
-      [filter-title] * {
-        vertical-align: middle;
-      }
-
-      [filter-title] mwc-icon {
-        opacity: 0.7;
-        color: var(--grid-header-filter-title-icon-color);
-      }
-
-      [filter] input[type='checkbox'] {
-        margin-left: 10px;
-        margin-bottom: 5px;
-      }
-
-      [fixed] {
-        position: sticky;
-        background-color: inherit; /* 고정된 열의 배경색 (선택사항) */
-        z-index: 1;
-      }
-
-      @media print {
-        :host {
-          grid-template-columns: var(--grid-template-print-columns);
-        }
-      }
-    `
-];
-__decorate([
-    property({ type: Object })
-], DataGridFieldHeader.prototype, "column", void 0);
-__decorate([
-    property({ type: Boolean })
-], DataGridFieldHeader.prototype, "fixed", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'filtering-feature' })
-], DataGridFieldHeader.prototype, "filteringFeature", void 0);
-__decorate([
-    property({ type: Array })
-], DataGridFieldHeader.prototype, "sorters", void 0);
-__decorate([
-    property({ type: Array })
-], DataGridFieldHeader.prototype, "filters", void 0);
-__decorate([
-    property({ type: Number })
-], DataGridFieldHeader.prototype, "index", void 0);
-DataGridFieldHeader = __decorate([
-    customElement('ox-grid-field-header')
-], DataGridFieldHeader);
-export { DataGridFieldHeader };
-//# sourceMappingURL=data-grid-field-header.js.map

package/dist/src/data-grid/data-grid-field-header.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"data-grid-field-header.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-field-header.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkC,MAAM,KAAK,CAAA;AAC3E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AAGzC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAkB,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAIhD,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QAkHuB,WAAM,GAAiB,WAAW,CAAA;QACjC,UAAK,GAAY,KAAK,CAAA;QACU,qBAAgB,GAAY,KAAK,CAAA;QACnE,YAAO,GAAkB,EAAE,CAAA;QAC3B,YAAO,GAAkB,EAAE,CAAA;IAkQxD,CAAC;IA5PC,MAAM;;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;QAE1B,OAAO,IAAI,CAAA;qBACM,MAAM,CAAC,IAAI,IAAI,QAAQ,WAAW,MAAM,CAAC,KAAK;;;8BAGrC,MAAM,CAAC,MAAM,CAAC,KAAK,IAAI,MAAM,IAAI,CAAA,MAAA,MAAM,CAAC,MAAM,0CAAE,KAAK,KAAI,EAAE;mBACtE,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;uBACvC,CAAC,CAAa,EAAE,EAAE;YAC7B,MAAM,OAAO,GAAG,CAAC,CAAC,MAAyB,CAAA;YAE3C,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC;gBAC5B,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,OAAO,CAAC,WAAY,CAAC,IAAI,EAAE,CAAC,CAAA;YACnE,CAAC;QACH,CAAC;sBACW,CAAC,CAAa,EAAE,EAAE;YAC5B,MAAM,OAAO,GAAG,CAAC,CAAC,MAAyB,CAAA;YAC3C,OAAO,CAAC,eAAe,CAAC,cAAc,CAAC,CAAA;QACzC,CAAC;aACE,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;;;UAG7B,MAAM,CAAC,QAAQ;YACf,CAAC,CAAC,IAAI,CAAA;oCACoB,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;kBAC7D,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC;;aAEnC;YACH,CAAC,CAAC,SAAS;UACX,IAAI,CAAC,gBAAgB,IAAI,MAAM,CAAC,MAAM,IAAK,MAAM,CAAC,MAA6B,CAAC,QAAQ,KAAK,QAAQ;YACrG,CAAC,CAAC,IAAI,CAAA,kBAAkB,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,WAAW;YACnE,CAAC,CAAC,SAAS;UACX,MAAM,CAAC,SAAS,KAAK,KAAK;YAC1B,CAAC,CAAC,IAAI,CAAA,gDAAgD,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB;YAC5G,CAAC,CAAC,SAAS;;KAEhB,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAA;YAC1C,CAAC;QACH,CAAC;IACH,CAAC;IAED,aAAa,CAAC,MAAoB;QAChC,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,EAAE,CAAA;QACtC,IAAI,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;QAEvC,OAAO,IAAI,CAAA,IAAI,KAAK,GAAG,CAAA;IACzB,CAAC;IAED,iBAAiB,CAAC,MAAoB;QACpC,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAEhC,IAAI,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,QAAQ,IAAI,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,CAAA;QAC3F,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO,IAAI,CAAA,EAAE,CAAA;QACf,CAAC;QAED,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACvB,IAAI,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;YACtC,OAAO,MAAM,CAAC,IAAI;gBAChB,CAAC,CAAC,IAAI,CAAA,iDAAiD,IAAI,SAAS;gBACpE,CAAC,CAAC,IAAI,CAAA,+CAA+C,IAAI,SAAS,CAAA;QACtE,CAAC;aAAM,CAAC;YACN,OAAO,MAAM,CAAC,IAAI;gBAChB,CAAC,CAAC,IAAI,CAAA,4CAA4C;gBAClD,CAAC,CAAC,IAAI,CAAA,0CAA0C,CAAA;QACpD,CAAC;IACH,CAAC;IAED,mBAAmB,CAAC,MAAoB;;QACtC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;QACxB,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;QAClD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;QACxB,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,0CAAE,KAAK,CAAA;QACtE,MAAM,GAAG,GAAG,MAAO,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QAClD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAA;QAE7C,OAAO,IAAI,CAAA;;iBAEE,CAAC,CAAQ,EAAE,EAAE;YACpB,MAAM,MAAM,GAAI,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,UAAU,CAAgB,CAAA;YAC3E,MAAM,KAAK,GAAG,MAAM,CAAC,aAAa,CAAC,yBAAyB,CAAmB,CAAA;YAC/E,4EAA4E;YAE5E,8CAA8C;YAC9C,iDAAiD;YACjD,0EAA0E;YAC1E,MAAM,GAAG,GAAG,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,YAAY,CAAA;YAClD,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,CAAA;YAE3F,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAC;gBACV,KAAK;gBACL,GAAG;aACJ,CAAC,CAAA;QACJ,CAAC;;;;QAID,CAAC,QAAQ;YACT,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,IAAI,KAAK,QAAQ;gBACnB,CAAC,CAAC,IAAI,CAAA;mFACqE,MAAM,CAAC,IAAI;cAChF,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC;YAC/B;gBACJ,CAAC,CAAC,MAAO,CAAC,QAAQ,KAAK,IAAI;oBAC3B,CAAC,CAAC,IAAI,CAAA;;;qBAGO,KAAK;;sBAEJ,CAAC,CAAc,EAAE,EAAE;;wBAC3B,OAAA,MAAA,CAAC,CAAC,MAAM,0CAAE,aAAa,CACrB,IAAI,WAAW,CAAC,eAAe,EAAE;4BAC/B,OAAO,EAAE,IAAI;4BACb,QAAQ,EAAE,IAAI;4BACd,MAAM,EAAE;gCACN,IAAI;gCACJ,QAAQ,EAAE,MAAO,CAAC,QAAQ;gCAC1B,KAAK,EAAE,CAAC,CAAC,CAAC,MAAM;oCACd,CAAC,CAAC,SAAS;oCACX,CAAC,CAAC,CAAC,CAAC,MAAM,YAAY,KAAK,IAAI,CAAC,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC;wCACpD,CAAC,CAAC,SAAS;wCACX,CAAC,CAAC,CAAC,CAAC,MAAM;6BACb;yBACF,CAAC,CACH,CAAA;qBAAA;;kEAEmD,MAAM,CAAC,IAAI;;cAE/D,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC;YAC/B;oBACJ,CAAC,CAAC,IAAI,CAAA;qBACO,KAAK;;sBAEJ,CAAC,CAAc,EAAE,EAAE;;wBAC3B,OAAA,MAAA,CAAC,CAAC,MAAM,0CAAE,aAAa,CACrB,IAAI,WAAW,CAAC,eAAe,EAAE;4BAC/B,OAAO,EAAE,IAAI;4BACb,QAAQ,EAAE,IAAI;4BACd,MAAM,EAAE;gCACN,IAAI;gCACJ,QAAQ,EAAE,MAAO,CAAC,QAAQ;gCAC1B,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;6BACvC;yBACF,CAAC,CACH,CAAA;qBAAA;;kEAEmD,MAAM,CAAC,IAAI;;cAE/D,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC;YAC/B;KACP,CAAA;IACH,CAAC;IAED,WAAW,CAAC,MAAoB;QAC9B,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;YACrB,OAAM;QACR,CAAC;QAED,IAAI,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAA;QAE/B,IAAI,GAAG,GAAG,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,CAAA;QACjE,IAAI,GAAG,KAAK,CAAC,CAAC,EAAE,CAAC;YACf,IAAI,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAAA;YACzB,IAAI,MAAM,CAAC,IAAI,EAAE,CAAC;gBAChB,OAAO,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;YACxB,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,IAAI,GAAG,IAAI,CAAA;YACpB,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,MAAM,GAAG;gBACX,IAAI,EAAE,MAAM,CAAC,IAAI;aAClB,CAAA;YAED,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QACtB,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;QAEtB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,qBAAqB,EAAE;YACrC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,kBAAkB;aACzB;SACF,CAAC,CACH,CAAA;IACH,CAAC;IAED,WAAW,CAAC,CAAS;;QACnB,IAAI,CAAC,WAAW,GAAG,CAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,CAAC,CAAC,GAAG,CAAC,CAAA;QAC9C,OAAO,IAAI,CAAC,WAAW,CAAA;IACzB,CAAC;IAED,kBAAkB,CAAC,GAAW,EAAE,KAAa;QAC3C,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC7B,IAAI,CAAC,kBAAkB,GAAG,QAAQ,CAAC,CAAC,GAAW,EAAE,KAAa,EAAE,EAAE;gBAChE,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,qBAAqB,EAAE;oBACrC,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;oBACd,MAAM,EAAE;wBACN,GAAG;wBACH,KAAK;qBACN;iBACF,CAAC,CACH,CAAA;gBAED,IAAI,CAAC,WAAW,GAAG,CAAC,CAAA;YACtB,CAAC,EAAE,GAAG,CAAC,CAAA;QACT,CAAC;QAED,IAAI,CAAC,kBAAkB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;IACrC,CAAC;IAED,UAAU,CAAC,CAAa;QACtB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,IAAI,gBAAgB,GAAG,CAAC,CAAC,CAAa,EAAE,EAAE;YACxC,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,IAAI,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;YAExB,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;YAC7E,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;gBACf,8CAA8C;gBAC9C,OAAM;YACR,CAAC;YAED,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;QAC5C,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEb,IAAI,cAAc,GAAG,CAAC,CAAC,CAAa,EAAE,EAAE;YACtC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAA;YAC3D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAA;YAEvD,gBAAgB,CAAC,CAAC,CAAC,CAAA;QACrB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEb,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAA;QACxD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAA;IACtD,CAAC;;AAtXM,0BAAM,GAAG;IACd,YAAY;IACZ,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2GF;CACF,AA/GY,CA+GZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAmC;AACjC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAuB;AACU;IAA5D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;6DAAkC;AACnE;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oDAA4B;AAC3B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oDAA4B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAe;AAvH/B,mBAAmB;IAD/B,aAAa,CAAC,sBAAsB,CAAC;GACzB,mBAAmB,CAwX/B","sourcesContent":["import '@operato/popup/ox-popup.js'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport throttle from 'lodash-es/throttle'\n\nimport { OxPopup } from '@operato/popup'\nimport { TooltipStyles } from '@operato/styles'\nimport { closestElement, detectOverflow } from '@operato/utils'\n\nimport { ZERO_COLUMN } from '../configure/zero-config'\nimport { FilterStyles } from '../filters/filter-styles'\nimport { getFilterRenderer } from '../filters/registry'\nimport { ColumnConfig, FilterConfigObject, FilterValue, GristData, SortersConfig } from '../types'\n\n@customElement('ox-grid-field-header')\nexport class DataGridFieldHeader extends LitElement {\n  static styles = [\n    FilterStyles,\n    TooltipStyles,\n    css`\n      :host {\n        display: grid;\n        grid-template-columns: var(--grid-template-columns);\n\n        overflow: hidden;\n      }\n\n      div[column] {\n        display: flex;\n\n        white-space: nowrap;\n        overflow: hidden;\n        background-color: var(--grid-header-background-color);\n        border-top: var(--grid-header-top-border);\n        border-bottom: var(--grid-header-bottom-border);\n        padding: var(--grid-header-padding);\n\n        text-overflow: ellipsis;\n        font: var(--grid-header-font);\n        color: var(--grid-header-color);\n      }\n\n      div[gutter] {\n        padding: var(--padding-default) 0 var(--padding-narrow) 0;\n        text-align: center;\n      }\n\n      span {\n        display: block;\n        white-space: nowrap;\n        overflow: hidden;\n      }\n\n      span[for-title] {\n        flex: 1;\n        text-overflow: ellipsis;\n        line-height: 1.6;\n        text-transform: capitalize;\n      }\n\n      span[for-title] mwc-icon {\n        font-size: var(--grid-record-fontsize);\n      }\n\n      span[sorter],\n      span[filter] {\n        padding: 0;\n        border: 0;\n      }\n\n      span[sorter] mwc-icon {\n        font-size: var(--grid-header-sorter-size);\n      }\n\n      span[filter] > mwc-icon {\n        font-size: var(--fontsize-default);\n        line-height: 20px;\n      }\n\n      span[splitter] {\n        cursor: col-resize;\n        border-right: var(--grid-header-splitter-border);\n        margin-right: 0;\n      }\n\n      span[splitter]:hover {\n        border-right: var(--grid-header-splitter-border-hover);\n      }\n\n      input[type='checkbox'],\n      input[type='radio'] {\n        margin: 3px 0 0 0;\n        zoom: var(--grist-input-zoom);\n      }\n\n      [filter-title] {\n        color: var(--grid-header-filter-title-color);\n        font: var(--grid-header-filter-title-font);\n        text-transform: capitalize;\n      }\n\n      [filter-title] * {\n        vertical-align: middle;\n      }\n\n      [filter-title] mwc-icon {\n        opacity: 0.7;\n        color: var(--grid-header-filter-title-icon-color);\n      }\n\n      [filter] input[type='checkbox'] {\n        margin-left: 10px;\n        margin-bottom: 5px;\n      }\n\n      [fixed] {\n        position: sticky;\n        background-color: inherit; /* 고정된 열의 배경색 (선택사항) */\n        z-index: 1;\n      }\n\n      @media print {\n        :host {\n          grid-template-columns: var(--grid-template-print-columns);\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Boolean }) fixed: boolean = false\n  @property({ type: Boolean, attribute: 'filtering-feature' }) filteringFeature: boolean = false\n  @property({ type: Array }) sorters: SortersConfig = []\n  @property({ type: Array }) filters: FilterValue[] = []\n  @property({ type: Number }) index!: number\n\n  private _lastAccVal?: number\n  private _throttledNotifier?: any\n\n  render(): TemplateResult {\n    const column = this.column\n\n    return html`\n      <div ?gutter=${column.type == 'gutter'} ?fixed=${column.fixed} column>\n        <span\n          for-title\n          style=\"text-align:${column.record.align || 'left'};${column.header?.style || ''}\"\n          @click=${(e: MouseEvent) => this._changeSort(column)}\n          @mouseover=${(e: MouseEvent) => {\n            const element = e.target as HTMLSpanElement\n\n            if (detectOverflow(element)) {\n              element.setAttribute('data-tooltip', element.textContent!.trim())\n            }\n          }}\n          @mouseout=${(e: MouseEvent) => {\n            const element = e.target as HTMLSpanElement\n            element.removeAttribute('data-tooltip')\n          }}\n          >${this._renderHeader(column)}\n        </span>\n\n        ${column.sortable\n          ? html`\n              <span sorter @click=${(e: MouseEvent) => this._changeSort(column)}>\n                ${this._renderSortHeader(column)}\n              </span>\n            `\n          : undefined}\n        ${this.filteringFeature && column.filter && (column.filter as FilterConfigObject).operator !== 'search'\n          ? html` <span filter> ${this._renderFilterHeader(column)} </span> `\n          : undefined}\n        ${column.resizable !== false\n          ? html` <span splitter draggable=\"false\" @mousedown=${(e: MouseEvent) => this._mousedown(e)}>&nbsp;</span> `\n          : undefined}\n      </div>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('fixed')) {\n      if (this.fixed) {\n        this.style.left = this.offsetLeft + 'px'\n      }\n    }\n  }\n\n  _renderHeader(column: ColumnConfig) {\n    var { renderer } = column.header || {}\n    var title = renderer.call(this, column)\n\n    return html` ${title} `\n  }\n\n  _renderSortHeader(column: ColumnConfig) {\n    var sorters = this.sorters || []\n\n    var sorter = sorters.find(sorter => column.type !== 'gutter' && column.name == sorter.name)\n    if (!sorter) {\n      return html``\n    }\n\n    if (sorters.length > 1) {\n      var rank = sorters.indexOf(sorter) + 1\n      return sorter.desc\n        ? html` <mwc-icon>keyboard_arrow_down</mwc-icon><sub>${rank}</sub> `\n        : html` <mwc-icon>keyboard_arrow_up</mwc-icon><sub>${rank}</sub> `\n    } else {\n      return sorter.desc\n        ? html` <mwc-icon>keyboard_arrow_down</mwc-icon> `\n        : html` <mwc-icon>keyboard_arrow_up</mwc-icon> `\n    }\n  }\n\n  _renderFilterHeader(column: ColumnConfig) {\n    const name = column.name\n    const filter = column.filter as FilterConfigObject\n    const type = filter.type\n    const value = this.filters.find(filter => filter.name === name)?.value\n    const idx = filter!.operator === 'between' ? 1 : 0\n    const renderer = getFilterRenderer(type)[idx]\n\n    return html`\n      <mwc-icon\n        @click=${(e: Event) => {\n          const parent = (e.target as HTMLElement).closest('[column]') as HTMLElement\n          const popup = parent.querySelector('ox-popup, ox-popup-list') as OxPopup | null\n          // const popup = (e.target as HTMLElement).nextSibling as OxPopupList | null\n\n          // absolute position인 popup의 위치 부모는 grist 이므로,\n          // data-grid-header 의 포지션 부모(grist)의 위치로부터 계산해야함.\n          // this의 position을 relative로 하지 못하는 이유 : ox-popup-list가 grid body에 덮히기 때문.\n          const top = parent.offsetTop + parent.offsetHeight\n          const right = this.clientWidth - (parent.offsetLeft + parent.offsetWidth - this.scrollLeft)\n\n          popup?.open({\n            right,\n            top\n          })\n        }}\n        >filter_alt</mwc-icon\n      >\n\n      ${!renderer\n        ? html``\n        : type !== 'select'\n        ? html` <ox-popup\n            ><div filter-title><mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong></div>\n            ${renderer(column, value, this)}</ox-popup\n          >`\n        : filter!.operator === 'in'\n        ? html`<ox-popup-list\n            multiple\n            attr-selected=\"checked\"\n            .value=${value}\n            with-search\n            @select=${(e: CustomEvent) =>\n              e.target?.dispatchEvent(\n                new CustomEvent('filter-change', {\n                  bubbles: true,\n                  composed: true,\n                  detail: {\n                    name,\n                    operator: filter!.operator,\n                    value: !e.detail\n                      ? undefined\n                      : e.detail instanceof Array && e.detail.length === 0\n                      ? undefined\n                      : e.detail\n                  }\n                })\n              )}\n            ><div filter-title slot=\"header\">\n              <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>\n            </div>\n            ${renderer(column, value, this)}</ox-popup-list\n          >`\n        : html`<ox-popup-list\n            .value=${value}\n            with-search\n            @select=${(e: CustomEvent) =>\n              e.target?.dispatchEvent(\n                new CustomEvent('filter-change', {\n                  bubbles: true,\n                  composed: true,\n                  detail: {\n                    name,\n                    operator: filter!.operator,\n                    value: e.detail ? e.detail : undefined\n                  }\n                })\n              )}\n            ><div filter-title slot=\"header\">\n              <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>\n            </div>\n            ${renderer(column, value, this)}</ox-popup-list\n          >`}\n    `\n  }\n\n  _changeSort(column: ColumnConfig) {\n    if (!column.sortable) {\n      return\n    }\n\n    var sorters = [...this.sorters]\n\n    var idx = sorters.findIndex(sorter => sorter.name == column.name)\n    if (idx !== -1) {\n      let sorter = sorters[idx]\n      if (sorter.desc) {\n        sorters.splice(idx, 1)\n      } else {\n        sorter.desc = true\n      }\n    } else {\n      var sorter = {\n        name: column.name\n      }\n\n      sorters.push(sorter)\n    }\n\n    this.sorters = sorters\n\n    this.dispatchEvent(\n      new CustomEvent('fetch-params-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          sorters: this.sorters,\n          from: 'data-grid-header'\n        }\n      })\n    )\n  }\n\n  _accumalate(x: number) {\n    this._lastAccVal = (this._lastAccVal ?? 0) + x\n    return this._lastAccVal\n  }\n\n  _notifyWidthChange(idx: number, width: number) {\n    if (!this._throttledNotifier) {\n      this._throttledNotifier = throttle((idx: number, width: number) => {\n        this.dispatchEvent(\n          new CustomEvent('column-width-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              idx,\n              width\n            }\n          })\n        )\n\n        this._lastAccVal = 0\n      }, 100)\n    }\n\n    this._throttledNotifier(idx, width)\n  }\n\n  _mousedown(e: MouseEvent) {\n    e.stopPropagation()\n    e.preventDefault()\n\n    var mousemoveHandler = ((e: MouseEvent) => {\n      e.stopPropagation()\n      e.preventDefault()\n      let column = this.column\n\n      let width = Math.max(0, Number(column.width) + this._accumalate(e.movementX))\n      if (width == 0) {\n        /* CLARIFY-ME 왜 마지막 이벤트의 offsetX로 음수 값이 오는가 */\n        return\n      }\n\n      this._notifyWidthChange(this.index, width)\n    }).bind(this)\n\n    var mouseupHandler = ((e: MouseEvent) => {\n      document.removeEventListener('mousemove', mousemoveHandler)\n      document.removeEventListener('mouseup', mouseupHandler)\n\n      mousemoveHandler(e)\n    }).bind(this)\n\n    document.addEventListener('mousemove', mousemoveHandler)\n    document.addEventListener('mouseup', mouseupHandler)\n  }\n}\n"]}