menu.component.html

<div
    class="container p-0"
    [@opacityAnimation]="state"
    >
    <div class="row header">
        <vitamui-common-search-bar
            class="col-5 mr-2"
            name="category-search"
            (searchChanged)="onSearch($event)"
            (clear)="resetSearch()"
            placeholder="{{'MENU.GRAB_APPLICATION' | translate}}"
        ></vitamui-common-search-bar>

        <vitamui-common-item-select
            class="col-3 p-0 ml-5"
            [label]="'SELECT-TENANT.SELECT' | translate"
            [selectedLabel]="'SELECT-TENANT.SELECTED' | translate"
            [items]="tenants"
            [selectedItem]="selectedTenant"
            (itemSelected)="updateApps($event)"
        ></vitamui-common-item-select>

        <div class="apps-container col-3 ml-auto" (click)="onClose()">
            <span class="pr-2">{{'MENU.MY_APPLICATIONS' | translate}}</span>
            <button mat-icon-button class="apps-button">
                <i class="vitamui-icon vitamui-icon-apps-colored"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span></i>
            </button>
        </div>
    </div>

    <div class="pt-4">
        <ng-container *ngIf="filteredApplications; else displayMats">
            <span class="px-3">{{'MENU.RESULT' | translate}}&nbsp;: </span>
            <hr class="mb-0">
            <mat-selection-list id="searchResults"
                class="py-3 overflow"
                (selectionChange)="openApplication($event.option.value)">
                <mat-list-option [value]="app" @slideLeftRight *ngFor="let app of filteredApplications">
                    <vitamui-common-menu-application-tile [application]="app" [hlCriteria]="criteria"></vitamui-common-menu-application-tile>
                </mat-list-option>
            </mat-selection-list>
        </ng-container>
        <ng-template #displayMats>
                <mat-tab-group animationDuration="300ms" mat-align-tabs="start" [selectedIndex]="tabSelectedIndex" (selectedTabChange)="changeTabFocus($event)">
                    <mat-tab *ngFor="let category of appMap | keyvalue" [label]="'MENU.' + category.key.identifier | translate">
                        <mat-selection-list
                            class="py-3"
                            (selectionChange)="openApplication($event.option.value);">
                            <mat-list-option cdkTrapFocus cdkTrapFocusAutoChange [value]="app" *ngFor="let app of category.value">
                                <vitamui-common-menu-application-tile [application]="app"></vitamui-common-menu-application-tile>
                            </mat-list-option>
                        </mat-selection-list>
                    </mat-tab>
                </mat-tab-group>
        </ng-template>
    </div>
</div>