carbon-components-angular/docs/storybook/9300.537382cc.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[9300],{"./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/toggle/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{ZD:()=>Toggle,vm:()=>ToggleModule});var ToggleState,tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),src_checkbox=__webpack_require__("./src/checkbox/index.ts"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),i18n=__webpack_require__("./src/i18n/index.ts");!function(ToggleState){ToggleState[ToggleState.Init=0]="Init",ToggleState[ToggleState.Checked=1]="Checked",ToggleState[ToggleState.Unchecked=2]="Unchecked"}(ToggleState||(ToggleState={}));let Toggle=class Toggle extends src_checkbox.XZ{constructor(changeDetectorRef,hostGroup,i18n){super(changeDetectorRef,hostGroup),this.changeDetectorRef=changeDetectorRef,this.i18n=i18n,this.size="md",this.hideLabel=!1,this.skeleton=!1,this.toggleClass=!0,this.id="toggle-"+Toggle.toggleCount,this._offValues=this.i18n.getOverridable("TOGGLE.OFF"),this._onValues=this.i18n.getOverridable("TOGGLE.ON"),Toggle.toggleCount++}set offText(value){this._offValues.override(value)}get offText(){return this._offValues.value}set onText(value){this._onValues.override(value)}get onText(){return this._onValues.value}get disabledClass(){return this.disabled}get formItem(){return!this.skeleton}setDisabledState(isDisabled){this.disabled=isDisabled}getOffText(){return this._offValues.subject}getOnText(){return this._onValues.subject}getCheckedText(){return this.checked?this._onValues.subject:this._offValues.subject}emitChangeEvent(){this.checkedChange.emit(this.checked),this.propagateChange(this.checked)}isTemplate(value){return value instanceof core.TemplateRef}};Toggle.toggleCount=0,Toggle.ctorParameters=()=>[{type:core.ChangeDetectorRef},{type:void 0,decorators:[{type:core.Optional},{type:core.Inject,args:[src_checkbox.Aj]}]},{type:i18n.oc}],Toggle.propDecorators={offText:[{type:core.Input}],onText:[{type:core.Input}],label:[{type:core.Input}],size:[{type:core.Input}],hideLabel:[{type:core.Input}],ariaLabel:[{type:core.Input}],skeleton:[{type:core.HostBinding,args:["class.cds--toggle--skeleton"]},{type:core.Input}],toggleClass:[{type:core.HostBinding,args:["class.cds--toggle"]}],disabledClass:[{type:core.HostBinding,args:["class.cds--toggle--disabled"]}],formItem:[{type:core.HostBinding,args:["class.cds--form-item"]}]},Toggle=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-toggle, ibm-toggle",template:'\n\t\t<ng-container *ngIf="!skeleton; else skeletonTemplate;">\n\t\t\t<button\n\t\t\t\tclass="cds--toggle__button"\n\t\t\t\t[disabled]="disabled"\n\t\t\t\t[id]="id"\n\t\t\t\trole="switch"\n\t\t\t\ttype="button"\n\t\t\t\t[attr.aria-checked]="checked"\n\t\t\t\t(click)="onClick($event)"\n\t\t\t\t[attr.aria-label]="ariaLabel">\n\t\t\t</button>\n\t\t\t<label\n\t\t\t\tclass="cds--toggle__label"\n\t\t\t\t[for]="id">\n\t\t\t\t<span\n\t\t\t\t\tclass="cds--toggle__label-text"\n\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\'cds--visually-hidden\': hideLabel\n\t\t\t\t\t}">\n\t\t\t\t\t<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>\n\t\t\t\t</span>\n\t\t\t\t<div\n\t\t\t\t\tclass="cds--toggle__appearance"\n\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\'cds--toggle__appearance--sm\': size === \'sm\'\n\t\t\t\t\t}">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass="cds--toggle__switch"\n\t\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\t\'cds--toggle__switch--checked\': checked\n\t\t\t\t\t\t}">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t*ngIf="size === \'sm\'"\n\t\t\t\t\t\t\tclass=\'cds--toggle__check\'\n\t\t\t\t\t\t\twidth="6px"\n\t\t\t\t\t\t\theight="5px"\n\t\t\t\t\t\t\tviewBox="0 0 6 5">\n\t\t\t\t\t\t\t<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class="cds--toggle__text">\n\t\t\t\t\t\t{{(hideLabel ? label : (getCheckedText() | async))}}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t</ng-container>\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<div class="cds--toggle__skeleton-circle"></div>\n\t\t\t<div class="cds--toggle__skeleton-rectangle"></div>\n\t\t</ng-template>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:Toggle,multi:!0}]})],Toggle);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let ToggleModule=class ToggleModule{};ToggleModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Toggle],exports:[Toggle],imports:[common.CommonModule,fesm2020_forms.u5,i18n.LU]})],ToggleModule)}}]);