@acorex/components 6.0.1 → 6.0.2

package/carousel/src/carousel.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXCarouselComponent } from './carousel.component';
-import { AXCarouselItemComponent } from './carousel-item.component';
-import { AXCarouselArrowsComponent } from './carousel-arrows.component';
-import { AXCarouselPagerComponent } from './carousel-pager.component';
-
-const COMPONENT = [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent];
-const MODULES = [CommonModule];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXCarouselModule { }

package/checkbox/index.ts

@@ -1 +0,0 @@
-export * from './public-api'

package/checkbox/ng-package.json

@@ -1,6 +0,0 @@
-{
-  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
-  "lib": {
-    "entryFile": "public-api.ts"
-  }
-}

package/checkbox/public-api.ts

@@ -1,2 +0,0 @@
-export * from './src/checkbox.component';
-export * from './src/checkbox.module';

package/checkbox/src/checkbox.component.html

@@ -1,14 +0,0 @@
-<label class="ax-flex ax-items-start">
-    <div class="ax-flex ax-items-center ax-h-5">
-        <input [id]="id" class="ax-h-4 ax-w-4" type="checkbox" [class.ax-state-readonly]="readonly"
-            [class.ax-state-disabled]="disabled" [indeterminate]="_stateIndeterminate" [(ngModel)]="value"
-            [checked]="value" [disabled]="disabled" [readonly]="readonly" [tabindex]="tabIndex"
-            (click)="_handleOnClickEvent($event)" (focus)="_emitOnFocusEvent($event)" (blur)="_emitOnBlurEvent($event)">
-    </div>
-    <div class="ax-ms-3 ax-text-sm">
-        <ng-content></ng-content>
-        <ng-content select="ax-form-hint"></ng-content>
-        <span class="ax-error-container"></span>
-    </div>
-</label>
-<ng-content select="ax-validation-rule"></ng-content>

package/checkbox/src/checkbox.component.ts

@@ -1,50 +0,0 @@
-import { AXBaseValueComponentMixin } from '@acorex/components/mixin';
-import {
-  Component,
-  ChangeDetectorRef,
-  ChangeDetectionStrategy,
-  ViewEncapsulation,
-  ElementRef,
-} from '@angular/core';
-
-
-@Component({
-  selector: 'ax-check-box',
-  templateUrl: './checkbox.component.html',
-  inputs: ['disabled', 'tabIndex', 'readonly','allowNull','value','name', 'checked'],
-  outputs: ['onBlur', 'onFocus', 'valueChange', 'onValueChanged'],
-  host: { class: 'ax-check-box' },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AXCheckBoxComponent extends AXBaseValueComponentMixin {
-  constructor(elementRef: ElementRef, private _cdr: ChangeDetectorRef) {
-    super(elementRef, _cdr);
-  }
-
-  onInit() {
-    super.onInit();
-    if (!this.allowNull && this.value == null) {
-      this.value = false;
-    }
-  }
-
-  _setValue(value) {
-    if (this.allowNull && value == null) {
-      this._stateIndeterminate = true;
-    } else {
-      this._stateIndeterminate = false;
-      value = value == true ? true : false;
-    }
-    return value;
-  }
-
-  _handleOnClickEvent(e: MouseEvent) {
-    if (this.readonly || this.disabled) {
-      e.preventDefault();
-      e.stopPropagation();
-      return false;
-    }
-    return true;
-  }
-}

package/checkbox/src/checkbox.module.ts

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

package/collapse/index.ts

@@ -1 +0,0 @@
-export * from './public-api'

package/collapse/ng-package.json

@@ -1,6 +0,0 @@
-{
-  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
-  "lib": {
-    "entryFile": "public-api.ts"
-  }
-}

package/collapse/public-api.ts

@@ -1,3 +0,0 @@
-export * from './src/collapse-group.component'
-export * from './src/collapse.component'
-export * from './src/collapse.module'

package/collapse/src/collapse-group.component.ts

@@ -1,53 +0,0 @@
-import { AXBaseComponent } from '@acorex/components/mixin';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, Input, QueryList, ViewEncapsulation } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { AXCollapseComponent } from './collapse.component';
-
-@Component({
-    selector: 'ax-collapse-group',
-    template: `<ng-content select="ax-collapse"></ng-content>`,
-    host: { class: 'ax-collapse-group' },
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-})
-export class AXCollapseGroupComponent extends AXBaseComponent {
-
-    @Input() accordion = false;
-
-    @Input() nonCollapsedIndex = 0;
-
-    @ContentChildren(AXCollapseComponent)
-    private _items: QueryList<AXCollapseComponent>;
-
-
-    private _subs: Subscription[] = [];
-
-    constructor(elementRef: ElementRef, private cdr: ChangeDetectorRef) {
-        super(elementRef, cdr);
-    }
-
-
-    onViewInit(): void {
-        if (this.accordion) {
-            this._items.forEach(c => c.isCollapsed = true);
-            // TODO:Check ts error
-            //@ts-ignore
-            this._items.get(this.nonCollapsedIndex).isCollapsed = false;
-            console.log(this._items[this.nonCollapsedIndex]);
-
-            this._items.forEach((c1: AXCollapseComponent) => {
-                this._subs.push(c1.isCollapsedChange.subscribe(e => {
-                    if (!e)
-                        this._items.toArray().filter(c2 => c2 != c1).forEach(c => c.isCollapsed = true);
-                }));
-            })
-        }
-    }
-
-    onDestroy(): void {
-        this._subs.forEach(s => s.unsubscribe());
-        this._subs = [];
-    }
-
-
-}

package/collapse/src/collapse.component.html

@@ -1,25 +0,0 @@
-<div class="ax-collapse-header" [class.ax-state-collapsed]="isCollapsed">
-    <ng-container *ngIf="headerTemplate;else header">
-        <div class="ax-collapse-custom-header-container" (click)="handleHeaderClick()">
-            <ng-container [ngTemplateOutlet]="headerTemplate"
-                [ngTemplateOutletContext]="{ $implicit: {caption,isCollapsed} }"></ng-container>
-        </div>
-    </ng-container>
-    <ng-template #header>
-        <div class="ax-collapse-header-container" (click)="handleHeaderClick()">
-            <div>
-                <span class="ax-ic ax-ic-chevron ax-collapse-arrow ax-transition-all"
-                    [class.ax-rotate-90]="isCollapsed"></span>
-                <ng-content select="ax-prefix"></ng-content>
-                <span>{{caption}}</span>
-            </div>
-            <div>
-                <ng-content select="ax-suffix"></ng-content>
-            </div>
-        </div>
-    </ng-template>
-</div>
-
-<div class="ax-collapse-body ax-transition-all" *ngIf="!isCollapsed">
-    <ng-content></ng-content>
-</div>

package/collapse/src/collapse.component.ts

@@ -1,52 +0,0 @@
-import { AXBaseComponent } from '@acorex/components/mixin';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ContentChild,
-  ElementRef,
-  EventEmitter,
-  Input,
-  Output,
-  TemplateRef,
-  ViewEncapsulation,
-} from '@angular/core';
-
-@Component({
-  selector: 'ax-collapse',
-  templateUrl: './collapse.component.html',
-  host: { class: 'ax-collapse' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class AXCollapseComponent extends AXBaseComponent {
-  constructor(elementRef: ElementRef, private cdr: ChangeDetectorRef) {
-    super(elementRef, cdr);
-  }
-
-  @Output()
-  isCollapsedChange: EventEmitter<any> = new EventEmitter<any>();
-
-  private _isCollapsed: boolean = false;
-  @Input()
-  public get isCollapsed(): boolean {
-    return this._isCollapsed;
-  }
-  public set isCollapsed(v: boolean) {
-    if (v != this._isCollapsed) {
-      this._isCollapsed = v;
-      this.isCollapsedChange.emit(v);
-      this._cdr.detectChanges();
-    }
-  }
-
-  @Input()
-  caption: string = '';
-
-  @ContentChild('header', { static: true })
-  headerTemplate: TemplateRef<any>;
-
-  handleHeaderClick() {
-    this.isCollapsed = !this.isCollapsed;
-  }
-}

package/collapse/src/collapse.module.ts

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXCollapseComponent } from './collapse.component';
-import { AXCollapseGroupComponent } from './collapse-group.component';
-
-@NgModule({
-    declarations: [AXCollapseComponent,AXCollapseGroupComponent],
-    imports: [ CommonModule ],
-    exports: [AXCollapseComponent,AXCollapseGroupComponent],
-    providers: [],
-})
-export class AXCollapseModule {}

package/color-palette/index.ts

@@ -1 +0,0 @@
-export * from './public-api'

package/color-palette/ng-package.json

@@ -1,6 +0,0 @@
-{
-  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
-  "lib": {
-    "entryFile": "public-api.ts"
-  }
-}

package/color-palette/public-api.ts

@@ -1,7 +0,0 @@
-export * from './src/color-palette-input.component';
-export * from './src/color-palette-picker.component';
-export * from './src/color-palette-preview.component';
-export * from './src/color-palette-swatches.component';
-export * from './src/color-palette.class';
-export * from './src/color-palette.component';
-export * from './src/color-palette.module';

package/color-palette/src/color-palette-input.component.html

@@ -1,40 +0,0 @@
-<ng-container [ngSwitch]="_parent.colorMode">
-    <div class="palette-inputs">
-        <ng-container *ngSwitchCase="'hex'">
-            <div>
-                <ax-text-box class="ax-w-full" [value]="_hex"  [disabled]="_parent.disabled" [readonly]="_parent.readonly"  (onValueChanged)="_handleHEXAValueChanged($event)">
-                </ax-text-box>
-                <label>HEX</label>
-            </div>
-        </ng-container>
-        <ng-container *ngSwitchCase="'rgba'">
-            <div>
-                <ax-number-box [minValue]="0" [maxValue]="255" [(value)]="_rgba.r" [showSpinButtons]="false" [disabled]="_parent.disabled" [readonly]="_parent.readonly"
-                    (onValueChanged)="_handleRGBAValueChanged($event)">
-                </ax-number-box>
-                <label>R</label>
-            </div>
-            <div>
-                <ax-number-box [minValue]="0" [maxValue]="255" [(value)]="_rgba.g" [showSpinButtons]="false" [disabled]="_parent.disabled" [readonly]="_parent.readonly"
-                    (onValueChanged)="_handleRGBAValueChanged($event)">
-                </ax-number-box>
-                <label>G</label>
-            </div>
-            <div>
-                <ax-number-box [minValue]="0" [maxValue]="255" [(value)]="_rgba.b" [showSpinButtons]="false" [disabled]="_parent.disabled" [readonly]="_parent.readonly"
-                    (onValueChanged)="_handleRGBAValueChanged($event)">
-                </ax-number-box>
-                <label>B</label>
-            </div>
-            <div>
-                <ax-number-box [minValue]="0" [maxValue]="1" [(value)]="_rgba.a" [decimals]="2" [step]="0.1" [disabled]="_parent.disabled" [readonly]="_parent.readonly"
-                    [showSpinButtons]="false" (onValueChanged)="_handleRGBAValueChanged($event)">
-                </ax-number-box>
-                <label>A</label>
-            </div>
-        </ng-container>
-    </div>
-    <ax-button color="light" class="ax-w-base" (onClick)="_handleChangeInputMode($event)" [disabled]="_parent.disabled">
-        <ax-icon class="ax-ic ax-ic-unfold"></ax-icon>
-    </ax-button>
-</ng-container>

package/color-palette/src/color-palette-input.component.ts

@@ -1,102 +0,0 @@
-import { AXColorUtil } from '@acorex/core/utils';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Inject,
-  Optional,
-  ViewEncapsulation,
-} from '@angular/core';
-import { distinctUntilChanged } from 'rxjs/operators';
-import { AXClickEvent, AXValueChangedEvent } from '@acorex/components/common';
-import {
-  AXColorComponent,
-  AXColorPaletteChildComponent,
-} from './color-palette.class';
-import { AXBaseComponent } from '@acorex/components/mixin';
-
-@Component({
-  selector: 'ax-color-palette-input',
-  templateUrl: './color-palette-input.component.html',
-  host: { class: 'ax-color-palette-input' },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: AXColorPaletteChildComponent,
-      useExisting: AXColorPaletteInputComponent,
-    },
-  ],
-})
-export class AXColorPaletteInputComponent extends AXBaseComponent {
-  _rgba: any = {
-    r: 0,
-    g: 0,
-    b: 0,
-    a: 0,
-  };
-
-  _hex: string = '';
-
-  constructor(
-    _elementRef: ElementRef,
-    _cdr: ChangeDetectorRef,
-    @Optional()
-    @Inject(AXColorComponent)
-    public _parent: AXColorComponent
-  ) {
-    super(_elementRef, _cdr);
-    _parent._onInternalColorChanged$
-      .pipe(distinctUntilChanged())
-      .subscribe((e) => {
-        if (!e.color) {
-          this._hex = '';
-          this._rgba = {
-            r: null,
-            g: null,
-            b: null,
-            a: null,
-          };
-        } else {
-          if (!AXColorUtil.equal(e.color, this._rgba)) {
-            this._hex = AXColorUtil.toHexSting(e.color);
-            Object.assign(this._rgba, AXColorUtil.to(e.color, 'rgba'));
-          }
-        }
-        _cdr.detectChanges();
-      });
-  }
-
-  _handleChangeInputMode(e: AXClickEvent) {
-    switch (this._parent.colorMode) {
-      case 'rgba':
-        this._parent.colorMode = 'hex';
-        break;
-      default:
-        this._parent.colorMode = 'rgba';
-        break;
-    }
-  }
-
-  _handleRGBAValueChanged(e: AXValueChangedEvent<number>) {
-    if (e.value == null || (e.value == 0 && !e.oldValue)) return;
-    const { r, g, b, a } = this._rgba;
-    const _color = `rgba(${r},${g},${b},${a})`;
-    this._parent._setUserInteraction();
-    this._parent._onInternalColorChanged$.next({
-      color: AXColorUtil.toString(_color, 'rgba'),
-      mode: 'rgba',
-    });
-  }
-
-  _handleHEXAValueChanged(e: AXValueChangedEvent<string>) {
-    if (e.value != null) {
-      this._parent._setUserInteraction();
-      this._parent._onInternalColorChanged$.next({
-        color: AXColorUtil.toString(e.value, 'hex'),
-        mode: 'hex',
-      });
-    }
-  }
-}

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

@@ -1,11 +0,0 @@
-<div class="ax-color-picker-overlay" [style.background-color]="_bgColor">
-    <div class="ax-color-picker-overlay-color"></div>
-    <div class="ax-color-picker-overlay-gradient"></div>
-    <div class="ax-color-picker-pointer"></div>
-</div>
-<ax-range-slider class="ax-color-picker-gradient" [minValue]="0" [maxValue]="99" [step]="1" [value]="_gradient" 
-    (onValueChanged)="_handleGradientChanged($event)">
-</ax-range-slider>
-<ax-range-slider class="ax-color-picker-transparent" [minValue]="0" [maxValue]="1" [step]="0.01" [value]="_rgba.a"
-    (onValueChanged)="_handleAlphaChanged($event)">
-</ax-range-slider>

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

@@ -1,105 +0,0 @@
-import { AXColorUtil } from '@acorex/core/utils';
-import { ElementRef, Inject, Optional } from '@angular/core';
-import { ChangeDetectorRef } from '@angular/core';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ViewEncapsulation,
-} from '@angular/core';
-import { distinctUntilChanged } from 'rxjs/operators';
-import { AXValueChangedEvent } from '@acorex/components/common';
-import {
-  AXColorComponent,
-  AXColorPaletteChildComponent,
-} from './color-palette.class';
-import { AXBaseComponent } from '@acorex/components/mixin';
-
-@Component({
-  selector: 'ax-color-palette-picker',
-  templateUrl: './color-palette-picker.component.html',
-  host: { class: 'ax-color-palette-picker' },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: AXColorPaletteChildComponent,
-      useExisting: AXColorPalettePickerComponent,
-    },
-  ],
-})
-export class AXColorPalettePickerComponent extends AXBaseComponent {
-  _rgba: { r: number; g: number; b: number; a: number } = {
-    r: 0,
-    g: 0,
-    b: 0,
-    a: 0,
-  };
-
-  _gradient: number = 0;
-
-  _bgColor: string = '#F00';
-
-  private _gradientColors: any[] = [
-    { color: 'rgb(255, 0, 0)', pos: 0 },
-    { color: 'rgb(255, 255, 0)', pos: 0.17 },
-    { color: 'rgb(0, 255, 0)', pos: 0.33 },
-    { color: 'rgb(0, 255, 255)', pos: 0.5 },
-    { color: 'rgb(0, 0, 255)', pos: 0.67 },
-    { color: 'rgb(255, 0, 255)', pos: 0.83 },
-    { color: 'rgb(255, 0, 0)', pos: 1 },
-  ];
-
-  constructor(
-    _elementRef: ElementRef,
-    _cdr: ChangeDetectorRef,
-    @Optional()
-    @Inject(AXColorComponent)
-    public _parent: AXColorComponent
-  ) {
-    super(_elementRef, _cdr);
-    _parent._onInternalColorChanged$
-      .pipe(distinctUntilChanged())
-      .subscribe((e) => {
-        if (!e.color) {
-          this._rgba = {
-            r: 0,
-            g: 0,
-            b: 0,
-            a: 0,
-          };
-        } else {
-          if (!AXColorUtil.equal(e.color, this._rgba)) {
-            Object.assign(this._rgba, AXColorUtil.to(e.color, 'rgba'));
-          }
-        }
-        this._bgColor = AXColorUtil.toString(e.color, 'hex');
-        _cdr.detectChanges();
-      });
-  }
-
-  _handleAlphaChanged(e: AXValueChangedEvent<number>) {
-    if (e.value != null && e.value != this._rgba.a) {
-      this._parent._setUserInteraction();
-      const { r, g, b } = this._rgba;
-      const _color = `rgba(${r},${g},${b},${e.value})`;
-      this._parent._setUserInteraction();
-      this._parent.colorMode = 'rgba';
-      this._parent._onInternalColorChanged$.next({
-        color: AXColorUtil.toString(_color, 'rgba'),
-        mode: 'rgba',
-      });
-    }
-  }
-
-  _handleGradientChanged(e: AXValueChangedEvent<number>) {
-    if (e.value != null && e.value != this._gradient) {
-      const gradient = AXColorUtil.gradient(this._gradientColors);
-      const colors = gradient.rgb(100);
-      let color = colors[e.value].toRgbString();
-      this._parent._onInternalColorChanged$.next({
-        color: AXColorUtil.toString(color, 'rgba'),
-        mode: this._parent.colorMode,
-      });
-    }
-  }
-}

package/color-palette/src/color-palette-preview.component.ts

@@ -1,59 +0,0 @@
-import { AXBaseComponent } from '@acorex/components/mixin';
-import { AXColorUtil } from '@acorex/core/utils';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Inject,
-  NgZone,
-  Optional,
-  ViewEncapsulation,
-} from '@angular/core';
-import { distinctUntilChanged } from 'rxjs/operators';
-import {
-  AXColorComponent,
-  AXColorPaletteChildComponent,
-} from './color-palette.class';
-
-@Component({
-  selector: 'ax-color-palette-preview',
-  template: `<div
-    class="palette-preview-overlay"
-    [class.ax-state-disabled]="_parent.disabled"
-  ></div>`,
-  host: { class: 'ax-color-palette-preview' },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: AXColorPaletteChildComponent,
-      useExisting: AXColorPalettePreviewComponent,
-    },
-  ],
-})
-export class AXColorPalettePreviewComponent extends AXBaseComponent {
-  constructor(
-    _elementRef: ElementRef,
-    _cdr: ChangeDetectorRef,
-    @Optional()
-    @Inject(AXColorComponent)
-    public _parent: AXColorComponent,
-    private _zone: NgZone
-  ) {
-    super(_elementRef, _cdr);
-    _parent._onInternalColorChanged$
-      .pipe(distinctUntilChanged())
-      .subscribe((e) => {
-        _zone.runOutsideAngular(() => {
-          this._getInnerElement().style.backgroundColor = e.color;
-          this._getInnerElement().innerText = e.color
-            ? AXColorUtil.toString(e.color, e.mode)
-            : '';
-          const color = AXColorUtil.toHexSting(e.color);
-          const ratio = AXColorUtil.contrastToWhite(color);
-          this._getHostElement().style.color = !(ratio > 2.0) ? '#000' : '#fff';
-        });
-      });
-  }
-}