@taiga-ui/core
Version:
Core library for creating Angular components and applications using Taiga UI
92 lines (88 loc) • 10 kB
JavaScript
import { DOCUMENT, NgIf } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, signal, RendererFactory2, Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { EVENT_MANAGER_PLUGINS } from '@angular/platform-browser';
import { TUI_VERSION } from '@taiga-ui/cdk/constants';
import * as i3 from '@taiga-ui/cdk/directives/font-size';
import { TuiFontSize } from '@taiga-ui/cdk/directives/font-size';
import * as i1 from '@taiga-ui/cdk/directives/platform';
import { TuiPlatform } from '@taiga-ui/cdk/directives/platform';
import * as i2 from '@taiga-ui/cdk/directives/visual-viewport';
import { TuiVisualViewport } from '@taiga-ui/cdk/directives/visual-viewport';
import { tuiWatch } from '@taiga-ui/cdk/observables';
import { TUI_IS_MOBILE } from '@taiga-ui/cdk/tokens';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { TuiAlerts } from '@taiga-ui/core/components/alert';
import { TuiDialogs } from '@taiga-ui/core/components/dialog';
import { TUI_SCROLLBAR_OPTIONS, TuiScrollControls } from '@taiga-ui/core/components/scrollbar';
import { TuiDropdowns } from '@taiga-ui/core/directives/dropdown';
import { TuiHints } from '@taiga-ui/core/directives/hint';
import { TuiPopups } from '@taiga-ui/core/directives/popup';
import { TuiBreakpointService } from '@taiga-ui/core/services';
import { TUI_REDUCED_MOTION, TUI_ANIMATIONS_SPEED, TUI_THEME } from '@taiga-ui/core/tokens';
import { tuiGetDuration } from '@taiga-ui/core/utils';
import { PreventEventPlugin } from '@taiga-ui/event-plugins';
import { map } from 'rxjs';
/// <reference types="@taiga-ui/tsconfig/ng-dev-mode" />
/// <reference types="@taiga-ui/tsconfig/ng-dev-mode" />
class TuiRoot {
constructor() {
this.doc = inject(DOCUMENT);
this.el = tuiInjectElement();
this.reducedMotion = inject(TUI_REDUCED_MOTION);
this.duration = tuiGetDuration(inject(TUI_ANIMATIONS_SPEED));
this.isChildRoot = !!inject(TuiRoot, { optional: true, skipSelf: true });
this.top = signal(!this.isChildRoot);
this.isMobileRes = toSignal(inject(TuiBreakpointService).pipe(map((breakpoint) => breakpoint === 'mobile'), tuiWatch()), { initialValue: false });
this.nativeScrollbar = inject(TUI_SCROLLBAR_OPTIONS).mode === 'native';
this.scrollbars = !this.nativeScrollbar && !inject(TUI_IS_MOBILE) && !this.isChildRoot;
// TODO move to provideTaiga in v5
const factory = inject(RendererFactory2);
factory.removeStylesOnCompDestroy = false;
if (factory.delegate) {
factory.delegate.removeStylesOnCompDestroy = false;
}
if (!this.top()) {
return;
}
this.doc.documentElement.setAttribute('data-tui-theme', inject(TUI_THEME).toLowerCase());
if (!this.nativeScrollbar) {
this.doc.defaultView?.document.documentElement.classList.add('tui-zero-scrollbar');
}
ngDevMode &&
console.assert(!!inject(EVENT_MANAGER_PLUGINS).find((plugin) => plugin instanceof PreventEventPlugin), 'NG_EVENT_PLUGINS is missing from global providers');
}
get isTopLayer() {
return this.doc.fullscreenElement?.matches('tui-root')
? this.doc.fullscreenElement === this.el
: !this.isChildRoot;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiRoot, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiRoot, isStandalone: true, selector: "tui-root", host: { attributes: { "data-tui-version": "4.49.0" }, listeners: { "touchstart.passive.zoneless": "0", "document:fullscreenchange": "top.set(isTopLayer)" }, properties: { "style.--tui-duration.ms": "duration", "style.--tui-scroll-behavior": "reducedMotion ? \"auto\" : \"smooth\"", "class._mobile": "isMobileRes()" } }, hostDirectives: [{ directive: i1.TuiPlatform }, { directive: i2.TuiVisualViewport }, { directive: i3.TuiFontSize }], ngImport: i0, template: "<div class=\"t-root-content\">\n <ng-content />\n</div>\n<ng-container *ngIf=\"top()\">\n <tui-scroll-controls\n *ngIf=\"scrollbars\"\n class=\"t-root-scrollbar\"\n />\n <tui-popups />\n <ng-content select=\"tuiOverContent\" />\n <tui-dialogs />\n <ng-content select=\"tuiOverDialogs\" />\n <tui-alerts />\n <ng-content select=\"tuiOverAlerts\" />\n <tui-dropdowns />\n <ng-content select=\"tuiOverDropdowns\" />\n <tui-hints />\n <ng-content select=\"tuiOverHints\" />\n</ng-container>\n", styles: ["@keyframes tuiSkeletonVibe{to{opacity:.5}}@keyframes tuiPresent{to{content:\"\"}}@keyframes tuiFade{0%{opacity:0}}@keyframes tuiSlide{0%{transform:var(--tui-from, translateY(100%))}}@keyframes tuiScale{0%{transform:scale(0)}}@keyframes tuiCollapse{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}.tui-enter,.tui-leave{animation-duration:var(--tui-duration);animation-timing-function:ease-in-out;pointer-events:none}.tui-leave{animation-direction:reverse}\n", ".tui-zero-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.tui-zero-scrollbar::-webkit-scrollbar,.tui-zero-scrollbar::-webkit-scrollbar-thumb{display:none}body,input{margin:0}tui-root{position:relative;display:block;font:var(--tui-font-text-s);color:var(--tui-text-primary);flex:1;border-image:conic-gradient(var(--tui-background-base) 0 0) fill 0/0/0 0 100vh 0;-webkit-tap-highlight-color:transparent}:root{--tui-inline-start: left;--tui-inline-end: right;--tui-inline: 1}[dir=rtl]{--tui-inline-start: right;--tui-inline-end: left;--tui-inline: -1}tui-root>.t-root-scrollbar{position:fixed;top:0;left:0;bottom:0;right:0;z-index:0;display:none;margin:0}[data-tui-theme] tui-root>.t-root-scrollbar{display:block}.t-root-content{position:relative;top:var(--t-root-top);block-size:100%;isolation:isolate}.t-root-content>*{--t-root-top: 0}[tuiDropdownButton][tuiDropdownButton]{display:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TuiAlerts, selector: "tui-alerts" }, { kind: "component", type: TuiDialogs, selector: "tui-dialogs" }, { kind: "component", type: TuiDropdowns, selector: "tui-dropdowns" }, { kind: "component", type: TuiHints, selector: "tui-hints" }, { kind: "component", type: TuiPopups, selector: "tui-popups" }, { kind: "component", type: TuiScrollControls, selector: "tui-scroll-controls" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiRoot, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-root', imports: [
NgIf,
TuiAlerts,
TuiDialogs,
TuiDropdowns,
TuiHints,
TuiPopups,
TuiScrollControls,
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, hostDirectives: [TuiPlatform, TuiVisualViewport, TuiFontSize], host: {
'data-tui-version': TUI_VERSION,
'[style.--tui-duration.ms]': 'duration',
'[style.--tui-scroll-behavior]': 'reducedMotion ? "auto" : "smooth"',
'[class._mobile]': 'isMobileRes()',
// Required for the :active state to work in Safari. https://stackoverflow.com/a/33681490
'(touchstart.passive.zoneless)': '0',
'(document:fullscreenchange)': 'top.set(isTopLayer)',
}, template: "<div class=\"t-root-content\">\n <ng-content />\n</div>\n<ng-container *ngIf=\"top()\">\n <tui-scroll-controls\n *ngIf=\"scrollbars\"\n class=\"t-root-scrollbar\"\n />\n <tui-popups />\n <ng-content select=\"tuiOverContent\" />\n <tui-dialogs />\n <ng-content select=\"tuiOverDialogs\" />\n <tui-alerts />\n <ng-content select=\"tuiOverAlerts\" />\n <tui-dropdowns />\n <ng-content select=\"tuiOverDropdowns\" />\n <tui-hints />\n <ng-content select=\"tuiOverHints\" />\n</ng-container>\n", styles: ["@keyframes tuiSkeletonVibe{to{opacity:.5}}@keyframes tuiPresent{to{content:\"\"}}@keyframes tuiFade{0%{opacity:0}}@keyframes tuiSlide{0%{transform:var(--tui-from, translateY(100%))}}@keyframes tuiScale{0%{transform:scale(0)}}@keyframes tuiCollapse{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}.tui-enter,.tui-leave{animation-duration:var(--tui-duration);animation-timing-function:ease-in-out;pointer-events:none}.tui-leave{animation-direction:reverse}\n", ".tui-zero-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.tui-zero-scrollbar::-webkit-scrollbar,.tui-zero-scrollbar::-webkit-scrollbar-thumb{display:none}body,input{margin:0}tui-root{position:relative;display:block;font:var(--tui-font-text-s);color:var(--tui-text-primary);flex:1;border-image:conic-gradient(var(--tui-background-base) 0 0) fill 0/0/0 0 100vh 0;-webkit-tap-highlight-color:transparent}:root{--tui-inline-start: left;--tui-inline-end: right;--tui-inline: 1}[dir=rtl]{--tui-inline-start: right;--tui-inline-end: left;--tui-inline: -1}tui-root>.t-root-scrollbar{position:fixed;top:0;left:0;bottom:0;right:0;z-index:0;display:none;margin:0}[data-tui-theme] tui-root>.t-root-scrollbar{display:block}.t-root-content{position:relative;top:var(--t-root-top);block-size:100%;isolation:isolate}.t-root-content>*{--t-root-top: 0}[tuiDropdownButton][tuiDropdownButton]{display:none}\n"] }]
}], ctorParameters: function () { return []; } });
/**
* Generated bundle index. Do not edit.
*/
export { TuiRoot };
//# sourceMappingURL=taiga-ui-core-components-root.mjs.map