npm package: @noveo/web-components
Description: Noveo Web Components
Latest version: 0.0.16

<p align="center">  
    <a href="https://noveogroup.ru/" target="_blank">  
      <img alt="Noveo Logo" width="300" src="https://noveogroup.ru/build/images/logo-noveo.e179f24f.svg">  
    </a>  
</p>

# Noveo Web Components

Web Components was designed using Noveo UI Kit and built on [Stencil](https://stenciljs.com/)

Documentation is available in [Storybook](https://storybook.js.org/): [http://components.noveogroup.com](http://components.noveogroup.com)

To run storybook locally, use [serve](https://www.npmjs.com/package/serve)

```bash
cd dist/storybook-static

serve
```

# How to use

To use web-components on React application, it is necessary to use special components for React: [Noveo React Components](https://www.npmjs.com/package/@noveo/react-components)

Because React supports web-components only for 71%: [React web-components support](https://custom-elements-everywhere.com/libraries/react/results/results.html)

## React

If you want to use these components with React please consider using [this](https://www.npmjs.com/package/@noveo/react-components) package instead

## Vue

Add this to your main Vue file to load components and mark them safe so compiler won't complain about not knowing what these components are:

```js
import { defineCustomElements } from '@noveo/web-components/dist/loader';
Vue.config.ignoredElements = [/nv-\w*/];

defineCustomElements(window);
```

## Angular

Add this to your main Angular file to load components:

```js
import { defineCustomElements } from '@noveo/web-components/dist/loader';

defineCustomElements(window);
```

Add this to allow Angular modules contain non-angular custom elements:

```js
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

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

## Installation

By `npm`:

```bash
npm install @noveo/web-components --save
```

Or by `yarn`:

```bash
yarn add @noveo/web-components
```

**IMPORTANT!** Almost all Noveo components depend on the `nv-icon` component to render icons,
so make sure to follow the [instructions](#nv-icon) for that component before using the others!

## Usage

```js
import { defineCustomElements } from '@noveo/web-components/dist/loader';

defineCustomElements(window);
```

To support Edge and IE11:

```js
import {
  applyPolyfills,
  defineCustomElements
} from '@noveo/web-components/dist/loader';

applyPolyfills().then(() => defineCustomElements(window));
```

After `defineCustomElements` call all components will be available like HTML5 elements:

```html
<nv-table>
  <nv-table-head>
    <nv-table-cell>Name</nv-table-cell>
    <nv-table-cell>Job Title</nv-table-cell>
    <nv-table-cell>Salary</nv-table-cell>
  </nv-table-head>
  <nv-table-body>
    <nv-table-row>
      <nv-table-cell>Rhianna</nv-table-cell>
      <nv-table-cell>International Program Officer</nv-table-cell>
      <nv-table-cell>$972</nv-table-cell>
    </nv-table-row>
    <nv-table-row>
      <nv-table-cell>Archibald</nv-table-cell>
      <nv-table-cell>Central Tactics Planner</nv-table-cell>
      <nv-table-cell>$852</nv-table-cell>
    </nv-table-row>
    <nv-table-row>
      <nv-table-cell>Deondre</nv-table-cell>
      <nv-table-cell>Forward Interactions Planner</nv-table-cell>
      <nv-table-cell>$274</nv-table-cell>
    </nv-table-row>
  </nv-table-body>
</nv-table>
```

# How to add icons to the project
 
Assuming that you use Webpack to manage your build process.
 
1. Install [copy-webpack-plugin](#copy-webpack-plugin):
 
```bash
yarn add copy-webpack-plugin --dev
```
 
or
 
```bash
npm install copy-webpack-plugin --save-dev
```
 
2. In your common webpack config (applied both in development and production modes),
   enable the plugin like so:
 
```js
const CopyPlugin = require('copy-webpack-plugin');
// ...
module.exports = {
  // ...
  plugins: [
    new CopyPlugin([
      {
        from: 'node_modules/@noveo/web-components/dist/collection/assets',
        to: 'assets'
      }
    ])
  ]
};
```
 
That's it. Of course, you can replace this plugin with a similar plugin for the bundler/build tool you actually use. The idea is that the `assets` dir containing our standard set of icons must be copied from
the `@noveo/web-components` module to your build root.

# Components




# nv-accordion
## Properties

| Property   | Attribute  | Description                            | Type      | Default |
| ---------- | ---------- | -------------------------------------- | --------- | ------- |
| `disabled` | `disabled` | Whenether accordion is disabled or not | `boolean` | `false` |
| `label`    | `label`    | Label text for accordion               | `string`  | `''`    |
| `open`     | `open`     | Whenether accordion is opened or not   | `boolean` | `false` |


## Events

| Event    | Description                        | Type                   |
| -------- | ---------------------------------- | ---------------------- |
| `change` | Event returns current `open` value | `CustomEvent<boolean>` |


## Slots

| Slot | Description               |
| ---- | ------------------------- |
|      | content to show when open |


## Dependencies

### Depends on

- [nv-icon](#nv-icon)

### Graph
```mermaid
graph TD;
  nv-accordion --> nv-icon
  nv-icon --> context-consumer
  style nv-accordion fill:#f9f,stroke:#333,stroke-width:4px
```



# nv-alert
## Properties

| Property  | Attribute | Description | Type                                                                           | Default             |
| --------- | --------- | ----------- | ------------------------------------------------------------------------------ | ------------------- |
| `color`   | `color`   |             | `AlertMods.DANGER or AlertMods.PRIMARY or AlertMods.SUCCESS or AlertMods.WARN` | `AlertMods.PRIMARY` |
| `dismiss` | --        |             | `(event: MouseEvent) => void`                                                  | `undefined`         |
| `isOpen`  | `is-open` |             | `boolean`                                                                      | `true`              |
| `timeout` | `timeout` |             | `number`                                                                       | `undefined`         |



# nv-avatar
## Properties

| Property | Attribute | Description                                            | Type                           | Default        |
| -------- | --------- | ------------------------------------------------------ | ------------------------------ | -------------- |
| `color`  | `color`   | The color of the avatar background (for text children) | `string`                       | `'#ff6c46'`    |
| `height` | `height`  | The height of the avatar (in pixels)                   | `number`                       | `52`           |
| `shape`  | `shape`   | The shape of the avatar (circle or square)             | `Shape.circle or Shape.square` | `Shape.circle` |
| `width`  | `width`   | The width of the avatar (in pixels)                    | `number`                       | `52`           |


## Slots

| Slot | Description    |
| ---- | -------------- |
|      | content inside |



# nv-button
## Properties

| Property   | Attribute  | Description                                                                  | Type                                                                                                                                                                         | Default                      |
| ---------- | ---------- | ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| `big`      | `big`      | makes the button taller and longer                                           | `boolean`                                                                                                                                                                    | `false`                      |
| `color`    | `color`    | color option (danger, success, primary, secondary)                           | `ButtonColors.danger or ButtonColors.primary or ButtonColors.secondary or ButtonColors.success`                                                                              | `ButtonColors.primary`       |
| `disabled` | `disabled` | disables the button and changes styles                                       | `boolean`                                                                                                                                                                    | `false`                      |
| `outline`  | `outline`  | changes styles                                                               | `boolean`                                                                                                                                                                    | `false`                      |
| `size`     | `size`     | size option (xs, sm, md, lg, xl, xxl, responsive-container, responsive-text) | `ButtonSizes.lg or ButtonSizes.md or ButtonSizes.responsiveContainer or ButtonSizes.responsiveText or ButtonSizes.sm or ButtonSizes.xl or ButtonSizes.xs or ButtonSizes.xxl` | `ButtonSizes.responsiveText` |



# nv-checkbox
## Properties

| Property       | Attribute       | Description                                                                   | Type      | Default |
| -------------- | --------------- | ----------------------------------------------------------------------------- | --------- | ------- |
| `checked`      | `checked`       | activity flag                                                                 | `boolean` | `false` |
| `description`  | `description`   | text between label and checkbox                                               | `string`  | `''`    |
| `disabled`     | `disabled`      | disables the checkbox and changes styles                                      | `boolean` | `false` |
| `dropVariant`  | `drop-variant`  | changes the styles of the active state                                        | `boolean` | `false` |
| `error`        | `error`         | red text under the checkbox, makes the label red                              | `string`  | `''`    |
| `floatingIcon` | `floating-icon` | Whether icon should be floated to the left (so text value nearby can wrap it) | `boolean` | `false` |
| `label`        | `label`         | large text over checkbox                                                      | `string`  | `''`    |
| `name`         | `name`          | name prop for input                                                           | `string`  | `''`    |
| `value`        | `value`         | checkbox text                                                                 | `string`  | `''`    |


## Events

| Event    | Description                      | Type                   |
| -------- | -------------------------------- | ---------------------- |
| `change` | onChange event returns isChecked | `CustomEvent<boolean>` |


## Dependencies

### Used by

 - [nv-select](#nv-select)

### Depends on

- [nv-label](#nv-label)

### Graph
```mermaid
graph TD;
  nv-checkbox --> nv-label
  nv-select --> nv-checkbox
  style nv-checkbox fill:#f9f,stroke:#333,stroke-width:4px
```



# nv-chip
## Properties

| Property   | Attribute  | Description                          | Type      | Default |
| ---------- | ---------- | ------------------------------------ | --------- | ------- |
| `disabled` | `disabled` | disables the chip and changes styles | `boolean` | `false` |


## Events

| Event   | Description                       | Type               |
| ------- | --------------------------------- | ------------------ |
| `close` | onClose event(click on the cross) | `CustomEvent<any>` |


## Slots

| Slot       | Description     |
| ---------- | --------------- |
| `"noname"` | nv-chip content |


## Dependencies

### Used by

 - [nv-search](#nv-search)
 - [nv-select](#nv-select)

### Depends on

- [nv-icon](#nv-icon)

### Graph
```mermaid
graph TD;
  nv-chip --> nv-icon
  nv-icon --> context-consumer
  nv-search --> nv-chip
  nv-select --> nv-chip
  style nv-chip fill:#f9f,stroke:#333,stroke-width:4px
```



# nv-color-field
## Properties

| Property      | Attribute     | Description                               | Type      | Default                                    |
| ------------- | ------------- | ----------------------------------------- | --------- | ------------------------------------------ |
| `description` | `description` | text between label and checkbox           | `string`  | `''`                                       |
| `disabled`    | `disabled`    | is color picker disabled or not           | `boolean` | `false`                                    |
| `error`       | `error`       | error message                             | `string`  | `''`                                       |
| `label`       | `label`       | large text over color picker              | `string`  | `''`                                       |
| `types`       | --            | Available edit panels                     | `Type[]`  | `[Type.RGB, Type.HSL, Type.HSV, Type.HEX]` |
| `value`       | `value`       | inital value for color-picker             | `string`  | `'#d00'`                                   |
| `withAlpha`   | `with-alpha`  | if component should control alpha channel | `boolean` | `true`                                     |


## Dependencies

### Depends on

- [nv-label](#nv-label)
- [nv-dropdown](#nv-dropdown)
- [nv-dropdown-button](#nv-dropdown-button)
- [nv-dropdown-container](#nv-dropdown-container)
- [nv-color-picker](#nv-color-picker)

### Graph
```mermaid
graph TD;
  nv-color-field --> nv-label
  nv-color-field --> nv-dropdown
  nv-color-field --> nv-dropdown-button
  nv-color-field --> nv-dropdown-container
  nv-color-field --> nv-color-picker
  nv-color-picker --> nv-icon
  nv-icon --> context-consumer
  style nv-color-field fill:#f9f,stroke:#333,stroke-width:4px
```



# nv-color-picker
## Properties

| Property    | Attribute    | Description                               | Type                                           | Default                                    |
| ----------- | ------------ | ----------------------------------------- | ---------------------------------------------- | ------------------------------------------ |
| `disabled`  | `disabled`   | is color picker disabled or not           | `boolean`                                      | `false`                                    |
| `type`      | `type`       | Selected edit panel                       | `Type.HEX or Type.HSL or Type.HSV or Type.RGB` | `this.types[0]`                            |
| `types`     | --           | Available edit panels                     | `Type[]`                                       | `[Type.RGB, Type.HSL, Type.HSV, Type.HEX]` |
| `value`     | `value`      | inital value for color-picker             | `string`                                       | `'#d00'`                                   |
| `withAlpha` | `with-alpha` | if component should control alpha channel | `boolean`                                      | `true`                                     |


## Events

| Event    | Description                                                                                                          | Type                                        |
| -------- | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
| `change` | Dispatches `change` event with following structure: `hex` - selected color in hex format `color` - instance of Color | `CustomEvent<{ hex: string; color: any; }>` |


## Dependencies

### Used by

 - [nv-color-field](#nv-color-field)

### Depends on

- [nv-icon](#nv-icon)

### Graph
```mermaid
graph TD;
  nv-color-picker --> nv-icon
  nv-icon --> context-consumer
  nv-color-field --> nv-color-picker
  style nv-color-picker fill:#f9f,stroke:#333,stroke-width:4px
```



# nv-date-field
## Properties

| Property           | Attribute            | Description                                                                                                        | Type             | Default                                                                  |
| ------------------ | -------------------- | ------------------------------------------------------------------------------------------------------------------ | ---------------- | ------------------------------------------------------------------------ |
| `description`      | `description`        | Text between label and element                                                                                     | `string`         | `''`                                                                     |
| `digitPlaceholder` | `digit-placeholder`  | Character instead of missing digits                                                                                | `string`         | `'_'`                                                                    |
| `disablePastDates` | `disable-past-dates` | Disable past dates pick in date picker                                                                             | `boolean`        | `false`                                                                  |
| `error`            | `error`              | Red text under the element, makes the label and border red                                                         | `string`         | `''`                                                                     |
| `format`           | `format`             | Format string (date-fns) for the input                                                                             | `string`         | `'dd-MM-yyyy'`                                                           |
| `fullwidth`        | `fullwidth`          | Should the field have 100% width instead of the default width                                                      | `boolean`        | `false`                                                                  |
| `hideAfterChange`  | `hide-after-change`  | Close dropdown picker after change date                                                                            | `boolean`        | `true`                                                                   |
| `label`            | `label`              | Large text over element                                                                                            | `string`         | `''`                                                                     |
| `placeholder`      | `placeholder`        | Input placeholder                                                                                                  | `string`         | `''`                                                                     |
| `range`            | `range`              | Allow the selection of date range                                                                                  | `boolean`        | `false`                                                                  |
| `value`            | --                   | Value of date field as date object, or null, or array of two elements with the corresponding values for range mode | `Date or Date[]` | `this.range     ? [new Date(), addDays(new Date(), 1)]     : new Date()` |


## Events

| Event    | Description                                                                                                                                    | Type               |
| -------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| `change` | onChange event returns a date object, or null if no value is present, or an array of two elements with the corresponding values for range mode | `CustomEvent<any>` |


## Dependencies

### Depends on

- [nv-dropdown](#nv-dropdown)
- [nv-dropdown-button](#nv-dropdown-button)
- [nv-date-input](#nv-date-input)
- [nv-icon](#nv-icon)
- [nv-dropdown-container](#nv-dropdown-container)
- [nv-date-picker](#nv-date-picker)
- [nv-label](#nv-label)

### Graph
```mermaid
graph TD;
  nv-date-field --> nv-dropdown
  nv-date-field --> nv-dropdown-button
  nv-date-field --> nv-date-input
  nv-date-field --> nv-icon
  nv-date-field --> nv-dropdown-container
  nv-date-field --> nv-date-picker
  nv-date-field --> nv-label
  nv-date-input --> nv-input
  nv-date-input --> context-consumer
  nv-icon --> context-consumer
  nv-date-picker --> nv-icon
  nv-date-picker --> context-consumer
  style nv-date-field fill:#f9f,stroke:#333,stroke-width:4px
```



# nv-date-input
## Properties

| Property           | Attribute           | Description                                                                                       | Type                                                   | Default                                                                |
| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ---------------------------------------------------------------------- |
| `digitPlaceholder` | `digit-placeholder` | Character instead of missing digits                                                               | `string`                                               | `'_'`                                                                  |
| `disabled`         | `disabled`          | If input is disabled or not                                                                       | `boolean`                                              | `false`                                                                |
| `format`           | `format`            | Format string (date-fns) for the date input, no need for time input                               | `string`                                               | `this.inputType === DateOrTimeInputType.DATE ? 'dd-MM-yyyy' : 'HH:mm'` |
| `fullwidth`        | `fullwidth`         | Should the input have 100% width instead of the default width                                     | `boolean`                                              | `false`                                                                |
| `inputType`        | `input-type`        | Type of input                                                                                     | `DateOrTimeInputType.DATE or DateOrTimeInputType.TIME` | `DateOrTimeInputType.DATE`                                             |
| `invalid`          | `invalid`           | If input is invalid or not                                                                        | `boolean`                                              | `false`                                                                |
| `localeState`      | --                  | Current locale received from provider                                                             | `ProviderState`                                        | `undefined`                                                            |
| `placeholder`      | `placeholder`       | Input placeholder                                                                                 | `string`                                               | `''`                                                                   |
| `value`            | `value`             | Value of input as date object for date input, or string in 'HH:mm' format for time input, or null | `Date or string`                                       | `null`                                                                 |


## Events

| Event    | Description                                                                                                                       | Type               |
| -------- | --------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| `blur`   |                                                                                                                                   | `CustomEvent<any>` |
| `change` | onChange event returns a date object for date input, or a string in 'HH:mm' format for time input, or null if no value is present | `CustomEvent<any>` |


## Slots

| Slot     | Description            |
| -------- | ---------------------- |
| `"icon"` | content for input slot |


## Dependencies

### Used by

 - [nv-date-field](#nv-date-field)
 - [nv-time-field](#nv-time-field)

### Depends on

- [nv-input](#nv-input)
- [context-consumer](#context-consumer)

### Graph
```mermaid
graph TD;
  nv-date-input --> nv-input
  nv-date-input --> context-consumer
  nv-date-field --> nv-date-input
  nv-time-field --> nv-date-input
  style nv-date-input fill:#f9f,stroke:#333,stroke-width:4px
```



# nv-date-picker
## Properties

| Property           | Attribute            | Description                                                                                                        | Type             | Default |
| ------------------ | -------------------- | ------------------------------------------------------------------------------------------------------------------ | ---------------- | ------- |
| `auto`             | `auto`               | If date picker should automatically switch to next value in range mode                                             | `boolean`        | `true`  |
| `disablePastDates` | `disable-past-dates` | Disable past dates pick                                                                                            | `boolean`        | `false` |
| `range`            | `range`              | Allow the selection of date range                                                                                  | `boolean`        | `false` |
| `rangeState`       | `range-state`        | Currently selected value in range mode Useful in cases when date picker is only allowed to select one of the dates | `number`         | `0`     |
| `value`            | --                   | Value of date field as date object, or null, or array of two elements with the corresponding values for range mode | `Date or Date[]` | `null`  |


## Events

| Event    | Description                                                                                                                                 | Type                          |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
| `change` | onChange event returns a date object, or null if no value is present, an array of two elements with the corresponding values for range mode | `CustomEvent<Date or Date[]>` |


## Dependencies

### Used by

 - [nv-date-field](#nv-date-field)

### Depends on

- [nv-icon](#nv-icon)
- [context-consumer](#context-consumer)

### Graph
```mermaid
graph TD;
  nv-date-picker --> nv-icon
  nv-date-picker --> context-consumer
  nv-icon --> context-consumer
  nv-date-field --> nv-date-picker
  style nv-date-picker fill:#f9f,stroke:#333,stroke-width:4px
```



# nv-dropdown
## Properties

| Property                     | Attribute                        | Description                                                                | Type                                                                                            | Default                       |
| ---------------------------- | -------------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------------------------- |
| `closeOutsideClickEventType` | `close-outside-click-event-type` | event type for useOutsideClick                                             | `closeOutsideEvents.click or closeOutsideEvents.mousedown`                                      | `closeOutsideEvents.click`    |
| `disabled`                   | `disabled`                       | disables the dropdown                                                      | `boolean`                                                                                       | `false`                       |
| `full`                       | `full`                           | For full-width dropdowns (like select, serch, etc)                         | `boolean`                                                                                       | `false`                       |
| `isContainerStatic`          | `is-container-static`            | sets `position: static` for nv-dropdown-container                          | `boolean`                                                                                       | `false`                       |
| `isOpen`                     | `is-open`                        | if the nv-dropdown-container should be visible                             | `boolean`                                                                                       | `false`                       |
| `useAutoPosition`            | `use-auto-position`              | the dropdown-container is rendered on top if it does not fit on the screen | `boolean`                                                                                       | `false`                       |
| `useButtonClick`             | `use-button-click`               | toggles the dropdown after dropdown-button click                           | `boolean`                                                                                       | `true`                        |
| `useOutsideClick`            | `use-outside-click`              | closes the dropdown after an outside click                                 | `boolean`                                                                                       | `true`                        |
| `width`                      | `width`                          | width option: flexible -> width: 100%; max-content -> width: max-content;  | `DropdownButtonWidth.default or DropdownButtonWidth.flexible or DropdownButtonWidth.maxContent` | `DropdownButtonWidth.default` |


## Events

| Event    | Description                   | Type                   |
| -------- | ----------------------------- | ---------------------- |
| `toggle` | onToggle event returns isOpen | `CustomEvent<boolean>` |


## Dependencies

### Used by

 - [nv-color-field](#nv-color-field)
 - [nv-date-field](#nv-date-field)
 - [nv-navbar](#nv-navbar)
 - [nv-navbar-item](#nv-navbar-item)
 - [nv-search](#nv-search)
 - [nv-select](#nv-select)
 - [nv-services-menu](#nv-services-menu)
 - [nv-time-field](#nv-time-field)

### Graph
```mermaid
graph TD;
  nv-color-field --> nv-dropdown
  nv-date-field --> nv-dropdown
  nv-navbar --> nv-dropdown
  nv-navbar-item --> nv-dropdown
  nv-search --> nv-dropdown
  nv-select --> nv-dropdown
  nv-services-menu --> nv-dropdown
  nv-time-field --> nv-dropdown
  style nv-dropdown fill:#f9f,stroke:#333,stroke-width:4px
```



# nv-dropdown-button
## Events

| Event            | Description                         | Type               |
| ---------------- | ----------------------------------- | ------------------ |
| `dropdownToggle` | onDropdownToggle throws after click | `CustomEvent<any>` |


## Dependencies

### Used by

 - [nv-color-field](#nv-color-field)
 - [nv-date-field](#nv-date-field)
 - [nv-navbar](#nv-navbar)
 - [nv-navbar-item](#nv-navbar-item)
 - [nv-search](#nv-search)
 - [nv-select](#nv-select)
 - [nv-services-menu](#nv-services-menu)
 - [nv-time-field](#nv-time-field)

### Graph
```mermaid
graph TD;
  nv-color-field --> nv-dropdown-button
  nv-date-field --> nv-dropdown-button
  nv-navbar --> nv-dropdown-button
  nv-navbar-item --> nv-dropdown-button
  nv-search --> nv-dropdown-button
  nv-select --> nv-dropdown-button
  nv-services-menu --> nv-dropdown-button
  nv-time-field --> nv-dropdown-button
  style nv-dropdown-button fill:#f9f,stroke:#333,stroke-width:4px
```



# nv-dropdown-container
## Properties

| Property   | Attribute   | Description                                | Type      | Default |
| ---------- | ----------- | ------------------------------------------ | --------- | ------- |
| `isStatic` | `is-static` | set nv-dropdown-container position: static | `boolean` | `false` |


## Dependencies

### Used by

 - [nv-color-field](#nv-color-field)
 - [nv-date-field](#nv-date-field)
 - [nv-navbar](#nv-navbar)
 - [nv-navbar-item](#nv-navbar-item)
 - [nv-search](#nv-search)
 - [nv-select](#nv-select)
 - [nv-services-menu](#nv-services-menu)
 - [nv-time-field](#nv-time-field)

### Graph
```mermaid
graph TD;
  nv-color-field --> nv-dropdown-container
  nv-date-field --> nv-dropdown-container
  nv-navbar --> nv-dropdown-container
  nv-navbar-item --> nv-dropdown-container
  nv-search --> nv-dropdown-container
  nv-select --> nv-dropdown-container
  nv-services-menu --> nv-dropdown-container
  nv-time-field --> nv-dropdown-container
  style nv-dropdown-container fill:#f9f,stroke:#333,stroke-width:4px
```



# nv-grid
## Properties

| Property | Attribute | Description | Type     | Default |
| -------- | --------- | ----------- | -------- | ------- |
| `tag`    | `tag`     |             | `string` | `'div'` |



# nv-col
## Properties

| Property      | Attribute       | Description                                                                                                                | Type     | Default |
| ------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
| `alignSelfLg` | `align-self-lg` | align-self-lg connected with .align-self-lg-{$prop} class.                                                                 | `string` | `''`    |
| `alignSelfMd` | `align-self-md` | align-self-md connected with .align-self-md-{$prop} class.                                                                 | `string` | `''`    |
| `alignSelfSm` | `align-self-sm` | align-self-sm connected with .align-self-sm-{$prop} class.                                                                 | `string` | `''`    |
| `alignSelfXl` | `align-self-xl` | align-self-xl connected with .align-self-xl-{$prop} class.                                                                 | `string` | `''`    |
| `alignSelfXs` | `align-self-xs` | align-self-xs connected with .align-self-xs-{$prop} class.                                                                 | `string` | `''`    |
| `display`     | `display`       | Add display-{$property} class;                                                                                             | `string` | `''`    |
| `lg`          | `lg`            | lg connected with .col-lg-{$prop} class. For example: "lg = 6" add ".col-lg-6" class at classList.                         | `string` | `''`    |
| `md`          | `md`            | md connected with .col-md-{$prop} class. For example: "md = 6" add ".col-md-6" class at classList.                         | `string` | `''`    |
| `offsetLg`    | `offset-lg`     | ofset-lg connected with .ofset-lg-{$prop} class.                                                                           | `string` | `''`    |
| `offsetMd`    | `offset-md`     | ofset-md connected with .ofset-md-{$prop} class.                                                                           | `string` | `''`    |
| `offsetSm`    | `offset-sm`     | ofset-sm connected with .ofset-sm-{$prop} class.                                                                           | `string` | `''`    |
| `offsetXl`    | `offset-xl`     | ofset-xl connected with .ofset-xl-{$prop} class.                                                                           | `string` | `''`    |
| `offsetXs`    | `offset-xs`     | ofset-xs connected with .ofset-xs-{$prop} class.                                                                           | `string` | `''`    |
| `orderLg`     | `order-lg`      | Controls column order at lg screen resolution. Connected with  order-lg-{$prop}. Also achived 'first' and 'last' property. | `string` | `''`    |
| `orderMd`     | `order-md`      | Controls column order at md screen resolution. Connected with  order-md-{$prop}. Also achived 'first' and 'last' property. | `string` | `''`    |
| `orderSm`     | `order-sm`      | Controls column order at sm screen resolution. Connected with  order-sm-{$prop}. Also achived 'first' and 'last' property. | `string` | `''`    |
| `orderXl`     | `order-xl`      | Controls column order at xl screen resolution. Connected with  order-xl-{$prop}. Also achived 'first' and 'last' property. | `string` | `''`    |
| `orderXs`     | `order-xs`      | Controls column order at xs screen resolution. Connected with  order-xs-{$prop}. Also achived 'first' and 'last' property. | `string` | `''`    |
| `sm`          | `sm`            | sm connected with .col-sm-{$prop} class. For example: "sm = 6" add ".col-sm-6" class at classList. For screens 600px ...   | `string` | `''`    |
| `xl`          | `xl`            | xs connected with .col-xs-{$prop} class. For example: "xs = 6" add ".col-xs-6" class at classList.                         | `string` | `''`    |
| `xs`          | `xs`            | xs connected with .col-xs-{$prop} class. For example: "xs = 6" add ".col-xs-6" class at classList. For screens < 600px.    | `string` | `''`    |



# nv-container
## Properties

| Property | Attribute | Description                     | Type      | Default |
| -------- | --------- | ------------------------------- | --------- | ------- |
| `fluid`  | `fluid`   | Enable/disable fluid mode       | `boolean` | `false` |
| `tag`    | `tag`     | HTML tag, which used as wrapper | `string`  | `'div'` |



# nv-row
## Properties

| Property         | Attribute          | Description                                                     | Type      | Default |
| ---------------- | ------------------ | --------------------------------------------------------------- | --------- | ------- |
| `alignContentLg` | `align-content-lg` | alignContent-lg connected with .align-content-lg-{$prop} class. | `string`  | `''`    |
| `alignContentMd` | `align-content-md` | alignContent-md connected with .align-content-md-{$prop} class. | `string`  | `''`    |
| `alignContentSm` | `align-content-sm` | alignContent-sm connected with .align-content-sm-{$prop} class. | `string`  | `''`    |
| `alignContentXl` | `align-content-xl` | alignContent-xl connected with .align-content-xl-{$prop} class. | `string`  | `''`    |
| `alignContentXs` | `align-content-xs` | alignContent-xs connected with .align-content-xs-{$prop} class. | `string`  | `''`    |
| `alignLg`        | `align-lg`         | align-lg connected with .align-items-lg-{$prop} class.          | `string`  | `''`    |
| `alignMd`        | `align-md`         | align-md connected with .align-items-md-{$prop} class.          | `string`  | `''`    |
| `alignSm`        | `align-sm`         | align-sm} connected with .align-items-sm}-{$prop} class.        | `string`  | `''`    |
| `alignXl`        | `align-xl`         | align-xl connected with .align-items-xl-{$prop} class.          | `string`  | `''`    |
| `alignXs`        | `align-xs`         | align-xs connected with .align-items-xs-{$prop} class.          | `string`  | `''`    |
| `justifyLg`      | `justify-lg`       | justify-lg connected with .justify-content-lg-{$prop} class.    | `string`  | `''`    |
| `justifyMd`      | `justify-md`       | justify-md connected with .justify-content-md-{$prop} class.    | `string`  | `''`    |
| `justifySm`      | `justify-sm`       | justify-sm connected with .justify-content-sm-{$prop} class.    | `string`  | `''`    |
| `justifyXl`      | `justify-xl`       | justify-xl connected with .justify-content-xl-{$prop} class.    | `string`  | `''`    |
| `justifyXs`      | `justify-xs`       | justify-xs connected with .justify-content-xs-{$prop} class.    | `string`  | `''`    |
| `noGutters`      | `no-gutters`       | Set gutters = 0.                                                | `boolean` | `false` |



# nv-icon
## Properties

| Property | Attribute | Description                                                                                                              | Type                                                            | Default        |
| -------- | --------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- | -------------- |
| `name`   | `name`    | The icon to use from the built-in set of icons. Only alpha characters and dash are allowed.                              | `string`                                                        | `undefined`    |
| `size`   | `size`    | The size of the icon. Available options are: `sm`, `md`, `lg`, and `xlg`.                                                | `IconSizes.LG or IconSizes.MD or IconSizes.SM or IconSizes.XLG` | `IconSizes.SM` |
| `src`    | `src`     | The exact path to an SVG file on a server. If used, it overrides the path formed by `name` and `public-path` attributes. | `string`                                                        | `undefined`    |


## Dependencies

### Used by

 - [nv-accordion](#nv-accordion)
 - [nv-chip](#nv-chip)
 - [nv-color-picker](#nv-color-picker)
 - [nv-date-field](#nv-date-field)
 - [nv-date-picker](#nv-date-picker)
 - [nv-list-group](#nv-list-group)
 - [nv-navbar](#nv-navbar)
 - [nv-navbar-item](#nv-navbar-item)
 - [nv-search](#nv-search)
 - [nv-select](#nv-select)
 - [nv-time-field](#nv-time-field)
 - [nv-uploader](#nv-uploader)
 - [nv-upsloader](#nv-upsloader)

### Depends on

- [context-consumer](#context-consumer)

### Graph
```mermaid
graph TD;
  nv-icon --> context-consumer
  nv-accordion --> nv-icon
  nv-chip --> nv-icon
  nv-color-picker --> nv-icon
  nv-date-field --> nv-icon
  nv-date-picker --> nv-icon
  nv-list-group --> nv-icon
  nv-navbar --> nv-icon
  nv-navbar-item --> nv-icon
  nv-search --> nv-icon
  nv-select --> nv-icon
  nv-time-field --> nv-icon
  nv-uploader --> nv-icon
  nv-upsloader --> nv-icon
  style nv-icon fill:#f9f,stroke:#333,stroke-width:4px
```



# nv-icon-button
## Properties

| Property   | Attribute  | Description        | Type      | Default |
| ---------- | ---------- | ------------------ | --------- | ------- |
| `disabled` | `disabled` | If button disabled | `boolean` | `false` |


## Dependencies

### Used by

 - [nv-services-menu](#nv-services-menu)

### Graph
```mermaid
graph TD;
  nv-services-menu --> nv-icon-button
  style nv-icon-button fill:#f9f,stroke:#333,stroke-width:4px
```



# nv-input
## Properties

| Property        | Attribute         | Description                                                                | Type      | Default             |
| --------------- | ----------------- | -------------------------------------------------------------------------- | --------- | ------------------- |
| `autocomplete`  | `autocomplete`    | If input should provide autocomplete                                       | `string`  | `'on'`              |
| `autofocus`     | `autofocus`       | If input should autofocus on mount                                         | `boolean` | `false`             |
| `controlled`    | `controlled`      | If input is controlled or not                                              | `boolean` | `false`             |
| `defaultValue`  | `default-value`   | Default value for the input                                                | `string`  | `''`                |
| `disabled`      | `disabled`        | If input is disabled or not                                                | `boolean` | `false`             |
| `flexible`      | `flexible`        | makes the input stretch (use with useContainer = false)                    | `boolean` | `false`             |
| `inputTabIndex` | `input-tab-index` | tabIndex of the input                                                      | `number`  | `0`                 |
| `invalid`       | `invalid`         | If input is invalid or not                                                 | `boolean` | `false`             |
| `name`          | `name`            | Name attribute for the input                                               | `string`  | `''`                |
| `placeholder`   | `placeholder`     | Placeholder for the input                                                  | `string`  | `''`                |
| `readonly`      | `readonly`        | Whenever input is readonly or not                                          | `boolean` | `false`             |
| `required`      | `required`        | Whenever input is required or not                                          | `boolean` | `false`             |
| `type`          | `type`            | Type attribute for the input                                               | `string`  | `'text'`            |
| `uid`           | `uid`             | Used for connect nv-label and nv-input as default browser "for - id" pair. | `string`  | `''`                |
| `useContainer`  | `use-container`   | Use styled div container                                                   | `boolean` | `true`              |
| `value`         | `value`           | Value for the input                                                        | `string`  | `this.defaultValue` |


## Events

| Event    | Description                                | Type                  |
| -------- | ------------------------------------------ | --------------------- |
| `blur`   |                                            | `CustomEvent<void>`   |
| `change` | onChange event returns current input value | `CustomEvent<string>` |


## Dependencies

### Used by

 - [nv-date-input](#nv-date-input)
 - [nv-search](#nv-search)
 - [nv-select](#nv-select)
 - [nv-text-field](#nv-text-field)

### Graph
```mermaid
graph TD;
  nv-date-input --> nv-input
  nv-search --> nv-input
  nv-select --> nv-input
  nv-text-field --> nv-input
  style nv-input fill:#f9f,stroke:#333,stroke-width:4px
```



# nv-label
## Properties

| Property      | Attribute     | Description                                                                | Type      | Default |
| ------------- | ------------- | -------------------------------------------------------------------------- | --------- | ------- |
| `description` | `description` | text between label and element                                             | `string`  | `''`    |
| `error`       | `error`       | red text under the element, makes the label red                            | `string`  | `''`    |
| `label`       | `label`       | large text over element                                                    | `string`  | `''`    |
| `required`    | `required`    | Whenever input is required or not                                          | `boolean` | `false` |
| `uid`         | `uid`         | Used for connect nv-label and nv-input as default browser "for - id" pair. | `string`  | `''`    |


## Dependencies

### Used by

 - [nv-checkbox](#nv-checkbox)
 - [nv-color-field](#nv-color-field)
 - [nv-date-field](#nv-date-field)
 - [nv-radio-group](#nv-radio-group)
 - [nv-select](#nv-select)
 - [nv-switch](#nv-switch)
 - [nv-text-field](#nv-text-field)
 - [nv-time-field](#nv-time-field)

### Graph
```mermaid
graph TD;
  nv-checkbox --> nv-label
  nv-color-field --> nv-label
  nv-date-field --> nv-label
  nv-radio-group --> nv-label
  nv-select --> nv-label
  nv-switch --> nv-label
  nv-text-field --> nv-label
  nv-time-field --> nv-label
  style nv-label fill:#f9f,stroke:#333,stroke-width:4px
```



# nv-list-group
## Properties

| Property        | Attribute        | Description                             | Type                                                                                                         | Default                 |
| --------------- | ---------------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ----------------------- |
| `disabled`      | `disabled`       | Disables the list and changes styles    | `boolean`                                                                                                    | `false`                 |
| `flexDirection` | `flex-direction` | Flex direction option (column, row)     | `FlexDirections.COLUMN or FlexDirections.COLUMN_REVERSE or FlexDirections.ROW or FlexDirections.ROW_REVERSE` | `FlexDirections.COLUMN` |
| `label`         | `label`          | Large main text in the head of the List | `string`                                                                                                     | `''`                    |


## Dependencies

### Depends on

- [nv-icon](#nv-icon)

### Graph
```mermaid
graph TD;
  nv-list-group --> nv-icon
  nv-icon --> context-consumer
  style nv-list-group fill:#f9f,stroke:#333,stroke-width:4px
```



# nv-list
## Properties

| Property        | Attribute        | Description                         | Type                                                                                                         | Default                 |
| --------------- | ---------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------ | ----------------------- |
| `flexDirection` | `flex-direction` | Flex direction option (column, row) | `FlexDirections.COLUMN or FlexDirections.COLUMN_REVERSE or FlexDirections.ROW or FlexDirections.ROW_REVERSE` | `FlexDirections.COLUMN` |



# nv-list-item
## Properties

| Property             | Attribute              | Description                                                 | Type                                                                                                         | Default                 |
| -------------------- | ---------------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ----------------------- |
| `disableLeftPadding` | `disable-left-padding` | Disable left padding. You can add your own styles with css. | `boolean`                                                                                                    | `false`                 |
| `flexDirection`      | `flex-direction`       | Flex direction option (column, row)                         | `FlexDirections.COLUMN or FlexDirections.COLUMN_REVERSE or FlexDirections.ROW or FlexDirections.ROW_REVERSE` | `FlexDirections.COLUMN` |



# nv-loader



# nv-locale-provider
## Properties

| Property | Attribute | Description | Type                       | Default      |
| -------- | --------- | ----------- | -------------------------- | ------------ |
| `locale` | `locale`  |             | `Locales.EN or Locales.RU` | `Locales.RU` |


## Slots

| Slot | Description                              |
| ---- | ---------------------------------------- |
|      | components that depend on provider state |


## Dependencies

### Depends on

- [context-consumer](#context-consumer)

### Graph
```mermaid
graph TD;
  nv-locale-provider --> context-consumer
  style nv-locale-provider fill:#f9f,stroke:#333,stroke-width:4px
```



# nv-modal
## Properties

| Property               | Attribute                 | Description                                         | Type                                                                                                                                                                                                                                                                         | Default                        |
| ---------------------- | ------------------------- | --------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
| `bodyClass`            | `body-class`              | Class to add to document.body when modal is mounted | `string`                                                                                                                                                                                                                                                                     | `'overflow'`                   |
| `closeOnBackdropClick` | `close-on-backdrop-click` | If modal should close when clicking on backdrop     | `boolean`                                                                                                                                                                                                                                                                    | `true`                         |
| `fixed`                | `fixed`                   | If modal is fixed or absolute                       | `boolean`                                                                                                                                                                                                                                                                    | `true`                         |
| `open`                 | `open`                    | If modal is open or not                             | `boolean`                                                                                                                                                                                                                                                                    | `true`                         |
| `overflow`             | `overflow`                | Which overflow value to use for inner container     | `"auto" or "hidden" or "visible"`                                                                                                                                                                                                                                            | `'auto'`                       |
| `position`             | `position`                | Position of the modal window inside container       | `ModalPositions.BOTTOM_CENTER or ModalPositions.BOTTOM_LEFT or ModalPositions.BOTTOM_RIGHT or ModalPositions.MIDDLE_CENTER or ModalPositions.MIDDLE_LEFT or ModalPositions.MIDDLE_RIGHT or ModalPositions.TOP_CENTER or ModalPositions.TOP_LEFT or ModalPositions.TOP_RIGHT` | `ModalPositions.MIDDLE_CENTER` |
| `size`                 | `size`                    | Size of the modal window                            | `ModalSizes.DEFAULT or ModalSizes.LG or ModalSizes.MD or ModalSizes.SM or ModalSizes.XL`                                                                                                                                                                                     | `ModalSizes.DEFAULT`           |
| `zIndex`               | `z-index`                 | Custom z-index if needed                            | `number`                                                                                                                                                                                                                                                                     | `undefined`                    |


## Events

| Event    | Description                                   | Type                   |
| -------- | --------------------------------------------- | ---------------------- |
| `toggle` | Toggle event returns current modal open state | `CustomEvent<boolean>` |


## Slots

| Slot | Description             |
| ---- | ----------------------- |
|      | content of modal window |



# nv-modal-actions
## Slots

| Slot | Description    |
| ---- | -------------- |
|      | content inside |



# nv-navbar
## Properties

| Property         | Attribute         | Description                                                                                                                                                                                                                                                             | Type            | Default     |
| ---------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ----------- |
| `hidingDistance` | `hiding-distance` | The minimum distance between the last normal item and the stand-alone item (with the `is-last` attribute) of the `nv-navbar-main` sub-component. If the distance is reached, the last normal item will be hidden within the dynamically generated `More` dropdown item. | `number`        | `60`        |
| `isVertical`     | `is-vertical`     | If the navbar should have a vertical orientation with menu items stacked on top of each other.                                                                                                                                                                          | `boolean`       | `false`     |
| `localeState`    | --                | The current locale                                                                                                                                                                                                                                                      | `ProviderState` | `undefined` |


## Slots

| Slot | Description                                                                                                                 |
| ---- | --------------------------------------------------------------------------------------------------------------------------- |
|      | One or more of the `nv-navbar`'s sub-components. The normal order is: `nv-navbar-start`, `nv-navbar-main`, `nv-navbar-end`. |


## Dependencies

### Depends on

- [nv-dropdown](#nv-dropdown)
- [nv-dropdown-button](#nv-dropdown-button)
- [nv-dropdown-container](#nv-dropdown-container)
- [nv-icon](#nv-icon)
- [nv-navbar-item](#nv-navbar-item)
- [context-consumer](#context-consumer)

### Graph
```mermaid
graph TD;
  nv-navbar --> nv-dropdown
  nv-navbar --> nv-dropdown-button
  nv-navbar --> nv-dropdown-container
  nv-navbar --> nv-icon
  nv-navbar --> nv-navbar-item
  nv-navbar --> context-consumer
  nv-icon --> context-consumer
  nv-navbar-item --> nv-dropdown
  nv-navbar-item --> nv-dropdown-button
  nv-navbar-item --> nv-icon
  nv-navbar-item --> nv-dropdown-container
  style nv-navbar fill:#f9f,stroke:#333,stroke-width:4px
```



# nv-navbar-end
## Slots

| Slot | Description                                                                                                                                                                                                                                                                                    |
| ---- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|      | Whatever. You only get the predefined formatting. Normally, it is used to place a clickable image and a drop-down menu for the currently logged-in user. Note: Use `<a class="user-link">` along with `<nv-navbar-item class="user-menu">` to get a well-formed user block with little effort. |



# nv-navbar-item
## Properties

| Property      | Attribute      | Description                                                                                                                                                                                 | Type                                     | Default    |
| ------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------- |
| `arrowBefore` | `arrow-before` | If the arrow should go before the item's title. Applies only if the `isDropdown` prop is `true`.                                                                                            | `boolean`                                | `false`    |
| `arrowTo`     | `arrow-to`     | The direction of the arrow. Applies only if the `isDropdown` prop is `true`.                                                                                                                | `"bottom" or "left" or "right" or "top"` | `'bottom'` |
| `isActive`    | `is-active`    | If special styles should be applied to the item to highlight it among the others. Normally, it will be the current page item.                                                               | `boolean`                                | `false`    |
| `isDropdown`  | `is-dropdown`  | If the item should be used as a dropdown menu. When true, the item must have elements with `slot="title"` and `slot="content"` attributes as its children to enable the drop-down behavior. | `boolean`                                | `false`    |
| `isLast`      | `is-last`      | If the item should stand alone in the end of the `nv-navbar-main` sub-component. Normally, it will be the `Services` menu icon.                                                             | `boolean`                                | `false`    |
| `noArrow`     | `no-arrow`     | If the arrow should be hidden. Applies only if the `isDropdown` prop is `true`.                                                                                                             | `boolean`                                | `false`    |


## Slots

| Slot        | Description                                                                                                                              |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
|             | Whatever                                                                                                                                 |
| `"addon"`   | Anything to be placed just before the item's title.                                                                                      |
| `"content"` | The drop-down's content. It must be a `ul` element with `li` children elements if you want to get a well-formed list with little effort. |
| `"title"`   | The item's title that usually is (but doesn't have to be) text.                                                                          |


## Dependencies

### Used by

 - [nv-navbar](#nv-navbar)

### Depends on

- [nv-dropdown](#nv-dropdown)
- [nv-dropdown-button](#nv-dropdown-button)
- [nv-icon](#nv-icon)
- [nv-dropdown-container](#nv-dropdown-container)

### Graph
```mermaid
graph TD;
  nv-navbar-item --> nv-dropdown
  nv-navbar-item --> nv-dropdown-button
  nv-navbar-item --> nv-icon
  nv-navbar-item --> nv-dropdown-container
  nv-icon --> context-consumer
  nv-navbar --> nv-navbar-item
  style nv-navbar-item fill:#f9f,stroke:#333,stroke-width:4px
```



# nv-navbar-main
## Slots

| Slot | Description                    |
| ---- | ------------------------------ |
|      | One or more `nv-navbar-item`-s |



# nv-navbar-start
## Slots

| Slot | Description                                                                                                                  |
| ---- | ---------------------------------------------------------------------------------------------------------------------------- |
|      | Whatever. You only get the predefined formatting. Normally, it is used to place a graphic or text logo representing a brand. |



# nv-pagination
## Properties

| Property     | Attribute     | Description                                        | Type     | Default        |
| ------------ | ------------- | -------------------------------------------------- | -------- | -------------- |
| `activeItem` | `active-item` | The active (current) page number                   | `number` | `1`            |
| `ariaLabel`  | `aria-label`  | The component's aria-label                         | `string` | `'Pagination'` |
| `limit`      | `limit`       | The number of pagination items viewable at a time. | `number` | `7`            |
| `total`      | `total`       | The total number of pages                          | `number` | `undefined`    |


## Events

| Event        | Des