/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
import { __decorate } from "tslib";
import { customElement, attachShadowTemplate, 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=\"section\" part=\"before-section-start\"><slot name=\"before-start\"></slot></div><div class=\"inner center\" part=\"inner\"><div class=\"section\" part=\"section-start\"><slot name=\"start\"></slot><slot></slot></div><div class=\"section center\" part=\"section-center\"><slot name=\"center\"></slot></div><div class=\"section end\" part=\"section-end\"><slot name=\"end\"></slot></div></div><div class=\"section end\" part=\"after-section-end\"><slot name=\"after-end\"></slot></div></div></template>';
const styles = ':host{display:block}:host([hidden]){display:none}.forge-toolbar{--_toolbar-background:var(--forge-toolbar-background, var(--forge-theme-surface, #ffffff));--_toolbar-height:var(--forge-toolbar-height, 56px);--_toolbar-min-height:var(--forge-toolbar-min-height, var(--_toolbar-height));--_toolbar-divider-width:var(--forge-toolbar-divider-width, var(--forge-border-thin, 1px));--_toolbar-divider-style:var(--forge-toolbar-divider-style, solid);--_toolbar-divider-color:var(--forge-toolbar-divider-color, var(--forge-theme-outline, #e0e0e0));--_toolbar-shape:var(--forge-toolbar-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_toolbar-start-start-shape:var(--forge-toolbar-start-start-shape, var(--_toolbar-shape));--_toolbar-start-end-shape:var(--forge-toolbar-start-end-shape, var(--_toolbar-shape));--_toolbar-end-start-shape:var(--forge-toolbar-end-start-shape, 0);--_toolbar-end-end-shape:var(--forge-toolbar-end-end-shape, 0);--_toolbar-padding:var(--forge-toolbar-padding, var(--forge-spacing-medium, 16px));--_toolbar-padding-block:var(--forge-toolbar-padding-block, 0);--_toolbar-padding-inline:var(--forge-toolbar-padding-inline, var(--_toolbar-padding));--_toolbar-columns:var(--forge-toolbar-columns, auto 1fr auto)}.forge-toolbar{display:grid;grid-template-columns:var(--_toolbar-columns);height:var(--_toolbar-height);min-height:var(--_toolbar-min-height);box-sizing:border-box;padding-inline:0;border-block-end-width:var(--_toolbar-divider-width);border-block-end-style:var(--_toolbar-divider-style);border-block-end-color:var(--_toolbar-divider-color);border-start-start-radius:var(--_toolbar-start-start-shape);border-start-end-radius:var(--_toolbar-start-end-shape);border-end-start-radius:var(--_toolbar-end-start-shape);border-end-end-radius:var(--_toolbar-end-end-shape);background:var(--_toolbar-background)}.inner{display:grid;grid-template-columns:var(--_toolbar-columns);padding-inline:var(--_toolbar-padding-inline);padding-block:var(--_toolbar-padding-block);box-sizing:border-box}.section{display:flex;align-items:center;width:100%;box-sizing:border-box}.section.center{justify-content:center}.section.end{justify-content:end}:host([inverted]) .forge-toolbar{--_toolbar-start-start-shape:var(--forge-toolbar-start-start-shape, 0);--_toolbar-start-end-shape:var(--forge-toolbar-start-end-shape, 0);--_toolbar-end-start-shape:var(--_toolbar-shape);--_toolbar-end-end-shape:var(--_toolbar-shape);border-block-end:none;border-block-start-width:var(--_toolbar-divider-width);border-block-start-style:var(--_toolbar-divider-style);border-block-start-color:var(--_toolbar-divider-color)}:host(:is([no-divider],[no-border])) .forge-toolbar{border:none}:host([no-padding]) .forge-toolbar{--_toolbar-padding:var(--forge-toolbar-padding, 0)}:host([auto-height]) .forge-toolbar{--_toolbar-height:var(--forge-toolbar-height, auto)}::slotted(:is(h1,h2,h3,h4,h5,h6,p)){margin:0}';
/**
 * @tag forge-toolbar
 *
 * @summary
 * Toolbars allow you to place titles and actions within a container and align them to the start, center, or end of the toolbar.
 * This component is useful as headers and footers within pages, dialogs, sections... etc. to ensure consistent layout and alignment.
 *
 * @property {boolean} [inverted=false] - Controls whether a bottom divider (default) or top divider (true) is used.
 *
 * @attribute {boolean} [inverted=false] - Controls whether a bottom divider (default) or top divider (true) is used.
 * @attribute {boolean} no-divider - Hides the internal divider.
 * @attribute {boolean} no-border - Deprecated. Use `no-divider` instead.
 * @attribute {boolean} no-padding - Sets the internal padding style to 0.
 * @attribute {boolean} auto-height - Forces the internal container to use `height: auto` for dynamic content that doesn't fit the static height.
 *
 * @cssproperty --forge-toolbar-height - Controls the height.
 * @cssproperty --forge-toolbar-min-height - Controls the minimum height. Defaults to the toolbar height.
 * @cssproperty --forge-theme-surface - Controls the background-color of the toolbar.
 * @cssproperty --forge-toolbar-divider-width - Controls the divider width.
 * @cssproperty --forge-toolbar-divider-style - Controls the divider style.
 * @cssproperty --forge-toolbar-divider-color - Controls the divider color.
 * @cssproperty --forge-toolbar-shape - Controls the border radius of the toolbar.
 * @cssproperty --forge-toolbar-start-start-shape - Controls the border radius of the top left corner.
 * @cssproperty --forge-toolbar-start-end-shape - Controls the border radius of the top right corner.
 * @cssproperty --forge-toolbar-end-start-shape - Controls the border radius of the bottom left corner.
 * @cssproperty --forge-toolbar-end-end-shape - Controls the border radius of the bottom right corner.
 * @cssproperty --forge-toolbar-padding - Controls the left and right padding using the padding-inline style.
 * @cssproperty --forge-toolbar-padding-block - Controls the top and bottom padding using the padding-block style.
 * @cssproperty --forge-toolbar-padding-inline - Controls the left and right padding using the padding-block style.
 * @cssproperty --forge-toolbar-columns - The grid column track sizes.
 *
 * @csspart root - The root container element wrapping all slots and content.
 * @csspart inner - The internal container element for the start, center, and end slots.
 * @csspart before-section-start - The container element for the before-start slot.
 * @csspart section-start - The container element for the start slot.
 * @csspart section-center - The container element for the center slot.
 * @csspart section-end - The container element for the end slot.
 * @csspart after-section-end - The container element for the after-end slot.
 *
 * @slot before-start - The content to place before the start slot.
 * @slot start - The content to place at the start of the toolbar.
 * @slot center - The content to place in the center of the toolbar.
 * @slot end - The content to place at the end of the toolbar.
 * @slot after-end - The content to place after the end slot.
 *
 * @cssclass forge-toolbar - Apply to the root element _(required)_.
 * @cssclass forge-toolbar--inverted - Inverts the toolbar so the divider is at the top.
 * @cssclass forge-toolbar--no-divider - Hides the internal divider.
 * @cssclass forge-toolbar--auto-height - Forces the internal container to use `height: auto` for dynamic content that doesn't fit the static/default height.
 * @cssclass forge-toolbar__start - Renders content in the start area within the toolbar.
 * @cssclass forge-toolbar__center - Renders content in the center area within the toolbar.
 * @cssclass forge-toolbar__end - Renders content in the end area within the toolbar.
 */
let ToolbarComponent = class ToolbarComponent extends BaseComponent {
    static get observedAttributes() {
        return Object.values(TOOLBAR_CONSTANTS.observedAttributes);
    }
    constructor() {
        super();
        this._inverted = false;
        attachShadowTemplate(this, template, styles);
    }
    attributeChangedCallback(name, oldValue, newValue) {
        switch (name) {
            case TOOLBAR_CONSTANTS.observedAttributes.INVERTED:
                this.inverted = coerceBoolean(newValue);
                break;
        }
    }
    get inverted() {
        return this._inverted;
    }
    set inverted(value) {
        if (this._inverted !== value) {
            this._inverted = value;
            this.toggleAttribute(TOOLBAR_CONSTANTS.attributes.INVERTED, this._inverted);
        }
    }
};
ToolbarComponent = __decorate([
    customElement({
        name: TOOLBAR_CONSTANTS.elementName
    })
], ToolbarComponent);
export { ToolbarComponent };
