carbon-components-angular
Version:
Next generation components
2,195 lines • 120 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" data-type="entity-link" class="active" >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" ><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" data-type="entity-link" class="active" >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" ><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 component">
<div class="content-data">
<ol class="breadcrumb">
<li>Components</li>
<li>StaticIcon</li>
</ol>
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#info" id="info-tab" role="tab" data-toggle="tab" data-link="info">Info</a>
</li>
<li>
<a href="#source" role="tab" id="source-tab" data-toggle="tab" data-link="source">Source</a>
</li>
<li>
<a href="#tree" role="tab" id="tree-tab" data-toggle="tab" data-link="dom-tree">DOM Tree</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="info"><p class="comment">
<h3>File</h3>
</p>
<p class="comment">
<code>src/icon/static-icon.component.ts</code>
</p>
<p class="comment">
<h3>Description</h3>
</p>
<p class="comment">
<p><code>n-icon</code> pulls the icon from the loaded sprite, and renders it at the specified size.
Under the hood, <code>n-icon</code> generates code similar to the following:</p>
<pre class="line-numbers"><code class="language-none"><svg class="icon" width="30" height="30"><use href="#alert_30"></use></svg></code></pre>
</p>
<p class="comment">
<h3>Implements</h3>
</p>
<p class="comment">
<code><a href="https://angular.io/docs/ts/latest/api/api/core/AfterViewInit" target="_blank" >AfterViewInit</a></code>
</p>
<section>
<h3>Metadata</h3>
<table class="table table-sm table-hover">
<tbody>
<tr>
<td class="col-md-3">selector</td>
<td class="col-md-9"><code>ibm-static-icon</code></td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="index">Index</h3>
<table class="table table-sm table-bordered index-table">
<tbody>
<tr>
<td class="col-md-4">
<h6><b>Properties</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<span class="modifier">Protected</span> <a href="#iconMap">iconMap</a>
</li>
<li>
<span class="modifier">Protected</span> <a href="#sizeMap">sizeMap</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Methods</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<span class="modifier">Public</span> <a href="#buildMatterClass">buildMatterClass</a>
</li>
<li>
<span class="modifier">Public</span> <a href="#ngAfterViewInit">ngAfterViewInit</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Inputs</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#classList">classList</a>
</li>
<li>
<a href="#color">color</a>
</li>
<li>
<a href="#icon">icon</a>
</li>
<li>
<a href="#size">size</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="constructor">Constructor</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<code>constructor(elementRef: <a href="https://angular.io/docs/ts/latest/api/api/core/ElementRef" target="_blank">ElementRef</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="414" class="link-to-prism">src/icon/static-icon.component.ts:414</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Initialize the component</p>
</div>
<div>
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>elementRef</td>
<td>
<code><a href="https://angular.io/docs/ts/latest/api/api/core/ElementRef" target="_blank" >ElementRef</a></code>
</td>
<td>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="inputs">Inputs</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="classList"></a>
<code>classList</code>
</td>
<td class="col-md-10">
<div><p>classlist for the SVG </p>
</div>
<p>
<em>Type:</em> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" >String</a></code>
</p>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="27" class="link-to-prism">src/icon/static-icon.component.ts:27</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="color"></a>
<code>color</code>
</td>
<td class="col-md-10">
<div><p>accepts color strings </p>
</div>
<p>
<em>Type:</em> <code>"blue" | "light" | "dark" | "white"</code>
</p>
<p>
<em>Default value: </em><code>dark</code>
</p>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="23" class="link-to-prism">src/icon/static-icon.component.ts:23</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="icon"></a>
<code>icon</code>
</td>
<td class="col-md-10">
<div><p>follows the naming convention found in the icon listing on the demo page </p>
</div>
<p>
<em>Type:</em> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</p>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="21" class="link-to-prism">src/icon/static-icon.component.ts:21</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="size"></a>
<code>size</code>
</td>
<td class="col-md-10">
<div><p>accepts abbreviated size strings </p>
</div>
<p>
<em>Type:</em> <code>"xs" | "sm" | "md" | "lg"</code>
</p>
<p>
<em>Default value: </em><code>md</code>
</p>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="25" class="link-to-prism">src/icon/static-icon.component.ts:25</a></div>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="methods">
Methods
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="buildMatterClass"></a>
<span class="name"><b><span class="modifier">Public</span> buildMatterClass</b><a href="#buildMatterClass"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon fa fa-reset"></span>
<code>buildMatterClass()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="438" class="link-to-prism">src/icon/static-icon.component.ts:438</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Create a class name based on @Input() <code>color</code> and <code>size</code>.</p>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ngAfterViewInit"></a>
<span class="name"><b><span class="modifier">Public</span> ngAfterViewInit</b><a href="#ngAfterViewInit"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon fa fa-reset"></span>
<code>ngAfterViewInit()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="423" class="link-to-prism">src/icon/static-icon.component.ts:423</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="inputs">
Properties
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="iconMap"></a>
<span class="name"><b><span class="modifier">Protected</span> iconMap</b><a href="#iconMap"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon fa fa-lock"></span><code>iconMap: <code></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="37" class="link-to-prism">src/icon/static-icon.component.ts:37</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="sizeMap"></a>
<span class="name"><b><span class="modifier">Protected</span> sizeMap</b><a href="#sizeMap"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon fa fa-lock"></span><code>sizeMap: <code></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="30" class="link-to-prism">src/icon/static-icon.component.ts:30</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>map size strings to numeric values </p>
</div>
</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="tab-pane fade tab-source-code" id="source">
<pre class="line-numbers"><code class="language-typescript">import {
Component,
ElementRef,
AfterViewInit,
Input
} from "@angular/core";
/**
* `n-icon` pulls the icon from the loaded sprite, and renders it at the specified size.
* Under the hood, `n-icon` generates code similar to the following:
* ```
* <svg class="icon" width="30" height="30"><use href="#alert_30"></use></svg>
* ```
*/
@Component({
selector: "ibm-static-icon",
template: ""
})
export class StaticIcon implements AfterViewInit {
/** follows the naming convention found in the icon listing on the demo page */
@Input() icon: string;
/** accepts color strings */
@Input() color: "blue" | "light" | "dark" | "white" = "dark";
/** accepts abbreviated size strings */
@Input() size: "xs" | "sm" | "md" | "lg" = "md";
/** classlist for the SVG */
@Input() classList: String = "";
/** map size strings to numeric values */
protected sizeMap = {
"xs": 14,
"sm": 16,
"md": 20,
"lg": 30
};
protected iconMap = {
"addnew_circle_16": classList => `<svg
class="${classList}"
width = "16"
height = "16"
viewBox = "0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 14.8c-3.7 0-6.8-3.1-6.8-6.8 0-3.7
3.1-6.8 6.8-6.8s6.8 3.1 6.8 6.8c0 3.7-3.1 6.8-6.8 6.8z"/>
<path d="M9 4H7v3H4v2h3v3h2V9h3V7H9z"/>
</svg>`,
"chevron_down_16": classList => `<svg
class="${classList}"
width = "16"
height = "16"
viewBox = "0 0 16 16">
<path d="M14.6 4L8 10.6 1.4 4l-.8.8L8 12.3l7.4-7.5z"/>
</svg>`,
"chevron_down_20": classList => `<svg
class="${classList}"
width="20px"
height="20px"
viewBox="0 0 20 20">
<g>
<polygon points="18.6,4.2 10,12.7 1.4,4.2 0.6,5 10,14.4 19.4,5"/>
</g>
</svg>`,
"chevron_down_30": classList => `<svg
class="${classList}"
width="30px"
height="30px"
viewBox="0 0 30 30">
<polygon points="27.3,7 15,19.3 2.7,7 1.3,8.4 15,22.1 28.7,8.4 "/>
</svg>`,
"chevron_up_circle_16": classList => `<svg
class="${classList}"
xmlns="http://www.w3.org/2000/svg"
height="16" viewBox="0 0 16 16">
<path d="M4.5 10L8 6.4l3.5 3.6 1-1L8 4.6 3.5 9z"></path>
<path d="M0 8c0 4.4 3.6 8 8 8s8-3.6 8-8-3.6-8-8-8-8 3.6-8 8zm14.8 0c0 3.7-3.1 6.8-6.8 6.8-3.7
0-6.8-3.1-6.8-6.8S4.3 1.2 8 1.2c3.7 0 6.8 3.1 6.8 6.8z"></path>
</svg>`,
"chevron_up_circle_disabled_16": classList => `<svg
class="${classList}"
xmlns="http://www.w3.org/2000/svg"
height="16"
viewBox="0 0 16 16">
<path d="M9 .1v1c1.2.2 2.3.6 3.2 1.3l.7-.7C11.8.8 10.5.3 9 .1zM7 .1C5.5.3 4.2.8 3.1 1.7l.7.7c.9-.7 2-1.2 3.2-1.3v-1zM14.9
7h1c-.2-1.5-.8-2.8-1.6-3.9l-.7.7c.7.9 1.1 2 1.3 3.2zM14.9 9c-.2 1.2-.6 2.3-1.3 3.2l.7.7c.9-1.1 1.4-2.4
1.6-3.9h-1zM3.8 13.6l-.7.7c1.1.9 2.4 1.4 3.9 1.6v-1c-1.2-.2-2.3-.6-3.2-1.3zM9 15.9c1.5-.2 2.8-.8
3.9-1.6l-.7-.7c-.9.7-2 1.2-3.2 1.3v1zM1.1 9h-1c.2 1.5.8 2.8 1.6 3.9l.7-.7c-.7-.9-1.1-2-1.3-3.2zM1.7
3.1C.8 4.2.3 5.5.1 7h1c.2-1.2.6-2.3 1.3-3.2l-.7-.7zM8.9 5.5L8 4.6l-.9.9.9.9zM8.9 7.3l.9.9.9-1-.9-.8zM11.5
10l1-1-.9-.9-1 1zM4.5 10l.9-.9-1-1-.9.9zM7.1 7.3l-.9-.9-.9.8.9 1z"/>
</svg>`,
"chevron_down_circle_16": classList => `<svg
class="${classList}"
xmlns="http://www.w3.org/2000/svg"
height="16" viewBox="0 0 16 16">
<path d="M11.5 6L8 9.6 4.5 6l-1 1L8 11.4 12.5 7z"/>
<path d="M16 8c0-4.4-3.6-8-8-8S0 3.6 0 8s3.6 8 8 8 8-3.6 8-8zM1.2 8c0-3.7 3.1-6.8 6.8-6.8 3.7 0
6.8 3.1 6.8 6.8s-3.1 6.8-6.8 6.8c-3.7 0-6.8-3.1-6.8-6.8z"/>
</svg>`,
"chevron_down_circle_disabled_16": classList => `<svg
class="${classList}"
xmlns="http://www.w3.org/2000/svg"
height="16"
viewBox="0 0 16 16">
<path d="M7 15.9v-1c-1.2-.2-2.3-.6-3.2-1.3l-.7.7c1.1.9 2.4 1.4 3.9 1.6zM9 15.9c1.5-.2 2.8-.8 3.9-1.6l-.7-.7c-.9.7-2
1.2-3.2 1.3v1zM1.1 9h-1c.2 1.5.8 2.8 1.6 3.9l.7-.7c-.7-.9-1.1-2-1.3-3.2zM1.1 7c.2-1.2.6-2.3 1.3-3.2l-.7-.7C.8 4.2.3
5.5.1 7h1zM12.2 2.4l.7-.7C11.8.8 10.5.3 9 .1v1c1.2.2 2.3.6 3.2 1.3zM7 .1C5.5.3 4.2.8 3.1 1.7l.7.7c.9-.7 2-1.2
3.2-1.3v-1zM14.9 7h1c-.2-1.5-.8-2.8-1.6-3.9l-.7.7c.7.9 1.1 2 1.3 3.2zM14.3 12.9c.9-1.1 1.4-2.4 1.6-3.9h-1c-.2 1.2-.6
2.3-1.3 3.2l.7.7zM7.1 10.5l.9.9.9-.9-.9-.9zM7.1 8.7l-.9-.9-.9 1 .9.8zM4.5 6l-1 1 .9.9 1-1zM11.5 6l-.9.9 1 1
.9-.9zM8.9 8.7l.9.9.9-.8-.9-1z"/>
</svg>`,
"chevron_right_circle_16": classList => `<svg
class="${classList}"
width="16"
height="16"
viewBox="0 0 16 16">
<path d="M6 4.5L9.6 8 6 11.5l1 1L11.4 8 7 3.5z"/>
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 14.8c-3.7 0-6.8-3.1-6.8-6.8 0-3.7
3.1-6.8 6.8-6.8s6.8 3.1 6.8 6.8c0 3.7-3.1 6.8-6.8 6.8z"/>
</svg>`,
"chevron_right_circle_disabled_16": classList => `<svg
class="${classList}"
width="16px"
height="16px"
viewBox="0 0 16 16">
<path d="M15.9,9h-1c-0.2,1.2-0.6,2.3-1.3,3.2l0.7,0.7C15.2,11.8,15.7,10.5,15.9,9z"/>
<path d="M15.9,7c-0.2-1.5-0.8-2.8-1.6-3.9l-0.7,0.7c0.7,0.9,1.2,2,1.3,3.2H15.9z"/>
<path d="M9,14.9v1c1.5-0.2,2.8-0.8,3.9-1.6l-0.7-0.7C11.3,14.3,10.2,14.7,9,14.9z"/>
<path d="M7,14.9c-1.2-0.2-2.3-0.6-3.2-1.3l-0.7,0.7c1.1,0.9,2.4,1.4,3.9,1.6V14.9z"/>
<path d="M2.4,3.8L1.7,3.1C0.8,4.2,0.3,5.5,0.1,7h1C1.3,5.8,1.7,4.7,2.4,3.8z"/>
<path d="M0.1,9c0.2,1.5,0.8,2.8,1.6,3.9l0.7-0.7c-0.7-0.9-1.2-2-1.3-3.2H0.1z"/>
<path d="M7,1.1v-1C5.5,0.3,4.2,0.8,3.1,1.7l0.7,0.7C4.7,1.7,5.8,1.3,7,1.1z"/>
<path d="M12.9,1.7C11.8,0.8,10.5,0.3,9,0.1v1c1.2,0.2,2.3,0.6,3.2,1.3L12.9,1.7z"/>
<polygon points="10.5,8.9 11.4,8 10.5,7.1 9.6,8 9.6,8 9.6,8 "/>
<polygon points="8.7,8.9 7.8,9.8 8.8,10.7 9.6,9.8 "/>
<polygon points="6,11.5 7,12.5 7.9,11.6 6.9,10.6 "/>
<polygon points="6,4.5 6.9,5.4 7.9,4.4 7,3.5 "/>
<polygon points="8.7,7.1 9.6,6.2 8.8,5.3 7.8,6.2 "/>
</svg>`,
"chevron_right_16": classList => `<svg
class="${classList}"
width="16"
height="16"
viewBox="0 0 16 16">
<g>
<polygon points="4,14.7 10.6,8.1 4,1.6 4.8,0.7 12.3,8.1 4.8,15.6">
</polygon>
</g>
</svg>`,
"chevron_right_14": classList => `<svg
class="${classList}"
width="14"
height="14"
viewBox="0 0 16 16">
<g>
<polygon points="4,14.7 10.6,8.1 4,1.6 4.8,0.7 12.3,8.1 4.8,15.6">
</polygon>
</g>
</svg>`,
"chevron_left_16": classList => `<svg
class="${classList}"
height="16"
width="16"
viewBox="0 0 16 16">
<g>
<polygon points="12.3,14.7 5.7,8.1 12.3,1.6 11.4,0.7 4,8.1 11.4,15.6">
</polygon>
</g>
</svg>
`,
"chevron_left_14": classList => `<svg
class="${classList}"
height="14"
width="14"
viewBox="0 0 16 16">
<g>
<polygon points="12.3,14.7 5.7,8.1 12.3,1.6 11.4,0.7 4,8.1 11.4,15.6">
</polygon>
</g>
</svg>
`,
"chevron_left_circle_16": classList => `<svg
class="${classList}"
width="16"
height="16"
viewBox="0 0 16 16">
<path d="M10 11.5L6.4 8 10 4.5l-1-1L4.6 8 9 12.5z"/>
<path d="M8 16c4.4 0 8-3.6 8-8s-3.6-8-8-8-8 3.6-8 8 3.6 8 8 8zM8
1.2c3.7 0 6.8 3.1 6.8 6.8 0 3.7-3.1 6.8-6.8 6.8S1.2 11.7 1.2 8c0-3.7 3.1-6.8 6.8-6.8z"/>
</svg>`,
"chevron_left_circle_disabled_16": classList => `<svg
class="${classList}"
width="16px"
height="16px"
viewBox="0 0 16 16">
<path d="M0.1,7h1c0.2-1.2,0.6-2.3,1.3-3.2L1.7,3.1C0.8,4.2,0.3,5.5,0.1,7z"/>
<path d="M0.1,9c0.2,1.5,0.8,2.8,1.6,3.9l0.7-0.7c-0.7-0.9-1.2-2-1.3-3.2H0.1z"/>
<path d="M7,1.1v-1C5.5,0.3,4.2,0.8,3.1,1.7l0.7,0.7C4.7,1.7,5.8,1.3,7,1.1z"/>
<path d="M9,1.1c1.2,0.2,2.3,0.6,3.2,1.3l0.7-0.7C11.8,0.8,10.5,0.3,9,0.1V1.1z"/>
<path d="M13.6,12.2l0.7,0.7c0.9-1.1,1.4-2.4,1.6-3.9h-1C14.7,10.2,14.3,11.3,13.6,12.2z"/>
<path d="M15.9,7c-0.2-1.5-0.8-2.8-1.6-3.9l-0.7,0.7c0.7,0.9,1.2,2,1.3,3.2H15.9z"/>
<path d="M9,14.9v1c1.5-0.2,2.8-0.8,3.9-1.6l-0.7-0.7C11.3,14.3,10.2,14.7,9,14.9z"/>
<path d="M3.1,14.3c1.1,0.9,2.4,1.4,3.9,1.6v-1c-1.2-0.2-2.3-0.6-3.2-1.3L3.1,14.3z"/>
<polygon points="5.5,7.1 4.6,8 5.5,8.9 6.4,8 6.4,8 6.4,8 "/>
<polygon points="7.3,7.1 8.2,6.2 7.2,5.3 6.4,6.2 "/>
<polygon points="10,4.5 9,3.5 8.1,4.4 9.1,5.4 "/>
<polygon points="10,11.5 9.1,10.6 8.1,11.6 9,12.5 "/>
<polygon points="7.3,8.9 6.4,9.8 7.2,10.7 8.2,9.8 "/>
</svg>`,
"x_16": classList => `<svg
class="${classList}"
width="16"
height="16"
viewBox="0 0 16 16">
<polygon
points="14.5,2.6 13.4,1.5 8,6.9 2.6,1.5
1.5,2.6 6.9,8 1.5,13.4 2.6,14.5
8,9.1 13.4,14.5 14.5,13.4 9.1,8"/>
</svg>`,
"info_20": classList => `<svg
class="${classList}"
width="20px"
height="20px"
viewBox="0 0 30 30">
<polygon points="17,13 12,13 12,15 14,15 14,21 12,21 12,23 19,23 19,21 17,21 "/>
<circle cx="15" cy="9" r="2"/>
<path d="M15,1C7.3,1,1,7.3,1,15s6.3,14,14,14s14-6.3,14-14S22.7,1,15,1z M15,27C8.4,27,3,21.6,3,15S8.4,3,15,3
s12,5.4,12,12S21.6,27,15,27z"/>
</svg>`,
"info_fill_20": classList => `<svg
class="${classList}"
width="20px"
height="20px"
viewBox="0 0 20 20">
<g>
<path d="M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0z M8.5,14.1l-3.6-3.6l1.1-1.1L8.5,12l5.6-5.6
l1.1,1.1L8.5,14.1z"/>
</g>
</svg>
</svg>`,
"warning_20": classList => `<svg
class="${classList}"
width="20"
height="20"
viewBox="0 0 30 30">
<path d="M15.9 18l.8-7.8V7h-3.4v3.2l.8 7.8z"/>
<circle cx="15" cy="21.7" r="1.8"/>
<path d="M15 1C7.3 1 1 7.3 1 15s6.3 14 14 14 14-6.3 14-14S22.7 1 15 1zm0
26C8.4 27 3 21.6 3 15S8.4 3 15 3s12 5.4 12 12-5.4 12-12 12z"/>
</svg>`,
"warning_16": classList => `<svg
class="${classList}"
height="16"
width="16"
viewBox="0 0 16 16">
<g>
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0
14.8c-3.7 0-6.8-3.1-6.8-6.8S4.3 1.2 8 1.2s6.8 3.1 6.8 6.8-3.1 6.8-6.8 6.8z"></path>
<path d="M6.9 5.5l.6 4.5h1l.6-4.5V3H6.9z"></path>
<circle cx="8" cy="12" r="1"></circle>
</g>
</svg>`,
"warning_fill_20": classList => `<svg
class="${classList}"
width="20px" height="20px" viewBox="0 0 20 20">
<g>
<path d="M10,19.4c-5.2,0-9.4-4.2-9.4-9.4c0-5.2,4.2-9.4,9.4-9.4c5.2,0,9.4,4.2,9.4,9.4C19.4,15.2,15.2,19.4,10,19.4z
M10,13.4c-1.2,0-2.1,0.9-2.1,2.1c0,1.2,0.9,2.1,2.1,2.1c1.2,0,2.1-0.9,2.1-2.1C12.1,14.3,11.2,13.4,10,13.4z M7.9,7l0.9,6.1h2.5
l0.9-6l0-3.7H7.9V7z"/>
<path d="M10,1.2c4.9,0,8.8,3.9,8.8,8.8s-3.9,8.8-8.8,8.8S1.2,14.9,1.2,10S5.1,1.2,10,1.2 M8.2,13.5
c-0.6,0.5-0.9,1.2-0.9,2c0,1.5,1.2,2.7,2.7,2.7c1.5,0,2.7-1.2,2.7-2.7c0-0.8-0.4-1.5-0.9-2l0.1-0.8l0.8-5.5l0-0.1V7V4V2.8h-1.2H8.4
H7.2V4v3v0.1l0,0.1l0.8,5.5L8.2,13.5 M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0L10,0z M9.3,12.5L8.4,7V4h3.1v3
l-0.8,5.5H9.3L9.3,12.5z M10,17c-0.8,0-1.5-0.7-1.5-1.5c0-0.8,0.7-1.5,1.5-1.5c0.8,0,1.5,0.7,1.5,1.5C11.5,16.3,10.8,17,10,17
L10,17z"/>
</g>
</svg>`,
"danger_20": classList => `<svg
class="${classList}"
width="20"
height="20"
viewBox="0 0 30 30">
<path d="M13.3 13.2l.8 7.8h1.8l.8-7.8V10h-3.4z"/>
<circle cx="15" cy="24.2" r="1.8"/>
<path d="M29.9 27.5l-14-25.9c-.2-.4-.5-.6-.9-.6s-.7.2-.9.5L.1 27.4c-.3.8.2
1.6.9 1.6h28c.7 0 1.2-.8.9-1.5zM2.6 27L15 4.1 27.4 27H2.6z"/>
</svg>`,
"failure_fill_20": classList => `<svg
class="${classList}"
width="20px" height="20px" viewBox="0 0 20 20">
<g>
<path d="M19.9,19L10.6,1.4c-0.3-0.5-1-0.5-1.2,0L0.1,19c-0.2,0.5,0.1,1,0.6,1h18.6C19.8,20,20.2,19.4,19.9,19z M10,18
c-0.8,0-1.5-0.7-1.5-1.5c0-0.8,0.7-1.5,1.5-1.5c0.8,0,1.5,0.7,1.5,1.5C11.5,17.3,10.8,18,10,18z M11.5,9l-0.8,5H9.3L8.4,9V6h3.1V9z
"/>
</g>
</svg>`,
"success_20": classList => `<svg
class="${classList}"
width="20"
height="20"
viewBox="0 0 30 30">
<path d="M13 17.6l-3.3-3.3-1.4 1.4 4.7 4.7 8.7-8.7-1.4-1.4z"/>
<path d="M15 3c6.6 0 12 5.4 12 12s-5.4 12-12 12S3 21.6 3 15 8.4 3 15
3m0-2C7.3 1 1 7.3 1 15s6.3 14 14 14 14-6.3 14-14S22.7 1 15 1z"/>
</svg>`,
"success_16": classList => `<svg
class="${classList}"
height="16"
width="16"
viewBox="0 0 16 16">
<path d="M8 1.2c3.7 0 6.8 3.1 6.8 6.8s-3.1 6.8-6.8
6.8S1.2 11.7 1.2 8 4.3 1.2 8 1.2M8
0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"/>
<path d="M6.7 9.6L4.6 7.5l-.9.9 3 3 5.6-5.5-.9-.9z"/>
</svg>`,
"success_fill_20": classList => `<svg
class="${classList}"
width="20px"
height="20px"
viewBox="0 0 20 20">
<g>
<path d="M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0z M8.5,14.1l-3.6-3.6l1.1-1.1L8.5,12l5.6-5.6
l1.1,1.1L8.5,14.1z"/>
</g>
</svg>`,
"error_16": classList => `<svg
class="${classList}"
height="16"
width="16"
viewBox="0 0 16 16">
<path d="M6.9 7.5l.6 3.5h1l.6-3.5V5H6.9z"/>
<circle cx="8" cy="13" r="1"/>
<path d="M15.9 15.2L8.5 1.3C8.4 1.1 8.2 1 8
1s-.4.1-.5.3L.1 15.2c-.2.4 0 .8.5.8h14.9c.4 0 .6-.4.4-.8zm-14.3-.4L8
2.9l6.4 11.9H1.6z"/>
</svg>`,
"search_16": classList => `<svg
class="${classList}"
height="16"
width="16"
viewBox="0 0 16 16">
<g>
<path
d="M6,0C2.7,0,0,2.7,0,6s2.7,6,6,6s6-2.7,6-6S9.3,0,6,0z
M6,11c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5
S8.8,11,6,11z"/>
<rect
x="12"
y="10.2"
transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 31.4698 13.0355)"
width="2"
height="5.7"/>
</g>
</svg>`,
"loading_rows_30": classList => `<svg
class="${classList}"
height="30"
width="30"
viewBox="0 0 32 30">
<circle cx="4" cy="16" r="4" fill="#eee">
<animate id="one" attributeName="fill"
dur="1s"
values="#eee;#999;#eee"
begin="0;two.end"/>
</circle>
<circle cx="16" cy="16" r="4" fill="#eee">
<animate id="two" attributeName="fill"
begin="one.end-0.5s"
dur="1s"
values="#eee;#999;#eee"/>
</circle>
<circle cx="28" cy="16" r="4" fill="#eee">
<animate attributeName="fill"
begin="two.end-0.5s"
dur="1s"
values="#eee;#999;#eee"/>
</circle>
</svg>
`,
"help_16": classList => `<svg
class="${classList}"
height="16"
viewBox="0 0 16 16">
<path
d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0
14.8c-3.7 0-6.8-3.1-6.8-6.8 0-3.7 3.1-6.8 6.8-6.8s6.8 3.1 6.8 6.8c0 3.7-3 6.8-6.8 6.8z" />
<path
d="M8 2.9c-.9 0-1.7.2-2.3.7-.6.5-.9
1.2-1.1 2.1v.2l1.6.1v-.1c.1-.6.3-1.1.6-1.4.4-.3.7-.4 1.2-.4s.9.2 1.3.5c.3.3.5.7.5 1.1 0
.2-.1.4-.2.6-.1.2-.4.4-.8.8-.4.3-.7.6-.9.8-.2.3-.4.5-.5.8v.2c-.1.2-.2.3-.2.6v.6h1.5V10c0-.4
0-.5.1-.6v-.1c.1-.2.1-.3.2-.5.1-.1.3-.3.8-.7.6-.5 1-.9 1.2-1.3.2-.4.3-.8.3-1.2
0-.8-.3-1.4-.9-1.9-.6-.6-1.4-.8-2.4-.8zM7.3 11.5h1.5V13H7.3z" />
</svg>`,
"carat_up_16": classList => `<svg
class="${classList}"
width="16"
height="16"
viewBox="0 0 16 16">
<polygon points="15,12 1,12 8,5 "/>
</svg>
`,
"grip_vertical_16": classList => `<svg
class="${classList}"
width="16"
height="16"
viewBox="0 0 16 16">
<circle cx="6.5" cy="14.5" r="1.5"/>
<circle cx="6.5" cy="10.5" r="1.5"/>
<circle cx="6.5" cy="6.5" r="1.5"/>
<circle cx="10.5" cy="14.5" r="1.5"/>
<circle cx="10.5" cy="10.5" r="1.5"/>
<circle cx="10.5" cy="6.5" r="1.5"/>
<circle cx="6.5" cy="2.5" r="1.5"/>
<circle cx="10.5" cy="2.5" r="1.5"/>
</svg>
`
};
/**
* Initialize the component
*
* @param {ElementRef} elementRef
*/
constructor(protected elementRef: ElementRef) { }
public ngAfterViewInit() {
const el = this.elementRef.nativeElement;
el.style.display = el.style.display || "flex";
const icon = this.iconMap[`${this.icon}_${this.sizeMap[this.size]}`];
if (icon) {
el.innerHTML = icon(this.buildMatterClass() + " " + this.classList);
} else {
console.error(`${this.icon} at size ${this.size}(${this.sizeMap[this.size]}) needs to be added to StaticIcon's iconMap`);
}
}
/**
* Create a class name based on @Input() `color` and `size`.
* @return {string}
*/
public buildMatterClass() {
if (this.color === "dark" && this.size !== "md") {
return `icon--${this.size}`;
} else {
return `icon${this.color !== "dark" ? `--${this.color}` : ""}${this.color !== "dark" && this.size !== "md" ? `-${this.size}` : ""}`;
}
}
}
</code></pre>
</div>
<div class="tab-pane fade" id="tree">
<div id="tree-container"></div>
<div class="tree-legend">
<div class="title">
<b>Legend</b>
</div>
<div>
<div class="color htmlelement"></div><span>Html element</span>
</div>
<div>
<div class="color component"></div><span>Component</span>
</div>
<div>
<div class="color directive"></div><span>Html element with directive</span>
</div>
</div>
</div>
</div>
<script src="../js/libs/vis.min.js"></script>
<script src="../js/libs/htmlparser.js"></script>
<script src="../js/libs/deep-iterator.js"></script>
<script>
var COMPONENT_TEMPLATE = '<div></div>'
var COMPONENTS = [{'name': 'Accordion', 'selector': 'ibm-accordion'},{'name': 'AccordionItem', 'selector': 'ibm-accordion-item'},{'name': 'AlertModal', 'selector': 'ibm-alert-modal'},{'name': 'AlertModalStory', 'selector': 'app-alert-modal-story'},{'name': 'Banner', 'selector': 'ibm-banner'},{'name': 'Calendar', 'selector': 'ibm-calendar'},{'name': 'CalendarHeader', 'selector': 'ibm-calendar-header'},{'name': 'CalendarMonth', 'selector': 'ibm-calendar-month-view'},{'name': 'CalendarMonths', 'selector': 'ibm-calendar-months-view'},{'name': 'CalendarQuarter', 'selector': 'ibm-calendar-quarter-view'},{'name': 'CalendarYear', 'selector': 'ibm-calendar-year-view'},{'name': 'Checkbox', 'selector': 'ibm-checkbox'},{'name': 'ClickableTile', 'selector': 'ibm-clickable-tile'},{'name': 'CodeSnippet', 'selector': 'ibm-code-snippet'},{'name': 'ComboBox', 'selector': 'ibm-combo-box'},{'name': 'ContentSwitcher', 'selector': 'ibm-content-switcher'},{'name': 'Dialog', 'selector': 'ibm-dialog'},{'name': 'DialogPlaceholder', 'selector': 'ibm-dialog-placeholder'},{'name': 'Dropdown', 'selector': 'ibm-dropdown'},{'name': 'DropdownList', 'selector': 'ibm-dropdown-list'},{'name': 'DynamicTableStory', 'selector': 'app-custom-table'},{'name': 'ExpansionTableStory', 'selector': 'app-expansion-table'},{'name': 'Icon', 'selector': 'ibm-icon'},{'name': 'Label', 'selector': 'ibm-label'},{'name': 'ListGroup', 'selector': 'ibm-list-group'},{'name': 'Loading', 'selector': 'ibm-loading'},{'name': 'Modal', 'selector': 'ibm-modal'},{'name': 'ModalFooter', 'selector': 'ibm-modal-footer'},{'name': 'ModalHeader', 'selector': 'ibm-modal-header'},{'name': 'ModalPlaceholder', 'selector': 'ibm-modal-placeholder'},{'name': 'ModalStory', 'selector': 'app-modal-story'},{'name': 'Notification', 'selector': 'ibm-notification'},{'name': 'NotificationStory', 'selector': 'app-notification-story'},{'name': 'OverflowMenu', 'selector': 'ibm-overflow-menu'},{'name': 'OverflowMenuOption', 'selector': 'ibm-overflow-menu-option'},{'name': 'OverflowMenuPane', 'selector': 'ibm-overflow-menu-pane'},{'name': 'OverflowTableStory', 'selector': 'app-overflow-table'},{'name': 'Overlay', 'selector': 'ibm-overlay'},{'name': 'Pagination', 'selector': 'ibm-pagination'},{'name': 'PaginationStory', 'selector': 'app-pagination'},{'name': 'PaginationTableStory', 'selector': 'app-pagination-table'},{'name': 'Pill', 'selector': 'ibm-pill'},{'name': 'PillInput', 'selector': 'ibm-pill-input'},{'name': 'Placeholder', 'selector': 'ibm-placeholder'},{'name': 'ProgressIndicator', 'selector': 'ibm-progress-indicator'},{'name': 'Radio', 'selector': 'ibm-radio'},{'name': 'RadioGroup', 'selector': 'ibm-radio-group'},{'name': 'Sample', 'selector': 'ibm-sample'},{'name': 'SampleModal', 'selector': 'app-sample-modal'},{'name': 'SampleSub', 'selector': 'ibm-sample-sub'},{'name': 'Select', 'selector': 'ibm-select'},{'name': 'Sprite', 'selector': 'ibm-sprite'},{'name': 'StaticIcon', 'selector': 'ibm-static-icon'},{'name': 'Switch', 'selector': 'ibm-switch'},{'name': 'Tab', 'selector': 'ibm-tab'},{'name': 'TabHeaders', 'selector': 'ibm-tab-headers'},{'name': 'Table', 'selector': 'ibm-table'},{'name': 'TableStory', 'selector': 'app-table'},{'name': 'Tabs', 'selector': 'ibm-tabs'},{'name': 'Tile', 'selector': 'ibm-tile'},{'name': 'Toast', 'selector': 'ibm-toast'},{'name': 'Toast', 'selector': 'ibm-toast'},{'name': 'ToastStory', 'selector': 'app-toast-story'},{'name': 'Toggle', 'selector': 'ibm-toggle'},{'name': 'Tooltip', 'selector': 'ibm-tooltip'}];
var DIRECTIVES = [{'name': 'Button', 'selector': '[ibmButton]'},{'name': 'ContentSwitcherOption', 'selector': '[ibmContentOption]'},{'name': 'DialogDirective', 'selector': '[ibmDialog]'},{'name': 'EllipsisTooltip', 'selector': '[ibmEllipsisTooltip]'},{'name': 'Link', 'selector': '[ibmLink]'},{'name': 'OptGroup', 'selector': 'optgroup'},{'name': 'Option', 'selector': 'option'},{'name': 'OverflowMenuDirective', 'selector': '[ibmOverflowMenu]'},{'name': 'ScrollableList', 'selector': '[ibmScrollableList]'},{'name': 'TextArea', 'selector': '[ibmTextArea]'},{'name': 'TextInput', 'selector': '[ibmText]'},{'name': 'TooltipDirective', 'selector': '[ibmTooltip]'}];
var ACTUAL_COMPONENT = {'name': 'StaticIcon'};
</script>
<script src="../js/tree.js"></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 = 1;</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>