refactor: doesn't close nested dropdown inside color-selector

projects/cdk/constants/used-icons.ts

@@ -51,5 +51,13 @@ export const TUI_USED_ICONS = [
     '@tui.arrow-right',
     '@tui.plus',
     '@tui.minimize',
+    '@tui.move-up-right',
+    '@tui.move-right',
+    '@tui.move-down-right',
+    '@tui.move-down',
+    '@tui.move-down-left',
+    '@tui.move-left',
+    '@tui.move-up-left',
+    '@tui.move-up',
     '@tui.clock',
 ] as const;

projects/demo/src/modules/components/input-color/examples/2/index.html

@@ -1,17 +1,14 @@
-<div
+<button
+    appearance=""
+    tuiButton
+    type="button"
+    [style.background]="background"
+    [style.color]="background"
     [tuiDropdown]="picker"
     [tuiDropdownOpen]="false"
 >
-    <button
-        appearance=""
-        tuiButton
-        type="button"
-        [style.background]="background"
-        [style.color]="background"
-    >
-        <span class="invert">Color me Kubrick</span>
-    </button>
-</div>
-<ng-template #picker>
-    <tui-color-selector [(color)]="color" />
-</ng-template>
+    <span class="invert">Color me Kubrick</span>
+    <ng-template #picker>
+        <tui-color-selector [(color)]="color" />
+    </ng-template>
+</button>

projects/demo/src/modules/components/input-color/examples/3/index.html

@@ -1,19 +1,16 @@
-<div
+<button
+    appearance=""
+    tuiButton
+    type="button"
+    [style.background]="color$ | async"
     [tuiDropdown]="palette"
     [tuiDropdownOpen]="false"
 >
-    <button
-        appearance=""
-        tuiButton
-        type="button"
-        [style.background]="color$ | async"
-    >
-        Palette only
-    </button>
-</div>
-<ng-template #palette>
-    <tui-palette
-        [colors]="colors"
-        (selectedColor)="updateColor($event)"
-    />
-</ng-template>
+    Palette only
+    <ng-template #palette>
+        <tui-palette
+            [colors]="colors"
+            (selectedColor)="updateColor($event)"
+        />
+    </ng-template>
+</button>

projects/legacy/components/color-selector/color-selector.component.ts

@@ -66,14 +66,14 @@ const DEFAULT_STEPS: ReadonlyArray<[number, [number, number, number, number]]> =
 ];
 
 const ICONS: Record<TuiGradientDirection, string> = {
-    'to top right': 'tuiIconArrowUpRight',
-    'to right': 'tuiIconArrowRight',
-    'to bottom right': 'tuiIconArrowDownRight',
-    'to bottom': 'tuiIconArrowDown',
-    'to bottom left': 'tuiIconArrowDownLeft',
-    'to left': 'tuiIconArrowLeft',
-    'to top left': 'tuiIconArrowUpLeft',
-    'to top': 'tuiIconArrowUp',
+    'to top right': '@tui.move-up-right',
+    'to right': '@tui.move-right',
+    'to bottom right': '@tui.move-down-right',
+    'to bottom': '@tui.move-down',
+    'to bottom left': '@tui.move-down-left',
+    'to left': '@tui.move-left',
+    'to top left': '@tui.move-up-left',
+    'to top': '@tui.move-up',
 };
 
 /**
@@ -90,6 +90,7 @@ export class TuiColorSelectorComponent {
     private currentStop = 0;
     private direction: TuiGradientDirection = 'to bottom';
     private readonly sanitizer = inject(DomSanitizer);
+    protected open = false;
 
     @Input()
     public colors: ReadonlyMap<string, string> = new Map<string, string>();
@@ -162,6 +163,7 @@ export class TuiColorSelectorComponent {
 
     public onModeSelect(mode: string): void {
         this.currentMode = mode;
+        this.open = false;
 
         this.updateColor(
             mode === this.modes[0]

projects/legacy/components/color-selector/color-selector.style.less

@@ -64,7 +64,7 @@
 }
 
 .t-select {
-    margin: 0.75rem 0.5rem;
+    margin: 0.75rem 0.5rem 0;
 }
 
 .t-arrow {
@@ -88,6 +88,7 @@
 .t-buttons {
     display: flex;
     padding: 0 0.75rem 1.25rem;
+    justify-content: space-between;
 }
 
 .t-direction {

projects/legacy/components/color-selector/color-selector.template.html

@@ -1,7 +1,7 @@
 <div
     class="t-select"
     [tuiDropdown]="menu"
-    [tuiDropdownOpen]="false"
+    [(tuiDropdownOpen)]="open"
 >
     <button
         appearance=""