carbon-components-angular
Version:
Next generation components
744 lines (737 loc) • 30 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, EventEmitter, TemplateRef, Component, ChangeDetectionStrategy, Optional, Inject, Input, Output, ViewChild, HostListener, HostBinding, ContentChildren, forwardRef, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from 'carbon-components-angular/icon';
import { IconModule } from 'carbon-components-angular/icon';
const CHECKBOX_GROUP_HOST = new InjectionToken("CheckboxGroupHost");
/**
* Defines the set of states for a checkbox component.
*/
var CheckboxState;
(function (CheckboxState) {
CheckboxState[CheckboxState["Init"] = 0] = "Init";
CheckboxState[CheckboxState["Indeterminate"] = 1] = "Indeterminate";
CheckboxState[CheckboxState["Checked"] = 2] = "Checked";
CheckboxState[CheckboxState["Unchecked"] = 3] = "Unchecked";
})(CheckboxState || (CheckboxState = {}));
/**
* Get started with importing the module:
*
* ```typescript
* import { CheckboxModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-checkbox--basic)
*/
class Checkbox {
/**
* Creates an instance of `Checkbox`.
*/
constructor(changeDetectorRef, hostGroup) {
this.changeDetectorRef = changeDetectorRef;
this.hostGroup = hostGroup;
/**
* Set to `true` for a disabled checkbox.
*/
this.disabled = false;
/**
* Set to `true` for a loading checkbox.
*/
this.skeleton = false;
/**
* Set to `true` to hide the checkbox labels.
*/
this.hideLabel = false;
/**
* The unique id for the checkbox component.
*/
this.id = `checkbox-${Checkbox.checkboxCount}`;
/**
* Optional title for the `<label>` element.
*/
this.title = "";
/**
* Emits click event.
*/
this.click = new EventEmitter();
/**
* Emits an event when the value of the checkbox changes.
*
* Allows double biding with the `checked` Input.
*/
this.checkedChange = new EventEmitter();
/**
* Emits event notifying other classes when a change in state occurs specifically
* on an indeterminate checkbox.
*/
this.indeterminateChange = new EventEmitter();
/**
* Set to `true` if the input checkbox is selected (or checked).
*/
this._checked = false;
/**
* Set to `true` if the input checkbox is in state indeterminate.
*/
this._indeterminate = false;
/**
* Keeps a reference to the checkboxes current state, as defined in `CheckboxState`.
*/
this.currentCheckboxState = CheckboxState.Init;
this.helperId = `checkbox-helper-${Checkbox.helperIdCounter++}`;
/**
* Called when checkbox is blurred. Needed to properly implement `ControlValueAccessor`.
*/
this.onTouched = () => { };
/**
* Method set in `registerOnChange` to propagate changes back to the form.
*/
this.propagateChange = (_) => { };
Checkbox.checkboxCount++;
}
/**
* Set the checkbox's indeterminate state to match the parameter and transition the view to reflect the change.
*
* Allows double binding with the `indeterminateChange` Output.
*/
set indeterminate(indeterminate) {
if (indeterminate === this._indeterminate) {
return;
}
this._indeterminate = indeterminate;
if (this._indeterminate) {
this.transitionCheckboxState(CheckboxState.Indeterminate);
}
else {
this.transitionCheckboxState(this.checked ? CheckboxState.Checked : CheckboxState.Unchecked);
}
if (this.inputCheckbox && this.inputCheckbox.nativeElement) {
this.inputCheckbox.nativeElement.indeterminate = indeterminate;
}
this.changeDetectorRef.markForCheck();
this.indeterminateChange.emit(this._indeterminate);
}
/**
* Reflects whether the checkbox state is indeterminate.
*/
get indeterminate() {
return this._indeterminate;
}
/**
* Sets the `checked` state. `true` for checked, `false` for unchecked
*
* Allows double binding with the `checkedChange` Output.
*/
set checked(checked) {
this.setChecked(checked, false);
}
/**
* Returns value `true` if state is selected for the checkbox.
*/
get checked() {
return this._checked;
}
get effectiveReadOnly() {
const own = this.readOnly;
const group = this.hostGroup?.readOnly ?? false;
return !!(own !== undefined ? own : group);
}
get effectiveInvalid() {
const own = this.invalid;
const group = this.hostGroup?.invalid ?? false;
return !!(own !== undefined ? own : group);
}
get effectiveWarn() {
const own = this.warn;
const group = this.hostGroup?.warn ?? false;
return !!(own !== undefined ? own : group);
}
/**
* Toggle the selected state of the checkbox.
*/
toggle() {
if (this.effectiveReadOnly) {
return;
}
// Flip checked and reset indeterminate
this.setChecked(!this.checked, true);
}
/**
* Writes a value from `ngModel` to the component.
*
* In this case the value is the `checked` property.
*
* @param value boolean, corresponds to the `checked` property.
*/
writeValue(value) {
// Set checked and reset indeterminate
this.setChecked(!!value, true);
}
/**
* Sets a method in order to propagate changes back to the form.
*/
registerOnChange(fn) {
this.propagateChange = fn;
}
/**
* Registers a callback to be triggered when the control has been touched.
* @param fn Callback to be triggered when the checkbox is touched.
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* `ControlValueAccessor` method to programmatically disable the checkbox.
*
* ex: `this.formGroup.get("myCheckbox").disable();`
*
* @param isDisabled `true` to disable the checkbox
*/
setDisabledState(isDisabled) {
this.disabled = isDisabled;
this.changeDetectorRef.markForCheck();
}
/**
* Invoked by `CheckboxGroup` when group `readOnly`, `invalid`, `warn` change so `OnPush`
* checkboxes still refresh inherited state from `CHECKBOX_GROUP_HOST`.
*/
markForCheckFromGroup() {
this.changeDetectorRef.markForCheck();
}
focusOut() {
this.onTouched();
}
/**
* Executes on the event of a change within `Checkbox` to block propagation.
*/
onChange(event) {
event.stopPropagation();
}
/**
* Handles click events on the `Checkbox` and emits changes to other classes.
*/
onClick(event) {
if (this.effectiveReadOnly) {
event.preventDefault();
if (this.click.observers.length) {
this.click.emit();
}
return;
}
if (this.click.observers.length) {
// Disable default checkbox activation behavior which flips checked and resets indeterminate.
// This allows the parent component to control the checked/indeterminate properties.
event.preventDefault();
this.click.emit();
return;
}
if (!this.disabled) {
this.toggle();
this.transitionCheckboxState(this._checked ? CheckboxState.Checked : CheckboxState.Unchecked);
this.emitChangeEvent();
}
}
/**
* Handles changes between checkbox states.
*/
transitionCheckboxState(newState) {
this.currentCheckboxState = newState;
}
/**
* Creates instance of `CheckboxChange` used to propagate the change event.
*/
emitChangeEvent() {
this.checkedChange.emit(this.checked);
this.propagateChange(this.checked);
}
/**
* Updates the checkbox if it is in the indeterminate state.
*/
ngAfterViewInit() {
if (this.indeterminate && this.inputCheckbox && this.inputCheckbox.nativeElement) {
this.inputCheckbox.nativeElement.indeterminate = true;
}
}
/**
* Returns `true` when the provided value is a `TemplateRef`.
*/
isTemplate(value) {
return value instanceof TemplateRef;
}
/**
* Sets checked state and optionally resets indeterminate state.
*/
setChecked(checked, resetIndeterminate) {
if (checked === this._checked) {
return;
}
this._checked = checked;
// Reset indeterminate if requested
if (resetIndeterminate && this._indeterminate) {
this._indeterminate = false;
Promise.resolve().then(() => {
this.indeterminateChange.emit(this._indeterminate);
});
}
this.changeDetectorRef.markForCheck();
}
}
/**
* Variable used for creating unique ids for checkbox components.
*/
Checkbox.checkboxCount = 0;
Checkbox.helperIdCounter = 0;
Checkbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Checkbox, deps: [{ token: i0.ChangeDetectorRef }, { token: CHECKBOX_GROUP_HOST, optional: true }], target: i0.ɵɵFactoryTarget.Component });
Checkbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: { disabled: "disabled", skeleton: "skeleton", hideLabel: "hideLabel", name: "name", id: "id", required: "required", value: "value", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", title: "title", helperText: "helperText", invalid: "invalid", invalidText: "invalidText", warn: "warn", warnText: "warnText", readOnly: "readOnly", decorator: "decorator", indeterminate: "indeterminate", checked: "checked" }, outputs: { click: "click", checkedChange: "checkedChange", indeterminateChange: "indeterminateChange" }, host: { listeners: { "focusout": "focusOut()" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: Checkbox,
multi: true
}
], viewQueries: [{ propertyName: "inputCheckbox", first: true, predicate: ["inputCheckbox"], descendants: true }], ngImport: i0, template: `
<div class="cds--form-item cds--checkbox-wrapper"
[ngClass]="{
'cds--checkbox-wrapper--invalid': !effectiveReadOnly && effectiveInvalid,
'cds--checkbox-wrapper--warning': !effectiveReadOnly && !effectiveInvalid && effectiveWarn,
'cds--checkbox-wrapper--readonly': effectiveReadOnly,
'cds--checkbox-wrapper--decorator': !!decorator
}">
<input
#inputCheckbox
class="cds--checkbox"
type="checkbox"
[id]="id + '_input'"
[value]="value"
[name]="name"
[required]="required"
[checked]="checked"
[disabled]="disabled"
[attr.data-invalid]="(!effectiveReadOnly && effectiveInvalid) ? true : null"
[attr.aria-readonly]="effectiveReadOnly ? true : null"
[attr.aria-labelledby]="ariaLabelledby"
[attr.aria-describedby]="(helperText && !effectiveInvalid && !effectiveWarn) ? helperId : null"
(change)="onChange($event)"
(click)="onClick($event)">
<label
[for]="id + '_input'"
[attr.aria-label]="ariaLabel"
[attr.title]="title || null"
class="cds--checkbox-label"
[ngClass]="{
'cds--skeleton' : skeleton
}">
<span [ngClass]="{'cds--visually-hidden' : hideLabel}" class="cds--checkbox-label-text">
<ng-content></ng-content>
<ng-container *ngIf="decorator">
<div class="cds--checkbox-wrapper-inner--decorator">
<ng-template [ngTemplateOutlet]="decorator"></ng-template>
</div>
</ng-container>
</span>
</label>
<div class="cds--checkbox__validation-msg">
<ng-container *ngIf="!effectiveReadOnly && effectiveInvalid">
<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]="$any(invalidText)"></ng-template>
</div>
</ng-container>
<ng-container *ngIf="!effectiveReadOnly && !effectiveInvalid && effectiveWarn">
<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]="$any(warnText)"></ng-template>
</div>
</ng-container>
</div>
<div
*ngIf="helperText && !effectiveInvalid && !effectiveWarn"
class="cds--form__helper-text"
[id]="helperId">
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="$any(helperText)"></ng-template>
</div>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Checkbox, decorators: [{
type: Component,
args: [{
selector: "cds-checkbox, ibm-checkbox",
template: `
<div class="cds--form-item cds--checkbox-wrapper"
[ngClass]="{
'cds--checkbox-wrapper--invalid': !effectiveReadOnly && effectiveInvalid,
'cds--checkbox-wrapper--warning': !effectiveReadOnly && !effectiveInvalid && effectiveWarn,
'cds--checkbox-wrapper--readonly': effectiveReadOnly,
'cds--checkbox-wrapper--decorator': !!decorator
}">
<input
#inputCheckbox
class="cds--checkbox"
type="checkbox"
[id]="id + '_input'"
[value]="value"
[name]="name"
[required]="required"
[checked]="checked"
[disabled]="disabled"
[attr.data-invalid]="(!effectiveReadOnly && effectiveInvalid) ? true : null"
[attr.aria-readonly]="effectiveReadOnly ? true : null"
[attr.aria-labelledby]="ariaLabelledby"
[attr.aria-describedby]="(helperText && !effectiveInvalid && !effectiveWarn) ? helperId : null"
(change)="onChange($event)"
(click)="onClick($event)">
<label
[for]="id + '_input'"
[attr.aria-label]="ariaLabel"
[attr.title]="title || null"
class="cds--checkbox-label"
[ngClass]="{
'cds--skeleton' : skeleton
}">
<span [ngClass]="{'cds--visually-hidden' : hideLabel}" class="cds--checkbox-label-text">
<ng-content></ng-content>
<ng-container *ngIf="decorator">
<div class="cds--checkbox-wrapper-inner--decorator">
<ng-template [ngTemplateOutlet]="decorator"></ng-template>
</div>
</ng-container>
</span>
</label>
<div class="cds--checkbox__validation-msg">
<ng-container *ngIf="!effectiveReadOnly && effectiveInvalid">
<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]="$any(invalidText)"></ng-template>
</div>
</ng-container>
<ng-container *ngIf="!effectiveReadOnly && !effectiveInvalid && effectiveWarn">
<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]="$any(warnText)"></ng-template>
</div>
</ng-container>
</div>
<div
*ngIf="helperText && !effectiveInvalid && !effectiveWarn"
class="cds--form__helper-text"
[id]="helperId">
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="$any(helperText)"></ng-template>
</div>
</div>
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: Checkbox,
multi: true
}
],
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [CHECKBOX_GROUP_HOST]
}] }]; }, propDecorators: { disabled: [{
type: Input
}], skeleton: [{
type: Input
}], hideLabel: [{
type: Input
}], name: [{
type: Input
}], id: [{
type: Input
}], required: [{
type: Input
}], value: [{
type: Input
}], ariaLabel: [{
type: Input
}], ariaLabelledby: [{
type: Input
}], title: [{
type: Input
}], helperText: [{
type: Input
}], invalid: [{
type: Input
}], invalidText: [{
type: Input
}], warn: [{
type: Input
}], warnText: [{
type: Input
}], readOnly: [{
type: Input
}], decorator: [{
type: Input
}], indeterminate: [{
type: Input
}], checked: [{
type: Input
}], click: [{
type: Output
}], checkedChange: [{
type: Output
}], indeterminateChange: [{
type: Output
}], inputCheckbox: [{
type: ViewChild,
args: ["inputCheckbox"]
}], focusOut: [{
type: HostListener,
args: ["focusout"]
}] } });
/**
* 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>
* ```
*/
class CheckboxGroup {
constructor(changeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
this.hostFormItem = true;
this.helperTextId = `checkbox-group-helper-${CheckboxGroup.nextHelperId++}`;
this.orientation = "vertical";
this.invalid = false;
this.warn = false;
this.readOnly = false;
}
ngOnChanges(changes) {
if (changes["readOnly"] || changes["invalid"] || changes["warn"]) {
this.notifyCheckboxesHostStateChanged();
}
}
ngAfterContentInit() {
this.checkboxes.changes.subscribe(() => this.notifyCheckboxesHostStateChanged());
}
isTemplate(value) {
return value instanceof TemplateRef;
}
notifyCheckboxesHostStateChanged() {
Promise.resolve().then(() => {
this.checkboxes?.forEach((cb) => cb.markForCheckFromGroup());
this.changeDetectorRef.markForCheck();
});
}
}
CheckboxGroup.nextHelperId = 0;
CheckboxGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckboxGroup, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
CheckboxGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CheckboxGroup, selector: "cds-checkbox-group, ibm-checkbox-group", inputs: { legend: "legend", legendId: "legendId", fieldsetAriaLabelledby: "fieldsetAriaLabelledby", orientation: "orientation", helperText: "helperText", invalid: "invalid", invalidText: "invalidText", warn: "warn", warnText: "warnText", readOnly: "readOnly", decorator: "decorator" }, host: { properties: { "class.cds--form-item": "this.hostFormItem" } }, providers: [
{ provide: CHECKBOX_GROUP_HOST, useExisting: CheckboxGroup }
], queries: [{ propertyName: "checkboxes", predicate: i0.forwardRef(function () { return Checkbox; }), descendants: true }], usesOnChanges: true, ngImport: i0, 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>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckboxGroup, decorators: [{
type: Component,
args: [{
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
}]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { hostFormItem: [{
type: HostBinding,
args: ["class.cds--form-item"]
}], checkboxes: [{
type: ContentChildren,
args: [forwardRef(() => Checkbox), { descendants: true }]
}], legend: [{
type: Input
}], legendId: [{
type: Input
}], fieldsetAriaLabelledby: [{
type: Input
}], orientation: [{
type: Input
}], helperText: [{
type: Input
}], invalid: [{
type: Input
}], invalidText: [{
type: Input
}], warn: [{
type: Input
}], warnText: [{
type: Input
}], readOnly: [{
type: Input
}], decorator: [{
type: Input
}] } });
// modules
class CheckboxModule {
}
CheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: CheckboxModule, declarations: [Checkbox,
CheckboxGroup], imports: [CommonModule,
FormsModule,
IconModule], exports: [Checkbox,
CheckboxGroup] });
CheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckboxModule, imports: [CommonModule,
FormsModule,
IconModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckboxModule, decorators: [{
type: NgModule,
args: [{
declarations: [
Checkbox,
CheckboxGroup
],
exports: [
Checkbox,
CheckboxGroup
],
imports: [
CommonModule,
FormsModule,
IconModule
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { CHECKBOX_GROUP_HOST, Checkbox, CheckboxGroup, CheckboxModule, CheckboxState };
//# sourceMappingURL=carbon-components-angular-checkbox.mjs.map