feat: demo application UI changes

Author: sheikalthaf

README.md

@@ -1,27 +1,50 @@
-# AnuglarFlow
-
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.4.
-
-## Development server
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+# Angular Flow
+
+Angular Flow is a component that allows you to create a flow diagram using Angular.
+
+## Installation
+
+```bash
+npm install @ngu/flow
+```
+
+## Usage
+
+```ts
+import { Component } from "@angular/core";
+import { FlowComponent, FlowChildComponent } from "@ngu/flow";
+
+@Component({
+  selector: "app-root",
+  standalone: true,
+  imports: [FlowComponent, FlowChildComponent],
+  template: `
+    <ngu-flow class="flow">
+      @for (item of lists; track item.id; let i = $index) {
+      <div [flowChild]="item" class="child">{{ i }}</div>
+      }
+    </ngu-flow>
+  `,
+  styles: `
+  .flow {
+    min-height: 90vh;
+    background: #eee;
+  }
+  .child {
+    border: 1px solid #ccc;
+    width: 100px;
+    height: 50px;
+    background: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  `,
+})
+export class AppComponent {
+  lists = [
+    { id: "1", x: 0, y: 0, deps: [] },
+    { id: "2", x: 0, y: 0, deps: ["1"] },
+  ];
+}
+```

package.json

@@ -10,29 +10,32 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.0.2",
-    "@angular/common": "^17.0.2",
-    "@angular/compiler": "^17.0.2",
-    "@angular/core": "^17.0.2",
-    "@angular/forms": "^17.0.2",
-    "@angular/platform-browser": "^17.0.2",
-    "@angular/platform-browser-dynamic": "^17.0.2",
-    "@angular/router": "^17.0.2",
+    "@angular/animations": "^17.1.1",
+    "@angular/common": "^17.1.1",
+    "@angular/compiler": "^17.1.1",
+    "@angular/core": "^17.1.1",
+    "@angular/forms": "^17.1.1",
+    "@angular/platform-browser": "^17.1.1",
+    "@angular/platform-browser-dynamic": "^17.1.1",
+    "@angular/router": "^17.1.1",
+    "@tiptap/core": "^2.1.16",
+    "@tiptap/starter-kit": "^2.1.16",
+    "ngx-tiptap": "^9.1.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.0",
-    "@angular/cli": "~17.0.0",
-    "@angular/compiler-cli": "^17.0.2",
-    "@types/jest": "^29.5.5",
-    "autoprefixer": "^10.4.15",
+    "@angular-devkit/build-angular": "^17.1.1",
+    "@angular/cli": "~17.1.1",
+    "@angular/compiler-cli": "^17.1.1",
+    "@types/jest": "^29.5.11",
+    "autoprefixer": "^10.4.17",
     "jest": "^29.7.0",
-    "jest-preset-angular": "^13.1.2",
-    "ng-packagr": "^17.0.0",
-    "postcss": "^8.4.28",
-    "tailwindcss": "^3.3.3",
+    "jest-preset-angular": "^14.0.0",
+    "ng-packagr": "^17.1.2",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1",
     "typescript": "~5.2.2"
   },
   "jest": {