fix(item-sliding): hide opposite side options when other side is open (#17986)

* fix(item-sliding): hide opposite side options

* Fix padding issue

* add visibility hidden for item options

Author: masimplo

core/src/components/item-options/item-options.scss

@@ -77,6 +77,8 @@ ion-item-options {
 
   ion-item-options {
     display: flex;
+
+    visibility: hidden;
   }
 
   &.item-sliding-active-options-start .item-options-start,

core/src/components/item-sliding/item-sliding.scss

@@ -33,7 +33,7 @@ ion-item-sliding .item {
 .item-sliding-active-swipe-end .item-options-end .item-option-expandable {
   @include multi-dir() {
     /* stylelint-disable-next-line property-blacklist */
-    padding-left: 90%;
+    padding-left: 100%;
   }
 
   @include ltr() {
@@ -51,7 +51,7 @@ ion-item-sliding .item {
 .item-sliding-active-swipe-start .item-options-start .item-option-expandable {
   @include multi-dir() {
     /* stylelint-disable-next-line property-blacklist */
-    padding-right: 90%;
+    padding-right: 100%;
   }
 
   @include ltr() {

core/src/components/item-sliding/test/basic/index.html

@@ -310,6 +310,44 @@ <h2>ion-item-sliding without options (no sliding)</h2>
             </ion-item>
           </ion-item-sliding>
 
+          <ion-item-sliding id="item10">
+            <ion-item detail>
+              <ion-label text-wrap>
+                <h2>RIGHT/LEFT side - many buttons</h2>
+                <p>Use mobile emulator to check</p>
+              </ion-label>
+            </ion-item>
+            <ion-item-options side="start" class="sliding-enabled">
+              <ion-item-option color="primary" expandable>
+                <ion-icon name="ios-checkmark"></ion-icon>Btn 1
+              </ion-item-option>
+              <ion-item-option color="secondary" expandable>
+                <ion-icon name="ios-checkmark"></ion-icon>Btn 2
+              </ion-item-option>
+              <ion-item-option color="danger" expandable>
+                <ion-icon name="ios-checkmark"></ion-icon>Btn 3
+              </ion-item-option>
+              <ion-item-option color="tertiary" expandable>
+                <ion-icon name="ios-checkmark"></ion-icon>Btn 4
+              </ion-item-option>
+            </ion-item-options>
+
+            <ion-item-options side="end" class="sliding-enabled">
+              <ion-item-option color="primary" expandable>
+                <ion-icon name="mail"></ion-icon>Btn 5
+              </ion-item-option>
+              <ion-item-option color="secondary" expandable>
+                <ion-icon name="mail"></ion-icon>Btn 6
+              </ion-item-option>
+              <ion-item-option color="danger" expandable>
+                <ion-icon name="mail"></ion-icon>Btn 7
+              </ion-item-option>
+              <ion-item-option color="tertiary" expandable>
+                <ion-icon name="mail"></ion-icon>Btn 8
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
           <ion-item>
             <ion-label text-wrap>
               <h2>Normal ion-item (no sliding)</h2>