@taiga-ui/core
Version:
Core library for creating Angular components and applications using Taiga UI
74 lines (70 loc) • 3.37 kB
JavaScript
import { DOCUMENT } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, signal, EventEmitter, ElementRef, Component, ChangeDetectionStrategy, ViewChild, Output, Input } from '@angular/core';
import { TuiRoot } from '@taiga-ui/core/components/root';
class TuiFullscreen {
constructor() {
this.doc = inject(DOCUMENT);
this.open = signal(false);
this.opened = new EventEmitter();
this.options = { navigationUI: 'auto' };
}
set fullscreen(open) {
if (this.open() === open) {
return;
}
if (open) {
this.root?.nativeElement
.requestFullscreen(this.options)
.then(() => this.fullscreenState(open));
}
else {
this.doc
.exitFullscreen()
.then(() => this.fullscreenState(open))
.catch((error) => console.error('Failed to exit fullscreen:', error));
}
}
closedByEscape(event) {
const escaped = !this.doc.fullscreenElement && event.target === this.root?.nativeElement;
if (escaped) {
this.fullscreenState(false);
}
}
fullscreenState(open) {
this.open.set(open);
this.opened.emit(open);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiFullscreen, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiFullscreen, isStandalone: true, selector: "[tuiFullscreen]", inputs: { options: ["tuiFullscreenOptions", "options"], fullscreen: ["tuiFullscreen", "fullscreen"] }, outputs: { opened: "tuiFullscreenChange" }, host: { listeners: { "document:fullscreenchange": "closedByEscape($event)" } }, viewQueries: [{ propertyName: "root", first: true, predicate: TuiRoot, descendants: true, read: ElementRef }], ngImport: i0, template: '<tui-root><ng-content /></tui-root>', isInline: true, dependencies: [{ kind: "component", type: TuiRoot, selector: "tui-root" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiFullscreen, decorators: [{
type: Component,
args: [{
standalone: true,
selector: '[tuiFullscreen]',
imports: [TuiRoot],
template: '<tui-root><ng-content /></tui-root>',
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'(document:fullscreenchange)': 'closedByEscape($event)',
},
}]
}], propDecorators: { root: [{
type: ViewChild,
args: [TuiRoot, { read: ElementRef }]
}], opened: [{
type: Output,
args: ['tuiFullscreenChange']
}], options: [{
type: Input,
args: ['tuiFullscreenOptions']
}], fullscreen: [{
type: Input,
args: ['tuiFullscreen']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { TuiFullscreen };
//# sourceMappingURL=taiga-ui-core-components-fullscreen.mjs.map