Add menu component

Author: jweisman

angular-lib/browserslist

@@ -0,0 +1,5 @@
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

angular-lib/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@exlibris/exl-cloudapp-angular-lib",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "main": "index.js",
   "description": "Library used in Ex Libris Cloud Apps",
   "license": "https://developers.exlibrisgroup.com/about/terms",

angular-lib/package.json

@@ -1 +1,2 @@
-export * from './ui/components/alerts/index';
+export * from './ui/components/alerts/index';
+export * from './ui/components/menu/index';

angular-lib/src/angular/components.ts

@@ -0,0 +1,3 @@
+export * from './menu.module';
+export * from './menu/menu.component';
+export * from './menu-item/menu-item.component';

angular-lib/src/angular/ui/components/menu/index.ts

@@ -0,0 +1,9 @@
+<mat-card [routerLink]="routerLink">
+  <mat-card-header>
+    <span mat-card-avatar [class]="icon"></span>
+    <mat-card-title>{{title | truncate:13:false:''}}</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <ng-content></ng-content>
+  </mat-card-content>
+</mat-card>

angular-lib/src/angular/ui/components/menu/menu-item/menu-item.component.html

@@ -0,0 +1,31 @@
+:host {
+  & {
+    display: contents;
+  }
+  .mat-card {
+    & {
+      background-color: #f5f5f5;
+      cursor: pointer;
+      transform: scale(.99);
+    }
+
+    &:hover {
+      transform: scale(1);
+      left: -1px;
+      background: #eaeaea!important;
+      transition: transform .15s ease-in-out;
+    }
+
+    span[mat-card-avatar] {
+      margin-right: 5px;
+    }
+
+    .mat-card-content {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+    }
+  }
+}

angular-lib/src/angular/ui/components/menu/menu-item/menu-item.component.scss

@@ -0,0 +1,16 @@
+import { Component, Input, OnInit } from "@angular/core";
+
+@Component({
+  selector: 'eca-menu-item',
+  templateUrl: './menu-item.component.html',
+  styleUrls: ['./menu-item.component.scss']
+})
+export class MenuItemComponent implements OnInit {
+  @Input() title: string;
+  @Input() icon = 'uxf-icon uxf-check';
+  @Input() routerLink: string;
+
+  ngOnInit() {
+    
+  }
+}

angular-lib/src/angular/ui/components/menu/menu-item/menu-item.component.ts

@@ -0,0 +1,18 @@
+import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { MaterialModule } from "../../../modules/material.module";
+import { TruncatePipe } from "./truncate.pipe";
+import { MenuItemComponent } from "./menu-item/menu-item.component";
+import { MenuComponent } from './menu/menu.component';
+import { CommonModule } from "@angular/common";
+
+@NgModule({
+  imports: [
+    MaterialModule,
+    RouterModule,
+    CommonModule,
+  ],
+  declarations: [MenuComponent, MenuItemComponent, TruncatePipe],
+  exports: [MenuComponent, MenuItemComponent],
+})
+export class MenuModule { }

angular-lib/src/angular/ui/components/menu/menu.module.ts

@@ -0,0 +1 @@
+<ng-content></ng-content>