feat: Allow unshow more items

src/lib/index.ts

@@ -1,5 +1,4 @@
 export { TreeSelectDefaultOptions } from './src/model/tree-select-default-options';
 export { TreeSelectComponent } from './src/component/tree-select.component';
 export { ItemPipe } from './src/pipe/item.pipe';
-export { IsVisiblePipe } from './src/pipe/isVisible.pipe';
 export { NgxTreeSelectModule } from './src/module';

src/lib/src/component/tree-select.component.html

@@ -2,28 +2,45 @@
 
   <!-- Control display -->
   <div [class.disabled]="disabled">
-    <span tabindex="-1" class="btn btn-default btn-secondary form-control" [class.selected-container-text]="!multiple" [class.selected-container-item]="multiple"
-      (click)="toggle($event)">
-            <span *ngIf="selection.length <= 0"
-                  class="ui-select-placeholder text-muted">{{placeholder}}</span>
-    <span *ngFor="let itm of selection | IsVisiblePipe" class="pull-left" [class.selected-item-text]="!multiple" [class.selected-item-item]="multiple"
-      [class.btn]="multiple" [class.btn-default]="multiple" [class.btn-xs]="multiple">
-                    {{itm.text}}
-                    <a *ngIf="multiple && !disabled"
-                       class="close"
-                       (click)="removeItem($event, itm)">x</a>
-            </span>
-    <span class="pull-right more-items-icon" (click)="loadMore($event)" *ngIf="loadAllItems">(...)</span>
-    <i class="caret pull-right"></i>
+    <span tabindex="-1"
+          class="btn btn-default btn-secondary form-control"
+          [class.selected-container-text]="!multiple"
+          [class.selected-container-item]="multiple"
+          (click)="toggle($event)">
+      <span *ngIf="selection.length <= 0"
+            class="ui-select-placeholder text-muted">{{placeholder}}</span>
+      <span *ngFor="let itm of selection; let idx=index">
+        <span *ngIf="moreLoaded || maxVisibleItemCount == 0 || idx<maxVisibleItemCount"
+              class="pull-left"
+              [class.selected-item-text]="!multiple"
+              [class.selected-item-item]="multiple"
+              [class.btn]="multiple"
+              [class.btn-default]="multiple"
+              [class.btn-xs]="multiple">
+          {{itm.text}}
+          <a *ngIf="multiple && !disabled" class="close" (click)="removeItem($event, itm)">x</a>
+        </span>
+      </span>
+
     </span>
+      <span class="pull-right more-items-icon" (click)="loadMore($event)" *ngIf="showMoreLink">(...)</span>
+      <i class="caret pull-right"></i>
   </div>
   <!-- options template -->
-  <ul *ngIf="!disabled && isOpen && internalItems && internalItems.length > 0" class="dropdown-menu" role="menu">
-    <input name="filterText" *ngIf="allowFilter" type="text" [(ngModel)]="filter" (click)="setInputFocus()" (blur)="setInputFocusOut()"
-      class="form-control" placeholder="{{filterPlaceholder}}" [ngModelOptions]="{standalone: true}" />
+  <ul *ngIf="!disabled && isOpen && internalItems && internalItems.length > 0"
+      class="dropdown-menu"
+      role="menu">
+    <input name="filterText"
+           *ngIf="allowFilter"
+           type="text"
+           [(ngModel)]="filter"
+           (click)="setInputFocus()"
+           (blur)="setInputFocusOut()"
+           class="form-control"
+           placeholder="{{filterPlaceholder}}"
+           [ngModelOptions]="{standalone: true}" />
     <li *ngFor="let o of internalItems | ItemPipe: filter " role="menuitem">
-      <tree-select-item [item]="o" (selected)="itemSelected()" [onTouchedCallBack]="onTouchedCallback">
-      </tree-select-item>
+      <tree-select-item [item]="o" (selected)="itemSelected()" [onTouchedCallBack]="onTouchedCallback"></tree-select-item>
     </li>
   </ul>
 </div>

src/lib/src/component/tree-select.component.scss

@@ -53,10 +53,10 @@ ul {
 .more-items-icon {
   opacity: 0.5;
   height: 10px;
-  margin-top: -2px;
   position: absolute;
   right: 20px;
-  top: 30%;
+  bottom: 23px;
+  z-index: 100;
 }
 
 .close {
@@ -65,6 +65,7 @@ ul {
   margin-left: 5px;
   padding-top: 3px;
   position: absolute;
+  z-index: 50;
 }
 
 .caret {

src/lib/src/component/tree-select.component.ts

@@ -27,6 +27,8 @@ export class TreeSelectComponent implements ControlValueAccessor {
   private onChangeCallback: (_: any) => void = noop;
   private haveFocus = false;
   private inputFocus = false;
+  public showMoreLink = false;
+  public moreLoaded = false;
 
   @Input() public disabled = false;
   @Input() public filterPlaceholder = 'Type here for filtering items...';
@@ -86,9 +88,7 @@ export class TreeSelectComponent implements ControlValueAccessor {
   }
 
   public get selection(): SelectableItem[] {
-    if (this.maxVisibleItemCount && ((this.svc.getInternalSelection().length - this.maxVisibleItemCount) > 0)) {
-      this.svc.setConfiguration(opt => opt.loadAllItems = true, false);
-    }
+    this.showMoreLink = (this.maxVisibleItemCount > 0 && ((this.svc.getInternalSelection().length - this.maxVisibleItemCount) > 0));
     return this.svc.getInternalSelection();
   }
 
@@ -177,8 +177,8 @@ export class TreeSelectComponent implements ControlValueAccessor {
 
   loadMore($event: any) {
     $event.stopPropagation();
-    this.svc.setConfiguration(opt => opt.loadAllItems = false, false);
-    this.svc.setConfiguration(opt => opt.maxVisibleItemCount = 0, false);
+    this.moreLoaded = !this.moreLoaded;
+    //this.svc.setConfiguration(opt => opt.maxVisibleItemCount = 0, false);
   }
 
   ProcessMatchFilterTreeItem(tree: SelectableItem, filter: string): boolean {

src/lib/src/module.ts

@@ -7,7 +7,6 @@ import { TreeSelectComponent } from './component/tree-select.component';
 import { TreeSelectItemComponent } from './component/tree-select-item.component';
 import { OffClickDirective } from './directive/off-click.directive';
 import { ItemPipe } from './pipe/item.pipe';
-import { IsVisiblePipe } from './pipe/isVisible.pipe';
 
 @NgModule({
   imports: [
@@ -18,8 +17,7 @@ import { IsVisiblePipe } from './pipe/isVisible.pipe';
     TreeSelectComponent,
     TreeSelectItemComponent,
     OffClickDirective,
-    ItemPipe,
-    IsVisiblePipe
+    ItemPipe
   ],
   exports: [
     TreeSelectComponent