[AF-299] - Fix base edge label component name (#368)

piotrblaszczyk · web-flow · commit d12df91c0a1f · 2025-10-22T09:04:47.000+02:00
* [AF-299] - Fix base edge label component name

* Maintains backward compatibility with deprecated BaseEdgeLabelComponent alias

* format
diff --git a/apps/angular-demo/src/app/edge-template/button-edge/button-edge.component.ts b/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>();
diff --git a/apps/angular-demo/src/app/edge-template/custom-polyline-edge/custom-polyline-edge.component.ts b/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>();
diff --git a/apps/angular-demo/src/app/edge-template/labelled-edge/labelled-edge.component.ts b/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>>();
diff --git a/apps/docs/src/components/angular/edges/custom-edges/labeled-edge/labeled-edge.component.ts b/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>();
diff --git a/apps/docs/src/components/angular/edges/labels/adding-labels/modifiable-label-edge.component.ts b/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>
diff --git a/apps/docs/src/components/angular/edges/labels/multiple-labels/multiple-labels-edge.component.ts b/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>
diff --git a/apps/docs/src/components/angular/edges/routing/routing/routing-edge.component.ts b/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>();
diff --git a/apps/docs/src/components/angular/examples/custom-edge/labeled-edge.component.ts b/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>();
diff --git a/apps/docs/src/content/docs/api/Components/NgDiagramBaseEdgeLabelComponent.md b/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
diff --git a/apps/docs/src/content/docs/api/Other/BaseEdgeLabelComponent.md b/apps/docs/src/content/docs/api/Other/BaseEdgeLabelComponent.md
@@ -0,0 +1,12 @@
+---
+editUrl: false
+next: false
+prev: false
+title: "BaseEdgeLabelComponent"
+---
+
+> `const` **BaseEdgeLabelComponent**: *typeof* [`NgDiagramBaseEdgeLabelComponent`](/docs/api/components/ngdiagrambaseedgelabelcomponent/) = `NgDiagramBaseEdgeLabelComponent`
+
+:::caution[Deprecated]
+Use [NgDiagramBaseEdgeLabelComponent](/docs/api/components/ngdiagrambaseedgelabelcomponent/) instead. This alias will be removed in a future version.
+:::
diff --git a/apps/docs/src/content/docs/api/_readme.md b/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/)
@@ -25,6 +25,7 @@ title: "ng-diagram"
 ## Other
 
 - [EdgeRouting](/docs/api/other/edgerouting/)
+- [~~BaseEdgeLabelComponent~~](/docs/api/other/baseedgelabelcomponent/)
 - [createMiddlewares](/docs/api/other/createmiddlewares/)
 - [initializeModel](/docs/api/other/initializemodel/)
 - [provideNgDiagram](/docs/api/other/providengdiagram/)
diff --git a/apps/docs/src/content/docs/examples/custom-edge.mdx b/apps/docs/src/content/docs/examples/custom-edge.mdx
@@ -36,5 +36,5 @@ Example showcases three different edge types:
 - 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
diff --git a/apps/docs/src/content/docs/guides/edges/custom-edges.mdx b/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';
 
diff --git a/apps/docs/src/content/docs/guides/edges/labels.mdx b/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 }>>();
diff --git a/apps/docs/src/content/docs/intro/architecture.mdx b/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
diff --git a/packages/ng-diagram/projects/ng-diagram/src/lib/components/edge-label/base-edge-label.component.ts b/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);
@@ -133,3 +133,8 @@ export class BaseEdgeLabelComponent implements OnInit, OnDestroy {
     this.batchResizeObserver.unobserve(this.hostElement.nativeElement);
   }
 }
+
+/**
+ * @deprecated Use {@link NgDiagramBaseEdgeLabelComponent} instead. This alias will be removed in a future version.
+ */
+export const BaseEdgeLabelComponent = NgDiagramBaseEdgeLabelComponent;
diff --git a/packages/ng-diagram/projects/ng-diagram/src/lib/components/edge/base-edge/base-edge-component.spec.ts b/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],
diff --git a/packages/ng-diagram/projects/ng-diagram/src/lib/components/edge/default-edge/default-edge.component.ts b/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>();
diff --git a/packages/ng-diagram/projects/ng-diagram/src/public-api.ts b/packages/ng-diagram/projects/ng-diagram/src/public-api.ts
@@ -5,7 +5,10 @@
 // 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 {
+  BaseEdgeLabelComponent,
+  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';
