1 files changed, 64 insertions, 0 deletions
diff --git a/mod2/ui/src/app/material-elevation.directive.ts b/mod2/ui/src/app/material-elevation.directive.ts
new file mode 100644
index 0000000..8843d1e
--- /dev/null
+++ b/mod2/ui/src/app/material-elevation.directive.ts
@@ -0,0 +1,64 @@
+/* 
+ *  # ============LICENSE_START=======================================================
+ *  # Copyright (c) 2020 AT&T Intellectual Property. All rights reserved.
+ *  # ================================================================================
+ *  # Licensed under the Apache License, Version 2.0 (the "License");
+ *  # you may not use this file except in compliance with the License.
+ *  # You may obtain a copy of the License at
+ *  #
+ *  #      http://www.apache.org/licenses/LICENSE-2.0
+ *  #
+ *  # Unless required by applicable law or agreed to in writing, software
+ *  # distributed under the License is distributed on an "AS IS" BASIS,
+ *  # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  # See the License for the specific language governing permissions and
+ *  # limitations under the License.
+ *  # ============LICENSE_END=========================================================
+ */
+
+import { Directive, ElementRef, HostListener, Input, Renderer2, OnChanges, SimpleChanges } from '@angular/core';
+
+@Directive({
+    selector: '[appMaterialElevation]'
+})
+export class MaterialElevationDirective implements OnChanges {
+
+    @Input()
+    defaultElevation = 2;
+
+    @Input()
+    raisedElevation = 8;
+
+    constructor(
+        private element: ElementRef,
+        private renderer: Renderer2
+    ) {
+        this.setElevation(this.defaultElevation);
+    }
+
+    ngOnChanges(_changes: SimpleChanges) {
+        this.setElevation(this.defaultElevation);
+    }
+
+    @HostListener('mouseenter')
+    onMouseEnter() {
+        this.setElevation(this.raisedElevation);
+    }
+
+    @HostListener('mouseleave')
+    onMouseLeave() {
+        this.setElevation(this.defaultElevation);
+    }
+
+    setElevation(amount: number) {
+        // remove all elevation classes
+        const classesToRemove = Array.from((<HTMLElement>this.element.nativeElement).classList).filter(c => c.startsWith('mat-elevation-z'));
+        classesToRemove.forEach((c) => {
+            this.renderer.removeClass(this.element.nativeElement, c);
+        });
+
+        // add the given elevation class
+        const newClass = `mat-elevation-z${amount}`;
+        this.renderer.addClass(this.element.nativeElement, newClass);
+    }
+}