feat(item): deprecate item-left / item-right attributes for item-start / item-end (#11125)

item-start and item-end make more sense for RTL

* refactor(item): replaced item-left with item-start
replaced item-right with item-end

* style(item): fix spacing

* fix(item): add backwards support for left/right in ng-content

* fix(item): deprecated old variables, not breaking change

* fix(scss): fix variable name

* fix(item): old attributes deprecated support

Author: AmitMY

demos/src/item-sliding/pages/page-one/page-one.html

@@ -16,12 +16,12 @@
 
     <ion-item-sliding *ngFor="let chat of chats" #item>
       <ion-item>
-        <ion-avatar item-left>
+        <ion-avatar item-start>
           <img [src]="chat.img">
         </ion-avatar>
         <h2>{{chat.name}}</h2>
         <p>{{chat.message}}</p>
-        <ion-note item-right>
+        <ion-note item-end>
           {{chat.time}}
         </ion-note>
       </ion-item>
@@ -58,7 +58,7 @@ <h2>{{chat.name}}</h2>
 
     <ion-item-sliding *ngFor="let login of logins" #item>
       <ion-item>
-        <ion-icon [name]="login.icon" item-left></ion-icon>
+        <ion-icon [name]="login.icon" item-start></ion-icon>
         <h2>{{login.name}}</h2>
         <p>{{login.username}}</p>
       </ion-item>

demos/src/item/pages/page-one/page-one.html

@@ -12,51 +12,51 @@
   <ion-list>
     <ion-list-header>
       Settings
-      <button ion-button icon-only item-right clear>
+      <button ion-button icon-only item-end clear>
         <ion-icon name="cog"></ion-icon>
       </button>
     </ion-list-header>
 
     <ion-item-group>
       <ion-item>
-        <ion-icon name="plane" item-left color="danger"></ion-icon>
+        <ion-icon name="plane" item-start color="danger"></ion-icon>
         <ion-label>Airplane Mode</ion-label>
         <ion-toggle color="secondary"></ion-toggle>
       </ion-item>
 
       <button ion-item>
-        <ion-icon name="wifi" item-left color="primary"></ion-icon>
+        <ion-icon name="wifi" item-start color="primary"></ion-icon>
         <ion-label>Wi-Fi</ion-label>
-        <ion-note item-right>The Interwebz</ion-note>
+        <ion-note item-end>The Interwebz</ion-note>
       </button>
 
       <button ion-item>
-        <ion-icon name="bluetooth" item-left color="primary"></ion-icon>
+        <ion-icon name="bluetooth" item-start color="primary"></ion-icon>
         <ion-label>Bluetooth</ion-label>
-        <ion-note item-right>Off</ion-note>
+        <ion-note item-end>Off</ion-note>
       </button>
     </ion-item-group>
 
     <ion-item-divider color="primary">
       Other Settings
-      <button ion-button item-right outline color="light">Clear</button>
+      <button ion-button item-end outline color="light">Clear</button>
     </ion-item-divider>
 
     <button ion-item>
-      <ion-icon name="call" item-left color="secondary"></ion-icon>
+      <ion-icon name="call" item-start color="secondary"></ion-icon>
       <ion-label>Cellular</ion-label>
     </button>
 
     <button ion-item>
-      <ion-icon name="link" item-left color="secondary"></ion-icon>
+      <ion-icon name="link" item-start color="secondary"></ion-icon>
       <ion-label>Personal Hotspot</ion-label>
-      <ion-note item-right>Off</ion-note>
+      <ion-note item-end>Off</ion-note>
     </button>
   </ion-list>
 
   <ion-list radio-group>
     <ion-list-header>
-      <ion-icon item-left name="phone-portrait"></ion-icon>
+      <ion-icon item-start name="phone-portrait"></ion-icon>
       Silence Phone
     </ion-list-header>
 
@@ -76,24 +76,24 @@
     </ion-list-header>
 
     <ion-item>
-      <ion-icon name="ionic" item-left color="primary"></ion-icon>
+      <ion-icon name="ionic" item-start color="primary"></ion-icon>
       <ion-label>Ionic View</ion-label>
-      <button ion-button outline item-right>Uninstall</button>
+      <button ion-button outline item-end>Uninstall</button>
     </ion-item>
     <ion-item>
-      <ion-icon name="brush" item-left color="primary"></ion-icon>
+      <ion-icon name="brush" item-start color="primary"></ion-icon>
       <ion-label>Ionic Creator</ion-label>
-      <button ion-button outline item-right>Uninstall</button>
+      <button ion-button outline item-end>Uninstall</button>
     </ion-item>
     <ion-item>
-      <ion-icon name="logo-octocat" item-left color="dark"></ion-icon>
+      <ion-icon name="logo-octocat" item-start color="dark"></ion-icon>
       <ion-label>Hubstruck</ion-label>
-      <button ion-button outline item-right>Uninstall</button>
+      <button ion-button outline item-end>Uninstall</button>
     </ion-item>
     <ion-item>
-      <ion-icon name="paw" item-left color="danger"></ion-icon>
+      <ion-icon name="paw" item-start color="danger"></ion-icon>
       <ion-label>Barkpark</ion-label>
-      <button ion-button outline item-right>Uninstall</button>
+      <button ion-button outline item-end>Uninstall</button>
     </ion-item>
   </ion-list>