feat:🎸 move button into a shared part

ftx-demo/src/lib/components/contentSteps/infoUser/info-user.component.ts

@@ -2,15 +2,14 @@ import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import {
-  ButtonComponent,
   FormControlEntityComponent,
   MultipleInputComponent,
   PatchFormGroupValueDirective,
   TypeConstantEnum,
   TypePattern,
 } from 'ngx-ftx-forms';
 import { FtxFtmComponent } from 'ngx-ftm';
-import { DataFormBuilder } from 'ngx-ftx-shared';
+import { ButtonComponent, DataFormBuilder } from 'ngx-ftx-shared';
 
 @Component({
   selector: 'info-user',

ftx-demo/src/lib/components/contentSteps/reserveBook/reserve-book.component.ts

@@ -3,17 +3,20 @@ import { Component, inject, OnInit } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import {
-  ButtonComponent,
   FormControlEntityComponent,
   FtxFormsComponent,
   GenerateFormBuilderService,
   MultipleInputComponent,
   TypeConstantEnum,
   TypePattern,
 } from 'ngx-ftx-forms';
-import { DataFormBuilder } from 'ngx-ftx-shared';
+import {
+  formValueChangeReserve,
+  selectReserveEntities,
+  ButtonComponent,
+  DataFormBuilder,
+} from 'ngx-ftx-shared';
 import { debounceTime, shareReplay, tap, using } from 'rxjs';
-import { formValueChangeReserve, selectReserveEntities } from 'ngx-ftx-shared';
 import { StepperService } from '../../services/stepper.service';
 
 @Component({

ftx-demo/src/lib/components/contentSteps/spendMoney/spend-money.component.ts

@@ -3,12 +3,15 @@ import { Component, inject, TemplateRef, ViewChild } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatSelectModule } from '@angular/material/select';
 import {
-  ButtonComponent,
   GenerateFormBuilderService,
   TypeConstantEnum,
   TypePattern,
 } from 'ngx-ftx-forms';
-import { DataFormBuilder, SivanInputComponent } from 'ngx-ftx-shared';
+import {
+  ButtonComponent,
+  DataFormBuilder,
+  SivanInputComponent,
+} from 'ngx-ftx-shared';
 
 @Component({
   selector: 'spend-money',

ftx-demo/src/lib/components/stepper-steps/stepper-steps.component.ts

@@ -23,10 +23,15 @@ import {
   tap,
 } from 'rxjs';
 import { StepperService } from '../services/stepper.service';
-import { ButtonComponent, FormBadgeComponent } from 'ngx-ftx-forms';
-import { FormStepper, selectStepsEntities, Step } from 'ngx-ftx-shared';
+import { FormBadgeComponent } from 'ngx-ftx-forms';
+import {
+  GenerativeService,
+  ButtonComponent,
+  FormStepper,
+  selectStepsEntities,
+  Step,
+} from 'ngx-ftx-shared';
 import { RenderYouDirective } from 'ngx-fts-tooltip';
-import { GenerativeService } from 'ngx-ftx-shared';
 
 @Component({
   selector: 'stepper-steps',

ftx-demo/src/lib/ftx-demo/demo.routing.ts

@@ -1,6 +1,15 @@
 import { NavigationEnd, Route, Router } from '@angular/router';
 import { inject } from '@angular/core';
-import { catchError, filter, map, of, tap } from 'rxjs';
+import {
+  catchError,
+  debounceTime,
+  filter,
+  interval,
+  map,
+  of,
+  startWith,
+  tap,
+} from 'rxjs';
 import { StepperService } from '../components/services/stepper.service';
 
 export const demoRouting: Route[] = [
@@ -65,9 +74,25 @@ export const demoRouting: Route[] = [
   {
     path: 'revolut',
     loadComponent: () =>
-      import('./../components/stepper/stepper.component').then(
-        (c) => c.StepperComponent
-      ),
+      import('ngx-ftx-shared').then((c) => c.ProgressComponent),
+    data: {
+      actions: [
+        {
+          disabled: interval(1500).pipe(
+            map((v) => v % 2 === 0),
+            startWith(true)
+          ),
+          name: 'Continue',
+        },
+        {
+          disabled: interval(2500).pipe(
+            map((v) => v % 2 === 0),
+            startWith(false)
+          ),
+          name: 'Has Done ',
+        },
+      ],
+    },
   },
   {
     path: '**',

ftx-forms/src/lib/ftx-forms/ftx-forms.component.ts

@@ -14,9 +14,12 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms';
 import { FormControlEntityComponent } from './components';
-import { ButtonComponent } from './shared';
 import { GenerateFormBuilderService } from './service';
-import { DataFormBuilder, GenerativeService } from 'ngx-ftx-shared';
+import {
+  ButtonComponent,
+  DataFormBuilder,
+  GenerativeService,
+} from 'ngx-ftx-shared';
 
 @Component({
   selector: 'ngx-ftx-forms',

ftx-forms/src/lib/ftx-forms/shared/index.ts

@@ -1,2 +1 @@
-export { ButtonComponent } from './button/button.component';
 export { MultipleInputComponent } from './multiple-input/multiple-input.component';

ftx-ftm/src/lib/ftx-ftm/ftx-ftm.component.ts

@@ -19,8 +19,9 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms';
 import { Store } from '@ngrx/store';
-import { ButtonComponent, GenerateFormBuilderService } from 'ngx-ftx-forms';
+import { GenerateFormBuilderService } from 'ngx-ftx-forms';
 import {
+  ButtonComponent,
   DataFormBuilder,
   FirstUpperCasePipe,
   GenerativeService,

ftx-sivan-shared/src/lib/components/index.ts

@@ -1,3 +1,5 @@
 export { SivanInputComponent } from './input/sivan-input.component';
 export { SharedInputComponent } from './sharedInput/shared-input.component';
 export { ToggleComponent } from './toogle/toggle.component';
+export { ProgressComponent } from './progress/progress.component';
+export { ButtonComponent } from './button/button.component';

ftx-sivan-shared/src/lib/components/progress/progress.component.html

@@ -1,8 +1,25 @@
-<div data-test="sivan-shared-progress">
-  <div>
-    <ng-container *ngFor="let config of configs">
-      <div data-test="sivan-shared-progress-entities"></div>
-    </ng-container>
+<div data-test="sivan-shared-progress" class="progress-wrapper">
+  <div class="progress-wrapper-content">
+    <router-outlet></router-outlet>
+  </div>
+  <div class="progress-wrapper-bar" [ngClass]="{ 'justify-center': !configs }">
+    <div class="flex flex-1" *ngIf="configs">
+      <ng-container *ngFor="let config of configs">
+        <div data-test="sivan-shared-progress-entities">
+          <mat-icon [svgIcon]="config.icon"> </mat-icon>
+        </div>
+      </ng-container>
+    </div>
+    <div class="gap-2 flex">
+      <ng-container *ngFor="let action of actions">
+        <ngx-button-component
+          data-test="sivan-shared-progress-actions"
+          roundedFull="rounded-md"
+          [disable]="action.disabled | async"
+        >
+          {{ action.name }}
+        </ngx-button-component>
+      </ng-container>
+    </div>
   </div>
-  <div data-test="sivan-shared-progress-actions"></div>
 </div>

ftx-sivan-shared/src/lib/components/progress/progress.component.scss

@@ -0,0 +1,11 @@
+.progress-wrapper {
+  &-content {
+    width: 100%;
+    height: calc(100vh - 3rem);
+  }
+  &-bar {
+    @apply flex items-center px-2 bg-green-50;
+    width: 100%;
+    height: 3rem;
+  }
+}

ftx-sivan-shared/src/lib/components/progress/progress.component.spec.ts

@@ -1,22 +1,31 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ProgressComponent } from './progress.component';
 import { ActivatedRoute } from '@angular/router';
-import { NumberEnum, TWO } from 'ngx-ftx-shared';
+import { NumberEnum, ONE, TWO } from 'ngx-ftx-shared';
+import { BehaviorSubject } from 'rxjs';
+import { MatIconModule } from '@angular/material/icon';
+import { IconCoreModule } from 'ngx-liburg-icon';
 
 describe('ProgressComponent', () => {
   let component: ProgressComponent;
   let fixture: ComponentFixture<ProgressComponent>;
   let activatedSpy: jest.SpyInstance<ActivatedRoute>;
+  const disableSpy = new BehaviorSubject(true);
+  const notDisableSpy = new BehaviorSubject(true);
   beforeEach(async () => {
     activatedSpy = {
       snapshot: {
         data: {
           config: [{ icon: 'fa_solid:RO' }, { icon: 'fa_solid:CR' }],
+          actions: [
+            { disable: disableSpy.asObservable(), name: 'Pause' },
+            { disable: notDisableSpy.asObservable(), name: 'Continue' },
+          ],
         } as unknown,
       },
     } as ActivatedRoute as never;
     await TestBed.configureTestingModule({
-      imports: [ProgressComponent],
+      imports: [ProgressComponent, MatIconModule, IconCoreModule],
       providers: [
         {
           provide: ActivatedRoute,
@@ -38,14 +47,20 @@ describe('ProgressComponent', () => {
     const wrapper: HTMLDivElement = fixture.nativeElement.querySelector(
       '[data-test="sivan-shared-progress"]'
     );
-    fixture.detectChanges();
     expect(wrapper.children.length).toEqual(TWO);
   });
   it('should check if generate correct entities', () => {
     const wrapper: HTMLDivElement[] = fixture.nativeElement.querySelectorAll(
       '[data-test="sivan-shared-progress-entities"]'
     );
-    fixture.detectChanges();
     expect(wrapper.length).toEqual(TWO);
   });
+  describe('should assert action', () => {
+    it('count', () => {
+      const wrapper: HTMLDivElement[] = fixture.nativeElement.querySelectorAll(
+        '[data-test="sivan-shared-progress-actions"]'
+      );
+      expect(wrapper.length).toEqual(TWO);
+    });
+  });
 });

ftx-sivan-shared/src/lib/components/progress/progress.component.ts

@@ -1,13 +1,16 @@
-import { Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, RouterOutlet } from '@angular/router';
+import { MatIconModule } from '@angular/material/icon';
+import { ButtonComponent } from '../button/button.component';
 
 @Component({
   selector: 'sivan-progress',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, MatIconModule, RouterOutlet, ButtonComponent],
   templateUrl: './progress.component.html',
   styleUrls: ['./progress.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProgressComponent {
   /**
@@ -17,4 +20,5 @@ export class ProgressComponent {
   private _activateRoute = inject(ActivatedRoute);
 
   configs = this._activateRoute.snapshot.data['config'];
+  actions = this._activateRoute.snapshot.data['actions'];
 }