DEV: fixes for sonarqube errors and responsive design

.stylelintrc.json

@@ -41,7 +41,8 @@
                   "mixin",
                   "return",
                   "warn",
-                  "while"
+                  "while",
+                  "use"
               ]
           }
       ]

src/app/core/layout/wallet-layout/wallet-layout-header/wallet-layout-header.component.scss

@@ -1,34 +1,35 @@
 @use '/src/template' as temp;
 @use '/src/layout-breakpoint' as points;
+
 :host {
-  width: inherit;
-  height: 5rem;
-  border-bottom: 1px;
-  border-color: map-get(map-get(map-get(temp.$palette, general), divider), dark);
-  border-style: solid;
-  border-top: none;
-  display: flex;
-  align-items: center;
-  img {
-    left: temp.$left;
-    position: relative;
-    padding: temp.$spaceBasic;
-    cursor: pointer;
-  }
+    align-items: center;
+    border-bottom: 1px;
+    border-color: map-get(map-get(map-get(temp.$palette, general), divider), dark);
+    border-style: solid;
+    border-top: none;
+    display: flex;
+    height: 5rem;
+    width: inherit;
 
-  @media (max-width: map-get(points.$breakpoints, xs)) and  (min-width: map-get(points.$breakpoints, sm)){
     img {
-      left: 3%;
+        cursor: pointer;
+        left: temp.$left;
+        padding: temp.$spaceBasic;
+        position: relative;
     }
-  }
-  @media (max-width: map-get(points.$breakpoints, sm)) {
-    img {
-      left: 3%;
+    @media (max-width: map-get(points.$breakpoints, xs)) and  (min-width: map-get(points.$breakpoints, sm)){
+        img {
+            left: 3%;
+        }
     }
-  }
-  @media (max-width: map-get(points.$breakpoints, md)) and (min-width: map-get(points.$breakpoints, sm)){
-    img {
-      left: 15%;
+    @media (max-width: map-get(points.$breakpoints, sm)) {
+        img {
+            left: 3%;
+        }
+    }
+    @media (max-width: map-get(points.$breakpoints, md)) and (min-width: map-get(points.$breakpoints, sm)){
+        img {
+            left: 15%;
+        }
     }
-  }
 }

src/app/core/layout/wallet-layout/wallet-layout.component.scss

@@ -1,29 +1,32 @@
 @use '/src/template' as temp;
 @use '/src/layout-breakpoint' as points;
+
 :host {
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  .body {
-    left: temp.$left;
-    position: relative;
-    width: fit-content;
-  }
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    width: 100vw;
 
-  @media (max-width: map-get(points.$breakpoints, xs)) and  (min-width: map-get(points.$breakpoints, sm)){
     .body {
-      left: 3%;
+        left: temp.$left;
+        position: relative;
+        width: fit-content;
     }
-  }
-  @media (max-width: map-get(points.$breakpoints, sm)) {
-    .body {
-      left: 3%;
+    @media (max-width: map-get(points.$breakpoints, xs)) and  (min-width: map-get(points.$breakpoints, sm)){
+        .body {
+            left: 3%;
+            width: 92%;
+        }
     }
-  }
-  @media (max-width: map-get(points.$breakpoints, md)) and (min-width: map-get(points.$breakpoints, sm)){
-    .body {
-      left: 15%;
+    @media (max-width: map-get(points.$breakpoints, sm)) {
+        .body {
+            left: 3%;
+            width: 92%;
+        }
+    }
+    @media (max-width: map-get(points.$breakpoints, md)) and (min-width: map-get(points.$breakpoints, sm)){
+        .body {
+            left: 15%;
+        }
     }
-  }
 }

src/app/features/home/components/home/home.component.html

@@ -1,5 +1,5 @@
 <vc-wallet-layout>
-  <div body class="container">
+  <div body class="container ">
     <h5 body-title >Choose an authentication method</h5>
     <vc-radio-group [options]="options" (choseEvent)="navigate($event)"></vc-radio-group>
     <vc-body-actions [actions]="actions" (clicked)="submit()"></vc-body-actions>

src/app/features/home/components/home/home.component.scss

@@ -1,4 +1,5 @@
 @use '/src/template' as temp;
+
 :host {
     .container {
         max-width: temp.$max-body-panel;

src/app/features/home/components/home/home.component.ts

@@ -47,7 +47,10 @@ export class HomeComponent implements OnInit {
 		} else if (choose === 'OID4VP_CBOR_Selectable') {
 			this.navPath = 'cbor-selectable/create';
 		}
-		this.actions.map((item) => item.disabled = false);
+		this.actions = [...this.actions].map((item) => {
+			item.disabled = false;
+			return item;
+		});
 	}
 	submit () {
 		if (this.navPath === '/presentation') {

src/app/features/presentation-definition/components/home/home.component.scss

@@ -1,8 +1,9 @@
 @use '/src/template' as temp;
+
 :host {
     .wrapper {
-      background-color: map-get(map-get(map-get(temp.$palette, general), bg), default);
-      padding: temp.$spaceBasic;
-      border-radius: 16px;
+        background-color: map-get(map-get(map-get(temp.$palette, general), bg), default);
+        border-radius: 16px;
+        padding: temp.$spaceBasic;
     }
 }

src/app/features/presentation-definition/components/home/home.component.ts

@@ -1,11 +1,11 @@
-import { ChangeDetectionStrategy, Component, ChangeDetectorRef, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
+import { ChangeDetectionStrategy, Component, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { takeUntil, filter } from 'rxjs/operators';
 import { PresentationDefinitionResponse } from '@core/models/presentation-definition-response';
 import { DataService } from '@app/core/services/data.service';
 import { NavigateService } from '@app/core/services/navigate.service';
 import { PresentationDefinitionService } from '@app/core/services/presentation-definition.service';
 import { NavigationEnd, Router } from '@angular/router';
-import { filter } from 'rxjs/operators';
 import { BodyAction } from '@app/shared/elements/body-actions/models/BodyAction';
 import { PRESENTATION_ACTIONS } from '@app/core/utils/pages-actions';
 import { ActionCode } from '@app/shared/elements/body-actions/models/ActionCode';
@@ -16,9 +16,9 @@ import { ActionCode } from '@app/shared/elements/body-actions/models/ActionCode'
 	styleUrls: ['./home.component.scss'],
 	changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class HomeComponent implements OnInit {
-
+export class HomeComponent implements OnInit, OnDestroy {
 
+	destroy$ = new Subject();
 	actions: BodyAction[] = PRESENTATION_ACTIONS;
 	requestCode = '';
 	presentationDefinition$!: Observable<PresentationDefinitionResponse>;
@@ -29,27 +29,28 @@ export class HomeComponent implements OnInit {
     private readonly navigateService: NavigateService,
     private readonly presentationDefinitionService: PresentationDefinitionService
 	) {}
+	ngOnDestroy (): void {
+		this.destroy$.next('');
+		this.destroy$.complete();
+	}
 	ngOnInit (): void {
+		this.dataService.presentationDefinitionRequest$.subscribe((code) => {
+			this.requestCode = code;
+			this.disableNextButton(code);
+		});
 		this.router.events
 			.pipe(
-				filter(event => event instanceof NavigationEnd )
+				takeUntil(this.destroy$),
+				filter((event): event is NavigationEnd => event instanceof NavigationEnd)
 			)
-			.subscribe(() => {
-				if (this.router.url.indexOf('create') > 0) {
+			.subscribe((event) => {
+				if (event.url.includes('presentation/create')) {
+					this.actions = PRESENTATION_ACTIONS;
+					this.requestCode = '';
+					this.disableNextButton(this.requestCode);
 					this.changeDetectorRef.detectChanges();
 				}
 			});
-		this.dataService.presentationDefinitionRequest$.subscribe((code) => {
-			this.requestCode = code;
-			this.actions.map((item: BodyAction) => {
-				if (code && item.code == ActionCode.NEXT) {
-					item.disabled = false;
-				} else if(item.code == ActionCode.NEXT) {
-					item.disabled = true;
-				}
-				return item;
-			});
-		});
 	}
 
 	runActions (data: BodyAction) {
@@ -74,6 +75,16 @@ export class HomeComponent implements OnInit {
 		}
 	}
 
+	private disableNextButton (code: string) {
+		[...this.actions].map((item: BodyAction) => {
+			if (code && item.code == ActionCode.NEXT) {
+				item.disabled = false;
+			} else if(item.code == ActionCode.NEXT) {
+				item.disabled = true;
+			}
+			return item;
+		});
+	}
 	private hideNextStep () {
 		this.actions = this.actions.filter((item: BodyAction) => item.code !== ActionCode.NEXT);
 	}

src/app/features/presentation-definition/components/presentation-request/presentation-request.component.scss

@@ -1,13 +1,15 @@
 @use '/src/template' as temp;
+
 :host {
     vc-editor {
-        max-width: temp.$max-body-width;
         max-height: temp.$max-body-height;
+        max-width: temp.$max-body-width;
         min-height: temp.$min-body-height;;
         min-width: temp.$min-body-height;;
     }
+
     .vc-box-display-error p {
-      color: map-get(map-get(temp.$palette, color), error);
-      font-style: italic;
-  }
+        color: map-get(map-get(temp.$palette, color), error);
+        font-style: italic;
+    }
 }

src/app/features/siop-custom/components/create-a-scenario/create-a-scenario.component.scss

@@ -1,65 +1,73 @@
 @use '/src/template' as temp;
 @use '/src//layout-breakpoint' as points;
+
 :host {
-  max-width: 40rem;
-  ::ng-deep {
-    .mat-expansion-panel {
-      padding: 0 !important;
-    }
+    max-width: 40rem;
+
+    ::ng-deep {
+        .mat-expansion-panel {
+            padding: 0 !important;
+        }
 
-  }
-  .mb {
-    margin-bottom: temp.$spaceBasic;
-  }
-  .creation {
-    display: flex;
-    flex-direction: column;
-    height: temp.$body-height;
-    overflow-y: auto;
-    .creation-header {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: baseline;
-      position: sticky;
-      top: 0;
-      z-index: 50;
-      background: temp.$backgroundDefault;
-      h3 {
-        letter-spacing: 0px;
-        text-decoration: none;
-        word-break: break-word;
-        overflow-wrap: break-word;
-        -webkit-font-smoothing: antialiased;
-        font-size: 16px;
-        line-height: 20px;
-        color: temp.$textDarkSecondary;
-      }
-      span {
-        color: temp.$textDarkSecondary;
-        padding-right: temp.$spaceBasic;
-      }
-    }
-    .controls {
-      display: flex;
-      flex-direction: row;
     }
-    .presentation-definition {
-      margin-top: 1rem;
+
+    .mb {
+        margin-bottom: temp.$spaceBasic;
     }
-  }
 
-  @media (max-width: map-get(points.$breakpoints, xs)) and  (min-width: map-get(points.$breakpoints, sm)){
     .creation {
-      width: temp.$body-width-xs;
-      height: 24.25rem;
+        display: flex;
+        flex-direction: column;
+        height: temp.$body-height;
+        overflow-y: auto;
+
+        .creation-header {
+            align-items: baseline;
+            background: temp.$backgroundDefault;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            position: sticky;
+            top: 0;
+            z-index: 50;
+
+            h3 {
+                color: temp.$textDarkSecondary;
+                font-size: 16px;
+                -webkit-font-smoothing: antialiased;
+                letter-spacing: 0;
+                line-height: 20px;
+                overflow-wrap: break-word;
+                text-decoration: none;
+                word-break: break-word;
+            }
+
+            span {
+                color: temp.$textDarkSecondary;
+                padding-right: temp.$spaceBasic;
+            }
+        }
+
+        .controls {
+            display: flex;
+            flex-direction: row;
+        }
+
+        .presentation-definition {
+            margin-top: 1rem;
+        }
     }
-  }
-  @media (max-width: map-get(points.$breakpoints, sm)) {
-    .creation {
-      width: temp.$body-width-sm;
-      height: 24.25rem;
+    @media (max-width: map-get(points.$breakpoints, xs)) and  (min-width: map-get(points.$breakpoints, sm)){
+        .creation {
+            height: 24.25rem;
+            width: temp.$body-width-xs;
+        }
+    }
+    @media (max-width: map-get(points.$breakpoints, sm)) {
+        .creation {
+            height: 24.25rem;
+            width: temp.$body-width-sm;
+        }
     }
-  }
 
 }