@acorex/components 6.5.28 → 6.5.29

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

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

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

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

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

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

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