feat(igxCollapsible): add disabled functionality #307

IgniteUI · Aug 24, 2018 · f86a73c · f86a73c
1 parent 895d912
commit f86a73c
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/projects/igniteui-angular/src/lib/collapsible/collapsible-header.component.ts b/projects/igniteui-angular/src/lib/collapsible/collapsible-header.component.ts
@@ -56,7 +56,11 @@ export class IgxCollapsibleHeaderComponent {
      @HostListener('keydown.Space', ['$event'])
      @HostListener('click', ['$event'])
      public onAction(evt?: Event) {
-        this.onInterraction.emit({ event: evt });
+         if (this.collapsible.disabled) {
+            evt.stopPropagation();
+            return;
+         }
+         this.onInterraction.emit({ event: evt });
          this.collapsible.toggle(evt);
          evt.preventDefault();
      }

diff --git a/projects/igniteui-angular/src/lib/collapsible/collapsible.component.ts b/projects/igniteui-angular/src/lib/collapsible/collapsible.component.ts
@@ -109,8 +109,8 @@ export class IgxCollapsibleComponent {
         return !this.collapsed;
     }
 
-    @Input()
-    public disabled;
+    @HostBinding('class.igx-collapsible--disabled')
+    @Input() public disabled = false;
 
     @Input()
     public headerButtons;

diff --git a/projects/igniteui-angular/src/lib/collapsible/collapsible.module.ts b/projects/igniteui-angular/src/lib/collapsible/collapsible.module.ts
@@ -5,14 +5,15 @@ import { IgxButtonModule } from '../directives/button/button.directive';
 import { IgxAvatarModule } from '../avatar/avatar.component';
 import { IgxIconModule } from '../icon';
 import { IgxCollapsibleComponent, IgxCollapsibleDescriptionDirective, IgxCollapsibleTitleDirective,
-     IgxCollapsibleBodyDirective } from './collapsible.component';
+     IgxCollapsibleBodyDirective, IgxCollapsibleHeaderDirective } from './collapsible.component';
 import { IgxCollapsibleHeaderComponent } from './collapsible-header.component';
 
 
 @NgModule({
   declarations: [
     IgxCollapsibleComponent,
     IgxCollapsibleHeaderComponent,
+    IgxCollapsibleHeaderDirective,
     IgxCollapsibleDescriptionDirective,
     IgxCollapsibleTitleDirective,
     IgxCollapsibleBodyDirective

diff --git a/src/app/collapsible/collapsible-sample.html b/src/app/collapsible/collapsible-sample.html
@@ -2,7 +2,7 @@
     <app-page-header title="Collapsible" description="Collapsible lets you display content with a toggleable details view"></app-page-header>
     <section>
         <div class="game-board">
-            <igx-collapsible class="game-board__collapsible">
+            <igx-collapsible class="game-board__collapsible" [disabled]="false">
                 <igx-collapsible-header (onInterraction)="onInterraction($event)">
                     <igx-collapsible-title>Current Winning Player:</igx-collapsible-title>
                     <igx-collapsible-description>{{ getWinningPlayer }}</igx-collapsible-description>
@@ -42,4 +42,4 @@
         </igx-collapsible-body>
         </igx-collapsible>
     </section> -->
-</div>
+</div>