59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
// Importieren Sie HostBinding
|
|
import { Component, Input, ElementRef, Renderer2, HostListener, HostBinding } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { IconComponent } from '../icon/icon.component';
|
|
|
|
type ButtonType = 'primary' | 'secondary' | 'stroked' | 'flat' | 'icon' | 'icon-danger';
|
|
|
|
@Component({
|
|
selector: 'app-button',
|
|
standalone: true,
|
|
imports: [CommonModule, IconComponent],
|
|
templateUrl: './button.component.html',
|
|
styleUrl: './button.component.css'
|
|
})
|
|
export class ButtonComponent {
|
|
@Input() buttonType: ButtonType = 'primary';
|
|
@Input() submitType: 'button' | 'submit' = 'button';
|
|
@Input() disabled = false;
|
|
@Input() fullWidth = false;
|
|
@Input() iconName: string | null = null;
|
|
@Input() svgColor: string | null = null;
|
|
|
|
// Der Tooltip-Input
|
|
@Input() tooltip: string | null = null;
|
|
|
|
// HIER IST DIE HINZUGEFÜGTE LOGIK:
|
|
// HostBinding verknüpft die `tooltip`-Eigenschaft mit dem `data-tooltip`-Attribut
|
|
// des <app-button>-Host-Elements.
|
|
@HostBinding('attr.data-tooltip') get tooltipAttr() {
|
|
return this.tooltip;
|
|
}
|
|
|
|
constructor(private el: ElementRef, private renderer: Renderer2) {}
|
|
|
|
@HostListener('click', ['$event'])
|
|
onClick(event: MouseEvent) {
|
|
if (this.disabled) {
|
|
return;
|
|
}
|
|
|
|
const button = this.el.nativeElement.querySelector('.btn');
|
|
if (!button) return;
|
|
|
|
// --- Ihre Ripple-Logik bleibt hier unverändert ---
|
|
const existingRipple = button.querySelector('.ripple');
|
|
if (existingRipple) {
|
|
existingRipple.remove();
|
|
}
|
|
const circle = this.renderer.createElement('span');
|
|
const diameter = Math.max(button.clientWidth, button.clientHeight);
|
|
const radius = diameter / 2;
|
|
this.renderer.setStyle(circle, 'width', `${diameter}px`);
|
|
this.renderer.setStyle(circle, 'height', `${diameter}px`);
|
|
this.renderer.setStyle(circle, 'left', `${event.clientX - button.offsetLeft - radius}px`);
|
|
this.renderer.setStyle(circle, 'top', `${event.clientY - button.offsetTop - radius}px`);
|
|
this.renderer.addClass(circle, 'ripple');
|
|
this.renderer.appendChild(button, circle);
|
|
}
|
|
} |