@acorex/components 7.2.7 → 7.2.8

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 (275) hide show
  1. package/alert/lib/alert.component.d.ts +2 -1
  2. package/button/lib/button-group.component.d.ts +6 -6
  3. package/button/lib/button-item.component.d.ts +6 -6
  4. package/calendar/lib/calendar.component.d.ts +1 -0
  5. package/checkbox/lib/checkbox.component.d.ts +4 -3
  6. package/chips/lib/chips.component.d.ts +2 -2
  7. package/color-palette/lib/color-palette-input.component.d.ts +9 -6
  8. package/color-palette/lib/color-palette-picker.component.d.ts +10 -5
  9. package/color-palette/lib/color-palette-preview.component.d.ts +8 -4
  10. package/color-palette/lib/color-palette-swatches.component.d.ts +9 -6
  11. package/color-palette/lib/color-palette.class.d.ts +12 -6
  12. package/color-palette/lib/color-palette.component.d.ts +3 -15
  13. package/color-palette/lib/color-palette.module.d.ts +9 -8
  14. package/color-picker/lib/color-picker.component.d.ts +16 -16
  15. package/common/index.d.ts +1 -0
  16. package/common/lib/classes/components.class.d.ts +2 -1
  17. package/common/lib/components/base-component.class.d.ts +4 -2
  18. package/common/lib/components/input-base-value-component.class.d.ts +26 -0
  19. package/common/lib/components/interactive-component.class.d.ts +7 -0
  20. package/common/lib/components/value-component.class.d.ts +15 -8
  21. package/drawer/lib/drawer.component.d.ts +1 -1
  22. package/esm2022/acorex-components.mjs +1 -1
  23. package/esm2022/action-sheet/lib/action-sheet.component.mjs +3 -3
  24. package/esm2022/action-sheet/lib/action-sheet.module.mjs +4 -4
  25. package/esm2022/action-sheet/lib/action-sheet.service.mjs +3 -3
  26. package/esm2022/alert/lib/alert.component.mjs +12 -11
  27. package/esm2022/alert/lib/alert.module.mjs +4 -4
  28. package/esm2022/avatar/lib/avatar-group.component.mjs +3 -3
  29. package/esm2022/avatar/lib/avatar.component.mjs +3 -3
  30. package/esm2022/avatar/lib/avatar.module.mjs +4 -4
  31. package/esm2022/badge/lib/badge.component.mjs +5 -5
  32. package/esm2022/badge/lib/badge.module.mjs +4 -4
  33. package/esm2022/breadcrumbs/lib/breadcrumbs-item.component.mjs +3 -3
  34. package/esm2022/breadcrumbs/lib/breadcrumbs.component.mjs +3 -3
  35. package/esm2022/breadcrumbs/lib/breadcrumbs.module.mjs +4 -4
  36. package/esm2022/button/lib/button-group.component.mjs +3 -3
  37. package/esm2022/button/lib/button-item.component.mjs +3 -3
  38. package/esm2022/button/lib/button.component.mjs +3 -3
  39. package/esm2022/button/lib/button.module.mjs +4 -4
  40. package/esm2022/calendar/lib/calendar-range.component.mjs +3 -3
  41. package/esm2022/calendar/lib/calendar.class.mjs +3 -3
  42. package/esm2022/calendar/lib/calendar.component.mjs +15 -14
  43. package/esm2022/calendar/lib/calendar.module.mjs +4 -4
  44. package/esm2022/checkbox/lib/checkbox.component.mjs +28 -12
  45. package/esm2022/checkbox/lib/checkbox.module.mjs +4 -4
  46. package/esm2022/chips/lib/chips.component.mjs +7 -6
  47. package/esm2022/chips/lib/chips.module.mjs +4 -4
  48. package/esm2022/collapse/lib/collapse-group.component.mjs +3 -3
  49. package/esm2022/collapse/lib/collapse.component.mjs +3 -3
  50. package/esm2022/collapse/lib/collapse.module.mjs +4 -4
  51. package/esm2022/color-palette/lib/color-palette-input.component.mjs +56 -71
  52. package/esm2022/color-palette/lib/color-palette-picker.component.mjs +63 -58
  53. package/esm2022/color-palette/lib/color-palette-preview.component.mjs +30 -25
  54. package/esm2022/color-palette/lib/color-palette-swatches.component.mjs +32 -246
  55. package/esm2022/color-palette/lib/color-palette.class.mjs +229 -8
  56. package/esm2022/color-palette/lib/color-palette.component.mjs +32 -47
  57. package/esm2022/color-palette/lib/color-palette.module.mjs +9 -6
  58. package/esm2022/color-picker/lib/color-picker.component.mjs +3 -3
  59. package/esm2022/color-picker/lib/color-picker.module.mjs +4 -4
  60. package/esm2022/common/index.mjs +2 -1
  61. package/esm2022/common/lib/classes/components.class.mjs +19 -19
  62. package/esm2022/common/lib/common.module.mjs +4 -4
  63. package/esm2022/common/lib/components/base-component.class.mjs +9 -6
  64. package/esm2022/common/lib/components/input-base-value-component.class.mjs +47 -0
  65. package/esm2022/common/lib/components/interactive-component.class.mjs +31 -4
  66. package/esm2022/common/lib/components/value-component.class.mjs +47 -31
  67. package/esm2022/common/lib/directives/auto-focus.directive.mjs +3 -3
  68. package/esm2022/common/lib/directives/debounce-time.directive.mjs +3 -3
  69. package/esm2022/common/lib/directives/hotkey.directive.mjs +3 -3
  70. package/esm2022/common/lib/directives/infinite-scroll.directive.mjs +3 -3
  71. package/esm2022/common/lib/directives/responsive.directive.mjs +3 -3
  72. package/esm2022/common/lib/services/custom-cdk-overlay.service.mjs +6 -6
  73. package/esm2022/common/lib/services/hotkey.service.mjs +3 -3
  74. package/esm2022/common/lib/services/overlay.service.mjs +3 -3
  75. package/esm2022/context-menu/lib/context-menu.component.mjs +3 -3
  76. package/esm2022/context-menu/lib/context-menu.module.mjs +4 -4
  77. package/esm2022/data-pager/lib/data-pager-base.component.mjs +6 -6
  78. package/esm2022/data-pager/lib/data-pager-info.component.mjs +3 -3
  79. package/esm2022/data-pager/lib/data-pager-input-selector.component.mjs +3 -3
  80. package/esm2022/data-pager/lib/data-pager-next-buttons.components.mjs +3 -3
  81. package/esm2022/data-pager/lib/data-pager-numeric-selector.component.mjs +3 -3
  82. package/esm2022/data-pager/lib/data-pager-pagesize-dropdown.component.mjs +3 -3
  83. package/esm2022/data-pager/lib/data-pager-prev-buttons.component.mjs +3 -3
  84. package/esm2022/data-pager/lib/data-pager.component.mjs +3 -3
  85. package/esm2022/data-pager/lib/data-pager.module.mjs +4 -4
  86. package/esm2022/data-table/lib/data-column-cell-template.directive.mjs +3 -3
  87. package/esm2022/data-table/lib/data-column.directive.mjs +3 -3
  88. package/esm2022/data-table/lib/data-table.component.mjs +3 -3
  89. package/esm2022/data-table/lib/data-table.module.mjs +4 -4
  90. package/esm2022/date-picker/lib/datepicker.component.mjs +3 -3
  91. package/esm2022/date-picker/lib/datepicker.module.mjs +4 -4
  92. package/esm2022/decorators/lib/close-button.component.mjs +3 -3
  93. package/esm2022/decorators/lib/content.component.mjs +3 -3
  94. package/esm2022/decorators/lib/decorators.module.mjs +4 -4
  95. package/esm2022/decorators/lib/divider.component.mjs +3 -3
  96. package/esm2022/decorators/lib/footer.component.mjs +3 -3
  97. package/esm2022/decorators/lib/form-hint.component.mjs +3 -3
  98. package/esm2022/decorators/lib/header.component.mjs +3 -3
  99. package/esm2022/decorators/lib/icon.component.mjs +3 -3
  100. package/esm2022/decorators/lib/overlay.component.mjs +3 -3
  101. package/esm2022/decorators/lib/placeholder.component.mjs +3 -3
  102. package/esm2022/decorators/lib/prefix.component.mjs +3 -3
  103. package/esm2022/decorators/lib/sub-title.component.mjs +3 -3
  104. package/esm2022/decorators/lib/suffix.component.mjs +3 -3
  105. package/esm2022/decorators/lib/text.component.mjs +3 -3
  106. package/esm2022/decorators/lib/title.component.mjs +3 -3
  107. package/esm2022/dialog/lib/dialog.component.mjs +3 -3
  108. package/esm2022/dialog/lib/dialog.module.mjs +4 -4
  109. package/esm2022/dialog/lib/dialog.service.mjs +3 -3
  110. package/esm2022/drawer/lib/drawer-container.component.mjs +3 -3
  111. package/esm2022/drawer/lib/drawer.component.mjs +6 -5
  112. package/esm2022/drawer/lib/drawer.module.mjs +4 -4
  113. package/esm2022/dropdown/lib/dropdown-panel.component.mjs +3 -3
  114. package/esm2022/dropdown/lib/dropdown.module.mjs +4 -4
  115. package/esm2022/form/lib/form-field.component.mjs +3 -3
  116. package/esm2022/form/lib/form.component.mjs +3 -3
  117. package/esm2022/form/lib/form.module.mjs +4 -4
  118. package/esm2022/form/lib/validation-rule.widget.mjs +3 -3
  119. package/esm2022/form/lib/validation-summary.component.mjs +3 -3
  120. package/esm2022/image/lib/image.component.mjs +3 -3
  121. package/esm2022/image/lib/image.module.mjs +4 -4
  122. package/esm2022/index.mjs +1 -1
  123. package/esm2022/label/lib/label.component.mjs +3 -3
  124. package/esm2022/label/lib/label.module.mjs +4 -4
  125. package/esm2022/loading/lib/loading-spinner.component.mjs +3 -3
  126. package/esm2022/loading/lib/loading.component.mjs +3 -3
  127. package/esm2022/loading/lib/loading.directive.mjs +3 -3
  128. package/esm2022/loading/lib/loading.module.mjs +4 -4
  129. package/esm2022/loading/lib/loading.service.mjs +3 -3
  130. package/esm2022/menu/lib/menu.component.mjs +3 -3
  131. package/esm2022/menu/lib/menu.module.mjs +4 -4
  132. package/esm2022/mixin/lib/base-components.class.mjs +3 -3
  133. package/esm2022/mixin/lib/base-menu-mixin.class.mjs +3 -3
  134. package/esm2022/notification/lib/notification.component.mjs +3 -3
  135. package/esm2022/notification/lib/notification.module.mjs +4 -4
  136. package/esm2022/notification/lib/notification.service.mjs +3 -3
  137. package/esm2022/number-box/lib/number-box.component.mjs +3 -3
  138. package/esm2022/number-box/lib/number-box.module.mjs +4 -4
  139. package/esm2022/otp/lib/otp.component.mjs +3 -3
  140. package/esm2022/otp/lib/otp.module.mjs +4 -4
  141. package/esm2022/page/lib/base-page.class.mjs +3 -3
  142. package/esm2022/page/lib/page.component.mjs +3 -3
  143. package/esm2022/page/lib/page.module.mjs +4 -4
  144. package/esm2022/password-box/lib/password-box.component.mjs +3 -3
  145. package/esm2022/password-box/lib/password-box.module.mjs +4 -4
  146. package/esm2022/popover/lib/dropdown-component.class.mjs +3 -3
  147. package/esm2022/popover/lib/popover.component.mjs +3 -3
  148. package/esm2022/popover/lib/popover.module.mjs +4 -4
  149. package/esm2022/popup/lib/popup.component.mjs +3 -3
  150. package/esm2022/popup/lib/popup.module.mjs +4 -4
  151. package/esm2022/popup/lib/popup.service.mjs +3 -3
  152. package/esm2022/progress-bar/lib/progress-bar.component.mjs +3 -3
  153. package/esm2022/progress-bar/lib/progress-bar.module.mjs +4 -4
  154. package/esm2022/radio/lib/radio.component.mjs +3 -3
  155. package/esm2022/radio/lib/radio.module.mjs +4 -4
  156. package/esm2022/range-slider/lib/range-slider.component.mjs +27 -22
  157. package/esm2022/range-slider/lib/range-slider.module.mjs +7 -6
  158. package/esm2022/result/lib/result.component.mjs +3 -3
  159. package/esm2022/result/lib/result.module.mjs +4 -4
  160. package/esm2022/search-box/lib/search-box.component.mjs +3 -3
  161. package/esm2022/search-box/lib/search-box.module.mjs +4 -4
  162. package/esm2022/select-box/lib/select-box.component.mjs +3 -3
  163. package/esm2022/select-box/lib/select-box.module.mjs +4 -4
  164. package/esm2022/selection-list/lib/selection-list.component.mjs +3 -3
  165. package/esm2022/selection-list/lib/selection-list.module.mjs +4 -4
  166. package/esm2022/switch/lib/switch-content.component.mjs +3 -3
  167. package/esm2022/switch/lib/switch.component.mjs +27 -24
  168. package/esm2022/switch/lib/switch.module.mjs +4 -4
  169. package/esm2022/tabs/lib/tab-content.directive.mjs +3 -3
  170. package/esm2022/tabs/lib/tab-item.component.mjs +3 -3
  171. package/esm2022/tabs/lib/tabs.component.mjs +3 -3
  172. package/esm2022/tabs/lib/tabs.module.mjs +4 -4
  173. package/esm2022/tag/lib/tag.component.mjs +3 -3
  174. package/esm2022/tag/lib/tag.module.mjs +4 -4
  175. package/esm2022/textarea/lib/textarea.component.mjs +3 -3
  176. package/esm2022/textarea/lib/textarea.module.mjs +4 -4
  177. package/esm2022/textbox/lib/mask-options.directive.mjs +3 -3
  178. package/esm2022/textbox/lib/textbox.component.mjs +39 -21
  179. package/esm2022/textbox/lib/textbox.module.mjs +4 -4
  180. package/esm2022/time-box/lib/time-box.component.mjs +3 -3
  181. package/esm2022/time-box/lib/time-box.module.mjs +4 -4
  182. package/esm2022/toast/lib/toast.component.mjs +3 -3
  183. package/esm2022/toast/lib/toast.module.mjs +4 -4
  184. package/esm2022/toast/lib/toast.service.mjs +3 -3
  185. package/esm2022/tooltip/lib/tooltip.component.mjs +3 -3
  186. package/esm2022/tooltip/lib/tooltip.directive.mjs +3 -3
  187. package/esm2022/tooltip/lib/tooltip.module.mjs +4 -4
  188. package/esm2022/uploader/lib/uploader.component.mjs +3 -3
  189. package/esm2022/uploader/lib/uploader.module.mjs +4 -4
  190. package/fesm2022/acorex-components-action-sheet.mjs +10 -10
  191. package/fesm2022/acorex-components-alert.mjs +15 -14
  192. package/fesm2022/acorex-components-alert.mjs.map +1 -1
  193. package/fesm2022/acorex-components-avatar.mjs +10 -10
  194. package/fesm2022/acorex-components-badge.mjs +8 -8
  195. package/fesm2022/acorex-components-badge.mjs.map +1 -1
  196. package/fesm2022/acorex-components-breadcrumbs.mjs +10 -10
  197. package/fesm2022/acorex-components-button.mjs +13 -13
  198. package/fesm2022/acorex-components-calendar.mjs +24 -23
  199. package/fesm2022/acorex-components-calendar.mjs.map +1 -1
  200. package/fesm2022/acorex-components-checkbox.mjs +32 -17
  201. package/fesm2022/acorex-components-checkbox.mjs.map +1 -1
  202. package/fesm2022/acorex-components-chips.mjs +10 -9
  203. package/fesm2022/acorex-components-chips.mjs.map +1 -1
  204. package/fesm2022/acorex-components-collapse.mjs +10 -10
  205. package/fesm2022/acorex-components-color-palette.mjs +423 -434
  206. package/fesm2022/acorex-components-color-palette.mjs.map +1 -1
  207. package/fesm2022/acorex-components-color-picker.mjs +7 -7
  208. package/fesm2022/acorex-components-color-picker.mjs.map +1 -1
  209. package/fesm2022/acorex-components-common.mjs +176 -88
  210. package/fesm2022/acorex-components-common.mjs.map +1 -1
  211. package/fesm2022/acorex-components-context-menu.mjs +7 -7
  212. package/fesm2022/acorex-components-data-pager.mjs +31 -31
  213. package/fesm2022/acorex-components-data-table.mjs +13 -13
  214. package/fesm2022/acorex-components-date-picker.mjs +7 -7
  215. package/fesm2022/acorex-components-decorators.mjs +46 -46
  216. package/fesm2022/acorex-components-dialog.mjs +10 -10
  217. package/fesm2022/acorex-components-drawer.mjs +11 -10
  218. package/fesm2022/acorex-components-drawer.mjs.map +1 -1
  219. package/fesm2022/acorex-components-dropdown.mjs +7 -7
  220. package/fesm2022/acorex-components-form.mjs +16 -16
  221. package/fesm2022/acorex-components-image.mjs +7 -7
  222. package/fesm2022/acorex-components-label.mjs +7 -7
  223. package/fesm2022/acorex-components-loading.mjs +16 -16
  224. package/fesm2022/acorex-components-menu.mjs +7 -7
  225. package/fesm2022/acorex-components-mixin.mjs +4 -5
  226. package/fesm2022/acorex-components-mixin.mjs.map +1 -1
  227. package/fesm2022/acorex-components-notification.mjs +10 -10
  228. package/fesm2022/acorex-components-number-box.mjs +7 -7
  229. package/fesm2022/acorex-components-otp.mjs +7 -7
  230. package/fesm2022/acorex-components-page.mjs +10 -10
  231. package/fesm2022/acorex-components-password-box.mjs +7 -7
  232. package/fesm2022/acorex-components-popover.mjs +10 -10
  233. package/fesm2022/acorex-components-popup.mjs +10 -10
  234. package/fesm2022/acorex-components-progress-bar.mjs +7 -7
  235. package/fesm2022/acorex-components-radio.mjs +7 -7
  236. package/fesm2022/acorex-components-range-slider.mjs +31 -27
  237. package/fesm2022/acorex-components-range-slider.mjs.map +1 -1
  238. package/fesm2022/acorex-components-result.mjs +7 -7
  239. package/fesm2022/acorex-components-search-box.mjs +7 -7
  240. package/fesm2022/acorex-components-search-box.mjs.map +1 -1
  241. package/fesm2022/acorex-components-select-box.mjs +7 -7
  242. package/fesm2022/acorex-components-selection-list.mjs +7 -7
  243. package/fesm2022/acorex-components-switch.mjs +33 -31
  244. package/fesm2022/acorex-components-switch.mjs.map +1 -1
  245. package/fesm2022/acorex-components-tabs.mjs +13 -13
  246. package/fesm2022/acorex-components-tag.mjs +7 -7
  247. package/fesm2022/acorex-components-textarea.mjs +7 -7
  248. package/fesm2022/acorex-components-textbox.mjs +45 -28
  249. package/fesm2022/acorex-components-textbox.mjs.map +1 -1
  250. package/fesm2022/acorex-components-time-box.mjs +7 -7
  251. package/fesm2022/acorex-components-toast.mjs +10 -10
  252. package/fesm2022/acorex-components-tooltip.mjs +10 -10
  253. package/fesm2022/acorex-components-uploader.mjs +7 -7
  254. package/fesm2022/acorex-components.mjs.map +1 -1
  255. package/mixin/lib/base-components.class.d.ts +2 -2
  256. package/mixin/lib/base-menu-mixin.class.d.ts +5 -5
  257. package/mixin/lib/button-mixin.class.d.ts +2 -2
  258. package/mixin/lib/clickable-mixin.class.d.ts +2 -2
  259. package/mixin/lib/color-look-mixing.class.d.ts +2 -2
  260. package/mixin/lib/datalist-component.class.d.ts +10 -10
  261. package/mixin/lib/dropdown-mixin.class.d.ts +2 -2
  262. package/mixin/lib/interactive-mixin.class.d.ts +4 -4
  263. package/mixin/lib/loading-mixin.class.d.ts +2 -2
  264. package/mixin/lib/mixin.class.d.ts +61 -61
  265. package/mixin/lib/page-component.class.d.ts +2 -2
  266. package/mixin/lib/selection-component.class.d.ts +2 -2
  267. package/mixin/lib/sizable-mixin.class.d.ts +2 -2
  268. package/mixin/lib/textbox-mixin.class.d.ts +2 -2
  269. package/mixin/lib/value-mixin.class.d.ts +8 -8
  270. package/package.json +19 -19
  271. package/range-slider/lib/range-slider.component.d.ts +6 -14
  272. package/range-slider/lib/range-slider.module.d.ts +3 -2
  273. package/switch/lib/switch.component.d.ts +10 -8
  274. package/tabs/lib/tab-item.component.d.ts +2 -2
  275. package/textbox/lib/textbox.component.d.ts +8 -8
@@ -1,44 +1,266 @@
1
- import { AXColorUtil } from '@acorex/core/utils';
1
+ import * as i1 from '@acorex/core/utils';
2
+ import { AXColorUtil, AXUnsubscriber } from '@acorex/core/utils';
2
3
  import * as i0 from '@angular/core';
3
- import { Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Inject, Input, ContentChildren, HostBinding, NgModule } from '@angular/core';
4
- import { distinctUntilChanged } from 'rxjs/operators';
5
- import { MXBaseComponent, MXInteractiveComponent, MXValueComponent } from '@acorex/components/common';
6
- import * as i1 from '@angular/common';
4
+ import { Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, Input, forwardRef, ContentChildren, HostBinding, NgModule } from '@angular/core';
5
+ import { MXBaseComponent, MXValueComponent } from '@acorex/components/common';
6
+ import * as i2 from '@angular/common';
7
7
  import { CommonModule } from '@angular/common';
8
- import * as i2 from '@acorex/components/textbox';
8
+ import * as i3 from '@angular/forms';
9
+ import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
10
+ import * as i4 from '@acorex/components/textbox';
9
11
  import { AXTextBoxModule } from '@acorex/components/textbox';
10
- import * as i3 from '@acorex/components/number-box';
12
+ import * as i5 from '@acorex/components/number-box';
11
13
  import { AXNumberBoxModule } from '@acorex/components/number-box';
12
- import * as i1$1 from '@acorex/components/range-slider';
14
+ import * as i3$1 from '@acorex/components/range-slider';
13
15
  import { AXRangeSliderModule } from '@acorex/components/range-slider';
14
- import * as i2$1 from '@angular/cdk/drag-drop';
16
+ import * as i4$1 from '@angular/cdk/drag-drop';
15
17
  import { DragDropModule } from '@angular/cdk/drag-drop';
16
- import { Subject } from 'rxjs';
17
- import { classes } from 'polytype';
18
+ import { distinctUntilChanged } from 'rxjs/operators';
18
19
  import { AXLabelModule } from '@acorex/components/label';
19
20
  import { AXButtonModule } from '@acorex/components/button';
20
21
  import { AXDecoratorModule } from '@acorex/components/decorators';
21
22
 
22
- class AXColorComponent {
23
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
24
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorComponent }); }
23
+ class AXColorPaletteParentComponent {
24
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXColorPaletteParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
25
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXColorPaletteParentComponent }); }
25
26
  }
26
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorComponent, decorators: [{
27
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXColorPaletteParentComponent, decorators: [{
27
28
  type: Injectable
28
29
  }] });
29
30
  class AXColorPaletteChildComponent {
30
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPaletteChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
31
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPaletteChildComponent }); }
31
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXColorPaletteChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
32
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXColorPaletteChildComponent }); }
32
33
  }
33
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPaletteChildComponent, decorators: [{
34
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXColorPaletteChildComponent, decorators: [{
34
35
  type: Injectable
35
36
  }] });
37
+ const AXDefaultColorPalette = [
38
+ { code: '#ffffff' },
39
+ { code: '#000000' },
40
+ { code: '#9E9E9E' },
41
+ { code: '#FFC107' },
42
+ { code: '#607D8B' },
43
+ { code: '#2196F3' },
44
+ { code: '#FF5722' },
45
+ { code: '#4CAF50' },
46
+ { code: '#9c27b0' },
47
+ { code: '#3F51B5' },
48
+ // Amber
49
+ { code: '#fff8e1' },
50
+ { code: '#ffecb3' },
51
+ { code: '#ffe082' },
52
+ { code: '#ffd54f' },
53
+ { code: '#ffca28' },
54
+ { code: '#ffc107' },
55
+ { code: '#ffb300' },
56
+ { code: '#ffa000' },
57
+ { code: '#ff8f00' },
58
+ { code: '#ff6f00' },
59
+ // Blue Grey
60
+ { code: '#ECEFF1' },
61
+ { code: '#CFD8DC' },
62
+ { code: '#B0BEC5' },
63
+ { code: '#90A4AE' },
64
+ { code: '#78909C' },
65
+ { code: '#607D8B' },
66
+ { code: '#546E7A' },
67
+ { code: '#455A64' },
68
+ { code: '#37474F' },
69
+ { code: '#263238' },
70
+ // Blue
71
+ { code: '#E3F2FD' },
72
+ { code: '#BBDEFB' },
73
+ { code: '#90CAF9' },
74
+ { code: '#64B5F6' },
75
+ { code: '#42A5F5' },
76
+ { code: '#2196F3' },
77
+ { code: '#1E88E5' },
78
+ { code: '#1976D2' },
79
+ { code: '#1565C0' },
80
+ { code: '#0D47A1' },
81
+ // Brown
82
+ { code: '#EFEBE9' },
83
+ { code: '#D7CCC8' },
84
+ { code: '#BCAAA4' },
85
+ { code: '#A1887F' },
86
+ { code: '#8D6E63' },
87
+ { code: '#795548' },
88
+ { code: '#6D4C41' },
89
+ { code: '#5D4037' },
90
+ { code: '#4E342E' },
91
+ { code: '#3E2723' },
92
+ // Cyan
93
+ { code: '#E0F7FA' },
94
+ { code: '#B2EBF2' },
95
+ { code: '#80DEEA' },
96
+ { code: '#4DD0E1' },
97
+ { code: '#26C6DA' },
98
+ { code: '#00BCD4' },
99
+ { code: '#00ACC1' },
100
+ { code: '#0097A7' },
101
+ { code: '#00838F' },
102
+ { code: '#006064' },
103
+ // Deep Orange
104
+ { code: '#FBE9E7' },
105
+ { code: '#FFCCBC' },
106
+ { code: '#FFAB91' },
107
+ { code: '#FF8A65' },
108
+ { code: '#FF7043' },
109
+ { code: '#FF5722' },
110
+ { code: '#F4511E' },
111
+ { code: '#E64A19' },
112
+ { code: '#D84315' },
113
+ { code: '#BF360C' },
114
+ // Deep Purple
115
+ { code: '#EDE7F6' },
116
+ { code: '#D1C4E9' },
117
+ { code: '#B39DDB' },
118
+ { code: '#9575CD' },
119
+ { code: '#7E57C2' },
120
+ { code: '#673AB7' },
121
+ { code: '#5E35B1' },
122
+ { code: '#512DA8' },
123
+ { code: '#4527A0' },
124
+ { code: '#311B92' },
125
+ // Green
126
+ { code: '#E8F5E9' },
127
+ { code: '#C8E6C9' },
128
+ { code: '#A5D6A7' },
129
+ { code: '#81C784' },
130
+ { code: '#66BB6A' },
131
+ { code: '#4CAF50' },
132
+ { code: '#43A047' },
133
+ { code: '#388E3C' },
134
+ { code: '#2E7D32' },
135
+ { code: '#1B5E20' },
136
+ // Grey
137
+ { code: '#FAFAFA' },
138
+ { code: '#F5F5F5' },
139
+ { code: '#EEEEEE' },
140
+ { code: '#E0E0E0' },
141
+ { code: '#BDBDBD' },
142
+ { code: '#9E9E9E' },
143
+ { code: '#757575' },
144
+ { code: '#616161' },
145
+ { code: '#424242' },
146
+ { code: '#212121' },
147
+ // Indigo
148
+ { code: '#E8EAF6' },
149
+ { code: '#C5CAE9' },
150
+ { code: '#9FA8DA' },
151
+ { code: '#7986CB' },
152
+ { code: '#5C6BC0' },
153
+ { code: '#3F51B5' },
154
+ { code: '#3949AB' },
155
+ { code: '#303F9F' },
156
+ { code: '#283593' },
157
+ { code: '#1A237E' },
158
+ // Light Blue
159
+ { code: '#E1F5FE' },
160
+ { code: '#B3E5FC' },
161
+ { code: '#81D4FA' },
162
+ { code: '#4FC3F7' },
163
+ { code: '#29B6F6' },
164
+ { code: '#03A9F4' },
165
+ { code: '#039BE5' },
166
+ { code: '#0288D1' },
167
+ { code: '#0277BD' },
168
+ { code: '#01579B' },
169
+ // Light Green
170
+ { code: '#F1F8E9' },
171
+ { code: '#DCEDC8' },
172
+ { code: '#C5E1A5' },
173
+ { code: '#AED581' },
174
+ { code: '#9CCC65' },
175
+ { code: '#8BC34A' },
176
+ { code: '#7CB342' },
177
+ { code: '#689F38' },
178
+ { code: '#558B2F' },
179
+ { code: '#33691E' },
180
+ // Lime
181
+ { code: '#F9FBE7' },
182
+ { code: '#F0F4C3' },
183
+ { code: '#E6EE9C' },
184
+ { code: '#DCE775' },
185
+ { code: '#D4E157' },
186
+ { code: '#CDDC39' },
187
+ { code: '#C0CA33' },
188
+ { code: '#AFB42B' },
189
+ { code: '#9E9D24' },
190
+ { code: '#827717' },
191
+ // Orange
192
+ { code: '#FFF3E0' },
193
+ { code: '#FFE0B2' },
194
+ { code: '#FFCC80' },
195
+ { code: '#FFB74D' },
196
+ { code: '#FFA726' },
197
+ { code: '#FF9800' },
198
+ { code: '#FB8C00' },
199
+ { code: '#F57C00' },
200
+ { code: '#EF6C00' },
201
+ { code: '#E65100' },
202
+ // Pink
203
+ { code: '#FCE4EC' },
204
+ { code: '#F8BBD0' },
205
+ { code: '#F48FB1' },
206
+ { code: '#F06292' },
207
+ { code: '#EC407A' },
208
+ { code: '#E91E63' },
209
+ { code: '#D81B60' },
210
+ { code: '#C2185B' },
211
+ { code: '#AD1457' },
212
+ { code: '#880E4F' },
213
+ // Purple
214
+ { code: '#F3E5F5' },
215
+ { code: '#E1BEE7' },
216
+ { code: '#CE93D8' },
217
+ { code: '#BA68C8' },
218
+ { code: '#AB47BC' },
219
+ { code: '#9C27B0' },
220
+ { code: '#8E24AA' },
221
+ { code: '#7B1FA2' },
222
+ { code: '#6A1B9A' },
223
+ { code: '#4A148C' },
224
+ // Red
225
+ { code: '#FFEBEE' },
226
+ { code: '#FFCDD2' },
227
+ { code: '#EF9A9A' },
228
+ { code: '#E57373' },
229
+ { code: '#EF5350' },
230
+ { code: '#F44336' },
231
+ { code: '#E53935' },
232
+ { code: '#D32F2F' },
233
+ { code: '#C62828' },
234
+ { code: '#B71C1C' },
235
+ // Teal
236
+ { code: '#E0F2F1' },
237
+ { code: '#B2DFDB' },
238
+ { code: '#80CBC4' },
239
+ { code: '#4DB6AC' },
240
+ { code: '#26A69A' },
241
+ { code: '#009688' },
242
+ { code: '#00897B' },
243
+ { code: '#00796B' },
244
+ { code: '#00695C' },
245
+ { code: '#004D40' },
246
+ // Yellow
247
+ { code: '#FFFDE7' },
248
+ { code: '#FFF9C4' },
249
+ { code: '#FFF59D' },
250
+ { code: '#FFF176' },
251
+ { code: '#FFEE58' },
252
+ { code: '#FFEB3B' },
253
+ { code: '#FDD835' },
254
+ { code: '#FBC02D' },
255
+ { code: '#F9A825' },
256
+ { code: '#F57F17' },
257
+ ];
36
258
 
37
259
  class AXColorPaletteInputComponent extends MXBaseComponent {
38
- constructor(_parent) {
260
+ constructor(_parent, _unsubscriber) {
39
261
  super();
40
262
  this._parent = _parent;
41
- this._isTouched = false;
263
+ this._unsubscriber = _unsubscriber;
42
264
  this.isValid = true;
43
265
  this._rgba = {
44
266
  r: 0,
@@ -54,34 +276,42 @@ class AXColorPaletteInputComponent extends MXBaseComponent {
54
276
  return m.typedValue?.startsWith('#') || str == '#' ? str.trim() : '#' + str.trim();
55
277
  },
56
278
  };
57
- _parent._onInternalColorChanged$
58
- .pipe(distinctUntilChanged())
279
+ _parent.onValueChanged
280
+ .pipe(_unsubscriber.takeUntilDestroy)
59
281
  .subscribe((e) => {
60
- if (!e.color) {
61
- this._hex = '';
62
- this._rgba = {
63
- r: null,
64
- g: null,
65
- b: null,
66
- a: null,
67
- };
282
+ this.applyParent(e.isUserInteraction);
283
+ });
284
+ }
285
+ applyParent(u = false) {
286
+ const value = this._parent.value;
287
+ if (!value) {
288
+ this._hex = '';
289
+ this._rgba = {
290
+ r: null,
291
+ g: null,
292
+ b: null,
293
+ a: null,
294
+ };
295
+ }
296
+ else {
297
+ Object.assign(this._rgba, AXColorUtil.to(value, 'rgba'));
298
+ if (this._colorMode != 'hex' || !this._hex) {
299
+ this._hex = AXColorUtil.toString(value, 'hex');
68
300
  }
69
- else {
70
- Object.assign(this._rgba, AXColorUtil.to(e.color, 'rgba'));
71
- if (this._colorMode != 'hex' || !this._hex)
72
- this._hex = AXColorUtil.toString(e.color, 'hex');
73
- if (this._colorMode == 'hex')
74
- this._hex = e.color;
75
- if (this._rgba.a != 1 && !this._isTouched) {
76
- this._colorMode = 'rgba';
77
- }
301
+ if (this._colorMode == 'hex') {
302
+ this._hex = value;
78
303
  }
79
- this.checkValid();
80
- this.cdr.detectChanges();
81
- });
304
+ if (!u && this._rgba.a != 1) {
305
+ this._colorMode = 'rgba';
306
+ }
307
+ }
308
+ this.checkValid();
309
+ this.cdr.detectChanges();
310
+ }
311
+ ngAfterViewInit() {
312
+ this.applyParent();
82
313
  }
83
314
  _handleChangeInputMode() {
84
- this._isTouched = true;
85
315
  switch (this._colorMode) {
86
316
  case 'rgba':
87
317
  this._colorMode = 'hex';
@@ -96,67 +326,44 @@ class AXColorPaletteInputComponent extends MXBaseComponent {
96
326
  return;
97
327
  const { r, g, b, a } = this._rgba;
98
328
  const _color = `rgba(${r},${g},${b},${a})`;
99
- if (e.isUserInteraction) {
100
- this._parent.setUserInteraction();
101
- this._isTouched = true;
102
- }
103
- this._parent._onInternalColorChanged$.next({
104
- color: AXColorUtil.toString(_color, 'rgba'),
105
- sender: this,
106
- });
329
+ this._parent.commitValue(AXColorUtil.toString(_color, 'rgba'), e.isUserInteraction);
107
330
  }
108
331
  _handleHEXAValueChanged(e) {
109
- if (!e.value && !e.oldValue)
110
- return;
111
- //
112
- if (e.isUserInteraction) {
113
- this._parent.setUserInteraction();
114
- this._isTouched = true;
115
- }
116
- //
117
- if (!e.value && e.oldValue) {
118
- this._parent._onInternalColorChanged$.next({
119
- color: null,
120
- sender: this
121
- });
122
- }
123
- else {
124
- this._parent._onInternalColorChanged$.next({
125
- color: e.value,
126
- sender: this
127
- });
332
+ if (e.isUserInteraction && e.value?.trim() != this._hex?.trim()) {
333
+ this._parent.commitValue(e.value, e.isUserInteraction);
128
334
  }
129
335
  }
130
336
  checkValid() {
131
337
  this.isValid = AXColorUtil.isValid(this._hex);
132
338
  }
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 }); }
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: [
339
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXColorPaletteInputComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
340
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input", host: { classAttribute: "ax-color-palette-input" }, providers: [
135
341
  {
136
342
  provide: AXColorPaletteChildComponent,
137
343
  useExisting: AXColorPaletteInputComponent,
138
344
  },
139
- ], usesInheritance: true, ngImport: i0, 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", dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "mask-options"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged"] }, { kind: "component", type: i3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "size", "value", "state", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "name", "checked", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
345
+ AXUnsubscriber
346
+ ], usesInheritance: true, ngImport: i0, 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 [ngModel]=\"_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", dependencies: [{ kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "mask-options"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: i5.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "size", "value", "state", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "name", "checked", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
140
347
  }
141
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPaletteInputComponent, decorators: [{
348
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXColorPaletteInputComponent, decorators: [{
142
349
  type: Component,
143
350
  args: [{ selector: 'ax-color-palette-input', host: { class: 'ax-color-palette-input' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
144
351
  {
145
352
  provide: AXColorPaletteChildComponent,
146
353
  useExisting: AXColorPaletteInputComponent,
147
354
  },
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" }]
149
- }], ctorParameters: function () { return [{ type: AXColorComponent, decorators: [{
150
- type: Optional
151
- }, {
355
+ AXUnsubscriber
356
+ ], 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 [ngModel]=\"_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" }]
357
+ }], ctorParameters: function () { return [{ type: AXColorPaletteParentComponent, decorators: [{
152
358
  type: Inject,
153
- args: [AXColorComponent]
154
- }] }]; } });
359
+ args: [AXColorPaletteParentComponent]
360
+ }] }, { type: i1.AXUnsubscriber }]; } });
155
361
 
156
362
  class AXColorPalettePickerComponent extends MXBaseComponent {
157
- constructor(_parent) {
363
+ constructor(_parent, _unsubscriber) {
158
364
  super();
159
365
  this._parent = _parent;
366
+ this._unsubscriber = _unsubscriber;
160
367
  this._rgba = {
161
368
  r: 0,
162
369
  g: 0,
@@ -174,54 +381,58 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
174
381
  { color: 'rgb(255, 0, 255)', pos: 0.83 },
175
382
  { color: 'rgb(255, 0, 0)', pos: 1 },
176
383
  ];
384
+ this._gradients = AXColorUtil.gradient(this._gradientColors);
385
+ this._colors = this._gradients.rgb(100);
177
386
  this.dragPosition = { x: 0, y: 0 };
178
- _parent._onInternalColorChanged$
179
- .pipe(distinctUntilChanged())
387
+ _parent.onValueChanged
388
+ .pipe(_unsubscriber.takeUntilDestroy)
180
389
  .subscribe((e) => {
181
- if (!e.color) {
182
- this._rgba = {
183
- r: 0,
184
- g: 0,
185
- b: 0,
186
- a: 0,
187
- };
188
- }
189
- else {
190
- if (!AXColorUtil.equal(e.color, this._rgba)) {
191
- Object.assign(this._rgba, AXColorUtil.to(e.color, 'rgba'));
192
- }
193
- }
194
- this.setHSV();
195
- this.cdr.detectChanges();
390
+ this._handleParentColorChanged();
391
+ });
392
+ _parent.onOptionChanged
393
+ .pipe(_unsubscriber.takeUntilDestroy)
394
+ .subscribe((e) => {
395
+ this.cdr.markForCheck();
196
396
  });
197
397
  }
198
398
  setHSV() {
199
399
  const hsv = AXColorUtil.to(this._rgba, 'hsva');
400
+ const sortedH = this._colors.map(c => c.toHsv().h);
401
+ //TODO: find closest
402
+ this._gradient = sortedH.findIndex(c => { return Math.round(c) >= Math.round(hsv.h); });
200
403
  this._bgColor = AXColorUtil.toString({ h: hsv.h, s: 1, v: 1, a: this._rgba.a }, 'rgba');
201
404
  this.setPointerByPercent(hsv.s * 100, hsv.v * 100);
202
405
  }
406
+ _handleParentColorChanged() {
407
+ const color = this._parent.value;
408
+ if (!color) {
409
+ this._rgba = {
410
+ r: 0,
411
+ g: 0,
412
+ b: 0,
413
+ a: 0,
414
+ };
415
+ }
416
+ else {
417
+ if (!AXColorUtil.equal(color, this._rgba)) {
418
+ Object.assign(this._rgba, AXColorUtil.to(color, 'rgba'));
419
+ }
420
+ }
421
+ this.setHSV();
422
+ this.cdr.detectChanges();
423
+ }
203
424
  _handleAlphaChanged(e) {
204
- if (e.value != null && e.value != this._rgba.a) {
425
+ if (e.isUserInteraction && e.value != this._rgba.a) {
205
426
  const { r, g, b } = this._rgba;
206
427
  const _color = `rgba(${r},${g},${b},${e.value})`;
207
- this._parent.setUserInteraction();
208
- this._parent._onInternalColorChanged$.next({
209
- color: AXColorUtil.toString(_color, 'rgba'),
210
- sender: this,
211
- });
428
+ this._parent.commitValue(AXColorUtil.toString(_color, 'rgba'), e.isUserInteraction);
212
429
  }
213
430
  }
214
431
  _handleGradientChanged(e) {
215
- if (e.value != null && e.value != this._gradient) {
216
- const gradient = AXColorUtil.gradient(this._gradientColors);
217
- const colors = gradient.rgb(100);
432
+ if (e.isUserInteraction && e.value != this._gradient) {
218
433
  const { s, v } = AXColorUtil.to(this._rgba, "hsva");
219
- const { h } = colors[e.value].toHsv();
220
- this._parent.setUserInteraction();
221
- this._parent._onInternalColorChanged$.next({
222
- color: AXColorUtil.toString({ h, s, v, a: this._rgba.a }, 'rgba'),
223
- sender: this,
224
- });
434
+ const { h } = this._colors[e.value].toHsv();
435
+ this._parent.commitValue(AXColorUtil.toString({ h, s, v, a: this._rgba.a }, 'rgba'), e.isUserInteraction);
225
436
  }
226
437
  }
227
438
  _handleSurfaceClick(e) {
@@ -231,14 +442,15 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
231
442
  return;
232
443
  }
233
444
  const surface = this.getHostElement().querySelector(".ax-color-picker-overlay");
234
- const sb = surface.getBoundingClientRect();
235
445
  const pointer = this.getHostElement().querySelector(".ax-color-picker-pointer");
236
- const pb = pointer.getBoundingClientRect();
237
446
  let x = e.offsetX;
238
447
  let y = e.offsetY;
239
448
  this.setColorByXY(x, y);
240
449
  }
241
450
  _handleDrag() {
451
+ if (this._parent.disabled || this._parent.readonly) {
452
+ return;
453
+ }
242
454
  const surface = this.getHostElement().querySelector(".ax-color-picker-overlay");
243
455
  const sb = surface.getBoundingClientRect();
244
456
  const pointer = this.getHostElement().querySelector(".ax-color-picker-pointer");
@@ -265,13 +477,12 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
265
477
  s: (x / sb.width),
266
478
  v: ((sb.height - y) / sb.height)
267
479
  };
268
- this._parent._onInternalColorChanged$.next({
269
- color: AXColorUtil.toString(hsv, 'rgba'),
270
- sender: this,
271
- });
480
+ this._parent.commitValue(AXColorUtil.toString(hsv, 'rgba'), true);
272
481
  }
273
482
  setPointerByPercent(x, y) {
274
483
  const surface = this.getHostElement().querySelector(".ax-color-picker-overlay");
484
+ if (!surface)
485
+ return;
275
486
  const sb = surface.getBoundingClientRect();
276
487
  const pointer = this.getHostElement().querySelector(".ax-color-picker-pointer");
277
488
  const pb = pointer.getBoundingClientRect();
@@ -283,59 +494,65 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
283
494
  y: (height - (((y * height)) / 100)) - w
284
495
  };
285
496
  }
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 }); }
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: [
497
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXColorPalettePickerComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
498
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker", host: { classAttribute: "ax-color-palette-picker" }, providers: [
288
499
  {
289
500
  provide: AXColorPaletteChildComponent,
290
501
  useExisting: AXColorPalettePickerComponent,
291
502
  },
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 }); }
503
+ AXUnsubscriber
504
+ ], 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 </div>\n </div>\n</div>\n<ax-range-slider class=\"ax-color-picker-gradient\" [minValue]=\"0\" [maxValue]=\"100\" [step]=\"1\" \n [ngModel]=\"_gradient\" \n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n (onValueChanged)=\"_handleGradientChanged($event)\" >\n</ax-range-slider>\n<ax-range-slider class=\"ax-color-picker-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" \n [ngModel]=\"_rgba.a\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n (onValueChanged)=\"_handleAlphaChanged($event)\">\n</ax-range-slider>", dependencies: [{ kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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: ["readonly", "disabled", "value", "name", "minValue", "maxValue", "step", "color", "oriantaion"], outputs: ["valueChange", "onValueChanged", "readonlyChange", "disabledChange", "colorChange"] }, { kind: "directive", type: i4$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 }); }
293
505
  }
294
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
506
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
295
507
  type: Component,
296
508
  args: [{ selector: 'ax-color-palette-picker', host: { class: 'ax-color-palette-picker' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
297
509
  {
298
510
  provide: AXColorPaletteChildComponent,
299
511
  useExisting: AXColorPalettePickerComponent,
300
512
  },
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: [{
303
- type: Optional
304
- }, {
513
+ AXUnsubscriber
514
+ ], 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 </div>\n </div>\n</div>\n<ax-range-slider class=\"ax-color-picker-gradient\" [minValue]=\"0\" [maxValue]=\"100\" [step]=\"1\" \n [ngModel]=\"_gradient\" \n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n (onValueChanged)=\"_handleGradientChanged($event)\" >\n</ax-range-slider>\n<ax-range-slider class=\"ax-color-picker-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" \n [ngModel]=\"_rgba.a\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n (onValueChanged)=\"_handleAlphaChanged($event)\">\n</ax-range-slider>" }]
515
+ }], ctorParameters: function () { return [{ type: AXColorPaletteParentComponent, decorators: [{
305
516
  type: Inject,
306
- args: [AXColorComponent]
307
- }] }]; } });
517
+ args: [AXColorPaletteParentComponent]
518
+ }] }, { type: i1.AXUnsubscriber }]; } });
308
519
 
309
520
  class AXColorPalettePreviewComponent extends MXBaseComponent {
310
- constructor(_parent, _zone) {
521
+ constructor(_parent, _zone, _unsubscriber) {
311
522
  super();
312
523
  this._parent = _parent;
313
524
  this._zone = _zone;
314
- _parent._onInternalColorChanged$
315
- .pipe(distinctUntilChanged())
525
+ this._unsubscriber = _unsubscriber;
526
+ _parent.onValueChanged
527
+ .pipe(_unsubscriber.takeUntilDestroy)
316
528
  .subscribe((e) => {
317
- _zone.runOutsideAngular(() => {
318
- const inner = this.getHostElement().firstElementChild;
319
- inner.style.backgroundColor = e.color;
320
- inner.innerText = AXColorUtil.toString(e.color);
321
- const color = AXColorUtil.toString(e.color, 'hex');
322
- const ratio = AXColorUtil.contrastToWhite(color);
323
- this.getHostElement().style.color = !(ratio > 2.0) ? '#000' : '#fff';
324
- });
529
+ _zone.runOutsideAngular(this.applyParent.bind(this));
325
530
  });
326
531
  }
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 }); }
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: [
532
+ ngAfterViewInit() {
533
+ this.applyParent();
534
+ }
535
+ applyParent() {
536
+ const inner = this.getHostElement().firstElementChild;
537
+ inner.style.backgroundColor = this._parent.value;
538
+ inner.innerText = AXColorUtil.toString(this._parent.value);
539
+ const color = AXColorUtil.toString(this._parent.value, 'hex');
540
+ const ratio = AXColorUtil.contrastToWhite(color);
541
+ this.getHostElement().style.color = !(ratio > 2.0) ? '#000' : '#fff';
542
+ }
543
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXColorPalettePreviewComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i0.NgZone }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
544
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview", host: { classAttribute: "ax-color-palette-preview" }, providers: [
329
545
  {
330
546
  provide: AXColorPaletteChildComponent,
331
547
  useExisting: AXColorPalettePreviewComponent,
332
548
  },
549
+ AXUnsubscriber
333
550
  ], usesInheritance: true, ngImport: i0, template: `<div
334
551
  class="palette-preview-overlay"
335
552
  [class.ax-state-disabled]="_parent.disabled"
336
553
  ></div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
337
554
  }
338
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPalettePreviewComponent, decorators: [{
555
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXColorPalettePreviewComponent, decorators: [{
339
556
  type: Component,
340
557
  args: [{
341
558
  selector: 'ax-color-palette-preview',
@@ -351,281 +568,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
351
568
  provide: AXColorPaletteChildComponent,
352
569
  useExisting: AXColorPalettePreviewComponent,
353
570
  },
571
+ AXUnsubscriber
354
572
  ],
355
573
  }]
356
- }], ctorParameters: function () { return [{ type: AXColorComponent, decorators: [{
357
- type: Optional
358
- }, {
574
+ }], ctorParameters: function () { return [{ type: AXColorPaletteParentComponent, decorators: [{
359
575
  type: Inject,
360
- args: [AXColorComponent]
361
- }] }, { type: i0.NgZone }]; } });
576
+ args: [AXColorPaletteParentComponent]
577
+ }] }, { type: i0.NgZone }, { type: i1.AXUnsubscriber }]; } });
362
578
 
363
579
  class AXColorPaletteSwatchesComponent extends MXBaseComponent {
364
- constructor(_parent) {
580
+ constructor(_parent, _unsubscriber) {
365
581
  super();
366
582
  this._parent = _parent;
583
+ this._unsubscriber = _unsubscriber;
367
584
  this.colors = [];
368
- this._defaultPalette = [
369
- { code: '#ffffff' },
370
- { code: '#000000' },
371
- { code: '#9E9E9E' },
372
- { code: '#FFC107' },
373
- { code: '#607D8B' },
374
- { code: '#2196F3' },
375
- { code: '#FF5722' },
376
- { code: '#4CAF50' },
377
- { code: '#9c27b0' },
378
- { code: '#3F51B5' },
379
- // Amber
380
- { code: '#fff8e1' },
381
- { code: '#ffecb3' },
382
- { code: '#ffe082' },
383
- { code: '#ffd54f' },
384
- { code: '#ffca28' },
385
- { code: '#ffc107' },
386
- { code: '#ffb300' },
387
- { code: '#ffa000' },
388
- { code: '#ff8f00' },
389
- { code: '#ff6f00' },
390
- // Blue Grey
391
- { code: '#ECEFF1' },
392
- { code: '#CFD8DC' },
393
- { code: '#B0BEC5' },
394
- { code: '#90A4AE' },
395
- { code: '#78909C' },
396
- { code: '#607D8B' },
397
- { code: '#546E7A' },
398
- { code: '#455A64' },
399
- { code: '#37474F' },
400
- { code: '#263238' },
401
- // Blue
402
- { code: '#E3F2FD' },
403
- { code: '#BBDEFB' },
404
- { code: '#90CAF9' },
405
- { code: '#64B5F6' },
406
- { code: '#42A5F5' },
407
- { code: '#2196F3' },
408
- { code: '#1E88E5' },
409
- { code: '#1976D2' },
410
- { code: '#1565C0' },
411
- { code: '#0D47A1' },
412
- // Brown
413
- { code: '#EFEBE9' },
414
- { code: '#D7CCC8' },
415
- { code: '#BCAAA4' },
416
- { code: '#A1887F' },
417
- { code: '#8D6E63' },
418
- { code: '#795548' },
419
- { code: '#6D4C41' },
420
- { code: '#5D4037' },
421
- { code: '#4E342E' },
422
- { code: '#3E2723' },
423
- // Cyan
424
- { code: '#E0F7FA' },
425
- { code: '#B2EBF2' },
426
- { code: '#80DEEA' },
427
- { code: '#4DD0E1' },
428
- { code: '#26C6DA' },
429
- { code: '#00BCD4' },
430
- { code: '#00ACC1' },
431
- { code: '#0097A7' },
432
- { code: '#00838F' },
433
- { code: '#006064' },
434
- // Deep Orange
435
- { code: '#FBE9E7' },
436
- { code: '#FFCCBC' },
437
- { code: '#FFAB91' },
438
- { code: '#FF8A65' },
439
- { code: '#FF7043' },
440
- { code: '#FF5722' },
441
- { code: '#F4511E' },
442
- { code: '#E64A19' },
443
- { code: '#D84315' },
444
- { code: '#BF360C' },
445
- // Deep Purple
446
- { code: '#EDE7F6' },
447
- { code: '#D1C4E9' },
448
- { code: '#B39DDB' },
449
- { code: '#9575CD' },
450
- { code: '#7E57C2' },
451
- { code: '#673AB7' },
452
- { code: '#5E35B1' },
453
- { code: '#512DA8' },
454
- { code: '#4527A0' },
455
- { code: '#311B92' },
456
- // Green
457
- { code: '#E8F5E9' },
458
- { code: '#C8E6C9' },
459
- { code: '#A5D6A7' },
460
- { code: '#81C784' },
461
- { code: '#66BB6A' },
462
- { code: '#4CAF50' },
463
- { code: '#43A047' },
464
- { code: '#388E3C' },
465
- { code: '#2E7D32' },
466
- { code: '#1B5E20' },
467
- // Grey
468
- { code: '#FAFAFA' },
469
- { code: '#F5F5F5' },
470
- { code: '#EEEEEE' },
471
- { code: '#E0E0E0' },
472
- { code: '#BDBDBD' },
473
- { code: '#9E9E9E' },
474
- { code: '#757575' },
475
- { code: '#616161' },
476
- { code: '#424242' },
477
- { code: '#212121' },
478
- // Indigo
479
- { code: '#E8EAF6' },
480
- { code: '#C5CAE9' },
481
- { code: '#9FA8DA' },
482
- { code: '#7986CB' },
483
- { code: '#5C6BC0' },
484
- { code: '#3F51B5' },
485
- { code: '#3949AB' },
486
- { code: '#303F9F' },
487
- { code: '#283593' },
488
- { code: '#1A237E' },
489
- // Light Blue
490
- { code: '#E1F5FE' },
491
- { code: '#B3E5FC' },
492
- { code: '#81D4FA' },
493
- { code: '#4FC3F7' },
494
- { code: '#29B6F6' },
495
- { code: '#03A9F4' },
496
- { code: '#039BE5' },
497
- { code: '#0288D1' },
498
- { code: '#0277BD' },
499
- { code: '#01579B' },
500
- // Light Green
501
- { code: '#F1F8E9' },
502
- { code: '#DCEDC8' },
503
- { code: '#C5E1A5' },
504
- { code: '#AED581' },
505
- { code: '#9CCC65' },
506
- { code: '#8BC34A' },
507
- { code: '#7CB342' },
508
- { code: '#689F38' },
509
- { code: '#558B2F' },
510
- { code: '#33691E' },
511
- // Lime
512
- { code: '#F9FBE7' },
513
- { code: '#F0F4C3' },
514
- { code: '#E6EE9C' },
515
- { code: '#DCE775' },
516
- { code: '#D4E157' },
517
- { code: '#CDDC39' },
518
- { code: '#C0CA33' },
519
- { code: '#AFB42B' },
520
- { code: '#9E9D24' },
521
- { code: '#827717' },
522
- // Orange
523
- { code: '#FFF3E0' },
524
- { code: '#FFE0B2' },
525
- { code: '#FFCC80' },
526
- { code: '#FFB74D' },
527
- { code: '#FFA726' },
528
- { code: '#FF9800' },
529
- { code: '#FB8C00' },
530
- { code: '#F57C00' },
531
- { code: '#EF6C00' },
532
- { code: '#E65100' },
533
- // Pink
534
- { code: '#FCE4EC' },
535
- { code: '#F8BBD0' },
536
- { code: '#F48FB1' },
537
- { code: '#F06292' },
538
- { code: '#EC407A' },
539
- { code: '#E91E63' },
540
- { code: '#D81B60' },
541
- { code: '#C2185B' },
542
- { code: '#AD1457' },
543
- { code: '#880E4F' },
544
- // Purple
545
- { code: '#F3E5F5' },
546
- { code: '#E1BEE7' },
547
- { code: '#CE93D8' },
548
- { code: '#BA68C8' },
549
- { code: '#AB47BC' },
550
- { code: '#9C27B0' },
551
- { code: '#8E24AA' },
552
- { code: '#7B1FA2' },
553
- { code: '#6A1B9A' },
554
- { code: '#4A148C' },
555
- // Red
556
- { code: '#FFEBEE' },
557
- { code: '#FFCDD2' },
558
- { code: '#EF9A9A' },
559
- { code: '#E57373' },
560
- { code: '#EF5350' },
561
- { code: '#F44336' },
562
- { code: '#E53935' },
563
- { code: '#D32F2F' },
564
- { code: '#C62828' },
565
- { code: '#B71C1C' },
566
- // Teal
567
- { code: '#E0F2F1' },
568
- { code: '#B2DFDB' },
569
- { code: '#80CBC4' },
570
- { code: '#4DB6AC' },
571
- { code: '#26A69A' },
572
- { code: '#009688' },
573
- { code: '#00897B' },
574
- { code: '#00796B' },
575
- { code: '#00695C' },
576
- { code: '#004D40' },
577
- // Yellow
578
- { code: '#FFFDE7' },
579
- { code: '#FFF9C4' },
580
- { code: '#FFF59D' },
581
- { code: '#FFF176' },
582
- { code: '#FFEE58' },
583
- { code: '#FFEB3B' },
584
- { code: '#FDD835' },
585
- { code: '#FBC02D' },
586
- { code: '#F9A825' },
587
- { code: '#F57F17' },
588
- ];
589
- _parent?._onInternalColorChanged$.pipe(distinctUntilChanged()).subscribe((e) => {
590
- this._selected = AXColorUtil.toString(e.color, 'hex').toLowerCase();
591
- this.cdr.detectChanges();
585
+ _parent.onValueChanged
586
+ .pipe(_unsubscriber.takeUntilDestroy)
587
+ .pipe(distinctUntilChanged())
588
+ .subscribe((e) => {
589
+ this.applyParent();
592
590
  });
593
591
  }
592
+ applyParent() {
593
+ this._selected = AXColorUtil.toString(this._parent.value, 'hex').toLowerCase();
594
+ this.cdr.detectChanges();
595
+ }
594
596
  ngOnInit() {
595
597
  const isFav = this.getHostElement().tagName.toLowerCase() == 'ax-color-palette-favorite';
596
598
  if (!isFav && this.colors.length == 0) {
597
- this.colors = this._defaultPalette.map((c) => this._format(c));
599
+ this.colors = AXDefaultColorPalette.map((c) => this._format(c));
598
600
  }
599
601
  }
602
+ ngAfterViewInit() {
603
+ this.applyParent();
604
+ }
600
605
  _handleClick(e, color) {
601
606
  if (this._parent.disabled || this._parent.readonly)
602
607
  return;
603
- this._parent.setUserInteraction();
604
- this._parent._onInternalColorChanged$.next({
605
- color: color.code,
606
- sender: this,
607
- });
608
+ this._parent.commitValue(color.code, true);
608
609
  }
609
610
  _format(color) {
610
611
  return {
611
612
  code: color.code.toLowerCase(),
612
613
  };
613
614
  }
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 }); }
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: [
615
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXColorPaletteSwatchesComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
616
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: { colors: "colors" }, providers: [
616
617
  {
617
618
  provide: AXColorPaletteChildComponent,
618
619
  useExisting: AXColorPaletteSwatchesComponent,
619
620
  },
621
+ AXUnsubscriber
620
622
  ], usesInheritance: true, ngImport: i0, template: ` <div
621
623
  *ngFor="let color of colors"
622
624
  [style.background-color]="color.code"
623
625
  [attr.title]="color.code"
624
626
  [class.ax-state-selected]="color.code == _selected"
625
627
  (click)="_handleClick($event, color)"
626
- ></div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
628
+ ></div>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
627
629
  }
628
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPaletteSwatchesComponent, decorators: [{
630
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXColorPaletteSwatchesComponent, decorators: [{
629
631
  type: Component,
630
632
  args: [{
631
633
  selector: 'ax-color-palette-swatches, ax-color-palette-favorite',
@@ -643,62 +645,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
643
645
  provide: AXColorPaletteChildComponent,
644
646
  useExisting: AXColorPaletteSwatchesComponent,
645
647
  },
648
+ AXUnsubscriber
646
649
  ],
647
650
  }]
648
- }], ctorParameters: function () { return [{ type: AXColorComponent, decorators: [{
649
- type: Optional
650
- }, {
651
+ }], ctorParameters: function () { return [{ type: AXColorPaletteParentComponent, decorators: [{
651
652
  type: Inject,
652
- args: [AXColorComponent]
653
- }] }]; }, propDecorators: { colors: [{
653
+ args: [AXColorPaletteParentComponent]
654
+ }] }, { type: i1.AXUnsubscriber }]; }, propDecorators: { colors: [{
654
655
  type: Input
655
656
  }] } });
656
657
 
657
- class AXColorPalleteComponent extends classes(MXInteractiveComponent, (MXValueComponent)) {
658
- ngAfterContentInit() {
659
- this._children.changes.subscribe(() => {
660
- this._onInternalColorChanged$.next({
661
- color: this.value,
662
- sender: this,
663
- });
664
- });
665
- }
666
- ngAfterViewInit() {
667
- this._onInternalColorChanged$.next({
668
- color: this.value,
669
- sender: this,
670
- });
671
- }
672
- constructor() {
673
- super();
674
- this._onInternalColorChanged$ = new Subject();
675
- //
676
- this._onInternalColorChanged$.pipe(distinctUntilChanged()).subscribe((e) => {
677
- if (this.disabled || this.readonly)
678
- return;
679
- this.value = e.color;
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,
690
- });
691
- }
658
+ class AXColorPalleteComponent extends MXValueComponent {
692
659
  get __hostDisabled() {
693
660
  return this.disabled;
694
661
  }
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 }); }
662
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXColorPalleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
663
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", 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", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { properties: { "class.ax-state-disabled": "this.__hostDisabled" } }, providers: [
664
+ {
665
+ provide: NG_VALUE_ACCESSOR,
666
+ useExisting: forwardRef(() => AXColorPalleteComponent),
667
+ multi: true
668
+ },
669
+ {
670
+ provide: AXColorPaletteParentComponent,
671
+ useExisting: AXColorPalleteComponent,
672
+ },
673
+ ], 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-picker></ax-color-palette-picker>\n <ax-color-palette-swatches></ax-color-palette-swatches>\n <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n<ng-content select='ax-footer'></ng-content>", 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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" }, { kind: "component", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
697
674
  }
698
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPalleteComponent, decorators: [{
675
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXColorPalleteComponent, decorators: [{
699
676
  type: Component,
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: [{
677
+ args: [{ selector: 'ax-color-palette', inputs: ['disabled', 'tabIndex', 'readonly', 'value', 'state', 'name', 'checked'], outputs: ['onBlur', 'onFocus', 'valueChange', 'stateChange', 'onValueChanged', "readonlyChange", "disabledChange"], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
678
+ {
679
+ provide: NG_VALUE_ACCESSOR,
680
+ useExisting: forwardRef(() => AXColorPalleteComponent),
681
+ multi: true
682
+ },
683
+ {
684
+ provide: AXColorPaletteParentComponent,
685
+ useExisting: AXColorPalleteComponent,
686
+ },
687
+ ], 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-picker></ax-color-palette-picker>\n <ax-color-palette-swatches></ax-color-palette-swatches>\n <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n<ng-content select='ax-footer'></ng-content>", 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"] }]
688
+ }], propDecorators: { _children: [{
702
689
  type: ContentChildren,
703
690
  args: [AXColorPaletteChildComponent]
704
691
  }], __hostDisabled: [{
@@ -707,6 +694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
707
694
  }] } });
708
695
 
709
696
  const MODULES = [
697
+ FormsModule,
710
698
  AXTextBoxModule,
711
699
  AXLabelModule,
712
700
  AXButtonModule,
@@ -723,12 +711,13 @@ const CONPONENTS = [
723
711
  AXColorPalettePickerComponent
724
712
  ];
725
713
  class AXColorPaletteModule {
726
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPaletteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
727
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: AXColorPaletteModule, declarations: [AXColorPalleteComponent,
714
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXColorPaletteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
715
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: AXColorPaletteModule, declarations: [AXColorPalleteComponent,
728
716
  AXColorPalettePreviewComponent,
729
717
  AXColorPaletteSwatchesComponent,
730
718
  AXColorPaletteInputComponent,
731
- AXColorPalettePickerComponent], imports: [CommonModule, AXTextBoxModule,
719
+ AXColorPalettePickerComponent], imports: [CommonModule, FormsModule,
720
+ AXTextBoxModule,
732
721
  AXLabelModule,
733
722
  AXButtonModule,
734
723
  AXDecoratorModule,
@@ -739,9 +728,9 @@ class AXColorPaletteModule {
739
728
  AXColorPaletteSwatchesComponent,
740
729
  AXColorPaletteInputComponent,
741
730
  AXColorPalettePickerComponent] }); }
742
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPaletteModule, imports: [CommonModule, MODULES] }); }
731
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXColorPaletteModule, imports: [CommonModule, MODULES] }); }
743
732
  }
744
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPaletteModule, decorators: [{
733
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXColorPaletteModule, decorators: [{
745
734
  type: NgModule,
746
735
  args: [{
747
736
  declarations: [...CONPONENTS],
@@ -755,5 +744,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
755
744
  * Generated bundle index. Do not edit.
756
745
  */
757
746
 
758
- export { AXColorComponent, AXColorPaletteChildComponent, AXColorPaletteInputComponent, AXColorPaletteModule, AXColorPalettePickerComponent, AXColorPalettePreviewComponent, AXColorPaletteSwatchesComponent, AXColorPalleteComponent };
747
+ export { AXColorPaletteChildComponent, AXColorPaletteInputComponent, AXColorPaletteModule, AXColorPaletteParentComponent, AXColorPalettePickerComponent, AXColorPalettePreviewComponent, AXColorPaletteSwatchesComponent, AXColorPalleteComponent, AXDefaultColorPalette };
759
748
  //# sourceMappingURL=acorex-components-color-palette.mjs.map