@acorex/components 5.8.0 → 6.0.1

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

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

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

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

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

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

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

package/color-picker/ng-package.json

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

package/color-picker/public-api.ts

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

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

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

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

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

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

package/common/ng-package.json

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