asdasdasddsadsadas

Noveo Web Components

Web Components was designed by Noveo UI Kit and builded on Stencil

Documentation was written on Storybook: http://components.noveogroup.com

If you want to run storybook locally then you can use serve

cd storybook-static
serve

How to use

If you want to use this components on React application then you should use special components for React: http://example.com

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

Installation

By npm:

npm install @noveo/web-components --save

Or by yarn:

yarn add @noveo/web-components

Usage

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

defineCustomElements(window);

If you want to support Edge and IE11:

import { applyPolyfills, defineCustomElements } from '@noveo/web-components/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>

Components

nv-alert

Properties

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

---

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 | ButtonColors.primary | ButtonColors.secondary | 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 | ButtonSizes.md | ButtonSizes.responsiveContainer | ButtonSizes.responsiveText | ButtonSizes.sm | ButtonSizes.xl | ButtonSizes.xs | 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	''
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-dropdown-container

Dependencies

Used by

• nv-select

Graph

graph TD;
  nv-select --> nv-dropdown-container
  style nv-dropdown-container fill:#f9f,stroke:#333,stroke-width:4px

---

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
publicPath	public-path	The custom path to assets dir on a server. Should be used with name attribute to make up a full path like this: /${publicPath}assets/icons/${iconName}.svg	string	''
size	size	The size of the icon. Available options are: sm, md, and lg.	IconSizes.LG | IconSizes.MD | IconSizes.SM	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-select

Graph

graph TD;
  nv-select --> nv-icon
  style nv-icon 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
disabled	disabled	If input is disabled or not	boolean	false
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	''
required	required	Whenever input is required or not	boolean	false
type	type	Type attribute for the input	string	'text'
value	value	Value for the input	string	''

Events

Event	Description	Type
change	onChange event returns current input value	CustomEvent<string>

---

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

Dependencies

Used by

• nv-checkbox
• nv-radio-group
• nv-select
• nv-switch

Graph

graph TD;
  nv-checkbox --> nv-label
  nv-radio-group --> nv-label
  nv-select --> nv-label
  nv-switch --> nv-label
  style nv-label fill:#f9f,stroke:#333,stroke-width:4px

---

nv-radio-group

Properties

Property	Attribute	Description	Type	Default
column	column	switch flex-direction (row | column)	boolean	true
description	description	text between label and radio-group	string	''
error	error	red text under the radio-group, makes the label red	string	''
label	label	large text over radio-group	string	''
value	value	makes an element with this value active	string	null

Events

Event	Description	Type
change	onChange event returns the value of the selected radio	CustomEvent<string>

Dependencies

Depends on

• nv-label

Graph

graph TD;
  nv-radio-group --> nv-label
  style nv-radio-group fill:#f9f,stroke:#333,stroke-width:4px

---

nv-select

Properties

Property	Attribute	Description	Type	Default
description	description	text between label and select	string	''
disabled	disabled	disables the select and changes styles	boolean	false
error	error	red text under the select, makes the label red	string	''
items	--	initial data	Item[]	[]
label	label	large text over select	string	''
placeholder	placeholder	placeholder	string	''
type	type	style option (primary, checkbox, multi)	SelectTypes.checkbox | SelectTypes.multi | SelectTypes.primary	SelectTypes.primary
value	value	initial value	string | string[]	null

Events

Event	Description	Type
change	onChange event returns selected values	CustomEvent<string | string[]>

Dependencies

Depends on

• nv-icon
• nv-checkbox
• nv-label
• nv-dropdown
• nv-dropdown-button
• nv-dropdown-container

Graph

graph TD;
  nv-select --> nv-icon
  nv-select --> nv-checkbox
  nv-select --> nv-label
  nv-select --> nv-dropdown
  nv-select --> nv-dropdown-button
  nv-select --> nv-dropdown-container
  nv-checkbox --> nv-label
  style nv-select fill:#f9f,stroke:#333,stroke-width:4px

---

nv-switch

Properties

Property	Attribute	Description	Type	Default
checked	checked	activity flag	boolean	false
description	description	text between label and switch	string	''
disabled	disabled	disables the switch and changes styles	boolean	false
error	error	red text under the switch, makes the label red	string	''
label	label	large text over switch	string	''
name	name	name prop for input	string	''
value	value	switch text	string	''

Events

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

Dependencies

Depends on

• nv-label

Graph

graph TD;
  nv-switch --> nv-label
  style nv-switch fill:#f9f,stroke:#333,stroke-width:4px

---

nv-tabs

Properties

Property	Attribute	Description	Type	Default
active	active	id of the active tab	string	defaultActive
type	type	style option (primary, secondary, table)	TabTypes.primary | TabTypes.secondary | TabTypes.table	TabTypes.primary

Events

Event	Description	Type
change	onChange event returns the active-tab-id of the selected tab	CustomEvent<string>

Dependencies

Used by

• nv-tab-example
• nv-table-example

Graph

graph TD;
  nv-tab-example --> nv-tabs
  nv-table-example --> nv-tabs
  style nv-tabs fill:#f9f,stroke:#333,stroke-width:4px

---

nv-table

Properties

Property	Attribute	Description	Type	Default
type	type		TabTypes.primary | TabTypes.secondary | TabTypes.table	TabTypes.table

Dependencies

Depends on

• nv-table
• nv-table-head
• nv-table-cell
• nv-table-body
• nv-table-row
• nv-tabs
• nv-tab
• nv-tab-content
• nv-tab-pane

Graph

graph TD;
  nv-table-example --> nv-table
  nv-table-example --> nv-table-head
  nv-table-example --> nv-table-cell
  nv-table-example --> nv-table-body
  nv-table-example --> nv-table-row
  nv-table-example --> nv-tabs
  nv-table-example --> nv-tab
  nv-table-example --> nv-tab-content
  nv-table-example --> nv-tab-pane
  style nv-table-example fill:#f9f,stroke:#333,stroke-width:4px

---

nv-table-body

Dependencies

Used by

• nv-table-example

Graph

graph TD;
  nv-table-example --> nv-table-body
  style nv-table-body fill:#f9f,stroke:#333,stroke-width:4px

---

nv-table-cell

Properties

Property	Attribute	Description	Type	Default
align	align		TableCellAlignments.center | TableCellAlignments.left | TableCellAlignments.right	TableCellAlignments.left
splitters	splitters		TableSplitters.all | TableSplitters.horizontal | TableSplitters.none | TableSplitters.partial | TableSplitters.vertical	TableSplitters.all

Dependencies

Used by

• nv-table-example

Graph

graph TD;
  nv-table-example --> nv-table-cell
  style nv-table-cell fill:#f9f,stroke:#333,stroke-width:4px

---

nv-table-head

Dependencies

Used by

• nv-table-example

Graph

graph TD;
  nv-table-example --> nv-table-head
  style nv-table-head fill:#f9f,stroke:#333,stroke-width:4px

---

nv-table-row

Properties

Property	Attribute	Description	Type	Default
color	color		TableRowColors.danger | TableRowColors.default | TableRowColors.success	TableRowColors.default
splitters	splitters		TableSplitters.all | TableSplitters.horizontal | TableSplitters.none | TableSplitters.partial | TableSplitters.vertical	undefined

Dependencies

Used by

• nv-table-example

Graph

graph TD;
  nv-table-example --> nv-table-row
  style nv-table-row fill:#f9f,stroke:#333,stroke-width:4px

---

nv-tooltip

Properties

Property	Attribute	Description	Type	Default
boundary	boundary	The element that should act as boundaries for the tooltip.	TooltipBoundaries.SCROLLPARENT | TooltipBoundaries.VIEWPORT | TooltipBoundaries.WINDOW	TooltipBoundaries.VIEWPORT
fadeTime	fade-time	The duration (in seconds) of the tooltip fade-out effect animation	number	0.4
flip	flip	If the tooltip should auto-flip when it starts to overlap its target element.	boolean	true
hideTriggers	hide-triggers	The space-separated events that should close the tooltip when fired on the target (eg. mouseout blur). If empty, the tooltip will never be closed from outside. FYI: You will hardly ever need this attribute, since 'opposite' events for common triggers are added automagically.	string	undefined
isOpen	is-open	If the tooltip should be visible	boolean	false
noArrow	no-arrow	If the tooltip arrow should be hidden	boolean	undefined
placement	placement	The tooltip placement relative to the target	TooltipPlacements.AUTO | TooltipPlacements.AUTOEND | TooltipPlacements.AUTOSTART | TooltipPlacements.BOTTOM | TooltipPlacements.BOTTOMEND | TooltipPlacements.BOTTOMSTART | TooltipPlacements.LEFT | TooltipPlacements.LEFTEND | TooltipPlacements.LEFTSTART | TooltipPlacements.RIGHT | TooltipPlacements.RIGHTEND | TooltipPlacements.RIGHTSTART | TooltipPlacements.TOP | TooltipPlacements.TOPEND | TooltipPlacements.TOPSTART	TooltipPlacements.AUTO
showTriggers	show-triggers	The space-separated events that should open the tooltip when fired on the target (eg. mouseover focus). FYI: If a single click trigger is provided (without hide-triggers), another click event will also be registered on the document object to close the tooltip, for your convenience.	string	undefined
target	target	The CSS selector of the target element	string	undefined
timeout	timeout	How long in milliseconds the tooltip should stay open after the page load.	number	undefined

---