feat(Modal): use separate components for modal header and close butto…

…n to allow for better customization

addon/components/bs-modal/header/close.js

@@ -0,0 +1,28 @@
+import Ember from 'ember';
+import layout from '../../../templates/components/bs-modal/header/close';
+
+/**
+
+ @class ModalHeaderClose
+ @namespace Components
+ @extends Ember.Component
+ @private
+ */
+export default Ember.Component.extend({
+  layout,
+  tagName: 'button',
+  classNames: ['close'],
+  attributeBindings: ['type', 'aria-label'],
+  'aria-label': 'Close',
+  type: 'button',
+
+  /**
+   * @event onClick
+   * @public
+   */
+  onChange() {},
+
+  click() {
+    this.get('onClick')();
+  }
+});

addon/components/bs-modal/header/title.js

@@ -0,0 +1,15 @@
+import Ember from 'ember';
+import layout from '../../../templates/components/bs-modal/header/title';
+
+/**
+
+ @class ModalHeaderTitle
+ @namespace Components
+ @extends Ember.Component
+ @private
+ */
+export default Ember.Component.extend({
+  layout,
+  tagName: 'h4',
+  classNames: ['modal-title']
+});

addon/templates/components/bs-modal/header.hbs

@@ -1,8 +1,8 @@
 {{#if closeButton}}
-    <button type="button" class="close" aria-label="Close" onclick={{onClose}}><span aria-hidden="true">&times;</span></button>
+  {{bs-modal/header/close onClick=(action onClose)}}
 {{/if}}
 {{#if hasBlock}}
     {{yield}}
 {{else}}
-    <h4 class="modal-title">{{title}}</h4>
+  {{#bs-modal/header/title}}{{title}}{{/bs-modal/header/title}}
 {{/if}}

addon/templates/components/bs-modal/header/close.hbs

@@ -0,0 +1 @@
+<span aria-hidden="true">&times;</span>

addon/templates/components/bs-modal/header/title.hbs

@@ -0,0 +1 @@
+{{yield}}

app/components/bs-modal/header/close.js

@@ -0,0 +1 @@
+export { default } from 'ember-bootstrap/components/bs-modal/header/close';

app/components/bs-modal/header/title.js

@@ -0,0 +1 @@
+export { default } from 'ember-bootstrap/components/bs-modal/header/title';