@actabldesign/bellhop-angular

Angular wrapper components for the Bellhop design system. Provides Angular-friendly wrappers around the Stencil web components from @actabldesign/bellhop-core.

Installation

npm install @actabldesign/bellhop-angular @actabldesign/bellhop-core @actabldesign/bellhop-styles

Setup

1. Register Custom Elements

In your main.ts:

import { defineCustomElements } from '@actabldesign/bellhop-core/loader';

defineCustomElements();

2. Import Styles

In your src/styles.css:

@import '@actabldesign/bellhop-styles';

3. Add Schema to Module/Component

For standalone components:

import { Component } from '@angular/core';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-example',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `<bh-button label="Click Me" hierarchy="primary"></bh-button>`,
})
export class ExampleComponent {}

For NgModule-based apps:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Usage

Basic Example

<bh-button
  label="Primary Button"
  hierarchy="primary"
  (bhClick)="handleClick($event)"
></bh-button>

Form Inputs

<bh-input-text
  label="Email"
  placeholder="Enter your email"
  [value]="email"
  (bhInput)="onEmailChange($event)"
></bh-input-text>

<bh-dropdown
  label="Select an option"
  [options]="options"
  (bhChange)="onOptionSelect($event)"
></bh-dropdown>

<bh-checkbox
  label="Accept terms"
  [checked]="accepted"
  (bhChange)="onAcceptChange($event)"
></bh-checkbox>

Cards and Layout

<bh-card>
  <bh-card-header>
    <span slot="title">Card Title</span>
    <span slot="subtitle">Card subtitle</span>
  </bh-card-header>

  <p>Card content goes here</p>

  <bh-card-footer>
    <bh-button label="Cancel" hierarchy="tertiary"></bh-button>
    <bh-button label="Save" hierarchy="primary"></bh-button>
  </bh-card-footer>
</bh-card>

Modal Dialog

<bh-modal [open]="isModalOpen" (bhClose)="closeModal()">
  <bh-modal-header>
    <span slot="title">Confirm Action</span>
  </bh-modal-header>

  <p>Are you sure you want to proceed?</p>

  <bh-modal-actions>
    <bh-button
      label="Cancel"
      hierarchy="secondary"
      (bhClick)="closeModal()"
    ></bh-button>
    <bh-button
      label="Confirm"
      hierarchy="primary"
      (bhClick)="confirm()"
    ></bh-button>
  </bh-modal-actions>
</bh-modal>

Data Display

<bh-badge label="New" color="primary"></bh-badge>

<bh-tag label="Category" [removable]="true" (bhRemove)="removeTag()"></bh-tag>

<bh-avatar name="John Doe" size="md"></bh-avatar>

Event Handling

All Bellhop events use the bh prefix. In Angular templates, bind to these using the standard event syntax:

<!-- Button click -->
<bh-button (bhClick)="handleClick($event)"></bh-button>

<!-- Input change -->
<bh-input-text
  (bhInput)="handleInput($event)"
  (bhChange)="handleChange($event)"
></bh-input-text>

<!-- Dropdown selection -->
<bh-dropdown (bhChange)="handleSelect($event)"></bh-dropdown>

<!-- Modal close -->
<bh-modal (bhClose)="handleClose()"></bh-modal>

Available Components

All components from @actabldesign/bellhop-core are available. Key components include:

Layout: bh-appbar, bh-sidebar, bh-card, bh-modal, bh-accordion, bh-tabs

Forms: bh-button, bh-input-text, bh-input-password, bh-input-number, bh-textarea, bh-checkbox, bh-radio-button, bh-toggle, bh-dropdown

Date/Time: bh-date-picker, bh-date-range-picker, bh-month-picker

Data Display: bh-data-grid, bh-badge, bh-tag, bh-avatar, bh-tooltip

Feedback: bh-notification, bh-loader-spinner, bh-empty-state, bh-skeleton-loader

Navigation: bh-breadcrumbs, bh-page-navigation, bh-pagination

Charts: bh-bar-chart, bh-pie-chart, bh-trend-chart

See the bellhop-core README for the complete component list.

Compatibility

• Angular 19+
• Works with both standalone components and NgModule-based apps

Related Packages

• @actabldesign/bellhop-core - Web Components (StencilJS)
• @actabldesign/bellhop-react - React component wrappers
• @actabldesign/bellhop-styles - CSS styles and design tokens
• @actabldesign/bellhop-assets - SVG icons, illustrations, logos

License

MIT