@taiga-ui/kit
Version:
Taiga UI Angular main components kit
69 lines • 11.1 kB
JavaScript
import { __decorate } from "tslib";
import { ChangeDetectionStrategy, Component, Directive, inject, Input, ViewEncapsulation, } from '@angular/core';
import { CHAR_NO_BREAK_SPACE } from '@taiga-ui/cdk/constants';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { tuiPure, tuiWithStyles } from '@taiga-ui/cdk/utils/miscellaneous';
import { TUI_ANIMATIONS_SPEED } from '@taiga-ui/core/tokens';
import { TUI_ANIMATIONS_DEFAULT_DURATION } from '@taiga-ui/core/utils/miscellaneous';
import * as i0 from "@angular/core";
const FADE = [{ opacity: 0.06 }, { opacity: 1 }];
class TuiSkeletonStyles {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSkeletonStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiSkeletonStyles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-skeleton-styles" }, ngImport: i0, template: '', isInline: true, styles: ["@keyframes tuiSkeleton{0%{opacity:.03}to{opacity:.06}}[tuiSkeleton]._skeleton{color:transparent;background:var(--tui-background-base)!important;box-shadow:none!important;filter:contrast(0) brightness(0);animation:tuiSkeleton ease-in-out 1s infinite alternate;-webkit-user-select:none;user-select:none;pointer-events:none}[tuiSkeleton]._skeleton[data-tui-skeleton]{background:transparent!important}[tuiSkeleton]._skeleton[data-tui-skeleton]:before{content:attr(data-tui-skeleton);background:var(--tui-background-base);font-size:smaller;-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:.25rem}[tuiTheme=dark] [tuiSkeleton]._skeleton,[tuiTheme=dark][tuiSkeleton]._skeleton{filter:contrast(0) brightness(0) invert(1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSkeletonStyles, decorators: [{
type: Component,
args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
class: 'tui-skeleton-styles',
}, styles: ["@keyframes tuiSkeleton{0%{opacity:.03}to{opacity:.06}}[tuiSkeleton]._skeleton{color:transparent;background:var(--tui-background-base)!important;box-shadow:none!important;filter:contrast(0) brightness(0);animation:tuiSkeleton ease-in-out 1s infinite alternate;-webkit-user-select:none;user-select:none;pointer-events:none}[tuiSkeleton]._skeleton[data-tui-skeleton]{background:transparent!important}[tuiSkeleton]._skeleton[data-tui-skeleton]:before{content:attr(data-tui-skeleton);background:var(--tui-background-base);font-size:smaller;-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:.25rem}[tuiTheme=dark] [tuiSkeleton]._skeleton,[tuiTheme=dark][tuiSkeleton]._skeleton{filter:contrast(0) brightness(0) invert(1)}\n"] }]
}] });
class TuiSkeleton {
constructor() {
this.el = tuiInjectElement();
this.duration = inject(TUI_ANIMATIONS_SPEED) * TUI_ANIMATIONS_DEFAULT_DURATION * 2;
this.nothing = tuiWithStyles(TuiSkeletonStyles);
this.tuiSkeleton = false;
}
ngOnChanges({ tuiSkeleton }) {
this.animation?.cancel();
if (!tuiSkeleton?.currentValue && !tuiSkeleton?.firstChange) {
this.animation = this.el.animate(FADE, this.duration);
}
}
getPlaceholder(value) {
switch (typeof value) {
case 'number':
return Array.from({ length: value })
.map(() => CHAR_NO_BREAK_SPACE.repeat(getLength()))
.join(' ');
case 'string':
return value;
default:
return null;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiSkeleton, isStandalone: true, selector: "[tuiSkeleton]", inputs: { tuiSkeleton: "tuiSkeleton" }, host: { attributes: { "tuiSkeleton": "" }, properties: { "class._skeleton": "tuiSkeleton", "attr.data-tui-skeleton": "getPlaceholder(tuiSkeleton)" } }, usesOnChanges: true, ngImport: i0 }); }
}
__decorate([
tuiPure
], TuiSkeleton.prototype, "getPlaceholder", null);
export { TuiSkeleton };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSkeleton, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[tuiSkeleton]',
host: {
tuiSkeleton: '',
'[class._skeleton]': 'tuiSkeleton',
'[attr.data-tui-skeleton]': 'getPlaceholder(tuiSkeleton)',
},
}]
}], propDecorators: { tuiSkeleton: [{
type: Input
}], getPlaceholder: [] } });
function getLength() {
return Math.floor(Math.random() * (15 - 5 + 1)) + 5;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b24uZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2RpcmVjdGl2ZXMvc2tlbGV0b24vc2tlbGV0b24uZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFDQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxTQUFTLEVBQ1QsTUFBTSxFQUNOLEtBQUssRUFDTCxpQkFBaUIsR0FDcEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLG1CQUFtQixFQUFDLE1BQU0seUJBQXlCLENBQUM7QUFDNUQsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0seUJBQXlCLENBQUM7QUFDekQsT0FBTyxFQUFDLE9BQU8sRUFBRSxhQUFhLEVBQUMsTUFBTSxtQ0FBbUMsQ0FBQztBQUN6RSxPQUFPLEVBQUMsb0JBQW9CLEVBQUMsTUFBTSx1QkFBdUIsQ0FBQztBQUMzRCxPQUFPLEVBQUMsK0JBQStCLEVBQUMsTUFBTSxvQ0FBb0MsQ0FBQzs7QUFFbkYsTUFBTSxJQUFJLEdBQUcsQ0FBQyxFQUFDLE9BQU8sRUFBRSxJQUFJLEVBQUMsRUFBRSxFQUFDLE9BQU8sRUFBRSxDQUFDLEVBQUMsQ0FBQyxDQUFDO0FBRTdDLE1BVU0saUJBQWlCOytHQUFqQixpQkFBaUI7bUdBQWpCLGlCQUFpQix5SEFSVCxFQUFFOzs0RkFRVixpQkFBaUI7a0JBVnRCLFNBQVM7aUNBQ00sSUFBSSxZQUNOLEVBQUUsaUJBRUcsaUJBQWlCLENBQUMsSUFBSSxtQkFDcEIsdUJBQXVCLENBQUMsTUFBTSxRQUN6Qzt3QkFDRixLQUFLLEVBQUUscUJBQXFCO3FCQUMvQjs7QUFJTCxNQVNhLFdBQVc7SUFUeEI7UUFXcUIsT0FBRSxHQUFHLGdCQUFnQixFQUFFLENBQUM7UUFDeEIsYUFBUSxHQUNyQixNQUFNLENBQUMsb0JBQW9CLENBQUMsR0FBRywrQkFBK0IsR0FBRyxDQUFDLENBQUM7UUFFcEQsWUFBTyxHQUFHLGFBQWEsQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO1FBR3ZELGdCQUFXLEdBQThCLEtBQUssQ0FBQztLQXVCekQ7SUFyQlUsV0FBVyxDQUFDLEVBQUMsV0FBVyxFQUFnQjtRQUMzQyxJQUFJLENBQUMsU0FBUyxFQUFFLE1BQU0sRUFBRSxDQUFDO1FBRXpCLElBQUksQ0FBQyxXQUFXLEVBQUUsWUFBWSxJQUFJLENBQUMsV0FBVyxFQUFFLFdBQVcsRUFBRTtZQUN6RCxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUMsT0FBTyxDQUFDLElBQUksRUFBRSxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7U0FDekQ7SUFDTCxDQUFDO0lBR1MsY0FBYyxDQUFDLEtBQWdDO1FBQ3JELFFBQVEsT0FBTyxLQUFLLEVBQUU7WUFDbEIsS0FBSyxRQUFRO2dCQUNULE9BQU8sS0FBSyxDQUFDLElBQUksQ0FBQyxFQUFDLE1BQU0sRUFBRSxLQUFLLEVBQUMsQ0FBQztxQkFDN0IsR0FBRyxDQUFDLEdBQUcsRUFBRSxDQUFDLG1CQUFtQixDQUFDLE1BQU0sQ0FBQyxTQUFTLEVBQUUsQ0FBQyxDQUFDO3FCQUNsRCxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7WUFDbkIsS0FBSyxRQUFRO2dCQUNULE9BQU8sS0FBSyxDQUFDO1lBQ2pCO2dCQUNJLE9BQU8sSUFBSSxDQUFDO1NBQ25CO0lBQ0wsQ0FBQzsrR0EvQlEsV0FBVzttR0FBWCxXQUFXOztBQW9CVjtJQURULE9BQU87aURBWVA7U0EvQlEsV0FBVzs0RkFBWCxXQUFXO2tCQVR2QixTQUFTO21CQUFDO29CQUNQLFVBQVUsRUFBRSxJQUFJO29CQUNoQixRQUFRLEVBQUUsZUFBZTtvQkFDekIsSUFBSSxFQUFFO3dCQUNGLFdBQVcsRUFBRSxFQUFFO3dCQUNmLG1CQUFtQixFQUFFLGFBQWE7d0JBQ2xDLDBCQUEwQixFQUFFLDZCQUE2QjtxQkFDNUQ7aUJBQ0o7OEJBVVUsV0FBVztzQkFEakIsS0FBSztnQkFZSSxjQUFjO0FBYzVCLFNBQVMsU0FBUztJQUNkLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLEdBQUcsQ0FBQyxFQUFFLEdBQUcsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDO0FBQ3hELENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7T25DaGFuZ2VzLCBTaW1wbGVDaGFuZ2VzfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LFxuICAgIERpcmVjdGl2ZSxcbiAgICBpbmplY3QsXG4gICAgSW5wdXQsXG4gICAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtDSEFSX05PX0JSRUFLX1NQQUNFfSBmcm9tICdAdGFpZ2EtdWkvY2RrL2NvbnN0YW50cyc7XG5pbXBvcnQge3R1aUluamVjdEVsZW1lbnR9IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvZG9tJztcbmltcG9ydCB7dHVpUHVyZSwgdHVpV2l0aFN0eWxlc30gZnJvbSAnQHRhaWdhLXVpL2Nkay91dGlscy9taXNjZWxsYW5lb3VzJztcbmltcG9ydCB7VFVJX0FOSU1BVElPTlNfU1BFRUR9IGZyb20gJ0B0YWlnYS11aS9jb3JlL3Rva2Vucyc7XG5pbXBvcnQge1RVSV9BTklNQVRJT05TX0RFRkFVTFRfRFVSQVRJT059IGZyb20gJ0B0YWlnYS11aS9jb3JlL3V0aWxzL21pc2NlbGxhbmVvdXMnO1xuXG5jb25zdCBGQURFID0gW3tvcGFjaXR5OiAwLjA2fSwge29wYWNpdHk6IDF9XTtcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICB0ZW1wbGF0ZTogJycsXG4gICAgc3R5bGVVcmxzOiBbJy4vc2tlbGV0b24uc3R5bGUubGVzcyddLFxuICAgIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgaG9zdDoge1xuICAgICAgICBjbGFzczogJ3R1aS1za2VsZXRvbi1zdHlsZXMnLFxuICAgIH0sXG59KVxuY2xhc3MgVHVpU2tlbGV0b25TdHlsZXMge31cblxuQERpcmVjdGl2ZSh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ1t0dWlTa2VsZXRvbl0nLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgdHVpU2tlbGV0b246ICcnLFxuICAgICAgICAnW2NsYXNzLl9za2VsZXRvbl0nOiAndHVpU2tlbGV0b24nLFxuICAgICAgICAnW2F0dHIuZGF0YS10dWktc2tlbGV0b25dJzogJ2dldFBsYWNlaG9sZGVyKHR1aVNrZWxldG9uKScsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpU2tlbGV0b24gaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICAgIHByaXZhdGUgYW5pbWF0aW9uPzogQW5pbWF0aW9uO1xuICAgIHByaXZhdGUgcmVhZG9ubHkgZWwgPSB0dWlJbmplY3RFbGVtZW50KCk7XG4gICAgcHJpdmF0ZSByZWFkb25seSBkdXJhdGlvbiA9XG4gICAgICAgIGluamVjdChUVUlfQU5JTUFUSU9OU19TUEVFRCkgKiBUVUlfQU5JTUFUSU9OU19ERUZBVUxUX0RVUkFUSU9OICogMjtcblxuICAgIHByb3RlY3RlZCByZWFkb25seSBub3RoaW5nID0gdHVpV2l0aFN0eWxlcyhUdWlTa2VsZXRvblN0eWxlcyk7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyB0dWlTa2VsZXRvbjogYm9vbGVhbiB8IG51bWJlciB8IHN0cmluZyA9IGZhbHNlO1xuXG4gICAgcHVibGljIG5nT25DaGFuZ2VzKHt0dWlTa2VsZXRvbn06IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5hbmltYXRpb24/LmNhbmNlbCgpO1xuXG4gICAgICAgIGlmICghdHVpU2tlbGV0b24/LmN1cnJlbnRWYWx1ZSAmJiAhdHVpU2tlbGV0b24/LmZpcnN0Q2hhbmdlKSB7XG4gICAgICAgICAgICB0aGlzLmFuaW1hdGlvbiA9IHRoaXMuZWwuYW5pbWF0ZShGQURFLCB0aGlzLmR1cmF0aW9uKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIEB0dWlQdXJlXG4gICAgcHJvdGVjdGVkIGdldFBsYWNlaG9sZGVyKHZhbHVlOiBib29sZWFuIHwgbnVtYmVyIHwgc3RyaW5nKTogc3RyaW5nIHwgbnVsbCB7XG4gICAgICAgIHN3aXRjaCAodHlwZW9mIHZhbHVlKSB7XG4gICAgICAgICAgICBjYXNlICdudW1iZXInOlxuICAgICAgICAgICAgICAgIHJldHVybiBBcnJheS5mcm9tKHtsZW5ndGg6IHZhbHVlfSlcbiAgICAgICAgICAgICAgICAgICAgLm1hcCgoKSA9PiBDSEFSX05PX0JSRUFLX1NQQUNFLnJlcGVhdChnZXRMZW5ndGgoKSkpXG4gICAgICAgICAgICAgICAgICAgIC5qb2luKCcgJyk7XG4gICAgICAgICAgICBjYXNlICdzdHJpbmcnOlxuICAgICAgICAgICAgICAgIHJldHVybiB2YWx1ZTtcbiAgICAgICAgICAgIGRlZmF1bHQ6XG4gICAgICAgICAgICAgICAgcmV0dXJuIG51bGw7XG4gICAgICAgIH1cbiAgICB9XG59XG5cbmZ1bmN0aW9uIGdldExlbmd0aCgpOiBudW1iZXIge1xuICAgIHJldHVybiBNYXRoLmZsb29yKE1hdGgucmFuZG9tKCkgKiAoMTUgLSA1ICsgMSkpICsgNTtcbn1cbiJdfQ==