Added window animation

src/app/app.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { AngularDraggableModule } from 'ngx-draggable-resize';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppComponent } from './app.component';
 import { TitleComponent } from './user-apps/title/title.component';
@@ -46,7 +47,8 @@ import { TaskBarEntryHighlightDirective } from './shared/system-directive/taskba
   ],
   imports: [
     BrowserModule,
-    AngularDraggableModule
+    AngularDraggableModule,
+    BrowserAnimationsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/system-apps/window/window.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input, OnInit, OnDestroy, ElementRef, AfterViewInit,OnChanges, ViewChild, ChangeDetectorRef, SimpleChanges } from '@angular/core';
+
 import { ComponentType } from 'src/app/system-files/component.types';
 import { RunningProcessService } from 'src/app/shared/system-service/running.process.service';
 import { Subscription } from 'rxjs';
@@ -31,7 +32,6 @@ import { WindowState } from 'src/app/system-files/state/windows.state';
   processId = 0;
   type = ComponentType.systemComponent;
   displayName = '';
-
 
   windowHide = false;
   windowMaximize = false;

src/app/user-apps/title/title.component.html

@@ -1,8 +1,15 @@
-
+    <div 
+    [@openClose]="onOpen ? 'open' : 'closed'"
+    (@openClose.start)="onAnimationEvent($event)"
+    (@openClose.done)="onAnimationEvent($event)">
+
     <cos-window [runningProcessID]="this.processId" [processAppIcon]="this.icon" [processAppName]="this.name">
         <p  class="title"> Hello, World! </p>
     </cos-window>
 
 
+    </div>
+
+
 
 

src/app/user-apps/title/title.component.ts

@@ -4,10 +4,49 @@ import { RunningProcessService } from 'src/app/shared/system-service/running.pro
 import { BaseComponent } from 'src/app/system-base/base/base.component';
 import { ComponentType } from 'src/app/system-files/component.types';
 import { Process } from 'src/app/system-files/process';
+import { trigger, transition, state, animate, style, AnimationEvent } from '@angular/animations';
 
 @Component({
-    selector:'cos-title',
+  selector:'cos-title',
   templateUrl: './title.component.html',
+  animations: [
+    trigger('openClose', [
+      //...
+      state('open', style({
+        // height: '200px',
+        opacity: 1,
+        backgroundColor: 'yellow'
+      })),
+      state('closed', style({
+        // height: '100px',
+        // opacity: 0.8,
+        // backgroundColor: 'blue'
+      })),
+      transition('open => closed', [
+        animate('10s')
+      ]),
+      transition('closed => open', [
+        animate('9.5s')
+      ]),
+      transition('* => closed', [
+        animate('10s')
+      ]),
+      transition('* => open', [
+        animate('9.5s')
+      ]),
+      transition('open <=> closed', [
+        animate('9.5s')
+      ]),
+      transition ('* => open', [
+        animate ('10s',
+          style ({ opacity: '*' }),
+        ),
+      ]),
+      transition('* => *', [
+        animate('10s')
+      ]),
+    ]),
+  ],
   styleUrls: ["./title.component.css"]
 })
 
@@ -24,6 +63,7 @@ export class TitleComponent implements BaseComponent{
   processId = 0;
   type = ComponentType.userComponent;
   displayName = 'Hello';
+  onOpen = true;
 
   constructor( processIdService:ProcessIDService,runningProcessService:RunningProcessService) { 
     this._processIdService = processIdService;
@@ -32,6 +72,29 @@ export class TitleComponent implements BaseComponent{
     this._runningProcessService.addProcess(this.getComponentDetail());
   }
 
+
+
+  onAnimationEvent(event: AnimationEvent) {
+
+    // openClose is trigger name in this example
+    console.warn(`Animation Trigger: ${event.triggerName}`);
+
+    // phaseName is "start" or "done"
+    console.warn(`Phase: ${event.phaseName}`);
+
+    // in our example, totalTime is 1000 (number of milliseconds in a second)
+    console.warn(`Total time: ${event.totalTime}`);
+
+    // in our example, fromState is either "open" or "closed"
+    console.warn(`From: ${event.fromState}`);
+
+    // in our example, toState either "open" or "closed"
+    console.warn(`To: ${event.toState}`);
+
+    // the HTML element itself, the button in this case
+    console.warn(`Element: ${event.element}`);
+  }
+
   private getComponentDetail():Process{
     return new Process(this.processId, this.name, this.icon, this.hasWindow, this.type)
   }