npm package: @i-am-shashikant-d/card-angular
Description: Angular implementation of Shiro Card component - modern, accessible, and customizable card component with multiple variants
Author: Shiro Design System
Latest version: 1.0.0

# @shiro/card-angular

Angular implementation of the Shiro Card component - a modern, accessible, and customizable card component with multiple variants.

## Installation

```bash
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

```typescript
import { ShiroCardModule } from '@shiro/card-angular';

@NgModule({
  imports: [
    ShiroCardModule
  ]
})
export class AppModule { }
```

### Basic Card

```html
<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

```html
<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<MouseEvent>
- `cardFocus`: EventEmitter<FocusEvent>
- `cardBlur`: EventEmitter<FocusEvent>
- `cardKeyDown`: EventEmitter<KeyboardEvent>
- `cardMouseEnter`: EventEmitter<MouseEvent>
- `cardMouseLeave`: EventEmitter<MouseEvent>
- `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<boolean>
- `share`: EventEmitter<ShareData>
- `copy`: EventEmitter<CopyData>
- `bookmark`: EventEmitter<boolean>
- `edit`: EventEmitter<void>
- `delete`: EventEmitter<void>
- `download`: EventEmitter<void>
- `menuActionClick`: EventEmitter<{action: CardMenuAction, event: MouseEvent}>

## Styling

The component uses CSS custom properties for theming. You can override these in your global styles:

```css
: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](https://github.com/your-org/shiro-ui-components)
- [Documentation](https://shiro-ui.dev)
- [Report Issues](https://github.com/your-org/shiro-ui-components/issues)