/**
 * Copyright IBM Corp. 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import "../../globals/settings.js";
import { carbonElement } from "../../globals/decorators/carbon-element.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
import data_table_default from "./data-table.scss.js";
import { LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
//#region src/components/data-table/table-skeleton.ts
/**
* Copyright IBM Corp. 2019, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* Data table skeleton
*
* @element cds-custom-table-skeleton
*/
let CDSTableSkeleton = class CDSTableSkeleton extends LitElement {
	constructor(..._args) {
		super(..._args);
		this.headers = [];
		this.columnCount = 5;
		this.rowCount = 5;
		this.showHeader = true;
		this.showToolbar = true;
		this.zebra = false;
	}
	/**
	* @returns The header
	*/
	_renderHeader() {
		const { showHeader } = this;
		return !showHeader ? void 0 : html`
          <div class="${"cds-custom"}--skeleton ${"cds-custom"}--data-table-container">
            <div class="${"cds-custom"}--data-table-header">
              <div class="${"cds-custom"}--data-table-header__title"></div>
              <div class="${"cds-custom"}--data-table-header__description"></div>
            </div>
          </div>
        `;
	}
	/**
	* @returns The header
	*/
	_renderToolbar() {
		const { showToolbar } = this;
		return !showToolbar ? void 0 : html`
          <section class="${"cds-custom"}--table-toolbar">
            <div class="${"cds-custom"}--toolbar-content">
              <span
                class="${"cds-custom"}--skeleton ${"cds-custom"}--btn ${"cds-custom"}--btn--sm"></span>
            </div>
          </section>
        `;
	}
	connectedCallback() {
		if (!this.hasAttribute("role")) this.setAttribute("role", "table");
		super.connectedCallback();
	}
	updated() {
		if (this.headers.length) this.columnCount = this.headers.length;
		else this.headers = Array(this.columnCount).fill("");
	}
	render() {
		const { columnCount, headers, rowCount, zebra } = this;
		const classes = classMap({
			[`cds-custom--skeleton`]: true,
			[`cds-custom--data-table`]: true,
			[`cds-custom--data-table--zebra`]: zebra
		});
		return html`
      ${this._renderHeader()} ${this._renderToolbar()}

      <table class="${classes}">
        <thead>
          <tr>
            ${Array.from(new Array(columnCount)).map((_, index) => html`
                <th>
                  <div class="${"cds-custom"}--table-header-label">
                    ${headers[index]}
                  </div>
                </th>
              `)}
          </tr>
        </thead>
        <tbody>
          ${Array.from(new Array(rowCount)).map(() => html`
              <tr>
                ${Array.from(new Array(columnCount)).map(() => html`
                    <td>
                      <span></span>
                    </td>
                  `)}
              </tr>
            `)}
        </tbody>
      </table>
    `;
	}
	static {
		this.styles = data_table_default;
	}
};
__decorate([property()], CDSTableSkeleton.prototype, "headers", void 0);
__decorate([property({
	type: Number,
	reflect: true,
	attribute: "column-count"
})], CDSTableSkeleton.prototype, "columnCount", void 0);
__decorate([property({
	type: Number,
	reflect: true,
	attribute: "row-count"
})], CDSTableSkeleton.prototype, "rowCount", void 0);
__decorate([property({
	type: Boolean,
	reflect: true,
	attribute: "show-header"
})], CDSTableSkeleton.prototype, "showHeader", void 0);
__decorate([property({
	type: Boolean,
	reflect: true,
	attribute: "show-toolbar"
})], CDSTableSkeleton.prototype, "showToolbar", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSTableSkeleton.prototype, "zebra", void 0);
CDSTableSkeleton = __decorate([carbonElement(`cds-custom-table-skeleton`)], CDSTableSkeleton);
var table_skeleton_default = CDSTableSkeleton;
//#endregion
export { table_skeleton_default as default };

//# sourceMappingURL=table-skeleton.js.map