@acorex/components 6.0.1 → 6.0.2

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

@@ -1,296 +0,0 @@
-import { AXBaseComponent } from '@acorex/components/mixin';
-import { AXColorUtil } from '@acorex/core/utils';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Inject,
-  Input,
-  Optional,
-  ViewEncapsulation,
-} from '@angular/core';
-import { distinctUntilChanged } from 'rxjs/operators';
-import {
-  AXColorComponent,
-  AXColorPaletteChildComponent,
-} from './color-palette.class';
-
-@Component({
-  selector: 'ax-color-palette-swatches, ax-color-palette-favorite',
-  template: ` <div
-    *ngFor="let color of colors"
-    [style.background-color]="color.code"
-    [attr.title]="color.code"
-    [class.ax-state-selected]="color.code == _selected"
-    (click)="_handleClick($event, color)"
-  ></div>`,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: AXColorPaletteChildComponent,
-      useExisting: AXColorPaletteSwatchesComponent,
-    },
-  ],
-})
-export class AXColorPaletteSwatchesComponent extends AXBaseComponent {
-  _selected: string;
-
-  @Input()
-  colors: { code: string }[] = [];
-
-  constructor(
-    _elementRef: ElementRef,
-    _cdr: ChangeDetectorRef,
-    @Optional()
-    @Inject(AXColorComponent)
-    public _parent: AXColorComponent
-  ) {
-    super(_elementRef, _cdr);
-    _parent?._onInternalColorChanged$
-      .pipe(distinctUntilChanged())
-      .subscribe((e) => {
-        this._selected = AXColorUtil.toHexSting(e.color).toLowerCase();
-        this._cdr.detectChanges();
-      });
-
-    if (
-      this._getHostElement().tagName.toLowerCase() !=
-      'ax-color-palette-favorite'
-    ) {
-      this.colors = this._defaultPalette.map((c) => this._format(c));
-    }
-  }
-
-  _handleClick(e: MouseEvent, color) {
-    if (this._parent.disabled || this._parent.readonly) return;
-    this._parent._setUserInteraction();
-    this._parent._onInternalColorChanged$.next({
-      color: color.code,
-      mode: this._parent.colorMode,
-    });
-  }
-
-  private _format(color: { code: string }): { code: string } {
-    return {
-      code: color.code.toLowerCase(),
-    };
-  }
-
-  private _defaultPalette = [
-    { code: '#000000' },
-    { code: '#ffffff' },
-    // Amber
-    { code: '#fff8e1' },
-    { code: '#ffecb3' },
-    { code: '#ffe082' },
-    { code: '#ffd54f' },
-    { code: '#ffca28' },
-    { code: '#ffc107' },
-    { code: '#ffb300' },
-    { code: '#ffa000' },
-    { code: '#ff8f00' },
-    { code: '#ff6f00' },
-    // Blue Grey
-    { code: '#ECEFF1' },
-    { code: '#CFD8DC' },
-    { code: '#B0BEC5' },
-    { code: '#90A4AE' },
-    { code: '#78909C' },
-    { code: '#607D8B' },
-    { code: '#546E7A' },
-    { code: '#455A64' },
-    { code: '#37474F' },
-    { code: '#263238' },
-    // Blue
-    { code: '#E3F2FD' },
-    { code: '#BBDEFB' },
-    { code: '#90CAF9' },
-    { code: '#64B5F6' },
-    { code: '#42A5F5' },
-    { code: '#2196F3' },
-    { code: '#1E88E5' },
-    { code: '#1976D2' },
-    { code: '#1565C0' },
-    { code: '#0D47A1' },
-    // Brown
-    { code: '#EFEBE9' },
-    { code: '#D7CCC8' },
-    { code: '#BCAAA4' },
-    { code: '#A1887F' },
-    { code: '#8D6E63' },
-    { code: '#795548' },
-    { code: '#6D4C41' },
-    { code: '#5D4037' },
-    { code: '#4E342E' },
-    { code: '#3E2723' },
-    // Cyan
-    { code: '#E0F7FA' },
-    { code: '#B2EBF2' },
-    { code: '#80DEEA' },
-    { code: '#4DD0E1' },
-    { code: '#26C6DA' },
-    { code: '#00BCD4' },
-    { code: '#00ACC1' },
-    { code: '#0097A7' },
-    { code: '#00838F' },
-    { code: '#006064' },
-    // Deep Orange
-    { code: '#FBE9E7' },
-    { code: '#FFCCBC' },
-    { code: '#FFAB91' },
-    { code: '#FF8A65' },
-    { code: '#FF7043' },
-    { code: '#FF5722' },
-    { code: '#F4511E' },
-    { code: '#E64A19' },
-    { code: '#D84315' },
-    { code: '#BF360C' },
-    // Deep Purple
-    { code: '#EDE7F6' },
-    { code: '#D1C4E9' },
-    { code: '#B39DDB' },
-    { code: '#9575CD' },
-    { code: '#7E57C2' },
-    { code: '#673AB7' },
-    { code: '#5E35B1' },
-    { code: '#512DA8' },
-    { code: '#4527A0' },
-    { code: '#311B92' },
-    // Green
-    { code: '#E8F5E9' },
-    { code: '#C8E6C9' },
-    { code: '#A5D6A7' },
-    { code: '#81C784' },
-    { code: '#66BB6A' },
-    { code: '#4CAF50' },
-    { code: '#43A047' },
-    { code: '#388E3C' },
-    { code: '#2E7D32' },
-    { code: '#1B5E20' },
-
-    // Grey
-    { code: '#FAFAFA' },
-    { code: '#F5F5F5' },
-    { code: '#EEEEEE' },
-    { code: '#E0E0E0' },
-    { code: '#BDBDBD' },
-    { code: '#9E9E9E' },
-    { code: '#757575' },
-    { code: '#616161' },
-    { code: '#424242' },
-    { code: '#212121' },
-
-    // Indigo
-    { code: '#E8EAF6' },
-    { code: '#C5CAE9' },
-    { code: '#9FA8DA' },
-    { code: '#7986CB' },
-    { code: '#5C6BC0' },
-    { code: '#3F51B5' },
-    { code: '#3949AB' },
-    { code: '#303F9F' },
-    { code: '#283593' },
-    { code: '#1A237E' },
-    // Light Blue
-    { code: '#E1F5FE' },
-    { code: '#B3E5FC' },
-    { code: '#81D4FA' },
-    { code: '#4FC3F7' },
-    { code: '#29B6F6' },
-    { code: '#03A9F4' },
-    { code: '#039BE5' },
-    { code: '#0288D1' },
-    { code: '#0277BD' },
-    { code: '#01579B' },
-    // Light Green
-    { code: '#F1F8E9' },
-    { code: '#DCEDC8' },
-    { code: '#C5E1A5' },
-    { code: '#AED581' },
-    { code: '#9CCC65' },
-    { code: '#8BC34A' },
-    { code: '#7CB342' },
-    { code: '#689F38' },
-    { code: '#558B2F' },
-    { code: '#33691E' },
-    // Lime
-    { code: '#F9FBE7' },
-    { code: '#F0F4C3' },
-    { code: '#E6EE9C' },
-    { code: '#DCE775' },
-    { code: '#D4E157' },
-    { code: '#CDDC39' },
-    { code: '#C0CA33' },
-    { code: '#AFB42B' },
-    { code: '#9E9D24' },
-    { code: '#827717' },
-    // Orange
-    { code: '#FFF3E0' },
-    { code: '#FFE0B2' },
-    { code: '#FFCC80' },
-    { code: '#FFB74D' },
-    { code: '#FFA726' },
-    { code: '#FF9800' },
-    { code: '#FB8C00' },
-    { code: '#F57C00' },
-    { code: '#EF6C00' },
-    { code: '#E65100' },
-    // Pink
-    { code: '#FCE4EC' },
-    { code: '#F8BBD0' },
-    { code: '#F48FB1' },
-    { code: '#F06292' },
-    { code: '#EC407A' },
-    { code: '#E91E63' },
-    { code: '#D81B60' },
-    { code: '#C2185B' },
-    { code: '#AD1457' },
-    { code: '#880E4F' },
-    // Purple
-    { code: '#F3E5F5' },
-    { code: '#E1BEE7' },
-    { code: '#CE93D8' },
-    { code: '#BA68C8' },
-    { code: '#AB47BC' },
-    { code: '#9C27B0' },
-    { code: '#8E24AA' },
-    { code: '#7B1FA2' },
-    { code: '#6A1B9A' },
-    { code: '#4A148C' },
-    // Red
-    { code: '#FFEBEE' },
-    { code: '#FFCDD2' },
-    { code: '#EF9A9A' },
-    { code: '#E57373' },
-    { code: '#EF5350' },
-    { code: '#F44336' },
-    { code: '#E53935' },
-    { code: '#D32F2F' },
-    { code: '#C62828' },
-    { code: '#B71C1C' },
-    // Teal
-    { code: '#E0F2F1' },
-    { code: '#B2DFDB' },
-    { code: '#80CBC4' },
-    { code: '#4DB6AC' },
-    { code: '#26A69A' },
-    { code: '#009688' },
-    { code: '#00897B' },
-    { code: '#00796B' },
-    { code: '#00695C' },
-    { code: '#004D40' },
-    // Yellow
-    { code: '#FFFDE7' },
-    { code: '#FFF9C4' },
-    { code: '#FFF59D' },
-    { code: '#FFF176' },
-    { code: '#FFEE58' },
-    { code: '#FFEB3B' },
-    { code: '#FDD835' },
-    { code: '#FBC02D' },
-    { code: '#F9A825' },
-    { code: '#F57F17' },
-  ];
-}

package/color-palette/src/color-palette.class.ts

@@ -1,23 +0,0 @@
-import { Injectable } from "@angular/core";
-import { AXColorMode } from "@acorex/core/utils";
-import { Subject } from "rxjs";
-
-
-/**
-* A token that specifies the  display mode of datapager component.
-*/
-export type AXColorPaletteView =  'swatches' | 'gradient'  | 'custom';
-
-@Injectable()
-export abstract class AXColorComponent {
-    abstract _onInternalColorChanged$: Subject<{ color: any, mode: AXColorMode }>;
-    abstract _setUserInteraction();
-    abstract colorMode:AXColorMode;
-    abstract readonly:boolean;
-    abstract disabled:boolean;
-}
-
-
-@Injectable()
-export abstract class AXColorPaletteChildComponent {
-}

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

@@ -1,21 +0,0 @@
-<ng-content select='ax-header'></ng-content>
-
-<ng-container [ngTemplateOutlet]="default" *ngIf="!_children.length"></ng-container>
-<ng-container [ngTemplateOutlet]="custom" *ngIf="_children.length"></ng-container>
-
-<ng-template #custom>
-    <ng-content select='ax-color-palette-preview'></ng-content>
-    <ng-content select='ax-color-palette-picker'></ng-content>
-    <ng-content select='ax-color-palette-swatches'></ng-content>
-    <ng-content select='ax-color-palette-favorite'></ng-content>
-    <ng-content select='ax-color-palette-input'></ng-content>
-</ng-template>
-<ng-template #default>
-    <ax-color-palette-preview></ax-color-palette-preview>
-    <ax-color-palette-swatches></ax-color-palette-swatches>
-    <ax-color-palette-input></ax-color-palette-input>
-</ng-template>
-
-<ng-content select='ax-footer'></ng-content>
-
-

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

@@ -1,99 +0,0 @@
-import { INTERACTIVE_INPUTS, VALUE_INPUTS, INTERACTIVE_OUTPUT, VALUE_OUTPUT, AXBaseValueComponentMixin } from '@acorex/components/mixin';
-import { AXColorMode } from '@acorex/core/utils';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ContentChildren,
-  ElementRef,
-  EventEmitter,
-  HostBinding,
-  Input,
-  Output,
-  QueryList,
-  ViewEncapsulation,
-} from '@angular/core';
-import { Subject } from 'rxjs';
-import { distinctUntilChanged } from 'rxjs/operators';
-
-import {
-  AXColorComponent,
-  AXColorPaletteChildComponent,
-} from './color-palette.class';
-
-@Component({
-  selector: 'ax-color-palette',
-  templateUrl: './color-palette.component.html',
-  inputs: ['disabled', 'tabIndex', 'readonly','allowNull','value','name', 'checked'],
-  outputs: ['onBlur', 'onFocus', 'valueChange', 'onValueChanged'],
-  host: { class: 'ax-color-palette' },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    { provide: AXColorComponent, useExisting: AXColorPalleteComponent },
-  ],
-})
-export class AXColorPalleteComponent extends AXBaseValueComponentMixin {
-  _onInternalColorChanged$: Subject<any> = new Subject<any>();
-
-  @ContentChildren(AXColorPaletteChildComponent)
-  _children: QueryList<AXColorPaletteChildComponent>;
-
-  @Output()
-  colorModeChange: EventEmitter<AXColorMode> = new EventEmitter<AXColorMode>();
-  private _colorMode: AXColorMode = 'hex';
-  /**
-   *  A character value that specifies the separator character.
-   */
-  @Input()
-  public get colorMode(): AXColorMode {
-    return this._colorMode;
-  }
-  public set colorMode(v: AXColorMode) {
-    this._setOption({
-      name: 'colorMode',
-      value: v,
-    });
-  }
-
-  _onValueChanged(oldValue: any, newValue: any) {
-    super._onValueChanged(oldValue, newValue);
-    this._onInternalColorChanged$.next({
-      color: this.value,
-      mode: this.colorMode,
-    });
-  }
-
-  ngAfterContentInit() {
-    this._children.changes.subscribe(() => {
-      this._onInternalColorChanged$.next({
-        color: this.value,
-        mode: this.colorMode,
-      });
-    });
-  }
-
-  onViewInit() {
-    this._onInternalColorChanged$.next({
-      color: this.value,
-      mode: this.colorMode,
-    });
-  }
-
-  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-    super(elementRef, cdr);
-    //
-    this._onInternalColorChanged$
-      .pipe(distinctUntilChanged())
-      .subscribe((e) => {
-        if (this.disabled || this.readonly) return;
-        this.value = e.color;
-        cdr.markForCheck();
-      });
-  }
-
-  @HostBinding('class.ax-state-disabled')
-  private get __hostDisabled() {
-    return this.disabled;
-  }
-}

package/color-palette/src/color-palette.module.ts

@@ -1,39 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXTextBoxModule } from '@acorex/components/textbox';
-import { AXLabelModule } from '@acorex/components/label';
-import { AXButtonModule } from '@acorex/components/button';
-import { AXDecoratorModule } from '@acorex/components/decorators';
-import { AXNumberBoxModule } from '@acorex/components/number-box';
-import { AXRangeSliderModule } from '@acorex/components/range-slider';
-
-import { AXColorPalleteComponent } from './color-palette.component';
-import { AXColorPalettePreviewComponent } from './color-palette-preview.component';
-import { AXColorPaletteSwatchesComponent } from './color-palette-swatches.component';
-import { AXColorPaletteInputComponent } from './color-palette-input.component';
-import { AXColorPalettePickerComponent } from './color-palette-picker.component';
-
-
-const MODULES: any[] = [
-    AXTextBoxModule,
-    AXLabelModule,
-    AXButtonModule,
-    AXDecoratorModule,
-    AXNumberBoxModule,
-    AXRangeSliderModule
-]
-const CONPONENTS: any[] = [
-    AXColorPalleteComponent,
-    AXColorPalettePreviewComponent,
-    AXColorPaletteSwatchesComponent,
-    AXColorPaletteInputComponent,
-    AXColorPalettePickerComponent
-]
-
-@NgModule({
-    declarations: [...CONPONENTS],
-    imports: [CommonModule, ...MODULES],
-    exports: [...CONPONENTS],
-    providers: [],
-})
-export class AXColorPaletteModule { }

package/color-picker/index.ts

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

package/color-picker/ng-package.json

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

package/color-picker/public-api.ts

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

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

@@ -1,24 +0,0 @@
-<ng-content select="ax-prefix">
-</ng-content>
-<div class="ax-dropdown-content" [class.ax-state-disabled]="disabled" (click)="_handleInputClickEvent($event)">
-    <div *ngIf="value" class="color-badge" [ngStyle]="{'background-color': value}"></div>
-    <div class="ax-uppercase">{{_colorCode}}</div>
-</div>
-<ax-button color="light" look="blank" (onClick)="_handleClearClickEvent()" [tabIndex]="-1" *ngIf="value &&  !(disabled || readonly)">
-    <ax-icon icon="ax-ic ax-ic-close"></ax-icon>
-</ax-button>
-<ax-button [disabled]="disabled" [tabIndex]="-1" color="light" look="blank" (onClick)="_handleArrowClickEvent($event)">
-    <ax-icon #icon icon="ax-ic ax-ic-chevron ax-transform ax--rotate-90"></ax-icon>
-</ax-button>
-<ng-content select="ax-validation-rule">
-</ng-content>
-<ng-content select="ax-suffix">
-</ng-content>
-<ax-popover [target]="_target" [position]="position" [openTrigger]="'manual'" [closeTrigger]="'clickout'"
-    [adaptivityEnabled]="true"  (onOpened)="_handlePopupOnOpened($event)" (onClosed)="_handlePopupOnClosed($event)">
-    <div class="ax-overlay-pane" [class.ax-w-full]="_isMobile" tabindex="0" aria-modal="true" cdkTrapFocus
-        [class.ax-overlay-actionsheet]="_isMobile">
-        <ax-color-palette [value]="value" (onValueChanged)="_handleValueChangedEvent($event)" [(colorMode)]="_mode">
-        </ax-color-palette>
-    </div>
-</ax-popover>

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

@@ -1,125 +0,0 @@
-import { AXColorMode, AXColorUtil } from '@acorex/core/utils';
-import { AXPlatform } from '@acorex/core/platform';
-
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  NgZone,
-  ViewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-
-import {
-  AXClickEvent,
-  AXClosbaleComponent,
-  AXValueChangedEvent,
-} from '@acorex/components/common';
-import { AXPopoverComponent } from '@acorex/components/popover';
-import { _InteractiveComponenetMixin, _DropdownComponenetMixin, _ValueComponenetMixin, _TextboxComponenetMixin, AXBaseComponent } from '@acorex/components/mixin';
-
-
-export const AXBaseColorPickerMixin = _InteractiveComponenetMixin(
-  _DropdownComponenetMixin(
-    _ValueComponenetMixin(_TextboxComponenetMixin(AXBaseComponent))
-  )
-);
-
-/**
- * The Button is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-@Component({
-  selector: 'ax-color-picker',
-  templateUrl: 'color-picker.component.html',
-  inputs: [
-    'isOpen','fitParent', 'dropdownWidth','position',
-    'disabled', 'tabIndex',
-    'readonly','allowNull','value','name', 'checked',
-    'placeholder', 'maxLength', 'allowNull', 'debounceTime', 'type', 'autoComplete', 'readonly','allowNull','value','name', 'checked',
-  ],
-  outputs: [
-    'onOpened', 'onClosed',
-    'onBlur', 'onFocus',
-    'valueChange', 'onValueChanged',
-    'valueChange', 'onValueChanged',
-  ],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    { provide: AXClosbaleComponent, useExisting: AXColorPickerComponent },
-  ],
-  host: { class: 'ax-editor-container ax-drop-down' },
-})
-export class AXColorPickerComponent extends AXBaseColorPickerMixin {
-  @ViewChild(AXPopoverComponent, { static: true })
-  popover: AXPopoverComponent;
-
-  _target: HTMLDivElement;
-  _popoverTitle: string;
-  _popoverWidth: number;
-  _colorCode: string;
-  _mode: AXColorMode = 'hex';
-
-  _isMobile: boolean = false;
-  /**
-   *  @ignore
-   */
-  constructor(
-    protected _elementRef: ElementRef<HTMLDivElement>,
-    _cdr: ChangeDetectorRef,
-    private _zone: NgZone,
-    private _platform: AXPlatform
-  ) {
-    super(_elementRef, _cdr);
-    this._isMobile = this._platform.is('Mobile');
-    this._platform.resize.subscribe(() => {
-      this._isMobile = this._platform.is('Mobile');
-      this.popover.dispose();
-    });
-  }
-
-  _handleArrowClickEvent(e: AXClickEvent) {
-    e.nativeEvent!.stopPropagation();
-    this.toggle();
-  }
-
-  _handleInputClickEvent(e: MouseEvent) {
-    e.stopPropagation();
-    this.toggle();
-  }
-
-  _handleClearClickEvent() {
-    this._setUserInteraction();
-    this.clear();
-  }
-
-  onInit() {
-    super.onInit();
-    this._target = this._elementRef.nativeElement;
-  }
-
-  onViewInit() {
-    super.onViewInit();
-  }
-
-  _onValueChanged(oldValue: any, newValue: any) {
-    super._onValueChanged(oldValue, newValue);
-    if (newValue != null)
-      this._colorCode = AXColorUtil.toString(newValue, this._mode);
-    else this._colorCode = '';
-  }
-
-  _handleValueChangedEvent(e: AXValueChangedEvent<any>) {
-    if (e.isUserInteraction) this._setUserInteraction();
-    this.value = e.value;
-  }
-
-  async _handlePopupOnOpened(e) {}
-
-  _handlePopupOnClosed(e) {
-    this.focus();
-  }
-}

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

@@ -1,34 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { A11yModule } from '@angular/cdk/a11y';
-import { AXTranslationModule } from '@acorex/core/translation';
-import { AXButtonModule } from '@acorex/components/button';
-import { AXDecoratorModule } from '@acorex/components/decorators';
-import { AXPopoverModule } from '@acorex/components/popover';
-import { AXCommonModule } from '@acorex/components/common';
-import { AXTextBoxModule } from '@acorex/components/textbox';
-import { AXLoadingModule } from '@acorex/components/loading';
-import { AXColorPaletteModule } from '@acorex/components/color-palette';
-
-import { AXColorPickerComponent } from './color-picker.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        AXCommonModule,
-        FormsModule,
-        AXDecoratorModule,
-        AXPopoverModule,
-        AXButtonModule,
-        A11yModule,
-        AXLoadingModule,
-        AXTranslationModule,
-        AXTextBoxModule,
-        AXColorPaletteModule
-    ],
-    exports: [AXColorPickerComponent],
-    declarations: [AXColorPickerComponent],
-    providers: [],
-})
-export class AXColorPickerModule { }

package/common/index.ts

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

package/common/ng-package.json

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