@acorex/components 5.1.2 → 5.1.6

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: 0.875rem;
+                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();
+    }
+}

package/src/lib/number-box/number-box.component.html

@@ -0,0 +1,32 @@
+<div class="ax form-item" [class.disabled]="disabled" [attr.id]="uid" #fc>
+    <div class="ax items-wrapper">
+        <ng-content select="[start]">
+        </ng-content>
+        <ax-button icon="far fa-plus" type="success blank" (click)="upStepHandel()" [disabled]="disabled" *ngIf="showDoubleCounter"></ax-button>
+    </div>
+    <div class="content" #content>
+        <div class="ax form-control input {{size}}" [class.disabled]="disabled" [class.readonly]="readonly"
+            [class.icon]="icon">
+            <input [autocomplete]="autocomplete" [name]="name" #input type="text" class="ax {{size}}" [maxlength]="calcSeparator(maxLength)" [(ngModel)]="textValue" placeholder="{{placeholder}}"
+                [readonly]="readonly" [disabled]="disabled" [ngClass]="setTextAlign()"
+                [class.clear]="value && allowClear" (focus)="handleInputFocus($event)" (blur)="handleInputBlur($event)"
+                (keypress)="handleKeyPress($event)" (ngModelChange)="this.userQuestionUpdate.next($event)"
+                (keydown)="handleKeyDown($event)" (click)="handleClick()" (keyup)="handleKeyUp($event)">
+            <i class="{{icon}}" *ngIf="icon"></i>
+        </div>
+    </div>
+    <div class="ax items-wrapper">
+        <ax-button *ngIf="value && allowClear" [disabled]="disabled" icon="far fa-times" type="danger blank"
+            (click)="clear()"></ax-button>
+            <ax-button icon="far fa-minus" type="danger blank" (click)="downStepHandel()" [disabled]="disabled" *ngIf="showDoubleCounter"></ax-button>
+        <ng-content select="[end]">
+        </ng-content>
+        <div class="arrow-number" *ngIf="showCounter && !showDoubleCounter && !readonly" >
+            <ax-button type="light blank" [disabled]="disabled" icon="fas fa-angle-up" [size]="size"
+                (mousedown)="upStepHandel()" (mouseup)="delaySearch()" [tabIndex]="-1"></ax-button>
+            <ax-button type="light blank" [disabled]="disabled" icon="fas fa-angle-down" [size]="size"
+                (mousedown)="downStepHandel()" (mouseup)="delaySearch()" [tabIndex]="-1"></ax-button>
+        </div>
+    </div>
+
+</div>