refactor(drop-down): bundle styles with component (#15630)

Author: SisIvanova

projects/igniteui-angular/src/lib/action-strip/action-strip.component.spec.ts

@@ -8,7 +8,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxIconComponent } from '../icon/icon.component';
 
 const ACTION_STRIP_CONTAINER_CSS = 'igx-action-strip__actions';
-const DROP_DOWN_LIST = 'igx-drop-down__list';
+const DROP_DOWN_LIST = 'igx-drop-down';
 
 describe('igxActionStrip', () => {
     let fixture;

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

@@ -80,11 +80,6 @@ export class CarouselHammerConfig extends HammerGestureConfig {
     ],
     selector: 'igx-carousel',
     templateUrl: 'carousel.component.html',
-    styles: [`
-    :host {
-        display: block;
-        outline-style: none;
-    }`],
     styleUrl: 'carousel.component.css',
     encapsulation: ViewEncapsulation.None,
     imports: [IgxButtonDirective, IgxIconComponent, NgClass, NgTemplateOutlet]

projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts

@@ -1,5 +1,7 @@
 import {
-    ChangeDetectorRef, Component, ElementRef, Inject, QueryList, OnDestroy, AfterViewInit, ContentChildren, Input, booleanAttribute
+    ChangeDetectorRef, Component, ElementRef, Inject, QueryList, OnDestroy, AfterViewInit, ContentChildren, Input, booleanAttribute,
+    ViewEncapsulation,
+    HostBinding
 } from '@angular/core';
 import { IgxComboBase, IGX_COMBO_COMPONENT } from './combo.common';
 import { IDropDownBase, IGX_DROPDOWN_BASE } from '../drop-down/drop-down.common';
@@ -17,6 +19,8 @@ import { IgxToggleDirective } from '../directives/toggle/toggle.directive';
 @Component({
     selector: 'igx-combo-drop-down',
     templateUrl: '../drop-down/drop-down.component.html',
+    styleUrl: '../drop-down/drop-down.component.css',
+    encapsulation: ViewEncapsulation.None,
     providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }],
     imports: [IgxToggleDirective]
 })

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

@@ -1,7 +1,8 @@
 import { DOCUMENT, NgClass, NgTemplateOutlet } from '@angular/common';
 import {
     AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnInit, OnDestroy,
-    Optional, Inject, Injector, ViewChild, Input, Output, EventEmitter, HostListener, DoCheck, booleanAttribute
+    Optional, Inject, Injector, ViewChild, Input, Output, EventEmitter, HostListener, DoCheck, booleanAttribute,
+    ViewEncapsulation
 } from '@angular/core';
 
 import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -95,6 +96,7 @@ const diffInSets = (set1: Set<any>, set2: Set<any>): any[] => {
 @Component({
     selector: 'igx-combo',
     templateUrl: 'combo.component.html',
+    encapsulation: ViewEncapsulation.None,
     providers: [
         IgxComboAPIService,
         { provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent },

projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss

@@ -81,7 +81,7 @@
     $size: null
 ) {
     $name: 'igx-drop-down';
-    $selector: '.igx-drop-down__list, .igx-grid-toolbar__dd-list';
+    $selector: '.igx-drop-down, .igx-grid-toolbar__dd-list';
     $drop-down-schema: ();
 
     @if map.has-key($schema, 'drop-down') {

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

@@ -408,13 +408,13 @@
         @include rating($rating-theme-map);
     }
 
-    @if is-used('igx-drop-down', $exclude) {
-        $drop-down-theme-map: drop-down-theme(
-            $schema: $schema,
-        );
-        $drop-down-theme-map: meta.call($theme-handler, $drop-down-theme-map);
-        @include drop-down($drop-down-theme-map);
-    }
+    // @if is-used('igx-drop-down', $exclude) {
+    //     $drop-down-theme-map: drop-down-theme(
+    //         $schema: $schema,
+    //     );
+    //     $drop-down-theme-map: meta.call($theme-handler, $drop-down-theme-map);
+    //     @include drop-down($drop-down-theme-map);
+    // }
 
     // @if is-used('igx-expansion-panel', $exclude) {
     //     $expansion-panel-theme-map: expansion-panel-theme(

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

@@ -64,11 +64,11 @@
         content: 'body-1'
     ));
     @include dock-manager-typography();
-    @include drop-down-typography($categories: (
-        header: 'overline',
-        item: 'body-2',
-        select-item: 'body-2'
-    ));
+    // @include drop-down-typography($categories: (
+    //     header: 'overline',
+    //     item: 'body-2',
+    //     select-item: 'body-2'
+    // ));
     // @include expansion-panel-typography($categories: (
     //     title: 'h5',
     //     description: 'subtitle-2',

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

@@ -67,11 +67,11 @@
         content: 'body-2'
     ));
     @include dock-manager-typography();
-    @include drop-down-typography($categories: (
-        header: 'subtitle-2',
-        item: 'body-2',
-        select-item: 'body-2'
-    ));
+    // @include drop-down-typography($categories: (
+    //     header: 'subtitle-2',
+    //     item: 'body-2',
+    //     select-item: 'body-2'
+    // ));
     // @include expansion-panel-typography($categories: (
     //     title: 'subtitle-1',
     //     description: 'body-2',

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

@@ -66,7 +66,7 @@
         content: 'body-1',
     ));
     @include dock-manager-typography();
-    @include drop-down-typography();
+    // @include drop-down-typography();
     // @include expansion-panel-typography($categories: (
     //     title: 'body-2',
     //     body: 'body-2',

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

@@ -47,7 +47,7 @@
     @include date-range-typography();
     @include dialog-typography();
     @include dock-manager-typography();
-    @include drop-down-typography();
+    // @include drop-down-typography();
     // @include expansion-panel-typography();
     @include excel-filtering-typography();
     @include icon-button-typography();