carbon-components-angular
Version:
Next generation components
1,267 lines (1,117 loc) • 70.5 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"
>
CheckboxGroup</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/checkbox/checkbox-group.component.ts</code>
</p>
<p class="comment">
<h3>Description</h3>
</p>
<p class="comment">
<p>Groups related checkboxes with a shared legend, validation, and optional decorator
(e.g. AI label).</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html"><cds-checkbox-group legend="Group label" [decorator]="decoratorTpl">
<cds-checkbox>Option 1</cds-checkbox>
</cds-checkbox-group></code></pre></div>
</p>
<p class="comment">
<h3>Implements</h3>
</p>
<p class="comment">
<code>OnChanges</code>
<code>AfterContentInit</code>
</p>
<section data-compodoc="block-metadata">
<h3>Metadata</h3>
<table class="table table-sm table-hover metadata">
<tbody>
<tr>
<td class="col-md-3">changeDetection</td>
<td class="col-md-9"><code>ChangeDetectionStrategy.OnPush</code></td>
</tr>
<tr>
<td class="col-md-3">providers</td>
<td class="col-md-9">
<code><a href="../miscellaneous/variables.html#CHECKBOX_GROUP_HOST" target="_self" >{ provide: CHECKBOX_GROUP_HOST, useExisting: CheckboxGroup }</a></code>
</td>
</tr>
<tr>
<td class="col-md-3">selector</td>
<td class="col-md-9"><code>cds-checkbox-group, ibm-checkbox-group</code></td>
</tr>
<tr>
<td class="col-md-3">template</td>
<td class="col-md-9"><pre class="line-numbers"><code class="language-html"><fieldset
class="cds--checkbox-group"
[ngClass]="{
'cds--checkbox-group--horizontal': orientation === 'horizontal',
'cds--checkbox-group--readonly': readOnly,
'cds--checkbox-group--invalid': !readOnly && invalid,
'cds--checkbox-group--warning': !readOnly && !invalid && warn,
'cds--checkbox-group--decorator': !!decorator
}"
[attr.data-invalid]="invalid ? true : null"
[attr.aria-labelledby]="legendId || fieldsetAriaLabelledby || null"
[attr.aria-readonly]="readOnly ? true : null"
[attr.aria-describedby]="(helperText && !invalid && !warn) ? helperTextId : null">
<legend *ngIf="legend" class="cds--label" [attr.id]="legendId || null">
<ng-template *ngIf="isTemplate(legend); else legendLabel" [ngTemplateOutlet]="legend"></ng-template>
<ng-template #legendLabel>{{legend}}</ng-template>
<ng-container *ngIf="decorator">
<div class="cds--checkbox-group-inner--decorator">
<ng-template [ngTemplateOutlet]="decorator"></ng-template>
</div>
</ng-container>
</legend>
<ng-content></ng-content>
<div class="cds--checkbox-group__validation-msg">
<ng-container *ngIf="!readOnly && invalid">
<svg
cdsIcon="warning--filled"
size="16"
class="cds--checkbox__invalid-icon">
</svg>
<div class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
</div>
</ng-container>
<ng-container *ngIf="!readOnly && !invalid && warn">
<svg
cdsIcon="warning--alt--filled"
size="16"
class="cds--checkbox__invalid-icon cds--checkbox__invalid-icon--warning">
</svg>
<div class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
</div>
</ng-container>
</div>
<div
*ngIf="helperText && !invalid && !warn"
class="cds--form__helper-text"
[id]="helperTextId">
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
</div>
</fieldset>
</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>
<span class="modifier"></span>
<a href="#checkboxes" >checkboxes</a>
</li>
<li>
<span class="modifier">Readonly</span>
<a href="#helperTextId" >helperTextId</a>
</li>
<li>
<span class="modifier"></span>
<a href="#hostFormItem" >hostFormItem</a>
</li>
<li>
<span class="modifier">Private</span>
<span class="modifier">Static</span>
<a href="#nextHelperId" >nextHelperId</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="#isTemplate" >isTemplate</a>
</li>
<li>
<a href="#ngAfterContentInit" >ngAfterContentInit</a>
</li>
<li>
<a href="#ngOnChanges" >ngOnChanges</a>
</li>
<li>
<span class="modifier">Private</span>
<a href="#notifyCheckboxesHostStateChanged" >notifyCheckboxesHostStateChanged</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="#decorator" >decorator</a>
</li>
<li>
<a href="#fieldsetAriaLabelledby" >fieldsetAriaLabelledby</a>
</li>
<li>
<a href="#helperText" >helperText</a>
</li>
<li>
<a href="#invalid" >invalid</a>
</li>
<li>
<a href="#invalidText" >invalidText</a>
</li>
<li>
<a href="#legend" >legend</a>
</li>
<li>
<a href="#legendId" >legendId</a>
</li>
<li>
<a href="#orientation" >orientation</a>
</li>
<li>
<a href="#readOnly" >readOnly</a>
</li>
<li>
<a href="#warn" >warn</a>
</li>
<li>
<a href="#warnText" >warnText</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="#class.cds--form-item" >class.cds--form-item</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(changeDetectorRef: ChangeDetectorRef)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="130" class="link-to-prism">src/checkbox/checkbox-group.component.ts:130</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>changeDetectorRef</td>
<td>
<code>ChangeDetectorRef</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="decorator"></a>
<b>decorator</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>TemplateRef<any></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="130" class="link-to-prism">src/checkbox/checkbox-group.component.ts:130</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Optional decorator (e.g. AI label) rendered in the legend.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="fieldsetAriaLabelledby"></a>
<b>fieldsetAriaLabelledby</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="111" class="link-to-prism">src/checkbox/checkbox-group.component.ts:111</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Optional <code>aria-labelledby</code> for the <code><fieldset></code> when not using <code>legendId</code>.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="helperText"></a>
<b>helperText</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | TemplateRef<any></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="115" class="link-to-prism">src/checkbox/checkbox-group.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="invalid"></a>
<b>invalid</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-4">
<i>Default value : </i><code>false</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="117" class="link-to-prism">src/checkbox/checkbox-group.component.ts:117</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="invalidText"></a>
<b>invalidText</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | TemplateRef<any></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="119" class="link-to-prism">src/checkbox/checkbox-group.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="legend"></a>
<b>legend</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | TemplateRef<any></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="101" class="link-to-prism">src/checkbox/checkbox-group.component.ts:101</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="legendId"></a>
<b>legendId</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="106" class="link-to-prism">src/checkbox/checkbox-group.component.ts:106</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Optional id for the <code><legend></code>; referenced by <code>fieldsetAriaLabelledby</code> when set.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="orientation"></a>
<b>orientation</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>"horizontal" | "vertical"</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>"vertical"</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="113" class="link-to-prism">src/checkbox/checkbox-group.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="readOnly"></a>
<b>readOnly</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-4">
<i>Default value : </i><code>false</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="125" class="link-to-prism">src/checkbox/checkbox-group.component.ts:125</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="warn"></a>
<b>warn</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-4">
<i>Default value : </i><code>false</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/checkbox/checkbox-group.component.ts:121</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="warnText"></a>
<b>warnText</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | TemplateRef<any></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="123" class="link-to-prism">src/checkbox/checkbox-group.component.ts:123</a></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="class.cds--form-item"></a>
<span class="name">
<span ><b>class.cds--form-item</b></span>
<a href="#class.cds--form-item"><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="94" class="link-to-prism">src/checkbox/checkbox-group.component.ts:94</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="isTemplate"></a>
<span class="name">
<span ><b>isTemplate</b></span>
<a href="#isTemplate"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>isTemplate(value: <a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank">any</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="144"
class="link-to-prism">src/checkbox/checkbox-group.component.ts:144</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><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ngAfterContentInit"></a>
<span class="name">
<span ><b>ngAfterContentInit</b></span>
<a href="#ngAfterContentInit"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>ngAfterContentInit()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="140"
class="link-to-prism">src/checkbox/checkbox-group.component.ts:140</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>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ngOnChanges"></a>
<span class="name">
<span ><b>ngOnChanges</b></span>
<a href="#ngOnChanges"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>ngOnChanges(changes: SimpleChanges)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="134"
class="link-to-prism">src/checkbox/checkbox-group.component.ts:134</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>changes</td>
<td>
<code>SimpleChanges</code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</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>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="notifyCheckboxesHostStateChanged"></a>
<span class="name">
<span class="modifier">Private</span>
<span ><b>notifyCheckboxesHostStateChanged</b></span>
<a href="#notifyCheckboxesHostStateChanged"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>notifyCheckboxesHostStateChanged()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="148"
class="link-to-prism">src/checkbox/checkbox-group.component.ts:148</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="checkboxes"></a>
<span class="name">
<span class="modifier"></span>
<span ><b>checkboxes</b></span>
<a href="#checkboxes"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../components/Checkbox.html" target="_self" >QueryList<Checkbox></a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<b>Decorators : </b>
<br />
<code>
@ContentChildren(undefined, {descendants: true})<br />
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="97" class="link-to-prism">src/checkbox/checkbox-group.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="helperTextId"></a>
<span class="name">
<span class="modifier">Readonly</span>
<span ><b>helperTextId</b></span>
<a href="#helperTextId"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>`checkbox-group-helper-${CheckboxGroup.nextHelperId++}`</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="99" class="link-to-prism">src/checkbox/checkbox-group.component.ts:99</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="hostFormItem"></a>
<span class="name">
<span class="modifier"></span>
<span ><b>hostFormItem</b></span>
<a href="#hostFormItem"><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--form-item')<br />
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="94" class="link-to-prism">src/checkbox/checkbox-group.component.ts:94</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="nextHelperId"></a>
<span class="name">
<span class="modifier">Private</span>
<span class="modifier">Static</span>
<span ><b>nextHelperId</b></span>
<a href="#nextHelperId"><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>0</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="93" class="link-to-prism">src/checkbox/checkbox-group.component.ts:93</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 {
AfterContentInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ContentChildren,
forwardRef,
HostBinding,
Input,
OnChanges,
QueryList,
SimpleChanges,
TemplateRef
} from "@angular/core";
import { CHECKBOX_GROUP_HOST } from "./checkbox-group-host";
import { Checkbox } from "./checkbox.component";
/**
* Groups related checkboxes with a shared legend, validation, and optional decorator
* (e.g. AI label).
*
* ```html
* <cds-checkbox-group legend="Group label" [decorator]="decoratorTpl">
* <cds-checkbox>Option 1</cds-checkbox>
* </cds-checkbox-group>
* ```
*/
@Component({
selector: "cds-checkbox-group, ibm-checkbox-group",
template: `
<fieldset
class="cds--checkbox-group"
[ngClass]="{
'cds--checkbox-group--horizontal': orientation === 'horizontal',
'cds--checkbox-group--readonly': readOnly,
'cds--checkbox-group--invalid': !readOnly && invalid,
'cds--checkbox-group--warning': !readOnly && !invalid && warn,
'cds--checkbox-group--decorator': !!decorator
}"
[attr.data-invalid]="invalid ? true : null"
[attr.aria-labelledby]="legendId || fieldsetAriaLabelledby || null"
[attr.aria-readonly]="readOnly ? true : null"
[attr.aria-describedby]="(helperText && !invalid && !warn) ? helperTextId : null">
<legend *ngIf="legend" class="cds--label" [attr.id]="legendId || null">
<ng-template *ngIf="isTemplate(legend); else legendLabel" [ngTemplateOutlet]="legend"></ng-template>
<ng-template #legendLabel>{{legend}}</ng-template>
<ng-container *ngIf="decorator">
<div class="cds--checkbox-group-inner--decorator">
<ng-template [ngTemplateOutlet]="decorator"></ng-template>
</div>
</ng-container>
</legend>
<ng-content></ng-content>
<div class="cds--checkbox-group__validation-msg">
<ng-container *ngIf="!readOnly && invalid">
<svg
cdsIcon="warning--filled"
size="16"
class="cds--checkbox__invalid-icon">
</svg>
<div class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
</div>
</ng-container>
<ng-container *ngIf="!readOnly && !invalid && warn">
<svg
cdsIcon="warning--alt--filled"
size="16"
class="cds--checkbox__invalid-icon cds--checkbox__invalid-icon--warning">
</svg>
<div class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
</div>
</ng-container>
</div>
<div
*ngIf="helperText && !invalid && !warn"
class="cds--form__helper-text"
[id]="helperTextId">
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
</div>
</fieldset>
`,
providers: [
{ provide: CHECKBOX_GROUP_HOST, useExisting: CheckboxGroup }
],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CheckboxGroup implements OnChanges, AfterContentInit {
private static nextHelperId = 0;
@HostBinding("class.cds--form-item") hostFormItem = true;
// tslint:disable-next-line:no-forward-ref
@ContentChildren(forwardRef(() => Checkbox), { descendants: true }) checkboxes: QueryList<Checkbox>;
readonly helperTextId = `checkbox-group-helper-${CheckboxGroup.nextHelperId++}`;
@Input() legend: string | TemplateRef<any>;
/**
* Optional id for the `<legend>`; referenced by `fieldsetAriaLabelledby` when set.
*/
@Input() legendId: string;
/**
* Optional `aria-labelledby` for the `<fieldset>` when not using `legendId`.
*/
@Input() fieldsetAriaLabelledby: string;
@Input() orientation: "horizontal" | "vertical" = "vertical";
@Input() helperText: string | TemplateRef<any>;
@Input() invalid = false;
@Input() invalidText: string | TemplateRef<any>;
@Input() warn = false;
@Input() warnText: string | TemplateRef<any>;
@Input() readOnly = false;
/**
* Optional decorator (e.g. AI label) rendered in the legend.
*/
@Input() decorator: TemplateRef<any>;
constructor(private changeDetectorRef: ChangeDetectorRef) {}
ngOnChanges(changes: SimpleChanges) {
if (changes["readOnly"] || changes["invalid"] || changes["warn"]) {
this.notifyCheckboxesHostStateChanged();
}
}
ngAfterContentInit() {
this.checkboxes.changes.subscribe(() => this.notifyCheckboxesHostStateChanged());
}
isTemplate(value: any): boolean {
return value instanceof TemplateRef;
}
private notifyCheckboxesHostStateChanged() {
Promise.resolve().then(() => {
this.checkboxes?.forEach((cb) => cb.markForCheckFromGroup());
this.changeDetectorRef.markForCheck();
});
}
}
</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</spa