import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6f10a81.js';
import { T as TextField } from './index-ec7dc2ad.js';
import { a as getDataModelFieldDisplayValue } from './data-model-bb5789f5.js';
import './BaseField-d94c5b14.js';
import { S as SingleChoiceField } from './index-94c1d7bf.js';
import { C as Comparison } from './filter-cbaa3d7d.js';
import { L as ListFetchState } from './list-fetch-state-8615484c.js';
import { N as NestedField } from './nested-15d95467.js';
import { f as findField } from './field-9341f857.js';
import { r as replaceParamsInFilter, c as cloneFilter } from './filter-8542e288.js';
import { g as generateActionComponent } from './action-util-f8b1c547.js';

const getDefaultFilterValues = (config, fields) => {
  const filterValues = {};
  config.fields.forEach(fieldConfig => {
    const field = fieldConfig.field || fields.find(f => f.id === fieldConfig.fieldId);
    if (field.value) {
      filterValues[field.id] = field.value;
    }
  });
  return filterValues;
};
const getFilterFields = (config, fields) => (config.fields.map(fieldConfig => fieldConfig.field || fields.find(f => f.id === fieldConfig.fieldId)));
const generateDefaultFilters = (config, fields) => {
  const filterFields = getFilterFields(config, fields);
  return generateFilters(filterFields, getDefaultFilterValues(config, filterFields));
};
const generateFilters = (filterFields, filterValues) => {
  const hasValidTextFilter = containsTextField(filterFields) && filterValues.text && filterValues.text !== '';
  const hasValidFilterThanText = containsSingleChoiceField(filterFields) && Object.keys(filterValues).length > 0;
  if (!hasValidTextFilter && !hasValidFilterThanText) {
    // if the text filter is not valid and there is no other filter
    return undefined;
  }
  if (hasValidTextFilter && !hasValidFilterThanText) {
    // return only text filter if there is no other filter
    return generateTextFilter(filterFields, filterValues);
  }
  if (!hasValidTextFilter && hasValidFilterThanText) {
    // return only single choice filter if there is no other filter
    return generateSingleChoiceFilter(filterFields, filterValues);
  }
  return {
    operator: 'and',
    filters: [
      generateTextFilter(filterFields, filterValues),
      generateSingleChoiceFilter(filterFields, filterValues),
    ]
  };
};
const generateTextFilter = (filterFields, filterValues) => ({
  operator: 'or',
  filters: filterFields.map(field => ({
    comparison: Comparison.Contain,
    id: field.id,
    value: filterValues.text,
  }))
});
const generateSingleChoiceFilter = (filterFields, filterValues) => ({
  operator: 'and',
  filters: filterFields
    .filter(field => field.type === SingleChoiceField.type)
    .filter(field => !!filterValues[field.id])
    .map(field => ({
    comparison: Comparison.Eq,
    id: field.id,
    value: filterValues[field.id],
  }))
});
const containsTextField = (filterFields) => filterFields.some(field => field.type === TextField.type);
const containsSingleChoiceField = (filterFields) => filterFields.some(field => field.type === SingleChoiceField.type);

const dvnAppViewListViewTableCss = ".sc-dvn-app-view-list-view-table-h{flex:1;display:block;margin:calc(4 * var(--spacing-unit))}.leaned-horizontally.sc-dvn-app-view-list-view-table-h{margin-left:0;margin-right:0}.leaned-vertically.sc-dvn-app-view-list-view-table-h{margin-bottom:0;margin-top:0}.sc-dvn-app-view-list-view-table-h .full-page.sc-dvn-app-view-list-view-table{height:100vh;flex-direction:column}.sc-dvn-app-view-list-view-table-h main.sc-dvn-app-view-list-view-table{display:flex;flex-direction:column;height:100vh}.sc-dvn-app-view-list-view-table-h h2.sc-dvn-app-view-list-view-table{margin-top:1rem}.sc-dvn-app-view-list-view-table-h .table-container.sc-dvn-app-view-list-view-table{flex:1;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}";

function buildQuery(query, quickFilter, params) {
  let queryFilter = query ? query.filter : undefined;
  if (quickFilter) {
    if (query && query.filter) {
      queryFilter = {
        operator: 'and',
        filters: [query.filter, quickFilter]
      };
    }
    else {
      queryFilter = quickFilter;
    }
  }
  if (!queryFilter) {
    return undefined;
  }
  return replaceParamsInFilter(cloneFilter(queryFilter), params);
}
function buildSort(query) {
  if (query && query.sort) {
    return query.sort;
  }
  return undefined;
}
const DvnAppViewListViewTable = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.action = createEvent(this, "action", 7);
    this.list = ListFetchState.init();
    this.getLogger = () => this.logger.new('DvnAppViewListViewTable').setColor('river');
    this.isQuickFilterBlockingFetch = () => { var _a; return ((_a = this.view.ui.quickSearch) === null || _a === void 0 ? void 0 : _a.requireFilters) && !this.quickFilter; };
    this.onSimpleFilterChange = ({ filter }) => {
      // componentDidUpdate will fetch new list after the state is updated
      this.list = ListFetchState.init();
      this.quickFilter = filter;
    };
  }
  async invalidate(_event) {
    this.fetchList(true, true);
  }
  ;
  handleScroll() {
    this.fetchList();
  }
  onModifyItem(event) {
    const { field, item, value } = event.detail;
    this.updateItem(item, field, value);
  }
  componentWillLoad() {
    if (this.isQuickFilterBlockingFetch()) {
      return;
    }
    this.fetchList();
  }
  componentDidUpdate() {
    if (this.isQuickFilterBlockingFetch()) {
      return;
    }
    const { list } = this;
    if (!list.data && !list.isPending && !list.error) {
      this.fetchList();
    }
  }
  fetchList(ignoreError = false, invalidate = false) {
    const { list, quickFilter } = this;
    if (list.isPending || list.isEndReached() || (list.error && !ignoreError)) {
      return;
    }
    const { query, table, ui } = this.view;
    // get the default quick filter value if the fields have preset values
    const defaultQuickFilter = generateDefaultFilters(ui.quickSearch, table.fields);
    const queryFilter = buildQuery(query, quickFilter || defaultQuickFilter, this.params);
    this.list = list.beforeFetch();
    this.apiData.query(table.name, {
      fields: query.fields,
      filter: queryFilter,
      limit: 25,
      skip: invalidate ? 0 : (list.data ? list.data.length : 0),
      sort: buildSort(query),
    }).then(response => {
      this.list = list.afterFetch(response, !invalidate);
    }, error => {
      this.list = list.afterFetchError(error);
    });
  }
  async updateItem(item, field, value) {
    const data = { [field.id]: value };
    const existingData = { [field.id]: item[field.id] };
    // update the item in the list, we'll revert if update fails
    this.list = this.list.afterUpdateItem(item._id, data);
    const revertChange = () => {
      this.getLogger().errorGroup('Failed to update item.', { field, item, value });
      this.notifier.alert('Update failed.');
      this.list = this.list.afterUpdateItem(item._id, existingData);
    };
    const updateBody = {
      operation: 'update',
      data,
    };
    const result = await this.apiData.update(this.view.table.name, item._id, updateBody).catch(revertChange);
    if (!result)
      return;
    this.getLogger().debugGroup('Updated item.', { field, item, value });
  }
  render() {
    const { view: { title, ui } } = this;
    const headerActions = ui.header && ui.header.actions && ui.header.actions;
    const { list } = this;
    return (h(Host, { class: {
        'leaned-vertically': ui.leanedVertically === undefined ? true : ui.leanedVertically,
        'leaned-horizontally': ui.leanedHorizontally === undefined ? true : ui.leanedHorizontally,
      } }, h("main", { class: "full-page" }, h("div", { class: "d-flex align-items-center justify-content-between" }, h("h2", null, title), h("div", { class: "d-flex align-items-center" }, ui.quickSearch &&
      h("dvn-filter-simple", { fields: this.view.table.fields, leaned: headerActions ? headerActions.length % 2 === 0 : true, config: ui.quickSearch, onFilterChange: (e) => this.onSimpleFilterChange(e.detail) }), (ui.header && ui.header.actions && ui.header.actions) &&
      ui.header.actions.map((action, _index) => generateActionComponent(0, this.params, undefined, this.action, action)))), this.isQuickFilterBlockingFetch() &&
      h("p", { class: "text-centered" }, "You need to apply a filter to fetch data."), !this.isQuickFilterBlockingFetch() &&
      h("div", { class: "table-container" }, h("dvn-list-view-table", { config: ui.main, fields: this.view.table.fields, items: (list.data || []), isEndReached: list.isEndReached(), isProgressing: list.isPending, error: list.error ? 'Fetching list failed' : undefined, onRetry: () => this.fetchList(true), params: this.params })))));
  }
};
DvnAppViewListViewTable.style = dvnAppViewListViewTableCss;

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 })
      : 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 DvnFilterSimple = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.filterChange = createEvent(this, "filterChange", 7);
    this.filterValues = { text: '' };
    this.leaned = false;
    this.placeholder = 'Quick search';
  }
  componentWillLoad() {
    const { config, fields } = this;
    this.filterFields = config.fields.map(fieldConfig => fieldConfig.field || fields.find(f => f.id === fieldConfig.fieldId));
    this.filterValues = getDefaultFilterValues(config, fields);
  }
  render() {
    const { filterValues } = this;
    return (h("div", { class: "d-flex" }, containsTextField(this.filterFields) &&
      h("dvn-input", { leaned: true, onChange: (e) => this.onTextChange(e.detail), placeholder: this.placeholder, value: filterValues.text }), this.filterFields
      .filter(field => field.type === SingleChoiceField.type)
      .filter(field => !field.dataAdapter)
      .map(field => {
      var _a, _b;
      return (h("dvn-select", { enableClear: true, leaned: true, onChange: (e) => this.onSingleChoiceChange(field.id, e.detail), width: ((_b = (_a = this.config.ui) === null || _a === void 0 ? void 0 : _a[field.id]) === null || _b === void 0 ? void 0 : _b.width) || '100px', style: { marginLeft: 'calc(1.5 * var(--spacing-unit))' }, value: field.value }, h("dvn-select-option", null, field.title), field.options.map(option => (h("dvn-select-option", { value: option.value }, option.label)))));
    }), this.filterFields
      .filter(field => field.type === SingleChoiceField.type)
      .filter(field => !!field.dataAdapter)
      .map((field) => {
      var _a, _b;
      return (h("dvn-select", { enableClear: true, leaned: true, dataAdapter: field.dataAdapter, dataProvider: field.dataProvider, onChange: (e) => this.onSingleChoiceChange(field.id, e.detail), width: ((_b = (_a = this.config.ui) === null || _a === void 0 ? void 0 : _a[field.id]) === null || _b === void 0 ? void 0 : _b.width) || '100px', style: { marginLeft: 'calc(1.5 * var(--spacing-unit))' } }, h("dvn-select-option", null, field.title)));
    })));
  }
  onSingleChoiceChange(fieldId, value) {
    if (value) {
      this.filterValues = Object.assign(Object.assign({}, this.filterValues), { [fieldId]: value });
    }
    else {
      // value is cleared
      const filterValues = Object.assign({}, this.filterValues);
      delete filterValues[fieldId];
      this.filterValues = filterValues;
    }
    this.filterChange.emit({ filter: generateFilters(this.filterFields, this.filterValues) });
  }
  onTextChange(filterText) {
    this.filterValues = Object.assign(Object.assign({}, this.filterValues), { text: filterText });
    clearTimeout(this.quickSearchDelayTimer);
    this.quickSearchDelayTimer = setTimeout(() => {
      this.filterChange.emit({ filter: generateFilters(this.filterFields, this.filterValues) });
    }, 500);
  }
};

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

function getFieldFromData(fields, fieldData) {
  return fieldData.fieldDisplay || findField(fields, fieldData.fieldId);
}
function getColumnData(config, field) {
  if (!config.columns || !config.columns[field.id]) {
    return {
      weight: 1,
    };
  }
  return config.columns[field.id];
}
function calculateActionsWidth(actions = []) {
  return actions.length * 40;
}
const renderRow = (config, fields, tableColumnConfig, actionEvent, modifyItemEvent, item, params, index) => (h("dvn-table-row", { elevation: config.elevation, separation: config.separation, removeSpacing: true }, tableColumnConfig.map(columnConfig => {
  const field = getFieldFromData(fields, columnConfig);
  const columnData = getColumnData(config, field);
  if (columnConfig.componentTag) {
    const Tag = columnConfig.componentTag;
    return (h("dvn-table-cell", { weight: columnData.weight, width: columnData.width }, h(Tag, { field: field, item: item })));
  }
  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) })), 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: calculateActionsWidth(config.actions) }, config.actions.map(action => generateActionComponent(index, params, item, actionEvent, action, { leaned: true })))));
const renderHeader = (config, fields, tableColumnConfig) => {
  let totalWidth = 0;
  tableColumnConfig.forEach(columnConfig => {
    const field = getFieldFromData(fields, columnConfig);
    totalWidth += getColumnData(config, field).width;
  });
  return (h("dvn-table-header", { elevation: config.elevation, separation: config.separation, width: `${totalWidth}px` }, tableColumnConfig.map(columnConfig => {
    const field = getFieldFromData(fields, columnConfig);
    return (h("dvn-table-header-cell", { weight: getColumnData(config, field).weight, width: getColumnData(config, field).width }, field.title));
  }), config.actions &&
    h("dvn-table-header-cell", { width: calculateActionsWidth(config.actions) })));
};
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;
    return (h("dvn-table", { leaned: true }, !hideHeader && renderHeader(config, this.fields, tableColumnConfigs), h("dvn-table-body", { elevation: elevation, separation: separation }, items.map((item, index) => renderRow(config, this.fields, tableColumnConfigs, this.action, this.modifyItem, item, params, index)), !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{display:flex;width:100%;height:100%;overflow:hidden;flex-direction:column}.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{flex:1;display:flex;flex-direction:column;width:100%;overflow:auto;padding-bottom:calc(4 * var(--spacing-unit))}.elevated-1.sc-dvn-table-body-h{padding:0 calc(1 * var(--spacing-unit))}.elevated-2.sc-dvn-table-body-h{padding:0 calc(2 * var(--spacing-unit))}.elevated-3.sc-dvn-table-body-h{padding:0 calc(3 * var(--spacing-unit))}";

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);flex:var(--cell-weight);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{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;
      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:flex;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)}.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 calc(1 * var(--spacing-unit))}.elevated-2.sc-dvn-table-header-h{margin:0 calc(2 * var(--spacing-unit))}.elevated-3.sc-dvn-table-header-h{margin:0 calc(3 * var(--spacing-unit))}";

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,
      }, style: {
        width: 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) + 4px);font-size:0.9em;font-weight:bold;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;
      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:flex;border-bottom:1px solid var(--color-border);padding:var(--row-padding);background:var(--color-elevated-item-background);transition:background-color .2s;margin:var(--row-margin)}.sc-dvn-table-row-h:hover{background:var(--color-background-primary)}.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{box-shadow:0 1px 4px rgba(var(--color-elevated-item-shadow), 0.03)}.elevated-2.sc-dvn-table-row-h{box-shadow:0 2px 6px rgba(var(--color-elevated-item-shadow), 0.08)}.elevated-3.sc-dvn-table-row-h{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,
      } }, h("slot", null)));
  }
};
DvnTableRow.style = dvnTableRowCss;

export { DvnAppViewListViewTable as dvn_app_view_list_view_table, DvnFieldDisplayCell as dvn_field_display_cell, DvnFieldInputCell as dvn_field_input_cell, DvnFilterSimple as dvn_filter_simple, 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 };
