@gravitee/ui-components 3.25.3-typescript-ad6021f → 3.25.3-typescript-bfd8f67

package/src/molecules/gv-table.js

@@ -1,685 +1 @@
-/*
- * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *         http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { css, LitElement, html } from 'lit';
-import { skeleton } from '../styles/skeleton';
-import { empty } from '../styles/empty';
-import { link } from '../styles/link';
-import { classMap } from 'lit/directives/class-map';
-import { repeat } from 'lit/directives/repeat';
-import { dispatchCustomEvent } from '../lib/events';
-import { getLanguage, i18n } from '../lib/i18n';
-import { until } from 'lit/directives/until';
-import { styleMap } from 'lit/directives/style-map';
-import { withResizeObserver } from '../mixins/with-resize-observer';
-import { ifDefined } from 'lit/directives/if-defined';
-import '../atoms/gv-image';
-import '../organisms/gv-pagination';
-import { getCssVar } from '../lib/style';
-
-/**
- * Table component
- *
- * ## Details
- * * has @theme facet
- *
- * @fires gv-table:select - when table row is selected
- * @fires gv-table:mouseenter - when the pointer is entering on a table row
- * @fires gv-table:mouseleave - when the pointer is leaving a table row
- * @fires gv-table:sort - when the order is changed
- *
- * @attr {Array<any>} items - A list of items to display
- * @attr {String} title - A title to display
- * @attr {String} order - If defined, the table will be ordered by the field. Start with '-' to sort in desc
- * @attr {Array<any>} options - The list of options to display
- * @attr {Boolean} noheader - Used to hide the table header
- * @attr {Boolean} nosort - Used to disable the click on header to sort
- * @attr {String} rowsheight - The height of the table rows
- * @attr {String} rowheight - The height of the table single row
- * @attr {String} emptymessage - The empty message to display
- * @attr {Function} format - A function to format table headers and string cells
- * @attr {Function} compareFn - A function to define how to sort. Default function will sort selected field ignoring case
- * @attr {Array<any>} selected - A list of selected ids of the items displayed
- * @attr {String} total - Total of data displayed on the table (useful with in case of pagination)
- * @attr {Boolean} skeleton - Force gv-table to be in skeleton mode
- *
- * @cssprop {Color} [--gv-table-selected--bgc=var(--gv-theme-color, #5a7684)] - Selected background color
- * @cssprop {Color} [--gv-table-hover--bgc=var(--gv-theme-neutral-color-lighter, #fafafa)] - Row background color on hover
- * @cssprop {Color} [--gv-table--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
- * @cssprop {Color} [--gv-table--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Border color
- * @cssprop {String} [--gv-table-header--fz=var(--gv-theme-font-size-l, 20px)] - Title font size
- * @cssprop {Length} [--gv-table-header--p=2rem 4rem] - Title padding
- * @cssprop {String} [--gv-table-rows--ov=auto] - Overflow on table
- * @cssprop {Length} [--gv-table--colmg=0.2rem] - Column gap
- * @cssprop {String} [--gv-table-row--ai=center] - Row align-items
- * @cssprop {String} [--gv-table-row--ac=center] - Row align-content
- * @cssprop {String} [--gv-table-cell--d=flex] - Cell display
- */
-export class GvTable extends withResizeObserver(LitElement) {
-  static get properties() {
-    return {
-      items: { type: Array },
-      title: { type: String },
-      order: { type: String },
-      options: { type: Array },
-      noheader: { type: Boolean },
-      nosort: { type: Boolean },
-      rowsheight: { type: String },
-      rowheight: { type: String },
-      emptymessage: { type: String },
-      format: { type: Function },
-      compareFn: { type: Function },
-      selected: { type: Array, reflect: true },
-      total: { type: String },
-      skeleton: { type: Boolean },
-      _items: { type: Array, attribute: false },
-      _skeleton: { type: Boolean, attribute: false },
-      _error: { type: Boolean, attribute: false },
-      _empty: { type: Boolean, attribute: false },
-      _itemsProvider: { type: Array, attribute: false },
-      _page: { type: Number, attribute: false },
-    };
-  }
-
-  static get styles() {
-    return [
-      link,
-      skeleton,
-      empty,
-      // language=CSS
-      css`
-        :host {
-          --selected--bgc: var(--gv-table-selected--bgc, var(--gv-theme-color, #5a7684));
-          --hover-bgc: var(--gv-table-hover--bgc, var(--gv-theme-neutral-color-lighter, #fafafa));
-          --bgc: var(--gv-table--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));
-          --bdc: var(--gv-table--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
-          display: block;
-          height: 100%;
-          margin: 0.2rem;
-          box-sizing: border-box;
-        }
-
-        .table {
-          background-color: var(--bgc);
-          flex-direction: column;
-          height: 100%;
-          display: flex;
-          width: 100%;
-        }
-
-        .rows {
-          -ms-overflow-style: none;
-          scrollbar-width: none;
-          overflow: var(--gv-table-rows--ov, auto);
-          flex: 1;
-          height: 100%;
-          transition: height 250ms ease-in-out;
-        }
-
-        .rows::-webkit-scrollbar {
-          display: none;
-        }
-
-        :host([w-lt-768]) .row {
-          height: 70px;
-        }
-
-        :host([w-lt-580]) .row {
-          height: 60px;
-        }
-
-        :host([w-lt-400]) .row {
-          height: 50px;
-        }
-
-        .theader {
-          background-color: var(--gv-theme-neutral-color-lighter);
-          font-weight: bold;
-          padding: 0 0.2rem;
-        }
-
-        .row,
-        .theader {
-          align-items: var(--gv-table-row--ai, center);
-          align-content: var(--gv-table-row--ac, center);
-          border-right: solid thick transparent;
-          display: grid;
-        }
-
-        div {
-          box-sizing: border-box;
-        }
-
-        .cell {
-          height: 100%;
-          display: var(--gv-table-cell--d, flex);
-          align-items: center;
-        }
-
-        .row:not(:last-child) {
-          box-shadow: 0 5px 3px -6px var(--bdc);
-        }
-
-        .row:hover,
-        .row.selected {
-          background-color: var(--hover-bgc);
-        }
-
-        .row.selected {
-          border-color: var(--selected--bgc);
-          box-sizing: border-box;
-        }
-
-        .header {
-          border-bottom: 1px solid var(--bdc);
-          padding: var(--gv-table-header--p, 2rem 4rem);
-        }
-
-        .title {
-          margin: 0;
-          text-transform: uppercase;
-          font-size: var(--gv-table-header--fz, var(--gv-theme-font-size-l, 20px));
-          line-height: var(--gv-table-header--fz, var(--gv-theme-font-size-l, 20px));
-          opacity: 0.6;
-        }
-
-        .title span {
-          font-weight: 600;
-          font-size: var(--gv-theme-font-size-s);
-          line-height: var(--gv-theme-font-size-s);
-          margin-left: 8px;
-          opacity: 0.7;
-        }
-
-        gv-identity-picture {
-          height: 35px;
-          width: 35px;
-          --gv-image--of: contain;
-          margin-left: 20px;
-        }
-
-        gv-icon {
-          transform: rotate(0deg);
-          --gv-icon--s: 18px;
-        }
-
-        gv-icon.desc {
-          transform: rotate(180deg);
-        }
-
-        gv-pagination {
-          align-self: flex-end;
-        }
-
-        .cell > *:not(gv-tag) {
-          margin: auto;
-          width: 100%;
-        }
-      `,
-    ];
-  }
-
-  constructor() {
-    super();
-    this._id = new Date().getTime();
-    this.breakpoints = {
-      width: [400, 580, 768],
-    };
-    this._empty = false;
-    this.order = '';
-    this._page = 1;
-    this._itemsProvider = [];
-    this.selected = [];
-    this.compareFn = (item, item2, value) => {
-      const itemData =
-        this._getDataFromField(item, value) && this._getDataFromField(item, value).toLowerCase
-          ? this._getDataFromField(item, value).toLowerCase()
-          : '';
-      const itemData2 =
-        this._getDataFromField(item2, value) && this._getDataFromField(item2, value).toLowerCase
-          ? this._getDataFromField(item2, value).toLowerCase()
-          : '';
-      if (this.order.startsWith('-')) {
-        return itemData2.localeCompare(itemData);
-      } else {
-        return itemData.localeCompare(itemData2);
-      }
-    };
-    this.addEventListener('gv-pagination:paginate', (e) => {
-      this._page = e.detail.page;
-    });
-  }
-
-  set items(items) {
-    this._skeleton = true;
-    Promise.resolve(items)
-      .then((items) => {
-        if (items) {
-          this._itemsProvider = items.map((item, index) => {
-            item._id = item.id == null ? index : item.id;
-            return item;
-          });
-          this._onSortChanged();
-          this._empty = this._itemsProvider.length === 0;
-          this._skeleton = false;
-        }
-      })
-      .catch((e) => {
-        console.error(e);
-        this._error = true;
-        this._skeleton = false;
-        this._itemsProvider = [];
-      });
-  }
-
-  get items() {
-    return this._itemsProvider;
-  }
-
-  _onSortChanged(field, e) {
-    if (e) {
-      e.preventDefault();
-    }
-    if (this._itemsProvider && this.order) {
-      const desc = this.order.startsWith('-');
-      const previousOrder = desc ? this.order.substring(1) : this.order;
-      const value = field || previousOrder;
-      if (field) {
-        this.order = previousOrder === value ? (desc ? value : '-' + value) : value;
-      }
-      this._itemsProvider = this._itemsProvider.sort((item, item2) => this.compareFn(item, item2, value));
-      if (field) {
-        dispatchCustomEvent(this, 'sort', { order: this.order });
-      }
-    }
-  }
-
-  get _items() {
-    if (this._itemsProvider) {
-      if (this.options && this.options.paging && this.options.paging < this._itemsProvider.length) {
-        const index = (this._page - 1) * this.options.paging;
-        return [...this._itemsProvider].splice(index, this.options.paging);
-      }
-      return this._itemsProvider;
-    }
-    return [];
-  }
-
-  _getItemId(item) {
-    return item.id == null ? item._id : item.id;
-  }
-
-  _onSelect(item, event) {
-    if (!this._skeleton && !event.target.dataset.preventSelect) {
-      if (this.options.selectable) {
-        const itemId = this._getItemId(item);
-        if (this._isSelected(item)) {
-          this.selected = this.selected.filter((id) => itemId !== id);
-        } else if (this.options.selectable === 'multi') {
-          this.selected = [...this.selected, itemId];
-        } else {
-          this.selected = [itemId];
-        }
-        dispatchCustomEvent(this, 'select', { items: this.selectedItems, options: this.options });
-      } else {
-        dispatchCustomEvent(this, 'select', { items: [item] });
-      }
-    }
-  }
-
-  get selectedItems() {
-    if (this.selected && this._itemsProvider) {
-      return this._itemsProvider.filter((item) => this.selected && this.selected.includes(this._getItemId(item)));
-    }
-    return [];
-  }
-
-  _onMouseEnter(item) {
-    if (!(this.selected && this.selected.length > 0) && !this._skeleton) {
-      dispatchCustomEvent(this, 'mouseenter', { item });
-    }
-  }
-
-  _onMouseLeave() {
-    if (!(this.selected && this.selected.length > 0) && !this._skeleton) {
-      dispatchCustomEvent(this, 'mouseleave');
-    }
-  }
-
-  _renderHeader(styleGridColumns) {
-    if (this.noheader) {
-      return '';
-    } else {
-      const style = {
-        ...styleGridColumns,
-        ...{
-          height: this.rowheight,
-          'grid-auto-rows': this.rowheight ? null : 'minmax(80px, auto)',
-        },
-      };
-
-      return html` <div class=${classMap({ theader: true })} style=${styleMap(style)}>
-        ${this.options && this.options.data && this._items && this._items.length
-          ? repeat(
-              this.options.data,
-              (option) => option,
-              (option) => {
-                const orderValue = this.order && this.order.startsWith('-') ? this.order.substring(1) : this.order;
-                const label = this.format && option.label ? this.format(option.label) : option.label;
-                const style = typeof option.headerStyle === 'function' ? option.headerStyle(label) : option.headerStyle;
-                return html` <div style="${style || ''}">
-                  ${this.order && !this.nosort
-                    ? html`
-                   <gv-button link @click="${this._onSortChanged.bind(this, option.field || option.tag)}">${until(label)}</gv-button>
-                      ${
-                        orderValue === option.tag || (orderValue === option.field && option.type !== 'image')
-                          ? html` <gv-icon class=${classMap({ desc: this.order.startsWith('-') })} shape="design:triangle"></gv-icon>`
-                          : ''
-                      }
-                    </a>`
-                    : until(label)}
-                </div>`;
-              },
-            )
-          : ''}
-      </div>`;
-    }
-  }
-
-  _renderIcon(item, itemIndex, option) {
-    const icon = typeof option.icon === 'function' ? option.icon(item) : option.icon;
-    const iconTitle = typeof option.iconTitle === 'function' ? option.iconTitle(item) : option.iconTitle;
-    if (icon) {
-      return html` <gv-icon shape="${icon}" title="${iconTitle}"></gv-icon>`;
-    }
-    return '';
-  }
-
-  _renderComponent(item, itemIndex, option, value, type) {
-    if (option.condition && !option.condition(item)) {
-      return '';
-    }
-    const element = document.createElement(type);
-    element.value = value;
-    if (option.attributes) {
-      Object.keys(option.attributes).forEach((attribute) => {
-        if (attribute.startsWith('on')) {
-          const event = attribute.replace('on', '').toLowerCase();
-          if (event === 'click') {
-            element.classList.add('link');
-          }
-          element.dataset.preventSelect = true;
-          element.addEventListener(event, (e) => {
-            e.stopPropagation();
-            const optionConfirm = typeof option.confirm === 'function' ? option.confirm(item) : option.confirm;
-            if (optionConfirm == null) {
-              setTimeout(() => {
-                option.attributes[attribute](item, e, element, this);
-              }, 0);
-            }
-          });
-        } else if (typeof option.attributes[attribute] === 'function') {
-          const value = option.attributes[attribute](item);
-          if (value != null) {
-            element[attribute] = value;
-          }
-        } else {
-          if (this.format && typeof option.attributes[attribute] === 'string') {
-            this.format(option.attributes[attribute]).then((t) => {
-              element[attribute] = t;
-            });
-          } else {
-            element[attribute] = option.attributes[attribute];
-          }
-        }
-      });
-    }
-    element.addEventListener('input', (event) => {
-      this._items[itemIndex][option.field] = event.target.value;
-    });
-
-    const optionConfirm = typeof option.confirm === 'function' ? option.confirm(item) : option.confirm;
-
-    if (optionConfirm) {
-      const confirm = document.createElement('gv-confirm');
-      if (this.format) {
-        this.format(optionConfirm.msg).then((t) => (confirm.message = t));
-      } else {
-        confirm.message = optionConfirm.msg;
-      }
-      if (optionConfirm.danger) {
-        confirm.danger = true;
-      }
-      confirm.addEventListener('click', (e) => e.stopPropagation());
-      confirm.addEventListener('gv-confirm:ok', (e) => {
-        e.stopPropagation();
-        option.attributes.onClick(item, e, element);
-      });
-      confirm.appendChild(element);
-      return confirm;
-    }
-    return element;
-  }
-
-  _renderCell(formattedValue, option, item, itemIndex) {
-    if (option.type) {
-      if (option.type === 'image') {
-        let alt = '';
-        if (option.alt) {
-          if (typeof option.alt === 'function') {
-            alt = option.alt(item);
-          } else {
-            alt = this._getDataFromField(item, option.alt);
-          }
-        }
-        return this._renderImage(formattedValue, alt);
-      } else if (typeof option.type === 'function') {
-        return this._renderComponent(item, itemIndex, option, formattedValue, option.type(item));
-      } else if (option.type.startsWith('gv-')) {
-        return this._renderComponent(item, itemIndex, option, formattedValue, option.type);
-      }
-    }
-    return until(formattedValue);
-  }
-
-  _getFormattedCellValue(option, item) {
-    let value = option.field ? this._getDataFromField(item, option.field) : '';
-
-    if (value) {
-      if (option.type === 'date') {
-        value = new Date(value).toLocaleDateString(getLanguage());
-      } else if (option.type === 'datetime') {
-        value = new Date(value).toLocaleString(getLanguage());
-      } else if (option.type === 'time') {
-        value = new Date(value).toLocaleTimeString(getLanguage());
-      }
-    }
-
-    if (option.format) {
-      value = option.format(value);
-    }
-
-    return value;
-  }
-
-  _isSelected(item) {
-    return this.selected && this.selected.includes(this._getItemId(item));
-  }
-
-  _renderRows(styleGridColumns) {
-    return html` <div
-      class="rows"
-      style=${styleMap({ height: this.rowsheight, 'user-select': this.options.selectable ? 'none' : '' })}
-      @mouseleave="${this._onMouseLeave.bind(this)}"
-    >
-      ${this._items && this._items.length
-        ? repeat(
-            this._items,
-            (item) => item,
-            (item, itemIndex) => {
-              return html`
-          <div class=${classMap({
-            row: true,
-            skeleton: this._skeleton,
-            selected: this._isSelected(item),
-          })} style=${styleMap({
-                ...styleGridColumns,
-                ...{
-                  height: this.rowheight,
-                  'grid-auto-rows': this.rowheight ? null : 'minmax(80px, auto)',
-                  cursor: this.options.selectable ? 'pointer' : '',
-                  'border-color': this.options.selectable && this._isSelected(item) ? 'var(--selected--bgc)' : '',
-                  'column-gap': 'var(--gv-table--colmg, 0.2rem)',
-                },
-              })}
-            @click="${this._onSelect.bind(this, item)}"
-            @mouseenter="${this._onMouseEnter.bind(this, item)}">
-            ${
-              this.options && this.options.data
-                ? repeat(
-                    this.options.data,
-                    (option) => option,
-                    (option) => {
-                      const style = typeof option.style === 'function' ? option.style(item) : option.style;
-                      const formattedValue = this._getFormattedCellValue(option, item);
-                      return html`<div class="cell" style="${ifDefined(style)}" title="${formattedValue}">
-                        ${this._renderCell(formattedValue, option, item, itemIndex)}${this._renderTag(option, item)}${option.icon
-                          ? this._renderIcon(item, itemIndex, option)
-                          : ''}
-                      </div> `;
-                    },
-                  )
-                : ''
-            }
-          </div>
-        </div>`;
-            },
-          )
-        : ''}
-    </div>`;
-  }
-
-  _renderItems() {
-    let widthTemplate = this.options.data.map((o) => {
-      if (o.width) {
-        return o.width;
-      } else if (o.type === 'image') {
-        return '80px';
-      } else if (o.type === 'icon') {
-        return '40px';
-      }
-      return null;
-    });
-    const fixedData = widthTemplate.filter((width) => width !== null);
-    const fixedWidth = fixedData.reduce((acc, width) => {
-      return acc + parseInt(width.replace('px', ''), 10);
-    }, 0);
-
-    widthTemplate = widthTemplate.map((width) => {
-      if (width == null) {
-        const columnGap = getCssVar(this, '--gv-table--colmg', '0.2rem');
-        return `calc((100% - ( ${fixedWidth}px + ${this.options.data.length - 1} * ${columnGap} ) ) / ${
-          this.options.data.length - fixedData.length
-        })`;
-      }
-      return width;
-    });
-
-    const styleGridColumns = { 'grid-template-columns': widthTemplate.join(' ') };
-    return html` ${this._renderHeader(styleGridColumns)} ${this._renderRows(styleGridColumns)} ${this._renderPagination()} `;
-  }
-
-  _renderPagination() {
-    if (this.options && this.options.paging && this._itemsProvider) {
-      const paginationData = {
-        first: 1,
-        last: this._itemsProvider.length / this.options.paging,
-        total: this._itemsProvider.length,
-        current_page: this._page,
-        total_pages: this._itemsProvider.length / this.options.paging,
-      };
-      return html`<gv-pagination .data="${paginationData}" widget="true"></gv-pagination>`;
-    }
-  }
-
-  _getDataFromField(item, field) {
-    if (typeof field === 'function') {
-      return field(item);
-    } else {
-      return field.split('.').reduce((p, c) => p && p[c], item);
-    }
-  }
-
-  _renderTag(option, item) {
-    if (option.tag) {
-      let tag;
-      if (typeof option.tag === 'function') {
-        tag = option.tag(item);
-      } else {
-        tag = option.format ? option.format(this._getDataFromField(item, option.tag)) : this._getDataFromField(item, option.tag);
-      }
-      if (tag) {
-        return html` <gv-tag ?skeleton="${this._skeleton}">${tag}</gv-tag>`;
-      }
-    }
-    return '';
-  }
-
-  _onImageLoaded() {
-    this._skeleton = false;
-  }
-
-  _renderImage(picture, alt) {
-    return html`<gv-identity-picture .picture="${picture}" .display_name="${alt}"></gv-identity-picture>`;
-  }
-
-  updated(props) {
-    this._onSortChanged();
-  }
-
-  render() {
-    if (this._error) {
-      return html`<div class="error">${i18n('gv-table.error')}</div>`;
-    }
-
-    const classes = {
-      table: true,
-      skeleton: this._skeleton || this.skeleton,
-    };
-
-    const emptyStyle = {
-      height: this.rowsheight ? this.rowsheight : '',
-    };
-
-    return html`
-      <div class=${classMap(classes)} style="${styleMap({ display: this.rowsheight ? 'block' : 'flex' })}">
-        ${this.title
-          ? html` <div class="header">
-              <h3 class="title">
-                ${this.title} ${!this._empty ? html`<span>(${this.total || (this._items && this._items.length)})</span>` : ''}
-              </h3>
-            </div>`
-          : ''}
-        ${!this._empty && this.options && this.options.data
-          ? this._renderItems()
-          : html` <div class="empty" style="${styleMap(emptyStyle)}">
-              ${this.emptymessage ? this.emptymessage : i18n('gv-table.empty')}
-            </div>`}
-      </div>
-    `;
-  }
-}
-
-window.customElements.define('gv-table', GvTable);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvTable=void 0;const t=require("lit"),e=require("../styles/skeleton"),i=require("../styles/empty"),s=require("../styles/link"),r=require("lit/directives/class-map"),o=require("lit/directives/repeat"),n=require("../lib/events"),a=require("../lib/i18n"),l=require("lit/directives/until"),h=require("lit/directives/style-map"),d=require("../mixins/with-resize-observer"),g=require("lit/directives/if-defined");require("../atoms/gv-image"),require("../organisms/gv-pagination");const c=require("../lib/style");class p extends((0,d.withResizeObserver)(t.LitElement)){static get properties(){return{items:{type:Array},title:{type:String},order:{type:String},options:{type:Array},noheader:{type:Boolean},nosort:{type:Boolean},rowsheight:{type:String},rowheight:{type:String},emptymessage:{type:String},format:{type:Function},compareFn:{type:Function},selected:{type:Array,reflect:!0},total:{type:String},skeleton:{type:Boolean},_items:{type:Array,attribute:!1},_skeleton:{type:Boolean,attribute:!1},_error:{type:Boolean,attribute:!1},_empty:{type:Boolean,attribute:!1},_itemsProvider:{type:Array,attribute:!1},_page:{type:Number,attribute:!1}}}static get styles(){return[s.link,e.skeleton,i.empty,t.css`:host{--selected--bgc:var(--gv-table-selected--bgc, var(--gv-theme-color, #5a7684));--hover-bgc:var(--gv-table-hover--bgc, var(--gv-theme-neutral-color-lighter, #fafafa));--bgc:var(--gv-table--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));--bdc:var(--gv-table--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));display:block;height:100%;margin:.2rem;box-sizing:border-box}.table{background-color:var(--bgc);flex-direction:column;height:100%;display:flex;width:100%}.rows{-ms-overflow-style:none;scrollbar-width:none;overflow:var(--gv-table-rows--ov,auto);flex:1;height:100%;transition:height 250ms ease-in-out}.rows::-webkit-scrollbar{display:none}:host([w-lt-768]) .row{height:70px}:host([w-lt-580]) .row{height:60px}:host([w-lt-400]) .row{height:50px}.theader{background-color:var(--gv-theme-neutral-color-lighter);font-weight:700;padding:0 .2rem}.row,.theader{align-items:var(--gv-table-row--ai,center);align-content:var(--gv-table-row--ac,center);border-right:solid thick transparent;display:grid}div{box-sizing:border-box}.cell{height:100%;display:var(--gv-table-cell--d,flex);align-items:center}.row:not(:last-child){box-shadow:0 5px 3px -6px var(--bdc)}.row.selected,.row:hover{background-color:var(--hover-bgc)}.row.selected{border-color:var(--selected--bgc);box-sizing:border-box}.header{border-bottom:1px solid var(--bdc);padding:var(--gv-table-header--p,2rem 4rem)}.title{margin:0;text-transform:uppercase;font-size:var(--gv-table-header--fz,var(--gv-theme-font-size-l,20px));line-height:var(--gv-table-header--fz,var(--gv-theme-font-size-l,20px));opacity:.6}.title span{font-weight:600;font-size:var(--gv-theme-font-size-s);line-height:var(--gv-theme-font-size-s);margin-left:8px;opacity:.7}gv-identity-picture{height:35px;width:35px;--gv-image--of:contain;margin-left:20px}gv-icon{transform:rotate(0);--gv-icon--s:18px}gv-icon.desc{transform:rotate(180deg)}gv-pagination{align-self:flex-end}.cell>:not(gv-tag){margin:auto;width:100%}`]}constructor(){super(),this._id=(new Date).getTime(),this.breakpoints={width:[400,580,768]},this._empty=!1,this.order="",this._page=1,this._itemsProvider=[],this.selected=[],this.compareFn=(t,e,i)=>{const s=this._getDataFromField(t,i)&&this._getDataFromField(t,i).toLowerCase?this._getDataFromField(t,i).toLowerCase():"",r=this._getDataFromField(e,i)&&this._getDataFromField(e,i).toLowerCase?this._getDataFromField(e,i).toLowerCase():"";return this.order.startsWith("-")?r.localeCompare(s):s.localeCompare(r)},this.addEventListener("gv-pagination:paginate",(t=>{this._page=t.detail.page}))}set items(t){this._skeleton=!0,Promise.resolve(t).then((t=>{t&&(this._itemsProvider=t.map(((t,e)=>(t._id=null==t.id?e:t.id,t))),this._onSortChanged(),this._empty=0===this._itemsProvider.length,this._skeleton=!1)})).catch((t=>{console.error(t),this._error=!0,this._skeleton=!1,this._itemsProvider=[]}))}get items(){return this._itemsProvider}_onSortChanged(t,e){if(e&&e.preventDefault(),this._itemsProvider&&this.order){const e=this.order.startsWith("-"),i=e?this.order.substring(1):this.order,s=t||i;t&&(this.order=i===s?e?s:"-"+s:s),this._itemsProvider=this._itemsProvider.sort(((t,e)=>this.compareFn(t,e,s))),t&&(0,n.dispatchCustomEvent)(this,"sort",{order:this.order})}}get _items(){if(this._itemsProvider){if(this.options&&this.options.paging&&this.options.paging<this._itemsProvider.length){const t=(this._page-1)*this.options.paging;return[...this._itemsProvider].splice(t,this.options.paging)}return this._itemsProvider}return[]}_getItemId(t){return null==t.id?t._id:t.id}_onSelect(t,e){if(!this._skeleton&&!e.target.dataset.preventSelect)if(this.options.selectable){const e=this._getItemId(t);this._isSelected(t)?this.selected=this.selected.filter((t=>e!==t)):"multi"===this.options.selectable?this.selected=[...this.selected,e]:this.selected=[e],(0,n.dispatchCustomEvent)(this,"select",{items:this.selectedItems,options:this.options})}else(0,n.dispatchCustomEvent)(this,"select",{items:[t]})}get selectedItems(){return this.selected&&this._itemsProvider?this._itemsProvider.filter((t=>this.selected&&this.selected.includes(this._getItemId(t)))):[]}_onMouseEnter(t){this.selected&&this.selected.length>0||this._skeleton||(0,n.dispatchCustomEvent)(this,"mouseenter",{item:t})}_onMouseLeave(){this.selected&&this.selected.length>0||this._skeleton||(0,n.dispatchCustomEvent)(this,"mouseleave")}_renderHeader(e){if(this.noheader)return"";{const i={...e,height:this.rowheight,"grid-auto-rows":this.rowheight?null:"minmax(80px, auto)"};return t.html`<div class="${(0,r.classMap)({theader:!0})}" style="${(0,h.styleMap)(i)}">${this.options&&this.options.data&&this._items&&this._items.length?(0,o.repeat)(this.options.data,(t=>t),(e=>{const i=this.order&&this.order.startsWith("-")?this.order.substring(1):this.order,s=this.format&&e.label?this.format(e.label):e.label,o="function"==typeof e.headerStyle?e.headerStyle(s):e.headerStyle;return t.html`<div style="${o||""}">${this.order&&!this.nosort?t.html`<gv-button link @click="${this._onSortChanged.bind(this,e.field||e.tag)}">${(0,l.until)(s)}</gv-button>${i===e.tag||i===e.field&&"image"!==e.type?t.html`<gv-icon class="${(0,r.classMap)({desc:this.order.startsWith("-")})}" shape="design:triangle"></gv-icon>`:""}`:(0,l.until)(s)}</div>`})):""}</div>`}}_renderIcon(e,i,s){const r="function"==typeof s.icon?s.icon(e):s.icon,o="function"==typeof s.iconTitle?s.iconTitle(e):s.iconTitle;return r?t.html`<gv-icon shape="${r}" title="${o}"></gv-icon>`:""}_renderComponent(t,e,i,s,r){if(i.condition&&!i.condition(t))return"";const o=document.createElement(r);o.value=s,i.attributes&&Object.keys(i.attributes).forEach((e=>{if(e.startsWith("on")){const s=e.replace("on","").toLowerCase();"click"===s&&o.classList.add("link"),o.dataset.preventSelect=!0,o.addEventListener(s,(s=>{s.stopPropagation();null==("function"==typeof i.confirm?i.confirm(t):i.confirm)&&setTimeout((()=>{i.attributes[e](t,s,o,this)}),0)}))}else if("function"==typeof i.attributes[e]){const s=i.attributes[e](t);null!=s&&(o[e]=s)}else this.format&&"string"==typeof i.attributes[e]?this.format(i.attributes[e]).then((t=>{o[e]=t})):o[e]=i.attributes[e]})),o.addEventListener("input",(t=>{this._items[e][i.field]=t.target.value}));const n="function"==typeof i.confirm?i.confirm(t):i.confirm;if(n){const e=document.createElement("gv-confirm");return this.format?this.format(n.msg).then((t=>e.message=t)):e.message=n.msg,n.danger&&(e.danger=!0),e.addEventListener("click",(t=>t.stopPropagation())),e.addEventListener("gv-confirm:ok",(e=>{e.stopPropagation(),i.attributes.onClick(t,e,o)})),e.appendChild(o),e}return o}_renderCell(t,e,i,s){if(e.type){if("image"===e.type){let s="";return e.alt&&(s="function"==typeof e.alt?e.alt(i):this._getDataFromField(i,e.alt)),this._renderImage(t,s)}if("function"==typeof e.type)return this._renderComponent(i,s,e,t,e.type(i));if(e.type.startsWith("gv-"))return this._renderComponent(i,s,e,t,e.type)}return(0,l.until)(t)}_getFormattedCellValue(t,e){let i=t.field?this._getDataFromField(e,t.field):"";return i&&("date"===t.type?i=new Date(i).toLocaleDateString((0,a.getLanguage)()):"datetime"===t.type?i=new Date(i).toLocaleString((0,a.getLanguage)()):"time"===t.type&&(i=new Date(i).toLocaleTimeString((0,a.getLanguage)()))),t.format&&(i=t.format(i)),i}_isSelected(t){return this.selected&&this.selected.includes(this._getItemId(t))}_renderRows(e){return t.html`<div class="rows" style="${(0,h.styleMap)({height:this.rowsheight,"user-select":this.options.selectable?"none":""})}" @mouseleave="${this._onMouseLeave.bind(this)}">${this._items&&this._items.length?(0,o.repeat)(this._items,(t=>t),((i,s)=>t.html`<div class="${(0,r.classMap)({row:!0,skeleton:this._skeleton,selected:this._isSelected(i)})}" style="${(0,h.styleMap)({...e,height:this.rowheight,"grid-auto-rows":this.rowheight?null:"minmax(80px, auto)",cursor:this.options.selectable?"pointer":"","border-color":this.options.selectable&&this._isSelected(i)?"var(--selected--bgc)":"","column-gap":"var(--gv-table--colmg, 0.2rem)"})}" @click="${this._onSelect.bind(this,i)}" @mouseenter="${this._onMouseEnter.bind(this,i)}">${this.options&&this.options.data?(0,o.repeat)(this.options.data,(t=>t),(e=>{const r="function"==typeof e.style?e.style(i):e.style,o=this._getFormattedCellValue(e,i);return t.html`<div class="cell" style="${(0,g.ifDefined)(r)}" title="${o}">${this._renderCell(o,e,i,s)}${this._renderTag(e,i)}${e.icon?this._renderIcon(i,s,e):""}</div>`})):""}</div>`)):""}</div>`}_renderItems(){let e=this.options.data.map((t=>t.width?t.width:"image"===t.type?"80px":"icon"===t.type?"40px":null));const i=e.filter((t=>null!==t)),s=i.reduce(((t,e)=>t+parseInt(e.replace("px",""),10)),0);e=e.map((t=>{if(null==t){const t=(0,c.getCssVar)(this,"--gv-table--colmg","0.2rem");return`calc((100% - ( ${s}px + ${this.options.data.length-1} * ${t} ) ) / ${this.options.data.length-i.length})`}return t}));const r={"grid-template-columns":e.join(" ")};return t.html`${this._renderHeader(r)} ${this._renderRows(r)} ${this._renderPagination()}`}_renderPagination(){if(this.options&&this.options.paging&&this._itemsProvider){const e={first:1,last:this._itemsProvider.length/this.options.paging,total:this._itemsProvider.length,current_page:this._page,total_pages:this._itemsProvider.length/this.options.paging};return t.html`<gv-pagination .data="${e}" widget="true"></gv-pagination>`}}_getDataFromField(t,e){return"function"==typeof e?e(t):e.split(".").reduce(((t,e)=>t&&t[e]),t)}_renderTag(e,i){if(e.tag){let s;if(s="function"==typeof e.tag?e.tag(i):e.format?e.format(this._getDataFromField(i,e.tag)):this._getDataFromField(i,e.tag),s)return t.html`<gv-tag ?skeleton="${this._skeleton}">${s}</gv-tag>`}return""}_onImageLoaded(){this._skeleton=!1}_renderImage(e,i){return t.html`<gv-identity-picture .picture="${e}" .display_name="${i}"></gv-identity-picture>`}updated(t){this._onSortChanged()}render(){if(this._error)return t.html`<div class="error">${(0,a.i18n)("gv-table.error")}</div>`;const e={table:!0,skeleton:this._skeleton||this.skeleton},i={height:this.rowsheight?this.rowsheight:""};return t.html`<div class="${(0,r.classMap)(e)}" style="${(0,h.styleMap)({display:this.rowsheight?"block":"flex"})}">${this.title?t.html`<div class="header"><h3 class="title">${this.title} ${this._empty?"":t.html`<span>(${this.total||this._items&&this._items.length})</span>`}</h3></div>`:""} ${!this._empty&&this.options&&this.options.data?this._renderItems():t.html`<div class="empty" style="${(0,h.styleMap)(i)}">${this.emptymessage?this.emptymessage:(0,a.i18n)("gv-table.empty")}</div>`}</div>`}}exports.GvTable=p,window.customElements.define("gv-table",p);