carbon-components-angular/docs/storybook/217.4da1b35c.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[217],{"./node_modules/@carbon/icons/es/activity/16.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>_16_default});var _16_default={elem:"svg",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"currentColor",width:16,height:16},content:[{elem:"path",attrs:{d:"M12,29a1,1,0,0,1-.92-.62L6.33,17H2V15H7a1,1,0,0,1,.92.62L12,25.28,20.06,3.65A1,1,0,0,1,21,3a1,1,0,0,1,.93.68L25.72,15H30v2H25a1,1,0,0,1-.95-.68L21,7,12.94,28.35A1,1,0,0,1,12,29Z"}}],name:"activity",size:16}},"./node_modules/@carbon/icons/es/cloud--monitoring/16.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>_16_default});var _16_default={elem:"svg",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"currentColor",width:16,height:16},content:[{elem:"path",attrs:{d:"M28,16v6H4V6h7V4H4A2,2,0,0,0,2,6V22a2,2,0,0,0,2,2h8v4H8v2H24V28H20V24h8a2,2,0,0,0,2-2V16ZM18,28H14V24h4Z"}},{elem:"path",attrs:{d:"M18,18h-.01a1,1,0,0,1-.9511-.7253L15.2456,11H11V9h5a1,1,0,0,1,.9615.7252l1.0742,3.7589,3.0088-9.7783A1.0142,1.0142,0,0,1,22,3a.98.98,0,0,1,.9487.6838L24.7207,9H30v2H24a1,1,0,0,1-.9487-.6838l-1.0132-3.04L18.9556,17.2942A1,1,0,0,1,18,18Z"}}],name:"cloud--monitoring",size:16}},"./node_modules/@carbon/icons/es/dashboard/16.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>_16_default});var _16_default={elem:"svg",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"currentColor",width:16,height:16},content:[{elem:"path",attrs:{d:"M24 21H26V26H24z"}},{elem:"path",attrs:{d:"M20 16H22V26H20z"}},{elem:"path",attrs:{d:"M11,26a5.0059,5.0059,0,0,1-5-5H8a3,3,0,1,0,3-3V16a5,5,0,0,1,0,10Z"}},{elem:"path",attrs:{d:"M28,2H4A2.002,2.002,0,0,0,2,4V28a2.0023,2.0023,0,0,0,2,2H28a2.0027,2.0027,0,0,0,2-2V4A2.0023,2.0023,0,0,0,28,2Zm0,9H14V4H28ZM12,4v7H4V4ZM4,28V13H28.0007l.0013,15Z"}}],name:"dashboard",size:16}},"./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/tabs/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{P4:()=>TabsModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),utils=__webpack_require__("./src/utils/index.ts");let BaseTabHeader=class BaseTabHeader{constructor(elementRef,changeDetectorRef,eventService,renderer){this.elementRef=elementRef,this.changeDetectorRef=changeDetectorRef,this.eventService=eventService,this.renderer=renderer,this.cacheActive=!1,this.type="line",this.theme="dark",this.fullWidth=!1,this.dismissable=!1,this.scrollIntoView=!1,this.scrollDebounceWait=200,this.tabsClass=!0,this.OVERFLOW_BUTTON_OFFSET=44,this.longPressMultiplier=3,this.clickMultiplier=1.5,this.longPressInterval=null,this.tickInterval=null,this.scrollDebounceTimer=null}get containedClass(){return"contained"===this.type}get themeClass(){return"light"===this.theme}get dismissableClass(){return this.dismissable}get iconSizeDefaultClass(){return"default"===this.iconSize}get iconSizeLgClass(){return"lg"===this.iconSize}get layoutSizeLgClass(){return"lg"===this.iconSize}get hasHorizontalOverflow(){const tabList=this.headerContainer.nativeElement;return tabList.scrollWidth>tabList.clientWidth}get leftOverflowNavButtonHidden(){const tabList=this.headerContainer.nativeElement;return!this.hasHorizontalOverflow||!tabList.scrollLeft}get rightOverflowNavButtonHidden(){const tabList=this.headerContainer.nativeElement;return!this.hasHorizontalOverflow||tabList.scrollLeft+tabList.clientWidth===tabList.scrollWidth}handleScroll(){this.scrollDebounceWait<=0?this.changeDetectorRef.markForCheck():(clearTimeout(this.scrollDebounceTimer),this.scrollDebounceTimer=setTimeout((()=>{this.changeDetectorRef.markForCheck()}),this.scrollDebounceWait))}handleOverflowNavClick(direction,numOftabs=0){const tabList=this.headerContainer.nativeElement,{clientWidth,scrollLeft,scrollWidth}=tabList;direction>0?tabList.scrollLeft=Math.min(scrollLeft+scrollWidth/numOftabs*this.clickMultiplier,scrollWidth-clientWidth):direction<0&&(tabList.scrollLeft=Math.max(scrollLeft-scrollWidth/numOftabs*this.clickMultiplier,0))}handleOverflowNavMouseDown(direction){const tabList=this.headerContainer.nativeElement;this.longPressInterval=setTimeout((()=>(this.renderer.setStyle(tabList,"scroll-behavior","auto"),this.tickInterval=setInterval((()=>{if(tabList.scrollLeft+=direction*this.longPressMultiplier,this.leftOverflowNavButtonHidden||this.rightOverflowNavButtonHidden)return()=>{clearInterval(this.tickInterval),this.handleOverflowNavMouseUp()}})),()=>clearInterval(this.longPressInterval))),500)}handleOverflowNavMouseUp(){clearInterval(this.tickInterval),clearTimeout(this.longPressInterval),this.renderer.setStyle(this.headerContainer.nativeElement,"scroll-behavior","smooth")}};BaseTabHeader.ctorParameters=()=>[{type:core.ElementRef},{type:core.ChangeDetectorRef},{type:utils.PO},{type:core.Renderer2}],BaseTabHeader.propDecorators={cacheActive:[{type:core.Input}],followFocus:[{type:core.Input}],ariaLabel:[{type:core.Input}],ariaLabelledby:[{type:core.Input}],contentBefore:[{type:core.Input}],contentAfter:[{type:core.Input}],type:[{type:core.Input}],theme:[{type:core.Input}],iconSize:[{type:core.Input}],fullWidth:[{type:core.Input}],dismissable:[{type:core.Input}],scrollIntoView:[{type:core.Input}],scrollDebounceWait:[{type:core.Input}],tabsClass:[{type:core.HostBinding,args:["class.cds--tabs"]}],containedClass:[{type:core.HostBinding,args:["class.cds--tabs--contained"]}],themeClass:[{type:core.HostBinding,args:["class.cds--tabs--light"]}],dismissableClass:[{type:core.HostBinding,args:["class.cds--tabs--dismissable"]}],iconSizeDefaultClass:[{type:core.HostBinding,args:["class.cds--tabs__icon--default"]}],iconSizeLgClass:[{type:core.HostBinding,args:["class.cds--tabs__icon--lg"]}],layoutSizeLgClass:[{type:core.HostBinding,args:["class.cds--layout--size-lg"]}],headerContainer:[{type:core.ViewChild,args:["tabList",{static:!0}]}]},BaseTabHeader=(0,tslib_es6.gn)([(0,core.Component)({template:""})],BaseTabHeader);var Subscription=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Subscription.js"),i18n=__webpack_require__("./src/i18n/index.ts");let TabHeaderBase=class TabHeaderBase{constructor(){this.active=!1,this.disabled=!1,this.dismissable=!1,this.selected=new core.EventEmitter,this.tabClose=new core.EventEmitter,this._cacheActive=!1}set cacheActive(shouldCache){this._cacheActive=shouldCache,this.paneReference&&(this.paneReference.cacheActive=this.cacheActive)}get cacheActive(){return this._cacheActive}set paneTabIndex(tabIndex){this.paneReference&&(this.paneReference.tabIndex=tabIndex)}selectTab(){this.focus(),this.disabled||(this.selected.emit(),this.active=!0,this.paneReference&&(this.paneReference.active=!0))}};TabHeaderBase.propDecorators={cacheActive:[{type:core.Input}],paneTabIndex:[{type:core.Input}],active:[{type:core.Input}],disabled:[{type:core.Input}],icon:[{type:core.Input}],secondaryLabel:[{type:core.Input}],dismissable:[{type:core.Input}],paneReference:[{type:core.Input}],title:[{type:core.Input}],selected:[{type:core.Output}],tabClose:[{type:core.Output}]},TabHeaderBase=(0,tslib_es6.gn)([(0,core.Directive)()],TabHeaderBase);let TabHeader=class TabHeader extends TabHeaderBase{constructor(host){super(),this.host=host,this.type="button",this.navItem=!0,this.navLink=!0}get tabIndex(){return this.active?0:-1}get isSelected(){return this.active}get isDisabled(){return this.disabled}get ariaSelected(){return this.active}get ariaDisabled(){return this.disabled}get hostTitle(){return this.title??null}onClick(){this.selectTab()}onKeyDown(event){this.dismissable&&"Delete"===event.key&&(event.stopPropagation(),this.tabClose.emit())}ngAfterViewInit(){setTimeout((()=>{this.title=this.title?this.title:this.host.nativeElement.textContent}))}focus(){this.host.nativeElement.focus()}};TabHeader.ctorParameters=()=>[{type:core.ElementRef}],TabHeader.propDecorators={tabIndex:[{type:core.HostBinding,args:["attr.tabIndex"]}],isSelected:[{type:core.HostBinding,args:["class.cds--tabs__nav-item--selected"]}],isDisabled:[{type:core.HostBinding,args:["class.cds--tabs__nav-item--disabled"]}],type:[{type:core.HostBinding,args:["attr.type"]}],ariaSelected:[{type:core.HostBinding,args:["attr.aria-selected"]}],ariaDisabled:[{type:core.HostBinding,args:["attr.aria-disabled"]}],navItem:[{type:core.HostBinding,args:["class.cds--tabs__nav-item"]}],navLink:[{type:core.HostBinding,args:["class.cds--tabs__nav-link"]}],hostTitle:[{type:core.HostBinding,args:["attr.title"]}],onClick:[{type:core.HostListener,args:["click"]}],onKeyDown:[{type:core.HostListener,args:["keydown",["$event"]]}]},TabHeader=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsTabHeader], [ibmTabHeader]",providers:[{provide:TabHeaderBase,useExisting:(0,core.forwardRef)((()=>TabHeader))}]})],TabHeader);let TabHeaderGroup=class TabHeaderGroup extends BaseTabHeader{constructor(elementRef,changeDetectorRef,eventService,renderer,i18n){super(elementRef,changeDetectorRef,eventService,renderer),this.elementRef=elementRef,this.changeDetectorRef=changeDetectorRef,this.eventService=eventService,this.renderer=renderer,this.i18n=i18n,this.translations=this.i18n.get().TABS,this.isNavigation=!1,this.tabClose=new core.EventEmitter,this.selectedSubscriptionTracker=new Subscription.w0,this.closeSubscriptionTracker=new Subscription.w0,this.currentSelectedTab=0,this.activeIndex=null}get fullWidthClass(){return this.distributeWidth}get tallClass(){return this.hasSecondaryLabelTabs}get hasSecondaryLabelTabs(){return!(!this.tabHeaderQuery||"contained"!==this.type)&&this.tabHeaderQuery.toArray().some((h=>null!=h.secondaryLabel&&""!==String(h.secondaryLabel).trim()))}get distributeWidth(){return this.fullWidth&&"contained"===this.type&&!!this.tabHeaderQuery&&this.tabHeaderQuery.length<9}keyboardInput(event){const tabHeadersArray=this.tabHeaderQuery.toArray();"ArrowRight"===event.key&&(this.currentSelectedTab<tabHeadersArray.length-1?(event.preventDefault(),this.followFocus&&!tabHeadersArray[this.currentSelectedTab+1].disabled?tabHeadersArray[this.currentSelectedTab+1].selectTab():(tabHeadersArray[this.currentSelectedTab+1].focus(),this.currentSelectedTab++)):(event.preventDefault(),this.followFocus&&!tabHeadersArray[0].disabled?tabHeadersArray[0].selectTab():(tabHeadersArray[0].focus(),this.currentSelectedTab=0))),"ArrowLeft"===event.key&&(this.currentSelectedTab>0?(event.preventDefault(),this.followFocus&&!tabHeadersArray[this.currentSelectedTab-1].disabled?tabHeadersArray[this.currentSelectedTab-1].selectTab():(tabHeadersArray[this.currentSelectedTab-1].focus(),this.currentSelectedTab--)):(event.preventDefault(),this.followFocus&&!tabHeadersArray[tabHeadersArray.length-1].disabled?tabHeadersArray[tabHeadersArray.length-1].selectTab():(tabHeadersArray[tabHeadersArray.length-1].focus(),this.currentSelectedTab=tabHeadersArray.length-1))),"Home"===event.key&&(event.preventDefault(),this.followFocus&&!tabHeadersArray[0].disabled?tabHeadersArray[0].selectTab():(tabHeadersArray[0].focus(),this.currentSelectedTab=0)),"End"===event.key&&(event.preventDefault(),this.followFocus&&!tabHeadersArray[tabHeadersArray.length-1].disabled?tabHeadersArray[tabHeadersArray.length-1].selectTab():(tabHeadersArray[tabHeadersArray.length-1].focus(),this.currentSelectedTab=tabHeadersArray.length-1))," "!==event.key||this.followFocus||tabHeadersArray[this.currentSelectedTab].selectTab()}ngOnInit(){this.eventService.on(window,"resize",(()=>this.handleScroll()))}ngAfterContentInit(){this.selectedSubscriptionTracker.unsubscribe(),this.closeSubscriptionTracker.unsubscribe(),this.selectedSubscriptionTracker=new Subscription.w0,this.closeSubscriptionTracker=new Subscription.w0,this.tabHeaderQuery&&this.tabHeaderQuery.toArray().forEach((tabHeader=>{tabHeader.cacheActive=this.cacheActive,tabHeader.dismissable=this.dismissable,tabHeader.paneTabIndex=this.isNavigation?null:0}));this.tabHeaderQuery.toArray().forEach((tabHeader=>{this.selectedSubscriptionTracker.add(tabHeader.selected.subscribe((()=>{this.currentSelectedTab=this.tabHeaderQuery.toArray().indexOf(tabHeader),this.tabHeaderQuery.toArray().filter((header=>header!==tabHeader)).forEach((filteredHeader=>{filteredHeader.active=!1,filteredHeader.paneReference&&(filteredHeader.paneReference.active=!1)}))}))),this.closeSubscriptionTracker.add(tabHeader.tabClose.subscribe((()=>{const index=this.tabHeaderQuery.toArray().indexOf(tabHeader);this.tabClose.emit(index)})))})),this.setFirstTab()}ngOnDestroy(){this.selectedSubscriptionTracker.unsubscribe(),this.closeSubscriptionTracker.unsubscribe(),clearTimeout(this.scrollDebounceTimer)}ngOnChanges(changes){this.tabHeaderQuery&&(changes.cacheActive&&this.tabHeaderQuery.toArray().forEach((tabHeader=>tabHeader.cacheActive=this.cacheActive)),changes.dismissable&&this.tabHeaderQuery.toArray().forEach((tabHeader=>tabHeader.dismissable=this.dismissable)),changes.isNavigation&&this.tabHeaderQuery.toArray().forEach((tabHeader=>tabHeader.paneTabIndex=this.isNavigation?null:0)))}getSelectedTab(){const selected=this.tabHeaderQuery.toArray()[this.currentSelectedTab];return selected||{headingIsTemplate:!1,heading:""}}setFirstTab(){setTimeout((()=>{const headers=this.tabHeaderQuery.toArray();let selectedHeader=headers.find((h=>h.active||h.paneReference?.active));!selectedHeader&&headers.length>0&&(selectedHeader=headers[0]),selectedHeader&&(selectedHeader.selectTab(),this.activeIndex=this.currentSelectedTab,this.changeDetectorRef.markForCheck())}))}};TabHeaderGroup.ctorParameters=()=>[{type:core.ElementRef},{type:core.ChangeDetectorRef},{type:utils.PO},{type:core.Renderer2},{type:i18n.oc}],TabHeaderGroup.propDecorators={fullWidthClass:[{type:core.HostBinding,args:["class.cds--tabs--full-width"]}],tallClass:[{type:core.HostBinding,args:["class.cds--tabs--tall"]}],translations:[{type:core.Input}],isNavigation:[{type:core.Input}],tabClose:[{type:core.Output}],tabHeaderQuery:[{type:core.ContentChildren,args:[TabHeaderBase]}],headerContainer:[{type:core.ViewChild,args:["tabList",{static:!0}]}],keyboardInput:[{type:core.HostListener,args:["keydown",["$event"]]}]},TabHeaderGroup=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-tab-header-group, ibm-tab-header-group",template:'\n\t\t<button\n\t\t\ttype="button"\n\t\t\tclass="cds--tab--overflow-nav-button cds--tab--overflow-nav-button--previous"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--tab--overflow-nav-button--hidden\': leftOverflowNavButtonHidden\n\t\t\t}"\n\t\t\t[attr.aria-hidden]="leftOverflowNavButtonHidden"\n\t\t\t[attr.tabindex]="-1"\n\t\t\t[attr.aria-label]="translations.BUTTON_ARIA_LEFT"\n\t\t\t[attr.title]="translations.BUTTON_ARIA_LEFT"\n\t\t\t(click)="handleOverflowNavClick(-1, tabHeaderQuery.length)"\n\t\t\t(pointerdown)="handleOverflowNavMouseDown(-1)"\n\t\t\t(pointerup)="handleOverflowNavMouseUp()"\n\t\t\t(pointerleave)="handleOverflowNavMouseUp()"\n\t\t\t(pointerout)="handleOverflowNavMouseUp()"\n\t\t\t(pointercancel)="handleOverflowNavMouseUp()">\n\t\t\t<svg\n\t\t\t\tfocusable="false"\n\t\t\t\tpreserveAspectRatio="xMidYMid meet"\n\t\t\t\txmlns="http://www.w3.org/2000/svg"\n\t\t\t\tfill="currentColor"\n\t\t\t\twidth="16"\n\t\t\t\theight="16"\n\t\t\t\tviewBox="0 0 16 16"\n\t\t\t\taria-hidden="true">\n\t\t\t\t<path d="M5 8L10 3 10.7 3.7 6.4 8 10.7 12.3 10 13z"></path>\n\t\t\t</svg>\n\t\t</button>\n\t\t<div\n\t\t\tclass="cds--tab--list"\n\t\t\trole="tablist"\n\t\t\t[attr.aria-label]="ariaLabel || translations.HEADER_ARIA_LABEL"\n\t\t\t[attr.aria-labelledby]="ariaLabelledby || null"\n\t\t\t(scroll)="handleScroll()"\n\t\t\t#tabList>\n\t\t\t<ng-container [ngTemplateOutlet]="contentBefore"></ng-container>\n\t\t\t<ng-content></ng-content>\n\t\t\t<ng-container [ngTemplateOutlet]="contentAfter"></ng-container>\n\t\t</div>\n\t\t<button\n\t\t\ttype="button"\n\t\t\tclass="cds--tab--overflow-nav-button cds--tab--overflow-nav-button--next"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--tab--overflow-nav-button--hidden\': rightOverflowNavButtonHidden\n\t\t\t}"\n\t\t\t[attr.aria-hidden]="rightOverflowNavButtonHidden"\n\t\t\t[attr.tabindex]="-1"\n\t\t\t[attr.aria-label]="translations.BUTTON_ARIA_RIGHT"\n\t\t\t[attr.title]="translations.BUTTON_ARIA_RIGHT"\n\t\t\t(click)="handleOverflowNavClick(1, tabHeaderQuery.length)"\n\t\t\t(pointerdown)="handleOverflowNavMouseDown(1)"\n\t\t\t(pointerup)="handleOverflowNavMouseUp()"\n\t\t\t(pointerleave)="handleOverflowNavMouseUp()"\n\t\t\t(pointerout)="handleOverflowNavMouseUp()"\n\t\t\t(pointercancel)="handleOverflowNavMouseUp()">\n\t\t\t<svg\n\t\t\t\tfocusable="false"\n\t\t\t\tpreserveAspectRatio="xMidYMid meet"\n\t\t\t\txmlns="http://www.w3.org/2000/svg"\n\t\t\t\tfill="currentColor"\n\t\t\t\twidth="16"\n\t\t\t\theight="16"\n\t\t\t\tviewBox="0 0 16 16"\n\t\t\t\taria-hidden="true">\n\t\t\t\t<path d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"></path>\n\t\t\t</svg>\n\t\t</button>\n\t'})],TabHeaderGroup);let TabHeaderGroupVertical=class TabHeaderGroupVertical extends BaseTabHeader{constructor(elementRef,changeDetectorRef,eventService,renderer,i18n){super(elementRef,changeDetectorRef,eventService,renderer),this.elementRef=elementRef,this.changeDetectorRef=changeDetectorRef,this.eventService=eventService,this.renderer=renderer,this.i18n=i18n,this.translations=this.i18n.get().TABS,this.isNavigation=!1,this.tabClose=new core.EventEmitter,this.followFocus=!0,this.verticalClass=!0,this.currentSelectedTab=0,this.activeIndex=null,this.isOverflowingTop=!1,this.isOverflowingBottom=!1,this.selectedSubscriptionTracker=new Subscription.w0,this.closeSubscriptionTracker=new Subscription.w0,this.resizeObserver=null,this.type="contained",this.boundListScrollHandler=()=>this.updateOverflowState()}get tallClass(){return this.hasSecondaryLabelTabs}get hasSecondaryLabelTabs(){return!!this.tabHeaderQuery&&this.tabHeaderQuery.toArray().some((h=>null!=h.secondaryLabel&&""!==h.secondaryLabel))}keyboardInput(event){if(!this.tabHeaderQuery)return;const tabHeadersArray=this.tabHeaderQuery.toArray(),enabledHeaders=tabHeadersArray.filter((h=>!h.disabled));if(0===enabledHeaders.length)return;const referenceIndex=this.followFocus?this.currentSelectedTab:null!==this.activeIndex?this.activeIndex:this.currentSelectedTab,currentEnabledIndex=Math.max(0,enabledHeaders.indexOf(tabHeadersArray[referenceIndex]));let nextEnabledIndex=currentEnabledIndex,handled=!1;if("ArrowDown"===event.key?(nextEnabledIndex=(currentEnabledIndex+1)%enabledHeaders.length,handled=!0):"ArrowUp"===event.key?(nextEnabledIndex=(enabledHeaders.length+currentEnabledIndex-1)%enabledHeaders.length,handled=!0):"Home"===event.key?(nextEnabledIndex=0,handled=!0):"End"===event.key&&(nextEnabledIndex=enabledHeaders.length-1,handled=!0),handled){event.preventDefault();const nextHeader=enabledHeaders[nextEnabledIndex],nextIndex=tabHeadersArray.indexOf(nextHeader);this.followFocus?(nextHeader.selectTab(),this.currentSelectedTab=nextIndex):(nextHeader.focus(),this.activeIndex=nextIndex)}else if((" "===event.key||"Spacebar"===event.key)&&!this.followFocus){const focusIndex=null!==this.activeIndex?this.activeIndex:this.currentSelectedTab;tabHeadersArray[focusIndex].selectTab(),this.currentSelectedTab=focusIndex}}handleBlur(event){const relatedTarget=event.relatedTarget,container=this.headerContainer?.nativeElement;container&&relatedTarget&&container.contains(relatedTarget)||this.followFocus||(this.activeIndex=this.currentSelectedTab)}ngOnInit(){this.resizeObserver=new ResizeObserver((()=>{this.updateOverflowState(),this.changeDetectorRef.detectChanges()})),this.resizeObserver.observe(this.headerContainer.nativeElement),this.headerContainer.nativeElement.addEventListener("scroll",this.boundListScrollHandler)}ngOnDestroy(){this.selectedSubscriptionTracker.unsubscribe(),this.closeSubscriptionTracker.unsubscribe(),this.resizeObserver?.unobserve(this.headerContainer.nativeElement),this.resizeObserver=null,this.headerContainer.nativeElement.removeEventListener("scroll",this.boundListScrollHandler)}ngAfterContentInit(){this.selectedSubscriptionTracker.unsubscribe(),this.closeSubscriptionTracker.unsubscribe(),this.selectedSubscriptionTracker=new Subscription.w0,this.closeSubscriptionTracker=new Subscription.w0,this.applyHeaderInputs(),this.wireSubscriptions(),this.tabHeaderQuery.changes.subscribe((()=>{this.selectedSubscriptionTracker.unsubscribe(),this.closeSubscriptionTracker.unsubscribe(),this.selectedSubscriptionTracker=new Subscription.w0,this.closeSubscriptionTracker=new Subscription.w0,this.applyHeaderInputs(),this.wireSubscriptions(),this.changeDetectorRef.markForCheck()})),setTimeout((()=>{const headers=this.tabHeaderQuery.toArray(),activeIdx=headers.findIndex((h=>h.active||h.paneReference?.active)),initialIndex=activeIdx>=0?activeIdx:0;this.currentSelectedTab=initialIndex,this.activeIndex=initialIndex,headers[initialIndex]?.selectTab(),this.updateOverflowState()}))}ngOnChanges(changes){this.tabHeaderQuery&&(changes.cacheActive&&this.tabHeaderQuery.toArray().forEach((h=>h.cacheActive=this.cacheActive)),changes.dismissable&&this.tabHeaderQuery.toArray().forEach((h=>h.dismissable=this.dismissable)),changes.isNavigation&&this.tabHeaderQuery.toArray().forEach((h=>h.paneTabIndex=this.isNavigation?null:0)))}updateOverflowState(){const element=this.headerContainer?.nativeElement;if(!element)return;this.isOverflowingBottom=element.scrollTop+element.clientHeight+32<=element.scrollHeight,this.isOverflowingTop=element.scrollTop>32,this.changeDetectorRef.markForCheck()}scrollSelectedTabIntoView(){if(!this.scrollIntoView)return;const container=this.headerContainer?.nativeElement;container&&container.scrollTo({top:Math.max(0,64*(this.currentSelectedTab-1)),behavior:"smooth"})}applyHeaderInputs(){this.tabHeaderQuery.toArray().forEach((header=>{header.cacheActive=this.cacheActive,header.dismissable=this.dismissable,header.paneTabIndex=this.isNavigation?null:0}))}wireSubscriptions(){this.tabHeaderQuery.toArray().forEach((header=>{this.selectedSubscriptionTracker.add(header.selected.subscribe((()=>{this.currentSelectedTab=this.tabHeaderQuery.toArray().indexOf(header),this.tabHeaderQuery.toArray().filter((h=>h!==header)).forEach((other=>{other.active=!1,other.paneReference&&(other.paneReference.active=!1)})),this.scrollSelectedTabIntoView()}))),this.closeSubscriptionTracker.add(header.tabClose.subscribe((()=>{const index=this.tabHeaderQuery.toArray().indexOf(header);this.tabClose.emit(index)})))}))}};TabHeaderGroupVertical.ctorParameters=()=>[{type:core.ElementRef},{type:core.ChangeDetectorRef},{type:utils.PO},{type:core.Renderer2},{type:i18n.oc}],TabHeaderGroupVertical.propDecorators={translations:[{type:core.Input}],isNavigation:[{type:core.Input}],tabClose:[{type:core.Output}],followFocus:[{type:core.Input}],tabHeaderQuery:[{type:core.ContentChildren,args:[TabHeaderBase]}],headerContainer:[{type:core.ViewChild,args:["tabList",{static:!0}]}],verticalClass:[{type:core.HostBinding,args:["class.cds--tabs--vertical"]}],tallClass:[{type:core.HostBinding,args:["class.cds--tabs--tall"]}],keyboardInput:[{type:core.HostListener,args:["keydown",["$event"]]}],handleBlur:[{type:core.HostListener,args:["blur",["$event"]]}]},TabHeaderGroupVertical=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-tab-header-group-vertical, ibm-tab-header-group-vertical",template:'\n\t\t<div *ngIf="isOverflowingTop" class="cds--tab--list-gradient_top"></div>\n\t\t<div\n\t\t\t#tabList\n\t\t\tclass="cds--tab--list"\n\t\t\trole="tablist"\n\t\t\t[attr.aria-label]="ariaLabel || translations.HEADER_ARIA_LABEL"\n\t\t\t[attr.aria-labelledby]="ariaLabelledby || null">\n\t\t\t<ng-container [ngTemplateOutlet]="contentBefore"></ng-container>\n\t\t\t<ng-content></ng-content>\n\t\t\t<ng-container [ngTemplateOutlet]="contentAfter"></ng-container>\n\t\t</div>\n\t\t<div *ngIf="isOverflowingBottom" class="cds--tab--list-gradient_bottom"></div>\n\t'})],TabHeaderGroupVertical);let TabHeaderComponent=class TabHeaderComponent extends TabHeaderBase{constructor(){super(...arguments),this.iconOnly=!1,this.badgeIndicator=!1,this.iconSize="default",this.closeButtonAriaLabel="Press delete to remove tab",this.isTooltipOpen=!1,this.displayContents="contents"}ngAfterViewInit(){setTimeout((()=>{if(!this.title&&this.tabButton?.nativeElement){const text=this.tabButton.nativeElement.textContent?.trim();text&&(this.title=text)}}))}focus(){this.tabButton?.nativeElement?.focus()}onTabButtonClick(){this.selectTab()}onTabButtonKeyDown(event){this.dismissable&&"Delete"===event.key&&(event.stopPropagation(),this.tabClose.emit())}onClose(event){event.stopPropagation(),this.disabled||this.tabClose.emit()}get resolvedTitle(){return this.iconOnly?this.iconLabel||null:this.title||null}get closeButtonTitle(){const label=this.tabButton?.nativeElement?.textContent?.trim();return label?`Remove ${label} tab`:"Remove tab"}};TabHeaderComponent.propDecorators={iconOnly:[{type:core.Input}],iconLabel:[{type:core.Input}],badgeIndicator:[{type:core.Input}],iconSize:[{type:core.Input}],closeButtonAriaLabel:[{type:core.Input}],enterDelayMs:[{type:core.Input}],leaveDelayMs:[{type:core.Input}],isTooltipOpen:[{type:core.Input}],displayContents:[{type:core.HostBinding,args:["style.display"]}],tabButton:[{type:core.ViewChild,args:["tabButton"]}]},TabHeaderComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-tab-header, ibm-tab-header",providers:[{provide:TabHeaderBase,useExisting:(0,core.forwardRef)((()=>TabHeaderComponent))}],template:'\n\t\t<cds-tooltip\n\t\t\t*ngIf="iconOnly; else plainButton"\n\t\t\talign="bottom"\n\t\t\t[autoAlign]="true"\n\t\t\tclass="cds--icon-tooltip"\n\t\t\t[description]="iconLabel"\n\t\t\t[enterDelayMs]="enterDelayMs"\n\t\t\t[leaveDelayMs]="leaveDelayMs"\n\t\t\t[isOpen]="isTooltipOpen"\n\t\t\t[disabled]="disabled">\n\t\t\t<ng-container *ngTemplateOutlet="tabButtonTemplate"></ng-container>\n\t\t</cds-tooltip>\n\t\t<ng-template #plainButton>\n\t\t\t<ng-container *ngTemplateOutlet="tabButtonTemplate"></ng-container>\n\t\t</ng-template>\n\t\t<ng-template #tabButtonTemplate>\n\t\t\t<button\n\t\t\t\t#tabButton\n\t\t\t\ttype="button"\n\t\t\t\trole="tab"\n\t\t\t\tclass="cds--tabs__nav-item cds--tabs__nav-link"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--tabs__nav-item--selected\': active,\n\t\t\t\t\t\'cds--tabs__nav-item--disabled\': disabled,\n\t\t\t\t\t\'cds--tabs__nav-item--icon-only\': iconOnly,\n\t\t\t\t\t\'cds--tabs__nav-item--icon-only__20\': iconOnly && iconSize === \'lg\'\n\t\t\t\t}"\n\t\t\t\t[attr.aria-selected]="active"\n\t\t\t\t[attr.aria-disabled]="disabled"\n\t\t\t\t[attr.aria-controls]="paneReference?.id || null"\n\t\t\t\t[attr.aria-label]="iconOnly ? iconLabel : null"\n\t\t\t\t[attr.tabindex]="active ? 0 : -1"\n\t\t\t\t[attr.title]="resolvedTitle"\n\t\t\t\t[disabled]="disabled"\n\t\t\t\t(click)="onTabButtonClick()"\n\t\t\t\t(keydown)="onTabButtonKeyDown($event)">\n\t\t\t\t<ng-container *ngIf="iconOnly; else labeledTab">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]="icon"></ng-container>\n\t\t\t\t\t<span\n\t\t\t\t\t\t*ngIf="!disabled && badgeIndicator"\n\t\t\t\t\t\tclass="cds--badge-indicator"\n\t\t\t\t\t\taria-hidden="true">\n\t\t\t\t\t</span>\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-template #labeledTab>\n\t\t\t\t\t<div class="cds--tabs__nav-item-label-wrapper">\n\t\t\t\t\t\t<div *ngIf="dismissable && icon" class="cds--tabs__nav-item--icon-left">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]="icon"></ng-container>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span class="cds--tabs__nav-item-label">\n\t\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<div *ngIf="!dismissable && icon" class="cds--tabs__nav-item--icon">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]="icon"></ng-container>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf="secondaryLabel"\n\t\t\t\t\t\tclass="cds--tabs__nav-item-secondary-label"\n\t\t\t\t\t\t[attr.title]="secondaryLabel">\n\t\t\t\t\t\t{{ secondaryLabel }}\n\t\t\t\t\t</div>\n\t\t\t\t</ng-template>\n\t\t\t</button>\n\t\t</ng-template>\n\t\t<div *ngIf="dismissable" class="cds--tabs__nav-item--close">\n\t\t\t<button\n\t\t\t\ttype="button"\n\t\t\t\tclass="cds--tabs__nav-item--close-icon"\n\t\t\t\t[attr.tabindex]="-1"\n\t\t\t\t[attr.aria-disabled]="disabled"\n\t\t\t\t[attr.aria-hidden]="!(active && !disabled)"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--tabs__nav-item--close-icon--selected\': active,\n\t\t\t\t\t\'cds--tabs__nav-item--close-icon--disabled\': disabled\n\t\t\t\t}"\n\t\t\t\t[disabled]="disabled"\n\t\t\t\t[attr.title]="closeButtonTitle"\n\t\t\t\t(click)="onClose($event)">\n\t\t\t\t<svg\n\t\t\t\t\tfocusable="false"\n\t\t\t\t\tpreserveAspectRatio="xMidYMid meet"\n\t\t\t\t\txmlns="http://www.w3.org/2000/svg"\n\t\t\t\t\tfill="currentColor"\n\t\t\t\t\twidth="16"\n\t\t\t\t\theight="16"\n\t\t\t\t\tviewBox="0 0 32 32"\n\t\t\t\t\t[attr.aria-label]="closeButtonAriaLabel"\n\t\t\t\t\t[attr.aria-hidden]="!(active && !disabled)">\n\t\t\t\t\t<path d="M17.4141 16L24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16z"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t</div>\n\t'})],TabHeaderComponent);var tab_component=__webpack_require__("./src/tabs/tab.component.ts");let TabHeaders=class TabHeaders extends BaseTabHeader{constructor(elementRef,changeDetectorRef,eventService,renderer,i18n){super(elementRef,changeDetectorRef,eventService,renderer),this.elementRef=elementRef,this.changeDetectorRef=changeDetectorRef,this.eventService=eventService,this.renderer=renderer,this.i18n=i18n,this.translations=this.i18n.get().TABS,this.tabClose=new core.EventEmitter,this.firstVisibleTab=0,this.activeIndex=null}get tallClass(){return this.hasSecondaryLabelTabs}get fullWidthClass(){return this.distributeWidth}get hasSecondaryLabelTabs(){return!(!this.tabs||"contained"!==this.type)&&this.tabs.toArray().some((tab=>void 0!==tab.secondaryLabel&&null!==tab.secondaryLabel))}get distributeWidth(){return this.fullWidth&&"contained"===this.type&&!!this.tabs&&this.tabs.length<9}keyboardInput(event){const tabsArray=this.tabs.toArray(),enabledTabs=tabsArray.filter((tab=>!tab.disabled));if(0===enabledTabs.length)return;const referenceIndex=this.followFocus?this.currentSelectedTab:null!==this.activeIndex?this.activeIndex:this.currentSelectedTab,currentEnabledIndex=Math.max(0,enabledTabs.indexOf(tabsArray[referenceIndex]));let nextEnabledIndex=currentEnabledIndex,handled=!1;if("ArrowRight"===event.key?(nextEnabledIndex=(currentEnabledIndex+1)%enabledTabs.length,handled=!0):"ArrowLeft"===event.key?(nextEnabledIndex=(enabledTabs.length+currentEnabledIndex-1)%enabledTabs.length,handled=!0):"Home"===event.key?(nextEnabledIndex=0,handled=!0):"End"===event.key&&(nextEnabledIndex=enabledTabs.length-1,handled=!0),handled){event.preventDefault();const nextTab=enabledTabs[nextEnabledIndex],nextIndex=tabsArray.indexOf(nextTab);return this.followFocus?this.selectTab(this.allTabHeaders.toArray()[nextIndex].nativeElement,nextTab,nextIndex):this.activeIndex=nextIndex,void this.allTabHeaders.toArray()[nextIndex].nativeElement.focus()}if((" "===event.key||"Spacebar"===event.key)&&!this.followFocus){const focusIndex=null!==this.activeIndex?this.activeIndex:this.currentSelectedTab;this.selectTab(this.allTabHeaders.toArray()[focusIndex].nativeElement,tabsArray[focusIndex],focusIndex)}}handleBlur(event){const relatedTarget=event.relatedTarget,container=this.headerContainer?.nativeElement;container&&relatedTarget&&container.contains(relatedTarget)||this.followFocus||(this.activeIndex=this.currentSelectedTab)}handleTabKeyDown(event,tab,index){this.dismissable&&"Delete"===event.key&&this.handleClose(event,tab,index)}ngOnInit(){this.resizeObserver=new ResizeObserver((()=>{this.changeDetectorRef.detectChanges()})),this.resizeObserver.observe(this.headerContainer.nativeElement)}ngOnDestroy(){this.resizeObserver?.unobserve(this.headerContainer.nativeElement),clearTimeout(this.scrollDebounceTimer)}ngAfterContentInit(){this.tabInput?this.tabs=this.tabInput:this.tabs=this.tabQuery,this.tabs.forEach((tab=>tab.cacheActive=this.cacheActive)),this.tabs.changes.subscribe((()=>{this.setFirstTab(),this.changeDetectorRef.markForCheck()})),this.setFirstTab()}ngOnChanges(changes){this.tabs&&changes.cacheActive&&this.tabs.forEach((tab=>tab.cacheActive=this.cacheActive))}onTabFocus(ref,index){this.followFocus?this.currentSelectedTab=index:this.activeIndex=index,this.headerContainer.nativeElement.parentElement.scrollLeft=0,this.scrollIntoView&&this.scrollTabIntoView(this.allTabHeaders.toArray()[index]?.nativeElement)}getSelectedTab(){const selected=this.tabs.find((tab=>tab.active));return selected||{headingIsTemplate:!1,heading:""}}selectTab(ref,tab,tabIndex){tab.disabled||(this.currentSelectedTab=tabIndex,this.activeIndex=tabIndex,this.tabs.forEach((_tab=>_tab.active=!1)),tab.active=!0,tab.doSelect(),this.scrollIntoView&&this.scrollTabIntoView(this.allTabHeaders.toArray()[tabIndex]?.nativeElement))}handleClose(event,tab,tabIndex){if(event.stopPropagation(),tab.disabled)return;tab.tabClose.emit(),this.tabClose.emit(tabIndex);const headers=this.allTabHeaders?.toArray()??[],findNextEnabled=(start,step)=>{let i=start;for(;i>=0&&i<headers.length;){const candidate=this.tabs.toArray()[i];if(candidate&&!candidate.disabled&&i!==tabIndex)return headers[i]?.nativeElement;i+=step}return null},nextEl=findNextEnabled(tabIndex+1,1)||findNextEnabled(tabIndex-1,-1);nextEl&&nextEl.focus()}getCloseTitle(tab){return`Remove${tab.headingIsTemplate||"string"!=typeof tab.heading?"":` ${tab.heading}`} tab`}scrollTabIntoView(tabEl){if(!tabEl||!this.headerContainer?.nativeElement)return;const container=this.headerContainer.nativeElement;if(container.scrollWidth<=container.clientWidth)return;const buttonWidth=this.OVERFLOW_BUTTON_OFFSET,tabWidth=tabEl.getBoundingClientRect().width,start=tabEl.offsetLeft,end=start+tabWidth,visibleStart=container.scrollLeft+buttonWidth,visibleEnd=container.scrollLeft+container.clientWidth-buttonWidth;start<visibleStart?container.scrollLeft=start-buttonWidth:end>visibleEnd&&(container.scrollLeft=end+buttonWidth-container.clientWidth)}setFirstTab(){setTimeout((()=>{let firstTab=this.tabs.find((tab=>tab.active));!firstTab&&this.tabs.first&&(firstTab=this.tabs.first,firstTab.active=!0),firstTab&&(this.currentSelectedTab=this.tabs.toArray().indexOf(firstTab),this.activeIndex=this.currentSelectedTab,firstTab.doSelect())}))}};TabHeaders.ctorParameters=()=>[{type:core.ElementRef},{type:core.ChangeDetectorRef},{type:utils.PO},{type:core.Renderer2},{type:i18n.oc}],TabHeaders.propDecorators={tabInput:[{type:core.Input,args:["tabs"]}],translations:[{type:core.Input}],tabClose:[{type:core.Output}],headerContainer:[{type:core.ViewChild,args:["tabList",{static:!0}]}],tabQuery:[{type:core.ContentChildren,args:[tab_component.O]}],allTabHeaders:[{type:core.ViewChildren,args:["tabItem"]}],tallClass:[{type:core.HostBinding,args:["class.cds--tabs--tall"]}],fullWidthClass:[{type:core.HostBinding,args:["class.cds--tabs--full-width"]}],keyboardInput:[{type:core.HostListener,args:["keydown",["$event"]]}],handleBlur:[{type:core.HostListener,args:["blur",["$event"]]}]},TabHeaders=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-tab-headers, ibm-tab-headers",template:'\n\t\t<button\n\t\t\ttype="button"\n\t\t\t(click)="handleOverflowNavClick(-1, tabs.length)"\n\t\t\t(pointerdown)="handleOverflowNavMouseDown(-1)"\n\t\t\t(pointerup)="handleOverflowNavMouseUp()"\n\t\t\t(pointerleave)="handleOverflowNavMouseUp()"\n\t\t\t(pointerout)="handleOverflowNavMouseUp()"\n\t\t\tclass="cds--tab--overflow-nav-button cds--tab--overflow-nav-button--previous"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--tab--overflow-nav-button--hidden\': leftOverflowNavButtonHidden\n\t\t\t}"\n\t\t\t[attr.aria-hidden]="leftOverflowNavButtonHidden"\n\t\t\t[attr.tabindex]="-1"\n\t\t\t[attr.aria-label]="translations.BUTTON_ARIA_LEFT"\n\t\t\t[attr.title]="translations.BUTTON_ARIA_LEFT">\n\t\t\t<svg\n\t\t\t\tfocusable="false"\n\t\t\t\tpreserveAspectRatio="xMidYMid meet"\n\t\t\t\txmlns="http://www.w3.org/2000/svg"\n\t\t\t\tfill="currentColor"\n\t\t\t\twidth="16"\n\t\t\t\theight="16"\n\t\t\t\tviewBox="0 0 16 16"\n\t\t\t\taria-hidden="true">\n\t\t\t\t<path d="M5 8L10 3 10.7 3.7 6.4 8 10.7 12.3 10 13z"></path>\n\t\t\t</svg>\n\t\t</button>\n\t\t<div\n\t\t\t#tabList\n\t\t\tclass="cds--tab--list"\n\t\t\trole="tablist"\n\t\t\t[attr.aria-label]="ariaLabel || translations.HEADER_ARIA_LABEL"\n\t\t\t[attr.aria-labelledby]="ariaLabelledby || null"\n\t\t\t(scroll)="handleScroll()">\n\t\t\t<ng-container [ngTemplateOutlet]="contentBefore"></ng-container>\n\t\t\t<ng-container *ngFor="let tab of tabs; let i = index;">\n\t\t\t\t<cds-tooltip\n\t\t\t\t\t*ngIf="tab.iconOnly; else inlineTabItem"\n\t\t\t\t\talign="bottom"\n\t\t\t\t\t[autoAlign]="true"\n\t\t\t\t\tclass="cds--icon-tooltip"\n\t\t\t\t\t[description]="tab.iconLabel"\n\t\t\t\t\t[enterDelayMs]="tab.enterDelayMs ?? 100"\n\t\t\t\t\t[leaveDelayMs]="tab.leaveDelayMs ?? 300"\n\t\t\t\t\t[isOpen]="tab.isTooltipOpen"\n\t\t\t\t\t[disabled]="tab.disabled">\n\t\t\t\t\t<ng-container *ngTemplateOutlet="tabItemTpl; context: { tab: tab, i: i }"></ng-container>\n\t\t\t\t</cds-tooltip>\n\t\t\t\t<ng-template #inlineTabItem>\n\t\t\t\t\t<ng-container *ngTemplateOutlet="tabItemTpl; context: { tab: tab, i: i }"></ng-container>\n\t\t\t\t</ng-template>\n\t\t\t\t<div\n\t\t\t\t\t*ngIf="dismissable"\n\t\t\t\t\tclass="cds--tabs__nav-item--close">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype="button"\n\t\t\t\t\t\t[attr.tabindex]="-1"\n\t\t\t\t\t\t[attr.aria-disabled]="tab.disabled"\n\t\t\t\t\t\t[attr.aria-hidden]="!(tab.active && !tab.disabled)"\n\t\t\t\t\t\t[disabled]="tab.disabled"\n\t\t\t\t\t\tclass="cds--tabs__nav-item--close-icon"\n\t\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\t\'cds--tabs__nav-item--close-icon--selected\': tab.active,\n\t\t\t\t\t\t\t\'cds--tabs__nav-item--close-icon--disabled\': tab.disabled\n\t\t\t\t\t\t}"\n\t\t\t\t\t\t[attr.title]="getCloseTitle(tab)"\n\t\t\t\t\t\t(click)="handleClose($event, tab, i)">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tfocusable="false"\n\t\t\t\t\t\t\tpreserveAspectRatio="xMidYMid meet"\n\t\t\t\t\t\t\txmlns="http://www.w3.org/2000/svg"\n\t\t\t\t\t\t\tfill="currentColor"\n\t\t\t\t\t\t\twidth="16"\n\t\t\t\t\t\t\theight="16"\n\t\t\t\t\t\t\tviewBox="0 0 32 32"\n\t\t\t\t\t\t\t[attr.aria-label]="tab.closeButtonAriaLabel"\n\t\t\t\t\t\t\t[attr.aria-hidden]="!(tab.active && !tab.disabled)">\n\t\t\t\t\t\t\t<path d="M17.4141 16L24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16z"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-container [ngTemplateOutlet]="contentAfter"></ng-container>\n\t\t</div>\n\t\t<ng-template #tabItemTpl let-tab="tab" let-i="i">\n\t\t\t<button\n\t\t\t\t#tabItem\n\t\t\t\trole="tab"\n\t\t\t\t[attr.aria-selected]="tab.active"\n\t\t\t\t[attr.tabindex]="(tab.active?0:-1)"\n\t\t\t\t[attr.aria-controls]="tab.id"\n\t\t\t\t[attr.aria-disabled]="tab.disabled"\n\t\t\t\t[attr.aria-label]="tab.iconOnly ? tab.iconLabel : null"\n\t\t\t\t[disabled]="tab.disabled"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--tabs__nav-item--selected\': tab.active,\n\t\t\t\t\t\'cds--tabs__nav-item--disabled\': tab.disabled,\n\t\t\t\t\t\'cds--tabs__nav-item--icon-only\': tab.iconOnly,\n\t\t\t\t\t\'cds--tabs__nav-item--icon-only__20\': tab.iconOnly && iconSize === \'lg\'\n\t\t\t\t}"\n\t\t\t\tclass="cds--tabs__nav-item cds--tabs__nav-link"\n\t\t\t\ttype="button"\n\t\t\t\tdraggable="false"\n\t\t\t\tid="{{tab.id}}-header"\n\t\t\t\t[attr.title]="tab.iconOnly ? tab.iconLabel : (tab.title || (!tab.headingIsTemplate ? tab.heading : null))"\n\t\t\t\t(focus)="onTabFocus(tabItem, i)"\n\t\t\t\t(keydown)="handleTabKeyDown($event, tab, i)"\n\t\t\t\t(click)="selectTab(tabItem, tab, i)">\n\t\t\t\t<ng-container *ngIf="tab.iconOnly; else labeledTab">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]="tab.icon"></ng-container>\n\t\t\t\t\t<span\n\t\t\t\t\t\t*ngIf="!tab.disabled && tab.badgeIndicator"\n\t\t\t\t\t\tclass="cds--badge-indicator"\n\t\t\t\t\t\taria-hidden="true">\n\t\t\t\t\t</span>\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-template #labeledTab>\n\t\t\t\t\t<div class="cds--tabs__nav-item-label-wrapper">\n\t\t\t\t\t\t<div *ngIf="dismissable && tab.icon" class="cds--tabs__nav-item--icon-left">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]="tab.icon"></ng-container>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span class="cds--tabs__nav-item-label">\n\t\t\t\t\t\t\t<ng-container *ngIf="!tab.headingIsTemplate">\n\t\t\t\t\t\t\t\t{{ tab.heading }}\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\t*ngIf="tab.headingIsTemplate"\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]="tab.heading"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]="{$implicit: tab.context}">\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t*ngIf="!dismissable && tab.icon"\n\t\t\t\t\t\t\tclass="cds--tabs__nav-item--icon">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]="tab.icon"></ng-container>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf="hasSecondaryLabelTabs && tab.secondaryLabel"\n\t\t\t\t\t\tclass="cds--tabs__nav-item-secondary-label"\n\t\t\t\t\t\t[attr.title]="tab.secondaryLabel">\n\t\t\t\t\t\t{{ tab.secondaryLabel }}\n\t\t\t\t\t</div>\n\t\t\t\t</ng-template>\n\t\t\t</button>\n\t\t</ng-template>\n\t\t<button\n\t\t\ttype="button"\n\t\t\t(click)="handleOverflowNavClick(1, tabs.length)"\n\t\t\t(pointerdown)="handleOverflowNavMouseDown(1)"\n\t\t\t(pointerup)="handleOverflowNavMouseUp()"\n\t\t\t(pointerleave)="handleOverflowNavMouseUp()"\n\t\t\t(pointerout)="handleOverflowNavMouseUp()"\n\t\t\tclass="cds--tab--overflow-nav-button cds--tab--overflow-nav-button--next"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--tab--overflow-nav-button--hidden\': rightOverflowNavButtonHidden\n\t\t\t}"\n\t\t\t[attr.aria-hidden]="rightOverflowNavButtonHidden"\n\t\t\t[attr.tabindex]="-1"\n\t\t\t[attr.aria-label]="translations.BUTTON_ARIA_RIGHT"\n\t\t\t[attr.title]="translations.BUTTON_ARIA_RIGHT">\n\t\t\t<svg\n\t\t\t\tfocusable="false"\n\t\t\t\tpreserveAspectRatio="xMidYMid meet"\n\t\t\t\txmlns="http://www.w3.org/2000/svg"\n\t\t\t\tfill="currentColor"\n\t\t\t\twidth="16"\n\t\t\t\theight="16"\n\t\t\t\tviewBox="0 0 16 16"\n\t\t\t\taria-hidden="true">\n\t\t\t\t<path d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"></path>\n\t\t\t</svg>\n\t\t</button>\n\t'})],TabHeaders);let TabHeadersVertical=class TabHeadersVertical extends BaseTabHeader{constructor(elementRef,changeDetectorRef,eventService,renderer,i18n){super(elementRef,changeDetectorRef,eventService,renderer),this.elementRef=elementRef,this.changeDetectorRef=changeDetectorRef,this.eventService=eventService,this.renderer=renderer,this.i18n=i18n,this.translations=this.i18n.get().TABS,this.verticalClass=!0,this.activeIndex=null,this.isOverflowingTop=!1,this.isOverflowingBottom=!1,this.listScrollHandler=()=>this.updateOverflowState(),this.type="contained"}keyboardInput(event){if(!this.tabs)return;const tabsArray=this.tabs.toArray(),enabledTabs=tabsArray.filter((tab=>!tab.disabled));if(0===enabledTabs.length)return;const referenceIndex=this.followFocus?this.currentSelectedTab:null!==this.activeIndex?this.activeIndex:this.currentSelectedTab,currentEnabledIndex=Math.max(0,enabledTabs.indexOf(tabsArray[referenceIndex]));let nextEnabledIndex=currentEnabledIndex,handled=!1;if("ArrowDown"===event.key?(nextEnabledIndex=(currentEnabledIndex+1)%enabledTabs.length,handled=!0):"ArrowUp"===event.key?(nextEnabledIndex=(enabledTabs.length+currentEnabledIndex-1)%enabledTabs.length,handled=!0):"Home"===event.key?(nextEnabledIndex=0,handled=!0):"End"===event.key&&(nextEnabledIndex=enabledTabs.length-1,handled=!0),handled){event.preventDefault();const nextTab=enabledTabs[nextEnabledIndex],nextIndex=tabsAr