carbon-components-angular
Version:
Next generation components
2,974 lines • 129 kB
HTML
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>carbon-components-angular documentation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
<link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top visible-xs">
<a href="./" class="navbar-brand">carbon-components-angular documentation</a>
<button type="button" class="btn btn-default btn-menu fa fa-bars" id="btn-menu"></button>
</div>
<div class="xs-menu menu" id="mobile-menu">
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search">
</div>
<nav>
<ul class="list">
<li class="title">
<a href="./index.html">carbon-components-angular documentation</a>
</li>
<li class="divider"></li>
<li class="chapter">
<a data-type="chapter-link" href="./index.html"><span class="fa fa-home"></span>Getting started</a>
<ul class="links">
<li class="link">
<a
href="./overview.html"
href="./overview.html"
>
<span class="fa fa-th"></span>Overview
</a>
</li>
<li class="link">
<a href="./index.html" ><span class="fa fa-file-text-o"></span>README</a>
</li>
<li class="link">
<a href="./changelog.html"
>
<span class="fa fa-file-text-o"></span>CHANGELOG
</a>
</li>
<li class="link">
<a href="./license.html"
>
<span class="fa fa-file-text-o"></span>LICENSE
</a>
</li>
</ul>
</li>
<li class="chapter">
<a data-type="chapter-link" href="./modules.html" >
<div class="menu-toggler linked" data-toggle="collapse"
data-target="#xs-modules-links"
>
<span class="fa fa-archive"></span>
<span class="link-name">Modules</span>
<span class="fa fa-angle-down"></span>
</div>
</a>
<ul class="links collapse "
id="xs-modules-links"
>
<li class="link">
<a href="./modules/AccordionModule.html" >AccordionModule</a>
</li>
<li class="link">
<a href="./modules/BannerModule.html" >BannerModule</a>
</li>
<li class="link">
<a href="./modules/ButtonModule.html" >ButtonModule</a>
</li>
<li class="link">
<a href="./modules/CalendarModule.html" >CalendarModule</a>
</li>
<li class="link">
<a href="./modules/CheckboxModule.html" >CheckboxModule</a>
</li>
<li class="link">
<a href="./modules/CodeSnippetModule.html" >CodeSnippetModule</a>
</li>
<li class="link">
<a href="./modules/ComboBoxModule.html" >ComboBoxModule</a>
</li>
<li class="link">
<a href="./modules/ContentSwitcherModule.html" >ContentSwitcherModule</a>
</li>
<li class="link">
<a href="./modules/DialogModule.html" >DialogModule</a>
</li>
<li class="link">
<a href="./modules/DropdownModule.html" >DropdownModule</a>
</li>
<li class="link">
<a href="./modules/I18nModule.html" >I18nModule</a>
</li>
<li class="link">
<a href="./modules/IconModule.html" >IconModule</a>
</li>
<li class="link">
<a href="./modules/InputModule.html" >InputModule</a>
</li>
<li class="link">
<a href="./modules/LinkModule.html" >LinkModule</a>
</li>
<li class="link">
<a href="./modules/ListGroupModule.html" >ListGroupModule</a>
</li>
<li class="link">
<a href="./modules/LoadingModule.html" >LoadingModule</a>
</li>
<li class="link">
<a href="./modules/ModalModule.html" >ModalModule</a>
</li>
<li class="link">
<a href="./modules/NFormsModule.html" >NFormsModule</a>
</li>
<li class="link">
<a href="./modules/NotificationModule.html" >NotificationModule</a>
</li>
<li class="link">
<a href="./modules/PaginationModule.html" >PaginationModule</a>
</li>
<li class="link">
<a href="./modules/PillInputModule.html" >PillInputModule</a>
</li>
<li class="link">
<a href="./modules/PlaceholderModule.html" >PlaceholderModule</a>
</li>
<li class="link">
<a href="./modules/ProgressIndicatorModule.html" >ProgressIndicatorModule</a>
</li>
<li class="link">
<a href="./modules/RadioModule.html" >RadioModule</a>
</li>
<li class="link">
<a href="./modules/SampleModule.html" >SampleModule</a>
</li>
<li class="link">
<a href="./modules/SelectModule.html" >SelectModule</a>
</li>
<li class="link">
<a href="./modules/StaticIconModule.html" >StaticIconModule</a>
</li>
<li class="link">
<a href="./modules/SwitchModule.html" >SwitchModule</a>
</li>
<li class="link">
<a href="./modules/TableModule.html" >TableModule</a>
</li>
<li class="link">
<a href="./modules/TabsModule.html" >TabsModule</a>
</li>
<li class="link">
<a href="./modules/TilesModule.html" >TilesModule</a>
</li>
<li class="link">
<a href="./modules/ToggleModule.html" >ToggleModule</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-components-links"
>
<span class="fa fa-cogs"></span>
<span>Components</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="xs-components-links"
>
<li class="link">
<a href="./components/Accordion.html" >Accordion</a>
</li>
<li class="link">
<a href="./components/AccordionItem.html" >AccordionItem</a>
</li>
<li class="link">
<a href="./components/AlertModal.html" >AlertModal</a>
</li>
<li class="link">
<a href="./components/AlertModalStory.html" >AlertModalStory</a>
</li>
<li class="link">
<a href="./components/Banner.html" >Banner</a>
</li>
<li class="link">
<a href="./components/Calendar.html" >Calendar</a>
</li>
<li class="link">
<a href="./components/CalendarHeader.html" >CalendarHeader</a>
</li>
<li class="link">
<a href="./components/CalendarMonth.html" >CalendarMonth</a>
</li>
<li class="link">
<a href="./components/CalendarMonths.html" >CalendarMonths</a>
</li>
<li class="link">
<a href="./components/CalendarQuarter.html" >CalendarQuarter</a>
</li>
<li class="link">
<a href="./components/CalendarYear.html" >CalendarYear</a>
</li>
<li class="link">
<a href="./components/Checkbox.html" >Checkbox</a>
</li>
<li class="link">
<a href="./components/ClickableTile.html" >ClickableTile</a>
</li>
<li class="link">
<a href="./components/CodeSnippet.html" >CodeSnippet</a>
</li>
<li class="link">
<a href="./components/ComboBox.html" >ComboBox</a>
</li>
<li class="link">
<a href="./components/ContentSwitcher.html" >ContentSwitcher</a>
</li>
<li class="link">
<a href="./components/Dialog.html" >Dialog</a>
</li>
<li class="link">
<a href="./components/DialogPlaceholder.html" >DialogPlaceholder</a>
</li>
<li class="link">
<a href="./components/Dropdown.html" >Dropdown</a>
</li>
<li class="link">
<a href="./components/DropdownList.html" >DropdownList</a>
</li>
<li class="link">
<a href="./components/DynamicTableStory.html" >DynamicTableStory</a>
</li>
<li class="link">
<a href="./components/ExpansionTableStory.html" >ExpansionTableStory</a>
</li>
<li class="link">
<a href="./components/Icon.html" >Icon</a>
</li>
<li class="link">
<a href="./components/Label.html" >Label</a>
</li>
<li class="link">
<a href="./components/ListGroup.html" >ListGroup</a>
</li>
<li class="link">
<a href="./components/Loading.html" >Loading</a>
</li>
<li class="link">
<a href="./components/Modal.html" >Modal</a>
</li>
<li class="link">
<a href="./components/ModalFooter.html" >ModalFooter</a>
</li>
<li class="link">
<a href="./components/ModalHeader.html" >ModalHeader</a>
</li>
<li class="link">
<a href="./components/ModalPlaceholder.html" >ModalPlaceholder</a>
</li>
<li class="link">
<a href="./components/ModalStory.html" >ModalStory</a>
</li>
<li class="link">
<a href="./components/Notification.html" >Notification</a>
</li>
<li class="link">
<a href="./components/NotificationStory.html" >NotificationStory</a>
</li>
<li class="link">
<a href="./components/OverflowMenu.html" >OverflowMenu</a>
</li>
<li class="link">
<a href="./components/OverflowMenuOption.html" >OverflowMenuOption</a>
</li>
<li class="link">
<a href="./components/OverflowMenuPane.html" >OverflowMenuPane</a>
</li>
<li class="link">
<a href="./components/OverflowTableStory.html" >OverflowTableStory</a>
</li>
<li class="link">
<a href="./components/Overlay.html" >Overlay</a>
</li>
<li class="link">
<a href="./components/Pagination.html" >Pagination</a>
</li>
<li class="link">
<a href="./components/PaginationStory.html" >PaginationStory</a>
</li>
<li class="link">
<a href="./components/PaginationTableStory.html" >PaginationTableStory</a>
</li>
<li class="link">
<a href="./components/Pill.html" >Pill</a>
</li>
<li class="link">
<a href="./components/PillInput.html" >PillInput</a>
</li>
<li class="link">
<a href="./components/Placeholder.html" >Placeholder</a>
</li>
<li class="link">
<a href="./components/ProgressIndicator.html" >ProgressIndicator</a>
</li>
<li class="link">
<a href="./components/Radio.html" >Radio</a>
</li>
<li class="link">
<a href="./components/RadioGroup.html" >RadioGroup</a>
</li>
<li class="link">
<a href="./components/Sample.html" >Sample</a>
</li>
<li class="link">
<a href="./components/SampleModal.html" >SampleModal</a>
</li>
<li class="link">
<a href="./components/SampleSub.html" >SampleSub</a>
</li>
<li class="link">
<a href="./components/Select.html" >Select</a>
</li>
<li class="link">
<a href="./components/Sprite.html" >Sprite</a>
</li>
<li class="link">
<a href="./components/StaticIcon.html" >StaticIcon</a>
</li>
<li class="link">
<a href="./components/Switch.html" >Switch</a>
</li>
<li class="link">
<a href="./components/Tab.html" >Tab</a>
</li>
<li class="link">
<a href="./components/TabHeaders.html" >TabHeaders</a>
</li>
<li class="link">
<a href="./components/Table.html" >Table</a>
</li>
<li class="link">
<a href="./components/TableStory.html" >TableStory</a>
</li>
<li class="link">
<a href="./components/Tabs.html" >Tabs</a>
</li>
<li class="link">
<a href="./components/Tile.html" >Tile</a>
</li>
<li class="link">
<a href="./components/Toast.html" >Toast</a>
</li>
<li class="link">
<a href="./components/Toast.html" >Toast</a>
</li>
<li class="link">
<a href="./components/ToastStory.html" >ToastStory</a>
</li>
<li class="link">
<a href="./components/Toggle.html" >Toggle</a>
</li>
<li class="link">
<a href="./components/Tooltip.html" >Tooltip</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-directives-links"
>
<span class="fa fa-code"></span>
<span>Directives</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="xs-directives-links"
>
<li class="link">
<a href="./directives/Button.html" >Button</a>
</li>
<li class="link">
<a href="./directives/ContentSwitcherOption.html" >ContentSwitcherOption</a>
</li>
<li class="link">
<a href="./directives/DialogDirective.html" >DialogDirective</a>
</li>
<li class="link">
<a href="./directives/EllipsisTooltip.html" >EllipsisTooltip</a>
</li>
<li class="link">
<a href="./directives/Link.html" >Link</a>
</li>
<li class="link">
<a href="./directives/OptGroup.html" >OptGroup</a>
</li>
<li class="link">
<a href="./directives/Option.html" >Option</a>
</li>
<li class="link">
<a href="./directives/OverflowMenuDirective.html" >OverflowMenuDirective</a>
</li>
<li class="link">
<a href="./directives/ScrollableList.html" >ScrollableList</a>
</li>
<li class="link">
<a href="./directives/TextArea.html" >TextArea</a>
</li>
<li class="link">
<a href="./directives/TextInput.html" >TextInput</a>
</li>
<li class="link">
<a href="./directives/TooltipDirective.html" >TooltipDirective</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-classes-links"
>
<span class="fa fa-file-code-o"></span>
<span>Classes</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="xs-classes-links"
>
<li class="link">
<a href="./classes/AbstractDropdownView.html" >AbstractDropdownView</a>
</li>
<li class="link">
<a href="./classes/BaseModal.html" >BaseModal</a>
</li>
<li class="link">
<a href="./classes/CheckboxChange.html" >CheckboxChange</a>
</li>
<li class="link">
<a href="./classes/CustomHeaderItem.html" >CustomHeaderItem</a>
</li>
<li class="link">
<a href="./classes/DateTimeModel.html" >DateTimeModel</a>
</li>
<li class="link">
<a href="./classes/ModalContainer.html" >ModalContainer</a>
</li>
<li class="link">
<a href="./classes/PaginationModel.html" >PaginationModel</a>
</li>
<li class="link">
<a href="./classes/RadioChange.html" >RadioChange</a>
</li>
<li class="link">
<a href="./classes/SampleBase.html" >SampleBase</a>
</li>
<li class="link">
<a href="./classes/SwitchChange.html" >SwitchChange</a>
</li>
<li class="link">
<a href="./classes/TableHeaderItem.html" >TableHeaderItem</a>
</li>
<li class="link">
<a href="./classes/TableItem.html" >TableItem</a>
</li>
<li class="link">
<a href="./classes/TableModel.html" >TableModel</a>
</li>
<li class="link">
<a href="./classes/ToggleChange.html" >ToggleChange</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-injectables-links"
>
<span class="fa fa-long-arrow-down"></span>
<span>Injectables</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="xs-injectables-links"
>
<li class="link">
<a href="./injectables/BannerService.html" >BannerService</a>
</li>
<li class="link">
<a href="./injectables/DialogService.html" >DialogService</a>
</li>
<li class="link">
<a href="./injectables/I18n.html" >I18n</a>
</li>
<li class="link">
<a href="./injectables/IconService.html" >IconService</a>
</li>
<li class="link">
<a href="./injectables/ModalService.html" >ModalService</a>
</li>
<li class="link">
<a href="./injectables/NotificationDisplayService.html" >NotificationDisplayService</a>
</li>
<li class="link">
<a href="./injectables/NotificationService.html" >NotificationService</a>
</li>
<li class="link">
<a href="./injectables/PlaceholderService.html" >PlaceholderService</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-interfaces-links"
>
<span class="fa fa-info"></span>
<span>Interfaces</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="xs-interfaces-links"
>
<li class="link">
<a href="./interfaces/AbsolutePosition.html" >AbsolutePosition</a>
</li>
<li class="link">
<a href="./interfaces/AlertModalData.html" >AlertModalData</a>
</li>
<li class="link">
<a href="./interfaces/BannerContent.html" >BannerContent</a>
</li>
<li class="link">
<a href="./interfaces/DialogConfig.html" >DialogConfig</a>
</li>
<li class="link">
<a href="./interfaces/ListItem.html" >ListItem</a>
</li>
<li class="link">
<a href="./interfaces/ModalButton.html" >ModalButton</a>
</li>
<li class="link">
<a href="./interfaces/NotificationContent.html" >NotificationContent</a>
</li>
<li class="link">
<a href="./interfaces/NotificationContent.html" >NotificationContent</a>
</li>
<li class="link">
<a href="./interfaces/SampleInterface.html" >SampleInterface</a>
</li>
<li class="link">
<a href="./interfaces/SizeMap.html" >SizeMap</a>
</li>
<li class="link">
<a href="./interfaces/ToastContent.html" >ToastContent</a>
</li>
<li class="link">
<a href="./interfaces/ToastContent.html" >ToastContent</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-miscellaneous-links"
>
<span class="fa fa-cubes"></span>
<span>Miscellaneous</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="xs-miscellaneous-links"
>
<li class="link">
<a href="./miscellaneous/enumerations.html" data-type="entity-link" >Enums</a>
</li>
<li class="link">
<a href="./miscellaneous/functions.html" data-type="entity-link" >Functions</a>
</li>
<li class="link">
<a href="./miscellaneous/typealiases.html" data-type="entity-link" >Type aliases</a>
</li>
<li class="link">
<a href="./miscellaneous/variables.html" data-type="entity-link" >Variables</a>
</li>
</ul>
</li>
<li class="chapter">
<a data-type="chapter-link" href="./coverage.html" class="active" ><span class="fa fa-tasks"></span>Documentation coverage</a>
</li>
<li class="divider"></li>
<li class="copyright">
Documentation generated using <a href="https://compodoc.github.io/website/" target="_blank">
<img src=".//images/compodoc-vectorise.svg" class="img-responsive">
</a>
</li>
</ul>
</nav>
</div>
<div class="container-fluid main">
<div class="row main">
<div class="hidden-xs menu">
<nav>
<ul class="list">
<li class="title">
<a href="./index.html">carbon-components-angular documentation</a>
</li>
<li class="divider"></li>
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search">
</div>
<li class="chapter">
<a data-type="chapter-link" href="./index.html"><span class="fa fa-home"></span>Getting started</a>
<ul class="links">
<li class="link">
<a
href="./overview.html"
href="./overview.html"
>
<span class="fa fa-th"></span>Overview
</a>
</li>
<li class="link">
<a href="./index.html" ><span class="fa fa-file-text-o"></span>README</a>
</li>
<li class="link">
<a href="./changelog.html"
>
<span class="fa fa-file-text-o"></span>CHANGELOG
</a>
</li>
<li class="link">
<a href="./license.html"
>
<span class="fa fa-file-text-o"></span>LICENSE
</a>
</li>
</ul>
</li>
<li class="chapter">
<a data-type="chapter-link" href="./modules.html" >
<div class="menu-toggler linked" data-toggle="collapse"
data-target="#modules-links"
>
<span class="fa fa-archive"></span>
<span class="link-name">Modules</span>
<span class="fa fa-angle-down"></span>
</div>
</a>
<ul class="links collapse "
id="modules-links"
>
<li class="link">
<a href="./modules/AccordionModule.html" >AccordionModule</a>
</li>
<li class="link">
<a href="./modules/BannerModule.html" >BannerModule</a>
</li>
<li class="link">
<a href="./modules/ButtonModule.html" >ButtonModule</a>
</li>
<li class="link">
<a href="./modules/CalendarModule.html" >CalendarModule</a>
</li>
<li class="link">
<a href="./modules/CheckboxModule.html" >CheckboxModule</a>
</li>
<li class="link">
<a href="./modules/CodeSnippetModule.html" >CodeSnippetModule</a>
</li>
<li class="link">
<a href="./modules/ComboBoxModule.html" >ComboBoxModule</a>
</li>
<li class="link">
<a href="./modules/ContentSwitcherModule.html" >ContentSwitcherModule</a>
</li>
<li class="link">
<a href="./modules/DialogModule.html" >DialogModule</a>
</li>
<li class="link">
<a href="./modules/DropdownModule.html" >DropdownModule</a>
</li>
<li class="link">
<a href="./modules/I18nModule.html" >I18nModule</a>
</li>
<li class="link">
<a href="./modules/IconModule.html" >IconModule</a>
</li>
<li class="link">
<a href="./modules/InputModule.html" >InputModule</a>
</li>
<li class="link">
<a href="./modules/LinkModule.html" >LinkModule</a>
</li>
<li class="link">
<a href="./modules/ListGroupModule.html" >ListGroupModule</a>
</li>
<li class="link">
<a href="./modules/LoadingModule.html" >LoadingModule</a>
</li>
<li class="link">
<a href="./modules/ModalModule.html" >ModalModule</a>
</li>
<li class="link">
<a href="./modules/NFormsModule.html" >NFormsModule</a>
</li>
<li class="link">
<a href="./modules/NotificationModule.html" >NotificationModule</a>
</li>
<li class="link">
<a href="./modules/PaginationModule.html" >PaginationModule</a>
</li>
<li class="link">
<a href="./modules/PillInputModule.html" >PillInputModule</a>
</li>
<li class="link">
<a href="./modules/PlaceholderModule.html" >PlaceholderModule</a>
</li>
<li class="link">
<a href="./modules/ProgressIndicatorModule.html" >ProgressIndicatorModule</a>
</li>
<li class="link">
<a href="./modules/RadioModule.html" >RadioModule</a>
</li>
<li class="link">
<a href="./modules/SampleModule.html" >SampleModule</a>
</li>
<li class="link">
<a href="./modules/SelectModule.html" >SelectModule</a>
</li>
<li class="link">
<a href="./modules/StaticIconModule.html" >StaticIconModule</a>
</li>
<li class="link">
<a href="./modules/SwitchModule.html" >SwitchModule</a>
</li>
<li class="link">
<a href="./modules/TableModule.html" >TableModule</a>
</li>
<li class="link">
<a href="./modules/TabsModule.html" >TabsModule</a>
</li>
<li class="link">
<a href="./modules/TilesModule.html" >TilesModule</a>
</li>
<li class="link">
<a href="./modules/ToggleModule.html" >ToggleModule</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#components-links"
>
<span class="fa fa-cogs"></span>
<span>Components</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="components-links"
>
<li class="link">
<a href="./components/Accordion.html" >Accordion</a>
</li>
<li class="link">
<a href="./components/AccordionItem.html" >AccordionItem</a>
</li>
<li class="link">
<a href="./components/AlertModal.html" >AlertModal</a>
</li>
<li class="link">
<a href="./components/AlertModalStory.html" >AlertModalStory</a>
</li>
<li class="link">
<a href="./components/Banner.html" >Banner</a>
</li>
<li class="link">
<a href="./components/Calendar.html" >Calendar</a>
</li>
<li class="link">
<a href="./components/CalendarHeader.html" >CalendarHeader</a>
</li>
<li class="link">
<a href="./components/CalendarMonth.html" >CalendarMonth</a>
</li>
<li class="link">
<a href="./components/CalendarMonths.html" >CalendarMonths</a>
</li>
<li class="link">
<a href="./components/CalendarQuarter.html" >CalendarQuarter</a>
</li>
<li class="link">
<a href="./components/CalendarYear.html" >CalendarYear</a>
</li>
<li class="link">
<a href="./components/Checkbox.html" >Checkbox</a>
</li>
<li class="link">
<a href="./components/ClickableTile.html" >ClickableTile</a>
</li>
<li class="link">
<a href="./components/CodeSnippet.html" >CodeSnippet</a>
</li>
<li class="link">
<a href="./components/ComboBox.html" >ComboBox</a>
</li>
<li class="link">
<a href="./components/ContentSwitcher.html" >ContentSwitcher</a>
</li>
<li class="link">
<a href="./components/Dialog.html" >Dialog</a>
</li>
<li class="link">
<a href="./components/DialogPlaceholder.html" >DialogPlaceholder</a>
</li>
<li class="link">
<a href="./components/Dropdown.html" >Dropdown</a>
</li>
<li class="link">
<a href="./components/DropdownList.html" >DropdownList</a>
</li>
<li class="link">
<a href="./components/DynamicTableStory.html" >DynamicTableStory</a>
</li>
<li class="link">
<a href="./components/ExpansionTableStory.html" >ExpansionTableStory</a>
</li>
<li class="link">
<a href="./components/Icon.html" >Icon</a>
</li>
<li class="link">
<a href="./components/Label.html" >Label</a>
</li>
<li class="link">
<a href="./components/ListGroup.html" >ListGroup</a>
</li>
<li class="link">
<a href="./components/Loading.html" >Loading</a>
</li>
<li class="link">
<a href="./components/Modal.html" >Modal</a>
</li>
<li class="link">
<a href="./components/ModalFooter.html" >ModalFooter</a>
</li>
<li class="link">
<a href="./components/ModalHeader.html" >ModalHeader</a>
</li>
<li class="link">
<a href="./components/ModalPlaceholder.html" >ModalPlaceholder</a>
</li>
<li class="link">
<a href="./components/ModalStory.html" >ModalStory</a>
</li>
<li class="link">
<a href="./components/Notification.html" >Notification</a>
</li>
<li class="link">
<a href="./components/NotificationStory.html" >NotificationStory</a>
</li>
<li class="link">
<a href="./components/OverflowMenu.html" >OverflowMenu</a>
</li>
<li class="link">
<a href="./components/OverflowMenuOption.html" >OverflowMenuOption</a>
</li>
<li class="link">
<a href="./components/OverflowMenuPane.html" >OverflowMenuPane</a>
</li>
<li class="link">
<a href="./components/OverflowTableStory.html" >OverflowTableStory</a>
</li>
<li class="link">
<a href="./components/Overlay.html" >Overlay</a>
</li>
<li class="link">
<a href="./components/Pagination.html" >Pagination</a>
</li>
<li class="link">
<a href="./components/PaginationStory.html" >PaginationStory</a>
</li>
<li class="link">
<a href="./components/PaginationTableStory.html" >PaginationTableStory</a>
</li>
<li class="link">
<a href="./components/Pill.html" >Pill</a>
</li>
<li class="link">
<a href="./components/PillInput.html" >PillInput</a>
</li>
<li class="link">
<a href="./components/Placeholder.html" >Placeholder</a>
</li>
<li class="link">
<a href="./components/ProgressIndicator.html" >ProgressIndicator</a>
</li>
<li class="link">
<a href="./components/Radio.html" >Radio</a>
</li>
<li class="link">
<a href="./components/RadioGroup.html" >RadioGroup</a>
</li>
<li class="link">
<a href="./components/Sample.html" >Sample</a>
</li>
<li class="link">
<a href="./components/SampleModal.html" >SampleModal</a>
</li>
<li class="link">
<a href="./components/SampleSub.html" >SampleSub</a>
</li>
<li class="link">
<a href="./components/Select.html" >Select</a>
</li>
<li class="link">
<a href="./components/Sprite.html" >Sprite</a>
</li>
<li class="link">
<a href="./components/StaticIcon.html" >StaticIcon</a>
</li>
<li class="link">
<a href="./components/Switch.html" >Switch</a>
</li>
<li class="link">
<a href="./components/Tab.html" >Tab</a>
</li>
<li class="link">
<a href="./components/TabHeaders.html" >TabHeaders</a>
</li>
<li class="link">
<a href="./components/Table.html" >Table</a>
</li>
<li class="link">
<a href="./components/TableStory.html" >TableStory</a>
</li>
<li class="link">
<a href="./components/Tabs.html" >Tabs</a>
</li>
<li class="link">
<a href="./components/Tile.html" >Tile</a>
</li>
<li class="link">
<a href="./components/Toast.html" >Toast</a>
</li>
<li class="link">
<a href="./components/Toast.html" >Toast</a>
</li>
<li class="link">
<a href="./components/ToastStory.html" >ToastStory</a>
</li>
<li class="link">
<a href="./components/Toggle.html" >Toggle</a>
</li>
<li class="link">
<a href="./components/Tooltip.html" >Tooltip</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#directives-links"
>
<span class="fa fa-code"></span>
<span>Directives</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="directives-links"
>
<li class="link">
<a href="./directives/Button.html" >Button</a>
</li>
<li class="link">
<a href="./directives/ContentSwitcherOption.html" >ContentSwitcherOption</a>
</li>
<li class="link">
<a href="./directives/DialogDirective.html" >DialogDirective</a>
</li>
<li class="link">
<a href="./directives/EllipsisTooltip.html" >EllipsisTooltip</a>
</li>
<li class="link">
<a href="./directives/Link.html" >Link</a>
</li>
<li class="link">
<a href="./directives/OptGroup.html" >OptGroup</a>
</li>
<li class="link">
<a href="./directives/Option.html" >Option</a>
</li>
<li class="link">
<a href="./directives/OverflowMenuDirective.html" >OverflowMenuDirective</a>
</li>
<li class="link">
<a href="./directives/ScrollableList.html" >ScrollableList</a>
</li>
<li class="link">
<a href="./directives/TextArea.html" >TextArea</a>
</li>
<li class="link">
<a href="./directives/TextInput.html" >TextInput</a>
</li>
<li class="link">
<a href="./directives/TooltipDirective.html" >TooltipDirective</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#classes-links"
>
<span class="fa fa-file-code-o"></span>
<span>Classes</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="classes-links"
>
<li class="link">
<a href="./classes/AbstractDropdownView.html" >AbstractDropdownView</a>
</li>
<li class="link">
<a href="./classes/BaseModal.html" >BaseModal</a>
</li>
<li class="link">
<a href="./classes/CheckboxChange.html" >CheckboxChange</a>
</li>
<li class="link">
<a href="./classes/CustomHeaderItem.html" >CustomHeaderItem</a>
</li>
<li class="link">
<a href="./classes/DateTimeModel.html" >DateTimeModel</a>
</li>
<li class="link">
<a href="./classes/ModalContainer.html" >ModalContainer</a>
</li>
<li class="link">
<a href="./classes/PaginationModel.html" >PaginationModel</a>
</li>
<li class="link">
<a href="./classes/RadioChange.html" >RadioChange</a>
</li>
<li class="link">
<a href="./classes/SampleBase.html" >SampleBase</a>
</li>
<li class="link">
<a href="./classes/SwitchChange.html" >SwitchChange</a>
</li>
<li class="link">
<a href="./classes/TableHeaderItem.html" >TableHeaderItem</a>
</li>
<li class="link">
<a href="./classes/TableItem.html" >TableItem</a>
</li>
<li class="link">
<a href="./classes/TableModel.html" >TableModel</a>
</li>
<li class="link">
<a href="./classes/ToggleChange.html" >ToggleChange</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#injectables-links"
>
<span class="fa fa-long-arrow-down"></span>
<span>Injectables</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="injectables-links"
>
<li class="link">
<a href="./injectables/BannerService.html" >BannerService</a>
</li>
<li class="link">
<a href="./injectables/DialogService.html" >DialogService</a>
</li>
<li class="link">
<a href="./injectables/I18n.html" >I18n</a>
</li>
<li class="link">
<a href="./injectables/IconService.html" >IconService</a>
</li>
<li class="link">
<a href="./injectables/ModalService.html" >ModalService</a>
</li>
<li class="link">
<a href="./injectables/NotificationDisplayService.html" >NotificationDisplayService</a>
</li>
<li class="link">
<a href="./injectables/NotificationService.html" >NotificationService</a>
</li>
<li class="link">
<a href="./injectables/PlaceholderService.html" >PlaceholderService</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#interfaces-links"
>
<span class="fa fa-info"></span>
<span>Interfaces</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="interfaces-links"
>
<li class="link">
<a href="./interfaces/AbsolutePosition.html" >AbsolutePosition</a>
</li>
<li class="link">
<a href="./interfaces/AlertModalData.html" >AlertModalData</a>
</li>
<li class="link">
<a href="./interfaces/BannerContent.html" >BannerContent</a>
</li>
<li class="link">
<a href="./interfaces/DialogConfig.html" >DialogConfig</a>
</li>
<li class="link">
<a href="./interfaces/ListItem.html" >ListItem</a>
</li>
<li class="link">
<a href="./interfaces/ModalButton.html" >ModalButton</a>
</li>
<li class="link">
<a href="./interfaces/NotificationContent.html" >NotificationContent</a>
</li>
<li class="link">
<a href="./interfaces/NotificationContent.html" >NotificationContent</a>
</li>
<li class="link">
<a href="./interfaces/SampleInterface.html" >SampleInterface</a>
</li>
<li class="link">
<a href="./interfaces/SizeMap.html" >SizeMap</a>
</li>
<li class="link">
<a href="./interfaces/ToastContent.html" >ToastContent</a>
</li>
<li class="link">
<a href="./interfaces/ToastContent.html" >ToastContent</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#miscellaneous-links"
>
<span class="fa fa-cubes"></span>
<span>Miscellaneous</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="miscellaneous-links"
>
<li class="link">
<a href="./miscellaneous/enumerations.html" data-type="entity-link" >Enums</a>
</li>
<li class="link">
<a href="./miscellaneous/functions.html" data-type="entity-link" >Functions</a>
</li>
<li class="link">
<a href="./miscellaneous/typealiases.html" data-type="entity-link" >Type aliases</a>
</li>
<li class="link">
<a href="./miscellaneous/variables.html" data-type="entity-link" >Variables</a>
</li>
</ul>
</li>
<li class="chapter">
<a data-type="chapter-link" href="./coverage.html" class="active" ><span class="fa fa-tasks"></span>Documentation coverage</a>
</li>
<li class="divider"></li>
<li class="copyright">
Documentation generated using <a href="https://compodoc.github.io/website/" target="_blank">
<img src=".//images/compodoc-vectorise.svg" class="img-responsive">
</a>
</li>
</ul>
</nav>
</div>
<div class="content coverage">
<div class="content-data">
<ol class="breadcrumb">
<li>Documentation coverage</li>
</ol>
<img src="./images/coverage-badge.svg">
<table class="table table-bordered coverage" id="coverage-table">
<thead class="coverage-header">
<tr>
<th>File</th>
<th>Type</th>
<th>Identifier</th>
<th style="text-align:right" class="statements" data-sort-default>Statements</th>
</tr>
</thead>
<tbody>
<tr class="low">
<td>
<a href="./components/AccordionItem.html">src/accordion/accordion-item.component.ts</a>
</td>
<td>
component
</td>
<td>
AccordionItem
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/12)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./components/Accordion.html">src/accordion/accordion.component.ts</a>
</td>
<td>
component
</td>
<td>
Accordion
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/1)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./interfaces/BannerContent.html">src/banner/banner-content.interface.ts</a>
</td>
<td>
interface
</td>
<td>
BannerContent
</td>
<td align="right" data-sort="14">
<span class="coverage-percent">14 %</span>
<span class="coverage-count">(1/7)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./interfaces/NotificationContent.html">src/banner/banner-content.interface.ts</a>
</td>
<td>
interface
</td>
<td>
NotificationContent
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/2)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./interfaces/ToastContent.html">src/banner/banner-content.interface.ts</a>
</td>
<td>
interface
</td>
<td>
ToastContent
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/3)</span>
</td>
</tr>
<tr class="medium">
<td>
<a href="./components/Banner.html">src/banner/banner.component.ts</a>
</td>
<td>
component
</td>
<td>
Banner
</td>
<td align="right" data-sort="44">
<span class="coverage-percent">44 %</span>
<span class="coverage-count">(4/9)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./injectables/BannerService.html">src/banner/banner.service.ts</a>
</td>
<td>
injectable
</td>
<td>
BannerService
</td>
<td align="right" data-sort="77">
<span class="coverage-percent">77 %</span>
<span class="coverage-count">(7/9)</span>
</td>
</tr>
<tr class="good">
<td>
<a href="./components/Toast.html">src/banner/toast.component.ts</a>
</td>
<td>
component
</td>
<td>
Toast
</td>
<td align="right" data-sort="66">
<span class="coverage-percent">66 %</span>
<span class="coverage-count">(2/3)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./directives/Button.html">src/button/button.directive.ts</a>
</td>
<td>
directive
</td>
<td>
Button
</td>
<td align="right" data-sort="25">
<span class="coverage-percent">25 %</span>
<span class="coverage-count">(3/12)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./components/CalendarHeader.html">src/calendar/calendar-header.component.ts</a>
</td>
<td>
component
</td>
<td>
CalendarHeader
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/11)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./components/Calendar.html">src/calendar/calendar.component.ts</a>
</td>
<td>
component
</td>
<td>
Calendar
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/4)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./classes/DateTimeModel.html">src/calendar/date-time-model.class.ts</a>
</td>
<td>
class
</td>
<td>
DateTimeModel
</td>
<td align="right" data-sort="77">
<span class="coverage-percent">77 %</span>
<span class="coverage-count">(24/31)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/CalendarMonth.html">src/calendar/month-view/calendar-month.component.ts</a>
</td>
<td>
component
</td>
<td>
CalendarMonth
</td>
<td align="right" data-sort="84">
<span class="coverage-percent">84 %</span>
<span class="coverage-count">(11/13)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/CalendarMonths.html">src/calendar/months-view/calendar-months.component.ts</a>
</td>
<td>
component
</td>
<td>
CalendarMonths
</td>
<td align="right" data-sort="83">
<span class="coverage-percent">83 %</span>
<span class="coverage-count">(10/12)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/CalendarQuarter.html">src/calendar/quarter-view/calendar-quarter.component.ts</a>
</td>
<td>
component
</td>
<td>
CalendarQuarter
</td>
<td align="right" data-sort="84">
<span class="coverage-percent">84 %</span>
<span class="coverage-count">(11/13)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/CalendarYear.html">src/calendar/year-view/calendar-year.component.ts</a>
</td>
<td>
component
</td>
<td>
CalendarYear
</td>
<td align="right" data-sort="81">
<span class="coverage-percent">81 %</span>
<span class="coverage-count">(9/11)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/Checkbox.html">src/checkbox/checkbox.component.ts</a>
</td>
<td>
component
</td>
<td>
Checkbox
</td>
<td align="right" data-sort="88">
<span class="coverage-percent">88 %</span>
<span class="coverage-count">(30/34)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./classes/CheckboxChange.html">src/checkbox/checkbox.component.ts</a>
</td>
<td>
class
</td>
<td>
CheckboxChange
</td>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(3/3)</span>
</td>
</tr>
<tr class="medium">
<td>
<a href="./components/CodeSnippet.html">src/code-snippet/code-snippet.component.ts</a>
</td>
<td>
component
</td>
<td>
CodeSnippet
</td>
<td align="right" data-sort="38">
<span class="coverage-percent">38 %</span>
<span class="coverage-count">(8/21)</span>
</td>
</tr>
<tr class="good">
<td>
<a href="./components/ComboBox.html">src/combobox/combobox.component.ts</a>
</td>
<td>
component
</td>
<td>
ComboBox
</td>
<td align="right" data-sort="58">
<span class="coverage-percent">58 %</span>
<span class="coverage-count">(23/39)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./directives/ContentSwitcherOption.html">src/content-switcher/content-switcher-option.directive.ts</a>
</td>
<td>
directive
</td>
<td>
ContentSwitcherOption
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/13)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./components/ContentSwitcher.html">src/content-switcher/content-switcher.component.ts</a>
</td>
<td>
component
</td>
<td>
ContentSwitcher
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/7)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./interfaces/DialogConfig.html">src/dialog/dialog-config.interface.ts</a>
</td>
<td>
interface
</td>
<td>
DialogConfig
</td>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(9/9)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/DialogPlaceholder.html">src/dialog/dialog-placeholder.component.ts</a>
</td>
<td>
component
</td>
<td>
DialogPlaceholder
</td>
<td align="right" data-sort="80">
<span class="coverage-percent">80 %</span>
<span class="coverage-count">(4/5)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/Dialog.html">src/dialog/dialog.component.ts</a>
</td>
<td>
component
</td>
<td>
Dialog
</td>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(19/19)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./directives/DialogDirective.html">src/dialog/dialog.directive.ts</a>
</td>
<td>
directive
</td>
<td>
DialogDirective
</td>
<td align="right" data-sort="82">
<span class="coverage-percent">82 %</span>
<span class="coverage-count">(19/23)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./injectables/DialogService.html">src/dialog/dialog.service.ts</a>
</td>
<td>
injectable
</td>
<td>
DialogService
</td>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(14/14)</span>
</td>
</tr>
<tr class="medium">
<td>
<a href="./components/OverflowMenuOption.html">src/dialog/overflow-menu/overflow-menu-option.component.ts</a>
</td>
<td>
component
</td>
<td>
OverflowMenuOption
</td>
<td align="right" data-sort="27">
<span class="coverage-percent">27 %</span>
<span class="coverage-count">(3/11)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./components/OverflowMenuPane.html">src/dialog/overflow-menu/overflow-menu-pane.component.ts</a>
</td>
<td>
component
</td>
<td>
OverflowMenuPane
</td>
<td align="right" data-sort="16">
<span class="coverage-percent">16 %</span>
<span class="coverage-count">(1/6)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./components/OverflowMenu.html">src/dialog/overflow-menu/overflow-menu.component.ts</a>
</td>
<td>
component
</td>
<td>
OverflowMenu
</td>
<td align="right" data-sort="25">
<span class="coverage-percent">25 %</span>
<span class="coverage-count">(1/4)</span>
</td>
</tr>
<tr class="good">
<td>
<a href="./directives/OverflowMenuDirective.html">src/dialog/overflow-menu/overflow-menu.directive.ts</a>
</td>
<td>
directive
</td>
<td>
OverflowMenuDirective
</td>
<td align="right" data-sort="66">
<span class="coverage-percent">66 %</span>
<span class="coverage-count">(4/6)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./directives/EllipsisTooltip.html">src/dialog/tooltip/ellipsis-tooltip.directive.ts</a>
</td>
<td>
directive
</td>
<td>
EllipsisTooltip
</td>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(2/2)</span>
</td>
</tr>
<tr class="good">
<td>
<a href="./components/Tooltip.html">src/dialog/tooltip/tooltip.component.ts</a>
</td>
<td>
component
</td>
<td>
Tooltip
</td>
<td align="right" data-sort="75">
<span class="coverage-percent">75 %</span>
<span class="coverage-count">(3/4)</span>
</td>
</tr>
<tr class="good">
<td>
<a href="./directives/TooltipDirective.html">src/dialog/tooltip/tooltip.directive.ts</a>
</td>
<td>
directive
</td>
<td>
TooltipDirective
</td>
<td align="right" data-sort="71">
<span class="coverage-percent">71 %</span>
<span class="coverage-count">(5/7)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./classes/AbstractDropdownView.html">src/dropdown/abstract-dropdown-view.class.ts</a>
</td>
<td>
class
</td>
<td>
AbstractDropdownView
</td>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(12/12)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/Dropdown.html">src/dropdown/dropdown.component.ts</a>
</td>
<td>
component
</td>
<td>
Dropdown
</td>
<td align="right" data-sort="79">
<span class="coverage-percent">79 %</span>
<span class="coverage-count">(42/53)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./interfaces/ListItem.html">src/dropdown/list-item.interface.ts</a>
</td>
<td>
interface
</td>
<td>
ListItem
</td>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(5/5)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/DropdownList.html">src/dropdown/list/dropdown-list.component.ts</a>
</td>
<td>
component
</td>
<td>
DropdownList
</td>
<td align="right" data-sort="96">
<span class="coverage-percent">96 %</span>
<span class="coverage-count">(32/33)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./directives/ScrollableList.html">src/dropdown/scrollable-list.directive.ts</a>
</td>
<td>
directive
</td>
<td>
ScrollableList
</td>
<td align="right" data-sort="21">
<span class="coverage-percent">21 %</span>
<span class="coverage-count">(5/23)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./injectables/I18n.html">src/i18n/i18n.service.ts</a>
</td>
<td>
injectable
</td>
<td>
I18n
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/4)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/Icon.html">src/icon/icon.component.ts</a>
</td>
<td>
component
</td>
<td>
Icon
</td>
<td align="right" data-sort="77">
<span class="coverage-percent">77 %</span>
<span class="coverage-count">(7/9)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./injectables/IconService.html">src/icon/icon.service.ts</a>
</td>
<td>
injectable
</td>
<td>
IconService
</td>
<td align="right" data-sort="91">
<span class="coverage-percent">91 %</span>
<span class="coverage-count">(11/12)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./interfaces/SizeMap.html">src/icon/icon.types.ts</a>
</td>
<td>
interface
</td>
<td>
SizeMap
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/1)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/Sprite.html">src/icon/sprite.component.ts</a>
</td>
<td>
component
</td>
<td>
Sprite
</td>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(4/4)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/StaticIcon.html">src/icon/static-icon.component.ts</a>
</td>
<td>
component
</td>
<td>
StaticIcon
</td>
<td align="right" data-sort="80">
<span class="coverage-percent">80 %</span>
<span class="coverage-count">(8/10)</span>
</td>
</tr>
<tr class="medium">
<td>
<a href="./directives/TextInput.html">src/input/input.directive.ts</a>
</td>
<td>
directive
</td>
<td>
TextInput
</td>
<td align="right" data-sort="50">
<span class="coverage-percent">50 %</span>
<span class="coverage-count">(2/4)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/Label.html">src/input/label.component.ts</a>
</td>
<td>
component
</td>
<td>
Label
</td>
<td align="right" data-sort="85">
<span class="coverage-percent">85 %</span>
<span class="coverage-count">(6/7)</span>
</td>
</tr>
<tr class="medium">
<td>
<a href="./directives/TextArea.html">src/input/text-area.directive.ts</a>
</td>
<td>
directive
</td>
<td>
TextArea
</td>
<td align="right" data-sort="50">
<span class="coverage-percent">50 %</span>
<span class="coverage-count">(2/4)</span>
</td>
</tr>
<tr class="good">
<td>
<a href="./directives/Link.html">src/link/link.directive.ts</a>
</td>
<td>
directive
</td>
<td>
Link
</td>
<td align="right" data-sort="75">
<span class="coverage-percent">75 %</span>
<span class="coverage-count">(3/4)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/ListGroup.html">src/list-group/list-group.component.ts</a>
</td>
<td>
component
</td>
<td>
ListGroup
</td>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(7/7)</span>
</td>
</tr>
<tr class="good">
<td>
<a href="./components/Loading.html">src/loading/loading.component.ts</a>
</td>
<td>
component
</td>
<td>
Loading
</td>
<td align="right" data-sort="60">
<span class="coverage-percent">60 %</span>
<span class="coverage-count">(3/5)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./components/AlertModal.html">src/modal/alert-modal.component.ts</a>
</td>
<td>
component
</td>
<td>
AlertModal
</td>
<td align="right" data-sort="25">
<span class="coverage-percent">25 %</span>
<span class="coverage-count">(2/8)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./interfaces/AlertModalData.html">src/modal/alert-modal.interface.ts</a>
</td>
<td>
interface
</td>
<td>
AlertModalData
</td>
<td align="right" data-sort="90">
<span class="coverage-percent">90 %</span>
<span class="coverage-count">(9/10)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./interfaces/ModalButton.html">src/modal/alert-modal.interface.ts</a>
</td>
<td>
interface
</td>
<td>
ModalButton
</td>
<td align="right" data-sort="80">
<span class="coverage-percent">80 %</span>
<span class="coverage-count">(4/5)</span>
</td>
</tr>
<tr class="medium">
<td>
<a href="./classes/BaseModal.html">src/modal/base-modal.class.ts</a>
</td>
<td>
class
</td>
<td>
BaseModal
</td>
<td align="right" data-sort="50">
<span class="coverage-percent">50 %</span>
<span class="coverage-count">(1/2)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./components/ModalFooter.html">src/modal/modal-footer.component.ts</a>
</td>
<td>
component
</td>
<td>
ModalFooter
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/1)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/ModalHeader.html">src/modal/modal-header.component.ts</a>
</td>
<td>
component
</td>
<td>
ModalHeader
</td>
<td align="right" data-sort="83">
<span class="coverage-percent">83 %</span>
<span class="coverage-count">(5/6)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/ModalPlaceholder.html">src/modal/modal-placeholder.component.ts</a>
</td>
<td>
component
</td>
<td>
ModalPlaceholder
</td>
<td align="right" data-sort="80">
<span class="coverage-percent">80 %</span>
<span class="coverage-count">(4/5)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/Modal.html">src/modal/modal.component.ts</a>
</td>
<td>
component
</td>
<td>
Modal
</td>
<td align="right" data-sort="93">
<span class="coverage-percent">93 %</span>
<span class="coverage-count">(14/15)</span>
</td>
</tr>
<tr class="medium">
<td>
<a href="./classes/ModalContainer.html">src/modal/modal.decorator.ts</a>
</td>
<td>
class
</td>
<td>
ModalContainer
</td>
<td align="right" data-sort="50">
<span class="coverage-percent">50 %</span>
<span class="coverage-count">(1/2)</span>
</td>
</tr>
<tr class="good">
<td>
<a href="./injectables/ModalService.html">src/modal/modal.service.ts</a>
</td>
<td>
injectable
</td>
<td>
ModalService
</td>
<td align="right" data-sort="62">
<span class="coverage-percent">62 %</span>
<span class="coverage-count">(5/8)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./components/AlertModalStory.html">src/modal/modal.stories.ts</a>
</td>
<td>
component
</td>
<td>
AlertModalStory
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/8)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./components/ModalStory.html">src/modal/modal.stories.ts</a>
</td>
<td>
component
</td>
<td>
ModalStory
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/4)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./components/SampleModal.html">src/modal/modal.stories.ts</a>
</td>
<td>
component
</td>
<td>
SampleModal
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/3)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/Overlay.html">src/modal/overlay.component.ts</a>
</td>
<td>
component
</td>
<td>
Overlay
</td>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(5/5)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./interfaces/NotificationContent.html">src/notification/notification-content.interface.ts</a>
</td>
<td>
interface
</td>
<td>
NotificationContent
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/8)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./interfaces/ToastContent.html">src/notification/notification-content.interface.ts</a>
</td>
<td>
interface
</td>
<td>
ToastContent
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/3)</span>
</td>
</tr>
<tr class="medium">
<td>
<a href="./injectables/NotificationDisplayService.html">src/notification/notification-display.service.ts</a>
</td>
<td>
injectable
</td>
<td>
NotificationDisplayService
</td>
<td align="right" data-sort="33">
<span class="coverage-percent">33 %</span>
<span class="coverage-count">(1/3)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./components/Notification.html">src/notification/notification.component.ts</a>
</td>
<td>
component
</td>
<td>
Notification
</td>
<td align="right" data-sort="23">
<span class="coverage-percent">23 %</span>
<span class="coverage-count">(4/17)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./injectables/NotificationService.html">src/notification/notification.service.ts</a>
</td>
<td>
injectable
</td>
<td>
NotificationService
</td>
<td align="right" data-sort="77">
<span class="coverage-percent">77 %</span>
<span class="coverage-count">(7/9)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./components/NotificationStory.html">src/notification/notification.stories.ts</a>
</td>
<td>
component
</td>
<td>
NotificationStory
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/3)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./components/ToastStory.html">src/notification/notification.stories.ts</a>
</td>
<td>
component
</td>
<td>
ToastStory
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/3)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./components/Toast.html">src/notification/toast.component.ts</a>
</td>
<td>
component
</td>
<td>
Toast
</td>
<td align="right" data-sort="20">
<span class="coverage-percent">20 %</span>
<span class="coverage-count">(2/10)</span>
</td>
</tr>
<tr class="good">
<td>
<a href="./classes/PaginationModel.html">src/pagination/pagination-model.class.ts</a>
</td>
<td>
class
</td>
<td>
PaginationModel
</td>
<td align="right" data-sort="75">
<span class="coverage-percent">75 %</span>
<span class="coverage-count">(3/4)</span>
</td>
</tr>
<tr class="medium">
<td>
<a href="./components/Pagination.html">src/pagination/pagination.component.ts</a>
</td>
<td>
component
</td>
<td>
Pagination
</td>
<td align="right" data-sort="44">
<span class="coverage-percent">44 %</span>
<span class="coverage-count">(4/9)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./components/PaginationStory.html">src/pagination/pagination.stories.ts</a>
</td>
<td>
component
</td>
<td>
PaginationStory
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/5)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/PillInput.html">src/pill-input/pill-input.component.ts</a>
</td>
<td>
component
</td>
<td>
PillInput
</td>
<td align="right" data-sort="94">
<span class="coverage-percent">94 %</span>
<span class="coverage-count">(36/38)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/Pill.html">src/pill-input/pill.component.ts</a>
</td>
<td>
component
</td>
<td>
Pill
</td>
<td align="right" data-sort="80">
<span class="coverage-percent">80 %</span>
<span class="coverage-count">(4/5)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/Placeholder.html">src/placeholder/placeholder.component.ts</a>
</td>
<td>
component
</td>
<td>
Placeholder
</td>
<td align="right" data-sort="80">
<span class="coverage-percent">80 %</span>
<span class="coverage-count">(4/5)</span>
</td>
</tr>
<tr class="good">
<td>
<a href="./injectables/PlaceholderService.html">src/placeholder/placeholder.service.ts</a>
</td>
<td>
injectable
</td>
<td>
PlaceholderService
</td>
<td align="right" data-sort="57">
<span class="coverage-percent">57 %</span>
<span class="coverage-count">(4/7)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./components/ProgressIndicator.html">src/progress-indicator/progress-indicator.component.ts</a>
</td>
<td>
component
</td>
<td>
ProgressIndicator
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/2)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/RadioGroup.html">src/radio/radio-group.component.ts</a>
</td>
<td>
component
</td>
<td>
RadioGroup
</td>
<td align="right" data-sort="96">
<span class="coverage-percent">96 %</span>
<span class="coverage-count">(30/31)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./classes/RadioChange.html">src/radio/radio-group.component.ts</a>
</td>
<td>
class
</td>
<td>
RadioChange
</td>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(3/3)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/Radio.html">src/radio/radio.component.ts</a>
</td>
<td>
component
</td>
<td>
Radio
</td>
<td align="right" data-sort="92">
<span class="coverage-percent">92 %</span>
<span class="coverage-count">(13/14)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./classes/SampleBase.html">src/sample/sample-base.class.ts</a>
</td>
<td>
class
</td>
<td>
SampleBase
</td>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(3/3)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/Sample.html">src/sample/sample.component.ts</a>
</td>
<td>
component
</td>
<td>
Sample
</td>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(9/9)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./interfaces/SampleInterface.html">src/sample/sample.interface.ts</a>
</td>
<td>
interface
</td>
<td>
SampleInterface
</td>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(3/3)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/SampleSub.html">src/sample/subcomponent/sample-sub.component.ts</a>
</td>
<td>
component
</td>
<td>
SampleSub
</td>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(6/6)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./directives/OptGroup.html">src/select/optgroup.directive.ts</a>
</td>
<td>
directive
</td>
<td>
OptGroup
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/2)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./directives/Option.html">src/select/option.directive.ts</a>
</td>
<td>
directive
</td>
<td>
Option
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/2)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/Select.html">src/select/select.component.ts</a>
</td>
<td>
component
</td>
<td>
Select
</td>
<td align="right" data-sort="88">
<span class="coverage-percent">88 %</span>
<span class="coverage-count">(15/17)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/Switch.html">src/switch/switch.component.ts</a>
</td>
<td>
component
</td>
<td>
Switch
</td>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(5/5)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./classes/SwitchChange.html">src/switch/switch.component.ts</a>
</td>
<td>
class
</td>
<td>
SwitchChange
</td>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(3/3)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./classes/TableHeaderItem.html">src/table/table-header-item.class.ts</a>
</td>
<td>
class
</td>
<td>
TableHeaderItem
</td>
<td align="right" data-sort="94">
<span class="coverage-percent">94 %</span>
<span class="coverage-count">(16/17)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./classes/TableItem.html">src/table/table-item.class.ts</a>
</td>
<td>
class
</td>
<td>
TableItem
</td>
<td align="right" data-sort="83">
<span class="coverage-percent">83 %</span>
<span class="coverage-count">(5/6)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./classes/TableModel.html">src/table/table-model.class.ts</a>
</td>
<td>
class
</td>
<td>
TableModel
</td>
<td align="right" data-sort="79">
<span class="coverage-percent">79 %</span>
<span class="coverage-count">(27/34)</span>
</td>
</tr>
<tr class="medium">
<td>
<a href="./components/Table.html">src/table/table.component.ts</a>
</td>
<td>
component
</td>
<td>
Table
</td>
<td align="right" data-sort="50">
<span class="coverage-percent">50 %</span>
<span class="coverage-count">(24/48)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./components/DynamicTableStory.html">src/table/table.stories.ts</a>
</td>
<td>
component
</td>
<td>
DynamicTableStory
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/12)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./components/ExpansionTableStory.html">src/table/table.stories.ts</a>
</td>
<td>
component
</td>
<td>
ExpansionTableStory
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/10)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./components/OverflowTableStory.html">src/table/table.stories.ts</a>
</td>
<td>
component
</td>
<td>
OverflowTableStory
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/7)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./components/PaginationTableStory.html">src/table/table.stories.ts</a>
</td>
<td>
component
</td>
<td>
PaginationTableStory
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/12)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./components/TableStory.html">src/table/table.stories.ts</a>
</td>
<td>
component
</td>
<td>
TableStory
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/9)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./classes/CustomHeaderItem.html">src/table/table.stories.ts</a>
</td>
<td>
class
</td>
<td>
CustomHeaderItem
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/2)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/TabHeaders.html">src/tabs/tab-headers.component.ts</a>
</td>
<td>
component
</td>
<td>
TabHeaders
</td>
<td align="right" data-sort="77">
<span class="coverage-percent">77 %</span>
<span class="coverage-count">(14/18)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/Tab.html">src/tabs/tab.component.ts</a>
</td>
<td>
component
</td>
<td>
Tab
</td>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(12/12)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/Tabs.html">src/tabs/tabs.component.ts</a>
</td>
<td>
component
</td>
<td>
Tabs
</td>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(7/7)</span>
</td>
</tr>
<tr class="medium">
<td>
<a href="./components/ClickableTile.html">src/tiles/clickable-tile.component.ts</a>
</td>
<td>
component
</td>
<td>
ClickableTile
</td>
<td align="right" data-sort="50">
<span class="coverage-percent">50 %</span>
<span class="coverage-count">(3/6)</span>
</td>
</tr>
<tr class="medium">
<td>
<a href="./components/Tile.html">src/tiles/tile.component.ts</a>
</td>
<td>
component
</td>
<td>
Tile
</td>
<td align="right" data-sort="50">
<span class="coverage-percent">50 %</span>
<span class="coverage-count">(1/2)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./components/Toggle.html">src/toggle/toggle.component.ts</a>
</td>
<td>
component
</td>
<td>
Toggle
</td>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(5/5)</span>
</td>
</tr>
<tr class="very-good">
<td>
<a href="./classes/ToggleChange.html">src/toggle/toggle.component.ts</a>
</td>
<td>
class
</td>
<td>
ToggleChange
</td>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(3/3)</span>
</td>
</tr>
<tr class="low">
<td>
<a href="./interfaces/AbsolutePosition.html">src/utils/position.ts</a>
</td>
<td>
interface
</td>
<td>
AbsolutePosition
</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/4)</span>
</td>
</tr>
</tbody>
</table>
<script src="js/libs/tablesort.min.js"></script>
<script src="js/libs/tablesort.number.min.js"></script>
<script>
new Tablesort(document.getElementById('coverage-table'));
</script>
</div><div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
</div>
</div>
<script src="./js/libs/bootstrap-native.js"></script>
<script src="./js/libs/es6-shim.min.js"></script>
<script src="./js/libs/EventDispatcher.js"></script>
<script src="./js/libs/promise.min.js"></script>
<script src="./js/libs/zepto.min.js"></script>
<script src="./js/compodoc.js"></script>
<script>var COMPODOC_CURRENT_PAGE_DEPTH = 0;</script>
<script src="./js/search/search.js"></script>
<script src="./js/search/lunr.min.js"></script>
<script src="./js/search/search-lunr.js"></script>
<script src="./js/tabs.js"></script>
<script src="./js/menu.js"></script>
<script src="./js/libs/prism.js"></script>
<script src="./js/sourceCode.js"></script>
<script src="./js/search/search_index.js"></script>
</body>
</html>