/**
 * @license
 * Copyright 2023 Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
import { __decorate } from "tslib";
import { CustomElement, attachShadowTemplate, getShadowElement, coerceBoolean } from '@tylertech/forge-core';
import { BaseComponent } from '../core/base/base-component';
import { TOOLBAR_CONSTANTS } from './toolbar-constants';
const template = '<template><div class=\"forge-toolbar\" part=\"root\"><div class=\"forge-toolbar__section forge-toolbar__section--align-start\" part=\"section-start\"><slot name=\"start\"></slot><slot></slot></div><div class=\"forge-toolbar__section forge-toolbar__section--align-center\" part=\"section-center\"><slot name=\"center\"></slot></div><div class=\"forge-toolbar__section forge-toolbar__section--align-end\" part=\"section-end\"><slot name=\"end\"></slot></div></div></template>';
const styles = '.forge-toolbar{background-color:#fff;background-color:var(--mdc-theme-surface,#fff);min-height:56px;min-height:var(--forge-toolbar-min-height,56px);height:56px;height:var(--forge-toolbar-height,56px);padding-inline:16px;padding-inline:var(--forge-toolbar-padding,16px);border-bottom:1px solid var(--forge-theme-border-color,rgba(0,0,0,.12));border-bottom:var(--forge-toolbar-border-bottom,1px solid var(--forge-theme-border-color,rgba(0,0,0,.12)));border-top-left-radius:0;border-top-left-radius:var(--forge-toolbar-border-top-left-radius,0);border-top-right-radius:0;border-top-right-radius:var(--forge-toolbar-border-top-right-radius,0);border-bottom-left-radius:0;border-bottom-left-radius:var(--forge-toolbar-border-bottom-left-radius,0);border-bottom-right-radius:0;border-bottom-right-radius:var(--forge-toolbar-border-bottom-right-radius,0);border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);display:grid;grid-template-columns:auto 1fr auto;-webkit-box-sizing:border-box;box-sizing:border-box}.forge-toolbar__section{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.forge-toolbar__section--align-start{grid-column:1}.forge-toolbar__section--align-center{-webkit-box-pack:center;justify-content:center;grid-column:2}.forge-toolbar__section--align-end{-webkit-box-pack:end;justify-content:flex-end;grid-column:3}.forge-toolbar--inverted{border-top:1px solid var(--forge-theme-border-color,rgba(0,0,0,.12));border-top:var(--forge-toolbar-border-top,1px solid var(--forge-theme-border-color,rgba(0,0,0,.12)));border-bottom:none}:host{display:block;contain:layout}:host([hidden]){display:none}:host([no-border]) .forge-toolbar{border:none}:host([no-padding]) .forge-toolbar{padding-inline:0;padding-inline:var(--forge-toolbar-padding,0)}:host([auto-height]) .forge-toolbar{height:auto;height:var(--forge-toolbar-height,auto)}.forge-toolbar ::slotted(h1){margin:0}.forge-toolbar ::slotted(h2){margin:0}.forge-toolbar ::slotted(h3){margin:0}.forge-toolbar ::slotted(h4){margin:0}.forge-toolbar ::slotted(h5){margin:0}.forge-toolbar ::slotted(h6){margin:0}.forge-toolbar ::slotted(p){margin:0}';
/**
 * The web component class behind the `<forge-toolbar>` custom element.
 *
 * @tag forge-toolbar
 */
let ToolbarComponent = class ToolbarComponent extends BaseComponent {
    constructor() {
        super();
        this._inverted = false;
        attachShadowTemplate(this, template, styles);
        this._rootElement = getShadowElement(this, TOOLBAR_CONSTANTS.selectors.TOOLBAR);
    }
    static get observedAttributes() {
        return [
            TOOLBAR_CONSTANTS.attributes.INVERTED
        ];
    }
    connectedCallback() {
        this._initialize();
    }
    attributeChangedCallback(name, oldValue, newValue) {
        switch (name) {
            case TOOLBAR_CONSTANTS.attributes.INVERTED:
                this.inverted = coerceBoolean(newValue);
                break;
        }
    }
    _initialize() {
        this._setInverted(this._inverted);
    }
    _setInverted(isInverted) {
        if (isInverted) {
            this._rootElement.classList.add(TOOLBAR_CONSTANTS.classes.INVERTED);
        }
        else {
            this._rootElement.classList.remove(TOOLBAR_CONSTANTS.classes.INVERTED);
        }
    }
    get inverted() {
        return this._inverted;
    }
    set inverted(value) {
        this._inverted = value;
        this._setInverted(this._inverted);
    }
};
ToolbarComponent = __decorate([
    CustomElement({
        name: TOOLBAR_CONSTANTS.elementName
    })
], ToolbarComponent);
export { ToolbarComponent };
