feat(igxExpansionPanel): add classes, change icon position logic, #307

IgniteUI · Sep 3, 2018 · 28cfbc7 · 28cfbc7
1 parent 14695b5
commit 28cfbc7
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 16 deletions.
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.html b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.html
@@ -1,16 +1,12 @@
 
 <div tabindex="0" role = "button" [attr.aria-disabled] = "disabled" [attr.aria-expanded] = "isExpanded" [attr.aria-controls] = "controls">
-<ng-template #iconContainer>
-    <ng-content *ngIf="iconTemplate" select="igx-expansion-panel-icon"></ng-content>
-    <igx-icon *ngIf="!iconTemplate" fontSet="material" [name]="panel.collapsed? 'expand_more':'expand_less'"></igx-icon>
-</ng-template>
-<ng-container *ngIf="iconPosition === 'left'">
-    <ng-container *ngTemplateOutlet="iconContainer"></ng-container>
-</ng-container>
-<ng-content select="igx-expansion-panel-title"></ng-content>
-<ng-content select="igx-expansion-panel-description"></ng-content>
-<ng-content></ng-content>
-<ng-container *ngIf="iconPosition === 'right'">
-    <ng-container *ngTemplateOutlet="iconContainer"></ng-container>
-</ng-container>
+    <div [class]="iconPositionClass()">
+            <ng-content *ngIf="iconTemplate" select="igx-expansion-panel-icon"></ng-content>
+            <igx-icon *ngIf="!iconTemplate" fontSet="material">
+                {{panel.collapsed? 'expand_more':'expand_less'}}
+            </igx-icon>
+    </div>
+    <ng-content select="igx-expansion-panel-title"></ng-content>
+    <ng-content select="igx-expansion-panel-description"></ng-content>
+    <ng-content></ng-content>
 </div>
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts
@@ -9,8 +9,7 @@ import {
     Host,
     EventEmitter,
     Output,
-    ContentChild,
-    TemplateRef
+    ContentChild
 } from '@angular/core';
 import { IgxExpansionPanelComponent } from './expansion-panel.component';
 import { IgxExpansionPanelIconDirective, IgxExpansionPanelTitleDirective } from './expansion-panel.directives';
@@ -97,4 +96,17 @@ export class IgxExpansionPanelHeaderComponent {
          this.panel.toggle(evt);
          evt.preventDefault();
      }
+
+     public iconPositionClass(): string {
+        switch (this.iconPosition) {
+            case (ICON_POSITION.LEFT):
+                return `igx-expansion-panel__header-icon--start`;
+            case (ICON_POSITION.RIGHT):
+                return `igx-expansion-panel__header-icon--end`;
+            case (ICON_POSITION.NONE):
+                return `igx-expansion-panel__header-icon--none`;
+            default:
+                return '';
+        }
+     }
 }
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.directives.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.directives.ts
@@ -16,13 +16,18 @@ export class IgxExpansionPanelTitleDirective {
     @Input()
     @HostBinding('attr.id')
     public id = `igx-expansion-panel-header-title-${NEXT_ID++}`;
+
+    @HostBinding('class.igx-expansion-panel__header-title')
+    public cssClass = `igx-expansion-panel__header-title`;
 }
 
 @Directive({
     // tslint:disable-next-line:directive-selector
     selector: 'igx-expansion-panel-description'
 })
 export class IgxExpansionPanelDescriptionDirective {
+    @HostBinding('class.igx-expansion-panel__header-description')
+    public cssClass = `igx-expansion-panel__header-description`;
 }
 
 @Directive({

diff --git a/src/app/expansion-panel/expansion-panel-sample.scss b/src/app/expansion-panel/expansion-panel-sample.scss
@@ -16,4 +16,18 @@
 .game-board__grid__match {
     font-weight: 600;
     font-size: 12px; 
-}
+}
+
+.igx-expansion-panel__header-icon--start {
+    width: 56px;
+    order: -1;
+}
+.igx-expansion-panel__header-icon--end {
+    width: 56px;
+    order: 5;
+}
+.igx-expansion-panel__header-icon--none {
+    width: 56px;
+    display: none;
+    visibility: hidden;
+}