carbon-components-angular/docs/storybook/checkbox-checkbox-stories.a40b7a36.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3329],{"./src/ai-label/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{zb:()=>AILabelActions,UD:()=>AILabelComponent,q:()=>AILabelContent,uV:()=>AILabelModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let AILabelActions=class AILabelActions{constructor(){this.toggletipActions=!0,this.aiLabelActions=!0}};AILabelActions.propDecorators={toggletipActions:[{type:core.HostBinding,args:["class.cds--toggletip-actions"]}],aiLabelActions:[{type:core.HostBinding,args:["class.cds--ai-label-actions"]}]},AILabelActions=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsAILabelActions], [ibmAILabelActions]"})],AILabelActions);let AILabelContent=class AILabelContent{};AILabelContent=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsAILabelContent], [ibmAILabelContent]"})],AILabelContent);var popover=__webpack_require__("./src/popover/index.ts");let AILabelPopoverDirective=class AILabelPopoverDirective extends popover.OI{constructor(elementRef,ngZone,renderer,changeDetectorRef){super(elementRef,ngZone,renderer,changeDetectorRef),this.elementRef=elementRef,this.ngZone=ngZone,this.renderer=renderer,this.changeDetectorRef=changeDetectorRef,this.highContrast=!0,this.dropShadow=!1}initializeReferences(){this.updateAlignmentClass(this._align),this.bindPopoverRefs(),this.handleChange(this.isOpen)}ngOnChanges(changes){const originalState=this.isOpen;this.handleChange(!1),changes.autoAlign&&!changes.autoAlign.firstChange&&(this.popoverContentRef?.setAttribute("style",""),this.bindPopoverRefs()),this.handleChange(originalState)}bindPopoverRefs(){const panel=this.elementRef.nativeElement.querySelector(":scope > span.cds--popover");panel&&(this.popoverContentRef=panel.querySelector(":scope > span.cds--popover-content"),this.caretRef=this.resolveCaretRef(panel))}resolveCaretRef(panel){return this.autoAlign?panel.querySelector("span.cds--popover-content > span.cds--popover-caret.cds--popover--auto-align"):panel.querySelector(":scope > span.cds--popover-caret")}};AILabelPopoverDirective.ctorParameters=()=>[{type:core.ElementRef},{type:core.NgZone},{type:core.Renderer2},{type:core.ChangeDetectorRef}],AILabelPopoverDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsAILabelPopover]"})],AILabelPopoverDirective);let AILabelComponent=class AILabelComponent{constructor(elementRef){this.elementRef=elementRef,this.aiLabelClass=!0,this.caret=!0,this.dropShadow=!1,this.highContrast=!0,this.autoAlign=!1,this.isOpen=!1,this.onClose=new core.EventEmitter,this.onOpen=new core.EventEmitter,this.isOpenChange=new core.EventEmitter,this.id="ai-label-"+AILabelComponent.labelCounter++,this.aiText="AI",this.kind="default",this.size="xs",this.revertActive=!1,this.revertLabel="Revert to AI input",this.ariaLabel="Show information",this.revertClick=new core.EventEmitter,this.documentClick=this.handleOutsideClick.bind(this)}get revertClass(){return this.revertActive}get alignmentAxisOffset(){return["mini","2xs","xs"].includes(this.size)?-24:0}onPopoverIsOpenChange(open){this.isOpen=open,this.isOpenChange.emit(open)}get triggerClasses(){return{"cds--toggletip-button":!0,"cds--ai-label__button":!0,[`cds--ai-label__button--${this.size}`]:!0,[`cds--ai-label__button--${this.kind}`]:!0,"cds--ai-label__button--inline-with-content":"inline"===this.kind&&!!this.textLabel}}get computedAriaLabel(){const suffix="inline"===this.kind&&this.textLabel?this.textLabel:this.ariaLabel;return`${this.aiText} ${suffix}`}ngAfterViewInit(){this.isOpen&&document.addEventListener("click",this.documentClick)}ngOnChanges(changes){changes.revertActive&&!changes.revertActive.firstChange&&changes.revertActive.currentValue&&(this.isOpen=!1,document.removeEventListener("click",this.documentClick))}ngOnDestroy(){document.removeEventListener("click",this.documentClick)}onTriggerClick(event){const opening=!this.isOpen;opening?document.addEventListener("click",this.documentClick):document.removeEventListener("click",this.documentClick),this.aiLabelPopover?.handleChange(opening,event)}onRevertButtonClick(event){this.revertClick.emit(event)}hostkeys(event){this.isOpen&&"Escape"===event.key&&(event.stopPropagation(),document.removeEventListener("click",this.documentClick),this.aiLabelPopover?.handleChange(!1,event))}handleOutsideClick(event){this.elementRef.nativeElement.contains(event.target)||(this.aiLabelPopover?.handleChange(!1,event),document.removeEventListener("click",this.documentClick))}};AILabelComponent.labelCounter=0,AILabelComponent.ctorParameters=()=>[{type:core.ElementRef}],AILabelComponent.propDecorators={aiLabelClass:[{type:core.HostBinding,args:["class.cds--ai-label"]}],revertClass:[{type:core.HostBinding,args:["class.cds--ai-label--revert"]}],align:[{type:core.Input}],caret:[{type:core.Input}],dropShadow:[{type:core.Input}],highContrast:[{type:core.Input}],autoAlign:[{type:core.Input}],isOpen:[{type:core.Input}],onClose:[{type:core.Output}],onOpen:[{type:core.Output}],isOpenChange:[{type:core.Output}],id:[{type:core.Input}],aiText:[{type:core.Input}],textLabel:[{type:core.Input}],kind:[{type:core.Input}],size:[{type:core.Input}],revertActive:[{type:core.Input}],revertLabel:[{type:core.Input}],ariaLabel:[{type:core.Input}],revertClick:[{type:core.Output}],aiLabelPopover:[{type:core.ViewChild,args:["aiLabelPopoverHost",{read:AILabelPopoverDirective}]}],hostkeys:[{type:core.HostListener,args:["keyup",["$event"]]}]},AILabelComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-ai-label, ibm-ai-label",changeDetection:core.ChangeDetectionStrategy.OnPush,template:'\n\t\t<ng-container *ngIf="!revertActive">\n\t\t\t<span\n\t\t\t\t#aiLabelPopoverHost\n\t\t\t\tcdsAILabelPopover\n\t\t\t\tclass="cds--toggletip"\n\t\t\t\t[isOpen]="isOpen"\n\t\t\t\t(isOpenChange)="onPopoverIsOpenChange($event)"\n\t\t\t\t(onOpen)="onOpen.emit($event)"\n\t\t\t\t(onClose)="onClose.emit($event)"\n\t\t\t\t[align]="align"\n\t\t\t\t[caret]="caret"\n\t\t\t\t[dropShadow]="dropShadow"\n\t\t\t\t[highContrast]="highContrast"\n\t\t\t\t[autoAlign]="autoAlign"\n\t\t\t\t[alignmentAxisOffset]="alignmentAxisOffset">\n\t\t\t\t<button\n\t\t\t\t\ttype="button"\n\t\t\t\t\t[attr.aria-label]="computedAriaLabel"\n\t\t\t\t\t[attr.aria-expanded]="isOpen"\n\t\t\t\t\t[attr.aria-controls]="id"\n\t\t\t\t\t[ngClass]="triggerClasses"\n\t\t\t\t\t(click)="onTriggerClick($event)">\n\t\t\t\t\t<span class="cds--ai-label__text">{{aiText}}</span>\n\t\t\t\t\t<span *ngIf="kind === \'inline\' && textLabel" class="cds--ai-label__additional-text">{{textLabel}}</span>\n\t\t\t\t</button>\n\n\t\t\t\t<span\n\t\t\t\t\t[id]="id"\n\t\t\t\t\tclass="cds--popover"\n\t\t\t\t\taria-live="polite">\n\t\t\t\t\t<span class="cds--popover-content cds--ai-label-content">\n\t\t\t\t\t\t<div class="cds--toggletip-content">\n\t\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span *ngIf="autoAlign" class="cds--popover-caret cds--popover--auto-align"></span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf="!autoAlign" class="cds--popover-caret"></span>\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t</ng-container>\n\n\t\t<cds-icon-button\n\t\t\t*ngIf="revertActive"\n\t\t\tkind="ghost"\n\t\t\tsize="sm"\n\t\t\t[description]="revertLabel"\n\t\t\t[autoAlign]="autoAlign"\n\t\t\t[buttonAttributes]="{ \'aria-label\': revertLabel }"\n\t\t\t(click)="onRevertButtonClick($event)">\n\t\t\t<svg cdsIcon="undo" size="16"></svg>\n\t\t</cds-icon-button>\n\t'})],AILabelComponent);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),src_button=__webpack_require__("./src/button/index.ts"),icon=__webpack_require__("./src/icon/index.ts");let AILabelModule=class AILabelModule{};AILabelModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[AILabelComponent,AILabelPopoverDirective,AILabelContent,AILabelActions],exports:[AILabelComponent,AILabelContent,AILabelActions],imports:[common.CommonModule,src_button.hJ,icon.QX,popover.UU]})],AILabelModule)},"./src/checkbox/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Aj:()=>CHECKBOX_GROUP_HOST,XZ:()=>Checkbox,nD:()=>CheckboxModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs");const CHECKBOX_GROUP_HOST=new core.InjectionToken("CheckboxGroupHost");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={}));let Checkbox=class Checkbox{constructor(changeDetectorRef,hostGroup){this.changeDetectorRef=changeDetectorRef,this.hostGroup=hostGroup,this.disabled=!1,this.skeleton=!1,this.hideLabel=!1,this.id=`checkbox-${Checkbox.checkboxCount}`,this.title="",this.click=new core.EventEmitter,this.checkedChange=new core.EventEmitter,this.indeterminateChange=new core.EventEmitter,this._checked=!1,this._indeterminate=!1,this.currentCheckboxState=CheckboxState.Init,this.helperId="checkbox-helper-"+Checkbox.helperIdCounter++,this.onTouched=()=>{},this.propagateChange=_=>{},Checkbox.checkboxCount++}set indeterminate(indeterminate){indeterminate!==this._indeterminate&&(this._indeterminate=indeterminate,this._indeterminate?this.transitionCheckboxState(CheckboxState.Indeterminate):this.transitionCheckboxState(this.checked?CheckboxState.Checked:CheckboxState.Unchecked),this.inputCheckbox&&this.inputCheckbox.nativeElement&&(this.inputCheckbox.nativeElement.indeterminate=indeterminate),this.changeDetectorRef.markForCheck(),this.indeterminateChange.emit(this._indeterminate))}get indeterminate(){return this._indeterminate}set checked(checked){this.setChecked(checked,!1)}get checked(){return this._checked}get effectiveReadOnly(){const own=this.readOnly,group=this.hostGroup?.readOnly??!1;return!!(void 0!==own?own:group)}get effectiveInvalid(){const own=this.invalid,group=this.hostGroup?.invalid??!1;return!!(void 0!==own?own:group)}get effectiveWarn(){const own=this.warn,group=this.hostGroup?.warn??!1;return!!(void 0!==own?own:group)}toggle(){this.effectiveReadOnly||this.setChecked(!this.checked,!0)}writeValue(value){this.setChecked(!!value,!0)}registerOnChange(fn){this.propagateChange=fn}registerOnTouched(fn){this.onTouched=fn}setDisabledState(isDisabled){this.disabled=isDisabled,this.changeDetectorRef.markForCheck()}markForCheckFromGroup(){this.changeDetectorRef.markForCheck()}focusOut(){this.onTouched()}onChange(event){event.stopPropagation()}onClick(event){return this.effectiveReadOnly?(event.preventDefault(),void(this.click.observers.length&&this.click.emit())):this.click.observers.length?(event.preventDefault(),void this.click.emit()):void(this.disabled||(this.toggle(),this.transitionCheckboxState(this._checked?CheckboxState.Checked:CheckboxState.Unchecked),this.emitChangeEvent()))}transitionCheckboxState(newState){this.currentCheckboxState=newState}emitChangeEvent(){this.checkedChange.emit(this.checked),this.propagateChange(this.checked)}ngAfterViewInit(){this.indeterminate&&this.inputCheckbox&&this.inputCheckbox.nativeElement&&(this.inputCheckbox.nativeElement.indeterminate=!0)}isTemplate(value){return value instanceof core.TemplateRef}setChecked(checked,resetIndeterminate){checked!==this._checked&&(this._checked=checked,resetIndeterminate&&this._indeterminate&&(this._indeterminate=!1,Promise.resolve().then((()=>{this.indeterminateChange.emit(this._indeterminate)}))),this.changeDetectorRef.markForCheck())}};Checkbox.checkboxCount=0,Checkbox.helperIdCounter=0,Checkbox.ctorParameters=()=>[{type:core.ChangeDetectorRef},{type:void 0,decorators:[{type:core.Optional},{type:core.Inject,args:[CHECKBOX_GROUP_HOST]}]}],Checkbox.propDecorators={disabled:[{type:core.Input}],skeleton:[{type:core.Input}],hideLabel:[{type:core.Input}],name:[{type:core.Input}],id:[{type:core.Input}],required:[{type:core.Input}],value:[{type:core.Input}],ariaLabel:[{type:core.Input}],ariaLabelledby:[{type:core.Input}],title:[{type:core.Input}],helperText:[{type:core.Input}],invalid:[{type:core.Input}],invalidText:[{type:core.Input}],warn:[{type:core.Input}],warnText:[{type:core.Input}],readOnly:[{type:core.Input}],decorator:[{type:core.Input}],indeterminate:[{type:core.Input}],checked:[{type:core.Input}],click:[{type:core.Output}],checkedChange:[{type:core.Output}],indeterminateChange:[{type:core.Output}],inputCheckbox:[{type:core.ViewChild,args:["inputCheckbox"]}],focusOut:[{type:core.HostListener,args:["focusout"]}]},Checkbox=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-checkbox, ibm-checkbox",template:'\n\t\t<div class="cds--form-item cds--checkbox-wrapper"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--checkbox-wrapper--invalid\': !effectiveReadOnly && effectiveInvalid,\n\t\t\t\t\'cds--checkbox-wrapper--warning\': !effectiveReadOnly && !effectiveInvalid && effectiveWarn,\n\t\t\t\t\'cds--checkbox-wrapper--readonly\': effectiveReadOnly,\n\t\t\t\t\'cds--checkbox-wrapper--decorator\': !!decorator\n\t\t\t}">\n\t\t\t<input\n\t\t\t\t#inputCheckbox\n\t\t\t\tclass="cds--checkbox"\n\t\t\t\ttype="checkbox"\n\t\t\t\t[id]="id + \'_input\'"\n\t\t\t\t[value]="value"\n\t\t\t\t[name]="name"\n\t\t\t\t[required]="required"\n\t\t\t\t[checked]="checked"\n\t\t\t\t[disabled]="disabled"\n\t\t\t\t[attr.data-invalid]="(!effectiveReadOnly && effectiveInvalid) ? true : null"\n\t\t\t\t[attr.aria-readonly]="effectiveReadOnly ? true : null"\n\t\t\t\t[attr.aria-labelledby]="ariaLabelledby"\n\t\t\t\t[attr.aria-describedby]="(helperText && !effectiveInvalid && !effectiveWarn) ? helperId : null"\n\t\t\t\t(change)="onChange($event)"\n\t\t\t\t(click)="onClick($event)">\n\t\t\t<label\n\t\t\t\t[for]="id + \'_input\'"\n\t\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t\t[attr.title]="title || null"\n\t\t\t\tclass="cds--checkbox-label"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--skeleton\' : skeleton\n\t\t\t\t}">\n\t\t\t\t<span [ngClass]="{\'cds--visually-hidden\' : hideLabel}" class="cds--checkbox-label-text">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t<ng-container *ngIf="decorator">\n\t\t\t\t\t\t<div class="cds--checkbox-wrapper-inner--decorator">\n\t\t\t\t\t\t\t<ng-template [ngTemplateOutlet]="decorator"></ng-template>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t\t<div class="cds--checkbox__validation-msg">\n\t\t\t\t<ng-container *ngIf="!effectiveReadOnly && effectiveInvalid">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tcdsIcon="warning--filled"\n\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\tclass="cds--checkbox__invalid-icon">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<div class="cds--form-requirement">\n\t\t\t\t\t\t<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="$any(invalidText)"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-container *ngIf="!effectiveReadOnly && !effectiveInvalid && effectiveWarn">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tcdsIcon="warning--alt--filled"\n\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\tclass="cds--checkbox__invalid-icon cds--checkbox__invalid-icon--warning">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<div class="cds--form-requirement">\n\t\t\t\t\t\t<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="$any(warnText)"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf="helperText && !effectiveInvalid && !effectiveWarn"\n\t\t\t\tclass="cds--form__helper-text"\n\t\t\t\t[id]="helperId">\n\t\t\t\t<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="$any(helperText)"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:Checkbox,multi:!0}],changeDetection:core.ChangeDetectionStrategy.OnPush})],Checkbox);let CheckboxGroup=class CheckboxGroup{constructor(changeDetectorRef){this.changeDetectorRef=changeDetectorRef,this.hostFormItem=!0,this.helperTextId="checkbox-group-helper-"+CheckboxGroup.nextHelperId++,this.orientation="vertical",this.invalid=!1,this.warn=!1,this.readOnly=!1}ngOnChanges(changes){(changes.readOnly||changes.invalid||changes.warn)&&this.notifyCheckboxesHostStateChanged()}ngAfterContentInit(){this.checkboxes.changes.subscribe((()=>this.notifyCheckboxesHostStateChanged()))}isTemplate(value){return value instanceof core.TemplateRef}notifyCheckboxesHostStateChanged(){Promise.resolve().then((()=>{this.checkboxes?.forEach((cb=>cb.markForCheckFromGroup())),this.changeDetectorRef.markForCheck()}))}};CheckboxGroup.nextHelperId=0,CheckboxGroup.ctorParameters=()=>[{type:core.ChangeDetectorRef}],CheckboxGroup.propDecorators={hostFormItem:[{type:core.HostBinding,args:["class.cds--form-item"]}],checkboxes:[{type:core.ContentChildren,args:[(0,core.forwardRef)((()=>Checkbox)),{descendants:!0}]}],legend:[{type:core.Input}],legendId:[{type:core.Input}],fieldsetAriaLabelledby:[{type:core.Input}],orientation:[{type:core.Input}],helperText:[{type:core.Input}],invalid:[{type:core.Input}],invalidText:[{type:core.Input}],warn:[{type:core.Input}],warnText:[{type:core.Input}],readOnly:[{type:core.Input}],decorator:[{type:core.Input}]},CheckboxGroup=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-checkbox-group, ibm-checkbox-group",template:'\n\t\t<fieldset\n\t\t\tclass="cds--checkbox-group"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--checkbox-group--horizontal\': orientation === \'horizontal\',\n\t\t\t\t\'cds--checkbox-group--readonly\': readOnly,\n\t\t\t\t\'cds--checkbox-group--invalid\': !readOnly && invalid,\n\t\t\t\t\'cds--checkbox-group--warning\': !readOnly && !invalid && warn,\n\t\t\t\t\'cds--checkbox-group--decorator\': !!decorator\n\t\t\t}"\n\t\t\t[attr.data-invalid]="invalid ? true : null"\n\t\t\t[attr.aria-labelledby]="legendId || fieldsetAriaLabelledby || null"\n\t\t\t[attr.aria-readonly]="readOnly ? true : null"\n\t\t\t[attr.aria-describedby]="(helperText && !invalid && !warn) ? helperTextId : null">\n\t\t\t<legend *ngIf="legend" class="cds--label" [attr.id]="legendId || null">\n\t\t\t\t<ng-template *ngIf="isTemplate(legend); else legendLabel" [ngTemplateOutlet]="legend"></ng-template>\n\t\t\t\t<ng-template #legendLabel>{{legend}}</ng-template>\n\t\t\t\t<ng-container *ngIf="decorator">\n\t\t\t\t\t<div class="cds--checkbox-group-inner--decorator">\n\t\t\t\t\t\t<ng-template [ngTemplateOutlet]="decorator"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-container>\n\t\t\t</legend>\n\t\t\t<ng-content></ng-content>\n\t\t\t<div class="cds--checkbox-group__validation-msg">\n\t\t\t\t<ng-container *ngIf="!readOnly && invalid">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tcdsIcon="warning--filled"\n\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\tclass="cds--checkbox__invalid-icon">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<div class="cds--form-requirement">\n\t\t\t\t\t\t<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-container *ngIf="!readOnly && !invalid && warn">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tcdsIcon="warning--alt--filled"\n\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\tclass="cds--checkbox__invalid-icon cds--checkbox__invalid-icon--warning">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<div class="cds--form-requirement">\n\t\t\t\t\t\t<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf="helperText && !invalid && !warn"\n\t\t\t\tclass="cds--form__helper-text"\n\t\t\t\t[id]="helperTextId">\n\t\t\t\t<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>\n\t\t\t</div>\n\t\t</fieldset>\n\t',providers:[{provide:CHECKBOX_GROUP_HOST,useExisting:CheckboxGroup}],changeDetection:core.ChangeDetectionStrategy.OnPush})],CheckboxGroup);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let CheckboxModule=class CheckboxModule{};CheckboxModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Checkbox,CheckboxGroup],exports:[Checkbox,CheckboxGroup],imports:[common.CommonModule,fesm2020_forms.u5,icon.QX]})],CheckboxModule)},"./src/checkbox/checkbox.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,GroupStatePropagation:()=>GroupStatePropagation,Single:()=>Single,WithNgModel:()=>WithNgModel,WithReactiveForms:()=>WithReactiveForms,__namedExportsOrder:()=>__namedExportsOrder,default:()=>checkbox_stories,withAILabel:()=>withAILabel});var fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),src_checkbox=__webpack_require__("./src/checkbox/index.ts"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let ReactiveFormsStory=class ReactiveFormsStory{constructor(formBuilder){this.formBuilder=formBuilder}ngOnInit(){this.formGroup=this.formBuilder.group({disabledCheckbox:this.formBuilder.control({value:!0,disabled:!0}),checkbox:this.formBuilder.control(!1)})}toggleDisable(){const checkbox=this.formGroup.get("checkbox");null!=checkbox&&(checkbox.disabled?checkbox.enable():checkbox.disable())}};ReactiveFormsStory.ctorParameters=()=>[{type:fesm2020_forms.qu}],ReactiveFormsStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-reactive-forms",template:'\n\t\t<form [formGroup]="formGroup">\n\t\t\t<cds-checkbox formControlName="disabledCheckbox">\n\t\t\t\tDisabled checkbox in a reactive form\n\t\t\t</cds-checkbox>\n\t\t\t<cds-checkbox formControlName="checkbox">\n\t\t\t\tCheckbox in a reactive form\n\t\t\t</cds-checkbox>\n\t\t</form>\n\t\t<br>\n\t\t<button (click)="toggleDisable()">Toggle disabled state</button>\n\t'})],ReactiveFormsStory);var ai_label=__webpack_require__("./src/ai-label/index.ts"),src_button=__webpack_require__("./src/button/index.ts"),icon=__webpack_require__("./src/icon/index.ts"),ai_label_story_shared=__webpack_require__("./src/storybook/ai-label-story-shared.ts");const checkbox_stories={title:"Components/Checkbox",decorators:[(0,dist.moduleMetadata)({declarations:[ReactiveFormsStory],imports:[fesm2020_forms.u5,fesm2020_forms.UX,src_checkbox.nD,ai_label.uV,src_button.hJ,icon.QX]})],component:src_checkbox.XZ},Basic=(args=>({props:args,template:'\n        <fieldset class="cds--fieldset">\n            <legend class="cds--label">{{label}}</legend>\n            <cds-checkbox\n                [disabled]="disabled"\n                [indeterminate]="indeterminate"\n                [checked]="checked"\n                (checkedChange)="onChange($event)"\n                [hideLabel]="hideLabel"\n                (indeterminateChange)="onIndeterminateChange($event)">\n                Indeterminate checkbox\n            </cds-checkbox>\n        </fieldset>\n    '})).bind({});Basic.args={label:"Label",hideLabel:!1,indeterminate:!0,checked:!0,disabled:!1},Basic.argTypes={onChange:{action:"Changed!"},onIndeterminateChange:{action:"Indeterminate Change!"}};const WithNgModel=(args=>({props:args,template:'\n        <cds-checkbox\n            [(ngModel)]="model">\n            ngModel checkbox\n        </cds-checkbox>\n\n        <div style="display:flex; flex-direction: column; width: 150px">\n            <button (click)="model=!model">Set model</button>\n            Checked: {{ model }}\n        </div>\n    '})).bind({});WithNgModel.storyName="With NgModel",WithNgModel.args={model:!0},WithNgModel.parameters={controls:{disabled:!0}};const WithReactiveForms=(args=>({props:args,template:"\n    \x3c!--\n    app-* components are for demo purposes only.\n    You can create your own implementation by using the component source found at:\n    https://github.com/IBM/carbon-components-angular/tree/master/src/checkbox/stories/reactive-form.component.ts\n    --\x3e\n    <app-reactive-forms></app-reactive-forms>\n    "})).bind({}),Single=(()=>({template:'\n        <cds-checkbox\n            class="some-class"\n            id="checkbox-3"\n            helperText="Helper text goes here">\n            Checkbox label\n        </cds-checkbox>\n        <br /><br />\n        <cds-checkbox\n            class="some-class"\n            id="checkbox-4"\n            [invalid]="true"\n            invalidText="Invalid text goes here">\n            Checkbox label\n        </cds-checkbox>\n        <br /><br />\n        <cds-checkbox\n            class="some-class"\n            id="checkbox-5"\n            [warn]="true"\n            warnText="Warning text goes here">\n            Checkbox label\n        </cds-checkbox>\n        <br /><br />\n        <cds-checkbox\n            class="some-class"\n            id="checkbox-6"\n            [readOnly]="true">\n            Checkbox label\n        </cds-checkbox>\n    '})).bind({}),GroupStatePropagation=(args=>({props:args,template:'\n        <div style="max-width: 32rem;">\n            <cds-checkbox-group\n                legend="Controlled group"\n                [helperText]="groupHelperText"\n                [readOnly]="groupReadOnly"\n                [invalid]="groupInvalid"\n                [invalidText]="groupInvalidText"\n                [warn]="groupWarn"\n                [warnText]="groupWarnText">\n                <cds-checkbox id="group-inherit-1">Inherits from group</cds-checkbox>\n                <cds-checkbox id="group-inherit-2">Inherits from group</cds-checkbox>\n                <cds-checkbox id="group-override-invalid" [invalid]="false">\n                    Explicit invalid false (overrides group invalid)\n                </cds-checkbox>\n            </cds-checkbox-group>\n\n\n            <p class="cds--label-01" style="margin-bottom: 1rem; margin-top: 2rem;">\n                Checkbox sets its own invalid message:\n            </p>\n            <cds-checkbox-group\n                legend="Mixed per-checkbox state"\n                helperText="Group helper (hidden when any checkbox is invalid/warn at group level).">\n                <cds-checkbox id="mixed-1">Default</cds-checkbox>\n                <cds-checkbox\n                    id="mixed-2"\n                    [invalid]="true"\n                    invalidText="This checkbox has its own error">\n                    Own invalid state\n                </cds-checkbox>\n            </cds-checkbox-group>\n        </div>\n    '})).bind({});GroupStatePropagation.storyName="Group state (host injection)",GroupStatePropagation.args={groupReadOnly:!1,groupInvalid:!1,groupInvalidText:"Invalid message goes here",groupWarn:!1,groupWarnText:"Warning message goes here",groupHelperText:"Helper text goes here"};const withAILabel=(args=>({props:args,styles:ai_label_story_shared.J6,template:'\n        <div class="ai-label-check-radio-container">\n            <cds-checkbox-group\n                legend="Group Label"\n                [decorator]="decoratorDefaultTpl"\n                [readOnly]="readOnly"\n                [invalid]="invalid"\n                [invalidText]="invalidText"\n                [warn]="warn"\n                [warnText]="warnText">\n                <cds-checkbox id="checkbox-label-1">Checkbox label</cds-checkbox>\n                <cds-checkbox id="checkbox-label-2">Checkbox label</cds-checkbox>\n                <cds-checkbox id="checkbox-label-3">Checkbox label</cds-checkbox>\n            </cds-checkbox-group>\n\n            <cds-checkbox-group\n                legend="Group Label"\n                [readOnly]="readOnly"\n                [invalid]="invalid"\n                [invalidText]="invalidText"\n                [warn]="warn"\n                [warnText]="warnText">\n                <cds-checkbox id="checkbox-label-4" [decorator]="decoratorDefaultTpl">Checkbox label</cds-checkbox>\n                <cds-checkbox id="checkbox-label-5" [decorator]="decoratorDefaultTpl">Checkbox label</cds-checkbox>\n                <cds-checkbox id="checkbox-label-6">Checkbox label</cds-checkbox>\n            </cds-checkbox-group>\n\n            <cds-checkbox-group\n                legend="Group Label"\n                [readOnly]="readOnly"\n                [invalid]="invalid"\n                [invalidText]="invalidText"\n                [warn]="warn"\n                [warnText]="warnText">\n                <cds-checkbox id="checkbox-label-7" [decorator]="decoratorInlineTpl">Checkbox label</cds-checkbox>\n                <cds-checkbox id="checkbox-label-8" [decorator]="decoratorInlineTpl">Checkbox label</cds-checkbox>\n                <cds-checkbox id="checkbox-label-9">Checkbox label</cds-checkbox>\n            </cds-checkbox-group>\n        </div>\n\n        <ng-template #decoratorDefaultTpl>\n            <cds-ai-label\n                size="mini"\n                aiText="AI"\n                [autoAlign]="true"\n                ariaLabel="Show information">\n                '+ai_label_story_shared.Ag+'\n            </cds-ai-label>\n        </ng-template>\n        <ng-template #decoratorInlineTpl>\n            <cds-ai-label\n                [autoAlign]="true"\n                kind="inline"\n                size="md"\n                aiText="AI"\n                ariaLabel="Show information">\n                '+ai_label_story_shared.Ag+"\n            </cds-ai-label>\n        </ng-template>\n    "})).bind({});withAILabel.args={readOnly:!1,invalid:!1,invalidText:"Invalid message goes here",warn:!1,warnText:"Warning message goes here"},Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <fieldset class="cds--fieldset">\n            <legend class="cds--label">{{label}}</legend>\n            <cds-checkbox\n                [disabled]="disabled"\n                [indeterminate]="indeterminate"\n                [checked]="checked"\n                (checkedChange)="onChange($event)"\n                [hideLabel]="hideLabel"\n                (indeterminateChange)="onIndeterminateChange($event)">\n                Indeterminate checkbox\n            </cds-checkbox>\n        </fieldset>\n    `\n})',...Basic.parameters?.docs?.source}}},WithNgModel.parameters={...WithNgModel.parameters,docs:{...WithNgModel.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-checkbox\n            [(ngModel)]="model">\n            ngModel checkbox\n        </cds-checkbox>\n\n        <div style="display:flex; flex-direction: column; width: 150px">\n            <button (click)="model=!model">Set model</button>\n            Checked: {{ model }}\n        </div>\n    `\n})',...WithNgModel.parameters?.docs?.source}}},WithReactiveForms.parameters={...WithReactiveForms.parameters,docs:{...WithReactiveForms.parameters?.docs,source:{originalSource:"args => ({\n  props: args,\n  template: `\n    \x3c!--\n    app-* components are for demo purposes only.\n    You can create your own implementation by using the component source found at:\n    https://github.com/IBM/carbon-components-angular/tree/master/src/checkbox/stories/reactive-form.component.ts\n    --\x3e\n    <app-reactive-forms></app-reactive-forms>\n    `\n})",...WithReactiveForms.parameters?.docs?.source}}},Single.parameters={...Single.parameters,docs:{...Single.parameters?.docs,source:{originalSource:'() => ({\n  template: `\n        <cds-checkbox\n            class="some-class"\n            id="checkbox-3"\n            helperText="Helper text goes here">\n            Checkbox label\n        </cds-checkbox>\n        <br /><br />\n        <cds-checkbox\n            class="some-class"\n            id="checkbox-4"\n            [invalid]="true"\n            invalidText="Invalid text goes here">\n            Checkbox label\n        </cds-checkbox>\n        <br /><br />\n        <cds-checkbox\n            class="some-class"\n            id="checkbox-5"\n            [warn]="true"\n            warnText="Warning text goes here">\n            Checkbox label\n        </cds-checkbox>\n        <br /><br />\n        <cds-checkbox\n            class="some-class"\n            id="checkbox-6"\n            [readOnly]="true">\n            Checkbox label\n        </cds-checkbox>\n    `\n})',...Single.parameters?.docs?.source}}},GroupStatePropagation.parameters={...GroupStatePropagation.parameters,docs:{...GroupStatePropagation.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <div style="max-width: 32rem;">\n            <cds-checkbox-group\n                legend="Controlled group"\n                [helperText]="groupHelperText"\n                [readOnly]="groupReadOnly"\n                [invalid]="groupInvalid"\n                [invalidText]="groupInvalidText"\n                [warn]="groupWarn"\n                [warnText]="groupWarnText">\n                <cds-checkbox id="group-inherit-1">Inherits from group</cds-checkbox>\n                <cds-checkbox id="group-inherit-2">Inherits from group</cds-checkbox>\n                <cds-checkbox id="group-override-invalid" [invalid]="false">\n                    Explicit invalid false (overrides group invalid)\n                </cds-checkbox>\n            </cds-checkbox-group>\n\n\n            <p class="cds--label-01" style="margin-bottom: 1rem; margin-top: 2rem;">\n                Checkbox sets its own invalid message:\n            </p>\n            <cds-checkbox-group\n                legend="Mixed per-checkbox state"\n                helperText="Group helper (hidden when any checkbox is invalid/warn at group level).">\n                <cds-checkbox id="mixed-1">Default</cds-checkbox>\n                <cds-checkbox\n                    id="mixed-2"\n                    [invalid]="true"\n                    invalidText="This checkbox has its own error">\n                    Own invalid state\n                </cds-checkbox>\n            </cds-checkbox-group>\n        </div>\n    `\n})',...GroupStatePropagation.parameters?.docs?.source}}},withAILabel.parameters={...withAILabel.parameters,docs:{...withAILabel.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  styles: AI_LABEL_STORY_STYLES,\n  template: `\n        <div class="ai-label-check-radio-container">\n            <cds-checkbox-group\n                legend="Group Label"\n                [decorator]="decoratorDefaultTpl"\n                [readOnly]="readOnly"\n                [invalid]="invalid"\n                [invalidText]="invalidText"\n                [warn]="warn"\n                [warnText]="warnText">\n                <cds-checkbox id="checkbox-label-1">Checkbox label</cds-checkbox>\n                <cds-checkbox id="checkbox-label-2">Checkbox label</cds-checkbox>\n                <cds-checkbox id="checkbox-label-3">Checkbox label</cds-checkbox>\n            </cds-checkbox-group>\n\n            <cds-checkbox-group\n                legend="Group Label"\n                [readOnly]="readOnly"\n                [invalid]="invalid"\n                [invalidText]="invalidText"\n                [warn]="warn"\n                [warnText]="warnText">\n                <cds-checkbox id="checkbox-label-4" [decorator]="decoratorDefaultTpl">Checkbox label</cds-checkbox>\n                <cds-checkbox id="checkbox-label-5" [decorator]="decoratorDefaultTpl">Checkbox label</cds-checkbox>\n                <cds-checkbox id="checkbox-label-6">Checkbox label</cds-checkbox>\n            </cds-checkbox-group>\n\n            <cds-checkbox-group\n                legend="Group Label"\n                [readOnly]="readOnly"\n                [invalid]="invalid"\n                [invalidText]="invalidText"\n                [warn]="warn"\n                [warnText]="warnText">\n                <cds-checkbox id="checkbox-label-7" [decorator]="decoratorInlineTpl">Checkbox label</cds-checkbox>\n                <cds-checkbox id="checkbox-label-8" [decorator]="decoratorInlineTpl">Checkbox label</cds-checkbox>\n                <cds-checkbox id="checkbox-label-9">Checkbox label</cds-checkbox>\n            </cds-checkbox-group>\n        </div>\n\n        <ng-template #decoratorDefaultTpl>\n            <cds-ai-label\n                size="mini"\n                aiText="AI"\n                [autoAlign]="true"\n                ariaLabel="Show information">\n                ` + AI_LABEL_INNER + `\n            </cds-ai-label>\n        </ng-template>\n        <ng-template #decoratorInlineTpl>\n            <cds-ai-label\n                [autoAlign]="true"\n                kind="inline"\n                size="md"\n                aiText="AI"\n                ariaLabel="Show information">\n                ` + AI_LABEL_INNER + `\n            </cds-ai-label>\n        </ng-template>\n    `\n})',...withAILabel.parameters?.docs?.source}}};const __namedExportsOrder=["Basic","WithNgModel","WithReactiveForms","Single","GroupStatePropagation","withAILabel"]}}]);