fix(core): signalify title component

libs/core/dialog/base/dialog-header-base.class.ts

@@ -1,7 +1,6 @@
 import {
     AfterContentInit,
     ChangeDetectorRef,
-    ContentChild,
     ContentChildren,
     Directive,
     QueryList,
@@ -10,19 +9,17 @@ import {
 } from '@angular/core';
 
 import { TemplateDirective } from '@fundamental-ngx/cdk/utils';
-import { TitleComponent, TitleToken } from '@fundamental-ngx/core/title';
+import { DEFAULT_TITLE_SIZE } from '@fundamental-ngx/core/title';
 
-@Directive()
-export abstract class DialogHeaderBase implements AfterContentInit {
-    /** @hidden */
-    @ContentChild(TitleToken)
-    set defaultTitleSize(title: TitleComponent) {
-        if (title && !title.headerSize) {
-            title.headerSize = 5;
-            this._changeDetectorRef.detectChanges();
+@Directive({
+    providers: [
+        {
+            provide: DEFAULT_TITLE_SIZE,
+            useValue: 5
         }
-    }
-
+    ]
+})
+export abstract class DialogHeaderBase implements AfterContentInit {
     /** @hidden */
     @ContentChildren(TemplateDirective)
     customTemplates: QueryList<TemplateDirective>;
@@ -53,6 +50,6 @@ export abstract class DialogHeaderBase implements AfterContentInit {
                     break;
             }
         });
-        this._changeDetectorRef.detectChanges();
+        this._changeDetectorRef.markForCheck();
     }
 }

libs/core/dialog/dialog-header/dialog-header.component.ts

@@ -3,6 +3,7 @@ import { AfterContentInit, ChangeDetectionStrategy, Component, ViewEncapsulation
 import { NgTemplateOutlet } from '@angular/common';
 import { BarComponent, BarElementDirective, BarLeftDirective, BarRightDirective } from '@fundamental-ngx/core/bar';
 import { ContentDensityDirective } from '@fundamental-ngx/core/content-density';
+import { DEFAULT_TITLE_SIZE } from '@fundamental-ngx/core/title';
 import { DialogHeaderBase } from '../base/dialog-header-base.class';
 import { DialogConfig } from '../utils/dialog-config.class';
 
@@ -21,6 +22,12 @@ import { DialogConfig } from '../utils/dialog-config.class';
     templateUrl: './dialog-header.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
+    providers: [
+        {
+            provide: DEFAULT_TITLE_SIZE,
+            useValue: 5
+        }
+    ],
     imports: [
         BarComponent,
         BarLeftDirective,

libs/core/menu/menu-mobile/menu-mobile.component.ts

@@ -30,7 +30,7 @@ import {
     DialogHeaderComponent
 } from '@fundamental-ngx/core/dialog';
 import { MobileModeBase, MobileModeControl } from '@fundamental-ngx/core/mobile-mode';
-import { TitleComponent, TitleModule } from '@fundamental-ngx/core/title';
+import { TitleComponent } from '@fundamental-ngx/core/title';
 import { startWith, take } from 'rxjs/operators';
 import { MenuItemComponent } from '../menu-item/menu-item.component';
 import { MENU_COMPONENT, MenuInterface } from '../menu.interface';
@@ -47,22 +47,21 @@ import { MenuService } from '../services/menu.service';
         BarRightDirective,
         BarElementDirective,
         ButtonBarComponent,
-        TitleComponent,
         TemplateDirective,
         BarLeftDirective,
         BarRightDirective,
         BarElementDirective,
         ButtonBarComponent,
         ButtonComponent,
         ContentDensityDirective,
-        TitleModule,
         NgTemplateOutlet,
         InitialFocusDirective,
         DialogComponent,
         DialogBodyComponent,
         DialogHeaderComponent,
         DialogCloseButtonComponent,
-        DialogFooterComponent
+        DialogFooterComponent,
+        TitleComponent
     ]
 })
 export class MenuMobileComponent extends MobileModeBase<MenuInterface> implements OnInit {

libs/core/message-box/message-box.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { DynamicComponentService, InitialFocusModule, TemplateModule } from '@fundamental-ngx/cdk/utils';
-import { TitleModule } from '@fundamental-ngx/core/title';
+import { TitleComponent } from '@fundamental-ngx/core/title';
 import { MessageBoxTemplateDirective } from './directives/message-box-template.directive';
 import { MessageBoxBodyComponent } from './message-box-body/message-box-body.component';
 import { MessageBoxContainerComponent } from './message-box-container/message-box-container.component';
@@ -23,8 +23,8 @@ const declarations = [
 ];
 
 @NgModule({
-    imports: [TemplateModule, InitialFocusModule, TitleModule, declarations],
-    exports: [declarations, TemplateModule, InitialFocusModule, TitleModule],
+    imports: [TemplateModule, InitialFocusModule, TitleComponent, declarations],
+    exports: [declarations, TemplateModule, InitialFocusModule, TitleComponent],
     providers: [MessageBoxService, DynamicComponentService]
 })
 export class MessageBoxModule {}

libs/core/title/title.component.spec.ts

@@ -1,5 +1,6 @@
+import { Component } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { TitleComponent } from './title.component';
+import { DEFAULT_TITLE_SIZE, TitleComponent } from './title.component';
 
 describe('TitleComponent', () => {
     let component: TitleComponent;
@@ -19,13 +20,109 @@ describe('TitleComponent', () => {
 
     it('should create', () => {
         expect(component).toBeTruthy();
-        expect(component).toBeDefined();
     });
 
-    it('should assign class', () => {
-        component.headerSize = 5;
-        component.ngOnInit();
+    it('should apply header size class when explicitly set', () => {
+        fixture.componentRef.setInput('headerSize', 5);
+        fixture.detectChanges();
+
         expect(fixture.nativeElement.classList).toContain('fd-title');
         expect(fixture.nativeElement.classList).toContain('fd-title--h5');
     });
+
+    it('should auto-detect header size from tag name when not explicitly set', () => {
+        fixture.detectChanges();
+
+        expect(fixture.nativeElement.classList).toContain('fd-title');
+        // Should detect from tag name (depends on how the component is rendered in test)
+    });
+
+    it('should apply wrap class when wrap is true', () => {
+        fixture.componentRef.setInput('wrap', true);
+        fixture.detectChanges();
+
+        expect(fixture.nativeElement.classList).toContain('fd-title--wrap');
+    });
+
+    it('should not apply wrap class when wrap is false', () => {
+        fixture.componentRef.setInput('wrap', false);
+        fixture.detectChanges();
+
+        expect(fixture.nativeElement.classList).not.toContain('fd-title--wrap');
+    });
+
+    it('should update header size class when changed', () => {
+        fixture.componentRef.setInput('headerSize', 3);
+        fixture.detectChanges();
+
+        expect(fixture.nativeElement.classList).toContain('fd-title--h3');
+
+        fixture.componentRef.setInput('headerSize', 6);
+        fixture.detectChanges();
+
+        expect(fixture.nativeElement.classList).not.toContain('fd-title--h3');
+        expect(fixture.nativeElement.classList).toContain('fd-title--h6');
+    });
+
+    it('should provide element reference via elementRef getter', () => {
+        expect(component.elementRef).toBeDefined();
+        expect(component.elementRef.nativeElement).toBe(fixture.nativeElement);
+    });
+
+    describe('DEFAULT_TITLE_SIZE injection', () => {
+        it('should use injected default size when no explicit headerSize is provided', () => {
+            // Create a parent component that provides DEFAULT_TITLE_SIZE
+            @Component({
+                template: '<h3 fd-title></h3>',
+                providers: [{ provide: DEFAULT_TITLE_SIZE, useValue: 5 }],
+                imports: [TitleComponent]
+            })
+            class TestParentComponent {}
+
+            const parentFixture = TestBed.createComponent(TestParentComponent);
+            parentFixture.detectChanges();
+
+            const titleElement = parentFixture.nativeElement.querySelector('h3');
+
+            // Should use injected default (5) instead of tag name (3)
+            expect(titleElement.classList).toContain('fd-title--h5');
+            expect(titleElement.classList).not.toContain('fd-title--h3');
+        });
+
+        it('should prioritize explicit headerSize over injected default', () => {
+            @Component({
+                template: '<h3 fd-title [headerSize]="2"></h3>',
+                providers: [{ provide: DEFAULT_TITLE_SIZE, useValue: 5 }],
+                imports: [TitleComponent]
+            })
+            class TestParentComponent {}
+
+            const parentFixture = TestBed.createComponent(TestParentComponent);
+            parentFixture.detectChanges();
+
+            const titleElement = parentFixture.nativeElement.querySelector('h3');
+
+            // Should use explicit input (2), not injected default (5) or tag name (3)
+            expect(titleElement.classList).toContain('fd-title--h2');
+            expect(titleElement.classList).not.toContain('fd-title--h5');
+            expect(titleElement.classList).not.toContain('fd-title--h3');
+        });
+
+        it('should fall back to tag name when no default is provided and no explicit headerSize', () => {
+            @Component({
+                template: '<h4 fd-title></h4>',
+                imports: [TitleComponent]
+                // No DEFAULT_TITLE_SIZE provider
+            })
+            class TestParentComponent {}
+
+            const parentFixture = TestBed.createComponent(TestParentComponent);
+            parentFixture.detectChanges();
+
+            const titleElement = parentFixture.nativeElement.querySelector('h4');
+
+            // Should detect from tag name (4)
+            expect(titleElement.classList).toContain('fd-title--h4');
+        });
+    });
 });