mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-28 22:42:11 +01:00
8b852cbd7a
fix(shared-barcode, crm-customer-card): improve barcode rendering with transparent SVG background Enhance barcode component flexibility by separating container and SVG background colors. The SVG barcode now defaults to transparent background while maintaining container background control, enabling better integration with various card designs. Changes: - Add separate svgBackground input for SVG element (default: transparent) - Keep background input for container styling (default: #ffffff) - Add containerWidth and containerHeight inputs for flexible sizing - Update customer card to remove explicit white background on barcode - Add opacity styling for inactive customer cards - Enhance test coverage for new background and sizing inputs The separation of concerns allows the barcode to adapt to parent container backgrounds while maintaining consistent rendering across different contexts. Ref: #5498
53 lines
1.6 KiB
HTML
53 lines
1.6 KiB
HTML
<!-- Card container: 337×213px, rounded-2xl, shadow -->
|
||
<div
|
||
class="relative flex h-[14.8125rem] w-[21.0625rem] flex-col"
|
||
[class.opacity-40]="!card().isActive"
|
||
[attr.data-what]="'customer-card'"
|
||
[attr.data-which]="card().code"
|
||
>
|
||
<!-- Black header section: card type + number + barcode -->
|
||
<div
|
||
class="flex flex-col items-center gap-[0.62rem] bg-isa-black px-0 pb-4 pt-[0.5rem]"
|
||
>
|
||
<div>
|
||
<!-- Card type label (grey) -->
|
||
<div class="isa-text-body-2-bold text-center text-isa-neutral-500">
|
||
Kundenkarte Nr.:
|
||
</div>
|
||
|
||
<!-- Card number (white, large) -->
|
||
<div class="isa-text-subtitle-1-bold text-center text-isa-white">
|
||
{{ card().code }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Barcode -->
|
||
<shared-barcode
|
||
[value]="card().code"
|
||
[displayValue]="false"
|
||
[height]="barcodeHeight"
|
||
[width]="barcodeWidth"
|
||
[margin]="barcodeMargin"
|
||
[format]="'CODE128'"
|
||
[attr.data-what]="'card-barcode'"
|
||
[attr.data-which]="card().code"
|
||
class="rounded-[0.25rem] overflow-hidden"
|
||
/>
|
||
</div>
|
||
|
||
<!-- White footer section: customer name -->
|
||
<div
|
||
class="min-h-[3.59rem] bg-isa-white isa-text-body-2-bold text-isa-black flex flex-col items-start justify-center"
|
||
>
|
||
<div class="isa-text-body-2-bold px-3">
|
||
{{ card().firstName }} {{ card().lastName }}
|
||
</div>
|
||
|
||
<crm-lock-customer-card
|
||
[isActive]="card().isActive"
|
||
[cardCode]="card().code"
|
||
(cardLocked)="cardLocked.emit()"
|
||
></crm-lock-customer-card>
|
||
</div>
|
||
</div>
|