@acorex/components 5.1.2 → 5.1.6

package/src/lib/dropdown/dropdown.component.ts

@@ -0,0 +1,197 @@
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  ViewChild,
+  Input,
+  ElementRef,
+  AfterViewInit,
+  HostListener,
+  Output,
+  EventEmitter,
+  ChangeDetectorRef,
+  ViewContainerRef,
+  TemplateRef,
+  OnDestroy,
+  DebugElement
+} from '@angular/core';
+import { AXBaseDropdownComponent } from '../base/element.class';
+import { AXHtmlEvent } from '../base/events.class';
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { AXConfig } from '@acorex/core';
+
+@Component({
+  selector: 'ax-drop-down',
+  templateUrl: './dropdown.component.html',
+  styleUrls: ['./dropdown.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display:contents;' }
+})
+export class AXDropdownComponent extends AXBaseDropdownComponent implements AfterViewInit, OnDestroy {
+  @ViewChild('baseTemplate') baseTemplate: TemplateRef<any>;
+  @ViewChild('content', { static: false }) content: ElementRef<HTMLDivElement>;
+  @ViewChild('endButtons', { static: false }) endButtons: ElementRef<HTMLDivElement>;
+  @ViewChild('el', { static: true }) dropdownEL: ElementRef<HTMLDivElement>;
+
+  @Input()
+  rtl: boolean = AXConfig.get('layout.rtl');
+
+  @Input()
+  readonly: boolean = false;
+
+  @Input()
+  loading: boolean = false;
+
+  @Output()
+  dropdownToggle: EventEmitter<any> = new EventEmitter<any>();
+
+  @Output()
+  onButtonClick: EventEmitter<AXHtmlEvent<MouseEvent>> = new EventEmitter<AXHtmlEvent<MouseEvent>>();
+
+  @HostListener('keydown', ['$event'])
+  onKeydownHandler(e: KeyboardEvent) {
+    if (!this.disabled && e.key === 'Enter' && e.type === 'keydown') {
+      if (!this.readonly) {
+        this.toggle();
+        // this.dropdownToggle.emit({ mode: 'enter' });
+      }
+    }
+    if (e.key === 'Escape') {
+      if (this.isOpen) {
+        this.close();
+        e.stopPropagation();
+      }
+    }
+  }
+
+  @Input()
+  dropdownWidth: string = "300px";
+
+  private overlayRef: OverlayRef;
+  private templatePortal: TemplatePortal;
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private ref: ElementRef<HTMLDivElement>,
+    private overlay: Overlay,
+    private viewContainerRef: ViewContainerRef
+  ) {
+    super();
+  }
+
+  ngOnInit(): void {
+    if (this.rtl == null) {
+      this.rtl = window.getComputedStyle(this.ref.nativeElement, null).getPropertyValue('direction') === 'rtl';
+    }
+    setTimeout(() => {
+      this.ref.nativeElement.classList.add(this.rtl ? 'rtl' : 'ltr');
+      this.dropdownEL.nativeElement.classList.add(this.rtl ? 'rtl' : 'ltr');
+    }, 5);
+  }
+  ngAfterViewInit(): void {
+    setTimeout(() => {
+      if (this.endButtons && this.endButtons.nativeElement.childNodes.length !== 0) {
+        this.content.nativeElement.style.paddingInlineEnd = `${this.endButtons.nativeElement.clientWidth}px`;
+      }
+      if (this.fitParent == true) {
+        this.dropdownWidth = `${this.dropdownEL.nativeElement.offsetWidth}px`;
+      }
+    }, 5);
+  }
+
+  ngOnDestroy(): void {
+    this.overlayRef?.detach();
+    this.overlayRef?.dispose();
+  }
+
+  handleArrowClick(e: AXHtmlEvent<MouseEvent>) {
+    setTimeout(() => {
+      this.toggle();
+    }, 0);
+  }
+
+  toggle() {
+    if (this.disabled !== true) {
+      this.isOpen ? this.close() : this.open();
+    }
+  }
+
+  close() {
+    if (!this.isOpen) {
+      return;
+    }
+    this.overlayRef?.detach();
+    this.dropdownToggle.emit({ mode: 'close' });
+  }
+
+  open() {
+    if (this.isOpen) {
+      return;
+    }
+    this.ensureOverlayCreated();
+    this.overlayRef.attach(this.templatePortal);
+    this.dropdownToggle.emit({ mode: 'open' });
+  }
+
+  private ensureOverlayCreated() {
+    if (!this.overlayRef) {
+      const targetEl = document.querySelector<HTMLElement>('#' + this.uid);
+      const positionStrategy = this.overlay
+        .position()
+        .flexibleConnectedTo(targetEl)
+        .withPositions([
+          {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top'
+          },
+          {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'bottom'
+          },
+          {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top'
+          },
+          {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'bottom'
+          }
+        ])
+        .withPush(false);
+      this.overlayRef = this.overlay.create({
+        positionStrategy,
+
+        //width: this.dropdownEL.nativeElement.clientWidth,
+        scrollStrategy: this.overlay.scrollStrategies.reposition({
+          autoClose: true
+        }),
+        hasBackdrop: true,
+        backdropClass: 'cdk-overlay-transparent-backdrop'
+      });
+      this.overlayRef.setDirection(this.rtl ? 'rtl' : 'ltr');
+      this.overlayRef.backdropClick().subscribe(() => this.close());
+    }
+    if (!this.templatePortal) {
+      this.templatePortal = new TemplatePortal(this.baseTemplate, this.viewContainerRef);
+    }
+  }
+
+  get isOpen(): boolean {
+    return this.overlayRef ? this.overlayRef.hasAttached() : false;
+  }
+
+  updatePosition(): void {
+    this.overlayRef?.updatePosition();
+  }
+  focus() { }
+}

package/src/lib/dropdown/dropdown.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXDropdownComponent } from './dropdown.component';
+import { AXFormGroupModule } from '../form-group/form-group.module';
+import { AXTextBoxModule } from '../textbox/textbox.module';
+import { AXButtonModule } from '../button/button.module';
+import { AXPopoverModule } from '../popover/popover.module';
+import { OverlayModule } from '@angular/cdk/overlay';
+
+const COMPONENT = [AXDropdownComponent];
+const MODULES = [CommonModule, AXFormGroupModule, AXTextBoxModule, AXButtonModule, AXPopoverModule, OverlayModule];
+
+@NgModule({
+    declarations: [...COMPONENT],
+    imports: [...MODULES],
+    exports: [...COMPONENT],
+    providers: [],
+})
+export class AXDropdownModule { }

package/src/lib/fieldset/fieldset.component.html

@@ -0,0 +1,6 @@
+<fieldset class="ax fieldset {{size}}">
+    <legend (click)="toggle()"> {{ caption }} </legend>
+    <div class="fieldset-content" [@visibilityChanged]="collapsed ? 'hidden' : 'shown'">
+        <ng-content></ng-content>
+    </div>
+</fieldset>

package/src/lib/fieldset/fieldset.component.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { AXBaseSizableComponent, AXElementSize } from '../base/element.class';
+
+@Component({
+    selector: 'ax-fieldset',
+    templateUrl: './fieldset.component.html',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    animations: [
+        trigger('visibilityChanged', [
+            state(
+                'shown',
+                style({
+                    height: '*',
+                    opacity: 1
+                })
+            ),
+            state(
+                'hidden',
+                style({
+                    height: '0px',
+                    opacity: 0,
+                    padding: 0
+                })
+            ),
+            transition('Void => *', animate('0ms')),
+            transition('shown => hidden', animate('200ms')),
+            transition('hidden => shown', animate('200ms'))
+        ])
+    ]
+})
+export class AXFieldsetComponent implements AXBaseSizableComponent {
+    @Input()
+    size: AXElementSize = "md";
+
+    @Input()
+    caption: string = '';
+
+    @Input()
+    allowCollapse: boolean = false;
+
+    collapsed: boolean = false;
+    toggle() {
+        if (this.allowCollapse) {
+            this.collapsed = !this.collapsed;
+        }
+    }
+}

package/src/lib/fieldset/fieldset.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXFieldsetComponent } from './fieldset.component';
+
+@NgModule({
+    declarations: [AXFieldsetComponent],
+    imports: [ CommonModule ],
+    exports: [AXFieldsetComponent],
+    providers: [],
+})
+export class AXFieldsetModule {}

package/src/lib/form-group/form-group.component.html

@@ -0,0 +1,15 @@
+<div class="ax form-group {{size}}">
+    <ng-content select="ax-label"></ng-content>
+    <div #div class="ax form-item {{size}}" [ngClass]="{'required-state': required}">
+        <div class="ax buttons start-buttons" #startButtons>
+            <ng-content select="ax-button[start]"></ng-content>
+        </div>
+        <div class="content" #content>
+            <ng-content></ng-content>
+        </div>
+        <div class="ax buttons end-buttons" #endButtons>
+            <ng-content select="ax-button[end]"></ng-content>
+            <ng-content select="ax-button"></ng-content>
+        </div>
+    </div>
+</div>

package/src/lib/form-group/form-group.component.ts

@@ -0,0 +1,39 @@
+import {
+  Component, Input, ChangeDetectorRef, ChangeDetectionStrategy,
+  ViewEncapsulation, ContentChild, ViewChild, ElementRef
+} from '@angular/core';
+import { AXBaseComponent, AXBaseSizableComponent, AXElementSize, AXValidatableComponent } from '../base/element.class';
+
+@Component({
+  selector: 'ax-form-group',
+  templateUrl: './form-group.component.html',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style:'width: 100%; display:contents;' }
+})
+export class AXFormGroupComponent extends AXBaseComponent implements AXBaseSizableComponent {
+  @Input()
+  size: AXElementSize = 'md';
+
+  @ViewChild('div')
+  div: ElementRef
+
+  @ContentChild(AXValidatableComponent)
+  private component: AXValidatableComponent;
+
+  required: boolean = false;
+
+  constructor(private cdr: ChangeDetectorRef) {
+    super();
+  }
+
+
+  ngAfterViewInit(): void {
+    this.required = this.component?.validation?.rules?.some(c => c.type === 'required');
+    this.div.nativeElement.classList.add(this.size)
+    if (this.required) {
+      this.div.nativeElement.classList.add('required-state')
+    }
+  }
+
+}

package/src/lib/form-group/form-group.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXFormGroupComponent } from './form-group.component';
+
+const COMPONENT = [AXFormGroupComponent];
+const MODULES = [CommonModule];
+
+@NgModule({
+    declarations: [...COMPONENT],
+    imports: [...MODULES],
+    exports: [...COMPONENT],
+    providers: [],
+})
+export class AXFormGroupModule { }

package/src/lib/label/label.component.html

@@ -0,0 +1,5 @@
+<div class="ax form-group-label {{size}}">
+    <label>
+        <ng-content></ng-content>
+    </label>
+</div>

package/src/lib/label/label.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
+import { AXBaseComponent, AXBaseSizableComponent, AXElementSize } from '../base/element.class';
+
+@Component({
+  selector: 'ax-label',
+  templateUrl: './label.component.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class AXLabelComponent extends AXBaseComponent implements AXBaseSizableComponent {
+  constructor() {
+    super();
+  }
+
+  @Input()
+  size: AXElementSize = 'md';
+
+  ngOnInit(): void {}
+}

package/src/lib/label/label.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXLabelComponent } from './label.component';
+
+const COMPONENT = [AXLabelComponent];
+const MODULES = [CommonModule];
+
+@NgModule({
+    declarations: [...COMPONENT],
+    imports: [...MODULES],
+    exports: [...COMPONENT],
+    providers: [],
+})
+export class AXLabelModule { }

package/src/lib/loading/loading-indicator.component.html

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;display:block;"
+    [style.width.px]="size" [style.height.px]="size" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+    <rect fill="var(--ax-gray-trans-light-color)" x="55" y="55" width="30" height="30" rx="3" ry="3">
+        <animate attributeName="x" dur="2s" repeatCount="indefinite"
+            keyTimes="0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1" values="15;55;55;55;55;15;15;15;15"
+            begin="-1.8333333333333333s"></animate>
+        <animate attributeName="y" dur="2s" repeatCount="indefinite"
+            keyTimes="0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1" values="15;55;55;55;55;15;15;15;15"
+            begin="-1.3333333333333333s"></animate>
+    </rect>
+    <rect fill="var(--ax-primary-light-color)" x="55" y="15" width="30" height="30" rx="3" ry="3">
+        <animate attributeName="x" dur="2s" repeatCount="indefinite"
+            keyTimes="0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1" values="15;55;55;55;55;15;15;15;15"
+            begin="-1.1666666666666667s"></animate>
+        <animate attributeName="y" dur="2s" repeatCount="indefinite"
+            keyTimes="0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1" values="15;55;55;55;55;15;15;15;15"
+            begin="-0.6666666666666666s"></animate>
+    </rect>
+    <rect fill="var(--ax-primary-dark-color)" x="15" y="34.6776" width="30" height="30" rx="3" ry="3">
+        <animate attributeName="x" dur="2s" repeatCount="indefinite"
+            keyTimes="0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1" values="15;55;55;55;55;15;15;15;15" begin="-0.5s">
+        </animate>
+        <animate attributeName="y" dur="2s" repeatCount="indefinite"
+            keyTimes="0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1" values="15;55;55;55;55;15;15;15;15" begin="0s">
+        </animate>
+    </rect>
+</svg>

package/src/lib/loading/loading-indicator.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'ax-loading-indicator',
+  templateUrl: './loading-indicator.component.html'
+})
+export class AXLoadingIndicatorComponent implements OnInit {
+  constructor() { }
+
+  ngOnInit(): void {
+    this.size = 80;
+  }
+
+  @Input()
+  size: number;
+}

package/src/lib/loading/loading-panel.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit, Input, ElementRef } from '@angular/core';
+
+@Component({
+    selector: 'ax-loading-panel',
+    template: `
+    <div onclick="return false;" class="ax ax-loading-panel ax-overlay-wrapper ax-overlay-modal ax-loading-overlay" *ngIf="visible" >
+        <ax-loading-indicator tabindex="0" cdkTrapFocus>
+        </ax-loading-indicator>
+    </div>
+  `
+})
+export class AXLoadingPanelComponent implements OnInit {
+
+    constructor(private ref: ElementRef<HTMLDivElement>) {
+
+    }
+
+    @Input()
+    visible: boolean = false;
+
+    ngOnInit(): void {
+
+    }
+
+    ngAfterViewInit() {
+        const host = this.ref.nativeElement.closest('.ax-loading-host');
+    }
+
+    show() {
+        this.visible = true;
+    }
+
+    hide() {
+        this.visible = false;
+    }
+}
+

package/src/lib/loading/loading.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXLoadingIndicatorComponent } from './loading-indicator.component';
+import { AXLoadingPanelComponent } from './loading-panel.component';
+import { A11yModule } from '@angular/cdk/a11y';
+
+@NgModule({
+    declarations: [AXLoadingIndicatorComponent, AXLoadingPanelComponent],
+    imports: [CommonModule, A11yModule],
+    exports: [AXLoadingIndicatorComponent, AXLoadingPanelComponent],
+    providers: [],
+})
+export class AXLoadingModule { }

package/src/lib/loading/loading.service.ts

@@ -0,0 +1,44 @@
+import { Injectable, ComponentRef, EventEmitter } from '@angular/core';
+import { AXRenderService } from '@acorex/core';
+import { AXLoadingPanelComponent } from './loading-panel.component';
+import { AXOverlayService, AXOverlayViewRef } from '../popover/overlay.service';
+import { AXLoadingIndicatorComponent } from './loading-indicator.component';
+
+
+@Injectable({ providedIn: 'root' })
+export class AXLoadingService {
+
+    private _stack: { id: number, component: AXOverlayViewRef }[] = [];
+
+
+    constructor(private injection: AXRenderService, private overlayService: AXOverlayService) {
+
+    }
+
+    show(location?: Element): number {
+        let host: Element;
+        if (location) {
+            host = location.closest('.ax-loading-host');
+        }
+        const containerElement = (host || location) as HTMLDivElement;
+        const com = this.overlayService.show(AXLoadingIndicatorComponent, {},
+            {
+                closeOnClickOutside: false,
+                containerElement,
+                hasBackdrop: true,
+                backdropClass: ['ax-loading-overlay'],
+                scroll: 'block'
+            });
+        const id = new Date().getTime();
+        this._stack.push({ id, component: com });
+        return id;
+    }
+
+    hide(id): void {
+        const f = this._stack.find(c => c.id === id);
+        if (f) {
+            f.component.dispose();
+            this._stack = this._stack.filter(c => c.id !== id);
+        }
+    }
+}

package/src/lib/menu/menu-item.component.ts

@@ -0,0 +1,41 @@
+import {
+    Component,
+    ElementRef,
+    EventEmitter,
+    Input,
+    Output,
+    ViewEncapsulation,
+} from '@angular/core';
+import { AXMenuItem } from '@acorex/core';
+
+@Component({
+    selector: 'ax-menu-item',
+    template: `
+      <div  class="ax-menu-item {{item.style}}" [attr.data-level]="level" (click)="showSubItems($event)" [ngClass]="{'disabled': item.disable}" >
+        <i *ngIf="item.startIcon" class="icon {{item.startIcon}}"></i>
+        <span class="text">{{ item.text }}</span>
+        <i *ngIf="item.endIcon" class="icon {{item.endIcon}}"></i>
+        <i class="far fa-angle-down icon drop-icon" *ngIf="item?.items?.length && item.text"></i>
+      </div>
+    `,
+    encapsulation: ViewEncapsulation.None
+})
+export class AXMenuItemComponent {
+    @Input() item: AXMenuItem;
+    @Input() level: number;
+    @Output() showSubMenu = new EventEmitter<SubItemsEvent>();
+
+    constructor(private element: ElementRef) { }
+
+    showSubItems(event: Event) {
+        event.stopPropagation();
+        if (this.item?.items?.length) {
+            this.showSubMenu.emit({ item: this.item, element: this.element, level: this.level });
+        }
+    }
+}
+export interface SubItemsEvent {
+    element: ElementRef;
+    item: AXMenuItem;
+    level: number;
+}

package/src/lib/menu/menu.component.html

@@ -0,0 +1,74 @@
+<!-- <div class="ax menu-container {{size}}" #container>
+  <ul class="root" [class.horizontal]="direction=='horizontal'" [class.vertical]="direction=='vertical'" #root>
+    <ng-template #recursiveList let-list>
+      <ng-container *ngFor="let item of list;trackBy:trackByItem">
+        <li class="ax-toolbar-menu-item ax {{item.type || 'ax primary'}} {{item.style || 'ax primary'}}" [class.disabled]='item.disable'  [class.subIcon]='item.items' [class.startIcon]='item.startIcon' [class.startIcon]='item.icon' [class.endIcon]='item.endIcon' *ngIf="item.visible!=false" (click)="handleItemClick($event, item)"
+          [class.selected]="item.selected" [class.divider]="item.divider" [attr.title]="item.tooltip ? item.tooltip : null"
+          [attr.data-uid]="item.uid"
+          [class.split]="item.split">
+          <div class="content-side">
+            <ng-container *ngIf="menuTemplate; else menuBody">
+              <ng-container *ngTemplateOutlet="menuTemplate; context: { $implicit: item }">
+              </ng-container>
+            </ng-container>
+            <ng-template #menuBody>
+              <span class="ax-toolbar-menu-item-text">
+                <i class="{{ item.startIcon }} start-icon ax-menu-item-icon" *ngIf="item.startIcon"></i>
+                <i class="{{ item.icon }} start-icon ax-menu-item-icon" *ngIf="item.icon"></i>
+                <span *ngIf="item.text">{{ item.text }}</span>
+                <i class="{{ item.endIcon }} end-icon ax-menu-item-icon" *ngIf="item.endIcon"></i>
+              </span>
+            </ng-template>
+          </div>
+          <div class="sub-icon-side" *ngIf="item.hasChildren">
+            <i class="far fa-angle-down ax-menu-item-drop-icon"></i>
+          </div>
+          <ul *ngIf="item.hasChildren" class="collapsed sub-menu">
+            <ng-container *ngTemplateOutlet="
+              recursiveList;
+              context: { $implicit: item.items }
+            "></ng-container>
+          </ul>
+        </li>
+      </ng-container>
+    </ng-template>
+    <ng-container *ngTemplateOutlet="recursiveList; context: { $implicit: items }"></ng-container>
+    <li class="more" #moreLI (click)="handleItemClick($event)">
+      <i class="far fa-bars"></i>
+      <ul #moreUL class="collapsed sub-menu"></ul>
+    </li>
+  </ul>
+</div> -->
+
+<nav>
+  <ul class="ax nav-menu" [class.rtl]="rtl" [class.nav-center]="direction=='horizontal'"
+    [class.nav-vertical]="direction=='vertical'">
+    <ng-container *ngTemplateOutlet="recursiveMenu; context:{ $implicit: items }"></ng-container>
+  </ul>
+</nav>
+
+<ng-template #recursiveMenu let-items>
+  <ng-container *ngFor="let item of items">
+    <li class="ax {{item.style}}" [ngClass]="{'disabled': item.disable}"
+      *ngIf="item.visible === undefined || item.visible" (click)="handleItemClick($event,item)" axTooltip
+      [placement]="item.tooltipPlacement ? item.tooltipPlacement : 'bottom'"
+      [tooltip]="item.tooltip ? item.tooltip : ''">
+      <div class="ax-menu-item" >
+        <span class="menu-item-start-side">
+          <i class="{{ item.startIcon }}" *ngIf="item.startIcon"></i>
+          <i class="{{ item.icon }}" *ngIf="item.icon"></i>
+          <span class="ax-menu-item-text" *ngIf="item.text">{{item.text}}</span>
+        </span>
+        <span class="menu-item-end-side">
+          <i class="far fa-angle-down drop-icon" *ngIf="item.items && item.text"></i>
+          <i class="{{ item.endIcon }}" *ngIf="item.endIcon"></i>
+        </span>
+
+      </div>
+      <ul *ngIf="item.items" class="ax-sub-menu">
+        <ng-container *ngTemplateOutlet="recursiveMenu; context:{ $implicit: item.items }">
+        </ng-container>
+      </ul>
+    </li>
+  </ng-container>
+</ng-template>