carbon-components-angular 5.57.2 → 5.57.3

package/docs/storybook/{3931.b0862ad7.iframe.bundle.js → 3931.36351824.iframe.bundle.js}

@@ -1 +1 @@
-"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3931],{"./node_modules/@carbon/utils-position/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{var _a,PLACEMENTS;__webpack_require__.d(__webpack_exports__,{FK:()=>position,ZP:()=>__WEBPACK_DEFAULT_EXPORT__}),function(PLACEMENTS){PLACEMENTS.LEFT="left",PLACEMENTS.RIGHT="right",PLACEMENTS.TOP="top",PLACEMENTS.BOTTOM="bottom"}(PLACEMENTS||(PLACEMENTS={}));var defaultPositions=((_a={})[PLACEMENTS.LEFT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left-target.offsetWidth)}},_a[PLACEMENTS.RIGHT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left+referenceRect.width)}},_a[PLACEMENTS.TOP]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top-target.offsetHeight),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a[PLACEMENTS.BOTTOM]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top+referenceRect.height),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a),windowRef="undefined"!=typeof window?window:{innerHeight:0,scrollY:0,innerWidth:0,scrollX:0},Position=function(){function Position(positions){void 0===positions&&(positions={}),this.positions=defaultPositions,this.positions=Object.assign({},defaultPositions,positions)}return Position.prototype.getRelativeOffset=function(target){for(var offsets={left:target.offsetLeft,top:target.offsetTop};target.offsetParent&&"static"===getComputedStyle(target.offsetParent).position;)offsets.left+=target.offsetLeft,offsets.top+=target.offsetTop,target=target.offsetParent;return offsets},Position.prototype.getAbsoluteOffset=function(target){for(var currentNode=target,margins={top:0,left:0};currentNode.offsetParent;){var computed=getComputedStyle(currentNode.offsetParent);"static"===computed.position&&computed.marginLeft&&computed.marginTop&&(parseInt(computed.marginTop,10)&&(margins.top+=parseInt(computed.marginTop,10)),parseInt(computed.marginLeft,10)&&(margins.left+=parseInt(computed.marginLeft,10))),currentNode=currentNode.offsetParent}var targetRect=target.getBoundingClientRect(),relativeRect=document.body.getBoundingClientRect();return{top:targetRect.top-relativeRect.top+margins.top,left:targetRect.left-relativeRect.left+margins.left}},Position.prototype.findRelative=function(reference,target,placement){var referenceOffset=this.getRelativeOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findAbsolute=function(reference,target,placement){var referenceOffset=this.getAbsoluteOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPosition=function(reference,target,placement,offsetFunction){void 0===offsetFunction&&(offsetFunction=this.getAbsoluteOffset.bind(this));var referenceOffset=offsetFunction(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPositionAt=function(offset,target,placement){return this.calculatePosition(offset,{top:0,left:0,height:0,width:0},target,placement)},Position.prototype.getPlacementBox=function(target,position){var targetBottom=target.offsetHeight+position.top,targetRight=target.offsetWidth+position.left;return{top:position.top,bottom:targetBottom,left:position.left,right:targetRight}},Position.prototype.addOffset=function(position,top,left){return void 0===top&&(top=0),void 0===left&&(left=0),Object.assign({},position,{top:position.top+top,left:position.left+left})},Position.prototype.setElement=function(element,position){element.style.top=position.top+"px",element.style.left=position.left+"px"},Position.prototype.findBestPlacement=function(reference,target,placements,containerFunction,positionFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this)),void 0===positionFunction&&(positionFunction=this.findPosition.bind(this));var weightedPlacements=placements.map((function(placement){var pos=positionFunction(reference,target,placement),box=_this.getPlacementBox(target,pos),hiddenHeight=0,hiddenWidth=0,container=containerFunction();box.top<container.top?hiddenHeight=container.top-box.top:box.bottom>container.height&&(hiddenHeight=box.bottom-container.height),box.left<container.left?hiddenWidth=container.left-box.left:box.right>container.width&&(hiddenWidth=box.right-container.width),hiddenHeight&&!hiddenWidth?hiddenWidth=1:hiddenWidth&&!hiddenHeight&&(hiddenHeight=1);var area=target.offsetHeight*target.offsetWidth;return{placement,weight:(area-hiddenHeight*hiddenWidth)/area}}));return weightedPlacements.sort((function(a,b){return b.weight-a.weight})),weightedPlacements[0].placement},Position.prototype.findBestPlacementAt=function(offset,target,placements,containerFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this));return this.findBestPlacement(null,target,placements,containerFunction,(function(_,target,placement){return _this.findPositionAt(offset,target,placement)}))},Position.prototype.defaultContainerFunction=function(){return{top:0,left:0,height:windowRef.innerHeight,width:windowRef.innerWidth}},Position.prototype.calculatePosition=function(referenceOffset,referenceRect,target,placement){return this.positions[placement]?this.positions[placement](referenceOffset,target,referenceRect):(console.error("No function found for placement, defaulting to 0,0"),{left:0,top:0})},Position}(),position=new Position;const __WEBPACK_DEFAULT_EXPORT__=Position},"./src/modal/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{IX:()=>BaseModal,JF:()=>ModalButtonType,zk:()=>ModalModule,Z7:()=>ModalService});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let BaseModal=class BaseModal{constructor(){this.close=new core.EventEmitter,this.open=!1}closeModal(){this.close.emit()}};BaseModal.propDecorators={close:[{type:core.Output}],open:[{type:core.Input}]},BaseModal=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsBaseModal], [ibmBaseModal]"})],BaseModal);let AlertModal=class AlertModal extends BaseModal{constructor(type="default",label,title,content,size,hasScrollingContent=null,buttons=[],onClose,showCloseButton=!0){super(),this.type=type,this.label=label,this.title=title,this.content=content,this.size=size,this.hasScrollingContent=hasScrollingContent,this.buttons=buttons,this.onClose=onClose,this.showCloseButton=showCloseButton;for(let i=0;i<this.buttons.length;i++){const button=this.buttons[i];button.id||(button.id=`alert-modal-button-${i}`),button.type||(button.type="secondary")}}ngAfterViewInit(){if(!this.modalContent)return!1;const element=this.modalContent.nativeElement;element.scrollHeight>element.clientHeight?element.tabIndex=0:element.tabIndex=-1}buttonClicked(buttonIndex){const button=this.buttons[buttonIndex];button.click&&button.click(),this.closeModal()}dismissModal(trigger){this.onClose&&!1===this.onClose(trigger)||this.closeModal()}};var AlertModalType,ModalButtonType;AlertModal.ctorParameters=()=>[{type:void 0,decorators:[{type:core.Optional},{type:core.Inject,args:["type"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["label"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["title"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["content"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["size"]}]},{type:Boolean,decorators:[{type:core.Optional},{type:core.Inject,args:["hasScrollingContent"]}]},{type:void 0,decorators:[{type:core.Optional},{type:core.Inject,args:["buttons"]}]},{type:Function,decorators:[{type:core.Optional},{type:core.Inject,args:["close"]}]},{type:void 0,decorators:[{type:core.Optional},{type:core.Inject,args:["showCloseButton"]}]}],AlertModal.propDecorators={modalContent:[{type:core.ViewChild,args:["modalContent",{static:!0}]}]},AlertModal=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-alert-modal, ibm-alert-modal",template:'\n\t\t<cds-modal\n\t\t\t[size]="size"\n\t\t\t[theme]="type"\n\t\t\t[ariaLabel]="title"\n\t\t\t[hasScrollingContent]="hasScrollingContent"\n\t\t\t[open]="open"\n\t\t\t(overlaySelected)="dismissModal(\'overlay\')">\n\t\t\t<cds-modal-header (closeSelect)="dismissModal(\'close\')" [showCloseButton]="showCloseButton">\n\t\t\t\t<p cdsModalHeaderLabel class="cds--type-delta">{{label}}</p>\n\t\t\t\t<p cdsModalHeaderHeading class="cds--type-beta">{{title}}</p>\n\t\t\t</cds-modal-header>\n\t\t\t<div cdsModalContent #modalContent>\n\t\t\t\t<p [innerHTML]="content"></p>\n\t\t\t</div>\n\t\t\t<cds-modal-footer *ngIf="buttons.length > 0">\n\t\t\t\t<ng-container *ngFor="let button of buttons; let i = index">\n\t\t\t\t\t<button\n\t\t\t\t\t\t[cdsButton]="button.type"\n\t\t\t\t\t\t(click)="buttonClicked(i)"\n\t\t\t\t\t\t[id]="button.id"\n\t\t\t\t\t\t[attr.modal-primary-focus]="(button.type.indexOf(\'primary\') !== -1 ? \'\' : null)">\n\t\t\t\t\t\t{{button.text}}\n\t\t\t\t\t</button>\n\t\t\t\t</ng-container>\n\t\t\t</cds-modal-footer>\n\t\t</cds-modal>\n\t'})],AlertModal),function(AlertModalType){AlertModalType.default="default",AlertModalType.danger="danger"}(AlertModalType||(AlertModalType={})),function(ModalButtonType){ModalButtonType.primary="primary",ModalButtonType.secondary="secondary",ModalButtonType.tertiary="tertiary",ModalButtonType.ghost="ghost",ModalButtonType.danger="danger",ModalButtonType.danger_primary="danger--primary"}(ModalButtonType||(ModalButtonType={}));let ModalFooter=class ModalFooter{};ModalFooter=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-modal-footer, ibm-modal-footer",template:'\n\t\t<footer class="cds--modal-footer">\n\t\t\t<ng-content></ng-content>\n\t\t</footer>\n\t'})],ModalFooter);var i18n=__webpack_require__("./src/i18n/index.ts");let ModalHeader=class ModalHeader{constructor(i18n){this.i18n=i18n,this.theme="default",this.closeLabel=this.i18n.get().MODAL.CLOSE,this.showCloseButton=!0,this.closeSelect=new core.EventEmitter,this.buttonNgClass={"cds--modal-close":!0},this.buttonAttributes={"aria-label":this.i18n.get().MODAL.CLOSE}}onClose(){this.closeSelect.emit()}};ModalHeader.ctorParameters=()=>[{type:i18n.oc}],ModalHeader.propDecorators={theme:[{type:core.Input}],closeLabel:[{type:core.Input}],showCloseButton:[{type:core.Input}],closeSelect:[{type:core.Output}]},ModalHeader=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-modal-header, ibm-modal-header",template:'\n\t\t<header class="cds--modal-header {{theme}}">\n\t\t\t<ng-content></ng-content>\n\t\t\t<div class="cds--modal-close-button">\n\t\t\t\t<cds-icon-button\n\t\t\t\t\t*ngIf="showCloseButton"\n\t\t\t\t\ttype="button"\n\t\t\t\t\t[buttonNgClass]="buttonNgClass"\n\t\t\t\t\t[buttonAttributes]="buttonAttributes"\n\t\t\t\t\talign="left"\n\t\t\t\t\t[description]="closeLabel"\n\t\t\t\t\t(click)="onClose()">\n\t\t\t\t\t<svg cdsIcon="close" size="20" class="cds--modal-close__icon"></svg>\n\t\t\t\t</cds-icon-button>\n\t\t\t</div>\n\t\t</header>\n\n\t'})],ModalHeader);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),tab_service=__webpack_require__("./src/common/tab.service.ts"),placeholder=__webpack_require__("./src/placeholder/index.ts"),tap=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/tap.js"),delay=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/delay.js");let BaseModalService=class BaseModalService{constructor(placeholderService){this.placeholderService=placeholderService}create(data){data=Object.assign({},{inputs:{}},data);const inputProviders=Object.keys(data.inputs).map((inputName=>({provide:inputName,useValue:data.inputs[inputName]}))),injector=core.Injector.create({providers:inputProviders}),component=this.placeholderService.createComponent(data.component,injector);let focusedElement=document.activeElement;return setTimeout((()=>{component.instance.open=!0})),component.previouslyFocusedElement=focusedElement,component.instance.close.pipe((0,tap.b)((()=>{component.instance.open=!1})),(0,delay.g)(240)).subscribe((()=>{this.placeholderService.destroyComponent(component),BaseModalService.modalList=BaseModalService.modalList.filter((c=>c!==component))})),component.onDestroy((()=>{focusedElement.focus()})),BaseModalService.modalList.push(component),component}destroy(index=-1){index>=BaseModalService.modalList.length||0===BaseModalService.modalList.length||(index<0&&(index=BaseModalService.modalList.length-1),setTimeout((()=>{BaseModalService.modalList[index]&&(this.placeholderService.destroyComponent(BaseModalService.modalList[index]),BaseModalService.modalList.splice(index,1))}),240))}};BaseModalService.modalList=[],BaseModalService.ctorParameters=()=>[{type:placeholder.Q_}],BaseModalService=(0,tslib_es6.gn)([(0,core.Injectable)()],BaseModalService);let Modal=class Modal{constructor(modalService,document,renderer){this.modalService=modalService,this.document=document,this.renderer=renderer,this.size="md",this.theme="default",this.ariaLabel="default",this.open=!1,this.hasScrollingContent=null,this.overlaySelected=new core.EventEmitter,this.close=new core.EventEmitter,this.selectorPrimaryFocus="[modal-primary-focus]"}ngOnChanges({open,hasScrollingContent}){open&&(open.currentValue?(setTimeout((()=>this.focusInitialElement()),100),this.renderer.addClass(this.document.body,"cds--body--with-modal-open")):open.currentValue?this.trigger&&this.trigger.focus():this.renderer.removeClass(this.document.body,"cds--body--with-modal-open")),hasScrollingContent&&this.updateScrollbar()}ngAfterViewInit(){this.focusInitialElement(),this.updateScrollbar()}handleKeyboardEvent(event){switch(event.key){case"Escape":event.stopImmediatePropagation(),this.open=!1,this.close.emit(),this.modalService.destroy();break;case"Tab":(0,tab_service.nW)(event,this.modal.nativeElement)}}get shouldShowScrollbar(){const modalContent=this.modal?this.modal.nativeElement.querySelector(".cds--modal-content"):null;if(modalContent){const modalContentHeight=Math.ceil(modalContent.getBoundingClientRect().height);return modalContent.scrollHeight>modalContentHeight}return!1}ngOnDestroy(){this.renderer.removeClass(this.document.body,"cds--body--with-modal-open")}focusInitialElement(){const primaryFocusElement=this.modal.nativeElement.querySelector(this.selectorPrimaryFocus);primaryFocusElement&&primaryFocusElement.focus?setTimeout((()=>primaryFocusElement.focus())):(0,tab_service.ZW)(this.modal.nativeElement).length>0?setTimeout((()=>(0,tab_service.ZW)(this.modal.nativeElement)[0].focus())):setTimeout((()=>this.modal.nativeElement.focus()))}updateScrollbar(){const modalContent=this.modal?this.modal.nativeElement.querySelector(".cds--modal-content"):null,showScrollbar=null!==this.hasScrollingContent?this.hasScrollingContent:this.shouldShowScrollbar;modalContent&&(showScrollbar?this.renderer.addClass(modalContent,"cds--modal-scroll-content"):this.renderer.removeClass(modalContent,"cds--modal-scroll-content"))}};Modal.ctorParameters=()=>[{type:BaseModalService},{type:Document,decorators:[{type:core.Inject,args:[common.DOCUMENT]}]},{type:core.Renderer2}],Modal.propDecorators={size:[{type:core.Input}],theme:[{type:core.Input}],ariaLabel:[{type:core.Input}],open:[{type:core.Input}],trigger:[{type:core.Input}],hasScrollingContent:[{type:core.Input}],overlaySelected:[{type:core.Output}],close:[{type:core.Output}],modal:[{type:core.ViewChild,args:["modal",{static:!0}]}],handleKeyboardEvent:[{type:core.HostListener,args:["keydown",["$event"]]}]},Modal=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-modal, ibm-modal",template:'\n\t\t<cds-overlay\n\t\t\t[theme]="theme"\n\t\t\t[open]="open"\n\t\t\t(overlaySelect)="overlaySelected.emit()">\n\t\t\t<div\n\t\t\t\tclass="cds--modal-container"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--modal-container--xs\': size === \'xs\',\n\t\t\t\t\t\'cds--modal-container--sm\': size === \'sm\',\n\t\t\t\t\t\'cds--modal-container--md\': size === \'md\',\n\t\t\t\t\t\'cds--modal-container--lg\': size === \'lg\'\n\t\t\t\t}"\n\t\t\t\trole="dialog"\n\t\t\t\taria-modal="true"\n\t\t\t\tstyle="z-index:1;"\n\t\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t\t#modal>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</cds-overlay>\n\t'})],Modal);let ModalService=class ModalService extends BaseModalService{constructor(placeholderService){super(placeholderService),this.placeholderService=placeholderService}show(data){return this.create({component:AlertModal,inputs:{type:data.type,label:data.label,title:data.title,content:data.content,hasScrollingContent:void 0!==data.hasScrollingContent?data.hasScrollingContent:null,size:data.size,buttons:data.buttons||[],close:data.close||(()=>{}),showCloseButton:data.showCloseButton}})}};ModalService.ctorParameters=()=>[{type:placeholder.Q_}],ModalService=(0,tslib_es6.gn)([(0,core.Injectable)()],ModalService);let Overlay=class Overlay{constructor(){this.theme="default",this.open=!1,this.overlaySelect=new core.EventEmitter}overlayClick(event){event.target===this.overlay.nativeElement&&(event.stopPropagation(),this.overlaySelect.emit(event))}};Overlay.propDecorators={theme:[{type:core.Input}],open:[{type:core.Input}],overlaySelect:[{type:core.Output}],overlay:[{type:core.ViewChild,args:["overlay",{static:!0}]}]},Overlay=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-overlay, ibm-overlay",template:"\n\t\t<section\n\t\t\tclass=\"cds--modal cds--modal-tall\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--modal--danger': theme === 'danger',\n\t\t\t\t'is-visible': open\n\t\t\t}\"\n\t\t\t(click)=\"overlayClick($event)\"\n\t\t\t#overlay>\n\t\t\t<ng-content></ng-content>\n\t\t</section>\n\t"})],Overlay);var src_forms=__webpack_require__("./src/forms/index.ts"),experimental=__webpack_require__("./src/experimental/index.ts");let ModalContent=class ModalContent{constructor(){this.modalContentClass=!0,this.hasForm=!1}};ModalContent.propDecorators={modalContentClass:[{type:core.HostBinding,args:["class.cds--modal-content"]}],hasForm:[{type:core.HostBinding,args:["class.cds--modal-content--with-form"]},{type:core.Input}]},ModalContent=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalContent], [ibmModalContent]"})],ModalContent);let ModalContentText=class ModalContentText{constructor(){this.modalContentTextClass=!0}};ModalContentText.propDecorators={modalContentTextClass:[{type:core.HostBinding,args:["class.cds--modal-content__text"]}]},ModalContentText=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalContentText], [ibmModalContentText]"})],ModalContentText);let ModalHeaderHeading=class ModalHeaderHeading{constructor(){this.modalHeaderHeadingClass=!0}};ModalHeaderHeading.propDecorators={modalHeaderHeadingClass:[{type:core.HostBinding,args:["class.cds--modal-header__heading"]}]},ModalHeaderHeading=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalHeaderHeading], [ibmModalHeaderHeading]"})],ModalHeaderHeading);let ModalHeaderLabel=class ModalHeaderLabel{constructor(){this.modalHeaderLabelClass=!0}};ModalHeaderLabel.propDecorators={modalHeaderLabelClass:[{type:core.HostBinding,args:["class.cds--modal-header__label"]}]},ModalHeaderLabel=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalHeaderLabel], [ibmModalHeaderLabel]"})],ModalHeaderLabel);var icon=__webpack_require__("./src/icon/index.ts");let ModalModule=class ModalModule{};ModalModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[AlertModal,Modal,ModalHeader,ModalFooter,Overlay,ModalContent,ModalContentText,ModalHeaderHeading,ModalHeaderLabel,BaseModal],exports:[AlertModal,Modal,ModalHeader,ModalFooter,ModalContent,ModalContentText,ModalHeaderHeading,ModalHeaderLabel,BaseModal],providers:[BaseModalService,ModalService],imports:[common.CommonModule,src_forms.hJ,i18n.LU,placeholder.Qq,experimental.OV,icon.QX]})],ModalModule)}}]);
+"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3931],{"./node_modules/@carbon/utils-position/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{var _a,PLACEMENTS;__webpack_require__.d(__webpack_exports__,{FK:()=>position,ZP:()=>__WEBPACK_DEFAULT_EXPORT__}),function(PLACEMENTS){PLACEMENTS.LEFT="left",PLACEMENTS.RIGHT="right",PLACEMENTS.TOP="top",PLACEMENTS.BOTTOM="bottom"}(PLACEMENTS||(PLACEMENTS={}));var defaultPositions=((_a={})[PLACEMENTS.LEFT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left-target.offsetWidth)}},_a[PLACEMENTS.RIGHT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left+referenceRect.width)}},_a[PLACEMENTS.TOP]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top-target.offsetHeight),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a[PLACEMENTS.BOTTOM]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top+referenceRect.height),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a),windowRef="undefined"!=typeof window?window:{innerHeight:0,scrollY:0,innerWidth:0,scrollX:0},Position=function(){function Position(positions){void 0===positions&&(positions={}),this.positions=defaultPositions,this.positions=Object.assign({},defaultPositions,positions)}return Position.prototype.getRelativeOffset=function(target){for(var offsets={left:target.offsetLeft,top:target.offsetTop};target.offsetParent&&"static"===getComputedStyle(target.offsetParent).position;)offsets.left+=target.offsetLeft,offsets.top+=target.offsetTop,target=target.offsetParent;return offsets},Position.prototype.getAbsoluteOffset=function(target){for(var currentNode=target,margins={top:0,left:0};currentNode.offsetParent;){var computed=getComputedStyle(currentNode.offsetParent);"static"===computed.position&&computed.marginLeft&&computed.marginTop&&(parseInt(computed.marginTop,10)&&(margins.top+=parseInt(computed.marginTop,10)),parseInt(computed.marginLeft,10)&&(margins.left+=parseInt(computed.marginLeft,10))),currentNode=currentNode.offsetParent}var targetRect=target.getBoundingClientRect(),relativeRect=document.body.getBoundingClientRect();return{top:targetRect.top-relativeRect.top+margins.top,left:targetRect.left-relativeRect.left+margins.left}},Position.prototype.findRelative=function(reference,target,placement){var referenceOffset=this.getRelativeOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findAbsolute=function(reference,target,placement){var referenceOffset=this.getAbsoluteOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPosition=function(reference,target,placement,offsetFunction){void 0===offsetFunction&&(offsetFunction=this.getAbsoluteOffset.bind(this));var referenceOffset=offsetFunction(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPositionAt=function(offset,target,placement){return this.calculatePosition(offset,{top:0,left:0,height:0,width:0},target,placement)},Position.prototype.getPlacementBox=function(target,position){var targetBottom=target.offsetHeight+position.top,targetRight=target.offsetWidth+position.left;return{top:position.top,bottom:targetBottom,left:position.left,right:targetRight}},Position.prototype.addOffset=function(position,top,left){return void 0===top&&(top=0),void 0===left&&(left=0),Object.assign({},position,{top:position.top+top,left:position.left+left})},Position.prototype.setElement=function(element,position){element.style.top=position.top+"px",element.style.left=position.left+"px"},Position.prototype.findBestPlacement=function(reference,target,placements,containerFunction,positionFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this)),void 0===positionFunction&&(positionFunction=this.findPosition.bind(this));var weightedPlacements=placements.map((function(placement){var pos=positionFunction(reference,target,placement),box=_this.getPlacementBox(target,pos),hiddenHeight=0,hiddenWidth=0,container=containerFunction();box.top<container.top?hiddenHeight=container.top-box.top:box.bottom>container.height&&(hiddenHeight=box.bottom-container.height),box.left<container.left?hiddenWidth=container.left-box.left:box.right>container.width&&(hiddenWidth=box.right-container.width),hiddenHeight&&!hiddenWidth?hiddenWidth=1:hiddenWidth&&!hiddenHeight&&(hiddenHeight=1);var area=target.offsetHeight*target.offsetWidth;return{placement,weight:(area-hiddenHeight*hiddenWidth)/area}}));return weightedPlacements.sort((function(a,b){return b.weight-a.weight})),weightedPlacements[0].placement},Position.prototype.findBestPlacementAt=function(offset,target,placements,containerFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this));return this.findBestPlacement(null,target,placements,containerFunction,(function(_,target,placement){return _this.findPositionAt(offset,target,placement)}))},Position.prototype.defaultContainerFunction=function(){return{top:0,left:0,height:windowRef.innerHeight,width:windowRef.innerWidth}},Position.prototype.calculatePosition=function(referenceOffset,referenceRect,target,placement){return this.positions[placement]?this.positions[placement](referenceOffset,target,referenceRect):(console.error("No function found for placement, defaulting to 0,0"),{left:0,top:0})},Position}(),position=new Position;const __WEBPACK_DEFAULT_EXPORT__=Position},"./src/modal/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{IX:()=>BaseModal,JF:()=>ModalButtonType,zk:()=>ModalModule,Z7:()=>ModalService});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let BaseModal=class BaseModal{constructor(){this.close=new core.EventEmitter,this.open=!1}closeModal(){this.close.emit()}};BaseModal.propDecorators={close:[{type:core.Output}],open:[{type:core.Input}]},BaseModal=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsBaseModal], [ibmBaseModal]"})],BaseModal);let AlertModal=class AlertModal extends BaseModal{constructor(type="default",label,title,content,size,hasScrollingContent=null,buttons=[],onClose,showCloseButton=!0){super(),this.type=type,this.label=label,this.title=title,this.content=content,this.size=size,this.hasScrollingContent=hasScrollingContent,this.buttons=buttons,this.onClose=onClose,this.showCloseButton=showCloseButton;for(let i=0;i<this.buttons.length;i++){const button=this.buttons[i];button.id||(button.id=`alert-modal-button-${i}`),button.type||(button.type="secondary")}}ngAfterViewInit(){if(!this.modalContent)return!1;const element=this.modalContent.nativeElement;element.scrollHeight>element.clientHeight?element.tabIndex=0:element.tabIndex=-1}buttonClicked(buttonIndex){const button=this.buttons[buttonIndex];button.click&&button.click(),this.closeModal()}dismissModal(trigger){this.onClose&&!1===this.onClose(trigger)||this.closeModal()}};var AlertModalType,ModalButtonType;AlertModal.ctorParameters=()=>[{type:void 0,decorators:[{type:core.Optional},{type:core.Inject,args:["type"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["label"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["title"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["content"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["size"]}]},{type:Boolean,decorators:[{type:core.Optional},{type:core.Inject,args:["hasScrollingContent"]}]},{type:void 0,decorators:[{type:core.Optional},{type:core.Inject,args:["buttons"]}]},{type:Function,decorators:[{type:core.Optional},{type:core.Inject,args:["close"]}]},{type:void 0,decorators:[{type:core.Optional},{type:core.Inject,args:["showCloseButton"]}]}],AlertModal.propDecorators={modalContent:[{type:core.ViewChild,args:["modalContent",{static:!0}]}]},AlertModal=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-alert-modal, ibm-alert-modal",template:'\n\t\t<cds-modal\n\t\t\t[size]="size"\n\t\t\t[theme]="type"\n\t\t\t[ariaLabel]="title"\n\t\t\t[hasScrollingContent]="hasScrollingContent"\n\t\t\t[open]="open"\n\t\t\t(overlaySelected)="dismissModal(\'overlay\')">\n\t\t\t<cds-modal-header (closeSelect)="dismissModal(\'close\')" [showCloseButton]="showCloseButton">\n\t\t\t\t<p cdsModalHeaderLabel class="cds--type-delta">{{label}}</p>\n\t\t\t\t<p cdsModalHeaderHeading class="cds--type-beta">{{title}}</p>\n\t\t\t</cds-modal-header>\n\t\t\t<div cdsModalContent #modalContent>\n\t\t\t\t<p [innerHTML]="content"></p>\n\t\t\t</div>\n\t\t\t<cds-modal-footer *ngIf="buttons.length > 0">\n\t\t\t\t<ng-container *ngFor="let button of buttons; let i = index">\n\t\t\t\t\t<button\n\t\t\t\t\t\t[cdsButton]="button.type"\n\t\t\t\t\t\t(click)="buttonClicked(i)"\n\t\t\t\t\t\t[id]="button.id"\n\t\t\t\t\t\t[attr.modal-primary-focus]="(button.type.indexOf(\'primary\') !== -1 ? \'\' : null)">\n\t\t\t\t\t\t{{button.text}}\n\t\t\t\t\t</button>\n\t\t\t\t</ng-container>\n\t\t\t</cds-modal-footer>\n\t\t</cds-modal>\n\t'})],AlertModal),function(AlertModalType){AlertModalType.default="default",AlertModalType.danger="danger"}(AlertModalType||(AlertModalType={})),function(ModalButtonType){ModalButtonType.primary="primary",ModalButtonType.secondary="secondary",ModalButtonType.tertiary="tertiary",ModalButtonType.ghost="ghost",ModalButtonType.danger="danger",ModalButtonType.danger_primary="danger--primary"}(ModalButtonType||(ModalButtonType={}));let ModalFooter=class ModalFooter{};ModalFooter=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-modal-footer, ibm-modal-footer",template:'\n\t\t<footer class="cds--modal-footer">\n\t\t\t<ng-content></ng-content>\n\t\t</footer>\n\t'})],ModalFooter);var i18n=__webpack_require__("./src/i18n/index.ts");let ModalHeader=class ModalHeader{constructor(i18n){this.i18n=i18n,this.theme="default",this.closeLabel=this.i18n.get().MODAL.CLOSE,this.showCloseButton=!0,this.closeSelect=new core.EventEmitter,this.buttonNgClass={"cds--modal-close":!0},this.buttonAttributes={"aria-label":this.i18n.get().MODAL.CLOSE}}onClose(){this.closeSelect.emit()}};ModalHeader.ctorParameters=()=>[{type:i18n.oc}],ModalHeader.propDecorators={theme:[{type:core.Input}],closeLabel:[{type:core.Input}],showCloseButton:[{type:core.Input}],closeSelect:[{type:core.Output}]},ModalHeader=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-modal-header, ibm-modal-header",template:'\n\t\t<header class="cds--modal-header {{theme}}">\n\t\t\t<ng-content></ng-content>\n\t\t\t<div class="cds--modal-close-button">\n\t\t\t\t<cds-icon-button\n\t\t\t\t\t*ngIf="showCloseButton"\n\t\t\t\t\ttype="button"\n\t\t\t\t\t[buttonNgClass]="buttonNgClass"\n\t\t\t\t\t[buttonAttributes]="buttonAttributes"\n\t\t\t\t\talign="left"\n\t\t\t\t\t[description]="closeLabel"\n\t\t\t\t\t(click)="onClose()">\n\t\t\t\t\t<svg cdsIcon="close" size="20" class="cds--modal-close__icon"></svg>\n\t\t\t\t</cds-icon-button>\n\t\t\t</div>\n\t\t</header>\n\n\t'})],ModalHeader);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),tab_service=__webpack_require__("./src/common/tab.service.ts"),placeholder=__webpack_require__("./src/placeholder/index.ts"),tap=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/tap.js"),delay=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/delay.js");let BaseModalService=class BaseModalService{constructor(placeholderService){this.placeholderService=placeholderService,this.environment=(0,core.inject)(core.EnvironmentInjector)}create(data){data=Object.assign({},{inputs:{}},data);const inputProviders=Object.keys(data.inputs).map((inputName=>({provide:inputName,useValue:data.inputs[inputName]}))),injector=core.Injector.create({providers:inputProviders}),component=this.placeholderService.createComponent(data.component,injector,void 0,this.environment);let focusedElement=document.activeElement;return setTimeout((()=>{component.instance.open=!0})),component.previouslyFocusedElement=focusedElement,component.instance.close.pipe((0,tap.b)((()=>{component.instance.open=!1})),(0,delay.g)(240)).subscribe((()=>{this.placeholderService.destroyComponent(component),BaseModalService.modalList=BaseModalService.modalList.filter((c=>c!==component))})),component.onDestroy((()=>{focusedElement.focus()})),BaseModalService.modalList.push(component),component}destroy(index=-1){index>=BaseModalService.modalList.length||0===BaseModalService.modalList.length||(index<0&&(index=BaseModalService.modalList.length-1),setTimeout((()=>{BaseModalService.modalList[index]&&(this.placeholderService.destroyComponent(BaseModalService.modalList[index]),BaseModalService.modalList.splice(index,1))}),240))}};BaseModalService.modalList=[],BaseModalService.ctorParameters=()=>[{type:placeholder.Q_}],BaseModalService=(0,tslib_es6.gn)([(0,core.Injectable)()],BaseModalService);let Modal=class Modal{constructor(modalService,document,renderer){this.modalService=modalService,this.document=document,this.renderer=renderer,this.size="md",this.theme="default",this.ariaLabel="default",this.open=!1,this.hasScrollingContent=null,this.overlaySelected=new core.EventEmitter,this.close=new core.EventEmitter,this.selectorPrimaryFocus="[modal-primary-focus]"}ngOnChanges({open,hasScrollingContent}){open&&(open.currentValue?(setTimeout((()=>this.focusInitialElement()),100),this.renderer.addClass(this.document.body,"cds--body--with-modal-open")):open.currentValue?this.trigger&&this.trigger.focus():this.renderer.removeClass(this.document.body,"cds--body--with-modal-open")),hasScrollingContent&&this.updateScrollbar()}ngAfterViewInit(){this.focusInitialElement(),this.updateScrollbar()}handleKeyboardEvent(event){switch(event.key){case"Escape":event.stopImmediatePropagation(),this.open=!1,this.close.emit(),this.modalService.destroy();break;case"Tab":(0,tab_service.nW)(event,this.modal.nativeElement)}}get shouldShowScrollbar(){const modalContent=this.modal?this.modal.nativeElement.querySelector(".cds--modal-content"):null;if(modalContent){const modalContentHeight=Math.ceil(modalContent.getBoundingClientRect().height);return modalContent.scrollHeight>modalContentHeight}return!1}ngOnDestroy(){this.renderer.removeClass(this.document.body,"cds--body--with-modal-open")}focusInitialElement(){const primaryFocusElement=this.modal.nativeElement.querySelector(this.selectorPrimaryFocus);primaryFocusElement&&primaryFocusElement.focus?setTimeout((()=>primaryFocusElement.focus())):(0,tab_service.ZW)(this.modal.nativeElement).length>0?setTimeout((()=>(0,tab_service.ZW)(this.modal.nativeElement)[0].focus())):setTimeout((()=>this.modal.nativeElement.focus()))}updateScrollbar(){const modalContent=this.modal?this.modal.nativeElement.querySelector(".cds--modal-content"):null,showScrollbar=null!==this.hasScrollingContent?this.hasScrollingContent:this.shouldShowScrollbar;modalContent&&(showScrollbar?this.renderer.addClass(modalContent,"cds--modal-scroll-content"):this.renderer.removeClass(modalContent,"cds--modal-scroll-content"))}};Modal.ctorParameters=()=>[{type:BaseModalService},{type:Document,decorators:[{type:core.Inject,args:[common.DOCUMENT]}]},{type:core.Renderer2}],Modal.propDecorators={size:[{type:core.Input}],theme:[{type:core.Input}],ariaLabel:[{type:core.Input}],open:[{type:core.Input}],trigger:[{type:core.Input}],hasScrollingContent:[{type:core.Input}],overlaySelected:[{type:core.Output}],close:[{type:core.Output}],modal:[{type:core.ViewChild,args:["modal",{static:!0}]}],handleKeyboardEvent:[{type:core.HostListener,args:["keydown",["$event"]]}]},Modal=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-modal, ibm-modal",template:'\n\t\t<cds-overlay\n\t\t\t[theme]="theme"\n\t\t\t[open]="open"\n\t\t\t(overlaySelect)="overlaySelected.emit()">\n\t\t\t<div\n\t\t\t\tclass="cds--modal-container"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--modal-container--xs\': size === \'xs\',\n\t\t\t\t\t\'cds--modal-container--sm\': size === \'sm\',\n\t\t\t\t\t\'cds--modal-container--md\': size === \'md\',\n\t\t\t\t\t\'cds--modal-container--lg\': size === \'lg\'\n\t\t\t\t}"\n\t\t\t\trole="dialog"\n\t\t\t\taria-modal="true"\n\t\t\t\tstyle="z-index:1;"\n\t\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t\t#modal>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</cds-overlay>\n\t'})],Modal);let ModalService=class ModalService extends BaseModalService{constructor(placeholderService){super(placeholderService),this.placeholderService=placeholderService}show(data){return this.create({component:AlertModal,inputs:{type:data.type,label:data.label,title:data.title,content:data.content,hasScrollingContent:void 0!==data.hasScrollingContent?data.hasScrollingContent:null,size:data.size,buttons:data.buttons||[],close:data.close||(()=>{}),showCloseButton:data.showCloseButton}})}};ModalService.ctorParameters=()=>[{type:placeholder.Q_}],ModalService=(0,tslib_es6.gn)([(0,core.Injectable)()],ModalService);let Overlay=class Overlay{constructor(){this.theme="default",this.open=!1,this.overlaySelect=new core.EventEmitter}overlayClick(event){event.target===this.overlay.nativeElement&&(event.stopPropagation(),this.overlaySelect.emit(event))}};Overlay.propDecorators={theme:[{type:core.Input}],open:[{type:core.Input}],overlaySelect:[{type:core.Output}],overlay:[{type:core.ViewChild,args:["overlay",{static:!0}]}]},Overlay=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-overlay, ibm-overlay",template:"\n\t\t<section\n\t\t\tclass=\"cds--modal cds--modal-tall\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--modal--danger': theme === 'danger',\n\t\t\t\t'is-visible': open\n\t\t\t}\"\n\t\t\t(click)=\"overlayClick($event)\"\n\t\t\t#overlay>\n\t\t\t<ng-content></ng-content>\n\t\t</section>\n\t"})],Overlay);var src_forms=__webpack_require__("./src/forms/index.ts"),experimental=__webpack_require__("./src/experimental/index.ts");let ModalContent=class ModalContent{constructor(){this.modalContentClass=!0,this.hasForm=!1}};ModalContent.propDecorators={modalContentClass:[{type:core.HostBinding,args:["class.cds--modal-content"]}],hasForm:[{type:core.HostBinding,args:["class.cds--modal-content--with-form"]},{type:core.Input}]},ModalContent=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalContent], [ibmModalContent]"})],ModalContent);let ModalContentText=class ModalContentText{constructor(){this.modalContentTextClass=!0}};ModalContentText.propDecorators={modalContentTextClass:[{type:core.HostBinding,args:["class.cds--modal-content__text"]}]},ModalContentText=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalContentText], [ibmModalContentText]"})],ModalContentText);let ModalHeaderHeading=class ModalHeaderHeading{constructor(){this.modalHeaderHeadingClass=!0}};ModalHeaderHeading.propDecorators={modalHeaderHeadingClass:[{type:core.HostBinding,args:["class.cds--modal-header__heading"]}]},ModalHeaderHeading=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalHeaderHeading], [ibmModalHeaderHeading]"})],ModalHeaderHeading);let ModalHeaderLabel=class ModalHeaderLabel{constructor(){this.modalHeaderLabelClass=!0}};ModalHeaderLabel.propDecorators={modalHeaderLabelClass:[{type:core.HostBinding,args:["class.cds--modal-header__label"]}]},ModalHeaderLabel=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalHeaderLabel], [ibmModalHeaderLabel]"})],ModalHeaderLabel);var icon=__webpack_require__("./src/icon/index.ts");let ModalModule=class ModalModule{};ModalModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[AlertModal,Modal,ModalHeader,ModalFooter,Overlay,ModalContent,ModalContentText,ModalHeaderHeading,ModalHeaderLabel,BaseModal],exports:[AlertModal,Modal,ModalHeader,ModalFooter,ModalContent,ModalContentText,ModalHeaderHeading,ModalHeaderLabel,BaseModal],providers:[BaseModalService,ModalService],imports:[common.CommonModule,src_forms.hJ,i18n.LU,placeholder.Qq,experimental.OV,icon.QX]})],ModalModule)}}]);

package/docs/storybook/{7773.b5e74332.iframe.bundle.js → 7773.e984a82c.iframe.bundle.js}

@@ -1 +1 @@
-"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[7773],{"./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/dialog/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Su:()=>DialogModule,PQ:()=>OverflowMenu});var CloseReasons,tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");!function(CloseReasons){CloseReasons[CloseReasons.destroyed=0]="destroyed",CloseReasons[CloseReasons.programmatic=1]="programmatic",CloseReasons[CloseReasons.interaction=2]="interaction",CloseReasons[CloseReasons.hidden=3]="hidden"}(CloseReasons||(CloseReasons={}));var placeholder=__webpack_require__("./src/placeholder/index.ts"),tab_service=__webpack_require__("./src/common/tab.service.ts");let DialogService=class DialogService{constructor(injector,placeholderService){this.injector=injector,this.placeholderService=placeholderService}static closeAll(){DialogService.dialogRefs.forEach((ref=>ref.instance.doClose({reason:CloseReasons.programmatic}))),DialogService.dialogRefs.clear()}open(viewContainer,dialogConfig,component){if(!component)return;let dialogRef;return dialogConfig.appendInline?dialogRef=viewContainer.createComponent(component,{index:0,injector:this.injector}):this.placeholderService.hasPlaceholderRef()?dialogRef=this.placeholderService.createComponent(component,this.injector):(dialogRef=viewContainer.createComponent(component,{index:0,injector:this.injector}),dialogRef&&setTimeout((()=>{window.document.querySelector("body").appendChild(dialogRef.location.nativeElement)}))),DialogService.dialogRefs.add(dialogRef),dialogConfig.previouslyFocusedElement=document.activeElement,dialogRef.instance.dialogConfig=dialogConfig,dialogRef.instance.elementRef.nativeElement.focus(),dialogRef}close(dialogRef){if(!dialogRef)return;const elementToFocus=dialogRef.instance.dialogConfig.previouslyFocusedElement;dialogRef.destroy(),DialogService.dialogRefs.has(dialogRef)&&DialogService.dialogRefs.delete(dialogRef),dialogRef.location.nativeElement.querySelectorAll(tab_service.o$)||elementToFocus.focus()}singletonClickListen(){DialogService.listeningForBodyClicks||(document.body.firstElementChild.addEventListener("click",(()=>null),!0),DialogService.listeningForBodyClicks=!0)}};DialogService.listeningForBodyClicks=!1,DialogService.dialogRefs=new Set,DialogService.ctorParameters=()=>[{type:core.Injector},{type:placeholder.Q_}],DialogService=(0,tslib_es6.gn)([(0,core.Injectable)()],DialogService);var Subscription=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Subscription.js"),utils_position=__webpack_require__("./node_modules/@carbon/utils-position/index.js"),utils=__webpack_require__("./src/utils/index.ts");let Dialog=class Dialog{constructor(elementRef,elementService,animationFrameService=null){this.elementRef=elementRef,this.elementService=elementService,this.animationFrameService=animationFrameService,this.close=new core.EventEmitter,this.data={},this.visibilitySubscription=new Subscription.w0,this.animationFrameSubscription=new Subscription.w0,this.addGap={left:pos=>utils_position.FK.addOffset(pos,0,-this.dialogConfig.gap),right:pos=>utils_position.FK.addOffset(pos,0,this.dialogConfig.gap),top:pos=>utils_position.FK.addOffset(pos,-this.dialogConfig.gap),bottom:pos=>utils_position.FK.addOffset(pos,this.dialogConfig.gap),"left-bottom":pos=>utils_position.FK.addOffset(pos,0,-this.dialogConfig.gap),"right-bottom":pos=>utils_position.FK.addOffset(pos,0,this.dialogConfig.gap)},this.placements={}}ngOnInit(){this.placement=this.dialogConfig.placement.split(",")[0],this.data=this.dialogConfig.data,this.onDialogInit()}ngAfterViewInit(){const dialogElement=this.dialog.nativeElement;if(this.dialogConfig.wrapperClass)for(const extraClass of this.dialogConfig.wrapperClass.split(" "))dialogElement.classList.add(extraClass);(0,tab_service.ZW)(this.dialog.nativeElement).length>0&&dialogElement.focus();const parentElement=this.dialogConfig.parentRef.nativeElement;this.animationFrameService&&(this.animationFrameSubscription=this.animationFrameService.tick.subscribe((()=>{this.placeDialog()}))),this.dialogConfig.closeWhenHidden&&(this.visibilitySubscription=this.elementService.visibility(parentElement,parentElement).subscribe((value=>{this.placeDialog(),value.visible||this.doClose({reason:CloseReasons.hidden})}))),this.placeDialog(),setTimeout((()=>this.afterDialogViewInit()))}onDialogInit(){}afterDialogViewInit(){}placeDialog(){const positionService=new utils_position.ZP(this.placements);let parentEl=this.dialogConfig.parentRef.nativeElement,el=this.dialog.nativeElement,dialogPlacement=this.placement;const placements=this.dialogConfig.placement.split(",");dialogPlacement=positionService.findBestPlacement(parentEl,el,placements);const pos=((reference,target,placement)=>{let pos;return pos=this.dialogConfig.appendInline?this.addGap[placement](positionService.findRelative(reference,target,placement)):this.addGap[placement](positionService.findAbsolute(reference,target,placement)),this.dialogConfig.offset&&(pos.top=pos.top+this.dialogConfig.offset.y,pos.left=pos.left+this.dialogConfig.offset.x),pos})(parentEl,el,dialogPlacement);positionService.setElement(el,pos),setTimeout((()=>{this.placement=dialogPlacement}))}escapeClose(event){switch(event.key){case"Escape":event.stopImmediatePropagation(),this.doClose({reason:CloseReasons.interaction,target:event.target});break;case"Tab":(0,tab_service.nW)(event,this.elementRef.nativeElement)}}clickClose(event){this.elementRef.nativeElement.contains(event.target)||this.dialogConfig.parentRef.nativeElement.contains(event.target)||this.doClose({reason:CloseReasons.interaction,target:event.target})}doClose(meta={reason:CloseReasons.interaction}){this.close.emit(meta)}ngOnDestroy(){this.visibilitySubscription.unsubscribe(),this.animationFrameSubscription&&this.animationFrameSubscription.unsubscribe()}};Dialog.ctorParameters=()=>[{type:core.ElementRef},{type:utils.d2},{type:utils.NV,decorators:[{type:core.Optional}]}],Dialog.propDecorators={close:[{type:core.Output}],dialogConfig:[{type:core.Input}],dialog:[{type:core.ViewChild,args:["dialog"]}],escapeClose:[{type:core.HostListener,args:["keydown",["$event"]]}],clickClose:[{type:core.HostListener,args:["document:click",["$event"]]}]},Dialog=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-dialog, ibm-dialog",template:""})],Dialog);var fromEvent=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/observable/fromEvent.js");let DialogDirective=class DialogDirective{constructor(elementRef,viewContainerRef,dialogService,eventService){this.elementRef=elementRef,this.viewContainerRef=viewContainerRef,this.dialogService=dialogService,this.eventService=eventService,this.title="",this.trigger="click",this.closeTrigger="mouseleave",this.placement="left",this.gap=0,this.appendInline=!1,this.data={},this.isOpen=!1,this.disabled=!1,this.onClose=new core.EventEmitter,this.onOpen=new core.EventEmitter,this.isOpenChange=new core.EventEmitter,this.role="button",this.hasPopup=!0,this.subscriptions=[]}set ibmDialog(body){this.cdsDialog=body}get ariaOwns(){return this.isOpen?this.dialogConfig.compID:null}ngOnChanges(changes){this.dialogConfig={title:this.title,content:this.cdsDialog,placement:this.placement,parentRef:this.elementRef,gap:this.gap,trigger:this.trigger,closeTrigger:this.closeTrigger,shouldClose:this.shouldClose||(()=>!0),appendInline:this.appendInline,wrapperClass:this.wrapperClass,data:this.data,offset:this.offset,disabled:this.disabled},changes.isOpen&&(changes.isOpen.currentValue?this.open():changes.isOpen.firstChange||this.close({reason:CloseReasons.programmatic})),this.onDialogChanges(changes),this.updateConfig()}ngOnInit(){this.dialogService.singletonClickListen();const element=this.elementRef.nativeElement;this.subscriptions.push((0,fromEvent.R)(element,"keydown").subscribe((event=>{(event.target===this.dialogConfig.parentRef.nativeElement&&("Tab"===event.key||"Tab"===event.key&&event.shiftKey)||"Escape"===event.key)&&this.close({reason:CloseReasons.interaction,target:event.target})}))),"hover"===this.trigger||"mouseenter"===this.trigger?this.subscriptions.push((0,fromEvent.R)(element,"mouseenter").subscribe((()=>this.open())),(0,fromEvent.R)(element,this.closeTrigger).subscribe((event=>{this.close({reason:CloseReasons.interaction,target:event.target})})),(0,fromEvent.R)(element,"focus").subscribe((()=>this.open())),(0,fromEvent.R)(element,"blur").subscribe((event=>{this.close({reason:CloseReasons.interaction,target:event.target})}))):this.subscriptions.push((0,fromEvent.R)(element,"click").subscribe((event=>{this.toggle({reason:CloseReasons.interaction,target:event.target})})),(0,fromEvent.R)(element,"keydown").subscribe((event=>{"Enter"!==event.key&&" "!==event.key||setTimeout((()=>{this.open()}))}))),DialogDirective.dialogCounter++,this.dialogConfig.compID="dialog-"+DialogDirective.dialogCounter,this.onDialogInit(),this.updateConfig()}ngOnDestroy(){this.close({reason:CloseReasons.destroyed}),this.subscriptions.forEach((subscription=>subscription.unsubscribe()))}open(component){if(this.dialogRef||this.disabled)return;this.dialogRef=this.dialogService.open(this.viewContainerRef,this.dialogConfig,component),this.isOpen=!0,this.onOpen.emit(),this.isOpenChange.emit(!0);const subscription=this.dialogRef.instance.close.subscribe((meta=>{this.dialogRef&&this.dialogConfig.shouldClose&&this.dialogConfig.shouldClose(meta)&&(this.dialogService.close(this.dialogRef),this.dialogRef=null,this.isOpen=!1,this.onClose.emit(),this.isOpenChange.emit(!1),subscription.unsubscribe())}));return this.dialogRef}toggle(meta={reason:CloseReasons.interaction}){this.isOpen?this.close(meta):this.open()}close(meta={reason:CloseReasons.interaction}){this.dialogRef&&this.dialogRef.instance.doClose(meta)}onDialogInit(){}onDialogChanges(_changes){}updateConfig(){}};DialogDirective.dialogCounter=0,DialogDirective.ctorParameters=()=>[{type:core.ElementRef},{type:core.ViewContainerRef},{type:DialogService},{type:utils.PO}],DialogDirective.propDecorators={title:[{type:core.Input}],ibmDialog:[{type:core.Input}],cdsDialog:[{type:core.Input}],trigger:[{type:core.Input}],closeTrigger:[{type:core.Input}],placement:[{type:core.Input}],offset:[{type:core.Input}],wrapperClass:[{type:core.Input}],gap:[{type:core.Input}],appendInline:[{type:core.Input}],data:[{type:core.Input}],isOpen:[{type:core.Input},{type:core.HostBinding,args:["attr.aria-expanded"]}],disabled:[{type:core.Input}],shouldClose:[{type:core.Input}],onClose:[{type:core.Output}],onOpen:[{type:core.Output}],isOpenChange:[{type:core.Output}],role:[{type:core.HostBinding,args:["attr.role"]}],hasPopup:[{type:core.HostBinding,args:["attr.aria-haspopup"]}],ariaOwns:[{type:core.HostBinding,args:["attr.aria-owns"]}]},DialogDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsDialog], [ibmDialog]",exportAs:"dialog",providers:[DialogService]})],DialogDirective);var i18n=__webpack_require__("./src/i18n/index.ts"),experimental=__webpack_require__("./src/experimental/index.ts");let OverflowMenuPane=class OverflowMenuPane extends Dialog{constructor(elementRef,i18n,experimental,animationFrameService=null,elementService=null){super(elementRef,elementService,animationFrameService),this.elementRef=elementRef,this.i18n=i18n,this.experimental=experimental,this.animationFrameService=animationFrameService,this.elementService=elementService}onDialogInit(){const positionOverflowMenu=pos=>{let offset;const closestRel=(0,utils._K)("position",["relative","fixed","absolute"],this.elementRef.nativeElement),topFix=closestRel?-1*closestRel.getBoundingClientRect().top:0,leftFix=closestRel?-1*closestRel.getBoundingClientRect().left:0;return offset=Math.round(this.dialog.nativeElement.offsetWidth/2)-20,this.dialogConfig.flip?utils_position.FK.addOffset(pos,topFix,-offset+leftFix):utils_position.FK.addOffset(pos,topFix,offset+leftFix)};this.addGap.bottom=positionOverflowMenu,this.addGap.top=positionOverflowMenu,this.dialogConfig.menuLabel||(this.dialogConfig.menuLabel=this.i18n.get().OVERFLOW_MENU.OVERFLOW)}hostkeys(event){const listItems=this.listItems();switch(event.key){case"ArrowDown":if(event.preventDefault(),(0,tab_service.jv)(event,listItems))listItems[0].focus();else{const index=listItems.findIndex((item=>item===event.target));listItems[index+1].focus()}break;case"ArrowUp":if(event.preventDefault(),(0,tab_service.w3)(event,listItems))listItems[listItems.length-1].focus();else{const index=listItems.findIndex((item=>item===event.target));listItems[index-1].focus()}break;case"Home":event.preventDefault(),listItems[0].focus();break;case"End":event.preventDefault(),listItems[listItems.length-1].focus();break;case"Escape":case"Tab":event.stopImmediatePropagation(),this.doClose({reason:CloseReasons.interaction,target:event.target})}}onClose(event){this.doClose({reason:CloseReasons.interaction,target:event.target})}afterDialogViewInit(){const focusElementList=this.listItems();focusElementList.forEach((button=>{null===button.getAttribute("tabindex")&&(button.tabIndex=-1)})),focusElementList[0]&&(focusElementList[0].tabIndex=0,focusElementList[0].focus())}listItems(){return Array.from(this.elementRef.nativeElement.querySelectorAll(".cds--overflow-menu-options__option:not([disabled]) .cds--overflow-menu-options__btn"))}};OverflowMenuPane.ctorParameters=()=>[{type:core.ElementRef},{type:i18n.oc},{type:experimental.tM},{type:utils.NV,decorators:[{type:core.Optional}]},{type:utils.d2,decorators:[{type:core.Optional}]}],OverflowMenuPane.propDecorators={hostkeys:[{type:core.HostListener,args:["keydown",["$event"]]}]},OverflowMenuPane=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-overflow-menu-pane, ibm-overflow-menu-pane",template:'\n\t\t<ul\n\t\t\t[attr.id]="dialogConfig.compID"\n\t\t\t[attr.aria-label]="dialogConfig.menuLabel"\n\t\t\t[attr.data-floating-menu-direction]="placement ? placement : null"\n\t\t\t[ngClass]="{\'cds--overflow-menu--flip\': dialogConfig.flip}"\n\t\t\trole="menu"\n\t\t\t#dialog\n\t\t\tclass="cds--overflow-menu-options cds--overflow-menu-options--open"\n\t\t\t(click)="onClose($event)"\n\t\t\t[attr.aria-label]="dialogConfig.menuLabel">\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]="dialogConfig.content"\n\t\t\t\t[ngTemplateOutletContext]="{overflowMenu: this}">\n\t\t\t</ng-template>\n\t\t</ul>\n\t'})],OverflowMenuPane);let OverflowMenuCustomPane=class OverflowMenuCustomPane extends Dialog{constructor(elementRef,i18n,animationFrameService=null,elementService=null){super(elementRef,elementService,animationFrameService),this.elementRef=elementRef,this.i18n=i18n,this.animationFrameService=animationFrameService,this.elementService=elementService}onClick(event){this.doClose({reason:CloseReasons.interaction,target:event.target})}onDialogInit(){const positionOverflowMenu=pos=>{let offset;const closestRel=(0,utils._K)("position",["relative","fixed","absolute"],this.elementRef.nativeElement),topFix=closestRel?-1*closestRel.getBoundingClientRect().top:0,leftFix=closestRel?-1*closestRel.getBoundingClientRect().left:0;return offset=Math.round(this.dialog.nativeElement.offsetWidth/2)-20,this.dialogConfig.flip?utils_position.FK.addOffset(pos,topFix,-offset+leftFix):utils_position.FK.addOffset(pos,topFix,offset+leftFix)};this.addGap.bottom=positionOverflowMenu,this.addGap.top=positionOverflowMenu,this.dialogConfig.menuLabel||(this.dialogConfig.menuLabel=this.i18n.get().OVERFLOW_MENU.OVERFLOW)}};OverflowMenuCustomPane.ctorParameters=()=>[{type:core.ElementRef},{type:i18n.oc},{type:utils.NV,decorators:[{type:core.Optional}]},{type:utils.d2,decorators:[{type:core.Optional}]}],OverflowMenuCustomPane=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-overflow-custom-menu-pane, ibm-overflow-custom-menu-pane",template:'\n\t\t<div\n\t\t\t[attr.id]="dialogConfig.compID"\n\t\t\t[attr.aria-label]="dialogConfig.menuLabel"\n\t\t\t[attr.data-floating-menu-direction]="placement ? placement : null"\n\t\t\t[ngClass]="{\'cds--overflow-menu--flip\': dialogConfig.flip}"\n\t\t\tclass="cds--overflow-menu-options cds--overflow-menu-options--open"\n\t\t\trole="menu"\n\t\t\t(click)="onClick($event)"\n\t\t\t#dialog\n\t\t\t[attr.aria-label]="dialogConfig.menuLabel">\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]="dialogConfig.content"\n\t\t\t\t[ngTemplateOutletContext]="{overflowMenu: this}">\n\t\t\t</ng-template>\n\t\t</div>\n\t'})],OverflowMenuCustomPane);let OverflowMenuDirective=class OverflowMenuDirective extends DialogDirective{constructor(elementRef,viewContainerRef,dialogService,eventService){super(elementRef,viewContainerRef,dialogService,eventService),this.elementRef=elementRef,this.viewContainerRef=viewContainerRef,this.dialogService=dialogService,this.eventService=eventService,this.flip=!1,this.wrapperClass="",this.customPane=!1}set ibmOverflowMenu(template){this.cdsOverflowMenu=template}updateConfig(){this.dialogConfig.content=this.cdsOverflowMenu,this.dialogConfig.flip=this.flip,this.dialogConfig.offset=this.offset,this.dialogConfig.wrapperClass=this.wrapperClass}hostkeys(event){switch(event.key){case"Enter":case" ":event.preventDefault()}}open(){return super.open(this.customPane?OverflowMenuCustomPane:OverflowMenuPane)}};OverflowMenuDirective.ctorParameters=()=>[{type:core.ElementRef},{type:core.ViewContainerRef},{type:DialogService},{type:utils.PO}],OverflowMenuDirective.propDecorators={ibmOverflowMenu:[{type:core.Input}],cdsOverflowMenu:[{type:core.Input}],flip:[{type:core.Input}],offset:[{type:core.Input}],wrapperClass:[{type:core.Input}],customPane:[{type:core.Input}],hostkeys:[{type:core.HostListener,args:["keydown",["$event"]]}]},OverflowMenuDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsOverflowMenu], [ibmOverflowMenu]",exportAs:"overflowMenu",providers:[DialogService]})],OverflowMenuDirective);var src_button=__webpack_require__("./src/button/index.ts");let OverflowMenu=class OverflowMenu extends src_button.HL{constructor(elementRef,i18n){super(),this.elementRef=elementRef,this.i18n=i18n,this.buttonLabel=this.i18n.get().OVERFLOW_MENU.OVERFLOW,this.description=this.i18n.get().OVERFLOW_MENU.ICON_DESCRIPTION,this.flip=!1,this.placement="bottom",this.open=!1,this.openChange=new core.EventEmitter,this.wrapperClass="",this.triggerClass=""}handleOpenChange(event){this.open=event,this.openChange.emit(event)}};var Target;OverflowMenu.ctorParameters=()=>[{type:core.ElementRef},{type:i18n.oc}],OverflowMenu.propDecorators={buttonLabel:[{type:core.Input}],description:[{type:core.Input}],flip:[{type:core.Input}],placement:[{type:core.Input}],open:[{type:core.Input}],openChange:[{type:core.Output}],customTrigger:[{type:core.Input}],offset:[{type:core.Input}],wrapperClass:[{type:core.Input}],triggerClass:[{type:core.Input}],overflowMenuDirective:[{type:core.ContentChild,args:[OverflowMenuDirective]}]},OverflowMenu=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-overflow-menu, ibm-overflow-menu",template:'\n\t\t<cds-tooltip\n\t\t\tclass="cds--icon-tooltip"\n\t\t\t[description]="description"\n\t\t\t[caret]="caret"\n\t\t\t[dropShadow]="dropShadow"\n\t\t\t[highContrast]="highContrast"\n\t\t\t[isOpen]="isOpen"\n\t\t\t[align]="align"\n\t\t\t[autoAlign]="autoAlign"\n\t\t\t[enterDelayMs]="enterDelayMs"\n\t\t\t[leaveDelayMs]="leaveDelayMs">\n\t\t\t<button\n\t\t\t\tcdsButton="ghost"\n\t\t\t\t[cdsOverflowMenu]="options"\n\t\t\t\t[ngClass]="{\'cds--overflow-menu--open\': open}"\n\t\t\t\tclass="cds--overflow-menu {{triggerClass}}"\n\t\t\t\t[iconOnly]="true"\n\t\t\t\t[attr.aria-label]="buttonLabel"\n\t\t\t\t[flip]="flip"\n\t\t\t\t[isOpen]="open"\n\t\t\t\t(isOpenChange)="handleOpenChange($event)"\n\t\t\t\t[offset]="offset"\n\t\t\t\t[wrapperClass]="wrapperClass"\n\t\t\t\taria-haspopup="true"\n\t\t\t\ttype="button"\n\t\t\t\t[placement]="placement">\n\t\t\t\t<ng-template *ngIf="customTrigger; else defaultIcon" [ngTemplateOutlet]="customTrigger"></ng-template>\n\t\t\t</button>\n\t\t</cds-tooltip>\n\n\t\t<ng-template #options>\n\t\t\t<ng-content></ng-content>\n\t\t</ng-template>\n\t\t<ng-template #defaultIcon>\n\t\t\t<svg cdsIcon="overflow-menu--vertical" size="16" class="cds--overflow-menu__icon"></svg>\n\t\t</ng-template>\n\t',encapsulation:core.ViewEncapsulation.None,styles:["\n\t\t.cds--overflow-menu--open {\n\t\t\topacity: 1\n\t\t}\n\n\t\t/*\n\t\tRotate the overflow menu container as well as the icon, since\n\t\twe calculate our menu position based on the container, not the icon.\n\t\t*/\n\n\t\t.cds--data-table-v2 .cds--overflow-menu {\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\n\t\t.cds--data-table-v2 .cds--overflow-menu__icon {\n\t\t\ttransform: rotate(180deg);\n\t\t}\n\t"]})],OverflowMenu),function(Target){Target.self="_self",Target.blank="_blank",Target.parent="_parent",Target.top="_top"}(Target||(Target={}));let OverflowMenuOption=class OverflowMenuOption{constructor(elementRef){this.elementRef=elementRef,this.optionClass=!0,this.role="presentation",this.divider=!1,this.type="normal",this.disabled=!1,this.innerClass="",this.selected=new core.EventEmitter,this.tabIndex=-1,this.title=null}get isDanger(){return"danger"===this.type}get isDisabled(){return this.disabled}set target(value){Object.values(Target).includes(value)?this._target=value:console.warn(`\`target\` must have one of the following values: ${Object.values(Target).join(", ")}.\nPlease use the \`Target\` enum exported by carbon-components-angular`)}get target(){return this._target}get rel(){return this._target?"noreferrer noopener":null}onClick(){this.selected.emit()}onFocus(){setTimeout((()=>this.tabIndex=0))}onBlur(){setTimeout((()=>this.tabIndex=-1))}ngAfterViewInit(){const button=this.elementRef.nativeElement.querySelector("button, a"),textContainer=button.querySelector(".cds--overflow-menu-options__option-content");textContainer.scrollWidth>textContainer.offsetWidth&&(this.title=button.textContent)}};OverflowMenuOption.ctorParameters=()=>[{type:core.ElementRef}],OverflowMenuOption.propDecorators={optionClass:[{type:core.HostBinding,args:["class.cds--overflow-menu-options__option"]}],role:[{type:core.HostBinding,args:["attr.role"]}],isDanger:[{type:core.HostBinding,args:["class.cds--overflow-menu-options__option--danger"]}],isDisabled:[{type:core.HostBinding,args:["class.cds--overflow-menu-options__option--disabled"]}],divider:[{type:core.HostBinding,args:["class.cds--overflow-menu--divider"]},{type:core.Input}],type:[{type:core.Input}],disabled:[{type:core.Input}],href:[{type:core.Input}],target:[{type:core.Input}],innerClass:[{type:core.Input}],selected:[{type:core.Output}]},OverflowMenuOption=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-overflow-menu-option, ibm-overflow-menu-option",template:'\n\t\t<button\n\t\t\t*ngIf="!href"\n\t\t\tclass="cds--overflow-menu-options__btn {{innerClass}}"\n\t\t\trole="menuitem"\n\t\t\t[tabindex]="tabIndex"\n\t\t\t(focus)="onFocus()"\n\t\t\t(blur)="onBlur()"\n\t\t\t(click)="onClick()"\n\t\t\t[disabled]="disabled"\n\t\t\t[attr.title]="title">\n\t\t\t<ng-container *ngTemplateOutlet="tempOutlet"></ng-container>\n\t\t</button>\n\n\t\t<a\n\t\t\t*ngIf="href"\n\t\t\tclass="cds--overflow-menu-options__btn {{innerClass}}"\n\t\t\trole="menuitem"\n\t\t\t[tabindex]="tabIndex"\n\t\t\t(focus)="onFocus()"\n\t\t\t(blur)="onBlur()"\n\t\t\t(click)="onClick()"\n\t\t\t[attr.disabled]="disabled"\n\t\t\t[href]="href"\n\t\t\t[attr.target]="target"\n\t\t\t[attr.rel]="rel"\n\t\t\t[attr.title]="title">\n\t\t\t<ng-container *ngTemplateOutlet="tempOutlet"></ng-container>\n\t\t</a>\n\n\t\t<ng-template #tempOutlet>\n\t\t\t<div class="cds--overflow-menu-options__option-content">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</ng-template>\n\t'})],OverflowMenuOption);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts"),tooltip=__webpack_require__("./src/tooltip/index.ts");let DialogModule=class DialogModule{};DialogModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Dialog,OverflowMenu,OverflowMenuPane,OverflowMenuCustomPane,DialogDirective,OverflowMenuDirective,OverflowMenuOption],exports:[Dialog,OverflowMenu,OverflowMenuPane,OverflowMenuCustomPane,DialogDirective,OverflowMenuDirective,OverflowMenuOption],providers:[DialogService],imports:[common.CommonModule,i18n.LU,placeholder.Qq,experimental.OV,utils.As,icon.QX,src_button.hJ,tooltip.z8]})],DialogModule)},"./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){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}):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)}}]);
+"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[7773],{"./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/dialog/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Su:()=>DialogModule,PQ:()=>OverflowMenu});var CloseReasons,tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");!function(CloseReasons){CloseReasons[CloseReasons.destroyed=0]="destroyed",CloseReasons[CloseReasons.programmatic=1]="programmatic",CloseReasons[CloseReasons.interaction=2]="interaction",CloseReasons[CloseReasons.hidden=3]="hidden"}(CloseReasons||(CloseReasons={}));var placeholder=__webpack_require__("./src/placeholder/index.ts"),tab_service=__webpack_require__("./src/common/tab.service.ts");let DialogService=class DialogService{constructor(injector,placeholderService){this.injector=injector,this.placeholderService=placeholderService}static closeAll(){DialogService.dialogRefs.forEach((ref=>ref.instance.doClose({reason:CloseReasons.programmatic}))),DialogService.dialogRefs.clear()}open(viewContainer,dialogConfig,component){if(!component)return;let dialogRef;return dialogConfig.appendInline?dialogRef=viewContainer.createComponent(component,{index:0,injector:this.injector}):this.placeholderService.hasPlaceholderRef()?dialogRef=this.placeholderService.createComponent(component,this.injector):(dialogRef=viewContainer.createComponent(component,{index:0,injector:this.injector}),dialogRef&&setTimeout((()=>{window.document.querySelector("body").appendChild(dialogRef.location.nativeElement)}))),DialogService.dialogRefs.add(dialogRef),dialogConfig.previouslyFocusedElement=document.activeElement,dialogRef.instance.dialogConfig=dialogConfig,dialogRef.instance.elementRef.nativeElement.focus(),dialogRef}close(dialogRef){if(!dialogRef)return;const elementToFocus=dialogRef.instance.dialogConfig.previouslyFocusedElement;dialogRef.destroy(),DialogService.dialogRefs.has(dialogRef)&&DialogService.dialogRefs.delete(dialogRef),dialogRef.location.nativeElement.querySelectorAll(tab_service.o$)||elementToFocus.focus()}singletonClickListen(){DialogService.listeningForBodyClicks||(document.body.firstElementChild.addEventListener("click",(()=>null),!0),DialogService.listeningForBodyClicks=!0)}};DialogService.listeningForBodyClicks=!1,DialogService.dialogRefs=new Set,DialogService.ctorParameters=()=>[{type:core.Injector},{type:placeholder.Q_}],DialogService=(0,tslib_es6.gn)([(0,core.Injectable)()],DialogService);var Subscription=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Subscription.js"),utils_position=__webpack_require__("./node_modules/@carbon/utils-position/index.js"),utils=__webpack_require__("./src/utils/index.ts");let Dialog=class Dialog{constructor(elementRef,elementService,animationFrameService=null){this.elementRef=elementRef,this.elementService=elementService,this.animationFrameService=animationFrameService,this.close=new core.EventEmitter,this.data={},this.visibilitySubscription=new Subscription.w0,this.animationFrameSubscription=new Subscription.w0,this.addGap={left:pos=>utils_position.FK.addOffset(pos,0,-this.dialogConfig.gap),right:pos=>utils_position.FK.addOffset(pos,0,this.dialogConfig.gap),top:pos=>utils_position.FK.addOffset(pos,-this.dialogConfig.gap),bottom:pos=>utils_position.FK.addOffset(pos,this.dialogConfig.gap),"left-bottom":pos=>utils_position.FK.addOffset(pos,0,-this.dialogConfig.gap),"right-bottom":pos=>utils_position.FK.addOffset(pos,0,this.dialogConfig.gap)},this.placements={}}ngOnInit(){this.placement=this.dialogConfig.placement.split(",")[0],this.data=this.dialogConfig.data,this.onDialogInit()}ngAfterViewInit(){const dialogElement=this.dialog.nativeElement;if(this.dialogConfig.wrapperClass)for(const extraClass of this.dialogConfig.wrapperClass.split(" "))dialogElement.classList.add(extraClass);(0,tab_service.ZW)(this.dialog.nativeElement).length>0&&dialogElement.focus();const parentElement=this.dialogConfig.parentRef.nativeElement;this.animationFrameService&&(this.animationFrameSubscription=this.animationFrameService.tick.subscribe((()=>{this.placeDialog()}))),this.dialogConfig.closeWhenHidden&&(this.visibilitySubscription=this.elementService.visibility(parentElement,parentElement).subscribe((value=>{this.placeDialog(),value.visible||this.doClose({reason:CloseReasons.hidden})}))),this.placeDialog(),setTimeout((()=>this.afterDialogViewInit()))}onDialogInit(){}afterDialogViewInit(){}placeDialog(){const positionService=new utils_position.ZP(this.placements);let parentEl=this.dialogConfig.parentRef.nativeElement,el=this.dialog.nativeElement,dialogPlacement=this.placement;const placements=this.dialogConfig.placement.split(",");dialogPlacement=positionService.findBestPlacement(parentEl,el,placements);const pos=((reference,target,placement)=>{let pos;return pos=this.dialogConfig.appendInline?this.addGap[placement](positionService.findRelative(reference,target,placement)):this.addGap[placement](positionService.findAbsolute(reference,target,placement)),this.dialogConfig.offset&&(pos.top=pos.top+this.dialogConfig.offset.y,pos.left=pos.left+this.dialogConfig.offset.x),pos})(parentEl,el,dialogPlacement);positionService.setElement(el,pos),setTimeout((()=>{this.placement=dialogPlacement}))}escapeClose(event){switch(event.key){case"Escape":event.stopImmediatePropagation(),this.doClose({reason:CloseReasons.interaction,target:event.target});break;case"Tab":(0,tab_service.nW)(event,this.elementRef.nativeElement)}}clickClose(event){this.elementRef.nativeElement.contains(event.target)||this.dialogConfig.parentRef.nativeElement.contains(event.target)||this.doClose({reason:CloseReasons.interaction,target:event.target})}doClose(meta={reason:CloseReasons.interaction}){this.close.emit(meta)}ngOnDestroy(){this.visibilitySubscription.unsubscribe(),this.animationFrameSubscription&&this.animationFrameSubscription.unsubscribe()}};Dialog.ctorParameters=()=>[{type:core.ElementRef},{type:utils.d2},{type:utils.NV,decorators:[{type:core.Optional}]}],Dialog.propDecorators={close:[{type:core.Output}],dialogConfig:[{type:core.Input}],dialog:[{type:core.ViewChild,args:["dialog"]}],escapeClose:[{type:core.HostListener,args:["keydown",["$event"]]}],clickClose:[{type:core.HostListener,args:["document:click",["$event"]]}]},Dialog=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-dialog, ibm-dialog",template:""})],Dialog);var fromEvent=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/observable/fromEvent.js");let DialogDirective=class DialogDirective{constructor(elementRef,viewContainerRef,dialogService,eventService){this.elementRef=elementRef,this.viewContainerRef=viewContainerRef,this.dialogService=dialogService,this.eventService=eventService,this.title="",this.trigger="click",this.closeTrigger="mouseleave",this.placement="left",this.gap=0,this.appendInline=!1,this.data={},this.isOpen=!1,this.disabled=!1,this.onClose=new core.EventEmitter,this.onOpen=new core.EventEmitter,this.isOpenChange=new core.EventEmitter,this.role="button",this.hasPopup=!0,this.subscriptions=[]}set ibmDialog(body){this.cdsDialog=body}get ariaOwns(){return this.isOpen?this.dialogConfig.compID:null}ngOnChanges(changes){this.dialogConfig={title:this.title,content:this.cdsDialog,placement:this.placement,parentRef:this.elementRef,gap:this.gap,trigger:this.trigger,closeTrigger:this.closeTrigger,shouldClose:this.shouldClose||(()=>!0),appendInline:this.appendInline,wrapperClass:this.wrapperClass,data:this.data,offset:this.offset,disabled:this.disabled},changes.isOpen&&(changes.isOpen.currentValue?this.open():changes.isOpen.firstChange||this.close({reason:CloseReasons.programmatic})),this.onDialogChanges(changes),this.updateConfig()}ngOnInit(){this.dialogService.singletonClickListen();const element=this.elementRef.nativeElement;this.subscriptions.push((0,fromEvent.R)(element,"keydown").subscribe((event=>{(event.target===this.dialogConfig.parentRef.nativeElement&&("Tab"===event.key||"Tab"===event.key&&event.shiftKey)||"Escape"===event.key)&&this.close({reason:CloseReasons.interaction,target:event.target})}))),"hover"===this.trigger||"mouseenter"===this.trigger?this.subscriptions.push((0,fromEvent.R)(element,"mouseenter").subscribe((()=>this.open())),(0,fromEvent.R)(element,this.closeTrigger).subscribe((event=>{this.close({reason:CloseReasons.interaction,target:event.target})})),(0,fromEvent.R)(element,"focus").subscribe((()=>this.open())),(0,fromEvent.R)(element,"blur").subscribe((event=>{this.close({reason:CloseReasons.interaction,target:event.target})}))):this.subscriptions.push((0,fromEvent.R)(element,"click").subscribe((event=>{this.toggle({reason:CloseReasons.interaction,target:event.target})})),(0,fromEvent.R)(element,"keydown").subscribe((event=>{"Enter"!==event.key&&" "!==event.key||setTimeout((()=>{this.open()}))}))),DialogDirective.dialogCounter++,this.dialogConfig.compID="dialog-"+DialogDirective.dialogCounter,this.onDialogInit(),this.updateConfig()}ngOnDestroy(){this.close({reason:CloseReasons.destroyed}),this.subscriptions.forEach((subscription=>subscription.unsubscribe()))}open(component){if(this.dialogRef||this.disabled)return;this.dialogRef=this.dialogService.open(this.viewContainerRef,this.dialogConfig,component),this.isOpen=!0,this.onOpen.emit(),this.isOpenChange.emit(!0);const subscription=this.dialogRef.instance.close.subscribe((meta=>{this.dialogRef&&this.dialogConfig.shouldClose&&this.dialogConfig.shouldClose(meta)&&(this.dialogService.close(this.dialogRef),this.dialogRef=null,this.isOpen=!1,this.onClose.emit(),this.isOpenChange.emit(!1),subscription.unsubscribe())}));return this.dialogRef}toggle(meta={reason:CloseReasons.interaction}){this.isOpen?this.close(meta):this.open()}close(meta={reason:CloseReasons.interaction}){this.dialogRef&&this.dialogRef.instance.doClose(meta)}onDialogInit(){}onDialogChanges(_changes){}updateConfig(){}};DialogDirective.dialogCounter=0,DialogDirective.ctorParameters=()=>[{type:core.ElementRef},{type:core.ViewContainerRef},{type:DialogService},{type:utils.PO}],DialogDirective.propDecorators={title:[{type:core.Input}],ibmDialog:[{type:core.Input}],cdsDialog:[{type:core.Input}],trigger:[{type:core.Input}],closeTrigger:[{type:core.Input}],placement:[{type:core.Input}],offset:[{type:core.Input}],wrapperClass:[{type:core.Input}],gap:[{type:core.Input}],appendInline:[{type:core.Input}],data:[{type:core.Input}],isOpen:[{type:core.Input},{type:core.HostBinding,args:["attr.aria-expanded"]}],disabled:[{type:core.Input}],shouldClose:[{type:core.Input}],onClose:[{type:core.Output}],onOpen:[{type:core.Output}],isOpenChange:[{type:core.Output}],role:[{type:core.HostBinding,args:["attr.role"]}],hasPopup:[{type:core.HostBinding,args:["attr.aria-haspopup"]}],ariaOwns:[{type:core.HostBinding,args:["attr.aria-owns"]}]},DialogDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsDialog], [ibmDialog]",exportAs:"dialog",providers:[DialogService]})],DialogDirective);var i18n=__webpack_require__("./src/i18n/index.ts"),experimental=__webpack_require__("./src/experimental/index.ts");let OverflowMenuPane=class OverflowMenuPane extends Dialog{constructor(elementRef,i18n,experimental,animationFrameService=null,elementService=null){super(elementRef,elementService,animationFrameService),this.elementRef=elementRef,this.i18n=i18n,this.experimental=experimental,this.animationFrameService=animationFrameService,this.elementService=elementService}onDialogInit(){const positionOverflowMenu=pos=>{let offset;const closestRel=(0,utils._K)("position",["relative","fixed","absolute"],this.elementRef.nativeElement),topFix=closestRel?-1*closestRel.getBoundingClientRect().top:0,leftFix=closestRel?-1*closestRel.getBoundingClientRect().left:0;return offset=Math.round(this.dialog.nativeElement.offsetWidth/2)-20,this.dialogConfig.flip?utils_position.FK.addOffset(pos,topFix,-offset+leftFix):utils_position.FK.addOffset(pos,topFix,offset+leftFix)};this.addGap.bottom=positionOverflowMenu,this.addGap.top=positionOverflowMenu,this.dialogConfig.menuLabel||(this.dialogConfig.menuLabel=this.i18n.get().OVERFLOW_MENU.OVERFLOW)}hostkeys(event){const listItems=this.listItems();switch(event.key){case"ArrowDown":if(event.preventDefault(),(0,tab_service.jv)(event,listItems))listItems[0].focus();else{const index=listItems.findIndex((item=>item===event.target));listItems[index+1].focus()}break;case"ArrowUp":if(event.preventDefault(),(0,tab_service.w3)(event,listItems))listItems[listItems.length-1].focus();else{const index=listItems.findIndex((item=>item===event.target));listItems[index-1].focus()}break;case"Home":event.preventDefault(),listItems[0].focus();break;case"End":event.preventDefault(),listItems[listItems.length-1].focus();break;case"Escape":case"Tab":event.stopImmediatePropagation(),this.doClose({reason:CloseReasons.interaction,target:event.target})}}onClose(event){this.doClose({reason:CloseReasons.interaction,target:event.target})}afterDialogViewInit(){const focusElementList=this.listItems();focusElementList.forEach((button=>{null===button.getAttribute("tabindex")&&(button.tabIndex=-1)})),focusElementList[0]&&(focusElementList[0].tabIndex=0,focusElementList[0].focus())}listItems(){return Array.from(this.elementRef.nativeElement.querySelectorAll(".cds--overflow-menu-options__option:not([disabled]) .cds--overflow-menu-options__btn"))}};OverflowMenuPane.ctorParameters=()=>[{type:core.ElementRef},{type:i18n.oc},{type:experimental.tM},{type:utils.NV,decorators:[{type:core.Optional}]},{type:utils.d2,decorators:[{type:core.Optional}]}],OverflowMenuPane.propDecorators={hostkeys:[{type:core.HostListener,args:["keydown",["$event"]]}]},OverflowMenuPane=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-overflow-menu-pane, ibm-overflow-menu-pane",template:'\n\t\t<ul\n\t\t\t[attr.id]="dialogConfig.compID"\n\t\t\t[attr.aria-label]="dialogConfig.menuLabel"\n\t\t\t[attr.data-floating-menu-direction]="placement ? placement : null"\n\t\t\t[ngClass]="{\'cds--overflow-menu--flip\': dialogConfig.flip}"\n\t\t\trole="menu"\n\t\t\t#dialog\n\t\t\tclass="cds--overflow-menu-options cds--overflow-menu-options--open"\n\t\t\t(click)="onClose($event)"\n\t\t\t[attr.aria-label]="dialogConfig.menuLabel">\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]="dialogConfig.content"\n\t\t\t\t[ngTemplateOutletContext]="{overflowMenu: this}">\n\t\t\t</ng-template>\n\t\t</ul>\n\t'})],OverflowMenuPane);let OverflowMenuCustomPane=class OverflowMenuCustomPane extends Dialog{constructor(elementRef,i18n,animationFrameService=null,elementService=null){super(elementRef,elementService,animationFrameService),this.elementRef=elementRef,this.i18n=i18n,this.animationFrameService=animationFrameService,this.elementService=elementService}onClick(event){this.doClose({reason:CloseReasons.interaction,target:event.target})}onDialogInit(){const positionOverflowMenu=pos=>{let offset;const closestRel=(0,utils._K)("position",["relative","fixed","absolute"],this.elementRef.nativeElement),topFix=closestRel?-1*closestRel.getBoundingClientRect().top:0,leftFix=closestRel?-1*closestRel.getBoundingClientRect().left:0;return offset=Math.round(this.dialog.nativeElement.offsetWidth/2)-20,this.dialogConfig.flip?utils_position.FK.addOffset(pos,topFix,-offset+leftFix):utils_position.FK.addOffset(pos,topFix,offset+leftFix)};this.addGap.bottom=positionOverflowMenu,this.addGap.top=positionOverflowMenu,this.dialogConfig.menuLabel||(this.dialogConfig.menuLabel=this.i18n.get().OVERFLOW_MENU.OVERFLOW)}};OverflowMenuCustomPane.ctorParameters=()=>[{type:core.ElementRef},{type:i18n.oc},{type:utils.NV,decorators:[{type:core.Optional}]},{type:utils.d2,decorators:[{type:core.Optional}]}],OverflowMenuCustomPane=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-overflow-custom-menu-pane, ibm-overflow-custom-menu-pane",template:'\n\t\t<div\n\t\t\t[attr.id]="dialogConfig.compID"\n\t\t\t[attr.aria-label]="dialogConfig.menuLabel"\n\t\t\t[attr.data-floating-menu-direction]="placement ? placement : null"\n\t\t\t[ngClass]="{\'cds--overflow-menu--flip\': dialogConfig.flip}"\n\t\t\tclass="cds--overflow-menu-options cds--overflow-menu-options--open"\n\t\t\trole="menu"\n\t\t\t(click)="onClick($event)"\n\t\t\t#dialog\n\t\t\t[attr.aria-label]="dialogConfig.menuLabel">\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]="dialogConfig.content"\n\t\t\t\t[ngTemplateOutletContext]="{overflowMenu: this}">\n\t\t\t</ng-template>\n\t\t</div>\n\t'})],OverflowMenuCustomPane);let OverflowMenuDirective=class OverflowMenuDirective extends DialogDirective{constructor(elementRef,viewContainerRef,dialogService,eventService){super(elementRef,viewContainerRef,dialogService,eventService),this.elementRef=elementRef,this.viewContainerRef=viewContainerRef,this.dialogService=dialogService,this.eventService=eventService,this.flip=!1,this.wrapperClass="",this.customPane=!1}set ibmOverflowMenu(template){this.cdsOverflowMenu=template}updateConfig(){this.dialogConfig.content=this.cdsOverflowMenu,this.dialogConfig.flip=this.flip,this.dialogConfig.offset=this.offset,this.dialogConfig.wrapperClass=this.wrapperClass}hostkeys(event){switch(event.key){case"Enter":case" ":event.preventDefault()}}open(){return super.open(this.customPane?OverflowMenuCustomPane:OverflowMenuPane)}};OverflowMenuDirective.ctorParameters=()=>[{type:core.ElementRef},{type:core.ViewContainerRef},{type:DialogService},{type:utils.PO}],OverflowMenuDirective.propDecorators={ibmOverflowMenu:[{type:core.Input}],cdsOverflowMenu:[{type:core.Input}],flip:[{type:core.Input}],offset:[{type:core.Input}],wrapperClass:[{type:core.Input}],customPane:[{type:core.Input}],hostkeys:[{type:core.HostListener,args:["keydown",["$event"]]}]},OverflowMenuDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsOverflowMenu], [ibmOverflowMenu]",exportAs:"overflowMenu",providers:[DialogService]})],OverflowMenuDirective);var src_button=__webpack_require__("./src/button/index.ts");let OverflowMenu=class OverflowMenu extends src_button.HL{constructor(elementRef,i18n){super(),this.elementRef=elementRef,this.i18n=i18n,this.buttonLabel=this.i18n.get().OVERFLOW_MENU.OVERFLOW,this.description=this.i18n.get().OVERFLOW_MENU.ICON_DESCRIPTION,this.flip=!1,this.placement="bottom",this.open=!1,this.openChange=new core.EventEmitter,this.wrapperClass="",this.triggerClass=""}handleOpenChange(event){this.open=event,this.openChange.emit(event)}};var Target;OverflowMenu.ctorParameters=()=>[{type:core.ElementRef},{type:i18n.oc}],OverflowMenu.propDecorators={buttonLabel:[{type:core.Input}],description:[{type:core.Input}],flip:[{type:core.Input}],placement:[{type:core.Input}],open:[{type:core.Input}],openChange:[{type:core.Output}],customTrigger:[{type:core.Input}],offset:[{type:core.Input}],wrapperClass:[{type:core.Input}],triggerClass:[{type:core.Input}],overflowMenuDirective:[{type:core.ContentChild,args:[OverflowMenuDirective]}]},OverflowMenu=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-overflow-menu, ibm-overflow-menu",template:'\n\t\t<cds-tooltip\n\t\t\tclass="cds--icon-tooltip"\n\t\t\t[description]="description"\n\t\t\t[caret]="caret"\n\t\t\t[dropShadow]="dropShadow"\n\t\t\t[highContrast]="highContrast"\n\t\t\t[isOpen]="isOpen"\n\t\t\t[align]="align"\n\t\t\t[autoAlign]="autoAlign"\n\t\t\t[enterDelayMs]="enterDelayMs"\n\t\t\t[leaveDelayMs]="leaveDelayMs">\n\t\t\t<button\n\t\t\t\tcdsButton="ghost"\n\t\t\t\t[cdsOverflowMenu]="options"\n\t\t\t\t[ngClass]="{\'cds--overflow-menu--open\': open}"\n\t\t\t\tclass="cds--overflow-menu {{triggerClass}}"\n\t\t\t\t[iconOnly]="true"\n\t\t\t\t[attr.aria-label]="buttonLabel"\n\t\t\t\t[flip]="flip"\n\t\t\t\t[isOpen]="open"\n\t\t\t\t(isOpenChange)="handleOpenChange($event)"\n\t\t\t\t[offset]="offset"\n\t\t\t\t[wrapperClass]="wrapperClass"\n\t\t\t\taria-haspopup="true"\n\t\t\t\ttype="button"\n\t\t\t\t[placement]="placement">\n\t\t\t\t<ng-template *ngIf="customTrigger; else defaultIcon" [ngTemplateOutlet]="customTrigger"></ng-template>\n\t\t\t</button>\n\t\t</cds-tooltip>\n\n\t\t<ng-template #options>\n\t\t\t<ng-content></ng-content>\n\t\t</ng-template>\n\t\t<ng-template #defaultIcon>\n\t\t\t<svg cdsIcon="overflow-menu--vertical" size="16" class="cds--overflow-menu__icon"></svg>\n\t\t</ng-template>\n\t',encapsulation:core.ViewEncapsulation.None,styles:["\n\t\t.cds--overflow-menu--open {\n\t\t\topacity: 1\n\t\t}\n\n\t\t/*\n\t\tRotate the overflow menu container as well as the icon, since\n\t\twe calculate our menu position based on the container, not the icon.\n\t\t*/\n\n\t\t.cds--data-table-v2 .cds--overflow-menu {\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\n\t\t.cds--data-table-v2 .cds--overflow-menu__icon {\n\t\t\ttransform: rotate(180deg);\n\t\t}\n\t"]})],OverflowMenu),function(Target){Target.self="_self",Target.blank="_blank",Target.parent="_parent",Target.top="_top"}(Target||(Target={}));let OverflowMenuOption=class OverflowMenuOption{constructor(elementRef){this.elementRef=elementRef,this.optionClass=!0,this.role="presentation",this.divider=!1,this.type="normal",this.disabled=!1,this.innerClass="",this.selected=new core.EventEmitter,this.tabIndex=-1,this.title=null}get isDanger(){return"danger"===this.type}get isDisabled(){return this.disabled}set target(value){Object.values(Target).includes(value)?this._target=value:console.warn(`\`target\` must have one of the following values: ${Object.values(Target).join(", ")}.\nPlease use the \`Target\` enum exported by carbon-components-angular`)}get target(){return this._target}get rel(){return this._target?"noreferrer noopener":null}onClick(){this.selected.emit()}onFocus(){setTimeout((()=>this.tabIndex=0))}onBlur(){setTimeout((()=>this.tabIndex=-1))}ngAfterViewInit(){const button=this.elementRef.nativeElement.querySelector("button, a"),textContainer=button.querySelector(".cds--overflow-menu-options__option-content");textContainer.scrollWidth>textContainer.offsetWidth&&(this.title=button.textContent)}};OverflowMenuOption.ctorParameters=()=>[{type:core.ElementRef}],OverflowMenuOption.propDecorators={optionClass:[{type:core.HostBinding,args:["class.cds--overflow-menu-options__option"]}],role:[{type:core.HostBinding,args:["attr.role"]}],isDanger:[{type:core.HostBinding,args:["class.cds--overflow-menu-options__option--danger"]}],isDisabled:[{type:core.HostBinding,args:["class.cds--overflow-menu-options__option--disabled"]}],divider:[{type:core.HostBinding,args:["class.cds--overflow-menu--divider"]},{type:core.Input}],type:[{type:core.Input}],disabled:[{type:core.Input}],href:[{type:core.Input}],target:[{type:core.Input}],innerClass:[{type:core.Input}],selected:[{type:core.Output}]},OverflowMenuOption=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-overflow-menu-option, ibm-overflow-menu-option",template:'\n\t\t<button\n\t\t\t*ngIf="!href"\n\t\t\tclass="cds--overflow-menu-options__btn {{innerClass}}"\n\t\t\trole="menuitem"\n\t\t\t[tabindex]="tabIndex"\n\t\t\t(focus)="onFocus()"\n\t\t\t(blur)="onBlur()"\n\t\t\t(click)="onClick()"\n\t\t\t[disabled]="disabled"\n\t\t\t[attr.title]="title">\n\t\t\t<ng-container *ngTemplateOutlet="tempOutlet"></ng-container>\n\t\t</button>\n\n\t\t<a\n\t\t\t*ngIf="href"\n\t\t\tclass="cds--overflow-menu-options__btn {{innerClass}}"\n\t\t\trole="menuitem"\n\t\t\t[tabindex]="tabIndex"\n\t\t\t(focus)="onFocus()"\n\t\t\t(blur)="onBlur()"\n\t\t\t(click)="onClick()"\n\t\t\t[attr.disabled]="disabled"\n\t\t\t[href]="href"\n\t\t\t[attr.target]="target"\n\t\t\t[attr.rel]="rel"\n\t\t\t[attr.title]="title">\n\t\t\t<ng-container *ngTemplateOutlet="tempOutlet"></ng-container>\n\t\t</a>\n\n\t\t<ng-template #tempOutlet>\n\t\t\t<div class="cds--overflow-menu-options__option-content">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</ng-template>\n\t'})],OverflowMenuOption);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts"),tooltip=__webpack_require__("./src/tooltip/index.ts");let DialogModule=class DialogModule{};DialogModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Dialog,OverflowMenu,OverflowMenuPane,OverflowMenuCustomPane,DialogDirective,OverflowMenuDirective,OverflowMenuOption],exports:[Dialog,OverflowMenu,OverflowMenuPane,OverflowMenuCustomPane,DialogDirective,OverflowMenuDirective,OverflowMenuOption],providers:[DialogService],imports:[common.CommonModule,i18n.LU,placeholder.Qq,experimental.OV,utils.As,icon.QX,src_button.hJ,tooltip.z8]})],DialogModule)},"./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)}}]);

package/docs/storybook/combobox-combobox-stories.67eec93c.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[9736],{"./src/icon/icon.directive.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{a:()=>IconDirective});var tslib__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_angular_core__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),_icon_service__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/icon/icon.service.ts"),_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@carbon/icon-helpers/es/index.js");let IconDirective=class IconDirective{constructor(elementRef,iconService){this.elementRef=elementRef,this.iconService=iconService,this.cdsIcon="",this.size="16",this.title="",this.ariaLabel="",this.ariaLabelledBy="",this.ariaHidden="",this.isFocusable=!1}set ibmIcon(iconName){this.cdsIcon=iconName}renderIcon(iconName){const root=this.elementRef.nativeElement;let icon;try{icon=this.iconService.get(iconName,this.size.toString())}catch(error){return void console.warn(error)}const domParser=new DOMParser,rawSVG=icon.svg,svgElement=domParser.parseFromString(rawSVG,"image/svg+xml").documentElement;let node="SVG"!==root.tagName.toUpperCase()?svgElement:svgElement.firstChild;for(root.innerHTML="";node;)root.appendChild(root.ownerDocument.importNode(node,!0)),node=node.nextSibling;const svg="SVG"!==root.tagName.toUpperCase()?svgElement:root,xmlns="http://www.w3.org/2000/svg";svg.setAttribute("xmlns",xmlns);const attributes=(0,_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_1__.u9)({width:icon.attrs.width,height:icon.attrs.height,viewBox:icon.attrs.viewBox,title:this.title,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledBy,"aria-hidden":this.ariaHidden,focusable:this.isFocusable.toString(),fill:icon.attrs.fill}),attrKeys=Object.keys(attributes);for(let i=0;i<attrKeys.length;i++){const key=attrKeys[i],value=attributes[key];"title"!==key&&(value&&svg.setAttribute(key,value))}if(attributes.title){const title=document.createElementNS(xmlns,"title");title.textContent=attributes.title,IconDirective.titleIdCounter++,title.setAttribute("id",`${icon.name}-title-${IconDirective.titleIdCounter}`),svg.insertBefore(title,svg.firstElementChild),svg.setAttribute("aria-labelledby",`${icon.name}-title-${IconDirective.titleIdCounter}`)}}ngAfterViewInit(){this.renderIcon(this.cdsIcon)}ngOnChanges({cdsIcon}){cdsIcon&&!cdsIcon.isFirstChange()&&this.renderIcon(this.cdsIcon)}};IconDirective.titleIdCounter=0,IconDirective.ctorParameters=()=>[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.ElementRef},{type:_icon_service__WEBPACK_IMPORTED_MODULE_0__.C6}],IconDirective.propDecorators={ibmIcon:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],cdsIcon:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],size:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],title:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],ariaLabel:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],ariaLabelledBy:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],ariaHidden:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],isFocusable:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}]},IconDirective=(0,tslib__WEBPACK_IMPORTED_MODULE_3__.gn)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_2__.Directive)({selector:"[cdsIcon], [ibmIcon]"})],IconDirective)},"./src/icon/icon.module.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{QX:()=>IconModule});var tslib__WEBPACK_IMPORTED_MODULE_58__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_angular_core__WEBPACK_IMPORTED_MODULE_57__=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),_angular_common__WEBPACK_IMPORTED_MODULE_59__=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),_icon_directive__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/icon/icon.directive.ts"),_icon_service__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/icon/icon.service.ts"),_carbon_icons_es_add_16__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@carbon/icons/es/add/16.js"),_carbon_icons_es_add_20__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@carbon/icons/es/add/20.js"),_carbon_icons_es_bee_16__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@carbon/icons/es/bee/16.js"),_carbon_icons_es_bee_20__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@carbon/icons/es/bee/20.js"),_carbon_icons_es_calendar_16__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@carbon/icons/es/calendar/16.js"),_carbon_icons_es_carbon_16__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@carbon/icons/es/carbon/16.js"),_carbon_icons_es_carbon_20__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/@carbon/icons/es/carbon/20.js"),_carbon_icons_es_caret_down_16__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/@carbon/icons/es/caret--down/16.js"),_carbon_icons_es_caret_left_16__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./node_modules/@carbon/icons/es/caret--left/16.js"),_carbon_icons_es_caret_right_16__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("./node_modules/@carbon/icons/es/caret--right/16.js"),_carbon_icons_es_caret_up_16__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("./node_modules/@carbon/icons/es/caret--up/16.js"),_carbon_icons_es_checkmark_16__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark/16.js"),_carbon_icons_es_checkmark_filled_16__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark--filled/16.js"),_carbon_icons_es_checkmark_filled_20__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark--filled/20.js"),_carbon_icons_es_checkmark_outline_16__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark--outline/16.js"),_carbon_icons_es_checkbox_16__WEBPACK_IMPORTED_MODULE_17__=__webpack_require__("./node_modules/@carbon/icons/es/checkbox/16.js"),_carbon_icons_es_checkbox_checked_filled_16__WEBPACK_IMPORTED_MODULE_18__=__webpack_require__("./node_modules/@carbon/icons/es/checkbox--checked--filled/16.js"),_carbon_icons_es_chevron_down_16__WEBPACK_IMPORTED_MODULE_19__=__webpack_require__("./node_modules/@carbon/icons/es/chevron--down/16.js"),_carbon_icons_es_chevron_right_16__WEBPACK_IMPORTED_MODULE_20__=__webpack_require__("./node_modules/@carbon/icons/es/chevron--right/16.js"),_carbon_icons_es_circle_dash_16__WEBPACK_IMPORTED_MODULE_21__=__webpack_require__("./node_modules/@carbon/icons/es/circle-dash/16.js"),_carbon_icons_es_close_16__WEBPACK_IMPORTED_MODULE_22__=__webpack_require__("./node_modules/@carbon/icons/es/close/16.js"),_carbon_icons_es_close_20__WEBPACK_IMPORTED_MODULE_23__=__webpack_require__("./node_modules/@carbon/icons/es/close/20.js"),_carbon_icons_es_copy_16__WEBPACK_IMPORTED_MODULE_24__=__webpack_require__("./node_modules/@carbon/icons/es/copy/16.js"),_carbon_icons_es_copy_20__WEBPACK_IMPORTED_MODULE_25__=__webpack_require__("./node_modules/@carbon/icons/es/copy/20.js"),_carbon_icons_es_data_2_16__WEBPACK_IMPORTED_MODULE_26__=__webpack_require__("./node_modules/@carbon/icons/es/data--2/16.js"),_carbon_icons_es_data_2_20__WEBPACK_IMPORTED_MODULE_27__=__webpack_require__("./node_modules/@carbon/icons/es/data--2/20.js"),_carbon_icons_es_document_16__WEBPACK_IMPORTED_MODULE_28__=__webpack_require__("./node_modules/@carbon/icons/es/document/16.js"),_carbon_icons_es_document_20__WEBPACK_IMPORTED_MODULE_29__=__webpack_require__("./node_modules/@carbon/icons/es/document/20.js"),_carbon_icons_es_download_16__WEBPACK_IMPORTED_MODULE_30__=__webpack_require__("./node_modules/@carbon/icons/es/download/16.js"),_carbon_icons_es_error_filled_16__WEBPACK_IMPORTED_MODULE_31__=__webpack_require__("./node_modules/@carbon/icons/es/error--filled/16.js"),_carbon_icons_es_error_filled_20__WEBPACK_IMPORTED_MODULE_32__=__webpack_require__("./node_modules/@carbon/icons/es/error--filled/20.js"),_carbon_icons_es_fade_16__WEBPACK_IMPORTED_MODULE_33__=__webpack_require__("./node_modules/@carbon/icons/es/fade/16.js"),_carbon_icons_es_fade_20__WEBPACK_IMPORTED_MODULE_34__=__webpack_require__("./node_modules/@carbon/icons/es/fade/20.js"),_carbon_icons_es_folder_16__WEBPACK_IMPORTED_MODULE_35__=__webpack_require__("./node_modules/@carbon/icons/es/folder/16.js"),_carbon_icons_es_incomplete_16__WEBPACK_IMPORTED_MODULE_36__=__webpack_require__("./node_modules/@carbon/icons/es/incomplete/16.js"),_carbon_icons_es_information_filled_16__WEBPACK_IMPORTED_MODULE_37__=__webpack_require__("./node_modules/@carbon/icons/es/information--filled/16.js"),_carbon_icons_es_information_filled_20__WEBPACK_IMPORTED_MODULE_38__=__webpack_require__("./node_modules/@carbon/icons/es/information--filled/20.js"),_carbon_icons_es_information_square_filled_20__WEBPACK_IMPORTED_MODULE_39__=__webpack_require__("./node_modules/@carbon/icons/es/information--square--filled/20.js"),_carbon_icons_es_menu_16__WEBPACK_IMPORTED_MODULE_40__=__webpack_require__("./node_modules/@carbon/icons/es/menu/16.js"),_carbon_icons_es_menu_20__WEBPACK_IMPORTED_MODULE_41__=__webpack_require__("./node_modules/@carbon/icons/es/menu/20.js"),_carbon_icons_es_overflow_menu_vertical_16__WEBPACK_IMPORTED_MODULE_42__=__webpack_require__("./node_modules/@carbon/icons/es/overflow-menu--vertical/16.js"),_carbon_icons_es_overflow_menu_horizontal_16__WEBPACK_IMPORTED_MODULE_43__=__webpack_require__("./node_modules/@carbon/icons/es/overflow-menu--horizontal/16.js"),_carbon_icons_es_save_16__WEBPACK_IMPORTED_MODULE_44__=__webpack_require__("./node_modules/@carbon/icons/es/save/16.js"),_carbon_icons_es_search_16__WEBPACK_IMPORTED_MODULE_45__=__webpack_require__("./node_modules/@carbon/icons/es/search/16.js"),_carbon_icons_es_settings_16__WEBPACK_IMPORTED_MODULE_46__=__webpack_require__("./node_modules/@carbon/icons/es/settings/16.js"),_carbon_icons_es_settings_adjust_16__WEBPACK_IMPORTED_MODULE_47__=__webpack_require__("./node_modules/@carbon/icons/es/settings--adjust/16.js"),_carbon_icons_es_subtract_16__WEBPACK_IMPORTED_MODULE_48__=__webpack_require__("./node_modules/@carbon/icons/es/subtract/16.js"),_carbon_icons_es_trash_can_16__WEBPACK_IMPORTED_MODULE_49__=__webpack_require__("./node_modules/@carbon/icons/es/trash-can/16.js"),_carbon_icons_es_warning_16__WEBPACK_IMPORTED_MODULE_50__=__webpack_require__("./node_modules/@carbon/icons/es/warning/16.js"),_carbon_icons_es_warning_filled_16__WEBPACK_IMPORTED_MODULE_51__=__webpack_require__("./node_modules/@carbon/icons/es/warning--filled/16.js"),_carbon_icons_es_warning_filled_20__WEBPACK_IMPORTED_MODULE_52__=__webpack_require__("./node_modules/@carbon/icons/es/warning--filled/20.js"),_carbon_icons_es_warning_alt_filled_16__WEBPACK_IMPORTED_MODULE_53__=__webpack_require__("./node_modules/@carbon/icons/es/warning--alt--filled/16.js"),_carbon_icons_es_warning_alt_filled_20__WEBPACK_IMPORTED_MODULE_54__=__webpack_require__("./node_modules/@carbon/icons/es/warning--alt--filled/20.js"),_carbon_icons_es_view_16__WEBPACK_IMPORTED_MODULE_55__=__webpack_require__("./node_modules/@carbon/icons/es/view/16.js"),_carbon_icons_es_view_off_16__WEBPACK_IMPORTED_MODULE_56__=__webpack_require__("./node_modules/@carbon/icons/es/view--off/16.js");const ICON_SERVICE_PROVIDER={provide:_icon_service__WEBPACK_IMPORTED_MODULE_1__.C6,deps:[[new _angular_core__WEBPACK_IMPORTED_MODULE_57__.Optional,new _angular_core__WEBPACK_IMPORTED_MODULE_57__.SkipSelf,_icon_service__WEBPACK_IMPORTED_MODULE_1__.C6]],useFactory:function ICON_SERVICE_PROVIDER_FACTORY(parentService){return parentService||new _icon_service__WEBPACK_IMPORTED_MODULE_1__.C6}};let IconModule=class IconModule{constructor(iconService){this.iconService=iconService,iconService.registerAll([_carbon_icons_es_add_16__WEBPACK_IMPORTED_MODULE_2__.Z,_carbon_icons_es_add_20__WEBPACK_IMPORTED_MODULE_3__.Z,_carbon_icons_es_bee_16__WEBPACK_IMPORTED_MODULE_4__.Z,_carbon_icons_es_bee_20__WEBPACK_IMPORTED_MODULE_5__.Z,_carbon_icons_es_calendar_16__WEBPACK_IMPORTED_MODULE_6__.Z,_carbon_icons_es_carbon_16__WEBPACK_IMPORTED_MODULE_7__.Z,_carbon_icons_es_carbon_20__WEBPACK_IMPORTED_MODULE_8__.Z,_carbon_icons_es_caret_down_16__WEBPACK_IMPORTED_MODULE_9__.Z,_carbon_icons_es_caret_left_16__WEBPACK_IMPORTED_MODULE_10__.Z,_carbon_icons_es_caret_right_16__WEBPACK_IMPORTED_MODULE_11__.Z,_carbon_icons_es_caret_up_16__WEBPACK_IMPORTED_MODULE_12__.Z,_carbon_icons_es_checkmark_16__WEBPACK_IMPORTED_MODULE_13__.Z,_carbon_icons_es_checkmark_filled_16__WEBPACK_IMPORTED_MODULE_14__.Z,_carbon_icons_es_checkmark_filled_20__WEBPACK_IMPORTED_MODULE_15__.Z,_carbon_icons_es_checkmark_outline_16__WEBPACK_IMPORTED_MODULE_16__.Z,_carbon_icons_es_checkbox_16__WEBPACK_IMPORTED_MODULE_17__.Z,_carbon_icons_es_checkbox_checked_filled_16__WEBPACK_IMPORTED_MODULE_18__.Z,_carbon_icons_es_chevron_down_16__WEBPACK_IMPORTED_MODULE_19__.Z,_carbon_icons_es_chevron_right_16__WEBPACK_IMPORTED_MODULE_20__.Z,_carbon_icons_es_circle_dash_16__WEBPACK_IMPORTED_MODULE_21__.Z,_carbon_icons_es_close_16__WEBPACK_IMPORTED_MODULE_22__.Z,_carbon_icons_es_close_20__WEBPACK_IMPORTED_MODULE_23__.Z,_carbon_icons_es_copy_16__WEBPACK_IMPORTED_MODULE_24__.Z,_carbon_icons_es_copy_20__WEBPACK_IMPORTED_MODULE_25__.Z,_carbon_icons_es_data_2_16__WEBPACK_IMPORTED_MODULE_26__.Z,_carbon_icons_es_data_2_20__WEBPACK_IMPORTED_MODULE_27__.Z,_carbon_icons_es_document_16__WEBPACK_IMPORTED_MODULE_28__.Z,_carbon_icons_es_document_20__WEBPACK_IMPORTED_MODULE_29__.Z,_carbon_icons_es_download_16__WEBPACK_IMPORTED_MODULE_30__.Z,_carbon_icons_es_error_filled_16__WEBPACK_IMPORTED_MODULE_31__.Z,_carbon_icons_es_error_filled_20__WEBPACK_IMPORTED_MODULE_32__.Z,_carbon_icons_es_fade_16__WEBPACK_IMPORTED_MODULE_33__.Z,_carbon_icons_es_fade_20__WEBPACK_IMPORTED_MODULE_34__.Z,_carbon_icons_es_folder_16__WEBPACK_IMPORTED_MODULE_35__.Z,_carbon_icons_es_incomplete_16__WEBPACK_IMPORTED_MODULE_36__.Z,_carbon_icons_es_information_filled_16__WEBPACK_IMPORTED_MODULE_37__.Z,_carbon_icons_es_information_filled_20__WEBPACK_IMPORTED_MODULE_38__.Z,_carbon_icons_es_information_square_filled_20__WEBPACK_IMPORTED_MODULE_39__.Z,_carbon_icons_es_menu_16__WEBPACK_IMPORTED_MODULE_40__.Z,_carbon_icons_es_menu_20__WEBPACK_IMPORTED_MODULE_41__.Z,_carbon_icons_es_overflow_menu_vertical_16__WEBPACK_IMPORTED_MODULE_42__.Z,_carbon_icons_es_overflow_menu_horizontal_16__WEBPACK_IMPORTED_MODULE_43__.Z,_carbon_icons_es_save_16__WEBPACK_IMPORTED_MODULE_44__.Z,_carbon_icons_es_search_16__WEBPACK_IMPORTED_MODULE_45__.Z,_carbon_icons_es_settings_16__WEBPACK_IMPORTED_MODULE_46__.Z,_carbon_icons_es_settings_adjust_16__WEBPACK_IMPORTED_MODULE_47__.Z,_carbon_icons_es_subtract_16__WEBPACK_IMPORTED_MODULE_48__.Z,_carbon_icons_es_trash_can_16__WEBPACK_IMPORTED_MODULE_49__.Z,_carbon_icons_es_view_16__WEBPACK_IMPORTED_MODULE_55__.Z,_carbon_icons_es_view_off_16__WEBPACK_IMPORTED_MODULE_56__.Z,_carbon_icons_es_warning_16__WEBPACK_IMPORTED_MODULE_50__.Z,_carbon_icons_es_warning_filled_16__WEBPACK_IMPORTED_MODULE_51__.Z,_carbon_icons_es_warning_filled_20__WEBPACK_IMPORTED_MODULE_52__.Z,_carbon_icons_es_warning_alt_filled_16__WEBPACK_IMPORTED_MODULE_53__.Z,_carbon_icons_es_warning_alt_filled_20__WEBPACK_IMPORTED_MODULE_54__.Z])}};IconModule.ctorParameters=()=>[{type:_icon_service__WEBPACK_IMPORTED_MODULE_1__.C6}],IconModule=(0,tslib__WEBPACK_IMPORTED_MODULE_58__.gn)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_57__.NgModule)({declarations:[_icon_directive__WEBPACK_IMPORTED_MODULE_0__.a],exports:[_icon_directive__WEBPACK_IMPORTED_MODULE_0__.a],imports:[_angular_common__WEBPACK_IMPORTED_MODULE_59__.CommonModule],providers:[ICON_SERVICE_PROVIDER]})],IconModule)},"./src/icon/icon.service.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{C6:()=>IconService});var tslib__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_angular_core__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@carbon/icon-helpers/es/index.js");class IconNameNotFoundError extends Error{constructor(name){super(`Icon ${name} not found`)}}class IconSizeNotFoundError extends Error{constructor(size,name){super("Size ${size} for ${name} not found")}}class IconMemoryCache extends class IconCache{}{constructor(){super(...arguments),this.iconMap=new Map}get(name,size){if(!this.iconMap.has(name))throw new IconNameNotFoundError(name);const sizeMap=this.iconMap.get(name);if(!sizeMap.has(size))throw new IconSizeNotFoundError(size,name);return sizeMap.get(size)}set(name,size,descriptor){this.iconMap.has(name)||this.iconMap.set(name,new Map);this.iconMap.get(name).set(size,descriptor)}}let IconService=class IconService{constructor(){this.iconCache=new IconMemoryCache}registerAll(descriptors){descriptors.forEach((icon=>this.register(icon)))}register(descriptor){const{name}=descriptor;this.registerAs(name,descriptor)}registerAs(name,descriptor){const{size}=descriptor;this.iconCache.set(name,size.toString(),descriptor)}get(name,size){try{const icon=this.iconCache.get(name,size.toString());return icon.svg||(icon.svg=(0,_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_0__.BB)(icon)),icon}catch(e){throw e}}configure(options){this.iconCache=options.cache}};IconService=(0,tslib__WEBPACK_IMPORTED_MODULE_1__.gn)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_2__.Injectable)()],IconService)},"./src/icon/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{ar:()=>icon_directive.a,QX:()=>icon_module.QX,C6:()=>icon_service.C6});var icon_directive=__webpack_require__("./src/icon/icon.directive.ts"),icon_module=__webpack_require__("./src/icon/icon.module.ts"),icon_service=__webpack_require__("./src/icon/icon.service.ts")},"./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/combobox/combobox.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,BasicMax:()=>BasicMax,Dynamic:()=>Dynamic,Fluid:()=>Fluid,MockQuerySearch:()=>MockQuerySearch,Multiselect:()=>Multiselect,ReactiveForms:()=>ReactiveForms,__namedExportsOrder:()=>__namedExportsOrder,default:()=>combobox_stories});var fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),dropdown=__webpack_require__("./src/dropdown/index.ts"),filter=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/filter.js"),utils=__webpack_require__("./src/utils/index.ts"),i18n=__webpack_require__("./src/i18n/index.ts");let ComboBox=class ComboBox{constructor(elementRef,dropdownService,i18n){this.elementRef=elementRef,this.dropdownService=dropdownService,this.i18n=i18n,this.id="combobox-"+ComboBox.comboBoxCount++,this.labelId="combobox-label-"+ComboBox.comboBoxCount++,this.items=[],this.type="single",this.size="md",this.hideLabel=!1,this.appendInline=null,this.invalid=!1,this.warn=!1,this.maxLength=null,this.theme="dark",this.selectionFeedback="top-after-reopen",this.autocomplete="list",this.disabled=!1,this.readonly=!1,this.fluid=!1,this.selected=new core.EventEmitter,this.submit=new core.EventEmitter,this.close=new core.EventEmitter,this.search=new core.EventEmitter,this.clear=new core.EventEmitter,this.hostClass=!0,this.open=!1,this.showClearButton=!1,this.pills=[],this.selectedValue="",this.outsideClick=this._outsideClick.bind(this),this.keyboardNav=this._keyboardNav.bind(this),this._dropUp=!1,this.noop=this._noop.bind(this),this.onTouchedCallback=this._noop,this.propagateChangeCallback=this._noop,this._placeholder=this.i18n.getOverridable("COMBOBOX.PLACEHOLDER"),this._closeMenuAria=this.i18n.getOverridable("COMBOBOX.A11Y.CLOSE_MENU"),this._openMenuAria=this.i18n.getOverridable("COMBOBOX.A11Y.OPEN_MENU"),this._clearSelectionsTitle=this.i18n.getOverridable("COMBOBOX.CLEAR_SELECTIONS"),this._clearSelectionsAria=this.i18n.getOverridable("COMBOBOX.A11Y.CLEAR_SELECTIONS"),this._clearSelectionTitle=this.i18n.getOverridable("COMBOBOX.CLEAR_SELECTED"),this._clearSelectionAria=this.i18n.getOverridable("COMBOBOX.A11Y.CLEAR_SELECTED"),this._isFocused=!1}set placeholder(value){this._placeholder.override(value)}get placeholder(){return this._placeholder.value}set openMenuAria(value){this._openMenuAria.override(value)}get openMenuAria(){return this._openMenuAria.value}set closeMenuAria(value){this._closeMenuAria.override(value)}get closeMenuAria(){return this._closeMenuAria.value}set clearSelectionsTitle(value){this._clearSelectionsTitle.override(value)}get clearSelectionsTitle(){return this._clearSelectionsTitle.value}set clearSelectionsAria(value){this._clearSelectionsAria.override(value)}get clearSelectionsAria(){return this._clearSelectionsAria.value}set clearSelectionTitle(value){this._clearSelectionTitle.override(value)}get clearSelectionTitle(){return this._clearSelectionTitle.value}set clearSelectionAria(value){this._clearSelectionAria.override(value)}get clearSelectionAria(){return this._clearSelectionAria.value}ngOnChanges(changes){changes.items&&(this.view.items=changes.items.currentValue,this.updateSelected(),("multi"===this.type||"single"===this.type&&!this.selectedValue)&&this.onSearch(this.input.nativeElement.value,!1))}ngAfterContentInit(){if(this.view){this.view.type=this.type;const isUpdate=event=>event&&event.isUpdate;this.view.select.subscribe((event=>{if(Array.isArray(event)){if(this.updatePills(),!isUpdate(event)){if(this.itemValueKey&&this.view.getSelected()){const values=this.view.getSelected().map((item=>item[this.itemValueKey]));this.propagateChangeCallback(values)}else this.propagateChangeCallback(this.view.getSelected());this.selected.emit(event)}}else event.item&&event.item.selected?(this.showClearButton=!0,this.selectedValue=event.item.content,isUpdate(event)||(this.itemValueKey?this.propagateChangeCallback(event.item[this.itemValueKey]):this.propagateChangeCallback(event.item))):(this.selectedValue="",isUpdate(event)||this.propagateChangeCallback(null)),isUpdate(event)||(this.elementRef.nativeElement.querySelector("input").focus(),this.view.filterBy(""),this.selected.emit(event.item)),this.closeDropdown()})),setTimeout((()=>{this.updateSelected()})),this.view.blurIntent.pipe((0,filter.h)((v=>"top"===v))).subscribe((()=>{this.elementRef.nativeElement.querySelector(".cds--text-input").focus()}))}}ngAfterViewInit(){null===this.appendInline&&(0,utils.OQ)(this.elementRef.nativeElement)?this.appendInline=!1:null===this.appendInline&&(this.appendInline=!0)}ngOnDestroy(){this.appendInline||this._appendToDropdown()}hostkeys(ev){"Escape"===ev.key?this.closeDropdown():"ArrowDown"!==ev.key||this.dropdownMenu&&this.dropdownMenu.nativeElement.contains(ev.target)||(ev.preventDefault(),this.openDropdown(),setTimeout((()=>{this.view.initFocus()}),0)),this.open&&"Tab"===ev.key&&(this.dropdownMenu.nativeElement.contains(ev.target)||ev.target===this.input.nativeElement)&&this.closeDropdown(),this.open&&"Tab"===ev.key&&ev.shiftKey&&this.closeDropdown()}_noop(){}writeValue(value){if("single"===this.type){if(this.itemValueKey){const newValue=Object.assign({},this.view.getListItems().find((item=>item[this.itemValueKey]===value)));newValue.selected=!0,this.view.propagateSelected([newValue])}else this.view.propagateSelected([value||""]);this.showClearButton=!(!value||!this.view.getSelected().length)}else if(this.itemValueKey){let newValues=[];for(const v of value??[])for(const item of this.view.getListItems())item[this.itemValueKey]===v&&newValues.push(Object.assign({},item,{selected:!0}));this.view.propagateSelected(newValues)}else this.view.propagateSelected(value||[""]);this.updateSelected()}onBlur(){this.onTouchedCallback()}registerOnChange(fn){this.propagateChangeCallback=fn}registerOnTouched(fn){this.onTouchedCallback=fn}setDisabledState(isDisabled){this.disabled=isDisabled}updatePills(){this.pills=this.view.getSelected()||[],this.checkForReorder()}clearSelected(event){this.items=this.items.map((item=>(item.disabled||(item.selected=!1),item))),this.view.items=this.items,this.updatePills();const selected=this.view.getSelected();if(this.itemValueKey&&selected){const values=selected.map((item=>item[this.itemValueKey]));this.propagateChangeCallback(values)}else this.propagateChangeCallback(selected);this.selected.emit(selected),this.clear.emit(event)}closeDropdown(){this.open=!1,this.checkForReorder(),this.close.emit(),this.appendInline||this._appendToDropdown(),document.removeEventListener("click",this.outsideClick,!0)}openDropdown(){this.disabled||this.readonly||(this.open=!0,this._dropUp=!1,this.appendInline||this._appendToBody(),document.addEventListener("click",this.outsideClick,!0),setTimeout((()=>{null!==this.dropUp&&void 0!==this.dropUp||(this._dropUp=this._shouldDropUp())}),0))}toggleDropdown(){this.open?this.closeDropdown():this.openDropdown()}onSearch(searchString,shouldEmitSearch=!0){if(shouldEmitSearch&&this.search.emit(searchString),this.showClearButton=!!searchString,this.view.filterBy(searchString),""!==searchString?this.open||this.openDropdown():(this.selectedValue="","multi"!==this.type||"top"!==this.selectionFeedback&&"top-after-reopen"!==this.selectionFeedback||this.view.reorderSelected()),"single"===this.type){if(!this.view.getListItems().some((item=>item.content.toLowerCase().includes(searchString.toLowerCase())))){const selected=this.view.getSelected();selected&&selected[0]||this.view.filterBy(searchString)}}}onSubmit(event){this.submit.emit({items:this.view.getListItems(),index:0,value:{content:event.target.value,selected:!1}})}clearInput(event){event.stopPropagation(),event.preventDefault(),this.disabled||this.readonly||("single"===this.type&&(this.clearSelected(event),this.closeDropdown()),this.selectedValue="",this.input.nativeElement.value="",this.showClearButton=!1,this.input.nativeElement.focus(),this.onSearch(this.input.nativeElement.value))}isTemplate(value){return value instanceof core.TemplateRef}_keyboardNav(event){"Escape"===event.key&&this.open&&event.stopImmediatePropagation(),"Escape"===event.key?(event.preventDefault(),this.closeDropdown(),this.input.nativeElement.focus()):this.open&&"Tab"===event.key&&(this.input.nativeElement.focus(),this.input.nativeElement.dispatchEvent(new KeyboardEvent("keydown",{bubbles:!0,cancelable:!0,key:"Tab"})),this.closeDropdown())}_appendToBody(){this.dropdownService.appendToBody(this.listbox.nativeElement,this.dropdownMenu.nativeElement,`${this.elementRef.nativeElement.className}${this.open?" cds--list-box--expanded":""}`),this.dropdownMenu.nativeElement.addEventListener("keydown",this.keyboardNav,!0)}_appendToDropdown(){this.dropdownService.appendToDropdown(this.elementRef.nativeElement),this.dropdownMenu.nativeElement.removeEventListener("keydown",this.keyboardNav,!0)}_shouldDropUp(){const menu=this.dropdownMenu&&this.dropdownMenu.nativeElement.querySelector(".cds--list-box__menu"),menuRect=menu&&menu.getBoundingClientRect();if(menu&&menuRect){return(0,utils.O3)(menu).reduce(((shouldDropUp,parent)=>{const parentRect=parent.getBoundingClientRect(),isBelowParent=!(menuRect.bottom<=parentRect.bottom);return shouldDropUp||isBelowParent}),!1)}return!1}_outsideClick(event){this.elementRef.nativeElement.contains(event.target)||this.dropdownMenu.nativeElement.contains(event.target)||this.closeDropdown()}handleFocus(event){this._isFocused="focus"===event.type}updateSelected(){const selected=this.view.getSelected();if("multi"===this.type)this.updatePills();else if(selected){const value=selected[0]?selected[0].content:"";selected[0]&&selected[0];this.selectedValue=value,this.showClearButton=!!value}}checkForReorder(){const topAfterReopen=!this.open&&"top-after-reopen"===this.selectionFeedback;"multi"!==this.type||!topAfterReopen&&"top"!==this.selectionFeedback||this.view.reorderSelected(!0)}};ComboBox.comboBoxCount=0,ComboBox.ctorParameters=()=>[{type:core.ElementRef},{type:dropdown.Vn},{type:i18n.oc}],ComboBox.propDecorators={placeholder:[{type:core.Input}],openMenuAria:[{type:core.Input}],closeMenuAria:[{type:core.Input}],clearSelectionsTitle:[{type:core.Input}],clearSelectionsAria:[{type:core.Input}],clearSelectionTitle:[{type:core.Input}],clearSelectionAria:[{type:core.Input}],id:[{type:core.Input}],labelId:[{type:core.Input}],items:[{type:core.Input}],type:[{type:core.Input}],size:[{type:core.Input}],itemValueKey:[{type:core.Input}],label:[{type:core.Input}],hideLabel:[{type:core.Input}],helperText:[{type:core.Input}],appendInline:[{type:core.Input}],invalid:[{type:core.Input}],invalidText:[{type:core.Input}],warn:[{type:core.Input}],warnText:[{type:core.Input}],maxLength:[{type:core.Input}],theme:[{type:core.Input}],selectionFeedback:[{type:core.Input}],autocomplete:[{type:core.Input}],dropUp:[{type:core.Input}],disabled:[{type:core.Input}],readonly:[{type:core.Input}],fluid:[{type:core.Input}],selected:[{type:core.Output}],submit:[{type:core.Output}],close:[{type:core.Output}],search:[{type:core.Output}],clear:[{type:core.Output}],view:[{type:core.ContentChild,args:[dropdown.jq,{static:!0}]}],dropdownMenu:[{type:core.ViewChild,args:["dropdownMenu"]}],input:[{type:core.ViewChild,args:["input",{static:!0}]}],listbox:[{type:core.ViewChild,args:["listbox",{static:!0}]}],hostClass:[{type:core.HostBinding,args:["class.cds--list-box__wrapper"]}],hostkeys:[{type:core.HostListener,args:["keydown",["$event"]]}]},ComboBox=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-combo-box, ibm-combo-box",template:'\n\t\t<div\n\t\t\tclass="cds--list-box__wrapper"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--list-box__wrapper--fluid\': fluid,\n\t\t\t\t\'cds--list-box__wrapper--fluid--invalid\': fluid && invalid,\n\t\t\t\t\'cds--list-box__wrapper--fluid--focus\': fluid && _isFocused\n\t\t\t}">\n\t\t\t<label\n\t\t\t\t*ngIf="label"\n\t\t\t\t[for]="id"\n\t\t\t\t[id]="labelId"\n\t\t\t\tclass="cds--label"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--label--disabled\': disabled,\n\t\t\t\t\t\'cds--visually-hidden\': hideLabel\n\t\t\t\t}">\n\t\t\t\t<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\t#listbox\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--multi-select cds--multi-select--filterable\': type === \'multi\',\n\t\t\t\t\t\'cds--list-box--light\': theme === \'light\',\n\t\t\t\t\t\'cds--list-box--expanded\': open,\n\t\t\t\t\t\'cds--list-box--sm\': size === \'sm\',\n\t\t\t\t\t\'cds--list-box--md\': size === \'md\',\n\t\t\t\t\t\'cds--list-box--lg\': size === \'lg\',\n\t\t\t\t\t\'cds--list-box--disabled\': disabled,\n\t\t\t\t\t\'cds--combo-box--readonly\': readonly,\n\t\t\t\t\t\'cds--combo-box--warning cds--list-box--warning\': warn,\n\t\t\t\t\t\'cds--list-box--invalid\': invalid\n\t\t\t\t}"\n\t\t\t\tclass="cds--list-box cds--combo-box"\n\t\t\t\t[attr.data-invalid]="(invalid ? true : null)">\n\t\t\t\t<div\n\t\t\t\t\tclass="cds--list-box__field"\n\t\t\t\t\t(click)="toggleDropdown()"\n\t\t\t\t\t(blur)="onBlur()">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf="type === \'multi\' && pills.length > 0"\n\t\t\t\t\t\tclass="cds--tag cds--tag--filter cds--tag--high-contrast"\n\t\t\t\t\t\t[ngClass]="{\'cds--tag--disabled\': disabled || readonly}">\n\t\t\t\t\t\t<span class="cds--tag__label">{{ pills.length }}</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype="button"\n\t\t\t\t\t\t\t(click)="clearSelected($event)"\n\t\t\t\t\t\t\t(blur)="onBlur()"\n\t\t\t\t\t\t\t(keydown.enter)="clearSelected($event)"\n\t\t\t\t\t\t\tclass="cds--tag__close-icon"\n\t\t\t\t\t\t\ttabindex="0"\n\t\t\t\t\t\t\t[title]="clearSelectionsTitle"\n\t\t\t\t\t\t\t[disabled]="disabled || readonly"\n\t\t\t\t\t\t\t[attr.aria-label]="clearSelectionAria">\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tfocusable="false"\n\t\t\t\t\t\t\t\tpreserveAspectRatio="xMidYMid meet"\n\t\t\t\t\t\t\t\tstyle="will-change: transform;"\n\t\t\t\t\t\t\t\trole="img"\n\t\t\t\t\t\t\t\txmlns="http://www.w3.org/2000/svg"\n\t\t\t\t\t\t\t\twidth="16"\n\t\t\t\t\t\t\t\theight="16"\n\t\t\t\t\t\t\t\tviewBox="0 0 16 16"\n\t\t\t\t\t\t\t\taria-hidden="true">\n\t\t\t\t\t\t\t\t<path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#input\n\t\t\t\t\t\ttype="text"\n\t\t\t\t\t\tautocomplete="off"\n\t\t\t\t\t\trole="combobox"\n\t\t\t\t\t\t[disabled]="disabled"\n\t\t\t\t\t\t[readOnly]="readonly"\n\t\t\t\t\t\t(input)="onSearch($event.target.value)"\n\t\t\t\t\t\t(focus)="fluid ? handleFocus($event) : null"\n\t\t\t\t\t\t(blur)="fluid ? handleFocus($event) : onBlur()"\n\t\t\t\t\t\t(keydown.enter)="onSubmit($event)"\n\t\t\t\t\t\t[value]="selectedValue"\n\t\t\t\t\t\tclass="cds--text-input"\n\t\t\t\t\t\t[ngClass]="{\'cds--text-input--empty\': !showClearButton}"\n\t\t\t\t\t\ttabindex="0"\n\t\t\t\t\t\t[id]="id"\n\t\t\t\t\t\t[attr.aria-labelledby]="labelId"\n\t\t\t\t\t\t[attr.aria-expanded]="open"\n\t\t\t\t\t\taria-haspopup="listbox"\n\t\t\t\t\t\t[attr.maxlength]="maxLength"\n\t\t\t\t\t\t[attr.aria-controls]="open ? view?.listId : null"\n\t\t\t\t\t\t[attr.aria-autocomplete]="autocomplete"\n\t\t\t\t\t\t[placeholder]="placeholder"/>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf="invalid"\n\t\t\t\t\t\tcdsIcon="warning--filled"\n\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\tclass="cds--list-box__invalid-icon">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf="!invalid && warn"\n\t\t\t\t\t\tcdsIcon="warning--alt--filled"\n\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\tclass="cds--list-box__invalid-icon cds--list-box__invalid-icon--warning">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf="showClearButton"\n\t\t\t\t\t\trole="button"\n\t\t\t\t\t\tclass="cds--list-box__selection"\n\t\t\t\t\t\ttabindex="0"\n\t\t\t\t\t\t[attr.aria-label]="clearSelectionAria"\n\t\t\t\t\t\t[title]="clearSelectionTitle"\n\t\t\t\t\t\t(keyup.enter)="clearInput($event)"\n\t\t\t\t\t\t(click)="clearInput($event)"\n\t\t\t\t\t\t(blur)="onBlur()">\n\t\t\t\t\t\t<svg cdsIcon="close" size="16"></svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype="button"\n\t\t\t\t\t\trole="button"\n\t\t\t\t\t\tclass="cds--list-box__menu-icon"\n\t\t\t\t\t\ttabindex="-1"\n\t\t\t\t\t\t[title]="open ? closeMenuAria : openMenuAria"\n\t\t\t\t\t\t[attr.aria-label]="open ? closeMenuAria : openMenuAria"\n\t\t\t\t\t\t[ngClass]="{\'cds--list-box__menu-icon--open\': open}">\n\t\t\t\t\t\t<svg cdsIcon="chevron--down" size="16"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t#dropdownMenu\n\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\'cds--list-box--up\': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t\t\t}">\n\t\t\t\t\t<ng-content *ngIf="open"></ng-content>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<hr *ngIf="fluid" class="cds--list-box__divider" />\n\t\t\t<div\n\t\t\t\t*ngIf="helperText && !invalid && !warn && !fluid"\n\t\t\t\tclass="cds--form__helper-text"\n\t\t\t\t[ngClass]="{\'cds--form__helper-text--disabled\': disabled}">\n\t\t\t\t<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf="invalid" class="cds--form-requirement">\n\t\t\t\t<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>\n\t\t\t\t<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf="!invalid && warn" class="cds--form-requirement">\n\t\t\t\t<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:ComboBox,multi:!0}]})],ComboBox);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let ComboBoxModule=class ComboBoxModule{};ComboBoxModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[ComboBox],exports:[ComboBox,dropdown.kW],imports:[common.CommonModule,dropdown.kW,i18n.LU,utils.As,icon.QX],providers:[dropdown.Vn]})],ComboBoxModule);let DynamicListComboBox=class DynamicListComboBox{constructor(){this.items=[{content:"one"},{content:"two"},{content:"three"},{content:"four"}]}updateSelected(event){this.items.forEach((item=>{event.some((selectedItem=>selectedItem.content===item.content))?item.selected=!0:item.selected=!1}))}ngAfterViewInit(){setTimeout((()=>{const newItems=JSON.parse(JSON.stringify(this.items));newItems.push({content:`New ${newItems.length}`}),this.items=newItems}),4e3)}};DynamicListComboBox=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-dynamic-list-combobox",template:'\n\t\t<cds-combo-box\n\t\t\t[(items)]="items"\n\t\t\ttype="multi"\n\t\t\t(selected)="updateSelected($event)">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t'})],DynamicListComboBox);let MockQueryCombobox=class MockQueryCombobox{constructor(){this.filterItems=[]}onSearch(){setTimeout((()=>{this.filterItems=[{content:`Random ${Math.random()}`},{content:`Random ${Math.random()}`},{content:`Random ${Math.random()}`},{content:`Random ${Math.random()}`}]}),1e3)}};MockQueryCombobox=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-mock-query-search",template:'\n\t\t<cds-combo-box\n\t\t\tappendInline="true"\n\t\t\t[items]="filterItems"\n\t\t\t(search)="onSearch($event)">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t'})],MockQueryCombobox);var isEqual=__webpack_require__("./node_modules/lodash-es/isEqual.js");let ReactiveFormsCombobox=class ReactiveFormsCombobox{constructor(fb){this.fb=fb,this.invalid=!1,this.invalidText="",this.warn=!1,this.warnText="",this.label="",this.helperText="",this.size="md",this.theme="dark",this._items=[]}set items(newItems){newItems.length||(newItems=[]),(0,isEqual.Z)(this._items,newItems)||(this._items=newItems)}set disabled(isDisabled){this.sampleForm&&(isDisabled?this.sampleForm.disable():this.sampleForm.enable())}ngOnInit(){this.sampleForm=this.fb.group({combobox:new fesm2020_forms.NI,multibox:new fesm2020_forms.NI}),this.sampleForm.get("combobox")?.setValue("four"),this.sampleForm.get("multibox")?.setValue(["four","two"])}};ReactiveFormsCombobox.ctorParameters=()=>[{type:fesm2020_forms.qu}],ReactiveFormsCombobox.propDecorators={invalid:[{type:core.Input}],invalidText:[{type:core.Input}],warn:[{type:core.Input}],warnText:[{type:core.Input}],label:[{type:core.Input}],helperText:[{type:core.Input}],size:[{type:core.Input}],theme:[{type:core.Input}],items:[{type:core.Input}],disabled:[{type:core.Input}]},ReactiveFormsCombobox=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-reactive-combobox",template:'\n\t\t<form [formGroup]="sampleForm" (ngSubmit)="onSubmit(sampleForm)">\n\t\t\t<cds-combo-box\n\t\t\t\tformControlName="combobox"\n\t\t\t\t[size]="size"\n\t\t\t\t[label]="label"\n\t\t\t\t[helperText]="helperText"\n\t\t\t\titemValueKey="content"\n\t\t\t\t[theme]="theme"\n\t\t\t\t[invalid]="invalid"\n\t\t\t\t[invalidText]="invalidText"\n\t\t\t\t[warn]="warn"\n\t\t\t\t[warnText]="warnText"\n\t\t\t\t[items]="_items">\n\t\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t\t</cds-combo-box>\n\t\t\tselected: {{ sampleForm.get("combobox").value | json }}\n\t\t\t<cds-combo-box\n\t\t\t\tstyle="margin-top: 40px"\n\t\t\t\tformControlName="multibox"\n\t\t\t\t[label]="label"\n\t\t\t\t[size]="size"\n\t\t\t\titemValueKey="content"\n\t\t\t\t[helperText]="helperText"\n\t\t\t\ttype="multi"\n\t\t\t\t[invalid]="invalid"\n\t\t\t\t[invalidText]="invalidText"\n\t\t\t\t[warn]="warn"\n\t\t\t\t[warnText]="warnText"\n\t\t\t\t[items]="_items">\n\t\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t\t</cds-combo-box>\n\t\t\tselected: {{ sampleForm.get("multibox").value | json }}\n\t\t</form>\n\t'})],ReactiveFormsCombobox);const combobox_stories={title:"Components/Combobox",decorators:[(0,dist.moduleMetadata)({declarations:[DynamicListComboBox,ReactiveFormsCombobox,MockQueryCombobox],imports:[fesm2020_forms.u5,fesm2020_forms.UX,ComboBoxModule]})],args:{label:"Label",hideLabel:!1,helperText:"Optional helper text",disabled:!1,readonly:!1,invalid:!1,invalidText:"A valid value is required",warn:!1,warnText:"This is a warning",items:[{content:"one"},{content:"two"},{content:"three"},{content:"four"},{content:"five"},{content:"six"},{content:"seven"},{content:"eight"},{content:"nine"},{content:"ten"}],appendInline:!1,dropUp:!1,selectionFeedback:"top-after-reopen",size:"md",theme:"dark",fluid:!1},argTypes:{size:{options:["sm","md","lg"],control:"radio"},theme:{options:["light","dark"],control:"radio"},maxLength:{control:!1},type:{control:!1},selected:{action:"Selection changed!"},submit:{action:"Submit"},search:{action:"Search"},clear:{action:"Clear!"}},parameters:{layout:"centered"},component:ComboBox},Template=args=>({props:args,template:'\n        <cds-combo-box\n            [(ngModel)]="model"\n            [disabled]="disabled"\n            [readonly]="readonly"\n            [invalid]="invalid"\n            [size]="size"\n            [appendInline]="appendInline"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [label]="label"\n            [hideLabel]="hideLabel"\n            [helperText]="helperText"\n            [items]="items"\n            [theme]="theme"\n            [dropUp]="dropUp"\n            [fluid]="fluid"\n            (selected)="selected($event)"\n            (submit)="submit($event)"\n            (search)="search($event)"\n            (clear)="clear($event)">\n            <cds-dropdown-list></cds-dropdown-list>\n        </cds-combo-box>\n        <span>{{model | json}}</span>\n    '}),Basic=Template.bind({});Basic.argTypes={items:{controls:!1}};const BasicMax=(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/combobox/stories/app-dynamic-list-combobox.component.ts\n        --\x3e\n        <app-dynamic-list-combobox></app-dynamic-list-combobox>\n    "})).bind({});BasicMax.storyName="Basic with max length",BasicMax.args={maxLength:4},BasicMax.argTypes={maxLength:{control:"number"}};const Dynamic=(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/combobox/stories/app-dynamic-list-combobox.component.ts\n        --\x3e\n        <app-dynamic-list-combobox></app-dynamic-list-combobox>\n    "})).bind({});Dynamic.storyName="Dynamically added list items",Dynamic.parameters={controls:{disable:!0}};const Fluid=Template.bind({});Fluid.args={fluid:!0};const Multiselect=(args=>({props:args,template:'\n        <cds-combo-box\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [label]="label"\n            [hideLabel]="hideLabel"\n            [warn]="warn"\n            [disabled]="disabled"\n            [readonly]="readonly"\n            [size]="size"\n            [helperText]="helperText"\n            [appendInline]="false"\n            [items]="items"\n            [theme]="theme"\n            [selectionFeedback]="selectionFeedback"\n            [dropUp]="dropUp"\n            [appendInline]="appendInline"\n            [fluid]="fluid"\n            type="multi"\n            (selected)="selected($event)"\n            (submit)="submit($event)"\n            (clear)="clear($event)">\n            <cds-dropdown-list></cds-dropdown-list>\n        </cds-combo-box>\n    '})).bind({});Multiselect.argTypes={selectionFeedback:"top-after-reopen"};const ReactiveForms=(args=>({props:args,template:'\n        \x3c!--\n        app-* components are for demo purposes only.\n        You can create your own implementation by using the component source found at:\n        https://github.com/IBM/carbon-components-angular/tree/master/src/combobox/stories/app-reactive-combobox.component.ts\n        --\x3e\n        <app-reactive-combobox\n            [disabled]="disabled"\n            [invalid]="invalid"\n            [size]="size"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [label]="label"\n            [helperText]="helperText"\n            [items]="items"\n            [theme]="theme">\n        </app-reactive-combobox>\n    '})).bind({}),MockQuerySearch=(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/combobox/stories/app-mock-query-search.component.ts\n        --\x3e\n        <app-mock-query-search></app-mock-query-search>\n    "})).bind({});MockQuerySearch.parameters={controls:{disable:!0}},Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-combo-box\n            [(ngModel)]="model"\n            [disabled]="disabled"\n            [readonly]="readonly"\n            [invalid]="invalid"\n            [size]="size"\n            [appendInline]="appendInline"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [label]="label"\n            [hideLabel]="hideLabel"\n            [helperText]="helperText"\n            [items]="items"\n            [theme]="theme"\n            [dropUp]="dropUp"\n            [fluid]="fluid"\n            (selected)="selected($event)"\n            (submit)="submit($event)"\n            (search)="search($event)"\n            (clear)="clear($event)">\n            <cds-dropdown-list></cds-dropdown-list>\n        </cds-combo-box>\n        <span>{{model | json}}</span>\n    `\n})',...Basic.parameters?.docs?.source}}},BasicMax.parameters={...BasicMax.parameters,docs:{...BasicMax.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/combobox/stories/app-dynamic-list-combobox.component.ts\n        --\x3e\n        <app-dynamic-list-combobox></app-dynamic-list-combobox>\n    `\n})",...BasicMax.parameters?.docs?.source}}},Dynamic.parameters={...Dynamic.parameters,docs:{...Dynamic.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/combobox/stories/app-dynamic-list-combobox.component.ts\n        --\x3e\n        <app-dynamic-list-combobox></app-dynamic-list-combobox>\n    `\n})",...Dynamic.parameters?.docs?.source}}},Fluid.parameters={...Fluid.parameters,docs:{...Fluid.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-combo-box\n            [(ngModel)]="model"\n            [disabled]="disabled"\n            [readonly]="readonly"\n            [invalid]="invalid"\n            [size]="size"\n            [appendInline]="appendInline"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [label]="label"\n            [hideLabel]="hideLabel"\n            [helperText]="helperText"\n            [items]="items"\n            [theme]="theme"\n            [dropUp]="dropUp"\n            [fluid]="fluid"\n            (selected)="selected($event)"\n            (submit)="submit($event)"\n            (search)="search($event)"\n            (clear)="clear($event)">\n            <cds-dropdown-list></cds-dropdown-list>\n        </cds-combo-box>\n        <span>{{model | json}}</span>\n    `\n})',...Fluid.parameters?.docs?.source}}},Multiselect.parameters={...Multiselect.parameters,docs:{...Multiselect.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-combo-box\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [label]="label"\n            [hideLabel]="hideLabel"\n            [warn]="warn"\n            [disabled]="disabled"\n            [readonly]="readonly"\n            [size]="size"\n            [helperText]="helperText"\n            [appendInline]="false"\n            [items]="items"\n            [theme]="theme"\n            [selectionFeedback]="selectionFeedback"\n            [dropUp]="dropUp"\n            [appendInline]="appendInline"\n            [fluid]="fluid"\n            type="multi"\n            (selected)="selected($event)"\n            (submit)="submit($event)"\n            (clear)="clear($event)">\n            <cds-dropdown-list></cds-dropdown-list>\n        </cds-combo-box>\n    `\n})',...Multiselect.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/combobox/stories/app-reactive-combobox.component.ts\n        --\x3e\n        <app-reactive-combobox\n            [disabled]="disabled"\n            [invalid]="invalid"\n            [size]="size"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [label]="label"\n            [helperText]="helperText"\n            [items]="items"\n            [theme]="theme">\n        </app-reactive-combobox>\n    `\n})',...ReactiveForms.parameters?.docs?.source}}},MockQuerySearch.parameters={...MockQuerySearch.parameters,docs:{...MockQuerySearch.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/combobox/stories/app-mock-query-search.component.ts\n        --\x3e\n        <app-mock-query-search></app-mock-query-search>\n    `\n})",...MockQuerySearch.parameters?.docs?.source}}};const __namedExportsOrder=["Basic","BasicMax","Dynamic","Fluid","Multiselect","ReactiveForms","MockQuerySearch"]}}]);