carbon-components-angular/docs/storybook/content-switcher-content-switcher-stories.8f3aa078.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[4391],{"./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())}}},"./node_modules/@storybook/angular/dist/client/argsToTemplate.js":(__unused_webpack_module,exports)=>{Object.defineProperty(exports,"__esModule",{value:!0}),exports.argsToTemplate=void 0,exports.argsToTemplate=function argsToTemplate(args,options={}){const includeSet=options.include?new Set(options.include):null,excludeSet=options.exclude?new Set(options.exclude):null;return Object.entries(args).filter((([key])=>void 0!==args[key])).filter((([key])=>includeSet?includeSet.has(key):!excludeSet||!excludeSet.has(key))).map((([key,value])=>"function"==typeof value?`(${key})="${key}($event)"`:`[${key}]="${key}"`)).join(" ")}},"./node_modules/@storybook/angular/dist/client/decorators.js":(__unused_webpack_module,exports,__webpack_require__)=>{Object.defineProperty(exports,"__esModule",{value:!0}),exports.componentWrapperDecorator=exports.applicationConfig=exports.moduleMetadata=void 0;const ComputesTemplateFromComponent_1=__webpack_require__("./node_modules/@storybook/angular/dist/client/angular-beta/ComputesTemplateFromComponent.js"),NgComponentAnalyzer_1=__webpack_require__("./node_modules/@storybook/angular/dist/client/angular-beta/utils/NgComponentAnalyzer.js");exports.moduleMetadata=metadata=>storyFn=>{const story=storyFn(),storyMetadata=story.moduleMetadata||{};return metadata=metadata||{},{...story,moduleMetadata:{declarations:[...metadata.declarations||[],...storyMetadata.declarations||[]],entryComponents:[...metadata.entryComponents||[],...storyMetadata.entryComponents||[]],imports:[...metadata.imports||[],...storyMetadata.imports||[]],schemas:[...metadata.schemas||[],...storyMetadata.schemas||[]],providers:[...metadata.providers||[],...storyMetadata.providers||[]]}}},exports.applicationConfig=function applicationConfig(config){return storyFn=>{const story=storyFn(),storyConfig=story.applicationConfig;return{...story,applicationConfig:storyConfig||config?{...config,...storyConfig,providers:[...config?.providers||[],...storyConfig?.providers||[]]}:void 0}}};exports.componentWrapperDecorator=(element,props)=>(storyFn,storyContext)=>{const story=storyFn(),currentProps="function"==typeof props?props(storyContext):props,template=(0,NgComponentAnalyzer_1.isComponent)(element)?(0,ComputesTemplateFromComponent_1.computesTemplateFromComponent)(element,currentProps??{},story.template):element(story.template);return{...story,template,...currentProps||story.props?{props:{...currentProps,...story.props}}:{}}}},"./node_modules/@storybook/angular/dist/client/index.js":function(__unused_webpack_module,exports,__webpack_require__){var __createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){void 0===k2&&(k2=k);var desc=Object.getOwnPropertyDescriptor(m,k);desc&&!("get"in desc?!m.__esModule:desc.writable||desc.configurable)||(desc={enumerable:!0,get:function(){return m[k]}}),Object.defineProperty(o,k2,desc)}:function(o,m,k,k2){void 0===k2&&(k2=k),o[k2]=m[k]}),__exportStar=this&&this.__exportStar||function(m,exports){for(var p in m)"default"===p||Object.prototype.hasOwnProperty.call(exports,p)||__createBinding(exports,m,p)};Object.defineProperty(exports,"__esModule",{value:!0}),exports.argsToTemplate=exports.applicationConfig=exports.componentWrapperDecorator=exports.moduleMetadata=void 0,__webpack_require__("./node_modules/@storybook/angular/dist/client/globals.js"),__exportStar(__webpack_require__("./node_modules/@storybook/angular/dist/client/public-api.js"),exports),__exportStar(__webpack_require__("./node_modules/@storybook/angular/dist/client/public-types.js"),exports);var decorators_1=__webpack_require__("./node_modules/@storybook/angular/dist/client/decorators.js");Object.defineProperty(exports,"moduleMetadata",{enumerable:!0,get:function(){return decorators_1.moduleMetadata}}),Object.defineProperty(exports,"componentWrapperDecorator",{enumerable:!0,get:function(){return decorators_1.componentWrapperDecorator}}),Object.defineProperty(exports,"applicationConfig",{enumerable:!0,get:function(){return decorators_1.applicationConfig}});var argsToTemplate_1=__webpack_require__("./node_modules/@storybook/angular/dist/client/argsToTemplate.js");Object.defineProperty(exports,"argsToTemplate",{enumerable:!0,get:function(){return argsToTemplate_1.argsToTemplate}})},"./node_modules/@storybook/angular/dist/client/public-api.js":function(__unused_webpack_module,exports,__webpack_require__){var __createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){void 0===k2&&(k2=k);var desc=Object.getOwnPropertyDescriptor(m,k);desc&&!("get"in desc?!m.__esModule:desc.writable||desc.configurable)||(desc={enumerable:!0,get:function(){return m[k]}}),Object.defineProperty(o,k2,desc)}:function(o,m,k,k2){void 0===k2&&(k2=k),o[k2]=m[k]}),__exportStar=this&&this.__exportStar||function(m,exports){for(var p in m)"default"===p||Object.prototype.hasOwnProperty.call(exports,p)||__createBinding(exports,m,p)},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.raw=exports.forceReRender=exports.configure=exports.storiesOf=void 0;const preview_api_1=__webpack_require__("@storybook/preview-api"),render_1=__webpack_require__("./node_modules/@storybook/angular/dist/client/render.js"),decorateStory_1=__importDefault(__webpack_require__("./node_modules/@storybook/angular/dist/client/decorateStory.js"));__exportStar(__webpack_require__("./node_modules/@storybook/angular/dist/client/public-types.js"),exports);const api=(0,preview_api_1.start)(render_1.renderToCanvas,{decorateStory:decorateStory_1.default,render:render_1.render});exports.storiesOf=(kind,m)=>api.clientApi.storiesOf(kind,m).addParameters({renderer:"angular"});exports.configure=(...args)=>api.configure("angular",...args),exports.forceReRender=api.forceReRender,exports.raw=api.clientApi.raw},"./node_modules/@storybook/angular/dist/client/public-types.js":(__unused_webpack_module,exports)=>{Object.defineProperty(exports,"__esModule",{value:!0})},"./node_modules/@storybook/angular/dist/index.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{var _client_index__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@storybook/angular/dist/client/index.js");__webpack_require__.o(_client_index__WEBPACK_IMPORTED_MODULE_0__,"applicationConfig")&&__webpack_require__.d(__webpack_exports__,{applicationConfig:function(){return _client_index__WEBPACK_IMPORTED_MODULE_0__.applicationConfig}}),__webpack_require__.o(_client_index__WEBPACK_IMPORTED_MODULE_0__,"componentWrapperDecorator")&&__webpack_require__.d(__webpack_exports__,{componentWrapperDecorator:function(){return _client_index__WEBPACK_IMPORTED_MODULE_0__.componentWrapperDecorator}}),__webpack_require__.o(_client_index__WEBPACK_IMPORTED_MODULE_0__,"moduleMetadata")&&__webpack_require__.d(__webpack_exports__,{moduleMetadata:function(){return _client_index__WEBPACK_IMPORTED_MODULE_0__.moduleMetadata}})},"./src/content-switcher/content-switcher.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,__namedExportsOrder:()=>__namedExportsOrder,default:()=>content_switcher_stories});var 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");let ContentSwitcherOption=class ContentSwitcherOption{constructor(renderer,hostElement){this.renderer=renderer,this.hostElement=hostElement,this.name="option",this.selected=new core.EventEmitter,this.onClick=new core.EventEmitter,this.onFocus=new core.EventEmitter,this.switcherClass="cds--content-switcher-btn",this.selectedClass=!1,this.role="tab",this.ariaSelected=!1,this.tabindex="-1",this._active=!1}set active(value){this._active=value,this.selectedClass=value,this.ariaSelected=value,this.tabindex=value?"0":"-1"}get active(){return this._active}hostClick(event){this.onClick.emit(event),this.active||(this.active=!0,this.selected.emit(!0))}doFocus(event){this.onFocus.emit(event),this.active||(this.active=!0,this.selected.emit(!0))}ngOnInit(){const hostNativeElement=this.hostElement.nativeElement,spanWrapper=this.renderer.createElement("span");this.renderer.addClass(spanWrapper,"cds--content-switcher__label");const hostChildren=[];hostNativeElement.childNodes.forEach((node=>hostChildren.push(node))),hostChildren.forEach((node=>{this.renderer.removeChild(hostNativeElement,node),this.renderer.appendChild(spanWrapper,node)})),this.renderer.appendChild(hostNativeElement,spanWrapper)}};ContentSwitcherOption.ctorParameters=()=>[{type:core.Renderer2},{type:core.ElementRef}],ContentSwitcherOption.propDecorators={active:[{type:core.Input}],name:[{type:core.Input}],selected:[{type:core.Output}],onClick:[{type:core.Output}],onFocus:[{type:core.Output}],switcherClass:[{type:core.HostBinding,args:["class"]}],selectedClass:[{type:core.HostBinding,args:["class.cds--content-switcher--selected"]}],role:[{type:core.HostBinding,args:["attr.role"]}],ariaSelected:[{type:core.HostBinding,args:["attr.aria-selected"]}],tabindex:[{type:core.HostBinding,args:["attr.tabIndex"]}],hostClick:[{type:core.HostListener,args:["click",["$event"]]}],doFocus:[{type:core.HostListener,args:["focus",["$event"]]}]},ContentSwitcherOption=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsContentOption], [ibmContentOption]"})],ContentSwitcherOption);var tab_service=__webpack_require__("./src/common/tab.service.ts");let ContentSwitcher=class ContentSwitcher{constructor(elementRef){this.elementRef=elementRef,this.ariaLabel="content switcher",this.size="md",this.selected=new core.EventEmitter}ngAfterViewInit(){this.options.find((option=>option.active))||setTimeout((()=>this.options.first.active=!0)),this.options.forEach((option=>{option.selected.subscribe((_=>{const active=option;this.options.forEach((option=>{option!==active&&(option.active=!1)})),this.selected.emit(active)}))}))}hostkeys(event){const buttonList=Array.from(this.elementRef.nativeElement.querySelectorAll("[cdsContentOption], [ibmContentOption]"));switch(event.key){case"ArrowRight":if(event.preventDefault(),(0,tab_service.jv)(event,buttonList))buttonList[0].focus();else{const index=buttonList.findIndex((item=>item===event.target));buttonList[index+1].focus()}break;case"ArrowLeft":if(event.preventDefault(),(0,tab_service.w3)(event,buttonList))buttonList[buttonList.length-1].focus();else{const index=buttonList.findIndex((item=>item===event.target));buttonList[index-1].focus()}break;case"Home":event.preventDefault(),buttonList[0].focus();break;case"End":event.preventDefault(),buttonList[buttonList.length-1].focus()}}};ContentSwitcher.ctorParameters=()=>[{type:core.ElementRef}],ContentSwitcher.propDecorators={ariaLabel:[{type:core.Input}],size:[{type:core.Input}],selected:[{type:core.Output}],options:[{type:core.ContentChildren,args:[ContentSwitcherOption]}],hostkeys:[{type:core.HostListener,args:["keydown",["$event"]]}]},ContentSwitcher=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-content-switcher, ibm-content-switcher",template:"\n\t\t<div\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--content-switcher\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--content-switcher--sm': size === 'sm',\n\t\t\t\t'cds--content-switcher--md': size === 'md',\n\t\t\t\t'cds--content-switcher--lg': size === 'lg'\n\t\t\t}\"\n\t\t\trole=\"tablist\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t"})],ContentSwitcher);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let ContentSwitcherModule=class ContentSwitcherModule{};ContentSwitcherModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[ContentSwitcher,ContentSwitcherOption],exports:[ContentSwitcher,ContentSwitcherOption],imports:[common.CommonModule]})],ContentSwitcherModule);const content_switcher_stories={title:"Components/Content Switcher",decorators:[(0,dist.moduleMetadata)({imports:[ContentSwitcherModule]})],argTypes:{code:{control:!1}},component:ContentSwitcher,subcomponents:ContentSwitcherOption},Basic=(args=>({props:args,template:'\n        <cds-content-switcher (selected)="selected($event)">\n            <button cdsContentOption name="First">First section</button>\n            <button cdsContentOption name="Second">Second section</button>\n            <button cdsContentOption name="Third">Third section</button>\n        </cds-content-switcher>\n    '})).bind({});Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-content-switcher (selected)="selected($event)">\n            <button cdsContentOption name="First">First section</button>\n            <button cdsContentOption name="Second">Second section</button>\n            <button cdsContentOption name="Third">Third section</button>\n        </cds-content-switcher>\n    `\n})',...Basic.parameters?.docs?.source}}};const __namedExportsOrder=["Basic"]}}]);