refactor(drop-down): bundle styles with component

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();

projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts

@@ -13,7 +13,7 @@ import { ConnectedPositioningStrategy, VerticalAlignment, HorizontalAlignment }
 import { IgxRippleDirective } from '../ripple/ripple.directive';
 import { IgxIconComponent } from '../../icon/icon.component';
 
-const CSS_CLASS_DROPDOWNLIST = 'igx-drop-down__list';
+const CSS_CLASS_DROPDOWNLIST = 'igx-drop-down';
 const CSS_CLASS_DROPDOWNLIST_SCROLL = 'igx-drop-down__list-scroll';
 const CSS_CLASS_DROP_DOWN_ITEM = 'igx-drop-down__item';
 const CSS_CLASS_DROP_DOWN_ITEM_FOCUSED = 'igx-drop-down__item--focused';

projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts

@@ -98,12 +98,6 @@ export abstract class IgxDropDownBaseDirective implements IDropDownList, OnInit
     @HostBinding('style.maxHeight')
     public maxHeight = null;
 
-    /**
-     * @hidden @internal
-     */
-    @HostBinding('class.igx-drop-down')
-    public cssClass = true;
-
     /**
      * Get all non-header items
      *

projects/igniteui-angular/src/lib/drop-down/drop-down.component.html

@@ -1,4 +1,4 @@
-<div class="igx-drop-down__list" [style.width]="width"
+<div class="igx-drop-down" [style.width]="width"
     igxToggle
     (appended)="onToggleContentAppended($event)"
     (opening)="onToggleOpening($event)" (opened)="onToggleOpened()"

projects/igniteui-angular/src/lib/drop-down/drop-down.component.scss

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

projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts

@@ -18,8 +18,7 @@ import { IgxSelectionAPIService } from '../core/selection';
 import { IgxButtonDirective } from '../directives/button/button.directive';
 import { ConnectedPositioningStrategy, HorizontalAlignment, OverlaySettings, VerticalAlignment } from '../services/public_api';
 
-const CSS_CLASS_DROP_DOWN_BASE = 'igx-drop-down';
-const CSS_CLASS_LIST = 'igx-drop-down__list';
+const CSS_CLASS_LIST = 'igx-drop-down';
 const CSS_CLASS_SCROLL = 'igx-drop-down__list-scroll';
 const CSS_CLASS_ITEM = 'igx-drop-down__item';
 const CSS_CLASS_INNER_SPAN = 'igx-drop-down__inner';
@@ -328,7 +327,7 @@ describe('IgxDropDown ', () => {
                 expect(focusedItem.componentInstance.itemIndex).toEqual(0);
                 expect(dropdown.collapsed).toEqual(false);
 
-                let dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`));
+                let dropdownElement = fixture.debugElement.query(By.css('igx-drop-down'));
                 UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement);
                 tick();
                 fixture.detectChanges();
@@ -346,7 +345,7 @@ describe('IgxDropDown ', () => {
                 dropdown.toggle();
                 tick();
                 fixture.detectChanges();
-                dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`));
+                dropdownElement = fixture.debugElement.query(By.css('igx-drop-down'));
                 focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`));
                 UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement);
                 tick();
@@ -376,7 +375,7 @@ describe('IgxDropDown ', () => {
                 let focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`));
                 expect(focusedItem).toBeDefined();
 
-                const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`));
+                const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down'));
                 UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement);
                 fixture.detectChanges();
                 focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`));
@@ -397,7 +396,7 @@ describe('IgxDropDown ', () => {
                 dropdown.toggle();
                 tick();
                 fixture.detectChanges();
-                const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`));
+                const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down'));
                 dropdownElement.triggerEventHandler('keydown', UIInteractions.getKeyboardEvent('keydown', 'ArrowDown'));
                 tick();
                 fixture.detectChanges();
@@ -470,7 +469,7 @@ describe('IgxDropDown ', () => {
 
                 const selectedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_SELECTED}`));
                 expect(selectedItem.componentInstance.itemIndex).toEqual(10);
-                const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`));
+                const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down'));
                 UIInteractions.triggerEventHandlerKeyDown('Home', dropdownElement);
                 tick();
                 fixture.detectChanges();
@@ -575,7 +574,7 @@ describe('IgxDropDown ', () => {
             }));
             it('should provide correct event argument when closing through keyboard', fakeAsync(() => {
                 spyOn(dropdown.closing, 'emit').and.callThrough();
-                const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`));
+                const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down'));
 
                 dropdown.toggle();
                 tick();
@@ -739,7 +738,7 @@ describe('IgxDropDown ', () => {
                 const selectedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_SELECTED}`));
                 expect(selectedItem.componentInstance.itemIndex).toEqual(10);
 
-                const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`));
+                const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down'));
                 UIInteractions.triggerEventHandlerKeyDown('End', dropdownElement);
                 tick();
                 fixture.detectChanges();
@@ -767,7 +766,7 @@ describe('IgxDropDown ', () => {
                 tick();
                 fixture.detectChanges();
 
-                const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`));
+                const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down'));
                 UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement);
                 tick();
                 fixture.detectChanges();
@@ -820,7 +819,7 @@ describe('IgxDropDown ', () => {
                 fixture.detectChanges();
                 expect(dropdown.items[10].focused).toEqual(true);
 
-                const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`));
+                const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down'));
                 UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement);
                 fixture.detectChanges();
                 expect(dropdown.items[11].focused).toEqual(true);

projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts

@@ -15,7 +15,8 @@ import {
     EventEmitter,
     SimpleChanges,
     booleanAttribute,
-    Inject
+    Inject,
+    ViewEncapsulation
 } from '@angular/core';
 import { IgxToggleDirective, ToggleViewEventArgs } from '../directives/toggle/toggle.directive';
 import { IgxDropDownItemComponent } from './drop-down-item.component';
@@ -53,6 +54,13 @@ import { ConnectedPositioningStrategy } from '../services/public_api';
 @Component({
     selector: 'igx-drop-down',
     templateUrl: './drop-down.component.html',
+    styles: [`
+        :host {
+            position: absolute;
+        }
+    `],
+    styleUrl: 'drop-down.component.css',
+    encapsulation: ViewEncapsulation.None,
     providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxDropDownComponent }],
     imports: [IgxToggleDirective]
 })