No provider for ModalController

[aamado91]

I am implementing an application with Ionic 7.1.1 and angular 17.3.8 and this error is occurring when implementing the ionic-selectable component. Install version 5.0.0

[pcervera7747]

Same here

Ionic:

Ionic CLI : 7.2.0
Ionic Framework : @ionic/angular 8.2.7
@angular-devkit/build-angular : 18.2.1
@angular-devkit/schematics : 18.2.1
@angular/cli : 18.2.1
@ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.1.2
@capacitor/android : 6.1.2
@capacitor/android : 6.1.2
@capacitor/core : 6.1.2
@capacitor/ios : 6.1.2

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v22.3.0 (C:\Program Files\nodejs\node.exe)
npm : 10.2.3
OS : Windows 10

ionic-selectable version is: "5.0.3"

[pcervera7747]

Hi again, the problem is that the ModalController import at ion-selectable.component.ts must be the standalone version:

import {ModalController} from "@ionic/angular/standalone";

Instead of:

import { IonItem, ModalController, Platform } from '@ionic/angular';

With this fix, the component works correctly.

Although there is a warning in the browser console:

ionic-selectable-modal.component.ts:13 [Ionic Warning]: NavParams has been deprecated in favor of using Angular's input API. Developers should migrate to either the @input decorator or the Signals-based input API.

I'm trying to figure out how to solve it, i'll add a comment when I find out

[pcervera7747]

Hi again, the problem is that the ModalController import at ion-selectable.component.ts must be the standalone version:

import {ModalController} from "@ionic/angular/standalone";

Instead of:

import { IonItem, ModalController, Platform } from '@ionic/angular';

With this fix, the component works correctly.

Although there is a warning in the browser console:

ionic-selectable-modal.component.ts:13 [Ionic Warning]: NavParams has been deprecated in favor of using Angular's input API. Developers should migrate to either the @input decorator or the Signals-based input API.

I'm trying to figure out how to solve it, i'll add a comment when I find out

Solution for Ionic Selectable Component Warning

Regarding the warning mentioned earlier, it also has an easy fix:
All necessary changes must be made in the ionic-selectable-modal.component.ts component.

Step 1: Decorate selectComponent with @Input()

Before:

selectComponent: IonicSelectableComponent;

After:

@Input() selectComponent: IonicSelectableComponent;

Step 2: Remove navParams from the constructor and move the code to OnInit

This ensures that the selectComponent parameter gets its value in time.

Before:

constructor(
    private navParams: NavParams,
    public _element: ElementRef,
  ) {
    this.selectComponent = this.navParams.get('selectComponent');
    this.selectComponent._modalComponent = this;
    this.selectComponent._selectedItems = [];

    if (!this.selectComponent._isNullOrWhiteSpace(this.selectComponent.value)) {
      if (this.selectComponent.isMultiple) {
        this.selectComponent.value.forEach((item: any) => {
          this.selectComponent._selectedItems.push(item);
        });
      } else {
        this.selectComponent._selectedItems.push(this.selectComponent.value);
      }
    }

    this.selectComponent._setItemsToConfirm(this.selectComponent._selectedItems);
  }

After:

constructor(public _element: ElementRef) {
    }

    ngOnInit(): void {
        this.selectComponent._modalComponent = this;
        this.selectComponent._selectedItems = [];

        if (!this.selectComponent._isNullOrWhiteSpace(this.selectComponent.value)) {
            if (this.selectComponent.isMultiple) {
                this.selectComponent.value.forEach((item: any) => {
                    this.selectComponent._selectedItems.push(item);
                });
            } else {
                this.selectComponent._selectedItems.push(this.selectComponent.value);
            }
        }

        this.selectComponent._setItemsToConfirm(this.selectComponent._selectedItems);
    }

Let me know if this fix sounds good to you

[vicente-peris]

Hi @pcervera7747, I have the same problem and I've made the changes to import the standalone component on ion-selectable.component.ts but it doesn't work.

Maybe I forgot something, do i have to recompile the library? how can I do it?

Thank you.

[GusLAN]

Same problem here!!

[mattiabonzi]

What worked for me, although I don't understand why, was including IonicModule in the import instead of the individual components I use.
I had this problem only on 1 component in the entire app, everywhere else seems to work fine without the IonicModule.

import { IonicModule } from '@ionic/angular';
...
@Component({
  selector: 'my-comp',
  templateUrl: './my-comp.page.html',
  styleUrls: ['./my-comp.page.scss'],
  standalone: true,
  imports: [ IonicModule, ...]
})

[LetrixZ]

Here is a patch generated with pnpm for #451 (comment)

diff --git a/esm2022/src/app/components/ionic-selectable/ionic-selectable.component.mjs b/esm2022/src/app/components/ionic-selectable/ionic-selectable.component.mjs
index 5b1eeb7926ae10bec38018145c28c1f589a07966..d82f4f97e46faf2ea1b6ea73c9fa1c048f851f2c 100644
--- a/esm2022/src/app/components/ionic-selectable/ionic-selectable.component.mjs
+++ b/esm2022/src/app/components/ionic-selectable/ionic-selectable.component.mjs
@@ -19,6 +19,7 @@ import { IonicSelectableTitleTemplateDirective } from './ionic-selectable-title-
 import { IonicSelectableValueTemplateDirective } from './ionic-selectable-value-template.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "@ionic/angular";
+import { ModalController } from '@ionic/angular/standalone';
 export class IonicSelectableComponent {
     _modalController;
     _platform;
@@ -1553,7 +1554,7 @@ export class IonicSelectableComponent {
         this._itemToAdd = null;
         this._toggleAddItemTemplate(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: IonicSelectableComponent, deps: [{ token: i1.ModalController }, { token: i1.Platform }, { token: i1.IonItem, optional: true }, { token: i0.IterableDiffers }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: IonicSelectableComponent, deps: [{ token: ModalController }, { token: i1.Platform }, { token: i1.IonItem, optional: true }, { token: i0.IterableDiffers }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: IonicSelectableComponent, isStandalone: true, selector: "ionic-selectable", inputs: { items: "items", isEnabled: "isEnabled", shouldBackdropClose: "shouldBackdropClose", modalCssClass: "modalCssClass", modalEnterAnimation: "modalEnterAnimation", modalLeaveAnimation: "modalLeaveAnimation", isConfirmButtonEnabled: "isConfirmButtonEnabled", hasConfirmButton: "hasConfirmButton", itemValueField: "itemValueField", itemTextField: "itemTextField", groupValueField: "groupValueField", groupTextField: "groupTextField", canSearch: "canSearch", isOnSearchEnabled: "isOnSearchEnabled", canClear: "canClear", hasInfiniteScroll: "hasInfiniteScroll", hasVirtualScroll: "hasVirtualScroll", virtualScrollApproxItemHeight: "virtualScrollApproxItemHeight", searchPlaceholder: "searchPlaceholder", placeholder: "placeholder", isMultiple: "isMultiple", searchFailText: "searchFailText", clearButtonText: "clearButtonText", addButtonText: "addButtonText", confirmButtonText: "confirmButtonText", closeButtonText: "closeButtonText", shouldFocusSearchbar: "shouldFocusSearchbar", headerColor: "headerColor", groupColor: "groupColor", closeButtonSlot: "closeButtonSlot", itemIconSlot: "itemIconSlot", searchDebounce: "searchDebounce", disabledItems: "disabledItems", shouldStoreItemValue: "shouldStoreItemValue", canSaveItem: "canSaveItem", canDeleteItem: "canDeleteItem", canAddItem: "canAddItem", virtualScrollHeaderFn: "virtualScrollHeaderFn" }, outputs: { itemsChange: "itemsChange", onChange: "onChange", onSearch: "onSearch", onSearchFail: "onSearchFail", onSearchSuccess: "onSearchSuccess", onInfiniteScroll: "onInfiniteScroll", onOpen: "onOpen", onClose: "onClose", onSelect: "onSelect", onClear: "onClear", onSaveItem: "onSaveItem", onDeleteItem: "onDeleteItem", onAddItem: "onAddItem" }, host: { properties: { "class.ionic-selectable": "this._cssClass", "class.ionic-selectable-ios": "this._isIos", "class.ionic-selectable-md": "this._isMD", "class.ionic-selectable-is-multiple": "this._isMultipleCssClass", "class.ionic-selectable-has-value": "this._hasValueCssClass", "class.ionic-selectable-has-placeholder": "this._hasPlaceholderCssClass", "class.ionic-selectable-has-label": "this._hasIonLabelCssClass", "class.ionic-selectable-label-default": "this._hasDefaultIonLabelCssClass", "class.ionic-selectable-label-fixed": "this._hasFixedIonLabelCssClass", "class.ionic-selectable-label-stacked": "this._hasStackedIonLabelCssClass", "class.ionic-selectable-label-floating": "this._hasFloatingIonLabelCssClass", "class.ionic-selectable-is-enabled": "this.isEnabled", "class.ionic-selectable-can-clear": "this.canClear" } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => IonicSelectableComponent),
@@ -1567,7 +1568,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
                             useExisting: forwardRef(() => IonicSelectableComponent),
                             multi: true
                         }], standalone: true, imports: [NgIf, NgTemplateOutlet, NgFor], template: "<div class=\"ionic-selectable-inner\">\n  <div class=\"ionic-selectable-value\">\n    <div *ngIf=\"valueTemplate && _valueItems.length && isMultiple\"\n      [ngTemplateOutlet]=\"valueTemplate\"\n      [ngTemplateOutletContext]=\"{ value: _valueItems }\">\n    </div>\n    <div class=\"ionic-selectable-value-item\"\n      *ngIf=\"valueTemplate && _valueItems.length && !isMultiple\">\n      <div [ngTemplateOutlet]=\"valueTemplate\"\n        [ngTemplateOutletContext]=\"{ value: _valueItems[0] }\">\n      </div>\n    </div>\n    <span *ngIf=\"!valueTemplate && _valueItems.length\">\n      <div class=\"ionic-selectable-value-item\"\n        *ngFor=\"let valueItem of _valueItems\">\n        {{_formatValueItem(valueItem)}}\n      </div>\n    </span>\n    <div *ngIf=\"_hasPlaceholder && placeholderTemplate\"\n      class=\"ionic-selectable-value-item\">\n      <div [ngTemplateOutlet]=\"placeholderTemplate\">\n      </div>\n    </div>\n    <div class=\"ionic-selectable-value-item\"\n      *ngIf=\"_hasPlaceholder && !placeholderTemplate\">\n      {{placeholder}}\n    </div>\n    <!-- Fix icon allignment when there's no value or placeholder. -->\n    <span *ngIf=\"!_valueItems.length && !_hasPlaceholder\">&nbsp;</span>\n  </div>\n  <div *ngIf=\"iconTemplate\" class=\"ionic-selectable-icon-template\">\n      <div [ngTemplateOutlet]=\"iconTemplate\"></div>\n  </div>\n  <div *ngIf=\"!iconTemplate\" class=\"ionic-selectable-icon\">\n    <div class=\"ionic-selectable-icon-inner\"></div>\n  </div>\n  <!-- Need to be type=\"button\" otherwise click event triggers form ngSubmit. -->\n  <button class=\"ionic-selectable-cover\" [disabled]=\"!isEnabled\"\n    (click)=\"_click()\" type=\"button\">\n  </button>\n</div>\n", styles: [".item-ionic-selectable .item-inner .input-wrapper{align-items:normal}.item-ionic-selectable ion-label{flex:1;max-width:initial}.ionic-selectable{display:block;max-width:45%}.ionic-selectable-inner{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:flex-end}.ionic-selectable-has-placeholder .ionic-selectable-value-item{color:var(--placeholder-color, #999)}.ionic-selectable-value{flex:1;padding-top:13px;padding-bottom:13px;overflow:hidden}.ionic-selectable-value-item{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.ionic-selectable-value-item:not(:last-child){margin-bottom:5px}.ionic-selectable-icon{position:relative;width:20px}.ionic-selectable-icon-inner{position:absolute;top:20px;left:5px;border-top:5px solid;border-right:5px solid transparent;border-left:5px solid transparent;pointer-events:none;color:var(--icon-color, #999)}.ionic-selectable-icon-template{align-self:center;margin-left:5px}.ionic-selectable-ios .ionic-selectable-value{padding-top:11px;padding-bottom:11px}.ionic-selectable-ios .ionic-selectable-icon-inner{top:19px}.ionic-selectable-spinner{position:fixed;inset:0;z-index:1}.ionic-selectable-spinner-background{inset:0;position:absolute;background-color:#000;opacity:.05}.ionic-selectable-spinner ion-spinner{position:absolute;top:50%;left:50%;z-index:10;margin-top:-14px;margin-left:-14px}.ionic-selectable-cover{left:0;top:0;margin:0;position:absolute;width:100%;height:100%;border:0;background:0 0;cursor:pointer;-webkit-appearance:none;appearance:none;outline:0}.ionic-selectable-add-item-template{position:fixed;bottom:0;left:0;right:0;background-color:#fff}.ionic-selectable-add-item-template-inner{overflow-y:auto}.ionic-selectable-add-item-template-inner>ion-footer{bottom:0;position:absolute}.ionic-selectable-label-stacked,.ionic-selectable-label-floating{align-self:stretch;max-width:100%;padding-left:0;padding-top:8px;padding-bottom:8px}.ionic-selectable-label-stacked .ionic-selectable-value,.ionic-selectable-label-floating .ionic-selectable-value{padding-top:0;padding-bottom:0;min-height:19px}.ionic-selectable-label-stacked .ionic-selectable-icon-inner,.ionic-selectable-label-floating .ionic-selectable-icon-inner{top:7px}.ionic-selectable-label-stacked.ionic-selectable-ios .ionic-selectable-value,.ionic-selectable-label-floating.ionic-selectable-ios .ionic-selectable-value{padding-top:0;padding-bottom:0;min-height:20px}.ionic-selectable-label-stacked.ionic-selectable-ios .ionic-selectable-icon-inner,.ionic-selectable-label-floating.ionic-selectable-ios .ionic-selectable-icon-inner{top:8px}.ionic-selectable-label-default .ionic-selectable-value,.ionic-selectable-label-fixed .ionic-selectable-value{padding-left:var(--padding-start, 16px)}.ionic-selectable-label-fixed:not(.ionic-selectable-has-value) .ionic-selectable-value{padding-left:calc(var(--padding-start, 16px) + 11px)}.ionic-selectable-modal .ionic-selectable-group ion-item-divider{padding-right:16px}.ionic-selectable-modal .ionic-selectable-item-button{margin-left:8px;margin-right:8px}.ionic-selectable-modal-ios .ionic-selectable-message{padding:8px}.ionic-selectable-modal-ios .ionic-selectable-group ion-item-divider{padding-right:8px}.ionic-selectable-modal-md .ionic-selectable-message{padding:8px 12px}.ionic-selectable-modal.ionic-selectable-modal-can-clear.ionic-selectable-modal-is-multiple .footer .col:first-child{padding-right:8px}.ionic-selectable-modal.ionic-selectable-modal-can-clear.ionic-selectable-modal-is-multiple .footer .col:last-child{padding-left:8px}.ionic-selectable-modal.ionic-selectable-modal-is-searching .scroll-content{overflow-y:hidden}.ionic-selectable-modal.ionic-selectable-modal-is-add-item-template-visible>.content>.scroll-content{overflow-y:hidden}.ionic-selectable-modal ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.ModalController }, { type: i1.Platform }, { type: i1.IonItem, decorators: [{
+        }], ctorParameters: function () { return [{ type: ModalController }, { type: i1.Platform }, { type: i1.IonItem, decorators: [{
                     type: Optional
                 }] }, { type: i0.IterableDiffers }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { _cssClass: [{
                 type: HostBinding,
diff --git a/fesm2022/ionic-selectable.mjs b/fesm2022/ionic-selectable.mjs
index 97b06ea6d366d2c46bcd4423c02cadf210b64668..8d8417446e5794def12da37064550646922afc4b 100644
--- a/fesm2022/ionic-selectable.mjs
+++ b/fesm2022/ionic-selectable.mjs
@@ -4,6 +4,7 @@ import { Directive, Component, ViewChild, HostBinding, HostListener, EventEmitte
 import * as i2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@ionic/angular';
+import { ModalController } from '@ionic/angular/standalone';
 import { IonContent, IonInfiniteScroll, IonicModule } from '@ionic/angular';
 
 class IonicSelectableAddItemTemplateDirective {
@@ -1820,7 +1821,7 @@ class IonicSelectableComponent {
         this._itemToAdd = null;
         this._toggleAddItemTemplate(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: IonicSelectableComponent, deps: [{ token: i1.ModalController }, { token: i1.Platform }, { token: i1.IonItem, optional: true }, { token: i0.IterableDiffers }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: IonicSelectableComponent, deps: [{ token: ModalController }, { token: i1.Platform }, { token: i1.IonItem, optional: true }, { token: i0.IterableDiffers }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: IonicSelectableComponent, isStandalone: true, selector: "ionic-selectable", inputs: { items: "items", isEnabled: "isEnabled", shouldBackdropClose: "shouldBackdropClose", modalCssClass: "modalCssClass", modalEnterAnimation: "modalEnterAnimation", modalLeaveAnimation: "modalLeaveAnimation", isConfirmButtonEnabled: "isConfirmButtonEnabled", hasConfirmButton: "hasConfirmButton", itemValueField: "itemValueField", itemTextField: "itemTextField", groupValueField: "groupValueField", groupTextField: "groupTextField", canSearch: "canSearch", isOnSearchEnabled: "isOnSearchEnabled", canClear: "canClear", hasInfiniteScroll: "hasInfiniteScroll", hasVirtualScroll: "hasVirtualScroll", virtualScrollApproxItemHeight: "virtualScrollApproxItemHeight", searchPlaceholder: "searchPlaceholder", placeholder: "placeholder", isMultiple: "isMultiple", searchFailText: "searchFailText", clearButtonText: "clearButtonText", addButtonText: "addButtonText", confirmButtonText: "confirmButtonText", closeButtonText: "closeButtonText", shouldFocusSearchbar: "shouldFocusSearchbar", headerColor: "headerColor", groupColor: "groupColor", closeButtonSlot: "closeButtonSlot", itemIconSlot: "itemIconSlot", searchDebounce: "searchDebounce", disabledItems: "disabledItems", shouldStoreItemValue: "shouldStoreItemValue", canSaveItem: "canSaveItem", canDeleteItem: "canDeleteItem", canAddItem: "canAddItem", virtualScrollHeaderFn: "virtualScrollHeaderFn" }, outputs: { itemsChange: "itemsChange", onChange: "onChange", onSearch: "onSearch", onSearchFail: "onSearchFail", onSearchSuccess: "onSearchSuccess", onInfiniteScroll: "onInfiniteScroll", onOpen: "onOpen", onClose: "onClose", onSelect: "onSelect", onClear: "onClear", onSaveItem: "onSaveItem", onDeleteItem: "onDeleteItem", onAddItem: "onAddItem" }, host: { properties: { "class.ionic-selectable": "this._cssClass", "class.ionic-selectable-ios": "this._isIos", "class.ionic-selectable-md": "this._isMD", "class.ionic-selectable-is-multiple": "this._isMultipleCssClass", "class.ionic-selectable-has-value": "this._hasValueCssClass", "class.ionic-selectable-has-placeholder": "this._hasPlaceholderCssClass", "class.ionic-selectable-has-label": "this._hasIonLabelCssClass", "class.ionic-selectable-label-default": "this._hasDefaultIonLabelCssClass", "class.ionic-selectable-label-fixed": "this._hasFixedIonLabelCssClass", "class.ionic-selectable-label-stacked": "this._hasStackedIonLabelCssClass", "class.ionic-selectable-label-floating": "this._hasFloatingIonLabelCssClass", "class.ionic-selectable-is-enabled": "this.isEnabled", "class.ionic-selectable-can-clear": "this.canClear" } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => IonicSelectableComponent),
@@ -1834,7 +1835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
                             useExisting: forwardRef(() => IonicSelectableComponent),
                             multi: true
                         }], standalone: true, imports: [NgIf, NgTemplateOutlet, NgFor], template: "<div class=\"ionic-selectable-inner\">\n  <div class=\"ionic-selectable-value\">\n    <div *ngIf=\"valueTemplate && _valueItems.length && isMultiple\"\n      [ngTemplateOutlet]=\"valueTemplate\"\n      [ngTemplateOutletContext]=\"{ value: _valueItems }\">\n    </div>\n    <div class=\"ionic-selectable-value-item\"\n      *ngIf=\"valueTemplate && _valueItems.length && !isMultiple\">\n      <div [ngTemplateOutlet]=\"valueTemplate\"\n        [ngTemplateOutletContext]=\"{ value: _valueItems[0] }\">\n      </div>\n    </div>\n    <span *ngIf=\"!valueTemplate && _valueItems.length\">\n      <div class=\"ionic-selectable-value-item\"\n        *ngFor=\"let valueItem of _valueItems\">\n        {{_formatValueItem(valueItem)}}\n      </div>\n    </span>\n    <div *ngIf=\"_hasPlaceholder && placeholderTemplate\"\n      class=\"ionic-selectable-value-item\">\n      <div [ngTemplateOutlet]=\"placeholderTemplate\">\n      </div>\n    </div>\n    <div class=\"ionic-selectable-value-item\"\n      *ngIf=\"_hasPlaceholder && !placeholderTemplate\">\n      {{placeholder}}\n    </div>\n    <!-- Fix icon allignment when there's no value or placeholder. -->\n    <span *ngIf=\"!_valueItems.length && !_hasPlaceholder\">&nbsp;</span>\n  </div>\n  <div *ngIf=\"iconTemplate\" class=\"ionic-selectable-icon-template\">\n      <div [ngTemplateOutlet]=\"iconTemplate\"></div>\n  </div>\n  <div *ngIf=\"!iconTemplate\" class=\"ionic-selectable-icon\">\n    <div class=\"ionic-selectable-icon-inner\"></div>\n  </div>\n  <!-- Need to be type=\"button\" otherwise click event triggers form ngSubmit. -->\n  <button class=\"ionic-selectable-cover\" [disabled]=\"!isEnabled\"\n    (click)=\"_click()\" type=\"button\">\n  </button>\n</div>\n", styles: [".item-ionic-selectable .item-inner .input-wrapper{align-items:normal}.item-ionic-selectable ion-label{flex:1;max-width:initial}.ionic-selectable{display:block;max-width:45%}.ionic-selectable-inner{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:flex-end}.ionic-selectable-has-placeholder .ionic-selectable-value-item{color:var(--placeholder-color, #999)}.ionic-selectable-value{flex:1;padding-top:13px;padding-bottom:13px;overflow:hidden}.ionic-selectable-value-item{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.ionic-selectable-value-item:not(:last-child){margin-bottom:5px}.ionic-selectable-icon{position:relative;width:20px}.ionic-selectable-icon-inner{position:absolute;top:20px;left:5px;border-top:5px solid;border-right:5px solid transparent;border-left:5px solid transparent;pointer-events:none;color:var(--icon-color, #999)}.ionic-selectable-icon-template{align-self:center;margin-left:5px}.ionic-selectable-ios .ionic-selectable-value{padding-top:11px;padding-bottom:11px}.ionic-selectable-ios .ionic-selectable-icon-inner{top:19px}.ionic-selectable-spinner{position:fixed;inset:0;z-index:1}.ionic-selectable-spinner-background{inset:0;position:absolute;background-color:#000;opacity:.05}.ionic-selectable-spinner ion-spinner{position:absolute;top:50%;left:50%;z-index:10;margin-top:-14px;margin-left:-14px}.ionic-selectable-cover{left:0;top:0;margin:0;position:absolute;width:100%;height:100%;border:0;background:0 0;cursor:pointer;-webkit-appearance:none;appearance:none;outline:0}.ionic-selectable-add-item-template{position:fixed;bottom:0;left:0;right:0;background-color:#fff}.ionic-selectable-add-item-template-inner{overflow-y:auto}.ionic-selectable-add-item-template-inner>ion-footer{bottom:0;position:absolute}.ionic-selectable-label-stacked,.ionic-selectable-label-floating{align-self:stretch;max-width:100%;padding-left:0;padding-top:8px;padding-bottom:8px}.ionic-selectable-label-stacked .ionic-selectable-value,.ionic-selectable-label-floating .ionic-selectable-value{padding-top:0;padding-bottom:0;min-height:19px}.ionic-selectable-label-stacked .ionic-selectable-icon-inner,.ionic-selectable-label-floating .ionic-selectable-icon-inner{top:7px}.ionic-selectable-label-stacked.ionic-selectable-ios .ionic-selectable-value,.ionic-selectable-label-floating.ionic-selectable-ios .ionic-selectable-value{padding-top:0;padding-bottom:0;min-height:20px}.ionic-selectable-label-stacked.ionic-selectable-ios .ionic-selectable-icon-inner,.ionic-selectable-label-floating.ionic-selectable-ios .ionic-selectable-icon-inner{top:8px}.ionic-selectable-label-default .ionic-selectable-value,.ionic-selectable-label-fixed .ionic-selectable-value{padding-left:var(--padding-start, 16px)}.ionic-selectable-label-fixed:not(.ionic-selectable-has-value) .ionic-selectable-value{padding-left:calc(var(--padding-start, 16px) + 11px)}.ionic-selectable-modal .ionic-selectable-group ion-item-divider{padding-right:16px}.ionic-selectable-modal .ionic-selectable-item-button{margin-left:8px;margin-right:8px}.ionic-selectable-modal-ios .ionic-selectable-message{padding:8px}.ionic-selectable-modal-ios .ionic-selectable-group ion-item-divider{padding-right:8px}.ionic-selectable-modal-md .ionic-selectable-message{padding:8px 12px}.ionic-selectable-modal.ionic-selectable-modal-can-clear.ionic-selectable-modal-is-multiple .footer .col:first-child{padding-right:8px}.ionic-selectable-modal.ionic-selectable-modal-can-clear.ionic-selectable-modal-is-multiple .footer .col:last-child{padding-left:8px}.ionic-selectable-modal.ionic-selectable-modal-is-searching .scroll-content{overflow-y:hidden}.ionic-selectable-modal.ionic-selectable-modal-is-add-item-template-visible>.content>.scroll-content{overflow-y:hidden}.ionic-selectable-modal ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.ModalController }, { type: i1.Platform }, { type: i1.IonItem, decorators: [{
+        }], ctorParameters: function () { return [{ type: ModalController }, { type: i1.Platform }, { type: i1.IonItem, decorators: [{
                     type: Optional
                 }] }, { type: i0.IterableDiffers }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { _cssClass: [{
                 type: HostBinding,
diff --git a/src/app/components/ionic-selectable/ionic-selectable.component.d.ts b/src/app/components/ionic-selectable/ionic-selectable.component.d.ts
index 2d21bd1279bb2d3b3d184cf7a58fe9913ed36d9b..9dc54dc4b3584674bd3e4df9950761912ace7066 100644
--- a/src/app/components/ionic-selectable/ionic-selectable.component.d.ts
+++ b/src/app/components/ionic-selectable/ionic-selectable.component.d.ts
@@ -1,6 +1,7 @@
 import { DoCheck, ElementRef, EventEmitter, IterableDiffers, OnInit, Renderer2, TemplateRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { IonItem, ModalController, Platform } from '@ionic/angular';
+import { ModalController } from '@ionic/angular/standalone';
+import { IonItem, Platform } from '@ionic/angular';
 import { AnimationBuilder } from '@ionic/core';
 import { IonicSelectableModalComponent } from './ionic-selectable-modal.component';
 import * as i0 from "@angular/core";