SF-2193 Add bubble splash effect that can be added to various buttons

src/SIL.XForge.Scripture/ClientApp/package.json

@@ -119,6 +119,7 @@
     "babel-loader": "^8.3.0",
     "chromatic": "^6.17.3",
     "codecov": "^3.8.3",
+    "css-loader": "^6.8.1",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-deprecation": "^1.3.3",
@@ -140,7 +141,9 @@
     "prettier": "^2.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "sass-loader": "^13.3.2",
     "storybook": "^7.0.18",
+    "style-loader": "^3.3.3",
     "ts-mockito": "^2.6.1",
     "ts-node": "^10.7.0",
     "typescript": "~4.8.4",

src/SIL.XForge.Scripture/ClientApp/src/xforge-common/bubble-button/bubble-button.directive.ts

@@ -0,0 +1,45 @@
+/* eslint-disable @angular-eslint/directive-selector */
+import { Directive, ElementRef, OnInit, Renderer2 } from '@angular/core';
+
+/**
+ * Directive to add bubble animation to a button. Inspired by https://codepen.io/nourabusoud/pen/ypZzMM,
+ * but modified to use an inner `<span>` to attach the pseudo elements to so as not to conflict
+ * with other styles or components that use `::before` or `::after` such as Angular Material components.
+ */
+@Directive({
+  selector: '[sfBubbleButton]'
+})
+export class BubbleButtonDirective implements OnInit {
+  cssInnerSpanStyleClass = 'sf-bubble-button-elements';
+  cssButtonStyleClass = 'sf-bubble-button';
+  cssButtonAnimationClass = 'sf-bubble-animate';
+
+  constructor(private readonly el: ElementRef, private readonly renderer: Renderer2) {}
+
+  ngOnInit(): void {
+    const hostElement = this.el.nativeElement;
+    const innerSpan = this.renderer.createElement('span');
+
+    // Add inner span to host element
+    this.renderer.addClass(innerSpan, this.cssInnerSpanStyleClass);
+    this.renderer.appendChild(hostElement, innerSpan);
+
+    // Add class and click listener to host element
+    this.renderer.addClass(hostElement, this.cssButtonStyleClass);
+    this.renderer.listen(hostElement, 'click', () => {
+      // Add animation class to inner span
+      this.addAnimationClass(innerSpan);
+    });
+  }
+
+  // Adds animation class to the element and removes it after animation is complete
+  addAnimationClass(el: any): void {
+    // Reset animation
+    el.classList.remove(this.cssButtonAnimationClass);
+
+    // Timeout needed to restart animation
+    setTimeout(() => {
+      el.classList.add(this.cssButtonAnimationClass);
+    }, 10);
+  }
+}