carbon-components-angular 5.72.0 → 5.72.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/combobox/combobox.component.d.ts +3 -0
- package/docs/documentation/components/ComboBox.html +214 -67
- package/docs/documentation/components/Dropdown.html +322 -134
- package/docs/documentation/components/DropdownList.html +6 -2
- package/docs/documentation/components/RadioGroup.html +166 -77
- package/docs/documentation/components/TextInputLabelComponent.html +171 -65
- package/docs/documentation/components/TextareaLabelComponent.html +142 -74
- package/docs/documentation/coverage.html +22 -22
- package/docs/documentation/directives/TextArea.html +106 -11
- package/docs/documentation/directives/TextInput.html +118 -24
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/documentation/modules/CheckboxModule/dependencies.svg +42 -42
- package/docs/documentation/modules/CheckboxModule.html +42 -42
- package/docs/documentation/modules/CodeSnippetModule/dependencies.svg +4 -4
- package/docs/documentation/modules/CodeSnippetModule.html +4 -4
- package/docs/documentation/modules/ComboBoxModule/dependencies.svg +6 -6
- package/docs/documentation/modules/ComboBoxModule.html +6 -6
- package/docs/documentation/modules/ContentSwitcherModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ContentSwitcherModule.html +4 -4
- package/docs/documentation/modules/ContextMenuModule/dependencies.svg +67 -67
- package/docs/documentation/modules/ContextMenuModule.html +67 -67
- package/docs/documentation/modules/DatePickerInputModule/dependencies.svg +4 -4
- package/docs/documentation/modules/DatePickerInputModule.html +4 -4
- package/docs/documentation/modules/DatePickerModule/dependencies.svg +6 -6
- package/docs/documentation/modules/DatePickerModule.html +6 -6
- package/docs/documentation/modules/DialogModule/dependencies.svg +33 -33
- package/docs/documentation/modules/DialogModule.html +33 -33
- package/docs/documentation/modules/DocumentationModule/dependencies.svg +4 -4
- package/docs/documentation/modules/DocumentationModule.html +4 -4
- package/docs/documentation/modules/DropdownModule/dependencies.svg +53 -53
- package/docs/documentation/modules/DropdownModule.html +53 -53
- package/docs/documentation/modules/FileUploaderModule/dependencies.svg +35 -35
- package/docs/documentation/modules/FileUploaderModule.html +35 -35
- package/docs/documentation/modules/GridModule/dependencies.svg +61 -61
- package/docs/documentation/modules/GridModule.html +61 -61
- package/docs/documentation/modules/HeaderModule/dependencies.svg +4 -4
- package/docs/documentation/modules/HeaderModule.html +4 -4
- package/docs/documentation/modules/I18nModule/dependencies.svg +13 -13
- package/docs/documentation/modules/I18nModule.html +13 -13
- package/docs/documentation/modules/InlineLoadingModule/dependencies.svg +15 -15
- package/docs/documentation/modules/InlineLoadingModule.html +15 -15
- package/docs/documentation/modules/InputModule/dependencies.svg +4 -4
- package/docs/documentation/modules/InputModule.html +4 -4
- package/docs/documentation/modules/LayerModule/dependencies.svg +4 -4
- package/docs/documentation/modules/LayerModule.html +4 -4
- package/docs/documentation/modules/MenuButtonModule/dependencies.svg +4 -4
- package/docs/documentation/modules/MenuButtonModule.html +4 -4
- package/docs/documentation/modules/ModalModule/dependencies.svg +114 -114
- package/docs/documentation/modules/ModalModule.html +114 -114
- package/docs/documentation/modules/NFormsModule/dependencies.svg +4 -4
- package/docs/documentation/modules/NFormsModule.html +4 -4
- package/docs/documentation/modules/NotificationModule/dependencies.svg +4 -4
- package/docs/documentation/modules/NotificationModule.html +4 -4
- package/docs/documentation/modules/NumberModule/dependencies.svg +25 -25
- package/docs/documentation/modules/NumberModule.html +25 -25
- package/docs/documentation/modules/PaginationModule/dependencies.svg +4 -4
- package/docs/documentation/modules/PaginationModule.html +4 -4
- package/docs/documentation/modules/PanelModule/dependencies.svg +4 -4
- package/docs/documentation/modules/PanelModule.html +4 -4
- package/docs/documentation/modules/PlaceholderModule/dependencies.svg +4 -4
- package/docs/documentation/modules/PlaceholderModule.html +4 -4
- package/docs/documentation/modules/RadioModule/dependencies.svg +4 -4
- package/docs/documentation/modules/RadioModule.html +4 -4
- package/docs/documentation/modules/SearchModule/dependencies.svg +48 -44
- package/docs/documentation/modules/SearchModule.html +48 -44
- package/docs/documentation/modules/SelectModule/dependencies.svg +4 -4
- package/docs/documentation/modules/SelectModule.html +4 -4
- package/docs/documentation/modules/SideNavModule/dependencies.svg +4 -4
- package/docs/documentation/modules/SideNavModule.html +4 -4
- package/docs/documentation/modules/SkeletonModule/dependencies.svg +4 -4
- package/docs/documentation/modules/SkeletonModule.html +4 -4
- package/docs/documentation/modules/SliderModule/dependencies.svg +26 -26
- package/docs/documentation/modules/SliderModule.html +26 -26
- package/docs/documentation/modules/StructuredListModule/dependencies.svg +43 -43
- package/docs/documentation/modules/StructuredListModule.html +43 -43
- package/docs/documentation/modules/TableModule/dependencies.svg +225 -225
- package/docs/documentation/modules/TableModule.html +225 -225
- package/docs/documentation/modules/TabsModule/dependencies.svg +136 -136
- package/docs/documentation/modules/TabsModule.html +136 -136
- package/docs/documentation/modules/TagModule/dependencies.svg +38 -38
- package/docs/documentation/modules/TagModule.html +38 -38
- package/docs/documentation/modules/ThemeModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ThemeModule.html +4 -4
- package/docs/documentation/modules/TilesModule/dependencies.svg +108 -108
- package/docs/documentation/modules/TilesModule.html +108 -108
- package/docs/documentation/modules/TimePickerModule/dependencies.svg +41 -45
- package/docs/documentation/modules/TimePickerModule.html +41 -45
- package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +46 -42
- package/docs/documentation/modules/TimePickerSelectModule.html +46 -42
- package/docs/documentation/modules/ToggleModule/dependencies.svg +7 -7
- package/docs/documentation/modules/ToggleModule.html +7 -7
- package/docs/documentation/modules/TooltipModule/dependencies.svg +28 -28
- package/docs/documentation/modules/TooltipModule.html +28 -28
- package/docs/documentation/modules/TreeviewModule/dependencies.svg +28 -28
- package/docs/documentation/modules/TreeviewModule.html +28 -28
- package/docs/documentation.json +510 -362
- package/docs/storybook/1345.da6e3dec.iframe.bundle.js +1 -0
- package/docs/storybook/3224.14e2c79a.iframe.bundle.js +1 -0
- package/docs/storybook/557.d4341469.iframe.bundle.js +1 -0
- package/docs/storybook/7019.75ad5817.iframe.bundle.js +2 -0
- package/docs/storybook/955.7522f55b.iframe.bundle.js +1 -0
- package/docs/storybook/combobox-combobox-stories.e3d08f7d.iframe.bundle.js +1 -0
- package/docs/storybook/dropdown-dropdown-stories.cf59b2ab.iframe.bundle.js +1 -0
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/{input-input-stories.85a9e65e.iframe.bundle.js → input-input-stories.8bf34960.iframe.bundle.js} +1 -1
- package/docs/storybook/{input-textarea-stories.77240fb3.iframe.bundle.js → input-textarea-stories.ad775432.iframe.bundle.js} +1 -1
- package/docs/storybook/main.a1247bb8.iframe.bundle.js +1 -0
- package/docs/storybook/modal-modal-stories.cc2d04cb.iframe.bundle.js +1 -0
- package/docs/storybook/{pagination-pagination-nav-stories.547eede3.iframe.bundle.js → pagination-pagination-nav-stories.01637d11.iframe.bundle.js} +1 -1
- package/docs/storybook/{pagination-pagination-stories.fa7c9094.iframe.bundle.js → pagination-pagination-stories.40d17ebd.iframe.bundle.js} +1 -1
- package/docs/storybook/{patterns-filtering-single-selection-stories.ec91f833.iframe.bundle.js → patterns-filtering-multi-selection-stories.a46a1d6e.iframe.bundle.js} +1 -1
- package/docs/storybook/{patterns-filtering-multiple-categories-stories.531f27d7.iframe.bundle.js → patterns-filtering-multiple-categories-stories.740c719e.iframe.bundle.js} +1 -1
- package/docs/storybook/{patterns-filtering-multi-selection-stories.9086f77f.iframe.bundle.js → patterns-filtering-single-selection-stories.cc647b4a.iframe.bundle.js} +1 -1
- package/docs/storybook/{patterns-forms-multi-step-form-stories.8696062a.iframe.bundle.js → patterns-forms-multi-step-form-stories.2ea46e56.iframe.bundle.js} +1 -1
- package/docs/storybook/{patterns-loading-large-loading-stories.734fb9bc.iframe.bundle.js → patterns-loading-large-loading-stories.e6ae3e31.iframe.bundle.js} +1 -1
- package/docs/storybook/{patterns-loading-progressive-loading-stories.10bcf9f2.iframe.bundle.js → patterns-loading-progressive-loading-stories.63165c09.iframe.bundle.js} +1 -1
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/radio-radio-stories.8ff73370.iframe.bundle.js +1 -0
- package/docs/storybook/runtime~main.b11c471e.iframe.bundle.js +1 -0
- package/dropdown/dropdown.component.d.ts +8 -1
- package/dropdown/list/dropdown-list.component.d.ts +1 -1
- package/esm2020/combobox/combobox.component.mjs +19 -9
- package/esm2020/dropdown/dropdown.component.mjs +31 -15
- package/esm2020/dropdown/list/dropdown-list.component.mjs +1 -1
- package/esm2020/input/input.directive.mjs +11 -5
- package/esm2020/input/text-area.directive.mjs +11 -5
- package/esm2020/input/text-input-label.component.mjs +38 -15
- package/esm2020/input/textarea-label.component.mjs +46 -21
- package/esm2020/radio/radio-group.component.mjs +19 -7
- package/fesm2015/carbon-components-angular-combobox.mjs +18 -8
- package/fesm2015/carbon-components-angular-combobox.mjs.map +1 -1
- package/fesm2015/carbon-components-angular-dropdown.mjs +31 -14
- package/fesm2015/carbon-components-angular-dropdown.mjs.map +1 -1
- package/fesm2015/carbon-components-angular-input.mjs +112 -46
- package/fesm2015/carbon-components-angular-input.mjs.map +1 -1
- package/fesm2015/carbon-components-angular-radio.mjs +18 -6
- package/fesm2015/carbon-components-angular-radio.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-combobox.mjs +18 -8
- package/fesm2020/carbon-components-angular-combobox.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-dropdown.mjs +30 -14
- package/fesm2020/carbon-components-angular-dropdown.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-input.mjs +102 -45
- package/fesm2020/carbon-components-angular-input.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-radio.mjs +18 -6
- package/fesm2020/carbon-components-angular-radio.mjs.map +1 -1
- package/input/input.directive.d.ts +4 -1
- package/input/text-area.directive.d.ts +4 -1
- package/input/text-input-label.component.d.ts +9 -5
- package/input/textarea-label.component.d.ts +5 -3
- package/package.json +1 -1
- package/radio/radio-group.component.d.ts +4 -2
- package/docs/storybook/1250.47c381c1.iframe.bundle.js +0 -1
- package/docs/storybook/1345.9ccf4f3f.iframe.bundle.js +0 -1
- package/docs/storybook/3224.3e279e46.iframe.bundle.js +0 -1
- package/docs/storybook/7019.b8944046.iframe.bundle.js +0 -2
- package/docs/storybook/955.99b6ac85.iframe.bundle.js +0 -1
- package/docs/storybook/combobox-combobox-stories.e7427226.iframe.bundle.js +0 -1
- package/docs/storybook/dropdown-dropdown-stories.a76101be.iframe.bundle.js +0 -1
- package/docs/storybook/main.cdbf1814.iframe.bundle.js +0 -1
- package/docs/storybook/modal-modal-stories.0a864a6a.iframe.bundle.js +0 -1
- package/docs/storybook/radio-radio-stories.444fc044.iframe.bundle.js +0 -1
- package/docs/storybook/runtime~main.e32f2dfb.iframe.bundle.js +0 -1
- /package/docs/storybook/{7019.b8944046.iframe.bundle.js.LICENSE.txt → 7019.75ad5817.iframe.bundle.js.LICENSE.txt} +0 -0
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[2388],{"./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/common/tab.service.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{X9:()=>tabbableSelectorIgnoreTabIndex,ZW:()=>getFocusElementList,jv:()=>isFocusInLastItem,nW:()=>cycleTabs,o$:()=>tabbableSelector,w3:()=>isFocusInFirstItem});let tabbableSelector="a[href], area[href], input:not([disabled]):not([tabindex='-1']), button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']), textarea:not([disabled]):not([tabindex='-1']), iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true]",tabbableSelectorIgnoreTabIndex="a[href], area[href], input:not([disabled]), button:not([disabled]),select:not([disabled]), textarea:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable=true]";function getFocusElementList(element,selector=tabbableSelector){let elements=element.querySelectorAll(selector);return elements?Array.prototype.filter.call(elements,(el=>function isVisible(element){return!!(element.offsetWidth||element.offsetHeight||element.getClientRects().length)}(el))):elements}function isFocusInFirstItem(event,list){return list.length>0&&(event.target||event.srcElement)===list[0]}function isFocusInLastItem(event,list){return list.length>0&&(event.target||event.srcElement)===list[list.length-1]}function cycleTabs(event,element){if("Tab"===event.key){let list=getFocusElementList(element),focusChanged=!1;event.shiftKey?(isFocusInFirstItem(event,list)||function isElementFocused(event,element){return(event.target||event.srcElement)===element}(event,element))&&(focusChanged=function focusLastFocusableElement(list){return list.length>0&&(list[list.length-1].focus(),!0)}(list)):isFocusInLastItem(event,list)&&(focusChanged=function focusFirstFocusableElement(list){return list.length>0&&(list[0].focus(),!0)}(list)),focusChanged&&(event.preventDefault(),event.stopPropagation())}}},"./src/experimental/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{OV:()=>ExperimentalModule,tM:()=>ExperimentalService});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let ExperimentalService=class ExperimentalService{constructor(){this.experiments=new Map}addExperiment(name,options={enabled:!1}){this.experiments.has(name)||this.experiments.set(name,options)}enableExperiment(name){this.getExperiment(name).enabled=!0}disableExperiment(name){this.getExperiment(name).enabled=!1}getExperiment(name){return this.experiments.has(name)?this.experiments.get(name):(this.addExperiment(name),this.getExperiment(name))}getExperiments(){return Array.from(this.experiments.entries())}};ExperimentalService=(0,tslib_es6.gn)([(0,core.Injectable)()],ExperimentalService);const EXPERIMENTAL_SERVICE_PROVIDER={provide:ExperimentalService,deps:[[new core.Optional,new core.SkipSelf,ExperimentalService]],useFactory:function EXPERIMENTAL_SERVICE_PROVIDER_FACTORY(parentService){return parentService||new ExperimentalService}};let ExperimentalModule=class ExperimentalModule{};ExperimentalModule=(0,tslib_es6.gn)([(0,core.NgModule)({providers:[ExperimentalService,EXPERIMENTAL_SERVICE_PROVIDER]})],ExperimentalModule)},"./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/placeholder/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Qq:()=>PlaceholderModule,Q_:()=>PlaceholderService});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let PlaceholderService=class PlaceholderService{constructor(){this.viewContainerRef=null,this.viewContainerMap=new Map}registerViewContainerRef(vcRef,id){id?this.viewContainerMap.set(id,vcRef):this.viewContainerRef=vcRef}createComponent(component,injector,id,environment){return id?this.viewContainerMap.has(id)?this.viewContainerMap.get(id).createComponent(component,{index:this.viewContainerMap.size,injector}):void console.error(`No view container with id ${id} found`):this.viewContainerRef?this.viewContainerRef.createComponent(component,{index:this.viewContainerRef.length,injector,environmentInjector:environment}):void console.error("No view container defined! Likely due to a missing `cds-placeholder`")}destroyComponent(component){component.destroy()}hasComponentRef(component,id){return id?!(this.viewContainerMap.get(id).indexOf(component.hostView)<0):!(this.viewContainerRef.indexOf(component.hostView)<0)}hasPlaceholderRef(id){return id?this.viewContainerMap.has(id):!!this.viewContainerRef}appendElement(element,id){return id?this.viewContainerMap.get(id).element.nativeElement.appendChild(element):this.viewContainerRef.element.nativeElement.appendChild(element)}removeElement(element,id){return id?this.viewContainerMap.get(id).element.nativeElement.removeChild(element):this.viewContainerRef.element.nativeElement.removeChild(element)}hasElement(element,id){return id?this.viewContainerMap.get(id).element.nativeElement.contains(element):this.viewContainerRef.element.nativeElement.contains(element)}};PlaceholderService=(0,tslib_es6.gn)([(0,core.Injectable)()],PlaceholderService);let Placeholder=class Placeholder{constructor(placeholderService){this.placeholderService=placeholderService}ngOnInit(){this.placeholderService.registerViewContainerRef(this.viewContainerRef)}};Placeholder.ctorParameters=()=>[{type:PlaceholderService}],Placeholder.propDecorators={id:[{type:core.Input}],viewContainerRef:[{type:core.ViewChild,args:["placeholder",{read:core.ViewContainerRef,static:!0}]}]},Placeholder=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-placeholder, ibm-placeholder",template:"<div #placeholder></div>"})],Placeholder);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");const PLACEHOLDER_SERVICE_PROVIDER={provide:PlaceholderService,deps:[[new core.Optional,new core.SkipSelf,PlaceholderService]],useFactory:function PLACEHOLDER_SERVICE_PROVIDER_FACTORY(parentService){return parentService||new PlaceholderService}};let PlaceholderModule=class PlaceholderModule{};PlaceholderModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Placeholder],exports:[Placeholder],providers:[PLACEHOLDER_SERVICE_PROVIDER],imports:[common.CommonModule]})],PlaceholderModule)},"./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/modal/modal.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,DataPassing:()=>DataPassing,FormModal:()=>FormModal,Passive:()=>Passive,Simple:()=>Simple,Transactional:()=>Transactional,__namedExportsOrder:()=>__namedExportsOrder,composedWithAILabel:()=>composedWithAILabel,default:()=>modal_stories,withAILabel:()=>withAILabel});var dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),placeholder=__webpack_require__("./src/placeholder/index.ts"),input=__webpack_require__("./src/input/index.ts"),src_button=__webpack_require__("./src/button/index.ts"),icon=__webpack_require__("./src/icon/index.ts"),modal=__webpack_require__("./src/modal/index.ts"),ai_label=__webpack_require__("./src/ai-label/index.ts"),ai_label_story_shared=__webpack_require__("./src/storybook/ai-label-story-shared.ts"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let AlertModalStory=class AlertModalStory{constructor(modalService){this.modalService=modalService}openModal(){this.modalService.show({type:this.modalType,label:this.modalLabel,title:this.modalTitle,content:this.modalContent,size:this.size,buttons:this.buttons,showCloseButton:this.showCloseButton})}};AlertModalStory.ctorParameters=()=>[{type:modal.Z7}],AlertModalStory.propDecorators={modalType:[{type:core.Input}],modalLabel:[{type:core.Input}],modalTitle:[{type:core.Input}],modalContent:[{type:core.Input}],buttons:[{type:core.Input}],size:[{type:core.Input}],showCloseButton:[{type:core.Input}]},AlertModalStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-alert-modal-story",template:'\n\t\t<button class="cds--btn cds--btn--primary" (click)="openModal()">Open Modal</button>\n\t'})],AlertModalStory);var Subject=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Subject.js");let InputModal=class InputModal extends modal.IX{constructor(modalText,size,data,inputValue,modalService){super(),this.modalText=modalText,this.size=size,this.data=data,this.inputValue=inputValue,this.modalService=modalService}onChange(event){this.data.next(event.target.value)}};InputModal.ctorParameters=()=>[{type:void 0,decorators:[{type:core.Inject,args:["modalText"]}]},{type:void 0,decorators:[{type:core.Inject,args:["size"]}]},{type:void 0,decorators:[{type:core.Inject,args:["data"]}]},{type:void 0,decorators:[{type:core.Inject,args:["inputValue"]}]},{type:modal.Z7}],InputModal=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-input-modal",template:'\n\t\t<cds-modal\n\t\t\t[size]="size"\n\t\t\t[open]="open"\n\t\t\t(overlaySelected)="closeModal()">\n\t\t\t<cds-modal-header (closeSelect)="closeModal()">Edit account name</cds-modal-header>\n\t\t\t<section class="cds--modal-content">\n\t\t\t\t<cds-label>\n\t\t\t\t\tAccount name\n\t\t\t\t\t<input\n\t\t\t\t\t\tcdsText\n\t\t\t\t\t\t[value]="inputValue"\n\t\t\t\t\t\t(change)="onChange($event)">\n\t\t\t\t</cds-label>\n\t\t\t</section>\n\t\t\t<cds-modal-footer>\n\t\t\t\t<button class="cds--btn cds--btn--secondary" (click)="closeModal()">Cancel</button>\n\t\t\t\t<button class="cds--btn cds--btn--primary" modal-primary-focus (click)="closeModal()">Save</button>\n\t\t\t</cds-modal-footer>\n\t\t</cds-modal>\n\t'})],InputModal);let DataPassingModal=class DataPassingModal{constructor(modalService){this.modalService=modalService,this.modalText="Hello, World",this.size="md",this.modalInputValue="",this.data=new Subject.x}openModal(){this.modalService.create({component:InputModal,inputs:{modalText:this.modalText,inputValue:this.modalInputValue,size:this.size,data:this.data}})}ngAfterContentInit(){this.data.subscribe((value=>this.modalInputValue=value))}};DataPassingModal.ctorParameters=()=>[{type:modal.Z7}],DataPassingModal.propDecorators={modalText:[{type:core.Input}],size:[{type:core.Input}]},DataPassingModal=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-data-passing-modal",template:'\n\t\t<button class="cds--btn cds--btn--primary" (click)="openModal()">Open Modal</button>\n\t\t<h3>Data passed from input modal on input change: </h3>{{ modalInputValue }}\n\t'})],DataPassingModal);let SampleFormModal=class SampleFormModal extends modal.IX{};SampleFormModal=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-form-modal",template:'\n\t\t<cds-modal\n\t\t\tsize="lg"\n\t\t\topen="true"\n\t\t\t(overlaySelected)="closeModal()">\n\t\t\t<cds-modal-header (closeSelect)="closeModal()">\n\t\t\t\t<h2 cdsModalHeaderLabel>Label</h2>\n\t\t\t\t<h3 cdsModalHeaderHeading>Modal</h3>\n\t\t\t</cds-modal-header>\n\t\t\t<section cdsModalContent hasForm="true">\n\t\t\t\t<h1 cdsModalContentText class="cds--modal-content__regular-content modal-text">\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis finibus erat vel aliquam sodales.\n\t\t\t\t\tPhasellus porta velit vel libero pulvinar, sit amet semper purus volutpat.\n\t\t\t\t</h1>\n\t\t\t\t<div class="cds--text-input__field-wrapper">\n\t\t\t\t\t<cds-label helperText="Helper text">\n\t\t\t\t\t\t{{label}}\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tcdsText\n\t\t\t\t\t\t\tplaceholder="Placeholder"\n\t\t\t\t\t\t\t[autocomplete]="false">\n\t\t\t\t\t</cds-label>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t\t<cds-modal-footer>\n\t\t\t\t<button class="cds--btn cds--btn--secondary" (click)="closeModal()">Show secondary modal</button>\n\t\t\t\t<button class="cds--btn cds--btn--primary" modal-primary-focus (click)="closeModal()">Close</button>\n\t\t\t</cds-modal-footer>\n\t\t</cds-modal>\n\t',styles:["\n\t\t.modal-text {\n\t\t\tmargin-bottom: 30px;\n\t\t}\n\t"]})],SampleFormModal);let SampleModal=class SampleModal extends modal.IX{constructor(modalText,size,isFullWidth,showCloseButton=!0,modalService){super(),this.modalText=modalText,this.size=size,this.isFullWidth=isFullWidth,this.showCloseButton=showCloseButton,this.modalService=modalService}showSecondaryModal(){this.modalService.show({label:"Secondary header label",title:"Sample secondary modal works.",content:this.modalText,size:this.size,buttons:[{text:"Cancel",type:modal.JF.secondary},{text:"OK",type:modal.JF.primary,click:()=>alert("OK button clicked")}]})}};SampleModal.ctorParameters=()=>[{type:void 0,decorators:[{type:core.Inject,args:["modalText"]}]},{type:void 0,decorators:[{type:core.Inject,args:["size"]}]},{type:void 0,decorators:[{type:core.Inject,args:["isFullWidth"]}]},{type:void 0,decorators:[{type:core.Inject,args:["showCloseButton"]}]},{type:modal.Z7}],SampleModal=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-sample-modal",template:'\n\t\t<cds-modal\n\t\t\t[size]="size"\n\t\t\t[open]="open"\n\t\t\t[isFullWidth]="isFullWidth"\n\t\t\t(overlaySelected)="closeModal()">\n\t\t\t<cds-modal-header (closeSelect)="closeModal()" [showCloseButton]="showCloseButton">\n\t\t\t\t<h2 cdsModalHeaderLabel>Label</h2>\n\t\t\t\t<h3 cdsModalHeaderHeading>Modal</h3>\n\t\t\t</cds-modal-header>\n\t\t\t<section cdsModalContent>\n\t\t\t\t<h1>Sample modal works.</h1>\n\t\t\t\t<p cdsModalContentText>{{modalText}}</p>\n\t\t\t</section>\n\t\t\t<cds-modal-footer>\n\t\t\t\t<button class="cds--btn cds--btn--secondary" (click)="showSecondaryModal()">Show secondary modal</button>\n\t\t\t\t<button class="cds--btn cds--btn--primary" modal-primary-focus (click)="closeModal()">Close</button>\n\t\t\t</cds-modal-footer>\n\t\t</cds-modal>\n\t'})],SampleModal);let ModalStory=class ModalStory{constructor(modalService){this.modalService=modalService,this.modalText="Hello, World",this.size="md",this.showCloseButton=!0,this.isFullWidth=!1}openModal(){this.modalService.create({component:SampleModal,inputs:{modalText:this.modalText,size:this.size,showCloseButton:this.showCloseButton,isFullWidth:this.isFullWidth,ariaLabelledby:this.ariaLabelledby}})}};ModalStory.ctorParameters=()=>[{type:modal.Z7}],ModalStory.propDecorators={modalText:[{type:core.Input}],size:[{type:core.Input}],showCloseButton:[{type:core.Input}],isFullWidth:[{type:core.Input}],ariaLabelledby:[{type:core.Input}]},ModalStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-modal-story",template:'\n\t\t<button class="cds--btn cds--btn--primary" (click)="openModal()">Open Modal</button>\n\t'})],ModalStory);const modal_stories={title:"Components/Modal",decorators:[(0,dist.moduleMetadata)({declarations:[ModalStory,SampleModal,InputModal,DataPassingModal,AlertModalStory,SampleFormModal],imports:[modal.zk,input.gP,src_button.hJ,icon.QX,placeholder.Qq,ai_label.uV]})]},Basic=(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/modal/stories/modal.component.ts\n --\x3e\n <app-modal-story\n [modalText]="modalText"\n [size]="size"\n [showCloseButton]="showCloseButton"\n [isFullWidth]="isFullWidth"\n [ariaLabelledby]="ariaLabelledby">\n </app-modal-story>\n <cds-placeholder></cds-placeholder>\n '})).bind({});Basic.args={modalText:"Hello, world!",showCloseButton:!0,isFullWidth:!1,ariaLabelledby:"sample-modal-heading"};const FormModal=(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/modal/stories/form-modal.component.ts\n --\x3e\n <app-form-modal></app-form-modal>\n "})).bind({}),Transactional=(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/modal/stories/alert-modal.component.ts\n --\x3e\n <app-alert-modal-story\n [modalType]="modalType"\n [modalLabel]="modalLabel"\n [modalTitle]="modalTitle"\n [modalContent]="modalContent"\n [size]="size"\n [showCloseButton]="showCloseButton"\n [buttons]="buttons">\n </app-alert-modal-story>\n <cds-placeholder></cds-placeholder>\n '})).bind({});Transactional.args={modalLabel:"Optional label",modalTitle:"Delete service from application",modalContent:"Are you sure you want to remove the Speech to Text service from the node-test app?",showCloseButton:!0,buttons:[{text:"Cancel",type:"Secondary"},{text:"Delete",type:"primary",click:()=>{alert("Delete button clicked!")}}]};const Passive=(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/modal/stories/alert-modal.component.ts\n --\x3e\n <app-alert-modal-story\n [modalType]="modalType"\n [modalLabel]="modalLabel"\n [modalTitle]="modalTitle"\n [size]="size"\n [modalContent]="modalContent">\n </app-alert-modal-story>\n <cds-placeholder></cds-placeholder>\n '})).bind({});Passive.args={modalLabel:"Optional label",modalTitle:"Delete service from application",modalContent:"Are you sure you want to remove the Speech to Text service from the node-test app?",modalType:"default"},Passive.argTypes={modalType:{options:["default","danger"],control:"select"}};const DataPassing=(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/modal/stories/data-passing.component.ts\n --\x3e\n <app-data-passing-modal\n [modalText]="modalText"\n [size]="size">\n </app-data-passing-modal>\n <cds-placeholder></cds-placeholder>\n '})).bind({});DataPassing.args={modalText:"Hello, world!",size:"md"},DataPassing.argTypes={size:{options:["xs","sm","md","lg"],control:"select"}};const Simple=(args=>({props:args,template:'\n <button #trigger cdsButton="primary" (click)="open = true">Open</button>\n <cds-modal [open]="open" [trigger]="trigger" (overlaySelected)="open = false" (close)="open = false">\n <cds-modal-header (closeSelect)="open = false" [showCloseButton]="showCloseButton">\n <p class="cds--modal-header__label cds--type-delta">No service required</p>\n <p class="cds--modal-header__heading cds--type-beta">A very simple modal</p>\n </cds-modal-header>\n <div class="cds--modal-content">\n <p>hello world</p>\n </div>\n <cds-modal-footer>\n <ng-container>\n <button\n cdsButton="primary"\n (click)="open = false"\n [attr.modal-primary-focus]="true">\n Okay\n </button>\n </ng-container>\n </cds-modal-footer>\n </cds-modal>\n '})).bind({});Simple.args={open:!0,showCloseButton:!0};const withAILabel=(args=>({props:args,styles:ai_label_story_shared.J6,template:'\n <cds-modal\n [open]="open"\n [decorator]="decoratorTpl"\n (overlaySelected)="open = false"\n (close)="open = false">\n <cds-modal-header [decorator]="decoratorTpl" (closeSelect)="open = false" [showCloseButton]="showCloseButton">\n <p class="cds--modal-header__heading cds--type-beta">Modal with decorator</p>\n </cds-modal-header>\n <div class="cds--modal-content">\n <p>Decorators apply <code>cds--modal--decorator</code> on the overlay.</p>\n </div>\n <cds-modal-footer>\n <button cdsButton="primary" (click)="open = false" [attr.modal-primary-focus]="true">Close</button>\n </cds-modal-footer>\n </cds-modal>\n <ng-template #decoratorTpl>\n <cds-ai-label\n class="ai-label-container"\n kind="default"\n size="sm"\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={open:!0,showCloseButton:!0};const composedWithAILabel=(args=>({props:args,styles:[...ai_label_story_shared.J6,"\n .ai-label-modal .cds--form-item {\n margin-top: 1rem;\n }\n "],template:'\n <div class="ai-label-modal">\n <button #launchBtn cdsButton="primary" (click)="open = true">Launch composed modal</button>\n <cds-modal\n [open]="open"\n [decorator]="decoratorTpl"\n [trigger]="launchBtn"\n (overlaySelected)="open = false"\n (close)="open = false">\n <cds-modal-header [decorator]="decoratorTpl" (closeSelect)="open = false" [showCloseButton]="showCloseButton">\n <p class="cds--modal-header__label cds--type-delta">Account resources</p>\n <p class="cds--modal-header__heading cds--type-beta">Add a custom domain</p>\n </cds-modal-header>\n <div class="cds--modal-content">\n <p style="margin-bottom: 1rem">\n Custom domains direct requests for your apps in this Cloud Foundry\n organization to a URL that you own. A custom domain can be a\n shared domain, a shared subdomain, or a shared domain and host.\n </p>\n <p style="margin-bottom: 1rem">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus\n eu nibh odio. Nunc a consequat est, id porttitor sapien.\n </p>\n <cds-text-label>\n Domain name\n <input\n cdsText\n id="text-input-1"\n placeholder="e.g. github.com"\n modal-primary-focus />\n </cds-text-label>\n <label class="cds--label" style="display:block;margin-top:1rem">\n Region\n <select class="cds--select-input" style="display:block;width:100%;margin-top:0.25rem">\n <option value="us-south">US South</option>\n <option value="us-east">US East</option>\n </select>\n </label>\n </div>\n <cds-modal-footer>\n <button cdsButton="secondary" (click)="open = false">Cancel</button>\n <button cdsButton="primary" (click)="open = false">Save</button>\n </cds-modal-footer>\n </cds-modal>\n </div>\n <ng-template #decoratorTpl>\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 "})).bind({});composedWithAILabel.storyName="Composed with AI label",composedWithAILabel.args={open:!0,showCloseButton:!0},Basic.parameters={...Basic.parameters,docs:{...Basic.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/modal/stories/modal.component.ts\n --\x3e\n <app-modal-story\n [modalText]="modalText"\n [size]="size"\n [showCloseButton]="showCloseButton"\n [isFullWidth]="isFullWidth"\n [ariaLabelledby]="ariaLabelledby">\n </app-modal-story>\n <cds-placeholder></cds-placeholder>\n `\n})',...Basic.parameters?.docs?.source}}},FormModal.parameters={...FormModal.parameters,docs:{...FormModal.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/modal/stories/form-modal.component.ts\n --\x3e\n <app-form-modal></app-form-modal>\n `\n})",...FormModal.parameters?.docs?.source}}},Transactional.parameters={...Transactional.parameters,docs:{...Transactional.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/modal/stories/alert-modal.component.ts\n --\x3e\n <app-alert-modal-story\n [modalType]="modalType"\n [modalLabel]="modalLabel"\n [modalTitle]="modalTitle"\n [modalContent]="modalContent"\n [size]="size"\n [showCloseButton]="showCloseButton"\n [buttons]="buttons">\n </app-alert-modal-story>\n <cds-placeholder></cds-placeholder>\n `\n})',...Transactional.parameters?.docs?.source}}},Passive.parameters={...Passive.parameters,docs:{...Passive.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/modal/stories/alert-modal.component.ts\n --\x3e\n <app-alert-modal-story\n [modalType]="modalType"\n [modalLabel]="modalLabel"\n [modalTitle]="modalTitle"\n [size]="size"\n [modalContent]="modalContent">\n </app-alert-modal-story>\n <cds-placeholder></cds-placeholder>\n `\n})',...Passive.parameters?.docs?.source}}},DataPassing.parameters={...DataPassing.parameters,docs:{...DataPassing.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/modal/stories/data-passing.component.ts\n --\x3e\n <app-data-passing-modal\n [modalText]="modalText"\n [size]="size">\n </app-data-passing-modal>\n <cds-placeholder></cds-placeholder>\n `\n})',...DataPassing.parameters?.docs?.source}}},Simple.parameters={...Simple.parameters,docs:{...Simple.parameters?.docs,source:{originalSource:'args => ({\n props: args,\n template: `\n <button #trigger cdsButton="primary" (click)="open = true">Open</button>\n <cds-modal [open]="open" [trigger]="trigger" (overlaySelected)="open = false" (close)="open = false">\n <cds-modal-header (closeSelect)="open = false" [showCloseButton]="showCloseButton">\n <p class="cds--modal-header__label cds--type-delta">No service required</p>\n <p class="cds--modal-header__heading cds--type-beta">A very simple modal</p>\n </cds-modal-header>\n <div class="cds--modal-content">\n <p>hello world</p>\n </div>\n <cds-modal-footer>\n <ng-container>\n <button\n cdsButton="primary"\n (click)="open = false"\n [attr.modal-primary-focus]="true">\n Okay\n </button>\n </ng-container>\n </cds-modal-footer>\n </cds-modal>\n `\n})',...Simple.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 <cds-modal\n [open]="open"\n [decorator]="decoratorTpl"\n (overlaySelected)="open = false"\n (close)="open = false">\n <cds-modal-header [decorator]="decoratorTpl" (closeSelect)="open = false" [showCloseButton]="showCloseButton">\n <p class="cds--modal-header__heading cds--type-beta">Modal with decorator</p>\n </cds-modal-header>\n <div class="cds--modal-content">\n <p>Decorators apply <code>cds--modal--decorator</code> on the overlay.</p>\n </div>\n <cds-modal-footer>\n <button cdsButton="primary" (click)="open = false" [attr.modal-primary-focus]="true">Close</button>\n </cds-modal-footer>\n </cds-modal>\n <ng-template #decoratorTpl>\n <cds-ai-label\n class="ai-label-container"\n kind="default"\n size="sm"\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}}},composedWithAILabel.parameters={...composedWithAILabel.parameters,docs:{...composedWithAILabel.parameters?.docs,source:{originalSource:'args => ({\n props: args,\n styles: [...AI_LABEL_STORY_STYLES, `\n .ai-label-modal .cds--form-item {\n margin-top: 1rem;\n }\n `],\n template: `\n <div class="ai-label-modal">\n <button #launchBtn cdsButton="primary" (click)="open = true">Launch composed modal</button>\n <cds-modal\n [open]="open"\n [decorator]="decoratorTpl"\n [trigger]="launchBtn"\n (overlaySelected)="open = false"\n (close)="open = false">\n <cds-modal-header [decorator]="decoratorTpl" (closeSelect)="open = false" [showCloseButton]="showCloseButton">\n <p class="cds--modal-header__label cds--type-delta">Account resources</p>\n <p class="cds--modal-header__heading cds--type-beta">Add a custom domain</p>\n </cds-modal-header>\n <div class="cds--modal-content">\n <p style="margin-bottom: 1rem">\n Custom domains direct requests for your apps in this Cloud Foundry\n organization to a URL that you own. A custom domain can be a\n shared domain, a shared subdomain, or a shared domain and host.\n </p>\n <p style="margin-bottom: 1rem">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus\n eu nibh odio. Nunc a consequat est, id porttitor sapien.\n </p>\n <cds-text-label>\n Domain name\n <input\n cdsText\n id="text-input-1"\n placeholder="e.g. github.com"\n modal-primary-focus />\n </cds-text-label>\n <label class="cds--label" style="display:block;margin-top:1rem">\n Region\n <select class="cds--select-input" style="display:block;width:100%;margin-top:0.25rem">\n <option value="us-south">US South</option>\n <option value="us-east">US East</option>\n </select>\n </label>\n </div>\n <cds-modal-footer>\n <button cdsButton="secondary" (click)="open = false">Cancel</button>\n <button cdsButton="primary" (click)="open = false">Save</button>\n </cds-modal-footer>\n </cds-modal>\n </div>\n <ng-template #decoratorTpl>\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 `\n})',...composedWithAILabel.parameters?.docs?.source}}};const __namedExportsOrder=["Basic","FormModal","Transactional","Passive","DataPassing","Simple","withAILabel","composedWithAILabel"]}}]);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"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"]}}]);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
(()=>{"use strict";var deferred,leafPrototypes,getProto,inProgress,__webpack_modules__={},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(void 0!==cachedModule)return cachedModule.exports;var module=__webpack_module_cache__[moduleId]={id:moduleId,loaded:!1,exports:{}};return __webpack_modules__[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}__webpack_require__.m=__webpack_modules__,__webpack_require__.amdO={},deferred=[],__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(!chunkIds){var notFulfilled=1/0;for(i=0;i<deferred.length;i++){for(var[chunkIds,fn,priority]=deferred[i],fulfilled=!0,j=0;j<chunkIds.length;j++)(!1&priority||notFulfilled>=priority)&&Object.keys(__webpack_require__.O).every((key=>__webpack_require__.O[key](chunkIds[j])))?chunkIds.splice(j--,1):(fulfilled=!1,priority<notFulfilled&&(notFulfilled=priority));if(fulfilled){deferred.splice(i--,1);var r=fn();void 0!==r&&(result=r)}}return result}priority=priority||0;for(var i=deferred.length;i>0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority]},__webpack_require__.n=module=>{var getter=module&&module.__esModule?()=>module.default:()=>module;return __webpack_require__.d(getter,{a:getter}),getter},getProto=Object.getPrototypeOf?obj=>Object.getPrototypeOf(obj):obj=>obj.__proto__,__webpack_require__.t=function(value,mode){if(1&mode&&(value=this(value)),8&mode)return value;if("object"==typeof value&&value){if(4&mode&&value.__esModule)return value;if(16&mode&&"function"==typeof value.then)return value}var ns=Object.create(null);__webpack_require__.r(ns);var def={};leafPrototypes=leafPrototypes||[null,getProto({}),getProto([]),getProto(getProto)];for(var current=2&mode&&value;"object"==typeof current&&!~leafPrototypes.indexOf(current);current=getProto(current))Object.getOwnPropertyNames(current).forEach((key=>def[key]=()=>value[key]));return def.default=()=>value,__webpack_require__.d(ns,def),ns},__webpack_require__.d=(exports,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports,key)&&Object.defineProperty(exports,key,{enumerable:!0,get:definition[key]})},__webpack_require__.f={},__webpack_require__.e=chunkId=>Promise.all(Object.keys(__webpack_require__.f).reduce(((promises,key)=>(__webpack_require__.f[key](chunkId,promises),promises)),[])),__webpack_require__.u=chunkId=>(({140:"dialog-overflow-menu-overflow-menu-stories",210:"list-list-stories",384:"grid-css-grid-stories",459:"tabs-tabs-stories",653:"combo-button-combo-button-stories",703:"toggletip-toggletip-stories",799:"pagination-pagination-stories",911:"button-button-stories",933:"table-table-stories",972:"patterns-loading-large-loading-stories",1127:"search-search-stories",1928:"accordion-accordion-stories",2218:"inline-loading-inline-loading-stories",2342:"radio-radio-stories",2371:"timepicker-timepicker-stories",2388:"modal-modal-stories",2399:"input-textarea-stories",2489:"toggle-toggle-stories",2494:"loading-loading-stories",2573:"grid-grid-stories",2722:"context-menu-context-menu-stories",2969:"pagination-pagination-nav-stories",3046:"input-password-stories",3280:"tiles-tiles-stories",3314:"patterns-filtering-multiple-categories-stories",3329:"checkbox-checkbox-stories",3402:"tiles-expandable-tile-stories",3523:"contained-list-contained-list-stories",3610:"patterns-filtering-single-selection-stories",3719:"tiles-clickable-tile-stories",3858:"code-snippet-code-snippet-stories",3867:"tag-tag-stories",3957:"table-table-ai-label-stories",3987:"tabs-tabs-approaches-header-group-stories",4232:"patterns-forms-multi-step-form-stories",4253:"tooltip-tooltip-stories",4277:"patterns-dialogs-modal-with-table-stories",4391:"content-switcher-content-switcher-stories",4731:"icon-icon-stories",4762:"patterns-filtering-multi-selection-stories",5167:"button-icon-button-stories",5368:"number-input-number-stories",5455:"layer-layer-stories",5808:"progress-bar-progress-bar-stories",5980:"select-select-stories",6026:"slider-slider-stories",6085:"aspect-ratio-aspect-ratio-stories",6115:"theme-theme-stories",6274:"tooltip-definition-tooptip-stories",6310:"file-uploader-file-uploader-stories",6322:"popover-popover-stories",6456:"treeview-treeview-stories",6634:"link-link-stories",6663:"datepicker-datepicker-stories",6842:"breadcrumb-breadcrumb-stories",6943:"input-input-stories",6981:"file-uploader-file-stories",7081:"layout-stack-stories",7235:"index-stories",7291:"structured-list-structured-list-stories",7840:"patterns-loading-progressive-loading-stories",7869:"skeleton-skeleton-stories",7931:"notification-notification-stories",7991:"menu-button-menu-button-stories",8552:"button-button-set-stories",8667:"ai-label-ai-label-stories",8816:"tabs-tabs-approaches-regular-stories",9211:"dropdown-dropdown-stories",9325:"tiles-tile-group-stories",9552:"timepicker-select-timepicker-select-stories",9619:"progress-indicator-progress-indicator-stories",9660:"ui-shell-ui-shell-stories",9736:"combobox-combobox-stories"}[chunkId]||chunkId)+"."+{140:"1dd8a10d",210:"b81c613e",217:"4da1b35c",341:"a982d50b",384:"8a6d0c20",459:"a0cfde9f",503:"7113f5a6",653:"2995303b",703:"a4a02921",799:"fa7c9094",901:"49ee92eb",911:"146a70b6",933:"a0ce8815",955:"99b6ac85",972:"734fb9bc",1119:"29184bd5",1125:"37c137fa",1127:"f6bf90b2",1250:"47c381c1",1277:"4be2b1a4",1335:"988334fd",1345:"9ccf4f3f",1470:"39923f01",1928:"b02e8d7a",2218:"b29be1cc",2315:"9814e37f",2342:"444fc044",2371:"7b40e96a",2388:"0a864a6a",2399:"77240fb3",2489:"999199e8",2494:"261bc118",2573:"0af03d58",2722:"67d788a8",2969:"547eede3",3046:"8bac8fb8",3080:"d3996d61",3224:"3e279e46",3280:"caaccfb8",3314:"531f27d7",3329:"a40b7a36",3360:"e0c015fc",3402:"8cf36eef",3415:"bd5d140d",3523:"bc16e132",3610:"ec91f833",3719:"dcf7e3fd",3774:"c37f3d92",3858:"fd04f3c2",3867:"23eb0716",3882:"f509cf43",3931:"ef321db9",3957:"3a15bb8b",3987:"3eeb0edd",4232:"8696062a",4253:"eb2e347f",4277:"b72796c6",4292:"836243f0",4391:"335363a0",4731:"6f01bcf0",4762:"9086f77f",5069:"eabf32ea",5103:"20115e64",5167:"1e5a5e9c",5368:"d96ba54c",5455:"9fc41371",5808:"c95454e6",5980:"af1ae580",6026:"5884b16a",6085:"d2393495",6115:"66e1727e",6274:"9a2a5436",6310:"fa3bd098",6322:"d45529e5",6456:"dd4ab04a",6634:"f3492da3",6663:"559a71ec",6702:"fe63502f",6765:"352de0ff",6842:"8a53f03b",6943:"85a9e65e",6981:"6756aa82",7019:"b8944046",7053:"b450bb5e",7081:"799a681c",7235:"fa14a1f4",7291:"2d81b25d",7399:"f37bb110",7773:"9fe6f13f",7840:"10bcf9f2",7869:"ab75213a",7886:"245c0e58",7931:"624c3d04",7991:"1fcc7a41",8341:"e1e4a4fd",8446:"ede82a46",8552:"e1a24b3c",8667:"83ed183b",8816:"7d67d0e1",9115:"fef09076",9211:"a76101be",9300:"537382cc",9325:"781654a5",9552:"4a58311d",9579:"0b804947",9619:"dae29927",9660:"214d3ae0",9736:"e7427226"}[chunkId]+".iframe.bundle.js"),__webpack_require__.miniCssF=chunkId=>{},__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.hmd=module=>((module=Object.create(module)).children||(module.children=[]),Object.defineProperty(module,"exports",{enumerable:!0,set:()=>{throw new Error("ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: "+module.id)}}),module),__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),inProgress={},__webpack_require__.l=(url,done,key,chunkId)=>{if(inProgress[url])inProgress[url].push(done);else{var script,needAttach;if(void 0!==key)for(var scripts=document.getElementsByTagName("script"),i=0;i<scripts.length;i++){var s=scripts[i];if(s.getAttribute("src")==url||s.getAttribute("data-webpack")=="carbon-components-angular:"+key){script=s;break}}script||(needAttach=!0,(script=document.createElement("script")).charset="utf-8",script.timeout=120,__webpack_require__.nc&&script.setAttribute("nonce",__webpack_require__.nc),script.setAttribute("data-webpack","carbon-components-angular:"+key),script.src=url),inProgress[url]=[done];var onScriptComplete=(prev,event)=>{script.onerror=script.onload=null,clearTimeout(timeout);var doneFns=inProgress[url];if(delete inProgress[url],script.parentNode&&script.parentNode.removeChild(script),doneFns&&doneFns.forEach((fn=>fn(event))),prev)return prev(event)},timeout=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:script}),12e4);script.onerror=onScriptComplete.bind(null,script.onerror),script.onload=onScriptComplete.bind(null,script.onload),needAttach&&document.head.appendChild(script)}},__webpack_require__.r=exports=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.nmd=module=>(module.paths=[],module.children||(module.children=[]),module),__webpack_require__.p="",(()=>{var installedChunks={1303:0};__webpack_require__.f.j=(chunkId,promises)=>{var installedChunkData=__webpack_require__.o(installedChunks,chunkId)?installedChunks[chunkId]:void 0;if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else if(1303!=chunkId){var promise=new Promise(((resolve,reject)=>installedChunkData=installedChunks[chunkId]=[resolve,reject]));promises.push(installedChunkData[2]=promise);var url=__webpack_require__.p+__webpack_require__.u(chunkId),error=new Error;__webpack_require__.l(url,(event=>{if(__webpack_require__.o(installedChunks,chunkId)&&(0!==(installedChunkData=installedChunks[chunkId])&&(installedChunks[chunkId]=void 0),installedChunkData)){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,installedChunkData[1](error)}}),"chunk-"+chunkId,chunkId)}else installedChunks[chunkId]=0},__webpack_require__.O.j=chunkId=>0===installedChunks[chunkId];var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var moduleId,chunkId,[chunkIds,moreModules,runtime]=data,i=0;if(chunkIds.some((id=>0!==installedChunks[id]))){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i<chunkIds.length;i++)chunkId=chunkIds[i],__webpack_require__.o(installedChunks,chunkId)&&installedChunks[chunkId]&&installedChunks[chunkId][0](),installedChunks[chunkId]=0;return __webpack_require__.O(result)},chunkLoadingGlobal=self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[];chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null,0)),chunkLoadingGlobal.push=webpackJsonpCallback.bind(null,chunkLoadingGlobal.push.bind(chunkLoadingGlobal))})(),__webpack_require__.nc=void 0})();
|
|
File without changes
|