@acorex/components 18.16.0-next.5 → 18.16.0-next.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (40) hide show
  1. package/color-palette/lib/color-palette-input.component.d.ts +6 -1
  2. package/color-palette/lib/color-palette-picker.component.d.ts +6 -2
  3. package/data-pager/lib/data-pager.component.d.ts +1 -2
  4. package/esm2022/action-sheet/lib/action-sheet.component.mjs +2 -2
  5. package/esm2022/color-palette/lib/color-palette-input.component.mjs +2 -1
  6. package/esm2022/color-palette/lib/color-palette-picker.component.mjs +66 -40
  7. package/esm2022/data-pager/lib/data-pager-numeric-selector.component.mjs +15 -11
  8. package/esm2022/data-pager/lib/data-pager-pagesize-dropdown.component.mjs +3 -3
  9. package/esm2022/data-pager/lib/data-pager.component.mjs +6 -7
  10. package/esm2022/data-table/lib/data-table/data-table.component.mjs +1 -1
  11. package/esm2022/image-editor/lib/image-editor-container/image-editor-container.component.mjs +5 -4
  12. package/esm2022/image-editor/lib/image-editor-toolbar/image-editor-toolbar.component.mjs +2 -2
  13. package/esm2022/image-editor/lib/image-editor-tools/image-editor-color-picker/image-editor-color-picker.component.mjs +3 -3
  14. package/esm2022/image-editor/lib/image-editor-view/image-editor-view.component.mjs +59 -16
  15. package/esm2022/image-editor/lib/image-editor.service.mjs +1 -1
  16. package/esm2022/media-viewer/lib/media-viewer-container/media-viewer-container.component.mjs +7 -3
  17. package/esm2022/media-viewer/lib/media-viewer-slider/media-viewer-slider.component.mjs +2 -2
  18. package/esm2022/step-wizard/lib/step-wizard.component.mjs +20 -3
  19. package/esm2022/tabs/lib/tabs.component.mjs +2 -2
  20. package/fesm2022/acorex-components-action-sheet.mjs +2 -2
  21. package/fesm2022/acorex-components-action-sheet.mjs.map +1 -1
  22. package/fesm2022/acorex-components-color-palette.mjs +65 -38
  23. package/fesm2022/acorex-components-color-palette.mjs.map +1 -1
  24. package/fesm2022/acorex-components-data-pager.mjs +21 -18
  25. package/fesm2022/acorex-components-data-pager.mjs.map +1 -1
  26. package/fesm2022/acorex-components-data-table.mjs +1 -1
  27. package/fesm2022/acorex-components-data-table.mjs.map +1 -1
  28. package/fesm2022/acorex-components-image-editor.mjs +64 -22
  29. package/fesm2022/acorex-components-image-editor.mjs.map +1 -1
  30. package/fesm2022/acorex-components-media-viewer.mjs +8 -4
  31. package/fesm2022/acorex-components-media-viewer.mjs.map +1 -1
  32. package/fesm2022/acorex-components-step-wizard.mjs +18 -1
  33. package/fesm2022/acorex-components-step-wizard.mjs.map +1 -1
  34. package/fesm2022/acorex-components-tabs.mjs +1 -1
  35. package/fesm2022/acorex-components-tabs.mjs.map +1 -1
  36. package/image-editor/lib/image-editor-container/image-editor-container.component.d.ts +2 -0
  37. package/image-editor/lib/image-editor-view/image-editor-view.component.d.ts +16 -3
  38. package/image-editor/lib/image-editor.service.d.ts +2 -2
  39. package/package.json +1 -1
  40. package/step-wizard/lib/step-wizard.component.d.ts +2 -1
package/fesm2022/acorex-components-action-sheet.mjs CHANGED
@@ -94,7 +94,7 @@ class AXActionSheetComponent extends MXBaseComponent {
94
94
  provide: AXFocusableComponent,
95
95
  useExisting: AXActionSheetComponent,
96
96
  },
97
- ], usesInheritance: true, ngImport: i0, template: "@if (data.header) {\n <ax-header>\n <ax-prefix>\n <ax-title>{{ data.title | translate | async }}</ax-title>\n\n @if (data.subTitle) {\n <ax-sub-title>\n {{ data.subTitle }}\n </ax-sub-title>\n }\n </ax-prefix>\n @if (data.closeButton) {\n <ax-suffix>\n <ax-close-button></ax-close-button>\n </ax-suffix>\n }\n </ax-header>\n}\n\n@if (this.data.content) {\n <div class=\"ax-custom-template-container\">\n <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"handleAttched($event)\"></ng-template>\n </div>\n}\n\n<div class=\"ax-action-list ax-action-list-vertical\">\n @for (item of data.items; let i = $index; track i) {\n @if (item.group?.title) {\n <ax-title>{{ item.group?.title }}</ax-title>\n }\n <div\n class=\"ax-action-item ax-el-interactive ax-el-{{ item.color }}-blank\"\n [class.ax-state-disabled]=\"item.disabled\"\n [tabindex]=\"i\"\n (click)=\"onItemClick(item)\"\n >\n <div class=\"ax-action-item-prefix\">\n @if (item.icon) {\n <span class=\"ax-item-icon\" [class]=\"item.icon\"></span>\n }\n <ax-text>{{ item.text | translate | async }}</ax-text>\n </div>\n <div class=\"ax-action-item-suffix\"></div>\n </div>\n @if (item.break) {\n <ax-divider></ax-divider>\n }\n }\n</div>\n", styles: ["ax-action-sheet{display:block;width:100vw}@media (min-width: 768px){ax-action-sheet{width:70vw}}@media (min-width: 1024px){ax-action-sheet{width:50vw}}ax-action-sheet .ax-custom-template-container{overflow-y:auto;max-height:80vh}ax-action-sheet ax-header{padding:1rem;border-bottom-width:1px;font-size:1rem;line-height:1.5rem;font-weight:500}@media (min-width: 768px){ax-action-sheet ax-header{font-size:1.125rem;line-height:1.75rem}}ax-action-sheet ax-header ax-prefix,ax-action-sheet ax-header ax-suffix{display:flex;flex-direction:column;justify-content:flex-start}ax-action-sheet ax-header ax-prefix{align-items:flex-start}ax-action-sheet ax-header ax-prefix ax-title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}ax-action-sheet ax-header ax-suffix{align-items:flex-end;max-width:fit-content}ax-action-sheet .ax-action-list{overflow-y:auto;max-height:80vh}ax-action-sheet .ax-action-list ax-title{font-size:.875rem}ax-action-sheet .ax-action-list .ax-action-item{min-height:3.5rem!important;font-size:1rem!important}ax-action-sheet .ax-action-list .ax-action-item .ax-item-icon{margin-inline-end:.75rem!important;font-size:1.5rem!important;line-height:2rem!important}\n"], dependencies: [{ kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
97
+ ], usesInheritance: true, ngImport: i0, template: "@if (data.header) {\n <ax-header>\n <ax-prefix>\n <ax-title>{{ data.title | translate | async }}</ax-title>\n\n @if (data.subTitle) {\n <ax-sub-title>\n {{ data.subTitle }}\n </ax-sub-title>\n }\n </ax-prefix>\n @if (data.closeButton) {\n <ax-suffix>\n <ax-close-button></ax-close-button>\n </ax-suffix>\n }\n </ax-header>\n}\n\n@if (this.data.content) {\n <div class=\"ax-custom-template-container\">\n <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"handleAttched($event)\"></ng-template>\n </div>\n}\n\n<div class=\"ax-action-list ax-action-list-vertical\">\n @for (item of data.items; let i = $index; track i) {\n @if (item.group?.title) {\n <ax-title>{{ item.group?.title }}</ax-title>\n }\n <div\n class=\"ax-action-item ax-el-interactive ax-el-{{ item.color }}-blank\"\n [class.ax-state-disabled]=\"item.disabled\"\n [tabindex]=\"i\"\n (click)=\"onItemClick(item)\"\n >\n <div class=\"ax-action-item-prefix\">\n @if (item.icon) {\n <span class=\"ax-item-icon\" [class]=\"item.icon\"></span>\n }\n <ax-text>{{ item.text | translate | async }}</ax-text>\n </div>\n <div class=\"ax-action-item-suffix\"></div>\n </div>\n @if (item.break) {\n <ax-divider></ax-divider>\n }\n }\n</div>\n", styles: ["ax-action-sheet{display:block;width:100vw}@media (min-width: 768px){ax-action-sheet{width:70vw}}@media (min-width: 1024px){ax-action-sheet{width:50vw}}ax-action-sheet .ax-custom-template-container{overflow-y:auto;max-height:100vh}ax-action-sheet ax-header{padding:1rem;border-bottom-width:1px;font-size:1rem;line-height:1.5rem;font-weight:500}@media (min-width: 768px){ax-action-sheet ax-header{font-size:1.125rem;line-height:1.75rem}}ax-action-sheet ax-header ax-prefix,ax-action-sheet ax-header ax-suffix{display:flex;flex-direction:column;justify-content:flex-start}ax-action-sheet ax-header ax-prefix{align-items:flex-start}ax-action-sheet ax-header ax-prefix ax-title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}ax-action-sheet ax-header ax-suffix{align-items:flex-end;max-width:fit-content}ax-action-sheet .ax-action-list{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-action-list ax-title{font-size:.875rem}ax-action-sheet .ax-action-list .ax-action-item{min-height:3.5rem!important;font-size:1rem!important}ax-action-sheet .ax-action-list .ax-action-item .ax-item-icon{margin-inline-end:.75rem!important;font-size:1.5rem!important;line-height:2rem!important}\n"], dependencies: [{ kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
98
98
  }
99
99
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXActionSheetComponent, decorators: [{
100
100
  type: Component,
@@ -107,7 +107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
107
107
  provide: AXFocusableComponent,
108
108
  useExisting: AXActionSheetComponent,
109
109
  },
110
- ], template: "@if (data.header) {\n <ax-header>\n <ax-prefix>\n <ax-title>{{ data.title | translate | async }}</ax-title>\n\n @if (data.subTitle) {\n <ax-sub-title>\n {{ data.subTitle }}\n </ax-sub-title>\n }\n </ax-prefix>\n @if (data.closeButton) {\n <ax-suffix>\n <ax-close-button></ax-close-button>\n </ax-suffix>\n }\n </ax-header>\n}\n\n@if (this.data.content) {\n <div class=\"ax-custom-template-container\">\n <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"handleAttched($event)\"></ng-template>\n </div>\n}\n\n<div class=\"ax-action-list ax-action-list-vertical\">\n @for (item of data.items; let i = $index; track i) {\n @if (item.group?.title) {\n <ax-title>{{ item.group?.title }}</ax-title>\n }\n <div\n class=\"ax-action-item ax-el-interactive ax-el-{{ item.color }}-blank\"\n [class.ax-state-disabled]=\"item.disabled\"\n [tabindex]=\"i\"\n (click)=\"onItemClick(item)\"\n >\n <div class=\"ax-action-item-prefix\">\n @if (item.icon) {\n <span class=\"ax-item-icon\" [class]=\"item.icon\"></span>\n }\n <ax-text>{{ item.text | translate | async }}</ax-text>\n </div>\n <div class=\"ax-action-item-suffix\"></div>\n </div>\n @if (item.break) {\n <ax-divider></ax-divider>\n }\n }\n</div>\n", styles: ["ax-action-sheet{display:block;width:100vw}@media (min-width: 768px){ax-action-sheet{width:70vw}}@media (min-width: 1024px){ax-action-sheet{width:50vw}}ax-action-sheet .ax-custom-template-container{overflow-y:auto;max-height:80vh}ax-action-sheet ax-header{padding:1rem;border-bottom-width:1px;font-size:1rem;line-height:1.5rem;font-weight:500}@media (min-width: 768px){ax-action-sheet ax-header{font-size:1.125rem;line-height:1.75rem}}ax-action-sheet ax-header ax-prefix,ax-action-sheet ax-header ax-suffix{display:flex;flex-direction:column;justify-content:flex-start}ax-action-sheet ax-header ax-prefix{align-items:flex-start}ax-action-sheet ax-header ax-prefix ax-title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}ax-action-sheet ax-header ax-suffix{align-items:flex-end;max-width:fit-content}ax-action-sheet .ax-action-list{overflow-y:auto;max-height:80vh}ax-action-sheet .ax-action-list ax-title{font-size:.875rem}ax-action-sheet .ax-action-list .ax-action-item{min-height:3.5rem!important;font-size:1rem!important}ax-action-sheet .ax-action-list .ax-action-item .ax-item-icon{margin-inline-end:.75rem!important;font-size:1.5rem!important;line-height:2rem!important}\n"] }]
110
+ ], template: "@if (data.header) {\n <ax-header>\n <ax-prefix>\n <ax-title>{{ data.title | translate | async }}</ax-title>\n\n @if (data.subTitle) {\n <ax-sub-title>\n {{ data.subTitle }}\n </ax-sub-title>\n }\n </ax-prefix>\n @if (data.closeButton) {\n <ax-suffix>\n <ax-close-button></ax-close-button>\n </ax-suffix>\n }\n </ax-header>\n}\n\n@if (this.data.content) {\n <div class=\"ax-custom-template-container\">\n <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"handleAttched($event)\"></ng-template>\n </div>\n}\n\n<div class=\"ax-action-list ax-action-list-vertical\">\n @for (item of data.items; let i = $index; track i) {\n @if (item.group?.title) {\n <ax-title>{{ item.group?.title }}</ax-title>\n }\n <div\n class=\"ax-action-item ax-el-interactive ax-el-{{ item.color }}-blank\"\n [class.ax-state-disabled]=\"item.disabled\"\n [tabindex]=\"i\"\n (click)=\"onItemClick(item)\"\n >\n <div class=\"ax-action-item-prefix\">\n @if (item.icon) {\n <span class=\"ax-item-icon\" [class]=\"item.icon\"></span>\n }\n <ax-text>{{ item.text | translate | async }}</ax-text>\n </div>\n <div class=\"ax-action-item-suffix\"></div>\n </div>\n @if (item.break) {\n <ax-divider></ax-divider>\n }\n }\n</div>\n", styles: ["ax-action-sheet{display:block;width:100vw}@media (min-width: 768px){ax-action-sheet{width:70vw}}@media (min-width: 1024px){ax-action-sheet{width:50vw}}ax-action-sheet .ax-custom-template-container{overflow-y:auto;max-height:100vh}ax-action-sheet ax-header{padding:1rem;border-bottom-width:1px;font-size:1rem;line-height:1.5rem;font-weight:500}@media (min-width: 768px){ax-action-sheet ax-header{font-size:1.125rem;line-height:1.75rem}}ax-action-sheet ax-header ax-prefix,ax-action-sheet ax-header ax-suffix{display:flex;flex-direction:column;justify-content:flex-start}ax-action-sheet ax-header ax-prefix{align-items:flex-start}ax-action-sheet ax-header ax-prefix ax-title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}ax-action-sheet ax-header ax-suffix{align-items:flex-end;max-width:fit-content}ax-action-sheet .ax-action-list{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-action-list ax-title{font-size:.875rem}ax-action-sheet .ax-action-list .ax-action-item{min-height:3.5rem!important;font-size:1rem!important}ax-action-sheet .ax-action-list .ax-action-item .ax-item-icon{margin-inline-end:.75rem!important;font-size:1.5rem!important;line-height:2rem!important}\n"] }]
111
111
  }], ctorParameters: () => [{ type: undefined, decorators: [{
112
112
  type: Inject,
113
113
  args: [DIALOG_DATA]
package/fesm2022/acorex-components-action-sheet.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"acorex-components-action-sheet.mjs","sources":["../../../../libs/components/action-sheet/src/lib/action-sheet.component.ts","../../../../libs/components/action-sheet/src/lib/action-sheet.component.html","../../../../libs/components/action-sheet/src/lib/action-sheet.service.ts","../../../../libs/components/action-sheet/src/lib/action-sheet.module.ts","../../../../libs/components/action-sheet/src/acorex-components-action-sheet.ts"],"sourcesContent":["import {\n AXClosbaleComponent,\n AXComponentCloseEvent,\n AXFocusableComponent,\n MXBaseComponent,\n} from '@acorex/components/common';\nimport { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';\nimport { CdkPortalOutletAttachedRef, ComponentPortal, Portal, TemplatePortal } from '@angular/cdk/portal';\nimport {\n ChangeDetectionStrategy,\n Component,\n ComponentRef,\n HostListener,\n Inject,\n OnInit,\n TemplateRef,\n ViewEncapsulation,\n} from '@angular/core';\nimport { AXActionSheetConfig, AXActionSheetItem } from './action-sheet.class';\n\n/**\n * A component for displaying an action sheet, which is a menu that slides up from the bottom of the screen.\n *\n * @category Components\n */\n@Component({\n selector: 'ax-action-sheet',\n templateUrl: './action-sheet.component.html',\n styleUrls: ['./action-sheet.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n providers: [\n {\n provide: AXClosbaleComponent,\n useExisting: AXActionSheetComponent,\n },\n {\n provide: AXFocusableComponent,\n useExisting: AXActionSheetComponent,\n },\n ],\n})\nexport class AXActionSheetComponent extends MXBaseComponent implements OnInit {\n /**\n * @ignore\n */\n protected _selectedPortal: Portal<any>;\n\n /**\n * @ignore\n */\n private _componentRef: unknown;\n\n /**\n * @ignore\n */\n constructor(\n @Inject(DIALOG_DATA)\n protected data: AXActionSheetConfig,\n private dialogRef: DialogRef<AXComponentCloseEvent>,\n ) {\n super();\n }\n\n /**\n * @ignore\n */\n override ngOnInit(): void {\n super.ngOnInit();\n if (this.data.content) {\n if (this.data.content instanceof TemplateRef) {\n this._selectedPortal = new TemplatePortal(this.data.content, this.getViewContainer(), {\n $implicit: this.data,\n ref: this,\n });\n this.cdr.markForCheck();\n } else if (typeof this.data.content === 'function') {\n this._selectedPortal = new ComponentPortal(this.data.content);\n this.cdr.markForCheck();\n }\n }\n }\n\n protected handleAttched(ref: CdkPortalOutletAttachedRef) {\n ref = ref as ComponentRef<any>;\n if (ref.instance) {\n this._componentRef = ref.instance;\n Object.assign(this._componentRef, this.data);\n Object.assign(this._componentRef, { _isPopup: true });\n if (ref.instance.onClosed) {\n ref.instance.onClosed.subscribe((e: AXComponentCloseEvent) => {\n this.close(e);\n });\n }\n }\n }\n\n onItemClick(item: AXActionSheetItem) {\n this.close(item);\n if (item?.onClick) item.onClick();\n }\n\n close(e) {\n this.dialogRef.close({\n component: this._componentRef,\n htmlElement: this.getHostElement(),\n data: e,\n });\n }\n\n /**\n * @ignore\n */\n @HostListener('keydown.escape')\n protected onKeydownHandler() {\n const focusedOrHasFocused = this.getHostElement().matches(':focus-within');\n if (this.data.closeButton && focusedOrHasFocused) {\n this.close(null);\n }\n }\n}\n","@if (data.header) {\n <ax-header>\n <ax-prefix>\n <ax-title>{{ data.title | translate | async }}</ax-title>\n\n @if (data.subTitle) {\n <ax-sub-title>\n {{ data.subTitle }}\n </ax-sub-title>\n }\n </ax-prefix>\n @if (data.closeButton) {\n <ax-suffix>\n <ax-close-button></ax-close-button>\n </ax-suffix>\n }\n </ax-header>\n}\n\n@if (this.data.content) {\n <div class=\"ax-custom-template-container\">\n <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"handleAttched($event)\"></ng-template>\n </div>\n}\n\n<div class=\"ax-action-list ax-action-list-vertical\">\n @for (item of data.items; let i = $index; track i) {\n @if (item.group?.title) {\n <ax-title>{{ item.group?.title }}</ax-title>\n }\n <div\n class=\"ax-action-item ax-el-interactive ax-el-{{ item.color }}-blank\"\n [class.ax-state-disabled]=\"item.disabled\"\n [tabindex]=\"i\"\n (click)=\"onItemClick(item)\"\n >\n <div class=\"ax-action-item-prefix\">\n @if (item.icon) {\n <span class=\"ax-item-icon\" [class]=\"item.icon\"></span>\n }\n <ax-text>{{ item.text | translate | async }}</ax-text>\n </div>\n <div class=\"ax-action-item-suffix\"></div>\n </div>\n @if (item.break) {\n <ax-divider></ax-divider>\n }\n }\n</div>\n","import { Dialog } from '@angular/cdk/dialog';\nimport { GlobalPositionStrategy } from '@angular/cdk/overlay';\nimport { Injectable, inject } from '@angular/core';\nimport { BehaviorSubject, Subject } from 'rxjs';\nimport { AXActionSheetConfig } from './action-sheet.class';\nimport { AXActionSheetComponent } from './action-sheet.component';\n\nexport interface AXActionSheetDialogRef {\n close: (e?) => void;\n closed: Subject<any>;\n}\n\n@Injectable()\nexport class AXActionSheetService {\n private dialog: Dialog = inject(Dialog);\n\n open(config: AXActionSheetConfig): Promise<AXActionSheetDialogRef> {\n const defaultConfig: AXActionSheetConfig = {\n title: 'action-sheet.title',\n closeButton: true,\n closeOnBackdropClick: true,\n header: true,\n };\n config = Object.assign(defaultConfig, config);\n\n const dialogRef = this.dialog.open(AXActionSheetComponent, {\n data: config,\n autoFocus: 'first-tabbable',\n restoreFocus: true,\n role: 'dialog',\n ariaModal: true,\n closeOnNavigation: true,\n closeOnDestroy: true,\n hasBackdrop: true,\n panelClass: ['ax-actionsheet-panel'],\n disableClose: config.closeOnBackdropClick ? false : true,\n positionStrategy: new GlobalPositionStrategy().centerHorizontally().bottom(),\n });\n const promise = new Promise<AXActionSheetDialogRef>((resolve) => {\n const closed = new BehaviorSubject<any>(null);\n const axDialogRef: AXActionSheetDialogRef = {\n close: (e) => {\n dialogRef.close(e);\n },\n closed,\n };\n dialogRef.closed.subscribe((c: any) => {\n if (c?.data) {\n closed.next({ data: c.data });\n } else {\n closed.next({});\n }\n });\n if (resolve) {\n resolve(axDialogRef);\n }\n });\n return promise;\n }\n}\n","import { AXButtonModule } from '@acorex/components/button';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\nimport { PortalModule } from '@angular/cdk/portal';\nimport { NgModule } from '@angular/core';\n\nimport { AXCommonModule } from '@acorex/components/common';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { DialogModule } from '@angular/cdk/dialog';\nimport { AsyncPipe } from '@angular/common';\nimport { AXActionSheetComponent } from './action-sheet.component';\nimport { AXActionSheetService } from './action-sheet.service';\n\nconst MODULES = [\n AXCommonModule,\n DragDropModule,\n A11yModule,\n AXButtonModule,\n PortalModule,\n AXDecoratorModule,\n AXTranslationModule,\n DialogModule,\n AsyncPipe,\n];\n\n@NgModule({\n declarations: [AXActionSheetComponent],\n imports: [...MODULES],\n exports: [AXActionSheetComponent],\n providers: [AXActionSheetService],\n})\nexport class AXActionSheetModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"acorex-components-action-sheet.mjs","sources":["../../../../libs/components/action-sheet/src/lib/action-sheet.component.ts","../../../../libs/components/action-sheet/src/lib/action-sheet.component.html","../../../../libs/components/action-sheet/src/lib/action-sheet.service.ts","../../../../libs/components/action-sheet/src/lib/action-sheet.module.ts","../../../../libs/components/action-sheet/src/acorex-components-action-sheet.ts"],"sourcesContent":["import {\n AXClosbaleComponent,\n AXComponentCloseEvent,\n AXFocusableComponent,\n MXBaseComponent,\n} from '@acorex/components/common';\nimport { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';\nimport { CdkPortalOutletAttachedRef, ComponentPortal, Portal, TemplatePortal } from '@angular/cdk/portal';\nimport {\n ChangeDetectionStrategy,\n Component,\n ComponentRef,\n HostListener,\n Inject,\n OnInit,\n TemplateRef,\n ViewEncapsulation,\n} from '@angular/core';\nimport { AXActionSheetConfig, AXActionSheetItem } from './action-sheet.class';\n\n/**\n * A component for displaying an action sheet, which is a menu that slides up from the bottom of the screen.\n *\n * @category Components\n */\n@Component({\n selector: 'ax-action-sheet',\n templateUrl: './action-sheet.component.html',\n styleUrls: ['./action-sheet.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n providers: [\n {\n provide: AXClosbaleComponent,\n useExisting: AXActionSheetComponent,\n },\n {\n provide: AXFocusableComponent,\n useExisting: AXActionSheetComponent,\n },\n ],\n})\nexport class AXActionSheetComponent extends MXBaseComponent implements OnInit {\n /**\n * @ignore\n */\n protected _selectedPortal: Portal<any>;\n\n /**\n * @ignore\n */\n private _componentRef: unknown;\n\n /**\n * @ignore\n */\n constructor(\n @Inject(DIALOG_DATA)\n protected data: AXActionSheetConfig,\n private dialogRef: DialogRef<AXComponentCloseEvent>,\n ) {\n super();\n }\n\n /**\n * @ignore\n */\n override ngOnInit(): void {\n super.ngOnInit();\n if (this.data.content) {\n if (this.data.content instanceof TemplateRef) {\n this._selectedPortal = new TemplatePortal(this.data.content, this.getViewContainer(), {\n $implicit: this.data,\n ref: this,\n });\n this.cdr.markForCheck();\n } else if (typeof this.data.content === 'function') {\n this._selectedPortal = new ComponentPortal(this.data.content);\n this.cdr.markForCheck();\n }\n }\n }\n\n protected handleAttched(ref: CdkPortalOutletAttachedRef) {\n ref = ref as ComponentRef<any>;\n if (ref.instance) {\n this._componentRef = ref.instance;\n Object.assign(this._componentRef, this.data);\n Object.assign(this._componentRef, { _isPopup: true });\n if (ref.instance.onClosed) {\n ref.instance.onClosed.subscribe((e: AXComponentCloseEvent) => {\n this.close(e);\n });\n }\n }\n }\n\n onItemClick(item: AXActionSheetItem) {\n this.close(item);\n if (item?.onClick) item.onClick();\n }\n\n close(e) {\n this.dialogRef.close({\n component: this._componentRef,\n htmlElement: this.getHostElement(),\n data: e,\n });\n }\n\n /**\n * @ignore\n */\n @HostListener('keydown.escape')\n protected onKeydownHandler() {\n const focusedOrHasFocused = this.getHostElement().matches(':focus-within');\n if (this.data.closeButton && focusedOrHasFocused) {\n this.close(null);\n }\n }\n}\n","@if (data.header) {\n <ax-header>\n <ax-prefix>\n <ax-title>{{ data.title | translate | async }}</ax-title>\n\n @if (data.subTitle) {\n <ax-sub-title>\n {{ data.subTitle }}\n </ax-sub-title>\n }\n </ax-prefix>\n @if (data.closeButton) {\n <ax-suffix>\n <ax-close-button></ax-close-button>\n </ax-suffix>\n }\n </ax-header>\n}\n\n@if (this.data.content) {\n <div class=\"ax-custom-template-container\">\n <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"handleAttched($event)\"></ng-template>\n </div>\n}\n\n<div class=\"ax-action-list ax-action-list-vertical\">\n @for (item of data.items; let i = $index; track i) {\n @if (item.group?.title) {\n <ax-title>{{ item.group?.title }}</ax-title>\n }\n <div\n class=\"ax-action-item ax-el-interactive ax-el-{{ item.color }}-blank\"\n [class.ax-state-disabled]=\"item.disabled\"\n [tabindex]=\"i\"\n (click)=\"onItemClick(item)\"\n >\n <div class=\"ax-action-item-prefix\">\n @if (item.icon) {\n <span class=\"ax-item-icon\" [class]=\"item.icon\"></span>\n }\n <ax-text>{{ item.text | translate | async }}</ax-text>\n </div>\n <div class=\"ax-action-item-suffix\"></div>\n </div>\n @if (item.break) {\n <ax-divider></ax-divider>\n }\n }\n</div>\n","import { Dialog } from '@angular/cdk/dialog';\nimport { GlobalPositionStrategy } from '@angular/cdk/overlay';\nimport { Injectable, inject } from '@angular/core';\nimport { BehaviorSubject, Subject } from 'rxjs';\nimport { AXActionSheetConfig } from './action-sheet.class';\nimport { AXActionSheetComponent } from './action-sheet.component';\n\nexport interface AXActionSheetDialogRef {\n close: (e?) => void;\n closed: Subject<any>;\n}\n\n@Injectable()\nexport class AXActionSheetService {\n private dialog: Dialog = inject(Dialog);\n\n open(config: AXActionSheetConfig): Promise<AXActionSheetDialogRef> {\n const defaultConfig: AXActionSheetConfig = {\n title: 'action-sheet.title',\n closeButton: true,\n closeOnBackdropClick: true,\n header: true,\n };\n config = Object.assign(defaultConfig, config);\n\n const dialogRef = this.dialog.open(AXActionSheetComponent, {\n data: config,\n autoFocus: 'first-tabbable',\n restoreFocus: true,\n role: 'dialog',\n ariaModal: true,\n closeOnNavigation: true,\n closeOnDestroy: true,\n hasBackdrop: true,\n panelClass: ['ax-actionsheet-panel'],\n disableClose: config.closeOnBackdropClick ? false : true,\n positionStrategy: new GlobalPositionStrategy().centerHorizontally().bottom(),\n });\n const promise = new Promise<AXActionSheetDialogRef>((resolve) => {\n const closed = new BehaviorSubject<any>(null);\n const axDialogRef: AXActionSheetDialogRef = {\n close: (e) => {\n dialogRef.close(e);\n },\n closed,\n };\n dialogRef.closed.subscribe((c: any) => {\n if (c?.data) {\n closed.next({ data: c.data });\n } else {\n closed.next({});\n }\n });\n if (resolve) {\n resolve(axDialogRef);\n }\n });\n return promise;\n }\n}\n","import { AXButtonModule } from '@acorex/components/button';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\nimport { PortalModule } from '@angular/cdk/portal';\nimport { NgModule } from '@angular/core';\n\nimport { AXCommonModule } from '@acorex/components/common';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { DialogModule } from '@angular/cdk/dialog';\nimport { AsyncPipe } from '@angular/common';\nimport { AXActionSheetComponent } from './action-sheet.component';\nimport { AXActionSheetService } from './action-sheet.service';\n\nconst MODULES = [\n AXCommonModule,\n DragDropModule,\n A11yModule,\n AXButtonModule,\n PortalModule,\n AXDecoratorModule,\n AXTranslationModule,\n DialogModule,\n AsyncPipe,\n];\n\n@NgModule({\n declarations: [AXActionSheetComponent],\n imports: [...MODULES],\n exports: [AXActionSheetComponent],\n providers: [AXActionSheetService],\n})\nexport class AXActionSheetModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/fesm2022/acorex-components-color-palette.mjs CHANGED
@@ -2,7 +2,7 @@ import { MXBaseComponent, MXValueComponent, AXValuableComponent } from '@acorex/
2
2
  import * as i1 from '@acorex/core/utils';
3
3
  import { AXColorUtil, AXUnsubscriber } from '@acorex/core/utils';
4
4
  import * as i0 from '@angular/core';
5
- import { Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, HostBinding, Input, forwardRef, ContentChildren, NgModule } from '@angular/core';
5
+ import { Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, HostBinding, viewChild, signal, Input, forwardRef, ContentChildren, NgModule } from '@angular/core';
6
6
  import * as i2 from '@angular/forms';
7
7
  import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
8
8
  import * as i3 from '@acorex/components/text-box';
@@ -12,8 +12,6 @@ import { AXNumberBoxModule } from '@acorex/components/number-box';
12
12
  import { isBrowser } from '@acorex/core/platform';
13
13
  import * as i3$1 from '@acorex/components/range-slider';
14
14
  import { AXRangeSliderModule } from '@acorex/components/range-slider';
15
- import * as i4$1 from '@angular/cdk/drag-drop';
16
- import { DragDropModule } from '@angular/cdk/drag-drop';
17
15
  import { distinctUntilChanged } from 'rxjs/operators';
18
16
  import * as i1$1 from '@angular/common';
19
17
  import { CommonModule } from '@angular/common';
@@ -21,6 +19,7 @@ import { AXButtonModule } from '@acorex/components/button';
21
19
  import { AXDecoratorModule } from '@acorex/components/decorators';
22
20
  import { AXLabelModule } from '@acorex/components/label';
23
21
  import { AXSliderModule } from '@acorex/components/slider';
22
+ import { DragDropModule } from '@angular/cdk/drag-drop';
24
23
 
25
24
  class AXColorPaletteParentComponent {
26
25
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXColorPaletteParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -344,6 +343,7 @@ class AXColorPaletteInputComponent extends MXBaseComponent {
344
343
  break;
345
344
  default:
346
345
  this._colorMode = 'rgba';
346
+ this.applyParent(true);
347
347
  break;
348
348
  }
349
349
  }
@@ -423,6 +423,8 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
423
423
  b: 0,
424
424
  a: 0,
425
425
  };
426
+ this.circle = viewChild('circle');
427
+ this.changingColor = signal(false);
426
428
  /**
427
429
  * @ignore
428
430
  */
@@ -518,41 +520,41 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
518
520
  /**
519
521
  * @ignore
520
522
  */
521
- _handleSurfaceClick(e) {
522
- if (this._parent.disabled || this._parent.readonly) {
523
- e.preventDefault();
524
- e.stopPropagation();
525
- return;
526
- }
527
- const surface = this.getHostElement().querySelector('.ax-color-box-overlay');
528
- const pointer = this.getHostElement().querySelector('.ax-color-box-pointer');
529
- let x = e.offsetX;
530
- let y = e.offsetY;
531
- this.setColorByXY(x, y);
532
- }
523
+ // protected _handleSurfaceClick(e: MouseEvent) {
524
+ // if (this._parent.disabled || this._parent.readonly) {
525
+ // e.preventDefault();
526
+ // e.stopPropagation();
527
+ // return;
528
+ // }
529
+ // const surface = this.getHostElement().querySelector<HTMLDivElement>('.ax-color-box-overlay');
530
+ // const pointer = this.getHostElement().querySelector<HTMLDivElement>('.ax-color-box-pointer');
531
+ // const x = e.offsetX;
532
+ // const y = e.offsetY;
533
+ // this.setColorByXY(x, y);
534
+ // }
533
535
  /**
534
536
  * @ignore
535
537
  */
536
- _handleDrag() {
537
- if (this._parent.disabled || this._parent.readonly) {
538
- return;
539
- }
540
- const surface = this.getHostElement().querySelector('.ax-color-box-overlay');
541
- const sb = surface.getBoundingClientRect();
542
- const pointer = this.getHostElement().querySelector('.ax-color-box-pointer');
543
- const pb = pointer.getBoundingClientRect();
544
- const w = pb.width / 2;
545
- let x = pb.left - sb.left + w;
546
- let y = pb.top - sb.top + w;
547
- //
548
- x = x < 0 ? 0 : x;
549
- x = x > sb.width ? sb.width : x;
550
- //
551
- y = y < 0 ? 0 : y;
552
- y = y > sb.height ? sb.height : y;
553
- //
554
- this.setColorByXY(x, y);
555
- }
538
+ // protected _handleDrag() {
539
+ // if (this._parent.disabled || this._parent.readonly) {
540
+ // return;
541
+ // }
542
+ // const surface = this.getHostElement().querySelector<HTMLDivElement>('.ax-color-box-overlay');
543
+ // const sb = surface.getBoundingClientRect();
544
+ // const pointer = this.getHostElement().querySelector<HTMLDivElement>('.ax-color-box-pointer');
545
+ // const pb = pointer.getBoundingClientRect();
546
+ // const w = pb.width / 2;
547
+ // let x = pb.left - sb.left + w;
548
+ // let y = pb.top - sb.top + w;
549
+ // //
550
+ // x = x < 0 ? 0 : x;
551
+ // x = x > sb.width ? sb.width : x;
552
+ // //
553
+ // y = y < 0 ? 0 : y;
554
+ // y = y > sb.height ? sb.height : y;
555
+ // //
556
+ // this.setColorByXY(x, y);
557
+ // }
556
558
  /**
557
559
  * @ignore
558
560
  */
@@ -618,14 +620,39 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
618
620
  get __hostClass() {
619
621
  return `ax-color-palette-picker`;
620
622
  }
623
+ handleMove(event) {
624
+ if (!this.changingColor())
625
+ return;
626
+ this.placePointer(event);
627
+ }
628
+ handleDown(event) {
629
+ if (this._parent.disabled || this._parent.readonly)
630
+ return;
631
+ this.placePointer(event);
632
+ this.changingColor.set(true);
633
+ }
634
+ handleUp() {
635
+ this.changingColor.set(false);
636
+ }
637
+ placePointer(event) {
638
+ const circleElement = this.circle().nativeElement;
639
+ const parentStats = circleElement.parentElement.getBoundingClientRect();
640
+ const circleHeight = circleElement.offsetHeight / 2;
641
+ const circleWidth = circleElement.offsetWidth / 2;
642
+ const top = event.clientY - parentStats.top - circleHeight;
643
+ const left = event.clientX - parentStats.left - circleWidth;
644
+ circleElement.style.top = `${Math.max(0 - circleHeight, Math.min(top, parentStats.height - circleHeight))}px`;
645
+ circleElement.style.left = `${Math.max(0 - circleWidth, Math.min(left, parentStats.width - circleWidth))}px`;
646
+ this.setColorByXY(event.clientX - parentStats.left, event.clientY - parentStats.top);
647
+ }
621
648
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXColorPalettePickerComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
622
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker", host: { properties: { "class": "this.__hostClass" } }, providers: [
649
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker", host: { properties: { "class": "this.__hostClass" } }, providers: [
623
650
  {
624
651
  provide: AXColorPaletteChildComponent,
625
652
  useExisting: AXColorPalettePickerComponent,
626
653
  },
627
654
  AXUnsubscriber,
628
- ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-color-box-overlay-trans\">\n <div class=\"ax-color-box-overlay\" [style.background-color]=\"_bgColor\">\n <div class=\"ax-color-box-overlay-g1\"></div>\n <div class=\"ax-color-box-overlay-g2\" (click)=\"_handleSurfaceClick($event)\"></div>\n <div\n class=\"ax-color-box-pointer\"\n cdkDrag\n cdkDragBoundary=\".ax-color-box-overlay\"\n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"_handleDrag()\"\n [cdkDragDisabled]=\"_parent.disabled || _parent.readonly\"\n ></div>\n </div>\n</div>\n\n<ax-range-slider\n class=\"ax-color-box-gradient\"\n [min]=\"0\"\n [max]=\"100\"\n [mode]=\"'single'\"\n [ngModel]=\"_gradient\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n (ngModelChange)=\"_handleGradientChanged($event)\"\n>\n</ax-range-slider>\n<ax-range-slider\n class=\"ax-color-box-transparent\"\n [min]=\"0\"\n [max]=\"1\"\n [hasStep]=\"false\"\n [ngModel]=\"_rgba.a\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n (ngModelChange)=\"_handleAlphaChanged($event)\"\n>\n</ax-range-slider>\n", dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
655
+ ], viewQueries: [{ propertyName: "circle", first: true, predicate: ["circle"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-color-box-overlay-trans\">\n <div\n class=\"ax-color-box-overlay\"\n [style.background-color]=\"_bgColor\"\n (mousemove)=\"handleMove($event)\"\n (mousedown)=\"handleDown($event)\"\n (mouseup)=\"handleUp()\"\n (mouseleave)=\"handleUp()\"\n >\n <div class=\"ax-color-box-overlay-g1\"></div>\n <div class=\"ax-color-box-overlay-g2\"></div>\n <div #circle class=\"ax-color-box-pointer\"></div>\n </div>\n</div>\n\n<ax-range-slider\n class=\"ax-color-box-gradient\"\n [min]=\"0\"\n [max]=\"100\"\n [mode]=\"'single'\"\n [ngModel]=\"_gradient\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n (ngModelChange)=\"_handleGradientChanged($event)\"\n>\n</ax-range-slider>\n<ax-range-slider\n class=\"ax-color-box-transparent\"\n [min]=\"0\"\n [max]=\"1\"\n [hasStep]=\"false\"\n [ngModel]=\"_rgba.a\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n (ngModelChange)=\"_handleAlphaChanged($event)\"\n>\n</ax-range-slider>\n", dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
629
656
  }
630
657
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
631
658
  type: Component,
@@ -635,7 +662,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
635
662
  useExisting: AXColorPalettePickerComponent,
636
663
  },
637
664
  AXUnsubscriber,
638
- ], template: "<div class=\"ax-color-box-overlay-trans\">\n <div class=\"ax-color-box-overlay\" [style.background-color]=\"_bgColor\">\n <div class=\"ax-color-box-overlay-g1\"></div>\n <div class=\"ax-color-box-overlay-g2\" (click)=\"_handleSurfaceClick($event)\"></div>\n <div\n class=\"ax-color-box-pointer\"\n cdkDrag\n cdkDragBoundary=\".ax-color-box-overlay\"\n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"_handleDrag()\"\n [cdkDragDisabled]=\"_parent.disabled || _parent.readonly\"\n ></div>\n </div>\n</div>\n\n<ax-range-slider\n class=\"ax-color-box-gradient\"\n [min]=\"0\"\n [max]=\"100\"\n [mode]=\"'single'\"\n [ngModel]=\"_gradient\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n (ngModelChange)=\"_handleGradientChanged($event)\"\n>\n</ax-range-slider>\n<ax-range-slider\n class=\"ax-color-box-transparent\"\n [min]=\"0\"\n [max]=\"1\"\n [hasStep]=\"false\"\n [ngModel]=\"_rgba.a\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n (ngModelChange)=\"_handleAlphaChanged($event)\"\n>\n</ax-range-slider>\n" }]
665
+ ], template: "<div class=\"ax-color-box-overlay-trans\">\n <div\n class=\"ax-color-box-overlay\"\n [style.background-color]=\"_bgColor\"\n (mousemove)=\"handleMove($event)\"\n (mousedown)=\"handleDown($event)\"\n (mouseup)=\"handleUp()\"\n (mouseleave)=\"handleUp()\"\n >\n <div class=\"ax-color-box-overlay-g1\"></div>\n <div class=\"ax-color-box-overlay-g2\"></div>\n <div #circle class=\"ax-color-box-pointer\"></div>\n </div>\n</div>\n\n<ax-range-slider\n class=\"ax-color-box-gradient\"\n [min]=\"0\"\n [max]=\"100\"\n [mode]=\"'single'\"\n [ngModel]=\"_gradient\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n (ngModelChange)=\"_handleGradientChanged($event)\"\n>\n</ax-range-slider>\n<ax-range-slider\n class=\"ax-color-box-transparent\"\n [min]=\"0\"\n [max]=\"1\"\n [hasStep]=\"false\"\n [ngModel]=\"_rgba.a\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n (ngModelChange)=\"_handleAlphaChanged($event)\"\n>\n</ax-range-slider>\n" }]
639
666
  }], ctorParameters: () => [{ type: AXColorPaletteParentComponent, decorators: [{
640
667
  type: Inject,
641
668
  args: [AXColorPaletteParentComponent]