2 * # ============LICENSE_START=======================================================
3 * # Copyright (c) 2020 AT&T Intellectual Property. All rights reserved.
4 * # ================================================================================
5 * # Licensed under the Apache License, Version 2.0 (the "License");
6 * # you may not use this file except in compliance with the License.
7 * # You may obtain a copy of the License at
9 * # http://www.apache.org/licenses/LICENSE-2.0
11 * # Unless required by applicable law or agreed to in writing, software
12 * # distributed under the License is distributed on an "AS IS" BASIS,
13 * # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 * # See the License for the specific language governing permissions and
15 * # limitations under the License.
16 * # ============LICENSE_END=========================================================
19 import { Directive, ElementRef, HostListener, Input, Renderer2, OnChanges, SimpleChanges } from '@angular/core';
22 selector: '[appMaterialElevation]'
24 export class MaterialElevationDirective implements OnChanges {
33 private element: ElementRef,
34 private renderer: Renderer2
36 this.setElevation(this.defaultElevation);
39 ngOnChanges(_changes: SimpleChanges) {
40 this.setElevation(this.defaultElevation);
43 @HostListener('mouseenter')
45 this.setElevation(this.raisedElevation);
48 @HostListener('mouseleave')
50 this.setElevation(this.defaultElevation);
53 setElevation(amount: number) {
54 // remove all elevation classes
55 const classesToRemove = Array.from((<HTMLElement>this.element.nativeElement).classList).filter(c => c.startsWith('mat-elevation-z'));
56 classesToRemove.forEach((c) => {
57 this.renderer.removeClass(this.element.nativeElement, c);
60 // add the given elevation class
61 const newClass = `mat-elevation-z${amount}`;
62 this.renderer.addClass(this.element.nativeElement, newClass);