@taiga-ui/kit
Version:
Taiga UI Angular main components kit
57 lines • 8.07 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 &&
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF6eS1sb2FkaW5nLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdC9kaXJlY3RpdmVzL2xhenktbG9hZGluZy9sYXp5LWxvYWRpbmcuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQ2pELE9BQU8sRUFBQyxTQUFTLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxXQUFXLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQzVFLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLDRCQUE0QixDQUFDO0FBRTlELE9BQU8sRUFBQywyQkFBMkIsRUFBQyxNQUFNLG9DQUFvQyxDQUFDO0FBQy9FLE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBRXpELE9BQU8sRUFBQyxxQkFBcUIsRUFBQyxNQUFNLHdCQUF3QixDQUFDOztBQUU3RDs7R0FFRztBQUNILE1BYWEsaUJBQWlCO0lBYjlCO1FBY3FCLGFBQVEsR0FBRyxnQkFBZ0IsQ0FBQyxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQztRQUNqRCxhQUFRLEdBQUcsTUFBTSxDQUFDLHFCQUFxQixDQUFDLENBQUM7UUFDdkMsY0FBUyxHQUFHLFNBQVMsSUFBSSxnQkFBZ0IsRUFBb0IsQ0FBQztRQUN2RSxRQUFHLEdBQUcsTUFBTSxDQUFrQyxJQUFJLENBQUMsQ0FBQztRQUNwRCxlQUFVLEdBQUcsTUFBTSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsaUNBQWlDLENBQUMsQ0FBQztRQUM1RSxjQUFTLEdBQUcsTUFBTSxDQUN4QixJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLG1EQUFtRCxDQUMzRSxDQUFDO1FBRWlCLE1BQUMsR0FDaEIsQ0FBQyxJQUFJLENBQUMsU0FBUztZQUNmLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLGtCQUFrQixFQUFFLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxHQUFHLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7S0FldEY7SUFiRyxJQUNXLFNBQVMsQ0FBQyxHQUE2QjtRQUM5QyxJQUFJLElBQUksQ0FBQyxTQUFTLEVBQUU7WUFDaEIsSUFBSSxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsR0FBRyxDQUFDLENBQUM7U0FDckI7YUFBTTtZQUNILElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1NBQzNCO0lBQ0wsQ0FBQztJQUVTLEtBQUs7UUFDWCxJQUFJLENBQUMsVUFBVSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUN4QixJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUMzQixDQUFDOytHQTFCUSxpQkFBaUI7bUdBQWpCLGlCQUFpQixvV0FWZixDQUFDLHFCQUFxQixFQUFFLDJCQUEyQixDQUFDOztTQVV0RCxpQkFBaUI7NEZBQWpCLGlCQUFpQjtrQkFiN0IsU0FBUzttQkFBQztvQkFDUCxVQUFVLEVBQUUsSUFBSTtvQkFDaEIsUUFBUSxFQUFFLDRDQUE0QztvQkFDdEQsU0FBUyxFQUFFLENBQUMscUJBQXFCLEVBQUUsMkJBQTJCLENBQUM7b0JBQy9ELElBQUksRUFBRTt3QkFDRixtQkFBbUIsRUFBRSxhQUFhO3dCQUNsQyxvQkFBb0IsRUFBRSxjQUFjO3dCQUNwQyxnQkFBZ0IsRUFBRSwyQkFBMkI7d0JBQzdDLFlBQVksRUFBRSxPQUFPO3dCQUNyQixRQUFRLEVBQUUsU0FBUzt3QkFDbkIsU0FBUyxFQUFFLFNBQVM7cUJBQ3ZCO2lCQUNKOzhCQWdCYyxTQUFTO3NCQURuQixLQUFLO3VCQUFDLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge2lzUGxhdGZvcm1TZXJ2ZXJ9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge0RpcmVjdGl2ZSwgaW5qZWN0LCBJbnB1dCwgUExBVEZPUk1fSUQsIHNpZ25hbH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge3Rha2VVbnRpbERlc3Ryb3llZH0gZnJvbSAnQGFuZ3VsYXIvY29yZS9yeGpzLWludGVyb3AnO1xuaW1wb3J0IHR5cGUge1NhZmVSZXNvdXJjZVVybH0gZnJvbSAnQGFuZ3VsYXIvcGxhdGZvcm0tYnJvd3Nlcic7XG5pbXBvcnQge0ludGVyc2VjdGlvbk9ic2VydmVyU2VydmljZX0gZnJvbSAnQG5nLXdlYi1hcGlzL2ludGVyc2VjdGlvbi1vYnNlcnZlcic7XG5pbXBvcnQge3R1aUluamVjdEVsZW1lbnR9IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvZG9tJztcblxuaW1wb3J0IHtUdWlMYXp5TG9hZGluZ1NlcnZpY2V9IGZyb20gJy4vbGF6eS1sb2FkaW5nLnNlcnZpY2UnO1xuXG4vKipcbiAqIEBkZXByZWNhdGVkOiBEcm9wIGluIHY1LjBcbiAqL1xuQERpcmVjdGl2ZSh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ2ltZ1tsb2FkaW5nPVwibGF6eVwiXSxpbWdbdHVpTG9hZGluZz1cImxhenlcIl0nLFxuICAgIHByb3ZpZGVyczogW1R1aUxhenlMb2FkaW5nU2VydmljZSwgSW50ZXJzZWN0aW9uT2JzZXJ2ZXJTZXJ2aWNlXSxcbiAgICBob3N0OiB7XG4gICAgICAgICdbc3R5bGUuYW5pbWF0aW9uXSc6ICdhbmltYXRpb24oKScsXG4gICAgICAgICdbc3R5bGUuYmFja2dyb3VuZF0nOiAnYmFja2dyb3VuZCgpJyxcbiAgICAgICAgJ1thdHRyLmxvYWRpbmddJzogJ3N1cHBvcnRlZCA/IFwibGF6eVwiIDogbnVsbCcsXG4gICAgICAgICdbYXR0ci5zcmNdJzogJ3NyYygpJyxcbiAgICAgICAgJyhsb2FkKSc6ICd1bnNldCgpJyxcbiAgICAgICAgJyhlcnJvciknOiAndW5zZXQoKScsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpSW1nTGF6eUxvYWRpbmcge1xuICAgIHByaXZhdGUgcmVhZG9ubHkgaXNTZXJ2ZXIgPSBpc1BsYXRmb3JtU2VydmVyKGluamVjdChQTEFURk9STV9JRCkpO1xuICAgIHByaXZhdGUgcmVhZG9ubHkgbG9hZGluZyQgPSBpbmplY3QoVHVpTGF6eUxvYWRpbmdTZXJ2aWNlKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgc3VwcG9ydGVkID0gJ2xvYWRpbmcnIGluIHR1aUluamVjdEVsZW1lbnQ8SFRNTEltYWdlRWxlbWVudD4oKTtcbiAgICBwcm90ZWN0ZWQgc3JjID0gc2lnbmFsPFNhZmVSZXNvdXJjZVVybCB8IHN0cmluZyB8IG51bGw+KG51bGwpO1xuICAgIHByb3RlY3RlZCBiYWNrZ3JvdW5kID0gc2lnbmFsKHRoaXMuaXNTZXJ2ZXIgPyAnJyA6ICd2YXIoLS10dWktYmFja2dyb3VuZC1uZXV0cmFsLTIpJyk7XG4gICAgcHJvdGVjdGVkIGFuaW1hdGlvbiA9IHNpZ25hbChcbiAgICAgICAgdGhpcy5pc1NlcnZlciA/ICcnIDogJ3R1aVNrZWxldG9uVmliZSBlYXNlLWluLW91dCAxcyBpbmZpbml0ZSBhbHRlcm5hdGUnLFxuICAgICk7XG5cbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgJCA9XG4gICAgICAgICF0aGlzLnN1cHBvcnRlZCAmJlxuICAgICAgICB0aGlzLmxvYWRpbmckLnBpcGUodGFrZVVudGlsRGVzdHJveWVkKCkpLnN1YnNjcmliZSgoc3JjKSA9PiB0aGlzLnNyYy5zZXQoc3JjKSk7XG5cbiAgICBASW5wdXQoJ3NyYycpXG4gICAgcHVibGljIHNldCBzcmNTZXR0ZXIoc3JjOiBTYWZlUmVzb3VyY2VVcmwgfCBzdHJpbmcpIHtcbiAgICAgICAgaWYgKHRoaXMuc3VwcG9ydGVkKSB7XG4gICAgICAgICAgICB0aGlzLnNyYy5zZXQoc3JjKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIHRoaXMubG9hZGluZyQubmV4dChzcmMpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIHVuc2V0KCk6IHZvaWQge1xuICAgICAgICB0aGlzLmJhY2tncm91bmQuc2V0KCcnKTtcbiAgICAgICAgdGhpcy5hbmltYXRpb24uc2V0KCcnKTtcbiAgICB9XG59XG4iXX0=