npm package: @smz-ui/mentions
Description: A customizable mentions component for Angular applications.
Latest version: 0.0.3

# SMZ Mentions

A customizable mentions component for Angular applications.

## Customization

The mention component styles can be customized using CSS custom properties. **Important**: The library no longer defines default values for these properties. You must define them in your application to ensure proper styling.

### Required CSS Custom Properties

You need to define these CSS custom properties in your application. Here are the recommended default values:

```scss
// CSS Custom Properties for customization
// These must be defined by the consuming application
:root {
  // Menu Container
  --smz-mention-menu-bg-color: #fff;
  --smz-mention-menu-text-color: #212529;
  --smz-mention-menu-border-color: rgba(0, 0, 0, 0.15);
  --smz-mention-menu-border-radius: 0.25em;
  --smz-mention-menu-padding: 0.5em 0;
  --smz-mention-menu-margin: 0.125em 0 0;
  --smz-mention-menu-font-size: 1em;
  --smz-mention-menu-min-width: 11em;
  --smz-mention-menu-shadow: none;

  // Menu Items
  --smz-mention-item-bg-color: transparent;
  --smz-mention-item-border: 0;

  // Active/Hovered Items
  --smz-mention-active-text-color: #fff;
  --smz-mention-active-bg-color: #337ab7;
  --smz-mention-active-outline: 0;

  // Scrollable Menu
  --smz-mention-scrollable-max-height: 292px;
}
```

### Available CSS Custom Properties

#### Menu Container
- `--smz-mention-menu-bg-color`: Background color of the mention menu
- `--smz-mention-menu-text-color`: Text color of the mention menu
- `--smz-mention-menu-border-color`: Border color of the mention menu
- `--smz-mention-menu-border-radius`: Border radius of the mention menu
- `--smz-mention-menu-padding`: Padding of the mention menu
- `--smz-mention-menu-margin`: Margin of the mention menu
- `--smz-mention-menu-font-size`: Font size of the mention menu
- `--smz-mention-menu-min-width`: Minimum width of the mention menu
- `--smz-mention-menu-shadow`: Box shadow of the mention menu

#### Menu Items
- `--smz-mention-item-bg-color`: Background color of mention items
- `--smz-mention-item-border`: Border of mention items

#### Active/Hovered Items
- `--smz-mention-active-text-color`: Text color of active mention items
- `--smz-mention-active-bg-color`: Background color of active mention items
- `--smz-mention-active-outline`: Outline of active mention items

#### Scrollable Menu
- `--smz-mention-scrollable-max-height`: Maximum height of scrollable menu

### Usage Examples

#### Global Customization
Add these variables to your global styles (e.g., `styles.scss`):

```scss
:root {
  // Required base styles
  --smz-mention-menu-bg-color: #fff;
  --smz-mention-menu-text-color: #212529;
  --smz-mention-menu-border-color: rgba(0, 0, 0, 0.15);
  --smz-mention-menu-border-radius: 0.25em;
  --smz-mention-menu-padding: 0.5em 0;
  --smz-mention-menu-margin: 0.125em 0 0;
  --smz-mention-menu-font-size: 1em;
  --smz-mention-menu-min-width: 11em;
  --smz-mention-menu-shadow: none;
  --smz-mention-item-bg-color: transparent;
  --smz-mention-item-border: 0;
  --smz-mention-active-text-color: #fff;
  --smz-mention-active-bg-color: #337ab7;
  --smz-mention-active-outline: 0;
  --smz-mention-scrollable-max-height: 292px;
}
```

#### Dark Theme Customization
```scss
:root {
  // Dark theme overrides
  --smz-mention-menu-bg-color: #2c3e50;
  --smz-mention-menu-text-color: #ecf0f1;
  --smz-mention-menu-border-color: #34495e;
  --smz-mention-active-bg-color: #3498db;
  --smz-mention-active-text-color: #ffffff;
}
```

#### Component-Specific Customization
Override styles for a specific component:

```scss
my-component {
  --smz-mention-menu-bg-color: #f8f9fa;
  --smz-mention-menu-border-color: #dee2e6;
  --smz-mention-active-bg-color: #007bff;
}
```

#### Theme-Based Customization
```scss
.dark-theme {
  --smz-mention-menu-bg-color: #343a40;
  --smz-mention-menu-text-color: #f8f9fa;
  --smz-mention-menu-border-color: #495057;
  --smz-mention-active-bg-color: #007bff;
  --smz-mention-active-text-color: #ffffff;
}
```

### Disabling Internal Styles

You can completely disable the internal styles by setting `disableStyle: true` in the mention configuration. This allows you to provide your own custom CSS without any interference from the component's default styles.