@taiga-ui/kit
Version:
Taiga UI Angular main components kit
80 lines (78 loc) • 8.97 kB
JavaScript
import { __decorate, __param } from "tslib";
import { Directive, ElementRef, HostListener, Inject, OnDestroy, Output, } from '@angular/core';
import { USER_AGENT } from '@ng-web-apis/common';
import { isCurrentTarget, isFirefox, TuiDirectiveStylesService } from '@taiga-ui/cdk';
import { Subject } from 'rxjs';
import { distinctUntilChanged, skip, startWith } from 'rxjs/operators';
const STYLE = `
@keyframes tuiPresent {
from {
content: '1';
}
to {
content: '2';
}
}
.tui-present {
animation: tuiPresent 1000s infinite;
}`;
let TuiPresentDirective = class TuiPresentDirective {
constructor({ nativeElement }, directiveStyles, userAgent) {
this.visibility$ = new Subject();
directiveStyles.addStyle(STYLE, 'TuiPresentDirective');
this.tuiPresentChange = this.visibility$.pipe(startWith(false), distinctUntilChanged(), skip(1));
if (isFirefox(userAgent)) {
return;
}
this.observer = new MutationObserver(() => {
if (!nativeElement.offsetParent &&
nativeElement.offsetWidth === 0 &&
nativeElement.offsetHeight === 0) {
this.visibility$.next(false);
}
});
this.observer.observe(nativeElement, {
attributes: true,
attributeFilter: ['style', 'class'],
});
}
/**
* Someday animationcancel would work and mutation observer would not be needed:
* https://drafts.csswg.org/css-animations/#eventdef-animationevent-animationcancel
* It would also trigger on CSS like display: none on parent nodes which is awesome
* but currently only works in Firefox
*/
onAnimation(event, visibility) {
if (isCurrentTarget(event)) {
this.visibility$.next(visibility);
}
}
ngOnDestroy() {
this.visibility$.next(false);
}
};
TuiPresentDirective.ctorParameters = () => [
{ type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
{ type: TuiDirectiveStylesService, decorators: [{ type: Inject, args: [TuiDirectiveStylesService,] }] },
{ type: String, decorators: [{ type: Inject, args: [USER_AGENT,] }] }
];
__decorate([
Output()
], TuiPresentDirective.prototype, "tuiPresentChange", void 0);
__decorate([
HostListener('animationcancel', ['$event', 'false']),
HostListener('animationstart', ['$event', 'true'])
], TuiPresentDirective.prototype, "onAnimation", null);
TuiPresentDirective = __decorate([
Directive({
selector: '[tuiPresentChange]',
host: {
class: 'tui-present',
},
}),
__param(0, Inject(ElementRef)),
__param(1, Inject(TuiDirectiveStylesService)),
__param(2, Inject(USER_AGENT))
], TuiPresentDirective);
export { TuiPresentDirective };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJlc2VudC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AdGFpZ2EtdWkva2l0L2RpcmVjdGl2ZXMvcHJlc2VudC8iLCJzb3VyY2VzIjpbInByZXNlbnQuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQ0gsU0FBUyxFQUNULFVBQVUsRUFDVixZQUFZLEVBQ1osTUFBTSxFQUNOLFNBQVMsRUFDVCxNQUFNLEdBQ1QsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFVBQVUsRUFBQyxNQUFNLHFCQUFxQixDQUFDO0FBQy9DLE9BQU8sRUFBQyxlQUFlLEVBQUUsU0FBUyxFQUFFLHlCQUF5QixFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3BGLE9BQU8sRUFBYSxPQUFPLEVBQUMsTUFBTSxNQUFNLENBQUM7QUFDekMsT0FBTyxFQUFDLG9CQUFvQixFQUFFLElBQUksRUFBRSxTQUFTLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUVyRSxNQUFNLEtBQUssR0FBRzs7Ozs7Ozs7Ozs7OztFQWFaLENBQUM7QUFRSCxJQUFhLG1CQUFtQixHQUFoQyxNQUFhLG1CQUFtQjtJQVE1QixZQUN3QixFQUFDLGFBQWEsRUFBMEIsRUFDekIsZUFBMEMsRUFDekQsU0FBaUI7UUFQeEIsZ0JBQVcsR0FBRyxJQUFJLE9BQU8sRUFBVyxDQUFDO1FBU2xELGVBQWUsQ0FBQyxRQUFRLENBQUMsS0FBSyxFQUFFLHFCQUFxQixDQUFDLENBQUM7UUFFdkQsSUFBSSxDQUFDLGdCQUFnQixHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUN6QyxTQUFTLENBQUMsS0FBSyxDQUFDLEVBQ2hCLG9CQUFvQixFQUFFLEVBQ3RCLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FDVixDQUFDO1FBRUYsSUFBSSxTQUFTLENBQUMsU0FBUyxDQUFDLEVBQUU7WUFDdEIsT0FBTztTQUNWO1FBRUQsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLGdCQUFnQixDQUFDLEdBQUcsRUFBRTtZQUN0QyxJQUNJLENBQUMsYUFBYSxDQUFDLFlBQVk7Z0JBQzNCLGFBQWEsQ0FBQyxXQUFXLEtBQUssQ0FBQztnQkFDL0IsYUFBYSxDQUFDLFlBQVksS0FBSyxDQUFDLEVBQ2xDO2dCQUNFLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO2FBQ2hDO1FBQ0wsQ0FBQyxDQUFDLENBQUM7UUFFSCxJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxhQUFhLEVBQUU7WUFDakMsVUFBVSxFQUFFLElBQUk7WUFDaEIsZUFBZSxFQUFFLENBQUMsT0FBTyxFQUFFLE9BQU8sQ0FBQztTQUN0QyxDQUFDLENBQUM7SUFDUCxDQUFDO0lBRUQ7Ozs7O09BS0c7SUFHSCxXQUFXLENBQUMsS0FBWSxFQUFFLFVBQW1CO1FBQ3pDLElBQUksZUFBZSxDQUFDLEtBQUssQ0FBQyxFQUFFO1lBQ3hCLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1NBQ3JDO0lBQ0wsQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNqQyxDQUFDO0NBQ0osQ0FBQTs7WUFqRDRDLFVBQVUsdUJBQTlDLE1BQU0sU0FBQyxVQUFVO1lBQ2tDLHlCQUF5Qix1QkFBNUUsTUFBTSxTQUFDLHlCQUF5Qjt5Q0FDaEMsTUFBTSxTQUFDLFVBQVU7O0FBVHRCO0lBREMsTUFBTSxFQUFFOzZEQUNzQztBQStDL0M7SUFGQyxZQUFZLENBQUMsaUJBQWlCLEVBQUUsQ0FBQyxRQUFRLEVBQUUsT0FBTyxDQUFDLENBQUM7SUFDcEQsWUFBWSxDQUFDLGdCQUFnQixFQUFFLENBQUMsUUFBUSxFQUFFLE1BQU0sQ0FBQyxDQUFDO3NEQUtsRDtBQXJEUSxtQkFBbUI7SUFOL0IsU0FBUyxDQUFDO1FBQ1AsUUFBUSxFQUFFLG9CQUFvQjtRQUM5QixJQUFJLEVBQUU7WUFDRixLQUFLLEVBQUUsYUFBYTtTQUN2QjtLQUNKLENBQUM7SUFVTyxXQUFBLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQTtJQUNsQixXQUFBLE1BQU0sQ0FBQyx5QkFBeUIsQ0FBQyxDQUFBO0lBQ2pDLFdBQUEsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFBO0dBWGQsbUJBQW1CLENBMEQvQjtTQTFEWSxtQkFBbUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIERpcmVjdGl2ZSxcbiAgICBFbGVtZW50UmVmLFxuICAgIEhvc3RMaXN0ZW5lcixcbiAgICBJbmplY3QsXG4gICAgT25EZXN0cm95LFxuICAgIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1VTRVJfQUdFTlR9IGZyb20gJ0BuZy13ZWItYXBpcy9jb21tb24nO1xuaW1wb3J0IHtpc0N1cnJlbnRUYXJnZXQsIGlzRmlyZWZveCwgVHVpRGlyZWN0aXZlU3R5bGVzU2VydmljZX0gZnJvbSAnQHRhaWdhLXVpL2Nkayc7XG5pbXBvcnQge09ic2VydmFibGUsIFN1YmplY3R9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHtkaXN0aW5jdFVudGlsQ2hhbmdlZCwgc2tpcCwgc3RhcnRXaXRofSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5cbmNvbnN0IFNUWUxFID0gYFxuQGtleWZyYW1lcyB0dWlQcmVzZW50IHtcbiAgICBmcm9tIHtcbiAgICAgICAgY29udGVudDogJzEnO1xuICAgIH1cblxuICAgIHRvIHtcbiAgICAgICAgY29udGVudDogJzInO1xuICAgIH1cbn1cblxuLnR1aS1wcmVzZW50IHtcbiAgICBhbmltYXRpb246IHR1aVByZXNlbnQgMTAwMHMgaW5maW5pdGU7XG59YDtcblxuQERpcmVjdGl2ZSh7XG4gICAgc2VsZWN0b3I6ICdbdHVpUHJlc2VudENoYW5nZV0nLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgY2xhc3M6ICd0dWktcHJlc2VudCcsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpUHJlc2VudERpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gICAgQE91dHB1dCgpXG4gICAgcmVhZG9ubHkgdHVpUHJlc2VudENoYW5nZTogT2JzZXJ2YWJsZTxib29sZWFuPjtcblxuICAgIHByaXZhdGUgcmVhZG9ubHkgdmlzaWJpbGl0eSQgPSBuZXcgU3ViamVjdDxib29sZWFuPigpO1xuXG4gICAgcHJpdmF0ZSByZWFkb25seSBvYnNlcnZlcj86IE11dGF0aW9uT2JzZXJ2ZXI7XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgQEluamVjdChFbGVtZW50UmVmKSB7bmF0aXZlRWxlbWVudH06IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+LFxuICAgICAgICBASW5qZWN0KFR1aURpcmVjdGl2ZVN0eWxlc1NlcnZpY2UpIGRpcmVjdGl2ZVN0eWxlczogVHVpRGlyZWN0aXZlU3R5bGVzU2VydmljZSxcbiAgICAgICAgQEluamVjdChVU0VSX0FHRU5UKSB1c2VyQWdlbnQ6IHN0cmluZyxcbiAgICApIHtcbiAgICAgICAgZGlyZWN0aXZlU3R5bGVzLmFkZFN0eWxlKFNUWUxFLCAnVHVpUHJlc2VudERpcmVjdGl2ZScpO1xuXG4gICAgICAgIHRoaXMudHVpUHJlc2VudENoYW5nZSA9IHRoaXMudmlzaWJpbGl0eSQucGlwZShcbiAgICAgICAgICAgIHN0YXJ0V2l0aChmYWxzZSksXG4gICAgICAgICAgICBkaXN0aW5jdFVudGlsQ2hhbmdlZCgpLFxuICAgICAgICAgICAgc2tpcCgxKSxcbiAgICAgICAgKTtcblxuICAgICAgICBpZiAoaXNGaXJlZm94KHVzZXJBZ2VudCkpIHtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMub2JzZXJ2ZXIgPSBuZXcgTXV0YXRpb25PYnNlcnZlcigoKSA9PiB7XG4gICAgICAgICAgICBpZiAoXG4gICAgICAgICAgICAgICAgIW5hdGl2ZUVsZW1lbnQub2Zmc2V0UGFyZW50ICYmXG4gICAgICAgICAgICAgICAgbmF0aXZlRWxlbWVudC5vZmZzZXRXaWR0aCA9PT0gMCAmJlxuICAgICAgICAgICAgICAgIG5hdGl2ZUVsZW1lbnQub2Zmc2V0SGVpZ2h0ID09PSAwXG4gICAgICAgICAgICApIHtcbiAgICAgICAgICAgICAgICB0aGlzLnZpc2liaWxpdHkkLm5leHQoZmFsc2UpO1xuICAgICAgICAgICAgfVxuICAgICAgICB9KTtcblxuICAgICAgICB0aGlzLm9ic2VydmVyLm9ic2VydmUobmF0aXZlRWxlbWVudCwge1xuICAgICAgICAgICAgYXR0cmlidXRlczogdHJ1ZSxcbiAgICAgICAgICAgIGF0dHJpYnV0ZUZpbHRlcjogWydzdHlsZScsICdjbGFzcyddLFxuICAgICAgICB9KTtcbiAgICB9XG5cbiAgICAvKipcbiAgICAgKiBTb21lZGF5IGFuaW1hdGlvbmNhbmNlbCB3b3VsZCB3b3JrIGFuZCBtdXRhdGlvbiBvYnNlcnZlciB3b3VsZCBub3QgYmUgbmVlZGVkOlxuICAgICAqIGh0dHBzOi8vZHJhZnRzLmNzc3dnLm9yZy9jc3MtYW5pbWF0aW9ucy8jZXZlbnRkZWYtYW5pbWF0aW9uZXZlbnQtYW5pbWF0aW9uY2FuY2VsXG4gICAgICogSXQgd291bGQgYWxzbyB0cmlnZ2VyIG9uIENTUyBsaWtlIGRpc3BsYXk6IG5vbmUgb24gcGFyZW50IG5vZGVzIHdoaWNoIGlzIGF3ZXNvbWVcbiAgICAgKiBidXQgY3VycmVudGx5IG9ubHkgd29ya3MgaW4gRmlyZWZveFxuICAgICAqL1xuICAgIEBIb3N0TGlzdGVuZXIoJ2FuaW1hdGlvbmNhbmNlbCcsIFsnJGV2ZW50JywgJ2ZhbHNlJ10pXG4gICAgQEhvc3RMaXN0ZW5lcignYW5pbWF0aW9uc3RhcnQnLCBbJyRldmVudCcsICd0cnVlJ10pXG4gICAgb25BbmltYXRpb24oZXZlbnQ6IEV2ZW50LCB2aXNpYmlsaXR5OiBib29sZWFuKSB7XG4gICAgICAgIGlmIChpc0N1cnJlbnRUYXJnZXQoZXZlbnQpKSB7XG4gICAgICAgICAgICB0aGlzLnZpc2liaWxpdHkkLm5leHQodmlzaWJpbGl0eSk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBuZ09uRGVzdHJveSgpIHtcbiAgICAgICAgdGhpcy52aXNpYmlsaXR5JC5uZXh0KGZhbHNlKTtcbiAgICB9XG59XG4iXX0=