feat(chip): add closeable chip and final size

Author: serifine

src/chip-input/ux-chip-theme.css

@@ -4,11 +4,45 @@ styles.chip {
 
   font-size: 14px;
 
-  padding: 8px 12px;
-
+  height: 32px;
   border-radius: 100px;
 
   background-color: ${background || $design.accent};
   color: ${foreground || $design.accentForeground};
-
 }
+
+  styles.chip:focus {
+    outline: none;
+    box-shadow: ${$design.elevation4dp};
+  }
+
+  styles.chip > span {
+    margin: 0 12px;
+  }
+
+    styles.chip > span.close {
+      display:none;
+    }
+
+  styles.chip[deletable] > span {
+    margin-right: 0;
+  }
+
+    styles.chip[deletable] > span.close {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      margin: 0 4px;
+      color: ${background || $design.accent};
+      background-color: #a6a6a6;
+      height: 24px;
+      width: 24px;
+      border-radius: 24px;
+      cursor: pointer;
+    }
+
+      styles.chip[deletable] > span.close::before {
+        content: '+';    
+        font-size: 24px;
+        transform: rotate(45deg);
+      }

src/chip-input/ux-chip.html

@@ -1,6 +1,10 @@
 <template role="textbox" styles.chip>
   <require from="./ux-chip-theme"></require>
 
-  <slot></slot>
+  <span>
+    <slot></slot>
+  </span>
 
+  <span class="close" click.delegate="closeChip()">
+  </span>
 </template>

src/chip-input/ux-chip.ts

@@ -1,4 +1,5 @@
 import { customElement, bindable, ViewResources, View, processAttributes } from 'aurelia-templating';
+import { DOM } from 'aurelia-pal';
 import { bindingMode } from 'aurelia-binding';
 import { inject } from 'aurelia-dependency-injection';
 import { StyleEngine } from '../styles/style-engine';
@@ -12,13 +13,14 @@ import { processDesignAttributes } from '../designs/design-attributes';
 export class UxChip implements Themable {
     @bindable public theme = null;
     @bindable public type: any;
+
     @bindable({ defaultBindingMode: bindingMode.twoWay })
     public value: any = undefined;
 
     public view: View;
 
     constructor(
-        /*private element: HTMLInputElement,*/
+        private element: HTMLInputElement,
         public resources: ViewResources,
         private styleEngine: StyleEngine) { }
 
@@ -35,4 +37,10 @@ export class UxChip implements Themable {
     public themeChanged(newValue: any) {
         this.styleEngine.applyTheme(this, newValue);
     }
+
+    public closeChip() {
+        const closeEvent = DOM.createCustomEvent('close', { bubbles: false });
+
+        this.element.dispatchEvent(closeEvent);
+    }
 }