import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { input, booleanAttribute, contentChild, output, signal, computed, Component } from '@angular/core';
import { Avatar } from '@masterteam/components/avatar';
import { Button } from '@masterteam/components/button';
import { Tabs } from '@masterteam/components/tabs';

class PageHeader {
    backButton = input(false, { ...(ngDevMode ? { debugName: "backButton" } : {}), transform: booleanAttribute });
    backButtonIcon = input('arrow', ...(ngDevMode ? [{ debugName: "backButtonIcon" }] : []));
    avatarIcon = input(...(ngDevMode ? [undefined, { debugName: "avatarIcon" }] : []));
    avatarStyle = input({}, ...(ngDevMode ? [{ debugName: "avatarStyle" }] : []));
    avatarShape = input('square', ...(ngDevMode ? [{ debugName: "avatarShape" }] : []));
    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
    tabs = input([], ...(ngDevMode ? [{ debugName: "tabs" }] : []));
    activeTab = input(...(ngDevMode ? [undefined, { debugName: "activeTab" }] : []));
    titleEnd = contentChild('titleEnd', ...(ngDevMode ? [{ debugName: "titleEnd" }] : []));
    headerEnd = contentChild('headerEnd', ...(ngDevMode ? [{ debugName: "headerEnd" }] : []));
    backButtonClick = output();
    tabChange = output();
    rtl = signal(document.documentElement.dir === 'rtl', ...(ngDevMode ? [{ debugName: "rtl" }] : []));
    backIcon = computed(() => {
        if (this.backButtonIcon() === 'close') {
            return 'general.x-close';
        }
        return this.rtl() ? 'arrow.arrow-narrow-right' : 'arrow.arrow-narrow-left';
    }, ...(ngDevMode ? [{ debugName: "backIcon" }] : []));
    hasTabs = computed(() => this.tabs().length > 0, ...(ngDevMode ? [{ debugName: "hasTabs" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PageHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: PageHeader, isStandalone: true, selector: "mt-page-header", inputs: { backButton: { classPropertyName: "backButton", publicName: "backButton", isSignal: true, isRequired: false, transformFunction: null }, backButtonIcon: { classPropertyName: "backButtonIcon", publicName: "backButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, avatarIcon: { classPropertyName: "avatarIcon", publicName: "avatarIcon", isSignal: true, isRequired: false, transformFunction: null }, avatarStyle: { classPropertyName: "avatarStyle", publicName: "avatarStyle", isSignal: true, isRequired: false, transformFunction: null }, avatarShape: { classPropertyName: "avatarShape", publicName: "avatarShape", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backButtonClick: "backButtonClick", tabChange: "tabChange" }, queries: [{ propertyName: "titleEnd", first: true, predicate: ["titleEnd"], descendants: true, isSignal: true }, { propertyName: "headerEnd", first: true, predicate: ["headerEnd"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"grid grid-cols-3 bg-content items-center p-3 border-b border-surface min-h-18.5\"\r\n>\r\n  <div class=\"flex gap-2 items-center\">\r\n    @if (backButton()) {\r\n      <mt-button\r\n        [text]=\"true\"\r\n        [icon]=\"backIcon()\"\r\n        size=\"large\"\r\n        (click)=\"backButtonClick.emit()\"\r\n      >\r\n      </mt-button>\r\n    }\r\n\r\n    @if (avatarIcon()) {\r\n      <mt-avatar\r\n        [icon]=\"avatarIcon()\"\r\n        [shape]=\"avatarShape()\"\r\n        [style]=\"avatarStyle()\"\r\n      >\r\n      </mt-avatar>\r\n    }\r\n\r\n    <h3 class=\"font-bold text-lg\">{{ title() }}</h3>\r\n\r\n    @if (titleEnd(); as template) {\r\n      <ng-container [ngTemplateOutlet]=\"template\" />\r\n    }\r\n  </div>\r\n\r\n  <div class=\"justify-self-center\">\r\n    @if (hasTabs()) {\r\n      <mt-tabs\r\n        [options]=\"tabs()\"\r\n        [active]=\"activeTab()\"\r\n        size=\"large\"\r\n        (onChange)=\"tabChange.emit($event)\"\r\n      >\r\n      </mt-tabs>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"justify-self-end\">\r\n    @if (headerEnd(); as template) {\r\n      <ng-container [ngTemplateOutlet]=\"template\" />\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PageHeader, decorators: [{
            type: Component,
            args: [{ selector: 'mt-page-header', standalone: true, imports: [Avatar, Button, Tabs, NgTemplateOutlet], template: "<div\r\n  class=\"grid grid-cols-3 bg-content items-center p-3 border-b border-surface min-h-18.5\"\r\n>\r\n  <div class=\"flex gap-2 items-center\">\r\n    @if (backButton()) {\r\n      <mt-button\r\n        [text]=\"true\"\r\n        [icon]=\"backIcon()\"\r\n        size=\"large\"\r\n        (click)=\"backButtonClick.emit()\"\r\n      >\r\n      </mt-button>\r\n    }\r\n\r\n    @if (avatarIcon()) {\r\n      <mt-avatar\r\n        [icon]=\"avatarIcon()\"\r\n        [shape]=\"avatarShape()\"\r\n        [style]=\"avatarStyle()\"\r\n      >\r\n      </mt-avatar>\r\n    }\r\n\r\n    <h3 class=\"font-bold text-lg\">{{ title() }}</h3>\r\n\r\n    @if (titleEnd(); as template) {\r\n      <ng-container [ngTemplateOutlet]=\"template\" />\r\n    }\r\n  </div>\r\n\r\n  <div class=\"justify-self-center\">\r\n    @if (hasTabs()) {\r\n      <mt-tabs\r\n        [options]=\"tabs()\"\r\n        [active]=\"activeTab()\"\r\n        size=\"large\"\r\n        (onChange)=\"tabChange.emit($event)\"\r\n      >\r\n      </mt-tabs>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"justify-self-end\">\r\n    @if (headerEnd(); as template) {\r\n      <ng-container [ngTemplateOutlet]=\"template\" />\r\n    }\r\n  </div>\r\n</div>\r\n" }]
        }], propDecorators: { backButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButton", required: false }] }], backButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButtonIcon", required: false }] }], avatarIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarIcon", required: false }] }], avatarStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarStyle", required: false }] }], avatarShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarShape", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }], titleEnd: [{ type: i0.ContentChild, args: ['titleEnd', { isSignal: true }] }], headerEnd: [{ type: i0.ContentChild, args: ['headerEnd', { isSignal: true }] }], backButtonClick: [{ type: i0.Output, args: ["backButtonClick"] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { PageHeader };
//# sourceMappingURL=masterteam-components-page-header.mjs.map
