Added Selectable and Selection Titles

bondib · Aug 7, 2017 · f93ba64 · f93ba64
1 parent 1e94634
commit f93ba64
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 7 deletions.
diff --git a/sample/src/welcome.html b/sample/src/welcome.html
@@ -1,7 +1,7 @@
 <template>
   <section class="au-animate">
     <br><br>
-    <multiple-select items.bind="items">
+    <multiple-select items.bind="items"  selectable-title="Available options" selection-title="Selection options">
       <template replace-part="item-template-selectable">
           test
       </template>

diff --git a/src/elements/multiple-select.css b/src/elements/multiple-select.css
@@ -91,6 +91,9 @@
   color: #aaa;
   cursor: text;
 }
+.ms-container .ms-selectable-filter{
+  margin-bottom: 5px;
+}
 /*
 .multiple-select {
   right: auto !important;

diff --git a/src/elements/multiple-select.html b/src/elements/multiple-select.html
@@ -3,24 +3,28 @@
 
     <div class="ms-container">
         <div class="ms-selectable">
+            <div class="ms-selectable-title">${selectableTitle}</div>
             <div class="ms-selectable-filter" if.bind="isSearchFilterEnabled">
                 <input type="text" class="form-control" placeholder="Filter..." value.bind="filterOfSelectableItems & debounce">
-            </div><br>
-            <ul class="ms-list">               
+            </div>
+            <ul class="ms-list">
                 <li class="ms-elem-selectable" repeat.for="item of itemsToSelect" click.delegate="selectItem(item, true)">
-                    <template part="item-template-selectable" replaceable> <!-- enables user to replace item template -->
+                    <template part="item-template-selectable" replaceable>
+                        <!-- enables user to replace item template -->
                         <span>${getItemDisplay(item.item)}</span>
                     </template>
                 </li>
             </ul>
         </div>
         <div class="ms-selection">
+            <div class="ms-selectable-title">${selectionTitle}</div>
             <div class="ms-selectable-filter" if.bind="isSearchFilterEnabled">
                 <input type="text" class="form-control" placeholder="Filter..." value.bind="filterOfSelectedItems & debounce">
-            </div><br>
-             <ul class="ms-list">
+            </div>
+            <ul class="ms-list">
                 <li class="ms-elem-selection" repeat.for="item of itemsAlreadySelected" click.delegate="selectItem(item, false)">
-                    <template part="item-template-selection" replaceable> <!-- enables user to replace item template -->
+                    <template part="item-template-selection" replaceable>
+                        <!-- enables user to replace item template -->
                         <span>${getItemDisplay(item.item)}</span>
                     </template>
                 </li>

diff --git a/src/elements/multiple-select.ts b/src/elements/multiple-select.ts
@@ -46,6 +46,22 @@ export class MultipleSelect {
     @bindable
     displayFieldName: string = "name";
 
+    /**
+      * The title of the selectable left
+      * @type {string}
+      * @memberof MultipleSelect
+       */
+    @bindable
+    selectableTitle: string = "";
+
+    /**
+      * The title of the selection left
+      * @type {string}
+      * @memberof MultipleSelect
+       */
+    @bindable
+    selectionTitle: string = "";
+
     private _itemsInternal: SelectableItem[] = [];
     private _isAttached: boolean = false;
     private _ignoreInternalSelectedItemsChanged: boolean = false;