carbon-components-angular
Version:
Next generation components
1,334 lines • 51.8 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-variables">
<div class="content-data">
<ol class="breadcrumb">
<li class="breadcrumb-item">Miscellaneous</li>
<li class="breadcrumb-item">Variables</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="#_scrollbarWidth" title="src/utils/window-tools.ts" ><b>_scrollbarWidth</b> (src/.../window-tools.ts)</a>
</li>
<li>
<a href="#ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER" title="src/utils/utils.module.ts" ><b>ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER</b> (src/.../utils.module.ts)</a>
</li>
<li>
<a href="#carbonFlatpickrMonthSelectPlugin" title="src/datepicker/carbon-flatpickr-month-select.ts" ><b>carbonFlatpickrMonthSelectPlugin</b> (src/.../carbon-flatpickr-month-select.ts)</a>
</li>
<li>
<a href="#config" title="src/datepicker/carbon-flatpickr-month-select.ts" ><b>config</b> (src/.../carbon-flatpickr-month-select.ts)</a>
</li>
<li>
<a href="#DEFAULT_TOOLTIP_CONFIG" title="src/tooltip/tooltip.interface.ts" ><b>DEFAULT_TOOLTIP_CONFIG</b> (src/.../tooltip.interface.ts)</a>
</li>
<li>
<a href="#defaultOffset" title="src/dropdown/dropdown.service.ts" ><b>defaultOffset</b> (src/.../dropdown.service.ts)</a>
</li>
<li>
<a href="#defaults" title="src/checkbox/checkbox-exported-tests.ts" ><b>defaults</b> (src/.../checkbox-exported-tests.ts)</a>
</li>
<li>
<a href="#DOCUMENT_SERVICE_PROVIDER" title="src/utils/utils.module.ts" ><b>DOCUMENT_SERVICE_PROVIDER</b> (src/.../utils.module.ts)</a>
</li>
<li>
<a href="#EXPERIMENTAL_SERVICE_PROVIDER" title="src/experimental/experimental.module.ts" ><b>EXPERIMENTAL_SERVICE_PROVIDER</b> (src/.../experimental.module.ts)</a>
</li>
<li>
<a href="#getEventObservable" title="src/utils/event-observable.ts" ><b>getEventObservable</b> (src/.../event-observable.ts)</a>
</li>
<li>
<a href="#getScrollableParents" title="src/utils/scroll.ts" ><b>getScrollableParents</b> (src/.../scroll.ts)</a>
</li>
<li>
<a href="#hasScrollableParents" title="src/utils/scroll.ts" ><b>hasScrollableParents</b> (src/.../scroll.ts)</a>
</li>
<li>
<a href="#I18N_SERVICE_PROVIDER" title="src/i18n/i18n.module.ts" ><b>I18N_SERVICE_PROVIDER</b> (src/.../i18n.module.ts)</a>
</li>
<li>
<a href="#ICON_SERVICE_PROVIDER" title="src/icon/icon.module.ts" ><b>ICON_SERVICE_PROVIDER</b> (src/.../icon.module.ts)</a>
</li>
<li>
<a href="#isScrollableElement" title="src/utils/scroll.ts" ><b>isScrollableElement</b> (src/.../scroll.ts)</a>
</li>
<li>
<a href="#isVisibleInContainer" title="src/utils/scroll.ts" ><b>isVisibleInContainer</b> (src/.../scroll.ts)</a>
</li>
<li>
<a href="#MAX_LEVEL" title="src/layer/layer.directive.ts" ><b>MAX_LEVEL</b> (src/.../layer.directive.ts)</a>
</li>
<li>
<a href="#merge" title="src/utils/object.ts" ><b>merge</b> (src/.../object.ts)</a>
</li>
<li>
<a href="#MINIMUM_OVERFLOW_THRESHOLD" title="src/breadcrumb/breadcrumb.component.ts" ><b>MINIMUM_OVERFLOW_THRESHOLD</b> (src/.../breadcrumb.component.ts)</a>
</li>
<li>
<a href="#monthToStr" title="src/datepicker/carbon-flatpickr-month-select.ts" ><b>monthToStr</b> (src/.../carbon-flatpickr-month-select.ts)</a>
</li>
<li>
<a href="#noop" title="src/file-uploader/file-uploader.component.ts" ><b>noop</b> (src/.../file-uploader.component.ts)</a>
</li>
<li>
<a href="#PLACEHOLDER_SERVICE_PROVIDER" title="src/placeholder/placeholder.module.ts" ><b>PLACEHOLDER_SERVICE_PROVIDER</b> (src/.../placeholder.module.ts)</a>
</li>
<li>
<a href="#REL" title="src/dialog/overflow-menu/overflow-menu-option.component.ts" ><b>REL</b> (src/.../overflow-menu-option.component.ts)</a>
</li>
<li>
<a href="#replace" title="src/i18n/i18n.service.ts" ><b>replace</b> (src/.../i18n.service.ts)</a>
</li>
<li>
<a href="#scrollableParentsObservable" title="src/utils/scroll.ts" ><b>scrollableParentsObservable</b> (src/.../scroll.ts)</a>
</li>
<li>
<a href="#tabbableSelector" title="src/common/tab.service.ts" ><b>tabbableSelector</b> (src/.../tab.service.ts)</a>
</li>
<li>
<a href="#tabbableSelectorIgnoreTabIndex" title="src/common/tab.service.ts" ><b>tabbableSelectorIgnoreTabIndex</b> (src/.../tab.service.ts)</a>
</li>
<li>
<a href="#treetools" title="src/dropdown/dropdowntools.ts" ><b>treetools</b> (src/.../dropdowntools.ts)</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<h3>src/utils/window-tools.ts</h3>
<section data-compodoc="block-properties">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_scrollbarWidth"></a>
<span class="name">
<span ><b>_scrollbarWidth</b></span>
<a href="#_scrollbarWidth"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>-1</code>
</td>
</tr>
</tbody>
</table>
</section>
<h3>src/utils/utils.module.ts</h3>
<section data-compodoc="block-properties">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER"></a>
<span class="name">
<span ><b>ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER</b></span>
<a href="#ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER"><span class="icon ion-ios-link"></span></a>
</span>
</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/object" target="_blank" >object</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>{
provide: AnimationFrameServiceSingleton,
deps: [[new Optional(), new SkipSelf(), AnimationFrameServiceSingleton], NgZone],
useFactory: ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER_FACTORY
}</code>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="DOCUMENT_SERVICE_PROVIDER"></a>
<span class="name">
<span ><b>DOCUMENT_SERVICE_PROVIDER</b></span>
<a href="#DOCUMENT_SERVICE_PROVIDER"><span class="icon ion-ios-link"></span></a>
</span>
</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/object" target="_blank" >object</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>{
provide: DocumentService,
deps: [[new Optional(), new SkipSelf(), DocumentService]],
useFactory: DOCUMENT_SERVICE_PROVIDER_FACTORY
}</code>
</td>
</tr>
</tbody>
</table>
</section>
<h3>src/datepicker/carbon-flatpickr-month-select.ts</h3>
<section data-compodoc="block-properties">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="carbonFlatpickrMonthSelectPlugin"></a>
<span class="name">
<span ><b>carbonFlatpickrMonthSelectPlugin</b></span>
<a href="#carbonFlatpickrMonthSelectPlugin"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>fp => {
const setupElements = () => {
if (!fp.monthElements || !fp.yearElements) {
return;
}
fp.monthElements.forEach(elem => {
if (!elem.parentNode) { return; }
elem.parentNode.removeChild(elem);
});
fp.monthElements.splice(
0,
fp.monthElements.length,
...fp.monthElements.map(() => {
// eslint-disable-next-line no-underscore-dangle
const monthElement = fp._createElement(
"span",
config.classFlatpickrCurrentMonth
);
monthElement.textContent = monthToStr(
fp.currentMonth,
config.shorthand === true,
fp.l10n
);
fp.yearElements[0]
.closest(config.selectorFlatpickrMonthYearContainer)
.insertBefore(
monthElement,
fp.yearElements[0].closest(config.selectorFlatpickrYearContainer)
);
return monthElement;
})
);
};
const updateCurrentMonth = () => {
if (!fp.yearElements) {
return;
}
const monthStr = monthToStr(
fp.currentMonth,
config.shorthand === true,
fp.l10n
);
fp.yearElements.forEach(elem => {
const currentMonthContainer = elem.closest(
config.selectorFlatpickrMonthYearContainer
);
Array.prototype.forEach.call(
currentMonthContainer.querySelectorAll(".cur-month"),
monthElement => {
monthElement.textContent = monthStr;
}
);
});
};
const register = () => {
fp.loadedPlugins.push("carbonFlatpickrMonthSelectPlugin");
};
return {
onMonthChange: updateCurrentMonth,
onValueUpdate: updateCurrentMonth,
onOpen: updateCurrentMonth,
onReady: [setupElements, updateCurrentMonth, register]
};
}</code>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="config"></a>
<span class="name">
<span ><b>config</b></span>
<a href="#config"><span class="icon ion-ios-link"></span></a>
</span>
</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/object" target="_blank" >object</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>{
selectorInit: "[data-date-picker]",
selectorDatePickerInput: "[data-date-picker-input]",
selectorDatePickerInputFrom: "[data-date-picker-input-from]",
selectorDatePickerInputTo: "[data-date-picker-input-to]",
selectorDatePickerIcon: "[data-date-picker-icon]",
selectorFlatpickrMonthYearContainer: ".flatpickr-current-month",
selectorFlatpickrYearContainer: ".numInputWrapper",
selectorFlatpickrCurrentMonth: ".cur-month",
classCalendarContainer: `cds--date-picker__calendar`,
classMonth: `cds--date-picker__month`,
classWeekdays: `cds--date-picker__weekdays`,
classDays: `cds--date-picker__days`,
classWeekday: `cds--date-picker__weekday`,
classDay: `cds--date-picker__day`,
classFocused: `cds--focused`,
classVisuallyHidden: `cds--visually-hidden`,
classFlatpickrCurrentMonth: "cur-month",
attribType: "data-date-picker-type",
dateFormat: "m/d/Y",
shorthand: false
}</code>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="monthToStr"></a>
<span class="name">
<span ><b>monthToStr</b></span>
<a href="#monthToStr"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>(monthNumber, shorthand, locale) =>
locale.months[shorthand ? "shorthand" : "longhand"][monthNumber]</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>This is from carbon-components.
We need it to format the month select according to specs.
Carbon currently doesn't expose this as a seperate package,
and we don't import the carbon-components js (on purpose)
so some copy pasta is required</p>
<p>ref: <a href="https://github.com/carbon-design-system/carbon/blob/">https://github.com/carbon-design-system/carbon/blob/</a>
f06f38f0c2ef624e409a3d5711e897a79f4c88fc/packages/components/src/components/date-picker/date-picker.js#L52-L123</p>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<h3>src/tooltip/tooltip.interface.ts</h3>
<section data-compodoc="block-properties">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="DEFAULT_TOOLTIP_CONFIG"></a>
<span class="name">
<span ><b>DEFAULT_TOOLTIP_CONFIG</b></span>
<a href="#DEFAULT_TOOLTIP_CONFIG"><span class="icon ion-ios-link"></span></a>
</span>
</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/object" target="_blank" >object</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>{
align: "bottom" as TooltipAlignments,
caret: true,
dropShadow: true,
highContrast: true,
isOpen: false,
enterDelayMs: 100,
leaveDelayMs: 300
}</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Default tooltip configuration for components to populate missing interface attributes</p>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<h3>src/dropdown/dropdown.service.ts</h3>
<section data-compodoc="block-properties">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="defaultOffset"></a>
<span class="name">
<span ><b>defaultOffset</b></span>
<a href="#defaultOffset"><span class="icon ion-ios-link"></span></a>
</span>
</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/object" target="_blank" >object</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>{ top: 0, left: 0 }</code>
</td>
</tr>
</tbody>
</table>
</section>
<h3>src/checkbox/checkbox-exported-tests.ts</h3>
<section data-compodoc="block-properties">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="defaults"></a>
<span class="name">
<span ><b>defaults</b></span>
<a href="#defaults"><span class="icon ion-ios-link"></span></a>
</span>
</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/object" target="_blank" >object</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>{
selectors: {
root: "cds-checkbox",
input: "input"
}
}</code>
</td>
</tr>
</tbody>
</table>
</section>
<h3>src/experimental/experimental.module.ts</h3>
<section data-compodoc="block-properties">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="EXPERIMENTAL_SERVICE_PROVIDER"></a>
<span class="name">
<span ><b>EXPERIMENTAL_SERVICE_PROVIDER</b></span>
<a href="#EXPERIMENTAL_SERVICE_PROVIDER"><span class="icon ion-ios-link"></span></a>
</span>
</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/object" target="_blank" >object</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>{
provide: ExperimentalService,
deps: [[new Optional(), new SkipSelf(), ExperimentalService]],
useFactory: EXPERIMENTAL_SERVICE_PROVIDER_FACTORY
}</code>
</td>
</tr>
</tbody>
</table>
</section>
<h3>src/utils/event-observable.ts</h3>
<section data-compodoc="block-properties">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getEventObservable"></a>
<span class="name">
<span ><b>getEventObservable</b></span>
<a href="#getEventObservable"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>(targetElement: HTMLElement | Element, eventType: string): Observable<Event> => {
switch (eventType) {
case "scroll":
case "resize":
case "touchstart":
case "touchmove":
case "touchend":
return fromEvent(targetElement, eventType, { passive: true });
default:
return fromEvent(targetElement, eventType);
}
}</code>
</td>
</tr>
</tbody>
</table>
</section>
<h3>src/utils/scroll.ts</h3>
<section data-compodoc="block-properties">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getScrollableParents"></a>
<span class="name">
<span ><b>getScrollableParents</b></span>
<a href="#getScrollableParents"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>(node: HTMLElement) => {
const elements = [document.body];
while (node.parentElement && node !== document.body) {
if (isScrollableElement(node)) {
elements.push(node);
}
node = node.parentElement;
}
return elements;
}</code>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="hasScrollableParents"></a>
<span class="name">
<span ><b>hasScrollableParents</b></span>
<a href="#hasScrollableParents"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>(node: HTMLElement) => {
while (node.parentElement && node !== document.body) {
if (isScrollableElement(node)) {
return true;
}
node = node.parentElement;
}
return false;
}</code>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isScrollableElement"></a>
<span class="name">
<span ><b>isScrollableElement</b></span>
<a href="#isScrollableElement"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>(element: HTMLElement) => {
const computedStyle = getComputedStyle(element);
return (
computedStyle.overflow === "auto" ||
computedStyle.overflow === "scroll" ||
computedStyle["overflow-y"] === "auto" ||
computedStyle["overflow-y"] === "scroll" ||
computedStyle["overflow-x"] === "auto" ||
computedStyle["overflow-x"] === "scroll"
);
}</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Checks if a given element is scrollable.
If the element has an overflow set as part of its computed style it can scroll.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isVisibleInContainer"></a>
<span class="name">
<span ><b>isVisibleInContainer</b></span>
<a href="#isVisibleInContainer"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>(element: HTMLElement, container: HTMLElement) => {
const elementRect = element.getBoundingClientRect();
const containerRect = container.getBoundingClientRect();
// If there exists `height: 100%` on the `html` or `body` tag of an application,
// it causes the calculation to return true if you need to scroll before the element is seen.
// In that case we calculate its visibility based on the window viewport.
if (container.tagName === "BODY" || container.tagName === "HTML") {
// This checks if element is within the top, bottom, left and right of viewport, ie. if the element is visible in
// the screen. This also takes into account partial visibility of an element.
const isAboveViewport = elementRect.top < 0 && (elementRect.top + element.clientHeight) < 0;
const isLeftOfViewport = elementRect.left < 0;
const isBelowViewport =
(elementRect.bottom - element.clientHeight) > (window.innerHeight || document.documentElement.clientHeight);
const isRightOfViewport = elementRect.right > (window.innerWidth || document.documentElement.clientWidth);
const isVisibleInViewport = !(isAboveViewport || isBelowViewport || isLeftOfViewport || isRightOfViewport);
return isVisibleInViewport;
}
return (
// This also accounts for partial visibility. It will still return true if the element is partially visible inside the container.
(elementRect.bottom - element.clientHeight) <= (containerRect.bottom + (container.offsetHeight - container.clientHeight) / 2) &&
elementRect.top >= (- element.clientHeight)
);
}</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Checks if an element is visible within a container</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="scrollableParentsObservable"></a>
<span class="name">
<span ><b>scrollableParentsObservable</b></span>
<a href="#scrollableParentsObservable"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>(node: HTMLElement): Observable<Event> => {
const windowScroll = fromEvent(window, "scroll", { passive: true }).pipe(map(event => (
// update the event target to be something useful. In this case `body` is a sensible replacement
Object.assign({}, event, { target: document.body }) as Event
)));
let observables = [windowScroll];
// walk the parents and subscribe to all the scroll events we can
while (node.parentElement && node !== document.body) {
if (isScrollableElement(node)) {
observables.push(fromEvent(node, "scroll", { passive: true }));
}
node = node.parentElement;
}
return merge(...observables);
}</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Returns an observable that emits whenever any scrollable parent element scrolls</p>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<h3>src/i18n/i18n.module.ts</h3>
<section data-compodoc="block-properties">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="I18N_SERVICE_PROVIDER"></a>
<span class="name">
<span ><b>I18N_SERVICE_PROVIDER</b></span>
<a href="#I18N_SERVICE_PROVIDER"><span class="icon ion-ios-link"></span></a>
</span>
</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/object" target="_blank" >object</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>{
provide: I18n,
deps: [[new Optional(), new SkipSelf(), I18n]],
useFactory: I18N_SERVICE_PROVIDER_FACTORY
}</code>
</td>
</tr>
</tbody>
</table>
</section>
<h3>src/icon/icon.module.ts</h3>
<section data-compodoc="block-properties">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ICON_SERVICE_PROVIDER"></a>
<span class="name">
<span ><b>ICON_SERVICE_PROVIDER</b></span>
<a href="#ICON_SERVICE_PROVIDER"><span class="icon ion-ios-link"></span></a>
</span>
</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/object" target="_blank" >object</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>{
provide: IconService,
deps: [[new Optional(), new SkipSelf(), IconService]],
useFactory: ICON_SERVICE_PROVIDER_FACTORY
}</code>
</td>
</tr>
</tbody>
</table>
</section>
<h3>src/layer/layer.directive.ts</h3>
<section data-compodoc="block-properties">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="MAX_LEVEL"></a>
<span class="name">
<span ><b>MAX_LEVEL</b></span>
<a href="#MAX_LEVEL"><span class="icon ion-ios-link"></span></a>
</span>
</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/number" target="_blank" >number</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>2</code>
</td>
</tr>
</tbody>
</table>
</section>
<h3>src/utils/object.ts</h3>
<section data-compodoc="block-properties">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="merge"></a>
<span class="name">
<span ><b>merge</b></span>
<a href="#merge"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>(target, ...objects) => {
for (const object of objects) {
for (const key in object) {
if (object.hasOwnProperty(key)) {
// since we're dealing just with JSON this simple check should be enough
if (object[key] instanceof Object) {
if (!target[key]) {
target[key] = {};
}
// recursively merge into the target
// most translations only run 3 or 4 levels deep, so no stack explosions
target[key] = merge(target[key], object[key]);
} else {
target[key] = object[key];
}
}
}
}
return target;
}</code>
</td>
</tr>
</tbody>
</table>
</section>
<h3>src/breadcrumb/breadcrumb.component.ts</h3>
<section data-compodoc="block-properties">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="MINIMUM_OVERFLOW_THRESHOLD"></a>
<span class="name">
<span ><b>MINIMUM_OVERFLOW_THRESHOLD</b></span>
<a href="#MINIMUM_OVERFLOW_THRESHOLD"><span class="icon ion-ios-link"></span></a>
</span>
</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/number" target="_blank" >number</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>4</code>
</td>
</tr>
</tbody>
</table>
</section>
<h3>src/file-uploader/file-uploader.component.ts</h3>
<section data-compodoc="block-properties">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="noop"></a>
<span class="name">
<span ><b>noop</b></span>
<a href="#noop"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>() => { }</code>
</td>
</tr>
</tbody>
</table>
</section>
<h3>src/placeholder/placeholder.module.ts</h3>
<section data-compodoc="block-properties">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="PLACEHOLDER_SERVICE_PROVIDER"></a>
<span class="name">
<span ><b>PLACEHOLDER_SERVICE_PROVIDER</b></span>
<a href="#PLACEHOLDER_SERVICE_PROVIDER"><span class="icon ion-ios-link"></span></a>
</span>
</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/object" target="_blank" >object</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>{
provide: PlaceholderService,
deps: [[new Optional(), new SkipSelf(), PlaceholderService]],
useFactory: PLACEHOLDER_SERVICE_PROVIDER_FACTORY
}</code>
</td>
</tr>
</tbody>
</table>
</section>
<h3>src/dialog/overflow-menu/overflow-menu-option.component.ts</h3>
<section data-compodoc="block-properties">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="REL"></a>
<span class="name">
<span ><b>REL</b></span>
<a href="#REL"><span class="icon ion-ios-link"></span></a>
</span>
</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/string" target="_blank" >string</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>"noreferrer noopener"</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Security HTML anchor rel when target is set</p>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<h3>src/i18n/i18n.service.ts</h3>
<section data-compodoc="block-properties">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="replace"></a>
<span class="name">
<span ><b>replace</b></span>
<a href="#replace"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>(subject, variables) => subject.pipe(
map<string, void>(str => {
const keys = Object.keys(variables);
for (const key of keys) {
const value = variables[key];
str = str.replace(new RegExp(`{{\\s*${key}\\s*}}`, "g"), value);
}
return str;
})
)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Takes the <code>Observable</code> returned from <code>i18n.get</code> and an object of variables to replace.</p>
<p>The keys specify the variable name in the string.</p>
<p>Example:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">service.set({ "TEST": "{{foo}} {{bar}}" });
service.replace(service.get("TEST"), { foo: "test", bar: "asdf" })</code></pre></div><p>Produces: <code>"test asdf"</code></p>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<h3>src/common/tab.service.ts</h3>
<section data-compodoc="block-properties">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="tabbableSelector"></a>
<span class="name">
<span ><b>tabbableSelector</b></span>
<a href="#tabbableSelector"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>"a[href], area[href], input:not([disabled]):not([tabindex=\'-1\']), " +
"button:not([disabled]):not([tabindex=\'-1\']),select:not([disabled]):not([tabindex=\'-1\']), " +
"textarea:not([disabled]):not([tabindex=\'-1\']), " +
"iframe, object, embed, *[tabindex]:not([tabindex=\'-1\']), *[contenteditable=true]"</code>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="tabbableSelectorIgnoreTabIndex"></a>
<span class="name">
<span ><b>tabbableSelectorIgnoreTabIndex</b></span>
<a href="#tabbableSelectorIgnoreTabIndex"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>"a[href], area[href], input:not([disabled]), " +
"button:not([disabled]),select:not([disabled]), " +
"textarea:not([disabled]), " +
"iframe, object, embed, *[tabindex], *[contenteditable=true]"</code>
</td>
</tr>
</tbody>
</table>
</section>
<h3>src/dropdown/dropdowntools.ts</h3>
<section data-compodoc="block-properties">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="treetools"></a>
<span class="name">
<span ><b>treetools</b></span>
<a href="#treetools"><span class="icon ion-ios-link"></span></a>
</span>
</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/object" target="_blank" >object</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>{
/** finds an item in a set of items and returns the item and path to the item as an array */
find: function(items, itemToFind, path = []) {
let found;
for (let i of items) {
if (i === itemToFind) {
path.push(i);
found = i;
}
if (i.items && !found) {
path.push(i);
found = this.find(i.items, itemToFind, path).found;
if (!found) { path = []; }
}
}
return {found, path};
}
}</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>bundle of functions to aid in manipulating tree structures</p>
</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-variables';
var COMPODOC_CURRENT_PAGE_URL = 'variables.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>