refactor(chip): code cleanup

Author: serifine

src/chip-input/ux-chip-input.html

@@ -2,13 +2,15 @@
   <require from="./ux-chip-input-theme"></require>
 
     <ux-chip deletable
+             ref="chiprepeat"
              close.trigger="removeChip(chip)"
              dblclick.trigger="editChip(chip)"
              if.bind="type.toLowerCase() !== 'tag'"
              repeat.for="chip of chipArray">
              ${chip}
              </ux-chip>
     <ux-tag deletable
+            ref="tagrepeat"
             close.trigger="removeChip(chip)"
             dblclick.trigger="editChip(chip)"
             if.bind="type.toLowerCase() === 'tag'"

src/chip-input/ux-chip-input.ts

@@ -15,7 +15,7 @@ export class UxChipInput implements Themable {
   @bindable public readonly: any = false;
   @bindable public theme = null;
   @bindable public type: any;
-  @bindable public seperator: string;
+  @bindable public separator: string;
 
   @bindable({ defaultBindingMode: bindingMode.twoWay })
   public value: any = undefined;
@@ -25,6 +25,8 @@ export class UxChipInput implements Themable {
 
   public view: View;
   private textbox: HTMLInputElement;
+  private chiprepeat: Element;
+  private tagrepeat: Element;
 
   constructor(private element: HTMLInputElement, public resources: ViewResources, private styleEngine: StyleEngine) { }
 
@@ -48,10 +50,14 @@ export class UxChipInput implements Themable {
 
     if (this.disabled || this.disabled === '') {
       this.textbox.setAttribute('disabled', '');
+      this.chiprepeat.removeAttribute('deletable');
+      this.tagrepeat.removeAttribute('deletable');
     }
 
     if (this.readonly || this.readonly === '') {
       this.textbox.setAttribute('readonly', '');
+      this.chiprepeat.removeAttribute('deletable');
+      this.tagrepeat.removeAttribute('deletable');
     }
   }
 
@@ -125,19 +131,18 @@ export class UxChipInput implements Themable {
   public chipsChanged() {
     let seperator = ', ';
 
-    if (this.seperator) {
-      seperator = this.seperator;
+    if (this.separator) {
+      seperator = this.separator;
     }
 
     this.value = this.chipArray.join(seperator);
-
   }
 
   public valueChanged() {
     let seperator = ', ';
 
-    if (this.seperator) {
-      seperator = this.seperator;
+    if (this.separator) {
+      seperator = this.separator;
     }
 
     this.chipArray = this.value.split(seperator);
@@ -146,16 +151,24 @@ export class UxChipInput implements Themable {
   public disabledChanged(newValue: any) {
     if (newValue === true || newValue === '') {
       this.textbox.setAttribute('disabled', 'true');
+      this.chiprepeat.removeAttribute('deletable');
+      this.tagrepeat.removeAttribute('deletable');
     } else {
       this.textbox.removeAttribute('disabled');
+      this.chiprepeat.setAttribute('deletable', '');
+      this.tagrepeat.setAttribute('deletable', '');
     }
   }
 
   public readonlyChanged(newValue: any) {
     if (newValue === true || newValue === '') {
       this.textbox.setAttribute('readonly', 'true');
+      this.chiprepeat.removeAttribute('deletable');
+      this.tagrepeat.removeAttribute('deletable');
     } else {
       this.textbox.removeAttribute('readonly');
+      this.chiprepeat.setAttribute('deletable', '');
+      this.tagrepeat.setAttribute('deletable', '');
     }
   }