refactor(grid-toolbar): bundle styles with component

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

@@ -1,3 +1,4 @@
+@use 'sass:list';
 @use 'sass:map';
 @use 'igniteui-theming/sass/bem' as *;
 @use 'igniteui-theming/sass/themes' as *;

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

@@ -440,13 +440,13 @@
     //     @include grid-summary($grid-summary-theme-map);
     // }
 
-    @if is-used('igx-grid-toolbar', $exclude) {
-        $grid-toolbar-theme-map: grid-toolbar-theme(
-            $schema: $schema,
-        );
-        $grid-toolbar-theme-map: meta.call($theme-handler, $grid-toolbar-theme-map);
-        @include grid-toolbar($grid-toolbar-theme-map);
-    }
+    // @if is-used('igx-grid-toolbar', $exclude) {
+    //     $grid-toolbar-theme-map: grid-toolbar-theme(
+    //         $schema: $schema,
+    //     );
+    //     $grid-toolbar-theme-map: meta.call($theme-handler, $grid-toolbar-theme-map);
+    //     @include grid-toolbar($grid-toolbar-theme-map);
+    // }
 
     @if is-used('igx-pivot-data-selector', $exclude) {
         $pivot-data-selector-theme-map: pivot-data-selector-theme(

projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.scss

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

projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts

@@ -6,6 +6,7 @@ import {
     Inject,
     Input,
     OnDestroy,
+    ViewEncapsulation,
     booleanAttribute
 } from '@angular/core';
 import { Subscription } from 'rxjs';
@@ -37,6 +38,8 @@ import { NgTemplateOutlet } from '@angular/common';
 @Component({
     selector: 'igx-grid-toolbar',
     templateUrl: './grid-toolbar.component.html',
+    styleUrl: 'grid-toolbar.component.css',
+    encapsulation: ViewEncapsulation.None,
     providers: [{ provide: IgxToolbarToken, useExisting: IgxGridToolbarComponent }],
     imports: [IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, NgTemplateOutlet, IgxLinearProgressBarComponent]
 })

projects/igniteui-angular/src/lib/grids/toolbar/themes/_base.scss

@@ -0,0 +1,155 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
+@use 'styles/themes/standalone' as *;
+@use './light/list/tokens' as list;
+@use './light/toolbar/tokens' as toolbar;
+
+$_theme: toolbar.$base;
+$_theme-dd: list.$base;
+
+@include layer(base) {
+    @include b(igx-grid-toolbar) {
+        @include sizable();
+
+        --component-size: var(--ig-size, var(--ig-size-large));
+        position: relative;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        grid-row: 1;
+        font-size: rem(16px);
+        border-bottom: rem(1px) solid var-get($_theme, 'border-color');
+        background: var-get($_theme, 'background-color');
+        height: auto;
+        min-height: var-get($_theme, 'size');
+        padding-block: 0;
+        padding-inline-start: pad-inline(rem(12px), rem(16px), rem(24px));
+        padding-inline-end: pad-inline(rem(8px), rem(12px), rem(16px));
+
+        [igxButton] {
+            margin-inline-start: pad-inline(rem(8px), rem(12px), rem(16px));
+
+            &:first-of-type {
+                margin-inline-start: 0;
+            }
+
+            &:last-of-type {
+                margin-inline-end: 0;
+            }
+        }
+
+        &[dir='rtl'] {
+            text-align: end;
+
+            [igxButton] {
+                margin-inline-start: 0;
+                margin-inline-end: rem(8);
+
+                &:last-child {
+                    margin-inline-end: 0;
+                }
+            }
+        }
+
+        @include e(title) {
+            @include ellipsis();
+
+            color: var-get($_theme, 'title-text-color');
+            flex: 1 1 auto;
+            max-width: 40ch;
+            margin-inline-end: rem(16px);
+
+            &:empty {
+                display: none;
+            }
+
+            &:empty + .igx-grid-toolbar__custom-content:empty {
+                + igx-grid-toolbar-actions {
+                    width: 100%;
+                    margin-inline-start: 0;
+                    justify-content: flex-end;
+                }
+            }
+        }
+
+        @include e(custom-content) {
+            display: flex;
+            flex-wrap: wrap;
+            flex-grow: 1;
+            justify-content: flex-end;
+            margin-inline-end: rem(16px);
+
+            &:empty {
+                display: none;
+            }
+        }
+
+        @include e(actions) {
+            display: flex;
+            align-items: center;
+            flex-flow: row wrap;
+            margin-inline-start: auto;
+            gap: rem(16px);
+
+            > * {
+                display: flex;
+            }
+
+            &:empty {
+                display: none;
+            }
+        }
+
+        @include e(progress-bar) {
+            position: absolute;
+            width: 100%;
+            inset-inline-start: 0;
+            inset-inline-end: 0;
+            bottom: rem(-1px);
+            height: rem(2px);
+            overflow: hidden;
+            background: var-get($_theme, 'background-color');
+
+            igx-linear-bar > * {
+                border-radius: 0;
+
+                &:first-child > div {
+                    background: color($color: 'secondary');
+                }
+            }
+        }
+
+        @include e(dropdown){
+            position: relative;
+        }
+
+        @include e(dd-list){
+            list-style: none;
+            background: var-get($_theme-dd, 'dropdown-background');
+            margin: 0;
+            padding: 0;
+            box-shadow: var(--ig-elevation-8);
+        }
+
+        @include e(dd-list-items){
+            cursor: pointer;
+            position: relative;
+            padding: rem(8px) rem(16px);
+            color: var-get($_theme-dd, 'item-text-color');
+            white-space: nowrap;
+
+            &:hover {
+                background: var-get($_theme-dd, 'item-hover-background');
+                color: var-get($_theme-dd, 'item-hover-text-color');
+            }
+
+            &:focus {
+                background: var-get($_theme-dd, 'item-focus-background');
+                color: var-get($_theme-dd, 'item-focus-text-color');
+            }
+        }
+    }
+}

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

@@ -0,0 +1,2 @@
+@forward 'list';
+@forward 'toolbar';

projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/list/_index.scss

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

projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/list/_tokens.scss

@@ -0,0 +1,11 @@
+@use 'sass:list';
+@use 'styles/themes/standalone' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/grid-toolbar' as *;
+
+$props: ('background-color', 'title-text-color', 'border-color', 'size');
+
+$material: list.nth(split-map(digest-schema($dark-material-grid-toolbar), $props), 2);
+$bootstrap: list.nth(split-map(digest-schema($dark-bootstrap-grid-toolbar), $props), 2);
+$fluent: list.nth(split-map(digest-schema($dark-fluent-grid-toolbar), $props), 2);
+$indigo: list.nth(split-map(digest-schema($dark-indigo-grid-toolbar), $props), 2);

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

@@ -0,0 +1,7 @@
+@use 'sass:meta';
+@use 'sass:map';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+
+$toolbar-tokens: map.remove(meta.module-variables(tokens), 'props');
+@include themes(igx-grid-toolbar, $toolbar-tokens, dark);

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

@@ -0,0 +1,11 @@
+@use 'sass:list';
+@use 'styles/themes/standalone' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/grid-toolbar' as *;
+
+$props: ('background-color', 'title-text-color', 'border-color', 'size');
+
+$material: list.nth(split-map(digest-schema($dark-material-grid-toolbar), $props), 1);
+$bootstrap: list.nth(split-map(digest-schema($dark-bootstrap-grid-toolbar), $props), 1);
+$fluent: list.nth(split-map(digest-schema($dark-fluent-grid-toolbar), $props), 1);
+$indigo: list.nth(split-map(digest-schema($dark-indigo-grid-toolbar), $props), 1);

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

@@ -0,0 +1,2 @@
+@forward 'list';
+@forward 'toolbar';

projects/igniteui-angular/src/lib/grids/toolbar/themes/light/list/_index.scss

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

projects/igniteui-angular/src/lib/grids/toolbar/themes/light/list/_tokens.scss

@@ -0,0 +1,12 @@
+@use 'sass:list';
+@use 'styles/themes/standalone' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/grid-toolbar' as *;
+
+$props: ('background-color', 'title-text-color', 'border-color', 'size');
+
+$base: list.nth(split-map(digest-schema($light-grid-toolbar), $props), 2);
+$material: list.nth(split-map(digest-schema($material-grid-toolbar), $props), 2);
+$bootstrap: list.nth(split-map(digest-schema($bootstrap-grid-toolbar), $props), 2);
+$fluent: list.nth(split-map(digest-schema($fluent-grid-toolbar), $props), 2);
+$indigo: list.nth(split-map(digest-schema($indigo-grid-toolbar), $props), 2);

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

@@ -0,0 +1,7 @@
+@use 'sass:meta';
+@use 'sass:map';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+
+$toolbar-tokens: map.remove(meta.module-variables(tokens), 'props');
+@include themes(igx-grid-toolbar, $toolbar-tokens, light);

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

@@ -0,0 +1,12 @@
+@use 'sass:list';
+@use 'styles/themes/standalone' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/grid-toolbar' as *;
+
+$props: ('background-color', 'title-text-color', 'border-color', 'size');
+
+$base: list.nth(split-map(digest-schema($light-grid-toolbar), $props), 1);
+$material: list.nth(split-map(digest-schema($material-grid-toolbar), $props), 1);
+$bootstrap: list.nth(split-map(digest-schema($bootstrap-grid-toolbar), $props), 1);
+$fluent: list.nth(split-map(digest-schema($fluent-grid-toolbar), $props), 1);
+$indigo: list.nth(split-map(digest-schema($indigo-grid-toolbar), $props), 1);

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

@@ -0,0 +1 @@
+@forward 'indigo';

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

@@ -0,0 +1,12 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'styles/themes/standalone' as *;
+
+@include themed-block(igx-grid-toolbar, indigo) {
+    padding-inline-end: pad-inline(rem(12px), rem(16px), rem(24px));
+
+    @include e(title) {
+        // should be fixed
+        @include type-style(h6);
+    }
+}