admin/ShopSolution-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styles

Browse Source
This commit is contained in:
Tizian.Breuch
2025-09-09 17:20:21 +02:00
parent b97fc21024
commit 6d9b8bc96b
18 changed files with 310 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/shared/components/ui/button/button.component.ts
View File

@@ -1,8 +1,9 @@
import { Component, Input, ElementRef, Renderer2, HostListener } from '@angular/core';
// 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 ButtonColor = 'primary' | 'secondary' | 'stroked' | 'flat' | 'icon' | 'icon-danger';
type ButtonType = 'primary' | 'secondary' | 'stroked' | 'flat' | 'icon' | 'icon-danger';
@Component({
selector: 'app-button',
@@ -12,17 +13,25 @@ type ButtonColor = 'primary' | 'secondary' | 'stroked' | 'flat' | 'icon' | 'icon
styleUrl: './button.component.css'
})
export class ButtonComponent {
@Input() buttonType: ButtonColor = 'primary';
@Input() buttonType: ButtonType = 'primary';
@Input() submitType: 'button' | 'submit' = 'button';
@Input() disabled = false;
@Input() fullWidth = false;
@Input() tooltip: string | null = null;
@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 fängt Klick-Events direkt auf dem Host-Element (<app-button>) ab
@HostListener('click', ['$event'])
onClick(event: MouseEvent) {
if (this.disabled) {
@@ -32,23 +41,19 @@ export class ButtonComponent {
const button = this.el.nativeElement.querySelector('.btn');
if (!button) return;
// Entferne alte Ripple-Effekte
// --- Ihre Ripple-Logik bleibt hier unverändert ---
const existingRipple = button.querySelector('.ripple');
if (existingRipple) {
existingRipple.remove();
}
// Erzeuge den Ripple-Effekt
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);
}
}