From 7a7974feb8da5353d72232010a0276c693defea1 Mon Sep 17 00:00:00 2001
From: Albert <Albert.Bruns@mgm-tp.com>
Date: Wed, 9 Apr 2025 15:20:34 +0200
Subject: [PATCH] OZG-7773 mailbox icon with batch
---
.../mailbox-icon/mailbox-icon.component.ts | 47 +++++++++++--------
1 file changed, 28 insertions(+), 19 deletions(-)
diff --git a/alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.component.ts
index 87f8cf2610..20aa82d64c 100644
--- a/alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.component.ts
+++ b/alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.component.ts
@@ -30,29 +30,38 @@ import { IconVariants, iconVariants } from '../iconVariants';
selector: 'ods-mailbox-icon',
standalone: true,
imports: [NgClass],
- template: `<svg
- viewBox="0 0 24 24"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- [ngClass]="twMerge(iconVariants({ size }), 'stroke-text', class)"
- >
- <path
- d="M20 4H4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H20C21.1046 20 22 19.1046 22 18V6C22 4.89543 21.1046 4 20 4Z"
- stroke-width="2"
- stroke-linecap="round"
- stroke-linejoin="round"
- />
- <path
- d="M22 7L13.03 12.7C12.7213 12.8934 12.3643 12.996 12 12.996C11.6357 12.996 11.2787 12.8934 10.97 12.7L2 7"
- stroke-width="2"
- stroke-linecap="round"
- stroke-linejoin="round"
- />
- </svg>`,
+ template: ` <div class="relative inline-block">
+ <svg
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ [ngClass]="twMerge(iconVariants({ size }), 'stroke-text', class)"
+ >
+ <path
+ d="M20 4H4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H20C21.1046 20 22 19.1046 22 18V6C22 4.89543 21.1046 4 20 4Z"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ <path
+ d="M22 7L13.03 12.7C12.7213 12.8934 12.3643 12.996 12 12.996C11.6357 12.996 11.2787 12.8934 10.97 12.7L2 7"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+ @if (showBadge) {
+ <div
+ [ngClass]="twMerge('absolute right-0.5 top-1 h-2.5 w-2.5 -translate-y-1/2 translate-x-1/2 rounded-full', badgeClass)"
+ ></div>
+ }
+ </div>`,
})
export class MailboxIconComponent {
@Input() size: IconVariants['size'] = 'medium';
@Input() class: string = undefined;
+ @Input() showBadge: boolean = false;
+ @Input() badgeClass: string = undefined;
readonly iconVariants = iconVariants;
readonly twMerge = twMerge;
--
GitLab