@alyle/ui/fesm2022/alyle-ui-skeleton.mjs

Minimal Design, a set of components for Angular

import * as i0 from '@angular/core';
import { Input, Directive, NgModule } from '@angular/core';
import * as i1 from '@alyle/ui';
import { keyframesUniqueId, Dir, StyleRenderer } from '@alyle/ui';
import { coerceBooleanProperty } from '@angular/cdk/coercion';

const STYLE_PRIORITY = -0.5;
const STYLES = (theme) => {
    const id = keyframesUniqueId.next();
    const { primary, secondary, tertiary } = theme.background;
    const dir = theme.direction === Dir.ltr ? -1 : 1;
    const lum = primary.default.luminance();
    let one = (lum < .5
        ? tertiary
        : secondary);
    let two = (lum < .5
        ? secondary
        : tertiary);
    one = one.darken(1 * (lum < .5 ? -.5 : 0));
    two = two.darken(.25 * (lum < .5 ? -1 : 1));
    return {
        $name: LySkeleton.и,
        $priority: STYLE_PRIORITY,
        $global: (_className) => `@keyframes ${id}{0%{background-position:${-dir * 200}% 50%;}100%{background-position:${dir * 200}% 50%;}}`,
        root: (_className) => `${_className}{content:'';background:${`linear-gradient(270deg, ${one}, ${two}, ${two}, ${one})`};background-size:400% 400%;animation:${id} 8s ease-in-out infinite;color:transparent;cursor:progress;user-select:none;}`
    };
};
class LySkeleton {
    /** @docs-private */
    static { this.и = 'LySkeleton'; }
    get skeleton() {
        return this._skeleton;
    }
    set skeleton(val) {
        const newVal = coerceBooleanProperty(val);
        this._skeleton = newVal;
        this.sRenderer.toggleClass(this.classes.root, newVal);
    }
    constructor(sRenderer) {
        this.sRenderer = sRenderer;
        /** @docs-private */
        this.classes = this.sRenderer.renderSheet(STYLES);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LySkeleton, deps: [{ token: i1.StyleRenderer }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: LySkeleton, isStandalone: false, selector: "[lySkeleton]", inputs: { skeleton: ["lySkeleton", "skeleton"] }, providers: [
            StyleRenderer
        ], exportAs: ["lySkeleton"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LySkeleton, decorators: [{
            type: Directive,
            args: [{
                    selector: '[lySkeleton]',
                    providers: [
                        StyleRenderer
                    ],
                    exportAs: 'lySkeleton',
                    standalone: false
                }]
        }], ctorParameters: () => [{ type: i1.StyleRenderer }], propDecorators: { skeleton: [{
                type: Input,
                args: ['lySkeleton']
            }] } });

class LySkeletonModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LySkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: LySkeletonModule, declarations: [LySkeleton], exports: [LySkeleton] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LySkeletonModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LySkeletonModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [LySkeleton],
                    exports: [LySkeleton]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { LySkeleton, LySkeletonModule, STYLES };
//# sourceMappingURL=alyle-ui-skeleton.mjs.map