import { __decorate, __metadata } from "tslib";
import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
let ChartTypeButtons = class ChartTypeButtons extends LitElement {
    constructor() {
        super(...arguments);
        this.selected = 'summary';
    }
    static { this.styles = css `
    :host {
      .chart-type-buttons {
        display: flex;
      }
      .chart-type-buttons button {
        padding: var(--padding-default) var(--padding-wide);
        border: none;
        border-radius: 9px;
        cursor: pointer;
        background-color: rgba(0, 0, 0, 0.3);
        color: var(--md-sys-color-surface-tint);
      }
      .chart-type-buttons button.active {
        background: var(--md-sys-color-tertiary);
        color: var(--md-sys-color-on-secondary);
        font-weight: 700;
      }
      .chart-type-buttons button.active::before{
        display:inline-block;
        content:'';
        width:4px;
        height:4px;
        background-color:var(--md-sys-color-on-secondary);
        border-radius: 5px;
        margin-right: 4px;
        position: relative;
        top: -2px;
      }
      .chart-type-buttons button:first-child{
        border-radius: 9px 0 0 9px;
      }
      .chart-type-buttons button:last-child{
        border-radius: 0 9px 9px 0;
      }
    }
  `; }
    _onClick(type) {
        this.selected = type;
        this.dispatchEvent(new CustomEvent('chart-type-changed', {
            detail: type,
            bubbles: true,
            composed: true
        }));
    }
    render() {
        return html `
      <div class="chart-type-buttons">
        <button class="${this.selected === 'summary' ? 'active' : ''}" @click="${() => this._onClick('summary')}">
          전체
        </button>
        <button class="${this.selected === 'separate' ? 'active' : ''}" @click="${() => this._onClick('separate')}">
          인버터별
        </button>
      </div>
    `;
    }
};
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], ChartTypeButtons.prototype, "selected", void 0);
ChartTypeButtons = __decorate([
    customElement('chart-type-buttons')
], ChartTypeButtons);
export { ChartTypeButtons };
//# sourceMappingURL=chart-type-buttons.js.map