A comprehensive Angular UI component library featuring a rich collection of customizable, accessible components. Built with modern Angular standards, this library provides everything you need to build beautiful and functional user interfaces.
npm install @brickclay-org/uingModel and reactive forms. Features three size variants (small, medium, large), disabled state, and full accessibility support.
bash
npm i @brickclay-org/ui@0.0.26
`
$3
This library requires Angular 20.3.0 or higher:
`bash
npm install @angular/common@^20.3.0 @angular/core@^20.3.0 moment
`
$3
After installing the library, you need to configure your angular.json to include the library's assets (icons, etc.). Add the following to your project's assets array in the build options:
`json
{
"projects": {
"your-app-name": {
"architect": {
"build": {
"options": {
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "*/",
"input": "node_modules/@brickclay-org/ui/assets",
"output": "/assets/brickclay-lib/"
}
]
}
}
}
}
}
}
`
This configuration copies the library's assets (SVG icons, etc.) to your application's output folder during build. Without this, the component icons will not display correctly.
Quick Start
$3
`typescript
import { Component } from '@angular/core';
import { BkCustomCalendar, CalendarSelection } from '@brickclay/ui';
@Component({
standalone: true,
selector: 'app-my-component',
imports: [BkCustomCalendar],
template:
,
})
export class MyComponent {
onDateSelected(selection: CalendarSelection) {
console.log('Selected:', selection);
}
}
`
$3
`typescript
import { NgModule } from '@angular/core';
import { CalendarModule } from '@brickclay/ui';
@NgModule({
imports: [CalendarModule],
// ...
})
export class AppModule {}
`
📅 Calendar
The calendar components provide a complete solution for date and time selection in your Angular applications. All components are standalone and can be imported individually or as part of the CalendarModule.
$3
1. BkCustomCalendar (brickclay-custom-calendar) - Main calendar component with support for single date, date range, and multiple date selection
2. BkScheduledDatePicker (brickclay-scheduled-date-picker) - Advanced scheduling component with time configuration for events
3. BkTimePicker (brickclay-time-picker) - Standalone time selection component with scrollable pickers
$3
A versatile calendar component that supports single date, date range, and multiple date selection modes.
#### Basic Example
`typescript
import { BkCustomCalendar, CalendarSelection } from '@brickclay/ui';
@Component({
template:
,
})
export class MyComponent {
onDateSelected(selection: CalendarSelection) {
console.log('Start:', selection.startDate);
console.log('End:', selection.endDate);
}
}
`
#### Component Selector
#### Inputs
| Input | Type | Default | Description |
| -------------------- | ------------------------------- | --------------------- | ------------------------------------------------- |
| enableTimepicker | boolean | false | Enable time selection |
| autoApply | boolean | false | Automatically apply selection when date is chosen |
| closeOnAutoApply | boolean | false | Close calendar after auto-apply |
| showCancel | boolean | true | Show cancel button in footer |
| singleDatePicker | boolean | false | Enable single date selection mode |
| dualCalendar | boolean | false | Show two calendars side-by-side |
| showRanges | boolean | true | Show predefined date range buttons |
| multiDateSelection | boolean | false | Enable multiple date selection |
| inline | boolean | false | Always show calendar (no dropdown) |
| minDate | Date | undefined | Minimum selectable date |
| maxDate | Date | undefined | Maximum selectable date |
| placeholder | string | 'Select date range' | Input placeholder text |
| opens | 'left' \| 'right' \| 'center' | 'left' | Dropdown alignment |
| drop | 'up' \| 'down' | 'down' | Dropdown direction |
| displayFormat | string | 'MM/DD/YYYY' | Date display format (moment format) |
| customRanges | Record | undefined | Custom predefined ranges |
| selectedValue | CalendarSelection \| null | null | Pre-selected date(s) |
| isDisplayCrossIcon | boolean | true | Show/hide clear button |
#### Outputs
| Output | Type | Description |
| ---------- | --------------------------------- | ----------------------------------- |
| selected | EventEmitter | Emitted when date selection changes |
| opened | EventEmitter | Emitted when calendar opens |
| closed | EventEmitter | Emitted when calendar closes |
#### Usage Examples
Single Date Selection:
`typescript
[placeholder]="'Select a date'"
(selected)="onDateSelected($event)">
Date Range with Time Picker:
`typescript
[enableTimepicker]="true"
[enableSeconds]="true"
(selected)="onRangeSelected($event)">
`
Multiple Date Selection:
`typescript
[inline]="true"
(selected)="onMultipleDatesSelected($event)">
`
Inline Calendar:
`typescript
[dualCalendar]="false"
[showRanges]="false"
(selected)="onDateSelected($event)">
`
Custom Date Ranges:
`typescript
import { CalendarRange } from '@brickclay/ui';
const customRanges: Record = {
'Last Week': {
start: new Date(2024, 0, 1),
end: new Date(2024, 0, 7)
},
'This Quarter': {
start: new Date(2024, 0, 1),
end: new Date(2024, 2, 31)
}
};
[showRanges]="true"
(selected)="onDateSelected($event)">
`
Date Constraints:
`typescript
[maxDate]="new Date(2024, 11, 31)"
(selected)="onDateSelected($event)">
`
Pre-selected Values:
`typescript
export class MyComponent {
selectedValue: CalendarSelection = {
startDate: new Date(2024, 5, 15),
endDate: new Date(2024, 5, 20)
};
onDateChange() {
this.selectedValue = {
startDate: new Date(),
endDate: new Date()
};
}
}
(selected)="onDateSelected($event)">
`
$3
A comprehensive date and time scheduling component with three modes: single date, multiple dates, and date range, each with time configuration.
#### Basic Example
`typescript
import { BkScheduledDatePicker, ScheduledDateSelection } from '@brickclay/ui';
@Component({
template:
,
})
export class MyComponent {
onScheduled(selection: ScheduledDateSelection) {
console.log('Mode:', selection.mode);
if (selection.mode === 'single' && selection.singleDate) {
console.log('Start:', selection.singleDate.startDate);
console.log('End:', selection.singleDate.endDate);
console.log('All Day:', selection.singleDate.allDay);
}
}
}
`
#### Component Selector
#### Inputs
| Input | Type | Default | Description |
| --------------- | ---------- | ------- | -------------------------------- |
| timeFormat | 12 \| 24 | 12 | Time format (12-hour or 24-hour) |
| enableSeconds | boolean | false | Enable seconds in time picker |
#### Outputs
| Output | Type | Description |
| ----------- | -------------------------------------- | ------------------------------------ |
| scheduled | EventEmitter | Emitted when selection changes |
| cleared | EventEmitter | Emitted when clear button is clicked |
#### Features
- Single Date Mode: Select one date with optional start and end times
- Multiple Dates Mode: Select multiple dates, each with individual time configuration
- Date Range Mode: Select a date range with start and end times
- All Day Toggle: Mark dates as all-day events
- Time Configuration: Individual time pickers for each date/range
$3
A standalone time picker component with scrollable hour, minute, and AM/PM selectors.
#### Basic Example
`typescript
import { BkTimePicker } from '@brickclay/ui';
@Component({
template:
,
})
export class MyComponent {
selectedTime = '1:00 AM';
onTimeChange(time: string) {
this.selectedTime = time;
console.log('New time:', time);
}
}
`
#### Component Selector
#### Inputs
| Input | Type | Default | Description |
| ------------- | ------------------- | --------------- | ---------------------------------------------------- |
| value | string | '1:00 AM' | Current time value (format: "H:MM AM/PM" or "HH:MM") |
| label | string | 'Time' | Label text |
| placeholder | string | 'Select time' | Placeholder text |
| position | 'left' \| 'right' | 'left' | Dropdown position |
| pickerId | string | '' | Unique identifier for the picker |
| closePicker | number | 0 | Counter to trigger picker close |
| timeFormat | 12 \| 24 | 12 | Time format (12-hour or 24-hour) |
| showSeconds | boolean | false | Show seconds selector |
#### Outputs
| Output | Type | Description |
| -------------- | ---------------------- | -------------------------- |
| timeChange | EventEmitter | Emitted when time changes |
| pickerOpened | EventEmitter | Emitted when picker opens |
| pickerClosed | EventEmitter | Emitted when picker closes |
#### Features
- Scrollable time selectors
- Keyboard navigation support
- 12-hour and 24-hour formats
- Optional seconds support
- Multiple picker coordination (only one open at a time)
- Click outside to close
#### Time Format Examples
12-hour format:
`typescript
value = '1:00 AM';
value = '12:30 PM';
value = '11:45 PM';
`
24-hour format:
`typescript
value = '01:00';
value = '13:30';
value = '23:45';
`
🔘 Toggle
A versatile toggle/switch component that integrates seamlessly with Angular forms. Supports both template-driven forms (ngModel) and reactive forms, with full accessibility features and keyboard navigation.
$3
A standalone toggle component that implements ControlValueAccessor for seamless Angular forms integration.
#### Basic Example
`typescript
import { BkToggle } from '@brickclay/ui';
import { FormsModule } from '@angular/forms';
@Component({
template:
,
imports: [BkToggle, FormsModule],
})
export class MyComponent {
isEnabled = false;
onToggleChange(value: boolean) {
console.log('Toggle state:', value);
}
}
`
#### Component Selector
#### Inputs
| Input | Type | Default | Description |
| ------------- | --------- | ------------- | -------------------------------------------------------------------------------- |
| label | string | '' | Optional label text displayed next to the toggle |
| disabled | boolean | false | Disables the toggle interaction |
| toggleClass | string | 'toggle-md' | CSS class for size styling. Options: 'toggle-sm', 'toggle-md', 'toggle-lg' |
#### Outputs
| Output | Type | Description |
| -------- | ----------------------- | ------------------------------------------------------------- |
| change | EventEmitter | Emitted when toggle state changes (returns new boolean value) |
#### Features
- ✅ Angular Forms Integration - Full support for ngModel and reactive forms
- ✅ Three Size Variants - Small (toggle-sm), Medium (toggle-md), Large (toggle-lg)
- ✅ Accessibility - ARIA attributes, keyboard navigation, and screen reader support
- ✅ Disabled State - Visual and functional disabled state
- ✅ Customizable Styling - Custom CSS classes for size and appearance
- ✅ Event Handling - change event for state change notifications
#### Usage Examples
Basic Toggle with ngModel:
`typescript
import { BkToggle } from '@brickclay/ui';
import { FormsModule } from '@angular/forms';
@Component({
template:
,
imports: [BkToggle, FormsModule],
})
export class MyComponent {
isActive = true;
}
`
Different Sizes:
`typescript
[toggleClass]="'toggle-sm'"
[label]="'Small Toggle'">
Disabled State:
`typescript
[disabled]="true"
[label]="'Disabled Toggle'">
`
With Event Handler:
`typescript
@Component({
template:
,
})
export class MyComponent {
notificationsEnabled = false;
onNotificationToggle(enabled: boolean) {
if (enabled) {
this.enableNotifications();
} else {
this.disableNotifications();
}
}
}
`
Reactive Forms Integration:
`typescript
import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { BkToggle } from '@brickclay/ui';
@Component({
template:
,
imports: [BkToggle, ReactiveFormsModule],
})
export class SettingsComponent {
settingsForm: FormGroup;
constructor(private fb: FormBuilder) {
this.settingsForm = this.fb.group({
darkMode: [false],
notifications: [true],
});
}
}
`
Without Label:
`typescript
[toggleClass]="'toggle-md'">
`
#### Styling
The toggle component uses CSS classes for size variants:
- Small: toggle-sm - Width: 28px (w-7)
- Medium: toggle-md - Width: 36px (w-9) - Default
- Large: toggle-lg - Width: 44px (w-11)
The component includes built-in styles for:
- On state (green background: #22973F)
- Off state (gray background: #BBBDC5)
- Disabled state (light gray: #D6D7DC)
- Hover states
- Focus ring for accessibility
- Smooth transitions
#### Accessibility
The toggle component includes:
- role="switch" for screen readers
- aria-checked attribute that reflects the current state
- Keyboard navigation support
- Focus visible ring for keyboard users
- Disabled state properly communicated to assistive technologies
☑️ Checkbox
A fully accessible checkbox component that integrates seamlessly with Angular forms. Supports both template-driven forms (ngModel) and reactive forms, with customizable styling and comprehensive accessibility features.
$3
A standalone checkbox component that implements ControlValueAccessor for seamless Angular forms integration.
#### Basic Example
`typescript
import { BkCheckbox } from '@brickclay/ui';
import { FormsModule } from '@angular/forms';
@Component({
template:
,
imports: [BkCheckbox, FormsModule],
})
export class MyComponent {
isAccepted = false;
onCheckboxChange(value: boolean) {
console.log('Checkbox state:', value);
}
}
`
#### Component Selector
#### Inputs
| Input | Type | Default | Description |
| --------------- | --------- | ------- | -------------------------------------------------------------------- |
| label | string | '' | Optional label text displayed next to the checkbox |
| disabled | boolean | false | Disables the checkbox interaction |
| checkboxClass | string | '' | CSS class for size styling. Options: 'xsm', 'sm', 'md', 'lg' |
| labelClass | string | '' | Custom CSS classes for the label text |
#### Outputs
| Output | Type | Description |
| -------- | ----------------------- | --------------------------------------------------------------- |
| change | EventEmitter | Emitted when checkbox state changes (returns new boolean value) |
#### Features
- ✅ Angular Forms Integration - Full support for ngModel and reactive forms
- ✅ Four Size Variants - Extra Small (xsm), Small (sm), Medium (md), Large (lg)
- ✅ Accessibility - ARIA attributes, keyboard navigation (Enter/Space), and screen reader support
- ✅ Disabled State - Visual and functional disabled state
- ✅ Keyboard Support - Full keyboard navigation with Enter and Space keys
- ✅ Focus Management - Focus visible ring for keyboard users
- ✅ Event Handling - change event for state change notifications
#### Usage Examples
Basic Checkbox with ngModel:
`typescript
import { BkCheckbox } from '@brickclay/ui';
import { FormsModule } from '@angular/forms';
@Component({
template:
,
imports: [BkCheckbox, FormsModule],
})
export class MyComponent {
isChecked = false;
}
`
Different Sizes:
`typescript
[checkboxClass]="'xsm'"
[label]="'Extra Small Checkbox'">
Disabled State:
`typescript
[disabled]="true"
[label]="'Disabled Checkbox'">
`
With Event Handler:
`typescript
@Component({
template:
,
})
export class MyComponent {
newsletterSubscribed = false;
onNewsletterToggle(subscribed: boolean) {
if (subscribed) {
this.subscribeToNewsletter();
} else {
this.unsubscribeFromNewsletter();
}
}
}
`
Reactive Forms Integration:
`typescript
import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { BkCheckbox } from '@brickclay/ui';
@Component({
template:
,
imports: [BkCheckbox, ReactiveFormsModule],
})
export class RegistrationComponent {
registrationForm: FormGroup;
constructor(private fb: FormBuilder) {
this.registrationForm = this.fb.group({
acceptTerms: [false, Validators.requiredTrue],
receiveUpdates: [false],
});
}
}
`
Without Label:
`typescript
[checkboxClass]="'md'">
`
Multiple Checkboxes:
`typescript
@Component({
template:
,
})
export class MyComponent {
options = [
{ label: 'Option 1', selected: false },
{ label: 'Option 2', selected: false },
{ label: 'Option 3', selected: false },
];
onOptionChange(option: any) {
console.log(${option.label} is now ${option.selected ? 'selected' : 'deselected'});
}
}
`
#### Styling
The checkbox component supports predefined size classes:
- Extra Small: xsm - 14px × 14px
- Small: sm - 16px × 16px
- Medium: md - 18px × 18px
- Large: lg - 20px × 20px
Use labelClass to style the label text (font size, weight, color, etc.)
The component includes built-in styles for:
- Checked state (black background with white checkmark/tick icon)
- Unchecked state (white background with gray border)
- Hover states (darker border on hover)
- Disabled states (gray background and border)
- Focus ring for accessibility (blue ring with offset)
- Smooth transitions for state changes
#### Accessibility
The checkbox component includes:
- Keyboard navigation support (Enter and Space keys)
- Focus visible ring for keyboard users
- Proper ARIA attributes
- Disabled state properly communicated to assistive technologies
- Tab navigation support
🔘 Radio Button
A fully accessible radio button component that integrates seamlessly with Angular forms. Supports both template-driven forms (ngModel) and reactive forms, with two visual variants (dot and tick) and comprehensive accessibility features.
$3
A standalone radio button component that implements ControlValueAccessor for seamless Angular forms integration. Radio buttons are used when only one option can be selected from a group.
#### Basic Example
`typescript
import { BkRadioButton } from '@brickclay/ui';
import { FormsModule } from '@angular/forms';
@Component({
template:
,
imports: [BkRadioButton, FormsModule],
})
export class MyComponent {
selectedOption = 'option1';
onRadioChange(value: any) {
console.log('Selected option:', value);
}
}
`
#### Component Selector
#### Inputs
| Input | Type | Default | Description |
| ------------ | ----------------- | ----------- | ------------------------------------------------------------------------- |
| label | string | '' | Optional label text displayed next to the radio button |
| value | any | undefined | The value associated with this radio button (required for radio groups) |
| disabled | boolean | false | Disables the radio button interaction |
| variant | 'dot' \| 'tick' | 'dot' | Visual variant. 'dot' shows a filled circle, 'tick' shows a checkmark |
| radioClass | string | '' | CSS class for size styling. Options: 'xsm', 'sm', 'md', 'lg' |
| labelClass | string | '' | Custom CSS classes for the label text |
#### Outputs
| Output | Type | Description |
| -------- | ------------------- | --------------------------------------------------------- |
| change | EventEmitter | Emitted when radio button is selected (returns the value) |
#### Features
- ✅ Angular Forms Integration - Full support for ngModel and reactive forms
- ✅ Two Visual Variants - Dot (filled circle) and Tick (checkmark) styles
- ✅ Four Size Variants - Extra Small (xsm), Small (sm), Medium (md), Large (lg)
- ✅ Radio Groups - Automatically groups radio buttons with the same ngModel binding
- ✅ Accessibility - ARIA attributes, keyboard navigation (Enter/Space), and screen reader support
- ✅ Disabled State - Visual and functional disabled state
- ✅ Keyboard Support - Full keyboard navigation with Enter and Space keys
- ✅ Focus Management - Focus visible ring for keyboard users
- ✅ Event Handling - change event for selection notifications
#### Usage Examples
Basic Radio Group with ngModel:
`typescript
import { BkRadioButton } from '@brickclay/ui';
import { FormsModule } from '@angular/forms';
@Component({
template:
,
imports: [BkRadioButton, FormsModule],
})
export class MyComponent {
selectedPayment = 'credit';
}
`
Dot Variant (Default):
`typescript
[value]="'option1'"
[variant]="'dot'"
[label]="'Option with Dot'">
`
Tick Variant:
`typescript
[value]="'option2'"
[variant]="'tick'"
[label]="'Option with Tick'">
`
Different Sizes:
`typescript
[value]="'xsm'"
[radioClass]="'xsm'"
[label]="'Extra Small Radio'">
[value]="'sm'"
[radioClass]="'sm'"
[label]="'Small Radio'">
[value]="'md'"
[radioClass]="'md'"
[label]="'Medium Radio'">
[value]="'lg'"
[radioClass]="'lg'"
[labelClass]="'text-lg font-bold'"
[label]="'Large Radio'">
`
Disabled State:
`typescript
[value]="'disabled-option'"
[disabled]="true"
[label]="'Disabled Option'">
`
With Event Handler:
`typescript
@Component({
template:
,
})
export class MyComponent {
options = [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' },
];
selectedOption = 'option1';
onOptionChange(value: any) {
console.log('Selected:', value);
}
}
`
Reactive Forms Integration:
`typescript
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { BkRadioButton } from '@brickclay/ui';
@Component({
template:
,
imports: [BkRadioButton, ReactiveFormsModule],
})
export class SurveyComponent {
surveyForm: FormGroup;
constructor(private fb: FormBuilder) {
this.surveyForm = this.fb.group({
rating: ['good', Validators.required],
});
}
}
`
Without Label:
`typescript
[value]="'option1'"
[radioClass]="'md'">
`
Dynamic Radio Group:
`typescript
@Component({
template:
,
})
export class MyComponent {
items = [
{ id: 1, name: 'Item 1', variant: 'dot' },
{ id: 2, name: 'Item 2', variant: 'tick' },
{ id: 3, name: 'Item 3', variant: 'dot' },
];
selectedItem = 1;
}
`
#### Styling
The radio button component supports predefined size classes:
- Extra Small: xsm - 14px × 14px
- Small: sm - 16px × 16px
- Medium: md - 18px × 18px
- Large: lg - 19px × 19px
Use labelClass to style the label text (font size, weight, color, etc.)
The component includes built-in styles for:
- Dot Variant: Filled circle indicator when selected (size varies by radioClass)
- Tick Variant: Checkmark indicator when selected (size varies by radioClass)
- Unselected state (white background with gray border)
- Hover states (darker border on hover)
- Disabled states (gray background and border)
- Focus ring for accessibility (blue ring with offset)
- Smooth transitions for state changes
#### Accessibility
The radio button component includes:
- Keyboard navigation support (Enter and Space keys)
- Focus visible ring for keyboard users
- Proper ARIA attributes
- Disabled state properly communicated to assistive technologies
- Tab navigation support
- Radio group semantics for screen readers
#### Radio Groups
Radio buttons are automatically grouped when they share the same ngModel binding. Only one radio button in a group can be selected at a time. When a radio button is selected, the previously selected one in the same group is automatically deselected.
💊 Pill
A versatile pill component for displaying labels, tags, or status indicators. Perfect for categorizing content, showing status, or creating removable tag lists. Supports multiple visual variants, color schemes, sizes, and optional dot indicators.
$3
A standalone pill component that displays text labels with customizable styling and optional removal functionality.
#### Basic Example
`typescript
import { BkPill } from '@brickclay/ui';
@Component({
template:
,
imports: [BkPill],
})
export class MyComponent {
onPillRemoved(label: string) {
console.log('Pill removed:', label);
}
}
`
#### Component Selector
#### Inputs
| Input | Type | Default | Description |
| ------------ | --------------------------------------- | --------- | -------------------------------------------------------------------- |
| label | string | '' | The text content displayed in the pill |
| variant | 'Light' \| 'Solid' \| 'Outline' \| 'Transparent' | 'Light' | Visual style variant |
| color | 'Gray' \| 'Primary' \| 'Error' \| 'Warning' \| 'Success' \| 'Purple' \| 'Cyan' | 'Gray' | Color scheme for the pill |
| size | 'xsm' \| 'sm' \| 'md' \| 'lg' | 'md' | Size variant of the pill |
| dot | 'left' \| 'right' \| 'none' | 'none' | Position of optional dot indicator (left, right, or none) |
| removable | boolean | false | Whether to show a remove button |
| customClass| string | '' | Additional CSS classes for custom styling |
#### Outputs
| Output | Type | Description |
| -------- | ------------------------ | ----------------------------------------------------- |
| clicked| EventEmitter | Emitted when the remove button is clicked (returns label) |
#### Features
- ✅ Multiple Variants - Light, Solid, Outline, and Transparent styles
- ✅ Color Options - Gray, Primary, Error, Warning, Success, Purple, and Cyan
- ✅ Size Variants - Extra Small (xsm), Small (sm), Medium (md), Large (lg)
- ✅ Dot Indicators - Optional dot indicator on left or right side
- ✅ Removable - Optional remove button with click event
- ✅ Custom Styling - Additional CSS classes for custom appearance
- ✅ Event Handling - clicked event for remove button interactions
#### Usage Examples
Basic Pill:
`typescript
import { BkPill } from '@brickclay/ui';
@Component({
template:
,
imports: [BkPill],
})
export class MyComponent {}
`
Different Variants:
`typescript
[variant]="'Light'"
[color]="'Primary'">
Different Colors:
`typescript
`
Different Sizes:
`typescript
`
With Dot Indicators:
`typescript
[dot]="'left'"
[color]="'Success'">
[dot]="'right'"
[color]="'Warning'">
`
Removable Pill:
`typescript
@Component({
template:
,
})
export class MyComponent {
onRemoveTag(label: string) {
console.log('Removed:', label);
// Remove from list, update state, etc.
}
}
`
Dynamic Pill List:
`typescript
@Component({
template:
,
})
export class MyComponent {
tags = ['Angular', 'TypeScript', 'RxJS', 'NgRx'];
removeTag(tag: string) {
this.tags = this.tags.filter((t) => t !== tag);
}
getTagColor(tag: string): 'Primary' | 'Success' | 'Warning' {
// Custom logic to determine color
return 'Primary';
}
}
`
With Custom Classes:
`typescript
[customClass]="'my-custom-class font-bold'">
`
#### Styling
The pill component supports predefined size classes:
- Extra Small: xsm
- Small: sm
- Medium: md - Default
- Large: lg
The component includes built-in styles for:
- All variant styles (Light, Solid, Outline, Transparent)
- All color schemes (Gray, Primary, Error, Warning, Success, Purple, Cyan)
- Dot indicators (left and right positions)
- Remove button styling
- Hover states
- Smooth transitions
🏷️ Badge
A flexible badge component for displaying labels, tags, or status indicators. Perfect for categorizing content, showing status, or creating removable tag lists. Supports multiple visual variants, color schemes, sizes, and optional dot indicators.
$3
A standalone badge component that displays text labels with customizable styling and optional removal functionality.
#### Basic Example
`typescript
import { BkBadge } from '@brickclay/ui';
@Component({
template:
,
imports: [BkBadge],
})
export class MyComponent {
onBadgeRemoved(label: string) {
console.log('Badge removed:', label);
}
}
`
#### Component Selector
#### Inputs
| Input | Type | Default | Description |
| ------------ | --------------------------------------- | --------- | -------------------------------------------------------------------- |
| label | string | '' | The text content displayed in the badge |
| variant | 'Light' \| 'Solid' \| 'Outline' \| 'Transparent' | 'Light' | Visual style variant |
| color | 'Gray' \| 'Primary' \| 'Error' \| 'Warning' \| 'Success' \| 'Purple' \| 'Cyan' | 'Gray' | Color scheme for the badge |
| size | 'xsm' \| 'sm' \| 'md' \| 'lg' | 'md' | Size variant of the badge |
| dot | 'left' \| 'right' \| 'none' | 'none' | Position of optional dot indicator (left, right, or none) |
| removable | boolean | false | Whether to show a remove button |
| customClass| string | '' | Additional CSS classes for custom styling |
#### Outputs
| Output | Type | Description |
| -------- | ------------------------ | ----------------------------------------------------- |
| clicked| EventEmitter | Emitted when the remove button is clicked (returns label) |
#### Features
- ✅ Multiple Variants - Light, Solid, Outline, and Transparent styles
- ✅ Color Options - Gray, Primary, Error, Warning, Success, Purple, and Cyan
- ✅ Size Variants - Extra Small (xsm), Small (sm), Medium (md), Large (lg)
- ✅ Dot Indicators - Optional dot indicator on left or right side
- ✅ Removable - Optional remove button with click event
- ✅ Custom Styling - Additional CSS classes for custom appearance
- ✅ Event Handling - clicked event for remove button interactions
#### Usage Examples
Basic Badge:
`typescript
import { BkBadge } from '@brickclay/ui';
@Component({
template:
,
imports: [BkBadge],
})
export class MyComponent {}
`
Different Variants:
`typescript
[variant]="'Light'"
[color]="'Primary'">
Different Colors:
`typescript
`
Different Sizes:
`typescript
`
With Dot Indicators:
`typescript
[dot]="'left'"
[color]="'Success'">
[dot]="'right'"
[color]="'Warning'">
`
Removable Badge:
`typescript
@Component({
template:
,
})
export class MyComponent {
onRemoveTag(label: string) {
console.log('Removed:', label);
// Remove from list, update state, etc.
}
}
`
Dynamic Badge List:
`typescript
@Component({
template:
,
})
export class MyComponent {
tags = ['Angular', 'TypeScript', 'RxJS', 'NgRx'];
removeTag(tag: string) {
this.tags = this.tags.filter((t) => t !== tag);
}
getTagColor(tag: string): 'Primary' | 'Success' | 'Warning' {
// Custom logic to determine color
return 'Primary';
}
}
`
With Custom Classes:
`typescript
[customClass]="'my-custom-class font-bold'">
`
#### Styling
The badge component supports predefined size classes:
- Extra Small: xsm
- Small: sm
- Medium: md - Default
- Large: lg
The component includes built-in styles for:
- All variant styles (Light, Solid, Outline, Transparent)
- All color schemes (Gray, Primary, Error, Warning, Success, Purple, Cyan)
- Dot indicators (left and right positions)
- Remove button styling
- Hover states
- Smooth transitions
📐 TypeScript Interfaces
$3
`typescript
interface CalendarRange {
start: Date;
end: Date;
}
`
$3
`typescript
interface CalendarSelection {
startDate: Date | null;
endDate: Date | null;
selectedDates?: Date[]; // For multi-date selection
}
`
$3
`typescript
interface TimeConfiguration {
date: Date;
allDay: boolean;
startTime: string; // Format: "HH:mm" or "HH:mm:ss"
endTime: string;
}
`
$3
`typescript
interface ScheduledDateSelection {
mode: 'single' | 'multiple' | 'range';
singleDate?: {
startDate: Date;
endDate: Date;
allDay: boolean;
startTime: string;
endTime: string;
};
multipleDates?: TimeConfiguration[];
dateRange?: {
startDate: Date;
endDate: Date;
allDay: boolean;
startTime: string;
endTime: string;
};
}
`
🎯 Common Use Cases
$3
`typescript
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { BkCustomCalendar } from '@brickclay/ui';
export class BookingFormComponent {
bookingForm: FormGroup;
constructor(private fb: FormBuilder) {
this.bookingForm = this.fb.group({
checkIn: [null, Validators.required],
checkOut: [null, Validators.required],
});
}
onDateSelected(selection: CalendarSelection) {
this.bookingForm.patchValue({
checkIn: selection.startDate,
checkOut: selection.endDate,
});
}
}
`
$3
`typescript
(selected)="form.patchValue({ dateRange: $event })">
`
$3
`typescript
export class DataTableComponent {
filterDates: CalendarSelection = { startDate: null, endDate: null };
onDateFilter(selection: CalendarSelection) {
this.filterDates = selection;
this.loadFilteredData();
}
loadFilteredData() {
const filtered = this.data.filter((item) => {
if (!this.filterDates.startDate || !this.filterDates.endDate) {
return true;
}
return item.date >= this.filterDates.startDate! && item.date <= this.filterDates.endDate!;
});
}
}
`
📦 Assets Configuration
The calendar components require SVG icons. Configure your angular.json to copy assets:
`json
{
"glob": "*/",
"input": "node_modules/@brickclay/ui/assets",
"output": "assets"
}
`
Or manually copy assets from:
`
node_modules/@brickclay/ui/assets/calender/* → your-app/public/assets/calender/
`
🔧 Service
$3
A service that manages multiple calendar instances, ensuring only one calendar is open at a time when not in inline mode. Used internally by BkCustomCalendar`.