Merge pull request #157 from ShankyTiwari/155-merge

Resolved Conflict for PR #155
ShankyTiwari · Dec 20, 2020 · 31439c0 · 31439c0
2 parents 9dd7cad + 676546d
commit 31439c0
Show file tree

Hide file tree

Showing 25 changed files with 370 additions and 315 deletions.
diff --git a/.gitignore b/.gitignore
@@ -36,3 +36,4 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+projects/ng-material-multilevel-menu/node_modules/.cache
diff --git a/projects/ng-material-multilevel-menu/src/lib/app.model.ts b/projects/ng-material-multilevel-menu/src/lib/app.model.ts
@@ -1,6 +1,6 @@
 import { NavigationExtras } from '@angular/router';
 
-export interface MultilevelNodes {
+export interface MultilevelNode {
   id?: string;
   label: string;
   faIcon?: string;
@@ -16,13 +16,13 @@ export interface MultilevelNodes {
   externalRedirect?: boolean;
   hrefTargetType?: string;
   data?: any;
-  items?: MultilevelNodes[];
+  items?: MultilevelNode[];
   onSelected?: Function;
   disabled?: boolean;
   expanded?: boolean;
   navigationExtras?: NavigationExtras;
   dontEmit?: boolean;
-  hasChilden?: boolean;
+  hasChildren?: boolean;
   isSelected?: boolean;
 }
 

diff --git a/projects/ng-material-multilevel-menu/src/lib/common-utils.ts b/projects/ng-material-multilevel-menu/src/lib/common-utils.ts
@@ -0,0 +1,10 @@
+export class CommonUtils {
+
+  static isNullOrUndefinedOrEmpty = function (object: any): boolean {
+    return CommonUtils.isNullOrUndefined(object) || object === '';
+  };
+
+  static isNullOrUndefined = function (object: any): boolean {
+    return object === null || object === undefined;
+  };
+}
diff --git a/projects/ng-material-multilevel-menu/src/lib/constants.ts b/projects/ng-material-multilevel-menu/src/lib/constants.ts
@@ -11,5 +11,8 @@ export const CONSTANT = {
     DEFAULT_LIST_BACKGROUND_COLOR: `transparent`,
     DEFAULT_LIST_FONT_COLOR: `rgba(0,0,0,.87)`,
     DEFAULT_HREF_TARGET_TYPE: '_self',
-    ERROR_MESSAGE: `Invalid data for material Multilevel List Component`
+    ERROR_MESSAGE: `Invalid data for material Multilevel List Component`,
+    POSSIBLE: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
+    YES: 'yes',
+    NO: 'no'
 };
diff --git a/...erial-multilevel-menu/src/lib/list-item/list-item-content/list-item-content.component.css b/...erial-multilevel-menu/src/lib/list-item/list-item-content/list-item-content.component.css
@@ -0,0 +1,65 @@
+.amml-item {
+  position: relative;
+  cursor: pointer;
+}
+
+.anml-link {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  text-transform: capitalize;
+  text-decoration: none;
+  color: inherit;
+}
+
+.anml-data {
+  width: 100%;
+  height: 48px;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.disabled-amml-item {
+  opacity: 0.5;
+  text-decoration: none;
+  pointer-events: none;
+}
+
+.icon-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.amml-icon-fa {
+  font-size: 20px;
+}
+
+.label {
+  line-height: 48px;
+  font-weight: 400;
+}
+
+.amml-svg-icon {
+  width: 22px;
+  height: 22px;
+  margin-top: -12px;
+}
+.amml-icon-arrow-container {
+  direction: ltr;
+  display: flex;
+  align-items: center;
+}
+div[dir="ltr"] .amml-icon {
+  margin-right: 16px;
+}
+div[dir="ltr"].amml-submenu {
+  margin-left: 16px;
+}
+
+div[dir="rtl"] .amml-icon {
+  margin-left: 16px;
+}
+div[dir="rtl"].amml-submenu {
+  margin-right: 16px;
+}
diff --git a/...rial-multilevel-menu/src/lib/list-item/list-item-content/list-item-content.component.html b/...rial-multilevel-menu/src/lib/list-item/list-item-content/list-item-content.component.html
@@ -0,0 +1,57 @@
+<ng-container *ngTemplateOutlet="node.externalRedirect ? redirectLinkTemplate : routerLinkTemplate"></ng-container>
+
+<ng-template #redirectLinkTemplate>
+  <a class="anml-link" [href]="node.link" [target]="getHrefTargetType()">
+    <ng-container *ngTemplateOutlet="isRtlLayout ? linkLabelRtlOutlet : linkLabelLtrOutlet"></ng-container>
+  </a>
+</ng-template>
+
+<ng-template #routerLinkTemplate>
+  <a class="anml-link" *ngIf="!node.externalRedirect && node.link" [routerLink]="node.link">
+    <ng-container *ngTemplateOutlet="isRtlLayout ? linkLabelRtlOutlet : linkLabelLtrOutlet"></ng-container>
+  </a>
+  <a class="anml-link" *ngIf="!node.link">
+    <ng-container *ngTemplateOutlet="isRtlLayout ? linkLabelRtlOutlet : linkLabelLtrOutlet"></ng-container>
+  </a>
+</ng-template>
+
+<ng-template #linkLabelLtrOutlet>
+  <div class="anml-data" [dir]="'ltr'">
+    <ng-container *ngTemplateOutlet="iconContainer"></ng-container>
+    <span class="label">{{node.label}}</span>
+  </div>
+  <div class="amml-icon-arrow-container" *ngIf='node.hasChildren'>
+    <mat-icon [@ExpandedLTR]="nodeExpandStatus()">
+      keyboard_arrow_down
+    </mat-icon>
+  </div>
+</ng-template>
+
+<ng-template #linkLabelRtlOutlet>
+  <div class="anml-data" [dir]="'rtl'">
+    <ng-container *ngTemplateOutlet="iconContainer"></ng-container>
+    <span class="label">{{node.label}}</span>
+  </div>
+  <div class="amml-icon-arrow-container" *ngIf='node.hasChildren'>
+    <mat-icon [@ExpandedRTL]="nodeExpandStatus()">
+      keyboard_arrow_down
+    </mat-icon>
+  </div>
+</ng-template>
+
+<ng-template #iconContainer>
+  <div class="icon-container" [ngSwitch]="getListIcon(node)">
+      <span *ngSwitchCase="'faIcon'" class="amml-icon amml-icon-fa">
+        <i [ngClass]="getSelectedFaIcon()"></i>
+      </span>
+    <mat-icon *ngSwitchCase="'icon'" class="amml-icon">
+      {{getSelectedIcon()}}
+    </mat-icon>
+    <mat-icon *ngSwitchCase="'svgIcon'" class="amml-icon amml-svg-icon"
+              svgIcon="{{getSelectedSvgIcon()}}">
+    </mat-icon>
+    <img *ngSwitchCase="'imageIcon'" matListAvatar class="amml-icon"
+         src="{{getSelectedImageIcon()}}" alt="{{node.label}}"/>
+  </div>
+</ng-template>
+
diff --git a/...l-multilevel-menu/src/lib/list-item/list-item-content/list-item-content.component.spec.ts b/...l-multilevel-menu/src/lib/list-item/list-item-content/list-item-content.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListItemContentComponent } from './list-item-content.component';
+
+describe('ListItemContentComponent', () => {
+  let component: ListItemContentComponent;
+  let fixture: ComponentFixture<ListItemContentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ListItemContentComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListItemContentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/...terial-multilevel-menu/src/lib/list-item/list-item-content/list-item-content.component.ts b/...terial-multilevel-menu/src/lib/list-item/list-item-content/list-item-content.component.ts
@@ -0,0 +1,62 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {MultilevelNode} from '../../app.model';
+import {ExpandedLTR, ExpandedRTL} from '../../animation';
+import {CommonUtils} from '../../common-utils';
+import {CONSTANT} from '../../constants';
+
+@Component({
+  selector: 'ng-list-item-content',
+  templateUrl: './list-item-content.component.html',
+  styleUrls: ['./list-item-content.component.css'],
+  animations: [ExpandedLTR, ExpandedRTL]
+})
+export class ListItemContentComponent implements OnInit {
+  @Input() node: MultilevelNode;
+  @Input() isRtlLayout: boolean;
+
+  constructor() {
+    // NOOP
+  }
+
+  ngOnInit(): void {
+    // NOOP
+  }
+
+  getListIcon(node: MultilevelNode): string {
+    if (!CommonUtils.isNullOrUndefinedOrEmpty(node.icon)) {
+      return `icon`;
+    } else if (!CommonUtils.isNullOrUndefinedOrEmpty(node.faIcon)) {
+      return `faIcon`;
+    } else if (!CommonUtils.isNullOrUndefinedOrEmpty(node.imageIcon)) {
+      return `imageIcon`;
+    } else if (!CommonUtils.isNullOrUndefinedOrEmpty(node.svgIcon)) {
+      return `svgIcon`;
+    } else {
+      return ``;
+    }
+  }
+
+  getHrefTargetType(): string {
+    return this.node.hrefTargetType ? this.node.hrefTargetType : CONSTANT.DEFAULT_HREF_TARGET_TYPE;
+  }
+
+  getSelectedSvgIcon(): string {
+    return this.node.isSelected && this.node.activeSvgIcon ? this.node.activeSvgIcon : this.node.svgIcon;
+  }
+
+  getSelectedIcon(): string {
+    return this.node.isSelected && this.node.activeIcon ? this.node.activeIcon : this.node.icon;
+  }
+
+  getSelectedFaIcon(): string {
+    return this.node.isSelected && this.node.activeFaIcon ? this.node.activeFaIcon : this.node.faIcon;
+  }
+
+  getSelectedImageIcon(): string {
+    return this.node.isSelected && this.node.activeImageIcon ? this.node.activeImageIcon : this.node.imageIcon;
+  }
+
+  nodeExpandStatus(): string {
+    return this.node.expanded ? CONSTANT.YES : CONSTANT.NO;
+  }
+}
diff --git a/projects/ng-material-multilevel-menu/src/lib/list-item/list-item.component.css b/projects/ng-material-multilevel-menu/src/lib/list-item/list-item.component.css
@@ -1,65 +1,3 @@
-.amml-item {
-  position: relative;
-  cursor: pointer;
-}
-
-.anml-link {
-  width: 100%;
-  display: flex;
-  justify-content: flex-start;
-  text-transform: capitalize;
-  text-decoration: none;
-  color: inherit;
-}
-
-.anml-data {
+.filled {
   width: 100%;
-  height: 48px;
-  display: flex;
-  justify-content: flex-start;
-}
-
-.disabled-amml-item {
-  opacity: 0.5;
-  text-decoration: none;
-  pointer-events: none;
-}
-
-.icon-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.amml-icon-fa {
-  font-size: 20px;
-}
-
-.label {
-  line-height: 48px;
-  font-weight: 400;
-}
-
-.amml-svg-icon {
-  width: 22px;
-  height: 22px;
-  margin-top: -12px;
-}
-.amml-icon-arrow-container {
-  direction: ltr;
-  display: flex;
-  align-items: center;
-}
-div[dir="ltr"] .amml-icon {
-  margin-right: 16px;
-}
-div[dir="ltr"].amml-submenu {
-  margin-left: 16px;
-}
-
-div[dir="rtl"] .amml-icon {
-  margin-left: 16px;
-}
-div[dir="rtl"].amml-submenu {
-  margin-right: 16px;
 }