small fixes plan listing item, accessibility toggle service, dashboard. Plan editor add blueprint to required, on click next check validity and mark as touched

frontend/src/app/core/services/font-accessibility.service.ts

@@ -1,17 +1,16 @@
-import { Injectable, Signal, signal } from '@angular/core';
+import { computed, Injectable, Signal, signal } from '@angular/core';
 
 @Injectable()
 export class FontAccessibilityService {
 
     private _accessibleFontSignal = signal<boolean>(false);
-    get accessibleFontSignal(): Signal<boolean> {
+    public accessibleFontSignal = computed(() => this._accessibleFontSignal())
-        return this._accessibleFontSignal;
+
+    constructor() {
+        this._accessibleFontSignal.set(localStorage.getItem('largeText') === 'true');
     }
-
-    constructor() { }
-
     public isLargeText(): boolean {
-        return this.accessibleFontSignal();
+        return this._accessibleFontSignal();
     }
 
     public toggleFontSize(){

frontend/src/app/ui/dashboard/dashboard.component.html

@@ -172,7 +172,7 @@
                                     <mat-icon>close</mat-icon>
                                 </button>
 								<div class="d-flex flex-column align-items-center non-auth-title-container">
-									<h4 class="pt-4">{{'DASHBOARD.TITLE' | translate}}</h4>
+									<p class="dashboard-title pt-4">{{'DASHBOARD.TITLE' | translate}}</p>
 									<p class="col-auto app-info">{{'DASHBOARD.INFO-TEXT' | translate}}</p>
 								</div>
 								<div class="d-flex">

frontend/src/app/ui/dashboard/dashboard.component.scss

@@ -363,3 +363,7 @@ mat-tab-group.my-mat-tab .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-m
 	right: 0;
 	bottom: 0;
 }
+
+.dashboard-title {
+    font-size: 1.125rem; //h4
+}

frontend/src/app/ui/description/editor/description-editor.component.html

@@ -130,7 +130,7 @@
 							</div>
 						</div>
 
-						<div class="row mb-4">
+						<div class="row mt-auto">
 							<div class="col-12">
 								<div class="row mt-3 stepper-actions justify-content-center">
 									<div class="col-auto mb-1">

frontend/src/app/ui/description/editor/description-editor.component.scss

@@ -206,7 +206,7 @@
 
   .stepper-options {
     flex: 1;
-    max-height: calc(100vh - 32rem);
+    max-height: calc(100vh - 38rem);
     overflow-y: auto;
     .main-info {
       color: var(--dark-gray)94;

frontend/src/app/ui/description/editor/description-form/description-form.component.scss

@@ -15,7 +15,7 @@
 	letter-spacing: 0px;
 	color: var(--dark-gray);
 	opacity: 1;
-	margin: 3rem 0rem 3rem 0rem;
+	margin: 2rem 0rem 2rem 0rem;
 }
 
 .dynamic-form-editor {

frontend/src/app/ui/description/editor/description-form/visibility-rules/visibility-rules.service.ts

@@ -649,7 +649,7 @@ export class VisibilityRulesService {
 						for (let j = 0; j < propertyDefinitionFieldSet.items.length; j++) {
 							const definitionFieldSetItem = propertyDefinitionFieldSet.items[j];
 							const fieldKey = this.buildVisibilityKey(fieldSetEntity.id, definitionFieldSetItem.ordinal);
-							const isCurrentHidden = !this._isVisibleMap[fieldKey] ?? false;
+							const isCurrentHidden = !this._isVisibleMap[fieldKey];
 							isHidden = isHidden && isCurrentHidden;
 						}
 					}

frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.html

@@ -34,7 +34,7 @@
 			<span>.</span>
 			<span class="col">{{ 'PLAN-LISTING.GRANT' | translate }}: {{referenceService.getReferencesForTypesFirstSafe(plan?.planReferences, [this.referenceTypeService.getGrantReferenceType()])?.reference?.label}}</span>
 		</div>
-		<div class="col-auto plan-description-descriptions-title">{{'PLAN-LISTING.CONTAINED-DESCRIPTIONS' | translate}}: ({{ plan.descriptions?.length }})
+		<div class="col-auto plan-description-descriptions-title">{{'PLAN-LISTING.CONTAINED-DESCRIPTIONS' | translate}}: ({{ plan.descriptions?.length ?? 0 }})
 		</div>
 		<div *ngFor="let description of plan.descriptions; let i = index; let last = last" [ngClass]="{'pb-3': i === plan.descriptions?.length - 1}">
 			<div *ngIf="i < 3">

frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html

@@ -102,13 +102,16 @@
 							<label for="blueprintInput" class="heading2">{{'PLAN-EDITOR.FIELDS.BLUEPRINT' | translate}}&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></label>
 							<mat-form-field class="w-100">
 								<mat-label>{{'PLAN-EDITOR.FIELDS.BLUEPRINT' | translate}}</mat-label>
-								<app-single-auto-complete [id]="'blueprintInput'" [required]="false" [formControl]="formGroup.get('blueprint')" placeholder="{{'PLAN-EDITOR.PLACEHOLDER.BLUEPRINT' | translate}}" [configuration]="singleAutocompleteBlueprintConfiguration">
+								<app-single-auto-complete [id]="'blueprintInput'" required [formControl]="formGroup.get('blueprint')" placeholder="{{'PLAN-EDITOR.PLACEHOLDER.BLUEPRINT' | translate}}" [configuration]="singleAutocompleteBlueprintConfiguration">
 								</app-single-auto-complete>
+                                <mat-error *ngIf="formGroup.get('blueprint').hasError('required')">
+                                    {{'GENERAL.VALIDATION.REQUIRED' | translate}}
+                                </mat-error>
 							</mat-form-field>
 						</div>
 						<div class="row">
 							<div class="col-5">
-								<button mat-button class="rounded-btn secondary" [disabled]="!(formGroup.get('blueprint').value && formGroup.get('label').value)" (click)="selectBlueprint()">
+								<button mat-button class="rounded-btn secondary" (click)="selectBlueprint()">
                                     {{'PLAN-EDITOR.STEPPER.NEXT' | translate}}
                                 </button>
 							</div>

frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.ts

@@ -568,6 +568,10 @@ export class PlanEditorComponent extends BaseEditor<PlanEditorModel, Plan> imple
 	//
 	//
 	selectBlueprint() {
+        if(!(this.formGroup.get('blueprint').value && this.formGroup.get('label').value)){
+            this.formGroup.markAllAsTouched();
+            return;
+        }
 		this.planBlueprintService.getSingle(this.formGroup.get('blueprint').value, PlanEditorEntityResolver.blueprintLookupFields()).pipe(takeUntil(this._destroyed))
 			.subscribe(data => {
 				this.selectedBlueprint = data;