@eui/mobile-core 18.0.0-next.7 → 18.0.0-next.8

package/docs/miscellaneous/typealiases.html

@@ -110,6 +110,9 @@
             <tr>
                 <td class="col-md-4">
                     <ul class="index-list">
+                        <li>
+                            <a href="#IconColor" title="packages/eui-mobile/packages/core/src/lib/components/layout/euim-sidebar/euim-sidebar-content/euim-sidebar-content.component.ts" ><b>IconColor</b>&nbsp;&nbsp;&nbsp;(packages/.../euim-sidebar-content.component.ts)</a>
+                        </li>
                         <li>
                             <a href="#SkeletonItemInputs" title="packages/eui-mobile/packages/core/src/lib/components/euim-skeleton-list/euim-skeleton-list.component.ts" ><b>SkeletonItemInputs</b>&nbsp;&nbsp;&nbsp;(packages/.../euim-skeleton-list.component.ts)</a>
                         </li>
@@ -123,7 +126,25 @@
     </table>
 </section>
 
-    <h3>packages/eui-mobile/packages/core/src/lib/components/euim-skeleton-list/euim-skeleton-list.component.ts</h3>
+    <h3>packages/eui-mobile/packages/core/src/lib/components/layout/euim-sidebar/euim-sidebar-content/euim-sidebar-content.component.ts</h3>
+    <section data-compodoc="block-typealias">
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="IconColor"></a>
+                    <span class="name "><b>IconColor</b><a href="#IconColor"><span class="icon ion-ios-link"></span></a></span>
+                </td>
+            </tr>
+            <tr>
+                <td class="col-md-4">
+                    <code>    <code>&quot;primary&quot; | &quot;default&quot; | &quot;info&quot; | &quot;success&quot; | &quot;warning&quot; | &quot;danger&quot; | &quot;dark&quot; | &quot;white&quot; | &quot;accent&quot; | &quot;secondary&quot;</code>
+</code>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</section>    <h3>packages/eui-mobile/packages/core/src/lib/components/euim-skeleton-list/euim-skeleton-list.component.ts</h3>
     <section data-compodoc="block-typealias">
     <table class="table table-sm table-bordered">
         <tbody>

package/esm2022/lib/components/layout/euim-sidebar/euim-sidebar-content/euim-sidebar-content.component.mjs

@@ -1,18 +1,45 @@
-import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
+import { ChangeDetectionStrategy, ViewChild, Output, EventEmitter, Component, HostBinding, Input, booleanAttribute } from '@angular/core';
+import { IonSearchbar } from '@ionic/angular';
 import * as i0 from "@angular/core";
 import * as i1 from "@eui/core";
 import * as i2 from "@ionic/angular";
 export class EuimSidebarContentComponent {
-    constructor(i18nService, asService, navCtrl) {
+    constructor(i18nService, asService, menuCtrl, navCtrl) {
         this.i18nService = i18nService;
         this.asService = asService;
+        this.menuCtrl = menuCtrl;
         this.navCtrl = navCtrl;
         this.className = 'euim-sidebar-content';
         this.sidebarItems = [];
+        this.hasSearchbar = false;
+        this.sidebarItemsFilter = new EventEmitter();
+        this.filteredItems = [];
+        this.query = '';
         i18nService.init().subscribe();
     }
     ngOnInit() {
         this.sortSidebarItems();
+        if (this.hasSearchbar) {
+            this.filteredItems = [...this.sidebarItems];
+            this.sidebarItemsFilter.emit(this.filteredItems);
+        }
+    }
+    handleInput(event) {
+        this.query = event.detail.value.toLowerCase();
+        this.filteredItems = this.filterMenuItems(this.sidebarItems, this.query);
+        this.sidebarItemsFilter.emit(this.filteredItems);
+        if (this.query === '') {
+            this.sidebarItemsFilter.emit(this.sidebarItems);
+        }
+    }
+    closeMenu() {
+        if (!this.hasSearchbar)
+            return;
+        this.menuCtrl.close().then(() => {
+            this.sidebarItemsFilter.emit(this.sidebarItems);
+            this.query = '';
+            this.searchbar.value = '';
+        });
     }
     sortSidebarItems() {
         this.sidebarItems.sort((a, b) => {
@@ -22,15 +49,28 @@ export class EuimSidebarContentComponent {
             return a.group - b.group;
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EuimSidebarContentComponent, deps: [{ token: i1.I18nService }, { token: i1.EuiAppShellService }, { token: i2.NavController }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: EuimSidebarContentComponent, selector: "euim-sidebar-content", inputs: { sidebarItems: "sidebarItems" }, host: { properties: { "className": "this.className" } }, ngImport: i0, template: "<ion-list class=\"euim-sidebar-content__list\">\n    <ion-menu-toggle auto-hide=\"true\">\n        <ng-content></ng-content>\n    </ion-menu-toggle>\n</ion-list>\n", dependencies: [{ kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    filterMenuItems(items, searchPhrase) {
+        return items.filter(item => {
+            return !item.isSection && item.label.toLowerCase().includes(searchPhrase.toLowerCase());
+        });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EuimSidebarContentComponent, deps: [{ token: i1.I18nService }, { token: i1.EuiAppShellService }, { token: i2.MenuController }, { token: i2.NavController }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: EuimSidebarContentComponent, selector: "euim-sidebar-content", inputs: { sidebarItems: "sidebarItems", hasSearchbar: ["hasSearchbar", "hasSearchbar", booleanAttribute] }, outputs: { sidebarItemsFilter: "sidebarItemsFilter" }, host: { properties: { "className": "this.className" } }, viewQueries: [{ propertyName: "searchbar", first: true, predicate: IonSearchbar, descendants: true }], ngImport: i0, template: "<ion-list class=\"euim-sidebar-content__list\">\n    @if (hasSearchbar) {\n    <ion-searchbar (ionInput)=\"handleInput($event)\"></ion-searchbar>\n    }\n    <ion-menu-toggle auto-hide=\"true\" (click)=\"closeMenu()\">\n        <ng-content></ng-content>\n    </ion-menu-toggle>\n</ion-list>\n\n", dependencies: [{ kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EuimSidebarContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-sidebar-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-list class=\"euim-sidebar-content__list\">\n    <ion-menu-toggle auto-hide=\"true\">\n        <ng-content></ng-content>\n    </ion-menu-toggle>\n</ion-list>\n" }]
-        }], ctorParameters: () => [{ type: i1.I18nService }, { type: i1.EuiAppShellService }, { type: i2.NavController }], propDecorators: { className: [{
+            args: [{ selector: 'euim-sidebar-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-list class=\"euim-sidebar-content__list\">\n    @if (hasSearchbar) {\n    <ion-searchbar (ionInput)=\"handleInput($event)\"></ion-searchbar>\n    }\n    <ion-menu-toggle auto-hide=\"true\" (click)=\"closeMenu()\">\n        <ng-content></ng-content>\n    </ion-menu-toggle>\n</ion-list>\n\n" }]
+        }], ctorParameters: () => [{ type: i1.I18nService }, { type: i1.EuiAppShellService }, { type: i2.MenuController }, { type: i2.NavController }], propDecorators: { className: [{
                 type: HostBinding
             }], sidebarItems: [{
                 type: Input
+            }], hasSearchbar: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], sidebarItemsFilter: [{
+                type: Output
+            }], searchbar: [{
+                type: ViewChild,
+                args: [IonSearchbar, { static: false }]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXVpbS1zaWRlYmFyLWNvbnRlbnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL2xheW91dC9ldWltLXNpZGViYXIvZXVpbS1zaWRlYmFyLWNvbnRlbnQvZXVpbS1zaWRlYmFyLWNvbnRlbnQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL2xheW91dC9ldWltLXNpZGViYXIvZXVpbS1zaWRlYmFyLWNvbnRlbnQvZXVpbS1zaWRlYmFyLWNvbnRlbnQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7O0FBVS9GLE1BQU0sT0FBTywyQkFBMkI7SUFJcEMsWUFBb0IsV0FBd0IsRUFDakMsU0FBNkIsRUFDNUIsT0FBc0I7UUFGZCxnQkFBVyxHQUFYLFdBQVcsQ0FBYTtRQUNqQyxjQUFTLEdBQVQsU0FBUyxDQUFvQjtRQUM1QixZQUFPLEdBQVAsT0FBTyxDQUFlO1FBTG5CLGNBQVMsR0FBRyxzQkFBc0IsQ0FBQztRQUN6QyxpQkFBWSxHQUFHLEVBQUUsQ0FBQztRQUtuQixXQUFXLENBQUMsSUFBSSxFQUFFLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDdkMsQ0FBQztJQUVELFFBQVE7UUFDSixJQUFJLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRVMsZ0JBQWdCO1FBQ3RCLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxFQUFFO1lBQzVCLElBQUksQ0FBQyxDQUFDLEtBQUssS0FBSyxDQUFDLENBQUMsS0FBSyxFQUFFLENBQUM7Z0JBQ3RCLE9BQU8sQ0FBQyxDQUFDLEtBQUssQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBQzFDLENBQUM7WUFDRCxPQUFPLENBQUMsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLEtBQUssQ0FBQztRQUM3QixDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7aUlBckJRLDJCQUEyQjtxSEFBM0IsMkJBQTJCLCtKQ1Z4QyxxS0FLQTs7MkZES2EsMkJBQTJCO2tCQUx2QyxTQUFTOytCQUNJLHNCQUFzQixtQkFFZix1QkFBdUIsQ0FBQyxNQUFNOzZJQUdoQyxTQUFTO3NCQUF2QixXQUFXO2dCQUNILFlBQVk7c0JBQXBCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBIb3N0QmluZGluZywgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRXVpbVNpZGViYXJDb21wb25lbnQgfSBmcm9tICcuLi9ldWltLXNpZGViYXIuY29tcG9uZW50JztcbmltcG9ydCB7IEkxOG5TZXJ2aWNlLCBFdWlBcHBTaGVsbFNlcnZpY2UgfSBmcm9tICdAZXVpL2NvcmUnO1xuaW1wb3J0IHsgTmF2Q29udHJvbGxlciB9IGZyb20gJ0Bpb25pYy9hbmd1bGFyJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdldWltLXNpZGViYXItY29udGVudCcsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2V1aW0tc2lkZWJhci1jb250ZW50LmNvbXBvbmVudC5odG1sJyxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgRXVpbVNpZGViYXJDb250ZW50Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgICBASG9zdEJpbmRpbmcoKSBjbGFzc05hbWUgPSAnZXVpbS1zaWRlYmFyLWNvbnRlbnQnO1xuICAgIEBJbnB1dCgpIHNpZGViYXJJdGVtcyA9IFtdO1xuXG4gICAgY29uc3RydWN0b3IocHJpdmF0ZSBpMThuU2VydmljZTogSTE4blNlcnZpY2UsXG4gICAgICAgIHB1YmxpYyBhc1NlcnZpY2U6IEV1aUFwcFNoZWxsU2VydmljZSxcbiAgICAgICAgcHJpdmF0ZSBuYXZDdHJsOiBOYXZDb250cm9sbGVyKSB7XG4gICAgICAgICAgICBpMThuU2VydmljZS5pbml0KCkuc3Vic2NyaWJlKCk7XG4gICAgfVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuc29ydFNpZGViYXJJdGVtcygpO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBzb3J0U2lkZWJhckl0ZW1zKCk6IHZvaWQge1xuICAgICAgICB0aGlzLnNpZGViYXJJdGVtcy5zb3J0KChhLCBiKSA9PiB7XG4gICAgICAgICAgICBpZiAoYS5ncm91cCA9PT0gYi5ncm91cCkge1xuICAgICAgICAgICAgICAgIHJldHVybiBhLmxhYmVsLmxvY2FsZUNvbXBhcmUoYi5sYWJlbCk7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgICByZXR1cm4gYS5ncm91cCAtIGIuZ3JvdXA7XG4gICAgICAgIH0pO1xuICAgIH1cbiAgIH1cblxuIiwiPGlvbi1saXN0IGNsYXNzPVwiZXVpbS1zaWRlYmFyLWNvbnRlbnRfX2xpc3RcIj5cbiAgICA8aW9uLW1lbnUtdG9nZ2xlIGF1dG8taGlkZT1cInRydWVcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDwvaW9uLW1lbnUtdG9nZ2xlPlxuPC9pb24tbGlzdD5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXVpbS1zaWRlYmFyLWNvbnRlbnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL2xheW91dC9ldWltLXNpZGViYXIvZXVpbS1zaWRlYmFyLWNvbnRlbnQvZXVpbS1zaWRlYmFyLWNvbnRlbnQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL2xheW91dC9ldWltLXNpZGViYXIvZXVpbS1zaWRlYmFyLWNvbnRlbnQvZXVpbS1zaWRlYmFyLWNvbnRlbnQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFVLGdCQUFnQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRWxKLE9BQU8sRUFBaUMsWUFBWSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7QUFTN0UsTUFBTSxPQUFPLDJCQUEyQjtJQVdwQyxZQUFvQixXQUF3QixFQUNqQyxTQUE2QixFQUM1QixRQUF3QixFQUN4QixPQUFzQjtRQUhkLGdCQUFXLEdBQVgsV0FBVyxDQUFhO1FBQ2pDLGNBQVMsR0FBVCxTQUFTLENBQW9CO1FBQzVCLGFBQVEsR0FBUixRQUFRLENBQWdCO1FBQ3hCLFlBQU8sR0FBUCxPQUFPLENBQWU7UUFibkIsY0FBUyxHQUFHLHNCQUFzQixDQUFDO1FBQ3pDLGlCQUFZLEdBQWUsRUFBRSxDQUFDO1FBRXZDLGlCQUFZLEdBQWlCLEtBQUssQ0FBQztRQUN6Qix1QkFBa0IsR0FBRyxJQUFJLFlBQVksRUFBYyxDQUFDO1FBR3BELGtCQUFhLEdBQWUsRUFBRSxDQUFDO1FBQy9CLFVBQUssR0FBRSxFQUFFLENBQUM7UUFNWixXQUFXLENBQUMsSUFBSSxFQUFFLENBQUMsU0FBUyxFQUFF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ZCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIENvbXBvbmVudCwgSG9zdEJpbmRpbmcsIElucHV0LCBPbkluaXQsIGJvb2xlYW5BdHRyaWJ1dGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEkxOG5TZXJ2aWNlLCBFdWlBcHBTaGVsbFNlcnZpY2UgfSBmcm9tICdAZXVpL2NvcmUnO1xuaW1wb3J0IHsgTmF2Q29udHJvbGxlciwgTWVudUNvbnRyb2xsZXIsIElvblNlYXJjaGJhciB9IGZyb20gJ0Bpb25pYy9hbmd1bGFyJztcbmltcG9ydCB7IEJvb2xlYW5JbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9jb2VyY2lvbic7XG5cbmV4cG9ydCB0eXBlIEljb25Db2xvciA9ICdwcmltYXJ5JyB8ICdkZWZhdWx0JyB8ICdpbmZvJyB8ICdzdWNjZXNzJyB8ICd3YXJuaW5nJyB8ICdkYW5nZXInIHwgJ2RhcmsnIHwgJ3doaXRlJyB8ICdhY2NlbnQnIHwgJ3NlY29uZGFyeSc7XG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2V1aW0tc2lkZWJhci1jb250ZW50JyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vZXVpbS1zaWRlYmFyLWNvbnRlbnQuY29tcG9uZW50Lmh0bWwnLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBFdWltU2lkZWJhckNvbnRlbnRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAgIEBIb3N0QmluZGluZygpIGNsYXNzTmFtZSA9ICdldWltLXNpZGViYXItY29udGVudCc7XG4gICAgQElucHV0KCkgc2lkZWJhckl0ZW1zOiBNZW51SXRlbVtdID0gW107XG4gICAgQElucHV0KHsgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlIH0pXG4gICAgaGFzU2VhcmNoYmFyOiBCb29sZWFuSW5wdXQgPSBmYWxzZTtcbiAgICBAT3V0cHV0KCkgc2lkZWJhckl0ZW1zRmlsdGVyID0gbmV3IEV2ZW50RW1pdHRlcjxNZW51SXRlbVtdPigpO1xuICAgIEBWaWV3Q2hpbGQoSW9uU2VhcmNoYmFyLCB7IHN0YXRpYzogZmFsc2UgfSkgc2VhcmNoYmFyOiBJb25TZWFyY2hiYXI7XG5cbiAgICBwcm90ZWN0ZWQgZmlsdGVyZWRJdGVtczogTWVudUl0ZW1bXSA9IFtdO1xuICAgIHByb3RlY3RlZCBxdWVyeSA9Jyc7XG5cbiAgICBjb25zdHJ1Y3Rvcihwcml2YXRlIGkxOG5TZXJ2aWNlOiBJMThuU2VydmljZSxcbiAgICAgICAgcHVibGljIGFzU2VydmljZTogRXVpQXBwU2hlbGxTZXJ2aWNlLFxuICAgICAgICBwcml2YXRlIG1lbnVDdHJsOiBNZW51Q29udHJvbGxlcixcbiAgICAgICAgcHJpdmF0ZSBuYXZDdHJsOiBOYXZDb250cm9sbGVyKSB7XG4gICAgICAgICAgICBpMThuU2VydmljZS5pbml0KCkuc3Vic2NyaWJlKCk7XG4gICAgfVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuc29ydFNpZGViYXJJdGVtcygpO1xuXG4gICAgICAgIGlmICh0aGlzLmhhc1NlYXJjaGJhcikge1xuICAgICAgICAgICAgdGhpcy5maWx0ZXJlZEl0ZW1zID0gWy4uLnRoaXMuc2lkZWJhckl0ZW1zXTtcbiAgICAgICAgICAgIHRoaXMuc2lkZWJhckl0ZW1zRmlsdGVyLmVtaXQodGhpcy5maWx0ZXJlZEl0ZW1zKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIGhhbmRsZUlucHV0KGV2ZW50OiBDdXN0b21FdmVudCk6IHZvaWQge1xuICAgICAgICB0aGlzLnF1ZXJ5ID0gZXZlbnQuZGV0YWlsLnZhbHVlLnRvTG93ZXJDYXNlKCk7XG4gICAgICAgIHRoaXMuZmlsdGVyZWRJdGVtcyA9IHRoaXMuZmlsdGVyTWVudUl0ZW1zKHRoaXMuc2lkZWJhckl0ZW1zLCB0aGlzLnF1ZXJ5KTtcbiAgICAgICAgdGhpcy5zaWRlYmFySXRlbXNGaWx0ZXIuZW1pdCh0aGlzLmZpbHRlcmVkSXRlbXMpO1xuXG4gICAgICAgIGlmICh0aGlzLnF1ZXJ5ID09PSAnJykge1xuICAgICAgICAgICAgdGhpcy5zaWRlYmFySXRlbXNGaWx0ZXIuZW1pdCh0aGlzLnNpZGViYXJJdGVtcyk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBjbG9zZU1lbnUoKTogdm9pZCB7XG4gICAgICAgIGlmICghdGhpcy5oYXNTZWFyY2hiYXIpIHJldHVybjtcblxuICAgICAgICB0aGlzLm1lbnVDdHJsLmNsb3NlKCkudGhlbigoKSA9PiB7XG4gICAgICAgICAgICB0aGlzLnNpZGViYXJJdGVtc0ZpbHRlci5lbWl0KHRoaXMuc2lkZWJhckl0ZW1zKTtcbiAgICAgICAgICAgIHRoaXMucXVlcnkgPSAnJztcbiAgICAgICAgICAgIHRoaXMuc2VhcmNoYmFyLnZhbHVlID0gJyc7XG4gICAgICAgIH0pO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBzb3J0U2lkZWJhckl0ZW1zKCk6IHZvaWQge1xuICAgICAgICB0aGlzLnNpZGViYXJJdGVtcy5zb3J0KChhLCBiKSA9PiB7XG4gICAgICAgICAgICBpZiAoYS5ncm91cCA9PT0gYi5ncm91cCkge1xuICAgICAgICAgICAgICAgIHJldHVybiBhLmxhYmVsLmxvY2FsZUNvbXBhcmUoYi5sYWJlbCk7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgICByZXR1cm4gYS5ncm91cCAtIGIuZ3JvdXA7XG4gICAgICAgIH0pO1xuICAgIH1cbiAgICBwcm90ZWN0ZWQgZmlsdGVyTWVudUl0ZW1zKGl0ZW1zLCBzZWFyY2hQaHJhc2U6IHN0cmluZyk6IE1lbnVJdGVtW10ge1xuICAgICAgICByZXR1cm4gaXRlbXMuZmlsdGVyKGl0ZW0gPT4ge1xuICAgICAgICAgICAgcmV0dXJuICFpdGVtLmlzU2VjdGlvbiAmJiBpdGVtLmxhYmVsLnRvTG93ZXJDYXNlKCkuaW5jbHVkZXMoc2VhcmNoUGhyYXNlLnRvTG93ZXJDYXNlKCkpO1xuICAgICAgICB9KTtcbiAgICB9XG59XG5cbmludGVyZmFjZSBNZW51SXRlbSB7XG4gICAgaWNvbj86IHN0cmluZztcbiAgICBpY29uQ29sb3I/OiBJY29uQ29sb3I7XG4gICAgbGFiZWw6IHN0cmluZztcbiAgICB1cmw/OiBzdHJpbmc7XG4gICAgaXNTZWN0aW9uPzogYm9vbGVhbjtcbiAgICBzZWN0aW9uPzogc3RyaW5nO1xuICAgIGdyb3VwPzogbnVtYmVyO1xuICAgIGdyb3VwSGVhZGVyPzogc3RyaW5nO1xufVxuXG4iLCI8aW9uLWxpc3QgY2xhc3M9XCJldWltLXNpZGViYXItY29udGVudF9fbGlzdFwiPlxuICAgIEBpZiAoaGFzU2VhcmNoYmFyKSB7XG4gICAgPGlvbi1zZWFyY2hiYXIgKGlvbklucHV0KT1cImhhbmRsZUlucHV0KCRldmVudClcIj48L2lvbi1zZWFyY2hiYXI+XG4gICAgfVxuICAgIDxpb24tbWVudS10b2dnbGUgYXV0by1oaWRlPVwidHJ1ZVwiIChjbGljayk9XCJjbG9zZU1lbnUoKVwiPlxuICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC9pb24tbWVudS10b2dnbGU+XG48L2lvbi1saXN0PlxuXG4iXX0=

package/fesm2022/eui-mobile-core.mjs

@@ -1,12 +1,12 @@
 import { getI18nServiceConfig } from '@eui/base';
 export * from '@eui/base';
 import * as i0 from '@angular/core';
-import { Injectable, booleanAttribute, Directive, Input, numberAttribute, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, NgModule, Inject, EventEmitter, Output, ContentChildren, ContentChild, ViewChild, HostListener } from '@angular/core';
+import { Injectable, booleanAttribute, Directive, Input, numberAttribute, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, NgModule, Inject, EventEmitter, Output, ViewChild, ContentChildren, ContentChild, HostListener } from '@angular/core';
 import { BehaviorSubject, Subject, throwError } from 'rxjs';
 import * as i2$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@ionic/angular';
-import { IonicModule } from '@ionic/angular';
+import { IonicModule, IonSearchbar } from '@ionic/angular';
 import * as i1 from '@eui/core';
 import { EuiEuLanguages, GLOBAL_CONFIG_TOKEN } from '@eui/core';
 import { takeUntil, startWith, switchMap, map, catchError } from 'rxjs/operators';
@@ -1128,16 +1128,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
             }] } });
 
 class EuimSidebarContentComponent {
-    constructor(i18nService, asService, navCtrl) {
+    constructor(i18nService, asService, menuCtrl, navCtrl) {
         this.i18nService = i18nService;
         this.asService = asService;
+        this.menuCtrl = menuCtrl;
         this.navCtrl = navCtrl;
         this.className = 'euim-sidebar-content';
         this.sidebarItems = [];
+        this.hasSearchbar = false;
+        this.sidebarItemsFilter = new EventEmitter();
+        this.filteredItems = [];
+        this.query = '';
         i18nService.init().subscribe();
     }
     ngOnInit() {
         this.sortSidebarItems();
+        if (this.hasSearchbar) {
+            this.filteredItems = [...this.sidebarItems];
+            this.sidebarItemsFilter.emit(this.filteredItems);
+        }
+    }
+    handleInput(event) {
+        this.query = event.detail.value.toLowerCase();
+        this.filteredItems = this.filterMenuItems(this.sidebarItems, this.query);
+        this.sidebarItemsFilter.emit(this.filteredItems);
+        if (this.query === '') {
+            this.sidebarItemsFilter.emit(this.sidebarItems);
+        }
+    }
+    closeMenu() {
+        if (!this.hasSearchbar)
+            return;
+        this.menuCtrl.close().then(() => {
+            this.sidebarItemsFilter.emit(this.sidebarItems);
+            this.query = '';
+            this.searchbar.value = '';
+        });
     }
     sortSidebarItems() {
         this.sidebarItems.sort((a, b) => {
@@ -1147,16 +1173,29 @@ class EuimSidebarContentComponent {
             return a.group - b.group;
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EuimSidebarContentComponent, deps: [{ token: i1.I18nService }, { token: i1.EuiAppShellService }, { token: i3.NavController }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: EuimSidebarContentComponent, selector: "euim-sidebar-content", inputs: { sidebarItems: "sidebarItems" }, host: { properties: { "className": "this.className" } }, ngImport: i0, template: "<ion-list class=\"euim-sidebar-content__list\">\n    <ion-menu-toggle auto-hide=\"true\">\n        <ng-content></ng-content>\n    </ion-menu-toggle>\n</ion-list>\n", dependencies: [{ kind: "component", type: i3.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i3.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    filterMenuItems(items, searchPhrase) {
+        return items.filter(item => {
+            return !item.isSection && item.label.toLowerCase().includes(searchPhrase.toLowerCase());
+        });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EuimSidebarContentComponent, deps: [{ token: i1.I18nService }, { token: i1.EuiAppShellService }, { token: i3.MenuController }, { token: i3.NavController }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: EuimSidebarContentComponent, selector: "euim-sidebar-content", inputs: { sidebarItems: "sidebarItems", hasSearchbar: ["hasSearchbar", "hasSearchbar", booleanAttribute] }, outputs: { sidebarItemsFilter: "sidebarItemsFilter" }, host: { properties: { "className": "this.className" } }, viewQueries: [{ propertyName: "searchbar", first: true, predicate: IonSearchbar, descendants: true }], ngImport: i0, template: "<ion-list class=\"euim-sidebar-content__list\">\n    @if (hasSearchbar) {\n    <ion-searchbar (ionInput)=\"handleInput($event)\"></ion-searchbar>\n    }\n    <ion-menu-toggle auto-hide=\"true\" (click)=\"closeMenu()\">\n        <ng-content></ng-content>\n    </ion-menu-toggle>\n</ion-list>\n\n", dependencies: [{ kind: "component", type: i3.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i3.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i3.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "directive", type: i3.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EuimSidebarContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-sidebar-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-list class=\"euim-sidebar-content__list\">\n    <ion-menu-toggle auto-hide=\"true\">\n        <ng-content></ng-content>\n    </ion-menu-toggle>\n</ion-list>\n" }]
-        }], ctorParameters: () => [{ type: i1.I18nService }, { type: i1.EuiAppShellService }, { type: i3.NavController }], propDecorators: { className: [{
+            args: [{ selector: 'euim-sidebar-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-list class=\"euim-sidebar-content__list\">\n    @if (hasSearchbar) {\n    <ion-searchbar (ionInput)=\"handleInput($event)\"></ion-searchbar>\n    }\n    <ion-menu-toggle auto-hide=\"true\" (click)=\"closeMenu()\">\n        <ng-content></ng-content>\n    </ion-menu-toggle>\n</ion-list>\n\n" }]
+        }], ctorParameters: () => [{ type: i1.I18nService }, { type: i1.EuiAppShellService }, { type: i3.MenuController }, { type: i3.NavController }], propDecorators: { className: [{
                 type: HostBinding
             }], sidebarItems: [{
                 type: Input
+            }], hasSearchbar: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], sidebarItemsFilter: [{
+                type: Output
+            }], searchbar: [{
+                type: ViewChild,
+                args: [IonSearchbar, { static: false }]
             }] } });
 
 class EuimSidebarModule {