blob: 1e6b006c9b75be110a7fc1e0f9d06371732a509a [file] [log] [blame]
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/common"),require("@angular/material/icon"),require("@angular/material/core"),require("@angular/cdk/portal"),require("@covalent/core/common"),require("@angular/cdk/bidi"),require("@angular/cdk/keycodes"),require("@angular/cdk/scrolling"),require("@angular/cdk/coercion"),require("@angular/core"),require("rxjs"),require("rxjs/operators")):"function"==typeof define&&define.amd?define("@covalent/core/steps",["exports","@angular/common","@angular/material/icon","@angular/material/core","@angular/cdk/portal","@covalent/core/common","@angular/cdk/bidi","@angular/cdk/keycodes","@angular/cdk/scrolling","@angular/cdk/coercion","@angular/core","rxjs","rxjs/operators"],t):t((e.covalent=e.covalent||{},e.covalent.core=e.covalent.core||{},e.covalent.core.steps={}),e.ng.common,e.ng.material.icon,e.ng.material.core,e.ng.cdk.portal,e.covalent.core.common,e.ng.cdk.bidi,e.ng.cdk.keycodes,e.ng.cdk.scrolling,e.ng.cdk.coercion,e.ng.core,e.rxjs,e.rxjs.operators)}(this,function(e,t,n,i,r,a,o,s,l,p,d,c,h){"use strict";var b=function(e,t){return(b=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function g(e,t){function n(){this.constructor=e}b(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var f,u={None:"none",Required:"required",Complete:"complete"},m=(g(v,f=r.TemplatePortalDirective),v.decorators=[{type:d.Directive,args:[{selector:"[td-step-label]ng-template"}]}],v.ctorParameters=function(){return[{type:d.TemplateRef},{type:d.ViewContainerRef}]},v);function v(e,t){return f.call(this,e,t)||this}var x,y=(g(_,x=r.TemplatePortalDirective),_.decorators=[{type:d.Directive,args:[{selector:"[td-step-actions]ng-template"}]}],_.ctorParameters=function(){return[{type:d.TemplateRef},{type:d.ViewContainerRef}]},_);function _(e,t){return x.call(this,e,t)||this}var w,k=(g(C,w=r.TemplatePortalDirective),C.decorators=[{type:d.Directive,args:[{selector:"[td-step-summary]ng-template"}]}],C.ctorParameters=function(){return[{type:d.TemplateRef},{type:d.ViewContainerRef}]},C);function C(e,t){return w.call(this,e,t)||this}function R(){}var D,S=a.mixinDisableRipple(a.mixinDisabled(R)),I=(g(z,D=S),Object.defineProperty(z.prototype,"stepContent",{get:function(){return this._contentPortal},enumerable:!0,configurable:!0}),Object.defineProperty(z.prototype,"active",{get:function(){return this._active},set:function(e){this._setActive(p.coerceBooleanProperty(e))},enumerable:!0,configurable:!0}),Object.defineProperty(z.prototype,"state",{get:function(){return this._state},set:function(e){switch(e){case u.Complete:this._state=u.Complete;break;case u.Required:this._state=u.Required;break;default:this._state=u.None}},enumerable:!0,configurable:!0}),z.prototype.ngOnInit=function(){this._contentPortal=new r.TemplatePortal(this._content,this._viewContainerRef)},z.prototype.toggle=function(){return this._setActive(!this._active)},z.prototype.open=function(){return this._setActive(!0)},z.prototype.close=function(){return this._setActive(!1)},z.prototype.isComplete=function(){return this._state===u.Complete},z.prototype.onDisabledChange=function(e){e&&this._active&&(this._active=!1,this._onDeactivated())},z.prototype._setActive=function(e){return!this.disabled&&this._active!==e&&((this._active=e)?this._onActivated():this._onDeactivated(),!0)},z.prototype._onActivated=function(){this.onActivated.emit(undefined)},z.prototype._onDeactivated=function(){this.onDeactivated.emit(undefined)},z.decorators=[{type:d.Component,args:[{selector:"td-step",inputs:["disabled","disableRipple"],template:"<ng-template>\n <ng-content></ng-content>\n</ng-template>"}]}],z.ctorParameters=function(){return[{type:d.ViewContainerRef}]},z.propDecorators={_content:[{type:d.ViewChild,args:[d.TemplateRef]}],stepLabel:[{type:d.ContentChild,args:[m]}],stepActions:[{type:d.ContentChild,args:[y]}],stepSummary:[{type:d.ContentChild,args:[k]}],label:[{type:d.Input,args:["label"]}],sublabel:[{type:d.Input,args:["sublabel"]}],active:[{type:d.Input,args:["active"]}],state:[{type:d.Input,args:["state"]}],onActivated:[{type:d.Output,args:["activated"]}],onDeactivated:[{type:d.Output,args:["deactivated"]}]},z);function z(e){var t=D.call(this)||this;return t._viewContainerRef=e,t._active=!1,t._state=u.None,t.onActivated=new d.EventEmitter,t.onDeactivated=new d.EventEmitter,t}var P={Vertical:"vertical",Horizontal:"horizontal"},E=(Object.defineProperty(O.prototype,"stepsContent",{set:function(e){e&&(this._steps=e,this._registerSteps())},enumerable:!0,configurable:!0}),Object.defineProperty(O.prototype,"steps",{get:function(){return this._steps.toArray()},enumerable:!0,configurable:!0}),Object.defineProperty(O.prototype,"mode",{get:function(){return this._mode},set:function(e){switch(e){case P.Horizontal:this._mode=P.Horizontal;break;default:this._mode=P.Vertical}},enumerable:!0,configurable:!0}),O.prototype.ngAfterContentInit=function(){this._registerSteps()},O.prototype.ngOnDestroy=function(){this._deregisterSteps()},O.prototype.isHorizontal=function(){return this._mode===P.Horizontal},O.prototype.isVertical=function(){return this._mode===P.Vertical},O.prototype.areStepsActive=function(){return 0<this._steps.filter(function(e){return e.active}).length},O.prototype._onStepSelection=function(e){if(this.prevStep!==e){var t=this.prevStep,n={newStep:this.prevStep=e,prevStep:t};this._deactivateAllBut(e),this.onStepChange.emit(n)}},O.prototype._deactivateAllBut=function(t){this._steps.filter(function(e){return e!==t}).forEach(function(e){e.active=!1})},O.prototype._registerSteps=function(){var n=this;this._subcriptions=[],this._steps.toArray().forEach(function(e){var t=e.onActivated.asObservable().subscribe(function(){n._onStepSelection(e)});n._subcriptions.push(t)})},O.prototype._deregisterSteps=function(){this._subcriptions&&(this._subcriptions.forEach(function(e){e.unsubscribe()}),this._subcriptions=undefined)},O.decorators=[{type:d.Component,args:[{selector:"td-steps",template:'<div *ngIf="isHorizontal()" class="td-steps-header">\n <ng-template let-step let-index="index" let-last="last" ngFor [ngForOf]="steps">\n <td-step-header class="td-step-horizontal-header"\n (keydown.enter)="step.open()"\n [number]="index + 1"\n [active]="step.active"\n [disableRipple]="step.disableRipple"\n [disabled]="step.disabled" \n [state]="step.state"\n (click)="step.open()">\n <ng-template td-step-header-label [cdkPortalOutlet]="step.stepLabel"></ng-template>\n <ng-template td-step-header-label [ngIf]="!step.stepLabel">{{step.label}}</ng-template>\n <ng-template td-step-header-sublabel [ngIf]="true">{{step.sublabel | truncate:30}}</ng-template>\n </td-step-header>\n <span *ngIf="!last" class="td-horizontal-line"></span>\n </ng-template>\n</div>\n<div *ngFor="let step of steps; let index = index; let last = last" class="td-step">\n <td-step-header class="td-step-vertical-header"\n (keydown.enter)="step.toggle()"\n [number]="index + 1"\n [active]="step.active" \n [disabled]="step.disabled"\n [disableRipple]="step.disableRipple"\n [state]="step.state"\n (click)="step.toggle()"\n *ngIf="isVertical()">\n <ng-template td-step-header-label [cdkPortalOutlet]="step.stepLabel"></ng-template>\n <ng-template td-step-header-label [ngIf]="!step.stepLabel">{{step.label}}</ng-template>\n <ng-template td-step-header-sublabel [ngIf]="true">{{step.sublabel}}</ng-template>\n </td-step-header>\n <ng-template [ngIf]="isVertical() || step.active || (!areStepsActive() && prevStep === step)">\n <td-step-body [active]="step.active" [state]="step.state">\n <div *ngIf="isVertical()" class="td-line-wrapper">\n <div *ngIf="!last" class="td-vertical-line"></div>\n </div>\n <ng-template td-step-body-content [cdkPortalOutlet]="step.stepContent"></ng-template>\n <ng-template td-step-body-actions [cdkPortalOutlet]="step.stepActions"></ng-template>\n <ng-template td-step-body-summary [cdkPortalOutlet]="step.stepSummary"></ng-template>\n </td-step-body>\n </ng-template>\n</div>\n',host:{"class":"td-steps"},styles:[".td-line-wrapper,.td-step{position:relative}.td-steps-header{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.td-line-wrapper{width:24px;min-height:1px}.td-horizontal-line{border-bottom-width:1px;border-bottom-style:solid;height:1px;position:relative;top:36px;min-width:15px;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-sizing:border-box;box-sizing:border-box}::ng-deep :not([dir=rtl]) .td-horizontal-line{left:-6px;right:-3px}::ng-deep [dir=rtl] .td-horizontal-line{left:-3px;right:-6px}.td-vertical-line{position:absolute;bottom:-16px;top:-16px;border-left-width:1px;border-left-style:solid}::ng-deep :not([dir=rtl]) .td-vertical-line{left:20px;right:auto}::ng-deep [dir=rtl] .td-vertical-line{left:auto;right:20px}"]}]}],O.propDecorators={stepsContent:[{type:d.ContentChildren,args:[I]}],mode:[{type:d.Input,args:["mode"]}],onStepChange:[{type:d.Output,args:["stepChange"]}]},O);function O(){this._mode=P.Vertical,this.onStepChange=new d.EventEmitter}function L(){}var A,j=a.mixinDisableRipple(a.mixinDisabled(L)),q=(g(M,A=j),M.prototype.isComplete=function(){return this.state===u.Complete},M.prototype.isRequired=function(){return this.state===u.Required},M.decorators=[{type:d.Component,args:[{selector:"td-step-header",inputs:["disabled","disableRipple"],template:'<div class="td-step-header"\n [class.mat-disabled]="disabled"\n matRipple\n [matRippleDisabled]="disabled || disableRipple"\n [tabIndex]="disabled ? -1 : (tabIndex || 0)">\n <div class="td-circle"\n [class.mat-inactive]="(!active && !isComplete()) || disabled"\n [class.mat-active]="active && !disabled"\n *ngIf="!isRequired() && !isComplete()">\n <span *ngIf="(active || !isComplete())">{{number || \'\'}}</span>\n </div>\n <div class="td-complete" *ngIf="isComplete()">\n <mat-icon class="mat-complete">check_circle</mat-icon>\n </div>\n <div class="td-triangle"\n [class.bg-muted]="disabled"\n *ngIf="isRequired()">\n <mat-icon class="mat-warn">warning</mat-icon>\n </div>\n <div class="td-step-label-wrapper"\n [class.mat-inactive]="(!active && !isComplete()) || disabled"\n [class.mat-warn]="isRequired() && !disabled">\n <div class="td-step-label">\n <ng-content select="[td-step-header-label]"></ng-content>\n </div>\n <div class="td-step-sublabel">\n <ng-content select="[td-step-header-sublabel]"></ng-content>\n </div>\n </div>\n <span class="td-step-header-separator"></span>\n <mat-icon class="td-edit-icon" *ngIf="isComplete() && !active && !disabled">mode_edit</mat-icon>\n</div>',styles:[".td-step-header{position:relative;outline:0;min-width:120px;height:72px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%}.td-step-header:hover:not(.mat-disabled){cursor:pointer}.td-step-header mat-icon.td-edit-icon{margin:0 8px}.td-step-header mat-icon.mat-warn{font-size:24px;height:24px;width:24px}.td-step-header mat-icon.mat-complete{position:relative;left:-2px;top:2px;font-size:28px;height:24px;width:24px}.td-step-header .td-circle{height:24px;width:24px;line-height:24px;border-radius:99%;text-align:center;-webkit-box-flex:0;-ms-flex:none;flex:none}.td-step-header .td-circle mat-icon{margin-top:2px;font-weight:700}.td-step-header .td-triangle>mat-icon{font-size:25px}::ng-deep :not([dir=rtl]) .td-step-header .td-circle,::ng-deep :not([dir=rtl]) .td-step-header .td-complete,::ng-deep :not([dir=rtl]) .td-step-header .td-triangle{margin-left:8px;margin-right:0}::ng-deep [dir=rtl] .td-step-header .td-circle,::ng-deep [dir=rtl] .td-step-header .td-complete,::ng-deep [dir=rtl] .td-step-header .td-triangle{margin-left:0;margin-right:8px}.td-step-header .td-circle,.td-step-header .td-complete{font-size:14px}.td-step-header .td-step-label-wrapper{padding-left:8px;padding-right:8px}.td-step-header .td-step-header-separator{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-sizing:border-box;box-sizing:border-box}"]}]}],M.propDecorators={number:[{type:d.Input,args:["number"]}],active:[{type:d.Input,args:["active"]}],state:[{type:d.Input,args:["state"]}],tabIndex:[{type:d.Input,args:["tabIndex"]}]},M);function M(){var e=null!==A&&A.apply(this,arguments)||this;return e.state=u.None,e}var T=(Object.defineProperty(V.prototype,"hasContent",{get:function(){return this.contentRef&&(0<this.contentRef.nativeElement.children.length||!!this.contentRef.nativeElement.textContent.trim())},enumerable:!0,configurable:!0}),Object.defineProperty(V.prototype,"hasActions",{get:function(){return this.actionsRef&&(0<this.actionsRef.nativeElement.children.length||!!this.actionsRef.nativeElement.textContent.trim())},enumerable:!0,configurable:!0}),Object.defineProperty(V.prototype,"hasSummary",{get:function(){return this.summaryRef&&(0<this.summaryRef.nativeElement.children.length||!!this.summaryRef.nativeElement.textContent.trim())},enumerable:!0,configurable:!0}),V.prototype.isComplete=function(){return this.state===u.Complete},V.decorators=[{type:d.Component,args:[{selector:"td-step-body",template:'<ng-content></ng-content>\n<div class="td-step-body">\n <div class="td-step-content-wrapper"\n [@tdCollapse]="!active">\n <div #contentRef cdkScrollable [class.td-step-content]="hasContent">\n <ng-content select="[td-step-body-content]"></ng-content>\n </div>\n <div #actionsRef\n [class.td-step-actions]="hasActions">\n <ng-content select="[td-step-body-actions]"></ng-content>\n </div>\n </div>\n <div #summaryRef\n [@tdCollapse]="active || !isComplete()"\n [class.td-step-summary]="hasSummary">\n <ng-content select="[td-step-body-summary]"></ng-content>\n </div>\n</div>',animations:[a.tdCollapseAnimation],styles:[":host{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}:host .td-step-body{overflow-x:hidden;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-sizing:border-box;box-sizing:border-box}:host .td-step-body .td-step-content-wrapper.ng-animating,:host .td-step-body .td-step-summary.ng-animating{overflow:hidden}:host .td-step-body .td-step-content{overflow-x:auto}:host .td-step-body .td-step-actions{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}"]}]}],V.propDecorators={contentRef:[{type:d.ViewChild,args:["contentRef",{read:d.ElementRef}]}],actionsRef:[{type:d.ViewChild,args:["actionsRef",{read:d.ElementRef}]}],summaryRef:[{type:d.ViewChild,args:["summaryRef",{read:d.ElementRef}]}],active:[{type:d.Input,args:["active"]}],state:[{type:d.Input,args:["state"]}]},V);function V(){this.state=u.None}var B,H=(g(F,B=S),Object.defineProperty(F.prototype,"state",{get:function(){return this._state},set:function(e){switch(e){case u.Complete:this._state=u.Complete;break;case u.Required:this._state=u.Required;break;default:this._state=u.None}},enumerable:!0,configurable:!0}),Object.defineProperty(F.prototype,"active",{get:function(){return this._active},set:function(e){this._active=p.coerceBooleanProperty(e),this._changeDetectorRef.markForCheck()},enumerable:!0,configurable:!0}),F.prototype._handleClick=function(e){this.disabled&&(e.preventDefault(),e.stopImmediatePropagation())},F.decorators=[{type:d.Component,args:[{selector:"[td-step-link],[tdStepLink]",template:'<td-step-header class="td-step-header-wrapper"\n [tabIndex]="-1"\n [number]="number"\n [active]="active"\n [disableRipple]="disableRipple || disabled"\n [disabled]="disabled" \n [state]="state">\n <ng-template td-step-header-label [ngIf]="true">{{label}}</ng-template>\n <ng-template td-step-header-sublabel [ngIf]="true">{{sublabel | truncate:30}}</ng-template>\n <ng-content></ng-content>\n</td-step-header>',inputs:["disabled","disableRipple"],changeDetection:d.ChangeDetectionStrategy.OnPush,host:{"[class.td-step-link]":"true","[attr.tabindex]":"disabled ? -1 : (tabIndex || 0)","[attr.disabled]":"disabled || null","[class.mat-disabled]":"disabled || null","(click)":"_handleClick($event)"},styles:[":host{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}:host.mat-disabled{pointer-events:none}:host .td-step-header-wrapper{width:100%}"]}]}],F.ctorParameters=function(){return[{type:d.ChangeDetectorRef},{type:d.ElementRef}]},F.propDecorators={state:[{type:d.Input,args:["state"]}],label:[{type:d.Input,args:["label"]}],sublabel:[{type:d.Input,args:["sublabel"]}],active:[{type:d.Input,args:["active"]}],tabIndex:[{type:d.Input,args:["tabIndex"]}]},F);function F(e,t){var n=B.call(this)||this;return n._changeDetectorRef=e,n.elementRef=t,n._active=!1,n._state=u.None,n}var W=(Object.defineProperty(N.prototype,"nativeElementWidth",{get:function(){var e=this._elementRef.nativeElement,t=window.getComputedStyle(e),n=parseInt(t.borderLeft,10),i=parseInt(t.borderRight,10),r=parseInt(t.marginLeft,10),a=parseInt(t.marginRight,10),o=parseInt(t.paddingLeft,10),s=parseInt(t.paddingRight,10);return e.getBoundingClientRect().width-n-i-r-a-o-s},enumerable:!0,configurable:!0}),N.prototype.ngAfterContentInit=function(){var e=this;c.merge(this._widthSubject.asObservable().pipe(h.distinctUntilChanged()),this._viewportRuler.change(150),this._dir?this._dir.change:c.of(undefined),this._steps.changes).pipe(h.takeUntil(this._destroyed)).subscribe(function(){e._configureSteps(),e.updatePagination(),e._changeDetectorRef.markForCheck()}),this._configureSteps(),this._changeDetectorRef.markForCheck()},N.prototype.ngAfterContentChecked=function(){this._elementRef&&this._elementRef.nativeElement&&this._widthSubject.next(this.nativeElementWidth),this._scrollDistanceChanged&&(this._updateStepScrollPosition(),this._scrollDistanceChanged=!1,this._changeDetectorRef.markForCheck())},N.prototype.ngOnDestroy=function(){this._destroyed.next(),this._destroyed.complete()},N.prototype._handleKeydown=function(e){switch(e.keyCode){case s.LEFT_ARROW:this._scrollHeader("before"),e.preventDefault();break;case s.RIGHT_ARROW:this._scrollHeader("after"),e.preventDefault()}},N.prototype.updatePagination=function(){this._checkPaginationEnabled(),this._checkScrollingControls(),this._updateStepScrollPosition()},N.prototype._getLayoutDirection=function(){return this._dir&&"rtl"===this._dir.value?"rtl":"ltr"},N.prototype._updateStepScrollPosition=function(){var e="ltr"===this._getLayoutDirection()?-this.scrollDistance:this.scrollDistance;this._stepList.nativeElement.style.transform="translateX("+Math.round(e)+"px)","ltr"===this._getLayoutDirection()?this._stepListContainer.nativeElement.scrollLeft=0:this._stepListContainer.nativeElement.scrollLeft=this._getMaxScrollDistance()},Object.defineProperty(N.prototype,"scrollDistance",{get:function(){return this._scrollDistance},set:function(e){this._scrollDistance=Math.max(0,Math.min(this._getMaxScrollDistance(),e)),this._scrollDistanceChanged=!0,this._checkScrollingControls()},enumerable:!0,configurable:!0}),N.prototype._scrollHeader=function(e){this.scrollDistance+=("before"===e?-1:1)*this._stepListContainer.nativeElement.offsetWidth/2},N.prototype._checkPaginationEnabled=function(){var e=this._stepList.nativeElement.scrollWidth>this._elementRef.nativeElement.offsetWidth;e||(this.scrollDistance=0),e!==this._showPaginationControls&&this._changeDetectorRef.markForCheck(),this._showPaginationControls=e},N.prototype._checkScrollingControls=function(){this._disableScrollBefore=0===this.scrollDistance,this._disableScrollAfter=this.scrollDistance===this._getMaxScrollDistance(),this._changeDetectorRef.markForCheck()},N.prototype._getMaxScrollDistance=function(){return this._stepList.nativeElement.scrollWidth-this._stepListContainer.nativeElement.offsetWidth||0},N.prototype._configureSteps=function(){var i=this;this._separators.forEach(function(e){i._renderer.removeChild(i._stepList.nativeElement,e)});var r=this._steps.toArray();r.forEach(function(e,t){if(0<t&&t<r.length){var n=i._renderer.createElement("div");i._renderer.addClass(n,"td-horizontal-line"),i._separators.push(n),i._renderer.insertBefore(i._stepList.nativeElement,n,e.elementRef.nativeElement)}e.number=t+1})},N.decorators=[{type:d.Component,args:[{selector:"nav[td-steps][horizontal]",template:'<div class="td-steps-header">\n <div class="td-step-header-pagination td-step-header-pagination-before mat-elevation-z4"\n aria-hidden="true"\n mat-ripple [matRippleDisabled]="_disableScrollBefore"\n [class.td-step-header-pagination-disabled]="_disableScrollBefore"\n (click)="_scrollHeader(\'before\')">\n <div class="td-step-header-pagination-chevron"></div>\n </div>\n <div #stepListContainer class="td-steps-header-container" (keydown)="_handleKeydown($event)">\n <div #stepList class="td-steps-header-list">\n <ng-content></ng-content>\n </div>\n </div>\n <div class="td-step-header-pagination td-step-header-pagination-after mat-elevation-z4"\n aria-hidden="true"\n mat-ripple [matRippleDisabled]="_disableScrollAfter"\n [class.td-step-header-pagination-disabled]="_disableScrollAfter"\n (click)="_scrollHeader(\'after\')">\n <div class="td-step-header-pagination-chevron"></div>\n </div>\n</div>\n',changeDetection:d.ChangeDetectionStrategy.OnPush,host:{"class":"td-steps td-steps-horizontal","[class.td-step-header-pagination-controls-enabled]":"_showPaginationControls","[class.td-step-header-rtl]":"_getLayoutDirection() == 'rtl'"},styles:[":host{width:100%;display:block}.td-steps-header,.td-steps-header-list{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.td-steps-header-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;z-index:1}.td-steps-header-list{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;position:relative;-webkit-transition:-webkit-transform .5s cubic-bezier(.35,0,.25,1);transition:transform .5s cubic-bezier(.35,0,.25,1),-webkit-transform .5s cubic-bezier(.35,0,.25,1);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.td-step-header-pagination{position:relative;display:none;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:32px;cursor:pointer;z-index:2}:host.td-step-header-pagination-controls-enabled .td-step-header-pagination{display:-webkit-box;display:-ms-flexbox;display:flex}.td-step-header-pagination-before,:host.td-step-header-rtl .td-step-header-pagination-after{padding-left:4px}.td-step-header-pagination-before .td-step-header-pagination-chevron,:host.td-step-header-rtl .td-step-header-pagination-after .td-step-header-pagination-chevron{-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg)}.td-step-header-pagination-after,:host.td-step-header-rtl .td-step-header-pagination-before{padding-right:4px}.td-step-header-pagination-after .td-step-header-pagination-chevron,:host.td-step-header-rtl .td-step-header-pagination-before .td-step-header-pagination-chevron{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.td-step-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;content:'';height:8px;width:8px}.td-step-header-pagination-disabled{-webkit-box-shadow:none;box-shadow:none;cursor:default}.td-horizontal-line{border-bottom-width:1px;border-bottom-style:solid;height:1px;min-width:20px;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-sizing:border-box;box-sizing:border-box}"]}]}],N.ctorParameters=function(){return[{type:d.ElementRef},{type:l.ViewportRuler},{type:o.Directionality,decorators:[{type:d.Optional}]},{type:d.Renderer2},{type:d.ChangeDetectorRef}]},N.propDecorators={_steps:[{type:d.ContentChildren,args:[H]}],_stepListContainer:[{type:d.ViewChild,args:["stepListContainer"]}],_stepList:[{type:d.ViewChild,args:["stepList"]}]},N);function N(e,t,n,i,r){this._elementRef=e,this._viewportRuler=t,this._dir=n,this._renderer=i,this._changeDetectorRef=r,this._separators=[],this._destroyed=new c.Subject,this._widthSubject=new c.Subject,this._scrollDistance=0,this._scrollDistanceChanged=!1,this._showPaginationControls=!1,this._disableScrollAfter=!0,this._disableScrollBefore=!0}var U=(K.prototype.ngAfterContentInit=function(){var e=this;this._steps.changes.pipe(h.takeUntil(this._destroyed)).subscribe(function(){e._configureSteps(),e._changeDetectorRef.markForCheck()}),this._configureSteps(),this._changeDetectorRef.markForCheck()},K.prototype.ngOnDestroy=function(){this._destroyed.next(),this._destroyed.complete()},K.prototype._configureSteps=function(){var r=this;this._separators.forEach(function(e){r._renderer.removeChild(r._stepList.nativeElement,e)});var a=this._steps.toArray();a.forEach(function(e,t){if(0<t&&t<a.length){var n=r._renderer.createElement("div");r._renderer.addClass(n,"td-vertical-line-wrapper");var i=r._renderer.createElement("div");r._renderer.addClass(i,"td-vertical-line"),r._renderer.appendChild(n,i),r._separators.push(n),r._renderer.insertBefore(r._stepList.nativeElement,n,e.elementRef.nativeElement)}e.number=t+1})},K.decorators=[{type:d.Component,args:[{selector:"nav[td-steps][vertical]",template:'<div class="td-steps-header">\n <div class="td-steps-header-container">\n <div #stepList class="td-steps-header-list">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n ',changeDetection:d.ChangeDetectionStrategy.OnPush,host:{"class":"td-steps td-steps-vertical"},styles:[".td-vertical-line-wrapper{position:relative}.td-vertical-line-wrapper .td-vertical-line{position:absolute;top:-16px;height:34px;border-left-width:1px;border-left-style:solid}::ng-deep :not([dir=rtl]) .td-vertical-line-wrapper .td-vertical-line{left:20px;right:auto}::ng-deep [dir=rtl] .td-vertical-line-wrapper .td-vertical-line{left:auto;right:20px}"]}]}],K.ctorParameters=function(){return[{type:d.Renderer2},{type:d.ChangeDetectorRef}]},K.propDecorators={_steps:[{type:d.ContentChildren,args:[H]}],_stepList:[{type:d.ViewChild,args:["stepList"]}]},K);function K(e,t){this._renderer=e,this._changeDetectorRef=t,this._separators=[],this._destroyed=new c.Subject}var $=[E,I,q,T,m,y,k,W,U,H],G=(X.decorators=[{type:d.NgModule,args:[{imports:[t.CommonModule,n.MatIconModule,i.MatRippleModule,r.PortalModule,l.ScrollDispatchModule,a.CovalentCommonModule],declarations:[$],exports:[$]}]}],X);function X(){}e.CovalentStepsModule=G,e.StepState=u,e.TdStepLabelDirective=m,e.TdStepActionsDirective=y,e.TdStepSummaryDirective=k,e.TdStepBase=R,e._TdStepMixinBase=S,e.TdStepComponent=I,e.StepMode=P,e.TdStepsComponent=E,e.TdStepBodyComponent=T,e.TdStepHeaderBase=L,e._TdStepHeaderMixinBase=j,e.TdStepHeaderComponent=q,eb=H,ea=W,ec=U,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=covalent-core-steps.umd.min.js.map