Merge pull request #426 from vc-rakesh/main

fix: #424 and #425 issues

index.ts

@@ -1 +1,17 @@
 export * from './src/app/components/ionic-selectable/ionic-selectable.component';
+export * from './src/app/components/ionic-selectable/ionic-selectable-add-item-template.directive';
+export * from './src/app/components/ionic-selectable/ionic-selectable-close-button-template.directive';
+export * from './src/app/components/ionic-selectable/ionic-selectable-footer-template.directive';
+export * from './src/app/components/ionic-selectable/ionic-selectable-group-end-template.directive';
+export * from './src/app/components/ionic-selectable/ionic-selectable-group-template.directive';
+export * from './src/app/components/ionic-selectable/ionic-selectable-header-template.directive';
+export * from './src/app/components/ionic-selectable/ionic-selectable-icon-template.directive';
+export * from './src/app/components/ionic-selectable/ionic-selectable-item-end-template.directive';
+export * from './src/app/components/ionic-selectable/ionic-selectable-item-icon-template.directive';
+export * from './src/app/components/ionic-selectable/ionic-selectable-item-template.directive';
+export * from './src/app/components/ionic-selectable/ionic-selectable-message-template.directive';
+export * from './src/app/components/ionic-selectable/ionic-selectable-modal.component';
+export * from './src/app/components/ionic-selectable/ionic-selectable-placeholder-template.directive';
+export * from './src/app/components/ionic-selectable/ionic-selectable-search-fail-template.directive';
+export * from './src/app/components/ionic-selectable/ionic-selectable-title-template.directive';
+export * from './src/app/components/ionic-selectable/ionic-selectable-value-template.directive';

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.0.0",
+  "version": "5.0.2",
   "name": "ionic-selectable",
   "title": "Ionic Selectable",
   "description": "An Ionic component similar to Ionic Select, that allows to search items, including async search, group, add, edit, delete items, and much more.",

src/app/components/ionic-selectable/ionic-selectable-modal.component.html

@@ -37,7 +37,7 @@
     <div class="ionic-selectable-spinner-background"></div>
     <ion-spinner></ion-spinner>
   </div>
-  <ion-list class="ion-no-margin" *ngIf="!selectComponent.hasVirtualScroll && selectComponent._hasFilteredItems">
+  <ion-list class="ion-no-margin" *ngIf="selectComponent._hasFilteredItems">
     <ion-item-group *ngFor="let group of selectComponent._filteredGroups" class="ionic-selectable-group">
       <ion-item-divider *ngIf="selectComponent._hasGroups"
         [color]="selectComponent.groupColor ? selectComponent.groupColor : null">
@@ -98,46 +98,10 @@
       {{selectComponent.searchFailText}}
     </div>
   </div>
-  <ion-infinite-scroll *ngIf="!selectComponent.hasVirtualScroll" [disabled]="!selectComponent.hasInfiniteScroll"
+  <ion-infinite-scroll [disabled]="!selectComponent.hasInfiniteScroll"
     (ionInfinite)="selectComponent._getMoreItems()">
     <ion-infinite-scroll-content></ion-infinite-scroll-content>
   </ion-infinite-scroll>
-  <div *ngFor="let item of selectComponent._filteredGroups[0].items">
-    <ion-item button="true" detail="false" *virtualItem="let item" (click)="selectComponent._select(item)"
-      class="ionic-selectable-item" [ngClass]="{
-        'ionic-selectable-item-is-selected': selectComponent._isItemSelected(item),
-        'ionic-selectable-item-is-disabled': selectComponent._isItemDisabled(item)
-      }" [disabled]="selectComponent._isItemDisabled(item)">
-      <!-- Need span for text ellipsis. -->
-      <span *ngIf="selectComponent.itemTemplate" [ngTemplateOutlet]="selectComponent.itemTemplate"
-        [ngTemplateOutletContext]="{ item: item, isItemSelected: selectComponent._isItemSelected(item) }">
-      </span>
-      <!-- Need ion-label for text ellipsis. -->
-      <ion-label *ngIf="!selectComponent.itemTemplate">
-        {{selectComponent._formatItem(item)}}
-      </ion-label>
-      <div *ngIf="selectComponent.itemEndTemplate" slot="end">
-        <div [ngTemplateOutlet]="selectComponent.itemEndTemplate"
-          [ngTemplateOutletContext]="{ item: item, isItemSelected: selectComponent._isItemSelected(item) }">
-        </div>
-      </div>
-      <span *ngIf="selectComponent.itemIconTemplate" [ngTemplateOutlet]="selectComponent.itemIconTemplate"
-        [ngTemplateOutletContext]="{ item: item, isItemSelected: selectComponent._isItemSelected(item) }">
-      </span>
-      <ion-icon *ngIf="!selectComponent.itemIconTemplate"
-        [name]="selectComponent._isItemSelected(item) ? 'checkmark-circle' : 'radio-button-off'"
-        [color]="selectComponent._isItemSelected(item) ? 'primary' : null" [slot]="selectComponent.itemIconSlot">
-      </ion-icon>
-      <ion-button *ngIf="selectComponent.canSaveItem" class="ionic-selectable-item-button" slot="end" fill="outline"
-        (click)="selectComponent._saveItem($event, item)">
-        <ion-icon slot="icon-only" name="md-create"></ion-icon>
-      </ion-button>
-      <ion-button *ngIf="selectComponent.canDeleteItem" class="ionic-selectable-item-button" slot="end" fill="outline"
-        (click)="selectComponent._deleteItemClick($event, item)">
-        <ion-icon slot="icon-only" name="md-trash"></ion-icon>
-      </ion-button>
-    </ion-item>
-  </div>
 </ion-content>
 <div class="ionic-selectable-add-item-template" *ngIf="selectComponent._isAddItemTemplateVisible"
   [ngStyle]="{ 'top.px': _header.offsetHeight }">

src/app/components/ionic-selectable/ionic-selectable.component.ts

@@ -808,7 +808,7 @@ export class IonicSelectableComponent implements ControlValueAccessor, OnInit, D
     private _element: ElementRef,
     private _renderer: Renderer2
   ) {
-    if (!this.items || !this.items.length) {
+    if (!this.items?.length) {
       this.items = [];
     }
 
@@ -955,7 +955,7 @@ export class IonicSelectableComponent implements ControlValueAccessor, OnInit, D
       // Default filtering.
       let groups = [];
 
-      if (!this._searchText || !this._searchText.trim()) {
+      if (!this._searchText?.trim()) {
         groups = this._groups;
       } else {
         const filterText = this._searchText.trim().toLowerCase();
@@ -1197,7 +1197,7 @@ export class IonicSelectableComponent implements ControlValueAccessor, OnInit, D
 
   private _areGroupsEmpty(groups: any) {
     return groups.length === 0 || groups.every((group: any) => {
-      return !group.items || group.items.length === 0;
+      return !group.items?.length;
     });
   }
 
@@ -1227,7 +1227,7 @@ export class IonicSelectableComponent implements ControlValueAccessor, OnInit, D
       items: items || []
     }];
 
-    if (items && items.length) {
+    if (items?.length) {
       if (this._hasGroups) {
         groups = [];
 
@@ -1366,7 +1366,6 @@ export class IonicSelectableComponent implements ControlValueAccessor, OnInit, D
 
     if (itemsChanges) {
       this._setItems(this.items);
-      this.value = this.value;
 
       this.onItemsChange.emit({
         component: this
@@ -1629,7 +1628,7 @@ export class IonicSelectableComponent implements ControlValueAccessor, OnInit, D
    */
   toggleItems(isSelect: boolean, items?: any[]) {
     if (isSelect) {
-      const hasItems = items && items.length;
+      const hasItems = items?.length;
       let itemsToToggle = this._groups.reduce((allItems, group) => {
         return allItems.concat(group.items);
       }, []);