fix: fix component style for readonly mode

Close #40

Author: paodb

src/main/java/com/flowingcode/vaadin/addons/chipfield/ChipField.java

@@ -306,6 +306,12 @@ public boolean isReadonly() {
     return this.isReadonly();
   }
 
+  @Override
+  public void setReadOnly(boolean readOnly) {
+    super.setReadOnly(readOnly);
+    getElement().callJsFunction("toggleReadonly");
+  }
+
   /** @deprecated use {@link #setRequiredIndicatorVisible(boolean)} */
   @Deprecated
   public void setRequired(boolean required) {

src/main/resources/META-INF/frontend/paper-chip-input-autocomplete.js

@@ -287,7 +287,7 @@ class PaperChipInputAutocomplete extends PolymerElement {
                                     [[item.name]]
                                     <paper-chip id="paper-chip-[[item]]-[[index]]"
                                                 label="[[item]]"
-                                                closable$="[[closable]]"
+                                                closable="[[_isClosable(closable,readonly)]]"
                                                 on-chip-removed="_removeChip">
                                     </paper-chip>
                                 </template>
@@ -318,6 +318,7 @@ class PaperChipInputAutocomplete extends PolymerElement {
 				this._autoValidate = this.autoValidate;
 				this._required = this.required;
 				this._paperInputElement = this.$.paperInput;
+                this.toggleReadonly();
     }
 
     _isEmpty(item) {
@@ -457,6 +458,18 @@ class PaperChipInputAutocomplete extends PolymerElement {
 				}));
     }
 
+    _isClosable(closable, readonly) { 
+        return closable && !readonly; 
+    } 
+
+    toggleReadonly() {
+    	if(this.readonly){            
+            this.$.paperInput.style.pointerEvents="none";         
+        } else {
+            this.$.paperInput.style.removeProperty("pointer-events");
+        }
+    }
+
 }
 
 window.customElements.define(PaperChipInputAutocomplete.is, PaperChipInputAutocomplete);