feat(app): bump dependencies

package.json

@@ -29,7 +29,7 @@
         "@angular/cli": "~16.0.2",
         "@angular/compiler-cli": "^16.0.0",
         "@angular/language-service": "~16.0.0",
-        "@compodoc/compodoc": "1.1.19",
+        "@compodoc/compodoc": "1.1.20",
         "@types/node": "~20.2.1",
         "ts-node": "~10.9.1",
         "tslint": "~6.1.3",

src/app/about/about.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, HostListener } from '@angular/core';
 
 import { EmptyService } from '../shared/services/empty.service';
+import { DoNothingDirective } from '../shared/directives/do-nothing.directive';
 
 /**
  * The about component
@@ -10,7 +11,8 @@ import { EmptyService } from '../shared/services/empty.service';
 @Component({
     selector: 'about',
     templateUrl: './about.component.html',
-    providers: [EmptyService]
+    providers: [EmptyService],
+    hostDirectives: [DoNothingDirective],
 })
 export class AboutComponent implements OnInit {
     ngOnInit() {}

src/app/list/todo/todo.component.ts

@@ -24,7 +24,10 @@ export class TodoComponent {
     /**
      * The entry todo from the parent list
      */
-    @Input()
+    @Input({
+        required: true,
+        alias: 'todo',
+    })
     todo: Todo;
 
     /**

src/app/shared/directives/border.directive.ts

@@ -0,0 +1,27 @@
+import { Directive, ElementRef, HostListener, Input, OnInit } from '@angular/core';
+
+@Directive({
+    selector: '[appBorder]',
+    standalone: true,
+})
+export class BorderDirective implements OnInit {
+    @Input() color: string = 'red';
+
+    constructor(private el: ElementRef) {}
+
+    ngOnInit() {
+        this.border('');
+    }
+
+    @HostListener('mouseenter') onMouseEnter() {
+        this.border(this.color);
+    }
+
+    @HostListener('mouseleave') onMouseLeave() {
+        this.border('');
+    }
+
+    private border(color: string) {
+        this.el.nativeElement.style.border = `2px solid ${color || 'transparent'}`;
+    }
+}

src/app/shared/directives/do-nothing.directive.ts

@@ -1,11 +1,13 @@
-import { Directive, HostBinding, HostListener, Input } from '@angular/core';
+import { Directive, HostBinding, HostListener } from '@angular/core';
+import { BorderDirective } from './border.directive';
 
 /**
  * This directive does nothing !
  */
 @Directive({
     selector: '[donothing]',
     standalone: true,
+    hostDirectives: [BorderDirective],
 })
 export class DoNothingDirective {
     protected popover: string;

src/app/shared/directives/highlight-and-border.directive.ts

@@ -0,0 +1,20 @@
+import { Directive } from '@angular/core';
+import { BorderDirective } from './border.directive';
+import { HighlightDirective } from './highlight.directive';
+
+@Directive({
+    selector: '[appHighlightAndBorder]',
+    hostDirectives: [
+        {
+            directive: HighlightDirective,
+            inputs: ['color'],
+        },
+        {
+            directive: BorderDirective,
+            inputs: ['color'],
+            outputs: ['tat', 'tit'],
+        },
+    ],
+    standalone: true,
+})
+export class HighlightAndBorderDirective {}

src/app/shared/directives/highlight.directive.ts

@@ -0,0 +1,23 @@
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+
+@Directive({
+    selector: '[appHighlight]',
+    standalone: true,
+})
+export class HighlightDirective {
+    @Input() color = 'yellow';
+
+    constructor(private el: ElementRef) {}
+
+    @HostListener('mouseenter') onMouseEnter() {
+        this.highlight(this.color);
+    }
+
+    @HostListener('mouseleave') onMouseLeave() {
+        this.highlight('');
+    }
+
+    private highlight(color: string) {
+        this.el.nativeElement.style.backgroundColor = color;
+    }
+}