Pull request #1378: Release/patch 11.1.3

Merge in OUI/oblique from release/patch_11.1.3 to master

* commit '20f1825b73d8ec386bc5f9c27b0e87854f052cf0': (27 commits)
  chore(toolchain): release version 11.1.3
  chore(toolchain): update dependencies and refactor accordingly
  fix(oblique/material): adapt stepper error styling
  fix(sds/tabbed-page): make sure the selected tab has a new value each time the URL changes
  fix(sds/tabbed-page): get the selected tab again each time the route changes
  refactor(oblique/material): rename `$checked` into `checked$` in `checkbox.directive.ts`
  refactor(oblique/sticky): don't use `any`
  refactor(oblique/nested-form): don't use `any`
  refactor(oblique/input-clear): don't use `any`
  refactor(oblique/language): don't use `any`
  refactor(oblique/master-layout): don't use `any`
  refactor(oblique/http-interceptor): don't use `any`
  refactor(oblique/file-upload): avoid `on` prefix on output
  refactor(oblique/file-upload): don't use `any`
  refactor(oblique/error-messages): don't use `any`
  refactor(oblique/collapse): don't use `any`
  refactor(oblique/autocomplete): don't use `any`
  refactor(oblique/authentication): don't use `any`
  refactor(oblique/file-upload): remove `this: void`
  refactor(oblique/service-navigation): check `pamsAppID` on its setter
  ...

CHANGELOG.md

@@ -1,3 +1,11 @@
+# [11.1.3](https://github.com/oblique-bit/oblique/compare/11.1.2...11.1.3) (2024-05-24)
+
+## Bug Fixes
+
+- **autocomplete:** ensure no error is thrown in `onModelTouched()` ([02e853b1](https://github.com/oblique-bit/oblique/commit/02e853b173a4192fcbb6722d1b1ef1fa6c34e022))
+- **master-layout:** show white logo when `HighContrastMode` is activated ([b9ee4514](https://github.com/oblique-bit/oblique/commit/b9ee451430ec1305181cca1d6f6f934e40c238fd))
+- **material:** adapt stepper error styling ([71c7f43f](https://github.com/oblique-bit/oblique/commit/71c7f43fd891076c1277aef8ee4dc8a6821e6953))
+
 # [11.1.2](https://github.com/oblique-bit/oblique/compare/11.1.1...11.1.2) (2024-05-17)
 
 ## Bug Fixes

package.json

@@ -1,7 +1,7 @@
 {
   "title": "Oblique",
   "name": "oblique",
-  "version": "11.1.2",
+  "version": "11.1.3",
   "license": "MIT",
   "organization": {
     "name": "Federal Office of Information Technology, Systems and Telecommunication FOITT",
@@ -48,12 +48,12 @@
     "@angular/common": "^17.2.1",
     "@angular/compiler": "^17.2.1",
     "@angular/core": "^17.2.1",
-    "@angular/forms": "^17.3.9",
+    "@angular/forms": "^17.3.10",
     "@angular/material": "^17.2.0",
-    "@angular/material-moment-adapter": "^17.3.9",
+    "@angular/material-moment-adapter": "^17.3.10",
     "@angular/platform-browser": "^17.2.1",
-    "@angular/platform-browser-dynamic": "^17.3.9",
-    "@angular/router": "^17.3.9",
+    "@angular/platform-browser-dynamic": "^17.3.10",
+    "@angular/router": "^17.3.10",
     "@ngx-translate/core": "^15.0.0",
     "@popperjs/core": "^2.11.8",
     "ajv": "^8.13.0",
@@ -67,13 +67,13 @@
   },
   "devDependencies": {
     "@angular-builders/jest": "^17.0.3",
-    "@angular-devkit/build-angular": "^17.3.7",
+    "@angular-devkit/build-angular": "^17.3.8",
     "@angular-devkit/core": "^17.2.0",
     "@angular-eslint/eslint-plugin": "^17.1.1",
     "@angular-eslint/eslint-plugin-template": "^17.1.1",
-    "@angular-eslint/template-parser": "^17.4.1",
-    "@angular/cli": "^17.3.7",
-    "@angular/compiler-cli": "^17.3.9",
+    "@angular-eslint/template-parser": "^17.5.1",
+    "@angular/cli": "^17.3.8",
+    "@angular/compiler-cli": "^17.3.10",
     "@types/jest": "^29.5.12",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^20.12.12",
@@ -84,7 +84,7 @@
     "husky": "^9.0.11",
     "jest": "^29.7.0",
     "jest-sonar-reporter": "^2.0.0",
-    "lint-staged": "^15.2.2",
+    "lint-staged": "^15.2.4",
     "prettier": "^3.2.5",
     "stylelint": "^16.5.0",
     "stylelint-config-prettier-scss": "^1.0.0",

projects/oblique/package.json

@@ -38,7 +38,7 @@
     "rxjs": "^7.0.0"
   },
   "dependencies": {
-    "@angular-eslint/schematics": "^17.4.1",
+    "@angular-eslint/schematics": "^17.5.1",
     "@angular/cdk": "^17.0.0 || ^18.0.0",
     "@schematics/angular": "^17.0.5",
     "ansi-colors": "^4.1.3",

projects/oblique/src/lib/authentication/authentication.service.ts

@@ -7,7 +7,7 @@ import {ObIResourceAccessRoles, ObIResourceAccessToken} from './authentication.m
 export class ObAuthenticationService {
 	constructor(readonly oAuthService: OAuthService) {}
 
-	performLogin(additionalState?: string, params?: any): void {
+	performLogin(additionalState?: string, params?: object): void {
 		this.oAuthService.initLoginFlow(additionalState, params);
 	}
 

projects/oblique/src/lib/autocomplete/autocomplete.component.spec.ts

@@ -133,10 +133,6 @@ describe(ObAutocompleteComponent.name, () => {
 			it('should have hasGroupOptions with value false', () => {
 				expect(component.hasGroupOptions).toBe(false);
 			});
-
-			it('should throw error if onModelTouched has not been overwritten ', () => {
-				expect(component.onModelTouched).toThrowError('Method onModelTouched has not been overwritten by the ControlValueAccessor.');
-			});
 		});
 	});
 

projects/oblique/src/lib/autocomplete/autocomplete.component.ts

@@ -60,6 +60,7 @@ export class ObAutocompleteComponent implements OnChanges, ControlValueAccessor,
 	autocompleteInputControl = new FormControl('', {updateOn: 'change'});
 	filteredOptions$: Observable<(ObIAutocompleteInputOption | ObIAutocompleteInputOptionGroup)[]>;
 	hasGroupOptions = false;
+	onModelTouched: () => void;
 	private readonly unsubscribe = new Subject<void>();
 	private readonly unsubscribeOptions = new Subject<void>();
 	private readonly obAutocompleteTextToFindService = inject(ObAutocompleteTextToFindService);
@@ -83,14 +84,6 @@ export class ObAutocompleteComponent implements OnChanges, ControlValueAccessor,
 		}
 	}
 
-	/**
-	 * @remarks
-	 * This method must be overwritten by ControlValueAccessor, this is why an error is thrown by default.
-	 */
-	onModelTouched: () => void = () => {
-		throw Error('Method onModelTouched has not been overwritten by the ControlValueAccessor.');
-	};
-
 	/**
 	 * Write a new value to the element.
 	 */
@@ -107,7 +100,7 @@ export class ObAutocompleteComponent implements OnChanges, ControlValueAccessor,
 	 * Set the function to be called
 	 * when the control receives a change event.
 	 */
-	registerOnChange(fn: (v: any) => void): void {
+	registerOnChange(fn: (v: unknown) => void): void {
 		this.autocompleteInputControl.valueChanges.pipe(takeUntil(this.unsubscribe)).subscribe(value => fn(value));
 	}
 

projects/oblique/src/lib/breadcrumb/breadcrumb.component.ts

@@ -74,7 +74,7 @@ export class ObBreadcrumbComponent implements OnInit {
 
 	private createNextBreadcrumb(
 		route: ActivatedRoute,
-		next: ({label, url}: ObIBreadcrumb) => Observable<ObIBreadcrumb[]>,
+		next: (parameters: ObIBreadcrumb) => Observable<ObIBreadcrumb[]>,
 		url: string,
 		label: string,
 		pathSplitter: string[]

projects/oblique/src/lib/checkbox/checkbox.directive.ts

@@ -8,7 +8,7 @@ import {BehaviorSubject, Subject, takeUntil} from 'rxjs';
 	standalone: true
 })
 export class ObCheckboxDirective implements OnInit, OnDestroy {
-	private readonly $checked = new BehaviorSubject<boolean>(false);
+	private readonly checked$ = new BehaviorSubject<boolean>(false);
 	private readonly host: HTMLAnchorElement;
 	private readonly rowCheckedClass = 'ob-table-row-checked';
 	private readonly unsubscribe = new Subject<void>();
@@ -63,10 +63,10 @@ export class ObCheckboxDirective implements OnInit, OnDestroy {
 
 	private monitorForCheckedChanges(): void {
 		this.checkbox.change.pipe(takeUntil(this.unsubscribe)).subscribe(change => this.updateChecked(change.checked));
-		this.$checked.pipe(takeUntil(this.unsubscribe)).subscribe(checked => this.conditionallyAdjustCheckedClassOnTableRows(checked));
+		this.checked$.pipe(takeUntil(this.unsubscribe)).subscribe(checked => this.conditionallyAdjustCheckedClassOnTableRows(checked));
 	}
 
 	private updateChecked(checked: boolean): void {
-		this.$checked.next(checked);
+		this.checked$.next(checked);
 	}
 }

projects/oblique/src/lib/collapse/collapse.component.ts

@@ -57,8 +57,8 @@ export class ObCollapseComponent implements AfterViewInit, OnDestroy {
 
 	constructor(
 		@Optional() @Inject(OBLIQUE_COLLAPSE_ACTIVE) private isActive: boolean,
-		@Optional() @Inject(OBLIQUE_COLLAPSE_ICON_POSITION) iconPos: any, // NOTE, the real type will throw an error during build, should be fixed with Ivy
-		@Optional() @Inject(OBLIQUE_COLLAPSE_DURATION) animationSpeed: any // NOTE, the real type will throw an error during build, should be fixed with Ivy
+		@Optional() @Inject(OBLIQUE_COLLAPSE_ICON_POSITION) iconPos: 'left' | 'right' | 'justified' | 'none',
+		@Optional() @Inject(OBLIQUE_COLLAPSE_DURATION) animationSpeed: 'slow' | 'fast' | number
 	) {
 		this.isActive = !!this.isActive;
 		this.iconPosition = iconPos ?? this.iconPosition;

projects/oblique/src/lib/error-messages/error-messages.service.ts

@@ -3,7 +3,7 @@ import {NgControl} from '@angular/forms';
 
 @Injectable({providedIn: 'root'})
 export class ObErrorMessagesService {
-	createMessages(control: NgControl): {key: string; params: Record<string, any>}[] {
+	createMessages(control: NgControl): {key: string; params: Record<string, unknown>}[] {
 		return Object.keys(control.errors).map(key => {
 			const subkeys = Object.keys(control.errors[key]);
 			// If the subproperty is an object, it has to be the error

projects/oblique/src/lib/file-upload/drop-zone/accept-all.pipe.ts

@@ -5,8 +5,7 @@ import {Pipe, PipeTransform} from '@angular/core';
 	standalone: true
 })
 export class ObAcceptAllPipe implements PipeTransform {
-	// "this: void" is not a parameter but rather a typescript feature that indicates that the function don't use "this"
-	transform(this: void, allowedTypes: string[]): boolean {
+	transform(allowedTypes: string[]): boolean {
 		return !allowedTypes?.length || allowedTypes.includes('*');
 	}
 }

projects/oblique/src/lib/file-upload/drop-zone/drag-and-drop.directive.spec.ts

@@ -4,7 +4,7 @@ import {By} from '@angular/platform-browser';
 import {ObDragDropDirective} from './drag-and-drop.directive';
 
 @Component({
-	template: `<input obDragDrop (onFileDropped)="saveFiles($event)" />`
+	template: `<input obDragDrop (fileDropped)="saveFiles($event)" />`
 })
 class TestDropDirectiveComponent {
 	files;

projects/oblique/src/lib/file-upload/drop-zone/drag-and-drop.directive.ts

@@ -5,8 +5,7 @@ import {Directive, EventEmitter, HostBinding, HostListener, Output} from '@angul
 	standalone: true
 })
 export class ObDragDropDirective {
-	// eslint-disable-next-line  @angular-eslint/no-output-on-prefix
-	@Output() readonly onFileDropped = new EventEmitter<any>();
+	@Output() readonly fileDropped = new EventEmitter<FileList>();
 	@HostBinding('class.ob-dragging') private isDragging = false;
 
 	@HostListener('dragover', ['$event'])
@@ -29,7 +28,7 @@ export class ObDragDropDirective {
 		event.stopPropagation();
 		const {files} = event.dataTransfer;
 		if (files.length) {
-			this.onFileDropped.emit(files);
+			this.fileDropped.emit(files);
 			this.isDragging = false;
 		}
 	}

projects/oblique/src/lib/file-upload/drop-zone/ob-drop-zone.component.html

@@ -1,4 +1,4 @@
-<div obDragDrop tabindex="0" (click)="fileInput.click()" (keydown.enter)="fileInput.click()" (onFileDropped)="addFiles($event)">
+<div obDragDrop tabindex="0" (click)="fileInput.click()" (keydown.enter)="fileInput.click()" (fileDropped)="addFiles($event)">
 	<div class="ob-drop-zone-text">
 		<input
 			tabindex="-1"

projects/oblique/src/lib/file-upload/drop-zone/validation.service.ts

@@ -5,20 +5,24 @@ import {ObAcceptAllPipe} from './accept-all.pipe';
 
 @Injectable()
 export class ObValidationService {
-	private readonly areAllTypesAllowed = new ObAcceptAllPipe().transform;
+	private readonly areAllTypesAllowed = new ObAcceptAllPipe().transform.bind(this);
 
 	constructor(private readonly notification: ObNotificationService) {}
 
 	public filterInvalidFiles(fileOptions: ObIFileValidationOptions): File[] {
-		if (!fileOptions.accept) fileOptions.accept = ['*'];
+		if (!fileOptions.accept) {
+			fileOptions.accept = ['*'];
+		}
 		const dispatchedFiles: ObIFileValidation = this.dispatchFiles(fileOptions);
 
-		if (fileOptions.multiple)
+		if (fileOptions.multiple) {
 			this.notifyErrors('i18n.oblique.file-upload.error.overflow', {
 				ignoredFiles: dispatchedFiles.overflowing,
 				maxAmount: fileOptions.maxAmount
 			});
-		else this.notifyErrors('i18n.oblique.file-upload.error.single', {ignoredFiles: dispatchedFiles.overflowing});
+		} else {
+			this.notifyErrors('i18n.oblique.file-upload.error.single', {ignoredFiles: dispatchedFiles.overflowing});
+		}
 
 		this.notifyErrors('i18n.oblique.file-upload.error.type', {
 			ignoredFiles: dispatchedFiles.invalid,
@@ -48,7 +52,7 @@ export class ObValidationService {
 		);
 	}
 
-	private notifyErrors(message: string, parameters: {ignoredFiles: string[]; [key: string]: any}): void {
+	private notifyErrors(message: string, parameters: {ignoredFiles: string[]; [key: string]: unknown}): void {
 		if (parameters.ignoredFiles.length) {
 			const params = {
 				...parameters,

projects/oblique/src/lib/file-upload/file-upload.model.ts

@@ -19,7 +19,7 @@ export interface ObIFile {
 export interface ObIFileDescription {
 	name: string;
 
-	[key: string]: any;
+	[key: string]: unknown;
 }
 
 export interface ObIUploadEvent {

projects/oblique/src/lib/http-api-interceptor/http-api-interceptor.ts

@@ -24,7 +24,7 @@ export class ObHttpApiInterceptor implements HttpInterceptor {
 		@Inject(WINDOW) private readonly window: Window
 	) {}
 
-	intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+	intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
 		const obliqueRequest = this.broadcast();
 		const timer = this.setTimer();
 		this.activateSpinner(obliqueRequest.spinner, request.url);
@@ -64,7 +64,7 @@ export class ObHttpApiInterceptor implements HttpInterceptor {
 		return throwError(() => error);
 	}
 
-	private setupHeader(request: HttpRequest<any>): HttpRequest<any> {
+	private setupHeader(request: HttpRequest<unknown>): HttpRequest<unknown> {
 		return request.clone(this.isApiCall(request.url) ? {headers: request.headers.set('X-Requested-With', 'XMLHttpRequest')} : undefined);
 	}
 

projects/oblique/src/lib/input-clear/input-clear.directive.ts

@@ -12,7 +12,7 @@ import {WINDOW} from '../utilities';
 export class ObInputClearDirective implements OnInit {
 	@Input('obInputClear') control: AbstractControl | HTMLInputElement | NgModel;
 	@Input() focusOnClear = true;
-	@Input() datePickerRef: MatDatepicker<any>;
+	@Input() datePickerRef: MatDatepicker<unknown>;
 	// eslint-disable-next-line @angular-eslint/no-output-on-prefix
 	@Output() readonly onClear = new EventEmitter<MouseEvent>();
 	@HostBinding('class.ob-text-control-clear') cssClass = true;

projects/oblique/src/lib/language/language.service.ts

@@ -32,7 +32,7 @@ export class ObLanguageService {
 		}
 	}
 
-	setLocaleOnAdapter(adapter: DateAdapter<any>): void {
+	setLocaleOnAdapter(adapter: DateAdapter<unknown>): void {
 		if (this.locale$) {
 			this.locale$.subscribe(locale => adapter.setLocale(locale));
 		}

projects/oblique/src/lib/master-layout/master-layout-footer/master-layout-footer.component.ts

@@ -15,7 +15,7 @@ import {ObEMasterLayoutEventValues, ObIMasterLayoutEvent} from '../master-layout
 export class ObMasterLayoutFooterComponent implements OnDestroy {
 	home = this.config.homePageRoute;
 	isCustom = this.config.footer.isCustom;
-	@ContentChildren('obFooterLink') readonly templates: QueryList<TemplateRef<any>>;
+	@ContentChildren('obFooterLink') readonly templates: QueryList<TemplateRef<HTMLLinkElement>>;
 	@HostBinding('class.ob-logo-on-scroll') hasLogoOnScroll = this.config.footer.hasLogoOnScroll;
 	private readonly unsubscribe = new Subject<void>();
 

projects/oblique/src/lib/master-layout/master-layout-header/master-layout-header.component.ts

@@ -46,9 +46,9 @@ export class ObMasterLayoutHeaderComponent implements OnDestroy {
 	serviceNavigationConfig: ObIServiceNavigationConfig;
 	@Input() navigation: ObINavigationLink[];
 	@HostBinding('class.ob-master-layout-header-small') isSmall = this.masterLayout.header.isSmall;
-	@ContentChild('obHeaderLogo') readonly obLogo: TemplateRef<any>;
-	@ContentChildren('obHeaderControl') readonly templates: QueryList<TemplateRef<any>>;
-	@ContentChildren('obHeaderMobileControl') readonly mobileTemplates: QueryList<TemplateRef<any>>;
+	@ContentChild('obHeaderLogo') readonly obLogo: TemplateRef<unknown>;
+	@ContentChildren('obHeaderControl') readonly templates: QueryList<TemplateRef<unknown>>;
+	@ContentChildren('obHeaderMobileControl') readonly mobileTemplates: QueryList<TemplateRef<unknown>>;
 	@ViewChildren('headerControl') readonly headerControl: QueryList<ElementRef>;
 	@ViewChildren('headerMobileControl') readonly headerMobileControl: QueryList<ElementRef>;
 	private readonly unsubscribe = new Subject<void>();

projects/oblique/src/lib/master-layout/master-layout-navigation/navigation-link.model.ts

@@ -41,6 +41,7 @@ export class ObNavigationLink implements ObINavigationLink {
 			.toLowerCase()
 			.replace(/[^a-z0-9-]/g, '-')
 			.replace(/-{2,}/g, '-')
-			.replace(/^-|-$/g, '');
+			.replace(/^-/g, '')
+			.replace(/-$/g, '');
 	}
 }

projects/oblique/src/lib/master-layout/master-layout/master-layout.component.html

@@ -96,5 +96,9 @@ <h2>
 <div class="ob-off-canvas-backdrop" *ngIf="hasOffCanvas"></div>
 <ob-spinner [fixed]="true" />
 <ng-template #logo>
-	<img [alt]="'i18n.oblique.header.logo' | translate" ngSrc="assets/images/logo.svg" priority [height]="38" [width]="156" />
+	@if (hasHighContrast) {
+		<img [alt]="'i18n.oblique.header.logo' | translate" ngSrc="assets/images/logo-white.svg" priority [height]="38" [width]="156" />
+	} @else {
+		<img [alt]="'i18n.oblique.header.logo' | translate" ngSrc="assets/images/logo.svg" priority [height]="38" [width]="156" />
+	}
 </ng-template>