// #region Imports
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { HideOnScrollController } from '../../Controllers/HideOnScrollController';
import { Component } from '../../Decorators/ComponentDecorator';
import { Property } from '../../Decorators/PropertyDecorator';
import { CustomElement } from '../Abstracts/CustomElement';
import { ToolbarElement } from '../Grouping/Toolbar/ToolbarElement';
import { appHeaderElementTemplate } from './AppHeaderElementTemplate';
import { appHeaderElementJoyStyle } from './Themes/AppHeaderElement.Joy';
import { appHeaderElementRetroStyle } from './Themes/AppHeaderElement.Retro';
import { appHeaderElementCosmopolitanStyle } from './Themes/AppHeaderElement.Cosmopolitan';
import { Themeable } from '../../Behaviors/Themeable';
// #endregion
/**
 * AppHeader - A component representing the header section of an application, often used to display application
 *             branding, navigation, and other important elements.
 *
 * @description
 * The AppHeader component is designed to provide a consistent header section across an application. It typically
 * includes elements such as the application title, navigation menus, and user profile options. This component
 * is customizable and can be styled to fit the application's branding and layout needs.
 *
 * @name AppHeader
 * @element mosaik-app-header
 * @category Layout
 *
 * @csspart toolbar - The toolbar part of the AppHeader component, used for containing navigation or action items.
 * @csspart root - The root part of the AppHeader component, used for applying styles and theming.
 *
 * @dependency {ToolbarElement} - The Toolbar element, which is used within the AppHeader for displaying navigation
 *                                and actions.
 *
 * @example
 * ```html
 * <mosaik-app-header>
 *   <div slot="toolbar">
 *     <!-- Include navigation items, logos, or other header content here -->
 *   </div>
 * </mosaik-app-header>
 * ```
 *
 * @public
 */
let AppHeaderElement = class AppHeaderElement extends Themeable(CustomElement) {
    // #region Fields
    _scrollController;
    _scrollTargetFn;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._scrollTargetFn = null;
        this._scrollController = new HideOnScrollController(this, {
            hideOnScroll: true,
            scrollUpThreshold: 1,
            scrollDownThreshold: screen.height,
            behavior: 'auto'
        });
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `{@link is}` property.
     * The `{@link is}` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is() {
        return 'mosaik-app-header';
    }
    /**
     * Gets or sets the `scrollTargetFn` property.
     *
     * @public
     */
    get scrollTargetFn() {
        return this._scrollTargetFn;
    }
    set scrollTargetFn(value) {
        if (this._scrollTargetFn !== value) {
            this._scrollTargetFn = value;
            this.requestUpdate('scrollTargetFn');
            this._scrollController.scrollTargetFn = this._scrollTargetFn;
        }
    }
};
__decorate([
    Property({ type: Function }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], AppHeaderElement.prototype, "scrollTargetFn", null);
AppHeaderElement = __decorate([
    Component({
        selector: 'mosaik-app-header',
        template: appHeaderElementTemplate,
        themes: {
            joy: appHeaderElementJoyStyle,
            retro: appHeaderElementRetroStyle,
            cosmopolitan: appHeaderElementCosmopolitanStyle
        },
        host: {
            part: 'header',
            exportparts: 'toolbar:header-toolbar'
        },
        imports: [
            ToolbarElement
        ]
    }),
    __metadata("design:paramtypes", [])
], AppHeaderElement);
export { AppHeaderElement };
//# sourceMappingURL=AppHeaderElement.js.map