refactor(column-actions): bundle styles with component (#15765)

Author: SisIvanova

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

@@ -336,13 +336,13 @@
     //     @include chip($chip-theme-map);
     // }
 
-    @if is-used('igx-column-actions', $exclude) {
-        $column-actions-theme-map: column-actions-theme(
-            $schema: $schema,
-        );
-        $column-actions-theme-map: meta.call($theme-handler, $column-actions-theme-map);
-        @include column-actions($column-actions-theme-map);
-    }
+    // @if is-used('igx-column-actions', $exclude) {
+    //     $column-actions-theme-map: column-actions-theme(
+    //         $schema: $schema,
+    //     );
+    //     $column-actions-theme-map: meta.call($theme-handler, $column-actions-theme-map);
+    //     @include column-actions($column-actions-theme-map);
+    // }
 
     @if is-used('igx-combo', $exclude) {
         $combo-theme-map: combo-theme(

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

@@ -57,7 +57,7 @@
         label: 'body-1',
     ));
     // @include chip-typography();
-    @include column-actions-typography();
+    // @include column-actions-typography();
     @include date-range-typography();
     @include dialog-typography($categories: (
         title: 'h5',

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

@@ -60,7 +60,7 @@
     // @include chip-typography($categories: (
     //     text: 'subtitle-2'
     // ));
-    @include column-actions-typography();
+    // @include column-actions-typography();
     @include date-range-typography();
     @include dialog-typography($categories: (
         title: 'h6',

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

@@ -59,7 +59,7 @@
         label: 'body-2',
     ));
     // @include chip-typography();
-    @include column-actions-typography();
+    // @include column-actions-typography();
     @include date-range-typography();
     @include dialog-typography($categories: (
         title: 'h5',

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

@@ -43,7 +43,7 @@
     // @include card-typography();
     @include checkbox-typography();
     // @include chip-typography();
-    @include column-actions-typography();
+    // @include column-actions-typography();
     @include date-range-typography();
     @include dialog-typography();
     @include dock-manager-typography();

projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.scss

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

projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts

@@ -1,4 +1,4 @@
-import { Component, DoCheck, EventEmitter, HostBinding, Inject, Input, IterableDiffer, IterableDiffers, Output, Pipe, PipeTransform, QueryList, ViewChildren, booleanAttribute, forwardRef } from '@angular/core';
+import { Component, DoCheck, EventEmitter, HostBinding, Inject, Input, IterableDiffer, IterableDiffers, Output, Pipe, PipeTransform, QueryList, ViewChildren, ViewEncapsulation, booleanAttribute, forwardRef } from '@angular/core';
 import { ColumnDisplayOrder } from '../common/enums';
 import { ColumnType, GridType } from '../common/grid.interface';
 import { IColumnToggledEventArgs } from '../common/events';
@@ -19,7 +19,9 @@ let NEXT_ID = 0;
  */
 @Component({
     selector: 'igx-column-actions',
+    styleUrl: 'column-actions.component.css',
     templateUrl: './column-actions.component.html',
+    encapsulation: ViewEncapsulation.None,
     imports: [IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxCheckboxComponent, IgxButtonDirective, IgxRippleDirective, forwardRef(() => IgxColumnActionEnabledPipe), forwardRef(() => IgxFilterActionColumnsPipe), forwardRef(() => IgxSortActionColumnsPipe)]
 })
 export class IgxColumnActionsComponent implements DoCheck {

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

@@ -0,0 +1,53 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'styles/themes/standalone' as *;
+@use './light/tokens' as *;
+
+$_theme: $material;
+
+@include layer(base) {
+    @include b(igx-column-actions) {
+        display: flex;
+        flex-flow: column nowrap;
+        background: var-get($_theme, 'background-color');
+        box-shadow: var(--ig-elevation-8);
+        width: 100%;
+        flex: 1 1 auto;
+        min-width: rem(180px);
+
+        @include e(header-title) {
+            @include type-style(subtitle-1);
+
+            color: var-get($_theme, 'title-color');
+            margin: 0;
+            padding: rem(16px) rem(16px) rem(8px);
+        }
+
+        @include e(header-input) {
+            font-size: rem(16px);
+            margin: rem(-16px) 0 0 !important;
+            padding: rem(8px) rem(16px);
+        }
+
+        @include e(columns) {
+            display: flex;
+            flex-flow: column nowrap;
+            overflow-y: auto;
+            outline-style: none;
+        }
+
+        @include e(columns-item) {
+            padding: rem(4px) rem(16px);
+            min-height: rem(32px);
+        }
+
+        @include e(buttons) {
+            display: flex;
+            justify-content: flex-end;
+            padding: rem(8px) rem(16px);
+        }
+    }
+}

projects/igniteui-angular/src/lib/grids/column-actions/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-column-actions, $tokens, dark);

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

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