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

data display

Browse Source
This commit is contained in:
Tizian.Breuch
2025-09-10 13:03:13 +02:00
parent 37bafcddf0
commit df7e249a62
18 changed files with 474 additions and 1486 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/shared/components/ui/button/button.component.html
View File

@@ -10,6 +10,6 @@
[class.btn-icon-danger]="buttonType === 'icon-danger'"
[class.btn-full-width]="fullWidth"
>
<app-icon *ngIf="iconName" [name]="iconName" [svgColor]="svgColor"></app-icon>
<app-icon *ngIf="iconName" [iconName]="iconName" [svgColor]="svgColor"></app-icon>
<ng-content></ng-content>
</button>

20
src/app/shared/components/ui/card/card.component.css
View File

@@ -0,0 +1,20 @@
.card {
background-color: var(--color-surface);
border-radius: var(--border-radius-md);
box-shadow: var(--box-shadow-sm);
border: 1px solid var(--color-border);
transition: all var(--transition-speed);
}
.card:hover {
transform: translateY(-5px);
box-shadow: var(--box-shadow-md);
}
.card-header {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--color-border);
font-size: 1.1rem;
font-weight: 700;
}
.card-body {
padding: 1.5rem;
}

11
src/app/shared/components/ui/icon/icon.component.ts
View File

@@ -27,9 +27,8 @@ const ICON_SVG_KEY_PREFIX = 'icon-svg-';
styleUrl: './icon.component.css'
})
export class IconComponent implements OnChanges {
@Input() name: string = '';
// --- HIER IST DIE KORREKTUR: Umbenennung zu svgColor ---
@Input() svgColor: string | null = null; // Farbe des SVG-Inhalts (Füllung/Linie)
@Input() iconName: string = '';
@Input() svgColor: string | null = null;
constructor(
private http: HttpClient,
@@ -41,13 +40,13 @@ export class IconComponent implements OnChanges {
ngOnChanges(changes: SimpleChanges): void {
// Überprüfe Änderungen an 'name' ODER 'svgColor'
if ((changes['name'] && this.name) || (changes['svgColor'] && this.name)) {
if ((changes['name'] && this.iconName) || (changes['svgColor'] && this.iconName)) {
this.loadSvg();
}
}
private loadSvg(): void {
const svgStateKey: StateKey<string> = makeStateKey<string>(ICON_SVG_KEY_PREFIX + this.name);
const svgStateKey: StateKey<string> = makeStateKey<string>(ICON_SVG_KEY_PREFIX + this.iconName);
const cachedSvg = this.transferState.get(svgStateKey, null);
this.el.nativeElement.innerHTML = '';
@@ -55,7 +54,7 @@ export class IconComponent implements OnChanges {
if (cachedSvg) {
this.setSvg(cachedSvg);
} else {
this.http.get(`icons/${this.name}.svg`, { responseType: 'text' })
this.http.get(`icons/${this.iconName}.svg`, { responseType: 'text' })
.pipe(
tap(svg => {
if (!isPlatformBrowser(this.platformId)) {