@taiga-ui/kit
Version:
Taiga UI Angular main components kit
58 lines • 8.26 kB
JavaScript
import { isPlatformServer } from '@angular/common';
import { Directive, inject, Input, PLATFORM_ID, signal } 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 { TuiLazyLoadingService } from './lazy-loading.service';
import * as i0 from "@angular/core";
/**
* @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 &&
// eslint-disable-next-line @angular-eslint/no-uncalled-signals
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 }); }
}
export { TuiImgLazyLoading };
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']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF6eS1sb2FkaW5nLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdC9kaXJlY3RpdmVzL2xhenktbG9hZGluZy9sYXp5LWxvYWRpbmcuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQ2pELE9BQU8sRUFBQyxTQUFTLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxXQUFXLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQzVFLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLDRCQUE0QixDQUFDO0FBRTlELE9BQU8sRUFBQywyQkFBMkIsRUFBQyxNQUFNLG9DQUFvQyxDQUFDO0FBQy9FLE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBRXpELE9BQU8sRUFBQyxxQkFBcUIsRUFBQyxNQUFNLHdCQUF3QixDQUFDOztBQUU3RDs7R0FFRztBQUNILE1BYWEsaUJBQWlCO0lBYjlCO1FBY3FCLGFBQVEsR0FBRyxnQkFBZ0IsQ0FBQyxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQztRQUNqRCxhQUFRLEdBQUcsTUFBTSxDQUFDLHFCQUFxQixDQUFDLENBQUM7UUFDdkMsY0FBUyxHQUFHLFNBQVMsSUFBSSxnQkFBZ0IsRUFBb0IsQ0FBQztRQUN2RSxRQUFHLEdBQUcsTUFBTSxDQUFrQyxJQUFJLENBQUMsQ0FBQztRQUNwRCxlQUFVLEdBQUcsTUFBTSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsaUNBQWlDLENBQUMsQ0FBQztRQUM1RSxjQUFTLEdBQUcsTUFBTSxDQUN4QixJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLG1EQUFtRCxDQUMzRSxDQUFDO1FBRWlCLE1BQUMsR0FDaEIsQ0FBQyxJQUFJLENBQUMsU0FBUztZQUNmLCtEQUErRDtZQUMvRCxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxrQkFBa0IsRUFBRSxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsR0FBRyxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDO0tBZXRGO0lBYkcsSUFDVyxTQUFTLENBQUMsR0FBNkI7UUFDOUMsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ2hCLElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDO1NBQ3JCO2FBQU07WUFDSCxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztTQUMzQjtJQUNMLENBQUM7SUFFUyxLQUFLO1FBQ1gsSUFBSSxDQUFDLFVBQVUsQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLENBQUM7UUFDeEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDM0IsQ0FBQzsrR0EzQlEsaUJBQWlCO21HQUFqQixpQkFBaUIsb1dBVmYsQ0FBQyxxQkFBcUIsRUFBRSwyQkFBMkIsQ0FBQzs7U0FVdEQsaUJBQWlCOzRGQUFqQixpQkFBaUI7a0JBYjdCLFNBQVM7bUJBQUM7b0JBQ1AsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLFFBQVEsRUFBRSw0Q0FBNEM7b0JBQ3RELFNBQVMsRUFBRSxDQUFDLHFCQUFxQixFQUFFLDJCQUEyQixDQUFDO29CQUMvRCxJQUFJLEVBQUU7d0JBQ0YsbUJBQW1CLEVBQUUsYUFBYTt3QkFDbEMsb0JBQW9CLEVBQUUsY0FBYzt3QkFDcEMsZ0JBQWdCLEVBQUUsMkJBQTJCO3dCQUM3QyxZQUFZLEVBQUUsT0FBTzt3QkFDckIsUUFBUSxFQUFFLFNBQVM7d0JBQ25CLFNBQVMsRUFBRSxTQUFTO3FCQUN2QjtpQkFDSjs4QkFpQmMsU0FBUztzQkFEbkIsS0FBSzt1QkFBQyxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtpc1BsYXRmb3JtU2VydmVyfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtEaXJlY3RpdmUsIGluamVjdCwgSW5wdXQsIFBMQVRGT1JNX0lELCBzaWduYWx9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHt0YWtlVW50aWxEZXN0cm95ZWR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUvcnhqcy1pbnRlcm9wJztcbmltcG9ydCB0eXBlIHtTYWZlUmVzb3VyY2VVcmx9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXInO1xuaW1wb3J0IHtJbnRlcnNlY3Rpb25PYnNlcnZlclNlcnZpY2V9IGZyb20gJ0BuZy13ZWItYXBpcy9pbnRlcnNlY3Rpb24tb2JzZXJ2ZXInO1xuaW1wb3J0IHt0dWlJbmplY3RFbGVtZW50fSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL2RvbSc7XG5cbmltcG9ydCB7VHVpTGF6eUxvYWRpbmdTZXJ2aWNlfSBmcm9tICcuL2xhenktbG9hZGluZy5zZXJ2aWNlJztcblxuLyoqXG4gKiBAZGVwcmVjYXRlZDogRHJvcCBpbiB2NS4wXG4gKi9cbkBEaXJlY3RpdmUoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICdpbWdbbG9hZGluZz1cImxhenlcIl0saW1nW3R1aUxvYWRpbmc9XCJsYXp5XCJdJyxcbiAgICBwcm92aWRlcnM6IFtUdWlMYXp5TG9hZGluZ1NlcnZpY2UsIEludGVyc2VjdGlvbk9ic2VydmVyU2VydmljZV0sXG4gICAgaG9zdDoge1xuICAgICAgICAnW3N0eWxlLmFuaW1hdGlvbl0nOiAnYW5pbWF0aW9uKCknLFxuICAgICAgICAnW3N0eWxlLmJhY2tncm91bmRdJzogJ2JhY2tncm91bmQoKScsXG4gICAgICAgICdbYXR0ci5sb2FkaW5nXSc6ICdzdXBwb3J0ZWQgPyBcImxhenlcIiA6IG51bGwnLFxuICAgICAgICAnW2F0dHIuc3JjXSc6ICdzcmMoKScsXG4gICAgICAgICcobG9hZCknOiAndW5zZXQoKScsXG4gICAgICAgICcoZXJyb3IpJzogJ3Vuc2V0KCknLFxuICAgIH0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aUltZ0xhenlMb2FkaW5nIHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IGlzU2VydmVyID0gaXNQbGF0Zm9ybVNlcnZlcihpbmplY3QoUExBVEZPUk1fSUQpKTtcbiAgICBwcml2YXRlIHJlYWRvbmx5IGxvYWRpbmckID0gaW5qZWN0KFR1aUxhenlMb2FkaW5nU2VydmljZSk7XG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IHN1cHBvcnRlZCA9ICdsb2FkaW5nJyBpbiB0dWlJbmplY3RFbGVtZW50PEhUTUxJbWFnZUVsZW1lbnQ+KCk7XG4gICAgcHJvdGVjdGVkIHNyYyA9IHNpZ25hbDxTYWZlUmVzb3VyY2VVcmwgfCBzdHJpbmcgfCBudWxsPihudWxsKTtcbiAgICBwcm90ZWN0ZWQgYmFja2dyb3VuZCA9IHNpZ25hbCh0aGlzLmlzU2VydmVyID8gJycgOiAndmFyKC0tdHVpLWJhY2tncm91bmQtbmV1dHJhbC0yKScpO1xuICAgIHByb3RlY3RlZCBhbmltYXRpb24gPSBzaWduYWwoXG4gICAgICAgIHRoaXMuaXNTZXJ2ZXIgPyAnJyA6ICd0dWlTa2VsZXRvblZpYmUgZWFzZS1pbi1vdXQgMXMgaW5maW5pdGUgYWx0ZXJuYXRlJyxcbiAgICApO1xuXG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5ICQgPVxuICAgICAgICAhdGhpcy5zdXBwb3J0ZWQgJiZcbiAgICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9uby11bmNhbGxlZC1zaWduYWxzXG4gICAgICAgIHRoaXMubG9hZGluZyQucGlwZSh0YWtlVW50aWxEZXN0cm95ZWQoKSkuc3Vic2NyaWJlKChzcmMpID0+IHRoaXMuc3JjLnNldChzcmMpKTtcblxuICAgIEBJbnB1dCgnc3JjJylcbiAgICBwdWJsaWMgc2V0IHNyY1NldHRlcihzcmM6IFNhZmVSZXNvdXJjZVVybCB8IHN0cmluZykge1xuICAgICAgICBpZiAodGhpcy5zdXBwb3J0ZWQpIHtcbiAgICAgICAgICAgIHRoaXMuc3JjLnNldChzcmMpO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgdGhpcy5sb2FkaW5nJC5uZXh0KHNyYyk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBwcm90ZWN0ZWQgdW5zZXQoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuYmFja2dyb3VuZC5zZXQoJycpO1xuICAgICAgICB0aGlzLmFuaW1hdGlvbi5zZXQoJycpO1xuICAgIH1cbn1cbiJdfQ==