feat(Button): Add support for two icon buttons

projects/novo-elements/src/elements/button/Button.ts

@@ -1,5 +1,15 @@
 // NG2
-import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, HostListener, Input, OnChanges, SimpleChanges } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component, computed,
+  ElementRef,
+  HostBinding,
+  HostListener, input,
+  Input,
+  InputSignal,
+  OnChanges, signal, Signal,
+  SimpleChanges, WritableSignal,
+} from '@angular/core';
 import { BooleanInput, Helpers, Key } from 'novo-elements/utils';
 
 @Component({
@@ -27,11 +37,11 @@ import { BooleanInput, Helpers, Key } from 'novo-elements/utils';
 
   template: `
     <!--Left Icon-->
-    <i *ngIf="icon && side === 'left' && !loading" [ngClass]="icon" class="novo-button-icon novo-button-icon-left"></i>
+    <i *ngIf="((icon && side === 'left') || (secondIcon && secondSide() === 'left')) && !loading" [ngClass]="leftSideIconClass()" class="novo-button-icon novo-button-icon-left"></i>
     <!--Transcluded Content-->
     <span #textContent class="button-contents"><ng-content></ng-content></span>
     <!--Right Icon-->
-    <i *ngIf="icon && side === 'right' && !loading" [ngClass]="icon" class="novo-button-icon novo-button-icon-right"></i>
+    <i *ngIf="((icon && side === 'right') || (secondIcon && secondSide() === 'right')) && !loading" [ngClass]="rightSideIconClass()" class="novo-button-icon novo-button-icon-right"></i>
     <!--Loading-->
     <i *ngIf="loading" class="loading novo-button-loading">
       <svg
@@ -70,9 +80,12 @@ export class NovoButtonElement implements OnChanges {
   @Input() color: string;
   /**
    * The side of the button to display the icon.
-   * @deprecated
    */
   @Input() side: string = 'right';
+  /**
+   * If a second icon is specified it will default to the opposite side as the primary icon.
+   */
+  secondSide: Signal<string> = computed(() => this.side === 'right' ? 'left' : 'right')
   /**
    * 	Sets the size of the button. One of: sm, lg
    */
@@ -87,18 +100,34 @@ export class NovoButtonElement implements OnChanges {
   @Input() loading: boolean;
   /**
    * Optionally display `bullhorn-icon` with the button along with the text.
-   * @deprecated
    */
   @Input()
   set icon(icon: string) {
     if (icon) {
-      this._icon = `bhi-${icon}`;
+      this._icon.set(`bhi-${icon}`);
     }
   }
   get icon(): string {
-    return this._icon;
+    return this._icon();
   }
 
+  /**
+   * A second icon can be specified, and it will take the opposite side of the primary icon.
+   */
+  @Input()
+  set secondIcon(icon: string) {
+    if (icon) {
+      this._secondIcon.set(`bhi-${icon}`);
+    }
+  }
+  get secondIcon(): string {
+    return this._secondIcon();
+  }
+
+  leftSideIconClass: Signal<string> = computed(() => this.side === 'left' ? this._icon() : this._secondIcon());
+
+  rightSideIconClass: Signal<string> = computed(() => this.side === 'right' ? this._icon() : this._secondIcon());
+
   /**
    * Make the button non-interactive.
    */
@@ -110,7 +139,9 @@ export class NovoButtonElement implements OnChanges {
   @HostBinding('attr.disabled')
   disabledAttr: undefined | '' = undefined;
 
-  private _icon: string;
+  private _icon: WritableSignal<string> = signal(undefined);
+
+  private _secondIcon: WritableSignal<string> = signal(undefined);
 
   constructor(public element: ElementRef) {}
 

projects/novo-examples/src/components/buttons/button-examples.md

@@ -68,3 +68,9 @@ Button parameters can be dynamically set and change at runtime. The styles shoul
 Buttons can display a loading state when given the "loading" parameter. When loading is true the button will be disabled and get a loading spinner.
 
 <code-example example="button-loading"></code-example>
+
+## Two Icons
+
+A second icon can be specified, and it will take the opposite side of the primary icon.
+
+<code-example example="button-two-icon"></code-example>

projects/novo-examples/src/components/buttons/button-two-icon/button-two-icon-example.css

@@ -0,0 +1,5 @@
+/** No CSS for this example */
+
+button {
+  margin: 1rem;
+}

projects/novo-examples/src/components/buttons/button-two-icon/button-two-icon-example.html

@@ -0,0 +1,2 @@
+<button theme="primary" icon="edit" secondIcon="arrow-right">Two Icons</button>
+<button theme="primary" icon="bolt" secondIcon="configure-o" side="right">Two Icons</button>

projects/novo-examples/src/components/buttons/button-two-icon/button-two-icon-example.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+/**
+ * @title Icon buttons
+ */
+@Component({
+  selector: 'button-two-icon-example',
+  templateUrl: 'button-two-icon-example.html',
+  styleUrls: ['button-two-icon-example.css'],
+})
+export class ButtonTwoIconExample {}

projects/novo-examples/src/components/buttons/button-two-icon/index.ts

@@ -0,0 +1 @@
+export * from './button-two-icon-example';

projects/novo-examples/src/components/buttons/index.ts

@@ -8,3 +8,4 @@ export * from './button-overview';
 export * from './button-primary';
 export * from './button-secondary';
 export * from './button-standard';
+export * from './button-two-icon';