refactor(navbar): bundle styles with component

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

@@ -504,13 +504,13 @@
         @include label($label-theme-map);
     }
 
-    @if is-used('igx-navbar', $exclude) {
-        $navbar-theme-map: navbar-theme(
-            $schema: $schema,
-        );
-        $navbar-theme-map: meta.call($theme-handler, $navbar-theme-map);
-        @include navbar($navbar-theme-map);
-    }
+    // @if is-used('igx-navbar', $exclude) {
+    //     $navbar-theme-map: navbar-theme(
+    //         $schema: $schema,
+    //     );
+    //     $navbar-theme-map: meta.call($theme-handler, $navbar-theme-map);
+    //     @include navbar($navbar-theme-map);
+    // }
 
     @if is-used('igx-nav-drawer', $exclude) {
         $navdrawer-theme-map: navdrawer-theme(

projects/igniteui-angular/src/lib/navbar/navbar.component.scss

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

projects/igniteui-angular/src/lib/navbar/navbar.component.ts

@@ -7,7 +7,8 @@ import {
     Output,
     Directive,
     ContentChild,
-    booleanAttribute
+    booleanAttribute,
+    ViewEncapsulation
 } from '@angular/core';
 
 import { IgxIconComponent } from '../icon/icon.component';
@@ -55,6 +56,8 @@ let NEXT_ID = 0;
         }
     `
     ],
+    styleUrl: 'navbar.component.css',
+    encapsulation: ViewEncapsulation.None,
     imports: [NgIf, IgxIconComponent]
 })
 

projects/igniteui-angular/src/lib/navbar/themes/_base.scss

@@ -0,0 +1,110 @@
+@use 'igniteui-theming/sass/animations/easings' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'styles/themes/standalone' as *;
+@use 'light/tokens' as *;
+
+$_theme: $material;
+
+@include layer(base) {
+    %igx-navbar-title {
+        @include type-style(h6);
+        @include line-clamp(4, true, true);
+        margin: 0;
+        flex-grow: 1;
+        user-select: text;
+        display: flex;
+        flex-direction: row;
+    }
+
+    %igx-navbar-icon {
+        display: flex;
+        align-items: center;
+
+        igx-icon,
+        igc-icon {
+            --component-size: 3;
+            cursor: pointer;
+        }
+
+        > igx-icon,
+        > igc-icon {
+            transition: color .15s $out-quad;
+            color: var-get($_theme, 'idle-icon-color');
+
+            &:hover {
+                color: var-get($_theme, 'hover-icon-color');
+            }
+
+            user-select: none;
+        }
+    }
+
+    igx-navbar-action,
+    [igxNavbarAction] {
+        display: flex;
+        align-items: center;
+    }
+
+    igx-navbar-title,
+    [igxNavbarTitle] {
+        @extend %igx-navbar-title;
+
+        align-items: center;
+    }
+
+    @include b(igx-navbar) {
+        display: flex;
+        align-items: center;
+        position: relative;
+        flex-flow: row nowrap;
+        gap: rem(16px);
+        width: 100%;
+        min-height: rem(56px);
+        max-height: rem(128px);
+        padding-inline: rem(16px);
+        background: var-get($_theme, 'background');
+        color: var-get($_theme, 'text-color');
+        box-shadow: var-get($_theme, 'elevation');
+        z-index: 4;
+        overflow: hidden;
+        border-bottom: rem(1px) solid var-get($_theme, 'border-color');
+
+        igx-avatar {
+            --ig-size: 1;
+        }
+
+        @include e(title) {
+            @extend %igx-navbar-title;
+        }
+
+        @include e(left) {
+            @extend %igx-navbar-icon;
+
+            &:not(:empty) {
+                margin-inline-end: rem(16px);
+            }
+
+            &:empty {
+                display: none;
+            }
+        }
+
+        @include e(middle) {
+            @extend %igx-navbar-icon;
+
+            flex-grow: 1;
+        }
+
+        @include e(right) {
+            @extend %igx-navbar-icon;
+
+            gap: rem(16px);
+
+            &:empty {
+                display: none;
+            }
+        }
+    }
+}

projects/igniteui-angular/src/lib/navbar/themes/dark/_index.scss

@@ -0,0 +1,6 @@
+@use 'sass:meta';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+
+$tokens: meta.module-variables(tokens);
+@include themes(igx-navbar, $tokens, dark);

projects/igniteui-angular/src/lib/navbar/themes/dark/_tokens.scss

@@ -0,0 +1,7 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/navbar' as *;
+
+$material: digest-schema($dark-material-navbar);
+$bootstrap: digest-schema($dark-bootstrap-navbar);
+$fluent: digest-schema($dark-fluent-navbar);
+$indigo: digest-schema($dark-indigo-navbar);

projects/igniteui-angular/src/lib/navbar/themes/light/_index.scss

@@ -0,0 +1,6 @@
+@use 'sass:meta';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+
+$tokens: meta.module-variables(tokens);
+@include themes(igx-navbar, $tokens, light);

projects/igniteui-angular/src/lib/navbar/themes/light/_tokens.scss

@@ -0,0 +1,8 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/navbar' as *;
+
+$base: digest-schema($light-navbar);
+$material: digest-schema($material-navbar);
+$bootstrap: digest-schema($bootstrap-navbar);
+$fluent: digest-schema($fluent-navbar);
+$indigo: digest-schema($indigo-navbar);

projects/igniteui-angular/src/lib/navbar/themes/shared/_bootstrap.scss

@@ -0,0 +1,26 @@
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/bem' as *;
+@use 'styles/themes/standalone' as *;
+
+@include themed-block(igx-navbar, bootstrap) {
+    @include e(title) {
+        @include type-style(h5);
+    }
+
+    igx-navbar-title,
+    [igxNavbarTitle] {
+        @include type-style(h5);
+    }
+
+    igc-input,
+    igc-icon-button {
+        --ig-size: 1;
+    }
+
+    [igxButton],
+    igc-button,
+    [igxIconButton],
+    igx-input-group {
+        --ig-size: 2;
+    }
+}

projects/igniteui-angular/src/lib/navbar/themes/shared/_fluent.scss

@@ -0,0 +1,18 @@
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/bem' as *;
+@use 'styles/themes/standalone' as *;
+
+@include themed-block(igx-navbar, fluent) {
+    @include e(title) {
+        @include type-style(subtitle-2);
+    }
+
+    igx-navbar-title,
+    [igxNavbarTitle] {
+        @include type-style(subtitle-2);
+    }
+
+    igx-input-group {
+        --ig-size: 2;
+    }
+}

projects/igniteui-angular/src/lib/navbar/themes/shared/_index.scss

@@ -0,0 +1,4 @@
+@forward 'material';
+@forward 'bootstrap';
+@forward 'fluent';
+@forward 'indigo';

projects/igniteui-angular/src/lib/navbar/themes/shared/_indigo.scss

@@ -0,0 +1,44 @@
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/bem' as *;
+@use 'styles/themes/standalone' as *;
+
+@include themed-block(igx-navbar, indigo) {
+    %icon-size {
+        igx-icon,
+        igc-icon {
+            --component-size: 2;
+
+            margin-inline: rem(6px);
+        }
+    }
+
+    igx-avatar,
+    igc-icon-button,
+    [igxIconButton] {
+        --ig-size: 2;
+    }
+
+    igx-navbar-title,
+    [igxNavbarTitle] {
+        @include type-style(h5);
+    }
+
+    @include e(title) {
+        @extend %icon-size;
+        @include type-style(h5);
+    }
+
+    @include e(right) {
+        @extend %icon-size;
+
+        gap: rem(8px);
+    }
+
+    @include e(left) {
+        @extend %icon-size;
+
+        &:not(:empty) {
+            margin-inline-end: unset;
+        }
+    }
+}

projects/igniteui-angular/src/lib/navbar/themes/shared/_material.scss

@@ -0,0 +1,8 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'styles/themes/standalone' as *;
+
+@include themed-block(igx-navbar, material) {
+    igx-input-group {
+        --ig-size: 1;
+    }
+}