UNPKG

@taiga-ui/kit

Version:

Taiga UI Angular main components kit

82 lines (77 loc) 4.22 kB
import { isPlatformServer } from '@angular/common'; import * as i0 from '@angular/core'; import { inject, Injectable, PLATFORM_ID, signal, Directive, Input } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { IntersectionObserverService } from '@ng-web-apis/intersection-observer'; import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom'; import { tuiWatch } from '@taiga-ui/cdk/observables'; import { Observable, Subject, switchMap, filter, map, take } from 'rxjs'; class TuiLazyLoadingService extends Observable { constructor() { super((subscriber) => this.stream$.subscribe(subscriber)); this.src$ = new Subject(); this.intersections$ = inject(IntersectionObserverService); this.stream$ = this.src$.pipe(switchMap((src) => this.intersections$.pipe(filter((entry) => !!entry[0]?.isIntersecting), map(() => src), take(1))), tuiWatch()); } next(src) { this.src$.next(src); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiLazyLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); } static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiLazyLoadingService }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiLazyLoadingService, decorators: [{ type: Injectable }], ctorParameters: function () { return []; } }); /** * @deprecated: Drop in v5.0 */ class TuiImgLazyLoading { constructor() { this.isServer = isPlatformServer(inject(PLATFORM_ID)); this.loading$ = inject(TuiLazyLoadingService); this.supported = 'loading' in tuiInjectElement(); this.src = signal(null); this.background = signal(this.isServer ? '' : 'var(--tui-background-neutral-2)'); this.animation = signal(this.isServer ? '' : 'tuiSkeletonVibe ease-in-out 1s infinite alternate'); this.$ = !this.supported && this.loading$.pipe(takeUntilDestroyed()).subscribe((src) => this.src.set(src)); } set srcSetter(src) { if (this.supported) { this.src.set(src); } else { this.loading$.next(src); } } unset() { this.background.set(''); this.animation.set(''); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiImgLazyLoading, deps: [], target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiImgLazyLoading, isStandalone: true, selector: "img[loading=\"lazy\"],img[tuiLoading=\"lazy\"]", inputs: { srcSetter: ["src", "srcSetter"] }, host: { listeners: { "load": "unset()", "error": "unset()" }, properties: { "style.animation": "animation()", "style.background": "background()", "attr.loading": "supported ? \"lazy\" : null", "attr.src": "src()" } }, providers: [TuiLazyLoadingService, IntersectionObserverService], ngImport: i0 }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiImgLazyLoading, decorators: [{ type: Directive, args: [{ standalone: true, selector: 'img[loading="lazy"],img[tuiLoading="lazy"]', providers: [TuiLazyLoadingService, IntersectionObserverService], host: { '[style.animation]': 'animation()', '[style.background]': 'background()', '[attr.loading]': 'supported ? "lazy" : null', '[attr.src]': 'src()', '(load)': 'unset()', '(error)': 'unset()', }, }] }], propDecorators: { srcSetter: [{ type: Input, args: ['src'] }] } }); /** * Generated bundle index. Do not edit. */ export { TuiImgLazyLoading, TuiLazyLoadingService }; //# sourceMappingURL=taiga-ui-kit-directives-lazy-loading.mjs.map