From 8aa063baafc1c91e4d937c2b3321d9d94ce46a61 Mon Sep 17 00:00:00 2001
From: Alex Inkin <alexander@inkin.ru>
Date: Thu, 5 Dec 2024 15:16:58 +0400
Subject: [PATCH] feat(legacy): `MultiSelect` allow checkbox on the right side
 (#9910)

---
 .../modules/components/multi-select/examples/5/index.html   | 3 ++-
 .../modules/components/multi-select/examples/6/index.html   | 2 +-
 .../multi-select-option/multi-select-option.style.less      | 6 ++----
 .../multi-select-option/multi-select-option.template.html   | 1 -
 4 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/projects/demo/src/modules/components/multi-select/examples/5/index.html b/projects/demo/src/modules/components/multi-select/examples/5/index.html
index 547912f8a715..204482b62eca 100644
--- a/projects/demo/src/modules/components/multi-select/examples/5/index.html
+++ b/projects/demo/src/modules/components/multi-select/examples/5/index.html
@@ -13,9 +13,10 @@
                 *ngFor="let item of jedi"
                 tuiOption
                 type="button"
+                [style.flex-direction]="'row-reverse'"
                 [value]="item"
             >
-                {{ item }}
+                <span [style.flex]="1">{{ item }}</span>
             </button>
         </tui-opt-group>
         <tui-opt-group label="Sith">
diff --git a/projects/demo/src/modules/components/multi-select/examples/6/index.html b/projects/demo/src/modules/components/multi-select/examples/6/index.html
index f7844a6d0ba1..04a79231dad6 100644
--- a/projects/demo/src/modules/components/multi-select/examples/6/index.html
+++ b/projects/demo/src/modules/components/multi-select/examples/6/index.html
@@ -6,6 +6,6 @@
 >
     <tui-data-list-wrapper
         *tuiDataList
-        [items]="items"
+        [items]="items | tuiHideSelected"
     />
 </tui-multi-select>
diff --git a/projects/legacy/components/multi-select-option/multi-select-option.style.less b/projects/legacy/components/multi-select-option/multi-select-option.style.less
index f521219aec8c..9499c4f562da 100644
--- a/projects/legacy/components/multi-select-option/multi-select-option.style.less
+++ b/projects/legacy/components/multi-select-option/multi-select-option.style.less
@@ -12,11 +12,9 @@
 :host {
     display: flex;
     flex: 1;
+    flex-direction: inherit;
+    gap: 0.75rem;
     align-items: center;
     animation: retrigger 1s;
     overflow: hidden;
 }
-
-.t-checkbox {
-    margin-right: 0.75rem;
-}
diff --git a/projects/legacy/components/multi-select-option/multi-select-option.template.html b/projects/legacy/components/multi-select-option/multi-select-option.template.html
index 409cc08a86eb..86fde13bc817 100644
--- a/projects/legacy/components/multi-select-option/multi-select-option.template.html
+++ b/projects/legacy/components/multi-select-option/multi-select-option.template.html
@@ -1,7 +1,6 @@
 <input
     tuiCheckbox
     type="checkbox"
-    class="t-checkbox"
     [checked]="selected$ | async"
     [size]="size"
 />