import { unsafeCSS, LitElement, nothing, html } from "lit";
import { customElement } from "../../decorator.js";
import compentStyle from "./table.css.js";
import { property, state } from "lit/decorators.js";
import { ObcTableHeaderItemType } from "../table-header-item/table-header-item.js";
import { classMap } from "lit/directives/class-map.js";
import "../button/button.js";
import { CheckboxStatus } from "../checkbox/checkbox.js";
import { TagColor } from "../tag/tag.js";
import "../../building-blocks/bar-horizontal/bar-horizontal.js";
import { repeat } from "lit/directives/repeat.js";
import { map } from "lit/directives/map.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { Priority, FrameStyle, InstrumentState } from "../../navigation-instruments/types.js";
import { FillMode, ScaleType, ExternalScaleSide } from "../../building-blocks/external-scale/external-scale.js";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
var ObcTableCellType = /* @__PURE__ */ ((ObcTableCellType2) => {
  ObcTableCellType2["Regular"] = "regular";
  ObcTableCellType2["Button"] = "button";
  ObcTableCellType2["Checkbox"] = "checkbox";
  ObcTableCellType2["Tag"] = "tag";
  ObcTableCellType2["HorizontalBar"] = "horizontal-bar";
  return ObcTableCellType2;
})(ObcTableCellType || {});
function cssPart(value, subpart) {
  if (value.cssPart) {
    return `${value.cssPart} ${subpart}`;
  }
  return void 0;
}
let ObcTable = class extends LitElement {
  constructor() {
    super(...arguments);
    this.data = [];
    this.columns = [];
    this.rowDivider = false;
    this.narrowHeader = false;
    this.showHeader = true;
    this.striped = false;
    this.selectable = false;
    this.selectAllAriaLabel = "Select all rows";
    this._sortByColumnIdx = void 0;
    this._sortDirection = "asc";
    this._selectedRowIds = /* @__PURE__ */ new Set();
    this._previousPositions = [];
    this._hasRenderedRows = false;
  }
  get sortedData() {
    if (this._sortByColumnIdx === void 0) {
      return this.data;
    }
    const sortByColumn = this.columns[this._sortByColumnIdx];
    if (sortByColumn === void 0) {
      console.warn("Sort by column is undefined");
      return this.data;
    }
    const sortDirection = this._sortDirection;
    const sortedData = [...this.data];
    sortedData.sort((a, b) => {
      const aValue = a[sortByColumn.key];
      const bValue = b[sortByColumn.key];
      if (sortDirection === "asc") {
        return sortByColumn.compareFunction(
          aValue,
          bValue,
          a,
          b
        );
      } else {
        return sortByColumn.compareFunction(
          bValue,
          aValue,
          b,
          a
        );
      }
    });
    return sortedData;
  }
  _handleSortClick(column) {
    if (!column.sortable) {
      return;
    }
    const newSortColumnIdx = this.columns.indexOf(column);
    if (newSortColumnIdx === this._sortByColumnIdx) {
      this._sortDirection = this._sortDirection === "asc" ? "desc" : "asc";
    } else {
      this._sortByColumnIdx = newSortColumnIdx;
      this._sortDirection = "asc";
    }
  }
  _handleRowClick(row) {
    this.dispatchEvent(
      new CustomEvent("row-click", { detail: { row } })
    );
  }
  _focusFirstRow() {
    const firstRow = this.renderRoot.querySelector(
      'button[role="row"].grid-row'
    );
    firstRow?.focus();
  }
  _focusLeftHeaderItem() {
    this._focusHeaderByIndex(0);
  }
  _focusHeaderByIndex(index) {
    const headers = Array.from(
      this.renderRoot.querySelectorAll(
        '.grid-header [role="columnheader"]'
      )
    );
    if (headers.length === 0) return;
    const clampedIndex = Math.max(0, Math.min(index, headers.length - 1));
    const headerItem = headers[clampedIndex];
    const innerButton = headerItem.shadowRoot?.querySelector("button") ?? null;
    (innerButton ?? headerItem).focus();
  }
  _handleHeaderKeyDown(event) {
    const key = event.key;
    if (key === "ArrowDown") {
      this._focusFirstRow();
      event.preventDefault();
      event.stopPropagation();
      return;
    }
    if (key !== "ArrowLeft" && key !== "ArrowRight") {
      return;
    }
    const headers = Array.from(
      this.renderRoot.querySelectorAll(
        '.grid-header [role="columnheader"]'
      )
    );
    if (headers.length === 0) return;
    const currentHeaderEl = event.currentTarget;
    const currentIndex = currentHeaderEl ? headers.indexOf(currentHeaderEl) : -1;
    if (currentIndex === -1) return;
    const nextIndex = key === "ArrowRight" ? Math.min(currentIndex + 1, headers.length - 1) : Math.max(currentIndex - 1, 0);
    if (nextIndex !== currentIndex) {
      this._focusHeaderByIndex(nextIndex);
      event.preventDefault();
      event.stopPropagation();
    }
  }
  _handleRowKeyDown(event) {
    const key = event.key;
    if (key !== "ArrowDown" && key !== "ArrowUp" && key !== "Home" && key !== "End") {
      return;
    }
    const target = event.currentTarget;
    if (!target) return;
    const rows = Array.from(
      this.renderRoot.querySelectorAll(
        'button[role="row"].grid-row'
      )
    );
    const currentIndex = rows.indexOf(target);
    if (currentIndex === -1) return;
    let nextIndex = currentIndex;
    switch (key) {
      case "ArrowDown":
        nextIndex = Math.min(currentIndex + 1, rows.length - 1);
        break;
      case "ArrowUp":
        if (currentIndex === 0) {
          this._focusLeftHeaderItem();
          event.preventDefault();
          event.stopPropagation();
          return;
        }
        nextIndex = Math.max(currentIndex - 1, 0);
        break;
      case "Home":
        nextIndex = 0;
        break;
      case "End":
        nextIndex = rows.length - 1;
        break;
    }
    if (nextIndex !== currentIndex) {
      rows[nextIndex]?.focus();
      event.preventDefault();
      event.stopPropagation();
    } else if (key === "Home" || key === "End") {
      event.preventDefault();
      event.stopPropagation();
    }
  }
  _getAllPositions() {
    const rows = Array.from(
      this.renderRoot.querySelectorAll(
        'button[role="row"].grid-row'
      )
    );
    const firstRow = rows[0];
    if (!firstRow) {
      return [];
    }
    const firstRowRect = firstRow.getBoundingClientRect();
    const firstRowHeight = firstRowRect.height;
    const computedStyle = getComputedStyle(firstRow);
    const computedHeight = parseFloat(computedStyle.height);
    const zoomFactor = computedHeight / firstRowHeight;
    return rows.map((row) => {
      const rect = row.getBoundingClientRect();
      return {
        top: rect.top * zoomFactor,
        height: rect.height * zoomFactor,
        index: row.getAttribute("data-row-id") ?? "",
        element: row
      };
    });
  }
  _animateRowChanges() {
    const previousPositions = this._previousPositions;
    const currentPositions = this._getAllPositions();
    currentPositions.forEach((el) => {
      const previousPosition = previousPositions.find(
        (p) => p.index === el.index
      );
      if (!previousPosition) {
        el.element.style.transform = `translateY(-${el.height}px)`;
        el.element.style.opacity = "0";
      } else {
        el.element.style.transform = `translateY(${previousPosition.top - el.top}px)`;
      }
      el.element.style.transition = "none";
      el.element.offsetHeight;
      el.element.style.transition = "transform 100ms ease-in-out, opacity 100ms ease-in-out";
      el.element.style.transform = "translateY(0px)";
      el.element.style.opacity = "1";
    });
    this._previousPositions = currentPositions;
  }
  willUpdate(changedProperties) {
    if (changedProperties.has("defaultSelectedRowIds")) {
      if (this.selectedRowIds === void 0 && this._selectedRowIds.size === 0) {
        this._selectedRowIds = new Set(this.defaultSelectedRowIds ?? []);
      }
    }
    if (changedProperties.has("selectedRowIds")) {
      if (this.selectedRowIds !== void 0) {
        this._selectedRowIds = new Set(this.selectedRowIds);
      }
    }
    if (changedProperties.has("data")) {
      const availableIds = new Set(this.data.map((row) => row.id));
      this._selectedRowIds.forEach((id) => {
        if (!availableIds.has(id)) {
          this._selectedRowIds.delete(id);
        }
      });
    }
    if (changedProperties.has("data") || changedProperties.has("_sortByColumnIdx") || changedProperties.has("_sortDirection")) {
      if (this._hasRenderedRows) {
        this._updatePositions();
      } else {
        this.updateComplete.then(() => {
          this._hasRenderedRows = true;
        });
      }
    }
  }
  updated(changedProperties) {
    if (changedProperties.has("columns")) {
      this._sortByColumnIdx = this.columns.findIndex(
        (col) => "sortDirection" in col && col.sortDirection !== void 0
      );
      if (this._sortByColumnIdx === -1) {
        this._sortByColumnIdx = void 0;
        this._sortDirection = "asc";
      } else {
        this._sortDirection = this.columns[this._sortByColumnIdx]?.sortDirection ?? "asc";
      }
    }
    if (changedProperties.has("data") || changedProperties.has("_sortByColumnIdx") || changedProperties.has("_sortDirection")) {
      if (this._hasRenderedRows) {
        this._animateRowChanges();
      }
    }
  }
  _updatePositions() {
    const positions = this._getAllPositions();
    this._previousPositions = positions;
  }
  render() {
    const effectiveColumns = this.selectable ? [
      {
        label: "",
        key: "__selection__"
      },
      ...this.columns
    ] : this.columns;
    const selectionColumnCount = this.selectable ? Math.max(0, effectiveColumns.length - 1) : effectiveColumns.length;
    return html`
      <div
        class=${classMap({
      "grid-container": true,
      "has-selection-column": this.selectable
    })}
        part="grid"
        style="
          --grid-columns: ${effectiveColumns.length};
          --grid-columns-rest: ${selectionColumnCount};
          --selection-column-width: var(--menu-navigation-components-table-item-touch-target-size);
        "
        role="table"
      >
        ${this.showHeader ? html`
              <div class="grid-header" role="row">
                ${effectiveColumns.map((col) => {
      const isSelectionColumn = this.selectable && col.key === "__selection__";
      const isNotLast = effectiveColumns.indexOf(col) !== effectiveColumns.length - 1;
      const icon = col.renderHeaderIcon ? html`<span slot="leading-icon"
                        >${col.renderHeaderIcon()}</span
                      >` : nothing;
      const columnIndex = this.columns.findIndex(
        (column) => column.key === col.key
      );
      const sorted = "sortable" in col && col.sortable && this._sortByColumnIdx === columnIndex;
      const sortDirection = sorted ? this._sortDirection : "none";
      const headerType = col.headerType ?? (this.narrowHeader ? ObcTableHeaderItemType.Narrow : ObcTableHeaderItemType.Regular);
      if ("sortable" in col && col.sortable && !isSelectionColumn) {
        return html`<obc-table-header-item
                      role="columnheader"
                      class=${isSelectionColumn ? "selection-header" : ""}
                      .showDivider=${isNotLast}
                      ?hasLeadingIcon=${icon !== nothing}
                      .sortDirection=${sortDirection}
                      .sortable=${true}
                      type=${headerType}
                      @click=${() => this._handleSortClick(
          col
        )}
                      @keydown=${this._handleHeaderKeyDown}
                      >${icon}${col.label}</obc-table-header-item
                    > `;
      } else {
        if (isSelectionColumn) {
          return html`<div
                        role="columnheader"
                        class=${classMap({
            "selection-header": true
          })}
                        tabindex="0"
                        @keydown=${this._handleHeaderKeyDown}
                      >
                        <obc-checkbox
                          .status=${this._getSelectionStatus()}
                          .disabled=${false}
                          aria-label=${this.selectAllAriaLabel}
                          @click=${(event) => {
            event.preventDefault();
            event.stopPropagation();
          }}
                          @change=${() => this._toggleAllSelection()}
                        ></obc-checkbox>
                      </div>`;
        }
        return html`<obc-table-header-item
                      role="columnheader"
                      class=${isSelectionColumn ? "selection-header" : ""}
                      .showDivider=${isNotLast}
                      ?hasLeadingIcon=${icon !== nothing}
                      type=${headerType}
                      >${icon}${col.label}</obc-table-header-item
                    >`;
      }
    })}
              </div>
              <div class="grid-header-divider"></div>
            ` : nothing}
        <div
          class="grid-body"
          part="body"
          style="grid-template-rows: repeat(${this.sortedData.length}, min-content)"
        >
          ${repeat(
      this.sortedData,
      (row) => row.id,
      (row, rowIndex) => {
        const hasDivider = this.rowDivider && this.data.length - 1 !== rowIndex;
        const isStriped = this.striped && rowIndex % 2 === 1;
        const isRowSelected = (row.selected ?? false) || this.selectable && this._selectedRowIds.has(row.id);
        const previousRow = rowIndex > 0 ? this.sortedData[rowIndex - 1] : void 0;
        const nextRow = rowIndex < this.sortedData.length - 1 ? this.sortedData[rowIndex + 1] : void 0;
        const hasSelectedPreviousRow = previousRow !== void 0 && ((previousRow.selected ?? false) || this.selectable && this._selectedRowIds.has(previousRow.id));
        const hasSelectedNextRow = nextRow !== void 0 && ((nextRow.selected ?? false) || this.selectable && this._selectedRowIds.has(nextRow.id));
        return html`
                <button
                  role="row"
                  class=${classMap({
          "grid-row": true,
          selected: isRowSelected,
          "selected-with-prev": isRowSelected && hasSelectedPreviousRow,
          "selected-with-next": isRowSelected && hasSelectedNextRow,
          striped: isStriped
        })}
                  @click=${() => this._handleRowClick(row)}
                  @keydown=${this._handleRowKeyDown}
                  data-row-id=${row.id}
                  style="grid-row: ${rowIndex + 1}"
                  part="row"
                >
                  ${map(effectiveColumns, (col) => {
          if (this.selectable && col.key === "__selection__") {
            const checked = this._selectedRowIds.has(row.id);
            return html`<div
                        class="grid-cell checkbox align-center selection"
                        role="cell"
                      >
                        <obc-checkbox
                          .status=${checked ? CheckboxStatus.checked : CheckboxStatus.unchecked}
                          .disabled=${false}
                          aria-label=${`Select row ${row.id}`}
                          @click=${(event) => {
              event.preventDefault();
              event.stopPropagation();
            }}
                          @change=${() => this._toggleRowSelection(row.id)}
                        ></obc-checkbox>
                      </div>`;
          }
          const value = row[col.key];
          if (value === void 0) {
            return html`<div class="grid-cell" role="cell"></div>`;
          }
          if (col.renderCell) {
            return html`<div
                        class="grid-cell ${col.dividerRight ? "divider-right" : ""}"
                        role="cell"
                        part=${ifDefined(value.cssPart)}
                      >
                        ${col.renderCell(
              value,
              row,
              row.id
            )}
                      </div>`;
          } else {
            return this._renderCell(
              value,
              row,
              col
            );
          }
        })}
                  ${hasDivider ? html`<div class="grid-row-divider"></div>` : nothing}
                </button>
              `;
      }
    )}
          ${repeat(
      effectiveColumns,
      (col) => col.key,
      (col, colIndex) => col.dividerRight ? html`<div
                    class="grid-column-divider"
                    style="grid-column: ${colIndex + 1}; grid-row: 1/${this.sortedData.length + 1}"
                  ></div>` : nothing
    )}
        </div>
      </div>
    `;
  }
  getAllVisibleRows() {
    const rows = Array.from(
      this.renderRoot.querySelectorAll(
        'button[role="row"].grid-row'
      )
    );
    const bodyRect = this.renderRoot.querySelector(".grid-body")?.getBoundingClientRect();
    if (!bodyRect) {
      return [];
    }
    const scrollTop = bodyRect.top;
    const scrollHeight = bodyRect.height;
    const scrollBottom = scrollTop + scrollHeight;
    return rows.filter((el) => el.checkVisibility()).filter(
      (el) => el.getBoundingClientRect().top >= scrollTop && el.getBoundingClientRect().bottom <= scrollBottom
    ).map((row) => row.getAttribute("data-row-id")).filter((id) => id !== null);
  }
  _handleCellButtonClick(event, row, columnKey) {
    event.preventDefault();
    event.stopPropagation();
    const e = new CustomEvent("cell-button-click", {
      detail: { rowId: row.id, columnKey }
    });
    this.dispatchEvent(e);
  }
  _handleCellTagClick(event, row, columnKey, tagId) {
    event.preventDefault();
    event.stopPropagation();
    const e = new CustomEvent("cell-tag-click", {
      detail: { rowId: row.id, columnKey, tagId }
    });
    this.dispatchEvent(e);
  }
  _handleCellCheckboxChange(event, row, columnKey) {
    event.preventDefault();
    event.stopPropagation();
    const e = new CustomEvent(
      "cell-checkbox-change",
      {
        detail: {
          rowId: row.id,
          columnKey,
          status: event.detail.status,
          disabled: event.detail.disabled
        }
      }
    );
    this.dispatchEvent(e);
  }
  _getSelectableRowIds() {
    return this.data.map((row) => row.id);
  }
  _getSelectionStatus() {
    const rowIds = this._getSelectableRowIds();
    if (rowIds.length === 0) return CheckboxStatus.unchecked;
    const selectedCount = rowIds.filter(
      (id) => this._selectedRowIds.has(id)
    ).length;
    if (selectedCount === 0) return CheckboxStatus.unchecked;
    if (selectedCount === rowIds.length) return CheckboxStatus.checked;
    return CheckboxStatus.mixed;
  }
  _emitSelectionChange(selectedRowIds, source) {
    const selectedRows = this.data.filter(
      (row) => selectedRowIds.includes(row.id)
    );
    const e = new CustomEvent(
      "selection-change",
      {
        detail: { selectedRowIds, selectedRows, source }
      }
    );
    this.dispatchEvent(e);
  }
  _applySelectionChange(nextSelection, source) {
    const selectedRowIds = Array.from(nextSelection);
    this._emitSelectionChange(selectedRowIds, source);
    if (this.selectedRowIds === void 0) {
      this._selectedRowIds = nextSelection;
      this.requestUpdate();
    }
  }
  _toggleRowSelection(rowId) {
    const nextSelection = new Set(this._selectedRowIds);
    if (nextSelection.has(rowId)) {
      nextSelection.delete(rowId);
    } else {
      nextSelection.add(rowId);
    }
    this._applySelectionChange(nextSelection, "row");
  }
  _toggleAllSelection() {
    const rowIds = this._getSelectableRowIds();
    const status = this._getSelectionStatus();
    const nextSelection = status === CheckboxStatus.checked ? /* @__PURE__ */ new Set() : new Set(rowIds);
    this._applySelectionChange(nextSelection, "header");
  }
  _renderCell(value, row, column) {
    if (value.type === "regular") {
      return html`<div
        class=${classMap({
        "grid-cell": true,
        regular: true,
        neutral: value.neutral ?? false,
        "large-icon": value.largeIcon ?? false,
        "no-wrap": value.noWrap ?? false,
        [`align-${value.align ?? "left"}`]: true,
        "divider-right": column.dividerRight ?? false,
        vertical: value.vertical ?? false
      })}
        role="cell"
        part=${ifDefined(cssPart(value, "cell"))}
      >
        ${value.icon3 ? html`<span class="icon" part=${ifDefined(cssPart(value, "icon3"))}
              >${value.icon3}</span
            >` : nothing}
        ${value.icon2 ? html`<span class="icon" part=${ifDefined(cssPart(value, "icon2"))}
              >${value.icon2}</span
            >` : nothing}
        ${value.icon ? html`<span class="icon" part=${ifDefined(cssPart(value, "icon"))}
              >${value.icon}</span
            >` : nothing}
        ${value.title ? html`<span class="title" part=${ifDefined(cssPart(value, "title"))}
              >${value.title}</span
            >` : nothing}
        ${value.text ? html`<span part=${ifDefined(cssPart(value, "text"))}
              >${value.text}</span
            >` : nothing}
      </div>`;
    } else if (value.type === "button") {
      return html`<div
        class="grid-cell button ${column.dividerRight ? "divider-right" : ""}"
        role="cell"
      >
        <obc-button
          variant="normal"
          fullWidth
          ?showLeadingIcon=${value.icon !== void 0}
          part=${ifDefined(cssPart(value, "button"))}
          @click=${(event) => this._handleCellButtonClick(event, row, column.key)}
        >
          ${value.icon ? html`<span
                slot="leading-icon"
                part=${ifDefined(cssPart(value, "icon"))}
                >${value.icon}</span
              >` : nothing}
          ${value.text ? html`<span part=${ifDefined(cssPart(value, "text"))}
                >${value.text}</span
              >` : nothing}
        </obc-button>
      </div>`;
    } else if (value.type === "checkbox") {
      const checkboxLabel = value.label ?? value.text ?? "";
      const ariaLabel = checkboxLabel.trim() || column.label?.trim() || "Checkbox";
      return html`<div
        class=${classMap({
        "grid-cell": true,
        checkbox: true,
        [`align-${value.align ?? "center"}`]: true,
        "divider-right": column.dividerRight ?? false
      })}
        role="cell"
        part=${ifDefined(cssPart(value, "cell"))}
      >
        <obc-checkbox
          .status=${value.status ?? CheckboxStatus.unchecked}
          .disabled=${value.disabled ?? false}
          aria-describedby=${ifDefined(value.ariaDescribedBy)}
          aria-label=${ariaLabel}
          part=${ifDefined(cssPart(value, "checkbox"))}
          @click=${(event) => {
        event.preventDefault();
        event.stopPropagation();
      }}
          @change=${(event) => this._handleCellCheckboxChange(event, row, column.key)}
        ></obc-checkbox>
      </div>`;
    } else if (value.type === "tag") {
      const tags = value.tags ?? (value.tag ? [value.tag] : void 0) ?? [
        {
          id: value.tagId ?? "tag",
          label: value.label ?? value.text ?? "Label",
          color: value.color,
          hasIcon: value.hasIcon,
          icon: value.icon
        }
      ];
      const wrap = value.wrap ?? value.tags !== void 0;
      const defaultMaxTags = value.tags ? 2 : void 0;
      const maxTags = (value.maxTags ?? defaultMaxTags) !== void 0 ? Math.max(0, Math.floor(value.maxTags ?? defaultMaxTags ?? 0)) : void 0;
      const visibleTags = maxTags !== void 0 ? tags.slice(0, maxTags) : tags;
      const overflowCount = maxTags !== void 0 ? Math.max(0, tags.length - maxTags) : 0;
      const overflowLabel = value.overflowLabel ?? `+${overflowCount.toString()}`;
      return html`<div
        class=${classMap({
        "grid-cell": true,
        tags: tags.length > 1,
        wrap,
        [`align-${value.align ?? "left"}`]: true,
        "divider-right": column.dividerRight ?? false
      })}
        role="cell"
        part=${ifDefined(cssPart(value, "cell"))}
      >
        ${visibleTags.map((tag) => {
        const hasIcon = tag.hasIcon ?? tag.icon !== void 0;
        return html`<obc-tag
            .label=${tag.label}
            color=${tag.color ?? TagColor.gray}
            ?hasIcon=${hasIcon}
            part=${ifDefined(
          [cssPart(value, "tag"), tag.cssPart].filter(Boolean).join(" ") || void 0
        )}
            @click=${(event) => this._handleCellTagClick(event, row, column.key, tag.id)}
          >
            ${hasIcon && tag.icon ? tag.icon : nothing}
          </obc-tag>`;
      })}
        ${overflowCount > 0 ? html`<span
              class="tag-overflow"
              part=${ifDefined(cssPart(value, "tag-overflow"))}
              >${overflowLabel}</span
            >` : nothing}
      </div>`;
    } else if (value.type === "horizontal-bar") {
      const hasBar = value.hasBar ?? true;
      const hasScale = value.hasScale ?? false;
      const showLabels = !(value.hideLabels ?? true);
      const fixedAspectRatio = value.fixedAspectRatio ?? true;
      return html`<div
        class=${classMap({
        "grid-cell": true,
        "horizontal-bar": true,
        [`align-${value.align ?? "left"}`]: true,
        "divider-right": column.dividerRight ?? false
      })}
        role="cell"
        part=${ifDefined(cssPart(value, "cell"))}
      >
        <obc-bar-horizontal
          .minValue=${value.minValue ?? 0}
          .maxValue=${value.maxValue ?? 100}
          .value=${value.value}
          .setpoint=${value.setpoint}
          .hasBar=${hasBar}
          .hasScale=${hasScale}
          .showLabels=${showLabels}
          .priority=${value.priority ?? Priority.regular}
          .fillMode=${value.fillMode ?? FillMode.fill}
          .fillMin=${value.fillMin}
          .fillMax=${value.fillMax}
          .barThickness=${value.barThickness ?? 24}
          .scaleType=${value.scaleType ?? ScaleType.regular}
          .frameStyle=${value.frameStyle ?? FrameStyle.regular}
          .side=${value.side ?? ExternalScaleSide.bottom}
          .state=${value.state ?? InstrumentState.active}
          .fixedAspectRatio=${fixedAspectRatio}
          .scaleReferenceSize=${value.scaleReferenceSize ?? 384}
          part=${ifDefined(cssPart(value, "bar"))}
        ></obc-bar-horizontal>
      </div>`;
    } else {
      return nothing;
    }
  }
};
ObcTable.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: Array })
], ObcTable.prototype, "data", 2);
__decorateClass([
  property({ type: Array })
], ObcTable.prototype, "columns", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTable.prototype, "rowDivider", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTable.prototype, "narrowHeader", 2);
__decorateClass([
  property({ type: Boolean, attribute: false })
], ObcTable.prototype, "showHeader", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTable.prototype, "striped", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTable.prototype, "selectable", 2);
__decorateClass([
  property({ type: Array })
], ObcTable.prototype, "selectedRowIds", 2);
__decorateClass([
  property({ type: Array })
], ObcTable.prototype, "defaultSelectedRowIds", 2);
__decorateClass([
  property({ type: String })
], ObcTable.prototype, "selectAllAriaLabel", 2);
__decorateClass([
  state()
], ObcTable.prototype, "_sortByColumnIdx", 2);
__decorateClass([
  state()
], ObcTable.prototype, "_sortDirection", 2);
__decorateClass([
  state()
], ObcTable.prototype, "_selectedRowIds", 2);
ObcTable = __decorateClass([
  customElement("obc-table")
], ObcTable);
export {
  ObcTable,
  ObcTableCellType
};
//# sourceMappingURL=table.js.map
