@covalent/core 2.0.0-rc.2 → 2.1.0

package/sidesheet/sidesheet.component.scss

@@ -0,0 +1,96 @@
+$td-sidesheet-side-padding: 16px !default;
+$td-sidesheet-top-padding: 20px !default;
+
+// base style for [layout]
+%layout {
+  box-sizing: border-box;
+  display: flex;
+}
+
+// base stle for [layout="column"]
+%layout-column {
+  @extend %layout;
+  flex-direction: column;
+}
+
+// base stle for [layout="column"]
+%layout-row {
+  @extend %layout;
+  flex-direction: row;
+}
+
+// base style for [layout-fill]
+%layout-fill {
+  margin: 0;
+  width: 100%;
+  min-height: 100%;
+  height: 100%;
+}
+
+// base style for [layout-align="start center"]
+%layout-align-start-center {
+  align-items: center;
+  align-content: center;
+  max-width: 100%;
+  justify-content: flex-start;
+}
+
+td-sidesheet {
+  @extend %layout-column, %layout-fill;
+  
+  .mat-divider-horizontal {
+    position: static !important;
+  }
+
+  td-sidesheet-title {
+    flex: 1;
+  }
+
+  // HEADER STYLES
+  td-sidesheet-header {
+    @extend %layout-row, %layout-align-start-center;
+    width: 100%;
+    padding: $td-sidesheet-top-padding $td-sidesheet-side-padding;
+    font-size: 18px;
+
+    .mat-button-focus-overlay {
+      background-color: transparent !important;
+    }
+    .mat-icon-button {
+      width: 24px;
+      height: 24px;
+      line-height: 21px;
+    }
+  }
+
+  // ACTION STYLES
+  td-sidesheet-actions {
+    padding: ($td-sidesheet-side-padding / 2);
+    display: block;
+  }
+
+  // CONTENT STYLES
+  .td-sidesheet-content-wrapper {
+    flex: 1;
+    // [.mat-content]
+    position: relative;
+    overflow-y: auto;
+  }
+  td-sidesheet-content {
+    display: block;
+    padding: $td-sidesheet-side-padding;
+  }
+}
+
+// FIRST/LAST CHILD ADJUSTMENTS
+// top els in td-sidesheet-content and td-sidesheet can't have their default margin-tops (e.g. <p> tags)
+// or they'll incorrectly add to card's top padding
+td-sidesheet > :first-child, td-sidesheet-content > :first-child {
+  margin-top: 0;
+}
+
+// last els in td-sidesheet-content and td-sidesheet can't have their default margin-bottoms (e.g. <p> tags)
+// or they'll incorrectly add to card's bottom padding
+td-sidesheet > :last-child, td-sidesheet-content > :last-child {
+  margin-bottom: 0;
+}

package/sidesheet/sidesheet.module.d.ts

@@ -0,0 +1,2 @@
+export declare class CovalentSidesheetModule {
+}

package/steps/covalent-core-steps.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"CovalentStepsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":38,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":40,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":41,"character":4},{"__symbolic":"reference","module":"@angular/material/core","name":"MatRippleModule","line":42,"character":4},{"__symbolic":"reference","module":"@angular/cdk/portal","name":"PortalModule","line":43,"character":4},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"ScrollDispatchModule","line":44,"character":4},{"__symbolic":"reference","module":"@covalent/core/common","name":"CovalentCommonModule","line":45,"character":4}],"declarations":[[{"__symbolic":"reference","name":"TdStepsComponent"},{"__symbolic":"reference","name":"TdStepComponent"},{"__symbolic":"reference","name":"TdStepHeaderComponent"},{"__symbolic":"reference","name":"TdStepBodyComponent"},{"__symbolic":"reference","name":"TdStepLabelDirective"},{"__symbolic":"reference","name":"TdStepActionsDirective"},{"__symbolic":"reference","name":"TdStepSummaryDirective"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵb"}]],"exports":[[{"__symbolic":"reference","name":"TdStepsComponent"},{"__symbolic":"reference","name":"TdStepComponent"},{"__symbolic":"reference","name":"TdStepHeaderComponent"},{"__symbolic":"reference","name":"TdStepBodyComponent"},{"__symbolic":"reference","name":"TdStepLabelDirective"},{"__symbolic":"reference","name":"TdStepActionsDirective"},{"__symbolic":"reference","name":"TdStepSummaryDirective"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵb"}]]}]}],"members":{}},"StepState":{"None":"none","Required":"required","Complete":"complete"},"TdStepLabelDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/cdk/portal","name":"TemplatePortalDirective","line":17,"character":42},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":14,"character":1},"arguments":[{"selector":"[td-step-label]ng-template"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":18,"character":63}]}]}},"TdStepActionsDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/cdk/portal","name":"TemplatePortalDirective","line":26,"character":44},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":23,"character":1},"arguments":[{"selector":"[td-step-actions]ng-template"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":18,"character":63}]}]}},"TdStepSummaryDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/cdk/portal","name":"TemplatePortalDirective","line":35,"character":44},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":32,"character":1},"arguments":[{"selector":"[td-step-summary]ng-template"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":18,"character":63}]}]}},"TdStepBase":{"__symbolic":"class","members":{}},"_TdStepMixinBase":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinDisableRipple","line":44,"character":32},"arguments":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinDisabled","line":44,"character":51},"arguments":[{"__symbolic":"reference","name":"TdStepBase"}]}]},"TdStepComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"_TdStepMixinBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":46,"character":1},"arguments":[{"selector":"td-step","inputs":["disabled","disableRipple"],"template":"<ng-template>\n  <ng-content></ng-content>\n</ng-template>"}]}],"members":{"_content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":61,"character":3},"arguments":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}],"stepLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":62,"character":3},"arguments":[{"__symbolic":"reference","name":"TdStepLabelDirective"}]}]}],"stepActions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":63,"character":3},"arguments":[{"__symbolic":"reference","name":"TdStepActionsDirective"}]}]}],"stepSummary":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":64,"character":3},"arguments":[{"__symbolic":"reference","name":"TdStepSummaryDirective"}]}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3},"arguments":["label"]}]}],"sublabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":3},"arguments":["sublabel"]}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":3},"arguments":["active"]}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3},"arguments":["state"]}]}],"onActivated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":118,"character":3},"arguments":["activated"]}]}],"onDeactivated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":124,"character":3},"arguments":["deactivated"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":18,"character":63}]}],"ngOnInit":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"isComplete":[{"__symbolic":"method"}],"onDisabledChange":[{"__symbolic":"method"}],"_setActive":[{"__symbolic":"method"}],"_onActivated":[{"__symbolic":"method"}],"_onDeactivated":[{"__symbolic":"method"}]}},"IStepChangeEvent":{"__symbolic":"interface"},"StepMode":{"Vertical":"vertical","Horizontal":"horizontal"},"TdStepsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"td-steps","host":{"class":"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","styles":[".td-line-wrapper,.td-step{position:relative}.td-steps-header{box-sizing:border-box;display:-ms-flexbox;display:flex;-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;-ms-flex:1;flex:1;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}"]}]}],"members":{"stepsContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":32,"character":3},"arguments":[{"__symbolic":"reference","name":"TdStepComponent"}]}]}],"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3},"arguments":["mode"]}]}],"onStepChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":68,"character":3},"arguments":["stepChange"]}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"isHorizontal":[{"__symbolic":"method"}],"isVertical":[{"__symbolic":"method"}],"areStepsActive":[{"__symbolic":"method"}],"_onStepSelection":[{"__symbolic":"method"}],"_deactivateAllBut":[{"__symbolic":"method"}],"_registerSteps":[{"__symbolic":"method"}],"_deregisterSteps":[{"__symbolic":"method"}]}},"TdStepBodyComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"td-step-body","animations":[{"__symbolic":"reference","module":"@covalent/core/common","name":"tdCollapseAnimation","line":11,"character":4}],"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>","styles":[":host{box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host .td-step-body{overflow-x:hidden;-ms-flex:1;flex:1;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{box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}"]}]}],"members":{"contentRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":16,"character":3},"arguments":["contentRef",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":16,"character":35}}]}]}],"actionsRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":23,"character":3},"arguments":["actionsRef",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":23,"character":35}}]}]}],"summaryRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":30,"character":3},"arguments":["summaryRef",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":30,"character":35}}]}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3},"arguments":["active"]}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3},"arguments":["state"]}]}],"isComplete":[{"__symbolic":"method"}]}},"TdStepHeaderBase":{"__symbolic":"class","members":{}},"_TdStepHeaderMixinBase":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinDisableRipple","line":9,"character":38},"arguments":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinDisabled","line":9,"character":57},"arguments":[{"__symbolic":"reference","name":"TdStepHeaderBase"}]}]},"TdStepHeaderComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"_TdStepHeaderMixinBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"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;-ms-flex-direction:row;flex-direction:row;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:start;justify-content:start;-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;-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{-ms-flex:1;flex:1;box-sizing:border-box}"]}]}],"members":{"number":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3},"arguments":["number"]}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3},"arguments":["active"]}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3},"arguments":["state"]}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3},"arguments":["tabIndex"]}]}],"isComplete":[{"__symbolic":"method"}],"isRequired":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"nav[td-steps][horizontal]","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":23,"character":19},"member":"OnPush"},"host":{"class":"td-steps td-steps-horizontal","[class.td-step-header-pagination-controls-enabled]":"_showPaginationControls","[class.td-step-header-rtl]":"_getLayoutDirection() == 'rtl'","$quoted$":["[class.td-step-header-pagination-controls-enabled]","[class.td-step-header-rtl]"]},"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","styles":[":host{width:100%;display:block}.td-steps-header,.td-steps-header-list{box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}.td-steps-header-container{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;overflow:hidden;z-index:1}.td-steps-header-list{-ms-flex-positive:1;flex-grow:1;position:relative;transition:transform .5s cubic-bezier(.35,0,.25,1),-webkit-transform .5s cubic-bezier(.35,0,.25,1);-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-ms-flex-pack:start;justify-content:start}.td-step-header-pagination{position:relative;display:none;-ms-flex-pack:center;justify-content: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:-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{box-shadow:none;cursor:default}.td-horizontal-line{border-bottom-width:1px;border-bottom-style:solid;height:1px;min-width:20px;-ms-flex:1;flex:1;box-sizing:border-box}"]}]}],"members":{"_steps":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":53,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵb"}]}]}],"_stepListContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":55,"character":3},"arguments":["stepListContainer"]}]}],"_stepList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":56,"character":3},"arguments":["stepList"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":78,"character":15}}],null,null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":76,"character":35},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"ViewportRuler","line":77,"character":38},{"__symbolic":"reference","module":"@angular/cdk/bidi","name":"Directionality","line":78,"character":40},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":79,"character":33},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":80,"character":42}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterContentChecked":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_handleKeydown":[{"__symbolic":"method"}],"updatePagination":[{"__symbolic":"method"}],"_getLayoutDirection":[{"__symbolic":"method"}],"_updateStepScrollPosition":[{"__symbolic":"method"}],"_scrollHeader":[{"__symbolic":"method"}],"_checkPaginationEnabled":[{"__symbolic":"method"}],"_checkScrollingControls":[{"__symbolic":"method"}],"_getMaxScrollDistance":[{"__symbolic":"method"}],"_configureSteps":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"_TdStepMixinBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"[td-step-link],[tdStepLink]","inputs":["disabled","disableRipple"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":12,"character":19},"member":"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)","$quoted$":["[class.td-step-link]","[attr.tabindex]","[attr.disabled]","[class.mat-disabled]","(click)"]},"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>","styles":[":host{box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-ms-flex-pack:start;justify-content:start}:host.mat-disabled{pointer-events:none}:host .td-step-header-wrapper{width:100%}"]}]}],"members":{"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3},"arguments":["state"]}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3},"arguments":["label"]}]}],"sublabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":3},"arguments":["sublabel"]}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3},"arguments":["active"]}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3},"arguments":["tabIndex"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":86,"character":42},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":87,"character":33}]}],"_handleClick":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":15,"character":1},"arguments":[{"selector":"nav[td-steps][vertical]","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":19,"character":19},"member":"OnPush"},"host":{"class":"td-steps 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  ","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}"]}]}],"members":{"_steps":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":33,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵb"}]}]}],"_stepList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":35,"character":3},"arguments":["stepList"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":37,"character":33},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":38,"character":42}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_configureSteps":[{"__symbolic":"method"}]}}},"origins":{"CovalentStepsModule":"./steps.module","StepState":"./step.component","TdStepLabelDirective":"./step.component","TdStepActionsDirective":"./step.component","TdStepSummaryDirective":"./step.component","TdStepBase":"./step.component","_TdStepMixinBase":"./step.component","TdStepComponent":"./step.component","IStepChangeEvent":"./steps.component","StepMode":"./steps.component","TdStepsComponent":"./steps.component","TdStepBodyComponent":"./step-body/step-body.component","TdStepHeaderBase":"./step-header/step-header.component","_TdStepHeaderMixinBase":"./step-header/step-header.component","TdStepHeaderComponent":"./step-header/step-header.component","ɵa":"./nav/nav-steps-horizontal/nav-steps-horizontal.component","ɵb":"./nav/nav-step-link/nav-step-link.component","ɵc":"./nav/nav-steps-vertical/nav-steps-vertical.component"},"importAs":"@covalent/core/steps"}
+{"__symbolic":"module","version":4,"metadata":{"CovalentStepsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":38,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":40,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":41,"character":4},{"__symbolic":"reference","module":"@angular/material/core","name":"MatRippleModule","line":42,"character":4},{"__symbolic":"reference","module":"@angular/cdk/portal","name":"PortalModule","line":43,"character":4},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"ScrollDispatchModule","line":44,"character":4},{"__symbolic":"reference","module":"@covalent/core/common","name":"CovalentCommonModule","line":45,"character":4}],"declarations":[[{"__symbolic":"reference","name":"TdStepsComponent"},{"__symbolic":"reference","name":"TdStepComponent"},{"__symbolic":"reference","name":"TdStepHeaderComponent"},{"__symbolic":"reference","name":"TdStepBodyComponent"},{"__symbolic":"reference","name":"TdStepLabelDirective"},{"__symbolic":"reference","name":"TdStepActionsDirective"},{"__symbolic":"reference","name":"TdStepSummaryDirective"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵb"}]],"exports":[[{"__symbolic":"reference","name":"TdStepsComponent"},{"__symbolic":"reference","name":"TdStepComponent"},{"__symbolic":"reference","name":"TdStepHeaderComponent"},{"__symbolic":"reference","name":"TdStepBodyComponent"},{"__symbolic":"reference","name":"TdStepLabelDirective"},{"__symbolic":"reference","name":"TdStepActionsDirective"},{"__symbolic":"reference","name":"TdStepSummaryDirective"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵb"}]]}]}],"members":{}},"StepState":{"None":"none","Required":"required","Complete":"complete"},"TdStepLabelDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/cdk/portal","name":"TemplatePortalDirective","line":17,"character":42},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":14,"character":1},"arguments":[{"selector":"[td-step-label]ng-template"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":18,"character":63}]}]}},"TdStepActionsDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/cdk/portal","name":"TemplatePortalDirective","line":26,"character":44},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":23,"character":1},"arguments":[{"selector":"[td-step-actions]ng-template"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":18,"character":63}]}]}},"TdStepSummaryDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/cdk/portal","name":"TemplatePortalDirective","line":35,"character":44},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":32,"character":1},"arguments":[{"selector":"[td-step-summary]ng-template"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":18,"character":63}]}]}},"TdStepBase":{"__symbolic":"class","members":{}},"_TdStepMixinBase":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinDisableRipple","line":44,"character":32},"arguments":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinDisabled","line":44,"character":51},"arguments":[{"__symbolic":"reference","name":"TdStepBase"}]}]},"TdStepComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"_TdStepMixinBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":46,"character":1},"arguments":[{"selector":"td-step","inputs":["disabled","disableRipple"],"template":"<ng-template>\n  <ng-content></ng-content>\n</ng-template>"}]}],"members":{"_content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":61,"character":3},"arguments":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}],"stepLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":62,"character":3},"arguments":[{"__symbolic":"reference","name":"TdStepLabelDirective"}]}]}],"stepActions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":63,"character":3},"arguments":[{"__symbolic":"reference","name":"TdStepActionsDirective"}]}]}],"stepSummary":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":64,"character":3},"arguments":[{"__symbolic":"reference","name":"TdStepSummaryDirective"}]}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3},"arguments":["label"]}]}],"sublabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":3},"arguments":["sublabel"]}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":3},"arguments":["active"]}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3},"arguments":["state"]}]}],"onActivated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":118,"character":3},"arguments":["activated"]}]}],"onDeactivated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":124,"character":3},"arguments":["deactivated"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":18,"character":63}]}],"ngOnInit":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"isComplete":[{"__symbolic":"method"}],"onDisabledChange":[{"__symbolic":"method"}],"_setActive":[{"__symbolic":"method"}],"_onActivated":[{"__symbolic":"method"}],"_onDeactivated":[{"__symbolic":"method"}]}},"IStepChangeEvent":{"__symbolic":"interface"},"StepMode":{"Vertical":"vertical","Horizontal":"horizontal"},"TdStepsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"td-steps","host":{"class":"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","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}"]}]}],"members":{"stepsContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":32,"character":3},"arguments":[{"__symbolic":"reference","name":"TdStepComponent"}]}]}],"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3},"arguments":["mode"]}]}],"onStepChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":68,"character":3},"arguments":["stepChange"]}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"isHorizontal":[{"__symbolic":"method"}],"isVertical":[{"__symbolic":"method"}],"areStepsActive":[{"__symbolic":"method"}],"_onStepSelection":[{"__symbolic":"method"}],"_deactivateAllBut":[{"__symbolic":"method"}],"_registerSteps":[{"__symbolic":"method"}],"_deregisterSteps":[{"__symbolic":"method"}]}},"TdStepBodyComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"td-step-body","animations":[{"__symbolic":"reference","module":"@covalent/core/common","name":"tdCollapseAnimation","line":11,"character":4}],"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>","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}"]}]}],"members":{"contentRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":16,"character":3},"arguments":["contentRef",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":16,"character":35}}]}]}],"actionsRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":23,"character":3},"arguments":["actionsRef",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":23,"character":35}}]}]}],"summaryRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":30,"character":3},"arguments":["summaryRef",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":30,"character":35}}]}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3},"arguments":["active"]}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3},"arguments":["state"]}]}],"isComplete":[{"__symbolic":"method"}]}},"TdStepHeaderBase":{"__symbolic":"class","members":{}},"_TdStepHeaderMixinBase":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinDisableRipple","line":9,"character":38},"arguments":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinDisabled","line":9,"character":57},"arguments":[{"__symbolic":"reference","name":"TdStepHeaderBase"}]}]},"TdStepHeaderComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"_TdStepHeaderMixinBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"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}"]}]}],"members":{"number":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3},"arguments":["number"]}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3},"arguments":["active"]}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3},"arguments":["state"]}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3},"arguments":["tabIndex"]}]}],"isComplete":[{"__symbolic":"method"}],"isRequired":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"nav[td-steps][horizontal]","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":23,"character":19},"member":"OnPush"},"host":{"class":"td-steps td-steps-horizontal","[class.td-step-header-pagination-controls-enabled]":"_showPaginationControls","[class.td-step-header-rtl]":"_getLayoutDirection() == 'rtl'","$quoted$":["[class.td-step-header-pagination-controls-enabled]","[class.td-step-header-rtl]"]},"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","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}"]}]}],"members":{"_steps":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":53,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵb"}]}]}],"_stepListContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":55,"character":3},"arguments":["stepListContainer"]}]}],"_stepList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":56,"character":3},"arguments":["stepList"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":78,"character":15}}],null,null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":76,"character":35},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"ViewportRuler","line":77,"character":38},{"__symbolic":"reference","module":"@angular/cdk/bidi","name":"Directionality","line":78,"character":40},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":79,"character":33},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":80,"character":42}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterContentChecked":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_handleKeydown":[{"__symbolic":"method"}],"updatePagination":[{"__symbolic":"method"}],"_getLayoutDirection":[{"__symbolic":"method"}],"_updateStepScrollPosition":[{"__symbolic":"method"}],"_scrollHeader":[{"__symbolic":"method"}],"_checkPaginationEnabled":[{"__symbolic":"method"}],"_checkScrollingControls":[{"__symbolic":"method"}],"_getMaxScrollDistance":[{"__symbolic":"method"}],"_configureSteps":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"_TdStepMixinBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"[td-step-link],[tdStepLink]","inputs":["disabled","disableRipple"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":12,"character":19},"member":"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)","$quoted$":["[class.td-step-link]","[attr.tabindex]","[attr.disabled]","[class.mat-disabled]","(click)"]},"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>","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%}"]}]}],"members":{"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3},"arguments":["state"]}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3},"arguments":["label"]}]}],"sublabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":3},"arguments":["sublabel"]}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3},"arguments":["active"]}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3},"arguments":["tabIndex"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":86,"character":42},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":87,"character":33}]}],"_handleClick":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":15,"character":1},"arguments":[{"selector":"nav[td-steps][vertical]","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":19,"character":19},"member":"OnPush"},"host":{"class":"td-steps 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  ","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}"]}]}],"members":{"_steps":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":33,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵb"}]}]}],"_stepList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":35,"character":3},"arguments":["stepList"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":37,"character":33},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":38,"character":42}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_configureSteps":[{"__symbolic":"method"}]}}},"origins":{"CovalentStepsModule":"./steps.module","StepState":"./step.component","TdStepLabelDirective":"./step.component","TdStepActionsDirective":"./step.component","TdStepSummaryDirective":"./step.component","TdStepBase":"./step.component","_TdStepMixinBase":"./step.component","TdStepComponent":"./step.component","IStepChangeEvent":"./steps.component","StepMode":"./steps.component","TdStepsComponent":"./steps.component","TdStepBodyComponent":"./step-body/step-body.component","TdStepHeaderBase":"./step-header/step-header.component","_TdStepHeaderMixinBase":"./step-header/step-header.component","TdStepHeaderComponent":"./step-header/step-header.component","ɵa":"./nav/nav-steps-horizontal/nav-steps-horizontal.component","ɵb":"./nav/nav-step-link/nav-step-link.component","ɵc":"./nav/nav-steps-vertical/nav-steps-vertical.component"},"importAs":"@covalent/core/steps"}

package/steps/nav/nav-step-link/nav-step-link.component.scss

@@ -0,0 +1,17 @@
+:host {
+  &.mat-disabled {
+    pointer-events: none;
+  }
+  .td-step-header-wrapper {
+    width: 100%;
+  }
+  // layout
+  box-sizing: border-box;
+  display: flex;
+  // layout="row"
+  flex-direction: row;
+  align-items: center;
+  align-content: center;
+  max-width: 100%;
+  justify-content: flex-start;
+}

package/steps/nav/nav-steps-horizontal/nav-steps-horizontal.component.scss

@@ -0,0 +1,81 @@
+:host {
+  width: 100%;
+  display: block;
+}
+.td-steps-header,
+.td-steps-header-list {
+  // layout
+  box-sizing: border-box;
+  display: flex;
+  // layout="row"
+  flex-direction: row;
+}
+.td-steps-header-container {
+  display: flex;
+  flex-grow: 1;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.td-steps-header-list {
+  flex-grow: 1;
+  position: relative;
+  transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
+  align-items: center;
+  align-content: center;
+  max-width: 100%;
+  justify-content: flex-start;
+}
+
+.td-step-header-pagination {
+  position: relative;
+  display: none;
+  justify-content: center;
+  align-items: center;
+  min-width: 32px;
+  cursor: pointer;
+  z-index: 2;
+}
+
+:host.td-step-header-pagination-controls-enabled .td-step-header-pagination {
+  display: flex;
+}
+
+// The pagination control that is displayed on the left side of the tab header.
+.td-step-header-pagination-before, :host.td-step-header-rtl .td-step-header-pagination-after {
+  padding-left: 4px;
+  .td-step-header-pagination-chevron {
+    transform: rotate(-135deg);
+  }
+}
+
+// The pagination control that is displayed on the right side of the tab header.
+:host.td-step-header-rtl .td-step-header-pagination-before, .td-step-header-pagination-after {
+  padding-right: 4px;
+  .td-step-header-pagination-chevron {
+    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 {
+  box-shadow: none;
+  cursor: default;
+}
+
+.td-horizontal-line {
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  height: 1px;
+  min-width: 20px;
+  // flex
+  flex: 1;
+  box-sizing: border-box;
+}

package/steps/nav/nav-steps-vertical/nav-steps-vertical.component.scss

@@ -0,0 +1,18 @@
+.td-vertical-line-wrapper {
+  position: relative;
+  .td-vertical-line {
+    position: absolute;
+    top: -16px;
+    height: 34px;
+    border-left-width: 1px;
+    border-left-style: solid;
+    ::ng-deep :not([dir='rtl']) & {
+      left: 20px;
+      right: auto;
+    }
+    ::ng-deep [dir='rtl'] & {
+      left: auto;
+      right: 20px;
+    }
+  }
+}

package/steps/step-body/step-body.component.scss

@@ -0,0 +1,29 @@
+:host {
+  // layout
+  box-sizing: border-box;
+  display: flex;
+  // layout="row"
+  flex-direction: row;
+  .td-step-body {
+    overflow-x: hidden;
+    // flex
+    flex: 1;
+    box-sizing: border-box;
+    .td-step-summary,
+    .td-step-content-wrapper {
+      &.ng-animating {
+        overflow: hidden;
+      }
+    }
+    .td-step-content {
+      overflow-x: auto;
+    }
+    .td-step-actions {
+      // layout
+      box-sizing: border-box;
+      display: flex;
+      // layout="row"
+      flex-direction: row;
+    }
+  }
+}

package/steps/step-header/step-header.component.scss

@@ -0,0 +1,90 @@
+$step-circle: 24px;
+
+.td-step-header {
+  position: relative;
+  outline: none;
+  min-width: 120px;
+  height: 72px;
+  // layout row
+  flex-direction: row;
+  // layout
+  box-sizing: border-box;
+  display: flex;
+  // flex
+  flex: 1;
+  // layout-align start
+  justify-content: flex-start;
+  // layout-align start center
+  align-items: center;
+  align-content: center;
+  max-width: 100%;
+  &:hover:not(.mat-disabled) {
+    cursor: pointer;
+  }
+  mat-icon.td-edit-icon {
+    margin: 0 8px;
+  }
+  mat-icon {
+    &.mat-warn {
+      font-size: $step-circle;
+      height: $step-circle;
+      width: $step-circle;
+    }
+    &.mat-complete {
+      position: relative;
+      left: -2px;
+      top: 2px;
+      font-size: $step-circle + 4;
+      height: $step-circle;
+      width: $step-circle;
+    }
+  }
+  .td-circle {
+    height: $step-circle;
+    width: $step-circle;
+    line-height: $step-circle;
+    border-radius: 99%;
+    text-align: center;
+    flex: none;
+    & mat-icon {
+      margin-top: 2px;
+      font-weight: bold;
+    }
+  }
+  .td-triangle {
+    & > mat-icon {
+      font-size: 25px;
+    }
+  }
+  .td-complete {
+    font-size: 0;
+  }
+  .td-circle,
+  .td-triangle,
+  .td-complete {
+    ::ng-deep :not([dir='rtl']) & {
+      margin: {
+        left: 8px;
+        right: 0;
+      }
+    }
+    ::ng-deep [dir='rtl'] & {
+      margin: {
+        left: 0;
+        right: 8px;
+      }
+    }
+  }
+  .td-circle,
+  .td-complete {
+    font-size: 14px;
+  }
+  .td-step-label-wrapper {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+  .td-step-header-separator {
+    flex: 1;
+    box-sizing: border-box;
+  }
+}

package/steps/steps.component.scss

@@ -0,0 +1,53 @@
+.td-line-wrapper,
+.td-step {
+  position: relative;
+}
+
+.td-steps-header {
+  // layout
+  box-sizing: border-box;
+  display: flex;
+  // layout="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;
+  ::ng-deep :not([dir='rtl']) & {
+    left: -6px;
+    right: -3px;
+  }
+  ::ng-deep [dir='rtl'] & {
+    left: -3px;
+    right: -6px;
+  }
+  min-width: 15px;
+  // flex
+  flex: 1;
+  box-sizing: border-box;
+}
+
+.td-vertical-line {
+  position: absolute;
+  ::ng-deep :not([dir='rtl']) & {
+    left: 20px;
+    right: auto;
+  }
+  ::ng-deep [dir='rtl'] & {
+    left: auto;
+    right: 20px;
+  }
+  bottom: -16px;
+  top: -16px;
+  border-left-width: 1px;
+  border-left-style: solid;
+}