@taiga-ui/kit/fesm2022/taiga-ui-kit-components-fullscreen.mjs

Taiga UI Angular main components kit

import { DOCUMENT } from '@angular/common';
import * as i0 from '@angular/core';
import { viewChild, ElementRef, inject, model, input, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
import { TuiRoot } from '@taiga-ui/core/components/root';

class TuiFullscreen {
    constructor() {
        this.root = viewChild(TuiRoot, { read: ElementRef });
        this.doc = inject(DOCUMENT);
        this.tuiFullscreen = model(false);
        this.options = input({ navigationUI: 'auto' }, { alias: 'tuiFullscreenOptions' });
        this.handleState = effect(async () => {
            if (this.tuiFullscreen()) {
                await this.root()?.nativeElement.requestFullscreen(untracked(this.options));
            }
            else if (this.doc.fullscreenElement === this.root()?.nativeElement) {
                try {
                    await this.doc.exitFullscreen();
                }
                catch (error) {
                    console.error('Failed to exit fullscreen:', error);
                }
            }
        });
    }
    closedByEscape(event) {
        if (!this.doc.fullscreenElement && event.target === this.root()?.nativeElement) {
            this.tuiFullscreen.set(false);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiFullscreen, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.21", type: TuiFullscreen, isStandalone: true, selector: "[tuiFullscreen]", inputs: { tuiFullscreen: { classPropertyName: "tuiFullscreen", publicName: "tuiFullscreen", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "tuiFullscreenOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tuiFullscreen: "tuiFullscreenChange" }, host: { listeners: { "document:fullscreenchange": "closedByEscape($event)" } }, viewQueries: [{ propertyName: "root", first: true, predicate: TuiRoot, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: '<tui-root><ng-content /></tui-root>', isInline: true, styles: ["tui-root{scrollbar-width:none;-ms-overflow-style:none;overflow:auto}tui-root::-webkit-scrollbar,tui-root::-webkit-scrollbar-thumb{display:none}tui-root:fullscreen{padding:env(safe-area-inset-top) env(safe-area-inset-left) env(safe-area-inset-bottom) env(safe-area-inset-right)}\n"], dependencies: [{ kind: "component", type: TuiRoot, selector: "tui-root" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiFullscreen, decorators: [{
            type: Component,
            args: [{ selector: '[tuiFullscreen]', imports: [TuiRoot], template: '<tui-root><ng-content /></tui-root>', changeDetection: ChangeDetectionStrategy.OnPush, host: { '(document:fullscreenchange)': 'closedByEscape($event)' }, styles: ["tui-root{scrollbar-width:none;-ms-overflow-style:none;overflow:auto}tui-root::-webkit-scrollbar,tui-root::-webkit-scrollbar-thumb{display:none}tui-root:fullscreen{padding:env(safe-area-inset-top) env(safe-area-inset-left) env(safe-area-inset-bottom) env(safe-area-inset-right)}\n"] }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { TuiFullscreen };
//# sourceMappingURL=taiga-ui-kit-components-fullscreen.mjs.map