UNPKG

@taiga-ui/kit

Version:

Taiga UI Angular main components kit

41 lines (37 loc) 3.42 kB
import { isPlatformBrowser } from '@angular/common'; import * as i0 from '@angular/core'; import { inject, PLATFORM_ID, Component, ChangeDetectionStrategy, Input } from '@angular/core'; import * as i1 from '@taiga-ui/cdk/directives/animated'; import { TuiAnimated } from '@taiga-ui/cdk/directives/animated'; import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom'; import { TuiRectAccessor, tuiAsRectAccessor } from '@taiga-ui/core/classes'; class TuiPulse extends TuiRectAccessor { constructor() { super(...arguments); this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID)); this.el = tuiInjectElement(); this.playing = true; this.type = 'hint'; } getClientRect() { const rect = this.el.getBoundingClientRect(); return this.isBrowser ? new DOMRect(rect.x - 4, rect.y - 4, rect.width + 8, rect.height + 8) : rect; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiPulse, deps: null, target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiPulse, isStandalone: true, selector: "tui-pulse", inputs: { playing: "playing" }, host: { properties: { "class._playing": "playing" } }, providers: [tuiAsRectAccessor(TuiPulse)], usesInheritance: true, hostDirectives: [{ directive: i1.TuiAnimated }], ngImport: i0, template: '', isInline: true, styles: ["@keyframes tuiPulse{to{opacity:0;transform:scale(2.5)}}:host{position:relative;color:var(--tui-background-accent-1)}:host.tui-enter,:host.tui-leave{animation-name:tuiScale}:host:before,:host:after{transition-property:box-shadow;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;inline-size:.5rem;block-size:.5rem;border-radius:100%;margin:-.25rem;background:currentColor}:host:before{opacity:1;transform:scale(0)}:host._playing:before{animation:tuiPulse 1s 1s ease-in-out infinite}:host._playing:after{box-shadow:0 0 .5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiPulse, decorators: [{ type: Component, args: [{ standalone: true, selector: 'tui-pulse', template: '', changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiAsRectAccessor(TuiPulse)], hostDirectives: [TuiAnimated], host: { '[class._playing]': 'playing', }, styles: ["@keyframes tuiPulse{to{opacity:0;transform:scale(2.5)}}:host{position:relative;color:var(--tui-background-accent-1)}:host.tui-enter,:host.tui-leave{animation-name:tuiScale}:host:before,:host:after{transition-property:box-shadow;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;inline-size:.5rem;block-size:.5rem;border-radius:100%;margin:-.25rem;background:currentColor}:host:before{opacity:1;transform:scale(0)}:host._playing:before{animation:tuiPulse 1s 1s ease-in-out infinite}:host._playing:after{box-shadow:0 0 .5rem}\n"] }] }], propDecorators: { playing: [{ type: Input }] } }); /** * Generated bundle index. Do not edit. */ export { TuiPulse }; //# sourceMappingURL=taiga-ui-kit-components-pulse.mjs.map