# @ngshack/ui

Webland UI component library for Angular applications with gaming console theme.

## Installation

```bash
npm install @ngshack/ui
```

## Development

### Prerequisites
- Node.js 18+
- Angular CLI 17+

### Setup
```bash
npm install
```

### Generate Components
```bash
# Generate new component
ng generate component components/my-component --project=ui

# Generate service
ng generate service services/my-service --project=ui

# Generate module
ng generate module modules/my-module --project=ui
```

### Build Library
```bash
ng build ui
```

### Test
```bash
ng test ui
```

### Publish
```bash
npm run build:libs
npm publish dist/ui
```

## Usage

### Button Component

```typescript
import { ButtonComponent } from '@ngshack/ui';

@Component({
  imports: [ButtonComponent],
  template: `
    <wl-ui-button variant="primary">Click me</wl-ui-button>
    <wl-ui-button variant="secondary" size="lg">Large Button</wl-ui-button>
    <wl-ui-button variant="outline" [disabled]="true">Disabled</wl-ui-button>
  `
})
export class MyComponent {}
```

#### Properties
- `variant`: 'primary' | 'secondary' | 'outline' (default: 'primary')
- `size`: 'sm' | 'md' | 'lg' (default: 'md')
- `disabled`: boolean (default: false)
- `type`: 'button' | 'submit' | 'reset' (default: 'button')

### Card Component

```typescript
import { CardComponent } from '@ngshack/ui';

@Component({
  imports: [CardComponent],
  template: `
    <wl-ui-card title="My Card" [elevated]="true">
      <p>Card content goes here</p>

      <div slot="header">
        <button>Header Action</button>
      </div>

      <div slot="footer">
        <button>Footer Action</button>
      </div>
    </wl-ui-card>
  `
})
export class MyComponent {}
```

#### Properties
- `title`: string (optional)
- `elevated`: boolean (default: false)
- `compact`: boolean (default: false)

## Development

### Building

```bash
npm run build:ui
```

### Watching for changes

```bash
npm run watch:ui
```

### Publishing

```bash
npm run publish:ui
```

## Styling

The library uses a gaming console theme with:
- Dark backgrounds with transparency
- Neon green accents (#00ff88)
- Smooth transitions and hover effects
- Backdrop blur effects

## License

MIT

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.