UNPKG

@angular/material

Version:
30 lines 22.3 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/cdk/portal"),require("@angular/cdk/stepper"),require("@angular/common"),require("@angular/core"),require("@angular/material/button"),require("@angular/material/core"),require("@angular/material/icon"),require("tslib"),require("@angular/cdk/a11y"),require("rxjs"),require("@angular/cdk/bidi"),require("rxjs/operators"),require("@angular/animations")):"function"==typeof define&&define.amd?define("@angular/material/stepper",["exports","@angular/cdk/portal","@angular/cdk/stepper","@angular/common","@angular/core","@angular/material/button","@angular/material/core","@angular/material/icon","tslib","@angular/cdk/a11y","rxjs","@angular/cdk/bidi","rxjs/operators","@angular/animations"],e):e(((t=t||self).ng=t.ng||{},t.ng.material=t.ng.material||{},t.ng.material.stepper={}),t.ng.cdk.portal,t.ng.cdk.stepper,t.ng.common,t.ng.core,t.ng.material.button,t.ng.material.core,t.ng.material.icon,t.tslib,t.ng.cdk.a11y,t.rxjs,t.ng.cdk.bidi,t.rxjs.operators,t.ng.animations)}(this,(function(t,e,n,a,r,i,o,p,s,l,d,c,m,h){"use strict"; /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */var u=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return s.__extends(e,t),e.decorators=[{type:r.Directive,args:[{selector:"[matStepLabel]"}]}],e}(n.CdkStepLabel),g=function(){function t(){this.changes=new d.Subject,this.optionalLabel="Optional"}return t.decorators=[{type:r.Injectable,args:[{providedIn:"root"}]}],t.ɵprov=r.ɵɵdefineInjectable({factory:function e(){return new t},token:t,providedIn:"root"}),t}(); /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */function b(t){return t||new g}var f={provide:g,deps:[[new r.Optional,new r.SkipSelf,g]],useFactory:b},x=function(t){function e(e,n,a,r){var i=t.call(this,a)||this;return i._intl=e,i._focusMonitor=n,n.monitor(a,!0),i._intlSubscription=e.changes.subscribe((function(){return r.markForCheck()})),i}return s.__extends(e,t),e.prototype.ngOnDestroy=function(){this._intlSubscription.unsubscribe(),this._focusMonitor.stopMonitoring(this._elementRef)},e.prototype.focus=function(){this._focusMonitor.focusVia(this._elementRef,"program")},e.prototype._stringLabel=function(){return this.label instanceof u?null:this.label},e.prototype._templateLabel=function(){return this.label instanceof u?this.label:null},e.prototype._getHostElement=function(){return this._elementRef.nativeElement},e.prototype._getIconContext=function(){return{index:this.index,active:this.active,optional:this.optional}},e.prototype._getDefaultTextForState=function(t){return"number"==t?""+(this.index+1):"edit"==t?"create":"error"==t?"warning":t},e.decorators=[{type:r.Component,args:[{selector:"mat-step-header",template:'<div class="mat-step-header-ripple" matRipple\n [matRippleTrigger]="_getHostElement()"\n [matRippleDisabled]="disableRipple"></div>\n\n<div class="mat-step-icon-state-{{state}} mat-step-icon" [class.mat-step-icon-selected]="selected">\n <div class="mat-step-icon-content" [ngSwitch]="!!(iconOverrides && iconOverrides[state])">\n <ng-container\n *ngSwitchCase="true"\n [ngTemplateOutlet]="iconOverrides[state]"\n [ngTemplateOutletContext]="_getIconContext()"></ng-container>\n <ng-container *ngSwitchDefault [ngSwitch]="state">\n <span *ngSwitchCase="\'number\'">{{_getDefaultTextForState(state)}}</span>\n <mat-icon *ngSwitchDefault>{{_getDefaultTextForState(state)}}</mat-icon>\n </ng-container>\n </div>\n</div>\n<div class="mat-step-label"\n [class.mat-step-label-active]="active"\n [class.mat-step-label-selected]="selected"\n [class.mat-step-label-error]="state == \'error\'">\n \x3c!-- If there is a label template, use it. --\x3e\n <ng-container *ngIf="_templateLabel()" [ngTemplateOutlet]="_templateLabel()!.template">\n </ng-container>\n \x3c!-- If there is no label template, fall back to the text label. --\x3e\n <div class="mat-step-text-label" *ngIf="_stringLabel()">{{label}}</div>\n\n <div class="mat-step-optional" *ngIf="optional && state != \'error\'">{{_intl.optionalLabel}}</div>\n <div class="mat-step-sub-label-error" *ngIf="state == \'error\'">{{errorMessage}}</div>\n</div>\n\n',host:{class:"mat-step-header",role:"tab"},encapsulation:r.ViewEncapsulation.None,changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[".mat-step-header{overflow:hidden;outline:none;cursor:pointer;position:relative;box-sizing:content-box;-webkit-tap-highlight-color:transparent}.mat-step-optional,.mat-step-sub-label-error{font-size:12px}.mat-step-icon{border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.mat-step-icon-content,.mat-step-icon .mat-icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mat-step-icon .mat-icon{font-size:16px;height:16px;width:16px}.mat-step-icon-state-error .mat-icon{font-size:24px;height:24px;width:24px}.mat-step-label{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle}.mat-step-text-label{text-overflow:ellipsis;overflow:hidden}.mat-step-header .mat-step-header-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}\n"]}]}],e.ctorParameters=function(){return[{type:g},{type:l.FocusMonitor},{type:r.ElementRef},{type:r.ChangeDetectorRef}]},e.propDecorators={state:[{type:r.Input}],label:[{type:r.Input}],errorMessage:[{type:r.Input}],iconOverrides:[{type:r.Input}],index:[{type:r.Input}],selected:[{type:r.Input}],active:[{type:r.Input}],optional:[{type:r.Input}],disableRipple:[{type:r.Input}]},e}(n.CdkStepHeader),v={horizontalStepTransition:h.trigger("stepTransition",[h.state("previous",h.style({transform:"translate3d(-100%, 0, 0)",visibility:"hidden"})),h.state("current",h.style({transform:"none",visibility:"visible"})),h.state("next",h.style({transform:"translate3d(100%, 0, 0)",visibility:"hidden"})),h.transition("* => *",h.animate("500ms cubic-bezier(0.35, 0, 0.25, 1)"))]),verticalStepTransition:h.trigger("stepTransition",[h.state("previous",h.style({height:"0px",visibility:"hidden"})),h.state("next",h.style({height:"0px",visibility:"hidden"})),h.state("current",h.style({height:"*",visibility:"visible"})),h.transition("* <=> current",h.animate("225ms cubic-bezier(0.4, 0.0, 0.2, 1)"))])},y=function(){function t(t){this.templateRef=t}return t.decorators=[{type:r.Directive,args:[{selector:"ng-template[matStepperIcon]"}]}],t.ctorParameters=function(){return[{type:r.TemplateRef}]},t.propDecorators={name:[{type:r.Input,args:["matStepperIcon"]}]},t}(),_=function(t){function e(e,n,a){var r=t.call(this,e,a)||this;return r._errorStateMatcher=n,r}return s.__extends(e,t),e.prototype.isErrorState=function(t,e){return this._errorStateMatcher.isErrorState(t,e)||!!(t&&t.invalid&&this.interacted)},e.decorators=[{type:r.Component,args:[{selector:"mat-step",template:"<ng-template><ng-content></ng-content></ng-template>\n",providers:[{provide:o.ErrorStateMatcher,useExisting:e},{provide:n.CdkStep,useExisting:e}],encapsulation:r.ViewEncapsulation.None,exportAs:"matStep",changeDetection:r.ChangeDetectionStrategy.OnPush}]}],e.ctorParameters=function(){return[{type:S,decorators:[{type:r.Inject,args:[r.forwardRef((function(){return S}))]}]},{type:o.ErrorStateMatcher,decorators:[{type:r.SkipSelf}]},{type:void 0,decorators:[{type:r.Optional},{type:r.Inject,args:[n.STEPPER_GLOBAL_OPTIONS]}]}]},e.propDecorators={stepLabel:[{type:r.ContentChild,args:[u]}]},e}(n.CdkStep),S=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.animationDone=new r.EventEmitter,e._iconOverrides={},e._animationDone=new d.Subject,e}return s.__extends(e,t),e.prototype.ngAfterContentInit=function(){var t=this;this._icons.forEach((function(e){return t._iconOverrides[e.name]=e.templateRef})),this._steps.changes.pipe(m.takeUntil(this._destroyed)).subscribe((function(){t._stateChanged()})),this._animationDone.pipe(m.distinctUntilChanged((function(t,e){return t.fromState===e.fromState&&t.toState===e.toState})),m.takeUntil(this._destroyed)).subscribe((function(e){"current"===e.toState&&t.animationDone.emit()}))},e.decorators=[{type:r.Directive,args:[{selector:"[matStepper]",providers:[{provide:n.CdkStepper,useExisting:e}]}]}],e.propDecorators={_stepHeader:[{type:r.ViewChildren,args:[x]}],_steps:[{type:r.ContentChildren,args:[_,{descendants:!0}]}],_icons:[{type:r.ContentChildren,args:[y,{descendants:!0}]}],animationDone:[{type:r.Output}],disableRipple:[{type:r.Input}]},e}(n.CdkStepper),z=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.labelPosition="end",e}return s.__extends(e,t),e.decorators=[{type:r.Component,args:[{selector:"mat-horizontal-stepper",exportAs:"matHorizontalStepper",template:'<div class="mat-horizontal-stepper-header-container">\n <ng-container *ngFor="let step of steps; let i = index; let isLast = last">\n <mat-step-header class="mat-horizontal-stepper-header"\n (click)="step.select()"\n (keydown)="_onKeydown($event)"\n [tabIndex]="_getFocusIndex() === i ? 0 : -1"\n [id]="_getStepLabelId(i)"\n [attr.aria-posinset]="i + 1"\n [attr.aria-setsize]="steps.length"\n [attr.aria-controls]="_getStepContentId(i)"\n [attr.aria-selected]="selectedIndex == i"\n [attr.aria-label]="step.ariaLabel || null"\n [attr.aria-labelledby]="(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null"\n [index]="i"\n [state]="_getIndicatorType(i, step.state)"\n [label]="step.stepLabel || step.label"\n [selected]="selectedIndex === i"\n [active]="step.completed || selectedIndex === i || !linear"\n [optional]="step.optional"\n [errorMessage]="step.errorMessage"\n [iconOverrides]="_iconOverrides"\n [disableRipple]="disableRipple">\n </mat-step-header>\n <div *ngIf="!isLast" class="mat-stepper-horizontal-line"></div>\n </ng-container>\n</div>\n\n<div class="mat-horizontal-content-container">\n <div *ngFor="let step of steps; let i = index"\n [attr.tabindex]="selectedIndex === i ? 0 : null"\n class="mat-horizontal-stepper-content" role="tabpanel"\n [@stepTransition]="_getAnimationDirection(i)"\n (@stepTransition.done)="_animationDone.next($event)"\n [id]="_getStepContentId(i)"\n [attr.aria-labelledby]="_getStepLabelId(i)"\n [attr.aria-expanded]="selectedIndex === i">\n <ng-container [ngTemplateOutlet]="step.content"></ng-container>\n </div>\n</div>\n',inputs:["selectedIndex"],host:{class:"mat-stepper-horizontal","[class.mat-stepper-label-position-end]":'labelPosition == "end"',"[class.mat-stepper-label-position-bottom]":'labelPosition == "bottom"',"aria-orientation":"horizontal",role:"tablist"},animations:[v.horizontalStepTransition],providers:[{provide:S,useExisting:e},{provide:n.CdkStepper,useExisting:e}],encapsulation:r.ViewEncapsulation.None,changeDetection:r.ChangeDetectionStrategy.OnPush,styles:['.mat-stepper-vertical,.mat-stepper-horizontal{display:block}.mat-horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header-container{align-items:flex-start}.mat-stepper-horizontal-line{border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px}.mat-stepper-label-position-bottom .mat-stepper-horizontal-line{margin:0;min-width:0;position:relative;top:36px}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before,.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after{border-top-width:1px;border-top-style:solid;content:"";display:inline-block;height:0;position:absolute;top:36px;width:calc(50% - 20px)}.mat-horizontal-stepper-header{display:flex;height:72px;overflow:hidden;align-items:center;padding:0 24px}.mat-horizontal-stepper-header .mat-step-icon{margin-right:8px;flex:none}[dir=rtl] .mat-horizontal-stepper-header .mat-step-icon{margin-right:0;margin-left:8px}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header{box-sizing:border-box;flex-direction:column;height:auto;padding:24px}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after{right:0}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before{left:0}[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:last-child::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:first-child::after{display:none}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-icon{margin-right:0;margin-left:0}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-label{padding:16px 0 0 0;text-align:center;width:100%}.mat-vertical-stepper-header{display:flex;align-items:center;padding:24px;height:24px}.mat-vertical-stepper-header .mat-step-icon{margin-right:12px}[dir=rtl] .mat-vertical-stepper-header .mat-step-icon{margin-right:0;margin-left:12px}.mat-horizontal-stepper-content{outline:0}.mat-horizontal-stepper-content[aria-expanded=false]{height:0;overflow:hidden}.mat-horizontal-content-container{overflow:hidden;padding:0 24px 24px 24px}.mat-vertical-content-container{margin-left:36px;border:0;position:relative}[dir=rtl] .mat-vertical-content-container{margin-left:0;margin-right:36px}.mat-stepper-vertical-line::before{content:"";position:absolute;top:-16px;bottom:-16px;left:0;border-left-width:1px;border-left-style:solid}[dir=rtl] .mat-stepper-vertical-line::before{left:auto;right:0}.mat-vertical-stepper-content{overflow:hidden;outline:0}.mat-vertical-content{padding:0 24px 24px 24px}.mat-step:last-child .mat-vertical-content-container{border:none}\n']}]}],e.propDecorators={labelPosition:[{type:r.Input}]},e}(S),I=function(t){function e(e,n,a,r){var i=t.call(this,e,n,a,r)||this;return i._orientation="vertical",i}return s.__extends(e,t),e.decorators=[{type:r.Component,args:[{selector:"mat-vertical-stepper",exportAs:"matVerticalStepper",template:'<div class="mat-step" *ngFor="let step of steps; let i = index; let isLast = last">\n <mat-step-header class="mat-vertical-stepper-header"\n (click)="step.select()"\n (keydown)="_onKeydown($event)"\n [tabIndex]="_getFocusIndex() == i ? 0 : -1"\n [id]="_getStepLabelId(i)"\n [attr.aria-posinset]="i + 1"\n [attr.aria-setsize]="steps.length"\n [attr.aria-controls]="_getStepContentId(i)"\n [attr.aria-selected]="selectedIndex === i"\n [attr.aria-label]="step.ariaLabel || null"\n [attr.aria-labelledby]="(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null"\n [index]="i"\n [state]="_getIndicatorType(i, step.state)"\n [label]="step.stepLabel || step.label"\n [selected]="selectedIndex === i"\n [active]="step.completed || selectedIndex === i || !linear"\n [optional]="step.optional"\n [errorMessage]="step.errorMessage"\n [iconOverrides]="_iconOverrides"\n [disableRipple]="disableRipple">\n </mat-step-header>\n\n <div class="mat-vertical-content-container" [class.mat-stepper-vertical-line]="!isLast">\n <div class="mat-vertical-stepper-content" role="tabpanel"\n [attr.tabindex]="selectedIndex === i ? 0 : null"\n [@stepTransition]="_getAnimationDirection(i)"\n (@stepTransition.done)="_animationDone.next($event)"\n [id]="_getStepContentId(i)"\n [attr.aria-labelledby]="_getStepLabelId(i)"\n [attr.aria-expanded]="selectedIndex === i">\n <div class="mat-vertical-content">\n <ng-container [ngTemplateOutlet]="step.content"></ng-container>\n </div>\n </div>\n </div>\n</div>\n',inputs:["selectedIndex"],host:{class:"mat-stepper-vertical","aria-orientation":"vertical",role:"tablist"},animations:[v.verticalStepTransition],providers:[{provide:S,useExisting:e},{provide:n.CdkStepper,useExisting:e}],encapsulation:r.ViewEncapsulation.None,changeDetection:r.ChangeDetectionStrategy.OnPush,styles:['.mat-stepper-vertical,.mat-stepper-horizontal{display:block}.mat-horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header-container{align-items:flex-start}.mat-stepper-horizontal-line{border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px}.mat-stepper-label-position-bottom .mat-stepper-horizontal-line{margin:0;min-width:0;position:relative;top:36px}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before,.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after{border-top-width:1px;border-top-style:solid;content:"";display:inline-block;height:0;position:absolute;top:36px;width:calc(50% - 20px)}.mat-horizontal-stepper-header{display:flex;height:72px;overflow:hidden;align-items:center;padding:0 24px}.mat-horizontal-stepper-header .mat-step-icon{margin-right:8px;flex:none}[dir=rtl] .mat-horizontal-stepper-header .mat-step-icon{margin-right:0;margin-left:8px}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header{box-sizing:border-box;flex-direction:column;height:auto;padding:24px}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after{right:0}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before{left:0}[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:last-child::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:first-child::after{display:none}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-icon{margin-right:0;margin-left:0}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-label{padding:16px 0 0 0;text-align:center;width:100%}.mat-vertical-stepper-header{display:flex;align-items:center;padding:24px;height:24px}.mat-vertical-stepper-header .mat-step-icon{margin-right:12px}[dir=rtl] .mat-vertical-stepper-header .mat-step-icon{margin-right:0;margin-left:12px}.mat-horizontal-stepper-content{outline:0}.mat-horizontal-stepper-content[aria-expanded=false]{height:0;overflow:hidden}.mat-horizontal-content-container{overflow:hidden;padding:0 24px 24px 24px}.mat-vertical-content-container{margin-left:36px;border:0;position:relative}[dir=rtl] .mat-vertical-content-container{margin-left:0;margin-right:36px}.mat-stepper-vertical-line::before{content:"";position:absolute;top:-16px;bottom:-16px;left:0;border-left-width:1px;border-left-style:solid}[dir=rtl] .mat-stepper-vertical-line::before{left:auto;right:0}.mat-vertical-stepper-content{overflow:hidden;outline:0}.mat-vertical-content{padding:0 24px 24px 24px}.mat-step:last-child .mat-vertical-content-container{border:none}\n']}]}],e.ctorParameters=function(){return[{type:c.Directionality,decorators:[{type:r.Optional}]},{type:r.ChangeDetectorRef},{type:r.ElementRef},{type:void 0,decorators:[{type:r.Inject,args:[a.DOCUMENT]}]}]},e}(S),w=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return s.__extends(e,t),e.decorators=[{type:r.Directive,args:[{selector:"button[matStepperNext]",host:{"[type]":"type"},inputs:["type"]}]}],e}(n.CdkStepperNext),C=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return s.__extends(e,t),e.decorators=[{type:r.Directive,args:[{selector:"button[matStepperPrevious]",host:{"[type]":"type"},inputs:["type"]}]}],e}(n.CdkStepperPrevious),M=function(){function t(){}return t.decorators=[{type:r.NgModule,args:[{imports:[o.MatCommonModule,a.CommonModule,e.PortalModule,i.MatButtonModule,n.CdkStepperModule,p.MatIconModule,o.MatRippleModule],exports:[o.MatCommonModule,z,I,_,u,S,w,C,x,y],declarations:[z,I,_,u,S,w,C,x,y],providers:[f,o.ErrorStateMatcher]}]}],t}(); /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ t.MAT_STEPPER_INTL_PROVIDER=f,t.MAT_STEPPER_INTL_PROVIDER_FACTORY=b,t.MatHorizontalStepper=z,t.MatStep=_,t.MatStepHeader=x,t.MatStepLabel=u,t.MatStepper=S,t.MatStepperIcon=y,t.MatStepperIntl=g,t.MatStepperModule=M,t.MatStepperNext=w,t.MatStepperPrevious=C,t.MatVerticalStepper=I,t.matStepperAnimations=v,Object.defineProperty(t,"__esModule",{value:!0})}));