carbon-components-angular 5.67.0 → 5.68.0

package/fesm2015/carbon-components-angular-checkbox.mjs

@@ -1,8 +1,12 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, HostListener, NgModule } 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.
@@ -27,8 +31,9 @@ class Checkbox {
     /**
      * Creates an instance of `Checkbox`.
      */
-    constructor(changeDetectorRef) {
+    constructor(changeDetectorRef, hostGroup) {
         this.changeDetectorRef = changeDetectorRef;
+        this.hostGroup = hostGroup;
         /**
          * Set to `true` for a disabled checkbox.
          */
@@ -45,6 +50,10 @@ class Checkbox {
          * The unique id for the checkbox component.
          */
         this.id = `checkbox-${Checkbox.checkboxCount}`;
+        /**
+         * Optional title for the `<label>` element.
+         */
+        this.title = "";
         /**
          * Emits click event.
          */
@@ -72,6 +81,7 @@ class Checkbox {
          * 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`.
          */
@@ -124,10 +134,31 @@ class Checkbox {
     get checked() {
         return this._checked;
     }
+    get effectiveReadOnly() {
+        var _a, _b;
+        const own = this.readOnly;
+        const group = (_b = (_a = this.hostGroup) === null || _a === void 0 ? void 0 : _a.readOnly) !== null && _b !== void 0 ? _b : false;
+        return !!(own !== undefined ? own : group);
+    }
+    get effectiveInvalid() {
+        var _a, _b;
+        const own = this.invalid;
+        const group = (_b = (_a = this.hostGroup) === null || _a === void 0 ? void 0 : _a.invalid) !== null && _b !== void 0 ? _b : false;
+        return !!(own !== undefined ? own : group);
+    }
+    get effectiveWarn() {
+        var _a, _b;
+        const own = this.warn;
+        const group = (_b = (_a = this.hostGroup) === null || _a === void 0 ? void 0 : _a.warn) !== null && _b !== void 0 ? _b : 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);
     }
@@ -166,6 +197,13 @@ class Checkbox {
         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();
     }
@@ -179,6 +217,13 @@ class Checkbox {
      * 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.
@@ -213,6 +258,12 @@ class Checkbox {
             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.
      */
@@ -235,15 +286,22 @@ class Checkbox {
  * Variable used for creating unique ids for checkbox components.
  */
 Checkbox.checkboxCount = 0;
-Checkbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Checkbox, deps: [{ token: i0.ChangeDetectorRef }], 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", indeterminate: "indeterminate", checked: "checked" }, outputs: { click: "click", checkedChange: "checkedChange", indeterminateChange: "indeterminateChange" }, host: { listeners: { "focusout": "focusOut()" } }, providers: [
+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">
+		<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"
@@ -254,28 +312,74 @@ Checkbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
 				[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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, 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">
+		<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"
@@ -286,20 +390,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 				[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: [
@@ -311,7 +455,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
+        }], ctorParameters: function () {
+        return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [CHECKBOX_GROUP_HOST]
+                    }] }];
+    }, propDecorators: { disabled: [{
                 type: Input
             }], skeleton: [{
                 type: Input
@@ -329,6 +480,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 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: [{
@@ -347,26 +514,229 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 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(() => {
+            var _a;
+            (_a = this.checkboxes) === null || _a === void 0 ? void 0 : _a.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], imports: [CommonModule,
-        FormsModule], exports: [Checkbox] });
+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] });
+        FormsModule,
+        IconModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckboxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        Checkbox
+                        Checkbox,
+                        CheckboxGroup
                     ],
                     exports: [
-                        Checkbox
+                        Checkbox,
+                        CheckboxGroup
                     ],
                     imports: [
                         CommonModule,
-                        FormsModule
+                        FormsModule,
+                        IconModule
                     ]
                 }]
         }] });
@@ -375,5 +745,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Checkbox, CheckboxModule, CheckboxState };
+export { CHECKBOX_GROUP_HOST, Checkbox, CheckboxGroup, CheckboxModule, CheckboxState };
 //# sourceMappingURL=carbon-components-angular-checkbox.mjs.map