mod2/ui/src/app/material-elevation.directive.ts

   1 /*
   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
   8  *  #
   9  *  #      http://www.apache.org/licenses/LICENSE-2.0
  10  *  #
  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=========================================================
  17  */
  18
  19 import { Directive, ElementRef, HostListener, Input, Renderer2, OnChanges, SimpleChanges } from '@angular/core';
  20
  21 @Directive({
  22     selector: '[appMaterialElevation]'
  23 })
  24 export class MaterialElevationDirective implements OnChanges {
  25
  26     @Input()
  27     defaultElevation = 2;
  28
  29     @Input()
  30     raisedElevation = 8;
  31
  32     constructor(
  33         private element: ElementRef,
  34         private renderer: Renderer2
  35     ) {
  36         this.setElevation(this.defaultElevation);
  37     }
  38
  39     ngOnChanges(_changes: SimpleChanges) {
  40         this.setElevation(this.defaultElevation);
  41     }
  42
  43     @HostListener('mouseenter')
  44     onMouseEnter() {
  45         this.setElevation(this.raisedElevation);
  46     }
  47
  48     @HostListener('mouseleave')
  49     onMouseLeave() {
  50         this.setElevation(this.defaultElevation);
  51     }
  52
  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);
  58         });
  59
  60         // add the given elevation class
  61         const newClass = `mat-elevation-z${amount}`;
  62         this.renderer.addClass(this.element.nativeElement, newClass);
  63     }
  64 }