@noveo/web-components NPM

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.

Install copy-webpack-plugin:

yarn add copy-webpack-plugin --dev

npm install copy-webpack-plugin --save-dev

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

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`