angular-hover-gradient-button
Version:
The Angular Hover Gradient Button is a customizable, easy-to-use Angular button with a hover gradient effect on hover.
66 lines (60 loc) • 5.97 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, ViewChild, HostBinding, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
class AngularHoverGradientButtonService {
constructor() { }
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: AngularHoverGradientButtonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: AngularHoverGradientButtonService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: AngularHoverGradientButtonService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
class AngularHoverGradientButton {
get bg() {
return this.backgroundColor;
}
get hover() {
return this.hoverColor;
}
constructor() {
this.backgroundColor = '#1e3799';
this.hoverColor = '#78e08f';
}
onMouseMove(event) {
const rect = this.button.nativeElement.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
this.button.nativeElement.style.setProperty('--x', `${x}px`);
this.button.nativeElement.style.setProperty('--y', `${y}px`);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: AngularHoverGradientButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: AngularHoverGradientButton, isStandalone: true, selector: "angular-hover-gradient-button", inputs: { backgroundColor: "backgroundColor", hoverColor: "hoverColor" }, host: { properties: { "style.--background-color": "this.bg", "style.--hover-color": "this.hover" } }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: "<button class=\"button\" (mousemove)=\"onMouseMove($event)\" #button>\n <div class=\"icon-container\">\n <ng-content select=\"[slot='left']\"></ng-content>\n </div>\n <span><ng-content></ng-content></span>\n <div class=\"icon-container\">\n <ng-content select=\"[slot='right']\"></ng-content>\n </div>\n</button>\n", styles: [":root{--button-color: white;--button-padding: 1em;--button-border-radius: 5px;--button-border: none;--button-font-size: 1.2em}button{display:inline-flex;align-items:center;position:relative;gap:10px;width:auto;appearance:none;background-color:var(--background-color, #5f27cd);padding:var(--button-padding, 1em);border:var(--button-border, none);color:var(--button-color, white);font-size:var(--button-font-size, 1.2em);cursor:pointer;outline:none;overflow:hidden;border-radius:var(--button-border-radius, 5px);z-index:1;justify-content:center;gap:20px}.icon-container{display:flex;align-items:center;z-index:3}button span{display:inline-flex;align-items:center;pointer-events:none;z-index:3}button:before{--size: 0;content:\"\";position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);background:radial-gradient(circle closest-side,var(--hover-color),transparent);transform:translate(-50%,-50%);transition:width .2s ease,height .2s ease;z-index:0}button:hover:before{--size: 400px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: AngularHoverGradientButton, decorators: [{
type: Component,
args: [{ selector: 'angular-hover-gradient-button', standalone: true, imports: [CommonModule], template: "<button class=\"button\" (mousemove)=\"onMouseMove($event)\" #button>\n <div class=\"icon-container\">\n <ng-content select=\"[slot='left']\"></ng-content>\n </div>\n <span><ng-content></ng-content></span>\n <div class=\"icon-container\">\n <ng-content select=\"[slot='right']\"></ng-content>\n </div>\n</button>\n", styles: [":root{--button-color: white;--button-padding: 1em;--button-border-radius: 5px;--button-border: none;--button-font-size: 1.2em}button{display:inline-flex;align-items:center;position:relative;gap:10px;width:auto;appearance:none;background-color:var(--background-color, #5f27cd);padding:var(--button-padding, 1em);border:var(--button-border, none);color:var(--button-color, white);font-size:var(--button-font-size, 1.2em);cursor:pointer;outline:none;overflow:hidden;border-radius:var(--button-border-radius, 5px);z-index:1;justify-content:center;gap:20px}.icon-container{display:flex;align-items:center;z-index:3}button span{display:inline-flex;align-items:center;pointer-events:none;z-index:3}button:before{--size: 0;content:\"\";position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);background:radial-gradient(circle closest-side,var(--hover-color),transparent);transform:translate(-50%,-50%);transition:width .2s ease,height .2s ease;z-index:0}button:hover:before{--size: 400px}\n"] }]
}], ctorParameters: () => [], propDecorators: { button: [{
type: ViewChild,
args: ['button']
}], bg: [{
type: HostBinding,
args: ['style.--background-color']
}], hover: [{
type: HostBinding,
args: ['style.--hover-color']
}], backgroundColor: [{
type: Input
}], hoverColor: [{
type: Input
}] } });
/*
* Public API Surface of angular-hover-gradient-button
*/
/**
* Generated bundle index. Do not edit.
*/
export { AngularHoverGradientButton, AngularHoverGradientButtonService };
//# sourceMappingURL=angular-hover-gradient-button.mjs.map