From ba04b2da8b4e08442b6a474fdfaa0734ffedf615 Mon Sep 17 00:00:00 2001
From: Vincent Ogloblinsky <vincent.ogloblinsky@gmail.com>
Date: Tue, 23 May 2023 16:41:25 +0200
Subject: [PATCH] feat(app): bump dependencies

---
 package.json                                  |  2 +-
 src/app/about/about.component.ts              |  4 ++-
 src/app/list/todo/todo.component.ts           |  5 +++-
 src/app/shared/directives/border.directive.ts | 27 +++++++++++++++++++
 .../shared/directives/do-nothing.directive.ts |  4 ++-
 .../highlight-and-border.directive.ts         | 20 ++++++++++++++
 .../shared/directives/highlight.directive.ts  | 23 ++++++++++++++++
 7 files changed, 81 insertions(+), 4 deletions(-)
 create mode 100644 src/app/shared/directives/border.directive.ts
 create mode 100644 src/app/shared/directives/highlight-and-border.directive.ts
 create mode 100644 src/app/shared/directives/highlight.directive.ts

diff --git a/package.json b/package.json
index 70dff6d..36a8599 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/about/about.component.ts b/src/app/about/about.component.ts
index 2b4c345..2b3e832 100644
--- a/src/app/about/about.component.ts
+++ b/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() {}
diff --git a/src/app/list/todo/todo.component.ts b/src/app/list/todo/todo.component.ts
index 7862417..726a186 100644
--- a/src/app/list/todo/todo.component.ts
+++ b/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;
 
     /**
diff --git a/src/app/shared/directives/border.directive.ts b/src/app/shared/directives/border.directive.ts
new file mode 100644
index 0000000..972bbdd
--- /dev/null
+++ b/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'}`;
+    }
+}
diff --git a/src/app/shared/directives/do-nothing.directive.ts b/src/app/shared/directives/do-nothing.directive.ts
index 7128241..a91ddfd 100644
--- a/src/app/shared/directives/do-nothing.directive.ts
+++ b/src/app/shared/directives/do-nothing.directive.ts
@@ -1,4 +1,5 @@
-import { Directive, HostBinding, HostListener, Input } from '@angular/core';
+import { Directive, HostBinding, HostListener } from '@angular/core';
+import { BorderDirective } from './border.directive';
 
 /**
  * This directive does nothing !
@@ -6,6 +7,7 @@ import { Directive, HostBinding, HostListener, Input } from '@angular/core';
 @Directive({
     selector: '[donothing]',
     standalone: true,
+    hostDirectives: [BorderDirective],
 })
 export class DoNothingDirective {
     protected popover: string;
diff --git a/src/app/shared/directives/highlight-and-border.directive.ts b/src/app/shared/directives/highlight-and-border.directive.ts
new file mode 100644
index 0000000..5dfed4c
--- /dev/null
+++ b/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 {}
diff --git a/src/app/shared/directives/highlight.directive.ts b/src/app/shared/directives/highlight.directive.ts
new file mode 100644
index 0000000..bbb7acc
--- /dev/null
+++ b/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;
+    }
+}