@taiga-ui/kit
Version:
Taiga UI Angular main components kit
68 lines • 10.9 kB
JavaScript
import { isPlatformBrowser } from '@angular/common';
import { ChangeDetectionStrategy, Component, Directive, inject, Input, PLATFORM_ID, ViewEncapsulation, } from '@angular/core';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { tuiWithStyles } from '@taiga-ui/cdk/utils/miscellaneous';
import * as i0 from "@angular/core";
class TuiShimmerStyles {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiShimmerStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiShimmerStyles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-shimmer-styles" }, ngImport: i0, template: '', isInline: true, styles: ["@keyframes tuiShimmer{0%{-webkit-mask-position:top left,-100rem;mask-position:top left,-100rem}to{-webkit-mask-position:top left,300rem;mask-position:top left,300rem}}[tuiShimmer]._shimmer{-webkit-mask-image:linear-gradient(black,black),linear-gradient(-70deg,transparent,rgba(0,0,0,.5),transparent);mask-image:linear-gradient(#000,#000),linear-gradient(-70deg,transparent,rgba(0,0,0,.5),transparent);-webkit-mask-size:100%,6rem 100%;mask-size:100%,6rem 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-out;mask-composite:subtract;animation:tuiShimmer 8s infinite linear;pointer-events:none;-webkit-user-select:none;user-select:none}[tuiShimmer]._disabled{animation:none;-webkit-mask:none;mask:none;opacity:var(--tui-disabled-opacity)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiShimmerStyles, decorators: [{
type: Component,
args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
class: 'tui-shimmer-styles',
}, styles: ["@keyframes tuiShimmer{0%{-webkit-mask-position:top left,-100rem;mask-position:top left,-100rem}to{-webkit-mask-position:top left,300rem;mask-position:top left,300rem}}[tuiShimmer]._shimmer{-webkit-mask-image:linear-gradient(black,black),linear-gradient(-70deg,transparent,rgba(0,0,0,.5),transparent);mask-image:linear-gradient(#000,#000),linear-gradient(-70deg,transparent,rgba(0,0,0,.5),transparent);-webkit-mask-size:100%,6rem 100%;mask-size:100%,6rem 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-out;mask-composite:subtract;animation:tuiShimmer 8s infinite linear;pointer-events:none;-webkit-user-select:none;user-select:none}[tuiShimmer]._disabled{animation:none;-webkit-mask:none;mask:none;opacity:var(--tui-disabled-opacity)}\n"] }]
}] });
class TuiShimmer {
constructor() {
this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
this.el = tuiInjectElement();
this.disabled = false;
this.nothing = tuiWithStyles(TuiShimmerStyles);
this.shimmer = false;
}
ngOnChanges() {
if (!this.isBrowser) {
return;
}
this.disabled = !parseFloat(getComputedStyle(this.el).getPropertyValue('--tui-duration'));
if (this.disabled) {
return;
}
this.animation?.commitStyles();
this.animation?.cancel();
if (this.shimmer) {
this.animation = this.el.animate({ opacity: [0.5, 0.25, 0.5, 0.5] }, { duration: 1500, iterations: Infinity });
}
else {
this.animation = this.el.animate([{ opacity: 0, offset: 0.5 }, { opacity: 1 }], {
duration: 800,
});
this.animation.finished
.then(() => {
this.el.style.opacity = '';
})
.catch(() => { });
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiShimmer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiShimmer, isStandalone: true, selector: "[tuiShimmer]", inputs: { shimmer: ["tuiShimmer", "shimmer"] }, host: { attributes: { "tuiShimmer": "" }, properties: { "class._shimmer": "shimmer", "class._disabled": "shimmer && disabled", "attr.inert": "shimmer || null" } }, usesOnChanges: true, ngImport: i0 }); }
}
export { TuiShimmer };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiShimmer, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[tuiShimmer]',
host: {
tuiShimmer: '',
'[class._shimmer]': 'shimmer',
'[class._disabled]': 'shimmer && disabled',
'[attr.inert]': 'shimmer || null',
},
}]
}], propDecorators: { shimmer: [{
type: Input,
args: ['tuiShimmer']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hpbW1lci5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9raXQvZGlyZWN0aXZlcy9zaGltbWVyL3NoaW1tZXIuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxpQkFBaUIsRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQ2xELE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFNBQVMsRUFDVCxNQUFNLEVBQ04sS0FBSyxFQUVMLFdBQVcsRUFDWCxpQkFBaUIsR0FDcEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0seUJBQXlCLENBQUM7QUFDekQsT0FBTyxFQUFDLGFBQWEsRUFBQyxNQUFNLG1DQUFtQyxDQUFDOztBQUVoRSxNQVVNLGdCQUFnQjsrR0FBaEIsZ0JBQWdCO21HQUFoQixnQkFBZ0Isd0hBUlIsRUFBRTs7NEZBUVYsZ0JBQWdCO2tCQVZyQixTQUFTO2lDQUNNLElBQUksWUFDTixFQUFFLGlCQUVHLGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU0sUUFDekM7d0JBQ0YsS0FBSyxFQUFFLG9CQUFvQjtxQkFDOUI7O0FBSUwsTUFVYSxVQUFVO0lBVnZCO1FBV3FCLGNBQVMsR0FBRyxpQkFBaUIsQ0FBQyxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQztRQUNuRCxPQUFFLEdBQUcsZ0JBQWdCLEVBQUUsQ0FBQztRQUcvQixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBRVIsWUFBTyxHQUFHLGFBQWEsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1FBR3RELFlBQU8sR0FBRyxLQUFLLENBQUM7S0FtQzFCO0lBakNVLFdBQVc7UUFDZCxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUNqQixPQUFPO1NBQ1Y7UUFFRCxJQUFJLENBQUMsUUFBUSxHQUFHLENBQUMsVUFBVSxDQUN2QixnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUMsZ0JBQWdCLENBQUMsZ0JBQWdCLENBQUMsQ0FDL0QsQ0FBQztRQUVGLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNmLE9BQU87U0FDVjtRQUVELElBQUksQ0FBQyxTQUFTLEVBQUUsWUFBWSxFQUFFLENBQUM7UUFDL0IsSUFBSSxDQUFDLFNBQVMsRUFBRSxNQUFNLEVBQUUsQ0FBQztRQUV6QixJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUU7WUFDZCxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUMsT0FBTyxDQUM1QixFQUFDLE9BQU8sRUFBRSxDQUFDLEdBQUcsRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUFFLEdBQUcsQ0FBQyxFQUFDLEVBQ2hDLEVBQUMsUUFBUSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsUUFBUSxFQUFDLENBQ3pDLENBQUM7U0FDTDthQUFNO1lBQ0gsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsRUFBRSxDQUFDLE9BQU8sQ0FBQyxDQUFDLEVBQUMsT0FBTyxFQUFFLENBQUMsRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFDLEVBQUUsRUFBQyxPQUFPLEVBQUUsQ0FBQyxFQUFDLENBQUMsRUFBRTtnQkFDeEUsUUFBUSxFQUFFLEdBQUc7YUFDaEIsQ0FBQyxDQUFDO1lBRUgsSUFBSSxDQUFDLFNBQVMsQ0FBQyxRQUFRO2lCQUNsQixJQUFJLENBQUMsR0FBRyxFQUFFO2dCQUNQLElBQUksQ0FBQyxFQUFFLENBQUMsS0FBSyxDQUFDLE9BQU8sR0FBRyxFQUFFLENBQUM7WUFDL0IsQ0FBQyxDQUFDO2lCQUNELEtBQUssQ0FBQyxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUMsQ0FBQztTQUN4QjtJQUNMLENBQUM7K0dBNUNRLFVBQVU7bUdBQVYsVUFBVTs7U0FBVixVQUFVOzRGQUFWLFVBQVU7a0JBVnRCLFNBQVM7bUJBQUM7b0JBQ1AsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLFFBQVEsRUFBRSxjQUFjO29CQUN4QixJQUFJLEVBQUU7d0JBQ0YsVUFBVSxFQUFFLEVBQUU7d0JBQ2Qsa0JBQWtCLEVBQUUsU0FBUzt3QkFDN0IsbUJBQW1CLEVBQUUscUJBQXFCO3dCQUMxQyxjQUFjLEVBQUUsaUJBQWlCO3FCQUNwQztpQkFDSjs4QkFXVSxPQUFPO3NCQURiLEtBQUs7dUJBQUMsWUFBWSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7aXNQbGF0Zm9ybUJyb3dzZXJ9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENvbXBvbmVudCxcbiAgICBEaXJlY3RpdmUsXG4gICAgaW5qZWN0LFxuICAgIElucHV0LFxuICAgIHR5cGUgT25DaGFuZ2VzLFxuICAgIFBMQVRGT1JNX0lELFxuICAgIFZpZXdFbmNhcHN1bGF0aW9uLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7dHVpSW5qZWN0RWxlbWVudH0gZnJvbSAnQHRhaWdhLXVpL2Nkay91dGlscy9kb20nO1xuaW1wb3J0IHt0dWlXaXRoU3R5bGVzfSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL21pc2NlbGxhbmVvdXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHRlbXBsYXRlOiAnJyxcbiAgICBzdHlsZVVybHM6IFsnLi9zaGltbWVyLnN0eWxlLmxlc3MnXSxcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgY2xhc3M6ICd0dWktc2hpbW1lci1zdHlsZXMnLFxuICAgIH0sXG59KVxuY2xhc3MgVHVpU2hpbW1lclN0eWxlcyB7fVxuXG5ARGlyZWN0aXZlKHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAnW3R1aVNoaW1tZXJdJyxcbiAgICBob3N0OiB7XG4gICAgICAgIHR1aVNoaW1tZXI6ICcnLFxuICAgICAgICAnW2NsYXNzLl9zaGltbWVyXSc6ICdzaGltbWVyJyxcbiAgICAgICAgJ1tjbGFzcy5fZGlzYWJsZWRdJzogJ3NoaW1tZXIgJiYgZGlzYWJsZWQnLFxuICAgICAgICAnW2F0dHIuaW5lcnRdJzogJ3NoaW1tZXIgfHwgbnVsbCcsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpU2hpbW1lciBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gICAgcHJpdmF0ZSByZWFkb25seSBpc0Jyb3dzZXIgPSBpc1BsYXRmb3JtQnJvd3NlcihpbmplY3QoUExBVEZPUk1fSUQpKTtcbiAgICBwcml2YXRlIHJlYWRvbmx5IGVsID0gdHVpSW5qZWN0RWxlbWVudCgpO1xuICAgIHByaXZhdGUgYW5pbWF0aW9uPzogQW5pbWF0aW9uO1xuXG4gICAgcHJvdGVjdGVkIGRpc2FibGVkID0gZmFsc2U7XG5cbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgbm90aGluZyA9IHR1aVdpdGhTdHlsZXMoVHVpU2hpbW1lclN0eWxlcyk7XG5cbiAgICBASW5wdXQoJ3R1aVNoaW1tZXInKVxuICAgIHB1YmxpYyBzaGltbWVyID0gZmFsc2U7XG5cbiAgICBwdWJsaWMgbmdPbkNoYW5nZXMoKTogdm9pZCB7XG4gICAgICAgIGlmICghdGhpcy5pc0Jyb3dzZXIpIHtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMuZGlzYWJsZWQgPSAhcGFyc2VGbG9hdChcbiAgICAgICAgICAgIGdldENvbXB1dGVkU3R5bGUodGhpcy5lbCkuZ2V0UHJvcGVydHlWYWx1ZSgnLS10dWktZHVyYXRpb24nKSxcbiAgICAgICAgKTtcblxuICAgICAgICBpZiAodGhpcy5kaXNhYmxlZCkge1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgdGhpcy5hbmltYXRpb24/LmNvbW1pdFN0eWxlcygpO1xuICAgICAgICB0aGlzLmFuaW1hdGlvbj8uY2FuY2VsKCk7XG5cbiAgICAgICAgaWYgKHRoaXMuc2hpbW1lcikge1xuICAgICAgICAgICAgdGhpcy5hbmltYXRpb24gPSB0aGlzLmVsLmFuaW1hdGUoXG4gICAgICAgICAgICAgICAge29wYWNpdHk6IFswLjUsIDAuMjUsIDAuNSwgMC41XX0sXG4gICAgICAgICAgICAgICAge2R1cmF0aW9uOiAxNTAwLCBpdGVyYXRpb25zOiBJbmZpbml0eX0sXG4gICAgICAgICAgICApO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgdGhpcy5hbmltYXRpb24gPSB0aGlzLmVsLmFuaW1hdGUoW3tvcGFjaXR5OiAwLCBvZmZzZXQ6IDAuNX0sIHtvcGFjaXR5OiAxfV0sIHtcbiAgICAgICAgICAgICAgICBkdXJhdGlvbjogODAwLFxuICAgICAgICAgICAgfSk7XG5cbiAgICAgICAgICAgIHRoaXMuYW5pbWF0aW9uLmZpbmlzaGVkXG4gICAgICAgICAgICAgICAgLnRoZW4oKCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICB0aGlzLmVsLnN0eWxlLm9wYWNpdHkgPSAnJztcbiAgICAgICAgICAgICAgICB9KVxuICAgICAgICAgICAgICAgIC5jYXRjaCgoKSA9PiB7fSk7XG4gICAgICAgIH1cbiAgICB9XG59XG4iXX0=