carbon-components-angular
Version:
Next generation components
1,971 lines • 75 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">
<link rel="stylesheet" href="../styles/dark.css">
<style>
footer.carbon {
position: absolute;
bottom: 0;
width: 100%;
z-index: 9999;
}
#root > div {
/*
* Subtracting the height of the footer to prevent
* overlaying the footer ontop of content
*/
height: calc(100vh - 48px);
}
</style>
</head>
<body>
<script>
// Blocking script to avoid flickering dark mode
// Dark mode toggle button
var useDark = window.matchMedia('(prefers-color-scheme: dark)');
var darkModeState = useDark.matches;
var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
function checkToggle(check) {
for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
$darkModeToggleSwitchers[i].checked = check;
}
}
function toggleDarkMode(state) {
if (window.localStorage) {
localStorage.setItem('compodoc_darkmode-state', state);
}
checkToggle(state);
const hasClass = document.body.classList.contains('dark');
if (state) {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.add('dark');
}
if (!hasClass) {
document.body.classList.add('dark');
}
} else {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.remove('dark');
}
if (hasClass) {
document.body.classList.remove('dark');
}
}
}
useDark.addEventListener('change', function (evt) {
toggleDarkMode(evt.matches);
});
if (darkModeStateLocal) {
darkModeState = darkModeStateLocal === 'true';
}
toggleDarkMode(darkModeState);
</script>
<div class="navbar navbar-default navbar-fixed-top d-md-none p-0">
<div class="d-flex">
<a href="../" class="navbar-brand">carbon-components-angular documentation</a>
<button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
</div>
</div>
<div class="xs-menu menu" id="mobile-menu">
<div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu>
</div>
<div class="container-fluid main">
<div class="row main">
<div class="d-none d-md-block menu">
<compodoc-menu mode="normal"></compodoc-menu>
</div>
<!-- START CONTENT -->
<div class="content miscellaneous-functions">
<div class="content-data">
<ol class="breadcrumb">
<li class="breadcrumb-item">Miscellaneous</li>
<li class="breadcrumb-item">Functions</li>
</ol>
<section data-compodoc="block-index">
<h3 id="index">Index</h3>
<table class="table table-sm table-bordered index-table">
<tbody>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER_FACTORY" title="src/utils/utils.module.ts" ><b>ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER_FACTORY</b> (src/.../utils.module.ts)</a>
</li>
<li>
<a href="#clone" title="src/utils/utils.ts" ><b>clone</b> (src/.../utils.ts)</a>
</li>
<li>
<a href="#closestAttr" title="src/utils/utils.ts" ><b>closestAttr</b> (src/.../utils.ts)</a>
</li>
<li>
<a href="#cycleTabs" title="src/common/tab.service.ts" ><b>cycleTabs</b> (src/.../tab.service.ts)</a>
</li>
<li>
<a href="#DOCUMENT_SERVICE_PROVIDER_FACTORY" title="src/utils/utils.module.ts" ><b>DOCUMENT_SERVICE_PROVIDER_FACTORY</b> (src/.../utils.module.ts)</a>
</li>
<li>
<a href="#EXPERIMENTAL_SERVICE_PROVIDER_FACTORY" title="src/experimental/experimental.module.ts" ><b>EXPERIMENTAL_SERVICE_PROVIDER_FACTORY</b> (src/.../experimental.module.ts)</a>
</li>
<li>
<a href="#findNextElem" title="src/utils/a11y.ts" ><b>findNextElem</b> (src/.../a11y.ts)</a>
</li>
<li>
<a href="#findPrevElem" title="src/utils/a11y.ts" ><b>findPrevElem</b> (src/.../a11y.ts)</a>
</li>
<li>
<a href="#findSiblingElem" title="src/utils/a11y.ts" ><b>findSiblingElem</b> (src/.../a11y.ts)</a>
</li>
<li>
<a href="#focusFirstFocusableElement" title="src/common/tab.service.ts" ><b>focusFirstFocusableElement</b> (src/.../tab.service.ts)</a>
</li>
<li>
<a href="#focusLastFocusableElement" title="src/common/tab.service.ts" ><b>focusLastFocusableElement</b> (src/.../tab.service.ts)</a>
</li>
<li>
<a href="#focusNextElem" title="src/utils/a11y.ts" ><b>focusNextElem</b> (src/.../a11y.ts)</a>
</li>
<li>
<a href="#focusNextTree" title="src/utils/a11y.ts" ><b>focusNextTree</b> (src/.../a11y.ts)</a>
</li>
<li>
<a href="#focusPrevElem" title="src/utils/a11y.ts" ><b>focusPrevElem</b> (src/.../a11y.ts)</a>
</li>
<li>
<a href="#getFocusElementList" title="src/common/tab.service.ts" ><b>getFocusElementList</b> (src/.../tab.service.ts)</a>
</li>
<li>
<a href="#getScrollbarWidth" title="src/utils/window-tools.ts" ><b>getScrollbarWidth</b> (src/.../window-tools.ts)</a>
</li>
<li>
<a href="#HcModeChecker" title="src/utils/a11y.ts" ><b>HcModeChecker</b> (src/.../a11y.ts)</a>
</li>
<li>
<a href="#I18N_SERVICE_PROVIDER_FACTORY" title="src/i18n/i18n.module.ts" ><b>I18N_SERVICE_PROVIDER_FACTORY</b> (src/.../i18n.module.ts)</a>
</li>
<li>
<a href="#ICON_SERVICE_PROVIDER_FACTORY" title="src/icon/icon.module.ts" ><b>ICON_SERVICE_PROVIDER_FACTORY</b> (src/.../icon.module.ts)</a>
</li>
<li>
<a href="#isElementFocused" title="src/common/tab.service.ts" ><b>isElementFocused</b> (src/.../tab.service.ts)</a>
</li>
<li>
<a href="#isFocusInFirstItem" title="src/common/tab.service.ts" ><b>isFocusInFirstItem</b> (src/.../tab.service.ts)</a>
</li>
<li>
<a href="#isFocusInLastItem" title="src/common/tab.service.ts" ><b>isFocusInLastItem</b> (src/.../tab.service.ts)</a>
</li>
<li>
<a href="#isObject" title="src/exported-tests/component-tests.ts" ><b>isObject</b> (src/.../component-tests.ts)</a>
</li>
<li>
<a href="#isVisible" title="src/common/tab.service.ts" ><b>isVisible</b> (src/.../tab.service.ts)</a>
</li>
<li>
<a href="#matchesAttr" title="src/utils/utils.ts" ><b>matchesAttr</b> (src/.../utils.ts)</a>
</li>
<li>
<a href="#PLACEHOLDER_SERVICE_PROVIDER_FACTORY" title="src/placeholder/placeholder.module.ts" ><b>PLACEHOLDER_SERVICE_PROVIDER_FACTORY</b> (src/.../placeholder.module.ts)</a>
</li>
<li>
<a href="#range" title="src/common/utils.ts" ><b>range</b> (src/.../utils.ts)</a>
</li>
<li>
<a href="#watchFocusJump" title="src/dropdown/dropdowntools.ts" ><b>watchFocusJump</b> (src/.../dropdowntools.ts)</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<h3>src/utils/utils.module.ts</h3>
<section data-compodoc="block-methods">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER_FACTORY"></a>
<span class="name">
<span ><b>ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER_FACTORY</b></span>
<a href="#ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER_FACTORY"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER_FACTORY(parentService: <a href="../injectables/AnimationFrameServiceSingleton.html" target="_self">AnimationFrameServiceSingleton</a>, ngZone: NgZone)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>parentService</td>
<td>
<code><a href="../injectables/AnimationFrameServiceSingleton.html" target="_self" >AnimationFrameServiceSingleton</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>ngZone</td>
<td>
<code>NgZone</code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="DOCUMENT_SERVICE_PROVIDER_FACTORY"></a>
<span class="name">
<span ><b>DOCUMENT_SERVICE_PROVIDER_FACTORY</b></span>
<a href="#DOCUMENT_SERVICE_PROVIDER_FACTORY"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>DOCUMENT_SERVICE_PROVIDER_FACTORY(parentService: <a href="../injectables/DocumentService.html" target="_self">DocumentService</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>parentService</td>
<td>
<code><a href="../injectables/DocumentService.html" target="_self" >DocumentService</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</section> <h3>src/utils/utils.ts</h3>
<section data-compodoc="block-methods">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="clone"></a>
<span class="name">
<span ><b>clone</b></span>
<a href="#clone"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>clone(obj)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>obj</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="closestAttr"></a>
<span class="name">
<span ><b>closestAttr</b></span>
<a href="#closestAttr"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>closestAttr(s, t, element)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>s</td>
<td>
No
</td>
</tr>
<tr>
<td>t</td>
<td>
No
</td>
</tr>
<tr>
<td>element</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="matchesAttr"></a>
<span class="name">
<span ><b>matchesAttr</b></span>
<a href="#matchesAttr"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>matchesAttr(el, attr, val)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>el</td>
<td>
No
</td>
</tr>
<tr>
<td>attr</td>
<td>
No
</td>
</tr>
<tr>
<td>val</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</section> <h3>src/common/tab.service.ts</h3>
<section data-compodoc="block-methods">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="cycleTabs"></a>
<span class="name">
<span ><b>cycleTabs</b></span>
<a href="#cycleTabs"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>cycleTabs(event, element)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>event</td>
<td>
No
</td>
</tr>
<tr>
<td>element</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="focusFirstFocusableElement"></a>
<span class="name">
<span ><b>focusFirstFocusableElement</b></span>
<a href="#focusFirstFocusableElement"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>focusFirstFocusableElement(list)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>list</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="focusLastFocusableElement"></a>
<span class="name">
<span ><b>focusLastFocusableElement</b></span>
<a href="#focusLastFocusableElement"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>focusLastFocusableElement(list)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>list</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getFocusElementList"></a>
<span class="name">
<span ><b>getFocusElementList</b></span>
<a href="#getFocusElementList"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>getFocusElementList(element, selector)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
<td>Default value</td>
</tr>
</thead>
<tbody>
<tr>
<td>element</td>
<td>
No
</td>
<td>
</td>
</tr>
<tr>
<td>selector</td>
<td>
No
</td>
<td>
<code>tabbableSelector</code>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isElementFocused"></a>
<span class="name">
<span ><b>isElementFocused</b></span>
<a href="#isElementFocused"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>isElementFocused(event, element)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>event</td>
<td>
No
</td>
</tr>
<tr>
<td>element</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isFocusInFirstItem"></a>
<span class="name">
<span ><b>isFocusInFirstItem</b></span>
<a href="#isFocusInFirstItem"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>isFocusInFirstItem(event, list)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>event</td>
<td>
No
</td>
</tr>
<tr>
<td>list</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isFocusInLastItem"></a>
<span class="name">
<span ><b>isFocusInLastItem</b></span>
<a href="#isFocusInLastItem"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>isFocusInLastItem(event, list)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>event</td>
<td>
No
</td>
</tr>
<tr>
<td>list</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isVisible"></a>
<span class="name">
<span ><b>isVisible</b></span>
<a href="#isVisible"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>isVisible(element)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>element</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</section> <h3>src/experimental/experimental.module.ts</h3>
<section data-compodoc="block-methods">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="EXPERIMENTAL_SERVICE_PROVIDER_FACTORY"></a>
<span class="name">
<span ><b>EXPERIMENTAL_SERVICE_PROVIDER_FACTORY</b></span>
<a href="#EXPERIMENTAL_SERVICE_PROVIDER_FACTORY"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>EXPERIMENTAL_SERVICE_PROVIDER_FACTORY(parentService: <a href="../injectables/ExperimentalService.html" target="_self">ExperimentalService</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>parentService</td>
<td>
<code><a href="../injectables/ExperimentalService.html" target="_self" >ExperimentalService</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</section> <h3>src/utils/a11y.ts</h3>
<section data-compodoc="block-methods">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="findNextElem"></a>
<span class="name">
<span ><b>findNextElem</b></span>
<a href="#findNextElem"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>findNextElem(target)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>target</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="findPrevElem"></a>
<span class="name">
<span ><b>findPrevElem</b></span>
<a href="#findPrevElem"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>findPrevElem(target)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>target</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="findSiblingElem"></a>
<span class="name">
<span ><b>findSiblingElem</b></span>
<a href="#findSiblingElem"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>findSiblingElem(target, direction)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>target</td>
<td>
No
</td>
</tr>
<tr>
<td>direction</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="focusNextElem"></a>
<span class="name">
<span ><b>focusNextElem</b></span>
<a href="#focusNextElem"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>focusNextElem(elem, rootElem: null)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Default value</td>
</tr>
</thead>
<tbody>
<tr>
<td>elem</td>
<td>
</td>
<td>
No
</td>
<td>
</td>
</tr>
<tr>
<td>rootElem</td>
<td>
<code>null</code>
</td>
<td>
No
</td>
<td>
<code>null</code>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="focusNextTree"></a>
<span class="name">
<span ><b>focusNextTree</b></span>
<a href="#focusNextTree"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>focusNextTree(elem, rootElem: null)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Default value</td>
</tr>
</thead>
<tbody>
<tr>
<td>elem</td>
<td>
</td>
<td>
No
</td>
<td>
</td>
</tr>
<tr>
<td>rootElem</td>
<td>
<code>null</code>
</td>
<td>
No
</td>
<td>
<code>null</code>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="focusPrevElem"></a>
<span class="name">
<span ><b>focusPrevElem</b></span>
<a href="#focusPrevElem"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>focusPrevElem(elem, parentRef: null)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Default value</td>
</tr>
</thead>
<tbody>
<tr>
<td>elem</td>
<td>
</td>
<td>
No
</td>
<td>
</td>
</tr>
<tr>
<td>parentRef</td>
<td>
<code>null</code>
</td>
<td>
No
</td>
<td>
<code>null</code>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="HcModeChecker"></a>
<span class="name">
<span ><b>HcModeChecker</b></span>
<a href="#HcModeChecker"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>HcModeChecker()</code>
</td>
</tr>
</tbody>
</table>
</section> <h3>src/utils/window-tools.ts</h3>
<section data-compodoc="block-methods">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getScrollbarWidth"></a>
<span class="name">
<span ><b>getScrollbarWidth</b></span>
<a href="#getScrollbarWidth"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>getScrollbarWidth()</code>
</td>
</tr>
</tbody>
</table>
</section> <h3>src/i18n/i18n.module.ts</h3>
<section data-compodoc="block-methods">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="I18N_SERVICE_PROVIDER_FACTORY"></a>
<span class="name">
<span ><b>I18N_SERVICE_PROVIDER_FACTORY</b></span>
<a href="#I18N_SERVICE_PROVIDER_FACTORY"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>I18N_SERVICE_PROVIDER_FACTORY(parentService: <a href="../injectables/I18n.html" target="_self">I18n</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>parentService</td>
<td>
<code><a href="../injectables/I18n.html" target="_self" >I18n</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</section> <h3>src/icon/icon.module.ts</h3>
<section data-compodoc="block-methods">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ICON_SERVICE_PROVIDER_FACTORY"></a>
<span class="name">
<span ><b>ICON_SERVICE_PROVIDER_FACTORY</b></span>
<a href="#ICON_SERVICE_PROVIDER_FACTORY"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>ICON_SERVICE_PROVIDER_FACTORY(parentService: <a href="../injectables/IconService.html" target="_self">IconService</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>parentService</td>
<td>
<code><a href="../injectables/IconService.html" target="_self" >IconService</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</section> <h3>src/exported-tests/component-tests.ts</h3>
<section data-compodoc="block-methods">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isObject"></a>
<span class="name">
<span ><b>isObject</b></span>
<a href="#isObject"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>isObject(val)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>val</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</section> <h3>src/placeholder/placeholder.module.ts</h3>
<section data-compodoc="block-methods">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="PLACEHOLDER_SERVICE_PROVIDER_FACTORY"></a>
<span class="name">
<span ><b>PLACEHOLDER_SERVICE_PROVIDER_FACTORY</b></span>
<a href="#PLACEHOLDER_SERVICE_PROVIDER_FACTORY"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>PLACEHOLDER_SERVICE_PROVIDER_FACTORY(parentService: <a href="../injectables/PlaceholderService.html" target="_self">PlaceholderService</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>parentService</td>
<td>
<code><a href="../injectables/PlaceholderService.html" target="_self" >PlaceholderService</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</section> <h3>src/common/utils.ts</h3>
<section data-compodoc="block-methods">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="range"></a>
<span class="name">
<span ><b>range</b></span>
<a href="#range"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>range(stop: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank">number</a>, start: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank">number</a>, step: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank">number</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Does what python's <code>range</code> function does, with a slightly different
signature because of Typescript limitations.</p>
<p>Useful for numbered loops in angular templates, since we can do
a normal for loop.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Default value</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>stop</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</td>
<td>
No
</td>
<td>
</td>
<td>
<p>Generate numbers up to, but not including this number</p>
</td>
</tr>
<tr>
<td>start</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</td>
<td>
No
</td>
<td>
<code>0</code>
</td>
<td>
<p>Starting number of the sequence</p>
</td>
</tr>
<tr>
<td>step</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</td>
<td>
No
</td>
<td>
<code>1</code>
</td>
<td>
<p>Difference between each number in the sequence</p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</section> <h3>src/dropdown/dropdowntools.ts</h3>
<section data-compodoc="block-methods">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="watchFocusJump"></a>
<span class="name">
<span ><b>watchFocusJump</b></span>
<a href="#watchFocusJump"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>watchFocusJump(target: HTMLElement, elements)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>returns an observable bound to keydown events that
filters to a single element where the first letter of
it's textContent matches the key pressed</p>
</div>
<div class="io-description">
<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>target</td>
<td>
<code>HTMLElement</code>
</td>
<td>
No
</td>
<td>
<p>element to watch</p>
</td>
</tr>
<tr>
<td>elements</td>
<td>
</td>
<td>
No
</td>
<td>
<p>elements to search</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code>Observable<HTMLElement></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
</section>
</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>
<!-- END CONTENT -->
</div>
</div>
<label class="dark-mode-switch">
<input type="checkbox">
<span class="slider">
<svg class="slider-icon" viewBox="0 0 24 24" fill="none" height="20" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
</svg>
</span>
</label>
<script>
var COMPODOC_CURRENT_PAGE_DEPTH = 1;
var COMPODOC_CURRENT_PAGE_CONTEXT = 'miscellaneous-functions';
var COMPODOC_CURRENT_PAGE_URL = 'functions.html';
var MAX_SEARCH_RESULTS = 15;
</script>
<script>
$darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
checkToggle(darkModeState);
if ($darkModeToggleSwitchers.length > 0) {
for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
$darkModeToggleSwitchers[i].addEventListener('change', function (event) {
darkModeState = !darkModeState;
toggleDarkMode(darkModeState);
});
}
}
</script>
<script src="../js/libs/custom-elements.min.js"></script>
<script src="../js/libs/lit-html.js"></script>
<script src="../js/menu-wc.js" defer></script>
<script nomodule src="../js/menu-wc_es5.js" defer></script>
<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 src="../js/tabs.js"></script>
<script src="../js/menu.js"></script>
<script src="../js/libs/clipboard.min.js"></script>
<script src="../js/libs/prism.js"></script>
<script src="../js/sourceCode.js"></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/search/search_index.js"></script>
<script src="../js/lazy-load-graphs.js"></script>
<footer class="carbon">
<dds-footer-container key="footer" disable-locale-button="true" size="micro" />
</footer>
<script
key="8"
type="module"
src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/footer.min.js">
</script>
<!-- Storybook override -->
<script>
document.title = "Carbon Components Angular";
</script>
<script
src="//1.www.s81c.com/common/stats/ibm-common.js"
type="text/javascript"
async="async">
</script>
</body>
</html>