Add support for all Font Awesome 6 animations

See https://fontawesome.com/docs/web/style/animate

Fixes #393

docs/usage/features.md

@@ -41,8 +41,9 @@ The following features are available as part of Font Awesome. Note that the synt
 [FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons)
 
 ```html
-<fa-icon [icon]="['fas', 'spinner']" [spin]="true"></fa-icon>
-<fa-icon [icon]="['fas', 'spinner']" [pulse]="true"></fa-icon>
+<fa-icon [icon]="['fas', 'cog']" animation="spin"></fa-icon>
+<fa-icon [icon]="['fas', 'heart']" animation="beat"></fa-icon>
+<fa-icon [icon]="['fas', 'bell']" animation="shake"></fa-icon>
 ```
 
 ### Border

projects/demo/e2e/src/app.e2e-spec.ts

@@ -7,7 +7,7 @@ describe('Angular FontAwesome demo', () => {
   });
 
   it('should render all icons', async () => {
-    expect(await appPage.icons.count()).toBe(28);
+    expect(await appPage.icons.count()).toBe(43);
   });
 
   afterEach(async () => {

projects/demo/src/app/app.component.html

@@ -37,9 +37,60 @@ <h3>With Mask and Transform</h3>
 <h3>Change Size</h3>
 <fa-icon [icon]="faAdjust" size="2x"></fa-icon>
 
-<h3>Animation</h3>
-<p>Click to toggle animation.</p>
-<fa-icon [icon]="faSync" [spin]="isSyncAnimated" (click)="isSyncAnimated = !isSyncAnimated"></fa-icon>
+<h3>Animations</h3>
+
+<button type="button" (click)="isAnimated = !isAnimated">Toggle animations</button>
+
+<p>
+  <fa-icon [icon]="faHeart" [animation]="isAnimated ? 'beat' : undefined"></fa-icon>&nbsp;
+  <fa-icon
+    [icon]="faHeart"
+    [animation]="isAnimated ? 'beat' : undefined"
+    style="--fa-animation-duration: 0.5s"
+  ></fa-icon
+  >&nbsp;
+  <fa-icon [icon]="faHeart" [animation]="isAnimated ? 'beat' : undefined" style="--fa-beat-scale: 2"></fa-icon>
+</p>
+
+<p>
+  <fa-icon [icon]="faHeart" [animation]="isAnimated ? 'fade' : undefined"></fa-icon>&nbsp;
+  <fa-icon [icon]="faHeart" [animation]="isAnimated ? 'fade' : undefined" style="--fa-fade-opacity: 0.1"></fa-icon
+  >&nbsp;
+</p>
+
+<p>
+  <fa-icon [icon]="faHeart" [animation]="isAnimated ? 'beat-fade' : undefined"></fa-icon>&nbsp;
+  <fa-icon
+    [icon]="faHeart"
+    [animation]="isAnimated ? 'beat-fade' : undefined"
+    style="--fa-beat-fade-opacity: 0.1"
+  ></fa-icon
+  >&nbsp;
+  <fa-icon [icon]="faHeart" [animation]="isAnimated ? 'beat-fade' : undefined" style="--fa-beat-fade-scale: 2"></fa-icon
+  >&nbsp;
+</p>
+
+<p><fa-icon [icon]="faHeart" [animation]="isAnimated ? 'bounce' : undefined"></fa-icon>&nbsp;</p>
+
+<p>
+  <fa-icon [icon]="faHeart" [animation]="isAnimated ? 'flip' : undefined"></fa-icon>&nbsp;
+  <fa-icon
+    [icon]="faHeart"
+    [animation]="isAnimated ? 'flip' : undefined"
+    style="--fa-flip-x: 1; --fa-flip-y: 0"
+  ></fa-icon
+  >&nbsp;
+</p>
+
+<p><fa-icon [icon]="faHeart" [animation]="isAnimated ? 'shake' : undefined"></fa-icon>&nbsp;</p>
+
+<p>
+  <fa-icon [icon]="faCog" [animation]="isAnimated ? 'spin' : undefined"></fa-icon>&nbsp;
+  <fa-icon [icon]="faCog" [animation]="isAnimated ? 'spin-reverse' : undefined"></fa-icon>&nbsp;
+  <fa-icon [icon]="faSpinner" [animation]="isAnimated ? 'spin-pulse' : undefined"></fa-icon>&nbsp;
+  <fa-icon [icon]="faSpinner" [animation]="isAnimated ? 'spin-pulse-reverse' : undefined"></fa-icon>&nbsp;
+</p>
+
 <p>Slide to turn up the magic.</p>
 <fa-icon [icon]="faMagic" transform="rotate-{{ magicLevel }}"></fa-icon>
 <input type="range" [value]="magicLevel" (input)="magicLevel = $any($event.target).value" />

projects/demo/src/app/app.component.ts

@@ -11,9 +11,11 @@ import {
   faEllipsisH,
   faFighterJet,
   faFlag as solidFlag,
+  faHeart,
   faMagic,
+  faSpinner,
   faSquare,
-  faSync,
+  faCog,
   faTimes,
   faUser,
 } from '@fortawesome/free-solid-svg-icons';
@@ -25,7 +27,7 @@ import {
 })
 export class AppComponent {
   faBell = faBell;
-  faSync = faSync;
+  faCog = faCog;
   faFlag = faFlag;
   solidFlag = solidFlag;
   faTimes = faTimes;
@@ -38,14 +40,16 @@ export class AppComponent {
   faEllipsisH = faEllipsisH;
   faFighterJet = faFighterJet;
   faBatteryQuarter = faBatteryQuarter;
+  faHeart = faHeart;
+  faSpinner = faSpinner;
   faDummy: IconDefinition = {
     prefix: 'fad',
     iconName: 'dummy' as IconName,
     icon: [512, 512, [], 'f030', ['M50 50 H412 V250 H50 Z', 'M50 262 H412 V462 H50 Z']],
   };
 
   notificationsCounter = 1000;
-  isSyncAnimated = true;
+  isAnimated = true;
   magicLevel = 0;
 
   selectedPosition: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';

src/lib/icon/icon.component.ts

@@ -18,7 +18,7 @@ import { FaConfig } from '../config';
 import { FaIconLibrary } from '../icon-library';
 import { faWarnIfIconDefinitionMissing } from '../shared/errors/warn-if-icon-html-missing';
 import { faWarnIfIconSpecMissing } from '../shared/errors/warn-if-icon-spec-missing';
-import { FaProps } from '../shared/models/props.model';
+import { AnimationProp, FaProps } from '../shared/models/props.model';
 import { faClassList } from '../shared/utils/classlist.util';
 import { faNormalizeIconSpec } from '../shared/utils/normalize-icon-spec.util';
 import { FaStackItemSizeDirective } from '../stack/stack-item-size.directive';
@@ -42,8 +42,29 @@ export class FaIconComponent implements OnChanges {
    * screen readers.
    */
   @Input() title?: string;
-  @Input() spin?: boolean;
-  @Input() pulse?: boolean;
+
+  /**
+   * Icon animation.
+   *
+   * Most of the animations are only available when using Font Awesome 6. With
+   * Font Awesome 5, only 'spin' and 'spin-pulse' are supported.
+   */
+  @Input() animation?: AnimationProp;
+
+  /**
+   * @deprecated Use animation="spin" instead. To be removed in 0.14.0.
+   */
+  @Input() set spin(value: boolean) {
+    this.animation = value ? 'spin' : undefined;
+  }
+
+  /**
+   * @deprecated Use animation="spin-pulse" instead. To be removed in 0.14.0.
+   */
+  @Input() set pulse(value: boolean) {
+    this.animation = value ? 'spin-pulse' : undefined;
+  }
+
   @Input() mask?: IconProp;
 
   /**
@@ -144,8 +165,7 @@ export class FaIconComponent implements OnChanges {
   protected buildParams() {
     const classOpts: FaProps = {
       flip: this.flip,
-      spin: this.spin,
-      pulse: this.pulse,
+      animation: this.animation,
       border: this.border,
       inverse: this.inverse,
       size: this.size || null,

src/lib/layers/layers-text.component.ts

@@ -12,7 +12,7 @@ import {
   Transform,
 } from '@fortawesome/fontawesome-svg-core';
 import { faWarnIfParentNotExist } from '../shared/errors/warn-if-parent-not-exist';
-import { FaProps } from '../shared/models/props.model';
+import { AnimationProp, FaProps } from '../shared/models/props.model';
 import { faClassList } from '../shared/utils/classlist.util';
 import { FaLayersComponent } from './layers.component';
 
@@ -46,8 +46,21 @@ export class FaLayersTextComponent implements OnChanges {
    * This input is deprecated since 0.12.0 and will be removed in 0.13.0.
    */
   @Input() classes?: string[] = [];
-  @Input() spin?: boolean;
-  @Input() pulse?: boolean;
+
+  /**
+   * @deprecated This input was incorrectly exposed and never worked correctly. To be removed in 0.14.0.
+   */
+  @Input() set spin(value: boolean) {
+    this.animation = value ? 'spin' : undefined;
+  }
+
+  /**
+   * @deprecated This input was incorrectly exposed and never worked correctly. To be removed in 0.14.0.
+   */
+  @Input() set pulse(value: boolean) {
+    this.animation = value ? 'spin-pulse' : undefined;
+  }
+
   @Input() flip?: FlipProp;
   @Input() size?: SizeProp;
   @Input() pull?: PullProp;
@@ -59,6 +72,8 @@ export class FaLayersTextComponent implements OnChanges {
 
   @HostBinding('innerHTML') renderedHTML: SafeHtml;
 
+  private animation: AnimationProp;
+
   constructor(@Optional() private parent: FaLayersComponent, private sanitizer: DomSanitizer) {
     faWarnIfParentNotExist(this.parent, 'FaLayersComponent', this.constructor.name);
   }
@@ -76,8 +91,7 @@ export class FaLayersTextComponent implements OnChanges {
   protected buildParams(): TextParams {
     const classOpts: FaProps = {
       flip: this.flip,
-      spin: this.spin,
-      pulse: this.pulse,
+      animation: this.animation,
       border: this.border,
       inverse: this.inverse,
       size: this.size || null,

src/lib/public_api.ts

@@ -1,5 +1,5 @@
 export { FontAwesomeModule } from './fontawesome.module';
-export { FaProps } from './shared/models/props.model';
+export { AnimationProp, FaProps } from './shared/models/props.model';
 export { FaIconComponent } from './icon/icon.component';
 export { FaDuotoneIconComponent } from './icon/duotone-icon.component';
 export { FaConfig } from './config';

src/lib/shared/models/props.model.ts

@@ -15,8 +15,7 @@ import {
 export interface FaProps {
   mask?: IconProp;
   className?: string;
-  spin?: boolean;
-  pulse?: boolean;
+  animation?: AnimationProp;
   border?: boolean;
   fixedWidth?: boolean;
   counter?: boolean;
@@ -30,3 +29,15 @@ export interface FaProps {
   style?: Styles;
   stackItemSize?: '1x' | '2x';
 }
+
+export type AnimationProp =
+  | 'beat'
+  | 'fade'
+  | 'beat-fade'
+  | 'bounce'
+  | 'flip'
+  | 'shake'
+  | 'spin'
+  | 'spin-reverse'
+  | 'spin-pulse'
+  | 'spin-pulse-reverse';

src/lib/shared/utils/classlist.util.ts

@@ -6,8 +6,14 @@ import { FaProps } from '../models/props.model';
  */
 export const faClassList = (props: FaProps): string[] => {
   const classes = {
-    'fa-spin': props.spin,
-    'fa-pulse': props.pulse,
+    [`fa-${props.animation}`]: props.animation != null && !props.animation.startsWith('spin'),
+    'fa-spin': props.animation === 'spin' || props.animation === 'spin-reverse',
+    'fa-spin-pulse': props.animation === 'spin-pulse' || props.animation === 'spin-pulse-reverse',
+    'fa-spin-reverse': props.animation === 'spin-reverse' || props.animation === 'spin-pulse-reverse',
+    // According to https://fontawesome.com/docs/web/style/animate#spin fa-pulse
+    // class is deprecated, remove the below line when Font Awesome 5 support
+    // is dropped.
+    'fa-pulse': props.animation === 'spin-pulse' || props.animation === 'spin-pulse-reverse',
     'fa-fw': props.fixedWidth,
     'fa-border': props.border,
     'fa-inverse': props.inverse,