feat(chip): add tag closing and finish styling

serifine · serifine · commit 085273d82776 · 2017-04-08T01:15:43.000-05:00
diff --git a/src/chip-input/ux-tag-theme.css b/src/chip-input/ux-tag-theme.css
@@ -4,10 +4,36 @@ styles.tag {
 
   font-size: 14px;
 
-  padding: 2px 6px;
+  height: 24px;
 
   border-radius: 2px;
 
   background-color: ${background || $design.accent};
   color: ${foreground || $design.accentForeground};
 }
+
+styles.tag > span {
+    margin: 0 8px;
+  }
+
+    styles.tag > span.close {
+      display:none;
+    }
+
+  styles.tag[deletable] > span {
+    margin-right: 0;
+  }
+
+    styles.tag[deletable] > span.close {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      margin: 0 4px;
+      cursor: pointer;
+    }
+
+      styles.tag[deletable] > span.close::before {
+        content: '+';    
+        font-size: 24px;
+        transform: rotate(45deg);
+      }
diff --git a/src/chip-input/ux-tag.html b/src/chip-input/ux-tag.html
@@ -1,6 +1,10 @@
 <template role="textbox" styles.tag>
   <require from="./ux-tag-theme"></require>
 
-  <slot></slot>
+  <span>
+    <slot></slot>
+  </span>
 
+  <span class="close" click.delegate="closeTag()">
+  </span>
 </template>
diff --git a/src/chip-input/ux-tag.ts b/src/chip-input/ux-tag.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';
@@ -18,7 +19,7 @@ export class UxTag implements Themable {
     public view: View;
 
     constructor(
-        /*private element: HTMLInputElement,*/
+        private element: HTMLInputElement,
         public resources: ViewResources,
         private styleEngine: StyleEngine) { }
 
@@ -35,4 +36,10 @@ export class UxTag implements Themable {
     public themeChanged(newValue: any) {
         this.styleEngine.applyTheme(this, newValue);
     }
+
+    public closeTag() {
+        const closeEvent = DOM.createCustomEvent('close', { bubbles: false });
+
+        this.element.dispatchEvent(closeEvent);
+    }
 }
