@taiga-ui/layout/esm2022/components/navigation/header.component.mjs

A package with Taiga UI layout components

import { ChangeDetectionStrategy, Component, signal, ViewEncapsulation, } from '@angular/core';
import { tuiButtonOptionsProvider } from '@taiga-ui/core/components/button';
import { tuiTextfieldOptionsProvider } from '@taiga-ui/core/components/textfield';
import { tuiDropdownOptionsProvider } from '@taiga-ui/core/directives/dropdown';
import { tuiAvatarOptionsProvider } from '@taiga-ui/kit/components/avatar';
import { tuiBadgeOptionsProvider } from '@taiga-ui/kit/components/badge';
import { tuiBadgeNotificationOptionsProvider } from '@taiga-ui/kit/components/badge-notification';
import * as i0 from "@angular/core";
class TuiHeaderComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiHeaderComponent, isStandalone: true, selector: "header[tuiNavigationHeader]", host: { attributes: { "tuiTheme": "dark" } }, providers: [
            tuiAvatarOptionsProvider({ size: 's', appearance: 'secondary-grayscale' }),
            tuiBadgeNotificationOptionsProvider({ size: 'xs' }),
            tuiBadgeOptionsProvider({ size: 'm', appearance: 'primary' }),
            tuiButtonOptionsProvider({ size: 's', appearance: 'flat-grayscale' }),
            tuiDropdownOptionsProvider({ appearance: 'dropdown-navigation' }),
            tuiTextfieldOptionsProvider({ size: signal('s') }),
        ], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["header[tuiNavigationHeader][tuiNavigationHeader]{position:sticky;top:0;left:0;z-index:2;display:flex;inset-inline-start:0;block-size:3rem;inline-size:100vw;align-items:center;gap:.25rem;padding:.5rem;box-sizing:border-box;font:var(--tui-font-text-s);line-height:1rem;background:var(--tui-theme-color, #000);color:var(--tui-text-primary);box-shadow:0 -100rem 0 100rem var(--tui-theme-color, #000)}header[tuiNavigationHeader][tuiNavigationHeader]:before{content:\"\";position:absolute;top:100%;left:0;right:0;z-index:-1;block-size:3rem;pointer-events:none;box-shadow:0 -1.5rem var(--tui-theme-color, #000);border-radius:1.25rem 1.25rem 0 0}header[tuiNavigationHeader][tuiNavigationHeader] [tuiNavigationLogo]{padding:0 .5rem;margin:0 1rem}header[tuiNavigationHeader][tuiNavigationHeader] [tuiNavigationLogo] tui-icon{font-size:1rem}header[tuiNavigationHeader][tuiNavigationHeader] [tuiNavigationSegments]{display:flex;gap:.5rem;min-inline-size:12rem}header[tuiNavigationHeader][tuiNavigationHeader] [tuiNavigationSegments]>*:not(:last-child){flex:1 0 auto}header[tuiNavigationHeader][tuiNavigationHeader] [tuiNavigationSegments]>*:last-child{min-inline-size:3rem;flex:1 1 auto}header[tuiNavigationHeader][tuiNavigationHeader] [tuiButton],header[tuiNavigationHeader][tuiNavigationHeader] [tuiBadge],header[tuiNavigationHeader][tuiNavigationHeader] [tuiChip],header[tuiNavigationHeader][tuiNavigationHeader] tui-badge,header[tuiNavigationHeader][tuiNavigationHeader] tui-chip{max-inline-size:12.5rem}header[tuiNavigationHeader][tuiNavigationHeader] hr{flex:1;block-size:calc(100% + 1rem);min-inline-size:4rem;margin:-.5rem 0;border:none;flex-shrink:0;background:transparent;-webkit-mask:linear-gradient(to right,transparent 0,black 3rem,black calc(100% - 3rem),transparent 100%);mask:linear-gradient(to right,transparent 0,black 3rem,black calc(100% - 3rem),transparent 100%)}header[tuiNavigationHeader][tuiNavigationHeader] hr~[tuiButton]{margin-inline-end:.5rem}header[tuiNavigationHeader][tuiNavigationHeader] tui-textfield{inline-size:12rem;margin-inline-end:1.75rem}tui-dropdown[data-appearance=dropdown-navigation]{border:none;color:var(--tui-text-primary);background:var(--tui-background-elevation-3);background:color-mix(in srgb,var(--tui-theme-color, #000) 80%,#fff)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
export { TuiHeaderComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiHeaderComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'header[tuiNavigationHeader]', template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        tuiAvatarOptionsProvider({ size: 's', appearance: 'secondary-grayscale' }),
                        tuiBadgeNotificationOptionsProvider({ size: 'xs' }),
                        tuiBadgeOptionsProvider({ size: 'm', appearance: 'primary' }),
                        tuiButtonOptionsProvider({ size: 's', appearance: 'flat-grayscale' }),
                        tuiDropdownOptionsProvider({ appearance: 'dropdown-navigation' }),
                        tuiTextfieldOptionsProvider({ size: signal('s') }),
                    ], host: {
                        tuiTheme: 'dark',
                    }, styles: ["header[tuiNavigationHeader][tuiNavigationHeader]{position:sticky;top:0;left:0;z-index:2;display:flex;inset-inline-start:0;block-size:3rem;inline-size:100vw;align-items:center;gap:.25rem;padding:.5rem;box-sizing:border-box;font:var(--tui-font-text-s);line-height:1rem;background:var(--tui-theme-color, #000);color:var(--tui-text-primary);box-shadow:0 -100rem 0 100rem var(--tui-theme-color, #000)}header[tuiNavigationHeader][tuiNavigationHeader]:before{content:\"\";position:absolute;top:100%;left:0;right:0;z-index:-1;block-size:3rem;pointer-events:none;box-shadow:0 -1.5rem var(--tui-theme-color, #000);border-radius:1.25rem 1.25rem 0 0}header[tuiNavigationHeader][tuiNavigationHeader] [tuiNavigationLogo]{padding:0 .5rem;margin:0 1rem}header[tuiNavigationHeader][tuiNavigationHeader] [tuiNavigationLogo] tui-icon{font-size:1rem}header[tuiNavigationHeader][tuiNavigationHeader] [tuiNavigationSegments]{display:flex;gap:.5rem;min-inline-size:12rem}header[tuiNavigationHeader][tuiNavigationHeader] [tuiNavigationSegments]>*:not(:last-child){flex:1 0 auto}header[tuiNavigationHeader][tuiNavigationHeader] [tuiNavigationSegments]>*:last-child{min-inline-size:3rem;flex:1 1 auto}header[tuiNavigationHeader][tuiNavigationHeader] [tuiButton],header[tuiNavigationHeader][tuiNavigationHeader] [tuiBadge],header[tuiNavigationHeader][tuiNavigationHeader] [tuiChip],header[tuiNavigationHeader][tuiNavigationHeader] tui-badge,header[tuiNavigationHeader][tuiNavigationHeader] tui-chip{max-inline-size:12.5rem}header[tuiNavigationHeader][tuiNavigationHeader] hr{flex:1;block-size:calc(100% + 1rem);min-inline-size:4rem;margin:-.5rem 0;border:none;flex-shrink:0;background:transparent;-webkit-mask:linear-gradient(to right,transparent 0,black 3rem,black calc(100% - 3rem),transparent 100%);mask:linear-gradient(to right,transparent 0,black 3rem,black calc(100% - 3rem),transparent 100%)}header[tuiNavigationHeader][tuiNavigationHeader] hr~[tuiButton]{margin-inline-end:.5rem}header[tuiNavigationHeader][tuiNavigationHeader] tui-textfield{inline-size:12rem;margin-inline-end:1.75rem}tui-dropdown[data-appearance=dropdown-navigation]{border:none;color:var(--tui-text-primary);background:var(--tui-background-elevation-3);background:color-mix(in srgb,var(--tui-theme-color, #000) 80%,#fff)}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2xheW91dC9jb21wb25lbnRzL25hdmlnYXRpb24vaGVhZGVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxNQUFNLEVBQ04saUJBQWlCLEdBQ3BCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyx3QkFBd0IsRUFBQyxNQUFNLGtDQUFrQyxDQUFDO0FBQzFFLE9BQU8sRUFBQywyQkFBMkIsRUFBQyxNQUFNLHFDQUFxQyxDQUFDO0FBQ2hGLE9BQU8sRUFBQywwQkFBMEIsRUFBQyxNQUFNLG9DQUFvQyxDQUFDO0FBQzlFLE9BQU8sRUFBQyx3QkFBd0IsRUFBQyxNQUFNLGlDQUFpQyxDQUFDO0FBQ3pFLE9BQU8sRUFBQyx1QkFBdUIsRUFBQyxNQUFNLGdDQUFnQyxDQUFDO0FBQ3ZFLE9BQU8sRUFBQyxtQ0FBbUMsRUFBQyxNQUFNLDZDQUE2QyxDQUFDOztBQUVoRyxNQW1CYSxrQkFBa0I7K0dBQWxCLGtCQUFrQjttR0FBbEIsa0JBQWtCLHdIQVpoQjtZQUNQLHdCQUF3QixDQUFDLEVBQUMsSUFBSSxFQUFFLEdBQUcsRUFBRSxVQUFVLEVBQUUscUJBQXFCLEVBQUMsQ0FBQztZQUN4RSxtQ0FBbUMsQ0FBQyxFQUFDLElBQUksRUFBRSxJQUFJLEVBQUMsQ0FBQztZQUNqRCx1QkFBdUIsQ0FBQyxFQUFDLElBQUksRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLFNBQVMsRUFBQyxDQUFDO1lBQzNELHdCQUF3QixDQUFDLEVBQUMsSUFBSSxFQUFFLEdBQUcsRUFBRSxVQUFVLEVBQUUsZ0JBQWdCLEVBQUMsQ0FBQztZQUNuRSwwQkFBMEIsQ0FBQyxFQUFDLFVBQVUsRUFBRSxxQkFBcUIsRUFBQyxDQUFDO1lBQy9ELDJCQUEyQixDQUFDLEVBQUMsSUFBSSxFQUFFLE1BQU0sQ0FBQyxHQUFHLENBQUMsRUFBQyxDQUFDO1NBQ25ELDBCQVhTLGdCQUFnQjs7U0FnQmpCLGtCQUFrQjs0RkFBbEIsa0JBQWtCO2tCQW5COUIsU0FBUztpQ0FDTSxJQUFJLFlBQ04sNkJBQTZCLFlBQzdCLGdCQUFnQixpQkFFWCxpQkFBaUIsQ0FBQyxJQUFJLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNLGFBQ3BDO3dCQUNQLHdCQUF3QixDQUFDLEVBQUMsSUFBSSxFQUFFLEdBQUcsRUFBRSxVQUFVLEVBQUUscUJBQXFCLEVBQUMsQ0FBQzt3QkFDeEUsbUNBQW1DLENBQUMsRUFBQyxJQUFJLEVBQUUsSUFBSSxFQUFDLENBQUM7d0JBQ2pELHVCQUF1QixDQUFDLEVBQUMsSUFBSSxFQUFFLEdBQUcsRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFDLENBQUM7d0JBQzNELHdCQUF3QixDQUFDLEVBQUMsSUFBSSxFQUFFLEdBQUcsRUFBRSxVQUFVLEVBQUUsZ0JBQWdCLEVBQUMsQ0FBQzt3QkFDbkUsMEJBQTBCLENBQUMsRUFBQyxVQUFVLEVBQUUscUJBQXFCLEVBQUMsQ0FBQzt3QkFDL0QsMkJBQTJCLENBQUMsRUFBQyxJQUFJLEVBQUUsTUFBTSxDQUFDLEdBQUcsQ0FBQyxFQUFDLENBQUM7cUJBQ25ELFFBQ0s7d0JBQ0YsUUFBUSxFQUFFLE1BQU07cUJBQ25CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDb21wb25lbnQsXG4gICAgc2lnbmFsLFxuICAgIFZpZXdFbmNhcHN1bGF0aW9uLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7dHVpQnV0dG9uT3B0aW9uc1Byb3ZpZGVyfSBmcm9tICdAdGFpZ2EtdWkvY29yZS9jb21wb25lbnRzL2J1dHRvbic7XG5pbXBvcnQge3R1aVRleHRmaWVsZE9wdGlvbnNQcm92aWRlcn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvY29tcG9uZW50cy90ZXh0ZmllbGQnO1xuaW1wb3J0IHt0dWlEcm9wZG93bk9wdGlvbnNQcm92aWRlcn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvZGlyZWN0aXZlcy9kcm9wZG93bic7XG5pbXBvcnQge3R1aUF2YXRhck9wdGlvbnNQcm92aWRlcn0gZnJvbSAnQHRhaWdhLXVpL2tpdC9jb21wb25lbnRzL2F2YXRhcic7XG5pbXBvcnQge3R1aUJhZGdlT3B0aW9uc1Byb3ZpZGVyfSBmcm9tICdAdGFpZ2EtdWkva2l0L2NvbXBvbmVudHMvYmFkZ2UnO1xuaW1wb3J0IHt0dWlCYWRnZU5vdGlmaWNhdGlvbk9wdGlvbnNQcm92aWRlcn0gZnJvbSAnQHRhaWdhLXVpL2tpdC9jb21wb25lbnRzL2JhZGdlLW5vdGlmaWNhdGlvbic7XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICdoZWFkZXJbdHVpTmF2aWdhdGlvbkhlYWRlcl0nLFxuICAgIHRlbXBsYXRlOiAnPG5nLWNvbnRlbnQgLz4nLFxuICAgIHN0eWxlVXJsczogWycuL2hlYWRlci5zdHlsZS5sZXNzJ10sXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBwcm92aWRlcnM6IFtcbiAgICAgICAgdHVpQXZhdGFyT3B0aW9uc1Byb3ZpZGVyKHtzaXplOiAncycsIGFwcGVhcmFuY2U6ICdzZWNvbmRhcnktZ3JheXNjYWxlJ30pLFxuICAgICAgICB0dWlCYWRnZU5vdGlmaWNhdGlvbk9wdGlvbnNQcm92aWRlcih7c2l6ZTogJ3hzJ30pLFxuICAgICAgICB0dWlCYWRnZU9wdGlvbnNQcm92aWRlcih7c2l6ZTogJ20nLCBhcHBlYXJhbmNlOiAncHJpbWFyeSd9KSxcbiAgICAgICAgdHVpQnV0dG9uT3B0aW9uc1Byb3ZpZGVyKHtzaXplOiAncycsIGFwcGVhcmFuY2U6ICdmbGF0LWdyYXlzY2FsZSd9KSxcbiAgICAgICAgdHVpRHJvcGRvd25PcHRpb25zUHJvdmlkZXIoe2FwcGVhcmFuY2U6ICdkcm9wZG93bi1uYXZpZ2F0aW9uJ30pLFxuICAgICAgICB0dWlUZXh0ZmllbGRPcHRpb25zUHJvdmlkZXIoe3NpemU6IHNpZ25hbCgncycpfSksXG4gICAgXSxcbiAgICBob3N0OiB7XG4gICAgICAgIHR1aVRoZW1lOiAnZGFyaycsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpSGVhZGVyQ29tcG9uZW50IHt9XG4iXX0=