-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
ngx-diff
+
+
+
+ GitHub
+
+
+ npm
+
+
+
+
+
+
+
+
+
+
+ ngx-diff is a free Angular library for displaying unified or
+ side-by-side diffs.
+
+
+
Try editing the text below to see how the diff updates:
+
+
+
+ Before
+
+
+
+
+
+ After
+
+
+
+
+
+
+
+ Unified diff
+
+
+
+
+
+
+
+
+
+ Side-by-side diff
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ © 2024 Richard Russell.
+
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index 391642f..7cd488c 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -1,33 +1,16 @@
-import { TestBed, waitForAsync } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
+import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
- beforeEach(waitForAsync(() => {
- TestBed.configureTestingModule({
- imports: [
- RouterTestingModule
- ],
- declarations: [AppComponent],
-}).compileComponents();
- }));
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [AppComponent],
+ }).compileComponents();
+ });
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
-
- it(`should have as title 'ngx-diff'`, () => {
- const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.componentInstance;
- expect(app.title).toEqual('ngx-diff');
- });
-
- it('should render title', () => {
- const fixture = TestBed.createComponent(AppComponent);
- fixture.detectChanges();
- const compiled = fixture.nativeElement;
- expect(compiled.querySelector('.content span').textContent).toContain('ngx-diff app is running!');
- });
});
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 428a19b..0286dc6 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,114 +1,57 @@
-import { InlineDiffComponent, SideBySideDiffComponent } from 'ngx-diff';
-
import { Component } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { RouterOutlet } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+import {
+ FontAwesomeModule,
+ FaIconLibrary,
+} from '@fortawesome/angular-fontawesome';
+import { faGithub, faNpm } from '@fortawesome/free-brands-svg-icons';
+import { UnifiedDiffComponent, SideBySideDiffComponent } from 'ngx-diff';
+import { ThemeService } from './services/theme/theme.service';
@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.scss'],
- imports: [InlineDiffComponent, SideBySideDiffComponent]
+ selector: 'app-root',
+ standalone: true,
+ imports: [
+ RouterOutlet,
+ NgClass,
+ FormsModule,
+ UnifiedDiffComponent,
+ SideBySideDiffComponent,
+ MatButtonModule,
+ MatCardModule,
+ MatIconModule,
+ MatInputModule,
+ MatToolbarModule,
+ MatTooltipModule,
+ FontAwesomeModule,
+ ],
+ templateUrl: './app.component.html',
+ styleUrl: './app.component.scss',
})
export class AppComponent {
- public oldText = `common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-apples
-oranges
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-kiwis
-carrots
-`;
- public newText = `common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-apples
-pears
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-common text
-kiwis
-grapefruit
-carrots
-`;
+ public isDarkMode = false;
+ public oldText = 'apples\noranges\nkiwis\nstrawberries\n';
+ public newText = 'apples\npears\nkiwis\ngrapefruit\nstrawberries\n';
+
+ public constructor(
+ faLibrary: FaIconLibrary,
+ private readonly themeService: ThemeService,
+ ) {
+ faLibrary.addIcons(faGithub, faNpm);
+ this.isDarkMode = this.themeService.isDarkMode();
+ }
- public selectedLineChange(event: unknown): void {
- console.log(event);
+ protected toggleDarkMode(): void {
+ this.themeService.toggleDarkMode();
+ this.isDarkMode = this.themeService.isDarkMode();
}
}
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
new file mode 100644
index 0000000..d3358e9
--- /dev/null
+++ b/src/app/app.config.ts
@@ -0,0 +1,9 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+
+export const appConfig: ApplicationConfig = {
+ providers: [provideRouter(routes), provideAnimationsAsync()]
+};
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
new file mode 100644
index 0000000..dc39edb
--- /dev/null
+++ b/src/app/app.routes.ts
@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];
diff --git a/src/app/services/theme/theme.service.spec.ts b/src/app/services/theme/theme.service.spec.ts
new file mode 100644
index 0000000..1c2957b
--- /dev/null
+++ b/src/app/services/theme/theme.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ThemeService } from './theme.service';
+
+describe('ThemeService', () => {
+ let service: ThemeService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(ThemeService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/services/theme/theme.service.ts b/src/app/services/theme/theme.service.ts
new file mode 100644
index 0000000..3f17d53
--- /dev/null
+++ b/src/app/services/theme/theme.service.ts
@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class ThemeService {
+ private darkMode = false;
+
+ public isDarkMode(): boolean {
+ return this.darkMode;
+ }
+
+ public toggleDarkMode(): void {
+ this.setDarkMode(!this.darkMode);
+ }
+
+ public setDarkMode(isDarkMode: boolean): void {
+ this.darkMode = isDarkMode;
+ if (isDarkMode) {
+ document.body.classList.add('dark-theme');
+ } else {
+ document.body.classList.remove('dark-theme');
+ }
+ }
+}
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
deleted file mode 100644
index 3612073..0000000
--- a/src/environments/environment.prod.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const environment = {
- production: true
-};
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
deleted file mode 100644
index 30d7bcc..0000000
--- a/src/environments/environment.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
-export const environment = {
- production: false
-};
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
diff --git a/src/favicon.ico b/src/favicon.ico
index 997406a..57614f9 100644
Binary files a/src/favicon.ico and b/src/favicon.ico differ
diff --git a/src/index.html b/src/index.html
index a545d72..ba05450 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,12 +2,26 @@
-
Codestin Search App
-
+
Codestin Search App
+
+
+
+
+
+
-
+
diff --git a/src/main.ts b/src/main.ts
index d5c3c10..35b00f3 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,14 +1,6 @@
-import { enableProdMode, importProvidersFrom } from '@angular/core';
-import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
-
-import { AppRoutingModule } from './app/app-routing.module';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
-import { environment } from './environments/environment';
-
-if (environment.production) {
- enableProdMode();
-}
-bootstrapApplication(AppComponent, {
- providers: [importProvidersFrom(BrowserModule, AppRoutingModule)],
-}).catch((err) => console.error(err));
+bootstrapApplication(AppComponent, appConfig)
+ .catch((err) => console.error(err));
diff --git a/src/polyfills.ts b/src/polyfills.ts
deleted file mode 100644
index 813c824..0000000
--- a/src/polyfills.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
- * file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
- *
- * Learn more in https://angular.io/guide/browser-support
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/**
- * By default, zone.js will patch all possible macroTask and DomEvents
- * user can disable parts of macroTask/DomEvents patch by setting following flags
- * because those flags need to be set before `zone.js` being loaded, and webpack
- * will put import in the top of bundle, so user need to create a separate file
- * in this directory (for example: zone-flags.ts), and put the following flags
- * into that file, and then add the following code before importing zone.js.
- * import './zone-flags.ts';
- *
- * The flags allowed in zone-flags.ts are listed here.
- *
- * The following flags will work for all browsers.
- *
- * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
- *
- * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- * with the following flag, it will bypass `zone.js` patch for IE/Edge
- *
- * (window as any).__Zone_enable_cross_context_check = true;
- *
- */
-
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import 'zone.js'; // Included with Angular CLI.
-
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */
diff --git a/src/styles.scss b/src/styles.scss
index 3133d15..0356966 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,19 +1,79 @@
/* You can add global styles to this file, and also import other style files */
-@use '../projects/ngx-diff/styles/default-theme';
-
-:root .my-inline-diff-theme {
- --ngx-diff-border-color: yellow;
- --ngx-diff-selected-border-color: blue;
- --ngx-diff-font-family: Consolas;
- --ngx-diff-line-number-hover-font-color: white;
- --ngx-diff-line-number-width: 2rem;
- --ngx-diff-font-size: 1rem;
- --ngx-diff-line-left-padding: 1rem;
- --ngx-diff-bottom-spacer-height: 1rem;
-
- --ngx-diff-insert-color-darker: color-mix(in srgb, var(--ngx-diff-insert-color), #000 15%);
- --ngx-diff-insert-color-darkest: color-mix(in srgb, var(--ngx-diff-insert-color), #000 30%);
- --ngx-diff-delete-color-darker: color-mix(in srgb, var(--ngx-diff-delete-color), #000 15%);
- --ngx-diff-delete-color-darkest: color-mix(in srgb, var(--ngx-diff-delete-color), #000 30%);
+@use "@angular/material" as mat;
+@use "ngx-diff/styles/default-theme";
+
+html,
+body {
+ height: 100%;
+}
+body {
+ margin: 0;
+ font-family: Roboto, "Helvetica Neue", sans-serif;
+}
+
+.my-custom-diff-theme {
+ --ngx-diff-font-family: Fira Mono;
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@include mat.core();
+
+$scale: -1;
+
+// Define a dark theme
+$dark-theme: mat.define-theme(
+ (
+ color: (
+ theme-type: dark,
+ primary: mat.$violet-palette,
+ ),
+ density: (
+ scale: $scale,
+ ),
+ )
+);
+
+// Define a light theme
+$light-theme: mat.define-theme(
+ (
+ color: (
+ theme-type: light,
+ primary: mat.$violet-palette,
+ ),
+ density: (
+ scale: $scale,
+ ),
+ )
+);
+
+html {
+ // Apply the dark theme by default
+ @include mat.core-theme($light-theme);
+ @include mat.button-theme($light-theme);
+ @include mat.card-theme($light-theme);
+ @include mat.form-field-theme($light-theme);
+ @include mat.icon-theme($light-theme);
+ @include mat.icon-button-theme($light-theme);
+ @include mat.input-theme($light-theme);
+ @include mat.toolbar-theme($light-theme);
+ @include mat.tooltip-theme($light-theme);
+
+ // Apply the light theme only when the user prefers light themes.
+ .dark-theme {
+ // Use the `-color` mixins to only apply color styles without reapplying the same
+ // typography and density styles.
+ @include mat.core-color($dark-theme);
+ @include mat.button-color($dark-theme);
+ @include mat.card-color($dark-theme);
+ @include mat.form-field-color($dark-theme);
+ @include mat.icon-color($dark-theme);
+ @include mat.icon-button-color($dark-theme);
+ @include mat.input-color($dark-theme);
+ @include mat.toolbar-color($dark-theme);
+ @include mat.tooltip-color($dark-theme);
+ }
}
diff --git a/src/test.ts b/src/test.ts
deleted file mode 100644
index ae25f27..0000000
--- a/src/test.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting(), {
- teardown: { destroyAfterEach: false }
-}
-);
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..57f9a81
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ "./src/**/*.{html,ts}",
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+ }
diff --git a/tsconfig.app.json b/tsconfig.app.json
index f758d98..374cc9d 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -1,3 +1,4 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
@@ -5,8 +6,7 @@
"types": []
},
"files": [
- "src/main.ts",
- "src/polyfills.ts"
+ "src/main.ts"
],
"include": [
"src/**/*.d.ts"
diff --git a/tsconfig.json b/tsconfig.json
index 21365fe..f37b67f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,39 +1,33 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
- "baseUrl": "./",
"outDir": "./dist/out-tsc",
- "sourceMap": true,
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "noImplicitOverride": true,
+ "noPropertyAccessFromIndexSignature": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true,
+ "skipLibCheck": true,
"esModuleInterop": true,
+ "sourceMap": true,
"declaration": false,
"experimentalDecorators": true,
- "module": "es2020",
- "moduleResolution": "bundler",
- "noImplicitAny": true,
- "noImplicitReturns": true,
- "noImplicitThis": true,
- "noUnusedLocals": true,
- "noUnusedParameters": true,
- "strict": true,
+ "moduleResolution": "node",
"importHelpers": true,
"target": "ES2022",
- "typeRoots": [
- "node_modules/@types"
- ],
+ "module": "ES2022",
+ "useDefineForClassFields": false,
"lib": [
- "es2018",
+ "ES2022",
"dom"
- ],
- "paths": {
- "ngx-diff": [
- "dist/ngx-diff/ngx-diff",
- "dist/ngx-diff"
- ]
- },
- "useDefineForClassFields": false
+ ]
},
"angularCompilerOptions": {
- "fullTemplateTypeCheck": true,
- "strictInjectionParameters": true
+ "enableI18nLegacyMessageIdFormat": false,
+ "strictInjectionParameters": true,
+ "strictInputAccessModifiers": true,
+ "strictTemplates": true
}
}
diff --git a/tsconfig.spec.json b/tsconfig.spec.json
index 6400fde..be7e9da 100644
--- a/tsconfig.spec.json
+++ b/tsconfig.spec.json
@@ -1,16 +1,12 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
- "jasmine",
- "node"
+ "jasmine"
]
},
- "files": [
- "src/test.ts",
- "src/polyfills.ts"
- ],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"