From fdebb3f486f19e8891918ca56d6a8a7fa24961f2 Mon Sep 17 00:00:00 2001
From: Chad Weimer <chadweimer@gmail.com>
Date: Sun, 1 Jul 2018 08:38:53 -0700
Subject: [PATCH] Added the ability to mark the element as readonly

---
 demo/index.html                 |  6 ++++++
 iron-star-rating.html           | 18 +++++++++++++++---
 test/iron-star-rating_test.html | 31 ++++++++++++++++++-------------
 3 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index fc72496..27df8c2 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -32,6 +32,12 @@ <h3>Pre-assigned rating demo</h3>
           <iron-star-rating value="3"></iron-star-rating>
         </template>
       </demo-snippet>
+      <h3>Readonly demo</h3>
+      <demo-snippet>
+        <template>
+          <iron-star-rating value="2" readonly></iron-star-rating>
+        </template>
+      </demo-snippet>
       <h3>Custom icon demo</h3>
       <demo-snippet>
         <template>
diff --git a/iron-star-rating.html b/iron-star-rating.html
index 98ffedb..091669e 100644
--- a/iron-star-rating.html
+++ b/iron-star-rating.html
@@ -8,10 +8,12 @@
         <style>
             :host {
                 display: inline-block;
-                cursor: pointer;
                 --iron-icon-width: var(--star-rating-size, 24px);
                 --iron-icon-height: var(--star-rating-size, 24px);
             }
+            :host(:not([readonly])) {
+                cursor: pointer;
+            }
             :host[hidden] {
                 display: none !important;
             }
@@ -41,8 +43,8 @@
             iron-icon.selected ~ iron-icon {
                 color: #fdd835;
             }
-            iron-icon:hover,
-            iron-icon:hover ~ iron-icon {
+            :host(:not([readonly])) iron-icon:hover,
+            :host(:not([readonly])) iron-icon:hover ~ iron-icon {
                 color: #ffeb3b !important;
             }
         </style>
@@ -67,6 +69,7 @@
                 return {
                     value: {
                         type: Number,
+                        value: 0,
                         notify: true,
                         observer: '_valueChanged'
                     },
@@ -77,6 +80,11 @@
                     disableAutoUpdate: {
                         type: Boolean,
                         value: false,
+                    },
+                    readonly: {
+                        type: Boolean,
+                        value: false,
+                        reflectToAttribute: true,
                     }
                 };
             }
@@ -120,6 +128,10 @@
             _starClicked(e) {
                 e.preventDefault();
 
+                if (this.readonly) {
+                    return;
+                }
+
                 if (!this.disableAutoUpdate) {
                     this.value = e.model.item.value;
                 }
diff --git a/test/iron-star-rating_test.html b/test/iron-star-rating_test.html
index 80d15ca..e6a8388 100644
--- a/test/iron-star-rating_test.html
+++ b/test/iron-star-rating_test.html
@@ -19,9 +19,15 @@
       </template>
     </test-fixture>
 
-    <test-fixture id="ChangedPropertyTestFixture">
+    <test-fixture id="InitialValueTestFixture">
       <template>
-        <iron-star-rating prop1="new-prop1"></iron-star-rating>
+        <iron-star-rating value="3"></iron-star-rating>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="ReadonlyTestFixture">
+      <template>
+        <iron-star-rating readonly></iron-star-rating>
       </template>
     </test-fixture>
 
@@ -30,19 +36,18 @@
 
         test('instantiating the element with default properties works', function() {
           var element = fixture('BasicTestFixture');
-          assert.equal(element.prop1, 'iron-star-rating');
-          var elementShadowRoot = element.shadowRoot;
-          var elementHeader = elementShadowRoot.querySelector('h2');
-          assert.equal(elementHeader.innerHTML, 'Hello iron-star-rating!');
+          assert.equal(element.value, 0);
+          assert.equal(element.readonly, false);
+        });
+
+        test('setting a value on the element works', function() {
+          var element = fixture('InitialValueTestFixture');
+          assert.equal(element.value, 3);
         });
 
-        test('setting a property on the element works', function() {
-          // Create a test fixture
-          var element = fixture('ChangedPropertyTestFixture');
-          assert.equal(element.prop1, 'new-prop1');
-          var elementShadowRoot = element.shadowRoot;
-          var elementHeader = elementShadowRoot.querySelector('h2');
-          assert.equal(elementHeader.innerHTML, 'Hello new-prop1!');
+        test('setting readonly on the element works', function() {
+          var element = fixture('ReadonlyTestFixture');
+          assert.equal(element.readonly, true);
         });
 
       });