@acorex/components 4.1.6 → 4.2.0

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" [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');
+    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,65 @@
+<!-- <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 : ''" >
+      <span>
+        <i class="{{ item.startIcon }}" *ngIf="item.startIcon"></i>
+        <i class="{{ item.icon }}" *ngIf="item.icon"></i>
+        <span *ngIf="item.text">{{item.text}}</span>
+        <i class="far fa-angle-down drop-icon" *ngIf="item.items && item.text"></i>
+      </span>
+      <ul>
+        <ng-container *ngTemplateOutlet="recursiveMenu; context:{ $implicit: item.items }">
+        </ng-container>
+      </ul>
+    </li>
+  </ng-container>
+</ng-template>

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

@@ -0,0 +1,111 @@
+import {
+  Component,
+  Input,
+  EventEmitter,
+  Output,
+  ElementRef,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  NgZone,
+  ChangeDetectorRef,
+  TemplateRef,
+  ContentChild
+} from '@angular/core';
+import { AXPlacement, AXMenuItem } from '@acorex/core';
+import { AXBaseSizableComponent, AXElementSize } from '../base/element.class';
+import { AXEvent } from '../base/events.class';
+
+export class AXMenuItemClickEvent extends AXEvent<AXMenuItem, MouseEvent> {
+  name: string;
+}
+
+@Component({
+  selector: 'ax-menu',
+  templateUrl: './menu.component.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class AXMenuComponent implements AXBaseSizableComponent {
+
+  constructor(private ref: ElementRef, private cdr: ChangeDetectorRef) {
+  }
+
+  @ContentChild(TemplateRef, { static: true })
+  _contentMenuTemplate: TemplateRef<any>;
+
+  private _menuTemplate: TemplateRef<any>;
+  @Input()
+  public get menuTemplate(): TemplateRef<any> {
+    return this._menuTemplate ? this._menuTemplate : this._contentMenuTemplate;
+  }
+  public set menuTemplate(v: TemplateRef<any>) {
+    this._menuTemplate = v;
+  }
+
+  resizeChangeObserver: any;
+
+  @Input()
+  rtl: boolean;
+
+  @Output()
+  onItemClick: EventEmitter<AXMenuItemClickEvent> = new EventEmitter<AXMenuItemClickEvent>();
+
+  @Input()
+  size: AXElementSize = 'md';
+
+  @Input()
+  public selection: 'none' | 'single' | 'multiple' = 'none';
+
+  @Input()
+  public mode: 'click' | 'context' | 'visible' | 'manual' = 'visible';
+
+  @Input()
+  public target: string;
+
+  @Input()
+  public floatAlignment: AXPlacement;
+
+  @Input()
+  public floatPlacemnet: AXPlacement;
+
+  public currentTarget: HTMLElement;
+
+  @Input()
+  public direction: 'vertical' | 'horizontal' = 'horizontal';
+
+  private _items: AXMenuItem[];
+  @Input()
+  public get items(): AXMenuItem[] {
+    return this._items;
+  }
+  public set items(v: AXMenuItem[]) {
+    this._items = v;
+  }
+
+  ngOnInit() {
+    if (this.rtl == null) {
+      this.rtl = window.getComputedStyle(this.ref.nativeElement, null).getPropertyValue('direction') === 'rtl';
+    }
+  }
+
+
+  handleItemClick(e: MouseEvent, item?: AXMenuItem) {
+    e.stopPropagation();
+    if (item && (!item.items || !item.items.filter((c) => c.visible !== false).length) && !item.disable) {
+      const m = {
+        component: this,
+        htmlElement: this.ref.nativeElement,
+        htmlEvent: e,
+        data: item,
+        name: item?.name
+      };
+      if (item.onClick) {
+        item.onClick();
+      }
+      else {
+        this.onItemClick.emit(m);
+      }
+
+      return;
+    }
+  }
+}

package/src/lib/menu/menu.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXMenuComponent } from './menu.component';
+import { AXMenu2Component } from './menu2.component';
+import { AXMenuItemComponent } from './menu-item.component';
+import { AXTooltipModule } from '../tooltip/tooltip.module';
+@NgModule({
+  declarations: [AXMenuComponent, AXMenu2Component, AXMenuItemComponent],
+  imports: [CommonModule,AXTooltipModule],
+  exports: [AXMenuComponent, AXMenu2Component, AXMenuItemComponent],
+  providers: []
+})
+export class AXMenuModule { }

package/src/lib/menu/menu2.component.scss

@@ -0,0 +1,59 @@
+.ax {
+    &.ax-menu {
+        display: flex;
+        &.ax-menu-vertical {
+            &[data-level="0"] {
+                display: flex;
+                flex-direction: row;
+            }
+            &:not([data-level="0"]) {
+                display: flex;
+                transition: opacity .3s;
+                min-width: 12em;
+                box-shadow: 0 1px 7px 0 var(--ax-border-color);
+                background: #fff;
+                flex-direction: column;
+            }
+            .ax-menu-item {
+                display: flex;
+                white-space: nowrap;
+                cursor: pointer;
+                padding: 0 10px;
+                font-weight: normal;
+                font-size: 1rem;
+                line-height: 40px;
+                text-decoration: none;
+                align-items: center;
+                .icon {
+                    &:first-child {
+                        margin-inline-end: var(--ax-size-md);
+                    }
+                    &:last-child {
+                        margin-inline-start: var(--ax-size-md);
+                    }
+                }
+                span {
+                    flex: 1;
+                }
+                &.disabled {
+                    opacity: 0.6;
+                }
+                // &.disabled {
+                //     // color: var(--ax-gray-color) !important;
+                //     // background-color: var(--ax-gray-trans-light-color) !important;
+                //     opacity: 0.6;
+                //     cursor: not-allowed !important;
+                //     .icon {
+                //         color: var(--ax-gray-dark-color) !important;
+                //     }
+                //     &:hover {
+                //         // background: var(--ax-light-light-color) !important;
+                //         // border-color: var(--ax-light-light-color) !important;
+                //         // color: var(--ax-gray-dark-color) !important;
+                //         cursor: not-allowed !important;
+                //     }
+                // }
+            }
+        }
+    }
+}

package/src/lib/menu/menu2.component.ts

@@ -0,0 +1,98 @@
+import {
+    Component,
+    ElementRef,
+    EventEmitter,
+    HostListener,
+    Input,
+    OnDestroy,
+    Output,
+    TemplateRef,
+    ViewChild,
+    ViewContainerRef,
+    ViewEncapsulation,
+} from '@angular/core';
+import { SubItemsEvent } from './menu-item.component';
+import { Overlay, OverlayRef, ConnectedPosition } from '@angular/cdk/overlay';
+import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
+import { AXMenuItem } from '@acorex/core';
+
+@Component({
+    selector: 'ax-menu2',
+    template: `
+     <div class="ax ax-menu ax-menu-vertical" [attr.data-level]="level">
+        <ax-menu-item
+            *ngFor="let item of items"
+            [level]="level"
+            [item]="item"
+            (showSubMenu)="showSubmenu($event)">
+        </ax-menu-item>
+     </div>
+    `,
+    styleUrls: ['./menu2.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class AXMenu2Component implements OnDestroy {
+    subItemsOverlays = new Array<OverlayRef>();
+    level: number = 0;
+
+    @Input() items: AXMenuItem[];
+    @Output() selected = new EventEmitter<AXMenuItem>();
+    //@ViewChild(TemplateRef) template;
+
+    constructor(
+        private overlay: Overlay,
+        private viewContainerRef: ViewContainerRef,
+        private elementRef: ElementRef
+    ) { }
+
+    showSubmenu(event: SubItemsEvent) {
+        const position: ConnectedPosition[] = [];
+        if (event.level === 0) {
+            position.push({
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+            });
+        } else {
+            position.push({
+                originX: 'end',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'top',
+            });
+        }
+
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(event.element)
+            .withPositions(position);
+        const overlayRef = this.overlay.create({
+            positionStrategy,
+            hasBackdrop: false,
+            backdropClass: 'cdk-overlay-transparent-backdrop'
+        });
+        this.subItemsOverlays.push(overlayRef);
+        const portal = new ComponentPortal(AXMenu2Component, this.viewContainerRef);
+
+        const com = overlayRef.attach(portal);
+        com.instance.level = event.level + 1;
+        com.instance.items = event.item.items;
+    }
+
+    @HostListener('document:click', ['$event.target'])
+    public onDocumentClick(target) {
+        const clickedInside = this.elementRef.nativeElement.contains(target);
+        if (!clickedInside) {
+            this.hideOverlays();
+        }
+    }
+
+    hideOverlays() {
+        this.subItemsOverlays.forEach((o) => o.dispose());
+        this.subItemsOverlays.length = 0;
+    }
+    ngOnDestroy() {
+        this.hideOverlays();
+    }
+}