carbon-components-angular
Version:
Next generation components
1,095 lines (967 loc) • 60 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">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top d-block d-sm-none">
<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 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="hidden-xs 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"
>
TableToolbar</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/table/toolbar/table-toolbar.component.ts</code>
</p>
<p class="comment">
<h3>Description</h3>
</p>
<p class="comment">
<p>The table toolbar is reserved for global table actions such as table settings, complex filter, export, or editing table data.</p>
<h2>Basic usage</h2>
<div><pre class="line-numbers"><code class="language-html"><cds-table-toolbar [model]="model">
<cds-table-toolbar-actions>
<button cdsButton="primary">
Delete
<svg cdsIcon="trash-can" size="16" class="cds--btn__icon"></svg>
</button>
<button cdsButton="primary">
Save
<svg cdsIcon="save" size="16" class="cds--btn__icon"></svg>
</button>
<button cdsButton="primary">
Download
<svg cdsIcon="download" size="16" class="cds--btn__icon"></svg>
</button>
</cds-table-toolbar-actions>
<cds-table-toolbar-content>
<cds-table-toolbar-search [expandable]="true"></cds-table-toolbar-search>
<button cdsButton="toolbar-action">
<svg cdsIcon="settings" size="16" class="cds--toolbar-action__icon"></svg>
</button>
<button cdsButton="primary" size="sm">
Primary Button
<svg cdsIcon="add" size="20" class="cds--btn__icon"></svg>
</button>
</cds-table-toolbar-content>
</cds-table-toolbar></code></pre></div>
</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-table-toolbar, ibm-table-toolbar</code></td>
</tr>
<tr>
<td class="col-md-3">template</td>
<td class="col-md-9"><pre class="line-numbers"><code class="language-html"><section
class="cds--table-toolbar"
[ngClass]="{'cds--table-toolbar--sm' : size === 'sm'}"
[attr.aria-label]="actionBarLabel.subject | async">
<div
*ngIf="model"
class="cds--batch-actions"
[ngClass]="{
'cds--batch-actions--active': selected
}">
<div class="cds--batch-summary">
<p class="cds--batch-summary__para" *ngIf="count as n">
<ng-container *ngIf="_batchTextLegacy.subject | async as legacyText; else batchTextBlock">
<span>{{n}}</span> {{legacyText}}
</ng-container>
<ng-template #batchTextBlock>
<span *ngIf="n === 1">{{_batchTextSingle.subject | async}}</span>
<span *ngIf="n !== 1">{{_batchTextMultiple.subject | i18nReplace: {count: n} | async}}</span>
</ng-template>
</p>
</div>
<div class="cds--action-list">
<ng-content select="cds-table-toolbar-actions,ibm-table-toolbar-actions"></ng-content>
<button
cdsButton="primary"
class="cds--batch-summary__cancel"
[tabindex]="selected ? 0 : -1"
(click)="onCancel()">
{{_cancelText.subject | async}}
</button>
</div>
</div>
<ng-content></ng-content>
</section>
</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="#_batchTextLegacy" >_batchTextLegacy</a>
</li>
<li>
<a href="#_batchTextMultiple" >_batchTextMultiple</a>
</li>
<li>
<a href="#_batchTextSingle" >_batchTextSingle</a>
</li>
<li>
<a href="#_cancelText" >_cancelText</a>
</li>
<li>
<a href="#actionBarLabel" >actionBarLabel</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Methods</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#onCancel" >onCancel</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="#ariaLabel" >ariaLabel</a>
</li>
<li>
<a href="#batchText" >batchText</a>
</li>
<li>
<a href="#cancelText" >cancelText</a>
</li>
<li>
<a href="#model" >model</a>
</li>
<li>
<a href="#size" >size</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="#cancel" >cancel</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="#batchText" >batchText</a>
</li>
<li>
<a href="#ariaLabel" >ariaLabel</a>
</li>
<li>
<a href="#cancelText" >cancelText</a>
</li>
<li>
<a href="#count" >count</a>
</li>
<li>
<a href="#selected" >selected</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-constructor">
<h3 id="constructor">Constructor</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<code>constructor(i18n: <a href="../injectables/I18n.html" target="_self">I18n</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="115" class="link-to-prism">src/table/toolbar/table-toolbar.component.ts:115</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div>
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>i18n</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>
<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="ariaLabel"></a>
<b>ariaLabel</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>literal type</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="97" class="link-to-prism">src/table/toolbar/table-toolbar.component.ts:97</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="batchText"></a>
<b>batchText</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | literal type</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/table/toolbar/table-toolbar.component.ts:88</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="cancelText"></a>
<b>cancelText</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>literal type</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="100" class="link-to-prism">src/table/toolbar/table-toolbar.component.ts:100</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="model"></a>
<b>model</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../classes/TableModel.html" target="_self" >TableModel</a></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="86" class="link-to-prism">src/table/toolbar/table-toolbar.component.ts:86</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="size"></a>
<b>size</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../miscellaneous/typealiases.html#TableRowSize" target="_self" >TableRowSize</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>"md"</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="103" class="link-to-prism">src/table/toolbar/table-toolbar.component.ts:103</a></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="cancel"></a>
<b>cancel</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>EventEmitter</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="109" class="link-to-prism">src/table/toolbar/table-toolbar.component.ts:109</a></div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-methods">
<h3 id="methods">
Methods
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="onCancel"></a>
<span class="name">
<span ><b>onCancel</b></span>
<a href="#onCancel"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>onCancel()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="126"
class="link-to-prism">src/table/toolbar/table-toolbar.component.ts:126</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section 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="_batchTextLegacy"></a>
<span class="name">
<span ><b>_batchTextLegacy</b></span>
<a href="#_batchTextLegacy"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../classes/Overridable.html" target="_self" >Overridable</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.i18n.getOverridable("TABLE_TOOLBAR.BATCH_TEXT")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="113" class="link-to-prism">src/table/toolbar/table-toolbar.component.ts:113</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_batchTextMultiple"></a>
<span class="name">
<span ><b>_batchTextMultiple</b></span>
<a href="#_batchTextMultiple"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../classes/Overridable.html" target="_self" >Overridable</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.i18n.getOverridable("TABLE_TOOLBAR.BATCH_TEXT_MULTIPLE")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="115" class="link-to-prism">src/table/toolbar/table-toolbar.component.ts:115</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_batchTextSingle"></a>
<span class="name">
<span ><b>_batchTextSingle</b></span>
<a href="#_batchTextSingle"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../classes/Overridable.html" target="_self" >Overridable</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.i18n.getOverridable("TABLE_TOOLBAR.BATCH_TEXT_SINGLE")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="114" class="link-to-prism">src/table/toolbar/table-toolbar.component.ts:114</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_cancelText"></a>
<span class="name">
<span ><b>_cancelText</b></span>
<a href="#_cancelText"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../classes/Overridable.html" target="_self" >Overridable</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.i18n.getOverridable("TABLE_TOOLBAR.CANCEL")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="112" class="link-to-prism">src/table/toolbar/table-toolbar.component.ts:112</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="actionBarLabel"></a>
<span class="name">
<span ><b>actionBarLabel</b></span>
<a href="#actionBarLabel"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../classes/Overridable.html" target="_self" >Overridable</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.i18n.getOverridable("TABLE_TOOLBAR.ACTION_BAR")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="111" class="link-to-prism">src/table/toolbar/table-toolbar.component.ts:111</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="batchText"></a>
<span class="name"><b>batchText</b><a href="#batchText"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>batchText(value: string | literal type)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="88" class="link-to-prism">src/table/toolbar/table-toolbar.component.ts:88</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>value</td>
<td>
<code>string | literal type</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="ariaLabel"></a>
<span class="name"><b>ariaLabel</b><a href="#ariaLabel"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>ariaLabel(value: literal type)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="97" class="link-to-prism">src/table/toolbar/table-toolbar.component.ts:97</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>value</td>
<td>
<code>literal type</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="cancelText"></a>
<span class="name"><b>cancelText</b><a href="#cancelText"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>cancelText()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="105" class="link-to-prism">src/table/toolbar/table-toolbar.component.ts:105</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>cancelText(value: literal type)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="100" class="link-to-prism">src/table/toolbar/table-toolbar.component.ts:100</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>value</td>
<td>
<code>literal type</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="count"></a>
<span class="name"><b>count</b><a href="#count"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>count()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="119" class="link-to-prism">src/table/toolbar/table-toolbar.component.ts:119</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="selected"></a>
<span class="name"><b>selected</b><a href="#selected"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>selected()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="122" class="link-to-prism">src/table/toolbar/table-toolbar.component.ts:122</a></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 { TableModel } from "../table-model.class";
import {
Component,
EventEmitter,
Input,
Output
} from "@angular/core";
import { I18n, Overridable } from "carbon-components-angular/i18n";
import { TableRowSize } from "../table.types";
/**
* The table toolbar is reserved for global table actions such as table settings, complex filter, export, or editing table data.
*
* ## Basic usage
*
* ```html
* <cds-table-toolbar [model]="model">
* <cds-table-toolbar-actions>
* <button cdsButton="primary">
* Delete
* <svg cdsIcon="trash-can" size="16" class="cds--btn__icon"></svg>
* </button>
* <button cdsButton="primary">
* Save
* <svg cdsIcon="save" size="16" class="cds--btn__icon"></svg>
* </button>
* <button cdsButton="primary">
* Download
* <svg cdsIcon="download" size="16" class="cds--btn__icon"></svg>
* </button>
* </cds-table-toolbar-actions>
* <cds-table-toolbar-content>
* <cds-table-toolbar-search [expandable]="true"></cds-table-toolbar-search>
* <button cdsButton="toolbar-action">
* <svg cdsIcon="settings" size="16" class="cds--toolbar-action__icon"></svg>
* </button>
* <button cdsButton="primary" size="sm">
* Primary Button
* <svg cdsIcon="add" size="20" class="cds--btn__icon"></svg>
* </button>
* </cds-table-toolbar-content>
* </cds-table-toolbar>
* ```
*
*/
@Component({
selector: "cds-table-toolbar, ibm-table-toolbar",
template: `
<section
class="cds--table-toolbar"
[ngClass]="{'cds--table-toolbar--sm' : size === 'sm'}"
[attr.aria-label]="actionBarLabel.subject | async">
<div
*ngIf="model"
class="cds--batch-actions"
[ngClass]="{
'cds--batch-actions--active': selected
}">
<div class="cds--batch-summary">
<p class="cds--batch-summary__para" *ngIf="count as n">
<ng-container *ngIf="_batchTextLegacy.subject | async as legacyText; else batchTextBlock">
<span>{{n}}</span> {{legacyText}}
</ng-container>
<ng-template #batchTextBlock>
<span *ngIf="n === 1">{{_batchTextSingle.subject | async}}</span>
<span *ngIf="n !== 1">{{_batchTextMultiple.subject | i18nReplace: {count: n} | async}}</span>
</ng-template>
</p>
</div>
<div class="cds--action-list">
<ng-content select="cds-table-toolbar-actions,ibm-table-toolbar-actions"></ng-content>
<button
cdsButton="primary"
class="cds--batch-summary__cancel"
[tabindex]="selected ? 0 : -1"
(click)="onCancel()">
{{_cancelText.subject | async}}
</button>
</div>
</div>
<ng-content></ng-content>
</section>
`
})
export class TableToolbar {
@Input() model: TableModel;
@Input() set batchText (value: string | { SINGLE: string, MULTIPLE: string }) {
if (typeof value === "object") {
this._batchTextSingle.override(value.SINGLE);
this._batchTextMultiple.override(value.MULTIPLE);
} else {
// For compatibility with old code
this._batchTextLegacy.override(value);
}
}
@Input() set ariaLabel (value: { ACTION_BAR: string }) {
this.actionBarLabel.override(value.ACTION_BAR);
}
@Input() set cancelText(value: { CANCEL: string }) {
this._cancelText.override(value.CANCEL);
}
@Input() size: TableRowSize = "md";
get cancelText(): { CANCEL: string } {
return { CANCEL: this._cancelText.value as string };
}
@Output() cancel = new EventEmitter();
actionBarLabel: Overridable = this.i18n.getOverridable("TABLE_TOOLBAR.ACTION_BAR");
_cancelText: Overridable = this.i18n.getOverridable("TABLE_TOOLBAR.CANCEL");
_batchTextLegacy: Overridable = this.i18n.getOverridable("TABLE_TOOLBAR.BATCH_TEXT");
_batchTextSingle: Overridable = this.i18n.getOverridable("TABLE_TOOLBAR.BATCH_TEXT_SINGLE");
_batchTextMultiple: Overridable = this.i18n.getOverridable("TABLE_TOOLBAR.BATCH_TEXT_MULTIPLE");
constructor(protected i18n: I18n) {}
get count() {
return this.model.totalDataLength > 0 ? this.model.rowsSelected.reduce((previous, current) => previous + (current ? 1 : 0), 0) : 0;
}
get selected() {
return this.model.totalDataLength > 0 ? this.model.rowsSelected.some(item => item) : false;
}
onCancel() {
this.model.selectAll(false);
this.cancel.emit();
}
}
</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><section class="cds--table-toolbar" [ngClass]="{\'cds--table-toolbar--sm\' : size === \'sm\'}" [attr.aria-label]="actionBarLabel.subject | async"> <div *ngIf="model" class="cds--batch-actions" [ngClass]="{ \'cds--batch-actions--active\': selected }"> <div class="cds--batch-summary"> <p class="cds--batch-summary__para" *ngIf="count as n"> <ng-container *ngIf="_batchTextLegacy.subject | async as legacyText; else batchTextBlock"> <span>{{n}}</span> {{legacyText}} </ng-container> <ng-template #batchTextBlock> <span *ngIf="n === 1">{{_batchTextSingle.subject | async}}</span> <span *ngIf="n !== 1">{{_batchTextMultiple.subject | i18nReplace: {count: n} | async}}</span> </ng-template> </p> </div> <div class="cds--action-list"> <ng-content select="cds-table-toolbar-actions,ibm-table-toolbar-actions"></ng-content> <button cdsButton="primary" class="cds--batch-summary__cancel" [tabindex]="selected ? 0 : -1" (click)="onCancel()"> {{_cancelText.subject | async}} </button> </div> </div> <ng-content></ng-content></section></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': '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': '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': '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-context-menu, ibm-context-menu'},{'name': 'ContextMenuDividerComponent', 'selector': 'cds-context-menu-divider, ibm-context-menu-divider'},{'name': 'ContextMenuGroupComponent', 'selector': 'cds-context-menu-group, ibm-context-menu-group'},{'name': 'ContextMenuItemComponent', 'selector': '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': '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': '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-pane, ibm-overflow-custom-menu-pane'},{'name': 'OverflowMenuOption', 'selector': 'cds-overflow-menu-option, ibm-overflow-menu-option'},{'name': 'OverflowMenuPane', 'selector': 'cds-overflow-menu-pane, ibm-overflow-menu-pane'},{'name': 'Overlay', 'selector': 'cds-overlay, ibm-overlay'},{'name': 'Pagination', 'selector': 'cds-pagination, ibm-pagination'},{'name': 'PaginationNav', 'selector': 'cds-pagination-nav, ibm-pagination-navm'},{'name': 'PaginationNavItem', 'selector': 'cds-pagination-nav-item, ibm-pagination-nav-item'},{'name': 'PaginationOverflow', 'selector': 'cds-pagination-overflow, ibm-pagination-overflow'},{'name': 'Panel', 'selector': 'cds-panel, ibm-panel'},{'name': 'PasswordInputLabelComponent', 'selector': 'cds-password-label, ibm-password-label'},{'name': 'Placeholder', 'selector': 'cds-placeholder, ibm-placeholder'},{'name': 'PopoverContent', 'selector': 'cds-popover-content, ibm-popover-content'},{'name': 'ProgressBar', 'selector': 'cds-progress-bar, ibm-progress-bar'},{'name': 'ProgressIndica