@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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hpbW1lci5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9raXQvZGlyZWN0aXZlcy9zaGltbWVyL3NoaW1tZXIuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxpQkFBaUIsRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBRWxELE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFNBQVMsRUFDVCxNQUFNLEVBQ04sS0FBSyxFQUNMLFdBQVcsRUFDWCxpQkFBaUIsR0FDcEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0seUJBQXlCLENBQUM7QUFDekQsT0FBTyxFQUFDLGFBQWEsRUFBQyxNQUFNLG1DQUFtQyxDQUFDOztBQUVoRSxNQVVNLGdCQUFnQjsrR0FBaEIsZ0JBQWdCO21HQUFoQixnQkFBZ0Isd0hBUlIsRUFBRTs7NEZBUVYsZ0JBQWdCO2tCQVZyQixTQUFTO2lDQUNNLElBQUksWUFDTixFQUFFLGlCQUVHLGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU0sUUFDekM7d0JBQ0YsS0FBSyxFQUFFLG9CQUFvQjtxQkFDOUI7O0FBSUwsTUFVYSxVQUFVO0lBVnZCO1FBV3FCLGNBQVMsR0FBRyxpQkFBaUIsQ0FBQyxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQztRQUNuRCxPQUFFLEdBQUcsZ0JBQWdCLEVBQUUsQ0FBQztRQUcvQixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBRVIsWUFBTyxHQUFHLGFBQWEsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1FBR3RELFlBQU8sR0FBRyxLQUFLLENBQUM7S0FtQzFCO0lBakNVLFdBQVc7UUFDZCxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUNqQixPQUFPO1NBQ1Y7UUFFRCxJQUFJLENBQUMsUUFBUSxHQUFHLENBQUMsVUFBVSxDQUN2QixnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUMsZ0JBQWdCLENBQUMsZ0JBQWdCLENBQUMsQ0FDL0QsQ0FBQztRQUVGLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNmLE9BQU87U0FDVjtRQUVELElBQUksQ0FBQyxTQUFTLEVBQUUsWUFBWSxFQUFFLENBQUM7UUFDL0IsSUFBSSxDQUFDLFNBQVMsRUFBRSxNQUFNLEVBQUUsQ0FBQztRQUV6QixJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUU7WUFDZCxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUMsT0FBTyxDQUM1QixFQUFDLE9BQU8sRUFBRSxDQUFDLEdBQUcsRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUFFLEdBQUcsQ0FBQyxFQUFDLEVBQ2hDLEVBQUMsUUFBUSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsUUFBUSxFQUFDLENBQ3pDLENBQUM7U0FDTDthQUFNO1lBQ0gsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsRUFBRSxDQUFDLE9BQU8sQ0FBQyxDQUFDLEVBQUMsT0FBTyxFQUFFLENBQUMsRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFDLEVBQUUsRUFBQyxPQUFPLEVBQUUsQ0FBQyxFQUFDLENBQUMsRUFBRTtnQkFDeEUsUUFBUSxFQUFFLEdBQUc7YUFDaEIsQ0FBQyxDQUFDO1lBRUgsSUFBSSxDQUFDLFNBQVMsQ0FBQyxRQUFRO2lCQUNsQixJQUFJLENBQUMsR0FBRyxFQUFFO2dCQUNQLElBQUksQ0FBQyxFQUFFLENBQUMsS0FBSyxDQUFDLE9BQU8sR0FBRyxFQUFFLENBQUM7WUFDL0IsQ0FBQyxDQUFDO2lCQUNELEtBQUssQ0FBQyxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUMsQ0FBQztTQUN4QjtJQUNMLENBQUM7K0dBNUNRLFVBQVU7bUdBQVYsVUFBVTs7U0FBVixVQUFVOzRGQUFWLFVBQVU7a0JBVnRCLFNBQVM7bUJBQUM7b0JBQ1AsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLFFBQVEsRUFBRSxjQUFjO29CQUN4QixJQUFJLEVBQUU7d0JBQ0YsVUFBVSxFQUFFLEVBQUU7d0JBQ2Qsa0JBQWtCLEVBQUUsU0FBUzt3QkFDN0IsbUJBQW1CLEVBQUUscUJBQXFCO3dCQUMxQyxjQUFjLEVBQUUsaUJBQWlCO3FCQUNwQztpQkFDSjs4QkFXVSxPQUFPO3NCQURiLEtBQUs7dUJBQUMsWUFBWSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7aXNQbGF0Zm9ybUJyb3dzZXJ9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgdHlwZSB7T25DaGFuZ2VzfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LFxuICAgIERpcmVjdGl2ZSxcbiAgICBpbmplY3QsXG4gICAgSW5wdXQsXG4gICAgUExBVEZPUk1fSUQsXG4gICAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHt0dWlJbmplY3RFbGVtZW50fSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL2RvbSc7XG5pbXBvcnQge3R1aVdpdGhTdHlsZXN9IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvbWlzY2VsbGFuZW91cyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgdGVtcGxhdGU6ICcnLFxuICAgIHN0eWxlVXJsczogWycuL3NoaW1tZXIuc3R5bGUubGVzcyddLFxuICAgIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgaG9zdDoge1xuICAgICAgICBjbGFzczogJ3R1aS1zaGltbWVyLXN0eWxlcycsXG4gICAgfSxcbn0pXG5jbGFzcyBUdWlTaGltbWVyU3R5bGVzIHt9XG5cbkBEaXJlY3RpdmUoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICdbdHVpU2hpbW1lcl0nLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgdHVpU2hpbW1lcjogJycsXG4gICAgICAgICdbY2xhc3MuX3NoaW1tZXJdJzogJ3NoaW1tZXInLFxuICAgICAgICAnW2NsYXNzLl9kaXNhYmxlZF0nOiAnc2hpbW1lciAmJiBkaXNhYmxlZCcsXG4gICAgICAgICdbYXR0ci5pbmVydF0nOiAnc2hpbW1lciB8fCBudWxsJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlTaGltbWVyIGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IGlzQnJvd3NlciA9IGlzUGxhdGZvcm1Ccm93c2VyKGluamVjdChQTEFURk9STV9JRCkpO1xuICAgIHByaXZhdGUgcmVhZG9ubHkgZWwgPSB0dWlJbmplY3RFbGVtZW50KCk7XG4gICAgcHJpdmF0ZSBhbmltYXRpb24/OiBBbmltYXRpb247XG5cbiAgICBwcm90ZWN0ZWQgZGlzYWJsZWQgPSBmYWxzZTtcblxuICAgIHByb3RlY3RlZCByZWFkb25seSBub3RoaW5nID0gdHVpV2l0aFN0eWxlcyhUdWlTaGltbWVyU3R5bGVzKTtcblxuICAgIEBJbnB1dCgndHVpU2hpbW1lcicpXG4gICAgcHVibGljIHNoaW1tZXIgPSBmYWxzZTtcblxuICAgIHB1YmxpYyBuZ09uQ2hhbmdlcygpOiB2b2lkIHtcbiAgICAgICAgaWYgKCF0aGlzLmlzQnJvd3Nlcikge1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgdGhpcy5kaXNhYmxlZCA9ICFwYXJzZUZsb2F0KFxuICAgICAgICAgICAgZ2V0Q29tcHV0ZWRTdHlsZSh0aGlzLmVsKS5nZXRQcm9wZXJ0eVZhbHVlKCctLXR1aS1kdXJhdGlvbicpLFxuICAgICAgICApO1xuXG4gICAgICAgIGlmICh0aGlzLmRpc2FibGVkKSB7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLmFuaW1hdGlvbj8uY29tbWl0U3R5bGVzKCk7XG4gICAgICAgIHRoaXMuYW5pbWF0aW9uPy5jYW5jZWwoKTtcblxuICAgICAgICBpZiAodGhpcy5zaGltbWVyKSB7XG4gICAgICAgICAgICB0aGlzLmFuaW1hdGlvbiA9IHRoaXMuZWwuYW5pbWF0ZShcbiAgICAgICAgICAgICAgICB7b3BhY2l0eTogWzAuNSwgMC4yNSwgMC41LCAwLjVdfSxcbiAgICAgICAgICAgICAgICB7ZHVyYXRpb246IDE1MDAsIGl0ZXJhdGlvbnM6IEluZmluaXR5fSxcbiAgICAgICAgICAgICk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICB0aGlzLmFuaW1hdGlvbiA9IHRoaXMuZWwuYW5pbWF0ZShbe29wYWNpdHk6IDAsIG9mZnNldDogMC41fSwge29wYWNpdHk6IDF9XSwge1xuICAgICAgICAgICAgICAgIGR1cmF0aW9uOiA4MDAsXG4gICAgICAgICAgICB9KTtcblxuICAgICAgICAgICAgdGhpcy5hbmltYXRpb24uZmluaXNoZWRcbiAgICAgICAgICAgICAgICAudGhlbigoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgIHRoaXMuZWwuc3R5bGUub3BhY2l0eSA9ICcnO1xuICAgICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICAgICAgLmNhdGNoKCgpID0+IHt9KTtcbiAgICAgICAgfVxuICAgIH1cbn1cbiJdfQ==