refactor(bottom-nav): bundle styles with component (#15520)

Author: simeonoff

projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss

@@ -160,13 +160,13 @@
     //     @include badge($badge-theme-map);
     // }
 
-    @if is-used('igx-bottom-nav', $exclude) {
-        $bottom-nav-theme-map: bottom-nav-theme(
-            $schema: $schema,
-        );
-        $bottom-nav-theme-map: meta.call($theme-handler, $bottom-nav-theme-map);
-        @include bottom-nav($bottom-nav-theme-map);
-    }
+    // @if is-used('igx-bottom-nav', $exclude) {
+    //     $bottom-nav-theme-map: bottom-nav-theme(
+    //         $schema: $schema,
+    //     );
+    //     $bottom-nav-theme-map: meta.call($theme-handler, $bottom-nav-theme-map);
+    //     @include bottom-nav($bottom-nav-theme-map);
+    // }
 
     @if is-used('igx-button', $exclude) {
         $button-theme-map: button-theme(

projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss

@@ -37,7 +37,7 @@
 @mixin typography($type-scale) {
     @include badge-typography();
     // @include banner-typography();
-    @include bottom-nav-typography();
+    // @include bottom-nav-typography();
     @include button-typography();
     @include button-group-typography();
     @include calendar-typography($categories: (

projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss

@@ -38,7 +38,7 @@
     // @include banner-typography($categories: (
     //     message: 'caption'
     // ));
-    @include bottom-nav-typography();
+    // @include bottom-nav-typography();
     @include button-typography();
     @include button-group-typography();
     @include calendar-typography($categories: (

projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss

@@ -38,7 +38,7 @@
         text: 'button',
     ));
     // @include banner-typography();
-    @include bottom-nav-typography();
+    // @include bottom-nav-typography();
     @include button-typography();
     @include button-group-typography($categories: (
         text: 'body-2',

projects/igniteui-angular/src/lib/core/styles/typography/_material.scss

@@ -36,7 +36,7 @@
 @mixin typography() {
     @include badge-typography();
     // @include banner-typography();
-    @include bottom-nav-typography();
+    // @include bottom-nav-typography();
     @include button-typography();
     @include button-group-typography();
     @include calendar-typography();

projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav-content.component.ts

@@ -1,10 +1,11 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component, HostBinding, ViewEncapsulation } from '@angular/core';
 import { IgxTabContentDirective } from '../tab-content.directive';
 import { IgxTabContentBase } from '../tabs.base';
 
 @Component({
     selector: 'igx-bottom-nav-content',
     templateUrl: 'bottom-nav-content.component.html',
+    encapsulation: ViewEncapsulation.None,
     providers: [{ provide: IgxTabContentBase, useExisting: IgxBottomNavContentComponent }],
     imports: []
 })

projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav-header.component.ts

@@ -1,10 +1,11 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component, HostBinding, ViewEncapsulation } from '@angular/core';
 import { IgxTabHeaderDirective } from '../tab-header.directive';
 import { IgxTabHeaderBase } from '../tabs.base';
 
 @Component({
     selector: 'igx-bottom-nav-header',
     templateUrl: 'bottom-nav-header.component.html',
+    encapsulation: ViewEncapsulation.None,
     providers: [{ provide: IgxTabHeaderBase, useExisting: IgxBottomNavHeaderComponent }],
     standalone: true
 })
@@ -24,7 +25,5 @@ export class IgxBottomNavHeaderComponent extends IgxTabHeaderDirective {
 
     /** @hidden */
     @HostBinding('class.igx-bottom-nav__menu-item')
-    public get cssClass(): boolean {
-        return (!this.tab.disabled && !this.tab.selected);
-    }
+    public readonly cssClass = 'igx-bottom-nav__menu-item';
 }

projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav-item.component.ts

@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { IgxTabItemDirective } from '../tab-item.directive';
 
 @Component({
     selector: 'igx-bottom-nav-item',
     templateUrl: 'bottom-nav-item.component.html',
+    encapsulation: ViewEncapsulation.None,
     providers: [{ provide: IgxTabItemDirective, useExisting: IgxBottomNavItemComponent }],
     standalone: true
 })

projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav.component.scss

@@ -0,0 +1,4 @@
+@use 'themes/base';
+@use 'themes/shared';
+@use 'themes/light';
+@use 'themes/dark';

projects/igniteui-angular/src/lib/tabs/bottom-nav/bottom-nav.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding, ViewEncapsulation } from '@angular/core';
 import { IgxTabsBase } from '../tabs.base';
 import { IgxTabsDirective } from '../tabs.directive';
 import { NgTemplateOutlet } from '@angular/common';
@@ -41,15 +41,22 @@ let NEXT_BOTTOM_NAV_ITEM_ID = 0;
 @Component({
     selector: 'igx-bottom-nav',
     templateUrl: 'bottom-nav.component.html',
+    styleUrl: 'bottom-nav.component.css',
+    encapsulation: ViewEncapsulation.None,
     providers: [{ provide: IgxTabsBase, useExisting: IgxBottomNavComponent }],
     imports: [NgTemplateOutlet]
 })
 export class IgxBottomNavComponent extends IgxTabsDirective {
     /** @hidden */
     public override disableAnimation = true;
+
     /** @hidden */
     protected override componentName = 'igx-bottom-nav';
 
+    /** @hidden @internal */
+    @HostBinding('class.igx-bottom-nav')
+    public readonly hostClass = 'igx-bottom-nav';
+
     /** @hidden */
     protected getNextTabId() {
         return NEXT_BOTTOM_NAV_ITEM_ID++;