[AF-299] - Fix base edge label component name

apps/angular-demo/src/app/edge-template/button-edge/button-edge.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { BaseEdgeLabelComponent, Edge, NgDiagramBaseEdgeComponent, NgDiagramEdgeTemplate } from 'ng-diagram';
+import { Edge, NgDiagramBaseEdgeComponent, NgDiagramBaseEdgeLabelComponent, NgDiagramEdgeTemplate } from 'ng-diagram';
 
 /**
  * The example below demonstrates how to create a custom edge with:
@@ -14,7 +14,7 @@ import { BaseEdgeLabelComponent, Edge, NgDiagramBaseEdgeComponent, NgDiagramEdge
   templateUrl: './button-edge.component.html',
   styleUrls: ['./button-edge.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgDiagramBaseEdgeComponent, BaseEdgeLabelComponent],
+  imports: [NgDiagramBaseEdgeComponent, NgDiagramBaseEdgeLabelComponent],
 })
 export class ButtonEdgeComponent implements NgDiagramEdgeTemplate {
   edge = input.required<Edge>();

apps/angular-demo/src/app/edge-template/custom-polyline-edge/custom-polyline-edge.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { BaseEdgeLabelComponent, Edge, NgDiagramBaseEdgeComponent, NgDiagramEdgeTemplate } from 'ng-diagram';
+import { Edge, NgDiagramBaseEdgeComponent, NgDiagramBaseEdgeLabelComponent, NgDiagramEdgeTemplate } from 'ng-diagram';
 
 /**
  * The example below demonstrates how to create a custom edge with:
@@ -13,7 +13,7 @@ import { BaseEdgeLabelComponent, Edge, NgDiagramBaseEdgeComponent, NgDiagramEdge
   templateUrl: './custom-polyline-edge.component.html',
   styleUrls: ['./custom-polyline-edge.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgDiagramBaseEdgeComponent, BaseEdgeLabelComponent],
+  imports: [NgDiagramBaseEdgeComponent, NgDiagramBaseEdgeLabelComponent],
 })
 export class CustomPolylineEdgeComponent implements NgDiagramEdgeTemplate {
   edge = input.required<Edge>();

apps/angular-demo/src/app/edge-template/labelled-edge/labelled-edge.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';
-import { BaseEdgeLabelComponent, Edge, NgDiagramBaseEdgeComponent, NgDiagramEdgeTemplate } from 'ng-diagram';
+import { Edge, NgDiagramBaseEdgeComponent, NgDiagramBaseEdgeLabelComponent, NgDiagramEdgeTemplate } from 'ng-diagram';
 
 /**
  * Simple edge with a single label at the center.
@@ -12,7 +12,7 @@ import { BaseEdgeLabelComponent, Edge, NgDiagramBaseEdgeComponent, NgDiagramEdge
   styleUrls: ['./labelled-edge.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  imports: [NgDiagramBaseEdgeComponent, BaseEdgeLabelComponent],
+  imports: [NgDiagramBaseEdgeComponent, NgDiagramBaseEdgeLabelComponent],
 })
 export class LabelledEdgeComponent implements NgDiagramEdgeTemplate {
   edge = input.required<Edge<Data>>();

apps/docs/src/components/angular/edges/custom-edges/labeled-edge/labeled-edge.component.ts

@@ -1,7 +1,7 @@
 import { Component, input } from '@angular/core';
 import {
-  BaseEdgeLabelComponent,
   NgDiagramBaseEdgeComponent,
+  NgDiagramBaseEdgeLabelComponent,
   type Edge,
   type NgDiagramEdgeTemplate,
 } from 'ng-diagram';
@@ -19,7 +19,7 @@ import {
     <!-- @mark-end -->
   </ng-diagram-base-edge>`,
   styleUrl: './labeled-edge.component.scss',
-  imports: [NgDiagramBaseEdgeComponent, BaseEdgeLabelComponent],
+  imports: [NgDiagramBaseEdgeComponent, NgDiagramBaseEdgeLabelComponent],
 })
 export class LabeledEdgeComponent implements NgDiagramEdgeTemplate {
   edge = input.required<Edge>();

apps/docs/src/components/angular/edges/labels/adding-labels/modifiable-label-edge.component.ts

@@ -1,8 +1,8 @@
 // @section-start
 import { Component, computed, input } from '@angular/core';
 import {
-  BaseEdgeLabelComponent,
   NgDiagramBaseEdgeComponent,
+  NgDiagramBaseEdgeLabelComponent,
   type Edge,
   type NgDiagramEdgeTemplate,
 } from 'ng-diagram';
@@ -26,7 +26,7 @@ import {
     <!-- @mark-end -->
   </ng-diagram-base-edge>`,
   styleUrl: './modifiable-label-edge.component.scss',
-  imports: [NgDiagramBaseEdgeComponent, BaseEdgeLabelComponent],
+  imports: [NgDiagramBaseEdgeComponent, NgDiagramBaseEdgeLabelComponent],
 })
 export class ModifiableLabelEdgeComponent
   implements NgDiagramEdgeTemplate<MultiLabelEdgeData>

apps/docs/src/components/angular/edges/labels/multiple-labels/multiple-labels-edge.component.ts

@@ -1,8 +1,8 @@
 // @section-start
 import { Component, computed, input } from '@angular/core';
 import {
-  BaseEdgeLabelComponent,
   NgDiagramBaseEdgeComponent,
+  NgDiagramBaseEdgeLabelComponent,
   type Edge,
   type NgDiagramEdgeTemplate,
 } from 'ng-diagram';
@@ -49,7 +49,7 @@ const ANIMATION_DURATION = 0.5;
     }
     /* @mark-end */
   `,
-  imports: [NgDiagramBaseEdgeComponent, BaseEdgeLabelComponent],
+  imports: [NgDiagramBaseEdgeComponent, NgDiagramBaseEdgeLabelComponent],
 })
 export class MultipleLabelsEdgeComponent
   implements NgDiagramEdgeTemplate<MultiLabelEdgeData>

apps/docs/src/components/angular/edges/routing/routing/routing-edge.component.ts

@@ -1,7 +1,7 @@
 import { Component, input } from '@angular/core';
 import {
-  BaseEdgeLabelComponent,
   NgDiagramBaseEdgeComponent,
+  NgDiagramBaseEdgeLabelComponent,
   type Edge,
   type NgDiagramEdgeTemplate,
 } from 'ng-diagram';
@@ -19,7 +19,7 @@ import {
     </ng-diagram-base-edge-label>
   </ng-diagram-base-edge>`,
   styleUrl: './routing-edge.component.scss',
-  imports: [NgDiagramBaseEdgeComponent, BaseEdgeLabelComponent],
+  imports: [NgDiagramBaseEdgeComponent, NgDiagramBaseEdgeLabelComponent],
 })
 export class RoutingEdgeComponent implements NgDiagramEdgeTemplate {
   edge = input.required<Edge>();

apps/docs/src/components/angular/examples/custom-edge/labeled-edge.component.ts

@@ -1,7 +1,7 @@
 import { Component, computed, input } from '@angular/core';
 import {
-  BaseEdgeLabelComponent,
   NgDiagramBaseEdgeComponent,
+  NgDiagramBaseEdgeLabelComponent,
   type Edge,
   type NgDiagramEdgeTemplate,
 } from 'ng-diagram';
@@ -24,7 +24,7 @@ const STROKE_WIDTH_SELECTED = 4;
       </button>
     </ng-diagram-base-edge-label>
   </ng-diagram-base-edge> `,
-  imports: [NgDiagramBaseEdgeComponent, BaseEdgeLabelComponent],
+  imports: [NgDiagramBaseEdgeComponent, NgDiagramBaseEdgeLabelComponent],
 })
 export class LabeledEdgeComponent implements NgDiagramEdgeTemplate {
   edge = input.required<Edge>();

apps/docs/src/content/docs/api/Components/BaseEdgeLabelComponent.md → apps/docs/src/content/docs/api/Components/NgDiagramBaseEdgeLabelComponent.md

@@ -2,10 +2,10 @@
 editUrl: false
 next: false
 prev: false
-title: "BaseEdgeLabelComponent"
+title: "NgDiagramBaseEdgeLabelComponent"
 ---
 
-The `BaseEdgeLabelComponent` is responsible for displaying a label at a specific position along an edge.
+The `NgDiagramBaseEdgeLabelComponent` is responsible for displaying a label at a specific position along an edge.
 
 ## Example usage
 ```html

apps/docs/src/content/docs/api/_readme.md

@@ -7,9 +7,9 @@ title: "ng-diagram"
 
 ## Components
 
-- [BaseEdgeLabelComponent](/docs/api/components/baseedgelabelcomponent/)
 - [NgDiagramBackgroundComponent](/docs/api/components/ngdiagrambackgroundcomponent/)
 - [NgDiagramBaseEdgeComponent](/docs/api/components/ngdiagrambaseedgecomponent/)
+- [NgDiagramBaseEdgeLabelComponent](/docs/api/components/ngdiagrambaseedgelabelcomponent/)
 - [NgDiagramComponent](/docs/api/components/ngdiagramcomponent/)
 - [NgDiagramNodeResizeAdornmentComponent](/docs/api/components/ngdiagramnoderesizeadornmentcomponent/)
 - [NgDiagramNodeRotateAdornmentComponent](/docs/api/components/ngdiagramnoderotateadornmentcomponent/)

apps/docs/src/content/docs/examples/custom-edge.mdx

@@ -26,11 +26,11 @@ The example illustrates key concepts including:
 - Adjusting parameters of `NgDiagramBaseEdgeComponent` in custom edges
 - Registering edge types using the `edgeTemplateMap`
 - Defining custom SVG markers for arrowheads
-- Adding interactive elements with `BaseEdgeLabelComponent`
+- Adding interactive elements with `NgDiagramBaseEdgeLabelComponent`
 - Generating complex path calculations for non-standard edge shapes
 
-import CustomEdge from '@examples/custom-edge/custom-edge.astro';
 import ExampleViewer from '@components/example-viewer/example-viewer.astro';
+import CustomEdge from '@examples/custom-edge/custom-edge.astro';
 
 <CustomEdge />
 

apps/docs/src/content/docs/guides/edges/custom-edges.mdx

@@ -82,7 +82,7 @@ Custom routing is an extensible mechanism that allows you to create sophisticate
 
 ## Adding Edge Labels
 
-To add labels to your custom edges, integrate the `BaseEdgeLabelComponent` within your custom edge component. Here's an implementation example:
+To add labels to your custom edges, integrate the `NgDiagramBaseEdgeLabelComponent` within your custom edge component. Here's an implementation example:
 
 import LabeledEdge from '@components/angular/edges/custom-edges/labeled-edge/labeled-edge.astro';
 

apps/docs/src/content/docs/guides/edges/labels.mdx

@@ -11,7 +11,7 @@ Labels are visual elements attached to edges that can display text, buttons, or
 
 ## Using Labels in Edge Components
 
-To display a label on an edge, use the `BaseEdgeLabelComponent` in the implementation of your edge component:
+To display a label on an edge, use the `NgDiagramBaseEdgeLabelComponent` in the implementation of your edge component:
 
 import LabeledEdge from '@components/angular/edges/custom-edges/labeled-edge/labeled-edge.astro';
 
@@ -38,7 +38,12 @@ The edge component implementation looks like this:
 
 ```typescript
 import { Component, computed, input } from '@angular/core';
-import { BaseEdgeLabelComponent, NgDiagramBaseEdgeComponent, type Edge, type NgDiagramEdgeTemplate } from 'ng-diagram';
+import {
+  NgDiagramBaseEdgeLabelComponent,
+  NgDiagramBaseEdgeComponent,
+  type Edge,
+  type NgDiagramEdgeTemplate,
+} from 'ng-diagram';
 
 @Component({
   selector: 'multi-label-edge',
@@ -50,7 +55,7 @@ import { BaseEdgeLabelComponent, NgDiagramBaseEdgeComponent, type Edge, type NgD
       {{ edge().data.label }}
     </ng-diagram-base-edge-label>
   </ng-diagram-base-edge>`,
-  imports: [NgDiagramBaseEdgeComponent, BaseEdgeLabelComponent],
+  imports: [NgDiagramBaseEdgeComponent, NgDiagramBaseEdgeLabelComponent],
 })
 export class ModifiableLabelEdgeComponent implements NgDiagramEdgeTemplate<{ label: string }> {
   edge = input.required<Edge<{ label: string }>>();

apps/docs/src/content/docs/intro/architecture.mdx

@@ -32,7 +32,7 @@ The user-facing components that render the diagram and handle user interactions:
 - [**ng-diagram-palette-item**](/docs/api/components/ngdiagrampaletteitemcomponent): Drag and drop component that can be placed anywhere in your application to create palette functionality
 - [**ng-diagram-palette-item-preview**](/docs/api/components/ngdiagrampaletteitempreviewcomponent): Preview component that shows a visual representation of palette items during drag operations
 - [**ng-diagram-base-edge**](/docs/api/components/ngdiagrambaseedgecomponent): Foundation component for building custom edge templates with advanced styling and behavior
-- [**base-edge-label**](/docs/api/components/baseedgelabelcomponent): Base component for creating custom edge labels with consistent styling and positioning
+- [**ng-diagram-base-edge-label**](/docs/api/components/ngdiagrambaseedgelabelcomponent): Base component for creating custom edge labels with consistent styling and positioning
 - [**ng-diagram-port**](/docs/api/components/ngdiagramportcomponent): Port component that defines connection points on nodes for edge connections
 
 ### Service Layer

packages/ng-diagram/projects/ng-diagram/src/lib/components/edge-label/base-edge-label.component.ts

@@ -16,7 +16,7 @@ import { BatchResizeObserverService, FlowCoreProviderService } from '../../servi
 import { NgDiagramBaseEdgeComponent } from '../edge/base-edge/base-edge.component';
 
 /**
- * The `BaseEdgeLabelComponent` is responsible for displaying a label at a specific position along an edge.
+ * The `NgDiagramBaseEdgeLabelComponent` is responsible for displaying a label at a specific position along an edge.
  *
  * ## Example usage
  * ```html
@@ -41,7 +41,7 @@ import { NgDiagramBaseEdgeComponent } from '../edge/base-edge/base-edge.componen
     '[style.visibility]': 'isVisible() ? null : "hidden"',
   },
 })
-export class BaseEdgeLabelComponent implements OnInit, OnDestroy {
+export class NgDiagramBaseEdgeLabelComponent implements OnInit, OnDestroy {
   private readonly flowCoreProvider = inject(FlowCoreProviderService);
   private readonly hostElement = inject(ElementRef<HTMLElement>);
   private readonly edgeComponent = inject(NgDiagramBaseEdgeComponent);

packages/ng-diagram/projects/ng-diagram/src/lib/components/edge/base-edge/base-edge-component.spec.ts

@@ -4,7 +4,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { Edge, Point } from '../../../../core/src';
 import { FlowCoreProviderService, RendererService } from '../../../services';
 import { InputEventsRouterService } from '../../../services/input-events/input-events-router.service';
-import { BaseEdgeLabelComponent } from '../../edge-label/base-edge-label.component';
+import { NgDiagramBaseEdgeLabelComponent } from '../../edge-label/base-edge-label.component';
 import { NgDiagramBaseEdgeComponent } from './base-edge.component';
 
 @Component({
@@ -59,7 +59,7 @@ describe('NgDiagramBaseEdgeComponent', () => {
     })
       .overrideComponent(NgDiagramBaseEdgeComponent, {
         remove: {
-          imports: [BaseEdgeLabelComponent],
+          imports: [NgDiagramBaseEdgeLabelComponent],
         },
         add: {
           imports: [MockNgDiagramEdgeLabelComponent],

packages/ng-diagram/projects/ng-diagram/src/lib/components/edge/default-edge/default-edge.component.ts

@@ -1,15 +1,14 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { Edge } from '../../../../core/src';
 import { NgDiagramEdgeTemplate } from '../../../types';
-import { BaseEdgeLabelComponent } from '../../edge-label/base-edge-label.component';
 import { NgDiagramBaseEdgeComponent } from '../base-edge/base-edge.component';
 
 @Component({
   selector: 'ng-diagram-default-edge',
   templateUrl: './default-edge.component.html',
   styleUrls: ['./default-edge.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgDiagramBaseEdgeComponent, BaseEdgeLabelComponent],
+  imports: [NgDiagramBaseEdgeComponent],
 })
 export class NgDiagramDefaultEdgeComponent implements NgDiagramEdgeTemplate {
   edge = input.required<Edge>();

packages/ng-diagram/projects/ng-diagram/src/public-api.ts

@@ -5,7 +5,7 @@
 // Components
 export { NgDiagramBackgroundComponent } from './lib/components/background/ng-diagram-background.component';
 export { NgDiagramComponent } from './lib/components/diagram/ng-diagram.component';
-export { BaseEdgeLabelComponent } from './lib/components/edge-label/base-edge-label.component';
+export { NgDiagramBaseEdgeLabelComponent } from './lib/components/edge-label/base-edge-label.component';
 export { NgDiagramBaseEdgeComponent } from './lib/components/edge/base-edge/base-edge.component';
 export { NgDiagramNodeResizeAdornmentComponent } from './lib/components/node/resize/ng-diagram-node-resize-adornment.component';
 export { NgDiagramNodeRotateAdornmentComponent } from './lib/components/node/rotate/ng-diagram-node-rotate-adornment.component';