carbon-components-angular/docs/storybook/combo-button-combo-button-stories.17bfb9ad.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[653],{"./src/button/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{HL:()=>BaseIconButton,zx:()=>Button,hJ:()=>ButtonModule,uV:()=>ButtonSet,hU:()=>IconButton});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let Button=class Button{constructor(){this.cdsButton="primary",this.skeleton=!1,this.iconOnly=!1,this.isExpressive=!1,this.baseClass=!0}set ibmButton(type){this.cdsButton=type}get primaryButton(){return"primary"===this.cdsButton||!this.cdsButton}get secondaryButton(){return"secondary"===this.cdsButton}get tertiaryButton(){return"tertiary"===this.cdsButton}get ghostButton(){return"ghost"===this.cdsButton}get dangerButton(){return"danger"===this.cdsButton||"danger--primary"===this.cdsButton}get dangerTertiary(){return"danger--tertiary"===this.cdsButton}get dangerGhost(){return"danger--ghost"===this.cdsButton}get smallSize(){return"sm"===this.size&&!this.isExpressive}get mediumSize(){return"md"===this.size&&!this.isExpressive}get largeSize(){return"lg"===this.size}get extraLargeSize(){return"xl"===this.size}get twoExtraLargeSize(){return"2xl"===this.size}get smallLayoutSize(){return"sm"===this.size&&!this.isExpressive}get mediumLayoutSize(){return"md"===this.size&&!this.isExpressive}get largeLayoutSize(){return"lg"===this.size}get extraLargeLayoutSize(){return"xl"===this.size}get twoExtraLargeLayoutSize(){return"2xl"===this.size}};Button.propDecorators={ibmButton:[{type:core.Input}],cdsButton:[{type:core.Input}],size:[{type:core.Input}],skeleton:[{type:core.HostBinding,args:["class.cds--skeleton"]},{type:core.Input}],iconOnly:[{type:core.HostBinding,args:["class.cds--btn--icon-only"]},{type:core.Input}],isExpressive:[{type:core.HostBinding,args:["class.cds--btn--expressive"]},{type:core.Input}],baseClass:[{type:core.HostBinding,args:["class.cds--btn"]}],primaryButton:[{type:core.HostBinding,args:["class.cds--btn--primary"]}],secondaryButton:[{type:core.HostBinding,args:["class.cds--btn--secondary"]}],tertiaryButton:[{type:core.HostBinding,args:["class.cds--btn--tertiary"]}],ghostButton:[{type:core.HostBinding,args:["class.cds--btn--ghost"]}],dangerButton:[{type:core.HostBinding,args:["class.cds--btn--danger"]}],dangerTertiary:[{type:core.HostBinding,args:["class.cds--btn--danger--tertiary"]}],dangerGhost:[{type:core.HostBinding,args:["class.cds--btn--danger--ghost"]}],smallSize:[{type:core.HostBinding,args:["class.cds--btn--sm"]}],mediumSize:[{type:core.HostBinding,args:["class.cds--btn--md"]}],largeSize:[{type:core.HostBinding,args:["class.cds--btn--lg"]}],extraLargeSize:[{type:core.HostBinding,args:["class.cds--btn--xl"]}],twoExtraLargeSize:[{type:core.HostBinding,args:["class.cds--btn--2xl"]}],smallLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-sm"]}],mediumLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-md"]}],largeLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-lg"]}],extraLargeLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-xl"]}],twoExtraLargeLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-2xl"]}]},Button=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsButton], [ibmButton]"})],Button);let ButtonSet=class ButtonSet{constructor(){this.buttonSetClass=!0}};ButtonSet.propDecorators={buttonSetClass:[{type:core.HostBinding,args:["class.cds--btn-set"]}]},ButtonSet=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-button-set, ibm-button-set",template:"<ng-content></ng-content>"})],ButtonSet);let BaseIconButton=class BaseIconButton{constructor(){this.caret=!0,this.dropShadow=!0,this.highContrast=!0,this.isOpen=!1,this.align="bottom",this.autoAlign=!1,this.enterDelayMs=100,this.leaveDelayMs=300}};BaseIconButton.propDecorators={caret:[{type:core.Input}],dropShadow:[{type:core.Input}],highContrast:[{type:core.Input}],isOpen:[{type:core.Input}],align:[{type:core.Input}],autoAlign:[{type:core.Input}],enterDelayMs:[{type:core.Input}],leaveDelayMs:[{type:core.Input}]},BaseIconButton=(0,tslib_es6.gn)([(0,core.Component)({template:""})],BaseIconButton);let IconButton=class IconButton extends BaseIconButton{constructor(renderer){super(),this.renderer=renderer,this.buttonId="icon-btn-"+IconButton.iconButtonCounter++,this.kind="primary",this.size="lg",this.type="button",this.isExpressive=!1,this.disabled=!1,this.showTooltipWhenDisabled=!1,this.click=new core.EventEmitter,this.focus=new core.EventEmitter,this.blur=new core.EventEmitter,this.tooltipClick=new core.EventEmitter,this.classList={},this.attributeList={}}set buttonNgClass(obj){this.classList=Object.assign({"cds--btn--disabled":this.disabled},obj)}get buttonNgClass(){return this.classList}set buttonAttributes(obj){this.button&&(Object.keys(this.attributeList).forEach((key=>{this.renderer.removeAttribute(this.button.nativeElement,key)})),Object.keys(obj).forEach((key=>{this.renderer.setAttribute(this.button.nativeElement,key,obj[key])}))),this.attributeList=obj}get buttonAttributes(){return this.buttonAttributes}ngAfterViewInit(){this.buttonAttributes=this.attributeList}emitClickEvent(event,element="button"){event.preventDefault(),event.stopPropagation(),"tooltip"!==element?this.click.emit(event):this.tooltipClick.emit(event)}};IconButton.iconButtonCounter=0,IconButton.ctorParameters=()=>[{type:core.Renderer2}],IconButton.propDecorators={buttonNgClass:[{type:core.Input}],buttonAttributes:[{type:core.Input}],button:[{type:core.ViewChild,args:["button"]}],buttonId:[{type:core.Input}],kind:[{type:core.Input}],size:[{type:core.Input}],type:[{type:core.Input}],isExpressive:[{type:core.Input}],disabled:[{type:core.Input}],description:[{type:core.Input}],showTooltipWhenDisabled:[{type:core.Input}],click:[{type:core.Output}],focus:[{type:core.Output}],blur:[{type:core.Output}],tooltipClick:[{type:core.Output}]},IconButton=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-icon-button, ibm-icon-button",template:'\n\t<cds-tooltip\n\t\tclass="cds--icon-tooltip"\n\t\t[description]="description"\n\t\t[disabled]="showTooltipWhenDisabled ? false : disabled"\n\t\t[caret]="caret"\n\t\t[dropShadow]="dropShadow"\n\t\t[highContrast]="highContrast"\n\t\t[isOpen]="isOpen"\n\t\t[align]="align"\n\t\t[autoAlign]="autoAlign"\n\t\t[enterDelayMs]="enterDelayMs"\n\t\t[leaveDelayMs]="leaveDelayMs"\n\t\t(click)="emitClickEvent($event, \'tooltip\')">\n\t\t<button\n\t\t\t#button\n\t\t\t[id]="buttonId"\n\t\t\t[disabled]="disabled"\n\t\t\t[attr.type]="type"\n\t\t\t[iconOnly]="true"\n\t\t\t[ngClass]="buttonNgClass"\n\t\t\t[cdsButton]="kind"\n\t\t\t[size]="size"\n\t\t\t[isExpressive]="isExpressive"\n\t\t\t(click)="emitClickEvent($event)"\n\t\t\t(focus)="focus.emit($event)"\n\t\t\t(blur)="blur.emit($event)">\n\t\t\t<ng-content></ng-content>\n\t\t</button>\n\t</cds-tooltip>\n\t'})],IconButton);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),tooltip=__webpack_require__("./src/tooltip/index.ts");let ButtonModule=class ButtonModule{};ButtonModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Button,ButtonSet,BaseIconButton,IconButton],exports:[Button,ButtonSet,IconButton],imports:[common.CommonModule,tooltip.z8]})],ButtonModule)},"./src/combo-button/combo-button.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,__namedExportsOrder:()=>__namedExportsOrder,default:()=>combo_button_stories});var dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),asyncToGenerator=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),floating_ui_dom=__webpack_require__("./node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs"),context_menu=__webpack_require__("./src/context-menu/index.ts");let ComboButtonComponent=class ComboButtonComponent{constructor(ngZone,renderer,hostElement,viewContainerRef,changeDetectorRef){this.ngZone=ngZone,this.renderer=renderer,this.hostElement=hostElement,this.viewContainerRef=viewContainerRef,this.changeDetectorRef=changeDetectorRef,this.comboId="combo-button-"+ComboButtonComponent.comboButtonCounter++,this.size="lg",this.disabled=!1,this.menuAlignment="bottom",this.tooltipAutoAlign=!1,this.tooltipPlacement="bottom",this.open=!1,this.actionClick=new core.EventEmitter,this.comboButtonContainer=!0,this.documentClick=this.handleFocusOut.bind(this),this.subscriptions=[],this._alignment="bottom"}set projectedMenuItems(itemList){this.subscriptions.forEach((sub=>sub?.unsubscribe())),this.subscriptions=[],itemList.forEach((item=>{this.subscriptions.push(item.itemClick.subscribe((clickEvent=>this.handleMenuItemClick(clickEvent))))}))}get sizeLg(){return"lg"===this.size}get sizeMd(){return"md"===this.size}get sizeSm(){return"sm"===this.size}get ariaOwns(){return this.open?this.comboId:void 0}ngOnChanges(changes){changes.menuAlignment&&(this._alignment=changes.menuAlignment.currentValue)}ngAfterViewInit(){this.open&&(this.open=!this.open,this.toggleMenu())}ngOnDestroy(){this.cleanUp(),this.subscriptions.forEach((sub=>sub.unsubscribe()))}handleMenuItemClick(event){event.type||this.toggleMenu()}handleFocusOut(event){this.hostElement.nativeElement.contains(event.target)||this.toggleMenu()}cleanUp(){document.removeEventListener("click",this.documentClick),this.unmountFloatingElement&&(this.menuRef.remove(),this.viewContainerRef.clear(),this.unmountFloatingElement()),this.unmountFloatingElement=void 0,this.changeDetectorRef.markForCheck()}onActionClick(event){this.open&&this.toggleMenu(),this.actionClick.emit(event)}toggleMenu(){if(this.open=!this.open,this.open){const view=this.viewContainerRef.createEmbeddedView(this.menuTemplate);this.menuRef=document.body.appendChild(view.rootNodes[0]),Object.assign(this.menuRef.style,{width:`${this.hostElement.nativeElement.clientWidth}px`,top:"0",left:"0"}),this.menuAlignment=this._alignment,document.addEventListener("click",this.documentClick),this.unmountFloatingElement=(0,floating_ui_dom.Me)(this.hostElement.nativeElement,this.menuRef,this.recomputePosition.bind(this))}else this.cleanUp()}roundByDPR(value){const dpr=window.devicePixelRatio||1;return Math.round(value*dpr)/dpr}recomputePosition(){var _this=this;this.menuTemplate&&this.hostElement&&this.ngZone.runOutsideAngular((0,asyncToGenerator.Z)((function*(){const{x,y,placement}=yield(0,floating_ui_dom.oo)(_this.hostElement.nativeElement,_this.menuRef,{placement:_this.menuAlignment,strategy:"fixed",middleware:[(0,floating_ui_dom.RR)({crossAxis:!1})]});_this.menuAlignment=placement,Object.assign(_this.menuRef.style,{position:"fixed",transform:`translate(${_this.roundByDPR(x)}px,${_this.roundByDPR(y)}px)`}),_this.changeDetectorRef.markForCheck()})))}};ComboButtonComponent.comboButtonCounter=0,ComboButtonComponent.ctorParameters=()=>[{type:core.NgZone},{type:core.Renderer2},{type:core.ElementRef},{type:core.ViewContainerRef},{type:core.ChangeDetectorRef}],ComboButtonComponent.propDecorators={comboId:[{type:core.Input}],projectedMenuItems:[{type:core.ContentChildren,args:[context_menu.qX]}],size:[{type:core.Input}],label:[{type:core.Input}],disabled:[{type:core.Input}],menuAlignment:[{type:core.Input}],description:[{type:core.Input}],tooltipAutoAlign:[{type:core.Input}],tooltipPlacement:[{type:core.Input}],open:[{type:core.Input},{type:core.HostBinding,args:["class.cds--combo-button__container--open"]}],actionClick:[{type:core.Output}],comboButtonContainer:[{type:core.HostBinding,args:["class.cds--combo-button__container"]}],sizeLg:[{type:core.HostBinding,args:["class.cds--combo-button__container--lg"]}],sizeMd:[{type:core.HostBinding,args:["class.cds--combo-button__container--md"]}],sizeSm:[{type:core.HostBinding,args:["class.cds--combo-button__container--sm"]}],ariaOwns:[{type:core.HostBinding,args:["attr.aria-owns"]}],menuTemplate:[{type:core.ViewChild,args:["menuTemplate"]}]},ComboButtonComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-combo-button",template:'\n\t\t<div class="cds--combo-button__primary-action" [attr.aria-owns]="open ? comboId : undefined">\n\t\t\t<button\n\t\t\t\tcdsButton="primary"\n\t\t\t\t[size]="size"\n\t\t\t\t[attr.title]="label"\n\t\t\t\t[disabled]="disabled"\n\t\t\t\ttype="button"\n\t\t\t\t(click)="onActionClick($event)">\n\t\t\t\t{{label}}\n\t\t\t</button>\n\t\t</div>\n\t\t<cds-icon-button\n\t\t\t[buttonNgClass]="{ \'cds--combo-button__trigger\': true }"\n\t\t\t[buttonAttributes]="{\n\t\t\t\t\'aria-haspopup\': true,\n\t\t\t\t\'aria-expanded\': open,\n\t\t\t\t\'aria-controls\': open ? comboId : undefined\n\t\t\t}"\n\t\t\t[size]="size"\n\t\t\t[description]="description"\n\t\t\t[disabled]="disabled"\n\t\t\t[autoAlign]="tooltipAutoAlign"\n\t\t\t[align]="tooltipPlacement"\n\t\t\t(click)="toggleMenu()">\n\t\t\t<svg\n\t\t\t\tcdsIcon="chevron--down"\n\t\t\t\tsize="16">\n\t\t\t</svg>\n\t\t</cds-icon-button>\n\n\t\t<ng-template #menuTemplate>\n\t\t\t<cds-menu\n\t\t\t\tmode="basic"\n\t\t\t\t[size]="size"\n\t\t\t\t[open]="open"\n\t\t\t\t[attr.id]="comboId">\n\t\t\t\t<ng-content select="cds-menu-item, cds-menu-divider"></ng-content>\n\t\t\t</cds-menu>\n\t\t</ng-template>\n\t',changeDetection:core.ChangeDetectionStrategy.OnPush})],ComboButtonComponent);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts"),src_button=__webpack_require__("./src/button/index.ts");let ComboButtonModule=class ComboButtonModule{};ComboButtonModule=(0,tslib_es6.gn)([(0,core.NgModule)({imports:[common.CommonModule,src_button.hJ,icon.QX,context_menu.vI],exports:[ComboButtonComponent],declarations:[ComboButtonComponent]})],ComboButtonModule);const combo_button_stories={title:"Components/Combo button",decorators:[(0,dist.moduleMetadata)({imports:[ComboButtonModule,icon.QX,context_menu.vI]})],argTypes:{onClick:{action:"clicked"}},component:ComboButtonComponent},Basic=(args=>({props:args,template:'\n        <cds-combo-button\n            [size]="size"\n            [menuAlignment]="menuAlignment"\n            [label]="label"\n            [description]="description"\n            [tooltipAutoAlign]="tooltipAutoAlign"\n            [tooltipPlacement]="tooltipPlacement">\n            <cds-menu-item label="First action with a long label description"></cds-menu-item>\n            <cds-menu-item label="Second action" (click)="onClick($event)"></cds-menu-item>\n            <cds-menu-item label="Third action" [disabled]="true"></cds-menu-item>\n            <cds-menu-divider></cds-menu-divider>\n            <cds-menu-item label="Cut" info="⌘X"></cds-menu-item>\n            <cds-menu-item label="Option with icon" icon="calendar"></cds-menu-item>\n            <cds-menu-divider></cds-menu-divider>\n            <cds-menu-item label="Danger action" [danger]="true"></cds-menu-item>\n        </cds-combo-button>\n    '})).bind({});Basic.args={size:"lg",menuAlignment:"bottom",label:"Combo button",description:"Additional actions",tooltipAutoAlign:!0,tooltipPlacement:"right"},Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-combo-button\n            [size]="size"\n            [menuAlignment]="menuAlignment"\n            [label]="label"\n            [description]="description"\n            [tooltipAutoAlign]="tooltipAutoAlign"\n            [tooltipPlacement]="tooltipPlacement">\n            <cds-menu-item label="First action with a long label description"></cds-menu-item>\n            <cds-menu-item label="Second action" (click)="onClick($event)"></cds-menu-item>\n            <cds-menu-item label="Third action" [disabled]="true"></cds-menu-item>\n            <cds-menu-divider></cds-menu-divider>\n            <cds-menu-item label="Cut" info="⌘X"></cds-menu-item>\n            <cds-menu-item label="Option with icon" icon="calendar"></cds-menu-item>\n            <cds-menu-divider></cds-menu-divider>\n            <cds-menu-item label="Danger action" [danger]="true"></cds-menu-item>\n        </cds-combo-button>\n    `\n})',...Basic.parameters?.docs?.source}}};const __namedExportsOrder=["Basic"]}}]);