var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Fragment, h } from '@stencil/core';
import { MapToComponentField } from 'vega-slimmer/core';
import { VegaSkeletonRendererBase } from './vega-skeleton-renderer-base.abstract';
import { parseToPixelString } from '../../../../utils/pixel';
/**
 * Table Skeleton renderer
 */
export class VegaSkeletonTableRenderer extends VegaSkeletonRendererBase {
  constructor() {
    super(...arguments);
    this.rows = 4;
    this.cells = 5;
    this.renderCells = () => {
      return (h(Fragment, null, [...Array(this.cells).keys()].map((cell) => {
        return (h("td", { class: "vega-skeleton-table-cell", key: cell },
          h("vega-skeleton", { type: "text", width: "100%", animated: this.animated })));
      })));
    };
  }
  assignHostStyle() {
    const { width = '100%' } = this;
    const widthWithUnit = parseToPixelString(width);
    return { width: widthWithUnit };
  }
  renderChildren() {
    return (h("table", { class: "vega-skeleton-table" },
      h("thead", { class: "vega-skeleton-table-head" },
        h("tr", { class: "vega-skeleton-table-row" }, this.renderCells())),
      h("tbody", { class: "vega-skeleton-table-body" }, [...Array(this.rows).keys()].map((row) => {
        return (h("tr", { class: "vega-skeleton-table-row", key: row }, this.renderCells()));
      }))));
  }
}
__decorate([
  MapToComponentField()
], VegaSkeletonTableRenderer.prototype, "width", void 0);
