click-outside

components.click-outside\.js

import Component from '@ember/component';

export default Component.extend({
  // Lifecycle hooks
	didInsertElement() {
  	this._super(...arguments);
    
    document.addEventListener('click',
    	this.handleOutsideClick.bind(this)
    );
  },
  
  willDestroyElement() {
  	this._super(...arguments);
    
    document.removeEventListener('click', 
    	this.handleOutsideClick.bind(this)
    );
  },
  
  // Functions
  handleOutsideClick: function(evt) {
    if (evt.target.parentNode !== this.element) {
      this.onOutsideClick();
    }
  }
});

components.time-picker\.js

import Component from '@ember/component';

export default Component.extend({
  // Plain properties
	showTimePicker: false
});

controllers.application\.js

import Controller from '@ember/controller';

export default Controller.extend({

});

styles.app\.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.time-picker{
  width: 200px;
	height: 200px;
  background: #ccc;
  cursor: pointer;
}

.time-picker-input{
	width: 200px;
}

templates.application\.hbs

{{time-picker}}

{{outlet}}

templates.components.click-outside\.hbs

{{yield}}

templates.components.time-picker\.hbs

{{#click-outside 
  onOutsideClick=(action (mut showTimePicker) false)
 }}
  <input
  	type="text"
    class="time-picker-input"
    placeholder="Super awesome time picker"
    onclick={{action (mut showTimePicker) true}}
   >
  {{#if showTimePicker}}
    <div class="time-picker">
      time picker
    </div>
  {{/if}}
{{/click-outside}}

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "2.18.2",
    "ember-template-compiler": "2.18.2",
    "ember-testing": "2.18.2"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-data": "2.18.5"
  }
}