ngx-gooey/fesm2022/ngx-gooey.mjs

<p align="center"> <img alt="Preview" src="docs/assets/preview.gif" height="260" width="260"> </p> <p align="center"> <h1 align="center">The gooey effect for Angular</h1> </p> The 'gooey effect' has been made popular by various (amazing) blogposts over

import * as i0 from '@angular/core';
import { Component, Input } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';

class Gooey {
    children;
    className;
    composite = false;
    intensity = 'medium';
    id = 'gooey-angular';
    style;
    get blur() {
        return this.intensity === 'weak'
            ? 8
            : this.intensity === 'strong'
                ? 16
                : 12;
    }
    get alpha() {
        return this.blur * 6;
    }
    get shift() {
        return this.alpha / -2;
    }
    get r() {
        return '1 0 0 0 0';
    }
    get g() {
        return '0 1 0 0 0';
    }
    get b() {
        return '0 0 1 0 0';
    }
    get a() {
        return `0 0 0 ${this.alpha} ${this.shift}`;
    }
    get colorMatrixValues() {
        return `${this.r} ${this.g} ${this.b} ${this.a}`;
    }
    getStyle() {
        return {
            ...(this.style || {}),
            filter: 'url(#' + this.id + ')',
        };
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: Gooey, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: Gooey, isStandalone: true, selector: "ngx-gooey", inputs: { children: "children", className: "className", composite: "composite", intensity: "intensity", id: "id", style: "style" }, ngImport: i0, template: `
    <svg data-testid="svg" style="pointer-events: none; position: absolute;">
      <defs>
        <filter
          colorInterpolationFilters="sRGB"
          data-testid="filter"
          [attr.id]="id"
        >
          <feGaussianBlur
            data-testid="blur"
            [attr.stdDeviation]="blur"
          ></feGaussianBlur>
          <feColorMatrix [attr.values]="colorMatrixValues"></feColorMatrix>
          <feComposite
            *ngIf="composite"
            data-testid="composite"
            in="SourceGraphic"
          ></feComposite>
        </filter>
      </defs>
    </svg>
    <div [ngClass]="className" data-testid="element" [ngStyle]="getStyle()">
      <ng-content></ng-content>
    </div>
  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: Gooey, decorators: [{
            type: Component,
            args: [{
                    selector: 'ngx-gooey',
                    imports: [CommonModule],
                    template: `
    <svg data-testid="svg" style="pointer-events: none; position: absolute;">
      <defs>
        <filter
          colorInterpolationFilters="sRGB"
          data-testid="filter"
          [attr.id]="id"
        >
          <feGaussianBlur
            data-testid="blur"
            [attr.stdDeviation]="blur"
          ></feGaussianBlur>
          <feColorMatrix [attr.values]="colorMatrixValues"></feColorMatrix>
          <feComposite
            *ngIf="composite"
            data-testid="composite"
            in="SourceGraphic"
          ></feComposite>
        </filter>
      </defs>
    </svg>
    <div [ngClass]="className" data-testid="element" [ngStyle]="getStyle()">
      <ng-content></ng-content>
    </div>
  `
                }]
        }], propDecorators: { children: [{
                type: Input
            }], className: [{
                type: Input
            }], composite: [{
                type: Input
            }], intensity: [{
                type: Input
            }], id: [{
                type: Input
            }], style: [{
                type: Input
            }] } });

/*
 * Public API Surface of ngx-gooey
 */

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

export { Gooey };
//# sourceMappingURL=ngx-gooey.mjs.map