Noveo Web Components

Web Components was designed using Noveo UI Kit and built on Stencil

Documentation is available in Storybook: http://components.noveogroup.com

To run storybook locally, use serve

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

Because React supports web-components only for 71%: React web-components support

React

If you want to use these components with React please consider using this 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:

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:

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

defineCustomElements(window);

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

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

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

Installation

By npm:

npm install @noveo/web-components --save

Or by yarn:

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 for that component before using the others!

Usage

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

defineCustomElements(window);

To support Edge and IE11:

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

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

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

<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:

yarn add copy-webpack-plugin --dev

or

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:

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

Graph

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

Depends on

• nv-label

Graph

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-select

Depends on

• nv-icon

Graph

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-dropdown
• nv-dropdown-button
• nv-dropdown-container
• nv-color-picker

Graph

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

Depends on

• nv-icon

Graph

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-button
• nv-date-input
• nv-icon
• nv-dropdown-container
• nv-date-picker
• nv-label

Graph

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-time-field

Depends on

• nv-input
• context-consumer

Graph

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

Depends on

• nv-icon
• context-consumer

Graph

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-date-field
• nv-navbar
• nv-navbar-item
• nv-search
• nv-select
• nv-services-menu
• nv-time-field

Graph

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-date-field
• nv-navbar
• nv-navbar-item
• nv-search
• nv-select
• nv-services-menu
• nv-time-field

Graph

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-date-field
• nv-navbar
• nv-navbar-item
• nv-search
• nv-select
• nv-services-menu
• nv-time-field

Graph

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-chip
• nv-color-picker
• nv-date-field
• nv-date-picker
• nv-list-group
• nv-navbar
• nv-navbar-item
• nv-search
• nv-select
• nv-time-field
• nv-uploader
• nv-upsloader

Depends on

• context-consumer

Graph

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

Graph

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-search
• nv-select
• nv-text-field

Graph

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-color-field
• nv-date-field
• nv-radio-group
• nv-select
• nv-switch
• nv-text-field
• nv-time-field

Graph

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

Graph

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

Graph

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-button
• nv-dropdown-container
• nv-icon
• nv-navbar-item
• context-consumer

Graph

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

Depends on

• nv-dropdown
• nv-dropdown-button
• nv-icon
• nv-dropdown-container

Graph

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