import * as i0 from '@angular/core';
import { input, booleanAttribute, Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { TranslocoPipe } from '@jsverse/transloco';

class Topbar {
    logo = input(...(ngDevMode ? [undefined, { debugName: "logo" }] : /* istanbul ignore next */ []));
    logoLink = input(...(ngDevMode ? [undefined, { debugName: "logoLink" }] : /* istanbul ignore next */ []));
    bgColor = input('var(--p-primary-color)', ...(ngDevMode ? [{ debugName: "bgColor" }] : /* istanbul ignore next */ []));
    bgImage = input(...(ngDevMode ? [undefined, { debugName: "bgImage" }] : /* istanbul ignore next */ []));
    bgRepeat = input(false, { ...(ngDevMode ? { debugName: "bgRepeat" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    textColor = input('var(--p-primary-contrast-color)', ...(ngDevMode ? [{ debugName: "textColor" }] : /* istanbul ignore next */ []));
    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
    subTitle = input(...(ngDevMode ? [undefined, { debugName: "subTitle" }] : /* istanbul ignore next */ []));
    showBranding = input(true, { ...(ngDevMode ? { debugName: "showBranding" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    logoClass = input(...(ngDevMode ? [undefined, { debugName: "logoClass" }] : /* istanbul ignore next */ []));
    titleClass = input(...(ngDevMode ? [undefined, { debugName: "titleClass" }] : /* istanbul ignore next */ []));
    subTitleClass = input(...(ngDevMode ? [undefined, { debugName: "subTitleClass" }] : /* istanbul ignore next */ []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Topbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: Topbar, isStandalone: true, selector: "mt-topbar", inputs: { logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, logoLink: { classPropertyName: "logoLink", publicName: "logoLink", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null }, bgImage: { classPropertyName: "bgImage", publicName: "bgImage", isSignal: true, isRequired: false, transformFunction: null }, bgRepeat: { classPropertyName: "bgRepeat", publicName: "bgRepeat", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, showBranding: { classPropertyName: "showBranding", publicName: "showBranding", isSignal: true, isRequired: false, transformFunction: null }, logoClass: { classPropertyName: "logoClass", publicName: "logoClass", isSignal: true, isRequired: false, transformFunction: null }, titleClass: { classPropertyName: "titleClass", publicName: "titleClass", isSignal: true, isRequired: false, transformFunction: null }, subTitleClass: { classPropertyName: "subTitleClass", publicName: "subTitleClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"w-full flex justify-between align-center bg-primary px-4 py-2 h-[var(--header-height)]\"\r\n  [style.backgroundColor]=\"bgColor()\"\r\n  [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n  [style.backgroundSize]=\"bgImage() && !bgRepeat() ? 'cover' : null\"\r\n  [style.backgroundPosition]=\"bgImage() && !bgRepeat() ? 'center' : null\"\r\n  [class.bg-no-repeat]=\"!bgRepeat()\"\r\n  [class.bg-repeat]=\"bgRepeat()\"\r\n>\r\n  <div class=\"flex gap-4 items-center\" [style.color]=\"textColor()\">\r\n    <div\r\n      class=\"flex gap-3 items-center h-full overflow-hidden transition-all duration-400 ease-in-out\"\r\n      [class.max-w-0]=\"!showBranding()\"\r\n      [class.opacity-0]=\"!showBranding()\"\r\n      [class.max-w-lg]=\"showBranding()\"\r\n      [class.opacity-100]=\"showBranding()\"\r\n    >\r\n      @if (logo()) {\r\n        <img\r\n          [src]=\"logo()\"\r\n          [alt]=\"'components.topbar.logoAlt' | transloco\"\r\n          class=\"h-10 shrink-0\"\r\n          [class]=\"logoClass()\"\r\n          [routerLink]=\"logoLink()\"\r\n          [class.cursor-pointer]=\"logoLink()\"\r\n        />\r\n      }\r\n      @if (logo() && (title() || subTitle())) {\r\n        <div class=\"h-3/4 w-[1px] bg-current shrink-0 opacity-30\"></div>\r\n      }\r\n      @if (title() || subTitle()) {\r\n        <div class=\"flex flex-col shrink-0\">\r\n          <h2\r\n            class=\"text-md font-semibold product-name whitespace-nowrap\"\r\n            [class]=\"titleClass()\"\r\n          >\r\n            {{ title() }}\r\n          </h2>\r\n          <span\r\n            class=\"text-sm product-tagline whitespace-nowrap\"\r\n            [class]=\"subTitleClass()\"\r\n            >{{ subTitle() }}</span\r\n          >\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-content select=\"[start]\"></ng-content>\r\n  </div>\r\n  <div class=\"flex gap-2 items-center\">\r\n    <ng-content select=\"[actions]\"></ng-content>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Topbar, decorators: [{
            type: Component,
            args: [{ selector: 'mt-topbar', standalone: true, imports: [RouterLink, TranslocoPipe], template: "<div\r\n  class=\"w-full flex justify-between align-center bg-primary px-4 py-2 h-[var(--header-height)]\"\r\n  [style.backgroundColor]=\"bgColor()\"\r\n  [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n  [style.backgroundSize]=\"bgImage() && !bgRepeat() ? 'cover' : null\"\r\n  [style.backgroundPosition]=\"bgImage() && !bgRepeat() ? 'center' : null\"\r\n  [class.bg-no-repeat]=\"!bgRepeat()\"\r\n  [class.bg-repeat]=\"bgRepeat()\"\r\n>\r\n  <div class=\"flex gap-4 items-center\" [style.color]=\"textColor()\">\r\n    <div\r\n      class=\"flex gap-3 items-center h-full overflow-hidden transition-all duration-400 ease-in-out\"\r\n      [class.max-w-0]=\"!showBranding()\"\r\n      [class.opacity-0]=\"!showBranding()\"\r\n      [class.max-w-lg]=\"showBranding()\"\r\n      [class.opacity-100]=\"showBranding()\"\r\n    >\r\n      @if (logo()) {\r\n        <img\r\n          [src]=\"logo()\"\r\n          [alt]=\"'components.topbar.logoAlt' | transloco\"\r\n          class=\"h-10 shrink-0\"\r\n          [class]=\"logoClass()\"\r\n          [routerLink]=\"logoLink()\"\r\n          [class.cursor-pointer]=\"logoLink()\"\r\n        />\r\n      }\r\n      @if (logo() && (title() || subTitle())) {\r\n        <div class=\"h-3/4 w-[1px] bg-current shrink-0 opacity-30\"></div>\r\n      }\r\n      @if (title() || subTitle()) {\r\n        <div class=\"flex flex-col shrink-0\">\r\n          <h2\r\n            class=\"text-md font-semibold product-name whitespace-nowrap\"\r\n            [class]=\"titleClass()\"\r\n          >\r\n            {{ title() }}\r\n          </h2>\r\n          <span\r\n            class=\"text-sm product-tagline whitespace-nowrap\"\r\n            [class]=\"subTitleClass()\"\r\n            >{{ subTitle() }}</span\r\n          >\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-content select=\"[start]\"></ng-content>\r\n  </div>\r\n  <div class=\"flex gap-2 items-center\">\r\n    <ng-content select=\"[actions]\"></ng-content>\r\n  </div>\r\n</div>\r\n" }]
        }], propDecorators: { logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: false }] }], logoLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoLink", required: false }] }], bgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgColor", required: false }] }], bgImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgImage", required: false }] }], bgRepeat: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgRepeat", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColor", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitle", required: false }] }], showBranding: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBranding", required: false }] }], logoClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoClass", required: false }] }], titleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleClass", required: false }] }], subTitleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitleClass", required: false }] }] } });

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

export { Topbar };
//# sourceMappingURL=masterteam-components-topbar.mjs.map
