BbCard

This library was generated with Angular CLI version 17.0.0. It is an angular component-library (of course)

Components

CardInputComponent CardExpiryComponent OtpInputComponent

Run ng generate component component-name --project bb-card to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project bb-card.

Note: Don't forget to add --project bb-card or else it will be added to the default project in your angular.json file.

Usage

CardInputComponent

Note: it currently only supports Visa, mastercard, AmericanExpress and Rupay, support for more will come in future updates

import {CardInputComponent} from 'bb-card'
Add the following to your build assets

{ "glob": "**/*", "input": "./node_modules/bb-card/assets", "output": "/assets/bb-card/" }

Template

<bb-card-input>\</bb-card-input>

Inputs

name	description
placeholder	The placeholder text for the form control

Outputs

Name	Description
updateCardType	emitted when a card type is detected as the user starts entering the card number

Style customization (css variables)

Name	Description
--color	font color of the component
--padding-right	right padding(This is important because the position of the card branding icons uses this value)
--padding-left	Left padding
--padding-bottom	bottom padding
--padding-top	Top padding

   

CardExpiryComponent

import {CardExpiryComponent} from 'bb-card' import {CardExpiry} from 'bb-card' (Optional)

NB: CardExpiry is just an interface with a month and year property. you can import this to use with a typed form

Template

<bb-card-input>\</bb-card-input>

Inputs

name	description
placeholder	The placeholder text for the form control

Style customization (css variables)

Name	Description	Default
--text-alignment	akin to text-align css property	center
--color	akin to css property: color	#000

   

OtpInputComponent

import {OtpInputComponent} from 'bb-card'

Template

<bb-otp-input>\</bb-otp-input>

Inputs

Name	Description	Default
mode	if mode = 'numeric' fields only accept numbers.	'numeric'
length	number of characters of the otp	6
autofocus	Whether there should be an autofocus on opt input when it renders or not	true

Style customization (css variables)

Name	Description	Default
--color	font color of the component	#000
--cell-border	border properties of cell	2px solid #aaa
--cell-spacing	spacing between cells	8px
--cell-padding	padding on each cell	4px 0