fix(business): add icon content child to button component and template (

#188)
sbb-design-systems · Sep 30, 2019 · 93307d0 · 93307d0
1 parent 1d7de22
commit 93307d0
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git a/projects/sbb-esta/angular-business/button/src/button/button.component.html b/projects/sbb-esta/angular-business/button/src/button/button.component.html
@@ -1 +1,7 @@
+<span class="sbb-svgsprite-icon">
+  <ng-container *ngTemplateOutlet="icon"></ng-container>
+</span>
 <ng-content></ng-content>
+<span class="sbb-svgsprite-icon">
+  <ng-container *ngTemplateOutlet="icon"></ng-container>
+</span>
diff --git a/projects/sbb-esta/angular-business/button/src/button/button.component.ts b/projects/sbb-esta/angular-business/button/src/button/button.component.ts
@@ -1,11 +1,14 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  ContentChild,
   HostBinding,
   Input,
+  TemplateRef,
   ViewEncapsulation
 } from '@angular/core';
 import { BaseButton } from '@sbb-esta/angular-core/base';
+import { IconDirective } from '@sbb-esta/angular-core/icon-directive';
 
 @Component({
   // tslint:disable-next-line:component-selector
@@ -21,6 +24,28 @@ export class ButtonComponent extends BaseButton {
    */
   @Input() mode: 'primary' | 'secondary' | 'ghost' | 'alternative' | 'icon' = 'primary';
 
+  /**
+   * Template that will contain icons.
+   * Use the *sbbIcon structural directive to provide the desired icon.
+   */
+  @Input()
+  get icon(): TemplateRef<any> {
+    return this._contentIcon || this._icon;
+  }
+  set icon(icon: TemplateRef<any>) {
+    this._icon = icon;
+  }
+  private _icon: TemplateRef<any>;
+
+  /** @docs-private */
+  @HostBinding('class.sbb-button-has-icon') get buttonHasIconClass() {
+    return !!this.icon;
+  }
+
+  /** @docs-private */
+  @ContentChild(IconDirective, { read: TemplateRef, static: false })
+  _contentIcon: TemplateRef<any>;
+
   /** @docs-private */
   @HostBinding('class.sbb-button-alternative')
   get _alternativeClass() {