carbon-components-angular/docs/storybook/dialog-overflow-menu-overflow-menu-stories.cd56a223.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[140],{"./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/checkbox/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{XZ:()=>Checkbox,nD:()=>CheckboxModule});var CheckboxState,tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs");!function(CheckboxState){CheckboxState[CheckboxState.Init=0]="Init",CheckboxState[CheckboxState.Indeterminate=1]="Indeterminate",CheckboxState[CheckboxState.Checked=2]="Checked",CheckboxState[CheckboxState.Unchecked=3]="Unchecked"}(CheckboxState||(CheckboxState={}));let Checkbox=class Checkbox{constructor(changeDetectorRef){this.changeDetectorRef=changeDetectorRef,this.disabled=!1,this.skeleton=!1,this.hideLabel=!1,this.id=`checkbox-${Checkbox.checkboxCount}`,this.click=new core.EventEmitter,this.checkedChange=new core.EventEmitter,this.indeterminateChange=new core.EventEmitter,this._checked=!1,this._indeterminate=!1,this.currentCheckboxState=CheckboxState.Init,this.onTouched=()=>{},this.propagateChange=_=>{},Checkbox.checkboxCount++}set indeterminate(indeterminate){indeterminate!==this._indeterminate&&(this._indeterminate=indeterminate,this._indeterminate?this.transitionCheckboxState(CheckboxState.Indeterminate):this.transitionCheckboxState(this.checked?CheckboxState.Checked:CheckboxState.Unchecked),this.inputCheckbox&&this.inputCheckbox.nativeElement&&(this.inputCheckbox.nativeElement.indeterminate=indeterminate),this.changeDetectorRef.markForCheck(),this.indeterminateChange.emit(this._indeterminate))}get indeterminate(){return this._indeterminate}set checked(checked){this.setChecked(checked,!1)}get checked(){return this._checked}toggle(){this.setChecked(!this.checked,!0)}writeValue(value){this.setChecked(!!value,!0)}registerOnChange(fn){this.propagateChange=fn}registerOnTouched(fn){this.onTouched=fn}setDisabledState(isDisabled){this.disabled=isDisabled,this.changeDetectorRef.markForCheck()}focusOut(){this.onTouched()}onChange(event){event.stopPropagation()}onClick(event){if(this.click.observers.length)return event.preventDefault(),void this.click.emit();this.disabled||(this.toggle(),this.transitionCheckboxState(this._checked?CheckboxState.Checked:CheckboxState.Unchecked),this.emitChangeEvent())}transitionCheckboxState(newState){this.currentCheckboxState=newState}emitChangeEvent(){this.checkedChange.emit(this.checked),this.propagateChange(this.checked)}ngAfterViewInit(){this.indeterminate&&this.inputCheckbox&&this.inputCheckbox.nativeElement&&(this.inputCheckbox.nativeElement.indeterminate=!0)}setChecked(checked,resetIndeterminate){checked!==this._checked&&(this._checked=checked,resetIndeterminate&&this._indeterminate&&(this._indeterminate=!1,Promise.resolve().then((()=>{this.indeterminateChange.emit(this._indeterminate)}))),this.changeDetectorRef.markForCheck())}};Checkbox.checkboxCount=0,Checkbox.ctorParameters=()=>[{type:core.ChangeDetectorRef}],Checkbox.propDecorators={disabled:[{type:core.Input}],skeleton:[{type:core.Input}],hideLabel:[{type:core.Input}],name:[{type:core.Input}],id:[{type:core.Input}],required:[{type:core.Input}],value:[{type:core.Input}],ariaLabel:[{type:core.Input}],ariaLabelledby:[{type:core.Input}],indeterminate:[{type:core.Input}],checked:[{type:core.Input}],click:[{type:core.Output}],checkedChange:[{type:core.Output}],indeterminateChange:[{type:core.Output}],inputCheckbox:[{type:core.ViewChild,args:["inputCheckbox"]}],focusOut:[{type:core.HostListener,args:["focusout"]}]},Checkbox=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-checkbox, ibm-checkbox",template:'\n\t\t<div class="cds--form-item cds--checkbox-wrapper">\n\t\t\t<input\n\t\t\t\t#inputCheckbox\n\t\t\t\tclass="cds--checkbox"\n\t\t\t\ttype="checkbox"\n\t\t\t\t[id]="id + \'_input\'"\n\t\t\t\t[value]="value"\n\t\t\t\t[name]="name"\n\t\t\t\t[required]="required"\n\t\t\t\t[checked]="checked"\n\t\t\t\t[disabled]="disabled"\n\t\t\t\t[attr.aria-labelledby]="ariaLabelledby"\n\t\t\t\t(change)="onChange($event)"\n\t\t\t\t(click)="onClick($event)">\n\t\t\t<label\n\t\t\t\t[for]="id + \'_input\'"\n\t\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t\tclass="cds--checkbox-label"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--skeleton\' : skeleton\n\t\t\t\t}">\n\t\t\t\t<span [ngClass]="{\'cds--visually-hidden\' : hideLabel}" class="cds--checkbox-label-text">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:Checkbox,multi:!0}],changeDetection:core.ChangeDetectionStrategy.OnPush})],Checkbox);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let CheckboxModule=class CheckboxModule{};CheckboxModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Checkbox],exports:[Checkbox],imports:[common.CommonModule,fesm2020_forms.u5]})],CheckboxModule)},"./src/dialog/overflow-menu/overflow-menu.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,Custom:()=>Custom,CustomTrigger:()=>CustomTrigger,WithLink:()=>WithLink,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _storybook_angular__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),___WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/dialog/index.ts"),_placeholder__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/placeholder/index.ts"),_icon__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/icon/index.ts"),_checkbox__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/checkbox/index.ts");const __WEBPACK_DEFAULT_EXPORT__={title:"Components/Overflow Menu",decorators:[(0,_storybook_angular__WEBPACK_IMPORTED_MODULE_0__.moduleMetadata)({imports:[___WEBPACK_IMPORTED_MODULE_1__.Su,_placeholder__WEBPACK_IMPORTED_MODULE_2__.Qq,_icon__WEBPACK_IMPORTED_MODULE_3__.QX,_checkbox__WEBPACK_IMPORTED_MODULE_4__.nD]})],args:{placement:"bottom"},argTypes:{code:{control:!1}},component:___WEBPACK_IMPORTED_MODULE_1__.PQ},Basic=(args=>({props:args,template:'\n        <cds-overflow-menu\n            [placement]="placement"\n            [open]="open"\n            [flip]="flip"\n            [offset]="offset">\n            <cds-overflow-menu-option (selected)="selected($event)" (click)="click($event)">\n                An example option that is really long to show what should be done to handle long text\n            </cds-overflow-menu-option>\n            <cds-overflow-menu-option (selected)="selected($event)" innerClass="a-custom-class">Option 2</cds-overflow-menu-option>\n            <li class="cds--overflow-menu-options__option">\n                <button class="cds--overflow-menu-options__btn">A fully custom option</button>\n            </li>\n            <cds-overflow-menu-option (selected)="selected($event)">Option 4</cds-overflow-menu-option>\n            <cds-overflow-menu-option disabled="true" (selected)="selected($event)" [divider]="true">Disabled</cds-overflow-menu-option>\n            <cds-overflow-menu-option type="danger" (selected)="selected($event)">Danger option</cds-overflow-menu-option>\n        </cds-overflow-menu>\n        <cds-placeholder></cds-placeholder>\n    '})).bind({});Basic.args={show:!0,open:!1,flip:!1,offset:{x:0,y:0}},Basic.argTypes={click:{type:"function",defaultValue:()=>{console.log("clicked!")},control:!1},selected:{type:"function",defaultValue:()=>{console.log("selected!")},control:!1}},Basic.parameters={layout:"centered"};const WithLink=(args=>({props:args,template:'\n        <div>\n            <h1 style="margin-bottom: 1rem">Bottom placement</h1>\n            <cds-overflow-menu\n                [flip]="flip"\n                [offset]="offset">\n                <cds-overflow-menu-option href="https://www.ibm.com" (selected)="selected($event)" (click)="click($event)">\n                    An example option that is really long to show what should be done to handle long text\n                </cds-overflow-menu-option>\n                <cds-overflow-menu-option href="https://www.ibm.com" target="_blank" (selected)="selected($event)">Option 2</cds-overflow-menu-option>\n                <cds-overflow-menu-option href="https://www.ibm.com" (selected)="selected($event)">Option 3</cds-overflow-menu-option>\n                <cds-overflow-menu-option href="https://www.ibm.com" (selected)="selected($event)">Option 4</cds-overflow-menu-option>\n                <cds-overflow-menu-option href="https://www.ibm.com" disabled="true" (selected)="selected($event)">Disabled</cds-overflow-menu-option>\n                <cds-overflow-menu-option href="https://www.ibm.com" type="danger" (selected)="selected($event)">\n                    Danger option\n                </cds-overflow-menu-option>\n            </cds-overflow-menu>\n        </div>\n        <cds-placeholder></cds-placeholder>\n    '})).bind({});WithLink.args={flip:!1,offset:{x:0,y:0}},WithLink.argTypes={click:{type:"function",defaultValue:()=>{console.log("clicked!")},control:!1},selected:{type:"function",defaultValue:()=>{console.log("selected!")},control:!1}};const Custom=(args=>({props:args,template:'\n        <p style="padding-bottom: 1rem;">\n        When writing a custom template to be inserted into an overflow menu\n        it becomes your responsibility to make sure tab order/keyboard nav is implemented correctly\n        </p>\n        <button\n            style="border: none; width: 3rem; height: 3rem; background-color: lightgrey;\n            display: flex; align-items: center; justify-content: center;"\n            [cdsOverflowMenu]="templateRef"\n            [customPane]="true"\n            placement="bottom"\n            [offset]="{ x: -8, y: 0 }">\n            <svg cdsIcon="settings" size="16"></svg>\n        </button>\n        <ng-template #templateRef>\n            <div style="padding: 0 1rem;">\n                <div style="padding-top: 0.5rem; color: grey;">Columns</div>\n                <div><cds-checkbox [checked]="true">Status</cds-checkbox></div>\n                <div><cds-checkbox>Last modified</cds-checkbox></div>\n            </div>\n        </ng-template>\n    '})).bind({});Custom.storyName="Custom Template";const CustomTrigger=(args=>({props:args,template:'\n        <span>Overflow menu with custom trigger icon</span>\n        <cds-overflow-menu\n            [flip]="flip"\n            [open]="open"\n            [customTrigger]="customTrigger"\n            [placement]="placement"\n            [offset]="offset">\n            <cds-overflow-menu-option (selected)="selected($event)" (click)="click($event)">Option 1</cds-overflow-menu-option>\n            <cds-overflow-menu-option (selected)="selected($event)">Option 2</cds-overflow-menu-option>\n            <cds-overflow-menu-option disabled="true" (selected)="selected($event)">Disabled</cds-overflow-menu-option>\n            <cds-overflow-menu-option type="danger" (selected)="selected($event)">Danger option</cds-overflow-menu-option>\n        </cds-overflow-menu>\n        <cds-placeholder></cds-placeholder>\n        <ng-template #customTrigger><svg cdsIcon="document" size="16"></svg></ng-template>\n    '})).bind({});CustomTrigger.storyName="With custom trigger",Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-overflow-menu\n            [placement]="placement"\n            [open]="open"\n            [flip]="flip"\n            [offset]="offset">\n            <cds-overflow-menu-option (selected)="selected($event)" (click)="click($event)">\n                An example option that is really long to show what should be done to handle long text\n            </cds-overflow-menu-option>\n            <cds-overflow-menu-option (selected)="selected($event)" innerClass="a-custom-class">Option 2</cds-overflow-menu-option>\n            <li class="cds--overflow-menu-options__option">\n                <button class="cds--overflow-menu-options__btn">A fully custom option</button>\n            </li>\n            <cds-overflow-menu-option (selected)="selected($event)">Option 4</cds-overflow-menu-option>\n            <cds-overflow-menu-option disabled="true" (selected)="selected($event)" [divider]="true">Disabled</cds-overflow-menu-option>\n            <cds-overflow-menu-option type="danger" (selected)="selected($event)">Danger option</cds-overflow-menu-option>\n        </cds-overflow-menu>\n        <cds-placeholder></cds-placeholder>\n    `\n})',...Basic.parameters?.docs?.source}}},WithLink.parameters={...WithLink.parameters,docs:{...WithLink.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <div>\n            <h1 style="margin-bottom: 1rem">Bottom placement</h1>\n            <cds-overflow-menu\n                [flip]="flip"\n                [offset]="offset">\n                <cds-overflow-menu-option href="https://www.ibm.com" (selected)="selected($event)" (click)="click($event)">\n                    An example option that is really long to show what should be done to handle long text\n                </cds-overflow-menu-option>\n                <cds-overflow-menu-option href="https://www.ibm.com" target="_blank" (selected)="selected($event)">Option 2</cds-overflow-menu-option>\n                <cds-overflow-menu-option href="https://www.ibm.com" (selected)="selected($event)">Option 3</cds-overflow-menu-option>\n                <cds-overflow-menu-option href="https://www.ibm.com" (selected)="selected($event)">Option 4</cds-overflow-menu-option>\n                <cds-overflow-menu-option href="https://www.ibm.com" disabled="true" (selected)="selected($event)">Disabled</cds-overflow-menu-option>\n                <cds-overflow-menu-option href="https://www.ibm.com" type="danger" (selected)="selected($event)">\n                    Danger option\n                </cds-overflow-menu-option>\n            </cds-overflow-menu>\n        </div>\n        <cds-placeholder></cds-placeholder>\n    `\n})',...WithLink.parameters?.docs?.source}}},Custom.parameters={...Custom.parameters,docs:{...Custom.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <p style="padding-bottom: 1rem;">\n        When writing a custom template to be inserted into an overflow menu\n        it becomes your responsibility to make sure tab order/keyboard nav is implemented correctly\n        </p>\n        <button\n            style="border: none; width: 3rem; height: 3rem; background-color: lightgrey;\n            display: flex; align-items: center; justify-content: center;"\n            [cdsOverflowMenu]="templateRef"\n            [customPane]="true"\n            placement="bottom"\n            [offset]="{ x: -8, y: 0 }">\n            <svg cdsIcon="settings" size="16"></svg>\n        </button>\n        <ng-template #templateRef>\n            <div style="padding: 0 1rem;">\n                <div style="padding-top: 0.5rem; color: grey;">Columns</div>\n                <div><cds-checkbox [checked]="true">Status</cds-checkbox></div>\n                <div><cds-checkbox>Last modified</cds-checkbox></div>\n            </div>\n        </ng-template>\n    `\n})',...Custom.parameters?.docs?.source}}},CustomTrigger.parameters={...CustomTrigger.parameters,docs:{...CustomTrigger.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <span>Overflow menu with custom trigger icon</span>\n        <cds-overflow-menu\n            [flip]="flip"\n            [open]="open"\n            [customTrigger]="customTrigger"\n            [placement]="placement"\n            [offset]="offset">\n            <cds-overflow-menu-option (selected)="selected($event)" (click)="click($event)">Option 1</cds-overflow-menu-option>\n            <cds-overflow-menu-option (selected)="selected($event)">Option 2</cds-overflow-menu-option>\n            <cds-overflow-menu-option disabled="true" (selected)="selected($event)">Disabled</cds-overflow-menu-option>\n            <cds-overflow-menu-option type="danger" (selected)="selected($event)">Danger option</cds-overflow-menu-option>\n        </cds-overflow-menu>\n        <cds-placeholder></cds-placeholder>\n        <ng-template #customTrigger><svg cdsIcon="document" size="16"></svg></ng-template>\n    `\n})',...CustomTrigger.parameters?.docs?.source}}};const __namedExportsOrder=["Basic","WithLink","Custom","CustomTrigger"]}}]);