EQ: add texts and stepper component

my-workspace/projects/sae-lib/sae-stepper/sae-stepper.html

@@ -0,0 +1 @@
+<p>sae-stepper works!</p>

my-workspace/projects/sae-lib/sae-stepper/sae-stepper.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SaeStepper } from './sae-stepper';
+
+describe('SaeStepper', () => {
+  let component: SaeStepper;
+  let fixture: ComponentFixture<SaeStepper>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SaeStepper]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SaeStepper);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

my-workspace/projects/sae-lib/sae-stepper/sae-stepper.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sae-sae-stepper',
+  imports: [],
+  templateUrl: './sae-stepper.html',
+  styleUrl: './sae-stepper.css'
+})
+export class SaeStepper {
+
+}

my-workspace/projects/sae-lib/stepper/stepper.html

@@ -0,0 +1,7 @@
+<div class="stepper">
+  @for (ii of stepArray; track ii) {
+    <div class="step {{ currentStep >= ii ? 'is-active' : 'is-inactive'}}">
+      {{ ii }}
+    </div>
+  }
+</div>

my-workspace/projects/sae-lib/stepper/stepper.scss

@@ -0,0 +1,17 @@
+:host {
+  .step {
+    border-radius: 1px solid grey;
+    padding: 1rem;
+    background: white;
+
+    &.is-active {
+      color: black;
+      border-color: blue;
+    }
+
+    &.is-inactive {
+      background: grey;
+      color: white;
+    }
+  }
+}

my-workspace/projects/sae-lib/stepper/stepper.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Stepper } from './stepper';
+
+describe('Stepper', () => {
+  let component: Stepper;
+  let fixture: ComponentFixture<Stepper>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Stepper]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Stepper);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

my-workspace/projects/sae-lib/stepper/stepper.ts

@@ -0,0 +1,30 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {JsonPipe} from '@angular/common';
+
+@Component({
+  selector: 'sae-stepper',
+  imports: [
+    JsonPipe
+  ],
+  templateUrl: './stepper.html',
+  styleUrl: './stepper.scss'
+})
+export class Stepper {
+  @Input() currentStep: number = 1;
+  @Input() minStep: number = 1;
+  @Input() maxStep: number = 3;
+  @Input() stepArray: Array<number> = [1, 2, 3];
+  @Output() changedStep: EventEmitter<any> = new EventEmitter();
+
+  constructor() {
+    this.stepArray = []
+    for (let ii = this.currentStep; ii < this.maxStep; ii++) {
+
+      this.stepArray.push(ii)
+    }
+  }
+
+  onClickStep(newValue: number) {
+    this.changedStep.emit(newValue)
+  }
+}