Merge branch 'master' into SAndreeva/calendar-views-poc

IgniteUI · Feb 14, 2019 · e333cde · e333cde
2 parents ed99de2 + c56aac9
commit e333cde
Show file tree

Hide file tree

Showing 27 changed files with 3,209 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,7 +12,20 @@ All notable changes for each version of this project will be documented in this
 - **New component** `IgxHierarchicalGrid`:
     - Provides the ability to represent and manipulate hierarchical data in which each level has a different schema. Each level is represented by a component derived from **igx-grid** and supports most of its functionality. Read up more information about the IgxHierarchicalGrid in the official [documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid.html) or the [ReadMe](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/grids/hierarchical-grid/README.md)
 
+- **New component** The `igxSelect` provides an input with dropdown list allowing selection of a single item.
+    ```html
+    <igx-select #select1 [placeholder]="'Pick One'">
+        <label igxLabel>Sample Label</label>
+        <igx-select-item *ngFor="let item of items" [value]="item.field">
+            {{ item.field }}
+        </igx-select-item>
+    </igx-select>
+    ```
+
+[documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/select.html) or the [ReadMe](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/select/README.md)
+
 - **New directive** `igxAutocomplete` - new directive that provides a way to enhance a text input by showing a panel of suggested options, provided by the developer. More information about the IgxAutocomplete is available in the official [documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/autocomplete.html) or the [ReadMe](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/autcomomplete/README.md).
+
     ```html
     <input igxInput type="text" [igxAutocomplete]="townsPanel" />
     <igx-drop-down #townsPanel>

diff --git a/README.md b/README.md
@@ -45,6 +45,7 @@ Current list of controls include:
 | **navbar**            | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/navbar/README.md)                         | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navbar.html)            |	  | **dataContainer**       |     Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/data-operations/README-DATACONTAINER.md)  |                                                                                                           |
 | **navigation drawer** | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/navigation-drawer/README.md)              | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navdrawer.html)         |     |                         |                   |                                                                                                                                               |                                                                                                           | 			
 | **radio**             | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/radio/README.md)                          | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/radio_button.html)      |     |                         |                   |                                                                                                                                               |                                                                                                           | 
+| **select**            | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/select/README.md)                         | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/select.html)            |     |                         |                   |                                                                                                                                               |                                                                                                           | 
 | **slider**            | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/slider/README.md)                         | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/slider.html)            |     |                         |                   |                                                                                                                                               |                                                                                                           | 
 | **snackbar**          | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/snackbar/README.md)                       | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/snackbar.html)          |     |                         |                   |                                                                                                                                               |                                                                                                           |
 | **switch**            | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/switch/README.md)                         | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/switch.html)            |     |                         |                   |                                                                                                                                               |                                                                                                           |

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss
@@ -15,6 +15,11 @@
         @extend %igx-drop-down__list !optional;
     }
 
+    @include e(list, $m: select) {
+        @extend %igx-drop-down__list !optional;
+        @extend %igx-drop-down__list--select !optional;
+    }
+
     @include e(item) {
         @extend %igx-drop-down__item !optional;
     }

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss
@@ -163,8 +163,7 @@
     $desktop-item-height: 48px;
     $mobile-item-height: 32px;
 
-    $desktop-item-padding: 16px;
-    $mobile-item-padding: 8px;
+    $item-padding: 16px;
 
     $desktop-header-padding: 16px;
     $mobile-header-padding: 8px;
@@ -187,6 +186,10 @@
         }
     }
 
+    %igx-drop-down__list--select {
+        max-width: calc(100% + #{$item-padding} * 2);
+    }
+
     %igx-drop-down__header,
     %igx-drop-down__item {
         display: flex;
@@ -200,7 +203,7 @@
         color: --var($theme, 'item-text-color');
         cursor: pointer;
         height: rem($desktop-item-height);
-        padding: 0 rem($desktop-item-padding);
+        padding: 0 rem($item-padding);
 
         &:focus {
             outline: 0;
@@ -287,11 +290,13 @@
     $type-scale,
     $categories: (
         header: 'overline',
-        item: 'body-2'
+        item: 'body-2',
+        select-item: 'subtitle-1'
     )
 ) {
     $header: map-get($categories, 'header');
     $item: map-get($categories, 'item');
+    $select-item: map-get($categories, 'select-item');
 
     @include igx-scope('.igx-typography') {
         %igx-drop-down__header,
@@ -306,5 +311,12 @@
                 margin: 0;
             }
         }
+
+        %igx-drop-down__list--select {
+            %igx-drop-down__item {
+                @include igx-type-style($type-scale, $select-item);
+                @include ellipsis()
+            }
+        }
     }
 }
diff --git a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts
@@ -338,6 +338,10 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
     }
 
     private highlightFirstItem = () => {
+        if (this.target.focusedItem) {
+            this.target.focusedItem.focused = false;
+            this.target.focusedItem = null;
+        }
         this.target.navigateFirst();
         this.cdr.detectChanges();
         this.reposition();

diff --git a/projects/igniteui-angular/src/lib/directives/label/label.directive.ts b/projects/igniteui-angular/src/lib/directives/label/label.directive.ts
@@ -1,5 +1,6 @@
-import { Directive, HostBinding } from '@angular/core';
+import { Directive, HostBinding, Input } from '@angular/core';
 
+let NEXT_ID = 0;
 
 /**
  * @hidden
@@ -10,4 +11,11 @@ import { Directive, HostBinding } from '@angular/core';
 export class IgxLabelDirective {
     @HostBinding('class.igx-input-group__label')
     public defaultClass = true;
+
+/**
+ * @hidden
+ */
+    @HostBinding('attr.id')
+    @Input()
+    public id = `igx-label-${NEXT_ID++}`;
 }
diff --git a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts
@@ -253,9 +253,17 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
     public toggle(overlaySettings?: OverlaySettings) {
         //  if toggle is collapsed call open
         //  if there is close animation call open
+        if (this.collapsed || this.isClosing) {
+            this.open(overlaySettings);
+        } else {
+            this.close();
+        }
+    }
+
+    /** @hidden @internal */
+    public get isClosing() {
         const info = this.overlayService.getOverlayById(this._overlayId);
-        const hasCloseAnimation = info ? info.closeAnimationPlayer : false;
-        (this.collapsed || hasCloseAnimation) ? this.open(overlaySettings) : this.close();
+        return info ? info.closeAnimationPlayer : false;
     }
 
     /**

diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down-group.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down-group.component.ts
@@ -9,7 +9,7 @@ let NEXT_ID = 0;
     selector: 'igx-drop-down-item-group, igx-select-item-group',
     template: `
         <label id="{{labelId}}">{{ label }}</label>
-        <ng-content select="igx-drop-down-item, igx-select-item-group"></ng-content>
+        <ng-content select="igx-drop-down-item, igx-select-item"></ng-content>
     `
 })
 export class IgxDropDownGroupComponent {

diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts
@@ -206,7 +206,11 @@ export class IgxDropDownComponent extends IgxDropDownBase implements IDropDownBa
      * ```
      */
     public toggle(overlaySettings?: OverlaySettings) {
-        this.toggleDirective.toggle(overlaySettings);
+        if (this.collapsed || this.toggleDirective.isClosing) {
+            this.open(overlaySettings);
+        } else {
+            this.close();
+        }
     }
 
     /**
@@ -248,14 +252,11 @@ export class IgxDropDownComponent extends IgxDropDownBase implements IDropDownBa
      * @hidden
      */
     public onToggleOpened() {
-        this._focusedItem = this.selectedItem;
-        if (this._focusedItem) {
+        if (this.selectedItem) {
+            this._focusedItem = this.selectedItem;
             this._focusedItem.isFocused = true;
         } else if (this.allowItemsFocus) {
-            const firstItemIndex = this.getNearestSiblingFocusableItemIndex(-1, Navigate.Down);
-            if (firstItemIndex !== -1) {
-                this.navigateItem(firstItemIndex);
-            }
+            this.navigateFirst();
         }
         this.onOpened.emit();
     }