import { __decorate } from 'tslib';
import { html } from 'lit';
import SgdsElement from '../../base/sgds-element.js';
import css_248z from './table-head.js';
import { consume } from '@lit/context';
import { TableHeaderBackgroundContext } from './table-context.js';
import { state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { watch } from '../../utils/watch.js';

/**
 * @summary Table head represents a table header cell that identifies a group of information within the table.
 *
 * @slot - Place any elements inside to display as the header content.
 */
class SgdsTableHead extends SgdsElement {
    constructor() {
        super(...arguments);
        this._headerBackground = false;
    }
    connectedCallback() {
        super.connectedCallback();
        this.setAttribute("role", "columnheader");
    }
    _handleHeaderBackground() {
        if (this._headerBackground)
            this.setAttribute("headerBackground", "true");
        else
            this.removeAttribute("headerBackground");
    }
    render() {
        return html `<div
      class=${classMap({
            "table-head": true,
            "header-background": this._headerBackground
        })}
    >
      <slot></slot>
    </div>`;
    }
}
SgdsTableHead.styles = [...SgdsElement.styles, css_248z];
__decorate([
    consume({ context: TableHeaderBackgroundContext, subscribe: true }),
    state()
], SgdsTableHead.prototype, "_headerBackground", void 0);
__decorate([
    watch("_headerBackground")
], SgdsTableHead.prototype, "_handleHeaderBackground", null);

export { SgdsTableHead, SgdsTableHead as default };
//# sourceMappingURL=sgds-table-head.js.map
