carbon-components-angular/docs/storybook/3931.36351824.iframe.bundle.js

Next generation components

"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)}}]);