ng-cw-v12/fesm2015/ng-cw-v12-ripple.js

Angular UI component library

import * as i0 from '@angular/core';
import { Directive, Input, HostListener, NgModule } from '@angular/core';

class RippleDirective {
    constructor(el, renderer) {
        this.el = el;
        this.renderer = renderer;
        this.ncColor = 'rgba(255, 255, 255, 0.5)';
        this.ncDuration = 600; // ms
    }
    ngOnInit() {
        this.createRippleContainer();
    }
    createRippleContainer() {
        this.rippleContainer = this.renderer.createElement('div');
        this.renderer.addClass(this.rippleContainer, 'ripple-container');
        this.renderer.setStyle(this.rippleContainer, 'position', 'absolute');
        this.renderer.setStyle(this.rippleContainer, 'inset', '0');
        this.renderer.setStyle(this.rippleContainer, 'borderRadius', 'inherit');
        this.renderer.setStyle(this.rippleContainer, 'pointer-events', 'none');
        this.renderer.setStyle(this.rippleContainer, 'overflow', 'hidden');
        const elementPosition = this.el.nativeElement.style.position;
        if (!elementPosition || elementPosition === 'static') {
            this.renderer.setStyle(this.el.nativeElement, 'position', 'relative');
        }
        this.renderer.appendChild(this.el.nativeElement, this.rippleContainer);
    }
    onClick(event) {
        const ripple = this.renderer.createElement('span');
        const diameter = Math.max(this.el.nativeElement.clientWidth, this.el.nativeElement.clientHeight);
        const radius = diameter / 2;
        this.renderer.setStyle(ripple, 'position', 'absolute');
        this.renderer.setStyle(ripple, 'border-radius', '50%');
        this.renderer.setStyle(ripple, 'pointer-events', 'none');
        this.renderer.setStyle(ripple, 'width', `${diameter}px`);
        this.renderer.setStyle(ripple, 'height', `${diameter}px`);
        this.renderer.setStyle(ripple, 'transform', 'scale(0)');
        this.renderer.setStyle(ripple, 'transition', `all ${this.ncDuration}ms`);
        this.renderer.setStyle(ripple, 'background-color', this.ncColor);
        this.renderer.setStyle(ripple, 'opacity', '1');
        const rect = this.el.nativeElement.getBoundingClientRect();
        const x = event.clientX - rect.left - radius;
        const y = event.clientY - rect.top - radius;
        this.renderer.setStyle(ripple, 'left', `${x}px`);
        this.renderer.setStyle(ripple, 'top', `${y}px`);
        this.renderer.appendChild(this.rippleContainer, ripple);
        setTimeout(() => {
            this.renderer.setStyle(ripple, 'transform', 'scale(2)');
            this.renderer.setStyle(ripple, 'opacity', '0');
            setTimeout(() => this.renderer.removeChild(this.rippleContainer, ripple), this.ncDuration);
        }, 0);
    }
}
RippleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: RippleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
RippleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.5", type: RippleDirective, selector: "[ncRipple]", inputs: { ncColor: "ncColor", ncDuration: "ncDuration" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: RippleDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ncRipple]'
                }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { ncColor: [{
                type: Input
            }], ncDuration: [{
                type: Input
            }], onClick: [{
                type: HostListener,
                args: ['click', ['$event']]
            }] } });

class NcRippleModule {
}
NcRippleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcRippleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcRippleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcRippleModule, declarations: [RippleDirective], exports: [RippleDirective] });
NcRippleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcRippleModule, imports: [[]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcRippleModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        RippleDirective
                    ],
                    imports: [],
                    exports: [
                        RippleDirective
                    ]
                }]
        }] });

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

export { NcRippleModule, RippleDirective };
//# sourceMappingURL=ng-cw-v12-ripple.js.map