carbon-components-angular/docs/storybook/1895.0331c090.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[1895],{"./src/checkbox/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{XZ:()=>Checkbox,nD:()=>CheckboxModule});var CheckboxState,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");!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){this.changeDetectorRef=changeDetectorRef,this.disabled=!1,this.skeleton=!1,this.hideLabel=!1,this.id=`checkbox-${Checkbox.checkboxCount}`,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.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}toggle(){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()}focusOut(){this.onTouched()}onChange(event){event.stopPropagation()}onClick(event){if(this.click.observers.length)return event.preventDefault(),void this.click.emit();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)}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.ctorParameters=()=>[{type:core.ChangeDetectorRef}],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}],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<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.aria-labelledby]="ariaLabelledby"\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\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</span>\n\t\t\t</label>\n\t\t</div>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:Checkbox,multi:!0}],changeDetection:core.ChangeDetectionStrategy.OnPush})],Checkbox);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let CheckboxModule=class CheckboxModule{};CheckboxModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Checkbox],exports:[Checkbox],imports:[common.CommonModule,fesm2020_forms.u5]})],CheckboxModule)},"./src/forms/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{hJ:()=>src_button.hJ,s:()=>NFormsModule});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"),common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),src_checkbox=__webpack_require__("./src/checkbox/index.ts"),toggle=__webpack_require__("./src/toggle/index.ts"),src_radio=__webpack_require__("./src/radio/index.ts"),input=__webpack_require__("./src/input/index.ts"),src_button=__webpack_require__("./src/button/index.ts");let NFormsModule=class NFormsModule{};NFormsModule=(0,tslib_es6.gn)([(0,core.NgModule)({exports:[src_checkbox.nD,toggle.vm,src_radio.dU,input.gP,src_button.hJ,input.gP],imports:[common.CommonModule,fesm2020_forms.u5,src_checkbox.nD,toggle.vm,src_radio.dU,input.gP,src_button.hJ]})],NFormsModule)},"./src/radio/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Y8:()=>Radio,Ee:()=>RadioGroup,dU:()=>RadioModule});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");class RadioChange{constructor(source,value){this.source=source,this.value=value}}let Radio=class Radio{constructor(){this.checked=!1,this.name="",this.disabled=!1,this.labelPlacement="right",this.required=!1,this.skeleton=!1,this.id="radio-"+Radio.radioCount++,this.change=new core.EventEmitter,this.hostClass=!0,this.disabledFromGroup=!1,this._labelledby="",this.radioChangeHandler=event=>{}}set ariaLabelledby(value){this._labelledby=value}get ariaLabelledby(){return this._labelledby?this._labelledby:`label-${this.id}`}get labelLeft(){return"left"===this.labelPlacement}onChange(event){event.stopPropagation()}onClick(event){this.checked=event.target.checked;const radioEvent=new RadioChange(this,this.value);this.change.emit(radioEvent),this.radioChangeHandler(radioEvent)}registerRadioChangeHandler(fn){this.radioChangeHandler=fn}setDisabledFromGroup(disabled){this.disabledFromGroup=disabled}};Radio.radioCount=0,Radio.propDecorators={checked:[{type:core.Input}],name:[{type:core.Input}],disabled:[{type:core.Input}],labelPlacement:[{type:core.Input}],ariaLabelledby:[{type:core.Input}],ariaLabel:[{type:core.Input}],required:[{type:core.Input}],value:[{type:core.Input}],skeleton:[{type:core.Input}],id:[{type:core.Input}],change:[{type:core.Output}],hostClass:[{type:core.HostBinding,args:["class.cds--radio-button-wrapper"]}],labelLeft:[{type:core.HostBinding,args:["class.cds--radio-button-wrapper--label-left"]}]},Radio=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-radio, ibm-radio",template:'\n\t\t<input\n\t\t\t*ngIf="!skeleton"\n\t\t\tclass="cds--radio-button"\n\t\t\ttype="radio"\n\t\t\t[checked]="checked"\n\t\t\t[disabled]="disabled || disabledFromGroup"\n\t\t\t[name]="name"\n\t\t\t[id]="id"\n\t\t\t[required]="required"\n\t\t\t[attr.value]="value"\n\t\t\t[attr.aria-labelledby]="ariaLabelledby"\n\t\t\t(change)="onChange($event)"\n\t\t\t(click)="onClick($event)">\n\t\t<div *ngIf="skeleton" class="cds--radio-button cds--skeleton"></div>\n\t\t<label\n\t\t\tclass="cds--radio-button__label"\n\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--skeleton\': skeleton\n\t\t\t}"\n\t\t\t[for]="id"\n\t\t\tid="label-{{id}}">\n\t\t\t<span class="cds--radio-button__appearance"></span>\n\t\t\t<ng-content></ng-content>\n\t\t</label>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:Radio,multi:!0}]})],Radio);let RadioGroup=class RadioGroup{constructor(){this.orientation="horizontal",this.labelPlacement="right",this.invalid=!1,this.warn=!1,this.change=new core.EventEmitter,this.radioButtonGroupClass=!0,this.isInitialized=!1,this._disabled=!1,this._skeleton=!1,this._value=null,this._selected=null,this._name="radio-group-"+RadioGroup.radioGroupCount++,this.onTouched=()=>{},this.propagateChange=_=>{}}set selected(selected){(this._selected&&this._selected.value)===(selected&&selected.value)||(this._selected&&(this._selected.checked=!1),this._selected=selected,this.value=selected?selected.value:null,this.checkSelectedRadio())}get selected(){return this._selected}set value(newValue){this._value!==newValue&&(this._value=newValue,this.updateSelectedRadioFromValue(),this.checkSelectedRadio())}get value(){return this._value}set name(name){this._name=name,this.updateRadios()}get name(){return this._name}set disabled(disabled){this._disabled=disabled,this.updateRadios()}get disabled(){return this._disabled}get skeleton(){return this._skeleton}set skeleton(value){this._skeleton=value,this.updateChildren()}checkSelectedRadio(){this.selected&&!this._selected.checked&&(this.selected.checked=!0)}updateSelectedRadioFromValue(){let alreadySelected=null!=this._selected&&this._selected.value===this._value;this.radios&&!alreadySelected&&(this.selected&&this.value&&(this.selected.checked=!1),this._selected=null,this.radios.forEach((radio=>{(radio.checked||radio.value===this._value)&&(this._selected=radio)})),this.selected&&!this.value&&(this._value=this.selected.value))}setDisabledState(isDisabled){this.disabled=isDisabled}emitChangeEvent(event){this.change.emit(event),this.propagateChange(event.value),this.onTouched()}updateRadios(){this.radios&&setTimeout((()=>{this.radios.forEach((radio=>{radio.name=this.name,radio.setDisabledFromGroup(this.disabled),"left"===this.labelPlacement&&(radio.labelPlacement="left")}))}))}writeValue(value){this.value=value,setTimeout((()=>{this.updateSelectedRadioFromValue(),this.checkSelectedRadio()}))}ngAfterContentInit(){this.radios.changes.subscribe((()=>{this.updateRadios(),this.updateRadioChangeHandler()})),this.updateChildren(),this.updateRadioChangeHandler()}ngAfterViewInit(){this.updateRadios()}registerOnChange(fn){this.propagateChange=fn}registerOnTouched(fn){this.onTouched=fn}focusOut(){this.onTouched()}isTemplate(value){return value instanceof core.TemplateRef}updateChildren(){this.radios&&this.radios.forEach((child=>child.skeleton=this.skeleton))}updateRadioChangeHandler(){this.radios.forEach((radio=>{radio.registerRadioChangeHandler((event=>{(this.selected&&this.selected.value)!==event.value&&(this.selected&&(this.selected.checked=!1),this._selected=event.source,this._value=event.value,this.emitChangeEvent(event))}))}))}};RadioGroup.radioGroupCount=0,RadioGroup.propDecorators={selected:[{type:core.Input}],value:[{type:core.Input}],name:[{type:core.Input}],disabled:[{type:core.Input}],skeleton:[{type:core.Input}],orientation:[{type:core.Input}],labelPlacement:[{type:core.Input}],legend:[{type:core.Input}],ariaLabel:[{type:core.Input}],ariaLabelledby:[{type:core.Input}],helperText:[{type:core.Input}],invalid:[{type:core.Input}],invalidText:[{type:core.Input}],warn:[{type:core.Input}],warnText:[{type:core.Input}],change:[{type:core.Output}],radios:[{type:core.ContentChildren,args:[(0,core.forwardRef)((()=>Radio))]}],radioButtonGroupClass:[{type:core.HostBinding,args:["class.cds--form-item"]}],focusOut:[{type:core.HostListener,args:["focusout"]}]},RadioGroup=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-radio-group, ibm-radio-group",template:'\n\t\t<fieldset\n\t\t\tclass="cds--radio-button-group"\n\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t[attr.aria-labelledby]="ariaLabelledby"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--radio-button-group--vertical\': orientation === \'vertical\',\n\t\t\t\t\'cds--radio-button-group--label-left\': labelPlacement === \'left\',\n\t\t\t\t\'cds--radio-button-group--invalid\': invalid,\n\t\t\t\t\'cds--radio-button-group--warning\': !invalid && warn\n\t\t\t}"\n\t\t\t[attr.data-invalid]="invalid ? true : null">\n\t\t\t<legend *ngIf="legend" class="cds--label">\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</legend>\n\t\t\t<ng-content></ng-content>\n\t\t</fieldset>\n\t\t<div class="cds--radio-button__validation-msg">\n\t\t\t<ng-container *ngIf="invalid">\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon="warning--filled"\n\t\t\t\t\tsize="16"\n\t\t\t\t\tclass="cds--radio-button__invalid-icon">\n\t\t\t\t</svg>\n\t\t\t\t<div class="cds--form-requirement">\n\t\t\t\t\t<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>\n\t\t\t\t\t<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngIf="!invalid && warn">\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon="warning--alt--filled"\n\t\t\t\t\tclass="cds--radio-button__invalid-icon cds--radio-button__invalid-icon--warning"\n\t\t\t\t\tsize="16">\n\t\t\t\t</svg>\n\t\t\t\t<div class="cds--form-requirement">\n\t\t\t\t\t<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t</div>\n\t\t<div\n\t\t\t*ngIf="helperText && !invalid && !warn"\n\t\t\tclass="cds--form__helper-text"\n\t\t\t[ngClass]="{\'cds--form__helper-text--disabled\': disabled}">\n\t\t\t<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>\n\t\t</div>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:RadioGroup,multi:!0}]})],RadioGroup);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let RadioModule=class RadioModule{};RadioModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Radio,RadioGroup],exports:[Radio,RadioGroup],imports:[common.CommonModule,fesm2020_forms.u5,icon.QX]})],RadioModule)},"./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,i18n){super(changeDetectorRef),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:i18n.oc}],Toggle.propDecorators={offText:[{type:core.Input}],onText:[{type:core.Input}],label:[{type:core.Input}],size:[{type:core.Input}],hideLabel:[{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</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)}}]);