revert: remove changes to move to existing PR #16068

Co-authored-by: Lipata <[email protected]>

Author: Copilot

projects/igniteui-angular/src/lib/tabs/tab-header.directive.ts

@@ -40,7 +40,9 @@ export abstract class IgxTabHeaderDirective implements IgxTabHeaderBase {
     /** @hidden */
     @HostListener('click')
     public onClick() {
-        this.tabs.selectTab(this.tab, true);
+        if (this.tab.panelComponent) {
+            this.tabs.selectTab(this.tab, true);
+        }
     }
 
     /** @hidden */

projects/igniteui-angular/src/lib/tabs/tabs/README.md

@@ -3,11 +3,11 @@
 ## Description
 _igx-tabs component allows you to add a tabs component with tab items, positioned at the top, and item content in your application. The tabs in Ignite UI for Angular can be composed with the following components and directives:_
 
--  *igx-tab-item* - single content area that holds header and optionally content components
+-  *igx-tab-item* - single content area that holds header and content components
 -  *igx-tab-header* - holds the title and/or icon of the item and you can add them with `igxTabHeaderIcon` and `igxTabHeaderLabel`
--  *igx-tab-content* - represents the wrapper of the content that needs to be displayed (optional)
+-  *igx-tab-content* - represents the wrapper of the content that needs to be displayed
 
-Each item (`igx-tab-item`) contains a header (`igx-tab-header`) and optionally content (`igx-tab-content`). When a tab is clicked, the associated content is selected and visualized into a single container. If a tab has no content, it can still be selected and used for navigation purposes. There should always be a selected tab. Only one tab can be selected at a time.
+Each item (`igx-tab-item`) contains header (`igx-tab-header`) and content (`igx-tab-content`). When a tab is clicked, the associated content is selected and visualized into a single container. There should always be a selected tab. Only one tab can be selected at a time.
 A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabs).
 
 ----------
@@ -59,33 +59,6 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
         </igx-tab-item>
     </igx-tabs>
 
-## Tabs without content (Navigation-only)
-
-For navigation purposes, you can create tabs without content:
-
-    <igx-tabs>
-        <igx-tab-item>
-            <igx-tab-header igxRipple>
-                <igx-icon igxTabHeaderIcon>home</igx-icon>
-                <span igxTabHeaderLabel>Home</span>
-            </igx-tab-header>
-        </igx-tab-item>
-        
-        <igx-tab-item [selected]="true">
-            <igx-tab-header igxRipple>
-                <igx-icon igxTabHeaderIcon>info</igx-icon>
-                <span igxTabHeaderLabel>About</span>
-            </igx-tab-header>
-        </igx-tab-item>
-        
-        <igx-tab-item>
-            <igx-tab-header igxRipple>
-                <igx-icon igxTabHeaderIcon>contact_page</igx-icon>
-                <span igxTabHeaderLabel>Contact</span>
-            </igx-tab-header>
-        </igx-tab-item>
-    </igx-tabs>
-
 
 # API Summary 
 

projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.spec.ts

@@ -865,35 +865,6 @@ describe('IgxTabs', () => {
             fixture.detectChanges();
             expect(tabsComp.selectedIndicator.nativeElement.style.visibility).toBe('hidden');
         });
-
-        it('should allow clicking on tabs without content to select them', fakeAsync(() => {
-            tick(100);
-            fixture.detectChanges();
-            
-            // Initially Tab 2 should be selected (based on the test component)
-            expect(tabItems[1].selected).toBe(true);
-            expect(tabsComp.selectedIndex).toBe(1);
-            
-            // Click on Tab 1 (which has no content)
-            headerElements[0].dispatchEvent(new Event('click', { bubbles: true }));
-            tick(200);
-            fixture.detectChanges();
-            
-            // Tab 1 should now be selected
-            expect(tabsComp.selectedIndex).toBe(0);
-            expect(tabItems[0].selected).toBe(true);
-            expect(tabItems[1].selected).toBe(false);
-            
-            // Click on Tab 3 (which also has no content)
-            headerElements[2].dispatchEvent(new Event('click', { bubbles: true }));
-            tick(200);
-            fixture.detectChanges();
-            
-            // Tab 3 should now be selected
-            expect(tabsComp.selectedIndex).toBe(2);
-            expect(tabItems[2].selected).toBe(true);
-            expect(tabItems[0].selected).toBe(false);
-        }));
     });
 
     describe('Tabs-only Mode With Initial Selection Set on Tabs Component Tests', () => {
@@ -924,67 +895,6 @@ describe('IgxTabs', () => {
             expect(headerElements[2].classList.contains(tabItemSelectedCssClass)).toBe(true);
         });
 
-        it('should allow keyboard navigation for tabs without content', fakeAsync(() => {
-            fixture.detectChanges();
-            tick(100);
-            
-            // Initially Tab 3 should be selected (selectedIndex = 2)
-            expect(tabsComp.selectedIndex).toBe(2);
-            expect(tabItems[2].selected).toBe(true);
-            
-            // Focus on Tab 3 and navigate left
-            headerElements[2].focus();
-            headerElements[2].dispatchEvent(KEY_LEFT_EVENT);
-            tick(200);
-            fixture.detectChanges();
-            
-            // Should move to Tab 2
-            expect(tabsComp.selectedIndex).toBe(1);
-            expect(tabItems[1].selected).toBe(true);
-            expect(tabItems[2].selected).toBe(false);
-        }));
-
-        it('should fire events when clicking on tabs without content', fakeAsync(() => {
-            // Set up a clean test with the first test group (tab 2 initially selected)
-            fixture = TestBed.createComponent(TabsTabsOnlyModeTest1Component);
-            tabsComp = fixture.componentInstance.tabs;
-            fixture.detectChanges();
-            tabItems = tabsComp.items.toArray();
-            headerElements = tabItems.map(item => item.headerComponent.nativeElement);
-            
-            const indexChangingSpy = spyOn(tabsComp.selectedIndexChanging, 'emit');
-            const indexChangeSpy = spyOn(tabsComp.selectedIndexChange, 'emit');
-            const itemChangeSpy = spyOn(tabsComp.selectedItemChange, 'emit');
-            
-            tick(100);
-            fixture.detectChanges();
-            
-            // Initially Tab 2 should be selected (index 1)
-            expect(tabsComp.selectedIndex).toBe(1);
-            
-            // Click on Tab 1 (which has no content)
-            headerElements[0].dispatchEvent(new Event('click', { bubbles: true }));
-            tick(200);
-            fixture.detectChanges();
-            
-            // Tab should be selected
-            expect(tabsComp.selectedIndex).toBe(0);
-            
-            // Events should have fired
-            expect(indexChangingSpy).toHaveBeenCalledWith({
-                owner: tabsComp,
-                cancel: false,
-                oldIndex: 1,
-                newIndex: 0
-            });
-            expect(indexChangeSpy).toHaveBeenCalledWith(0);
-            expect(itemChangeSpy).toHaveBeenCalledWith({
-                owner: tabsComp,
-                oldItem: tabItems[1],
-                newItem: tabItems[0]
-            });
-        }));
-
     });
 
     describe('Events', () => {