'use client';
'use strict';

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

var tslib = require('tslib');
var lit = require('lit');
var decorators_js = require('lit/decorators.js');
var classMap_js = require('lit/directives/class-map.js');
var sgdsElement = require('../../base/sgds-element.cjs.js');
var table = require('./table.cjs.js');
var slot = require('../../utils/slot.cjs.js');
var context = require('@lit/context');
var tableContext = require('./table-context.cjs.js');

/**
 * @summary Table is used for displaying collections of data in organized rows and columns.
 * It supports two rendering methods: supply an array of data for automatic table generation, or use the slot to insert custom table elements for full structural control.
 *
 * @slot - Insert custom table elements (such as rows, headers, or cells) to define the table structure manually.
 */
class SgdsTable extends sgdsElement["default"] {
    constructor() {
        super(...arguments);
        /**
         * Array of strings to populate row header cells.
         * @type {string[]}
         */
        this.rowHeader = [];
        /**
         * Array of strings to populate column header cells.
         * Only used when `headerPosition` is set to "vertical" or "both".
         * @type {string[]}
         */
        this.columnHeader = [];
        /**
         * Two-dimensional array of strings or numbers to populate table data cells.
         * @type {Array<(string | number)[]>}
         */
        this.tableData = [];
        /**
         * Defines the placement of headers in the table.
         * Use "horizontal" for top headers only, "vertical" for left headers only,
         * or "both" for both row and column headers.
         * @type {"horizontal" | "vertical" | "both"}
         * @default "horizontal"
         */
        this.headerPosition = "horizontal";
        /**
         * Enables background styling on horizontal header rows.
         * When true, applies background color to header cells for better visual distinction.
         * @type {boolean}
         * @default false
         */
        this.headerBackground = false;
        /**
         * Enables borders around table cells.
         * When true, displays visible borders between all table cells.
         * @type {boolean}
         * @default false
         */
        this.tableBorder = false;
        /**
         * Indicates the presence of the default slot.
         * Used for server-side rendering to determine table structure.
         * @type {boolean}
         * @internal
         * @default false
         */
        this.hasDefaultSlot = false;
        this._headerBackground = false;
        /** @internal */
        this.hasSlotController = new slot.HasSlotController(this, "[default]");
    }
    connectedCallback() {
        super.connectedCallback();
    }
    updated() {
        if (!this.hasDefaultSlot)
            this.hasDefaultSlot = this.hasSlotController.test("[default]");
        this._headerBackground = this.headerBackground;
    }
    _renderTable() {
        if (this.headerPosition === "horizontal") {
            return lit.html `
        <thead>
          <tr>
            ${this.rowHeader.map((header) => lit.html ` <th><div>${header}</div></th> `)}
          </tr>
        </thead>
        <tbody>
          ${this.tableData.map(row => lit.html `
              <tr>
                ${row.map((cell) => lit.html `<td><div>${cell}</div></td>`)}
              </tr>
            `)}
        </tbody>
      `;
        }
        if (this.headerPosition === "both") {
            return lit.html `
        <thead>
          <tr>
            <th><div></div></th>
            ${this.rowHeader.map((header) => lit.html ` <th><div>${header}</div></th> `)}
          </tr>
        </thead>
        <tbody>
          ${this.tableData.map((row, index) => lit.html `
              <tr>
                <th><div>${this.columnHeader[index]}</div></th>
                ${row.map((cell) => lit.html `<td><div>${cell}</div></td>`)}
              </tr>
            `)}
        </tbody>
      `;
        }
        if (this.headerPosition === "vertical") {
            const flippedTableData = this.tableData[0].map((_, colIndex) => this.tableData.map(row => row[colIndex]));
            return lit.html `
        ${flippedTableData.map((row, index) => lit.html `
            <tr>
              <th><div>${this.columnHeader[index]}</div></th>
              ${row.map((cell) => lit.html `<td><div>${cell}</div></td>`)}
            </tr>
          `)}
      `;
        }
    }
    render() {
        return lit.html `
      <div
        class=${classMap_js.classMap({
            "table-responsive": this.responsive === "always",
            "table-responsive-sm": this.responsive === "sm",
            "table-responsive-md": this.responsive === "md",
            "table-responsive-lg": this.responsive === "lg",
            "table-responsive-xl": this.responsive === "xl"
        })}
        tabindex="0"
      >
        <slot id="table-slot" class=${classMap_js.classMap({ table: true, "no-border": !this.hasDefaultSlot })}></slot>

        ${!this.hasDefaultSlot
            ? lit.html `<table class="table">
              ${this._renderTable()}
            </table>`
            : ""}
      </div>
    `;
    }
}
SgdsTable.styles = [...sgdsElement["default"].styles, table["default"]];
tslib.__decorate([
    decorators_js.property({ type: String, reflect: true })
], SgdsTable.prototype, "responsive", void 0);
tslib.__decorate([
    decorators_js.property({ type: Array })
], SgdsTable.prototype, "rowHeader", void 0);
tslib.__decorate([
    decorators_js.property({ type: Array })
], SgdsTable.prototype, "columnHeader", void 0);
tslib.__decorate([
    decorators_js.property({ type: Array })
], SgdsTable.prototype, "tableData", void 0);
tslib.__decorate([
    decorators_js.property({ type: String })
], SgdsTable.prototype, "headerPosition", void 0);
tslib.__decorate([
    decorators_js.property({ type: Boolean })
], SgdsTable.prototype, "headerBackground", void 0);
tslib.__decorate([
    decorators_js.property({ type: Boolean })
], SgdsTable.prototype, "tableBorder", void 0);
tslib.__decorate([
    decorators_js.property({ type: Boolean })
], SgdsTable.prototype, "hasDefaultSlot", void 0);
tslib.__decorate([
    context.provide({ context: tableContext.TableHeaderBackgroundContext }),
    decorators_js.state()
], SgdsTable.prototype, "_headerBackground", void 0);

exports.SgdsTable = SgdsTable;
exports["default"] = SgdsTable;
//# sourceMappingURL=sgds-table.cjs.js.map
