@taiga-ui/layout
Version:
A package with Taiga UI layout components
137 lines (130 loc) • 8.25 kB
JavaScript
import { NgForOf, NgIf } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, ViewContainerRef, TemplateRef, signal, Directive, ContentChildren, Component, ChangeDetectionStrategy } from '@angular/core';
import { TuiAnimated } from '@taiga-ui/cdk/directives/animated';
import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
import { toSignal } from '@angular/core/rxjs-interop';
import * as i1 from '@ng-web-apis/intersection-observer';
import { WaIntersectionObserverDirective, WaIntersectionRoot } from '@ng-web-apis/intersection-observer';
import { EMPTY_QUERY } from '@taiga-ui/cdk/constants';
import { tuiZoneOptimized } from '@taiga-ui/cdk/observables';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { fromEvent, map, pairwise, distinctUntilChanged } from 'rxjs';
class TuiDynamicHeaderAnchorDirective {
constructor() {
this.viewContainer = inject(ViewContainerRef);
this.observer = inject(WaIntersectionObserverDirective);
this.container = inject(TuiDynamicHeaderContainerDirective);
this.templateRef = inject((TemplateRef));
this.view = this.viewContainer.createEmbeddedView(this.templateRef);
this.visible = signal(false);
}
ngAfterViewInit() {
this.observer.observe(this.view.rootNodes[0], ([e]) => {
this.visible.set(!e?.isIntersecting);
this.container.update();
});
}
ngOnDestroy() {
this.observer.unobserve(this.view.rootNodes[0]);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDynamicHeaderAnchorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiDynamicHeaderAnchorDirective, isStandalone: true, selector: "[tuiDynamicHeaderAnchor]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDynamicHeaderAnchorDirective, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[tuiDynamicHeaderAnchor]',
}]
}] });
class TuiDynamicHeaderContainerDirective {
constructor() {
this.el = tuiInjectElement();
this.headers = EMPTY_QUERY;
this.hiddenHeaders = signal([]);
this.scrollDir = toSignal(fromEvent(this.el, 'scroll').pipe(map(({ target }) => target.scrollTop), pairwise(), map(([prev, next]) => (next > prev ? -1 : 1)), distinctUntilChanged(), tuiZoneOptimized()));
}
update() {
this.hiddenHeaders.set(this.headers.filter((h) => h.visible()).map((h) => h.templateRef));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDynamicHeaderContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiDynamicHeaderContainerDirective, isStandalone: true, selector: "[tuiDynamicHeaderContainer]", host: { attributes: { "waIntersectionRootMargin": "-44px 0px 1000000% 0px" } }, queries: [{ propertyName: "headers", predicate: TuiDynamicHeaderAnchorDirective, descendants: true }], hostDirectives: [{ directive: i1.WaIntersectionRoot }, { directive: i1.WaIntersectionObserverDirective }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDynamicHeaderContainerDirective, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[tuiDynamicHeaderContainer]',
hostDirectives: [WaIntersectionRoot, WaIntersectionObserverDirective],
host: {
waIntersectionRootMargin: '-44px 0px 1000000% 0px',
},
}]
}], propDecorators: { headers: [{
type: ContentChildren,
args: [TuiDynamicHeaderAnchorDirective, {
descendants: true,
}]
}] } });
class TuiDynamicHeaderComponent {
constructor() {
this.container = inject(TuiDynamicHeaderContainerDirective);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDynamicHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDynamicHeaderComponent, isStandalone: true, selector: "[tuiDynamicHeader]", host: { properties: { "style.--t-dir": "container.scrollDir() || -1" } }, ngImport: i0, template: `
<div
*ngIf="!container.hiddenHeaders().length; else dynamic"
tuiAnimated
>
<ng-content />
</div>
<ng-template #dynamic>
<ng-container
*ngFor="let header of container.hiddenHeaders(); let last = last"
>
<div
*ngIf="last"
tuiAnimated
>
<div *polymorpheusOutlet="header as text">{{ text }}</div>
</div>
</ng-container>
</ng-template>
`, isInline: true, styles: [":host{display:flex;block-size:100%;align-items:center;justify-content:center}:host-context([data-platform=\"android\"]) :host{justify-content:start}.tui-enter{animation-name:tuiFade,tuiSlide;--tui-from: translateY(calc(-200% * var(--t-dir)))}.tui-leave{animation-name:tuiFade,tuiSlide;--tui-from: translateY(calc(200% * var(--t-dir)))}.tui-enter:not(:first-of-type),.tui-leave:not(:first-of-type){position:absolute}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiAnimated, selector: "[tuiAnimated]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDynamicHeaderComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: '[tuiDynamicHeader]', imports: [NgForOf, NgIf, PolymorpheusOutlet, TuiAnimated], template: `
<div
*ngIf="!container.hiddenHeaders().length; else dynamic"
tuiAnimated
>
<ng-content />
</div>
<ng-template #dynamic>
<ng-container
*ngFor="let header of container.hiddenHeaders(); let last = last"
>
<div
*ngIf="last"
tuiAnimated
>
<div *polymorpheusOutlet="header as text">{{ text }}</div>
</div>
</ng-container>
</ng-template>
`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[style.--t-dir]': 'container.scrollDir() || -1',
}, styles: [":host{display:flex;block-size:100%;align-items:center;justify-content:center}:host-context([data-platform=\"android\"]) :host{justify-content:start}.tui-enter{animation-name:tuiFade,tuiSlide;--tui-from: translateY(calc(-200% * var(--t-dir)))}.tui-leave{animation-name:tuiFade,tuiSlide;--tui-from: translateY(calc(200% * var(--t-dir)))}.tui-enter:not(:first-of-type),.tui-leave:not(:first-of-type){position:absolute}\n"] }]
}] });
const TuiDynamicHeader = [
TuiDynamicHeaderComponent,
TuiDynamicHeaderAnchorDirective,
TuiDynamicHeaderContainerDirective,
];
/**
* Generated bundle index. Do not edit.
*/
export { TuiDynamicHeader, TuiDynamicHeaderAnchorDirective, TuiDynamicHeaderComponent, TuiDynamicHeaderContainerDirective };
//# sourceMappingURL=taiga-ui-layout-components-dynamic-header.mjs.map