Import
import { ProductItemDebitCardModule } from '@backbase/ui-ang/product-item-debit-card'
Usage
Use the bb-product-item-debit-card-ui component to display debit card information. The component extends the base product item functionality with debit card-specific features and simplified layout focused on card identification.
<!-- Basic product item debit card usage -->
<bb-product-item-debit-card-ui
title="Ricardo Norton's"
productNumber="NL75INGB3400120056">
</bb-product-item-debit-card-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
active |
boolean |
true |
|
favorite |
boolean |
false |
|
favoriteIconColor |
string |
'primary' |
|
highlight |
boolean |
undefined |
|
moneyProtectionStatus |
MoneyProtectionStatusEnum |
undefined |
|
moneyProtectionStatusClasses |
string |
undefined |
|
productDetailsInfo |
Record<string, any> |
undefined |
|
productNumber |
string |
undefined |
|
productNumberFormat |
PaymentCardNumberFormat |
{ length: 16, maskRange: [0, 12], segments: 4 } |
|
title |
string |
undefined |
active
The active input determines whether the card should display an active state indicator.
<!-- Product item without active indicator -->
<bb-product-item-debit-card-ui
title="Debit Card"
productNumber="4322123456789012"
[active]="false">
</bb-product-item-debit-card-ui>
favorite
The favorite input determines whether the card should display a star icon to indicate it's marked as favorite.
<!-- Product item marked as favorite -->
<bb-product-item-debit-card-ui
title="Primary Debit Card"
productNumber="4322123456789012"
[favorite]="true">
</bb-product-item-debit-card-ui>
favoriteIconColor
The favoriteIconColor input sets the color of the favorite star icon when favorite is true.
<!-- Product item with custom favorite icon color -->
<bb-product-item-debit-card-ui
title="Premium Debit Card"
productNumber="4322123456789012"
[favorite]="true"
favoriteIconColor="warning">
</bb-product-item-debit-card-ui>
highlight
The highlight input determines whether the card information should be visually highlighted.
<!-- Product item with highlighted content -->
<bb-product-item-debit-card-ui
title="Featured Debit Card"
productNumber="4322123456789012"
[highlight]="true">
</bb-product-item-debit-card-ui>
moneyProtectionStatus
The moneyProtectionStatus input sets the money protection status indicator. Accepts Yes, No, or NA values from MoneyProtectionStatusEnum.
<!-- Product item with money protection status -->
<bb-product-item-debit-card-ui
title="Protected Debit Card"
productNumber="4322123456789012"
[moneyProtectionStatus]="MoneyProtectionStatusEnum.Yes">
</bb-product-item-debit-card-ui>
moneyProtectionStatusClasses
The moneyProtectionStatusClasses input allows adding custom CSS classes to the money protection status component.
<!-- Product item with custom money protection styling -->
<bb-product-item-debit-card-ui
title="Insured Debit Card"
productNumber="4322123456789012"
[moneyProtectionStatus]="MoneyProtectionStatusEnum.Yes"
moneyProtectionStatusClasses="bg-danger-subtle">
</bb-product-item-debit-card-ui>
productDetailsInfo
The productDetailsInfo input provides additional product information, such as card owners, to be displayed below the main content.
<!-- Product item with product details -->
<bb-product-item-debit-card-ui
title="Joint Debit Card"
productNumber="4322123456789012"
[productDetailsInfo]="{ owners: 'John & Jane Smith' }">
</bb-product-item-debit-card-ui>
productNumber
The productNumber input sets the card number to be displayed, formatted according to productNumberFormat.
<!-- Product item with product number -->
<bb-product-item-debit-card-ui
title="Visa Debit Card"
productNumber="4322123456789012">
</bb-product-item-debit-card-ui>
productNumberFormat
The productNumberFormat input configures how the product number should be formatted and masked.
<!-- Product item with custom number formatting -->
<bb-product-item-debit-card-ui
title="Mastercard Debit"
productNumber="5555444433332222"
[productNumberFormat]="{ length: 16, maskRange: [0, 12], segments: 4 }">
</bb-product-item-debit-card-ui>
title
The title input sets the card name or title to be displayed as the main heading.
<!-- Product item with custom title -->
<bb-product-item-debit-card-ui
title="Business Debit Card"
productNumber="4322123456789012">
</bb-product-item-debit-card-ui>
Custom templates
The component supports custom templates for advanced customization:
- bbCustomProductItemDebitCardTitle: Custom template for the title area
<!-- Product item with custom title template -->
<bb-product-item-debit-card-ui title="Custom Card" productNumber="4322123456789012">
<ng-template bbCustomProductItemDebitCardTitle>
<div class="custom-title">
<strong>{{ title }}</strong>
<div class="custom-subtitle">Premium Account</div>
</div>
</ng-template>
</bb-product-item-debit-card-ui>
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
- Screen reader support: Proper labeling for card numbers and status information
- Semantic structure: Uses appropriate HTML elements and data attributes for card information
- Visual hierarchy: Clear distinction between card title and card number
- Internationalization: Built-in i18n support for labels and screen reader text
- Focus management: Proper focus handling for interactive elements
- Card number formatting: Automatic card number formatting with proper masking for security
The component automatically handles debit card information display with appropriate visual styling and accessibility features, including proper semantic markup for financial information and secure card number display with masking.