@acorex/components 6.5.27 → 6.5.29

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

@@ -1,197 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,6 +0,0 @@
-<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

@@ -1,49 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,15 +0,0 @@
-<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

@@ -1,39 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

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

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

@@ -1,18 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,27 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,74 +0,0 @@
-<!-- <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>