UNPKG

ecp-ui-lib

Version:

37 lines 3.6 kB
/** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ import { Component, Input } from '@angular/core'; export class RippleComponent { constructor() { } /** * @return {?} */ ngOnInit() { } } RippleComponent.decorators = [ { type: Component, args: [{ selector: 'ecp-ripple', template: "<div style=\"position: absolute; \" [style.top]=\"customY\" [style.left]=\"customX\" >\r\n <div class=\"example\">\r\n <div class=\"dot-{{customColor}}\"></div>\r\n </div>\r\n</div>\r\n", styles: [".example{position:relative;width:14px;height:14px}.dot-red:before{content:' ';position:absolute;z-index:2;left:0;top:0;width:14px;height:14px;background-color:#ff4200;border-radius:50%}.dot-red:after{content:' ';position:absolute;z-index:1;width:14px;height:14px;background-color:#ff4200;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,.3) inset;-webkit-animation-name:ripple;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-delay:0s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:normal}.dot-green:before{content:' ';position:absolute;z-index:2;left:0;top:0;width:14px;height:14px;background-color:#396;border-radius:50%}.dot-green:after{content:' ';position:absolute;z-index:1;width:14px;height:14px;background-color:#396;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,.3) inset;-webkit-animation-name:ripple;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-delay:0s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:normal}@-webkit-keyframes ripple{0%{left:7px;top:7px;opcity:75;width:0;height:0}100%{left:-18px;top:-18px;opacity:0;width:50px;height:50px}}@keyframes ripple{0%{left:7px;top:7px;opcity:75;width:0;height:0}100%{left:-18px;top:-18px;opacity:0;width:50px;height:50px}}"] }] } ]; /** @nocollapse */ RippleComponent.ctorParameters = () => []; RippleComponent.propDecorators = { customColor: [{ type: Input }], customX: [{ type: Input }], customY: [{ type: Input }] }; if (false) { /** @type {?} */ RippleComponent.prototype.customColor; /** @type {?} */ RippleComponent.prototype.customX; /** @type {?} */ RippleComponent.prototype.customY; } //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmlwcGxlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL2VjcC11aS1saWIvIiwic291cmNlcyI6WyJsaWIvYW5pbWF0aW9uL3JpcHBsZS9yaXBwbGUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFVLEtBQUssRUFBQyxNQUFNLGVBQWUsQ0FBQztBQU92RCxNQUFNLE9BQU8sZUFBZTtJQUt4QjtJQUNBLENBQUM7Ozs7SUFFRCxRQUFRO0lBQ1IsQ0FBQzs7O1lBZEosU0FBUyxTQUFDO2dCQUNQLFFBQVEsRUFBRSxZQUFZO2dCQUN0QiwyTUFBc0M7O2FBRXpDOzs7OzswQkFFSSxLQUFLO3NCQUNMLEtBQUs7c0JBQ0wsS0FBSzs7OztJQUZOLHNDQUFxQjs7SUFDckIsa0NBQWlCOztJQUNqQixrQ0FBaUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgT25Jbml0LCBJbnB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnZWNwLXJpcHBsZScsXHJcbiAgICB0ZW1wbGF0ZVVybDogJy4vcmlwcGxlLmNvbXBvbmVudC5odG1sJyxcclxuICAgIHN0eWxlVXJsczogWycuL3JpcHBsZS5jb21wb25lbnQuY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIFJpcHBsZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgICBASW5wdXQoKSBjdXN0b21Db2xvcjtcclxuICAgIEBJbnB1dCgpIGN1c3RvbVg7XHJcbiAgICBASW5wdXQoKSBjdXN0b21ZO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKCkge1xyXG4gICAgfVxyXG5cclxuICAgIG5nT25Jbml0KCkge1xyXG4gICAgfVxyXG5cclxufVxyXG4iXX0=