MOBILE-3913 core: Add icon option to combobox

src/core/components/combobox/combobox.scss

@@ -87,6 +87,10 @@ ion-select {
         background: var(--background-focused);
         opacity: var(--background-focused-opacity);
     }
+
+    &[hidden] {
+        display: none !important;
+    }
 }
 
 ion-button {

src/core/components/combobox/combobox.ts

@@ -12,10 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
 import { Translate } from '@singletons';
 import { ModalOptions } from '@ionic/core';
 import { CoreDomUtils } from '@services/utils/dom';
+import { IonSelect } from '@ionic/angular';
 
 /**
  * Component that show a combo select button (combobox).
@@ -43,6 +44,8 @@ import { CoreDomUtils } from '@services/utils/dom';
 })
 export class CoreComboboxComponent {
 
+    @ViewChild(IonSelect) select!: IonSelect;
+
     @Input() interface: 'popover' | 'modal' = 'popover';
     @Input() label = Translate.instant('core.show'); // Aria label.
     @Input() disabled = false;
@@ -51,26 +54,37 @@ export class CoreComboboxComponent {
 
     // Additional options when interface modal is selected.
     @Input() icon?: string; // Icon for modal interface.
+    @Input() badge?: number; // Badge number to show near the icon.
     @Input() modalOptions?: ModalOptions; // Will emit an event the value changed.
     @Input() listboxId = '';
 
     expanded = false;
 
-    async showModal(): Promise<void> {
-        if (this.expanded || !this.modalOptions) {
-            return;
-        }
-        this.expanded = true;
+    /**
+     * Shows combobox modal.
+     *
+     * @param event Event.
+     * @return Promise resolved when done.
+     */
+    async openSelect(event?: UIEvent): Promise<void> {
+        if (this.interface == 'modal') {
+            if (this.expanded || !this.modalOptions) {
+                return;
+            }
+            this.expanded = true;
 
-        if (this.listboxId) {
-            this.modalOptions.id = this.listboxId;
-        }
+            if (this.listboxId) {
+                this.modalOptions.id = this.listboxId;
+            }
 
-        const data = await CoreDomUtils.openModal(this.modalOptions);
-        this.expanded = false;
+            const data = await CoreDomUtils.openModal(this.modalOptions);
+            this.expanded = false;
 
-        if (data) {
-            this.onChange.emit(data);
+            if (data) {
+                this.onChange.emit(data);
+            }
+        } else if (this.select) {
+            this.select.open(event);
         }
     }
 

src/core/components/combobox/core-combobox.html

@@ -1,27 +1,20 @@
-<ion-select
-    *ngIf="interface != 'modal'"
-    class="ion-text-start"
-    [(ngModel)]="selection"
-    (ngModelChange)="onChange.emit(selection)"
-    [interface]="interface"
-    [attr.aria-label]="label + ': ' + selection"
-    [disabled]="disabled"
->
+<ion-button (click)="openSelect($event)" color="light" *ngIf="interface != 'modal' && icon" [disabled]="disabled">
+    <ion-icon [name]="icon" [attr.aria-label]="label" slot="start">
+    </ion-icon>
+    <ion-badge *ngIf="badge && badge > 0" slot="start">{{badge}}</ion-badge>
+    <div class="select-icon" role="presentation" aria-hidden="true">
+        <div class="select-icon-inner"></div>
+    </div>
+</ion-button>
+<ion-select *ngIf="interface != 'modal'" class="ion-text-start" [(ngModel)]="selection" (ngModelChange)="onChange.emit(selection)"
+    [interface]="interface" [attr.aria-label]="label + ': ' + selection" [disabled]="disabled" [hidden]="!!icon">
     <ng-content></ng-content>
 </ion-select>
 
-<ion-button
-    *ngIf="interface == 'modal'"
-    aria-haspopup="listbox"
-    aria-controls="addon-mod-forum-sort-order-selector"
-    [attr.aria-owns]="listboxId"
-    [attr.aria-expanded]="expanded"
-    (click)="showModal()"
-    [disabled]="disabled"
-    expand="block"
-    role="combobox"
->
+<ion-button *ngIf="interface == 'modal'" aria-haspopup="listbox" [attr.aria-controls]="listboxId" [attr.aria-owns]="listboxId"
+    [attr.aria-expanded]="expanded" (click)="openSelect()" [disabled]="disabled" expand="block" role="combobox">
     <ion-icon *ngIf="icon" [name]="icon" slot="start" aria-hidden="true"></ion-icon>
+    <ion-badge *ngIf="badge && badge > 0" slot="start">{{badge}}</ion-badge>
     <span class="sr-only" *ngIf="label">{{ label }}:</span>
     <div class="select-text">
         <slot name="text">{{selection}}</slot>