@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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9sYXlvdXQvY29tcG9uZW50cy9hcHAtYmFyL2FwcC1iYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbGF5b3V0L2NvbXBvbmVudHMvYXBwLWJhci9hcHAtYmFyLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQzFDLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUVULE1BQU0sRUFDTixLQUFLLEVBRUwsWUFBWSxFQUNaLGlCQUFpQixHQUNwQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUMsdUJBQXVCLEVBQUMsTUFBTSxnQ0FBZ0MsQ0FBQztBQUN2RSxPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSw4QkFBOEIsQ0FBQztBQUNuRSxPQUFPLEVBQUMsV0FBVyxFQUFDLE1BQU0seUJBQXlCLENBQUM7QUFDcEQsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLDJCQUEyQixDQUFDO0FBRXRELE9BQU8sRUFBQyxPQUFPLEVBQUMsTUFBTSwrQkFBK0IsQ0FBQztBQUN0RCxPQUFPLEVBQUMsR0FBRyxFQUFFLEtBQUssRUFBQyxNQUFNLE1BQU0sQ0FBQztBQUVoQyxPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQzs7QUFFMUQsTUFhYSxrQkFBa0I7SUFiL0I7UUFlcUIsU0FBSSxHQUF1QyxXQUFXLENBQUM7UUFFckQsV0FBTSxHQUFHLEtBQUssQ0FDN0IsTUFBTSxDQUFDLHFCQUFxQixFQUFFLEVBQUMsSUFBSSxFQUFFLElBQUksRUFBQyxDQUFDLEVBQzNDLE1BQU0sQ0FBQyx1QkFBdUIsRUFBRSxFQUFDLElBQUksRUFBRSxJQUFJLEVBQUMsQ0FBQyxDQUNoRCxDQUFDLElBQUksQ0FDRixXQUFXLEVBQUUsRUFDYixHQUFHLENBQ0MsR0FBRyxFQUFFLENBQ0QsQ0FBQztZQUNELElBQUksQ0FBQyxHQUFHLENBQ0osSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsYUFBYSxDQUFDLFdBQVcsRUFDMUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsYUFBYSxDQUFDLFdBQVcsQ0FDNUMsQ0FDUixDQUNKLENBQUM7UUFHSyxTQUFJLEdBQWEsR0FBRyxDQUFDO0tBQy9COytHQXJCWSxrQkFBa0I7bUdBQWxCLGtCQUFrQix3SUFMaEIscUJBQXFCLDJHQzdCcEMscVFBYUEsMG9ERFdjLFNBQVMsOENBQUUsT0FBTzs7U0FVbkIsa0JBQWtCOzRGQUFsQixrQkFBa0I7a0JBYjlCLFNBQVM7aUNBQ00sSUFBSSxZQUNOLGFBQWEsV0FDZCxDQUFDLFNBQVMsRUFBRSxPQUFPLENBQUMsaUJBR2QsaUJBQWlCLENBQUMsSUFBSSxtQkFDcEIsdUJBQXVCLENBQUMsTUFBTSxhQUNwQyxxQkFBcUIsUUFDMUI7d0JBQ0Ysa0JBQWtCLEVBQUUsTUFBTTtxQkFDN0I7OEJBSWdCLElBQUk7c0JBRHBCLFlBQVk7dUJBQUMsTUFBTTtnQkFtQmIsSUFBSTtzQkFEVixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtBc3luY1BpcGV9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENvbXBvbmVudCxcbiAgICB0eXBlIEVsZW1lbnRSZWYsXG4gICAgaW5qZWN0LFxuICAgIElucHV0LFxuICAgIHR5cGUgUXVlcnlMaXN0LFxuICAgIFZpZXdDaGlsZHJlbixcbiAgICBWaWV3RW5jYXBzdWxhdGlvbixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge011dGF0aW9uT2JzZXJ2ZXJTZXJ2aWNlfSBmcm9tICdAbmctd2ViLWFwaXMvbXV0YXRpb24tb2JzZXJ2ZXInO1xuaW1wb3J0IHtSZXNpemVPYnNlcnZlclNlcnZpY2V9IGZyb20gJ0BuZy13ZWItYXBpcy9yZXNpemUtb2JzZXJ2ZXInO1xuaW1wb3J0IHtFTVBUWV9RVUVSWX0gZnJvbSAnQHRhaWdhLXVpL2Nkay9jb25zdGFudHMnO1xuaW1wb3J0IHt0dWlab25lZnVsbH0gZnJvbSAnQHRhaWdhLXVpL2Nkay9vYnNlcnZhYmxlcyc7XG5pbXBvcnQge3R5cGUgVHVpU2l6ZUx9IGZyb20gJ0B0YWlnYS11aS9jb3JlL3R5cGVzJztcbmltcG9ydCB7VHVpRmFkZX0gZnJvbSAnQHRhaWdhLXVpL2tpdC9kaXJlY3RpdmVzL2ZhZGUnO1xuaW1wb3J0IHttYXAsIG1lcmdlfSBmcm9tICdyeGpzJztcblxuaW1wb3J0IHtUVUlfQVBQX0JBUl9QUk9WSURFUlN9IGZyb20gJy4vYXBwLWJhci5wcm92aWRlcnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAndHVpLWFwcC1iYXInLFxuICAgIGltcG9ydHM6IFtBc3luY1BpcGUsIFR1aUZhZGVdLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9hcHAtYmFyLnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2FwcC1iYXIuc3R5bGUubGVzcyddLFxuICAgIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgcHJvdmlkZXJzOiBUVUlfQVBQX0JBUl9QUk9WSURFUlMsXG4gICAgaG9zdDoge1xuICAgICAgICAnW2F0dHIuZGF0YS1zaXplXSc6ICdzaXplJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlBcHBCYXJDb21wb25lbnQge1xuICAgIEBWaWV3Q2hpbGRyZW4oJ3NpZGUnKVxuICAgIHByaXZhdGUgcmVhZG9ubHkgc2lkZTogUXVlcnlMaXN0PEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+PiA9IEVNUFRZX1FVRVJZO1xuXG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IHdpZHRoJCA9IG1lcmdlKFxuICAgICAgICBpbmplY3QoUmVzaXplT2JzZXJ2ZXJTZXJ2aWNlLCB7c2VsZjogdHJ1ZX0pLFxuICAgICAgICBpbmplY3QoTXV0YXRpb25PYnNlcnZlclNlcnZpY2UsIHtzZWxmOiB0cnVlfSksXG4gICAgKS5waXBlKFxuICAgICAgICB0dWlab25lZnVsbCgpLFxuICAgICAgICBtYXAoXG4gICAgICAgICAgICAoKSA9PlxuICAgICAgICAgICAgICAgIDIgKlxuICAgICAgICAgICAgICAgIE1hdGgubWF4KFxuICAgICAgICAgICAgICAgICAgICB0aGlzLnNpZGUuZmlyc3Q/Lm5hdGl2ZUVsZW1lbnQuY2xpZW50V2lkdGgsXG4gICAgICAgICAgICAgICAgICAgIHRoaXMuc2lkZS5sYXN0Py5uYXRpdmVFbGVtZW50LmNsaWVudFdpZHRoLFxuICAgICAgICAgICAgICAgICksXG4gICAgICAgICksXG4gICAgKTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHNpemU6IFR1aVNpemVMID0gJ20nO1xufVxuIiwiPGRpdiAjc2lkZT5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbdHVpU2xvdD0nbGVmdCddXCIgLz5cbjwvZGl2PlxuPGRpdlxuICAgIHR1aUZhZGVcbiAgICBjbGFzcz1cInQtY29udGVudFwiXG4gICAgW3N0eWxlLi0tdC1zaWRlcy5weF09XCJ3aWR0aCQgfCBhc3luY1wiXG4+XG4gICAgPG5nLWNvbnRlbnQgLz5cbjwvZGl2PlxuPGRpdiAjc2lkZT5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbdHVpU2xvdD0ncmlnaHQnXVwiIC8+XG48L2Rpdj5cbiJdfQ==