import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-55faf181.js';
import { N as NestedField } from './nested-395a4cd4.js';
import { a as generateActionComponent } from './action-util-c91834e1.js';
import { a as getDataModelFieldDisplayValue } from './data-model-f5160369.js';
import { f as findField } from './field-6850c0e8.js';
import './BaseField-461b6d0c.js';
import './index-403e215e.js';

const dvnFieldDisplayCellCss = ".sc-dvn-field-display-cell-h{font-size:0.9em;margin:0px 0px calc(4 * var(--spacing-unit)) 0px;display:block}.sc-dvn-field-display-cell-h:last-child{margin-bottom:0}.title.sc-dvn-field-display-cell{font-size:0.8em;margin-bottom:calc(2 * var(--spacing-unit));color:var(--color-text-secondary)}";

const DvnFieldDisplayCell = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.showTitle = true;
  }
  render() {
    const { field, infoTitle, showTitle, value } = this;
    let Tag = `dvn-field-display-cell-${field.type}`;
    let fieldToPass = field;
    if (field.type === NestedField.type) {
      Tag = `dvn-field-display-cell-${field.nestedField.type}`;
      fieldToPass = field.nestedField;
    }
    return (h(Host, null, showTitle && h("div", { class: "title" }, (infoTitle || '').toUpperCase()), Tag
      ? h(Tag, { field: fieldToPass, value: value, meta: this.meta })
      : h("span", null, value)));
  }
};
DvnFieldDisplayCell.style = dvnFieldDisplayCellCss;

const dvnFieldInputCellCss = "dvn-field-input-cell{display:block;height:100%}";

const DvnFieldInputCell = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    const { field, value } = this;
    let Tag = `dvn-field-input-cell-${field.type}`;
    let fieldToPass = field;
    if (field.type === NestedField.type) {
      Tag = `dvn-field-input-cell-${field.nestedField.type}`;
      fieldToPass = field.nestedField;
    }
    return (h(Host, null, h(Tag, { field: fieldToPass, value: value })));
  }
};
DvnFieldInputCell.style = dvnFieldInputCellCss;

const dvnListViewTableCss = ".sc-dvn-list-view-table-h{-ms-flex:1 1 1px;flex:1 1 1px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.table-progress-container.sc-dvn-list-view-table{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-height:calc(14 * var(--spacing-unit))}.error-container.sc-dvn-list-view-table{padding:calc(4 * var(--spacing-unit))}";

var __rest = (undefined && undefined.__rest) || function (s, e) {
  var t = {};
  for (var p in s)
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
      t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function")
    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
        t[p[i]] = s[p[i]];
    }
  return t;
};
function getFieldFromData(fields, fieldData) {
  return fieldData.fieldDisplay || findField(fields, fieldData.fieldId);
}
function getColumnData(config, field, fieldId) {
  if (!config.columns || (!config.columns[field.id] && !config.columns[fieldId])) {
    return {
      weight: 1,
    };
  }
  return config.columns[field.id] || config.columns[fieldId];
}
function calculateActionsWidth(actions = []) {
  return actions.length * 40;
}
const renderRow = (config, fields, tableColumnConfig, actionEvent, modifyItemEvent, item, params, index, totalWidth, actionsWidth) => (h("dvn-table-row", { elevation: config.elevation, separation: config.separation, removeSpacing: true, width: `${totalWidth}px` }, tableColumnConfig.map(columnConfig => {
  const { fieldId, fieldDisplay } = columnConfig, meta = __rest(columnConfig, ["fieldId", "fieldDisplay"]);
  const field = getFieldFromData(fields, columnConfig);
  const columnData = getColumnData(config, field, fieldId);
  if (columnConfig.componentTag) {
    const Tag = columnConfig.componentTag;
    return (h("dvn-table-cell", { weight: columnData.weight, width: columnData.width }, h(Tag, { field: field, item: item, meta: meta })));
  }
  return (h("dvn-table-cell", { editable: columnConfig.isEditable, weight: columnData.weight, width: columnData.width, onCellValueChange: (event) => {
      event.stopPropagation();
      modifyItemEvent.emit({
        field,
        item,
        value: event.detail,
      });
    }, renderDisplay: () => (h("dvn-field-display-cell", { showTitle: false, field: field, value: getDataModelFieldDisplayValue(item, field, columnConfig.fieldId), meta: meta })), renderEdit: () => (h("dvn-field-input-cell", { field: field, value: getDataModelFieldDisplayValue(item, field, columnConfig.fieldId) })) }));
}), (config.actions && config.actions.length > 0) &&
  h("dvn-table-cell", { width: actionsWidth }, config.actions.map(action => generateActionComponent(index, params, item, actionEvent, action, { leaned: true })))));
const renderHeader = (config, fields, tableColumnConfig, setRef, totalWidth, actionsWidth) => {
  return (h("dvn-table-header", { elevation: config.elevation, separation: config.separation, width: `${totalWidth}px`, ref: setRef }, tableColumnConfig.map(columnConfig => {
    const field = getFieldFromData(fields, columnConfig);
    return (h("dvn-table-header-cell", { weight: getColumnData(config, field, columnConfig.fieldId).weight, width: getColumnData(config, field, columnConfig.fieldId).width }, field.title));
  }), (config.actions && config.actions.length > 0) &&
    h("dvn-table-header-cell", { width: actionsWidth })));
};
const DvnListViewTable = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.action = createEvent(this, "action", 7);
    this.retry = createEvent(this, "retry", 7);
    this.modifyItem = createEvent(this, "modifyItem", 7);
    this.items = [];
    this.isEndReached = false;
    this.isProgressing = false;
    this.fields = [];
    this.params = {};
  }
  render() {
    const { items, config, params } = this;
    const { elevation, fields: tableColumnConfigs, hideHeader = false, separation = 0 } = config;
    const actionsWidth = config.actionsWidth || calculateActionsWidth(config.actions) || 0;
    let totalWidth = actionsWidth || 0;
    tableColumnConfigs.forEach(columnConfig => {
      const field = getFieldFromData(this.fields, columnConfig);
      totalWidth += getColumnData(config, field, columnConfig.fieldId).width || 100;
    });
    return (h(Host, null, h("dvn-table", { leaned: true }, !hideHeader && renderHeader(config, this.fields, tableColumnConfigs, el => this.tableHeaderRef = el, totalWidth, actionsWidth), h("dvn-table-body", { elevation: elevation, separation: separation, ref: el => this.tableBodyRef = el, onScroll: () => this.tableHeaderRef.scrollLeft = this.tableBodyRef.scrollLeft }, items.map((item, index) => renderRow(config, this.fields, tableColumnConfigs, this.action, this.modifyItem, item, params, index, totalWidth, actionsWidth)), !this.isProgressing && !this.isEndReached && !this.error && items.length === 0 &&
      h("p", { class: "text-centered" }, "No data found."), !this.isEndReached &&
      h("div", { class: "table-progress-container" }, this.isProgressing &&
        h("dvn-progress", { indefinite: true, tint: "primary" }), this.error &&
        h("div", { class: "error-container d-flex align-items-center justify-content-center flex-column" }, this.error, h("dvn-button", { onClick: () => this.retry.emit() }, "Retry")))))));
  }
};
DvnListViewTable.style = dvnListViewTableCss;

const dvnTableCss = ".sc-dvn-table-h{-ms-flex:1 1 1px;flex:1 1 1px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.leaned.sc-dvn-table-h{padding:0}";

const DvnTable = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.leaned = false;
  }
  render() {
    return (h(Host, { class: { leaned: this.leaned } }, h("slot", null)));
  }
};
DvnTable.style = dvnTableCss;

const dvnTableBodyCss = ".sc-dvn-table-body-h{-ms-flex:1 1 1px;flex:1 1 1px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:auto}.elevated-1.sc-dvn-table-body-h{padding:0 4px}.elevated-2.sc-dvn-table-body-h{padding:0 6px}.elevated-3.sc-dvn-table-body-h{padding:0 8px}";

const DvnTableBody = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.scrollToBottom = createEvent(this, "scrollToBottom", 7);
    this.separation = 0;
    this.elevation = 0;
  }
  handleScroll() {
    if (this.el.offsetHeight + this.el.scrollTop >= this.el.scrollHeight) {
      this.scrollToBottom.emit();
    }
  }
  render() {
    return (h(Host, { class: {
        [`separated-${this.separation}`]: true,
        [`elevated-${this.elevation}`]: true,
      } }, h("slot", null)));
  }
  get el() { return getElement(this); }
};
DvnTableBody.style = dvnTableBodyCss;

const dvnTableCellCss = ".sc-dvn-table-cell-h{display:block;--cell-spacing-top:calc(3 * var(--spacing-unit));--cell-padding:var(--cell-spacing-top) calc(2 * var(--spacing-unit));--cell-height:calc(var(--cell-spacing-top) * 2 + 31px);-ms-flex:var(--cell-weight);flex:var(--cell-weight);min-width:var(--cell-width);height:var(--cell-height);color:var(--color-text-title);outline:none;border-radius:3px;padding:var(--cell-padding)}.focused.sc-dvn-table-cell-h{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-primary);box-shadow:inset 0px 0px 0px 2px var(--color-primary)}.sc-dvn-table-cell-h .small.sc-dvn-table-cell{--cell-padding:calc(2 * var(--spacing-unit)) calc(1 * var(--spacing-unit))}.sc-dvn-table-cell-h .medium.sc-dvn-table-cell{--cell-padding:calc(3 * var(--spacing-unit)) calc(2 * var(--spacing-unit))}.sc-dvn-table-cell-h .large.sc-dvn-table-cell{--cell-padding:calc(4 * var(--spacing-unit)) calc(3 * var(--spacing-unit))}";

const DvnTableCell = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.cellValueChange = createEvent(this, "cellValueChange", 7);
    this.focused = false;
    this.isValueChanged = false;
  }
  onAction(event) {
    if (!this.editable)
      return;
    event.stopPropagation();
    this.modifiedValue = event.detail;
    this.isValueChanged = true;
  }
  completeBlur() {
    if (this.isValueChanged) {
      this.cellValueChange.emit(this.modifiedValue);
      this.modifiedValue = undefined;
      this.isValueChanged = false;
    }
    this.focused = false;
  }
  render() {
    var _a, _b;
    const { focused, weight, width } = this;
    const style = {};
    if (weight) {
      style['--cell-weight'] = `${weight} 0 ${width || 100}px`;
      style['--cell-width'] = `0px`;
    }
    else {
      style['--cell-weight'] = `0 0 ${width}px`;
      style['--cell-width'] = `${width}px`;
    }
    return (h(Host, { class: { focused }, style: style, tabindex: "0", onFocus: () => {
        if (!this.editable)
          return;
        this.focused = true;
      }, onBlur: (e) => {
        if (!this.editable)
          return;
        const targetNode = e.relatedTarget;
        if (!targetNode || targetNode.closest('dvn-table-cell') !== this.el) {
          // some node outside of this component is focused
          this.completeBlur();
        }
        else {
          // stay focused for keeping rendering the edit input
          this.el.focus();
        }
      } }, focused ? (_a = this.renderEdit) === null || _a === void 0 ? void 0 : _a.call(this) : (_b = this.renderDisplay) === null || _b === void 0 ? void 0 : _b.call(this), h("slot", null)));
  }
  get el() { return getElement(this); }
};
DvnTableCell.style = dvnTableCellCss;

const dvnTableHeaderCss = ".sc-dvn-table-header-h{display:block;border-bottom:1px solid var(--color-border);background:var(--color-elevated-item-background);border-top-right-radius:var(--corner-radius);border-top-left-radius:var(--corner-radius);overflow:hidden}.small.sc-dvn-table-header-h{--row-padding:calc(1 * var(--spacing-unit)) calc(1 * var(--spacing-unit))}.medium.sc-dvn-table-header-h{--row-padding:calc(1 * var(--spacing-unit)) calc(2 * var(--spacing-unit))}.large.sc-dvn-table-header-h{--row-padding:calc(3 * var(--spacing-unit)) calc(3 * var(--spacing-unit))}.no-spacing.sc-dvn-table-header-h{--row-padding:0}.separated-1.sc-dvn-table-header-h,.separated-2.sc-dvn-table-header-h,.separated-3.sc-dvn-table-header-h{border-radius:var(--corner-radius);border-bottom:none;background:none}.elevated-1.sc-dvn-table-header-h{margin:0 4px;-webkit-box-shadow:0 1px 4px rgba(var(--color-elevated-item-shadow), 0.03);box-shadow:0 1px 4px rgba(var(--color-elevated-item-shadow), 0.03)}.elevated-2.sc-dvn-table-header-h{margin:0 6px;-webkit-box-shadow:0 2px 6px rgba(var(--color-elevated-item-shadow), 0.08);box-shadow:0 2px 6px rgba(var(--color-elevated-item-shadow), 0.08)}.elevated-3.sc-dvn-table-header-h{margin:0 8px;-webkit-box-shadow:0 2px 8px rgba(var(--color-elevated-item-shadow), 0.05);box-shadow:0 2px 8px rgba(var(--color-elevated-item-shadow), 0.05)}.header-items-container.sc-dvn-table-header{display:-ms-flexbox;display:flex}";

const DvnTableHeader = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.scale = 'medium';
    this.removeSpacing = false;
    this.separation = 0;
    this.elevation = 0;
  }
  render() {
    return (h(Host, { class: {
        [this.scale]: true,
        'no-spacing': this.removeSpacing,
        [`separated-${this.separation}`]: true,
        [`elevated-${this.elevation}`]: true,
      } }, h("div", { class: "header-items-container", style: { minWidth: this.width } }, h("slot", null))));
  }
};
DvnTableHeader.style = dvnTableHeaderCss;

const dvnTableHeaderCellCss = ".sc-dvn-table-header-cell-h{display:block;--cell-height:31px;--cell-padding:calc(2 * var(--spacing-unit)) calc(2 * var(--spacing-unit) + 6px);font-size:0.9em;font-weight:bold;-ms-flex:var(--cell-weight);flex:var(--cell-weight);height:var(--cell-height);padding:var(--cell-padding);color:var(--color-text-title);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}";

const DvnTableHeaderCell = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    const { weight, width } = this;
    const style = {};
    if (weight) {
      style['--cell-weight'] = `${weight} 0 ${width || 100}px`;
      style['--cell-width'] = `0px`;
    }
    else {
      style['--cell-weight'] = `0 0 ${width}px`;
      style['--cell-width'] = `${width}px`;
    }
    return (h(Host, { style: style }, h("slot", null)));
  }
};
DvnTableHeaderCell.style = dvnTableHeaderCellCss;

const dvnTableRowCss = ".sc-dvn-table-row-h{display:-ms-flexbox;display:flex;border-bottom:1px solid var(--color-border);padding:var(--row-padding);background:var(--color-elevated-item-background);-webkit-transition:background-color .2s;transition:background-color .2s;margin:var(--row-margin)}.sc-dvn-table-row-h:hover{background:var(--color-background-primary)}:not(dvn-table-header+dvn-table-body)>.sc-dvn-table-row-h:first-child{border-top-right-radius:var(--corner-radius);border-top-left-radius:var(--corner-radius)}.sc-dvn-table-row-h:last-of-type{border-bottom-right-radius:var(--corner-radius);border-bottom-left-radius:var(--corner-radius)}.small.sc-dvn-table-row-h{--row-padding:calc(2 * var(--spacing-unit)) calc(1 * var(--spacing-unit))}.medium.sc-dvn-table-row-h{--row-padding:calc(3 * var(--spacing-unit)) calc(2 * var(--spacing-unit))}.large.sc-dvn-table-row-h{--row-padding:calc(4 * var(--spacing-unit)) calc(3 * var(--spacing-unit))}.no-spacing.sc-dvn-table-row-h{--row-padding:0}.separated-1.sc-dvn-table-row-h,.separated-2.sc-dvn-table-row-h,.separated-3.sc-dvn-table-row-h{border-radius:var(--corner-radius);border-bottom:none}.separated-0.sc-dvn-table-row-h:hover,.separated-1.sc-dvn-table-row-h:hover,.separated-2.sc-dvn-table-row-h:hover,.separated-3.sc-dvn-table-row-h:hover{background:var(--color-elevated-item-background)}.separated-1.sc-dvn-table-row-h{--row-margin:calc(1 * var(--spacing-unit)) 0}.separated-2.sc-dvn-table-row-h{--row-margin:calc(2 * var(--spacing-unit)) 0}.separated-3.sc-dvn-table-row-h{--row-margin:calc(3 * var(--spacing-unit)) 0}.separated.sc-dvn-table-row-h:first-child{margin-top:0}.elevated-1.sc-dvn-table-row-h{-webkit-box-shadow:0 1px 4px rgba(var(--color-elevated-item-shadow), 0.03);box-shadow:0 1px 4px rgba(var(--color-elevated-item-shadow), 0.03)}.elevated-2.sc-dvn-table-row-h{-webkit-box-shadow:0 2px 6px rgba(var(--color-elevated-item-shadow), 0.08);box-shadow:0 2px 6px rgba(var(--color-elevated-item-shadow), 0.08)}.elevated-3.sc-dvn-table-row-h{-webkit-box-shadow:0 2px 8px rgba(var(--color-elevated-item-shadow), 0.05);box-shadow:0 2px 8px rgba(var(--color-elevated-item-shadow), 0.05)}";

const DvnTableRow = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.scale = 'medium';
    this.removeSpacing = false;
    this.separation = 0;
    this.elevation = 0;
  }
  render() {
    return (h(Host, { class: {
        [this.scale]: true,
        'no-spacing': this.removeSpacing,
        [`separated-${this.separation}`]: true,
        [`elevated-${this.elevation}`]: true,
      }, style: { minWidth: this.width } }, h("slot", null)));
  }
};
DvnTableRow.style = dvnTableRowCss;

export { DvnFieldDisplayCell as dvn_field_display_cell, DvnFieldInputCell as dvn_field_input_cell, DvnListViewTable as dvn_list_view_table, DvnTable as dvn_table, DvnTableBody as dvn_table_body, DvnTableCell as dvn_table_cell, DvnTableHeader as dvn_table_header, DvnTableHeaderCell as dvn_table_header_cell, DvnTableRow as dvn_table_row };
