Added read only ability to chip list and chip.

chip-list.js

@@ -84,7 +84,8 @@ class ChipList extends IgniteElement {
             chipBackground: null,
             chipColor: null,
             changed: false,
-            border: false
+            border: false,
+            readOnly: false,
         };
     }
 
@@ -94,7 +95,7 @@ class ChipList extends IgniteElement {
             .class(this.border, value => value ? null : "no-border")
             .class(this.editing, value => value ? "editing" : null)
             .attribute("tabindex", "0")
-            .onFocus((e) => this.onFocus())
+            .onFocus(e => this.onFocus())
             .class([this.editing, this.items], (editing, items) => {
                 return !editing && (items == null || items.length == 0) ? "placeholder" : null;
             })
@@ -107,6 +108,7 @@ class ChipList extends IgniteElement {
                         .id(item.id)
                         .property("color", item.chipColor ? item.chipColor : this.chipColor)
                         .property("background", item.chipBackground ? item.chipBackground : this.chipBackground)
+                        .property("readOnly", this.readOnly)
                         .property("onDelete", () => {
                             this.items = this.items.filter(needle => needle != item);
                             this.changed = true; //Make sure changed flag was set. 
@@ -124,6 +126,11 @@ class ChipList extends IgniteElement {
                             .onEnter((e) => {
                                 e.preventDefault();
 
+                                //If we are read only don't do anything.
+                                if (this.readOnly) {
+                                    return;
+                                }
+
                                 //If this chip allows free form input then add a new item.
                                 if (this.freeForm && this.input.textContent.trim().length >= 1) {
                                     if (this.items == null) {
@@ -138,6 +145,11 @@ class ChipList extends IgniteElement {
                                 }
                             })
                             .onBackspace((e) => {
+                                //If we are read only don't do anything.
+                                if (this.readOnly) {
+                                    return;
+                                }
+
                                 //If the backspace key is pressed and there is no content, try to remove the last item from the list.
                                 if (this.input.textContent.length == 0 || (this.input.textContent.length == 1 && this.input.textContent[0] == " ")) {
                                     e.preventDefault();
@@ -151,6 +163,11 @@ class ChipList extends IgniteElement {
                                 }
                             })
                             .on("keydown", (e) => {
+                                //If we are read only don't do anything.
+                                if (this.readOnly) {
+                                    return;
+                                }
+
                                 //If the escape key is pressed stop searching until something else happens.
                                 if (e.key == "Escape") {
                                     this.searching = false;
@@ -222,12 +239,14 @@ class ChipList extends IgniteElement {
     }
 
     onFocus() {
-        if (!this.editing) {
-            this.editing = true;
-            this.input.focus();
-            this.input.textContent = " ";
-        } else {
-            this.input.focus();
+        if (!this.readOnly) {
+            if (!this.editing) {
+                this.editing = true;
+                this.input.focus();
+                this.input.textContent = " ";
+            } else {
+                this.input.focus();
+            }
         }
     }
 

chip.js

@@ -10,7 +10,8 @@ class Chip extends IgniteElement {
         return {
             onDelete: () => { },
             background: null,
-            color: null
+            color: null,
+            readOnly: false
         }
     }
 
@@ -48,6 +49,7 @@ class Chip extends IgniteElement {
                     .style("line-height", "1")
                     .style("border", "none")
                     .onClick(() => this.onDelete())
+                    .hide(this.readOnly)
             );
     }
 }