'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-140bcbcd.js');

const styleCss$5 = ".sc-smoothly-table-h{display:table;text-align:left;border-collapse:collapse;border:3px solid rgb(var(--smoothly-dark-color), 0.5);width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:rgb(var(--smoothly-default-color))}";

const Table = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.loadMore = index.createEvent(this, "loadMore", 7);
  }
  onSort(event) {
    if (this.sortedOn && this.sortedOn != event.target)
      this.sortedOn.sortDirection = undefined;
    this.sortedOn = event.target;
  }
  render() {
    return [index.h("slot", null)];
  }
  get element() { return index.getElement(this); }
};
Table.style = styleCss$5;

const styleCss$4 = ".sc-smoothly-table-cell-h{display:table-cell;padding:0.5em}";

const TableCell = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
  }
  render() {
    return (index.h(index.Host, null, index.h("slot", null)));
  }
};
TableCell.style = styleCss$4;

const styleCss$3 = ".sc-smoothly-table-expandable-cell-h{display:table-cell;padding:0.5em}.hide.sc-smoothly-table-expandable-cell{display:none}";

const TableExpandableCell = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.expansionOpen = index.createEvent(this, "expansionOpen", 7);
    this.expansionLoaded = index.createEvent(this, "expansionLoaded", 7);
    this.align = "left";
  }
  openChanged(value) {
    if (this.expansionElement)
      if (value)
        this.beginOpen = true;
      else
        this.element.append(this.expansionElement);
  }
  onClick() {
    this.open = !this.open;
  }
  componentDidLoad() {
    this.expansionLoaded.emit();
  }
  componentDidRender() {
    if (this.beginOpen) {
      this.beginOpen = false;
      this.expansionOpen.emit(this.expansionElement);
    }
  }
  render() {
    return (index.h(index.Host, { style: { textAlign: this.align } }, index.h("slot", null), index.h("tr", { ref: e => (this.expansionElement = e) }, index.h("td", { colSpan: 500, class: !this.open ? "hide" : "" }, index.h("slot", { name: "detail" })))));
  }
  get element() { return index.getElement(this); }
  static get watchers() { return {
    "open": ["openChanged"]
  }; }
};
TableExpandableCell.style = styleCss$3;

const styleCss$2 = ".sc-smoothly-table-expandable-row-h{display:table-row;border:1px solid rgb(var(--smoothly-default-color));cursor:pointer}.sc-smoothly-table-expandable-row-h:nth-child(even){background-color:rgb(var(--smoothly-default-tint))}.sc-smoothly-table-expandable-row-h:hover{background-color:rgb(var(--smoothly-default-color))}";

const TableExpandableRow = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.expansions = [];
  }
  onExpansionLoaded(event) {
    this.expansions.push(event.target);
  }
  onDetailsLoaded(event) {
    this.expansions.forEach(cell => {
      if (cell != event.target)
        cell.open = false;
    });
    if (event.detail)
      this.element.after(event.detail);
  }
  render() {
    return (index.h(index.Host, null, index.h("slot", null)));
  }
  get element() { return index.getElement(this); }
};
TableExpandableRow.style = styleCss$2;

const styleCss$1 = ".sc-smoothly-table-header-h{display:table-cell;padding-top:12px;padding-bottom:12px;background-color:rgb(var(--smoothly-default-color));border:1px solid rgb(var(--smoothly-dark-color), 0.5);padding:0.5em;line-height:40px}.sc-smoothly-table-header-h>ion-icon.sc-smoothly-table-header{height:12px;margin-left:20px}";

const TableHeader = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.sort = index.createEvent(this, "sort", 7);
  }
  onClick(event) {
    this.sort.emit({
      property: this.name,
      direction: (this.sortDirection = this.sortDirection == "ascending" ? "descending" : "ascending"),
    });
    console.log("sort", this.name, this.sortDirection);
    event.preventDefault();
    event.stopPropagation();
  }
  render() {
    return (index.h(index.Host, null, index.h("slot", null), this.renderSortIcon()));
  }
  renderSortIcon() {
    let result;
    switch (this.sortDirection) {
      case "ascending":
        result = index.h("ion-icon", { name: "chevron-up-outline", class: "sort-icon" });
        break;
      case "descending":
        result = index.h("ion-icon", { name: "chevron-down-outline", class: "sort-icon" });
        break;
    }
    return result;
  }
};
TableHeader.style = styleCss$1;

const styleCss = ".sc-smoothly-table-row-h{display:table-row;border:1px solid rgb(var(--smoothly-dark-color), 0.5);cursor:pointer}.sc-smoothly-table-row-h:nth-child(even){background-color:rgb(var(--smoothly-default-color))}.sc-smoothly-table-row-h:hover{background-color:rgb(var(--smoothly-default-color))}.hide.sc-smoothly-table-row{display:none}";

const TableRow = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.expansionOpen = index.createEvent(this, "expansionOpen", 7);
    this.align = "left";
  }
  openChanged(value) {
    if (this.expansionElement)
      this.element.after(this.expansionElement);
  }
  onClick(e) {
    this.open = !this.open;
    e.stopPropagation();
  }
  componentDidRender() {
    this.expansionOpen.emit(this.expansionElement);
    if (this.expansionElement && this.open)
      this.element.after(this.expansionElement);
  }
  render() {
    return (index.h(index.Host, { style: { textAlign: this.align } }, index.h("slot", null), index.h("tr", { ref: e => (this.expansionElement = e) }, index.h("td", { colSpan: 500, class: !this.open ? "hide" : "" }, index.h("slot", { name: "detail" })))));
  }
  get element() { return index.getElement(this); }
  static get watchers() { return {
    "open": ["openChanged"]
  }; }
};
TableRow.style = styleCss;

exports.smoothly_table = Table;
exports.smoothly_table_cell = TableCell;
exports.smoothly_table_expandable_cell = TableExpandableCell;
exports.smoothly_table_expandable_row = TableExpandableRow;
exports.smoothly_table_header = TableHeader;
exports.smoothly_table_row = TableRow;
