@noveo/web-components
TypeScript icon, indicating that this package has built-in type declarations

0.0.16 • Public • Published

Noveo Logo

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

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

Depends on

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

Depends on

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

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

Depends on

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

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

Depends on

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

Depends on

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

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

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

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

Depends on

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

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

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

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

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

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

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

Depends on

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 Description Type
pageChange CustomEvent<any>

Dependencies

Depends on

Graph

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

nv-paper

Properties

Property Attribute Description Type Default
color color Choose color from standart presets; ColorTypes.FORM or ColorTypes.TRANSPARENT or ColorTypes.WHITE ColorTypes.FORM
padding padding Add paddings from presetted sizes; PaddingSizes.LG or PaddingSizes.MD or PaddingSizes.NONE or PaddingSizes.SM PaddingSizes.NONE
shadow shadow Enable/disable box-shadow; boolean false
tag tag HTML - tag, which used as wrapper string 'div'
tile tile Reset border-radius on container; boolean false

Slots

Slot Description
"slot" slot for the components you want to place inside nv-paper

nv-radio-group

Properties

Property Attribute Description Type Default
column column switch flex-direction (row or 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

Graph

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

nv-radio

Properties

Property Attribute Description Type Default
checked checked activity flag boolean false
disabled disabled disables the radio and changes styles boolean false
label label radio text string ''
name name name prop for input any undefined
value value onChange data string undefined

Events

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

nv-search

Properties

Property Attribute Description Type Default
disabled disabled disables the select and changes styles boolean false
isOpen is-open for autofocus boolean false
itemGroupIcon item-group-icon name for group-icon property of item object string 'groupIcon'
itemGroupItems item-group-items name for group-items property of item object string 'groupItems'
itemGroupText item-group-text name for group-text property of item object string 'groupText'
itemGroupValue item-group-value name for group-value property of item object string 'groupValue'
itemText item-text name for text property of item object string 'text'
itemValue item-value name for value property of item object string 'value'
items -- initial data any[] []
notFoundMessage not-found-message will be shown when searching if nothing is found string 'Ничего не найдено'
placeholder placeholder placeholder string ''
returnObject return-object return value or item object boolean false
type type style option (primary, multifilter) SearchTypes.MULTIFILTER or SearchTypes.PRIMARY SearchTypes.MULTIFILTER
value -- initial value any[] []

Events

Event Description Type
change onChange event returns selected values CustomEvent<any>

Dependencies

Depends on

Graph

graph TD;
  nv-search --> nv-icon
  nv-search --> nv-input
  nv-search --> nv-dropdown
  nv-search --> nv-dropdown-button
  nv-search --> nv-dropdown-container
  nv-search --> nv-chip
  nv-icon --> context-consumer
  nv-chip --> nv-icon
  style nv-search 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 ''
itemItems item-items name for items property of item object string 'items'
itemText item-text name for text property of item object string 'text'
itemValue item-value name for value property of item object string 'value'
items -- initial data any[] []
label label large text over select string ''
name name name attribute string ''
placeholder placeholder placeholder string ''
returnObject return-object return value or item object boolean false
type type style option (primary, checkbox, multi) SelectTypes.checkbox or SelectTypes.multi or SelectTypes.primary SelectTypes.primary
value value initial value any null

Events

Event Description Type
change onChange event returns selected values CustomEvent<any>
changeSearch onChangeSearch event returns search string CustomEvent<any>

Dependencies

Depends on

Graph

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

nv-services-menu

Properties

Property Attribute Description Type Default
initialNumberOfBlocks initial-number-of-blocks the number of blocks that will be visible initially number 9
localeState -- Locale received from locale provider ProviderState undefined
numberOfBlocks number-of-blocks number of services transferred will be generated the number of slots with names 'service-block-$id' $id = (0 , numberOfBlocks-1) number 0
showAll show-all false - show max initialNumberOfBlocks services true - show all services boolean false

Slots

Slot Description
"button" for button
"service-block-$id" slot for the service components you want to place inside nv-services-menu

Dependencies

Depends on

Graph

graph TD;
  nv-services-menu --> nv-icon-button
  nv-services-menu --> nv-dropdown
  nv-services-menu --> nv-dropdown-button
  nv-services-menu --> nv-dropdown-container
  nv-services-menu --> context-consumer
  style nv-services-menu fill:#f9f,stroke:#333,stroke-width:4px

nv-spacer

Properties

Property Attribute Description Type Default
size size Number inside this props are height of this component. !IMPORTANT: You must specify the unit of measurement: px, em, rem, or another. string '20px'

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

Graph

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

nv-table

Properties

Property Attribute Description Type Default
layout layout Which table layout to use TableLayout.auto or TableLayout.fixed TableLayout.auto

Slots

Slot Description
content inside

nv-table-body

Slots

Slot Description
content inside

nv-table-cell

Properties

Property Attribute Description Type Default
align align Text alignment for cell content Can be overwritten in child component TableCellAlignments.center or TableCellAlignments.left or TableCellAlignments.right TableCellAlignments.left
colSpan col-span how many cells to span across number null
color color TableCellColors.danger or TableCellColors.default or TableCellColors.success or TableCellColors.temp or TableCellColors.white TableCellColors.default
rowSpan row-span how many rows to span across number null
splitters splitters Which splitters to use between rows and columns Can be overwritten in child component TableSplitters.all or TableSplitters.horizontal or TableSplitters.none or TableSplitters.partial or TableSplitters.vertical TableSplitters.all

nv-table-head

Slots

Slot Description
content inside

nv-table-row

Properties

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

nv-tabs

Properties

Property Attribute Description Type Default
active active id of the active tab string defaultActive
mode mode active mode allows you to switch tabs when clicked TabMode.active or TabMode.passive TabMode.active
type type style option (primary, secondary, table) TabTypes.primary or TabTypes.secondary or TabTypes.table TabTypes.primary

Events

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

nv-tab

Properties

Property Attribute Description Type Default
activeTabId active-tab-id id for tab-button selecting string '0'
type type style option (primary, secondary, table) TabTypes.primary or TabTypes.secondary or TabTypes.table TabTypes.primary

nv-tab-content

Properties

Property Attribute Description Type Default
active active id of the displayed tab-pane string '0'

nv-tab-pane

Properties

Property Attribute Description Type Default
tabId tab-id id for tab selecting string '0'

nv-text

Properties

Property Attribute Description Type Default
bold bold Font-weight BoldTypes.bold or BoldTypes.normal or BoldTypes.semi BoldTypes.normal
italic italic Add italic - style for current text-type boolean false
nomargin nomargin Remove Default margins form HTML tag boolean false
tag tag HTML tag in which the text will be rendered string 'span'
type type Type of style-preset TextTypes.comment or TextTypes.component-comment or TextTypes.dropdown-selected or TextTypes.error or TextTypes.h1 or TextTypes.h2 or TextTypes.h3 or TextTypes.h3-error or TextTypes.input-placeholder or TextTypes.input-text or TextTypes.link or TextTypes.menu-item or TextTypes.menu-item-selected or TextTypes.text or TextTypes.text-btn-big or TextTypes.text-btn-small TextTypes.text

nv-text-field

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 "" undefined
description description text between label and element string ''
disabled disabled If input is disabled or not boolean false
error error red text under the element, makes the label red string ''
invalid invalid If input is invalid or not boolean false
label label large text over element string ''
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'
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 "" this.defaultValue

Dependencies

Depends on

Graph

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

nv-textarea

Properties

Property Attribute Description Type Default
autoGrow auto-grow If the textarea should grow in height (instead of showing the scrollbar) to accommodate new content when it is about to overflow. boolean true
autocapitalize autocapitalize The same as in the native <textarea> string undefined
autofocus autofocus The same as in the native <textarea> boolean false
cols cols The same as in the native <textarea> number 20
disabled disabled The same as in the native <textarea> boolean undefined
form form The same as in the native <textarea> string undefined
innerId inner-id The value of the id attribute of the inner native <textarea> element. string undefined
invalid invalid If special styles should be applied to visually indicate the component's invalid state. boolean false
maxRows max-rows If the content reaches this number of rows, the scrollbar will show up. Applies only when the autoGrow is true. number undefined
maxlength maxlength The same as in the native <textarea> number undefined
minlength minlength The same as in the native <textarea> number undefined
name name The same as in the native <textarea> string undefined
noHandle no-handle If the native drag handle for textarea resizing should be visible. boolean false
placeholder placeholder The same as in the native <textarea> string undefined
readonly readonly The same as in the native <textarea> boolean undefined
required required The same as in the native <textarea> boolean undefined
rows rows The same as in the native <textarea> number 2
spellcheck spellcheck The same as in the native <textarea> boolean true
value value The same as in the native <textarea> string ''
wrap wrap The same as in the native <textarea> string undefined

Events

Event Description Type
change CustomEvent<any>

nv-time-field

Properties

Property Attribute Description Type Default
description description Text between label and element string ''
digitPlaceholder digit-placeholder Character instead of missing digits string '_'
disabled disabled If input is disabled or not boolean false
error error Red text under the element, makes the label red string ''
fullwidth fullwidth Should the field have 100% width instead of the default width boolean false
label label Large text over element string ''
localeState -- Locale received from locale provider ProviderState undefined
placeholder placeholder Input placeholder string null
value value Value of time field as string in 'HH:mm' format, or null string null

Events

Event Description Type
change onChange event returns a string in "HH:mm" format, or null if no value is present CustomEvent<string>

Dependencies

Depends on

Graph

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

nv-time-picker

Properties

Property Attribute Description Type Default
localeState -- Locale received from locale provider ProviderState undefined
value value Value of time field as string in 'HH:mm' format, or null string null

Events

Event Description Type
change onChange event returns value as string in 'HH:mm' format if both minutes and hours are selected CustomEvent<string>

Dependencies

Used by

Depends on

Graph

graph TD;
  nv-time-picker --> context-consumer
  nv-time-field --> nv-time-picker
  style nv-time-picker fill:#f9f,stroke:#333,stroke-width:4px

nv-title

Properties

Property Attribute Description Type Default
error error Used for add the .error class and change the text color to red; boolean false
nomargin nomargin Remove Default margins form Headings boolean false
tag tag Type of tag string 'h3'
type type Type of style-preset TextTypes.h1 or TextTypes.h2 or TextTypes.h3 TextTypes.h3

nv-tooltip

Properties

Property Attribute Description Type Default
boundary boundary The element that should act as boundaries for the tooltip. TooltipBoundaries.DOCUMENT or TooltipBoundaries.VIEWPORT TooltipBoundaries.VIEWPORT
dataPopperPlacement data-popper-placement Popper attribute. You shouldn't use it. TooltipPlacements.AUTO or TooltipPlacements.AUTO_END or TooltipPlacements.AUTO_START or TooltipPlacements.BOTTOM or TooltipPlacements.BOTTOM_END or TooltipPlacements.BOTTOM_START or TooltipPlacements.LEFT or TooltipPlacements.LEFT_END or TooltipPlacements.LEFT_START or TooltipPlacements.RIGHT or TooltipPlacements.RIGHT_END or TooltipPlacements.RIGHT_START or TooltipPlacements.TOP or TooltipPlacements.TOP_END or TooltipPlacements.TOP_START undefined
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 false
placement placement The tooltip placement relative to the target TooltipPlacements.AUTO or TooltipPlacements.AUTO_END or TooltipPlacements.AUTO_START or TooltipPlacements.BOTTOM or TooltipPlacements.BOTTOM_END or TooltipPlacements.BOTTOM_START or TooltipPlacements.LEFT or TooltipPlacements.LEFT_END or TooltipPlacements.LEFT_START or TooltipPlacements.RIGHT or TooltipPlacements.RIGHT_END or TooltipPlacements.RIGHT_START or TooltipPlacements.TOP or TooltipPlacements.TOP_END or TooltipPlacements.TOP_START 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

Slots

Slot Description
for nv-tooltip-content

Dependencies

Depends on

Graph

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

nv-tooltip-arrow

Properties

Property Attribute Description Type Default
placement placement arrow placement set from nv-tooltip string TooltipPlacements.AUTO

Dependencies

Used by

Graph

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

nv-tooltip-content

Slots

Slot Description
tooltip content

nv-uploader

Properties

Property Attribute Description Type Default
accept accept The comma-separated list of allowed file types. Note: when strict is false, this attribute has the same behavior as in the native <input type="file">: works only for file selector dialogs (has no effect on the 'drag-n-drop' feature) and can be opted out. string undefined
capture capture The string specifying which camera to use for capture. The same as in the native <input type="file"> string undefined
files -- The FileList object listing every selected file. The same as in the native <input type="file"> FileList undefined
hint hint The scrollable text description appearing under the file type icons when no files have yet been selected or uploaded. string undefined
invalid invalid If special styles should be applied to visually indicate the component's invalid state (ie. wrong files have been selected). boolean false
localImageUrls -- The object holding names and urls of the locally selected image files. { [key: string]: string; } {}
mode mode The mode of file presentation: file – guarantees a document icon plus a file name as a caption. image – guarantees a preview thumb (for supported image types) or a document icon (for unsuppported image types and non-image files) plus a file name as a tooltip. auto – chooses file or image mode for you depending on which file types prevail – image or non-image ones. It is the default mode suitable for most use cases. Modes.AUTO or Modes.FILE or Modes.IMAGE Modes.AUTO
multiple multiple If more than 1 file can be selected at a time. Note: when strict is false, this attribute has the same behavior as in the native <input type="file">: works only for file selector dialogs (has no effect on the 'drag-n-drop' feature). boolean false
progress progress The number (percentage out of 100) that will be used as the current value for the inner upload progress bar. number undefined
size size The size of the Uploader string 'md'
strict strict If strict checks against the multiple and accept attributes should be enabled. If true, the component will actually restrict the number and types of files users can select (even with the 'drag-n-drop' feature) and will set the visual invalid state as needed. boolean true
upload -- If a function is provided for this prop, the additional upload icon will be shown upon file selection. A click on that icon will call the provided function. (event: MouseEvent or KeyboardEvent, hostEl: HTMLElement) => void undefined
uploadedFiles -- The array of objects holding the uploaded files data: name, type, and url. { name?: string; type: string; url?: string; }[] undefined

Events

Event Description Type
change CustomEvent<any>
uploadCancel CustomEvent<any>

Dependencies

Depends on

Graph

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

nv-upsloader

Properties

Property Attribute Description Type Default
accept accept The comma-separated list of allowed file types. Note: When strict is false, this attribute has the same behavior as in the native <input type="file">: works only for file selector dialogs (has no effect on the 'drag-n-drop' feature) and can be opted out. string undefined
allFiles -- The array listing every selected file. Each file is a native File object. File[] []
capture capture The same as in the native <input type="file"> string undefined
fileMaxNumber file-max-number The maximum allowed number of files. Note: Any 'falsy' value means 'not restricted'. number undefined
fileMaxSize file-max-size The maximum allowed size (in bytes) of a single file. Note: Any 'falsy' value means 'not restricted'. number undefined
hint hint The scrollable text/html description appearing under the file type icons when no files have yet been selected or uploaded. string undefined
invalid invalid If special styles should be applied to visually indicate the component's invalid state (ie. too many files have been selected). boolean false
localImageUrls -- The object holding names and urls of the locally selected image files. { [key: string]: string; } {}
localeState -- The current locale that controls all aspects of the component i18n. ProviderState undefined
mode mode The mode of file presentation: file – guarantees a document icon plus a file name as a caption. image – guarantees a preview thumb (for supported image types) or a document icon (for unsupported image types and non-image files) plus a file name as a tooltip. auto – chooses file or image mode for you depending on which file types prevail – image or non-image ones. It is suitable for most cases. Modes.AUTO or Modes.FILE or Modes.IMAGE Modes.AUTO
multiple multiple If more than 1 file can be selected at a time. Note: when strict is false, this attribute has the same behavior as in the native <input type="file">: works only for file selector dialogs (has no effect on the 'drag-n-drop' feature). boolean false
progress progress The number (percentage out of 100) that will be used as the current value for the inner upload progress bar. number undefined
size size The size of the Upsloader that also affects its shape: standard (rectangle) or smaller (square). "md" or "sm" 'md'
strict strict If strict checks against the multiple, accept, file-max-size, and file-max-number attributes should be enabled. If true, the component will actually restrict the number, type, and size of files users can select (even with the 'drag-n-drop' feature) and will set the visual invalid state as needed. boolean true
upload -- If a function is provided for this prop, the additional upload icon will be shown upon file selection. A click on that icon will call the provided function. (event: MouseEvent or KeyboardEvent, hostEl: HTMLElement) => void undefined
uploadedFiles -- The array of objects holding the uploaded files data: name, type, and url. CustomFile[] undefined

Events

Event Description Type
change CustomEvent<any>
uploadCancel CustomEvent<any>

Dependencies

Depends on

Graph

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

nv-public-path-provider

Properties

Property Attribute Description Type Default
customIcons -- {} {}
publicPath public-path string '/assets/icons/'

Slots

Slot Description
components that depend on provider state

Dependencies

Depends on

Graph

graph TD;
  nv-public-path-provider --> context-consumer
  style nv-public-path-provider fill:#f9f,stroke:#333,stroke-width:4px

Readme

Keywords

none

Package Sidebar

Install

npm i @noveo/web-components

Weekly Downloads

71

Version

0.0.16

License

MIT

Unpacked Size

26.7 MB

Total Files

3148

Last publish

Collaborators

  • adergaev
  • noveo-adobrodiy
  • agsh
  • noveogroup
  • noobikz0r
  • zlblden
  • koluch