carbon-components-angular/docs/storybook/select-select-stories.af1ae580.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[5980],{"./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/select/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Xo:()=>OptGroup,Wx:()=>Option,Ph:()=>Select,An:()=>SelectModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let OptGroup=class OptGroup{constructor(){this.inputClass="cds--select-optgroup"}};OptGroup.propDecorators={inputClass:[{type:core.HostBinding,args:["class"]}]},OptGroup=(0,tslib_es6.gn)([(0,core.Directive)({selector:"optgroup"})],OptGroup);let Option=class Option{constructor(){this.inputClass="cds--select-option"}};Option.propDecorators={inputClass:[{type:core.HostBinding,args:["class"]}]},Option=(0,tslib_es6.gn)([(0,core.Directive)({selector:"option"})],Option);var fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs");let Select=class Select{constructor(){this.display="default",this.warn=!1,this.id="select-"+Select.selectCount++,this.size="md",this.disabled=!1,this.skeleton=!1,this.invalid=!1,this.readonly=!1,this.theme="dark",this.hideLabel=!1,this.fluid=!1,this.valueChange=new core.EventEmitter,this.focused=!1,this.onChangeHandler=_=>{},this.onTouchedHandler=()=>{}}set value(v){this._value=v,this.select&&(this.select.nativeElement.value=this._value)}get value(){return this._value}ngAfterViewInit(){void 0!==this.value&&null!==this.value&&this.select&&this.select.nativeElement.value!==this.value&&(this.select.nativeElement.value=this.value)}writeValue(obj){this.value=obj}registerOnChange(fn){this.onChangeHandler=fn}registerOnTouched(fn){this.onTouchedHandler=fn}setDisabledState(isDisabled){this.disabled=isDisabled}onChange(event){this.value=event.target.value,this.onChangeHandler(event.target.value),this.valueChange.emit(event.target.value)}focusOut(){this.onTouchedHandler()}isTemplate(value){return value instanceof core.TemplateRef}onMouseDown(event){this.readonly&&(event.preventDefault(),event.target.focus())}onKeyDown(event){this.readonly&&["ArrowDown","ArrowUp","ArrowLeft","ArrowRight"," "].includes(event.key)&&event.preventDefault()}handleFocus(event){this.focused="focus"===event.type}};Select.selectCount=0,Select.propDecorators={value:[{type:core.Input}],display:[{type:core.Input}],label:[{type:core.Input}],helperText:[{type:core.Input}],invalidText:[{type:core.Input}],warn:[{type:core.Input}],warnText:[{type:core.Input}],id:[{type:core.Input}],size:[{type:core.Input}],disabled:[{type:core.Input}],skeleton:[{type:core.Input}],invalid:[{type:core.Input}],readonly:[{type:core.Input}],theme:[{type:core.Input}],ariaLabel:[{type:core.Input}],hideLabel:[{type:core.Input}],fluid:[{type:core.Input}],decorator:[{type:core.Input}],valueChange:[{type:core.Output}],select:[{type:core.ViewChild,args:["select"]}],focusOut:[{type:core.HostListener,args:["focusout"]}]},Select=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-select, ibm-select",template:'\n\t\t<div\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--form-item\': !skeleton,\n\t\t\t\t\'cds--select--fluid\': fluid && !skeleton\n\t\t\t}">\n\t\t\t<ng-container *ngIf="skeleton && !fluid">\n\t\t\t\t<div *ngIf="label" class="cds--label cds--skeleton"></div>\n\t\t\t\t<div class="cds--select cds--skeleton"></div>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngIf="skeleton && fluid">\n\t\t\t\t<div class="cds--list-box__wrapper--fluid">\n\t\t\t\t\t<div class="cds--list-box cds--skeleton">\n\t\t\t\t\t\t<div class="cds--list-box__label"></div>\n\t\t\t\t\t\t<div class="cds--list-box__field"></div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<div\n\t\t\t\t*ngIf="!skeleton"\n\t\t\t\tclass="cds--select"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--select--inline\': display === \'inline\',\n\t\t\t\t\t\'cds--select--light\': theme === \'light\',\n\t\t\t\t\t\'cds--select--invalid\': invalid,\n\t\t\t\t\t\'cds--select--warning\': warn,\n\t\t\t\t\t\'cds--select--disabled\': disabled,\n\t\t\t\t\t\'cds--select--readonly\': readonly,\n\t\t\t\t\t\'cds--select--fluid--invalid\': fluid && invalid,\n\t\t\t\t\t\'cds--select--fluid--focus\': fluid && focused,\n\t\t\t\t\t\'cds--select--decorator\': !!decorator\n\t\t\t\t}">\n\t\t\t\t<label\n\t\t\t\t\t*ngIf="label"\n\t\t\t\t\t[for]="id"\n\t\t\t\t\tclass="cds--label"\n\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\'cds--label--disabled\': disabled,\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</label>\n\t\t\t\t<div *ngIf="display === \'inline\'; else noInline" class="cds--select-input--inline__wrapper">\n\t\t\t\t\t<ng-container *ngTemplateOutlet="noInline"></ng-container>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t*ngIf="helperText && !invalid && !warn && !skeleton && !fluid"\n\t\t\t\t\tclass="cds--form__helper-text"\n\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\'cds--form__helper-text--disabled\': disabled\n\t\t\t\t\t}">\n\t\t\t\t\t<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t\x3c!-- select element: dynamically projected based on \'display\' variant --\x3e\n\t\t<ng-template #noInline>\n\t\t\t<div class="cds--select-input__wrapper" [attr.data-invalid]="(invalid ? true : null)">\n\t\t\t\t<select\n\t\t\t\t\t#select\n\t\t\t\t\t[attr.id]="id"\n\t\t\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t\t\t[disabled]="disabled"\n\t\t\t\t\t(change)="onChange($event)"\n\t\t\t\t\t[attr.aria-invalid]="invalid ? \'true\' : null"\n\t\t\t\t\t[attr.aria-readonly]="readonly ? \'true\' : null"\n\t\t\t\t\tclass="cds--select-input"\n\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\'cds--select-input--sm\': size === \'sm\',\n\t\t\t\t\t\t\'cds--select-input--md\': size === \'md\',\n\t\t\t\t\t\t\'cds--select-input--lg\': size === \'lg\'\n\t\t\t\t\t}"\n\t\t\t\t\t(mousedown)="onMouseDown($event)"\n\t\t\t\t\t(keydown)="onKeyDown($event)"\n\t\t\t\t\t(focus)="fluid ? handleFocus($event) : null"\n\t\t\t\t\t(blur)="fluid ? handleFocus($event) : null">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</select>\n\t\t\t\t<svg\n\t\t\t\t\tfocusable="false"\n\t\t\t\t\tpreserveAspectRatio="xMidYMid meet"\n\t\t\t\t\tstyle="will-change: transform;"\n\t\t\t\t\txmlns="http://www.w3.org/2000/svg"\n\t\t\t\t\tclass="cds--select__arrow"\n\t\t\t\t\twidth="16"\n\t\t\t\t\theight="16"\n\t\t\t\t\tviewBox="0 0 16 16"\n\t\t\t\t\taria-hidden="true">\n\t\t\t\t\t<path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path>\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf="invalid"\n\t\t\t\t\tcdsIcon="warning--filled"\n\t\t\t\t\tsize="16"\n\t\t\t\t\tclass="cds--select__invalid-icon">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf="!invalid && warn"\n\t\t\t\t\tcdsIcon="warning--alt--filled"\n\t\t\t\t\tsize="16"\n\t\t\t\t\tclass="cds--select__invalid-icon cds--select__invalid-icon--warning">\n\t\t\t\t</svg>\n\t\t\t\t<ng-container *ngIf="decorator">\n\t\t\t\t\t<div class="cds--select__inner-wrapper--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\t<ng-container *ngIf="fluid">\n\t\t\t\t\t<hr class="cds--select__divider" />\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf="invalid && invalidText" role="alert" class="cds--form-requirement" aria-live="polite">\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\t<div *ngIf="!invalid && warn" 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<ng-container *ngIf="!fluid">\n\t\t\t\t<div\n\t\t\t\t\t*ngIf="invalid && invalidText" role="alert" class="cds--form-requirement" aria-live="polite">\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\t<div *ngIf="!invalid && warn" 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</ng-template>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:Select,multi:!0}]})],Select);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let SelectModule=class SelectModule{};SelectModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Select,Option,OptGroup],exports:[Select,Option,OptGroup],imports:[common.CommonModule,fesm2020_forms.u5,icon.QX]})],SelectModule)},"./src/select/select.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,Fluid:()=>Fluid,NgModel:()=>NgModel,OptionsSelected:()=>OptionsSelected,ReactiveForms:()=>ReactiveForms,ValueProperty:()=>ValueProperty,__namedExportsOrder:()=>__namedExportsOrder,default:()=>select_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_select=__webpack_require__("./src/select/index.ts"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let ReactiveFormsSelect=class ReactiveFormsSelect{constructor(formBuilder){this.formBuilder=formBuilder}clearSelection(){this.formGroup.get("selecterino")?.setValue("default")}selectRandom(){this.formGroup.get("selecterino")?.setValue(["default","option1","option2","option3"][Math.floor(4*Math.random())])}ngOnInit(){this.formGroup=this.formBuilder.group({selecterino:new fesm2020_forms.NI}),this.formGroup.get("selecterino")?.setValue("option2")}};ReactiveFormsSelect.ctorParameters=()=>[{type:fesm2020_forms.qu}],ReactiveFormsSelect=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-reactive-form",template:'\n\t\t<form [formGroup]="formGroup">\n\t\t\t<cds-select formControlName="selecterino">\n\t\t\t\t<option value="default" disabled selected hidden>Choose an option</option>\n\t\t\t\t<option value="option1">Option 1</option>\n\t\t\t\t<option value="option2">Option 2</option>\n\t\t\t\t<option value="option3">Option 3</option>\n\t\t\t</cds-select>\n\t\t</form>\n\t\t<div style="display: flex; flex-direction: column; gap: 2rem; margin-top: 2rem">\n\t\t\tselectedValue: {{ formGroup.get("selecterino").value }}\n\t\t\t<div>\n\t\t\t\t<button (click)="clearSelection()">Clear selection</button>\n\t\t\t\t<button (click)="selectRandom()">Select random</button>\n\t\t\t</div>\n\t\t</div>\n\t'})],ReactiveFormsSelect);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 select_stories={title:"Components/Select",decorators:[(0,dist.moduleMetadata)({imports:[src_select.An,fesm2020_forms.u5,fesm2020_forms.UX,ai_label.uV,src_button.hJ,icon.QX],declarations:[ReactiveFormsSelect]})],args:{hideLabel:!1,skeleton:!1,disabled:!1,readonly:!1,invalid:!1,invalidText:"Please select an option.",warn:!1,warnText:"This is a warning!",label:"Select label",helperText:"Optional helper text",size:"md",theme:"dark",display:"default",fluid:!1},argTypes:{size:{options:["sm","md","lg"],control:"radio"},theme:{options:["light","dark"],control:"radio"},display:{options:["default","inline"],control:"radio"}},component:src_select.Ph,subcomponents:{Option:src_select.Wx,OptGroup:src_select.Xo}},Template=args=>({props:args,template:'\n        <cds-select\n            [skeleton]="skeleton"\n            [disabled]="disabled"\n            [readonly]="readonly"\n            [size]="size"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [label]="label"\n            [helperText]="helperText"\n            [theme]="theme"\n            [(ngModel)]="model"\n            [fluid]="fluid"\n            [display]="display"\n            [hideLabel]="hideLabel">\n            <option value="default" disabled selected hidden>Choose an option</option>\n            <option value="solong">A much longer option that is worth having around to check how text flows</option>\n            <optgroup label="Category 1">\n                <option value="option1">Option 1</option>\n                <option value="option2">Option 2</option>\n            </optgroup>\n            <optgroup label="Category 2">\n                <option value="option1">Option 1</option>\n                <option value="option2">Option 2</option>\n            </optgroup>\n        </cds-select>\n    '}),Basic=Template.bind({}),Fluid=Template.bind({});Fluid.args={fluid:!0};const NgModel=(args=>({props:args,template:'\n        <cds-select\n            [(ngModel)]="model"\n            [skeleton]="skeleton"\n            [disabled]="disabled"\n            [readonly]="readonly"\n            [size]="size"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [label]="label"\n            [helperText]="helperText"\n            [theme]="theme"\n            [(ngModel)]="model"\n            [fluid]="fluid"\n            [display]="display"\n            ariaLabel=\'ngModel select\'>\n            <option value="default" disabled selected hidden>Choose an option</option>\n            <option value="option1">Option 1</option>\n            <option value="option2">Option 2</option>\n            <option value="option3">Option 3</option>\n        </cds-select>\n    '})).bind({});NgModel.args={model:"option2"},NgModel.argTypes={model:{options:["default","option1","option2","option3"],control:"select"}};const 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/select/stories/app-reactive-form.component.ts\n        --\x3e\n        <app-reactive-form></app-reactive-form>\n    "})).bind({});ReactiveForms.parameters={controls:{disable:!0}};const OptionsSelected=(args=>({props:args,template:'\n        <cds-select label="Type">\n            <option\n                value="on-hand"\n                [selected]="selected === \'on-hand\'">\n                On hand\n            </option>\n            <option\n                value="in-transit-inbound"\n                [selected]="selected === \'in-transit-inbound\'">\n                Inbound in-transit\n            </option>\n            <option\n                value="in-transit-outbound"\n                [selected]="selected === \'in-transit-outbound\'">\n                Outbound in-transit\n            </option>\n        </cds-select>\n    '})).bind({});OptionsSelected.storyName="Changing selected through option selected property",OptionsSelected.args={selected:"in-transit-inbound"},OptionsSelected.argTypes={selected:{options:["on-hand","in-transit-inbound","in-transit-outbound"],control:"select"}};const ValueProperty=(args=>({props:args,template:'\n        <cds-select label="Type" [value]="selected">\n            <option value="on-hand">On hand</option>\n            <option value="in-transit-inbound">Inbound in-transit</option>\n            <option value="in-transit-outbound">Outbound in-transit</option>\n        </cds-select>\n    '})).bind({});ValueProperty.storyName="Changing selected through value property",ValueProperty.args={selected:"in-transit-outbound"},ValueProperty.argTypes={selected:{options:["on-hand","in-transit-inbound","in-transit-outbound"],control:"select"}};const withAILabel=()=>({styles:ai_label_story_shared.J6,template:'\n        <cds-select label="Select" [decorator]="decoratorTpl">\n            <option value="a">Option A</option>\n            <option value="b">Option B</option>\n        </cds-select>\n        <ng-template #decoratorTpl>\n            <cds-ai-label\n                class="ai-label-container"\n                kind="default"\n                size="mini"\n                [autoAlign]="true"\n                [align]="\'bottom-end\'"\n                aiText="AI"\n                ariaLabel="Show information">\n                '+ai_label_story_shared.Ag+"\n            </cds-ai-label>\n        </ng-template>\n    "});Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-select\n            [skeleton]="skeleton"\n            [disabled]="disabled"\n            [readonly]="readonly"\n            [size]="size"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [label]="label"\n            [helperText]="helperText"\n            [theme]="theme"\n            [(ngModel)]="model"\n            [fluid]="fluid"\n            [display]="display"\n            [hideLabel]="hideLabel">\n            <option value="default" disabled selected hidden>Choose an option</option>\n            <option value="solong">A much longer option that is worth having around to check how text flows</option>\n            <optgroup label="Category 1">\n                <option value="option1">Option 1</option>\n                <option value="option2">Option 2</option>\n            </optgroup>\n            <optgroup label="Category 2">\n                <option value="option1">Option 1</option>\n                <option value="option2">Option 2</option>\n            </optgroup>\n        </cds-select>\n    `\n})',...Basic.parameters?.docs?.source}}},Fluid.parameters={...Fluid.parameters,docs:{...Fluid.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-select\n            [skeleton]="skeleton"\n            [disabled]="disabled"\n            [readonly]="readonly"\n            [size]="size"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [label]="label"\n            [helperText]="helperText"\n            [theme]="theme"\n            [(ngModel)]="model"\n            [fluid]="fluid"\n            [display]="display"\n            [hideLabel]="hideLabel">\n            <option value="default" disabled selected hidden>Choose an option</option>\n            <option value="solong">A much longer option that is worth having around to check how text flows</option>\n            <optgroup label="Category 1">\n                <option value="option1">Option 1</option>\n                <option value="option2">Option 2</option>\n            </optgroup>\n            <optgroup label="Category 2">\n                <option value="option1">Option 1</option>\n                <option value="option2">Option 2</option>\n            </optgroup>\n        </cds-select>\n    `\n})',...Fluid.parameters?.docs?.source}}},NgModel.parameters={...NgModel.parameters,docs:{...NgModel.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-select\n            [(ngModel)]="model"\n            [skeleton]="skeleton"\n            [disabled]="disabled"\n            [readonly]="readonly"\n            [size]="size"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [label]="label"\n            [helperText]="helperText"\n            [theme]="theme"\n            [(ngModel)]="model"\n            [fluid]="fluid"\n            [display]="display"\n            ariaLabel=\'ngModel select\'>\n            <option value="default" disabled selected hidden>Choose an option</option>\n            <option value="option1">Option 1</option>\n            <option value="option2">Option 2</option>\n            <option value="option3">Option 3</option>\n        </cds-select>\n    `\n})',...NgModel.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/select/stories/app-reactive-form.component.ts\n        --\x3e\n        <app-reactive-form></app-reactive-form>\n    `\n})",...ReactiveForms.parameters?.docs?.source}}},OptionsSelected.parameters={...OptionsSelected.parameters,docs:{...OptionsSelected.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-select label="Type">\n            <option\n                value="on-hand"\n                [selected]="selected === \'on-hand\'">\n                On hand\n            </option>\n            <option\n                value="in-transit-inbound"\n                [selected]="selected === \'in-transit-inbound\'">\n                Inbound in-transit\n            </option>\n            <option\n                value="in-transit-outbound"\n                [selected]="selected === \'in-transit-outbound\'">\n                Outbound in-transit\n            </option>\n        </cds-select>\n    `\n})',...OptionsSelected.parameters?.docs?.source}}},ValueProperty.parameters={...ValueProperty.parameters,docs:{...ValueProperty.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-select label="Type" [value]="selected">\n            <option value="on-hand">On hand</option>\n            <option value="in-transit-inbound">Inbound in-transit</option>\n            <option value="in-transit-outbound">Outbound in-transit</option>\n        </cds-select>\n    `\n})',...ValueProperty.parameters?.docs?.source}}},withAILabel.parameters={...withAILabel.parameters,docs:{...withAILabel.parameters?.docs,source:{originalSource:'() => ({\n  styles: AI_LABEL_STORY_STYLES,\n  template: `\n        <cds-select label="Select" [decorator]="decoratorTpl">\n            <option value="a">Option A</option>\n            <option value="b">Option B</option>\n        </cds-select>\n        <ng-template #decoratorTpl>\n            <cds-ai-label\n                class="ai-label-container"\n                kind="default"\n                size="mini"\n                [autoAlign]="true"\n                [align]="\'bottom-end\'"\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","Fluid","NgModel","ReactiveForms","OptionsSelected","ValueProperty","withAILabel"]}}]);