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 |