carbon-components-angular 5.8.1 → 5.9.1

package/docs/storybook/slider-slider-stories.feee50aa.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[6026],{"./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/slider/slider.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,Range:()=>Range,default:()=>slider_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"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),utils=__webpack_require__("./src/utils/index.ts");let Slider=class Slider{constructor(elementRef,eventService,changeDetection){this.elementRef=elementRef,this.eventService=eventService,this.changeDetection=changeDetection,this.step=1,this.id="slider-"+Slider.count++,this.shiftMultiplier=4,this.skeleton=!1,this.disableArrowKeys=!1,this.valueChange=new core.EventEmitter,this.hostClass=!0,this.labelId=`${this.id}-label`,this.bottomRangeId=`${this.id}-bottom-range`,this.topRangeId=`${this.id}-top-range`,this.fractionComplete=0,this.isMouseDown=!1,this._min=0,this._max=100,this._value=[this.min],this._previousValue=[this.min],this._disabled=!1,this._focusedThumbIndex=0,this.propagateChange=_=>{},this.onTouched=()=>{}}set min(v){v&&(this._min=v,this.value=this.value)}get min(){return this._min}set max(v){v&&(this._max=v,this.value=this.value)}get max(){return this._max}set value(v){v||(v=[this.min]),"number"!=typeof v&&"string"!=typeof v||(v=[Number(v)]),v[0]<this.min&&(v[0]=this.min),v[0]>this.max&&(v[0]=this.max),this.isRange()&&(this._previousValue[0]!==v[0]&&(v[0]>v[1]-this.step?v[0]=v[1]-this.step:v[0]>this.max?v[0]=this.max:v[0]<this.min&&(v[0]=this.min)),this._previousValue[1]!==v[1]&&(v[1]>this.max?v[1]=this.max:v[1]<this._value[0]+this.step?v[1]=this._value[0]+this.step:v[1]<this.min&&(v[1]=this.min))),this._previousValue=[...this._value],this._value=[...v],this.isRange()&&this.filledTrack?this.updateTrackRangeWidth():this.filledTrack&&(this.filledTrack.nativeElement.style.transform=`translate(0%, -50%) ${this.scaleX(this.getFractionComplete(v[0]))}`),this.inputs&&this.inputs.length&&this.inputs.forEach(((input,index)=>{input.value=this._value[index].toString()}));const valueToEmit=this.isRange()?v:v[0];this.propagateChange(valueToEmit),this.valueChange.emit(valueToEmit)}get value(){return this.isRange()?this._value:this._value[0]}set disabled(v){this._disabled=v;const inputs=this.getInputs();inputs&&inputs.length>0&&inputs.forEach((input=>input.disabled=v))}get disabled(){return this._disabled}ngAfterViewInit(){this.eventService.onDocument("mousemove",this.onMouseMove.bind(this)),this.eventService.onDocument("mouseup",this.onMouseUp.bind(this)),this.changeDetection.detectChanges(),this.inputs=this.getInputs(),this.inputs&&this.inputs.length>0&&this.inputs.forEach(((input,index)=>{input.type="number",input.classList.add("cds--slider-text-input"),input.classList.add("cds--text-input"),input.setAttribute("aria-labelledby",`${this.bottomRangeId} ${this.topRangeId}`),input.value=index<this._value.length?this._value[index].toString():this.max.toString(),this.eventService.on(input,"change",(event=>this.onChange(event,index))),0===index&&this.eventService.on(input,"focus",this.onFocus.bind(this))}))}trackThumbsBy(index,item){return index}registerOnChange(fn){this.propagateChange=fn}registerOnTouched(fn){this.onTouched=fn}writeValue(v){this.value=v}getFractionComplete(value){if(!this.track)return 0;const trackWidth=this.track.nativeElement.getBoundingClientRect().width;return this.convertToPx(value)/trackWidth}scaleX(complete){return`scaleX(${complete})`}convertToValue(pxAmount){const range=this.max-this.min,unrounded=pxAmount/this.track.nativeElement.getBoundingClientRect().width;return Math.round(range*unrounded/this.step)*this.step+this.min}convertToPx(value){if(!this.track)return 0;const trackWidth=this.track.nativeElement.getBoundingClientRect().width;return value>=this.max?trackWidth:value<=this.min?0:Math.round(trackWidth*((value-this.min)/(this.max-this.min)))}incrementValue(multiplier=1,index=0){this._value[index]=this._value[index]+this.step*multiplier,this.value=this.value}decrementValue(multiplier=1,index=0){this._value[index]=this._value[index]-this.step*multiplier,this.value=this.value}isRange(){return this._value.length>1}updateTrackRangeWidth(){const fraction=this.getFractionComplete(this._value[0]),fraction2=this.getFractionComplete(this._value[1]);this.filledTrack.nativeElement.style.transform=`translate(${100*fraction}%, -50%) ${this.scaleX(fraction2-fraction)}`}onChange(event,index){this._value[index]=Number(event.target.value),this.value=this.value}onClick(event){if(this.disabled)return;const trackLeft=this.track.nativeElement.getBoundingClientRect().left;this._value[0]=this.convertToValue(event.clientX-trackLeft),this.value=this.value}onFocus({target}){target.select()}onMouseMove(event){if(this.disabled||!this.isMouseDown)return;const track=this.track.nativeElement.getBoundingClientRect();let value;event.clientX-track.left<=track.width&&event.clientX-track.left>=0&&(value=this.convertToValue(event.clientX-track.left)),event.clientX-track.left>track.width&&(value=this.max),event.clientX-track.left<0&&(value=this.min),void 0!==value&&(this._value[this._focusedThumbIndex]=value,this.value=this.value)}onMouseDown(event,index=0){event.preventDefault(),this.disabled||(this._focusedThumbIndex=index,this.thumbs.toArray()[index].nativeElement.focus(),this.isMouseDown=!0)}onMouseUp(){this.isMouseDown=!1}onKeyDown(event,index=0){if(this.disableArrowKeys)return;const multiplier=event.shiftKey?this.shiftMultiplier:1;"ArrowLeft"===event.key||"ArrowDown"===event.key?(this.decrementValue(multiplier,index),this.thumbs.toArray()[index].nativeElement.focus(),event.preventDefault()):"ArrowRight"!==event.key&&"ArrowUp"!==event.key||(this.incrementValue(multiplier,index),this.thumbs.toArray()[index].nativeElement.focus(),event.preventDefault())}isTemplate(value){return value instanceof core.TemplateRef}getInputs(){return this.elementRef.nativeElement.querySelectorAll("input:not([type=range])")}};Slider.count=0,Slider.ctorParameters=()=>[{type:core.ElementRef},{type:utils.PO},{type:core.ChangeDetectorRef}],Slider.propDecorators={min:[{type:core.Input}],max:[{type:core.Input}],step:[{type:core.Input}],value:[{type:core.Input}],id:[{type:core.Input}],shiftMultiplier:[{type:core.Input}],skeleton:[{type:core.Input}],label:[{type:core.Input}],disableArrowKeys:[{type:core.Input}],disabled:[{type:core.Input}],valueChange:[{type:core.Output}],hostClass:[{type:core.HostBinding,args:["class.cds--form-item"]}],thumbs:[{type:core.ViewChildren,args:["thumbs"]}],track:[{type:core.ViewChild,args:["track"]}],filledTrack:[{type:core.ViewChild,args:["filledTrack"]}],range:[{type:core.ViewChild,args:["range"]}]},Slider=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-slider, ibm-slider",template:'\n\t\t<ng-container *ngIf="!skeleton; else skeletonTemplate">\n\t\t\t<label\n\t\t\t\t*ngIf="label"\n\t\t\t\t[for]="id"\n\t\t\t\t[id]="labelId"\n\t\t\t\tclass="cds--label"\n\t\t\t\t[ngClass]="{\'cds--label--disabled\': disabled}">\n\t\t\t\t<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>\n\t\t\t</label>\n\t\t\t<div class="cds--slider-container">\n\t\t\t\t<label [id]="bottomRangeId" class="cds--slider__range-label">\n\t\t\t\t\t<ng-content select="[minLabel]"></ng-content>\n\t\t\t\t</label>\n\t\t\t\t<div\n\t\t\t\t\tclass="cds--slider"\n\t\t\t\t\t[ngClass]="{\'cds--slider--disabled\': disabled}">\n\t\t\t\t\t<ng-container *ngIf="!isRange()">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t#thumbs\n\t\t\t\t\t\t\trole="slider"\n\t\t\t\t\t\t\t[id]="id"\n\t\t\t\t\t\t\t[attr.aria-labelledby]="labelId"\n\t\t\t\t\t\t\tclass="cds--slider__thumb"\n\t\t\t\t\t\t\t[ngStyle]="{left: getFractionComplete(value) * 100 + \'%\'}"\n\t\t\t\t\t\t\ttabindex="0"\n\t\t\t\t\t\t\t(mousedown)="onMouseDown($event)"\n\t\t\t\t\t\t\t(keydown)="onKeyDown($event)">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-container *ngIf="isRange()">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t#thumbs\n\t\t\t\t\t\t\t*ngFor="let thumb of value; let i = index; trackBy: trackThumbsBy"\n\t\t\t\t\t\t\trole="slider"\n\t\t\t\t\t\t\t[id]="id + (i > 0 ? \'-\' + i : \'\')"\n\t\t\t\t\t\t\t[attr.aria-labelledby]="labelId"\n\t\t\t\t\t\t\tclass="cds--slider__thumb"\n\t\t\t\t\t\t\t[ngStyle]="{left: getFractionComplete(thumb) * 100 + \'%\'}"\n\t\t\t\t\t\t\ttabindex="0"\n\t\t\t\t\t\t\t(mousedown)="onMouseDown($event, i)"\n\t\t\t\t\t\t\t(keydown)="onKeyDown($event, i)">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<div\n\t\t\t\t\t\t#track\n\t\t\t\t\t\tclass="cds--slider__track"\n\t\t\t\t\t\t(click)="onClick($event)">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\t#filledTrack\n\t\t\t\t\t\tclass="cds--slider__filled-track">\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#range\n\t\t\t\t\t\taria-label="slider"\n\t\t\t\t\t\tclass="cds--slider__input"\n\t\t\t\t\t\ttype="range"\n\t\t\t\t\t\t[step]="step"\n\t\t\t\t\t\t[min]="min"\n\t\t\t\t\t\t[max]="max"\n\t\t\t\t\t\t[value]="value.toString()">\n\t\t\t\t</div>\n\t\t\t\t<label [id]="topRangeId" class="cds--slider__range-label">\n\t\t\t\t\t<ng-content select="[maxLabel]"></ng-content>\n\t\t\t\t</label>\n\t\t\t\t<ng-content select="input"></ng-content>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<label *ngIf="label" class="cds--label cds--skeleton"></label>\n\t\t\t<div class="cds--slider-container cds--skeleton">\n\t\t\t\t<span class="cds--slider__range-label"></span>\n\t\t\t\t<div class="cds--slider">\n\t\t\t\t\t<div class="cds--slider__thumb"></div>\n\t\t\t\t\t<div class="cds--slider__track"></div>\n\t\t\t\t\t<div class="cds--slider__filled-track"></div>\n\t\t\t\t</div>\n\t\t\t\t<span class="cds--slider__range-label"></span>\n\t\t\t</div>\n\t\t</ng-template>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:Slider,multi:!0}]})],Slider);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let SliderModule=class SliderModule{};SliderModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Slider],exports:[Slider],imports:[common.CommonModule,utils.As]})],SliderModule);const slider_stories={title:"Components/Slider",decorators:[(0,dist.moduleMetadata)({imports:[SliderModule]})],component:Slider},Basic=(args=>({props:args,template:'\n\t\t<cds-slider\n\t\t\t[label]="label"\n\t\t\t[min]="min"\n\t\t\t[max]="max"\n\t\t\t[step]="step"\n\t\t\t[value]="value"\n\t\t\t[skeleton]="skeleton"\n\t\t\t[shiftMultiplier]="shiftMultiplier"\n\t\t\t[disabled]="disabled"\n\t\t\taria-Label="Label for slider value"\n\t\t\t(valueChange)="valueChange($event)">\n\t\t\t<span minLabel>{{minLabel}}</span>\n\t\t\t<span maxLabel>{{maxLabel}}</span>\n\t\t\t<input [ngClass]="{\'cds--text-input--light\': theme === \'light\'}"/>\n\t\t</cds-slider>\n\t'})).bind({});Basic.args={min:0,max:100,step:1,value:0,minLabel:"0",maxLabel:"100",disabled:!1,shiftMultiplier:4},Basic.argTypes={valueChange:{control:"Value changed!"},theme:{options:["light","dark"],defaultValue:"dark",control:"radio"}};const Range=(args=>({props:args,template:'\n\t\t<cds-slider\n\t\t\t[label]="label"\n\t\t\t[min]="min"\n\t\t\t[max]="max"\n\t\t\t[step]="step"\n\t\t\t[value]="value"\n\t\t\t[shiftMultiplier]="shiftMultiplier"\n\t\t\t[disabled]="disabled"\n\t\t\taria-Label="Label for slider value"\n\t\t\t(valueChange)="valueChange($event)">\n\t\t\t<span minLabel>{{minLabel}}</span>\n\t\t\t<span maxLabel>{{maxLabel}}</span>\n\t\t\t<input [ngClass]="{\'cds--text-input--light\': theme === \'light\'}"/>\n\t\t\t<input [ngClass]="{\'cds--text-input--light\': theme === \'light\'}"/>\n\t\t</cds-slider>\n\t'})).bind({});Range.args={...Basic.args,value:[20,80]},Range.argTypes={...Basic.argTypes}},"./src/utils/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{NV:()=>AnimationFrameService,Zg:()=>DocumentService,d2:()=>ElementService,PO:()=>EventService,As:()=>UtilsModule,d9:()=>clone,_K:()=>closestAttr,O3:()=>getScrollableParents,np:()=>getScrollbarWidth,OQ:()=>hasScrollableParents,TS:()=>object_merge});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),Subject=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Subject.js"),from=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/observable/from.js");let AnimationFrameServiceSingleton=class AnimationFrameServiceSingleton{constructor(ngZone){this.ngZone=ngZone,this.frameSource=new Subject.x,this.tick=this.frameSource.asObservable(),this.ngZone.runOutsideAngular((()=>{this.animationFrameId=requestAnimationFrame(this.doTick.bind(this))}))}ngOnDestroy(){cancelAnimationFrame(this.animationFrameId)}doTick(frame){this.frameSource.next(frame),this.ngZone.runOutsideAngular((()=>{requestAnimationFrame(this.doTick.bind(this))}))}};AnimationFrameServiceSingleton.ctorParameters=()=>[{type:core.NgZone}],AnimationFrameServiceSingleton=(0,tslib_es6.gn)([(0,core.Injectable)()],AnimationFrameServiceSingleton);let AnimationFrameService=class AnimationFrameService{constructor(singleton){this.singleton=singleton,this.tick=(0,from.D)(this.singleton.tick)}};AnimationFrameService.ctorParameters=()=>[{type:AnimationFrameServiceSingleton}],AnimationFrameService=(0,tslib_es6.gn)([(0,core.Injectable)()],AnimationFrameService);const object_merge=(target,...objects)=>{for(const object of objects)for(const key in object)object.hasOwnProperty(key)&&(object[key]instanceof Object?(target[key]||(target[key]={}),target[key]=object_merge(target[key],object[key])):target[key]=object[key]);return target};__webpack_require__("./node_modules/@carbon/utils-position/index.js");const isScrollableElement=element=>{const computedStyle=getComputedStyle(element);return"auto"===computedStyle.overflow||"scroll"===computedStyle.overflow||"auto"===computedStyle["overflow-y"]||"scroll"===computedStyle["overflow-y"]||"auto"===computedStyle["overflow-x"]||"scroll"===computedStyle["overflow-x"]},isVisibleInContainer=(element,container)=>{const elementRect=element.getBoundingClientRect(),containerRect=container.getBoundingClientRect();if("BODY"===container.tagName||"HTML"===container.tagName){const isAboveViewport=elementRect.top<0&&elementRect.top+element.clientHeight<0,isLeftOfViewport=elementRect.left<0,isBelowViewport=elementRect.bottom-element.clientHeight>(window.innerHeight||document.documentElement.clientHeight),isRightOfViewport=elementRect.right>(window.innerWidth||document.documentElement.clientWidth);return!(isAboveViewport||isBelowViewport||isLeftOfViewport||isRightOfViewport)}return elementRect.bottom-element.clientHeight<=containerRect.bottom+(container.offsetHeight-container.clientHeight)/2&&elementRect.top>=-element.clientHeight},getScrollableParents=node=>{const elements=[document.body];for(;node.parentElement&&node!==document.body;)isScrollableElement(node)&&elements.push(node),node=node.parentElement;return elements},hasScrollableParents=node=>{for(;node.parentElement&&node!==document.body;){if(isScrollableElement(node))return!0;node=node.parentElement}return!1};function clone(obj){return JSON.parse(JSON.stringify(obj))}function matchesAttr(el,attr,val){const styles=window.getComputedStyle(el);return val.includes(styles[attr])}function closestAttr(s,t,element){let el=element;if(!element)return null;do{if(matchesAttr(el,s,t))return el;el=el.parentElement||el.parentNode}while(null!==el&&1===el.nodeType);return null}var operators_map=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/map.js");let ElementService=class ElementService{constructor(singleton){this.singleton=singleton,this.tick=(0,from.D)(this.singleton.tick)}visibility(target,parentElement=target){const scrollableParents=getScrollableParents(parentElement);return this.tick.pipe((0,operators_map.U)((()=>{for(const parent of scrollableParents)if(!isVisibleInContainer(target,parent))return{visible:!1};return{visible:!0}})))}};ElementService.ctorParameters=()=>[{type:AnimationFrameServiceSingleton}],ElementService=(0,tslib_es6.gn)([(0,core.Injectable)()],ElementService);var Subscription=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Subscription.js"),Observable=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Observable.js"),observable_fromEvent=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/observable/fromEvent.js");const getEventObservable=(targetElement,eventType)=>{switch(eventType){case"scroll":case"resize":case"touchstart":case"touchmove":case"touchend":return(0,observable_fromEvent.R)(targetElement,eventType,{passive:!0});default:return(0,observable_fromEvent.R)(targetElement,eventType)}};let DocumentService=class DocumentService{constructor(){this.globalEvents=new Map,this.documentRef=document,this.subscriptions=new Subscription.w0}handleEvent(eventType,callback){this.globalEvents.has(eventType)||(this.documentRef?this.globalEvents.set(eventType,getEventObservable(this.documentRef,eventType)):this.globalEvents.set(eventType,new Observable.y));const observable=this.globalEvents.get(eventType);this.subscriptions.add(observable.subscribe(callback))}handleClick(callback){this.handleEvent("click",callback)}ngOnDestroy(){this.subscriptions.unsubscribe(),this.globalEvents=null}};DocumentService=(0,tslib_es6.gn)([(0,core.Injectable)()],DocumentService);let EventService=class EventService{constructor(documentService){this.documentService=documentService,this.subscriptions=new Subscription.w0,this.targets=new WeakMap}on(targetElement,eventType,callback){this.targets.has(targetElement)||this.targets.set(targetElement,new Map);const eventMap=this.targets.get(targetElement);eventMap.has(eventType)||eventMap.set(eventType,getEventObservable(targetElement,eventType));const subscription=eventMap.get(eventType).subscribe(callback);this.subscriptions.add(subscription)}onDocument(eventType,callback){this.documentService.handleEvent(eventType,callback)}ngOnDestroy(){this.subscriptions.unsubscribe()}};EventService.ctorParameters=()=>[{type:DocumentService}],EventService=(0,tslib_es6.gn)([(0,core.Injectable)()],EventService);const DOCUMENT_SERVICE_PROVIDER={provide:DocumentService,deps:[[new core.Optional,new core.SkipSelf,DocumentService]],useFactory:function DOCUMENT_SERVICE_PROVIDER_FACTORY(parentService){return parentService||new DocumentService}};const ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER={provide:AnimationFrameServiceSingleton,deps:[[new core.Optional,new core.SkipSelf,AnimationFrameServiceSingleton],core.NgZone],useFactory:function ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER_FACTORY(parentService,ngZone){return parentService||new AnimationFrameServiceSingleton(ngZone)}};let UtilsModule=class UtilsModule{};UtilsModule=(0,tslib_es6.gn)([(0,core.NgModule)({providers:[DOCUMENT_SERVICE_PROVIDER,ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER,AnimationFrameServiceSingleton,DocumentService,AnimationFrameService,ElementService,EventService]})],UtilsModule);let _scrollbarWidth=-1;function getScrollbarWidth(){if(_scrollbarWidth>=0)return _scrollbarWidth;const outer=document.createElement("div");outer.style.visibility="hidden",outer.style.width="100px",outer.style.msOverflowStyle="scrollbar",document.body.appendChild(outer);const widthNoScroll=outer.offsetWidth;outer.style.overflow="scroll";const inner=document.createElement("div");inner.style.width="100%",outer.appendChild(inner);const widthWithScroll=inner.offsetWidth;return outer.parentNode.removeChild(outer),_scrollbarWidth=widthNoScroll-widthWithScroll,_scrollbarWidth}},"./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.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}})},"./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 core_client_1=__webpack_require__("@storybook/core-client"),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,core_client_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__,"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}})}}]);

package/docs/storybook/{tabs-tabs-stories.d36fc351.iframe.bundle.js → tabs-tabs-stories.675b2d72.iframe.bundle.js}

@@ -1 +1 @@
-"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[459],{"./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/tabs.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,BeforeAndAfter:()=>BeforeAndAfter,Skeleton:()=>Skeleton,TabheaderGroup:()=>TabheaderGroup,With:()=>With,default:()=>tabs_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"),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.tabsClass=!0,this.OVERFLOW_BUTTON_OFFSET=44,this.longPressMultiplier=3,this.clickMultiplier=1.5,this.longPressInterval=null,this.tickInterval=null}get containedClass(){return"contained"===this.type}get themeClass(){return"light"===this.theme}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.changeDetectorRef.markForCheck()}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}],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"]}],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");let TabHeader=class TabHeader{constructor(host){this.host=host,this.active=!1,this.disabled=!1,this.type="button",this.ariaSelected=this.active,this.ariaDisabled=this.disabled,this.navItem=!0,this.navLink=!0,this.selected=new core.EventEmitter,this._cacheActive=!1}get tabIndex(){return this.active?0:-1}get isSelected(){return this.active}get isDisabled(){return this.disabled}set cacheActive(shouldCache){this._cacheActive=shouldCache,this.paneReference&&(this.paneReference.cacheActive=this.cacheActive)}set paneTabIndex(tabIndex){this.paneReference&&(this.paneReference.tabIndex=tabIndex)}get cacheActive(){return this._cacheActive}onClick(){this.selectTab()}ngAfterViewInit(){setTimeout((()=>{this.title=this.title?this.title:this.host.nativeElement.textContent}))}selectTab(){this.focus(),this.disabled||(this.selected.emit(),this.active=!0,this.paneReference&&(this.paneReference.active=!0))}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"]}],cacheActive:[{type:core.Input}],paneTabIndex:[{type:core.Input}],active:[{type:core.Input}],disabled:[{type:core.Input}],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"]}],paneReference:[{type:core.Input}],title:[{type:core.HostBinding,args:["attr.title"]},{type:core.Input}],selected:[{type:core.Output}],onClick:[{type:core.HostListener,args:["click"]}]},TabHeader=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsTabHeader], [ibmTabHeader]"})],TabHeader);let TabHeaderGroup=class TabHeaderGroup extends BaseTabHeader{constructor(elementRef,changeDetectorRef,eventService,renderer){super(elementRef,changeDetectorRef,eventService,renderer),this.elementRef=elementRef,this.changeDetectorRef=changeDetectorRef,this.eventService=eventService,this.renderer=renderer,this.isNavigation=!1,this.selectedSubscriptionTracker=new Subscription.w0,this.currentSelectedTab=0}keyboardInput(event){let 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.tabHeaderQuery&&this.tabHeaderQuery.toArray().forEach((tabHeader=>{tabHeader.cacheActive=this.cacheActive,tabHeader.paneTabIndex=this.isNavigation?null:0}));const selectedSubscriptions=this.tabHeaderQuery.toArray().forEach((tabHeader=>{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.selectedSubscriptionTracker.add(selectedSubscriptions),setTimeout((()=>this.tabHeaderQuery.toArray()[this.currentSelectedTab].selectTab()))}ngOnChanges(changes){this.tabHeaderQuery&&(changes.cacheActive&&this.tabHeaderQuery.toArray().forEach((tabHeader=>tabHeader.cacheActive=this.cacheActive)),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:""}}};TabHeaderGroup.ctorParameters=()=>[{type:core.ElementRef},{type:core.ChangeDetectorRef},{type:utils.PO},{type:core.Renderer2}],TabHeaderGroup.propDecorators={isNavigation:[{type:core.Input}],tabHeaderQuery:[{type:core.ContentChildren,args:[TabHeader]}],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(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"\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(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);var i18n=__webpack_require__("./src/i18n/index.ts");let nextId=0,Tab=class Tab{constructor(){this.headingIsTemplate=!1,this.active=!1,this.disabled=!1,this.tabIndex=0,this.id="n-tab-"+nextId++,this.selected=new core.EventEmitter,this.attrClass=this.id,this._cacheActive=!1}set cacheActive(shouldCache){this._cacheActive=shouldCache}get cacheActive(){return this._cacheActive}ngOnInit(){this.heading instanceof core.TemplateRef&&(this.headingIsTemplate=!0)}doSelect(){this.selected.emit()}shouldRender(){return this.active||this.cacheActive}};Tab.propDecorators={heading:[{type:core.Input}],title:[{type:core.Input}],context:[{type:core.Input}],active:[{type:core.Input}],disabled:[{type:core.Input}],tabIndex:[{type:core.Input}],id:[{type:core.Input}],cacheActive:[{type:core.Input}],selected:[{type:core.Output}],attrClass:[{type:core.HostBinding,args:["attr.id"]}]},Tab=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-tab, ibm-tab",template:'\n\t\t<div\n\t\t\t[attr.tabindex]="tabIndex"\n\t\t\trole="tabpanel"\n\t\t\t*ngIf="shouldRender()"\n\t\t\tclass="cds--tab-content"\n\t\t\t[ngStyle]="{\'display\': active ? null : \'none\'}"\n\t\t\t[attr.aria-labelledby]="id + \'-header\'"\n\t\t\taria-live="polite">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t'})],Tab);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.firstVisibleTab=0}keyboardInput(event){let tabsArray=this.tabs.toArray();"ArrowRight"===event.key&&(this.currentSelectedTab<this.allTabHeaders.length-1?(event.preventDefault(),this.followFocus&&this.selectTab(event.target,tabsArray[this.currentSelectedTab+1],this.currentSelectedTab),this.allTabHeaders.toArray()[this.currentSelectedTab+1].nativeElement.focus()):(event.preventDefault(),this.followFocus&&this.selectTab(event.target,tabsArray[0],0),this.allTabHeaders.first.nativeElement.focus())),"ArrowLeft"===event.key&&(this.currentSelectedTab>0?(event.preventDefault(),this.followFocus&&this.selectTab(event.target,tabsArray[this.currentSelectedTab-1],this.currentSelectedTab),this.allTabHeaders.toArray()[this.currentSelectedTab-1].nativeElement.focus()):(event.preventDefault(),this.followFocus&&this.selectTab(event.target,tabsArray[this.allTabHeaders.length-1],this.allTabHeaders.length),this.allTabHeaders.toArray()[this.allTabHeaders.length-1].nativeElement.focus())),"Home"===event.key&&(event.preventDefault(),this.followFocus&&this.selectTab(event.target,tabsArray[0],0),this.allTabHeaders.toArray()[0].nativeElement.focus()),"End"===event.key&&(event.preventDefault(),this.followFocus&&this.selectTab(event.target,tabsArray[this.allTabHeaders.length-1],this.allTabHeaders.length),this.allTabHeaders.toArray()[this.allTabHeaders.length-1].nativeElement.focus())," "!==event.key&&"Spacebar"!==event.key||this.followFocus||this.selectTab(event.target,tabsArray[this.currentSelectedTab],this.currentSelectedTab)}ngOnInit(){this.eventService.on(window,"resize",(()=>this.handleScroll()))}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.setFirstTab()}ngOnChanges(changes){this.tabs&&changes.cacheActive&&this.tabs.forEach((tab=>tab.cacheActive=this.cacheActive))}onTabFocus(ref,index){this.currentSelectedTab=index,this.headerContainer.nativeElement.parentElement.scrollLeft=0}getSelectedTab(){const selected=this.tabs.find((tab=>tab.active));return selected||{headingIsTemplate:!1,heading:""}}selectTab(ref,tab,tabIndex){tab.disabled||(this.currentSelectedTab=tabIndex,this.tabs.forEach((_tab=>_tab.active=!1)),tab.active=!0,tab.doSelect())}setFirstTab(){setTimeout((()=>{let firstTab=this.tabs.find((tab=>tab.active));!firstTab&&this.tabs.first&&(firstTab=this.tabs.first,firstTab.active=!0),firstTab&&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}],headerContainer:[{type:core.ViewChild,args:["tabList",{static:!0}]}],tabQuery:[{type:core.ContentChildren,args:[Tab]}],allTabHeaders:[{type:core.ViewChildren,args:["tabItem"]}],keyboardInput:[{type:core.HostListener,args:["keydown",["$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[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="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(scroll)="handleScroll()">\n\t\t\t<ng-container [ngTemplateOutlet]="contentBefore"></ng-container>\n\t\t\t<button\n\t\t\t\t*ngFor="let tab of tabs; let i = index;"\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[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}"\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(focus)="onTabFocus(tabItem, i)"\n\t\t\t\t(click)="selectTab(tabItem, tab, i)">\n\t\t\t\t<ng-container *ngIf="!tab.headingIsTemplate">\n\t\t\t\t\t{{ tab.heading }}\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-template\n\t\t\t\t\t*ngIf="tab.headingIsTemplate"\n\t\t\t\t\t[ngTemplateOutlet]="tab.heading"\n\t\t\t\t\t[ngTemplateOutletContext]="{$implicit: tab.context}">\n\t\t\t\t</ng-template>\n\t\t\t</button>\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\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[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 Tabs=class Tabs{constructor(){this.position="top",this.cacheActive=!1,this.followFocus=!0,this.isNavigation=!1,this.type="line",this.theme="dark",this.skeleton=!1}ngAfterContentInit(){this.tabHeaders&&(this.tabHeaders.cacheActive=this.cacheActive),this.tabs.forEach((tab=>{tab.tabIndex=this.isNavigation?null:0}))}ngOnChanges(changes){this.tabHeaders&&changes.cacheActive&&(this.tabHeaders.cacheActive=this.cacheActive),this.tabs&&changes.isNavigation&&this.tabs.forEach((tab=>{tab.tabIndex=this.isNavigation?null:0}))}hasTabHeaders(){return this.tabs.length>0}};Tabs.propDecorators={position:[{type:core.Input}],cacheActive:[{type:core.Input}],followFocus:[{type:core.Input}],isNavigation:[{type:core.Input}],ariaLabel:[{type:core.Input}],ariaLabelledby:[{type:core.Input}],type:[{type:core.Input}],theme:[{type:core.Input}],skeleton:[{type:core.Input}],tabs:[{type:core.ContentChildren,args:[Tab,{descendants:!1}]}],tabHeaders:[{type:core.ContentChild,args:[TabHeaders]}]},Tabs=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-tabs, ibm-tabs",template:'\n\t\t<ng-container *ngIf="skeleton">\n\t\t\t<cds-tabs-skeleton></cds-tabs-skeleton>\n\t\t</ng-container>\n\t\t<ng-container *ngIf="!skeleton">\n\t\t\t<cds-tab-headers\n\t\t\t\t*ngIf="hasTabHeaders() && position === \'top\'"\n\t\t\t\t[theme]="theme"\n\t\t\t\t[tabs]="tabs"\n\t\t\t\t[followFocus]="followFocus"\n\t\t\t\t[cacheActive]="cacheActive"\n\t\t\t\t[contentBefore]="before"\n\t\t\t\t[contentAfter]="after"\n\t\t\t\t[ariaLabel]="ariaLabel"\n\t\t\t\t[ariaLabelledby]="ariaLabelledby"\n\t\t\t\t[type]="type">\n\t\t\t</cds-tab-headers>\n\t\t\t<ng-content></ng-content>\n\t\t\t<ng-template #before>\n\t\t\t\t<ng-content select="[before]"></ng-content>\n\t\t\t</ng-template>\n\t\t\t<ng-template #after>\n\t\t\t\t<ng-content select="[after]"></ng-content>\n\t\t\t</ng-template>\n\t\t\t<cds-tab-headers\n\t\t\t\t*ngIf="hasTabHeaders() && position === \'bottom\'"\n\t\t\t\t[tabs]="tabs"\n\t\t\t\t[cacheActive]="cacheActive"\n\t\t\t\t[type]="type">\n\t\t\t</cds-tab-headers>\n\t\t</ng-container>\n\t'})],Tabs);let TabSkeleton=class TabSkeleton{constructor(){this.skeleton=!0,this.tabs=!0,this.numOfSkeletonTabs=new Array(5)}set numOftabs(num){this.numOfSkeletonTabs=new Array(num)}};TabSkeleton.propDecorators={numOftabs:[{type:core.Input}],skeleton:[{type:core.HostBinding,args:["class.cds--skeleton"]}],tabs:[{type:core.HostBinding,args:["class.cds--tabs"]}]},TabSkeleton=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-tabs-skeleton, ibm-tabs-skeleton",template:'\n\t\t<ul class="cds--tabs__nav">\n\t\t\t<li\n\t\t\t\t*ngFor="let i of numOfSkeletonTabs"\n\t\t\t\tclass="cds--tabs__nav-item">\n\t\t\t\t<div class="cds--tabs__nav-link">\n\t\t\t\t\t<span></span>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t</ul>\n\t'})],TabSkeleton);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let TabsModule=class TabsModule{};TabsModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[BaseTabHeader,Tabs,Tab,TabHeader,TabHeaders,TabHeaderGroup,TabSkeleton],exports:[Tabs,Tab,TabHeader,TabHeaders,TabHeaderGroup,TabSkeleton],imports:[common.CommonModule,utils.As,i18n.LU]})],TabsModule);let TabStory=class TabStory{constructor(){this.skeleton=!1,this.followFocus=!0,this.cacheActive=!1,this.isNavigation=!0,this.type="line"}};TabStory.propDecorators={skeleton:[{type:core.Input}],followFocus:[{type:core.Input}],cacheActive:[{type:core.Input}],isNavigation:[{type:core.Input}],type:[{type:core.Input}]},TabStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-header-group",template:'\n\t\t<cds-tab-header-group\n\t\t\t[type]="type"\n\t\t\t[followFocus]="followFocus"\n\t\t\t[cacheActive]="cacheActive"\n\t\t\t[isNavigation]="isNavigation">\n\t\t\t<button cdsTabHeader [paneReference]="content1">\n\t\t\t\tContent 1\n\t\t\t</button>\n\t\t\t<button cdsTabHeader [paneReference]="content2">\n\t\t\t\tContent 2\n\t\t\t</button>\n\t\t\t<button cdsTabHeader [paneReference]="content3" disabled="true">\n\t\t\t\tContent 3\n\t\t\t</button>\n\t\t\t<button cdsTabHeader [paneReference]="content4">\n\t\t\t\tContent 4\n\t\t\t</button>\n\t\t\t<button cdsTabHeader [paneReference]="content5">\n\t\t\t\tContent 5\n\t\t\t</button>\n\t\t</cds-tab-header-group>\n\n\t\t<cds-tab #content1>\n\t\t\tTab Content 1\n\t\t</cds-tab>\n\t\t<cds-tab #content2>\n\t\t\tTab Content 2\n\t\t</cds-tab>\n\t\t<cds-tab #content3>\n\t\t\tTab Content 3\n\t\t</cds-tab>\n\t\t<cds-tab #content4>\n\t\t\tTab Content 4\n\t\t</cds-tab>\n\t\t<cds-tab #content5>\n\t\t\tTab Content 5\n\t\t</cds-tab>\n\t'})],TabStory);const tabs_stories={title:"Components/Tabs",decorators:[(0,dist.moduleMetadata)({imports:[TabsModule],declarations:[TabStory]})]},Basic=(args=>({props:args,template:'\n\t\t<cds-tabs\n\t\t\t[type]="type"\n\t\t\t[followFocus]="followFocus"\n\t\t\t[isNavigation]="isNavigation"\n\t\t\t[cacheActive]="cacheActive">\n\t\t\t<cds-tab heading="one">Tab Content 1</cds-tab>\n\t\t\t<cds-tab heading="two">Tab Content 2</cds-tab>\n\t\t\t<cds-tab heading="three">Tab Content 3</cds-tab>\n\t\t\t<cds-tab heading="three">Tab Content 3</cds-tab>\n\t\t</cds-tabs>\n\t'})).bind({});Basic.args={followFocus:!0,cacheActive:!0,isNavigation:!1},Basic.argTypes={type:{options:["inline","contained"],defaultValue:"inline",control:"radio"}};const With=(args=>({props:args,template:'\n\t\t<ng-template #customTabs let-item>\n\t\t\t{{item ? item.name : "wait for it"}}\n\t\t</ng-template>\n\t\t<ng-template #iconTab>\n\t\t\t<div style="height: 14px;">\n\t\t\t\tSomething custom\n\t\t\t\t<svg width="16" height="16" viewBox="0 0 16 16"\n\t\t\t\tstyle="height: 14px; width: 14px; fill: #3d70b2;">\n\t\t\t\t\t<path d="M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"></path>\n\t\t\t\t\t<path d="M9 13H7V7h2z"></path>\n\t\t\t\t\t<path d="M7 4a1 1 0 1 1 2 0 1 1 0 1 1-2 0"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</ng-template>\n\t\t<cds-tabs [type]="type" [followFocus]="followFocus" [isNavigation]="isNavigation">\n\t\t\t<cds-tab\n\t\t\t\t*ngFor="let item of data; let i = index;"\n\t\t\t\t[heading]="customTabs"\n\t\t\t\ttitle="Tab Content"\n\t\t\t\t[context]="item">\n\t\t\t\tTab Content {{i + 1}}\n\t\t\t</cds-tab>\n\t\t\t<cds-tab [heading]="iconTab" title="Custom tab content">Tab Content Custom</cds-tab>\n\t\t</cds-tabs>\n\t'})).bind({});With.storyName="With template",With.args={followFocus:!0,isNavigation:!1,data:[{name:"one"},{name:"two"},{name:"three"}]},With.argTypes={...Basic.argTypes};const BeforeAndAfter=(args=>({props:args,template:'\n\t\t<div style="font-weight: 600; padding-bottom: 10px; padding-top: 20px;">before</div>\n\t\t<cds-tabs [type]="type" [followFocus]="followFocus" [isNavigation]="isNavigation">\n\t\t\t<cds-tab heading="one">foo</cds-tab>\n\t\t\t<cds-tab heading="two">bar</cds-tab>\n\t\t\t<span before>content before</span>\n\t\t</cds-tabs>\n\t\t<div style="font-weight: 600; padding-bottom: 10px; padding-top: 20px;">after</div>\n\t\t<cds-tabs [type]="type" [followFocus]="followFocus" [isNavigation]="isNavigation">\n\t\t\t<cds-tab heading="one">foo</cds-tab>\n\t\t\t<cds-tab heading="two">bar</cds-tab>\n\t\t\t<span after>content after</span>\n\t\t</cds-tabs>\n\t\t<div style="font-weight: 600; padding-bottom: 10px; padding-top: 20px;">both</div>\n\t\t<cds-tabs [type]="type" [followFocus]="followFocus" [isNavigation]="isNavigation">\n\t\t\t<cds-tab heading="one">foo</cds-tab>\n\t\t\t<cds-tab heading="two">bar</cds-tab>\n\t\t\t<span before>content before</span>\n\t\t\t<span after>content after</span>\n\t\t</cds-tabs>\n\t'})).bind({});BeforeAndAfter.storyName="Width before and after content",BeforeAndAfter.args={followFocus:!0,isNavigation:!1},BeforeAndAfter.argTypes={...Basic.argTypes};const TabheaderGroup=(args=>({props:args,template:'\n\t\t\x3c!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/pagination/stories/pagination.component.ts\n\t\t--\x3e\n\t\t<app-header-group\n\t\t\t[type]="type"\n\t\t\t[followFocus]="followFocus"\n\t\t\t[cacheActive]="cacheActive"\n\t\t\t[isNavigation]="isNavigation">\n\t\t</app-header-group>\n\t'})).bind({});TabheaderGroup.args={...Basic.args},TabheaderGroup.argTypes={...Basic.argTypes};const Skeleton=(args=>({props:args,template:'\n\t\t<cds-tabs skeleton="true">\n\t\t\t<cds-tab></cds-tab>\n\t\t\t<cds-tab></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<div style="margin-top: 5rem">\n\t\t\t<p>Tab skeleton component for cds-tab-header-group:</p>\n\t\t\t<cds-tabs-skeleton></cds-tabs-skeleton>\n\t\t</div>\n\t'})).bind({})},"./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.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}})},"./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 core_client_1=__webpack_require__("@storybook/core-client"),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,core_client_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__,"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}})}}]);
+"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[459],{"./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/tabs.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,BeforeAndAfter:()=>BeforeAndAfter,Skeleton:()=>Skeleton,TabheaderGroup:()=>TabheaderGroup,With:()=>With,default:()=>tabs_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"),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.tabsClass=!0,this.OVERFLOW_BUTTON_OFFSET=44,this.longPressMultiplier=3,this.clickMultiplier=1.5,this.longPressInterval=null,this.tickInterval=null}get containedClass(){return"contained"===this.type}get themeClass(){return"light"===this.theme}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.changeDetectorRef.markForCheck()}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}],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"]}],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");let TabHeader=class TabHeader{constructor(host){this.host=host,this.active=!1,this.disabled=!1,this.type="button",this.ariaSelected=this.active,this.ariaDisabled=this.disabled,this.navItem=!0,this.navLink=!0,this.selected=new core.EventEmitter,this._cacheActive=!1}get tabIndex(){return this.active?0:-1}get isSelected(){return this.active}get isDisabled(){return this.disabled}set cacheActive(shouldCache){this._cacheActive=shouldCache,this.paneReference&&(this.paneReference.cacheActive=this.cacheActive)}set paneTabIndex(tabIndex){this.paneReference&&(this.paneReference.tabIndex=tabIndex)}get cacheActive(){return this._cacheActive}onClick(){this.selectTab()}ngAfterViewInit(){setTimeout((()=>{this.title=this.title?this.title:this.host.nativeElement.textContent}))}selectTab(){this.focus(),this.disabled||(this.selected.emit(),this.active=!0,this.paneReference&&(this.paneReference.active=!0))}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"]}],cacheActive:[{type:core.Input}],paneTabIndex:[{type:core.Input}],active:[{type:core.Input}],disabled:[{type:core.Input}],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"]}],paneReference:[{type:core.Input}],title:[{type:core.HostBinding,args:["attr.title"]},{type:core.Input}],selected:[{type:core.Output}],onClick:[{type:core.HostListener,args:["click"]}]},TabHeader=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsTabHeader], [ibmTabHeader]"})],TabHeader);let TabHeaderGroup=class TabHeaderGroup extends BaseTabHeader{constructor(elementRef,changeDetectorRef,eventService,renderer){super(elementRef,changeDetectorRef,eventService,renderer),this.elementRef=elementRef,this.changeDetectorRef=changeDetectorRef,this.eventService=eventService,this.renderer=renderer,this.isNavigation=!1,this.selectedSubscriptionTracker=new Subscription.w0,this.currentSelectedTab=0}keyboardInput(event){let 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.tabHeaderQuery&&this.tabHeaderQuery.toArray().forEach((tabHeader=>{tabHeader.cacheActive=this.cacheActive,tabHeader.paneTabIndex=this.isNavigation?null:0}));const selectedSubscriptions=this.tabHeaderQuery.toArray().forEach((tabHeader=>{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.selectedSubscriptionTracker.add(selectedSubscriptions),setTimeout((()=>this.tabHeaderQuery.toArray()[this.currentSelectedTab].selectTab()))}ngOnChanges(changes){this.tabHeaderQuery&&(changes.cacheActive&&this.tabHeaderQuery.toArray().forEach((tabHeader=>tabHeader.cacheActive=this.cacheActive)),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:""}}};TabHeaderGroup.ctorParameters=()=>[{type:core.ElementRef},{type:core.ChangeDetectorRef},{type:utils.PO},{type:core.Renderer2}],TabHeaderGroup.propDecorators={isNavigation:[{type:core.Input}],tabHeaderQuery:[{type:core.ContentChildren,args:[TabHeader]}],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(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"\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(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);var i18n=__webpack_require__("./src/i18n/index.ts");let nextId=0,Tab=class Tab{constructor(){this.headingIsTemplate=!1,this.active=!1,this.disabled=!1,this.tabIndex=0,this.id="n-tab-"+nextId++,this.selected=new core.EventEmitter,this.attrClass=this.id,this._cacheActive=!1}set cacheActive(shouldCache){this._cacheActive=shouldCache}get cacheActive(){return this._cacheActive}ngOnInit(){this.heading instanceof core.TemplateRef&&(this.headingIsTemplate=!0)}doSelect(){this.selected.emit()}shouldRender(){return this.active||this.cacheActive}};Tab.propDecorators={heading:[{type:core.Input}],title:[{type:core.Input}],context:[{type:core.Input}],active:[{type:core.Input}],disabled:[{type:core.Input}],tabIndex:[{type:core.Input}],id:[{type:core.Input}],cacheActive:[{type:core.Input}],selected:[{type:core.Output}],attrClass:[{type:core.HostBinding,args:["attr.id"]}]},Tab=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-tab, ibm-tab",template:'\n\t\t<div\n\t\t\t[attr.tabindex]="tabIndex"\n\t\t\trole="tabpanel"\n\t\t\t*ngIf="shouldRender()"\n\t\t\tclass="cds--tab-content"\n\t\t\t[ngStyle]="{\'display\': active ? null : \'none\'}"\n\t\t\t[attr.aria-labelledby]="id + \'-header\'"\n\t\t\taria-live="polite">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t'})],Tab);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.firstVisibleTab=0}keyboardInput(event){let tabsArray=this.tabs.toArray();"ArrowRight"===event.key&&(this.currentSelectedTab<this.allTabHeaders.length-1?(event.preventDefault(),this.followFocus&&this.selectTab(event.target,tabsArray[this.currentSelectedTab+1],this.currentSelectedTab),this.allTabHeaders.toArray()[this.currentSelectedTab+1].nativeElement.focus()):(event.preventDefault(),this.followFocus&&this.selectTab(event.target,tabsArray[0],0),this.allTabHeaders.first.nativeElement.focus())),"ArrowLeft"===event.key&&(this.currentSelectedTab>0?(event.preventDefault(),this.followFocus&&this.selectTab(event.target,tabsArray[this.currentSelectedTab-1],this.currentSelectedTab),this.allTabHeaders.toArray()[this.currentSelectedTab-1].nativeElement.focus()):(event.preventDefault(),this.followFocus&&this.selectTab(event.target,tabsArray[this.allTabHeaders.length-1],this.allTabHeaders.length),this.allTabHeaders.toArray()[this.allTabHeaders.length-1].nativeElement.focus())),"Home"===event.key&&(event.preventDefault(),this.followFocus&&this.selectTab(event.target,tabsArray[0],0),this.allTabHeaders.toArray()[0].nativeElement.focus()),"End"===event.key&&(event.preventDefault(),this.followFocus&&this.selectTab(event.target,tabsArray[this.allTabHeaders.length-1],this.allTabHeaders.length),this.allTabHeaders.toArray()[this.allTabHeaders.length-1].nativeElement.focus())," "!==event.key&&"Spacebar"!==event.key||this.followFocus||this.selectTab(event.target,tabsArray[this.currentSelectedTab],this.currentSelectedTab)}ngOnInit(){this.resizeObserver=new ResizeObserver((()=>{this.changeDetectorRef.detectChanges()})),this.resizeObserver.observe(this.headerContainer.nativeElement)}ngOnDestroy(){this.resizeObserver.unobserve(this.headerContainer.nativeElement)}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.setFirstTab()}ngOnChanges(changes){this.tabs&&changes.cacheActive&&this.tabs.forEach((tab=>tab.cacheActive=this.cacheActive))}onTabFocus(ref,index){this.currentSelectedTab=index,this.headerContainer.nativeElement.parentElement.scrollLeft=0}getSelectedTab(){const selected=this.tabs.find((tab=>tab.active));return selected||{headingIsTemplate:!1,heading:""}}selectTab(ref,tab,tabIndex){tab.disabled||(this.currentSelectedTab=tabIndex,this.tabs.forEach((_tab=>_tab.active=!1)),tab.active=!0,tab.doSelect())}setFirstTab(){setTimeout((()=>{let firstTab=this.tabs.find((tab=>tab.active));!firstTab&&this.tabs.first&&(firstTab=this.tabs.first,firstTab.active=!0),firstTab&&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}],headerContainer:[{type:core.ViewChild,args:["tabList",{static:!0}]}],tabQuery:[{type:core.ContentChildren,args:[Tab]}],allTabHeaders:[{type:core.ViewChildren,args:["tabItem"]}],keyboardInput:[{type:core.HostListener,args:["keydown",["$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[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="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(scroll)="handleScroll()">\n\t\t\t<ng-container [ngTemplateOutlet]="contentBefore"></ng-container>\n\t\t\t<button\n\t\t\t\t*ngFor="let tab of tabs; let i = index;"\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[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}"\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(focus)="onTabFocus(tabItem, i)"\n\t\t\t\t(click)="selectTab(tabItem, tab, i)">\n\t\t\t\t<ng-container *ngIf="!tab.headingIsTemplate">\n\t\t\t\t\t{{ tab.heading }}\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-template\n\t\t\t\t\t*ngIf="tab.headingIsTemplate"\n\t\t\t\t\t[ngTemplateOutlet]="tab.heading"\n\t\t\t\t\t[ngTemplateOutletContext]="{$implicit: tab.context}">\n\t\t\t\t</ng-template>\n\t\t\t</button>\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\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[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 Tabs=class Tabs{constructor(){this.position="top",this.cacheActive=!1,this.followFocus=!0,this.isNavigation=!1,this.type="line",this.theme="dark",this.skeleton=!1}ngAfterContentInit(){this.tabHeaders&&(this.tabHeaders.cacheActive=this.cacheActive),this.tabs.forEach((tab=>{tab.tabIndex=this.isNavigation?null:0}))}ngOnChanges(changes){this.tabHeaders&&changes.cacheActive&&(this.tabHeaders.cacheActive=this.cacheActive),this.tabs&&changes.isNavigation&&this.tabs.forEach((tab=>{tab.tabIndex=this.isNavigation?null:0}))}hasTabHeaders(){return this.tabs.length>0}};Tabs.propDecorators={position:[{type:core.Input}],cacheActive:[{type:core.Input}],followFocus:[{type:core.Input}],isNavigation:[{type:core.Input}],ariaLabel:[{type:core.Input}],ariaLabelledby:[{type:core.Input}],type:[{type:core.Input}],theme:[{type:core.Input}],skeleton:[{type:core.Input}],tabs:[{type:core.ContentChildren,args:[Tab,{descendants:!1}]}],tabHeaders:[{type:core.ContentChild,args:[TabHeaders]}]},Tabs=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-tabs, ibm-tabs",template:'\n\t\t<ng-container *ngIf="skeleton">\n\t\t\t<cds-tabs-skeleton></cds-tabs-skeleton>\n\t\t</ng-container>\n\t\t<ng-container *ngIf="!skeleton">\n\t\t\t<cds-tab-headers\n\t\t\t\t*ngIf="hasTabHeaders() && position === \'top\'"\n\t\t\t\t[theme]="theme"\n\t\t\t\t[tabs]="tabs"\n\t\t\t\t[followFocus]="followFocus"\n\t\t\t\t[cacheActive]="cacheActive"\n\t\t\t\t[contentBefore]="before"\n\t\t\t\t[contentAfter]="after"\n\t\t\t\t[ariaLabel]="ariaLabel"\n\t\t\t\t[ariaLabelledby]="ariaLabelledby"\n\t\t\t\t[type]="type">\n\t\t\t</cds-tab-headers>\n\t\t\t<ng-content></ng-content>\n\t\t\t<ng-template #before>\n\t\t\t\t<ng-content select="[before]"></ng-content>\n\t\t\t</ng-template>\n\t\t\t<ng-template #after>\n\t\t\t\t<ng-content select="[after]"></ng-content>\n\t\t\t</ng-template>\n\t\t\t<cds-tab-headers\n\t\t\t\t*ngIf="hasTabHeaders() && position === \'bottom\'"\n\t\t\t\t[tabs]="tabs"\n\t\t\t\t[cacheActive]="cacheActive"\n\t\t\t\t[type]="type">\n\t\t\t</cds-tab-headers>\n\t\t</ng-container>\n\t'})],Tabs);let TabSkeleton=class TabSkeleton{constructor(){this.skeleton=!0,this.tabs=!0,this.numOfSkeletonTabs=new Array(5)}set numOftabs(num){this.numOfSkeletonTabs=new Array(num)}};TabSkeleton.propDecorators={numOftabs:[{type:core.Input}],skeleton:[{type:core.HostBinding,args:["class.cds--skeleton"]}],tabs:[{type:core.HostBinding,args:["class.cds--tabs"]}]},TabSkeleton=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-tabs-skeleton, ibm-tabs-skeleton",template:'\n\t\t<ul class="cds--tabs__nav">\n\t\t\t<li\n\t\t\t\t*ngFor="let i of numOfSkeletonTabs"\n\t\t\t\tclass="cds--tabs__nav-item">\n\t\t\t\t<div class="cds--tabs__nav-link">\n\t\t\t\t\t<span></span>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t</ul>\n\t'})],TabSkeleton);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let TabsModule=class TabsModule{};TabsModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[BaseTabHeader,Tabs,Tab,TabHeader,TabHeaders,TabHeaderGroup,TabSkeleton],exports:[Tabs,Tab,TabHeader,TabHeaders,TabHeaderGroup,TabSkeleton],imports:[common.CommonModule,utils.As,i18n.LU]})],TabsModule);let TabStory=class TabStory{constructor(){this.skeleton=!1,this.followFocus=!0,this.cacheActive=!1,this.isNavigation=!0,this.type="line"}};TabStory.propDecorators={skeleton:[{type:core.Input}],followFocus:[{type:core.Input}],cacheActive:[{type:core.Input}],isNavigation:[{type:core.Input}],type:[{type:core.Input}]},TabStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-header-group",template:'\n\t\t<cds-tab-header-group\n\t\t\t[type]="type"\n\t\t\t[followFocus]="followFocus"\n\t\t\t[cacheActive]="cacheActive"\n\t\t\t[isNavigation]="isNavigation">\n\t\t\t<button cdsTabHeader [paneReference]="content1">\n\t\t\t\tContent 1\n\t\t\t</button>\n\t\t\t<button cdsTabHeader [paneReference]="content2">\n\t\t\t\tContent 2\n\t\t\t</button>\n\t\t\t<button cdsTabHeader [paneReference]="content3" disabled="true">\n\t\t\t\tContent 3\n\t\t\t</button>\n\t\t\t<button cdsTabHeader [paneReference]="content4">\n\t\t\t\tContent 4\n\t\t\t</button>\n\t\t\t<button cdsTabHeader [paneReference]="content5">\n\t\t\t\tContent 5\n\t\t\t</button>\n\t\t</cds-tab-header-group>\n\n\t\t<cds-tab #content1>\n\t\t\tTab Content 1\n\t\t</cds-tab>\n\t\t<cds-tab #content2>\n\t\t\tTab Content 2\n\t\t</cds-tab>\n\t\t<cds-tab #content3>\n\t\t\tTab Content 3\n\t\t</cds-tab>\n\t\t<cds-tab #content4>\n\t\t\tTab Content 4\n\t\t</cds-tab>\n\t\t<cds-tab #content5>\n\t\t\tTab Content 5\n\t\t</cds-tab>\n\t'})],TabStory);const tabs_stories={title:"Components/Tabs",decorators:[(0,dist.moduleMetadata)({imports:[TabsModule],declarations:[TabStory]})]},Basic=(args=>({props:args,template:'\n\t\t<cds-tabs\n\t\t\t[type]="type"\n\t\t\t[followFocus]="followFocus"\n\t\t\t[isNavigation]="isNavigation"\n\t\t\t[cacheActive]="cacheActive">\n\t\t\t<cds-tab heading="one">Tab Content 1</cds-tab>\n\t\t\t<cds-tab heading="two">Tab Content 2</cds-tab>\n\t\t\t<cds-tab heading="three">Tab Content 3</cds-tab>\n\t\t\t<cds-tab heading="three">Tab Content 3</cds-tab>\n\t\t</cds-tabs>\n\t'})).bind({});Basic.args={followFocus:!0,cacheActive:!0,isNavigation:!1},Basic.argTypes={type:{options:["inline","contained"],defaultValue:"inline",control:"radio"}};const With=(args=>({props:args,template:'\n\t\t<ng-template #customTabs let-item>\n\t\t\t{{item ? item.name : "wait for it"}}\n\t\t</ng-template>\n\t\t<ng-template #iconTab>\n\t\t\t<div style="height: 14px;">\n\t\t\t\tSomething custom\n\t\t\t\t<svg width="16" height="16" viewBox="0 0 16 16"\n\t\t\t\tstyle="height: 14px; width: 14px; fill: #3d70b2;">\n\t\t\t\t\t<path d="M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"></path>\n\t\t\t\t\t<path d="M9 13H7V7h2z"></path>\n\t\t\t\t\t<path d="M7 4a1 1 0 1 1 2 0 1 1 0 1 1-2 0"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</ng-template>\n\t\t<cds-tabs [type]="type" [followFocus]="followFocus" [isNavigation]="isNavigation">\n\t\t\t<cds-tab\n\t\t\t\t*ngFor="let item of data; let i = index;"\n\t\t\t\t[heading]="customTabs"\n\t\t\t\ttitle="Tab Content"\n\t\t\t\t[context]="item">\n\t\t\t\tTab Content {{i + 1}}\n\t\t\t</cds-tab>\n\t\t\t<cds-tab [heading]="iconTab" title="Custom tab content">Tab Content Custom</cds-tab>\n\t\t</cds-tabs>\n\t'})).bind({});With.storyName="With template",With.args={followFocus:!0,isNavigation:!1,data:[{name:"one"},{name:"two"},{name:"three"}]},With.argTypes={...Basic.argTypes};const BeforeAndAfter=(args=>({props:args,template:'\n\t\t<div style="font-weight: 600; padding-bottom: 10px; padding-top: 20px;">before</div>\n\t\t<cds-tabs [type]="type" [followFocus]="followFocus" [isNavigation]="isNavigation">\n\t\t\t<cds-tab heading="one">foo</cds-tab>\n\t\t\t<cds-tab heading="two">bar</cds-tab>\n\t\t\t<span before>content before</span>\n\t\t</cds-tabs>\n\t\t<div style="font-weight: 600; padding-bottom: 10px; padding-top: 20px;">after</div>\n\t\t<cds-tabs [type]="type" [followFocus]="followFocus" [isNavigation]="isNavigation">\n\t\t\t<cds-tab heading="one">foo</cds-tab>\n\t\t\t<cds-tab heading="two">bar</cds-tab>\n\t\t\t<span after>content after</span>\n\t\t</cds-tabs>\n\t\t<div style="font-weight: 600; padding-bottom: 10px; padding-top: 20px;">both</div>\n\t\t<cds-tabs [type]="type" [followFocus]="followFocus" [isNavigation]="isNavigation">\n\t\t\t<cds-tab heading="one">foo</cds-tab>\n\t\t\t<cds-tab heading="two">bar</cds-tab>\n\t\t\t<span before>content before</span>\n\t\t\t<span after>content after</span>\n\t\t</cds-tabs>\n\t'})).bind({});BeforeAndAfter.storyName="Width before and after content",BeforeAndAfter.args={followFocus:!0,isNavigation:!1},BeforeAndAfter.argTypes={...Basic.argTypes};const TabheaderGroup=(args=>({props:args,template:'\n\t\t\x3c!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/pagination/stories/pagination.component.ts\n\t\t--\x3e\n\t\t<app-header-group\n\t\t\t[type]="type"\n\t\t\t[followFocus]="followFocus"\n\t\t\t[cacheActive]="cacheActive"\n\t\t\t[isNavigation]="isNavigation">\n\t\t</app-header-group>\n\t'})).bind({});TabheaderGroup.args={...Basic.args},TabheaderGroup.argTypes={...Basic.argTypes};const Skeleton=(args=>({props:args,template:'\n\t\t<cds-tabs skeleton="true">\n\t\t\t<cds-tab></cds-tab>\n\t\t\t<cds-tab></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<div style="margin-top: 5rem">\n\t\t\t<p>Tab skeleton component for cds-tab-header-group:</p>\n\t\t\t<cds-tabs-skeleton></cds-tabs-skeleton>\n\t\t</div>\n\t'})).bind({})},"./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.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}})},"./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 core_client_1=__webpack_require__("@storybook/core-client"),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,core_client_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__,"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}})}}]);

package/docs/storybook/ui-shell-ui-shell-stories.90ac54a8.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[9660],{"./src/ui-shell/ui-shell.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{AngularRouting:()=>AngularRouting,Header:()=>Header,HeaderFluid:()=>HeaderFluid,HeaderWithRouter:()=>HeaderWithRouter,HeaderWithTemp:()=>HeaderWithTemp,SideNavigation:()=>SideNavigation,SideNavigationRail:()=>SideNavigationRail,SideNavigationRouter:()=>SideNavigationRouter,SidePanel:()=>SidePanel,Together:()=>Together,WithModel:()=>WithModel,default:()=>ui_shell_stories});var router=__webpack_require__("./node_modules/@angular/router/fesm2020/router.mjs"),dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),search=__webpack_require__("./src/search/index.ts"),icon=__webpack_require__("./src/icon/index.ts"),theme=__webpack_require__("./src/theme/index.ts"),ui_shell=__webpack_require__("./src/ui-shell/index.ts"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let BarComponent=class BarComponent{};BarComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-bar",template:"<h1>bar</h1>"})],BarComponent);let FooComponent=class FooComponent{};FooComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-foo",template:"<h1>foo</h1>"})],FooComponent);let HeaderFluidComponent=class HeaderFluidComponent{constructor(){this.hasHamburger=!1}};HeaderFluidComponent.propDecorators={headerItems:[{type:core.Input}]},HeaderFluidComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-header-fluid",template:'\n\t\t<cds-header name="[Platform]">\n\t\t\t<cds-hamburger\n\t\t\t\t(selected)="hasHamburger = !hasHamburger"\n\t\t\t\tclass="cds--header__menu-toggle__hidden"></cds-hamburger>\n\t\t\t<cds-header-navigation [navigationItems]="headerItems"></cds-header-navigation>\n\t\t\t<cds-sidenav\n\t\t\t\t*ngIf="hasHamburger"\n\t\t\t\t[navigationItems]="headerItems"\n\t\t\t\tclass="cds--header__menu-toggle__hidden"></cds-sidenav>\n\t\t</cds-header>\n\t'})],HeaderFluidComponent);const ui_shell_stories={title:"Components/UI Shell",decorators:[(0,dist.moduleMetadata)({declarations:[BarComponent,FooComponent,HeaderFluidComponent],imports:[theme.O,ui_shell.p5,icon.QX,search.t,router.Bz.forChild([{path:"bar",component:BarComponent},{path:"foo",component:FooComponent}])]})],args:{theme:"white"},argTypes:{theme:{options:["white","g10","g90","g100"],control:"radio"}}},Header=(args=>({props:args,template:'\n\t\t<div [cdsTheme]="theme">\n\t\t\t<cds-header name="[Platform]">\n\t\t\t\t<cds-hamburger *ngIf="hasHamburger" (click)="expanded($event)"></cds-hamburger>\n\t\t\t\t<cds-header-navigation>\n\t\t\t\t\t<cds-header-item>Catalog</cds-header-item>\n\t\t\t\t\t<cds-header-item isCurrentPage="true">Docs</cds-header-item>\n\t\t\t\t\t<cds-header-item>Support</cds-header-item>\n\t\t\t\t\t<cds-header-menu title="Manage">\n\t\t\t\t\t\t<cds-header-item>Link 1</cds-header-item>\n\t\t\t\t\t\t<cds-header-item>Link 2</cds-header-item>\n\t\t\t\t\t\t<cds-header-item>Link 3</cds-header-item>\n\t\t\t\t\t</cds-header-menu>\n\t\t\t\t</cds-header-navigation>\n\t\t\t\t<cds-header-global>\n\t\t\t\t\t<cds-header-action description="action">\n\t\t\t\t\t\t<svg cdsIcon="fade" size="20"></svg>\n\t\t\t\t\t</cds-header-action>\n\t\t\t\t\t<cds-header-action description="action">\n\t\t\t\t\t\t<svg cdsIcon="fade" size="20"></svg>\n\t\t\t\t\t</cds-header-action>\n\t\t\t\t</cds-header-global>\n\t\t\t</cds-header>\n\t\t</div>\n\t'})).bind({});Header.args={hasHamburger:!0},Header.argTypes={expanded:{action:"Menu clicked!"}};const HeaderFluid=(args=>({props:args,template:'\n\t\t\x3c!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/ui-shell/stories/header-fluid.component.ts\n\t\t--\x3e\n\t\t<app-header-fluid [headerItems]="headerItems"></app-header-fluid>\n\t'})).bind({});HeaderFluid.storyName="Header fluid items to side navigation",HeaderFluid.args={headerItems:[{type:"item",content:"Catalog",title:"Catalog"},{type:"item",content:"Docs",isCurrentPage:!0},{type:"item",content:"Support"},{type:"menu",title:"Manage",menuItems:[{type:"item",content:"Link 1"},{type:"item",content:"Link 2"},{type:"item",content:"Link 3"}]}]},HeaderFluid.argTypes={headerItems:{control:!1},theme:{control:!1}};const HeaderWithTemp=(args=>({props:args,template:'\n\t\t<div [cdsTheme]="theme">\n\t\t\t<cds-header name="[Platform]" [brand]="brandTemplate">\n\t\t\t\t<cds-hamburger *ngIf="hasHamburger" (click)="expanded($event)"></cds-hamburger>\n\t\t\t\t<cds-header-navigation>\n\t\t\t\t\t<cds-header-item>Catalog</cds-header-item>\n\t\t\t\t\t<cds-header-item>Docs</cds-header-item>\n\t\t\t\t\t<cds-header-item>Support</cds-header-item>\n\t\t\t\t\t<cds-header-menu title="Manage">\n\t\t\t\t\t\t<cds-header-item>Link 1</cds-header-item>\n\t\t\t\t\t\t<cds-header-item>Link 2</cds-header-item>\n\t\t\t\t\t\t<cds-header-item>Link 3</cds-header-item>\n\t\t\t\t\t</cds-header-menu>\n\t\t\t\t</cds-header-navigation>\n\t\t\t\t<cds-header-global>\n\t\t\t\t\t<cds-header-action description="action">\n\t\t\t\t\t\t<svg cdsIcon="fade" size="20"></svg>\n\t\t\t\t\t</cds-header-action>\n\t\t\t\t\t<cds-header-action description="action">\n\t\t\t\t\t\t<svg cdsIcon="fade" size="20"></svg>\n\t\t\t\t\t</cds-header-action>\n\t\t\t\t</cds-header-global>\n\t\t\t</cds-header>\n\t\t</div>\n\t\t<ng-template #brandTemplate>\n\t\t\t<a class="cds--header__name">\n\t\t\t\t<svg cdsIcon="carbon" size="32" style="stroke:white;fill:white"></svg>\n\t\t\t\t<span class="cds--header__name--prefix">IBM</span>\n\t\t\t\t[Platform]\n\t\t\t</a>\n\t\t</ng-template>\n\t'})).bind({});HeaderWithTemp.storyName="Header with template",Header.args={hasHamburger:!0},Header.argTypes={expanded:{action:"Menu clicked!"}};const HeaderWithRouter=(args=>({props:args,template:'\n\t\t<div [cdsTheme]="theme">\n\t\t\t<cds-header name="[Platform]" [route]="[\'bar\']">\n\t\t\t\t<cds-header-navigation>\n\t\t\t\t\t<cds-header-item [route]="[\'foo\']">Catalog</cds-header-item>\n\t\t\t\t\t<cds-header-item [route]="[\'bar\']">Docs</cds-header-item>\n\t\t\t\t\t<cds-header-item [route]="[\'foo\']">Support</cds-header-item>\n\t\t\t\t\t<cds-header-menu title="Manage">\n\t\t\t\t\t\t<cds-header-item [route]="[\'foo\']">Link 1</cds-header-item>\n\t\t\t\t\t\t<cds-header-item [route]="[\'bar\']">Link 2</cds-header-item>\n\t\t\t\t\t\t<cds-header-item [route]="[\'foo\']">Link 3</cds-header-item>\n\t\t\t\t\t</cds-header-menu>\n\t\t\t\t</cds-header-navigation>\n\t\t\t</cds-header>\n\t\t</div>\n\t\t<div style="margin-top: 2rem">\n\t\t\t<router-outlet></router-outlet>\n\t\t</div>\n\t'})).bind({});Header.argTypes={expanded:{action:"Menu clicked!"}};const SideNavigation=(args=>({props:args,template:'\n\t\t<div [cdsTheme]="theme">\n\t\t\t<cds-sidenav>\n\t\t\t\t<cds-sidenav-item>\n\t\t\t\t\t<svg cdsIcon="fade" size="16"></svg>\n\t\t\t\t\tLink\n\t\t\t\t</cds-sidenav-item>\n\t\t\t\t<cds-sidenav-item>\n\t\t\t\t\t<svg cdsIcon="fade" size="16"></svg>\n\t\t\t\t\tLink\n\t\t\t\t</cds-sidenav-item>\n\t\t\t\t<cds-sidenav-menu title="Category title">\n\t\t\t\t\t<svg cdsIcon="fade" icon size="16"></svg>\n\t\t\t\t\t<cds-sidenav-item>Link</cds-sidenav-item>\n\t\t\t\t\t<cds-sidenav-item>Link</cds-sidenav-item>\n\t\t\t\t\t<cds-sidenav-item>Link</cds-sidenav-item>\n\t\t\t\t</cds-sidenav-menu>\n\t\t\t</cds-sidenav>\n\t\t</div>\n\t'})).bind({});SideNavigation.args={options:[{content:"Option 1",value:1},{content:"Option 2",value:2},{content:"Option 3",value:3}]},SideNavigation.argTypes={options:{control:!1}};const SideNavigationRouter=(args=>({props:args,template:'\n\t\t<div [cdsTheme]="theme">\n\t\t\t<cds-sidenav>\n\t\t\t\t<cds-sidenav-item [route]="[\'foo\']">\n\t\t\t\t\t<svg cdsIcon="fade" size="16"></svg>\n\t\t\t\t\tLink\n\t\t\t\t</cds-sidenav-item>\n\t\t\t\t<cds-sidenav-item [route]="[\'bar\']">\n\t\t\t\t\t<svg cdsIcon="fade" size="16"></svg>\n\t\t\t\t\tLink\n\t\t\t\t</cds-sidenav-item>\n\t\t\t\t<cds-sidenav-menu title="Category title">\n\t\t\t\t\t<svg cdsIcon="fade" icon size="16"></svg>\n\t\t\t\t\t<cds-sidenav-item [route]="[\'foo\']">Link</cds-sidenav-item>\n\t\t\t\t\t<cds-sidenav-item [route]="[\'bar\']">Link</cds-sidenav-item>\n\t\t\t\t\t<cds-sidenav-item [route]="[\'foo\']">Link</cds-sidenav-item>\n\t\t\t\t</cds-sidenav-menu>\n\t\t\t</cds-sidenav>\n\t\t</div>\n\t\t<div>\n\t\t\t<router-outlet></router-outlet>\n\t\t</div>\n\t'})).bind({});SideNavigationRouter.storyName="Side Navigation with router";const SidePanel=(args=>({props:args,template:'\n\t\t<div [cdsTheme]="theme">\n\t\t\t<cds-panel expanded="true">\n\t\t\t\t<cds-switcher-list>\n\t\t\t\t\t<cds-switcher-list-item [route]="[\'foo\']">Switcher item one</cds-switcher-list-item>\n\t\t\t\t\t<cds-switcher-list-item [route]="[\'bar\']">Switcher item two</cds-switcher-list-item>\n\t\t\t\t\t<cds-switcher-list-item [route]="[\'foo\']">Switcher item three</cds-switcher-list-item>\n\t\t\t\t\t<cds-switcher-list-item [route]="[\'bar\']">Switcher item four</cds-switcher-list-item>\n\t\t\t\t</cds-switcher-list>\n\t\t\t</cds-panel>\n\t\t</div>\n\t\t<div>\n\t\t\t<router-outlet></router-outlet>\n\t\t</div>\n\t'})).bind({});SidePanel.storyName="Side Panel with router";const Together=(args=>({props:args,template:'\n\t\t<div>\n\t\t\t<cds-header name="[Platform]">\n\t\t\t\t<cds-hamburger *ngIf="hasHamburger" [active]="active" (selected)="active = !active"></cds-hamburger>\n\t\t\t\t<cds-header-navigation>\n\t\t\t\t\t<cds-header-item>Catalog</cds-header-item>\n\t\t\t\t\t<cds-header-item>Docs</cds-header-item>\n\t\t\t\t\t<cds-header-item>Support</cds-header-item>\n\t\t\t\t\t<cds-header-menu title="Manage">\n\t\t\t\t\t\t<cds-header-item>Link 1</cds-header-item>\n\t\t\t\t\t\t<cds-header-item>Link 2</cds-header-item>\n\t\t\t\t\t\t<cds-header-item>Link 3</cds-header-item>\n\t\t\t\t\t</cds-header-menu>\n\t\t\t\t</cds-header-navigation>\n\t\t\t\t<cds-header-global>\n\t\t\t\t\t<cds-header-action #firstAction description="action">\n\t\t\t\t\t\t<svg cdsIcon="fade" size="20"></svg>\n\t\t\t\t\t</cds-header-action>\n\t\t\t\t\t<cds-header-action [(active)]="secondAction" description="action">\n\t\t\t\t\t\t<svg cdsIcon="fade" size="20"></svg>\n\t\t\t\t\t</cds-header-action>\n\t\t\t\t</cds-header-global>\n\t\t\t</cds-header>\n\t\t\t<cds-sidenav [expanded]="active">\n\t\t\t\t<cds-sidenav-item>\n\t\t\t\t\t<svg cdsIcon="fade" size="16"></svg>\n\t\t\t\t\tLink\n\t\t\t\t</cds-sidenav-item>\n\t\t\t\t<cds-sidenav-item>\n\t\t\t\t\t<svg cdsIcon="fade" size="16"></svg>\n\t\t\t\t\tLink\n\t\t\t\t</cds-sidenav-item>\n\t\t\t\t<cds-sidenav-menu title="Category title">\n\t\t\t\t\t<svg cdsIcon="fade" size="16"></svg>\n\t\t\t\t\t<cds-sidenav-item>Link</cds-sidenav-item>\n\t\t\t\t\t<cds-sidenav-item [active]="hasActiveChild">Link</cds-sidenav-item>\n\t\t\t\t\t<cds-sidenav-item>Link</cds-sidenav-item>\n\t\t\t\t</cds-sidenav-menu>\n\t\t\t</cds-sidenav>\n\t\t\t<cds-panel [expanded]="firstAction.active"></cds-panel>\n\t\t\t<cds-panel [expanded]="secondAction">\n\t\t\t\t<cds-switcher-list>\n\t\t\t\t\t<cds-switcher-list-item active="true">Switcher item one</cds-switcher-list-item>\n\t\t\t\t\t<cds-switcher-list-item>Switcher item two</cds-switcher-list-item>\n\t\t\t\t\t<cds-switcher-list-item>Switcher item three</cds-switcher-list-item>\n\t\t\t\t\t<cds-switcher-list-item>Switcher item four</cds-switcher-list-item>\n\t\t\t\t</cds-switcher-list>\n\t\t\t</cds-panel>\n\t\t</div>\n\t'})).bind({});Together.args={hasHamburger:!0,active:!0,secondAction:!1,hasActiveChild:!0,options:[{content:"Option 1",value:1},{content:"Option 2",value:2},{content:"Option 3",value:3}]},Together.argTypes={options:{control:!1}};const SideNavigationRail=(args=>({props:args,template:'\n\t\t<div [cdsTheme]="theme">\n\t\t\t<cds-sidenav rail="true" [expanded]="false">\n\t\t\t\t<cds-sidenav-item>\n\t\t\t\t\t<svg cdsIcon="fade" size="16"></svg>\n\t\t\t\t\tLink\n\t\t\t\t</cds-sidenav-item>\n\t\t\t\t<cds-sidenav-item>\n\t\t\t\t\t<svg cdsIcon="fade" size="16"></svg>\n\t\t\t\t\tLink\n\t\t\t\t</cds-sidenav-item>\n\t\t\t\t<cds-sidenav-menu title="Category title">\n\t\t\t\t\t<svg cdsIcon="fade" icon size="16"></svg>\n\t\t\t\t\t<cds-sidenav-item>Link</cds-sidenav-item>\n\t\t\t\t\t<cds-sidenav-item>Link</cds-sidenav-item>\n\t\t\t\t\t<cds-sidenav-item>Link</cds-sidenav-item>\n\t\t\t\t</cds-sidenav-menu>\n\t\t\t</cds-sidenav>\n\t\t</div>\n\t'})).bind({});SideNavigationRail.args={options:[{content:"Option 1",value:1},{content:"Option 2",value:2},{content:"Option 3",value:3}]},SideNavigationRail.argTypes={options:{control:!1}};const WithModel=(args=>({props:args,template:'\n\t\t<div [cdsTheme]="theme">\n\t\t\t<cds-header name="[Platform]">\n\t\t\t\t<cds-hamburger *ngIf="hasHamburger" [active]="active" (selected)="active = !active"></cds-hamburger>\n\t\t\t\t<cds-header-navigation [navigationItems]="headerItems">\n\t\t\t\t</cds-header-navigation>\n\t\t\t\t<cds-header-global>\n\t\t\t\t\t<cds-header-action #firstAction description="action">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\twidth="20"\n\t\t\t\t\t\t\theight="20"\n\t\t\t\t\t\t\txmlns="http://www.w3.org/2000/svg"\n\t\t\t\t\t\t\tviewBox="0 0 32 32"\n\t\t\t\t\t\t\taria-hidden="true">\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</cds-header-action>\n\t\t\t\t\t<cds-header-action #secondAction description="action">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\twidth="20"\n\t\t\t\t\t\t\theight="20"\n\t\t\t\t\t\t\txmlns="http://www.w3.org/2000/svg"\n\t\t\t\t\t\t\tviewBox="0 0 32 32"\n\t\t\t\t\t\t\taria-hidden="true">\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</cds-header-action>\n\t\t\t\t</cds-header-global>\n\t\t\t</cds-header>\n\t\t\t<cds-sidenav [navigationItems]="headerItems">\n\t\t\t\t<cds-sidenav-menu title="Category title">\n\t\t\t\t\t<svg icon width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />\n\t\t\t\t\t</svg>\n\t\t\t\t\t<cds-sidenav-item>Link</cds-sidenav-item>\n\t\t\t\t\t<cds-sidenav-item>Link</cds-sidenav-item>\n\t\t\t\t\t<cds-sidenav-item>Link</cds-sidenav-item>\n\t\t\t\t</cds-sidenav-menu>\n\t\t\t</cds-sidenav>\n\t\t\t<cds-panel [expanded]="firstAction.active"></cds-panel>\n\t\t\t<cds-panel [expanded]="secondAction.active">\n\t\t\t\t<cds-switcher-list>\n\t\t\t\t\t<cds-switcher-list-item active="true">Switcher item one</cds-switcher-list-item>\n\t\t\t\t\t<cds-switcher-list-item>Switcher item two</cds-switcher-list-item>\n\t\t\t\t\t<cds-switcher-list-item>Switcher item three</cds-switcher-list-item>\n\t\t\t\t\t<cds-switcher-list-item>Switcher item four</cds-switcher-list-item>\n\t\t\t\t</cds-switcher-list>\n\t\t\t</cds-panel>\n\t\t</div>\n\t\t<router-outlet></router-outlet>\n\t'})).bind({});SideNavigationRail.args={options:[{content:"Option 1",value:1},{content:"Option 2",value:2},{content:"Option 3",value:3}],headerItems:[{type:"item",route:["foo"],content:"Catalog"},{type:"item",route:["bar"],content:"Docs"},{type:"item",route:["foo"],content:"Support"},{type:"menu",title:"Manage",trigger:"click",menuItems:[{type:"item",route:["foo"],content:"Link 1"},{type:"item",route:["bar"],content:"Link 2"}]}]},SideNavigationRail.argTypes={options:{control:!1},headerItems:{control:!1}};const AngularRouting=(args=>({props:args,template:'\n\t\t<div [cdsTheme]="theme">\n\t\t\t<cds-sidenav rail="true" [expanded]="false">\n\t\t\t\t<cds-sidenav-item>\n\t\t\t\t\t<svg cdsIcon="fade" size="16"></svg>\n\t\t\t\t\tLink\n\t\t\t\t</cds-sidenav-item>\n\t\t\t\t<cds-sidenav-item>\n\t\t\t\t\t<svg cdsIcon="fade" size="16"></svg>\n\t\t\t\t\tLink\n\t\t\t\t</cds-sidenav-item>\n\t\t\t\t<cds-sidenav-menu title="Category title">\n\t\t\t\t\t<svg cdsIcon="fade" icon size="16"></svg>\n\t\t\t\t\t<cds-sidenav-item>Link</cds-sidenav-item>\n\t\t\t\t\t<cds-sidenav-item>Link</cds-sidenav-item>\n\t\t\t\t\t<cds-sidenav-item>Link</cds-sidenav-item>\n\t\t\t\t</cds-sidenav-menu>\n\t\t\t</cds-sidenav>\n\t\t<div>\n\t'})).bind({});AngularRouting.storyName="Use angular router attributes for routing"},"./src/icon/icon.directive.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{a:()=>IconDirective});var tslib__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_angular_core__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),_icon_service__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/icon/icon.service.ts"),_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@carbon/icon-helpers/es/index.js");let IconDirective=class IconDirective{constructor(elementRef,iconService){this.elementRef=elementRef,this.iconService=iconService,this.size="16",this.title="",this.ariaLabel="",this.ariaLabelledBy="",this.ariaHidden="",this.isFocusable=!1}set ibmIcon(iconName){this.cdsIcon=iconName}set cdsIcon(iconName){this.iconName=iconName,this.renderIcon(iconName)}renderIcon(iconName){const root=this.elementRef.nativeElement;let icon;try{icon=this.iconService.get(iconName,this.size.toString())}catch(error){return void console.warn(error)}const domParser=new DOMParser,rawSVG=icon.svg,svgElement=domParser.parseFromString(rawSVG,"image/svg+xml").documentElement;let node="SVG"!==root.tagName.toUpperCase()?svgElement:svgElement.firstChild;for(root.innerHTML="";node;)root.appendChild(root.ownerDocument.importNode(node,!0)),node=node.nextSibling;const svg="SVG"!==root.tagName.toUpperCase()?svgElement:root;svg.setAttribute("xmlns","http://www.w3.org/2000/svg");const attributes=(0,_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_1__.u9)({width:icon.attrs.width,height:icon.attrs.height,viewBox:icon.attrs.viewBox,title:this.title,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledBy,"aria-hidden":this.ariaHidden,focusable:this.isFocusable.toString()}),attrKeys=Object.keys(attributes);for(let i=0;i<attrKeys.length;i++){const key=attrKeys[i],value=attributes[key];"title"!==key&&(value&&svg.setAttribute(key,value))}if(attributes.title){const title=document.createElement("title");title.textContent=attributes.title,IconDirective.titleIdCounter++,title.setAttribute("id",`${icon.name}-title-${IconDirective.titleIdCounter}`),svg.insertBefore(title,svg.firstElementChild),svg.setAttribute("aria-labelledby",`${icon.name}-title-${IconDirective.titleIdCounter}`)}}ngAfterViewInit(){this.renderIcon(this.iconName)}};IconDirective.titleIdCounter=0,IconDirective.ctorParameters=()=>[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.ElementRef},{type:_icon_service__WEBPACK_IMPORTED_MODULE_0__.C6}],IconDirective.propDecorators={ibmIcon:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],cdsIcon:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],size:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],title:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],ariaLabel:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],ariaLabelledBy:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],ariaHidden:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],isFocusable:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}]},IconDirective=(0,tslib__WEBPACK_IMPORTED_MODULE_3__.gn)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_2__.Directive)({selector:"[cdsIcon], [ibmIcon]"})],IconDirective)},"./src/icon/icon.module.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{QX:()=>IconModule});var tslib__WEBPACK_IMPORTED_MODULE_53__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_angular_core__WEBPACK_IMPORTED_MODULE_52__=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),_angular_common__WEBPACK_IMPORTED_MODULE_54__=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),_icon_directive__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/icon/icon.directive.ts"),_icon_service__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/icon/icon.service.ts"),_carbon_icons_es_add_16__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@carbon/icons/es/add/16.js"),_carbon_icons_es_add_20__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@carbon/icons/es/add/20.js"),_carbon_icons_es_bee_16__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@carbon/icons/es/bee/16.js"),_carbon_icons_es_bee_20__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@carbon/icons/es/bee/20.js"),_carbon_icons_es_calendar_16__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@carbon/icons/es/calendar/16.js"),_carbon_icons_es_carbon_16__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@carbon/icons/es/carbon/16.js"),_carbon_icons_es_carbon_20__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/@carbon/icons/es/carbon/20.js"),_carbon_icons_es_caret_down_16__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/@carbon/icons/es/caret--down/16.js"),_carbon_icons_es_caret_left_16__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./node_modules/@carbon/icons/es/caret--left/16.js"),_carbon_icons_es_caret_right_16__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("./node_modules/@carbon/icons/es/caret--right/16.js"),_carbon_icons_es_caret_up_16__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("./node_modules/@carbon/icons/es/caret--up/16.js"),_carbon_icons_es_checkmark_16__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark/16.js"),_carbon_icons_es_checkmark_filled_16__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark--filled/16.js"),_carbon_icons_es_checkmark_filled_20__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark--filled/20.js"),_carbon_icons_es_checkmark_outline_16__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark--outline/16.js"),_carbon_icons_es_chevron_down_16__WEBPACK_IMPORTED_MODULE_17__=__webpack_require__("./node_modules/@carbon/icons/es/chevron--down/16.js"),_carbon_icons_es_chevron_right_16__WEBPACK_IMPORTED_MODULE_18__=__webpack_require__("./node_modules/@carbon/icons/es/chevron--right/16.js"),_carbon_icons_es_circle_dash_16__WEBPACK_IMPORTED_MODULE_19__=__webpack_require__("./node_modules/@carbon/icons/es/circle-dash/16.js"),_carbon_icons_es_close_16__WEBPACK_IMPORTED_MODULE_20__=__webpack_require__("./node_modules/@carbon/icons/es/close/16.js"),_carbon_icons_es_close_20__WEBPACK_IMPORTED_MODULE_21__=__webpack_require__("./node_modules/@carbon/icons/es/close/20.js"),_carbon_icons_es_copy_16__WEBPACK_IMPORTED_MODULE_22__=__webpack_require__("./node_modules/@carbon/icons/es/copy/16.js"),_carbon_icons_es_copy_20__WEBPACK_IMPORTED_MODULE_23__=__webpack_require__("./node_modules/@carbon/icons/es/copy/20.js"),_carbon_icons_es_data_2_16__WEBPACK_IMPORTED_MODULE_24__=__webpack_require__("./node_modules/@carbon/icons/es/data--2/16.js"),_carbon_icons_es_data_2_20__WEBPACK_IMPORTED_MODULE_25__=__webpack_require__("./node_modules/@carbon/icons/es/data--2/20.js"),_carbon_icons_es_document_16__WEBPACK_IMPORTED_MODULE_26__=__webpack_require__("./node_modules/@carbon/icons/es/document/16.js"),_carbon_icons_es_document_20__WEBPACK_IMPORTED_MODULE_27__=__webpack_require__("./node_modules/@carbon/icons/es/document/20.js"),_carbon_icons_es_download_16__WEBPACK_IMPORTED_MODULE_28__=__webpack_require__("./node_modules/@carbon/icons/es/download/16.js"),_carbon_icons_es_error_filled_16__WEBPACK_IMPORTED_MODULE_29__=__webpack_require__("./node_modules/@carbon/icons/es/error--filled/16.js"),_carbon_icons_es_error_filled_20__WEBPACK_IMPORTED_MODULE_30__=__webpack_require__("./node_modules/@carbon/icons/es/error--filled/20.js"),_carbon_icons_es_fade_16__WEBPACK_IMPORTED_MODULE_31__=__webpack_require__("./node_modules/@carbon/icons/es/fade/16.js"),_carbon_icons_es_fade_20__WEBPACK_IMPORTED_MODULE_32__=__webpack_require__("./node_modules/@carbon/icons/es/fade/20.js"),_carbon_icons_es_incomplete_16__WEBPACK_IMPORTED_MODULE_33__=__webpack_require__("./node_modules/@carbon/icons/es/incomplete/16.js"),_carbon_icons_es_information_filled_16__WEBPACK_IMPORTED_MODULE_34__=__webpack_require__("./node_modules/@carbon/icons/es/information--filled/16.js"),_carbon_icons_es_information_filled_20__WEBPACK_IMPORTED_MODULE_35__=__webpack_require__("./node_modules/@carbon/icons/es/information--filled/20.js"),_carbon_icons_es_information_square_filled_20__WEBPACK_IMPORTED_MODULE_36__=__webpack_require__("./node_modules/@carbon/icons/es/information--square--filled/20.js"),_carbon_icons_es_menu_16__WEBPACK_IMPORTED_MODULE_37__=__webpack_require__("./node_modules/@carbon/icons/es/menu/16.js"),_carbon_icons_es_menu_20__WEBPACK_IMPORTED_MODULE_38__=__webpack_require__("./node_modules/@carbon/icons/es/menu/20.js"),_carbon_icons_es_overflow_menu_vertical_16__WEBPACK_IMPORTED_MODULE_39__=__webpack_require__("./node_modules/@carbon/icons/es/overflow-menu--vertical/16.js"),_carbon_icons_es_overflow_menu_horizontal_16__WEBPACK_IMPORTED_MODULE_40__=__webpack_require__("./node_modules/@carbon/icons/es/overflow-menu--horizontal/16.js"),_carbon_icons_es_save_16__WEBPACK_IMPORTED_MODULE_41__=__webpack_require__("./node_modules/@carbon/icons/es/save/16.js"),_carbon_icons_es_search_16__WEBPACK_IMPORTED_MODULE_42__=__webpack_require__("./node_modules/@carbon/icons/es/search/16.js"),_carbon_icons_es_settings_16__WEBPACK_IMPORTED_MODULE_43__=__webpack_require__("./node_modules/@carbon/icons/es/settings/16.js"),_carbon_icons_es_settings_adjust_16__WEBPACK_IMPORTED_MODULE_44__=__webpack_require__("./node_modules/@carbon/icons/es/settings--adjust/16.js"),_carbon_icons_es_subtract_16__WEBPACK_IMPORTED_MODULE_45__=__webpack_require__("./node_modules/@carbon/icons/es/subtract/16.js"),_carbon_icons_es_trash_can_16__WEBPACK_IMPORTED_MODULE_46__=__webpack_require__("./node_modules/@carbon/icons/es/trash-can/16.js"),_carbon_icons_es_warning_16__WEBPACK_IMPORTED_MODULE_47__=__webpack_require__("./node_modules/@carbon/icons/es/warning/16.js"),_carbon_icons_es_warning_filled_16__WEBPACK_IMPORTED_MODULE_48__=__webpack_require__("./node_modules/@carbon/icons/es/warning--filled/16.js"),_carbon_icons_es_warning_filled_20__WEBPACK_IMPORTED_MODULE_49__=__webpack_require__("./node_modules/@carbon/icons/es/warning--filled/20.js"),_carbon_icons_es_warning_alt_filled_16__WEBPACK_IMPORTED_MODULE_50__=__webpack_require__("./node_modules/@carbon/icons/es/warning--alt--filled/16.js"),_carbon_icons_es_warning_alt_filled_20__WEBPACK_IMPORTED_MODULE_51__=__webpack_require__("./node_modules/@carbon/icons/es/warning--alt--filled/20.js");const ICON_SERVICE_PROVIDER={provide:_icon_service__WEBPACK_IMPORTED_MODULE_1__.C6,deps:[[new _angular_core__WEBPACK_IMPORTED_MODULE_52__.Optional,new _angular_core__WEBPACK_IMPORTED_MODULE_52__.SkipSelf,_icon_service__WEBPACK_IMPORTED_MODULE_1__.C6]],useFactory:function ICON_SERVICE_PROVIDER_FACTORY(parentService){return parentService||new _icon_service__WEBPACK_IMPORTED_MODULE_1__.C6}};let IconModule=class IconModule{constructor(iconService){this.iconService=iconService,iconService.registerAll([_carbon_icons_es_add_16__WEBPACK_IMPORTED_MODULE_2__.Z,_carbon_icons_es_add_20__WEBPACK_IMPORTED_MODULE_3__.Z,_carbon_icons_es_bee_16__WEBPACK_IMPORTED_MODULE_4__.Z,_carbon_icons_es_bee_20__WEBPACK_IMPORTED_MODULE_5__.Z,_carbon_icons_es_calendar_16__WEBPACK_IMPORTED_MODULE_6__.Z,_carbon_icons_es_carbon_16__WEBPACK_IMPORTED_MODULE_7__.Z,_carbon_icons_es_carbon_20__WEBPACK_IMPORTED_MODULE_8__.Z,_carbon_icons_es_caret_down_16__WEBPACK_IMPORTED_MODULE_9__.Z,_carbon_icons_es_caret_left_16__WEBPACK_IMPORTED_MODULE_10__.Z,_carbon_icons_es_caret_right_16__WEBPACK_IMPORTED_MODULE_11__.Z,_carbon_icons_es_caret_up_16__WEBPACK_IMPORTED_MODULE_12__.Z,_carbon_icons_es_checkmark_16__WEBPACK_IMPORTED_MODULE_13__.Z,_carbon_icons_es_checkmark_filled_16__WEBPACK_IMPORTED_MODULE_14__.Z,_carbon_icons_es_checkmark_filled_20__WEBPACK_IMPORTED_MODULE_15__.Z,_carbon_icons_es_checkmark_outline_16__WEBPACK_IMPORTED_MODULE_16__.Z,_carbon_icons_es_chevron_down_16__WEBPACK_IMPORTED_MODULE_17__.Z,_carbon_icons_es_chevron_right_16__WEBPACK_IMPORTED_MODULE_18__.Z,_carbon_icons_es_circle_dash_16__WEBPACK_IMPORTED_MODULE_19__.Z,_carbon_icons_es_close_16__WEBPACK_IMPORTED_MODULE_20__.Z,_carbon_icons_es_close_20__WEBPACK_IMPORTED_MODULE_21__.Z,_carbon_icons_es_copy_16__WEBPACK_IMPORTED_MODULE_22__.Z,_carbon_icons_es_copy_20__WEBPACK_IMPORTED_MODULE_23__.Z,_carbon_icons_es_data_2_16__WEBPACK_IMPORTED_MODULE_24__.Z,_carbon_icons_es_data_2_20__WEBPACK_IMPORTED_MODULE_25__.Z,_carbon_icons_es_document_16__WEBPACK_IMPORTED_MODULE_26__.Z,_carbon_icons_es_document_20__WEBPACK_IMPORTED_MODULE_27__.Z,_carbon_icons_es_download_16__WEBPACK_IMPORTED_MODULE_28__.Z,_carbon_icons_es_error_filled_16__WEBPACK_IMPORTED_MODULE_29__.Z,_carbon_icons_es_error_filled_20__WEBPACK_IMPORTED_MODULE_30__.Z,_carbon_icons_es_fade_16__WEBPACK_IMPORTED_MODULE_31__.Z,_carbon_icons_es_fade_20__WEBPACK_IMPORTED_MODULE_32__.Z,_carbon_icons_es_incomplete_16__WEBPACK_IMPORTED_MODULE_33__.Z,_carbon_icons_es_information_filled_16__WEBPACK_IMPORTED_MODULE_34__.Z,_carbon_icons_es_information_filled_20__WEBPACK_IMPORTED_MODULE_35__.Z,_carbon_icons_es_information_square_filled_20__WEBPACK_IMPORTED_MODULE_36__.Z,_carbon_icons_es_menu_16__WEBPACK_IMPORTED_MODULE_37__.Z,_carbon_icons_es_menu_20__WEBPACK_IMPORTED_MODULE_38__.Z,_carbon_icons_es_overflow_menu_vertical_16__WEBPACK_IMPORTED_MODULE_39__.Z,_carbon_icons_es_overflow_menu_horizontal_16__WEBPACK_IMPORTED_MODULE_40__.Z,_carbon_icons_es_save_16__WEBPACK_IMPORTED_MODULE_41__.Z,_carbon_icons_es_search_16__WEBPACK_IMPORTED_MODULE_42__.Z,_carbon_icons_es_settings_16__WEBPACK_IMPORTED_MODULE_43__.Z,_carbon_icons_es_settings_adjust_16__WEBPACK_IMPORTED_MODULE_44__.Z,_carbon_icons_es_subtract_16__WEBPACK_IMPORTED_MODULE_45__.Z,_carbon_icons_es_trash_can_16__WEBPACK_IMPORTED_MODULE_46__.Z,_carbon_icons_es_warning_16__WEBPACK_IMPORTED_MODULE_47__.Z,_carbon_icons_es_warning_filled_16__WEBPACK_IMPORTED_MODULE_48__.Z,_carbon_icons_es_warning_filled_20__WEBPACK_IMPORTED_MODULE_49__.Z,_carbon_icons_es_warning_alt_filled_16__WEBPACK_IMPORTED_MODULE_50__.Z,_carbon_icons_es_warning_alt_filled_20__WEBPACK_IMPORTED_MODULE_51__.Z])}};IconModule.ctorParameters=()=>[{type:_icon_service__WEBPACK_IMPORTED_MODULE_1__.C6}],IconModule=(0,tslib__WEBPACK_IMPORTED_MODULE_53__.gn)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_52__.NgModule)({declarations:[_icon_directive__WEBPACK_IMPORTED_MODULE_0__.a],exports:[_icon_directive__WEBPACK_IMPORTED_MODULE_0__.a],imports:[_angular_common__WEBPACK_IMPORTED_MODULE_54__.CommonModule],providers:[ICON_SERVICE_PROVIDER]})],IconModule)},"./src/icon/icon.service.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{C6:()=>IconService});var tslib__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_angular_core__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@carbon/icon-helpers/es/index.js");class IconNameNotFoundError extends Error{constructor(name){super(`Icon ${name} not found`)}}class IconSizeNotFoundError extends Error{constructor(size,name){super("Size ${size} for ${name} not found")}}class IconMemoryCache extends class IconCache{}{constructor(){super(...arguments),this.iconMap=new Map}get(name,size){if(!this.iconMap.has(name))throw new IconNameNotFoundError(name);const sizeMap=this.iconMap.get(name);if(!sizeMap.has(size))throw new IconSizeNotFoundError(size,name);return sizeMap.get(size)}set(name,size,descriptor){this.iconMap.has(name)||this.iconMap.set(name,new Map);this.iconMap.get(name).set(size,descriptor)}}let IconService=class IconService{constructor(){this.iconCache=new IconMemoryCache}registerAll(descriptors){descriptors.forEach((icon=>this.register(icon)))}register(descriptor){const{name}=descriptor;this.registerAs(name,descriptor)}registerAs(name,descriptor){const{size}=descriptor;this.iconCache.set(name,size.toString(),descriptor)}get(name,size){try{const icon=this.iconCache.get(name,size.toString());return icon.svg||(icon.svg=(0,_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_0__.BB)(icon)),icon}catch(e){throw e}}configure(options){this.iconCache=options.cache}};IconService=(0,tslib__WEBPACK_IMPORTED_MODULE_1__.gn)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_2__.Injectable)()],IconService)},"./src/icon/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{ar:()=>icon_directive.a,QX:()=>icon_module.QX,C6:()=>icon_service.C6});var icon_directive=__webpack_require__("./src/icon/icon.directive.ts"),icon_module=__webpack_require__("./src/icon/icon.module.ts"),icon_service=__webpack_require__("./src/icon/icon.service.ts")},"./src/layer/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>LayerDirective,D:()=>LayerModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let LayerDirective=class LayerDirective{set ibmLayer(level){this.cdsLayer=level}set cdsLayer(level){this._passedLevel=level,this.layer=level}get cdsLayer(){return this._passedLevel}set layer(level){"number"==typeof level&&(this._level=Math.max(0,Math.min(level,2)),this.layerChildren&&this.layerChildren.forEach((layer=>{layer!==this&&(layer.layer="number"==typeof layer._passedLevel?layer._passedLevel:this.layer+1)})))}get layer(){return this._level}get layerOneClass(){return 0===this.layer}get layerTwoClass(){return 1===this.layer}get layerThreeClass(){return 2===this.layer}ngAfterContentInit(){"number"!=typeof this.cdsLayer&&(this.layer=1)}};LayerDirective.propDecorators={ibmLayer:[{type:core.Input}],cdsLayer:[{type:core.Input}],layerOneClass:[{type:core.HostBinding,args:["class.cds--layer-one"]}],layerTwoClass:[{type:core.HostBinding,args:["class.cds--layer-two"]}],layerThreeClass:[{type:core.HostBinding,args:["class.cds--layer-three"]}],layerChildren:[{type:core.ContentChildren,args:[LayerDirective,{descendants:!1}]}]},LayerDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsLayer], [ibmLayer]",exportAs:"layer"})],LayerDirective);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let LayerModule=class LayerModule{};LayerModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[LayerDirective],exports:[LayerDirective],imports:[common.CommonModule]})],LayerModule)},"./src/search/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{o:()=>Search,t:()=>SearchModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),search_componentngResource=__webpack_require__("./src/search/search.component.html?ngResource"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),i18n=__webpack_require__("./src/i18n/index.ts");let Search=class Search{constructor(elementRef,i18n){this.elementRef=elementRef,this.i18n=i18n,this.theme="dark",this.size="md",this.disabled=!1,this.toolbar=!1,this.expandable=!1,this.skeleton=!1,this.active=!1,this.tableSearch=!1,this.id=`search-${Search.searchCount}`,this.value="",this.autocomplete="on",this.label=this.i18n.get().SEARCH.LABEL,this.placeholder=this.i18n.get().SEARCH.PLACEHOLDER,this.clearButtonTitle=this.i18n.get().SEARCH.CLEAR_BUTTON,this.searchTitle="",this.valueChange=new core.EventEmitter,this.open=new core.EventEmitter,this.clear=new core.EventEmitter,this.search=new core.EventEmitter,this.isComposing=!1,this.onTouched=()=>{},this.propagateChange=_=>{},Search.searchCount++}get containerClass(){return!(this.toolbar||this.expandable)}writeValue(value){this.value=value}registerOnChange(fn){this.propagateChange=fn}registerOnTouched(fn){this.onTouched=fn}onSearch(search){this.isComposing||(this.value=search,this.doValueChange())}onEnter(){this.search.emit(this.value)}clearSearch(){this.value="",this.clear.emit(),this.propagateChange(this.value)}doValueChange(){this.valueChange.emit(this.value),this.propagateChange(this.value)}openSearch(){this.active=!0,this.open.emit(this.active),setTimeout((()=>this.inputRef.nativeElement.focus()))}keyDown(event){(this.toolbar||this.expandable)&&("Escape"===event.key?this.active=!1:"Enter"===event.key&&this.openSearch())}focusOut(event){this.onTouched(),(this.expandable||this.toolbar)&&this.inputRef&&""===this.inputRef.nativeElement.value&&!this.elementRef.nativeElement.contains(event.relatedTarget)&&(this.active=!1,this.open.emit(this.active))}focusIn(event){this.onTouched(),!this.expandable&&!this.toolbar||!this.inputRef||event.relatedTarget||this.elementRef.nativeElement.contains(event.relatedTarget)||this.openSearch()}compositionStart(event){this.isComposing=!0}compositionEnd(event){this.isComposing=!1,this.onSearch(this.value+event.data)}};Search.searchCount=0,Search.ctorParameters=()=>[{type:core.ElementRef},{type:i18n.oc}],Search.propDecorators={containerClass:[{type:core.HostBinding,args:["class.cds--form-item"]}],theme:[{type:core.Input}],size:[{type:core.Input}],disabled:[{type:core.Input}],toolbar:[{type:core.Input}],expandable:[{type:core.Input}],skeleton:[{type:core.Input}],active:[{type:core.Input}],tableSearch:[{type:core.Input}],name:[{type:core.Input}],id:[{type:core.Input}],required:[{type:core.Input}],value:[{type:core.Input}],autocomplete:[{type:core.Input}],label:[{type:core.Input}],placeholder:[{type:core.Input}],clearButtonTitle:[{type:core.Input}],searchTitle:[{type:core.Input}],ariaLabel:[{type:core.Input}],valueChange:[{type:core.Output}],open:[{type:core.Output}],clear:[{type:core.Output}],search:[{type:core.Output}],inputRef:[{type:core.ViewChild,args:["input"]}],keyDown:[{type:core.HostListener,args:["keydown",["$event"]]}],focusOut:[{type:core.HostListener,args:["focusout",["$event"]]}],focusIn:[{type:core.HostListener,args:["focusin",["$event"]]}],compositionStart:[{type:core.HostListener,args:["compositionstart",["$event"]]}],compositionEnd:[{type:core.HostListener,args:["compositionend",["$event"]]}]},Search=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-search, ibm-search",template:search_componentngResource,providers:[{provide:fesm2020_forms.JU,useExisting:Search,multi:!0}]})],Search);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let SearchModule=class SearchModule{};SearchModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Search],exports:[Search],imports:[fesm2020_forms.u5,common.CommonModule,i18n.LU,icon.QX]})],SearchModule)},"./src/theme/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{E:()=>ThemeDirective,O:()=>ThemeModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),src_layer=__webpack_require__("./src/layer/index.ts");let ThemeDirective=class ThemeDirective{constructor(){this.cdsTheme="white",this.layerClass=!0}set ibmTheme(type){this.cdsTheme=type}get whiteThemeClass(){return"white"===this.cdsTheme}get g10ThemeClass(){return"g10"===this.cdsTheme}get g90ThemeClass(){return"g90"===this.cdsTheme}get g100ThemeClass(){return"g100"===this.cdsTheme}ngAfterContentChecked(){this.layerChildren.toArray().forEach((layer=>{"number"!=typeof layer.cdsLayer&&(layer.cdsLayer=1)}))}ngOnInit(){this.cdsTheme||(this.cdsTheme="white")}};ThemeDirective.propDecorators={ibmTheme:[{type:core.Input}],cdsTheme:[{type:core.Input}],layerChildren:[{type:core.ContentChildren,args:[src_layer.A,{descendants:!1}]}],whiteThemeClass:[{type:core.HostBinding,args:["class.cds--white"]}],g10ThemeClass:[{type:core.HostBinding,args:["class.cds--g10"]}],g90ThemeClass:[{type:core.HostBinding,args:["class.cds--g90"]}],g100ThemeClass:[{type:core.HostBinding,args:["class.cds--g100"]}],layerClass:[{type:core.HostBinding,args:["class.cds--layer-one"]}]},ThemeDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsTheme], [ibmTheme]",exportAs:"theme"})],ThemeDirective);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let ThemeModule=class ThemeModule{};ThemeModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[ThemeDirective],exports:[ThemeDirective],imports:[common.CommonModule,src_layer.D]})],ThemeModule)},"./src/search/search.component.html?ngResource":module=>{module.exports='<div\n\tclass="cds--search"\n\t[ngClass]="{\n\t\t\'cds--search--sm\': size === \'sm\',\n\t\t\'cds--search--md\': size === \'md\',\n\t\t\'cds--search--lg\': size === \'lg\',\n\t\t\'cds--search--light\': theme === \'light\',\n\t\t\'cds--skeleton\': skeleton,\n\t\t\'cds--search--expandable\': expandable && !tableSearch,\n\t\t\'cds--search--expanded\': expandable && !tableSearch && active,\n\t\t\'cds--toolbar-search\': toolbar && !expandable,\n\t\t\'cds--toolbar-search--active\': toolbar && !expandable && active,\n\t\t\'cds--toolbar-search-container-persistent\': tableSearch && !expandable,\n\t\t\'cds--toolbar-search-container-expandable\': tableSearch && expandable,\n\t\t\'cds--toolbar-search-container-active\': tableSearch && expandable && active\n\t}"\n\trole="search"\n\t[attr.aria-label]="ariaLabel"\n\t(click)="openSearch()">\n\t<label class="cds--label" [for]="id">{{label}}</label>\n\n\t<div *ngIf="skeleton; else enableInput" class="cds--search-input"></div>\n\t<ng-template #enableInput>\n\t\t<input\n\t\t\t#input\n\t\t\tclass="cds--search-input"\n\t\t\t[type]="tableSearch || !toolbar ? \'text\' : \'search\'"\n\t\t\t[id]="id"\n\t\t\t[value]="value"\n\t\t\t[autocomplete]="autocomplete"\n\t\t\t[placeholder]="placeholder"\n\t\t\t[disabled]="disabled"\n\t\t\t[required]="required"\n\t\t\t(input)="onSearch($event.target.value)"\n\t\t\t(keyup.enter)="onEnter()"/>\n\t\t<button\n\t\t\t*ngIf="!tableSearch && toolbar"\n\t\t\tclass="cds--toolbar-search__btn"\n\t\t\t(click)="openSearch()"\n\t\t\taria-label="Open search">\n\t\t\t<svg cdsIcon="search" size="16" class="cds--search-magnifier-icon"></svg>\n\t\t</button>\n\t\t<svg\n\t\t\tcdsIcon="search"\n\t\t\t*ngIf="tableSearch || !toolbar"\n\t\t\tclass="cds--search-magnifier-icon"\n\t\t\tsize="16">\n\t\t</svg>\n\t</ng-template>\n\n\t<button\n\t\t*ngIf="tableSearch || !toolbar"\n\t\tclass="cds--search-close"\n\t\t[ngClass]="{\n\t\t\t\'cds--search-close--hidden\': !value || value.length === 0\n\t\t}"\n\t\t[title]="clearButtonTitle"\n\t\t(click)="clearSearch()">\n\t\t<span class="cds--visually-hidden">{{ clearButtonTitle }}</span>\n\t\t<svg cdsIcon="close" size="16"></svg>\n\t</button>\n</div>\n'}}]);