From 638b5dc55f0aff3d0ec202eb3d5500dae8328857 Mon Sep 17 00:00:00 2001
From: josh sylvester <josh.sylvester@ge.com>
Date: Mon, 11 Feb 2019 12:50:34 -0800
Subject: [PATCH] Added copy of simple-demo to show RTL formatting

---
 demo/rtl_simple_demo.html | 143 ++++++++++++++++++++++++++++++++++++++
 demo/simple_demo.html     |   7 +-
 2 files changed, 145 insertions(+), 5 deletions(-)
 create mode 100644 demo/rtl_simple_demo.html
diff --git a/demo/rtl_simple_demo.html b/demo/rtl_simple_demo.html
new file mode 100644
index 00000000..ed0da77f
--- /dev/null
+++ b/demo/rtl_simple_demo.html
@@ -0,0 +1,143 @@
+<!--
+Copyright (c) 2018, General Electric
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>px-dropdown simple demo</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../polymer/polymer.html" />
+  <link rel="import" href="../../px-theme/px-theme-styles.html">
+  <link rel="import" href="../../px-overlay/px-overlay-container.html"/>
+  <link rel="import" href="../px-dropdown.html" />
+
+</head>
+
+<body dir="rtl">
+  <custom-style>
+    <style include="px-theme-styles" is="custom-style"></style>
+  </custom-style>
+
+  <style>
+    body {
+      height: 200vh;
+    }
+    .rtl {
+      direction: rtl;
+    }
+  </style>
+  <px-overlay-container container-type="foo"></px-overlay-container>
+  <px-overlay-container container-type="bar"></px-overlay-container>
+  <px-overlay-container container-type="baz"></px-overlay-container>
+
+  <div style="width:250px" class="rtl">
+    <p>Single Select</p>
+    <px-dropdown
+      id="foo"
+      hoist
+      container-type="foo"
+      items='[{"key":"1","val":"test test test test test test test test test test test test test test test test iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"I am a menu item so I cannot be selected","disableSelect":true},{"key":"5","val":"Flip Phone","disabled":true}]'>
+    </px-dropdown>
+    </br>
+    <p>Disabled Dropdown</p>
+    <px-dropdown
+      id="disabledDropdown"
+      display-value="Disabled"
+      hoist
+      disabled
+      container-type="disDropdown"
+      items='[{"key":"1","val":"iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"Windows Windows Windows Windows Windows Windows Windows Phone"},{"key":"5","val":"Flip Phone","disabled":true}]'
+      multi>
+    </px-dropdown>
+    </br>
+    <p>Disabled Viewable Dropdown</p>
+    <px-dropdown
+      id="disabledViewable"
+      display-value="Disabled Viewable"
+      hoist
+      disabled-viewable
+      container-type="disDropdown"
+      select-by="key"
+      selected-values='["1","3"]'
+      items='[{"key":"1","val":"iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"Windows Windows Windows Windows Windows Windows Windows Phone"},{"key":"5","val":"Flip Phone","disabled":true}]'
+      multi>
+    </px-dropdown>
+    </br>
+    <p>Multi Select</p>
+    <px-dropdown
+      id="multiSelect"
+      hoist
+      container-type="bar"
+      selected-values='["2","3","5"]'
+      items='[{"key":"1","val":"iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"Windows Windows Windows Windows Windows Windows Windows Phone"},{"key":"5","val":"Flip Phone","disabled":true}]'
+      multi>
+    </px-dropdown>
+    </br>
+    <p>Multi Select and Read Only</p>
+    <px-dropdown
+      id="multiSelect"
+      hoist
+      read-only
+      container-type="bar"
+      display-value-count="3"
+      select-by="key"
+      selected-values='["1","2","3"]'
+      items='[{"key":"1","val":"iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"Windows Windows Windows Windows Windows Windows Windows Phone"},{"key":"5","val":"Flip Phone","disabled":true}]'
+      multi>
+    </px-dropdown>
+    </br>
+    <p>Single Select Read Only</p>
+    <px-dropdown
+      id="readOnly"
+      display-value="Read Only Items"
+      container-type="readOnly"
+      read-only items='[{"key":"1","val":"One Read Only"},{"key":"2","val":"Two Read Only"},{"key":"3","val":"Three Read Only","selected":"true"},{"key":"4","val":"Four Read Only","disabled":"true"}]'>
+    </px-dropdown>
+    </br>
+    <p>Disable Select (Like a Menu)</p>
+    <px-dropdown
+      id="disableSelect"
+      display-value="My Menu"
+      container-type="baz"
+      items='[{"key":"1","val":"Do something"},{"key":"2","val":"Do something else"},{"key":"3","val":"Do one"}]'
+      disable-select>
+    </px-dropdown>
+    </br>
+    <p>Search Mode</p>
+    <px-dropdown
+      items='["Alabama", "Alaska", "American Samoa", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "District Of Columbia", "Federated States Of Micronesia", "Florida", "Georgia", "Guam", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Marshall Islands", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio", "Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virgin Islands", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]'
+      multi
+      search-mode>
+    </px-dropdown>
+    </br>
+    <p>Simple Items Array</p>
+    <px-dropdown
+      items='["Etc/GMT+1","Etc/GMT+10","Etc/GMT+11","Etc/GMT+12"]'>
+    </px-dropdown>
+    </br>
+    <p>Slot Usage</p>
+    <px-dropdown
+      hoist
+      disable-truncate
+      items='[{"key":"1","val":"10"},{"key":"2","val":"20"},{"key":"3","val":"30"},{"key":"4","val":"50"}]'>
+      <px-icon id="trigger" icon="px-nav:more" slot="trigger" tabindex="0"></px-icon>
+    </px-dropdown>
+  </div>
+</body>
+
+</html>
diff --git a/demo/simple_demo.html b/demo/simple_demo.html
index ed0da77f..820e58dd 100644
--- a/demo/simple_demo.html
+++ b/demo/simple_demo.html
@@ -28,7 +28,7 @@
 
 </head>
 
-<body dir="rtl">
+<body>
   <custom-style>
     <style include="px-theme-styles" is="custom-style"></style>
   </custom-style>
@@ -37,15 +37,12 @@
     body {
       height: 200vh;
     }
-    .rtl {
-      direction: rtl;
-    }
   </style>
   <px-overlay-container container-type="foo"></px-overlay-container>
   <px-overlay-container container-type="bar"></px-overlay-container>
   <px-overlay-container container-type="baz"></px-overlay-container>
 
-  <div style="width:250px" class="rtl">
+  <div style="width:250px">
     <p>Single Select</p>
     <px-dropdown
       id="foo"
