@cmdap/ng-wizard/cmdap-ng-wizard.metadata.json

A simple wizard/stepper component for Angular 9 utilizing Angular Routing for navigation.

{"__symbolic":"module","version":4,"metadata":{"NgWizardComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"ng-wizard","template":"<div class=\"ng-wizard-container\">\n  <ng-wizard-error [error]=\"error\"></ng-wizard-error>\n  <ng-wizard-navigation></ng-wizard-navigation>\n  <div class=\"ng-wizard-content-container\">\n    <router-outlet (activate)=\"onActivate($event)\"></router-outlet>\n  </div>\n  <ng-wizard-buttons></ng-wizard-buttons>\n</div>\n"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"NgWizardService"},{"__symbolic":"reference","module":"@angular/router","name":"ActivatedRoute","line":14,"character":19}]}],"onActivate":[{"__symbolic":"method"}]}},"NgWizardModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NgWizardComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":16,"character":12},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":16,"character":26}],"providers":[{"__symbolic":"reference","name":"NgWizardService"}],"exports":[{"__symbolic":"reference","name":"NgWizardComponent"}]}]}],"members":{}},"NgWizardStep":{"__symbolic":"class","members":{"wsIsValid":[{"__symbolic":"method"}],"wsOnNext":[{"__symbolic":"method"}],"wsOnPrevious":[{"__symbolic":"method"}]}},"NgWizardService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":10,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"Router","line":21,"character":30}]}],"loadWizardRoutes":[{"__symbolic":"method"}],"registerActiveComponent":[{"__symbolic":"method"}],"navigateToStep":[{"__symbolic":"method"}],"navigateToNextStep":[{"__symbolic":"method"}],"navigateToPreviousStep":[{"__symbolic":"method"}],"navigateToPath":[{"__symbolic":"method"}],"getStepDataChangesAsObservable":[{"__symbolic":"method"}],"getCurrentStepDataAsObservable":[{"__symbolic":"method"}],"getWizardRoute":[{"__symbolic":"method"}],"getAllWizardRoutes":[{"__symbolic":"method"}],"loadChildRoutes":[{"__symbolic":"method"}],"registerStep":[{"__symbolic":"method"}],"onStepDataChange":[{"__symbolic":"method"}],"resetCurrentStep":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"ng-wizard-error","template":"<div *ngIf=\"error\" class=\"ng-wizard-error\">\n  <div [ngSwitch]=\"error.type\" class=\"ng-wizard-error-message\">\n\n    <!-- NO_WIZARD_ROUTE error -->\n\n    <span *ngSwitchCase=\"NgWizardErrorType.NO_WIZARD_ROUTE\" class=\"no-wizard-route\">\n      No route configuration for the {{ error.wizardComponentName }} found.<br/>\n      Add a route for the {{ error.wizardComponentName }} to your AppRoutingModule.<br/>\n      <pre>\nconst routes: Routes = [\n    &#123; path: '', component: {{ error.wizardComponentName }} &#125;,\n];\n\n@NgModule(&#123;\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule]\n&#125;)\nexport class AppRoutingModule &#123; &#125;</pre>\n    </span>\n\n    <!-- NO_CHILD_ROUTES error -->\n\n    <span *ngSwitchCase=\"NgWizardErrorType.NO_CHILD_ROUTES\" class=\"no-child-routes\">\n      No child routes for the {{ error.wizardComponentName }} found.<br/>\n      Add at least one child route for the {{ error.wizardComponentName }} to your AppRoutingModule.<br/>\n      <pre>\n&#123; path: '{{ error.wizardPath }}', component: {{ error.wizardComponentName }}, children: [\n    &#123; path: 'step1', component: Step1Component &#125;,\n    &#123; path: '**', redirectTo: 'step1' &#125;,\n] &#125;,</pre>\n    </span>\n\n    <!-- NO_WS_INTERFACE error -->\n\n    <span *ngSwitchCase=\"NgWizardErrorType.NO_WS_INTERFACE\" class=\"no-ws-interface\">\n      The {{ error.stepComponentName}} does not extend the NgWizardStep class or implement the\n      NgWizardStepInterface.<br/>\n      Extend the NgWizardStep class in your {{ error.stepComponentName}} or implement the\n      NgWizardStepInterface.<br/>\n      <pre>\n@NgComponent(...)\nexport class {{ error.stepComponentName }} extends NgWizardStep &#123;\n    constructor() &#123;\n        super();\n    &#125;\n&#125;</pre><br/>\n      or<br/>\n      <pre>\n@NgComponent(...)\nexport class {{ error.stepComponentName }} implements NgWizardStepInterface &#123;\n    wsIsValid() &#123;\n        return true;\n    &#125;\n    wsOnNext() &#123; &#125;\n    wsOnPrevious() &#123; &#125;\n&#125;</pre>\n    </span>\n\n  </div>\n</div>\n","styles":[".ng-wizard-error{border:1px solid #d71117;border-radius:5px;color:#d71117;padding:10px 10px 0;margin-top:10px}.ng-wizard-error .ng-wizard-error-message pre{display:inline-block;border-radius:3px;background-color:rgba(218,215,197,.4);color:#4d4d4d;padding:15px}"]}]}],"members":{"error":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"ng-wizard-navigation","template":"<div class=\"ng-wizard-navigation-container\">\n  <nav class=\"ng-wizard-navigation\">\n    <ul class=\"ng-wizard-navigation-list\">\n      <li *ngFor=\"let stepData of stepData$ | async\" class=\"ng-wizard-navigation-list-item\" (click)=\"goToStep(stepData);\">\n        <div *ngIf=\"stepData?.order < currentStepData?.order\"\n             [ngClass]=\"{\n               'ng-wizard-navigation-link': !currentStepData?.options.disableNavigation,\n               'ng-wizard-navigation-disabled': currentStepData?.options.disableNavigation\n             }\">\n          <span [innerHTML]=\"stepData.options.icon || wizardOptions.navBar.icons.previous\" class=\"ng-wizard-navigation-icon\"></span>\n          <span class=\"ng-wizard-navigation-label\">\n            {{ stepData.options.title }}\n          </span>\n        </div>\n\n        <div\n          *ngIf=\"stepData?.order === currentStepData?.order\"\n          class=\"ng-wizard-navigation-active\">\n          <span [innerHTML]=\"stepData.options.icon || wizardOptions.navBar.icons.current\" class=\"ng-wizard-navigation-icon\"></span>\n          <span class=\"ng-wizard-navigation-label\">\n            {{ stepData.options.title }}\n          </span>\n        </div>\n\n        <div *ngIf=\"stepData?.order > currentStepData?.order\"\n             class=\"ng-wizard-navigation-disabled\">\n          <span [innerHTML]=\"stepData.options.icon || wizardOptions.navBar.icons.next\" class=\"ng-wizard-navigation-icon\"></span>\n          <span class=\"ng-wizard-navigation-label\">\n            {{ stepData.options.title }}\n          </span>\n        </div>\n      </li>\n    </ul>\n  </nav>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"NgWizardService"}]}],"ngOnInit":[{"__symbolic":"method"}],"goToStep":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"ng-wizard-buttons","template":"<div class=\"ng-wizard-buttons-container\">\n  <div *ngIf=\"currentStepData$ | async as currentStepData\" class=\"ng-wizard-buttons\">\n    <button *ngIf=\"currentStepData.options.buttons?.extra\"\n            (click)=\"goToPath(currentStepData.options.buttons?.extra.path)\"\n            class=\"ng-wizard-button-extra\">\n      <span\n        [innerHTML]=\"currentStepData.options.buttons.extra.label\"\n        class=\"ng-wizard-button-label\"></span>\n    </button>\n    <button *ngIf=\"currentStepData.previousStep && !currentStepData.options.buttons?.previous?.hidden\"\n            (click)=\"goToPreviousStep()\"\n            class=\"ng-wizard-button-previous\">\n      <span\n        [innerHTML]=\"currentStepData.options.buttons?.previous?.label || wizardOptions.buttons.previous.label\"\n        class=\"ng-wizard-button-label\"></span>\n    </button>\n    <button *ngIf=\"currentStepData.nextStep && !currentStepData.options.buttons?.next?.hidden\"\n            (click)=\"goToNextStep()\"\n            class=\"ng-wizard-button-next\">\n      <span\n        [innerHTML]=\"currentStepData.options.buttons?.next?.label || wizardOptions.buttons.next.label\"\n        class=\"ng-wizard-button-label\"></span>\n    </button>\n  </div>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"NgWizardService"}]}],"ngOnInit":[{"__symbolic":"method"}],"goToNextStep":[{"__symbolic":"method"}],"goToPreviousStep":[{"__symbolic":"method"}],"goToPath":[{"__symbolic":"method"}]}}},"origins":{"NgWizardComponent":"./lib/ng-wizard.component","NgWizardModule":"./lib/ng-wizard.module","NgWizardStep":"./lib/ng-wizard-step/ng-wizard-step","NgWizardService":"./lib/ng-wizard.service","ɵa":"./lib/ng-wizard-error/ng-wizard-error.component","ɵb":"./lib/ng-wizard-navigation/ng-wizard-navigation.component","ɵc":"./lib/ng-wizard-buttons/ng-wizard-buttons.component"},"importAs":"@cmdap/ng-wizard"}