@shiro/card-angular

Angular implementation of the Shiro Card component - a modern, accessible, and customizable card component with multiple variants.

Installation

npm install @shiro/card-angular @i-am-shashikant-d/core

Peer Dependencies

This package requires:

• @angular/core >= 15.0.0
• @angular/common >= 15.0.0
• @angular/animations >= 15.0.0

Usage

Import the Module

import { ShiroCardModule } from '@shiro/card-angular';

@NgModule({
  imports: [
    ShiroCardModule
  ]
})
export class AppModule { }

Basic Card

<shiro-card
  title="Card Title"
  subtitle="Card Subtitle"
  description="Card description text"
  variant="default"
  size="md"
>
  <p>Card content goes here</p>
</shiro-card>

Enhanced Card with Actions

<shiro-card-enhanced
  title="Enhanced Card"
  description="A card with advanced features"
  variant="primary"
  [expandable]="true"
  [actions]="cardActions"
  [menuActions]="menuActions"
  (expandToggle)="onExpandToggle($event)"
  (share)="onShare($event)"
>
  <p>Main content</p>
  <div slot="expanded">
    <p>Expanded content shown when card is expanded</p>
  </div>
</shiro-card-enhanced>

Component API

ShiroCardComponent

Inputs:

• variant: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'
• size: 'sm' | 'md' | 'lg'
• orientation: 'vertical' | 'horizontal'
• elevation: number (0-5)
• interactive: boolean
• clickable: boolean
• hoverable: boolean
• borderless: boolean
• fullWidth: boolean
• disabled: boolean
• loading: boolean
• image: string (URL)
• imageAlt: string
• imagePosition: 'top' | 'bottom' | 'left' | 'right' | 'background'
• title: string
• subtitle: string
• description: string
• actions: CardAction[]
• href: string
• target: string

Outputs:

• cardClick: EventEmitter
• cardFocus: EventEmitter
• cardBlur: EventEmitter
• cardKeyDown: EventEmitter
• cardMouseEnter: EventEmitter
• cardMouseLeave: EventEmitter
• actionClick: EventEmitter<{action: CardAction, index: number, event: MouseEvent}>

ShiroCardEnhancedComponent

Includes all ShiroCardComponent features plus:

Additional Inputs:

• expandable: boolean
• expanded: boolean
• expandDirection: 'down' | 'up' | 'left' | 'right'
• expandedContent: string
• autoCollapse: boolean
• collapseDelay: number
• menuActions: CardMenuAction[]
• menuPosition: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left' | 'right'
• showMenuButton: boolean
• bookmarked: boolean
• enableContextMenu: boolean

Additional Outputs:

• expandToggle: EventEmitter
• share: EventEmitter
• copy: EventEmitter
• bookmark: EventEmitter
• edit: EventEmitter
• delete: EventEmitter
• download: EventEmitter
• menuActionClick: EventEmitter<{action: CardMenuAction, event: MouseEvent}>

Styling

The component uses CSS custom properties for theming. You can override these in your global styles:

:root {
  --shiro-primary: #007bff;
  --shiro-primary-dark: #0056b3;
  --shiro-focus-color: #007bff;
}

Accessibility

The Shiro Card components follow WCAG 2.1 AA standards and include:

• Proper ARIA attributes
• Keyboard navigation support
• Focus management
• Screen reader support
• High contrast mode support
• Reduced motion support

License

MIT

Links

• GitHub Repository
• Documentation
• Report Issues