@taiga-ui/kit
Version:
Taiga UI Angular main components kit
66 lines (62 loc) • 5.37 kB
JavaScript
import { isPlatformBrowser } from '@angular/common';
import * as i0 from '@angular/core';
import { ChangeDetectionStrategy, ViewEncapsulation, Component, inject, PLATFORM_ID, input, Directive } from '@angular/core';
import { TUI_VERSION } from '@taiga-ui/cdk/constants';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { tuiWithStyles } from '@taiga-ui/cdk/utils/miscellaneous';
const OPTIONS = { duration: 1500, iterations: Infinity };
class Styles {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Styles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: Styles, isStandalone: true, selector: "ng-component", exportAs: ["tui-shimmer-5.8.0"], 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]:where(*[data-tui-version=\"5.8.0\"])._shimmer{-webkit-mask-image:linear-gradient(#000,#000),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]:where(*[data-tui-version=\"5.8.0\"])._disabled{animation:none;-webkit-mask-image:none;mask-image:none;opacity:var(--tui-disabled-opacity)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Styles, decorators: [{
type: Component,
args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-shimmer-${TUI_VERSION}`, 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]:where(*[data-tui-version=\"5.8.0\"])._shimmer{-webkit-mask-image:linear-gradient(#000,#000),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]:where(*[data-tui-version=\"5.8.0\"])._disabled{animation:none;-webkit-mask-image:none;mask-image:none;opacity:var(--tui-disabled-opacity)}\n"] }]
}] });
class TuiShimmer {
constructor() {
this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
this.el = tuiInjectElement();
this.nothing = tuiWithStyles(Styles);
this.disabled = false;
this.tuiShimmer = input(false);
}
ngOnChanges() {
if (!this.isBrowser) {
return;
}
this.disabled = !Number.parseFloat(getComputedStyle(this.el).getPropertyValue('--tui-duration'));
if (this.disabled) {
return;
}
this.animation?.commitStyles();
this.animation?.cancel();
this.animation = this.tuiShimmer()
? this.el.animate({ opacity: [0.5, 0.25, 0.5, 0.5] }, OPTIONS)
: this.el.animate([{ opacity: 0, offset: 0.5 }, { opacity: 1 }], 800);
this.animation.finished
.then(() => {
this.el.style.opacity = '';
})
.catch(() => { });
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiShimmer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TuiShimmer, isStandalone: true, selector: "[tuiShimmer]", inputs: { tuiShimmer: { classPropertyName: "tuiShimmer", publicName: "tuiShimmer", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tuiShimmer": "" }, properties: { "attr.inert": "tuiShimmer() || null", "class._disabled": "tuiShimmer() && disabled", "class._shimmer": "tuiShimmer()" } }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiShimmer, decorators: [{
type: Directive,
args: [{
selector: '[tuiShimmer]',
host: {
tuiShimmer: '',
'[attr.inert]': 'tuiShimmer() || null',
'[class._disabled]': 'tuiShimmer() && disabled',
'[class._shimmer]': 'tuiShimmer()',
},
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TuiShimmer };
//# sourceMappingURL=taiga-ui-kit-directives-shimmer.mjs.map