@acorex/components 19.9.0 → 19.10.0-next.0

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

@@ -2,13 +2,15 @@ import { MXBaseComponent, MXValueComponent, AXValuableComponent } from '@acorex/
 import * as i1 from '@acorex/core/utils';
 import { AXColorUtil, AXUnsubscriber } from '@acorex/core/utils';
 import * as i0 from '@angular/core';
-import { Injectable, HostBinding, Inject, ChangeDetectionStrategy, ViewEncapsulation, Component, viewChild, signal, Input, forwardRef, ContentChildren, NgModule } from '@angular/core';
+import { Injectable, HostBinding, Inject, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, Renderer2, NgZone, viewChild, signal, Input, forwardRef, ContentChildren, NgModule } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i3 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
 import * as i4 from '@acorex/components/number-box';
 import { AXNumberBoxModule } from '@acorex/components/number-box';
+import * as i5 from '@acorex/components/select-box';
+import { AXSelectBoxModule } from '@acorex/components/select-box';
 import * as i3$1 from '@acorex/components/range-slider';
 import { AXRangeSliderModule } from '@acorex/components/range-slider';
 import { distinctUntilChanged } from 'rxjs/operators';
@@ -37,223 +39,291 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 const AXDefaultColorPalette = [
     { code: '#ffffff' },
     { code: '#000000' },
-    { code: '#9E9E9E' },
-    { code: '#FFC107' },
-    { code: '#607D8B' },
-    { code: '#2196F3' },
-    { code: '#FF5722' },
-    { code: '#4CAF50' },
-    { code: '#9c27b0' },
-    { code: '#3F51B5' },
-    // Amber
-    { code: '#fff8e1' },
-    { code: '#ffecb3' },
-    { code: '#ffe082' },
-    { code: '#ffd54f' },
-    { code: '#ffca28' },
-    { code: '#ffc107' },
-    { code: '#ffb300' },
-    { code: '#ffa000' },
-    { code: '#ff8f00' },
-    { code: '#ff6f00' },
-    // Blue Grey
-    { code: '#ECEFF1' },
-    { code: '#CFD8DC' },
-    { code: '#B0BEC5' },
-    { code: '#90A4AE' },
-    { code: '#78909C' },
-    { code: '#607D8B' },
-    { code: '#546E7A' },
-    { code: '#455A64' },
-    { code: '#37474F' },
-    { code: '#263238' },
-    // Blue
-    { code: '#E3F2FD' },
-    { code: '#BBDEFB' },
-    { code: '#90CAF9' },
-    { code: '#64B5F6' },
-    { code: '#42A5F5' },
-    { code: '#2196F3' },
-    { code: '#1E88E5' },
-    { code: '#1976D2' },
-    { code: '#1565C0' },
-    { code: '#0D47A1' },
-    // Brown
-    { code: '#EFEBE9' },
-    { code: '#D7CCC8' },
-    { code: '#BCAAA4' },
-    { code: '#A1887F' },
-    { code: '#8D6E63' },
-    { code: '#795548' },
-    { code: '#6D4C41' },
-    { code: '#5D4037' },
-    { code: '#4E342E' },
-    { code: '#3E2723' },
-    // Cyan
-    { code: '#E0F7FA' },
-    { code: '#B2EBF2' },
-    { code: '#80DEEA' },
-    { code: '#4DD0E1' },
-    { code: '#26C6DA' },
-    { code: '#00BCD4' },
-    { code: '#00ACC1' },
-    { code: '#0097A7' },
-    { code: '#00838F' },
-    { code: '#006064' },
-    // Deep Orange
-    { code: '#FBE9E7' },
-    { code: '#FFCCBC' },
-    { code: '#FFAB91' },
-    { code: '#FF8A65' },
-    { code: '#FF7043' },
-    { code: '#FF5722' },
-    { code: '#F4511E' },
-    { code: '#E64A19' },
-    { code: '#D84315' },
-    { code: '#BF360C' },
-    // Deep Purple
-    { code: '#EDE7F6' },
-    { code: '#D1C4E9' },
-    { code: '#B39DDB' },
-    { code: '#9575CD' },
-    { code: '#7E57C2' },
-    { code: '#673AB7' },
-    { code: '#5E35B1' },
-    { code: '#512DA8' },
-    { code: '#4527A0' },
-    { code: '#311B92' },
-    // Green
-    { code: '#E8F5E9' },
-    { code: '#C8E6C9' },
-    { code: '#A5D6A7' },
-    { code: '#81C784' },
-    { code: '#66BB6A' },
-    { code: '#4CAF50' },
-    { code: '#43A047' },
-    { code: '#388E3C' },
-    { code: '#2E7D32' },
-    { code: '#1B5E20' },
-    // Grey
-    { code: '#FAFAFA' },
-    { code: '#F5F5F5' },
-    { code: '#EEEEEE' },
-    { code: '#E0E0E0' },
-    { code: '#BDBDBD' },
-    { code: '#9E9E9E' },
-    { code: '#757575' },
-    { code: '#616161' },
-    { code: '#424242' },
-    { code: '#212121' },
-    // Indigo
-    { code: '#E8EAF6' },
-    { code: '#C5CAE9' },
-    { code: '#9FA8DA' },
-    { code: '#7986CB' },
-    { code: '#5C6BC0' },
-    { code: '#3F51B5' },
-    { code: '#3949AB' },
-    { code: '#303F9F' },
-    { code: '#283593' },
-    { code: '#1A237E' },
-    // Light Blue
-    { code: '#E1F5FE' },
-    { code: '#B3E5FC' },
-    { code: '#81D4FA' },
-    { code: '#4FC3F7' },
-    { code: '#29B6F6' },
-    { code: '#03A9F4' },
-    { code: '#039BE5' },
-    { code: '#0288D1' },
-    { code: '#0277BD' },
-    { code: '#01579B' },
-    // Light Green
-    { code: '#F1F8E9' },
-    { code: '#DCEDC8' },
-    { code: '#C5E1A5' },
-    { code: '#AED581' },
-    { code: '#9CCC65' },
-    { code: '#8BC34A' },
-    { code: '#7CB342' },
-    { code: '#689F38' },
-    { code: '#558B2F' },
-    { code: '#33691E' },
-    // Lime
-    { code: '#F9FBE7' },
-    { code: '#F0F4C3' },
-    { code: '#E6EE9C' },
-    { code: '#DCE775' },
-    { code: '#D4E157' },
-    { code: '#CDDC39' },
-    { code: '#C0CA33' },
-    { code: '#AFB42B' },
-    { code: '#9E9D24' },
-    { code: '#827717' },
-    // Orange
-    { code: '#FFF3E0' },
-    { code: '#FFE0B2' },
-    { code: '#FFCC80' },
-    { code: '#FFB74D' },
-    { code: '#FFA726' },
-    { code: '#FF9800' },
-    { code: '#FB8C00' },
-    { code: '#F57C00' },
-    { code: '#EF6C00' },
-    { code: '#E65100' },
-    // Pink
-    { code: '#FCE4EC' },
-    { code: '#F8BBD0' },
-    { code: '#F48FB1' },
-    { code: '#F06292' },
-    { code: '#EC407A' },
-    { code: '#E91E63' },
-    { code: '#D81B60' },
-    { code: '#C2185B' },
-    { code: '#AD1457' },
-    { code: '#880E4F' },
-    // Purple
-    { code: '#F3E5F5' },
-    { code: '#E1BEE7' },
-    { code: '#CE93D8' },
-    { code: '#BA68C8' },
-    { code: '#AB47BC' },
-    { code: '#9C27B0' },
-    { code: '#8E24AA' },
-    { code: '#7B1FA2' },
-    { code: '#6A1B9A' },
-    { code: '#4A148C' },
-    // Red
-    { code: '#FFEBEE' },
-    { code: '#FFCDD2' },
-    { code: '#EF9A9A' },
-    { code: '#E57373' },
-    { code: '#EF5350' },
-    { code: '#F44336' },
-    { code: '#E53935' },
-    { code: '#D32F2F' },
-    { code: '#C62828' },
-    { code: '#B71C1C' },
-    // Teal
-    { code: '#E0F2F1' },
-    { code: '#B2DFDB' },
-    { code: '#80CBC4' },
-    { code: '#4DB6AC' },
-    { code: '#26A69A' },
-    { code: '#009688' },
-    { code: '#00897B' },
-    { code: '#00796B' },
-    { code: '#00695C' },
-    { code: '#004D40' },
-    // Yellow
-    { code: '#FFFDE7' },
-    { code: '#FFF9C4' },
-    { code: '#FFF59D' },
-    { code: '#FFF176' },
-    { code: '#FFEE58' },
-    { code: '#FFEB3B' },
-    { code: '#FDD835' },
-    { code: '#FBC02D' },
-    { code: '#F9A825' },
-    { code: '#F57F17' },
+    //500
+    { code: 'rgb(251,44,54)' },
+    { code: 'rgb(255,105,0)' },
+    { code: 'rgb(253,154,0)' },
+    { code: 'rgb(239,177,0)' },
+    { code: 'rgb(124,207,0)' },
+    { code: 'rgb(0,201,81)' },
+    { code: 'rgb(0,188,125)' },
+    { code: 'rgb(0,187,167)' },
+    { code: 'rgb(0,184,219)' },
+    { code: 'rgb(0,166,244)' },
+    { code: 'rgb(43,127,255)' },
+    { code: 'rgb(97,95,255)' },
+    { code: 'rgb(142,81,255)' },
+    { code: 'rgb(173,70,255)' },
+    { code: 'rgb(225,42,251)' },
+    { code: 'rgb(246,51,154)' },
+    { code: 'rgb(255,32,86)' },
+    { code: 'rgb(98,116,142)' },
+    { code: 'rgb(106,114,130)' },
+    { code: 'rgb(113,113,123)' },
+    //red
+    { code: 'rgb(254,242,242)' },
+    { code: 'rgb(255,226,226)' },
+    { code: 'rgb(255,201,201)' },
+    { code: 'rgb(255,162,162)' },
+    { code: 'rgb(255,100,103)' },
+    { code: 'rgb(251,44,54)' },
+    { code: 'rgb(231,0,11)' },
+    { code: 'rgb(193,0,7)' },
+    { code: 'rgb(159,7,18)' },
+    { code: 'rgb(130,24,26)' },
+    { code: 'rgb(70,8,9)' },
+    //orange
+    { code: 'rgb(255,247,237)' },
+    { code: 'rgb(255,237,212)' },
+    { code: 'rgb(255,214,168)' },
+    { code: 'rgb(255,184,106)' },
+    { code: 'rgb(255,137,4)' },
+    { code: 'rgb(255,105,0)' },
+    { code: 'rgb(245,74,0)' },
+    { code: 'rgb(202,53,0)' },
+    { code: 'rgb(159,45,0)' },
+    { code: 'rgb(126,42,12)' },
+    { code: 'rgb(68,19,6)' },
+    //amber
+    { code: 'rgb(255,251,235)' },
+    { code: 'rgb(254,243,198)' },
+    { code: 'rgb(254,230,133)' },
+    { code: 'rgb(255,210,48)' },
+    { code: 'rgb(255,186,0)' },
+    { code: 'rgb(253,154,0)' },
+    { code: 'rgb(225,113,0)' },
+    { code: 'rgb(187,77,0)' },
+    { code: 'rgb(151,60,0)' },
+    { code: 'rgb(123,51,6)' },
+    { code: 'rgb(70,25,1)' },
+    //yellow
+    { code: 'rgb(254,252,232)' },
+    { code: 'rgb(254,249,194)' },
+    { code: 'rgb(255,240,133)' },
+    { code: 'rgb(255,223,32)' },
+    { code: 'rgb(252,200,0)' },
+    { code: 'rgb(239,177,0)' },
+    { code: 'rgb(208,135,0)' },
+    { code: 'rgb(166,95,0)' },
+    { code: 'rgb(137,75,0)' },
+    { code: 'rgb(115,62,10)' },
+    { code: 'rgb(67,32,4)' },
+    //lime
+    { code: 'rgb(247,254,231)' },
+    { code: 'rgb(236,252,202)' },
+    { code: 'rgb(216,249,153)' },
+    { code: 'rgb(187,244,81)' },
+    { code: 'rgb(154,230,0)' },
+    { code: 'rgb(124,207,0)' },
+    { code: 'rgb(94,165,0)' },
+    { code: 'rgb(73,125,0)' },
+    { code: 'rgb(61,99,0)' },
+    { code: 'rgb(53,83,14)' },
+    { code: 'rgb(25,46,3)' },
+    //green
+    { code: 'rgb(240,253,244)' },
+    { code: 'rgb(220,252,231)' },
+    { code: 'rgb(185,248,207)' },
+    { code: 'rgb(123,241,168)' },
+    { code: 'rgb(5,223,114)' },
+    { code: 'rgb(0,201,81)' },
+    { code: 'rgb(0,166,62)' },
+    { code: 'rgb(0,130,54)' },
+    { code: 'rgb(1,102,48)' },
+    { code: 'rgb(13,84,43)' },
+    { code: 'rgb(3,46,21)' },
+    //emerald
+    { code: 'rgb(236,253,245)' },
+    { code: 'rgb(208,250,229)' },
+    { code: 'rgb(164,244,207)' },
+    { code: 'rgb(94,233,181)' },
+    { code: 'rgb(0,212,146)' },
+    { code: 'rgb(0,188,125)' },
+    { code: 'rgb(0,153,102)' },
+    { code: 'rgb(0,122,85)' },
+    { code: 'rgb(0,96,69)' },
+    { code: 'rgb(0,79,59)' },
+    { code: 'rgb(0,44,34)' },
+    //teal
+    { code: 'rgb(240,253,250)' },
+    { code: 'rgb(203,251,241)' },
+    { code: 'rgb(150,247,228)' },
+    { code: 'rgb(70,236,213)' },
+    { code: 'rgb(0,213,190)' },
+    { code: 'rgb(0,187,167)' },
+    { code: 'rgb(0,150,137)' },
+    { code: 'rgb(0,120,111)' },
+    { code: 'rgb(0,95,90)' },
+    { code: 'rgb(11,79,74)' },
+    { code: 'rgb(2,47,46)' },
+    //cyan
+    { code: 'rgb(236,254,255)' },
+    { code: 'rgb(206,250,254)' },
+    { code: 'rgb(162,244,253)' },
+    { code: 'rgb(83,234,253)' },
+    { code: 'rgb(0,211,242)' },
+    { code: 'rgb(0,184,219)' },
+    { code: 'rgb(0,146,184)' },
+    { code: 'rgb(0,117,149)' },
+    { code: 'rgb(0,95,120)' },
+    { code: 'rgb(16,78,100)' },
+    { code: 'rgb(5,51,69)' },
+    //sky
+    { code: 'rgb(240,249,255)' },
+    { code: 'rgb(223,242,254)' },
+    { code: 'rgb(184,230,254)' },
+    { code: 'rgb(116,212,255)' },
+    { code: 'rgb(0,188,255)' },
+    { code: 'rgb(0,166,244)' },
+    { code: 'rgb(0,132,209)' },
+    { code: 'rgb(0,105,168)' },
+    { code: 'rgb(0,89,138)' },
+    { code: 'rgb(2,74,112)' },
+    { code: 'rgb(5,47,74)' },
+    //blue
+    { code: 'rgb(239,246,255)' },
+    { code: 'rgb(219,234,254)' },
+    { code: 'rgb(190,219,255)' },
+    { code: 'rgb(142,197,255)' },
+    { code: 'rgb(81,162,255)' },
+    { code: 'rgb(43,127,255)' },
+    { code: 'rgb(21,93,252)' },
+    { code: 'rgb(20,71,230)' },
+    { code: 'rgb(25,60,184)' },
+    { code: 'rgb(28,57,142)' },
+    { code: 'rgb(22,36,86)' },
+    //indigo
+    { code: 'rgb(238,242,255)' },
+    { code: 'rgb(224,231,255)' },
+    { code: 'rgb(198,210,255)' },
+    { code: 'rgb(163,179,255)' },
+    { code: 'rgb(124,134,255)' },
+    { code: 'rgb(97,95,255)' },
+    { code: 'rgb(79,57,246)' },
+    { code: 'rgb(67,45,215)' },
+    { code: 'rgb(55,42,172)' },
+    { code: 'rgb(49,44,133)' },
+    { code: 'rgb(30,26,77)' },
+    //violet
+    { code: 'rgb(245,243,255)' },
+    { code: 'rgb(237,233,254)' },
+    { code: 'rgb(221,214,255)' },
+    { code: 'rgb(196,180,255)' },
+    { code: 'rgb(166,132,255)' },
+    { code: 'rgb(142,81,255)' },
+    { code: 'rgb(127,34,254)' },
+    { code: 'rgb(112,8,231)' },
+    { code: 'rgb(93,14,192)' },
+    { code: 'rgb(77,23,154)' },
+    { code: 'rgb(47,13,104)' },
+    //purple
+    { code: 'rgb(250,245,255)' },
+    { code: 'rgb(243,232,255)' },
+    { code: 'rgb(233,212,255)' },
+    { code: 'rgb(218,178,255)' },
+    { code: 'rgb(194,122,255)' },
+    { code: 'rgb(173,70,255)' },
+    { code: 'rgb(152,16,250)' },
+    { code: 'rgb(130,0,219)' },
+    { code: 'rgb(110,17,176)' },
+    { code: 'rgb(89,22,139)' },
+    { code: 'rgb(60,3,102)' },
+    //fuchsia
+    { code: 'rgb(253,244,255)' },
+    { code: 'rgb(250,232,255)' },
+    { code: 'rgb(246,207,255)' },
+    { code: 'rgb(244,168,255)' },
+    { code: 'rgb(237,107,255)' },
+    { code: 'rgb(225,42,251)' },
+    { code: 'rgb(200,0,222)' },
+    { code: 'rgb(168,0,183)' },
+    { code: 'rgb(138,1,148)' },
+    { code: 'rgb(114,19,120)' },
+    { code: 'rgb(75,0,79)' },
+    //pink
+    { code: 'rgb(253,242,248)' },
+    { code: 'rgb(252,231,243)' },
+    { code: 'rgb(252,206,232)' },
+    { code: 'rgb(253,165,213)' },
+    { code: 'rgb(251,100,182)' },
+    { code: 'rgb(246,51,154)' },
+    { code: 'rgb(230,0,118)' },
+    { code: 'rgb(198,0,92)' },
+    { code: 'rgb(163,0,76)' },
+    { code: 'rgb(134,16,67)' },
+    { code: 'rgb(81,4,36)' },
+    //rose
+    { code: 'rgb(255,241,242)' },
+    { code: 'rgb(255,228,230)' },
+    { code: 'rgb(255,204,211)' },
+    { code: 'rgb(255,161,173)' },
+    { code: 'rgb(255,99,126)' },
+    { code: 'rgb(255,32,86)' },
+    { code: 'rgb(236,0,63)' },
+    { code: 'rgb(199,0,54)' },
+    { code: 'rgb(165,0,54)' },
+    { code: 'rgb(139,8,54)' },
+    { code: 'rgb(77,2,24)' },
+    //slate
+    { code: 'rgb(248,250,252)' },
+    { code: 'rgb(241,245,249)' },
+    { code: 'rgb(226,232,240)' },
+    { code: 'rgb(202,213,226)' },
+    { code: 'rgb(144,161,185)' },
+    { code: 'rgb(98,116,142)' },
+    { code: 'rgb(69,85,108)' },
+    { code: 'rgb(49,65,88)' },
+    { code: 'rgb(29,41,61)' },
+    { code: 'rgb(15,23,43)' },
+    { code: 'rgb(2,6,24)' },
+    //gray
+    { code: 'rgb(249,250,251)' },
+    { code: 'rgb(243,244,246)' },
+    { code: 'rgb(229,231,235)' },
+    { code: 'rgb(209,213,220)' },
+    { code: 'rgb(153,161,175)' },
+    { code: 'rgb(106,114,130)' },
+    { code: 'rgb(74,85,101)' },
+    { code: 'rgb(54,65,83)' },
+    { code: 'rgb(30,41,57)' },
+    { code: 'rgb(16,24,40)' },
+    { code: 'rgb(3,7,18)' },
+    //zinc
+    { code: 'rgb(250,250,250)' },
+    { code: 'rgb(244,244,245)' },
+    { code: 'rgb(228,228,231)' },
+    { code: 'rgb(212,212,216)' },
+    { code: 'rgb(159,159,169)' },
+    { code: 'rgb(113,113,123)' },
+    { code: 'rgb(82,82,92)' },
+    { code: 'rgb(63,63,70)' },
+    { code: 'rgb(39,39,42)' },
+    { code: 'rgb(24,24,27)' },
+    { code: 'rgb(9,9,11)' },
+    //neutral
+    { code: 'rgb(250,250,250)' },
+    { code: 'rgb(245,245,245)' },
+    { code: 'rgb(229,229,229)' },
+    { code: 'rgb(212,212,212)' },
+    { code: 'rgb(161,161,161)' },
+    { code: 'rgb(115,115,115)' },
+    { code: 'rgb(82,82,82)' },
+    { code: 'rgb(64,64,64)' },
+    { code: 'rgb(38,38,38)' },
+    { code: 'rgb(23,23,23)' },
+    { code: 'rgb(10,10,10)' },
+    //stone
+    { code: 'rgb(250,250,249)' },
+    { code: 'rgb(245,245,244)' },
+    { code: 'rgb(231,229,228)' },
+    { code: 'rgb(214,211,209)' },
+    { code: 'rgb(166,160,155)' },
+    { code: 'rgb(121,113,107)' },
+    { code: 'rgb(87,83,77)' },
+    { code: 'rgb(68,64,59)' },
+    { code: 'rgb(41,37,36)' },
+    { code: 'rgb(28,25,23)' },
+    { code: 'rgb(12,10,9)' },
 ];
 
 /**
@@ -280,7 +350,7 @@ class AXColorPaletteInputComponent extends MXBaseComponent {
         /**
          *  @ignore
          */
-        this._colorMode = 'rgba';
+        this._colorMode = 'hex';
         /**
          *  @ignore
          */
@@ -312,9 +382,6 @@ class AXColorPaletteInputComponent extends MXBaseComponent {
             };
         }
         else {
-            if (!u && this._rgba.a != 1) {
-                this._colorMode = 'rgba';
-            }
             if (this._colorMode == 'rgba') {
                 Object.assign(this._rgba, AXColorUtil.to(value, 'rgba'));
             }
@@ -335,16 +402,7 @@ class AXColorPaletteInputComponent extends MXBaseComponent {
      *  @ignore
      */
     _handleChangeInputMode() {
-        switch (this._colorMode) {
-            case 'rgba':
-                this._colorMode = 'hex';
-                this.applyParent(true);
-                break;
-            default:
-                this._colorMode = 'rgba';
-                this.applyParent(true);
-                break;
-        }
+        this.applyParent(true);
     }
     /**
      *  @ignore
@@ -384,7 +442,7 @@ class AXColorPaletteInputComponent extends MXBaseComponent {
                 useExisting: AXColorPaletteInputComponent,
             },
             AXUnsubscriber,
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"palette-inputs\">\n  @switch (_colorMode) {\n    @case ('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        >\n        </ax-text-box>\n        <label>HEX</label>\n      </div>\n    }\n    @case ('rgba') {\n      <div>\n        <ax-number-box\n          class=\"ax-sm\"\n          name=\"r\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.r\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n        <label>R</label>\n      </div>\n      <div>\n        <ax-number-box\n          class=\"ax-sm\"\n          name=\"g\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.g\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n        <label>G</label>\n      </div>\n      <div>\n        <ax-number-box\n          class=\"ax-sm\"\n          name=\"b\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.b\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n        <label>B</label>\n      </div>\n      <div>\n        <ax-number-box\n          class=\"ax-sm\"\n          name=\"a\"\n          [minValue]=\"0\"\n          [maxValue]=\"1\"\n          [ngModel]=\"_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        >\n        </ax-number-box>\n        <label>A</label>\n      </div>\n    }\n  }\n</div>\n<button\n  type=\"button\"\n  class=\"ax-general-button ax-button-rounded ax-button-icon ax-sm\"\n  (click)=\"_handleChangeInputMode()\"\n  [disabled]=\"_parent.disabled\"\n>\n  <span class=\"ax-icon ax-icon-unfold-more ax-bold\"></span>\n</button>\n", styles: [".ax-bold{font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: i4.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"palette-inputs ax-sm\">\n  <div class=\"select-box-container\">\n    <ax-select-box\n      [dataSource]=\"['hex', 'rgba']\"\n      [(ngModel)]=\"_colorMode\"\n      (ngModelChange)=\"_handleChangeInputMode()\"\n      [disabled]=\"_parent.disabled\"\n    >\n    </ax-select-box>\n  </div>\n  @switch (_colorMode) {\n    @case ('hex') {\n      <div>\n        <ax-text-box\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        >\n        </ax-text-box>\n      </div>\n    }\n    @case ('rgba') {\n      <div>\n        <ax-number-box\n          name=\"r\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.r\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n      </div>\n      <div>\n        <ax-number-box\n          name=\"g\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.g\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n      </div>\n      <div>\n        <ax-number-box\n          name=\"b\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.b\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n      </div>\n      <div>\n        <ax-number-box\n          name=\"a\"\n          [minValue]=\"0\"\n          [maxValue]=\"1\"\n          [ngModel]=\"_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        >\n        </ax-number-box>\n      </div>\n    }\n  }\n</div>\n", styles: [".ax-bold{font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: i4.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: i5.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPaletteInputComponent, decorators: [{
             type: Component,
@@ -394,7 +452,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                             useExisting: AXColorPaletteInputComponent,
                         },
                         AXUnsubscriber,
-                    ], standalone: false, template: "<div class=\"palette-inputs\">\n  @switch (_colorMode) {\n    @case ('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        >\n        </ax-text-box>\n        <label>HEX</label>\n      </div>\n    }\n    @case ('rgba') {\n      <div>\n        <ax-number-box\n          class=\"ax-sm\"\n          name=\"r\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.r\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n        <label>R</label>\n      </div>\n      <div>\n        <ax-number-box\n          class=\"ax-sm\"\n          name=\"g\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.g\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n        <label>G</label>\n      </div>\n      <div>\n        <ax-number-box\n          class=\"ax-sm\"\n          name=\"b\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.b\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n        <label>B</label>\n      </div>\n      <div>\n        <ax-number-box\n          class=\"ax-sm\"\n          name=\"a\"\n          [minValue]=\"0\"\n          [maxValue]=\"1\"\n          [ngModel]=\"_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        >\n        </ax-number-box>\n        <label>A</label>\n      </div>\n    }\n  }\n</div>\n<button\n  type=\"button\"\n  class=\"ax-general-button ax-button-rounded ax-button-icon ax-sm\"\n  (click)=\"_handleChangeInputMode()\"\n  [disabled]=\"_parent.disabled\"\n>\n  <span class=\"ax-icon ax-icon-unfold-more ax-bold\"></span>\n</button>\n", styles: [".ax-bold{font-weight:700}\n"] }]
+                    ], standalone: false, template: "<div class=\"palette-inputs ax-sm\">\n  <div class=\"select-box-container\">\n    <ax-select-box\n      [dataSource]=\"['hex', 'rgba']\"\n      [(ngModel)]=\"_colorMode\"\n      (ngModelChange)=\"_handleChangeInputMode()\"\n      [disabled]=\"_parent.disabled\"\n    >\n    </ax-select-box>\n  </div>\n  @switch (_colorMode) {\n    @case ('hex') {\n      <div>\n        <ax-text-box\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        >\n        </ax-text-box>\n      </div>\n    }\n    @case ('rgba') {\n      <div>\n        <ax-number-box\n          name=\"r\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.r\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n      </div>\n      <div>\n        <ax-number-box\n          name=\"g\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.g\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n      </div>\n      <div>\n        <ax-number-box\n          name=\"b\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.b\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n      </div>\n      <div>\n        <ax-number-box\n          name=\"a\"\n          [minValue]=\"0\"\n          [maxValue]=\"1\"\n          [ngModel]=\"_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        >\n        </ax-number-box>\n      </div>\n    }\n  }\n</div>\n", styles: [".ax-bold{font-weight:700}\n"] }]
         }], ctorParameters: () => [{ type: AXColorPaletteParentComponent, decorators: [{
                     type: Inject,
                     args: [AXColorPaletteParentComponent]
@@ -409,10 +467,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * @category Components
  */
 class AXColorPalettePickerComponent extends MXBaseComponent {
-    /**
-     *  @ignore
-     */
-    // protected dragPosition = { x: 0, y: 0 };
     /**
      *  @ignore
      */
@@ -420,6 +474,8 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
         super();
         this._parent = _parent;
         this._unsubscriber = _unsubscriber;
+        this.render = inject(Renderer2);
+        this.zone = inject(NgZone);
         this._rgba = {
             r: 0,
             g: 0,
@@ -436,6 +492,9 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
          *  @ignore
          */
         this._bgColor = '#F00';
+        this.colorBoxGradientBG = signal('');
+        this.colorBoxTransparentColor = { r: 0, g: 0, b: 0, a: 0 };
+        this.sample = viewChild('sample');
         /**
          *  @ignore
          */
@@ -456,13 +515,25 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
          *  @ignore
          */
         this._colors = this._gradients.rgb(100);
+        /**
+         *  @ignore
+         */
+        // protected dragPosition = { x: 0, y: 0 };
+        this.onPointerMoveListenerFn = () => undefined;
+        this.onPointerUpListenerFn = () => undefined;
         _parent.onValueChanged.pipe(_unsubscriber.takeUntilDestroy).subscribe((e) => {
+            Object.assign(this.colorBoxTransparentColor, AXColorUtil.to(e.value, 'rgba'));
+            this.sample().nativeElement.style.backgroundColor = AXColorUtil.toString(e.value, 'rgba');
             this.parentColorChanged();
         });
-        _parent.onOptionChanged.pipe(_unsubscriber.takeUntilDestroy).subscribe((e) => {
+        _parent.onOptionChanged.pipe(_unsubscriber.takeUntilDestroy).subscribe(() => {
             this.cdr.markForCheck();
         });
     }
+    ngOnDestroy() {
+        this.onPointerMoveListenerFn();
+        this.onPointerUpListenerFn();
+    }
     /**
      *  @ignore
      */
@@ -473,6 +544,8 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
             return Math.round(c) >= Math.round(hsv.h);
         });
         this._bgColor = AXColorUtil.toString({ h: hsv.h, s: 1, v: 1, a: this._rgba.a }, 'rgba');
+        const rgbaColor = this._bgColor.match(/\d+/g);
+        this.colorBoxGradientBG.set(rgbaColor[0] + ',' + rgbaColor[1] + ',' + rgbaColor[2]);
         this.setPointerByPercent(hsv.s * 100, hsv.v * 100);
     }
     /**
@@ -493,7 +566,9 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
                 Object.assign(this._rgba, AXColorUtil.to(color, 'rgba'));
             }
         }
-        this.setHSV();
+        if (!this.changingColor()) {
+            this.setHSV();
+        }
         this.cdr.detectChanges();
     }
     /**
@@ -514,69 +589,11 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
             const { s, v } = AXColorUtil.to(this._rgba, 'hsva');
             const { h } = this._colors[e].toHsv();
             this._parent.commitValue(AXColorUtil.toString({ h, s, v, a: this._rgba.a }, 'rgba'), true);
+            this._bgColor = AXColorUtil.toString({ h, s: 1, v: 1, a: this._rgba.a }, 'rgba');
+            const rgbaColor = this._bgColor.match(/\d+/g);
+            this.colorBoxGradientBG.set(rgbaColor[0] + ',' + rgbaColor[1] + ',' + rgbaColor[2]);
         }
     }
-    /**
-     *  @ignore
-     */
-    // protected _handleSurfaceClick(e: MouseEvent) {
-    //   if (this._parent.disabled || this._parent.readonly) {
-    //     e.preventDefault();
-    //     e.stopPropagation();
-    //     return;
-    //   }
-    //   const surface = this.getHostElement().querySelector<HTMLDivElement>('.ax-color-box-overlay');
-    //   const pointer = this.getHostElement().querySelector<HTMLDivElement>('.ax-color-box-pointer');
-    //   const x = e.offsetX;
-    //   const y = e.offsetY;
-    //   this.setColorByXY(x, y);
-    // }
-    /**
-     *  @ignore
-     */
-    // protected _handleDrag() {
-    //   if (this._parent.disabled || this._parent.readonly) {
-    //     return;
-    //   }
-    //   const surface = this.getHostElement().querySelector<HTMLDivElement>('.ax-color-box-overlay');
-    //   const sb = surface.getBoundingClientRect();
-    //   const pointer = this.getHostElement().querySelector<HTMLDivElement>('.ax-color-box-pointer');
-    //   const pb = pointer.getBoundingClientRect();
-    //   const w = pb.width / 2;
-    //   let x = pb.left - sb.left + w;
-    //   let y = pb.top - sb.top + w;
-    //   //
-    //   x = x < 0 ? 0 : x;
-    //   x = x > sb.width ? sb.width : x;
-    //   //
-    //   y = y < 0 ? 0 : y;
-    //   y = y > sb.height ? sb.height : y;
-    //   //
-    //   this.setColorByXY(x, y);
-    // }
-    /**
-     *  @ignore
-     */
-    // protected _handleDragMove(event: any) {
-    //   if (this._parent.disabled || this._parent.readonly) {
-    //     return;
-    //   }
-    //   const surface = this.getHostElement().querySelector<HTMLDivElement>('.ax-color-box-overlay');
-    //   const sb = surface.getBoundingClientRect();
-    //   // Get the position of the drag event relative to the surface
-    //   const dragPosition = event.pointerPosition;
-    //   // Calculate x and y offsets relative to the surface
-    //   let x = dragPosition.x - sb.left; // Pointer x position
-    //   let y = dragPosition.y - sb.top; // Pointer y position
-    //   // Clamp values to be within bounds
-    //   // Adjust the clamping logic to prevent overshooting by taking the pointer size into account
-    //   const pointerWidth = 20; // Assuming a pointer width of 20px, adjust as necessary
-    //   const pointerHeight = 20; // Assuming a pointer height of 20px, adjust as necessary
-    //   x = Math.max(0 + pointerWidth / 2, Math.min(x, sb.width - pointerWidth / 2)); // Center the pointer
-    //   y = Math.max(0 + pointerHeight / 2, Math.min(y, sb.height - pointerHeight / 2)); // Center the pointer
-    //   // Call the method to set the color based on the new x and y
-    //   this.setColorByXY(x, y);
-    // }
     /**
      *  @ignore
      */
@@ -592,6 +609,9 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
             a,
         };
         this._parent.commitValue(AXColorUtil.toString(hsva, 'rgba'), true);
+        const circleElement = this.circle().nativeElement;
+        const parentStats = circleElement.parentElement.getBoundingClientRect();
+        this.setPointerByPercent((x / parentStats.width) * 100, 100 - (y / parentStats.height) * 100);
     }
     /**
      *  @ignore
@@ -606,37 +626,27 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
         circleElement.style.top = `${top}px`;
         circleElement.style.left = `${left}px`;
     }
-    /**
-     *  @ignore
-     */
-    get __hostClass() {
-        return `ax-color-palette-picker`;
-    }
     handleMove(event) {
         if (!this.changingColor())
             return;
-        if (event instanceof MouseEvent) {
-            this.setColor(event.clientX, event.clientY);
-        }
-        else if (event instanceof TouchEvent) {
-            this.setColor(event.targetTouches[0].clientX, event.targetTouches[0].clientY);
-            event.preventDefault();
-        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.setColor(event.clientX, event.clientY);
     }
     handleDown(event) {
         if (this._parent.disabled || this._parent.readonly)
             return;
-        if (event instanceof MouseEvent) {
-            this.setColor(event.clientX, event.clientY);
-        }
-        else if (event instanceof TouchEvent) {
-            this.setColor(event.targetTouches[0].clientX, event.targetTouches[0].clientY);
-            event.preventDefault();
-        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.setColor(event.clientX, event.clientY);
         this.changingColor.set(true);
+        this.onPointerMoveListenerFn = this.render.listen('document', 'pointermove', (e) => this.handleMove(e));
+        this.onPointerUpListenerFn = this.render.listen('document', 'pointerup', () => this.handleUp());
     }
     handleUp() {
         this.changingColor.set(false);
+        this.onPointerMoveListenerFn();
+        this.onPointerUpListenerFn();
     }
     setColor(clientX, clientY) {
         const circleElement = this.circle().nativeElement;
@@ -645,6 +655,12 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
         const y = Math.max(0, Math.min(parentStats.height, clientY - parentStats.top));
         this.setColorByXY(x, y);
     }
+    /**
+     *  @ignore
+     */
+    get __hostClass() {
+        return `ax-color-palette-picker`;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPalettePickerComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXColorPalettePickerComponent, isStandalone: false, selector: "ax-color-palette-picker", host: { properties: { "class": "this.__hostClass" } }, providers: [
             {
@@ -652,7 +668,7 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
                 useExisting: AXColorPalettePickerComponent,
             },
             AXUnsubscriber,
-        ], viewQueries: [{ propertyName: "circle", first: true, predicate: ["circle"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-color-box-overlay-trans\">\n  <div\n    class=\"ax-color-box-overlay\"\n    [style.background-color]=\"_bgColor\"\n    (mousemove)=\"handleMove($event)\"\n    (mousedown)=\"handleDown($event)\"\n    (mouseup)=\"handleUp()\"\n    (mouseleave)=\"handleUp()\"\n    (touchmove)=\"handleMove($event)\"\n    (touchstart)=\"handleDown($event)\"\n    (touchend)=\"handleUp()\"\n  >\n    <div class=\"ax-color-box-overlay-g1\"></div>\n    <div class=\"ax-color-box-overlay-g2\"></div>\n    <div #circle class=\"ax-color-box-pointer\"></div>\n  </div>\n</div>\n\n<ax-range-slider\n  class=\"ax-color-box-gradient\"\n  [min]=\"0\"\n  [max]=\"100\"\n  [mode]=\"'single'\"\n  [ngModel]=\"_gradient\"\n  [disabled]=\"_parent.disabled\"\n  [readonly]=\"_parent.readonly\"\n  (ngModelChange)=\"_handleGradientChanged($event)\"\n>\n</ax-range-slider>\n<ax-range-slider\n  class=\"ax-color-box-transparent\"\n  [min]=\"0\"\n  [max]=\"1\"\n  [hasStep]=\"false\"\n  [ngModel]=\"_rgba.a\"\n  [disabled]=\"_parent.disabled\"\n  [readonly]=\"_parent.readonly\"\n  (ngModelChange)=\"_handleAlphaChanged($event)\"\n>\n</ax-range-slider>\n", dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "circle", first: true, predicate: ["circle"], descendants: true, isSignal: true }, { propertyName: "sample", first: true, predicate: ["sample"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-color-box-overlay-trans\">\n  <div class=\"ax-color-box-overlay\" [style.background-color]=\"_bgColor\" (pointerdown)=\"handleDown($event)\">\n    <div class=\"ax-color-box-overlay-g1\"></div>\n    <div class=\"ax-color-box-overlay-g2\"></div>\n    <div #circle class=\"ax-color-box-pointer\"></div>\n  </div>\n</div>\n<div class=\"ax-pickers-container\">\n  <div class=\"ax-slider-container\">\n    <ax-range-slider\n      [min]=\"0\"\n      [max]=\"99\"\n      [mode]=\"'single'\"\n      [ngModel]=\"_gradient\"\n      class=\"ax-color-box-gradient\"\n      [disabled]=\"_parent.disabled\"\n      [readonly]=\"_parent.readonly\"\n      (ngModelChange)=\"_handleGradientChanged($event)\"\n      [style.--ax-comp-range-slider-color]=\"colorBoxGradientBG()\"\n    >\n    </ax-range-slider>\n    <ax-range-slider\n      [min]=\"0\"\n      [max]=\"1\"\n      [step]=\"0.01\"\n      [ngModel]=\"_rgba.a\"\n      [disabled]=\"_parent.disabled\"\n      [readonly]=\"_parent.readonly\"\n      class=\"ax-color-box-transparent\"\n      (ngModelChange)=\"_handleAlphaChanged($event)\"\n      [style.--ax-comp-range-slider-color]=\"\n        colorBoxTransparentColor.r +\n        ',' +\n        colorBoxTransparentColor.g +\n        ',' +\n        colorBoxTransparentColor.b +\n        ',' +\n        colorBoxTransparentColor.a\n      \"\n      [style.--ax-comp-color-palette-transparent-color]=\"\n        'rgba(' +\n        colorBoxTransparentColor.r +\n        ',' +\n        colorBoxTransparentColor.g +\n        ',' +\n        colorBoxTransparentColor.b +\n        ')'\n      \"\n    >\n    </ax-range-slider>\n  </div>\n  <div class=\"ax-color-sample\" #sample></div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
             type: Component,
@@ -662,7 +678,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                             useExisting: AXColorPalettePickerComponent,
                         },
                         AXUnsubscriber,
-                    ], standalone: false, template: "<div class=\"ax-color-box-overlay-trans\">\n  <div\n    class=\"ax-color-box-overlay\"\n    [style.background-color]=\"_bgColor\"\n    (mousemove)=\"handleMove($event)\"\n    (mousedown)=\"handleDown($event)\"\n    (mouseup)=\"handleUp()\"\n    (mouseleave)=\"handleUp()\"\n    (touchmove)=\"handleMove($event)\"\n    (touchstart)=\"handleDown($event)\"\n    (touchend)=\"handleUp()\"\n  >\n    <div class=\"ax-color-box-overlay-g1\"></div>\n    <div class=\"ax-color-box-overlay-g2\"></div>\n    <div #circle class=\"ax-color-box-pointer\"></div>\n  </div>\n</div>\n\n<ax-range-slider\n  class=\"ax-color-box-gradient\"\n  [min]=\"0\"\n  [max]=\"100\"\n  [mode]=\"'single'\"\n  [ngModel]=\"_gradient\"\n  [disabled]=\"_parent.disabled\"\n  [readonly]=\"_parent.readonly\"\n  (ngModelChange)=\"_handleGradientChanged($event)\"\n>\n</ax-range-slider>\n<ax-range-slider\n  class=\"ax-color-box-transparent\"\n  [min]=\"0\"\n  [max]=\"1\"\n  [hasStep]=\"false\"\n  [ngModel]=\"_rgba.a\"\n  [disabled]=\"_parent.disabled\"\n  [readonly]=\"_parent.readonly\"\n  (ngModelChange)=\"_handleAlphaChanged($event)\"\n>\n</ax-range-slider>\n" }]
+                    ], standalone: false, template: "<div class=\"ax-color-box-overlay-trans\">\n  <div class=\"ax-color-box-overlay\" [style.background-color]=\"_bgColor\" (pointerdown)=\"handleDown($event)\">\n    <div class=\"ax-color-box-overlay-g1\"></div>\n    <div class=\"ax-color-box-overlay-g2\"></div>\n    <div #circle class=\"ax-color-box-pointer\"></div>\n  </div>\n</div>\n<div class=\"ax-pickers-container\">\n  <div class=\"ax-slider-container\">\n    <ax-range-slider\n      [min]=\"0\"\n      [max]=\"99\"\n      [mode]=\"'single'\"\n      [ngModel]=\"_gradient\"\n      class=\"ax-color-box-gradient\"\n      [disabled]=\"_parent.disabled\"\n      [readonly]=\"_parent.readonly\"\n      (ngModelChange)=\"_handleGradientChanged($event)\"\n      [style.--ax-comp-range-slider-color]=\"colorBoxGradientBG()\"\n    >\n    </ax-range-slider>\n    <ax-range-slider\n      [min]=\"0\"\n      [max]=\"1\"\n      [step]=\"0.01\"\n      [ngModel]=\"_rgba.a\"\n      [disabled]=\"_parent.disabled\"\n      [readonly]=\"_parent.readonly\"\n      class=\"ax-color-box-transparent\"\n      (ngModelChange)=\"_handleAlphaChanged($event)\"\n      [style.--ax-comp-range-slider-color]=\"\n        colorBoxTransparentColor.r +\n        ',' +\n        colorBoxTransparentColor.g +\n        ',' +\n        colorBoxTransparentColor.b +\n        ',' +\n        colorBoxTransparentColor.a\n      \"\n      [style.--ax-comp-color-palette-transparent-color]=\"\n        'rgba(' +\n        colorBoxTransparentColor.r +\n        ',' +\n        colorBoxTransparentColor.g +\n        ',' +\n        colorBoxTransparentColor.b +\n        ')'\n      \"\n    >\n    </ax-range-slider>\n  </div>\n  <div class=\"ax-color-sample\" #sample></div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: AXColorPaletteParentComponent, decorators: [{
                     type: Inject,
                     args: [AXColorPaletteParentComponent]
@@ -883,7 +899,7 @@ class AXColorPalleteComponent extends MXValueComponent {
                 provide: AXColorPaletteParentComponent,
                 useExisting: AXColorPalleteComponent,
             },
-        ], queries: [{ propertyName: "_children", predicate: AXColorPaletteChildComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select='ax-header'></ng-content>\n\n@if(_children?.length){\n<ng-container [ngTemplateOutlet]=\"custom\"></ng-container>\n} @else{\n<ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n\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;width:100%;flex-direction:column;border-radius:var(--ax-rounded-border-default);border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface))}@media (min-width: 768px){ax-color-palette{width:20rem}}ax-color-palette.ax-state-disabled{cursor:not-allowed;opacity:.5}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{cursor:not-allowed;opacity:.5}ax-color-palette ax-header,ax-color-palette ax-footer{display:flex;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.75rem}ax-color-palette ax-color-palette-preview{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;position:relative;height:6rem;width:100%;gap:.5rem;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default)}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;inset-inline-start:0px;display:flex;height:100%;width:100%;align-items:center;justify-content:center;border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default));text-transform:uppercase}ax-color-palette ax-color-palette-favorite{display:block;border-top-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;max-height:9rem;grid-template-columns:repeat(10,minmax(0,1fr));gap:.5rem;overflow-y:auto;overflow-x:hidden;padding:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:before,ax-color-palette ax-color-palette-favorite div:after{content:\"\"}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{float:left;padding-top:100%}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{clear:both;display:block}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{box-shadow:0 0 0 1px rgba(var(--ax-color-white)),0 0 0 3px rgba(var(--ax-color-black))}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:1rem}ax-color-palette ax-color-palette-input .palette-inputs .ax-editor-container .ax-input{padding:0}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-box-overlay-trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-color-box-overlay{position:relative;display:flex;height:8rem;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{position:relative;z-index:10;height:.75rem;width:.75rem;border-radius:9999px;border-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:transparent}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{position:absolute;bottom:0;inset-inline-end:0px;inset-inline-start:0px;top:0;height:100%;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1{background:linear-gradient(to right,#fff,#fff0);z-index:0}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{z-index:10;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker ax-range-slider .ax-range-slider-handler{background-color:rgba(var(--ax-color-white))!important;border:1px solid rgba(var(--ax-color-border-default))!important}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-gradient .ax-range-slider-bar{background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-gradient .ax-range-slider-highlight{background:transparent!important}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-transparent .ax-range-slider-bar{background-image:linear-gradient(to right,#f5f6fc00,#000),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-transparent .ax-range-slider-highlight{background:transparent!important}\n"], dependencies: [{ kind: "directive", type: i1$1.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 }); }
+        ], queries: [{ propertyName: "_children", predicate: AXColorPaletteChildComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select='ax-header'></ng-content>\n\n@if(_children?.length){\n<ng-container [ngTemplateOutlet]=\"custom\"></ng-container>\n} @else{\n<ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n\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;width:100%;flex-direction:column;border-radius:var(--ax-sys-border-radius);border-color:rgba(var(--ax-sys-border-color));background-color:rgba(var(--ax-sys-color-surface-lowest))}@media (min-width: 768px){ax-color-palette{width:20rem}}ax-color-palette.ax-state-disabled{cursor:not-allowed;opacity:.5}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{cursor:not-allowed;opacity:.5}ax-color-palette ax-header,ax-color-palette ax-footer{display:flex;border-top-width:1px;border-color:rgba(var(--ax-sys-border-color));padding:.75rem}ax-color-palette ax-color-palette-preview{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;position:relative;height:6rem;width:100%;gap:.5rem;border-top-left-radius:var(--ax-sys-border-radius);border-top-right-radius:var(--ax-sys-border-radius)}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;inset-inline-start:0px;display:flex;height:100%;width:100%;align-items:center;justify-content:center;border-bottom-width:1px;border-color:rgba(var(--ax-sys-border-color));text-transform:uppercase}ax-color-palette ax-color-palette-favorite{display:block;border-top-width:1px;border-color:rgba(var(--ax-sys-border-color))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;max-height:9rem;grid-template-columns:repeat(11,minmax(0,1fr));gap:.5rem;overflow-y:auto;overflow-x:hidden;padding:.5rem;scrollbar-width:thin}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:.25rem;border-width:1px;border-color:rgba(var(--ax-sys-border-color))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:before,ax-color-palette ax-color-palette-favorite div:after{content:\"\"}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{float:left;padding-top:100%}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{clear:both;display:block}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{border-color:rgba(var(--ax-sys-color-ghost-700));border-width:2px}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 .select-box-container{width:fit-content}ax-color-palette ax-color-palette-input .palette-inputs div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs .ax-editor-container .ax-input{padding:0;text-align:center}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-box-overlay-trans{overflow:hidden;border-radius:.25rem;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);border:1px solid rgba(var(--ax-sys-color-input-surface-border));touch-action:none}ax-color-palette ax-color-palette-picker .ax-color-box-overlay{position:relative;display:flex;height:8rem;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{position:relative;z-index:10;height:1rem;width:1rem;border-radius:9999px;border-width:.25rem;background-color:transparent;box-shadow:#00000080 0 0 5px;border-color:rgba(var(--ax-sys-color-surface-light))}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{position:absolute;bottom:0;inset-inline-end:0px;inset-inline-start:0px;top:0;height:100%;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1{background:linear-gradient(to right,#fff,#fff0);z-index:0}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{z-index:10;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker .ax-pickers-container{gap:1rem;display:flex}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container{width:100%;gap:.5rem;display:flex;flex-direction:column}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider{--ax-comp-range-slider-ring-size: 0;--ax-comp-range-slider-bar-height: 1rem;--ax-comp-range-slider-handler-size: 1rem;--ax-comp-range-slider-ring-color: var(--ax-sys-color-input-surface-border);padding:0}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler{border-width:.25rem;border-color:rgba(var(--ax-sys-color-surface-light));box-shadow:#00000080 0 0 5px}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler:hover{box-shadow:#00000080 0 0 7px}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-bar{background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-highlight{background:transparent!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-bar{background-image:linear-gradient(to right,rgba(255,255,255,0),var(--ax-comp-color-palette-transparent-color)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-highlight{background:transparent!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-color-sample{width:var(--ax-comp-color-palette-color-sample-width, 3.5rem);border-radius:.25rem;background-color:red;border:1px solid rgba(var(--ax-sys-color-input-surface-border))}\n"], dependencies: [{ kind: "directive", type: i1$1.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPalleteComponent, decorators: [{
             type: Component,
@@ -898,7 +914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                             provide: AXColorPaletteParentComponent,
                             useExisting: AXColorPalleteComponent,
                         },
-                    ], standalone: false, template: "<ng-content select='ax-header'></ng-content>\n\n@if(_children?.length){\n<ng-container [ngTemplateOutlet]=\"custom\"></ng-container>\n} @else{\n<ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n\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;width:100%;flex-direction:column;border-radius:var(--ax-rounded-border-default);border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface))}@media (min-width: 768px){ax-color-palette{width:20rem}}ax-color-palette.ax-state-disabled{cursor:not-allowed;opacity:.5}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{cursor:not-allowed;opacity:.5}ax-color-palette ax-header,ax-color-palette ax-footer{display:flex;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.75rem}ax-color-palette ax-color-palette-preview{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;position:relative;height:6rem;width:100%;gap:.5rem;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default)}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;inset-inline-start:0px;display:flex;height:100%;width:100%;align-items:center;justify-content:center;border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default));text-transform:uppercase}ax-color-palette ax-color-palette-favorite{display:block;border-top-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;max-height:9rem;grid-template-columns:repeat(10,minmax(0,1fr));gap:.5rem;overflow-y:auto;overflow-x:hidden;padding:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:before,ax-color-palette ax-color-palette-favorite div:after{content:\"\"}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{float:left;padding-top:100%}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{clear:both;display:block}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{box-shadow:0 0 0 1px rgba(var(--ax-color-white)),0 0 0 3px rgba(var(--ax-color-black))}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:1rem}ax-color-palette ax-color-palette-input .palette-inputs .ax-editor-container .ax-input{padding:0}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-box-overlay-trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-color-box-overlay{position:relative;display:flex;height:8rem;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{position:relative;z-index:10;height:.75rem;width:.75rem;border-radius:9999px;border-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:transparent}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{position:absolute;bottom:0;inset-inline-end:0px;inset-inline-start:0px;top:0;height:100%;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1{background:linear-gradient(to right,#fff,#fff0);z-index:0}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{z-index:10;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker ax-range-slider .ax-range-slider-handler{background-color:rgba(var(--ax-color-white))!important;border:1px solid rgba(var(--ax-color-border-default))!important}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-gradient .ax-range-slider-bar{background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-gradient .ax-range-slider-highlight{background:transparent!important}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-transparent .ax-range-slider-bar{background-image:linear-gradient(to right,#f5f6fc00,#000),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-transparent .ax-range-slider-highlight{background:transparent!important}\n"] }]
+                    ], standalone: false, template: "<ng-content select='ax-header'></ng-content>\n\n@if(_children?.length){\n<ng-container [ngTemplateOutlet]=\"custom\"></ng-container>\n} @else{\n<ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n\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;width:100%;flex-direction:column;border-radius:var(--ax-sys-border-radius);border-color:rgba(var(--ax-sys-border-color));background-color:rgba(var(--ax-sys-color-surface-lowest))}@media (min-width: 768px){ax-color-palette{width:20rem}}ax-color-palette.ax-state-disabled{cursor:not-allowed;opacity:.5}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{cursor:not-allowed;opacity:.5}ax-color-palette ax-header,ax-color-palette ax-footer{display:flex;border-top-width:1px;border-color:rgba(var(--ax-sys-border-color));padding:.75rem}ax-color-palette ax-color-palette-preview{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;position:relative;height:6rem;width:100%;gap:.5rem;border-top-left-radius:var(--ax-sys-border-radius);border-top-right-radius:var(--ax-sys-border-radius)}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;inset-inline-start:0px;display:flex;height:100%;width:100%;align-items:center;justify-content:center;border-bottom-width:1px;border-color:rgba(var(--ax-sys-border-color));text-transform:uppercase}ax-color-palette ax-color-palette-favorite{display:block;border-top-width:1px;border-color:rgba(var(--ax-sys-border-color))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;max-height:9rem;grid-template-columns:repeat(11,minmax(0,1fr));gap:.5rem;overflow-y:auto;overflow-x:hidden;padding:.5rem;scrollbar-width:thin}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:.25rem;border-width:1px;border-color:rgba(var(--ax-sys-border-color))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:before,ax-color-palette ax-color-palette-favorite div:after{content:\"\"}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{float:left;padding-top:100%}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{clear:both;display:block}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{border-color:rgba(var(--ax-sys-color-ghost-700));border-width:2px}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 .select-box-container{width:fit-content}ax-color-palette ax-color-palette-input .palette-inputs div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs .ax-editor-container .ax-input{padding:0;text-align:center}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-box-overlay-trans{overflow:hidden;border-radius:.25rem;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);border:1px solid rgba(var(--ax-sys-color-input-surface-border));touch-action:none}ax-color-palette ax-color-palette-picker .ax-color-box-overlay{position:relative;display:flex;height:8rem;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{position:relative;z-index:10;height:1rem;width:1rem;border-radius:9999px;border-width:.25rem;background-color:transparent;box-shadow:#00000080 0 0 5px;border-color:rgba(var(--ax-sys-color-surface-light))}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{position:absolute;bottom:0;inset-inline-end:0px;inset-inline-start:0px;top:0;height:100%;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1{background:linear-gradient(to right,#fff,#fff0);z-index:0}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{z-index:10;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker .ax-pickers-container{gap:1rem;display:flex}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container{width:100%;gap:.5rem;display:flex;flex-direction:column}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider{--ax-comp-range-slider-ring-size: 0;--ax-comp-range-slider-bar-height: 1rem;--ax-comp-range-slider-handler-size: 1rem;--ax-comp-range-slider-ring-color: var(--ax-sys-color-input-surface-border);padding:0}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler{border-width:.25rem;border-color:rgba(var(--ax-sys-color-surface-light));box-shadow:#00000080 0 0 5px}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler:hover{box-shadow:#00000080 0 0 7px}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-bar{background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-highlight{background:transparent!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-bar{background-image:linear-gradient(to right,rgba(255,255,255,0),var(--ax-comp-color-palette-transparent-color)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-highlight{background:transparent!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-color-sample{width:var(--ax-comp-color-palette-color-sample-width, 3.5rem);border-radius:.25rem;background-color:red;border:1px solid rgba(var(--ax-sys-color-input-surface-border))}\n"] }]
         }], propDecorators: { _children: [{
                 type: ContentChildren,
                 args: [AXColorPaletteChildComponent]
@@ -917,6 +933,7 @@ const MODULES = [
     AXRangeSliderModule,
     AXSliderModule,
     DragDropModule,
+    AXSelectBoxModule,
 ];
 const CONPONENTS = [
     AXColorPalleteComponent,
@@ -939,7 +956,8 @@ class AXColorPaletteModule {
             AXNumberBoxModule,
             AXRangeSliderModule,
             AXSliderModule,
-            DragDropModule], exports: [AXColorPalleteComponent,
+            DragDropModule,
+            AXSelectBoxModule], exports: [AXColorPalleteComponent,
             AXColorPalettePreviewComponent,
             AXColorPaletteSwatchesComponent,
             AXColorPaletteInputComponent,