@acorex/components 4.2.0 → 4.2.2

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" [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');
-    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,65 +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 : ''" >
-      <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

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

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

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

@@ -1,98 +0,0 @@
-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();
-    }
-}