Add close button to the time input directive

Author: g1eb

src/time-input.css

@@ -256,3 +256,44 @@
 .datetime-input.time .clear-button:hover::before {
   background: #ddd;
 }
+
+
+/**
+ * Close button
+ */
+.datetime-input.time .close-button {
+  position: absolute;
+  z-index: 5;
+  left: -1px;
+  cursor: pointer;
+  outline: none;
+  border-top: 1px solid #aaa;
+  border-left: 1px solid #aaa;
+  border-bottom: 1px solid #aaa;
+  color: #777;
+  width: 25%;
+  height: auto;
+  margin-top: 10px;
+  font-size: 1.5em;
+  line-height: 2em;
+  box-sizing: border-box;
+  background-color: #efefef;
+  transition: background-color 0.25s ease-out;
+}
+.datetime-input.time .close-button::before {
+  content: "";
+  position: absolute;
+  right: -0.5em;
+  top: -1px;
+  width: 1em;
+  height: 2em;
+  background: #efefef;
+  border-top: 1px solid #aaa;
+  border-right: 1px solid #aaa;
+  transition: background 0.25s ease-out;
+  transform: skewX(-26deg);
+}
+.datetime-input.time .close-button:hover,
+.datetime-input.time .close-button:hover::before {
+  background: #ddd;
+}

src/time-input.html

@@ -35,5 +35,8 @@
     <div class="clear-button" ng-if="!!time">
       <div ng-click="update()" ng-bind="clearText || 'Clear'"></div>
     </div>
+    <div class="close-button">
+      <div ng-click="close()">Close</div>
+    </div>
   </div>
 </div>

src/time-input.js

@@ -17,6 +17,7 @@ directive('timeInput', ['$document', '$timeout', function ($document, $timeout)
       minuteStep : '=?',
       secondStep : '=?',
       onChange: '&',
+      onClose: '&?',
       placeholder: '@',
       clearText: '@',
       cssClass:'@',
@@ -66,6 +67,10 @@ directive('timeInput', ['$document', '$timeout', function ($document, $timeout)
           // Close edit popover
           scope.close = function () {
             scope.selected = '';
+
+            if ( !!scope.onClose ) {
+              scope.onClose();
+            }
           }
 
           // Bind click events outside directive to close edit popover