'use client';
'use strict';

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

var tslib = require('tslib');
var lit = require('lit');
var sgdsElement = require('../../base/sgds-element.cjs.js');
var tableHead = require('./table-head.cjs.js');
var context = require('@lit/context');
var tableContext = require('./table-context.cjs.js');
var decorators_js = require('lit/decorators.js');
var classMap_js = require('lit/directives/class-map.js');
var watch = require('../../utils/watch.cjs.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["default"] {
    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 lit.html `<div
      class=${classMap_js.classMap({
            "table-head": true,
            "header-background": this._headerBackground
        })}
    >
      <slot></slot>
    </div>`;
    }
}
SgdsTableHead.styles = [...sgdsElement["default"].styles, tableHead["default"]];
tslib.__decorate([
    context.consume({ context: tableContext.TableHeaderBackgroundContext, subscribe: true }),
    decorators_js.state()
], SgdsTableHead.prototype, "_headerBackground", void 0);
tslib.__decorate([
    watch.watch("_headerBackground")
], SgdsTableHead.prototype, "_handleHeaderBackground", null);

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