@acorex/components 6.5.27 → 6.5.29

package/src/lib/calendar/scheduler/views/timeline/scheduler-timeline-view.component.ts

@@ -1,92 +0,0 @@
-import { Component, OnInit, Input, ElementRef, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
-import { AXSchedulerBaseViewComponent } from '../scheduler-view.component';
-import { AXDateTime, AXDateTimeRange } from '@acorex/core';
-import { AXSchedulerSlot } from '../../scheduler.class';
-
-@Component({
-    templateUrl: './scheduler-timeline-view.component.html',
-    styleUrls:['./scheduler-timeline-view.component.scss'],
-    encapsulation: ViewEncapsulation.None,
-    providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerTimelineViewComponent }]
-})
-export class AXSchedulerTimelineViewComponent extends AXSchedulerBaseViewComponent {
-    constructor(private elm: ElementRef<HTMLDivElement>, private cdr: ChangeDetectorRef) { super(); }
-
-
-
-
-    times: any[] = []
-
-    //private hScroll: HTMLElement;
-    private vScroll: HTMLElement;
-    private container: HTMLElement;
-    private view: HTMLElement;
-    private header: HTMLElement;
-    private body: HTMLElement;
-
-    ngOnInit(): void {
-    }
-
-    ngAfterViewInit(): void {
-        this.vScroll = this.elm.nativeElement.querySelector<HTMLElement>(".v-scroll");
-        //this.hScroll = this.elm.nativeElement.querySelector<HTMLElement>(".h-scroll");
-        this.header = this.elm.nativeElement.querySelector<HTMLElement>(".header");
-        this.body = this.elm.nativeElement.querySelector<HTMLElement>(".body");
-        this.view = this.elm.nativeElement.querySelector<HTMLElement>(".view");
-
-        this.container = this.elm.nativeElement.closest(".view-container") as HTMLElement;
-        // this.hScroll.addEventListener("scroll", () => {
-        //     this.updateSize();
-        // });
-    }
-
-
-    updateSize(): void {
-        // let firstTr = this.body.querySelector('tr');
-        // if (firstTr) {
-        //     let index = 0;
-        //     this.header.querySelectorAll('th').forEach(c => {
-        //         let td = firstTr.children.item(index++) as HTMLElement;
-        //         td.style.width = `${c.offsetWidth}px`;
-        //     })
-        //     this.vScroll.style.height = `calc(100% - ${this.header.clientHeight}px)`;
-        //     //this.vScroll.style.width = `${this.hScroll.clientWidth + this.hScroll.scrollLeft}px`;
-        //     if (this.container)
-        //         this.view.style.height = `${this.container.clientHeight}px`;
-        // }
-    }
-
-    navigate(date: AXDateTime = new AXDateTime()) {
-        this.navigatorDate = date;
-        this.times=[];
-        this.slots = [];
-        for (let i = 0; i < this.interval; i++) {
-            let d = date.addDay(i);
-            let range = new AXDateTimeRange(d, d);
-            let slot: AXSchedulerSlot = {
-                range: range,
-                events: this.getEvents(range, "day")
-            }
-            this.slots.push(slot);
-        }
-        for (let i = 0; i < 24; i++) {
-            this.times.push({
-                display:('0' + i).slice(-2) + ":00",
-                value:i
-            });
-        }
-        this.cdr.detectChanges();
-    }
-
-    next(): void {
-        this.navigate(this.navigatorDate.addDay(this.interval));
-    }
-    prev(): void {
-        this.navigate(this.navigatorDate.addDay(-this.interval));
-    }
-
-    arrangeEvents()
-    {
-        
-    }
-}

package/src/lib/checkbox/checkbox.component.html

@@ -1,22 +0,0 @@
-<!-- <label class="ax checkbox {{size}}" for="{{uid}}" [ngClass]="{ 'disabled': disabled, 'readonly': readonly }"
-  (click)="handleClick($event)">
-  {{ label }}
-  <input #input type="checkbox" id="{{uid}}" [readonly]="readonly" [checked]="value"
-    [disabled]="disabled || readonly" />
-  <span class="checkmark" [ngClass]="{'indeterminate': indeterminate && value == null}"></span>
-
-</label> -->
-
-
-<!-- [(ngModel)]="value" -->
-<!-- (click)="handleClick($event)"  -->
-
-<label class="ax-checkbox-container" for="{{uid}}" [ngClass]="{ 'disabled': disabled, 'readonly': readonly }">
-
-  <input #input class="ax-checkbox" type="checkbox" id="{{uid}}" [readonly]="readonly" [class.checked]="value"
-    [checked]="value" [ngClass]="{'indeterminate': indeterminate && value == null}" (click)="handleClick($event)"
-    [disabled]="disabled || readonly" />
-
-
-  <span>{{ label ? label : '&nbsp;' }}</span>
-</label>

package/src/lib/checkbox/checkbox.component.ts

@@ -1,107 +0,0 @@
-import {
-  Component,
-  ViewEncapsulation,
-  Output,
-  EventEmitter,
-  Input,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  ViewChild,
-  ElementRef
-} from '@angular/core';
-import { AXBaseComponent, AXBaseSizableComponent, AXBaseValueComponent, AXElementSize, AXValidatableComponent } from '../base/element.class';
-import { AXValueEvent, AXHtmlEvent } from '../base/events.class';
-
-export class AXCheckBoxItemClick extends AXHtmlEvent<MouseEvent> {
-  value?: boolean;
-}
-
-@Component({
-  selector: 'ax-check-box',
-  templateUrl: './checkbox.component.html',
-  encapsulation: ViewEncapsulation.None,
-  providers: [{ provide: AXValidatableComponent, useExisting: AXCheckBoxComponent }],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AXCheckBoxComponent extends AXValidatableComponent implements AXBaseSizableComponent, AXBaseComponent, AXBaseValueComponent<boolean> {
-  @ViewChild('input', { static: true }) input: ElementRef<HTMLInputElement>;
-
-  @Input()
-  readonly: boolean = false;
-
-  @Input()
-  disabled: boolean = false;
-
-  @Input()
-  size: AXElementSize = 'md';
-
-  @Input()
-  label: string = '';
-
-  @Input()
-  tabIndex: number = 0;
-
-  @Input()
-  indeterminate: boolean = false;
-
-  focus(): void { }
-  constructor(protected cdr: ChangeDetectorRef, private ref: ElementRef) {
-    super();
-  }
-  // Value
-  @Output()
-  onValueChanged: EventEmitter<AXValueEvent<boolean>> = new EventEmitter<AXValueEvent<boolean>>();
-  @Output()
-  valueChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-  //
-  @Output()
-  onClick: EventEmitter<AXCheckBoxItemClick> = new EventEmitter<AXCheckBoxItemClick>();
-
-  private _value?: boolean = false;
-  public get value(): boolean {
-    return this._value;
-  }
-
-  @Input()
-  public set value(v: boolean) {
-    if (v != this._value && v !== undefined) {
-      const old = this._value;
-      this._value = v;
-      this.valueChange.emit(v);
-      this.onValueChanged.emit({
-        component: this,
-        value: v,
-        oldValue: old,
-        htmlElement: this.ref.nativeElement
-      });
-    }
-  }
-
-  // handelChange(e) {
-  //   const val = e.target.checked;
-  //   this.value = val;
-  // }
-
-  ngOnInit(): void {
-    if (!this.indeterminate && this.value == null) {
-      this.value = false;
-    }
-  }
-
-  handleClick(e: MouseEvent) {
-    e.preventDefault();
-    e.stopPropagation();
-    //  setTimeout(() => {
-    if (!this.disabled && !this.readonly) {
-      //TODO: check intermddiate;
-      this.value = !this.value;
-      this.onClick.emit({
-        component: this,
-        htmlElement: this.ref.nativeElement,
-        htmlEvent: e,
-        value: this.value
-      });
-    }
-    //  }, 100);
-  }
-}

package/src/lib/checkbox/checkbox.module.ts

@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { AXCheckBoxComponent } from './checkbox.component';
-@NgModule({
-  declarations: [AXCheckBoxComponent],
-  imports: [CommonModule, FormsModule],
-  exports: [AXCheckBoxComponent],
-  providers: []
-})
-export class AXCheckBoxModule { }

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

@@ -1,37 +0,0 @@
-<div class="color-box">
-    <div class="color-box-pallet">
-        <div class="color-item" *ngFor="let item of colors" [style.background-color]="item.code" [title]="item.code"
-            (click)="onColorClick(item)">
-            <i class="fas fa-check-circle color-active" *ngIf="item.active"></i>
-        </div>
-    </div>
-    <div class="text-input">
-        <ng-container *ngIf="inputFormat=='rgb';else hexTemplate">
-            <div class="color-part">
-                <ax-text-box [(value)]="rColor" (textChange)="handleColorChange()" (onKey)="handleKeyEvent($event)">
-                </ax-text-box>
-            </div>
-            <div class="color-part">
-                <ax-text-box [(value)]="gColor" (textChange)="handleColorChange()" (onKey)="handleKeyEvent($event)">
-                </ax-text-box>
-            </div>
-            <div class="color-part">
-                <ax-text-box [(value)]="bColor" (textChange)="handleColorChange()" (onKey)="handleKeyEvent($event)">
-                </ax-text-box>
-            </div>
-            <div class="color-part switch" (click)="inputFormat='hex'">
-                <span>RGB</span>
-            </div>
-        </ng-container>
-        <ng-template #hexTemplate>
-            <div class="color-part">
-                <ax-text-box [(value)]="value" size="sm" (onKey)="handleKeyEvent($event)">
-                </ax-text-box>
-            </div>
-            <!-- <div class="color-part switch" (click)="inputFormat='rgb'">
-                <span>HEX</span>
-            </div> -->
-        </ng-template>
-
-    </div>
-</div>

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

@@ -1,60 +0,0 @@
-.color-box {
-  border: 1px solid var(--ax-border-color);
-  max-width: 300px;
-  padding: 5px;
-
-  .color-box-pallet {
-    display: flex;
-    width: 100%;
-    height: auto;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: center;
-
-    div {
-      width: 18px;
-      height: 18px;
-      cursor: pointer;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border: 1px solid var(--ax-border-color);
-      margin: 1px;
-    }
-
-    .color-active {
-      color: #fff;
-      box-shadow: 1px 1px 4px 0px #5a5a5a;
-      border-radius: 50%;
-      font-size: 0.875rem;
-    }
-  }
-
-  .text-input {
-    display: flex;
-    justify-content: space-between;
-
-    .color-part {
-      padding: 2px;
-      display: flex;
-      align-items: center;
-      flex-direction: column;
-      justify-content: center;
-
-      &.switch {
-        cursor: pointer;
-        font-weight: bold;
-
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-
-      .ax-field-set .no-label input {
-        margin-top: 0 !important;
-        text-align: center;
-        height: var(--ax-size-md);
-      }
-    }
-  }
-}