carbon-components-angular
Version:
Next generation components
1,107 lines (989 loc) • 63.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">
<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 component">
<div class="content-data">
<ol class="breadcrumb">
<li class="breadcrumb-item">Components</li>
<li class="breadcrumb-item"
>
InlineLoading</li>
</ol>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a href="#info" class="nav-link active"
role="tab" id="info-tab" data-bs-toggle="tab" data-link="info">Info</a>
</li>
<li class="nav-item">
<a href="#source" class="nav-link"
role="tab" id="source-tab" data-bs-toggle="tab" data-link="source">Source</a>
</li>
<li class="nav-item">
<a href="#tree" class="nav-link"
role="tab" id="tree-tab" data-bs-toggle="tab" data-link="dom-tree">DOM Tree</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="info"><p class="comment">
<h3>File</h3>
</p>
<p class="comment">
<code>src/inline-loading/inline-loading.component.ts</code>
</p>
<p class="comment">
<h3>Description</h3>
</p>
<p class="comment">
<p>Get started with importing the module:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">import { InlineLoadingModule } from 'carbon-components-angular';</code></pre></div><p><a href="../../?path=/story/components-inline-loading--basic">See demo</a></p>
</p>
<section data-compodoc="block-metadata">
<h3>Metadata</h3>
<table class="table table-sm table-hover metadata">
<tbody>
<tr>
<td class="col-md-3">selector</td>
<td class="col-md-9"><code>cds-inline-loading, ibm-inline-loading</code></td>
</tr>
<tr>
<td class="col-md-3">template</td>
<td class="col-md-9"><pre class="line-numbers"><code class="language-html"><div *ngIf="state !== InlineLoadingState.Hidden"
class="cds--inline-loading__animation">
<div
*ngIf="state === InlineLoadingState.Inactive || state === InlineLoadingState.Active"
class="cds--loading cds--loading--small"
[ngClass]="{
'cds--loading--stop': state === InlineLoadingState.Inactive
}">
<svg class="cds--loading__svg" viewBox="0 0 100 100">
<title *ngIf="iconDescription">{{iconDescription}}</title>
<circle class="cds--loading__background" cx="50%" cy="50%" r="44" />
<circle class="cds--loading__stroke" cx="50%" cy="50%" r="44" />
</svg>
</div>
<svg
*ngIf="state === InlineLoadingState.Finished"
cdsIcon="checkmark--filled"
size="16"
class="cds--inline-loading__checkmark-container"
[attr.title]="iconDescription || null">
</svg>
<svg
*ngIf="state === InlineLoadingState.Error"
cdsIcon="error--filled"
size="16"
class="cds--inline-loading--error"
[attr.title]="iconDescription || null">
</svg>
</div>
<p
*ngIf="state === InlineLoadingState.Inactive || state === InlineLoadingState.Active"
class="cds--inline-loading__text">{{loadingText}}</p>
<p *ngIf="state === InlineLoadingState.Finished" class="cds--inline-loading__text">{{successText}}</p>
<p *ngIf="state === InlineLoadingState.Error" class="cds--inline-loading__text">{{errorText}}</p>
</code></pre></td>
</tr>
</tbody>
</table>
</section>
<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">
<h6><b>Properties</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#InlineLoadingState" >InlineLoadingState</a>
</li>
<li>
<span class="modifier"></span>
<a href="#loadingClass" >loadingClass</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Inputs</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#errorText" >errorText</a>
</li>
<li>
<a href="#iconDescription" >iconDescription</a>
</li>
<li>
<a href="#isActive" >isActive</a>
</li>
<li>
<a href="#loadingText" >loadingText</a>
</li>
<li>
<a href="#state" >state</a>
</li>
<li>
<a href="#success" >success</a>
</li>
<li>
<a href="#successDelay" >successDelay</a>
</li>
<li>
<a href="#successText" >successText</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Outputs</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#onSuccess" >onSuccess</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>HostBindings</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#attr.aria-live" >attr.aria-live</a>
</li>
<li>
<a href="#class.cds--inline-loading" >class.cds--inline-loading</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Accessors</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#hostAriaLive" >hostAriaLive</a>
</li>
<li>
<a href="#isActive" >isActive</a>
</li>
<li>
<a href="#success" >success</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-inputs">
<h3 id="inputs">Inputs</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="errorText"></a>
<b>errorText</b>
</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-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="92" class="link-to-prism">src/inline-loading/inline-loading.component.ts:92</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Specify the text description for the error state.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="iconDescription"></a>
<b>iconDescription</b>
</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-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="96" class="link-to-prism">src/inline-loading/inline-loading.component.ts:96</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Accessible description applied to the loading/success/error SVG.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isActive"></a>
<b>isActive</b>
</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-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="111" class="link-to-prism">src/inline-loading/inline-loading.component.ts:111</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>set to <code>false</code> to stop the loading animation</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="loadingText"></a>
<b>loadingText</b>
</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-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="80" class="link-to-prism">src/inline-loading/inline-loading.component.ts:80</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Specify the text description for the loading state.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="state"></a>
<b>state</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../miscellaneous/enumerations.html#InlineLoadingState" target="_self" >InlineLoadingState | string</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>InlineLoadingState.Active</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="76" class="link-to-prism">src/inline-loading/inline-loading.component.ts:76</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Specify the text description for the loading state.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="success"></a>
<b>success</b>
</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-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="121" class="link-to-prism">src/inline-loading/inline-loading.component.ts:121</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Returns value <code>true</code> if the component is in the success state.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="successDelay"></a>
<b>successDelay</b>
</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>1500</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="88" class="link-to-prism">src/inline-loading/inline-loading.component.ts:88</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Provide a delay for the <code>setTimeout</code> for success.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="successText"></a>
<b>successText</b>
</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-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="84" class="link-to-prism">src/inline-loading/inline-loading.component.ts:84</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Specify the text description for the success state.</p>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-outputs">
<h3 id="outputs">Outputs</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="onSuccess"></a>
<b>onSuccess</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>EventEmitter<any></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="139" class="link-to-prism">src/inline-loading/inline-loading.component.ts:139</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Emits event after the success state is active</p>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-properties">
<h3>HostBindings</h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="attr.aria-live"></a>
<span class="name">
<span ><b>attr.aria-live</b></span>
<a href="#attr.aria-live"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | null</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="102" class="link-to-prism">src/inline-loading/inline-loading.component.ts:102</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p><code>aria-live</code> value applied to the host based on <code>state</code> (<code>'off'</code> for inactive states, <code>'assertive'</code>
otherwise).</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="class.cds--inline-loading"></a>
<span class="name">
<span ><b>class.cds--inline-loading</b></span>
<a href="#class.cds--inline-loading"><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/boolean" target="_blank" >boolean</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>true</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="141" class="link-to-prism">src/inline-loading/inline-loading.component.ts:141</a></div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-properties">
<h3 id="inputs">
Properties
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="InlineLoadingState"></a>
<span class="name">
<span ><b>InlineLoadingState</b></span>
<a href="#InlineLoadingState"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>InlineLoadingState</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="71" class="link-to-prism">src/inline-loading/inline-loading.component.ts:71</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="loadingClass"></a>
<span class="name">
<span class="modifier"></span>
<span ><b>loadingClass</b></span>
<a href="#loadingClass"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>true</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<b>Decorators : </b>
<br />
<code>
@HostBinding('class.cds--inline-loading')<br />
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="141" class="link-to-prism">src/inline-loading/inline-loading.component.ts:141</a></div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-accessors">
<h3 id="accessors">
Accessors
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="hostAriaLive"></a>
<span class="name"><b>hostAriaLive</b><a href="#hostAriaLive"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>hostAriaLive()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="102" class="link-to-prism">src/inline-loading/inline-loading.component.ts:102</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p><code>aria-live</code> value applied to the host based on <code>state</code> (<code>'off'</code> for inactive states, <code>'assertive'</code>
otherwise).</p>
</div>
<div class="io-description">
<b>Returns : </b> <code>string | null</code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isActive"></a>
<span class="name"><b>isActive</b><a href="#isActive"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>isActive()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="111" class="link-to-prism">src/inline-loading/inline-loading.component.ts:111</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>set to <code>false</code> to stop the loading animation</p>
</div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>isActive(active: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank">boolean</a>)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="114" class="link-to-prism">src/inline-loading/inline-loading.component.ts:114</a></div>
</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>active</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="success"></a>
<span class="name"><b>success</b><a href="#success"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>success()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="121" class="link-to-prism">src/inline-loading/inline-loading.component.ts:121</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Returns value <code>true</code> if the component is in the success state.</p>
</div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>success(success: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank">boolean</a>)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="127" class="link-to-prism">src/inline-loading/inline-loading.component.ts:127</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Set the component's state to match the parameter and emits onSuccess if it exits.</p>
</div>
<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>success</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="tab-pane fade tab-source-code" id="source">
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
Component,
Input,
Output,
EventEmitter,
HostBinding
} from "@angular/core";
export enum InlineLoadingState {
/** It hides the whole component. */
Hidden = "hidden",
/** It shows the `loadingText` but no loading animation. */
Inactive = "inactive",
/** It shows the `loadingText` with loading animation. */
Active = "active",
/** It shows the `successText` with a success state. */
Finished = "finished",
/** It shows the `errorText` with an error state. */
Error = "error"
}
/**
* Get started with importing the module:
*
* ```typescript
* import { InlineLoadingModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-inline-loading--basic)
*/
@Component({
selector: "cds-inline-loading, ibm-inline-loading",
template: `
<div *ngIf="state !== InlineLoadingState.Hidden"
class="cds--inline-loading__animation">
<div
*ngIf="state === InlineLoadingState.Inactive || state === InlineLoadingState.Active"
class="cds--loading cds--loading--small"
[ngClass]="{
'cds--loading--stop': state === InlineLoadingState.Inactive
}">
<svg class="cds--loading__svg" viewBox="0 0 100 100">
<title *ngIf="iconDescription">{{iconDescription}}</title>
<circle class="cds--loading__background" cx="50%" cy="50%" r="44" />
<circle class="cds--loading__stroke" cx="50%" cy="50%" r="44" />
</svg>
</div>
<svg
*ngIf="state === InlineLoadingState.Finished"
cdsIcon="checkmark--filled"
size="16"
class="cds--inline-loading__checkmark-container"
[attr.title]="iconDescription || null">
</svg>
<svg
*ngIf="state === InlineLoadingState.Error"
cdsIcon="error--filled"
size="16"
class="cds--inline-loading--error"
[attr.title]="iconDescription || null">
</svg>
</div>
<p
*ngIf="state === InlineLoadingState.Inactive || state === InlineLoadingState.Active"
class="cds--inline-loading__text">{{loadingText}}</p>
<p *ngIf="state === InlineLoadingState.Finished" class="cds--inline-loading__text">{{successText}}</p>
<p *ngIf="state === InlineLoadingState.Error" class="cds--inline-loading__text">{{errorText}}</p>
`
})
export class InlineLoading {
InlineLoadingState = InlineLoadingState;
/**
* Specify the text description for the loading state.
*/
@Input() state: InlineLoadingState | string = InlineLoadingState.Active;
/**
* Specify the text description for the loading state.
*/
@Input() loadingText: string;
/**
* Specify the text description for the success state.
*/
@Input() successText: string;
/**
* Provide a delay for the `setTimeout` for success.
*/
@Input() successDelay = 1500;
/**
* Specify the text description for the error state.
*/
@Input() errorText: string;
/**
* Accessible description applied to the loading/success/error SVG.
*/
@Input() iconDescription: string;
/**
* `aria-live` value applied to the host based on `state` (`'off'` for inactive states, `'assertive'`
* otherwise).
*/
@HostBinding("attr.aria-live") get hostAriaLive(): string | null {
if (this.state === InlineLoadingState.Hidden) {
return null;
}
return this.state === InlineLoadingState.Inactive ? "off" : "assertive";
}
/**
* set to `false` to stop the loading animation
*/
@Input() get isActive() {
return this.state === InlineLoadingState.Active;
}
set isActive(active: boolean) {
this.state = active ? InlineLoadingState.Active : InlineLoadingState.Inactive;
}
/**
* Returns value `true` if the component is in the success state.
*/
@Input() get success() {
return this.state === InlineLoadingState.Finished;
}
/**
* Set the component's state to match the parameter and emits onSuccess if it exits.
*/
set success(success: boolean) {
this.state = success ? InlineLoadingState.Finished : InlineLoadingState.Error;
if (this.state === InlineLoadingState.Finished) {
setTimeout(() => {
this.onSuccess.emit();
}, this.successDelay);
}
}
/**
* Emits event after the success state is active
*/
@Output() onSuccess: EventEmitter<any> = new EventEmitter();
@HostBinding("class.cds--inline-loading") loadingClass = true;
}
</code></pre>
</div>
<div class="tab-pane fade " id="tree">
<div id="tree-container"></div>
<div class="tree-legend">
<div class="title">
<b>Legend</b>
</div>
<div>
<div class="color htmlelement"></div><span>Html element</span>
</div>
<div>
<div class="color component"></div><span>Component</span>
</div>
<div>
<div class="color directive"></div><span>Html element with directive</span>
</div>
</div>
</div>
</div>
<script src="../js/libs/vis.min.js"></script>
<script src="../js/libs/htmlparser.js"></script>
<script src="../js/libs/deep-iterator.js"></script>
<script>
var COMPONENT_TEMPLATE = '<div><div *ngIf="state !== InlineLoadingState.Hidden" class="cds--inline-loading__animation"> <div *ngIf="state === InlineLoadingState.Inactive || state === InlineLoadingState.Active" class="cds--loading cds--loading--small" [ngClass]="{ \'cds--loading--stop\': state === InlineLoadingState.Inactive }"> <svg class="cds--loading__svg" viewBox="0 0 100 100"> <title *ngIf="iconDescription">{{iconDescription}}</title> <circle class="cds--loading__background" cx="50%" cy="50%" r="44" /> <circle class="cds--loading__stroke" cx="50%" cy="50%" r="44" /> </svg> </div> <svg *ngIf="state === InlineLoadingState.Finished" cdsIcon="checkmark--filled" size="16" class="cds--inline-loading__checkmark-container" [attr.title]="iconDescription || null"> </svg> <svg *ngIf="state === InlineLoadingState.Error" cdsIcon="error--filled" size="16" class="cds--inline-loading--error" [attr.title]="iconDescription || null"> </svg></div><p *ngIf="state === InlineLoadingState.Inactive || state === InlineLoadingState.Active" class="cds--inline-loading__text">{{loadingText}}</p><p *ngIf="state === InlineLoadingState.Finished" class="cds--inline-loading__text">{{successText}}</p><p *ngIf="state === InlineLoadingState.Error" class="cds--inline-loading__text">{{errorText}}</p> </div>'
var COMPONENTS = [{'name': 'Accordion', 'selector': 'cds-accordion, ibm-accordion'},{'name': 'AccordionItem', 'selector': 'cds-accordion-item, ibm-accordion-item'},{'name': 'ActionableNotification', 'selector': 'cds-actionable-notification, ibm-actionable-notification'},{'name': 'AILabelComponent', 'selector': 'cds-ai-label, ibm-ai-label'},{'name': 'AlertModal', 'selector': 'cds-alert-modal, ibm-alert-modal'},{'name': 'BaseIconButton', 'selector': ''},{'name': 'BaseNotification', 'selector': ''},{'name': 'BaseTabHeader', 'selector': ''},{'name': 'Breadcrumb', 'selector': 'cds-breadcrumb, ibm-breadcrumb'},{'name': 'BreadcrumbItemComponent', 'selector': 'cds-breadcrumb-item, ibm-breadcrumb-item'},{'name': 'ButtonSet', 'selector': 'cds-button-set, ibm-button-set'},{'name': 'Checkbox', 'selector': 'cds-checkbox, ibm-checkbox'},{'name': 'CheckboxGroup', 'selector': 'cds-checkbox-group, ibm-checkbox-group'},{'name': 'ClickableTile', 'selector': 'cds-clickable-tile, ibm-clickable-tile'},{'name': 'CodeSnippet', 'selector': 'cds-code-snippet, ibm-code-snippet'},{'name': 'ComboBox', 'selector': 'cds-combo-box, ibm-combo-box'},{'name': 'ComboButtonComponent', 'selector': 'cds-combo-button'},{'name': 'ContainedList', 'selector': 'cds-contained-list, ibm-contained-list'},{'name': 'ContainedListItem', 'selector': 'cds-contained-list-item, ibm-contained-list-item'},{'name': 'ContentSwitcher', 'selector': 'cds-content-switcher, ibm-content-switcher'},{'name': 'ContextMenuComponent', 'selector': 'cds-menu, cds-context-menu, ibm-context-menu'},{'name': 'ContextMenuDividerComponent', 'selector': 'cds-menu-divider, cds-context-menu-divider, ibm-context-menu-divider'},{'name': 'ContextMenuGroupComponent', 'selector': 'cds-menu-group, cds-context-menu-group, ibm-context-menu-group'},{'name': 'ContextMenuItemComponent', 'selector': 'cds-menu-item, cds-context-menu-item, ibm-context-menu-item'},{'name': 'DatePicker', 'selector': 'cds-date-picker, ibm-date-picker'},{'name': 'DatePickerInput', 'selector': 'cds-date-picker-input, ibm-date-picker-input'},{'name': 'Dialog', 'selector': 'cds-dialog, ibm-dialog'},{'name': 'Documentation', 'selector': 'cds-documentation'},{'name': 'Dropdown', 'selector': 'cds-dropdown, ibm-dropdown'},{'name': 'DropdownList', 'selector': 'cds-dropdown-list, ibm-dropdown-list'},{'name': 'ExpandableTile', 'selector': 'cds-expandable-tile, ibm-expandable-tile'},{'name': 'FileComponent', 'selector': 'cds-file, ibm-file'},{'name': 'FileUploader', 'selector': 'cds-file-uploader, ibm-file-uploader'},{'name': 'Hamburger', 'selector': 'cds-hamburger, ibm-hamburger'},{'name': 'Header', 'selector': 'cds-header, ibm-header'},{'name': 'HeaderAction', 'selector': 'cds-header-action, ibm-header-action'},{'name': 'HeaderGlobal', 'selector': 'cds-header-global, ibm-header-global'},{'name': 'HeaderItem', 'selector': 'cds-header-item, ibm-header-item'},{'name': 'HeaderMenu', 'selector': 'cds-header-menu, ibm-header-menu'},{'name': 'HeaderNavigation', 'selector': 'cds-header-navigation, ibm-header-navigation'},{'name': 'IconButton', 'selector': 'cds-icon-button, ibm-icon-button'},{'name': 'IconTab', 'selector': 'cds-icon-tab, ibm-icon-tab'},{'name': 'InlineLoading', 'selector': 'cds-inline-loading, ibm-inline-loading'},{'name': 'Label', 'selector': 'cds-label, ibm-label'},{'name': 'ListColumn', 'selector': 'cds-list-column, ibm-list-column'},{'name': 'ListHeader', 'selector': 'cds-list-header, ibm-list-header'},{'name': 'ListRow', 'selector': 'cds-list-row, ibm-list-row'},{'name': 'Loading', 'selector': 'cds-loading, ibm-loading'},{'name': 'MenuButtonComponent', 'selector': 'cds-menu-button'},{'name': 'Modal', 'selector': 'cds-modal, ibm-modal'},{'name': 'ModalFooter', 'selector': 'cds-modal-footer, ibm-modal-footer'},{'name': 'ModalHeader', 'selector': 'cds-modal-header, ibm-modal-header'},{'name': 'Notification', 'selector': 'cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification'},{'name': 'NumberComponent', 'selector': 'cds-number, ibm-number'},{'name': 'OverflowMenu', 'selector': 'cds-overflow-menu, ibm-overflow-menu'},{'name': 'OverflowMenuCustomPane', 'selector': 'cds-overflow-custom-menu-pa