@acorex/components 7.0.33 → 7.0.35

package/fesm2020/acorex-components-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-button.mjs","sources":["../../../../projects/acorex/components/button/src/button.component.ts","../../../../projects/acorex/components/button/src/button.component.html","../../../../projects/acorex/components/button/src/button-group.component.ts","../../../../projects/acorex/components/button/src/button-group.component.html","../../../../projects/acorex/components/button/src/button-item.component.ts","../../../../projects/acorex/components/button/src/button.module.ts","../../../../projects/acorex/components/button/acorex-components-button.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  Component,\r\n  ElementRef,\r\n  HostBinding,\r\n  Input,\r\n  ViewEncapsulation,\r\n} from '@angular/core';\r\nimport { AXComponent, AXFocusableComponent } from '@acorex/components/common';\r\nimport {\r\n  AXBaseButtonMixin,\r\n} from '@acorex/components/mixin';\r\nimport { AXButtonType } from './button-item.class';\r\n\r\n/**\r\n * The Button is a component which detects user interaction and triggers a corresponding event\r\n *\r\n * @category Components\r\n */\r\n@Component({\r\n  selector: 'ax-button',\r\n  templateUrl: './button.component.html',\r\n  styleUrls:['./button.component.scss'],\r\n  inputs: [\r\n    'disabled',\r\n    'size',\r\n    'tabIndex',\r\n    'color',\r\n    'look',\r\n    'text',\r\n    'toggleable',\r\n    'selected',\r\n  ],\r\n  outputs: [\r\n    'onBlur',\r\n    'onFocus',\r\n    'onClick',\r\n    'selectedChange',\r\n    'toggleableChange',\r\n    'lookChange',\r\n    'colorChange',\r\n  ],\r\n  host: { \r\n    \"(click)\":\"_emitOnClickEvent($event)\",\r\n    \"(focus)\":\"_emitOnBlurEvent($event)\",\r\n   },\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  providers: [\r\n    { provide: AXComponent, useExisting: AXButtonComponent },\r\n    { provide: AXFocusableComponent, useExisting: AXButtonComponent },\r\n  ],\r\n})\r\nexport class AXButtonComponent extends AXBaseButtonMixin {\r\n\r\n  @Input()\r\n  type: AXButtonType = \"button\";\r\n\r\n  /**\r\n   *  @ignore\r\n   */\r\n  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {\r\n    super(elementRef, cdr);\r\n  }\r\n\r\n  onViewInit(): void {\r\n    this._getHostElement().removeAttribute('tabindex');\r\n  }\r\n\r\n  _emitOnClickEvent(e: MouseEvent) {\r\n    if (this.disabled) return;\r\n    if (this.toggleable) {\r\n      this.selected = !this.selected;\r\n    }\r\n    super._emitOnClickEvent(e);\r\n  }\r\n\r\n  click() {\r\n    this._getInnerElement().click();\r\n  }\r\n\r\n  @HostBinding('class')\r\n  private get __hostClass(): string[] {\r\n    return Object.entries(this._classes)\r\n      .filter((c) => c[1])\r\n      .map((c) => c[0]);\r\n  }\r\n}\r\n","<button\r\n  [disabled]=\"disabled\"\r\n  [attr.tabindex]=\"tabIndex\"\r\n  (focus)=\"_emitOnFocusEvent($event)\"\r\n  (blur)=\"_emitOnBlurEvent($event)\"\r\n  [attr.type]=\"type\"\r\n>\r\n  <ng-content select=\"ax-content, ax-prefix, ax-loading, ax-icon\"> </ng-content>\r\n  <span class=\"ax-button-text\" *ngIf=\"text\">{{ text }}</span>\r\n  <ng-content select=\"ax-suffix\"> </ng-content>\r\n  <ng-content select=\"ax-dropdown-panel\"> </ng-content>\r\n</button>\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  Component,\r\n  ContentChildren,\r\n  ElementRef,\r\n  EventEmitter,\r\n  Input,\r\n  NgZone,\r\n  Output,\r\n  QueryList,\r\n  ViewEncapsulation,\r\n} from '@angular/core';\r\nimport { AXButtonComponent } from './button.component';\r\nimport {\r\n  AXClickEvent,\r\n  AXItemClickEvent,\r\n  AXSelectionMode,\r\n  AXSelectionValueChangedEvent,\r\n} from '@acorex/components/common';\r\nimport {\r\n  _InteractiveComponenetMixin,\r\n  _ColorLookComponentMixin,\r\n  AXBaseComponent,\r\n} from '@acorex/components/mixin';\r\n\r\nexport const AXBaseButtonGroupMixin = _InteractiveComponenetMixin(\r\n  _ColorLookComponentMixin(AXBaseComponent)\r\n);\r\n\r\n@Component({\r\n  selector: 'ax-button-group',\r\n  templateUrl: 'button-group.component.html',\r\n  inputs: ['disabled', 'tabIndex', 'color', 'look'],\r\n  outputs: ['onBlur', 'onFocus', 'lookChange', 'colorChange'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: { role: 'group' },\r\n})\r\nexport class AXButtonGroupComponent extends AXBaseButtonGroupMixin {\r\n  @Output()\r\n  selectionChange: EventEmitter<AXSelectionMode> = new EventEmitter();\r\n\r\n  private _selection: AXSelectionMode;\r\n  @Input()\r\n  public get selection(): AXSelectionMode {\r\n    return this._selection;\r\n  }\r\n  public set selection(value: AXSelectionMode) {\r\n    value = this._onOptionChanging({ name: 'selection', value: value });\r\n    const oldValue = this.selection;\r\n    if (value != oldValue) {\r\n      this._selection = value;\r\n      this.selectionChange.emit(value);\r\n      this.onOptionChanged({ name: 'selection', oldValue, newValue: value });\r\n    }\r\n  }\r\n\r\n  @Output()\r\n  onItemClick: EventEmitter<AXItemClickEvent<AXButtonComponent>> =\r\n    new EventEmitter<AXItemClickEvent<AXButtonComponent>>();\r\n\r\n  public onValueChanged: EventEmitter<AXSelectionValueChangedEvent> =\r\n    new EventEmitter<AXSelectionValueChangedEvent>();\r\n\r\n  @ContentChildren(AXButtonComponent, { descendants: true })\r\n  _contentButtons: QueryList<AXButtonComponent>;\r\n\r\n  constructor(\r\n    elementRef: ElementRef,\r\n    private zone: NgZone,\r\n    cdr: ChangeDetectorRef\r\n  ) {\r\n    super(elementRef, cdr);\r\n  }\r\n\r\n  ngAfterContentInit() {\r\n    this._bindEvents();\r\n    this._bindProps();\r\n    this._contentButtons.changes.subscribe(() => {\r\n      this._bindEvents();\r\n      this._bindProps();\r\n    });\r\n  }\r\n\r\n  private _bindEvents() {\r\n    this._contentButtons?.forEach((b: any) => {\r\n      if (!b.onClick.length)\r\n        b.onClick.subscribe((c: any) => {\r\n          this._handleClickEvent(c, b);\r\n        });\r\n    });\r\n  }\r\n\r\n  private _bindProps() {\r\n    this._contentButtons?.forEach((b: any) => {\r\n      b.look = this.look ?? this.look;\r\n      b.color = this.color ?? this.color;\r\n      b.disabled = b.disabled ?? this.disabled;\r\n      b.toggleable = false;\r\n    });\r\n  }\r\n\r\n  onOptionChanged(option: any) {\r\n    this._bindProps();\r\n  }\r\n\r\n  _handleClickEvent(e: AXClickEvent, button: any) {\r\n    if (this.selection == 'multiple') {\r\n      button.selected = !button.selected;\r\n    } else if (this.selection == 'single') {\r\n      this._contentButtons.forEach((c: any) => {\r\n        c.selected = false;\r\n      });\r\n      button.selected = true;\r\n    } else {\r\n      button.selected = false;\r\n    }\r\n\r\n    this.onItemClick.emit({\r\n      component: this,\r\n      htmlElement: e.htmlElement,\r\n      item: button,\r\n    });\r\n  }\r\n}\r\n","<ng-content select=\"ax-button\"></ng-content>","import {\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  Component,\r\n  ElementRef,\r\n  HostBinding,\r\n  HostListener,\r\n  Input,\r\n  ViewEncapsulation,\r\n} from '@angular/core';\r\nimport { AXStyleColorType } from '@acorex/components/common';\r\nimport { _InteractiveComponenetMixin, _ClickableComponenetMixin, AXBaseComponent } from '@acorex/components/mixin';\r\n\r\n\r\nexport const AXBaseItemButtonMixin = _InteractiveComponenetMixin(\r\n  _ClickableComponenetMixin(AXBaseComponent)\r\n);\r\n\r\n@Component({\r\n  selector: 'ax-button-item',\r\n  template: `\r\n    <ng-content select=\"ax-prefix\"> </ng-content>\r\n    <ng-content select=\"ax-icon\"> </ng-content>\r\n    <span *ngIf=\"text\">{{ text }}</span>\r\n    <ng-content select=\"ax-suffix\"> </ng-content>\r\n  `,\r\n  host: { class: 'ax-button-item', tabindex: \"0\" },\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  outputs: ['onClick'],\r\n})\r\nexport class AXButtonItemComponent extends AXBaseItemButtonMixin {\r\n  /**\r\n   *  @ignore\r\n   */\r\n  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {\r\n    super(elementRef, cdr);\r\n  }\r\n\r\n  @Input()\r\n  text: string = '';\r\n\r\n  @Input()\r\n  tooltip: string = '';\r\n\r\n  @Input()\r\n  selected: boolean = false;\r\n\r\n  @Input()\r\n  seperated: boolean = false;\r\n\r\n  @Input()\r\n  name: string;\r\n\r\n  @Input()\r\n  data: any;\r\n\r\n  @Input()\r\n  color: AXStyleColorType = 'ghost';\r\n\r\n  @HostListener('click', ['$event'])\r\n  private __hostClick(e: MouseEvent) {\r\n    this._emitOnClickEvent(e);\r\n  }\r\n\r\n  @HostBinding('class')\r\n  private get __hostClass(): string {\r\n    const cssClasses: any = {\r\n      'ax-button-icon': !this.text,\r\n      'ax-state-disabled': this.disabled,\r\n      'ax-state-selected': this.selected,\r\n    };\r\n    cssClasses[`ax-${this.color || 'primary'}-default`] = true;\r\n    return Object.entries(cssClasses)\r\n      .filter((c) => c[1])\r\n      .map((c) => c[0])\r\n      .join(' ');\r\n  }\r\n}\r\n","import { CommonModule } from '@angular/common';\r\nimport { AXDecoratorModule } from '@acorex/components/decorators';\r\nimport { NgModule } from '@angular/core';\r\nimport { AXButtonGroupComponent } from './button-group.component';\r\nimport { AXButtonItemComponent } from './button-item.component';\r\nimport { AXButtonComponent } from './button.component';\r\n\r\n\r\nconst COMPONENT = [\r\n    AXButtonComponent,\r\n    AXButtonItemComponent,\r\n    AXButtonGroupComponent,\r\n];\r\nconst MODULES = [CommonModule,AXDecoratorModule];\r\n\r\n@NgModule({\r\n    imports: [MODULES],\r\n    exports: [...COMPONENT],\r\n    declarations: [...COMPONENT],\r\n    providers: [],\r\n})\r\nexport class AXButtonModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-button.mjs","sources":["../../../../projects/acorex/components/button/src/button.component.ts","../../../../projects/acorex/components/button/src/button.component.html","../../../../projects/acorex/components/button/src/button-group.component.ts","../../../../projects/acorex/components/button/src/button-group.component.html","../../../../projects/acorex/components/button/src/button-item.component.ts","../../../../projects/acorex/components/button/src/button.module.ts","../../../../projects/acorex/components/button/acorex-components-button.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  Component,\r\n  ElementRef,\r\n  HostBinding,\r\n  Input,\r\n  ViewEncapsulation,\r\n} from '@angular/core';\r\nimport { AXComponent, AXFocusableComponent } from '@acorex/components/common';\r\nimport {\r\n  AXBaseButtonMixin,\r\n} from '@acorex/components/mixin';\r\nimport { AXButtonType } from './button-item.class';\r\n\r\n/**\r\n * The Button is a component which detects user interaction and triggers a corresponding event\r\n *\r\n * @category Components\r\n */\r\n@Component({\r\n  selector: 'ax-button',\r\n  templateUrl: './button.component.html',\r\n  styleUrls:['./button.component.scss'],\r\n  inputs: [\r\n    'disabled',\r\n    'size',\r\n    'tabIndex',\r\n    'color',\r\n    'look',\r\n    'text',\r\n    'toggleable',\r\n    'selected',\r\n  ],\r\n  outputs: [\r\n    'onBlur',\r\n    'onFocus',\r\n    'onClick',\r\n    'selectedChange',\r\n    'toggleableChange',\r\n    'lookChange',\r\n    'colorChange',\r\n  ],\r\n  host: { \r\n    \"(click)\":\"_emitOnClickEvent($event)\",\r\n    \"(focus)\":\"_emitOnBlurEvent($event)\",\r\n   },\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  providers: [\r\n    { provide: AXComponent, useExisting: AXButtonComponent },\r\n    { provide: AXFocusableComponent, useExisting: AXButtonComponent },\r\n  ],\r\n})\r\nexport class AXButtonComponent extends AXBaseButtonMixin {\r\n\r\n  @Input()\r\n  type: AXButtonType = \"button\";\r\n\r\n  /**\r\n   *  @ignore\r\n   */\r\n  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {\r\n    super(elementRef, cdr);\r\n  }\r\n\r\n  onViewInit(): void {\r\n    this._getHostElement().removeAttribute('tabindex');\r\n  }\r\n\r\n  _emitOnClickEvent(e: MouseEvent) {\r\n    if (this.disabled) return;\r\n    if (this.toggleable) {\r\n      this.selected = !this.selected;\r\n    }\r\n    super._emitOnClickEvent(e);\r\n  }\r\n\r\n  click() {\r\n    this._getInnerElement().click();\r\n  }\r\n\r\n  @HostBinding('class')\r\n  private get __hostClass(): string[] {\r\n    return Object.entries(this._classes)\r\n      .filter((c) => c[1])\r\n      .map((c) => c[0]);\r\n  }\r\n}\r\n","<button\r\n  [disabled]=\"disabled\"\r\n  [attr.tabindex]=\"tabIndex\"\r\n  (focus)=\"_emitOnFocusEvent($event)\"\r\n  (blur)=\"_emitOnBlurEvent($event)\"\r\n  [attr.type]=\"type\"\r\n>\r\n  <ng-content select=\"ax-content, ax-prefix, ax-loading, ax-icon\"> </ng-content>\r\n  <span class=\"ax-button-text\" *ngIf=\"text\">{{ text }}</span>\r\n  <ng-content select=\"ax-suffix\"> </ng-content>\r\n  <ng-content select=\"ax-dropdown-panel\"> </ng-content>\r\n</button>\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  Component,\r\n  ContentChildren,\r\n  ElementRef,\r\n  EventEmitter,\r\n  Input,\r\n  NgZone,\r\n  Output,\r\n  QueryList,\r\n  ViewEncapsulation,\r\n} from '@angular/core';\r\nimport { AXButtonComponent } from './button.component';\r\nimport {\r\n  AXClickEvent,\r\n  AXItemClickEvent,\r\n  AXSelectionMode,\r\n  AXSelectionValueChangedEvent,\r\n} from '@acorex/components/common';\r\nimport {\r\n  _InteractiveComponenetMixin,\r\n  _ColorLookComponentMixin,\r\n  AXBaseComponent,\r\n} from '@acorex/components/mixin';\r\n\r\nexport const AXBaseButtonGroupMixin = _InteractiveComponenetMixin(\r\n  _ColorLookComponentMixin(AXBaseComponent)\r\n);\r\n\r\n@Component({\r\n  selector: 'ax-button-group',\r\n  templateUrl: 'button-group.component.html',\r\n  inputs: ['disabled', 'tabIndex', 'color', 'look'],\r\n  outputs: ['onBlur', 'onFocus', 'lookChange', 'colorChange'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: { role: 'group' },\r\n})\r\nexport class AXButtonGroupComponent extends AXBaseButtonGroupMixin {\r\n  @Output()\r\n  selectionChange: EventEmitter<AXSelectionMode> = new EventEmitter();\r\n\r\n  private _selection: AXSelectionMode;\r\n  @Input()\r\n  public get selection(): AXSelectionMode {\r\n    return this._selection;\r\n  }\r\n  public set selection(value: AXSelectionMode) {\r\n    value = this._onOptionChanging({ name: 'selection', value: value });\r\n    const oldValue = this.selection;\r\n    if (value != oldValue) {\r\n      this._selection = value;\r\n      this.selectionChange.emit(value);\r\n      this.onOptionChanged({ name: 'selection', oldValue, newValue: value });\r\n    }\r\n  }\r\n\r\n  @Output()\r\n  onItemClick: EventEmitter<AXItemClickEvent<AXButtonComponent>> =\r\n    new EventEmitter<AXItemClickEvent<AXButtonComponent>>();\r\n\r\n  public onValueChanged: EventEmitter<AXSelectionValueChangedEvent> =\r\n    new EventEmitter<AXSelectionValueChangedEvent>();\r\n\r\n  @ContentChildren(AXButtonComponent, { descendants: true })\r\n  _contentButtons: QueryList<AXButtonComponent>;\r\n\r\n  constructor(\r\n    elementRef: ElementRef,\r\n    private zone: NgZone,\r\n    cdr: ChangeDetectorRef\r\n  ) {\r\n    super(elementRef, cdr);\r\n  }\r\n\r\n  ngAfterContentInit() {\r\n    this._bindEvents();\r\n    this._bindProps();\r\n    this._contentButtons.changes.subscribe(() => {\r\n      this._bindEvents();\r\n      this._bindProps();\r\n    });\r\n  }\r\n\r\n  private _bindEvents() {\r\n    this._contentButtons?.forEach((b: any) => {\r\n      if (!b.onClick.length)\r\n        b.onClick.subscribe((c: any) => {\r\n          this._handleClickEvent(c, b);\r\n        });\r\n    });\r\n  }\r\n\r\n  private _bindProps() {\r\n    this._contentButtons?.forEach((b: any) => {\r\n      b.look = this.look ?? this.look;\r\n      b.color = this.color ?? this.color;\r\n      b.disabled = b.disabled ?? this.disabled;\r\n      b.toggleable = false;\r\n    });\r\n  }\r\n\r\n  onOptionChanged(option: any) {\r\n    this._bindProps();\r\n  }\r\n\r\n  _handleClickEvent(e: AXClickEvent, button: any) {\r\n    if (this.selection == 'multiple') {\r\n      button.selected = !button.selected;\r\n    } else if (this.selection == 'single') {\r\n      this._contentButtons.forEach((c: any) => {\r\n        c.selected = false;\r\n      });\r\n      button.selected = true;\r\n    } else {\r\n      button.selected = false;\r\n    }\r\n\r\n    this.onItemClick.emit({\r\n      component: this,\r\n      htmlElement: e.htmlElement,\r\n      item: button,\r\n    });\r\n  }\r\n}\r\n","<ng-content select=\"ax-button\"></ng-content>","import {\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  Component,\r\n  ElementRef,\r\n  HostBinding,\r\n  HostListener,\r\n  Input,\r\n  ViewEncapsulation,\r\n} from '@angular/core';\r\nimport { AXStyleColorType } from '@acorex/components/common';\r\nimport { _InteractiveComponenetMixin, _ClickableComponenetMixin, AXBaseComponent } from '@acorex/components/mixin';\r\n\r\n\r\nexport const AXBaseItemButtonMixin = _InteractiveComponenetMixin(\r\n  _ClickableComponenetMixin(AXBaseComponent)\r\n);\r\n\r\n@Component({\r\n  selector: 'ax-button-item',\r\n  template: `\r\n    <ng-content select=\"ax-prefix\"> </ng-content>\r\n    <ng-content select=\"ax-icon\"> </ng-content>\r\n    <span *ngIf=\"text\">{{ text }}</span>\r\n    <ng-content select=\"ax-suffix\"> </ng-content>\r\n  `,\r\n  host: { class: 'ax-button-item', tabindex: \"0\" },\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  outputs: ['onClick'],\r\n})\r\nexport class AXButtonItemComponent extends AXBaseItemButtonMixin {\r\n  /**\r\n   *  @ignore\r\n   */\r\n  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {\r\n    super(elementRef, cdr);\r\n  }\r\n\r\n  @Input()\r\n  text: string = '';\r\n\r\n  @Input()\r\n  tooltip: string = '';\r\n\r\n  @Input()\r\n  selected: boolean = false;\r\n\r\n  @Input()\r\n  seperated: boolean = false;\r\n\r\n  @Input()\r\n  name: string;\r\n\r\n  @Input()\r\n  data: any;\r\n\r\n  @Input()\r\n  color: AXStyleColorType = 'ghost';\r\n\r\n  @HostListener('click', ['$event'])\r\n  private __hostClick(e: MouseEvent) {\r\n    this._emitOnClickEvent(e);\r\n  }\r\n\r\n  @HostBinding('class')\r\n  private get __hostClass(): string {\r\n    const cssClasses: any = {\r\n      'ax-button-icon': !this.text,\r\n      'ax-state-disabled': this.disabled,\r\n      'ax-state-selected': this.selected,\r\n    };\r\n    cssClasses[`ax-${this.color || 'primary'}-default`] = true;\r\n    return Object.entries(cssClasses)\r\n      .filter((c) => c[1])\r\n      .map((c) => c[0])\r\n      .join(' ');\r\n  }\r\n}\r\n","import { CommonModule } from '@angular/common';\r\nimport { AXDecoratorModule } from '@acorex/components/decorators';\r\nimport { NgModule } from '@angular/core';\r\nimport { AXButtonGroupComponent } from './button-group.component';\r\nimport { AXButtonItemComponent } from './button-item.component';\r\nimport { AXButtonComponent } from './button.component';\r\n\r\n\r\nconst COMPONENT = [\r\n    AXButtonComponent,\r\n    AXButtonItemComponent,\r\n    AXButtonGroupComponent,\r\n];\r\nconst MODULES = [CommonModule,AXDecoratorModule];\r\n\r\n@NgModule({\r\n    imports: [MODULES],\r\n    exports: [...COMPONENT],\r\n    declarations: [...COMPONENT],\r\n    providers: [],\r\n})\r\nexport class AXButtonModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;AAeA;;;;AAIG;AAmCG,MAAO,iBAAkB,SAAQ,iBAAiB,CAAA;AAKtD;;AAEG;IACH,WAAY,CAAA,UAAsB,EAAE,GAAsB,EAAA;AACxD,QAAA,KAAK,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QANzB,IAAI,CAAA,IAAA,GAAiB,QAAQ,CAAC;KAO7B;IAED,UAAU,GAAA;QACR,IAAI,CAAC,eAAe,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;KACpD;AAED,IAAA,iBAAiB,CAAC,CAAa,EAAA;QAC7B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;AAChC,SAAA;AACD,QAAA,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;KAC5B;IAED,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,gBAAgB,EAAE,CAAC,KAAK,EAAE,CAAC;KACjC;AAED,IAAA,IACY,WAAW,GAAA;AACrB,QAAA,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;aACjC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;aACnB,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;KACrB;;8GAjCU,iBAAiB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,iBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EALjB,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,IAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,KAAA,EAAA,OAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,UAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,SAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,2BAAA,EAAA,OAAA,EAAA,0BAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,SAAA,EAAA;AACT,QAAA,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,iBAAiB,EAAE;AACxD,QAAA,EAAE,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,iBAAiB,EAAE;AAClE,KAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpDH,ydAYA,EAAA,MAAA,EAAA,CAAA,8gjBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;2FD0Ca,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAlC7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAGb,MAAA,EAAA;wBACN,UAAU;wBACV,MAAM;wBACN,UAAU;wBACV,OAAO;wBACP,MAAM;wBACN,MAAM;wBACN,YAAY;wBACZ,UAAU;qBACX,EACQ,OAAA,EAAA;wBACP,QAAQ;wBACR,SAAS;wBACT,SAAS;wBACT,gBAAgB;wBAChB,kBAAkB;wBAClB,YAAY;wBACZ,aAAa;qBACd,EACK,IAAA,EAAA;AACJ,wBAAA,SAAS,EAAC,2BAA2B;AACrC,wBAAA,SAAS,EAAC,0BAA0B;AACpC,qBAAA,EAAA,eAAA,EACe,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAC1B,SAAA,EAAA;AACT,wBAAA,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,mBAAmB,EAAE;AACxD,wBAAA,EAAE,OAAO,EAAE,oBAAoB,EAAE,WAAW,mBAAmB,EAAE;AAClE,qBAAA,EAAA,QAAA,EAAA,ydAAA,EAAA,MAAA,EAAA,CAAA,8gjBAAA,CAAA,EAAA,CAAA;iIAKD,IAAI,EAAA,CAAA;sBADH,KAAK;gBA2BM,WAAW,EAAA,CAAA;sBADtB,WAAW;uBAAC,OAAO,CAAA;;;AExDT,MAAA,sBAAsB,GAAG,2BAA2B,CAC/D,wBAAwB,CAAC,eAAe,CAAC,EACzC;AAWI,MAAO,sBAAuB,SAAQ,sBAAsB,CAAA;AA6BhE,IAAA,WAAA,CACE,UAAsB,EACd,IAAY,EACpB,GAAsB,EAAA;AAEtB,QAAA,KAAK,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QAHf,IAAI,CAAA,IAAA,GAAJ,IAAI,CAAQ;AA7BtB,QAAA,IAAA,CAAA,eAAe,GAAkC,IAAI,YAAY,EAAE,CAAC;AAkBpE,QAAA,IAAA,CAAA,WAAW,GACT,IAAI,YAAY,EAAuC,CAAC;AAEnD,QAAA,IAAA,CAAA,cAAc,GACnB,IAAI,YAAY,EAAgC,CAAC;KAWlD;AA9BD,IAAA,IACW,SAAS,GAAA;QAClB,OAAO,IAAI,CAAC,UAAU,CAAC;KACxB;IACD,IAAW,SAAS,CAAC,KAAsB,EAAA;AACzC,QAAA,KAAK,GAAG,IAAI,CAAC,iBAAiB,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;AACpE,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC;QAChC,IAAI,KAAK,IAAI,QAAQ,EAAE;AACrB,YAAA,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;AACxB,YAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AACjC,YAAA,IAAI,CAAC,eAAe,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;AACxE,SAAA;KACF;IAoBD,kBAAkB,GAAA;QAChB,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,SAAS,CAAC,MAAK;YAC1C,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,UAAU,EAAE,CAAC;AACpB,SAAC,CAAC,CAAC;KACJ;IAEO,WAAW,GAAA;QACjB,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC,CAAM,KAAI;AACvC,YAAA,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM;gBACnB,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAM,KAAI;AAC7B,oBAAA,IAAI,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC/B,iBAAC,CAAC,CAAC;AACP,SAAC,CAAC,CAAC;KACJ;IAEO,UAAU,GAAA;QAChB,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC,CAAM,KAAI;YACvC,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC;YAChC,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC;YACnC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC;AACzC,YAAA,CAAC,CAAC,UAAU,GAAG,KAAK,CAAC;AACvB,SAAC,CAAC,CAAC;KACJ;AAED,IAAA,eAAe,CAAC,MAAW,EAAA;QACzB,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;IAED,iBAAiB,CAAC,CAAe,EAAE,MAAW,EAAA;AAC5C,QAAA,IAAI,IAAI,CAAC,SAAS,IAAI,UAAU,EAAE;AAChC,YAAA,MAAM,CAAC,QAAQ,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC;AACpC,SAAA;AAAM,aAAA,IAAI,IAAI,CAAC,SAAS,IAAI,QAAQ,EAAE;YACrC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAM,KAAI;AACtC,gBAAA,CAAC,CAAC,QAAQ,GAAG,KAAK,CAAC;AACrB,aAAC,CAAC,CAAC;AACH,YAAA,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC;AACxB,SAAA;AAAM,aAAA;AACL,YAAA,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC;AACzB,SAAA;AAED,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;AACpB,YAAA,SAAS,EAAE,IAAI;YACf,WAAW,EAAE,CAAC,CAAC,WAAW;AAC1B,YAAA,IAAI,EAAE,MAAM;AACb,SAAA,CAAC,CAAC;KACJ;;mHArFU,sBAAsB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,MAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;uGAAtB,sBAAsB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,KAAA,EAAA,OAAA,EAAA,IAAA,EAAA,MAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,OAAA,EAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,SAAA,EA0BhB,iBAAiB,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjEpC,gDAA4C,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;2FDuC/B,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBATlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAEnB,MAAA,EAAA,CAAC,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,CAAC,EAAA,OAAA,EACxC,CAAC,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,CAAC,EAC5C,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EACzC,IAAA,EAAA,EAAE,IAAI,EAAE,OAAO,EAAE,EAAA,QAAA,EAAA,gDAAA,EAAA,CAAA;sJAIvB,eAAe,EAAA,CAAA;sBADd,MAAM;gBAKI,SAAS,EAAA,CAAA;sBADnB,KAAK;gBAeN,WAAW,EAAA,CAAA;sBADV,MAAM;gBAQP,eAAe,EAAA,CAAA;sBADd,eAAe;AAAC,gBAAA,IAAA,EAAA,CAAA,iBAAiB,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,CAAA;;;AEnD9C,MAAA,qBAAqB,GAAG,2BAA2B,CAC9D,yBAAyB,CAAC,eAAe,CAAC,EAC1C;AAeI,MAAO,qBAAsB,SAAQ,qBAAqB,CAAA;AAC9D;;AAEG;IACH,WAAY,CAAA,UAAsB,EAAE,GAAsB,EAAA;AACxD,QAAA,KAAK,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QAIzB,IAAI,CAAA,IAAA,GAAW,EAAE,CAAC;QAGlB,IAAO,CAAA,OAAA,GAAW,EAAE,CAAC;QAGrB,IAAQ,CAAA,QAAA,GAAY,KAAK,CAAC;QAG1B,IAAS,CAAA,SAAA,GAAY,KAAK,CAAC;QAS3B,IAAK,CAAA,KAAA,GAAqB,OAAO,CAAC;KArBjC;AAwBO,IAAA,WAAW,CAAC,CAAa,EAAA;AAC/B,QAAA,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;KAC3B;AAED,IAAA,IACY,WAAW,GAAA;AACrB,QAAA,MAAM,UAAU,GAAQ;AACtB,YAAA,gBAAgB,EAAE,CAAC,IAAI,CAAC,IAAI;YAC5B,mBAAmB,EAAE,IAAI,CAAC,QAAQ;YAClC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;SACnC,CAAC;QACF,UAAU,CAAC,CAAM,GAAA,EAAA,IAAI,CAAC,KAAK,IAAI,SAAS,CAAU,QAAA,CAAA,CAAC,GAAG,IAAI,CAAC;AAC3D,QAAA,OAAO,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC;aAC9B,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;aACnB,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;aAChB,IAAI,CAAC,GAAG,CAAC,CAAC;KACd;;kHA9CU,qBAAqB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,qBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAXtB,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,UAAA,EAAA,GAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,qBAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,kBAAA,EAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;AAKT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;2FAMU,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAbjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,QAAQ,EAAE,CAAA;;;;;AAKT,EAAA,CAAA;oBACD,IAAI,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,GAAG,EAAE;oBAChD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,OAAO,EAAE,CAAC,SAAS,CAAC;AACrB,iBAAA,CAAA;iIAUC,IAAI,EAAA,CAAA;sBADH,KAAK;gBAIN,OAAO,EAAA,CAAA;sBADN,KAAK;gBAIN,QAAQ,EAAA,CAAA;sBADP,KAAK;gBAIN,SAAS,EAAA,CAAA;sBADR,KAAK;gBAIN,IAAI,EAAA,CAAA;sBADH,KAAK;gBAIN,IAAI,EAAA,CAAA;sBADH,KAAK;gBAIN,KAAK,EAAA,CAAA;sBADJ,KAAK;gBAIE,WAAW,EAAA,CAAA;sBADlB,YAAY;uBAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,CAAA;gBAMrB,WAAW,EAAA,CAAA;sBADtB,WAAW;uBAAC,OAAO,CAAA;;;ACzDtB,MAAM,SAAS,GAAG;IACd,iBAAiB;IACjB,qBAAqB;IACrB,sBAAsB;CACzB,CAAC;AACF,MAAM,OAAO,GAAG,CAAC,YAAY,EAAC,iBAAiB,CAAC,CAAC;MAQpC,cAAc,CAAA;;2GAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAd,cAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,iBAZvB,iBAAiB;QACjB,qBAAqB;AACrB,QAAA,sBAAsB,CAET,EAAA,OAAA,EAAA,CAAA,YAAY,EAAC,iBAAiB,aAJ3C,iBAAiB;QACjB,qBAAqB;QACrB,sBAAsB,CAAA,EAAA,CAAA,CAAA;AAUb,cAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,YALb,OAAO,CAAA,EAAA,CAAA,CAAA;2FAKR,cAAc,EAAA,UAAA,EAAA,CAAA;kBAN1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,OAAO,CAAC;AAClB,oBAAA,OAAO,EAAE,CAAC,GAAG,SAAS,CAAC;AACvB,oBAAA,YAAY,EAAE,CAAC,GAAG,SAAS,CAAC;AAC5B,oBAAA,SAAS,EAAE,EAAE;AAChB,iBAAA,CAAA;;;ACpBD;;AAEG;;;;"}

package/fesm2020/acorex-components-color-palette.mjs

@@ -1,6 +1,6 @@
 import { AXColorUtil } from '@acorex/core/utils';
 import * as i0 from '@angular/core';
-import { Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Inject, Input, EventEmitter, ContentChildren, Output, HostBinding, NgModule } from '@angular/core';
+import { Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Inject, Input, ContentChildren, HostBinding, NgModule } from '@angular/core';
 import { distinctUntilChanged } from 'rxjs/operators';
 import { AXBaseComponent, AXBaseValueComponentMixin } from '@acorex/components/mixin';
 import * as i1 from '@angular/common';
@@ -11,6 +11,8 @@ import * as i3 from '@acorex/components/number-box';
 import { AXNumberBoxModule } from '@acorex/components/number-box';
 import * as i1$1 from '@acorex/components/range-slider';
 import { AXRangeSliderModule } from '@acorex/components/range-slider';
+import * as i2$1 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { Subject } from 'rxjs';
 import { AXLabelModule } from '@acorex/components/label';
 import { AXButtonModule } from '@acorex/components/button';
@@ -36,6 +38,7 @@ class AXColorPaletteInputComponent extends AXBaseComponent {
         super(_elementRef, _cdr);
         this._parent = _parent;
         this._isTouched = false;
+        this.isValid = true;
         this._rgba = {
             r: 0,
             g: 0,
@@ -43,9 +46,16 @@ class AXColorPaletteInputComponent extends AXBaseComponent {
             a: 0,
         };
         this._hex = '';
+        this._colorMode = "hex";
+        this._hexMaskOptions = {
+            mask: /^#[0-9a-f]{0,6}[0-9a-f]{0,2}$/i,
+            prepare: (str, m, a) => {
+                return m.typedValue?.startsWith('#') || str == '#' ? str.trim() : '#' + str.trim();
+            },
+        };
         _parent._onInternalColorChanged$
             .pipe(distinctUntilChanged())
-            .subscribe(e => {
+            .subscribe((e) => {
             if (!e.color) {
                 this._hex = '';
                 this._rgba = {
@@ -56,25 +66,27 @@ class AXColorPaletteInputComponent extends AXBaseComponent {
                 };
             }
             else {
-                if (!AXColorUtil.equal(e.color, this._rgba)) {
-                    Object.assign(this._rgba, AXColorUtil.to(e.color, 'rgba'));
+                Object.assign(this._rgba, AXColorUtil.to(e.color, 'rgba'));
+                if (this._colorMode != 'hex' || !this._hex)
                     this._hex = AXColorUtil.toString(e.color, 'hex');
-                    if (this._rgba.a != 1 && !this._isTouched) {
-                        this._parent.colorMode = 'rgba';
-                    }
+                if (this._colorMode == 'hex')
+                    this._hex = e.color;
+                if (this._rgba.a != 1 && !this._isTouched) {
+                    this._colorMode = 'rgba';
                 }
             }
+            this.checkValid();
             _cdr.detectChanges();
         });
     }
     _handleChangeInputMode() {
         this._isTouched = true;
-        switch (this._parent.colorMode) {
+        switch (this._colorMode) {
             case 'rgba':
-                this._parent.colorMode = 'hex';
+                this._colorMode = 'hex';
                 break;
             default:
-                this._parent.colorMode = 'rgba';
+                this._colorMode = 'rgba';
                 break;
         }
     }
@@ -89,20 +101,33 @@ class AXColorPaletteInputComponent extends AXBaseComponent {
         }
         this._parent._onInternalColorChanged$.next({
             color: AXColorUtil.toString(_color, 'rgba'),
-            mode: 'rgba',
+            sender: this,
         });
     }
     _handleHEXAValueChanged(e) {
-        if (e.value == null || (e.value == '' && !e.oldValue))
+        if (!e.value && !e.oldValue)
             return;
+        //
         if (e.isUserInteraction) {
             this._parent._setUserInteraction();
             this._isTouched = true;
         }
-        this._parent._onInternalColorChanged$.next({
-            color: AXColorUtil.toString(e.value, 'hex'),
-            mode: 'hex',
-        });
+        //
+        if (!e.value && e.oldValue) {
+            this._parent._onInternalColorChanged$.next({
+                color: null,
+                sender: this
+            });
+        }
+        else {
+            this._parent._onInternalColorChanged$.next({
+                color: e.value,
+                sender: this
+            });
+        }
+    }
+    checkValid() {
+        this.isValid = AXColorUtil.isValid(this._hex);
     }
 }
 AXColorPaletteInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXColorPaletteInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
@@ -111,7 +136,7 @@ AXColorPaletteInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
             provide: AXColorPaletteChildComponent,
             useExisting: AXColorPaletteInputComponent,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"_parent.colorMode\">\r\n  <div class=\"palette-inputs\">\r\n    <ng-container *ngSwitchCase=\"'hex'\">\r\n      <div>\r\n        <ax-text-box\r\n          class=\"ax-sm\"\r\n          [value]=\"_hex\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleHEXAValueChanged($event)\">\r\n        </ax-text-box>\r\n        <label>HEX</label>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'rgba'\">\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.r\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>R</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.g\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>G</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.b\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>B</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"1\"\r\n          [(value)]=\"_rgba.a\"\r\n          [decimals]=\"2\"\r\n          [step]=\"0.1\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          [showSpinButtons]=\"false\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>A</label>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <button\r\n    class=\"ax-general-button ax-button-icon ax-sm\"\r\n    (click)=\"_handleChangeInputMode()\"\r\n    [disabled]=\"_parent.disabled\">\r\n    <span class=\"ax-icon ax-icon-unfold-more\"></span>\r\n  </button>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "name", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "mask-options"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: i3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "size", "value", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "name", "checked", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"this._colorMode\">\r\n  <div class=\"palette-inputs\">\r\n    <ng-container *ngSwitchCase=\"'hex'\">\r\n      <div>\r\n        <ax-text-box\r\n          class=\"ax-sm\"\r\n          [value]=\"_hex\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          [state]=\"isValid?'clear':'error'\"\r\n          (onValueChanged)=\"_handleHEXAValueChanged($event)\" [mask-options]=\"_hexMaskOptions\">\r\n        </ax-text-box>\r\n        <label>HEX</label>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'rgba'\">\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.r\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>R</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.g\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>G</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.b\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>B</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"1\"\r\n          [(value)]=\"_rgba.a\"\r\n          [decimals]=\"2\"\r\n          [step]=\"0.1\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          [showSpinButtons]=\"false\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>A</label>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <button\r\n    class=\"ax-general-button ax-button-icon ax-sm\"\r\n    (click)=\"_handleChangeInputMode()\"\r\n    [disabled]=\"_parent.disabled\">\r\n    <span class=\"ax-icon ax-icon-unfold-more\"></span>\r\n  </button>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "mask-options"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged"] }, { kind: "component", type: i3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "size", "value", "state", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "name", "checked", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXColorPaletteInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-palette-input', host: { class: 'ax-color-palette-input' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -119,7 +144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                             provide: AXColorPaletteChildComponent,
                             useExisting: AXColorPaletteInputComponent,
                         },
-                    ], template: "<ng-container [ngSwitch]=\"_parent.colorMode\">\r\n  <div class=\"palette-inputs\">\r\n    <ng-container *ngSwitchCase=\"'hex'\">\r\n      <div>\r\n        <ax-text-box\r\n          class=\"ax-sm\"\r\n          [value]=\"_hex\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleHEXAValueChanged($event)\">\r\n        </ax-text-box>\r\n        <label>HEX</label>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'rgba'\">\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.r\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>R</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.g\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>G</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.b\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>B</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"1\"\r\n          [(value)]=\"_rgba.a\"\r\n          [decimals]=\"2\"\r\n          [step]=\"0.1\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          [showSpinButtons]=\"false\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>A</label>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <button\r\n    class=\"ax-general-button ax-button-icon ax-sm\"\r\n    (click)=\"_handleChangeInputMode()\"\r\n    [disabled]=\"_parent.disabled\">\r\n    <span class=\"ax-icon ax-icon-unfold-more\"></span>\r\n  </button>\r\n</ng-container>\r\n" }]
+                    ], template: "<ng-container [ngSwitch]=\"this._colorMode\">\r\n  <div class=\"palette-inputs\">\r\n    <ng-container *ngSwitchCase=\"'hex'\">\r\n      <div>\r\n        <ax-text-box\r\n          class=\"ax-sm\"\r\n          [value]=\"_hex\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          [state]=\"isValid?'clear':'error'\"\r\n          (onValueChanged)=\"_handleHEXAValueChanged($event)\" [mask-options]=\"_hexMaskOptions\">\r\n        </ax-text-box>\r\n        <label>HEX</label>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'rgba'\">\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.r\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>R</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.g\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>G</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.b\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>B</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"1\"\r\n          [(value)]=\"_rgba.a\"\r\n          [decimals]=\"2\"\r\n          [step]=\"0.1\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          [showSpinButtons]=\"false\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>A</label>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <button\r\n    class=\"ax-general-button ax-button-icon ax-sm\"\r\n    (click)=\"_handleChangeInputMode()\"\r\n    [disabled]=\"_parent.disabled\">\r\n    <span class=\"ax-icon ax-icon-unfold-more\"></span>\r\n  </button>\r\n</ng-container>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorComponent, decorators: [{
                     type: Optional
                 }, {
@@ -148,6 +173,7 @@ class AXColorPalettePickerComponent extends AXBaseComponent {
             { color: 'rgb(255, 0, 255)', pos: 0.83 },
             { color: 'rgb(255, 0, 0)', pos: 1 },
         ];
+        this.dragPosition = { x: 0, y: 0 };
         _parent._onInternalColorChanged$
             .pipe(distinctUntilChanged())
             .subscribe((e) => {
@@ -164,19 +190,23 @@ class AXColorPalettePickerComponent extends AXBaseComponent {
                     Object.assign(this._rgba, AXColorUtil.to(e.color, 'rgba'));
                 }
             }
-            this._bgColor = AXColorUtil.toString(e.color, 'hex');
+            this.setHSV();
             _cdr.detectChanges();
         });
     }
+    setHSV() {
+        const hsv = AXColorUtil.to(this._rgba, 'hsva');
+        this._bgColor = AXColorUtil.toString({ h: hsv.h, s: 1, v: 1, a: this._rgba.a }, 'rgba');
+        this.setPointerByPercent(hsv.s * 100, hsv.v * 100);
+    }
     _handleAlphaChanged(e) {
         if (e.value != null && e.value != this._rgba.a) {
             const { r, g, b } = this._rgba;
             const _color = `rgba(${r},${g},${b},${e.value})`;
-            this._parent.colorMode = 'rgba';
             this._parent._setUserInteraction();
             this._parent._onInternalColorChanged$.next({
                 color: AXColorUtil.toString(_color, 'rgba'),
-                mode: 'rgba',
+                sender: this,
             });
         }
     }
@@ -184,14 +214,69 @@ class AXColorPalettePickerComponent extends AXBaseComponent {
         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();
+            const { s, v } = AXColorUtil.to(this._rgba, "hsva");
+            const { h } = colors[e.value].toHsv();
             this._parent._setUserInteraction();
             this._parent._onInternalColorChanged$.next({
-                color: AXColorUtil.toString(color, 'rgba'),
-                mode: this._parent.colorMode,
+                color: AXColorUtil.toString({ h, s, v, a: this._rgba.a }, 'rgba'),
+                sender: this,
             });
         }
     }
+    _handleSurfaceClick(e) {
+        const surface = this._getHostElement().querySelector(".ax-color-picker-overlay");
+        const sb = surface.getBoundingClientRect();
+        const pointer = this._getHostElement().querySelector(".ax-color-picker-pointer");
+        const pb = pointer.getBoundingClientRect();
+        let x = e.offsetX;
+        let y = e.offsetY;
+        this.setColorByXY(x, y);
+    }
+    _handleDrag() {
+        const surface = this._getHostElement().querySelector(".ax-color-picker-overlay");
+        const sb = surface.getBoundingClientRect();
+        const pointer = this._getHostElement().querySelector(".ax-color-picker-pointer");
+        const pb = pointer.getBoundingClientRect();
+        const w = (pb.width / 2);
+        let x = (pb.left - sb.left) + w;
+        let y = (pb.top - sb.top) + w;
+        //
+        x = x < 0 ? 0 : x;
+        x = x > sb.width ? sb.width : x;
+        //
+        y = y < 0 ? 0 : y;
+        y = y > sb.height ? sb.height : y;
+        //
+        this.setColorByXY(x, y);
+    }
+    setColorByXY(x, y) {
+        const surface = this._getHostElement().querySelector(".ax-color-picker-overlay");
+        const sb = surface.getBoundingClientRect();
+        //
+        const { h } = AXColorUtil.to(this._bgColor, "hsva");
+        const hsv = {
+            h,
+            s: (x / sb.width),
+            v: ((sb.height - y) / sb.height)
+        };
+        this._parent._onInternalColorChanged$.next({
+            color: AXColorUtil.toString(hsv, 'rgba'),
+            sender: this,
+        });
+    }
+    setPointerByPercent(x, y) {
+        const surface = this._getHostElement().querySelector(".ax-color-picker-overlay");
+        const sb = surface.getBoundingClientRect();
+        const pointer = this._getHostElement().querySelector(".ax-color-picker-pointer");
+        const pb = pointer.getBoundingClientRect();
+        const w = (pb.width / 2);
+        const width = sb.width; //+ pb.width
+        const height = sb.height; // + pb.width
+        this.dragPosition = {
+            x: ((x * width) / 100) - w,
+            y: (height - (((y * height)) / 100)) - w
+        };
+    }
 }
 AXColorPalettePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXColorPalettePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 AXColorPalettePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker", host: { classAttribute: "ax-color-palette-picker" }, providers: [
@@ -199,7 +284,7 @@ AXColorPalettePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
             provide: AXColorPaletteChildComponent,
             useExisting: AXColorPalettePickerComponent,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-color-picker-overlay\" [style.background-color]=\"_bgColor\">\r\n    <div class=\"ax-color-picker-overlay-color\"></div>\r\n    <div class=\"ax-color-picker-overlay-gradient\"></div>\r\n    <div class=\"ax-color-picker-pointer\"></div>\r\n</div>\r\n<ax-range-slider class=\"ax-color-picker-gradient\" [minValue]=\"0\" [maxValue]=\"99\" [step]=\"1\" [value]=\"_gradient\" \r\n    (onValueChanged)=\"_handleGradientChanged($event)\">\r\n</ax-range-slider>\r\n<ax-range-slider class=\"ax-color-picker-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" [value]=\"_rgba.a\"\r\n    (onValueChanged)=\"_handleAlphaChanged($event)\">\r\n</ax-range-slider>", dependencies: [{ kind: "component", type: i1$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["readonly", "allowNull", "value", "name", "checked", "minValue", "maxValue", "step", "color", "oriantaion"], outputs: ["valueChange", "onValueChanged", "colorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-color-picker-overlay-trans\">\r\n    <div class=\"ax-color-picker-overlay\" [style.background-color]=\"_bgColor\">\r\n        <div class=\"ax-color-picker-overlay-g1\"></div>\r\n        <div class=\"ax-color-picker-overlay-g2\" (click)=\"_handleSurfaceClick($event)\"></div>\r\n        <div class=\"ax-color-picker-pointer\" cdkDrag cdkDragBoundary=\".ax-color-picker-overlay\" [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"_handleDrag()\"></div>\r\n    </div>\r\n</div>\r\n<ax-range-slider class=\"ax-color-picker-gradient\" [minValue]=\"0\" [maxValue]=\"99\" [step]=\"1\" [value]=\"_gradient\" \r\n    (onValueChanged)=\"_handleGradientChanged($event)\">\r\n</ax-range-slider>\r\n<ax-range-slider class=\"ax-color-picker-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" [value]=\"_rgba.a\"\r\n    (onValueChanged)=\"_handleAlphaChanged($event)\">\r\n</ax-range-slider>", dependencies: [{ kind: "component", type: i1$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["readonly", "allowNull", "value", "name", "checked", "minValue", "maxValue", "step", "color", "oriantaion"], outputs: ["valueChange", "onValueChanged", "colorChange"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-palette-picker', host: { class: 'ax-color-palette-picker' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -207,7 +292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                             provide: AXColorPaletteChildComponent,
                             useExisting: AXColorPalettePickerComponent,
                         },
-                    ], template: "<div class=\"ax-color-picker-overlay\" [style.background-color]=\"_bgColor\">\r\n    <div class=\"ax-color-picker-overlay-color\"></div>\r\n    <div class=\"ax-color-picker-overlay-gradient\"></div>\r\n    <div class=\"ax-color-picker-pointer\"></div>\r\n</div>\r\n<ax-range-slider class=\"ax-color-picker-gradient\" [minValue]=\"0\" [maxValue]=\"99\" [step]=\"1\" [value]=\"_gradient\" \r\n    (onValueChanged)=\"_handleGradientChanged($event)\">\r\n</ax-range-slider>\r\n<ax-range-slider class=\"ax-color-picker-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" [value]=\"_rgba.a\"\r\n    (onValueChanged)=\"_handleAlphaChanged($event)\">\r\n</ax-range-slider>" }]
+                    ], template: "<div class=\"ax-color-picker-overlay-trans\">\r\n    <div class=\"ax-color-picker-overlay\" [style.background-color]=\"_bgColor\">\r\n        <div class=\"ax-color-picker-overlay-g1\"></div>\r\n        <div class=\"ax-color-picker-overlay-g2\" (click)=\"_handleSurfaceClick($event)\"></div>\r\n        <div class=\"ax-color-picker-pointer\" cdkDrag cdkDragBoundary=\".ax-color-picker-overlay\" [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"_handleDrag()\"></div>\r\n    </div>\r\n</div>\r\n<ax-range-slider class=\"ax-color-picker-gradient\" [minValue]=\"0\" [maxValue]=\"99\" [step]=\"1\" [value]=\"_gradient\" \r\n    (onValueChanged)=\"_handleGradientChanged($event)\">\r\n</ax-range-slider>\r\n<ax-range-slider class=\"ax-color-picker-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" [value]=\"_rgba.a\"\r\n    (onValueChanged)=\"_handleAlphaChanged($event)\">\r\n</ax-range-slider>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorComponent, decorators: [{
                     type: Optional
                 }, {
@@ -225,9 +310,7 @@ class AXColorPalettePreviewComponent extends AXBaseComponent {
             .subscribe((e) => {
             _zone.runOutsideAngular(() => {
                 this._getInnerElement().style.backgroundColor = e.color;
-                this._getInnerElement().innerText = e.color
-                    ? AXColorUtil.toString(e.color, e.mode)
-                    : '';
+                this._getInnerElement().innerText = AXColorUtil.toString(e.color);
                 const color = AXColorUtil.toString(e.color, 'hex');
                 const ratio = AXColorUtil.contrastToWhite(color);
                 this._getHostElement().style.color = !(ratio > 2.0) ? '#000' : '#fff';
@@ -502,8 +585,10 @@ class AXColorPaletteSwatchesComponent extends AXBaseComponent {
             this._selected = AXColorUtil.toString(e.color, 'hex').toLowerCase();
             this._cdr.detectChanges();
         });
-        if (this._getHostElement().tagName.toLowerCase() !=
-            'ax-color-palette-favorite') {
+    }
+    onInit() {
+        const isFav = this._getHostElement().tagName.toLowerCase() == 'ax-color-palette-favorite';
+        if (!isFav && this.colors.length == 0) {
             this.colors = this._defaultPalette.map(c => this._format(c));
         }
     }
@@ -513,7 +598,7 @@ class AXColorPaletteSwatchesComponent extends AXBaseComponent {
         this._parent._setUserInteraction();
         this._parent._onInternalColorChanged$.next({
             color: color.code,
-            mode: this._parent.colorMode,
+            sender: this
         });
     }
     _format(color) {
@@ -566,8 +651,6 @@ class AXColorPalleteComponent extends AXBaseValueComponentMixin {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
         this._onInternalColorChanged$ = new Subject();
-        this.colorModeChange = new EventEmitter();
-        this._colorMode = 'hex';
         //
         this._onInternalColorChanged$.pipe(distinctUntilChanged()).subscribe(e => {
             if (this.disabled || this.readonly)
@@ -576,37 +659,26 @@ class AXColorPalleteComponent extends AXBaseValueComponentMixin {
             cdr.markForCheck();
         });
     }
-    /**
-     *  A character value that specifies the separator character.
-     */
-    get colorMode() {
-        return this._colorMode;
-    }
-    set colorMode(v) {
-        this._setOption({
-            name: 'colorMode',
-            value: v,
-        });
-    }
     _onValueChanged(oldValue, newValue) {
         super._onValueChanged(oldValue, newValue);
         this._onInternalColorChanged$.next({
             color: this.value,
-            mode: this.colorMode,
+            mode: newValue?.startsWith('#') ? "hex" : "rgba",
+            sender: this
         });
     }
     ngAfterContentInit() {
         this._children.changes.subscribe(() => {
             this._onInternalColorChanged$.next({
                 color: this.value,
-                mode: this.colorMode,
+                sender: this
             });
         });
     }
     onViewInit() {
         this._onInternalColorChanged$.next({
             color: this.value,
-            mode: this.colorMode,
+            sender: this
         });
     }
     get __hostDisabled() {
@@ -614,9 +686,9 @@ class AXColorPalleteComponent extends AXBaseValueComponentMixin {
     }
 }
 AXColorPalleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXColorPalleteComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXColorPalleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", name: "name", checked: "checked", colorMode: "colorMode" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", colorModeChange: "colorModeChange" }, host: { properties: { "class.ax-state-disabled": "this.__hostDisabled" } }, providers: [
+AXColorPalleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", state: "state", name: "name", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged" }, host: { properties: { "class.ax-state-disabled": "this.__hostDisabled" } }, providers: [
         { provide: AXColorComponent, useExisting: AXColorPalleteComponent },
-    ], queries: [{ propertyName: "_children", predicate: AXColorPaletteChildComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select='ax-header'></ng-content>\r\n\r\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\r\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\r\n\r\n<ng-template #custom>\r\n    <ng-content select='ax-color-palette-preview'></ng-content>\r\n    <ng-content select='ax-color-palette-picker'></ng-content>\r\n    <ng-content select='ax-color-palette-swatches'></ng-content>\r\n    <ng-content select='ax-color-palette-favorite'></ng-content>\r\n    <ng-content select='ax-color-palette-input'></ng-content>\r\n</ng-template>\r\n<ng-template #default>\r\n    <ax-color-palette-preview></ax-color-palette-preview>\r\n    <ax-color-palette-swatches></ax-color-palette-swatches>\r\n    <ax-color-palette-input></ax-color-palette-input>\r\n</ng-template>\r\n\r\n<ng-content select='ax-footer'></ng-content>\r\n\r\n\r\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgb(var(--ax-color-surface));border-color:rgb(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);width:18rem}@media (min-width: 600px){ax-color-palette{width:20rem!important}}@media (min-width: 1200px){ax-color-palette{width:18rem!important}}@media (max-width: 599px){ax-color-palette{width:100%!important}}ax-color-palette.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-color-palette.ax-state-disabled ax-color-palette-swatches div:hover,ax-color-palette.ax-state-disabled ax-color-palette-swatches div.ax-state-selected,ax-color-palette.ax-state-disabled ax-color-palette-favorite div:hover,ax-color-palette.ax-state-disabled ax-color-palette-favorite div.ax-state-selected{opacity:.5;cursor:not-allowed}ax-color-palette ax-header,ax-color-palette ax-footer{padding:.75rem;border-top-width:1px;display:flex}ax-color-palette ax-color-palette-preview{position:relative;width:100%;height:6rem;gap:.5;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;left:0;width:100%;height:100%;display:flex;align-items:center;text-transform:uppercase;justify-content:center;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default));box-shadow:0 1px 8px #00000029;text-shadow:0px 0px 14px rgba(0,0,0,.5)}ax-color-palette ax-color-palette-favorite{display:block;border-top:1px solid;border-color:rgb(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;padding:.5rem;grid-template-columns:repeat(10,minmax(0,1fr));max-height:9rem;overflow-x:hidden;gap:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:99rem;border:1px solid rgb(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{content:\"\";padding-top:100%;float:left}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{content:\"\";display:block;clear:both}ax-color-palette ax-color-palette-swatches div:hover,ax-color-palette ax-color-palette-swatches div.ax-state-selected,ax-color-palette ax-color-palette-favorite div:hover,ax-color-palette ax-color-palette-favorite div.ax-state-selected{outline-offset:2px;outline-width:1px;outline-style:solid;outline-color:rgba(var(--ax-color-ghost),.86)}ax-color-palette ax-color-palette-input{display:flex;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-input .palette-inputs{display:flex;flex:1 1 0%;gap:.5rem}ax-color-palette ax-color-palette-input .palette-inputs div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs div label{margin-top:.75rem;font-size:.75rem;line-height:1.25rem}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay{display:block;width:100%;height:8rem;position:relative}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-pointer{width:.75rem;height:.75rem;border-radius:99rem;background-color:transparent;border:1px solid rgb(var(--ax-color-background-default))}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-color,ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-gradient{height:100%;width:100%;position:absolute;inset:0}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-color{background:linear-gradient(to right,rgb(255,255,255),rgba(255,255,255,0))}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-gradient{background:linear-gradient(to top,rgb(0,0,0),rgba(0,0,0,0))}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-gradient input{background:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 17%,rgb(0,255,0) 33%,rgb(0,255,255) 50%,rgb(0,0,255) 67%,rgb(255,0,255) 83%,rgb(255,0,0) 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-transparent input{background-image:linear-gradient(to right,rgba(245,246,252,0),rgb(0,0,0)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "_children", predicate: AXColorPaletteChildComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select='ax-header'></ng-content>\r\n\r\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\r\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\r\n\r\n<ng-template #custom>\r\n    <ng-content select='ax-color-palette-preview'></ng-content>\r\n    <ng-content select='ax-color-palette-picker'></ng-content>\r\n    <ng-content select='ax-color-palette-swatches'></ng-content>\r\n    <ng-content select='ax-color-palette-favorite'></ng-content>\r\n    <ng-content select='ax-color-palette-input'></ng-content>\r\n</ng-template>\r\n<ng-template #default>\r\n    <ax-color-palette-preview></ax-color-palette-preview>\r\n    <ax-color-palette-swatches></ax-color-palette-swatches>\r\n    <ax-color-palette-input></ax-color-palette-input>\r\n</ng-template>\r\n\r\n<ng-content select='ax-footer'></ng-content>\r\n\r\n\r\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgb(var(--ax-color-surface));border-color:rgb(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);width:18rem}@media (min-width: 600px){ax-color-palette{width:20rem!important}}@media (min-width: 1200px){ax-color-palette{width:18rem!important}}@media (max-width: 599px){ax-color-palette{width:100%!important}}ax-color-palette.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-color-palette.ax-state-disabled ax-color-palette-swatches div:hover,ax-color-palette.ax-state-disabled ax-color-palette-swatches div.ax-state-selected,ax-color-palette.ax-state-disabled ax-color-palette-favorite div:hover,ax-color-palette.ax-state-disabled ax-color-palette-favorite div.ax-state-selected{opacity:.5;cursor:not-allowed}ax-color-palette ax-header,ax-color-palette ax-footer{padding:.75rem;border-top-width:1px;display:flex}ax-color-palette ax-color-palette-preview{position:relative;width:100%;height:6rem;gap:.5;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;left:0;width:100%;height:100%;display:flex;align-items:center;text-transform:uppercase;justify-content:center;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default));box-shadow:0 1px 8px #00000029;text-shadow:0px 0px 14px rgba(0,0,0,.5)}ax-color-palette ax-color-palette-favorite{display:block;border-top:1px solid;border-color:rgb(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;padding:.5rem;grid-template-columns:repeat(10,minmax(0,1fr));max-height:9rem;overflow-x:hidden;gap:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:99rem;border:1px solid rgb(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{content:\"\";padding-top:100%;float:left}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{content:\"\";display:block;clear:both}ax-color-palette ax-color-palette-swatches div:hover,ax-color-palette ax-color-palette-swatches div.ax-state-selected,ax-color-palette ax-color-palette-favorite div:hover,ax-color-palette ax-color-palette-favorite div.ax-state-selected{outline-offset:2px;outline-width:1px;outline-style:solid;outline-color:rgba(var(--ax-color-ghost),.86)}ax-color-palette ax-color-palette-input{display:flex;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-input .palette-inputs{display:flex;flex:1 1 0%;gap:.5rem}ax-color-palette ax-color-palette-input .palette-inputs div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs div label{margin-top:.75rem;font-size:.75rem;line-height:1.25rem}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay-trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay{display:block;width:100%;height:8rem;position:relative}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-pointer{width:.75rem;height:.75rem;border-radius:99rem;background-color:transparent;border:1px solid rgb(var(--ax-color-background-default));position:relative;z-index:1}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{height:100%;width:100%;position:absolute;inset:0}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1{z-index:0;background:linear-gradient(to right,#fff 0%,rgba(255,255,255,0) 100%)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{z-index:1;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-gradient input{background:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 17%,rgb(0,255,0) 33%,rgb(0,255,255) 50%,rgb(0,0,255) 67%,rgb(255,0,255) 83%,rgb(255,0,0) 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-transparent input{background-image:linear-gradient(to right,rgba(245,246,252,0),rgb(0,0,0)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXColorPalleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-palette', inputs: [
@@ -625,18 +697,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                         'readonly',
                         'allowNull',
                         'value',
+                        'state',
                         'name',
                         'checked',
-                    ], outputs: ['onBlur', 'onFocus', 'valueChange', 'onValueChanged'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                    ], outputs: ['onBlur', 'onFocus', 'valueChange', 'stateChange', 'onValueChanged'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: AXColorComponent, useExisting: AXColorPalleteComponent },
-                    ], template: "<ng-content select='ax-header'></ng-content>\r\n\r\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\r\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\r\n\r\n<ng-template #custom>\r\n    <ng-content select='ax-color-palette-preview'></ng-content>\r\n    <ng-content select='ax-color-palette-picker'></ng-content>\r\n    <ng-content select='ax-color-palette-swatches'></ng-content>\r\n    <ng-content select='ax-color-palette-favorite'></ng-content>\r\n    <ng-content select='ax-color-palette-input'></ng-content>\r\n</ng-template>\r\n<ng-template #default>\r\n    <ax-color-palette-preview></ax-color-palette-preview>\r\n    <ax-color-palette-swatches></ax-color-palette-swatches>\r\n    <ax-color-palette-input></ax-color-palette-input>\r\n</ng-template>\r\n\r\n<ng-content select='ax-footer'></ng-content>\r\n\r\n\r\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgb(var(--ax-color-surface));border-color:rgb(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);width:18rem}@media (min-width: 600px){ax-color-palette{width:20rem!important}}@media (min-width: 1200px){ax-color-palette{width:18rem!important}}@media (max-width: 599px){ax-color-palette{width:100%!important}}ax-color-palette.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-color-palette.ax-state-disabled ax-color-palette-swatches div:hover,ax-color-palette.ax-state-disabled ax-color-palette-swatches div.ax-state-selected,ax-color-palette.ax-state-disabled ax-color-palette-favorite div:hover,ax-color-palette.ax-state-disabled ax-color-palette-favorite div.ax-state-selected{opacity:.5;cursor:not-allowed}ax-color-palette ax-header,ax-color-palette ax-footer{padding:.75rem;border-top-width:1px;display:flex}ax-color-palette ax-color-palette-preview{position:relative;width:100%;height:6rem;gap:.5;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;left:0;width:100%;height:100%;display:flex;align-items:center;text-transform:uppercase;justify-content:center;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default));box-shadow:0 1px 8px #00000029;text-shadow:0px 0px 14px rgba(0,0,0,.5)}ax-color-palette ax-color-palette-favorite{display:block;border-top:1px solid;border-color:rgb(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;padding:.5rem;grid-template-columns:repeat(10,minmax(0,1fr));max-height:9rem;overflow-x:hidden;gap:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:99rem;border:1px solid rgb(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{content:\"\";padding-top:100%;float:left}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{content:\"\";display:block;clear:both}ax-color-palette ax-color-palette-swatches div:hover,ax-color-palette ax-color-palette-swatches div.ax-state-selected,ax-color-palette ax-color-palette-favorite div:hover,ax-color-palette ax-color-palette-favorite div.ax-state-selected{outline-offset:2px;outline-width:1px;outline-style:solid;outline-color:rgba(var(--ax-color-ghost),.86)}ax-color-palette ax-color-palette-input{display:flex;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-input .palette-inputs{display:flex;flex:1 1 0%;gap:.5rem}ax-color-palette ax-color-palette-input .palette-inputs div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs div label{margin-top:.75rem;font-size:.75rem;line-height:1.25rem}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay{display:block;width:100%;height:8rem;position:relative}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-pointer{width:.75rem;height:.75rem;border-radius:99rem;background-color:transparent;border:1px solid rgb(var(--ax-color-background-default))}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-color,ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-gradient{height:100%;width:100%;position:absolute;inset:0}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-color{background:linear-gradient(to right,rgb(255,255,255),rgba(255,255,255,0))}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-gradient{background:linear-gradient(to top,rgb(0,0,0),rgba(0,0,0,0))}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-gradient input{background:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 17%,rgb(0,255,0) 33%,rgb(0,255,255) 50%,rgb(0,0,255) 67%,rgb(255,0,255) 83%,rgb(255,0,0) 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-transparent input{background-image:linear-gradient(to right,rgba(245,246,252,0),rgb(0,0,0)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}\n"] }]
+                    ], template: "<ng-content select='ax-header'></ng-content>\r\n\r\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\r\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\r\n\r\n<ng-template #custom>\r\n    <ng-content select='ax-color-palette-preview'></ng-content>\r\n    <ng-content select='ax-color-palette-picker'></ng-content>\r\n    <ng-content select='ax-color-palette-swatches'></ng-content>\r\n    <ng-content select='ax-color-palette-favorite'></ng-content>\r\n    <ng-content select='ax-color-palette-input'></ng-content>\r\n</ng-template>\r\n<ng-template #default>\r\n    <ax-color-palette-preview></ax-color-palette-preview>\r\n    <ax-color-palette-swatches></ax-color-palette-swatches>\r\n    <ax-color-palette-input></ax-color-palette-input>\r\n</ng-template>\r\n\r\n<ng-content select='ax-footer'></ng-content>\r\n\r\n\r\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgb(var(--ax-color-surface));border-color:rgb(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);width:18rem}@media (min-width: 600px){ax-color-palette{width:20rem!important}}@media (min-width: 1200px){ax-color-palette{width:18rem!important}}@media (max-width: 599px){ax-color-palette{width:100%!important}}ax-color-palette.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-color-palette.ax-state-disabled ax-color-palette-swatches div:hover,ax-color-palette.ax-state-disabled ax-color-palette-swatches div.ax-state-selected,ax-color-palette.ax-state-disabled ax-color-palette-favorite div:hover,ax-color-palette.ax-state-disabled ax-color-palette-favorite div.ax-state-selected{opacity:.5;cursor:not-allowed}ax-color-palette ax-header,ax-color-palette ax-footer{padding:.75rem;border-top-width:1px;display:flex}ax-color-palette ax-color-palette-preview{position:relative;width:100%;height:6rem;gap:.5;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;left:0;width:100%;height:100%;display:flex;align-items:center;text-transform:uppercase;justify-content:center;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default));box-shadow:0 1px 8px #00000029;text-shadow:0px 0px 14px rgba(0,0,0,.5)}ax-color-palette ax-color-palette-favorite{display:block;border-top:1px solid;border-color:rgb(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;padding:.5rem;grid-template-columns:repeat(10,minmax(0,1fr));max-height:9rem;overflow-x:hidden;gap:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:99rem;border:1px solid rgb(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{content:\"\";padding-top:100%;float:left}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{content:\"\";display:block;clear:both}ax-color-palette ax-color-palette-swatches div:hover,ax-color-palette ax-color-palette-swatches div.ax-state-selected,ax-color-palette ax-color-palette-favorite div:hover,ax-color-palette ax-color-palette-favorite div.ax-state-selected{outline-offset:2px;outline-width:1px;outline-style:solid;outline-color:rgba(var(--ax-color-ghost),.86)}ax-color-palette ax-color-palette-input{display:flex;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-input .palette-inputs{display:flex;flex:1 1 0%;gap:.5rem}ax-color-palette ax-color-palette-input .palette-inputs div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs div label{margin-top:.75rem;font-size:.75rem;line-height:1.25rem}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay-trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay{display:block;width:100%;height:8rem;position:relative}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-pointer{width:.75rem;height:.75rem;border-radius:99rem;background-color:transparent;border:1px solid rgb(var(--ax-color-background-default));position:relative;z-index:1}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{height:100%;width:100%;position:absolute;inset:0}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1{z-index:0;background:linear-gradient(to right,#fff 0%,rgba(255,255,255,0) 100%)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{z-index:1;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-gradient input{background:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 17%,rgb(0,255,0) 33%,rgb(0,255,255) 50%,rgb(0,0,255) 67%,rgb(255,0,255) 83%,rgb(255,0,0) 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-transparent input{background-image:linear-gradient(to right,rgba(245,246,252,0),rgb(0,0,0)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _children: [{
                 type: ContentChildren,
                 args: [AXColorPaletteChildComponent]
-            }], colorModeChange: [{
-                type: Output
-            }], colorMode: [{
-                type: Input
             }], __hostDisabled: [{
                 type: HostBinding,
                 args: ['class.ax-state-disabled']
@@ -648,7 +717,8 @@ const MODULES = [
     AXButtonModule,
     AXDecoratorModule,
     AXNumberBoxModule,
-    AXRangeSliderModule
+    AXRangeSliderModule,
+    DragDropModule
 ];
 const CONPONENTS = [
     AXColorPalleteComponent,
@@ -669,7 +739,8 @@ AXColorPaletteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
         AXButtonModule,
         AXDecoratorModule,
         AXNumberBoxModule,
-        AXRangeSliderModule], exports: [AXColorPalleteComponent,
+        AXRangeSliderModule,
+        DragDropModule], exports: [AXColorPalleteComponent,
         AXColorPalettePreviewComponent,
         AXColorPaletteSwatchesComponent,
         AXColorPaletteInputComponent,