import { __esDecorate, __runInitializers } from "tslib";
import { LitElement, html, nothing } from 'lit';
import { property } from 'lit/decorators.js';
import '../../../md/icons/ui-icon.js';
import '../../../md/icon-button/ui-icon-button.js';
let AppBar = (() => {
    let _classSuper = LitElement;
    let _deep_decorators;
    let _deep_initializers = [];
    let _deep_extraInitializers = [];
    return class AppBar extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _deep_decorators = [property({ type: Boolean })];
            __esDecorate(this, null, _deep_decorators, { kind: "accessor", name: "deep", static: false, private: false, access: { has: obj => "deep" in obj, get: obj => obj.deep, set: (obj, value) => { obj.deep = value; } }, metadata: _metadata }, _deep_initializers, _deep_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #deep_accessor_storage = __runInitializers(this, _deep_initializers, false);
        /**
         * Deep navigation bar renders the back button and the title only.
         */
        get deep() { return this.#deep_accessor_storage; }
        set deep(value) { this.#deep_accessor_storage = value; }
        constructor() {
            super();
            __runInitializers(this, _deep_extraInitializers);
            this.role = 'header';
        }
        render() {
            return html `
      <div class="app-bar">
        <div class="drawer-sizer">
          ${this.renderBackButton()} ${this.renderMenuTriggerButton()} ${this.renderTitle()}
        </div>
        <div class="bar-content">${this.renderSearchSlot()} ${this.renderAppActions()} ${this.renderUserAvatar()}</div>
      </div>
    `;
        }
        renderBackButton() {
            const { deep } = this;
            if (!deep) {
                return nothing;
            }
            return html `
      <ui-icon-button class="back-button">
        <ui-icon icon="arrowBack"></ui-icon>
      </ui-icon-button>
    `;
        }
        renderMenuTriggerButton() {
            const { deep } = this;
            if (deep) {
                return nothing;
            }
            return html `
      <ui-icon-button class="menu-button">
        <ui-icon icon="menu"></ui-icon>
      </ui-icon-button>
    `;
        }
        renderTitle() {
            return html `<div class="title"><slot name="title"></slot></div>`;
        }
        renderAppActions() {
            return html `<div class="actions"><slot name="action"></slot></div>`;
        }
        renderSearchSlot() {
            return html `<div class="search"><slot name="search"></slot></div>`;
        }
        renderUserAvatar() {
            return html `<div class="avatar"><slot name="avatar"></slot></div>`;
        }
    };
})();
export default AppBar;
//# sourceMappingURL=AppBar.js.map