Fixed SASS warnings, use calc() for arithmetics

angular.json

@@ -37,9 +37,81 @@
           }
         }
       }
+    },
+    "archwizard-test": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        },
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "root": "src/app",
+      "sourceRoot": "src/app",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/archwizard-test",
+            "index": "src/app/index.html",
+            "main": "src/app/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+            ],
+            "styles": [
+              "dist/angular-archwizard/styles/archwizard.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "archwizard-test:build:production"
+            },
+            "development": {
+              "browserTarget": "archwizard-test:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
     }
   },
   "cli": {
     "analytics": false
-  }
-}
+  },
+  "defaultProject": "angular-archwizard"
+}

ng-package.json

@@ -1,6 +1,6 @@
 {
   "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "./dist",
+  "dest": "./dist/angular-archwizard",
   "assets": [
     "./styles/archwizard.scss"
   ],

package.json

@@ -1,19 +1,22 @@
 {
-  "name": "angular-archwizard",
-  "version": "8.0.0-develop",
+  "name": "@achimha/angular-archwizard",
+  "version": "14.0.1",
   "license": "MIT",
-  "description": "An Angular 9+ module containing a wizard component and its supporting components and directives",
-  "homepage": "https://github.com/madoar/angular-archwizard",
+  "description": "An Angular 14+ module containing a wizard component and its supporting components and directives",
+  "homepage": "https://github.com/achimha/angular-archwizard",
   "author": {
     "name": "Marc Arndt",
     "email": "[email protected]"
   },
+  "peerDependencies": {
+    "@angular/core": ">=14 <= 16"
+  },
   "repository": {
     "type": "git",
-    "url": "https://github.com/madoar/angular-archwizard"
+    "url": "https://github.com/achimha/angular-archwizard"
   },
   "bugs": {
-    "url": "https://github.com/madoar/angular-archwizard/issues"
+    "url": "https://github.com/achimha/angular-archwizard/issues"
   },
   "keywords": [
     "angular",
@@ -38,12 +41,13 @@
     "start": "ng serve",
     "build": "npm run build-js && npm run extract-scss-variables && npm run build-css",
     "build-js": "ng build",
-    "extract-scss-variables": "extract-scss-variables ./dist/styles/archwizard.scss ./dist/styles/variables.scss",
-    "build-css": "sass ./dist/styles/archwizard.scss ./dist/styles/archwizard.css",
+    "extract-scss-variables": "extract-scss-variables ./dist/angular-archwizard/styles/archwizard.scss ./dist/angular-archwizard/styles/variables.scss",
+    "build-css": "sass ./dist/angular-archwizard/styles/archwizard.scss ./dist/angular-archwizard/styles/archwizard.css",
     "test": "ng test",
     "coverage": "ng test --no-watch --code-coverage",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "publish": "npm publish dist --access public"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^14.2.10",
@@ -60,6 +64,7 @@
     "@types/jasmine": "~3.6.0",
     "@types/node": "^18.11.18",
     "codelyzer": "^6.0.2",
+    "eslint": "^1.10.3",
     "jasmine-core": "~4.5.0",
     "jasmine-spec-reporter": "~7.0.0",
     "karma": "~6.4.1",
@@ -75,11 +80,9 @@
     "rxjs": "~7.8.0",
     "sass": "^1.29.0",
     "ts-node": "~9.0.0",
-    "tslint": "~6.1.0",
     "typescript": "~4.6.2",
-    "zone.js": "~0.12.0"
-  },
-  "dependencies": {
+    "zone.js": "~0.12.0",
+    "@types/estree": "^1.0.1",
     "tslib": "^2.4.1"
   }
-}
+}

src/app/app.component.html

@@ -0,0 +1,42 @@
+<h1>Angular Archwizard Test</h1>
+
+<aw-wizard>
+  <aw-wizard-step stepTitle="Start">
+    <p>This wizard blabla</p>
+
+    <button type="button" class="btn btn-primary float-end ms-1" awNextStep>
+      Next
+    </button>
+    <button type="button" class="btn btn-primary float-end">
+      Cancel
+    </button>
+  </aw-wizard-step>
+
+  <aw-wizard-step stepTitle="Second step">
+    <p>Blabla second step</p>
+
+    <button type="button" class="btn btn-primary" awPreviousStep>
+      Back
+    </button>
+    <button type="button" class="btn btn-primary float-end ms-1" awNextStep>
+      Next
+    </button>
+    <button type="button" class="btn btn-primary float-end">
+      Cancel
+    </button>
+  </aw-wizard-step>
+
+  <aw-wizard-step stepTitle='Last step'>
+
+    <button type="button" class="btn btn-primary" awPreviousStep>
+      Back
+    </button>
+    <button type="button" class="btn btn-primary float-end ms-1">
+      Finish
+    </button>
+    <button type="button" class="btn btn-primary float-end">
+      Cancel
+    </button>
+  </aw-wizard-step>
+
+</aw-wizard>

src/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'wizard-test',
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+
+}

src/app/app.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { AppComponent } from './app.component';
+import { BrowserModule } from '@angular/platform-browser';
+import { ArchwizardModule } from 'angular-archwizard';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    ArchwizardModule
+  ],
+  providers: [
+  ],
+  bootstrap: [
+    AppComponent
+  ]
+})
+export class AppModule {
+}

src/app/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Angular 13</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+<wizard-test></wizard-test>
+</body>
+</html>

src/app/main.ts

@@ -0,0 +1,6 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
+import 'zone.js';
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

src/lib/components/wizard-navigation-bar.component.ts

@@ -1,7 +1,7 @@
-import { Component, Input } from '@angular/core';
+import { Component, Directive, Inject, Input } from '@angular/core';
 import { WizardCompletionStep } from '../util/wizard-completion-step.interface';
 import { WizardStep } from '../util/wizard-step.interface';
-import { WizardComponent } from './wizard.component';
+import { WizardBase } from '../util/wizard.interface';
 
 /**
  * The `aw-wizard-navigation-bar` component contains the navigation bar inside a [[WizardComponent]].
@@ -26,7 +26,7 @@ export class WizardNavigationBarComponent {
    *
    * @param wizard The state the wizard currently resides in
    */
-  constructor(public wizard: WizardComponent) {
+  constructor(public wizard: WizardBase) {
   }
 
   /**

src/lib/components/wizard.component.ts

@@ -5,12 +5,13 @@ import {
   HostBinding,
   Input,
   QueryList,
-  EventEmitter,
+  EventEmitter
 } from '@angular/core';
 import {NavigationMode} from '../navigation/navigation-mode.interface';
 import {WizardStep} from '../util/wizard-step.interface';
 import {MovingDirection} from '../util/moving-direction.enum';
 import {ConfigurableNavigationMode} from '../navigation/configurable-navigation-mode';
+import { WizardBase } from '../util/wizard.interface';
 
 /**
  * The `aw-wizard` component defines the root component of a wizard.
@@ -50,8 +51,11 @@ import {ConfigurableNavigationMode} from '../navigation/configurable-navigation-
 @Component({
   selector: 'aw-wizard',
   templateUrl: 'wizard.component.html',
+  providers: [
+    { provide: WizardBase, useExisting: WizardComponent }
+  ]
 })
-export class WizardComponent implements AfterContentInit {
+export class WizardComponent implements WizardBase, AfterContentInit {
   /**
    * A QueryList containing all [[WizardStep]]s inside this wizard
    */

src/lib/directives/go-to-step.directive.ts

@@ -1,10 +1,10 @@
-import { Directive, EventEmitter, HostListener, Input, Optional, Output } from '@angular/core';
-import { NavigationMode } from '../navigation/navigation-mode.interface';
+import { Directive, EventEmitter, HostListener, Inject, InjectionToken, Input, Optional, Output } from '@angular/core';
 import { isStepId, StepId } from '../util/step-id.interface';
 import { isStepIndex, StepIndex } from '../util/step-index.interface';
 import { isStepOffset, StepOffset } from '../util/step-offset.interface';
 import { WizardStep } from '../util/wizard-step.interface';
-import { WizardComponent } from '../components/wizard.component';
+import { WizardBase } from '../util/wizard.interface';
+
 
 /**
  * The `awGoToStep` directive can be used to navigate to a given step.
@@ -70,7 +70,7 @@ export class GoToStepDirective {
    * @param wizard The wizard component
    * @param wizardStep The wizard step, which contains this [[GoToStepDirective]]
    */
-  constructor(private wizard: WizardComponent, @Optional() private wizardStep: WizardStep) {
+  constructor(private wizard: WizardBase, @Optional() private wizardStep: WizardStep) {
   }
 
   /**

src/lib/navigation/navigation-mode.interface.ts

@@ -1,5 +1,5 @@
 import {EventEmitter} from '@angular/core';
-import {WizardComponent} from '../components/wizard.component';
+import {WizardBase} from '../util/wizard.interface';
 
 /**
  * An interface containing the basic functionality, which must be provided by a navigation mode.
@@ -21,7 +21,7 @@ export interface NavigationMode {
    * @param destinationIndex The index of the destination step
    * @returns A [[Promise]] containing `true`, if the destination step can be transitioned to and false otherwise
    */
-  canGoToStep(wizard: WizardComponent, destinationIndex: number): Promise<boolean>;
+  canGoToStep(wizard: WizardBase, destinationIndex: number): Promise<boolean>;
 
   /**
    * Tries to transition to the wizard step, as denoted by the given destination index.
@@ -35,7 +35,7 @@ export interface NavigationMode {
    * @param postFinalize An event emitter, to be called after the step has been transitioned
    */
   goToStep(
-    wizard: WizardComponent,
+    wizard: WizardBase,
     destinationIndex: number,
     preFinalize?: EventEmitter<void>,
     postFinalize?: EventEmitter<void>): void;
@@ -47,12 +47,12 @@ export interface NavigationMode {
    * @param destinationIndex The index of the destination step
    * @returns True if the step can be navigated to, false otherwise
    */
-  isNavigable(wizard: WizardComponent, destinationIndex: number): boolean;
+  isNavigable(wizard: WizardBase, destinationIndex: number): boolean;
 
   /**
    * Resets the state of this wizard.
    *
    * @param wizard The wizard component to operate on
    */
-  reset(wizard: WizardComponent): void;
+  reset(wizard: WizardBase): void;
 }

src/lib/util/wizard.interface.ts

@@ -0,0 +1,14 @@
+import { EventEmitter, Injectable } from '@angular/core';
+import { WizardStep } from './wizard-step.interface';
+
+@Injectable()
+export abstract class WizardBase {
+  public abstract navBarDirection: string;
+  public abstract get wizardSteps(): WizardStep[];
+  public abstract disableNavigationBar: boolean;
+  public abstract get completed(): boolean;
+  public abstract isNavigable(destinationIndex: number): boolean;
+  public abstract getIndexOfStepWithId(stepId: string): number;
+  public abstract getIndexOfStep(step: WizardStep): number;
+  public abstract goToStep(destinationIndex: number, preFinalize?: EventEmitter<void>, postFinalize?: EventEmitter<void>): void;
+}