@taiga-ui/kit
Version:
Taiga UI Angular main components kit
82 lines (77 loc) • 4.22 kB
JavaScript
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