@taiga-ui/layout/esm2022/components/app-bar/app-bar.component.mjs

A package with Taiga UI layout components

import { AsyncPipe } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject, Input, ViewChildren, ViewEncapsulation, } from '@angular/core';
import { MutationObserverService } from '@ng-web-apis/mutation-observer';
import { ResizeObserverService } from '@ng-web-apis/resize-observer';
import { EMPTY_QUERY } from '@taiga-ui/cdk/constants';
import { tuiZonefull } from '@taiga-ui/cdk/observables';
import { TuiFade } from '@taiga-ui/kit/directives/fade';
import { map, merge } from 'rxjs';
import { TUI_APP_BAR_PROVIDERS } from './app-bar.providers';
import * as i0 from "@angular/core";
class TuiAppBarComponent {
    constructor() {
        this.side = EMPTY_QUERY;
        this.width$ = merge(inject(ResizeObserverService, { self: true }), inject(MutationObserverService, { self: true })).pipe(tuiZonefull(), map(() => 2 *
            Math.max(this.side.first?.nativeElement.clientWidth, this.side.last?.nativeElement.clientWidth)));
        this.size = 'm';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAppBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiAppBarComponent, isStandalone: true, selector: "tui-app-bar", inputs: { size: "size" }, host: { properties: { "attr.data-size": "size" } }, providers: TUI_APP_BAR_PROVIDERS, viewQueries: [{ propertyName: "side", predicate: ["side"], descendants: true }], ngImport: i0, template: "<div #side>\n    <ng-content select=\"[tuiSlot='left']\" />\n</div>\n<div\n    tuiFade\n    class=\"t-content\"\n    [style.--t-sides.px]=\"width$ | async\"\n>\n    <ng-content />\n</div>\n<div #side>\n    <ng-content select=\"[tuiSlot='right']\" />\n</div>\n", styles: ["tui-app-bar{position:relative;display:flex;block-size:3rem;align-items:center;justify-content:space-between;flex:1;box-sizing:border-box;font:var(--tui-font-text-m);font-weight:700;text-align:center;color:var(--tui-text-primary);background:var(--tui-background-base);background:color-mix(in hsl,var(--tui-background-base) 80%,transparent);-webkit-backdrop-filter:blur(2rem);backdrop-filter:blur(2rem)}tui-app-bar>.t-content{left:50%;transform:translate(-50%);position:absolute;display:flex;block-size:100%;max-inline-size:calc(100% - var(--t-sides, 0px));inline-size:calc(100% - var(--t-sides, 0px));flex-direction:column;justify-content:center;flex:1;padding:0 .375rem;box-sizing:border-box;text-align:inherit;white-space:nowrap}tui-app-bar>.t-content progress{margin:auto}tui-app-bar>:last-child [tuiIconButton]{margin:0 -.375rem}tui-app-bar>:last-child [tuiIconButton]:last-child{margin-inline-end:0}tui-app-bar>:last-child [tuiIconButton]:only-child{margin:0}tui-app-bar [tuiButton][data-size=l]{font-weight:400;margin:0 -.25rem}tui-app-bar [tuiTitle]{text-align:inherit;font:inherit}tui-app-bar [tuiSubtitle]{color:var(--tui-text-secondary)}tui-app-bar[data-size=m] [tuiTitle]{line-height:1.2em;gap:0}tui-app-bar[data-size=l]{block-size:4rem}tui-app-bar[data-size=l]>:first-child,tui-app-bar[data-size=l]>:last-child{margin:0 -1em}tui-app-bar [tuiProgressBar]{inline-size:8.75rem}tui-dialog tui-app-bar[data-size=l]{margin:-3rem 0 2rem}tui-dialog tui-app-bar[data-size=m]{margin:-1rem -1rem .75rem}tui-sheet-dialog tui-app-bar{margin:-.75rem -1rem;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: TuiFade, selector: "[tuiFade]", inputs: ["tuiFadeHeight", "tuiFadeSize", "tuiFadeOffset", "tuiFade"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
export { TuiAppBarComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAppBarComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'tui-app-bar', imports: [AsyncPipe, TuiFade], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: TUI_APP_BAR_PROVIDERS, host: {
                        '[attr.data-size]': 'size',
                    }, template: "<div #side>\n    <ng-content select=\"[tuiSlot='left']\" />\n</div>\n<div\n    tuiFade\n    class=\"t-content\"\n    [style.--t-sides.px]=\"width$ | async\"\n>\n    <ng-content />\n</div>\n<div #side>\n    <ng-content select=\"[tuiSlot='right']\" />\n</div>\n", styles: ["tui-app-bar{position:relative;display:flex;block-size:3rem;align-items:center;justify-content:space-between;flex:1;box-sizing:border-box;font:var(--tui-font-text-m);font-weight:700;text-align:center;color:var(--tui-text-primary);background:var(--tui-background-base);background:color-mix(in hsl,var(--tui-background-base) 80%,transparent);-webkit-backdrop-filter:blur(2rem);backdrop-filter:blur(2rem)}tui-app-bar>.t-content{left:50%;transform:translate(-50%);position:absolute;display:flex;block-size:100%;max-inline-size:calc(100% - var(--t-sides, 0px));inline-size:calc(100% - var(--t-sides, 0px));flex-direction:column;justify-content:center;flex:1;padding:0 .375rem;box-sizing:border-box;text-align:inherit;white-space:nowrap}tui-app-bar>.t-content progress{margin:auto}tui-app-bar>:last-child [tuiIconButton]{margin:0 -.375rem}tui-app-bar>:last-child [tuiIconButton]:last-child{margin-inline-end:0}tui-app-bar>:last-child [tuiIconButton]:only-child{margin:0}tui-app-bar [tuiButton][data-size=l]{font-weight:400;margin:0 -.25rem}tui-app-bar [tuiTitle]{text-align:inherit;font:inherit}tui-app-bar [tuiSubtitle]{color:var(--tui-text-secondary)}tui-app-bar[data-size=m] [tuiTitle]{line-height:1.2em;gap:0}tui-app-bar[data-size=l]{block-size:4rem}tui-app-bar[data-size=l]>:first-child,tui-app-bar[data-size=l]>:last-child{margin:0 -1em}tui-app-bar [tuiProgressBar]{inline-size:8.75rem}tui-dialog tui-app-bar[data-size=l]{margin:-3rem 0 2rem}tui-dialog tui-app-bar[data-size=m]{margin:-1rem -1rem .75rem}tui-sheet-dialog tui-app-bar{margin:-.75rem -1rem;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}\n"] }]
        }], propDecorators: { side: [{
                type: ViewChildren,
                args: ['side']
            }], size: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9sYXlvdXQvY29tcG9uZW50cy9hcHAtYmFyL2FwcC1iYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbGF5b3V0L2NvbXBvbmVudHMvYXBwLWJhci9hcHAtYmFyLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBRTFDLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULE1BQU0sRUFDTixLQUFLLEVBQ0wsWUFBWSxFQUNaLGlCQUFpQixHQUNwQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUMsdUJBQXVCLEVBQUMsTUFBTSxnQ0FBZ0MsQ0FBQztBQUN2RSxPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSw4QkFBOEIsQ0FBQztBQUNuRSxPQUFPLEVBQUMsV0FBVyxFQUFDLE1BQU0seUJBQXlCLENBQUM7QUFDcEQsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLDJCQUEyQixDQUFDO0FBRXRELE9BQU8sRUFBQyxPQUFPLEVBQUMsTUFBTSwrQkFBK0IsQ0FBQztBQUN0RCxPQUFPLEVBQUMsR0FBRyxFQUFFLEtBQUssRUFBQyxNQUFNLE1BQU0sQ0FBQztBQUVoQyxPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQzs7QUFFMUQsTUFhYSxrQkFBa0I7SUFiL0I7UUFlcUIsU0FBSSxHQUF1QyxXQUFXLENBQUM7UUFFckQsV0FBTSxHQUFHLEtBQUssQ0FDN0IsTUFBTSxDQUFDLHFCQUFxQixFQUFFLEVBQUMsSUFBSSxFQUFFLElBQUksRUFBQyxDQUFDLEVBQzNDLE1BQU0sQ0FBQyx1QkFBdUIsRUFBRSxFQUFDLElBQUksRUFBRSxJQUFJLEVBQUMsQ0FBQyxDQUNoRCxDQUFDLElBQUksQ0FDRixXQUFXLEVBQUUsRUFDYixHQUFHLENBQ0MsR0FBRyxFQUFFLENBQ0QsQ0FBQztZQUNELElBQUksQ0FBQyxHQUFHLENBQ0osSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsYUFBYSxDQUFDLFdBQVcsRUFDMUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsYUFBYSxDQUFDLFdBQVcsQ0FDNUMsQ0FDUixDQUNKLENBQUM7UUFHSyxTQUFJLEdBQWEsR0FBRyxDQUFDO0tBQy9COytHQXJCWSxrQkFBa0I7bUdBQWxCLGtCQUFrQix3SUFMaEIscUJBQXFCLDJHQzVCcEMscVFBYUEsMG9ERFVjLFNBQVMsOENBQUUsT0FBTzs7U0FVbkIsa0JBQWtCOzRGQUFsQixrQkFBa0I7a0JBYjlCLFNBQVM7aUNBQ00sSUFBSSxZQUNOLGFBQWEsV0FDZCxDQUFDLFNBQVMsRUFBRSxPQUFPLENBQUMsaUJBR2QsaUJBQWlCLENBQUMsSUFBSSxtQkFDcEIsdUJBQXVCLENBQUMsTUFBTSxhQUNwQyxxQkFBcUIsUUFDMUI7d0JBQ0Ysa0JBQWtCLEVBQUUsTUFBTTtxQkFDN0I7OEJBSWdCLElBQUk7c0JBRHBCLFlBQVk7dUJBQUMsTUFBTTtnQkFtQmIsSUFBSTtzQkFEVixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtBc3luY1BpcGV9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgdHlwZSB7RWxlbWVudFJlZiwgUXVlcnlMaXN0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LFxuICAgIGluamVjdCxcbiAgICBJbnB1dCxcbiAgICBWaWV3Q2hpbGRyZW4sXG4gICAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtNdXRhdGlvbk9ic2VydmVyU2VydmljZX0gZnJvbSAnQG5nLXdlYi1hcGlzL211dGF0aW9uLW9ic2VydmVyJztcbmltcG9ydCB7UmVzaXplT2JzZXJ2ZXJTZXJ2aWNlfSBmcm9tICdAbmctd2ViLWFwaXMvcmVzaXplLW9ic2VydmVyJztcbmltcG9ydCB7RU1QVFlfUVVFUll9IGZyb20gJ0B0YWlnYS11aS9jZGsvY29uc3RhbnRzJztcbmltcG9ydCB7dHVpWm9uZWZ1bGx9IGZyb20gJ0B0YWlnYS11aS9jZGsvb2JzZXJ2YWJsZXMnO1xuaW1wb3J0IHR5cGUge1R1aVNpemVMfSBmcm9tICdAdGFpZ2EtdWkvY29yZS90eXBlcyc7XG5pbXBvcnQge1R1aUZhZGV9IGZyb20gJ0B0YWlnYS11aS9raXQvZGlyZWN0aXZlcy9mYWRlJztcbmltcG9ydCB7bWFwLCBtZXJnZX0gZnJvbSAncnhqcyc7XG5cbmltcG9ydCB7VFVJX0FQUF9CQVJfUFJPVklERVJTfSBmcm9tICcuL2FwcC1iYXIucHJvdmlkZXJzJztcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ3R1aS1hcHAtYmFyJyxcbiAgICBpbXBvcnRzOiBbQXN5bmNQaXBlLCBUdWlGYWRlXSxcbiAgICB0ZW1wbGF0ZVVybDogJy4vYXBwLWJhci50ZW1wbGF0ZS5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9hcHAtYmFyLnN0eWxlLmxlc3MnXSxcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIHByb3ZpZGVyczogVFVJX0FQUF9CQVJfUFJPVklERVJTLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgJ1thdHRyLmRhdGEtc2l6ZV0nOiAnc2l6ZScsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpQXBwQmFyQ29tcG9uZW50IHtcbiAgICBAVmlld0NoaWxkcmVuKCdzaWRlJylcbiAgICBwcml2YXRlIHJlYWRvbmx5IHNpZGU6IFF1ZXJ5TGlzdDxFbGVtZW50UmVmPEhUTUxFbGVtZW50Pj4gPSBFTVBUWV9RVUVSWTtcblxuICAgIHByb3RlY3RlZCByZWFkb25seSB3aWR0aCQgPSBtZXJnZShcbiAgICAgICAgaW5qZWN0KFJlc2l6ZU9ic2VydmVyU2VydmljZSwge3NlbGY6IHRydWV9KSxcbiAgICAgICAgaW5qZWN0KE11dGF0aW9uT2JzZXJ2ZXJTZXJ2aWNlLCB7c2VsZjogdHJ1ZX0pLFxuICAgICkucGlwZShcbiAgICAgICAgdHVpWm9uZWZ1bGwoKSxcbiAgICAgICAgbWFwKFxuICAgICAgICAgICAgKCkgPT5cbiAgICAgICAgICAgICAgICAyICpcbiAgICAgICAgICAgICAgICBNYXRoLm1heChcbiAgICAgICAgICAgICAgICAgICAgdGhpcy5zaWRlLmZpcnN0Py5uYXRpdmVFbGVtZW50LmNsaWVudFdpZHRoLFxuICAgICAgICAgICAgICAgICAgICB0aGlzLnNpZGUubGFzdD8ubmF0aXZlRWxlbWVudC5jbGllbnRXaWR0aCxcbiAgICAgICAgICAgICAgICApLFxuICAgICAgICApLFxuICAgICk7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBzaXplOiBUdWlTaXplTCA9ICdtJztcbn1cbiIsIjxkaXYgI3NpZGU+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW3R1aVNsb3Q9J2xlZnQnXVwiIC8+XG48L2Rpdj5cbjxkaXZcbiAgICB0dWlGYWRlXG4gICAgY2xhc3M9XCJ0LWNvbnRlbnRcIlxuICAgIFtzdHlsZS4tLXQtc2lkZXMucHhdPVwid2lkdGgkIHwgYXN5bmNcIlxuPlxuICAgIDxuZy1jb250ZW50IC8+XG48L2Rpdj5cbjxkaXYgI3NpZGU+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW3R1aVNsb3Q9J3JpZ2h0J11cIiAvPlxuPC9kaXY+XG4iXX0=