{"__symbolic":"module","version":4,"metadata":{"StepperComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/cdk/stepper","name":"CdkStepper","line":14,"character":38},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"labs-stepper","providers":[{"provide":{"__symbolic":"reference","module":"@angular/cdk/stepper","name":"CdkStepper","line":12,"character":25},"useExisting":{"__symbolic":"reference","name":"StepperComponent"}}],"template":"<div class=\"step-controls\">\n  <button\n    role=\"tab\"\n    class=\"step-control\"\n    *ngFor=\"let step of steps; let i = index\"\n    [attr.aria-selected]=\"selectedIndex === i\"\n    [attr.aria-posinset]=\"i + 1\"\n    [attr.aria-setsize]=\"steps.length\"\n    [ngClass]=\"{\n      'step-control--active': selectedIndex === i,\n      'step-control--past': selectedIndex > i,\n      'step-control--future': selectedIndex < i\n    }\"\n    [disabled]=\"\n      linear && !(selectedIndex === i || (step.editable && step.completed))\n    \"\n    (click)=\"onClick(i)\"\n  >\n    <ng-container\n      *ngIf=\"step.stepLabel; else showLabelText\"\n      [ngTemplateOutlet]=\"step.stepLabel.template\"\n    >\n    </ng-container>\n    <ng-template #showLabelText>\n      {{ step.label }}\n    </ng-template>\n    <div class=\"step-control__arrows\">\n      <svg\n        class=\"step-control__arrow step-control__arrow--outline\"\n        viewBox=\"0 0 500 500\"\n        preserveAspectRatio=\"none\"\n      >\n        <polygon points=\"500,250 0,0 0,500\" />\n      </svg>\n      <svg\n        class=\"step-control__arrow\"\n        viewBox=\"0 0 500 500\"\n        preserveAspectRatio=\"none\"\n      >\n        <polygon points=\"500,250 0,0 0,500\" />\n      </svg>\n    </div>\n  </button>\n</div>\n\n<div [style.display]=\"selected ? 'block' : 'none'\" role=\"tabpanel\">\n  <!-- Content from the CdkStep is projected here -->\n  <ng-container [ngTemplateOutlet]=\"selected.content\"></ng-container>\n</div>\n","styles":[".step-controls{display:-ms-grid;display:grid;width:calc(100% - 16px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.step-control{position:relative;-webkit-appearance:none;margin-left:-1px;padding:16px;cursor:pointer;border-width:1px;border-style:solid}.step-control:disabled{cursor:initial}.step-control__arrows{position:absolute;top:-1px;bottom:-1px;right:1px;z-index:1}.step-control__arrow{position:absolute;top:0;left:0;height:100%;width:16px}.step-control__arrow--outline{left:1px}"]}]}],"members":{"role":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":18,"character":3},"arguments":["attr.role"]}]}],"ariaOrientation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":23,"character":3},"arguments":["attr.aria-orientation"]}]}],"onClick":[{"__symbolic":"method"}]}},"StepperModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":12},{"__symbolic":"reference","module":"@angular/cdk/stepper","name":"CdkStepperModule","line":7,"character":26},{"__symbolic":"reference","module":"@angular/material/core","name":"MatRippleModule","line":7,"character":44}],"exports":[{"__symbolic":"reference","name":"StepperComponent"},{"__symbolic":"reference","module":"@angular/cdk/stepper","name":"CdkStepperModule","line":8,"character":30}],"declarations":[{"__symbolic":"reference","name":"StepperComponent"}],"providers":[]}]}],"members":{}}},"origins":{"StepperComponent":"./stepper.component","StepperModule":"./stepper.module"},"importAs":"ng-labs/stepper"}