@omnedia/ngx-shiny-text/fesm2022/omnedia-ngx-shiny-text.mjs

A simple component library to animate text.

import * as i1 from '@angular/common';
import { isPlatformBrowser, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { signal, PLATFORM_ID, Input, ViewChild, Inject, ChangeDetectionStrategy, Component } from '@angular/core';

class NgxShinyTextComponent {
    platformId;
    shinyTextRef;
    styleClass;
    set shimmerColor(color) {
        this.style["--shimmer-color"] = color;
    }
    set textColor(color) {
        this.style["--text-color"] = color;
    }
    set shimmerWidth(width) {
        this.style["--shimmer-width"] = width;
    }
    text;
    style = {};
    isInView = signal(false);
    intersectionObserver;
    constructor(platformId) {
        this.platformId = platformId;
    }
    ngAfterViewInit() {
        if (!this.text) {
            throw new Error("om-shiny-text: no text was given to the component!");
        }
        if (isPlatformBrowser(this.platformId)) {
            this.intersectionObserver = new IntersectionObserver(([entry]) => {
                this.isInView.set(entry.isIntersecting);
            });
            this.intersectionObserver.observe(this.shinyTextRef.nativeElement);
        }
    }
    ngOnDestroy() {
        if (this.intersectionObserver) {
            this.intersectionObserver.disconnect();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgxShinyTextComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: NgxShinyTextComponent, isStandalone: true, selector: "om-shiny-text", inputs: { styleClass: "styleClass", shimmerColor: "shimmerColor", textColor: "textColor", shimmerWidth: "shimmerWidth", text: "text" }, viewQueries: [{ propertyName: "shinyTextRef", first: true, predicate: ["OmShinyTextWrapper"], descendants: true }], ngImport: i0, template: "<span class=\"om-shiny-text\" [ngStyle]=\"style\" [ngClass]=\"styleClass\" [class.paused]=\"!isInView()\" #OmShinyTextWrapper>\r\n  {{ text }}\r\n</span>\r\n", styles: [".om-shiny-text{--shimmer-width: 100px;--shimmer-color: rgba(0, 0, 0, .8);--text-color: rgba(82, 82, 82, .7);display:inline-flex;position:relative;background:linear-gradient(90deg,transparent,var(--shimmer-color) 50%,transparent);background-size:var(--shimmer-width) 100%;background-position:0 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:var(--text-color);animation:om-shimmer 8s infinite}.om-shiny-text.paused{animation-play-state:paused}@keyframes om-shimmer{0%,90%,to{background-position:calc(-100% - var(--shimmer-width)) 0}30%,60%{background-position:calc(100% + var(--shimmer-width)) 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgxShinyTextComponent, decorators: [{
            type: Component,
            args: [{ selector: "om-shiny-text", standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"om-shiny-text\" [ngStyle]=\"style\" [ngClass]=\"styleClass\" [class.paused]=\"!isInView()\" #OmShinyTextWrapper>\r\n  {{ text }}\r\n</span>\r\n", styles: [".om-shiny-text{--shimmer-width: 100px;--shimmer-color: rgba(0, 0, 0, .8);--text-color: rgba(82, 82, 82, .7);display:inline-flex;position:relative;background:linear-gradient(90deg,transparent,var(--shimmer-color) 50%,transparent);background-size:var(--shimmer-width) 100%;background-position:0 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:var(--text-color);animation:om-shimmer 8s infinite}.om-shiny-text.paused{animation-play-state:paused}@keyframes om-shimmer{0%,90%,to{background-position:calc(-100% - var(--shimmer-width)) 0}30%,60%{background-position:calc(100% + var(--shimmer-width)) 0}}\n"] }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [PLATFORM_ID]
                }] }], propDecorators: { shinyTextRef: [{
                type: ViewChild,
                args: ["OmShinyTextWrapper"]
            }], styleClass: [{
                type: Input,
                args: ["styleClass"]
            }], shimmerColor: [{
                type: Input,
                args: ["shimmerColor"]
            }], textColor: [{
                type: Input,
                args: ["textColor"]
            }], shimmerWidth: [{
                type: Input,
                args: ["shimmerWidth"]
            }], text: [{
                type: Input,
                args: ["text"]
            }] } });

/*
 * Public API Surface of ngx-shiny-text
 */

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

export { NgxShinyTextComponent };
//# sourceMappingURL=omnedia-ngx-shiny-text.mjs.map