carbon-components-angular/docs/storybook/radio-radio-stories.444fc044.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[2342],{"./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/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 hasDecorator(){return!!this.decorator}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"]}],hasDecorator:[{type:core.HostBinding,args:["class.cds--radio-button-wrapper--decorator"]}],labelLeft:[{type:core.HostBinding,args:["class.cds--radio-button-wrapper--label-left"]}],decorator:[{type:core.Input}]},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<span class="cds--radio-button__label-text">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t\t<ng-container *ngIf="decorator">\n\t\t\t\t\t<div class="cds--radio-button-wrapper-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</span>\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}],decorator:[{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\t\'cds--radio-button-group--decorator\': !!decorator\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\t<ng-container *ngIf="decorator">\n\t\t\t\t\t<div class="cds--radio-button-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</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/radio/radio.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,ReactiveForms:()=>ReactiveForms,Skeleton:()=>Skeleton,__namedExportsOrder:()=>__namedExportsOrder,default:()=>radio_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_radio=__webpack_require__("./src/radio/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,this.manyRadios=[{num:"one"},{num:"two"},{num:"three"},{num:"four",disabled:!0}]}changeSelected(){this.formGroup.get("radioGroup")?.setValue("three")}disableGroup(){this.formGroup.get("radioGroup")?.disable()}ngOnInit(){this.formGroup=this.formBuilder.group({radioGroup:new fesm2020_forms.NI})}ngAfterViewInit(){this.formGroup.get("radioGroup")?.setValue("one")}};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-radio-group\n\t\t\t\taria-label="radiogroup"\n\t\t\t\tformControlName="radioGroup">\n\t\t\t\t<cds-radio\n\t\t\t\t\tvalue="radio">\n\t\t\t\t\tzero\n\t\t\t\t</cds-radio>\n\t\t\t\t<cds-radio *ngFor="let radio of manyRadios"\n\t\t\t\t\t[value]="radio.num"\n\t\t\t\t\t[disabled]="radio.disabled">\n\t\t\t\t\t{{radio.num}}\n\t\t\t\t</cds-radio>\n\t\t\t</cds-radio-group>\n\t\t</form>\n\t\t<button (click)="changeSelected()">Set selected to three</button>\n\t\t<button (click)="disableGroup()">Set group disabled</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 radio_stories={title:"Components/Radio",decorators:[(0,dist.moduleMetadata)({declarations:[ReactiveFormsStory],imports:[fesm2020_forms.u5,fesm2020_forms.UX,src_radio.dU,ai_label.uV,src_button.hJ,icon.QX]})],component:src_radio.Ee,subcomponents:src_radio.Y8},Basic=(args=>({props:args,template:'\n        <cds-radio-group\n            [legend]="label"\n            [disabled]="disabled"\n            [helperText]="helperText"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            ariaLabel="radiogroup"\n            [orientation]="orientation"\n            [labelPlacement]="labelPlacement"\n            (change)="onChange($event)">\n            <cds-radio value="Zero" [checked]="true">\n                Zero\n            </cds-radio>\n            <cds-radio [value]="One">One</cds-radio>\n            <cds-radio [value]="Two">Two</cds-radio>\n            <cds-radio [value]="Three">Three</cds-radio>\n            <cds-radio [value]="Four" [disabled]="true">Four</cds-radio>\n        </cds-radio-group>\n    '})).bind({});Basic.args={label:"Radio button heading",helperText:"Helper text message goes here and can wrap lines",invalid:!1,invalidText:"Error message goes here and can wrap lines",warn:!1,warnText:"Warning message goes here and can wrap lines",orientation:"horizontal",labelPlacement:"right"},Basic.argTypes={onChange:{control:"Changed!"},orientation:{options:["horizontal","vertical"],control:"radio"},labelPlacement:{options:["left","right"],control:"radio"}};const Skeleton=(args=>({props:args,template:'\n        <cds-radio-group skeleton="true">\n            <cds-radio></cds-radio>\n        </cds-radio-group>\n    '})).bind({}),ReactiveForms=(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/radio/stories/app-reactive-form.component.ts\n        --\x3e\n        <app-reactive-forms></app-reactive-forms>\n    "})).bind({});ReactiveForms.parameters={controls:{disable:!0}};const withAILabel=(args=>({props:args,styles:ai_label_story_shared.J6,template:'\n        <div class="ai-label-check-radio-container">\n            <cds-radio-group\n                legend="Group label"\n                orientation="vertical"\n                [decorator]="aiLabelDefaultTpl"\n                ariaLabel="radiogroup"\n                [invalid]="invalid"\n                [invalidText]="invalidText"\n                [warn]="warn"\n                [warnText]="warnText">\n                <cds-radio value="radio-1" id="radio-1" [checked]="true">Radio button label</cds-radio>\n                <cds-radio value="radio-2" id="radio-2">Radio button label</cds-radio>\n                <cds-radio value="radio-3" id="radio-3">Radio button label</cds-radio>\n            </cds-radio-group>\n\n            <cds-radio-group\n                legend="Group label"\n                orientation="vertical"\n                ariaLabel="radiogroup"\n                [invalid]="invalid"\n                [invalidText]="invalidText"\n                [warn]="warn"\n                [warnText]="warnText">\n                <cds-radio value="radio-4" id="radio-4" [checked]="true" [decorator]="aiLabelDefaultTpl">Radio button label</cds-radio>\n                <cds-radio value="radio-5" id="radio-5" [decorator]="aiLabelDefaultTpl">Radio button label</cds-radio>\n                <cds-radio value="radio-6" id="radio-6">Radio button label</cds-radio>\n            </cds-radio-group>\n\n            <cds-radio-group\n                legend="Group label"\n                orientation="vertical"\n                ariaLabel="radiogroup"\n                [invalid]="invalid"\n                [invalidText]="invalidText"\n                [warn]="warn"\n                [warnText]="warnText">\n                <cds-radio value="radio-7" id="radio-7" [checked]="true" [decorator]="aiLabelInlineTpl">Radio button label</cds-radio>\n                <cds-radio value="radio-8" id="radio-8" [decorator]="aiLabelInlineTpl">Radio button label</cds-radio>\n                <cds-radio value="radio-9" id="radio-9">Radio button label</cds-radio>\n            </cds-radio-group>\n        </div>\n\n        <ng-template #aiLabelDefaultTpl>\n            <cds-ai-label\n                class="ai-label-container"\n                kind="default"\n                size="md"\n                [autoAlign]="true"\n                aiText="AI"\n                ariaLabel="Show information">\n                '+ai_label_story_shared.Ag+'\n            </cds-ai-label>\n        </ng-template>\n        <ng-template #aiLabelInlineTpl>\n            <cds-ai-label\n                class="ai-label-container"\n                kind="inline"\n                size="md"\n                [autoAlign]="true"\n                aiText="AI"\n                ariaLabel="Show information">\n                '+ai_label_story_shared.Ag+"\n            </cds-ai-label>\n        </ng-template>\n    "})).bind({});withAILabel.args={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        <cds-radio-group\n            [legend]="label"\n            [disabled]="disabled"\n            [helperText]="helperText"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            ariaLabel="radiogroup"\n            [orientation]="orientation"\n            [labelPlacement]="labelPlacement"\n            (change)="onChange($event)">\n            <cds-radio value="Zero" [checked]="true">\n                Zero\n            </cds-radio>\n            <cds-radio [value]="One">One</cds-radio>\n            <cds-radio [value]="Two">Two</cds-radio>\n            <cds-radio [value]="Three">Three</cds-radio>\n            <cds-radio [value]="Four" [disabled]="true">Four</cds-radio>\n        </cds-radio-group>\n    `\n})',...Basic.parameters?.docs?.source}}},Skeleton.parameters={...Skeleton.parameters,docs:{...Skeleton.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-radio-group skeleton="true">\n            <cds-radio></cds-radio>\n        </cds-radio-group>\n    `\n})',...Skeleton.parameters?.docs?.source}}},ReactiveForms.parameters={...ReactiveForms.parameters,docs:{...ReactiveForms.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/radio/stories/app-reactive-form.component.ts\n        --\x3e\n        <app-reactive-forms></app-reactive-forms>\n    `\n})",...ReactiveForms.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-radio-group\n                legend="Group label"\n                orientation="vertical"\n                [decorator]="aiLabelDefaultTpl"\n                ariaLabel="radiogroup"\n                [invalid]="invalid"\n                [invalidText]="invalidText"\n                [warn]="warn"\n                [warnText]="warnText">\n                <cds-radio value="radio-1" id="radio-1" [checked]="true">Radio button label</cds-radio>\n                <cds-radio value="radio-2" id="radio-2">Radio button label</cds-radio>\n                <cds-radio value="radio-3" id="radio-3">Radio button label</cds-radio>\n            </cds-radio-group>\n\n            <cds-radio-group\n                legend="Group label"\n                orientation="vertical"\n                ariaLabel="radiogroup"\n                [invalid]="invalid"\n                [invalidText]="invalidText"\n                [warn]="warn"\n                [warnText]="warnText">\n                <cds-radio value="radio-4" id="radio-4" [checked]="true" [decorator]="aiLabelDefaultTpl">Radio button label</cds-radio>\n                <cds-radio value="radio-5" id="radio-5" [decorator]="aiLabelDefaultTpl">Radio button label</cds-radio>\n                <cds-radio value="radio-6" id="radio-6">Radio button label</cds-radio>\n            </cds-radio-group>\n\n            <cds-radio-group\n                legend="Group label"\n                orientation="vertical"\n                ariaLabel="radiogroup"\n                [invalid]="invalid"\n                [invalidText]="invalidText"\n                [warn]="warn"\n                [warnText]="warnText">\n                <cds-radio value="radio-7" id="radio-7" [checked]="true" [decorator]="aiLabelInlineTpl">Radio button label</cds-radio>\n                <cds-radio value="radio-8" id="radio-8" [decorator]="aiLabelInlineTpl">Radio button label</cds-radio>\n                <cds-radio value="radio-9" id="radio-9">Radio button label</cds-radio>\n            </cds-radio-group>\n        </div>\n\n        <ng-template #aiLabelDefaultTpl>\n            <cds-ai-label\n                class="ai-label-container"\n                kind="default"\n                size="md"\n                [autoAlign]="true"\n                aiText="AI"\n                ariaLabel="Show information">\n                ` + AI_LABEL_INNER + `\n            </cds-ai-label>\n        </ng-template>\n        <ng-template #aiLabelInlineTpl>\n            <cds-ai-label\n                class="ai-label-container"\n                kind="inline"\n                size="md"\n                [autoAlign]="true"\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","Skeleton","ReactiveForms","withAILabel"]}}]);