@acorex/components 7.2.6 → 7.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (98) hide show
  1. package/breadcrumbs/lib/breadcrumbs-item.component.d.ts +5 -69
  2. package/button/lib/button-group.component.d.ts +6 -6
  3. package/button/lib/button-item.component.d.ts +6 -6
  4. package/checkbox/lib/checkbox.component.d.ts +14 -9
  5. package/chips/lib/chips.component.d.ts +5 -64
  6. package/collapse/lib/collapse-group.component.d.ts +22 -10
  7. package/collapse/lib/collapse.component.d.ts +13 -7
  8. package/color-palette/lib/color-palette-input.component.d.ts +4 -6
  9. package/color-palette/lib/color-palette-picker.component.d.ts +4 -7
  10. package/color-palette/lib/color-palette-preview.component.d.ts +5 -5
  11. package/color-palette/lib/color-palette-swatches.component.d.ts +6 -7
  12. package/color-palette/lib/color-palette.class.d.ts +1 -1
  13. package/color-palette/lib/color-palette.component.d.ts +13 -7
  14. package/color-picker/lib/color-picker.component.d.ts +21 -18
  15. package/common/lib/components/base-component.class.d.ts +7 -7
  16. package/common/lib/components/value-component.class.d.ts +1 -0
  17. package/decorators/index.d.ts +1 -0
  18. package/decorators/lib/divider.component.d.ts +5 -0
  19. package/esm2022/alert/lib/alert.component.mjs +2 -1
  20. package/esm2022/breadcrumbs/lib/breadcrumbs-item.component.mjs +10 -19
  21. package/esm2022/breadcrumbs/lib/breadcrumbs.component.mjs +2 -2
  22. package/esm2022/calendar/lib/calendar.class.mjs +3 -2
  23. package/esm2022/checkbox/lib/checkbox.component.mjs +27 -19
  24. package/esm2022/chips/lib/chips.component.mjs +6 -9
  25. package/esm2022/collapse/lib/collapse-group.component.mjs +80 -24
  26. package/esm2022/collapse/lib/collapse.component.mjs +28 -15
  27. package/esm2022/color-palette/lib/color-palette-input.component.mjs +11 -11
  28. package/esm2022/color-palette/lib/color-palette-picker.component.mjs +25 -21
  29. package/esm2022/color-palette/lib/color-palette-preview.component.mjs +12 -11
  30. package/esm2022/color-palette/lib/color-palette-swatches.component.mjs +12 -12
  31. package/esm2022/color-palette/lib/color-palette.class.mjs +1 -1
  32. package/esm2022/color-palette/lib/color-palette.component.mjs +26 -37
  33. package/esm2022/color-picker/lib/color-picker.component.mjs +3 -6
  34. package/esm2022/common/lib/components/base-component.class.mjs +5 -4
  35. package/esm2022/common/lib/components/value-component.class.mjs +17 -11
  36. package/esm2022/decorators/index.mjs +2 -1
  37. package/esm2022/decorators/lib/divider.component.mjs +17 -0
  38. package/esm2022/decorators/lib/form-hint.component.mjs +4 -4
  39. package/esm2022/decorators/lib/suffix.component.mjs +1 -1
  40. package/esm2022/form/lib/form-field.component.mjs +2 -2
  41. package/esm2022/form/lib/form.component.mjs +1 -3
  42. package/esm2022/label/lib/label.component.mjs +2 -2
  43. package/esm2022/mixin/lib/value-mixin.class.mjs +4 -1
  44. package/esm2022/range-slider/lib/range-slider.component.mjs +28 -20
  45. package/esm2022/switch/lib/switch.component.mjs +2 -3
  46. package/esm2022/time-box/lib/time-box.component.mjs +2 -4
  47. package/fesm2022/acorex-components-alert.mjs +1 -0
  48. package/fesm2022/acorex-components-alert.mjs.map +1 -1
  49. package/fesm2022/acorex-components-breadcrumbs.mjs +11 -21
  50. package/fesm2022/acorex-components-breadcrumbs.mjs.map +1 -1
  51. package/fesm2022/acorex-components-calendar.mjs +2 -1
  52. package/fesm2022/acorex-components-calendar.mjs.map +1 -1
  53. package/fesm2022/acorex-components-checkbox.mjs +26 -18
  54. package/fesm2022/acorex-components-checkbox.mjs.map +1 -1
  55. package/fesm2022/acorex-components-chips.mjs +6 -9
  56. package/fesm2022/acorex-components-chips.mjs.map +1 -1
  57. package/fesm2022/acorex-components-collapse.mjs +104 -35
  58. package/fesm2022/acorex-components-collapse.mjs.map +1 -1
  59. package/fesm2022/acorex-components-color-palette.mjs +71 -76
  60. package/fesm2022/acorex-components-color-palette.mjs.map +1 -1
  61. package/fesm2022/acorex-components-color-picker.mjs +2 -5
  62. package/fesm2022/acorex-components-color-picker.mjs.map +1 -1
  63. package/fesm2022/acorex-components-common.mjs +20 -13
  64. package/fesm2022/acorex-components-common.mjs.map +1 -1
  65. package/fesm2022/acorex-components-decorators.mjs +18 -3
  66. package/fesm2022/acorex-components-decorators.mjs.map +1 -1
  67. package/fesm2022/acorex-components-form.mjs +2 -4
  68. package/fesm2022/acorex-components-form.mjs.map +1 -1
  69. package/fesm2022/acorex-components-label.mjs +2 -2
  70. package/fesm2022/acorex-components-label.mjs.map +1 -1
  71. package/fesm2022/acorex-components-mixin.mjs +3 -0
  72. package/fesm2022/acorex-components-mixin.mjs.map +1 -1
  73. package/fesm2022/acorex-components-range-slider.mjs +26 -18
  74. package/fesm2022/acorex-components-range-slider.mjs.map +1 -1
  75. package/fesm2022/acorex-components-switch.mjs +1 -2
  76. package/fesm2022/acorex-components-switch.mjs.map +1 -1
  77. package/fesm2022/acorex-components-time-box.mjs +1 -3
  78. package/fesm2022/acorex-components-time-box.mjs.map +1 -1
  79. package/mixin/lib/base-components.class.d.ts +2 -2
  80. package/mixin/lib/base-menu-mixin.class.d.ts +5 -5
  81. package/mixin/lib/button-mixin.class.d.ts +2 -2
  82. package/mixin/lib/clickable-mixin.class.d.ts +2 -2
  83. package/mixin/lib/color-look-mixing.class.d.ts +2 -2
  84. package/mixin/lib/datalist-component.class.d.ts +10 -10
  85. package/mixin/lib/dropdown-mixin.class.d.ts +2 -2
  86. package/mixin/lib/interactive-mixin.class.d.ts +4 -4
  87. package/mixin/lib/loading-mixin.class.d.ts +2 -2
  88. package/mixin/lib/mixin.class.d.ts +62 -61
  89. package/mixin/lib/page-component.class.d.ts +2 -2
  90. package/mixin/lib/selection-component.class.d.ts +2 -2
  91. package/mixin/lib/sizable-mixin.class.d.ts +2 -2
  92. package/mixin/lib/textbox-mixin.class.d.ts +2 -2
  93. package/mixin/lib/value-mixin.class.d.ts +9 -8
  94. package/package.json +8 -8
  95. package/range-slider/lib/range-slider.component.d.ts +16 -9
  96. package/switch/lib/switch.component.d.ts +1 -1
  97. package/tabs/lib/tab-item.component.d.ts +2 -2
  98. package/time-box/lib/time-box.component.d.ts +1 -1
@@ -2,7 +2,7 @@ import { AXColorUtil } from '@acorex/core/utils';
2
2
  import * as i0 from '@angular/core';
3
3
  import { Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Inject, Input, ContentChildren, HostBinding, NgModule } from '@angular/core';
4
4
  import { distinctUntilChanged } from 'rxjs/operators';
5
- import { AXBaseComponent, AXBaseValueComponentMixin } from '@acorex/components/mixin';
5
+ import { MXBaseComponent, MXInteractiveComponent, MXValueComponent } from '@acorex/components/common';
6
6
  import * as i1 from '@angular/common';
7
7
  import { CommonModule } from '@angular/common';
8
8
  import * as i2 from '@acorex/components/textbox';
@@ -14,6 +14,7 @@ import { AXRangeSliderModule } from '@acorex/components/range-slider';
14
14
  import * as i2$1 from '@angular/cdk/drag-drop';
15
15
  import { DragDropModule } from '@angular/cdk/drag-drop';
16
16
  import { Subject } from 'rxjs';
17
+ import { classes } from 'polytype';
17
18
  import { AXLabelModule } from '@acorex/components/label';
18
19
  import { AXButtonModule } from '@acorex/components/button';
19
20
  import { AXDecoratorModule } from '@acorex/components/decorators';
@@ -33,9 +34,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
33
34
  type: Injectable
34
35
  }] });
35
36
 
36
- class AXColorPaletteInputComponent extends AXBaseComponent {
37
- constructor(_elementRef, _cdr, _parent) {
38
- super(_elementRef, _cdr);
37
+ class AXColorPaletteInputComponent extends MXBaseComponent {
38
+ constructor(_parent) {
39
+ super();
39
40
  this._parent = _parent;
40
41
  this._isTouched = false;
41
42
  this.isValid = true;
@@ -76,7 +77,7 @@ class AXColorPaletteInputComponent extends AXBaseComponent {
76
77
  }
77
78
  }
78
79
  this.checkValid();
79
- _cdr.detectChanges();
80
+ this.cdr.detectChanges();
80
81
  });
81
82
  }
82
83
  _handleChangeInputMode() {
@@ -96,7 +97,7 @@ class AXColorPaletteInputComponent extends AXBaseComponent {
96
97
  const { r, g, b, a } = this._rgba;
97
98
  const _color = `rgba(${r},${g},${b},${a})`;
98
99
  if (e.isUserInteraction) {
99
- this._parent._setUserInteraction();
100
+ this._parent.setUserInteraction();
100
101
  this._isTouched = true;
101
102
  }
102
103
  this._parent._onInternalColorChanged$.next({
@@ -109,7 +110,7 @@ class AXColorPaletteInputComponent extends AXBaseComponent {
109
110
  return;
110
111
  //
111
112
  if (e.isUserInteraction) {
112
- this._parent._setUserInteraction();
113
+ this._parent.setUserInteraction();
113
114
  this._isTouched = true;
114
115
  }
115
116
  //
@@ -129,7 +130,7 @@ class AXColorPaletteInputComponent extends AXBaseComponent {
129
130
  checkValid() {
130
131
  this.isValid = AXColorUtil.isValid(this._hex);
131
132
  }
132
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPaletteInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
133
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPaletteInputComponent, deps: [{ token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
133
134
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input", host: { classAttribute: "ax-color-palette-input" }, providers: [
134
135
  {
135
136
  provide: AXColorPaletteChildComponent,
@@ -145,16 +146,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
145
146
  useExisting: AXColorPaletteInputComponent,
146
147
  },
147
148
  ], template: "<ng-container [ngSwitch]=\"this._colorMode\">\n <div class=\"palette-inputs\">\n <ng-container *ngSwitchCase=\"'hex'\">\n <div>\n <ax-text-box\n class=\"ax-sm\"\n [value]=\"_hex\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n [state]=\"isValid ? 'clear' : 'error'\"\n (onValueChanged)=\"_handleHEXAValueChanged($event)\"\n [mask-options]=\"_hexMaskOptions\">\n </ax-text-box>\n <label>HEX</label>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'rgba'\">\n <div>\n <ax-number-box\n class=\"ax-sm\"\n [minValue]=\"0\"\n [maxValue]=\"255\"\n [(value)]=\"_rgba.r\"\n [showSpinButtons]=\"false\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n </ax-number-box>\n <label>R</label>\n </div>\n <div>\n <ax-number-box\n class=\"ax-sm\"\n [minValue]=\"0\"\n [maxValue]=\"255\"\n [(value)]=\"_rgba.g\"\n [showSpinButtons]=\"false\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n </ax-number-box>\n <label>G</label>\n </div>\n <div>\n <ax-number-box\n class=\"ax-sm\"\n [minValue]=\"0\"\n [maxValue]=\"255\"\n [(value)]=\"_rgba.b\"\n [showSpinButtons]=\"false\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n </ax-number-box>\n <label>B</label>\n </div>\n <div>\n <ax-number-box\n class=\"ax-sm\"\n [minValue]=\"0\"\n [maxValue]=\"1\"\n [(value)]=\"_rgba.a\"\n [decimals]=\"2\"\n [step]=\"0.1\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n [showSpinButtons]=\"false\"\n (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n </ax-number-box>\n <label>A</label>\n </div>\n </ng-container>\n </div>\n <button\n class=\"ax-general-button ax-button-rounded ax-button-icon ax-sm\"\n (click)=\"_handleChangeInputMode()\"\n [disabled]=\"_parent.disabled\">\n <span class=\"ax-icon ax-icon-unfold-more\"></span>\n </button>\n</ng-container>\n" }]
148
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorComponent, decorators: [{
149
+ }], ctorParameters: function () { return [{ type: AXColorComponent, decorators: [{
149
150
  type: Optional
150
151
  }, {
151
152
  type: Inject,
152
153
  args: [AXColorComponent]
153
154
  }] }]; } });
154
155
 
155
- class AXColorPalettePickerComponent extends AXBaseComponent {
156
- constructor(_elementRef, _cdr, _parent) {
157
- super(_elementRef, _cdr);
156
+ class AXColorPalettePickerComponent extends MXBaseComponent {
157
+ constructor(_parent) {
158
+ super();
158
159
  this._parent = _parent;
159
160
  this._rgba = {
160
161
  r: 0,
@@ -191,7 +192,7 @@ class AXColorPalettePickerComponent extends AXBaseComponent {
191
192
  }
192
193
  }
193
194
  this.setHSV();
194
- _cdr.detectChanges();
195
+ this.cdr.detectChanges();
195
196
  });
196
197
  }
197
198
  setHSV() {
@@ -203,7 +204,7 @@ class AXColorPalettePickerComponent extends AXBaseComponent {
203
204
  if (e.value != null && e.value != this._rgba.a) {
204
205
  const { r, g, b } = this._rgba;
205
206
  const _color = `rgba(${r},${g},${b},${e.value})`;
206
- this._parent._setUserInteraction();
207
+ this._parent.setUserInteraction();
207
208
  this._parent._onInternalColorChanged$.next({
208
209
  color: AXColorUtil.toString(_color, 'rgba'),
209
210
  sender: this,
@@ -216,7 +217,7 @@ class AXColorPalettePickerComponent extends AXBaseComponent {
216
217
  const colors = gradient.rgb(100);
217
218
  const { s, v } = AXColorUtil.to(this._rgba, "hsva");
218
219
  const { h } = colors[e.value].toHsv();
219
- this._parent._setUserInteraction();
220
+ this._parent.setUserInteraction();
220
221
  this._parent._onInternalColorChanged$.next({
221
222
  color: AXColorUtil.toString({ h, s, v, a: this._rgba.a }, 'rgba'),
222
223
  sender: this,
@@ -224,18 +225,23 @@ class AXColorPalettePickerComponent extends AXBaseComponent {
224
225
  }
225
226
  }
226
227
  _handleSurfaceClick(e) {
227
- const surface = this._getHostElement().querySelector(".ax-color-picker-overlay");
228
+ if (this._parent.disabled || this._parent.readonly) {
229
+ e.preventDefault();
230
+ e.stopPropagation();
231
+ return;
232
+ }
233
+ const surface = this.getHostElement().querySelector(".ax-color-picker-overlay");
228
234
  const sb = surface.getBoundingClientRect();
229
- const pointer = this._getHostElement().querySelector(".ax-color-picker-pointer");
235
+ const pointer = this.getHostElement().querySelector(".ax-color-picker-pointer");
230
236
  const pb = pointer.getBoundingClientRect();
231
237
  let x = e.offsetX;
232
238
  let y = e.offsetY;
233
239
  this.setColorByXY(x, y);
234
240
  }
235
241
  _handleDrag() {
236
- const surface = this._getHostElement().querySelector(".ax-color-picker-overlay");
242
+ const surface = this.getHostElement().querySelector(".ax-color-picker-overlay");
237
243
  const sb = surface.getBoundingClientRect();
238
- const pointer = this._getHostElement().querySelector(".ax-color-picker-pointer");
244
+ const pointer = this.getHostElement().querySelector(".ax-color-picker-pointer");
239
245
  const pb = pointer.getBoundingClientRect();
240
246
  const w = (pb.width / 2);
241
247
  let x = (pb.left - sb.left) + w;
@@ -250,7 +256,7 @@ class AXColorPalettePickerComponent extends AXBaseComponent {
250
256
  this.setColorByXY(x, y);
251
257
  }
252
258
  setColorByXY(x, y) {
253
- const surface = this._getHostElement().querySelector(".ax-color-picker-overlay");
259
+ const surface = this.getHostElement().querySelector(".ax-color-picker-overlay");
254
260
  const sb = surface.getBoundingClientRect();
255
261
  //
256
262
  const { h } = AXColorUtil.to(this._bgColor, "hsva");
@@ -265,9 +271,9 @@ class AXColorPalettePickerComponent extends AXBaseComponent {
265
271
  });
266
272
  }
267
273
  setPointerByPercent(x, y) {
268
- const surface = this._getHostElement().querySelector(".ax-color-picker-overlay");
274
+ const surface = this.getHostElement().querySelector(".ax-color-picker-overlay");
269
275
  const sb = surface.getBoundingClientRect();
270
- const pointer = this._getHostElement().querySelector(".ax-color-picker-pointer");
276
+ const pointer = this.getHostElement().querySelector(".ax-color-picker-pointer");
271
277
  const pb = pointer.getBoundingClientRect();
272
278
  const w = (pb.width / 2);
273
279
  const width = sb.width; //+ pb.width
@@ -277,13 +283,13 @@ class AXColorPalettePickerComponent extends AXBaseComponent {
277
283
  y: (height - (((y * height)) / 100)) - w
278
284
  };
279
285
  }
280
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPalettePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
286
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPalettePickerComponent, deps: [{ token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
281
287
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker", host: { classAttribute: "ax-color-palette-picker" }, providers: [
282
288
  {
283
289
  provide: AXColorPaletteChildComponent,
284
290
  useExisting: AXColorPalettePickerComponent,
285
291
  },
286
- ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-color-picker-overlay-trans\">\n <div class=\"ax-color-picker-overlay\" [style.background-color]=\"_bgColor\">\n <div class=\"ax-color-picker-overlay-g1\"></div>\n <div class=\"ax-color-picker-overlay-g2\" (click)=\"_handleSurfaceClick($event)\"></div>\n <div class=\"ax-color-picker-pointer\" cdkDrag cdkDragBoundary=\".ax-color-picker-overlay\" [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"_handleDrag()\"></div>\n </div>\n</div>\n<ax-range-slider class=\"ax-color-picker-gradient\" [minValue]=\"0\" [maxValue]=\"99\" [step]=\"1\" [value]=\"_gradient\" \n (onValueChanged)=\"_handleGradientChanged($event)\">\n</ax-range-slider>\n<ax-range-slider class=\"ax-color-picker-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" [value]=\"_rgba.a\"\n (onValueChanged)=\"_handleAlphaChanged($event)\">\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 }); }
292
+ ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-color-picker-overlay-trans\">\n <div class=\"ax-color-picker-overlay\" [style.background-color]=\"_bgColor\">\n <div class=\"ax-color-picker-overlay-g1\"></div>\n <div class=\"ax-color-picker-overlay-g2\" (click)=\"_handleSurfaceClick($event)\"></div>\n <div class=\"ax-color-picker-pointer\" cdkDrag cdkDragBoundary=\".ax-color-picker-overlay\" [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"_handleDrag()\" \n [cdkDragDisabled]=\"_parent.disabled || _parent.readonly\">\n\n </div>\n </div>\n</div>\n<ax-range-slider class=\"ax-color-picker-gradient\" [minValue]=\"0\" [maxValue]=\"99\" [step]=\"1\" [value]=\"_gradient\" \n (onValueChanged)=\"_handleGradientChanged($event)\" \n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\">\n</ax-range-slider>\n<ax-range-slider class=\"ax-color-picker-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" [value]=\"_rgba.a\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n (onValueChanged)=\"_handleAlphaChanged($event)\">\n</ax-range-slider>", dependencies: [{ kind: "component", type: i1$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["readonly", "disabled", "value", "name", "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 }); }
287
293
  }
288
294
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
289
295
  type: Component,
@@ -292,32 +298,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
292
298
  provide: AXColorPaletteChildComponent,
293
299
  useExisting: AXColorPalettePickerComponent,
294
300
  },
295
- ], template: "<div class=\"ax-color-picker-overlay-trans\">\n <div class=\"ax-color-picker-overlay\" [style.background-color]=\"_bgColor\">\n <div class=\"ax-color-picker-overlay-g1\"></div>\n <div class=\"ax-color-picker-overlay-g2\" (click)=\"_handleSurfaceClick($event)\"></div>\n <div class=\"ax-color-picker-pointer\" cdkDrag cdkDragBoundary=\".ax-color-picker-overlay\" [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"_handleDrag()\"></div>\n </div>\n</div>\n<ax-range-slider class=\"ax-color-picker-gradient\" [minValue]=\"0\" [maxValue]=\"99\" [step]=\"1\" [value]=\"_gradient\" \n (onValueChanged)=\"_handleGradientChanged($event)\">\n</ax-range-slider>\n<ax-range-slider class=\"ax-color-picker-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" [value]=\"_rgba.a\"\n (onValueChanged)=\"_handleAlphaChanged($event)\">\n</ax-range-slider>" }]
296
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorComponent, decorators: [{
301
+ ], template: "<div class=\"ax-color-picker-overlay-trans\">\n <div class=\"ax-color-picker-overlay\" [style.background-color]=\"_bgColor\">\n <div class=\"ax-color-picker-overlay-g1\"></div>\n <div class=\"ax-color-picker-overlay-g2\" (click)=\"_handleSurfaceClick($event)\"></div>\n <div class=\"ax-color-picker-pointer\" cdkDrag cdkDragBoundary=\".ax-color-picker-overlay\" [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"_handleDrag()\" \n [cdkDragDisabled]=\"_parent.disabled || _parent.readonly\">\n\n </div>\n </div>\n</div>\n<ax-range-slider class=\"ax-color-picker-gradient\" [minValue]=\"0\" [maxValue]=\"99\" [step]=\"1\" [value]=\"_gradient\" \n (onValueChanged)=\"_handleGradientChanged($event)\" \n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\">\n</ax-range-slider>\n<ax-range-slider class=\"ax-color-picker-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" [value]=\"_rgba.a\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n (onValueChanged)=\"_handleAlphaChanged($event)\">\n</ax-range-slider>" }]
302
+ }], ctorParameters: function () { return [{ type: AXColorComponent, decorators: [{
297
303
  type: Optional
298
304
  }, {
299
305
  type: Inject,
300
306
  args: [AXColorComponent]
301
307
  }] }]; } });
302
308
 
303
- class AXColorPalettePreviewComponent extends AXBaseComponent {
304
- constructor(_elementRef, _cdr, _parent, _zone) {
305
- super(_elementRef, _cdr);
309
+ class AXColorPalettePreviewComponent extends MXBaseComponent {
310
+ constructor(_parent, _zone) {
311
+ super();
306
312
  this._parent = _parent;
307
313
  this._zone = _zone;
308
314
  _parent._onInternalColorChanged$
309
315
  .pipe(distinctUntilChanged())
310
316
  .subscribe((e) => {
311
317
  _zone.runOutsideAngular(() => {
312
- this._getInnerElement().style.backgroundColor = e.color;
313
- this._getInnerElement().innerText = AXColorUtil.toString(e.color);
318
+ const inner = this.getHostElement().firstElementChild;
319
+ inner.style.backgroundColor = e.color;
320
+ inner.innerText = AXColorUtil.toString(e.color);
314
321
  const color = AXColorUtil.toString(e.color, 'hex');
315
322
  const ratio = AXColorUtil.contrastToWhite(color);
316
- this._getHostElement().style.color = !(ratio > 2.0) ? '#000' : '#fff';
323
+ this.getHostElement().style.color = !(ratio > 2.0) ? '#000' : '#fff';
317
324
  });
318
325
  });
319
326
  }
320
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPalettePreviewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
327
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPalettePreviewComponent, deps: [{ token: AXColorComponent, optional: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
321
328
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview", host: { classAttribute: "ax-color-palette-preview" }, providers: [
322
329
  {
323
330
  provide: AXColorPaletteChildComponent,
@@ -346,16 +353,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
346
353
  },
347
354
  ],
348
355
  }]
349
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorComponent, decorators: [{
356
+ }], ctorParameters: function () { return [{ type: AXColorComponent, decorators: [{
350
357
  type: Optional
351
358
  }, {
352
359
  type: Inject,
353
360
  args: [AXColorComponent]
354
361
  }] }, { type: i0.NgZone }]; } });
355
362
 
356
- class AXColorPaletteSwatchesComponent extends AXBaseComponent {
357
- constructor(_elementRef, _cdr, _parent) {
358
- super(_elementRef, _cdr);
363
+ class AXColorPaletteSwatchesComponent extends MXBaseComponent {
364
+ constructor(_parent) {
365
+ super();
359
366
  this._parent = _parent;
360
367
  this.colors = [];
361
368
  this._defaultPalette = [
@@ -581,11 +588,11 @@ class AXColorPaletteSwatchesComponent extends AXBaseComponent {
581
588
  ];
582
589
  _parent?._onInternalColorChanged$.pipe(distinctUntilChanged()).subscribe((e) => {
583
590
  this._selected = AXColorUtil.toString(e.color, 'hex').toLowerCase();
584
- this._cdr.detectChanges();
591
+ this.cdr.detectChanges();
585
592
  });
586
593
  }
587
- onInit() {
588
- const isFav = this._getHostElement().tagName.toLowerCase() == 'ax-color-palette-favorite';
594
+ ngOnInit() {
595
+ const isFav = this.getHostElement().tagName.toLowerCase() == 'ax-color-palette-favorite';
589
596
  if (!isFav && this.colors.length == 0) {
590
597
  this.colors = this._defaultPalette.map((c) => this._format(c));
591
598
  }
@@ -593,7 +600,7 @@ class AXColorPaletteSwatchesComponent extends AXBaseComponent {
593
600
  _handleClick(e, color) {
594
601
  if (this._parent.disabled || this._parent.readonly)
595
602
  return;
596
- this._parent._setUserInteraction();
603
+ this._parent.setUserInteraction();
597
604
  this._parent._onInternalColorChanged$.next({
598
605
  color: color.code,
599
606
  sender: this,
@@ -604,7 +611,7 @@ class AXColorPaletteSwatchesComponent extends AXBaseComponent {
604
611
  code: color.code.toLowerCase(),
605
612
  };
606
613
  }
607
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPaletteSwatchesComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
614
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPaletteSwatchesComponent, deps: [{ token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
608
615
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: { colors: "colors" }, providers: [
609
616
  {
610
617
  provide: AXColorPaletteChildComponent,
@@ -638,7 +645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
638
645
  },
639
646
  ],
640
647
  }]
641
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorComponent, decorators: [{
648
+ }], ctorParameters: function () { return [{ type: AXColorComponent, decorators: [{
642
649
  type: Optional
643
650
  }, {
644
651
  type: Inject,
@@ -647,63 +654,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
647
654
  type: Input
648
655
  }] } });
649
656
 
650
- class AXColorPalleteComponent extends AXBaseValueComponentMixin {
651
- _onValueChanged(oldValue, newValue) {
652
- super._onValueChanged(oldValue, newValue);
653
- this._onInternalColorChanged$.next({
654
- color: this.value,
655
- mode: newValue?.startsWith('#') ? "hex" : "rgba",
656
- sender: this
657
- });
658
- }
657
+ class AXColorPalleteComponent extends classes(MXInteractiveComponent, (MXValueComponent)) {
659
658
  ngAfterContentInit() {
660
659
  this._children.changes.subscribe(() => {
661
660
  this._onInternalColorChanged$.next({
662
661
  color: this.value,
663
- sender: this
662
+ sender: this,
664
663
  });
665
664
  });
666
665
  }
667
- onViewInit() {
666
+ ngAfterViewInit() {
668
667
  this._onInternalColorChanged$.next({
669
668
  color: this.value,
670
- sender: this
669
+ sender: this,
671
670
  });
672
671
  }
673
- constructor(elementRef, cdr) {
674
- super(elementRef, cdr);
672
+ constructor() {
673
+ super();
675
674
  this._onInternalColorChanged$ = new Subject();
676
675
  //
677
- this._onInternalColorChanged$.pipe(distinctUntilChanged()).subscribe(e => {
676
+ this._onInternalColorChanged$.pipe(distinctUntilChanged()).subscribe((e) => {
678
677
  if (this.disabled || this.readonly)
679
678
  return;
680
679
  this.value = e.color;
681
- cdr.markForCheck();
680
+ this.cdr.markForCheck();
681
+ });
682
+ //
683
+ this.onValueChanged.subscribe(this._handleOnValueChanged.bind(this));
684
+ }
685
+ _handleOnValueChanged(e) {
686
+ this._onInternalColorChanged$.next({
687
+ color: this.value,
688
+ mode: e.value?.startsWith('#') ? 'hex' : 'rgba',
689
+ sender: this,
682
690
  });
683
691
  }
684
692
  get __hostDisabled() {
685
693
  return this.disabled;
686
694
  }
687
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPalleteComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
688
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", 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: [
689
- { provide: AXColorComponent, useExisting: AXColorPalleteComponent },
690
- ], queries: [{ propertyName: "_children", predicate: AXColorPaletteChildComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select='ax-header'></ng-content>\n\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\n\n<ng-template #custom>\n <ng-content select='ax-color-palette-preview'></ng-content>\n <ng-content select='ax-color-palette-picker'></ng-content>\n <ng-content select='ax-color-palette-swatches'></ng-content>\n <ng-content select='ax-color-palette-favorite'></ng-content>\n <ng-content select='ax-color-palette-input'></ng-content>\n</ng-template>\n<ng-template #default>\n <ax-color-palette-preview></ax-color-palette-preview>\n <ax-color-palette-swatches></ax-color-palette-swatches>\n <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n\n<ng-content select='ax-footer'></ng-content>\n\n\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgba(var(--ax-color-surface));border-color:rgba(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:rgba(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 rgba(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-border-default))}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 rgba(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 }); }
695
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPalleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
696
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", 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>\n\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\n\n<ng-template #custom>\n <ng-content select='ax-color-palette-preview'></ng-content>\n <ng-content select='ax-color-palette-picker'></ng-content>\n <ng-content select='ax-color-palette-swatches'></ng-content>\n <ng-content select='ax-color-palette-favorite'></ng-content>\n <ng-content select='ax-color-palette-input'></ng-content>\n</ng-template>\n<ng-template #default>\n <ax-color-palette-preview></ax-color-palette-preview>\n <ax-color-palette-swatches></ax-color-palette-swatches>\n <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n\n<ng-content select='ax-footer'></ng-content>\n\n\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgba(var(--ax-color-surface));border-color:rgba(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:rgba(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 rgba(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-border-default))}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 rgba(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 }); }
691
697
  }
692
698
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPalleteComponent, decorators: [{
693
699
  type: Component,
694
- args: [{ selector: 'ax-color-palette', inputs: [
695
- 'disabled',
696
- 'tabIndex',
697
- 'readonly',
698
- 'allowNull',
699
- 'value',
700
- 'state',
701
- 'name',
702
- 'checked',
703
- ], outputs: ['onBlur', 'onFocus', 'valueChange', 'stateChange', 'onValueChanged'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
704
- { provide: AXColorComponent, useExisting: AXColorPalleteComponent },
705
- ], template: "<ng-content select='ax-header'></ng-content>\n\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\n\n<ng-template #custom>\n <ng-content select='ax-color-palette-preview'></ng-content>\n <ng-content select='ax-color-palette-picker'></ng-content>\n <ng-content select='ax-color-palette-swatches'></ng-content>\n <ng-content select='ax-color-palette-favorite'></ng-content>\n <ng-content select='ax-color-palette-input'></ng-content>\n</ng-template>\n<ng-template #default>\n <ax-color-palette-preview></ax-color-palette-preview>\n <ax-color-palette-swatches></ax-color-palette-swatches>\n <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n\n<ng-content select='ax-footer'></ng-content>\n\n\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgba(var(--ax-color-surface));border-color:rgba(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:rgba(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 rgba(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-border-default))}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 rgba(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"] }]
706
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _children: [{
700
+ args: [{ selector: 'ax-color-palette', inputs: ['disabled', 'tabIndex', 'readonly', 'value', 'state', 'name', 'checked'], 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>\n\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\n\n<ng-template #custom>\n <ng-content select='ax-color-palette-preview'></ng-content>\n <ng-content select='ax-color-palette-picker'></ng-content>\n <ng-content select='ax-color-palette-swatches'></ng-content>\n <ng-content select='ax-color-palette-favorite'></ng-content>\n <ng-content select='ax-color-palette-input'></ng-content>\n</ng-template>\n<ng-template #default>\n <ax-color-palette-preview></ax-color-palette-preview>\n <ax-color-palette-swatches></ax-color-palette-swatches>\n <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n\n<ng-content select='ax-footer'></ng-content>\n\n\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgba(var(--ax-color-surface));border-color:rgba(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:rgba(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 rgba(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-border-default))}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 rgba(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"] }]
701
+ }], ctorParameters: function () { return []; }, propDecorators: { _children: [{
707
702
  type: ContentChildren,
708
703
  args: [AXColorPaletteChildComponent]
709
704
  }], __hostDisabled: [{