carbon-components-angular
Version:
Next generation components
1,782 lines • 90.6 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" data-type="entity-link" class="active" >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" >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" data-type="entity-link" class="active" >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 class">
<div class="content-data">
<ol class="breadcrumb">
<li>Classes</li>
<li>CheckboxChange</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>
</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/checkbox/checkbox.component.ts</code>
</p>
<p class="comment">
<h3>Description</h3>
</p>
<p class="comment">
<p>Used to emit changes performed on checkbox components.</p>
</p>
<p class="comment">
<h3>Example</h3>
</p>
<div class="io-description">
</div>
<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>
<a href="#checked">checked</a>
</li>
<li>
<a href="#source">source</a>
</li>
</ul>
</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="checked"></a>
<span class="name"><b> checked</b><a href="#checked"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>checked: <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="45" class="link-to-prism">src/checkbox/checkbox.component.ts:45</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>The state of the <code>Checkbox</code> encompassed in the <code>CheckboxChange</code> class.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="source"></a>
<span class="name"><b> source</b><a href="#source"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>source: <code><a href="../components/Checkbox.html" target="_self" >Checkbox</a></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../components/Checkbox.html" target="_self" >Checkbox</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="39" class="link-to-prism">src/checkbox/checkbox.component.ts:39</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Contains the <code>Checkbox</code> that has been changed.</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 {
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
Input,
Output,
ViewChild,
HostBinding
} from "@angular/core";
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";
/**
* Defines the set of states for a checkbox component.
* @export
* @enum {number}
*/
export enum CheckboxState {
Init,
Indeterminate,
Checked,
Unchecked
}
/**
* Used to emit changes performed on checkbox components.
* @export
* @class CheckboxChange
*/
export class CheckboxChange {
/**
* Contains the `Checkbox` that has been changed.
* @type {Checkbox}
* @memberof CheckboxChange
*/
source: Checkbox;
/**
* The state of the `Checkbox` encompassed in the `CheckboxChange` class.
* @type {boolean}
* @memberof CheckboxChange
*/
checked: boolean;
}
/**
* @export
* @class Checkbox
* @implements {ControlValueAccessor}
* @implements {AfterViewInit}
*/
@Component({
selector: "ibm-checkbox",
template: `
<input
#inputCheckbox
class="bx--checkbox"
type="checkbox"
[id]="id"
[value]="value"
[name]="name"
[required]="required"
[checked]="checked"
[disabled]="disabled"
[indeterminate]="indeterminate"
[attr.aria-label]="ariaLabel"
[attr.aria-labelledby]="ariaLabelledby"
[attr.aria-checked]="(indeterminate ? 'mixed' : checked)"
(change)="onChange($event)"
(click)="onClick($event)">
<label [for]="id" class="bx--checkbox-label">
<ng-content></ng-content>
</label>
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: Checkbox,
multi: true
}
],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class Checkbox implements ControlValueAccessor, AfterViewInit {
/**
* Variable used for creating unique ids for checkbox components.
*/
static checkboxCount = 0;
@HostBinding("attr.class") class = "bx--checkbox-wrapper";
/**
* Size of the checkbox.
*/
@Input() size: "sm" | "md" = "md";
/**
* Set to `true` for checkbox to be rendered with inline styles.
*/
@Input() inline: boolean;
/**
* Set to `true` for checkbox to be rendered with nested styles.
*/
@Input() nested: boolean;
/**
* Set to `true` for a disabled checkbox.
*/
@Input() disabled = false;
/**
* Sets the name attribute on the `input` element.
*/
@Input() name: string;
/**
* The unique id for the checkbox component.
*/
@Input() id = `checkbox-${Checkbox.checkboxCount}`;
/**
* Reflects the required attribute of the `input` element.
*/
@Input() required: boolean;
/**
* Sets the value attribute on the `input` element.
*/
@Input() value: string;
/**
* Used to set the `aria-label` attribute on the input element.
*/
// tslint:disable-next-line:no-input-rename
@Input("aria-label") ariaLabel = "";
/**
* Used to set the `aria-labelledby` attribute on the input element.
*/
// tslint:disable-next-line:no-input-rename
@Input("aria-labelledby") ariaLabelledby: string;
/**
* Reflects whether the checkbox state is indeterminate.
* @readonly
*/
@Input() get indeterminate() {
return this._indeterminate;
}
/**
* Set the checkbox's indeterminate state to match the parameter and transition the view to reflect the change.
*/
set indeterminate(indeterminate: boolean) {
let changed = this._indeterminate !== indeterminate;
this._indeterminate = indeterminate;
if (changed) {
this.transitionCheckboxState(CheckboxState.Indeterminate);
} else {
this.transitionCheckboxState(this.checked ? CheckboxState.Checked : CheckboxState.Unchecked);
}
this.indeterminateChange.emit(this._indeterminate);
}
/**
* Returns value `true` if state is selected for the checkbox.
* @readonly
*/
@Input() get checked() {
return this._checked;
}
/**
* Updating the state of a checkbox to match the state of the parameter passed in.
*/
set checked (checked: boolean) {
if (checked !== this.checked) {
if (this._indeterminate) {
Promise.resolve().then(() => {
this._indeterminate = false;
this.indeterminateChange.emit(this._indeterminate);
});
}
this._checked = checked;
this.changeDetectorRef.markForCheck();
}
}
/**
* Emits event notifying other classes when a change in state occurs on a checkbox after a
* click.
*/
@Output() change = new EventEmitter<CheckboxChange>();
/**
* Emits event notifying other classes when a change in state occurs specifically
* on an indeterminate checkbox.
*/
@Output() indeterminateChange = new EventEmitter<boolean>();
/**
* Set to `true` if the input checkbox is selected (or checked).
*/
_checked = false;
/**
* Set to `true` if the input checkbox is in state indeterminate.
*/
_indeterminate = false;
currentCheckboxState: CheckboxState = CheckboxState.Init;
/**
* Maintains a reference to the view DOM element of the `Checkbox`.
*/
@ViewChild("inputCheckbox") inputCheckbox: ElementRef;
/**
* Creates an instance of `Checkbox`.
* @param {ChangeDetectorRef} changeDetectorRef
* @memberof Checkbox
*/
constructor(protected changeDetectorRef: ChangeDetectorRef) {
Checkbox.checkboxCount++;
}
/**
* Creates a class name based on `@Input() size`, `@Input() inline`, and `@Input() nested`.
* @return {string}
*/
public getVariantClass() {
if (this.inline || this.nested) {
return `checkbox${this.inline ? "--inline" : ""}${this.nested ? "--nested" : ""}${this.size !== "md" ? `-${this.size}` : ""}`;
} else {
return `checkbox${this.size !== "md" ? `--${this.size}` : ""}`;
}
}
/**
* Toggle the selected state of the checkbox.
* @memberof Checkbox
*/
public toggle() {
this.checked = !this.checked;
}
// this is the initial value set to the component
public writeValue(value: any) {
this.checked = !!value;
}
/**
* Sets a method in order to propagate changes back to the form.
* @param {any} fn
* @memberof Checkbox
*/
public registerOnChange(fn: any) {
this.propagateChange = fn;
}
/**
* Registers a callback to be triggered when the control has been touched.
* @param fn Callback to be triggered when the checkbox is touched.
*/
public registerOnTouched(fn: any) {
this.onTouched = fn;
}
/**
* Executes on the event of a change within `Checkbox` to block propagation.
* @param {any} event
* @memberof Checkbox
*/
onChange(event) {
event.stopPropagation();
}
/**
* Handles click events on the `Checkbox` and emits changes to other classes.
* @param {any} event
* @memberof Checkbox
*/
onClick(event) {
if (!this.disabled) {
this.toggle();
this.transitionCheckboxState(this._checked ? CheckboxState.Checked : CheckboxState.Unchecked);
this.emitChangeEvent();
}
}
/**
* Called when checkbox is blurred. Needed to properly implement `ControlValueAccessor`.
* @memberof Checkbox
*/
onTouched: () => any = () => {};
/**
* Handles changes between checkbox states.
* @param {CheckboxState} newState
* @returns {null}
* @memberof Checkbox
*/
transitionCheckboxState(newState: CheckboxState) {
let oldState = this.currentCheckboxState;
// Indeterminate has to be set always if it's transitioned to
// checked has to be set before indeterminate or it overrides
// indeterminate's dash
if (newState === CheckboxState.Indeterminate) {
this.checked = false;
this.inputCheckbox.nativeElement.indeterminate = true;
}
if (oldState === newState) {
return;
}
this.currentCheckboxState = newState;
}
/**
* Creates instance of `CheckboxChange` used to propagate the change event.
* @memberof Checkbox
*/
emitChangeEvent() {
let event = new CheckboxChange();
event.source = this;
event.checked = this.checked;
this.propagateChange(this.checked);
this.change.emit(event);
}
/**
* Updates the checkbox if it is in the indeterminate state.
* @memberof Checkbox
*/
ngAfterViewInit() {
if (this.indeterminate) {
this.inputCheckbox.nativeElement.indeterminate = true;
this.checked = false;
}
}
/**
* Method set in `registerOnChange` to propagate changes back to the form.
* @memberof Checkbox
*/
propagateChange = (_: any) => {};
}
</code></pre>
</div>
</div>
</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>