@acorex/components 6.5.26 → 6.5.28

package/src/lib/color-picker/color-box/color-box.component.ts

@@ -0,0 +1,438 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { AXValidatableComponent } from '../../base/element.class';
+import { AXColorUtil, AXColor } from '@acorex/core';
+
+@Component({
+    selector: 'ax-color-box',
+    templateUrl: './color-box.component.html',
+    styleUrls: ['./color-box.component.scss'],
+    providers: [
+        { provide: AXValidatableComponent, useExisting: AXColorBoxComponent },
+    ]
+})
+export class AXColorBoxComponent extends AXValidatableComponent {
+
+    inputFormat: 'hex' | 'rgb' = 'hex';
+
+    constructor() {
+        super();
+    }
+
+    @Output()
+    onColorSelect: EventEmitter<string> = new EventEmitter<string>();
+
+    @Output()
+    valueChange: EventEmitter<string> = new EventEmitter<string>();
+
+    private _value: string;
+
+    @Input()
+    public get value(): string {
+        return this._value;
+    }
+    public set value(v: string) {
+        if (v != this._value) {
+            this._value = v;
+            if (v) {
+                const selected = this.colors.find(c => c.code === v);
+                if (selected) {
+                    this.selectColor(selected);
+                }
+                else {
+                    this.colors.forEach((i) => {
+                        i.active = false
+                    });
+                }
+                const rgb = AXColorUtil.hex2Rgb(v);
+
+                if (rgb) {
+                    this.rColor = rgb.r;
+                    this.gColor = rgb.g;
+                    this.bColor = rgb.b;
+                }
+            }
+            else {
+                this.rColor = null;
+                this.gColor = null;
+                this.bColor = null;
+            }
+            this.valueChange.emit(v);
+        }
+    }
+
+    rColor: number = 0;
+    gColor: number = 0;
+    bColor: number = 0;
+
+
+    colors: AXColor[] = [
+        // Pink  ***************************
+        {
+            code: '#FFC0CB',
+        },
+        {
+            code: '#FF69B4',
+        },
+        {
+            code: '#DB7093',
+        },
+        {
+            code: '#C71585',
+        },
+        // Purple ***************************
+        {
+            code: '#E6E6FA',
+        },
+        {
+            code: '#D8BFD8',
+        },
+        {
+            code: '#DDA0DD',
+        },
+        {
+            code: '#DA70D6',
+        },
+        {
+            code: '#FF00FF',
+        },
+        {
+            code: '#BA55D3',
+        },
+        {
+            code: '#9932CC',
+        },
+        {
+            code: '#8A2BE2',
+
+        },
+        {
+            code: '#8B008B',
+        },
+        {
+            code: '#9370DB',
+        },
+        {
+            code: '#7B68EE',
+        },
+        {
+            code: '#6A5ACD',
+        },
+        {
+            code: '#483D8B',
+        },
+        {
+            code: '#663399',
+        },
+        {
+            code: '#4B0082',
+        },
+        // Red  ***************************
+        {
+            code: '#FFA07A',
+        },
+        {
+            code: '#FA8072',
+        },
+        {
+            code: '#F08080',
+        },
+        {
+            code: '#CD5C5C',
+        },
+        {
+            code: '#DC143C',
+        },
+        {
+            code: '#FF0000',
+        },
+        {
+            code: '#B22222',
+        },
+        {
+            code: '#8B0000',
+        },
+        // Orange ***************************
+        {
+            code: '#FFA500',
+        },
+        {
+            code: '#FF8C00',
+        },
+        {
+            code: '#FF7F50',
+        },
+        {
+            code: '#FF6347',
+        },
+        {
+            code: '#FF4500',
+        },
+        {
+            code: '#FFD700',
+        },
+        // Yellow ***************************
+        {
+            code: '#FFFF00',
+        },
+        {
+            code: '#FFFFE0',
+        },
+        {
+            code: '#FFFACD',
+        },
+        {
+            code: '#FFEFD5',
+        },
+        {
+            code: '#FFE4B5',
+        },
+        {
+            code: '#FFDAB9',
+        },
+        {
+            code: '#EEE8AA',
+        },
+        {
+            code: '#F0E68C',
+        },
+        {
+            code: '#BDB76B',
+        },
+        //  Brown ***************************
+        // {
+        //     code: '#FFF8DC'
+        // },
+        // {
+        //     code: '#FFEBCD'
+        // },
+        // {
+        //     code: '#FFE4C4'
+        // },
+        {
+            code: '#FFDEAD'
+        },
+        {
+            code: '#DEB887'
+        },
+        {
+            code: '#D2B48C'
+        },
+        {
+            code: '#DAA520'
+        },
+        {
+            code: '#B8860B'
+        },
+        {
+            code: '#CD853F'
+        },
+        {
+            code: '#D2691E'
+        },
+        {
+            code: '#8B4513'
+        },
+        {
+            code: '#A0522D'
+        },
+        // Green ***************************
+        {
+            code: '#ADFF2F',
+        },
+        {
+            code: '#7FFF00',
+        },
+        {
+            code: '#00FF00',
+        },
+        {
+            code: '#32CD32',
+        },
+        {
+            code: '#98FB98',
+        },
+        {
+            code: '#90EE90',
+        },
+        {
+            code: '#00FA9A',
+        },
+        {
+            code: '#00FF7F',
+        },
+        {
+            code: '#3CB371',
+        },
+        {
+            code: '#2E8B57',
+        },
+        {
+            code: '#228B22',
+        },
+        {
+            code: '#008000',
+        },
+        {
+            code: '#006400',
+        },
+        {
+            code: '#9ACD32',
+        },
+        {
+            code: '#6B8E23',
+        },
+        {
+            code: '#556B2F',
+        },
+        {
+            code: '#66CDAA',
+        },
+        {
+            code: '#8FBC8F',
+        },
+        {
+            code: '#20B2AA',
+        },
+        {
+            code: '#008B8B',
+        },
+        //  Cyan ***************************
+
+        {
+            code: '#E0FFFF',
+        },
+        {
+            code: '#AFEEEE',
+        },
+        {
+            code: '#7FFFD4',
+        },
+        {
+            code: '#40E0D0',
+        },
+        {
+            code: '#48D1CC',
+        },
+        {
+            code: '#00CED1',
+        },
+        //  Blue ***************************
+        {
+            code: '#5F9EA0'
+        },
+        {
+            code: '#4682B4'
+        },
+        {
+            code: '#B0C4DE'
+        },
+        {
+            code: '#ADD8E6'
+        },
+        {
+            code: '#B0E0E6'
+        },
+        {
+            code: '#87CEFA'
+        },
+        {
+            code: '#87CEEB'
+        },
+        {
+            code: '#6495ED'
+        },
+        {
+            code: '#00BFFF'
+        },
+        {
+            code: '#00FFFF',
+        },
+        {
+            code: '#1E90FF'
+        },
+        {
+            code: '#4169E1'
+        },
+        {
+            code: '#0000FF'
+        },
+        {
+            code: '#0000CD'
+        },
+        {
+            code: '#00008B'
+        },
+        {
+            code: '#191970'
+        },
+        // Gray
+        {
+            code: '#FFFFFF'
+        },
+        {
+            code: '#DCDCDC'
+        },
+        {
+            code: '#808080'
+        },
+        {
+            code: '#708090'
+        },
+        {
+            code: '#000000'
+        },
+    ];
+
+
+    // validate(): Promise<IValidationRuleResult> {
+
+    //     return new Promise<IValidationRuleResult>(resolve => {
+    //         if (!this.validator) {
+    //             resolve({ result: true });
+    //         } else {
+    //             // this.validator.validate(this.model).then(r => {
+    //             //     r.target = this;
+    //             //     if (r.result) {
+    //             //         this.errorText = null;
+    //             //     } else {
+    //             //         this.errorText = r.message;
+    //             //     }
+    //             //     resolve(r);
+    //             // });
+
+    //             resolve()
+    //         }
+    //     });
+    // }
+
+    focus() {
+    }
+
+    clear(): void {
+        this.value = null;
+    }
+
+    onColorClick(item: AXColor) {
+        this.value = item ? item.code : null;
+        this.selectColor(item);
+        this.onColorSelect.emit(this.value);
+    }
+
+    handleColorChange() {
+        this.value = AXColorUtil.rgb2Hex(this.rColor, this.gColor, this.bColor);
+
+    }
+
+    private selectColor(item: AXColor) {
+        this.colors.forEach((i) => {
+            i.active = false;
+        });
+        item.active = true
+    }
+
+    handleKeyEvent(e: KeyboardEvent) {
+        if (e.code == 'Enter' || e.code == 'NumpadEnter') {
+            this.onColorSelect.emit(this.value);
+        }
+    }
+}

package/src/lib/color-picker/color-picker.component.html

@@ -0,0 +1,31 @@
+<ax-drop-down #dropdown fitParent="false" [size]="size" [disabled]="disabled"  [rtl]="rtl">
+    <ng-container start>
+        <ng-content select="[start]">
+        </ng-content>
+    </ng-container>
+    <ng-container header>
+
+        <div class="ax form-item" [class.disabled]="disabled" [attr.id]="uid" #fc>
+            <div class="content" #content>
+                <div class="ax form-control input {{size}}" [class.disabled]="disabled" [class.readonly]="readonly">
+                    <ng-container *ngIf="value; else elseTemplate">
+                        <div [style.background-color]="value" [style.color]="findTextColor(value)"
+                            style="padding:0px 5px;width: 100%;display: flex;align-items: center;">
+                            {{value}}&nbsp;</div>
+                    </ng-container>
+                    <ng-template #elseTemplate>
+                        {{placeholder}}&nbsp;
+                    </ng-template>
+                </div>
+            </div>
+        </div>
+    </ng-container>
+    <ng-container end>
+        <ng-content select="[end]">
+        </ng-content>
+    </ng-container>
+    <ng-container panel>
+        <ax-color-box [(value)]="value" 
+            (onColorSelect)="handleItemClick($event)"></ax-color-box>
+    </ng-container>
+</ax-drop-down>

package/src/lib/color-picker/color-picker.component.ts

@@ -0,0 +1,87 @@
+import { Component, OnInit, ViewChild, Input, Output, EventEmitter, ContentChild, ElementRef } from '@angular/core';
+import { AXValidatableComponent, AXBaseSizableComponent, AXBaseInputComponent, AXElementSize } from '../base/element.class';
+import { AXColorBoxComponent } from './color-box/color-box.component';
+import { AXColorUtil, AXConfig } from '@acorex/core';
+import { AXDropdownComponent } from '../dropdown/dropdown.component';
+import { AXValidation } from '../validation/validation.component';
+
+
+@Component({
+    selector: 'ax-color-picker',
+    templateUrl: './color-picker.component.html',
+    providers: [
+        { provide: AXValidatableComponent, useExisting: AXColorPickerComponent },
+    ],
+    host: { style:'width: 100%' }
+})
+export class AXColorPickerComponent extends AXColorBoxComponent implements AXBaseSizableComponent, AXBaseInputComponent {
+
+    @ViewChild('dropdown', { static: true })
+    dropdown: AXDropdownComponent;
+    @Input() placeholder: string = '';
+    @Input() showClear: boolean = false;
+
+    @Input() label: string;
+
+    _text: string = '';
+
+    constructor(private ref: ElementRef) {
+        super();
+    }
+
+    @Input()
+    readonly: boolean;
+    @Input()
+    disabled: boolean;
+    @Input()
+    size: AXElementSize = 'md';
+
+    @Input()
+    rtl: boolean = AXConfig.get('layout.rtl');
+
+    @ContentChild(AXValidation, { static: true })
+    private _contentValidation: AXValidation;
+
+    private _validation: AXValidation;
+
+    @Input()
+    public get validation(): AXValidation {
+        return this._validation ? this._validation : this._contentValidation;
+    }
+
+    public set validation(v: AXValidation) {
+        this._validation = v;
+    }
+
+
+    ngOnInit() {
+        if (this.rtl == null) {
+            this.rtl = window.getComputedStyle(this.ref.nativeElement, null).getPropertyValue('direction') === 'rtl';
+        }
+    }
+
+
+    ngAfterContentInit() {
+        this.initValidation(this.ref, 'value', this.validation);
+    }
+
+    focus(): void {
+        this.dropdown.focus();
+    }
+
+    // handleValueChange(c: string) {
+
+    // }
+
+    findTextColor(color: string) {
+        if (!color) {
+            return '#000';
+        }
+        return !(AXColorUtil.contrastToWhite(color) > 2.0) ? '#000' : '#fff';
+    }
+
+    handleItemClick(e) {
+        this.dropdown.close();
+    }
+
+}

package/src/lib/color-picker/color-picker.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXColorPickerComponent } from './color-picker.component';
+import { AXColorBoxComponent } from './color-box/color-box.component';
+import { AXValidationModule } from '../validation/validation.module';
+import { AXDropdownModule } from '../dropdown/dropdown.module';
+import { AXTextBoxModule } from '../textbox/textbox.module';
+import { FormsModule } from '@angular/forms';
+
+@NgModule({
+    declarations: [AXColorPickerComponent, AXColorBoxComponent],
+    imports: [CommonModule, FormsModule, AXDropdownModule, AXValidationModule, AXTextBoxModule],
+    exports: [AXColorPickerComponent, AXColorBoxComponent],
+    providers: []
+})
+export class AXColorPickerModule { }

package/src/lib/context-menu/context-menu.component.html

@@ -0,0 +1,42 @@
+<!-- <ul class="ax context-menu {{size}}" [style.width.px]="width">
+    <ng-container *ngFor="let item of items">
+        <li class="context-menu-item" [class.divider]="item.divider" [class.disabled]="item.disable">
+            <div class="startIcon">
+                <i class="{{item.icon}}"></i>
+                <i class="{{item.startIcon}}" *ngIf="!item.icon && item.startIcon"></i>
+            </div>
+            <span>{{item.text}}</span>
+
+            <div class="endIcon">
+                <i class="{{item.endIcon}}" *ngIf="!item.icon && item.startIcon"></i>
+                <i class="far fa-angle-left ax-menu-item-drop-icon"></i>
+            </div>
+        </li>
+    </ng-container>
+
+</ul> -->
+
+<ul #contex class="ax context-menu {{size}}" [style.width.px]="width"
+    [ngClass]="{'animate__animated animate__faster animate__fadeIn': show}">
+    <ng-container *ngTemplateOutlet="recursiveContextMenu; context:{ $implicit: items }"></ng-container>
+</ul>
+
+<ng-template #recursiveContextMenu let-items>
+    <li *ngFor="let item of items" class="context-menu-item" [class.divider]="item.divider"
+        [class.disabled]="item.disable" (click)="handleClickItem(item)">
+        <div class="startIcon">
+            <i class="{{item.icon}}"></i>
+            <i class="{{item.startIcon}}" *ngIf="!item.icon && item.startIcon"></i>
+        </div>
+        <span>{{item.text}}</span>
+
+        <div class="endIcon">
+            <i class="{{item.endIcon}}" *ngIf="!item.icon && item.startIcon"></i>
+            <i class="far fa-angle-left ax-menu-item-drop-icon" *ngIf="item.items?.length > 0"></i>
+        </div>
+        <ul class="ax context-menu child" *ngIf="item.items?.length > 0">
+            <ng-container *ngTemplateOutlet="recursiveContextMenu; context:{ $implicit: item.items }">
+            </ng-container>
+        </ul>
+    </li>
+</ng-template>

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

@@ -0,0 +1,78 @@
+import { Component, Input, ElementRef, HostListener, ViewChild, Output, EventEmitter } from '@angular/core';
+import { AXMenuItem } from '@acorex/core';
+import { AXElementSize } from '../base/element.class';
+import { AXBaseEvent } from '../base/events.class';
+
+@Component({
+  selector: 'ax-context-menu',
+  templateUrl: './context-menu.component.html',
+  host: { class: 'ax context-menu-container' }
+})
+export class AXContextMenuComponent {
+  @Input()
+  size: AXElementSize = 'md';
+
+  @Input()
+  width: number;
+
+  @Input()
+  items: AXMenuItem[] = [];
+
+  @Output()
+  onItemClick: EventEmitter<any> = new EventEmitter<any>();
+
+  @Output()
+  onClosed: EventEmitter<AXBaseEvent> = new EventEmitter<AXBaseEvent>();
+
+  @ViewChild('contex')
+  contex: ElementRef<HTMLUListElement>;
+
+
+
+  show: boolean = false;
+
+  constructor(private container: ElementRef) {
+  }
+
+  ngAfterViewInit(): void {
+  }
+
+  close() {
+    this.show = false;
+    this.onClosed.emit({
+      component: this
+    });
+  }
+
+
+
+  open(_left, _top, _rtl = false) {
+    this.show = true;
+    setTimeout(() => {
+      const containRec = this.container.nativeElement.getBoundingClientRect();
+      let left = _rtl === false ? _left : _left - containRec.width;
+      let top = _top;
+      if (_rtl === false && _left + containRec.width > window.innerWidth) {
+        left = window.innerWidth - containRec.width;
+      } else if (_rtl === true && _left - containRec.width < 0) {
+        left = 0;
+      }
+      if (top + containRec.height > window.innerHeight) {
+        top = _top - containRec.height;
+      }
+      this.container.nativeElement.style.left = left + 'px';
+      this.container.nativeElement.style.top = top + 'px';
+
+    }, 5);
+
+
+  }
+
+
+
+  handleClickItem(item: AXMenuItem) {
+    if (!item.disable || item.disable === undefined) {
+      this.onItemClick.emit(item);
+    }
+  }
+}