Merge branch 'develop'

# Conflicts:
#	docs/scripts/app.js

Author: pkempenaers

src/app/component/angularjs-dropdown-multiselect.directive.js

@@ -12,6 +12,7 @@ export default function dropdownMultiselectDirective() {
 			translationTexts: '=',
 			disabled: '=',
 		},
+		transclude: true,
 		controller,
 		templateUrl: 'app/component/angularjs-dropdown-multiselect.html',
 	};

src/app/component/angularjs-dropdown-multiselect.html

@@ -1,12 +1,14 @@
 <div class="multiselect-parent btn-group dropdown-multiselect"
      ng-class="{open: open}">
-  <button ng-disabled="disabled"
-          type="button"
-          class="dropdown-toggle"
-          ng-class="settings.buttonClasses"
-          ng-click="toggleDropdown()">
-    {{getButtonText()}}&nbsp;<span class="caret"></span>
-  </button>
+     <ng-transclude ng-click="toggleDropdown()">
+      <button ng-disabled="disabled"
+              type="button"
+              class="dropdown-toggle"
+              ng-class="settings.buttonClasses"
+              >
+        {{getButtonText()}}&nbsp;<span class="caret"></span>
+      </button>
+    </ng-transclude>
   <ul class="dropdown-menu dropdown-menu-form"
       ng-if="open"
       ng-style="{display: open ? 'block' : 'none', height : settings.scrollable ? settings.scrollableHeight : 'auto', overflow: 'auto' }">

src/app/main/main.controller.js

@@ -310,5 +310,14 @@ export default class MainController {
 				return option;
 			},
 		};
+
+		$scope.transclusionModel = [];
+		$scope.transclusionData = [
+			{ id: 1, label: 'David' },
+			{ id: 2, label: 'Jhon' },
+			{ id: 3, label: 'Danny' },
+		];
+		$scope.transclusionSettings = {
+		};
 	}
 }

src/app/main/main.template.html

@@ -973,6 +973,47 @@ <h3>Code</h3>
 	smartButtonTextConverter(skip, option) {
 		return option;
 	},
+};
+					</div>
+				</div>
+			</div>
+		</div>
+		<div uib-accordion-group heading="Custom trigger element using transclusion">
+			<div class="row">
+				<div class="col-xs-12">
+					Example to show that you can replace the button with a custom element
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-xs-12 col-sm-6">
+					<h3>Demo</h3>
+					<div class="well">
+						<div ng-dropdown-multiselect="" options="transclusionData" selected-model="transclusionModel" extra-settings="transclusionSettings">
+							<span class="custom-trigger">My Custom trigger</span>
+						</div>
+					</div>
+				</div>
+				<div class="col-xs-12 col-sm-6">
+					<h3>The model:</h3>
+					<pre>{{transclusionModel|json}}</pre>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-md-12">
+					<h3>Code</h3>
+					<div hljs language="javascript">
+// HTML
+<div ng-dropdown-multiselect="" options="transclusionData" selected-model="transclusionModel" extra-settings="transclusionSettings">
+	<span class="custom-trigger">My Custom trigger</span>
+</div>
+
+$scope.transclusionModel = [];
+$scope.transclusionData = [
+	{ id: 1, label: 'David' },
+	{ id: 2, label: 'Jhon' },
+	{ id: 3, label: 'Danny' },
+];
+$scope.transclusionSettings = {
 };
 					</div>
 				</div>

src/app/main/stylesheet.scss

@@ -395,6 +395,13 @@ footer a:hover {
     	opacity: 0.5;
 		}
 }
+
+.custom-trigger {
+	padding: 0.75em;
+	margin-top: 1.5em;
+	border: 1px solid #ccc;
+	cursor: pointer;
+}
 /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {
 }