@acorex/components 4.1.6 → 4.2.0

package/src/lib/tooltip/tooltip.directive.ts

@@ -0,0 +1,101 @@
+import { Directive, Input, ElementRef, HostListener, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[axTooltip]'
+})
+export class AXTooltipDirective {
+  @Input('tooltip') tooltipTitle: string;
+  @Input() placement: string = 'top';
+  @Input() delay: number = 500;
+  tooltip: HTMLElement;
+  offset = 17;
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {
+    
+  }
+
+
+  @HostListener('mouseenter') onMouseEnter() {
+    if (!this.tooltip && this.tooltipTitle) {
+      this.show();
+    }
+  }
+
+  @HostListener('mouseleave') onMouseLeave() {
+    if (this.tooltip && this.tooltipTitle) {
+      this.hide();
+    }
+  }
+
+  show() {
+    this.create();
+    this.setPosition();
+    this.renderer.addClass(this.tooltip, 'ax-tooltip-show');
+  }
+
+  hide() {
+    if (this.tooltip) {
+      try {
+        this.renderer.removeClass(this.tooltip, 'ax-tooltip-show');
+        this.renderer.removeChild(document.body, this.tooltip);
+        this.tooltip = null;
+      } catch (error) {}
+    }
+  }
+
+  create() {
+    if(this.tooltipTitle){
+      this.tooltip = this.renderer.createElement('span');
+
+    this.renderer.appendChild(
+      this.tooltip,
+      this.renderer.createText(this.tooltipTitle) // textNode
+    );
+
+    this.renderer.appendChild(document.body, this.tooltip);
+
+    this.renderer.addClass(this.tooltip, 'ax-tooltip');
+    this.renderer.addClass(this.tooltip, `ax-tooltip-${this.placement}`);
+    this.renderer.setStyle(this.tooltip, '-webkit-transition', `opacity ${this.delay}ms`);
+    this.renderer.setStyle(this.tooltip, '-moz-transition', `opacity ${this.delay}ms`);
+    this.renderer.setStyle(this.tooltip, '-o-transition', `opacity ${this.delay}ms`);
+    this.renderer.setStyle(this.tooltip, 'transition', `opacity ${this.delay}ms`);
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.hide();
+  }
+
+  setPosition() {
+    const hostPos = this.el.nativeElement.getBoundingClientRect();
+    const tooltipPos = this.tooltip.getBoundingClientRect();
+    const scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+
+    let top;
+    let left;
+
+    if (this.placement === 'top') {
+      top = hostPos.top - tooltipPos.height - this.offset;
+      left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+    }
+
+    if (this.placement === 'bottom') {
+      top = hostPos.bottom + this.offset;
+      left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+    }
+
+    if (this.placement === 'left') {
+      top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+      left = hostPos.left - tooltipPos.width - this.offset;
+    }
+
+    if (this.placement === 'right') {
+      top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+      left = hostPos.right + this.offset;
+    }
+
+    this.renderer.setStyle(this.tooltip, 'top', `${top + scrollPos}px`);
+    this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
+  }
+}

package/src/lib/tooltip/tooltip.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXTooltipDirective } from './tooltip.directive';
+
+@NgModule({
+    declarations: [AXTooltipDirective],
+    imports: [ CommonModule ],
+    exports: [AXTooltipDirective],
+    providers: [],
+})
+export class AXTooltipModule {}

package/src/lib/tree-side-menu/tree-side-menu.component.html

@@ -0,0 +1,43 @@
+<ul class="ax-tree-side-menu {{size}} {{cssClass}}">
+  <ng-template #recursiveList let-list>
+    <ng-container *ngFor="let item of list">
+      <li (click)="handleOnNodeClick($event,item,true)"
+        class="{{item[hasChildField] ? '':'node'}} {{!!item.toggle  ? 'active':''}}" style="display: flex;"
+        [class.selected]="item.select">
+        <div class="ax-tree-side-menu-item" (click)="handleOnNodeClick($event,item,true)">
+
+        
+
+          <div (click)="handleOnNodeClick($event,item,true)" (dblclick)="itemdbClick($event,item)">
+            <ng-container *ngIf="nodeTemplate; else elseTemplate">
+              <ng-container *ngTemplateOutlet="nodeTemplate; context:{ $implicit: item }"></ng-container>
+            </ng-container>
+            <ng-template #elseTemplate>
+              {{item[textField]}}
+            </ng-template>
+          </div>
+
+          <div class="start-side" *ngIf="iconStart">
+            <div *ngIf="item[hasChildField]">
+              <i class="{{openIconName}}" *ngIf=" !!item.toggle && !item.loading"></i>
+              <i class="{{closeIconName}}" *ngIf="!item.toggle && !item.loading"></i>
+              <i class="fal fa-spinner fa-spin" *ngIf="item.loading"></i>
+            </div>
+          </div>
+
+          <div class="start-side" *ngIf="!iconStart">
+            <div *ngIf="item[hasChildField]" (click)="handleOnNodeClick($event,item,true)">
+              <i class="{{openIconName}}" *ngIf=" !!item.toggle && !item.loading"></i>
+              <i class="{{closeIconName}}" *ngIf="!item.toggle && !item.loading"></i>
+              <i class="fal fa-spinner fa-spin" *ngIf="item.loading"></i>
+            </div>
+          </div>
+        </div>
+        <ul class="ax-tree-side-menu-child" *ngIf="item.toggle">
+          <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.childeren }"></ng-container>
+        </ul>
+      </li>
+    </ng-container>
+  </ng-template>
+  <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container>
+</ul>