separated common animation

Author: IPdotSetAF

Frontend/src/animations/common-animations.ts

@@ -0,0 +1,8 @@
+import { animate, style, transition, trigger } from "@angular/animations";
+
+export const valueChangeAnim = trigger('valueChangeAnim', [
+    transition('* <=> *', [
+        animate('0.07s ease-out', style({ "border-color": "limegreen" })),
+        animate('0.07s ease-in', style({ "border-color": "var(--bs-border-color)" }))
+    ]),
+]);

Frontend/src/app/cs2ts/cs2ts.component.ts

@@ -2,22 +2,15 @@ import { AfterContentInit, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { debounceTime, Subject, takeLast, tap } from 'rxjs';
 import { CodeAreaComponent } from '../code-area/code-area.component';
-import { animate, style, transition, trigger } from '@angular/animations';
 import { Meta } from '@angular/platform-browser';
+import { valueChangeAnim } from '../../animations/common-animations';
 
 @Component({
   selector: 'app-cs2ts',
   standalone: true,
   imports: [FormsModule, CodeAreaComponent],
   templateUrl: './cs2ts.component.html',
-  animations: [
-    trigger('valueChangeAnim', [
-      transition('* <=> *', [
-        animate('0.07s ease-out', style({ "border-color": "limegreen" })),
-        animate('0.07s ease-in', style({ "border-color": "var(--bs-border-color)" }))
-      ]),
-    ])
-  ]
+  animations: [valueChangeAnim]
 })
 export class Cs2tsComponent implements AfterContentInit {
   protected csCode: string = `public class a : b {

Frontend/src/app/md2html/md2html.component.ts

@@ -2,23 +2,16 @@ import { AfterContentInit, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { debounceTime, Subject, takeLast, tap } from 'rxjs';
 import { CodeAreaComponent } from '../code-area/code-area.component';
-import { animate, style, transition, trigger } from '@angular/animations';
 import { Meta } from '@angular/platform-browser';
 import { parse } from 'marked';
+import { valueChangeAnim } from '../../animations/common-animations';
 
 @Component({
   selector: 'app-md2html',
   standalone: true,
   imports: [FormsModule, CodeAreaComponent],
   templateUrl: './md2html.component.html',
-  animations: [
-    trigger('valueChangeAnim', [
-      transition('* <=> *', [
-        animate('0.07s ease-out', style({ "border-color": "limegreen" })),
-        animate('0.07s ease-in', style({ "border-color": "var(--bs-border-color)" }))
-      ]),
-    ])
-  ]
+  animations: [valueChangeAnim]
 })
 export class Md2htmlComponent implements AfterContentInit {
   protected mdCode: string = `# Hello world

Frontend/src/app/mssql-scaffolder/mssql-scaffolder.component.ts

@@ -9,26 +9,22 @@ import { MssqlScaffolderService } from './mssql-scaffolder.service';
 import { Meta } from '@angular/platform-browser';
 import { GetColumnsResponse, GetSPParametersResponse, GetSPReturnColumnsResponse } from './mssql-scaffolder.model';
 import { RouterLink } from '@angular/router';
+import { valueChangeAnim } from '../../animations/common-animations';
 
 @Component({
   selector: 'app-mssql-scaffolder',
   standalone: true,
   imports: [FormsModule, ReactiveFormsModule, CodeAreaComponent, RouterLink],
   templateUrl: './mssql-scaffolder.component.html',
   animations: [
+    valueChangeAnim,
     trigger('connection', [
       state("0", style({ "border-width": "3px", "border-color": "var(--bs-border-color)" })),
       state("1", style({ "border-width": "3px", "border-color": "var(--bs-warning)" })),
       state("2", style({ "border-width": "3px", "border-color": "limegreen" })),
       transition('* <=> *', [
         animate('0.1s ease-in-out'),
       ]),
-    ]),
-    trigger('valueChangeAnim', [
-      transition('* <=> *', [
-        animate('0.07s ease-out', style({ "border-color": "limegreen" })),
-        animate('0.07s ease-in', style({ "border-color": "var(--bs-border-color)" }))
-      ]),
     ])
   ]
 })
@@ -215,18 +211,18 @@ ${res.map((p) => `\tpublic ${MssqlScaffolderComponent.convertDataType(p.DataType
       ps = ps as GetSPParametersResponse[];
       this.scaffolder.getSPReturnColumns(this.connectionID, sc.database, sc.schema, sc.sp).subscribe(rs => {
         rs = rs as GetSPReturnColumnsResponse[];
-        
+
         const psc = ps.map((p) => `\tpublic ${MssqlScaffolderComponent.convertDataType(p.Type)}${p.Nullable ? '?' : ''} ${p.Parameter_name} { get; set; }`);
         const rsc = rs.map((p) => `\tpublic ${MssqlScaffolderComponent.convertDataType(p.system_type_name)}${p.Nullable ? '?' : ''} ${p.column} { get; set; }`);
 
         this.csCode =
-`${psc.length > 0 ? `public class ${sc.sp}Params {`:'' }
+          `${psc.length > 0 ? `public class ${sc.sp}Params {` : ''}
 ${psc.join("\n")}
-${psc.length > 0 ? '}':'' }
+${psc.length > 0 ? '}' : ''}
 
-${rsc.length>0? `public class ${sc.sp}Result {`:'' }
+${rsc.length > 0 ? `public class ${sc.sp}Result {` : ''}
 ${rsc.join("\n")}
-${rsc.length > 0 ? '}':'' }`;
+${rsc.length > 0 ? '}' : ''}`;
         this.codeFlip = !this.codeFlip;
       });
     });

Frontend/src/app/serialized-tool/serialized-tool.component.ts

@@ -7,19 +7,15 @@ import { Meta } from '@angular/platform-browser';
 import { parse as tomlParse, stringify as tomlStringify } from 'smol-toml';
 import { XMLParser as xmlParse, XMLBuilder as xmlStringify } from 'fast-xml-parser';
 import YAML from 'yamljs';
+import { valueChangeAnim } from '../../animations/common-animations';
 
 @Component({
   selector: 'app-serialized-tool',
   standalone: true,
   imports: [FormsModule, CodeAreaComponent],
   templateUrl: './serialized-tool.component.html',
   animations: [
-    trigger('valueChangeAnim', [
-      transition('* <=> *', [
-        animate('0.07s ease-out', style({ "border-color": "limegreen" })),
-        animate('0.07s ease-in', style({ "border-color": "var(--bs-border-color)" }))
-      ]),
-    ]),
+    valueChangeAnim,
     trigger('hasError', [
       state('true', style({ "border-color": "red" })),
       state('false', style({ "border-color": "var(--bs-border-color)" })),