ng-cw-v12

Version:
Angular UI component library
www.chenxiaopa.cn/ng-cw-docs
127 lines (118 loc) • 7.08 kB
JavaScript
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :
    typeof define === 'function' && define.amd ? define('ng-cw-v12/ripple', ['exports', '@angular/core'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"].ripple = {}), global.ng.core));
})(this, (function (exports, i0) { 'use strict';

    function _interopNamespace(e) {
        if (e && e.__esModule) return e;
        var n = Object.create(null);
        if (e) {
            Object.keys(e).forEach(function (k) {
                if (k !== 'default') {
                    var d = Object.getOwnPropertyDescriptor(e, k);
                    Object.defineProperty(n, k, d.get ? d : {
                        enumerable: true,
                        get: function () { return e[k]; }
                    });
                }
            });
        }
        n["default"] = e;
        return Object.freeze(n);
    }

    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);

    var RippleDirective = /** @class */ (function () {
        function RippleDirective(el, renderer) {
            this.el = el;
            this.renderer = renderer;
            this.ncColor = 'rgba(255, 255, 255, 0.5)';
            this.ncDuration = 600; // ms
        }
        RippleDirective.prototype.ngOnInit = function () {
            this.createRippleContainer();
        };
        RippleDirective.prototype.createRippleContainer = function () {
            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');
            var 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);
        };
        RippleDirective.prototype.onClick = function (event) {
            var _this = this;
            var ripple = this.renderer.createElement('span');
            var diameter = Math.max(this.el.nativeElement.clientWidth, this.el.nativeElement.clientHeight);
            var 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');
            var rect = this.el.nativeElement.getBoundingClientRect();
            var x = event.clientX - rect.left - radius;
            var 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(function () {
                _this.renderer.setStyle(ripple, 'transform', 'scale(2)');
                _this.renderer.setStyle(ripple, 'opacity', '0');
                setTimeout(function () { return _this.renderer.removeChild(_this.rippleContainer, ripple); }, _this.ncDuration);
            }, 0);
        };
        return RippleDirective;
    }());
    RippleDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: RippleDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
    RippleDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: RippleDirective, decorators: [{
                type: i0.Directive,
                args: [{
                        selector: '[ncRipple]'
                    }]
            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { ncColor: [{
                    type: i0.Input
                }], ncDuration: [{
                    type: i0.Input
                }], onClick: [{
                    type: i0.HostListener,
                    args: ['click', ['$event']]
                }] } });

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

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

    exports.NcRippleModule = NcRippleModule;
    exports.RippleDirective = RippleDirective;

    Object.defineProperty(exports, '__esModule', { value: true });

}));
//# sourceMappingURL=ng-cw-v12-ripple.umd.js.map