155 lines
4.2 KiB
TypeScript
155 lines
4.2 KiB
TypeScript
// (C) Copyright 2015 Moodle Pty Ltd.
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
|
|
import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
|
|
import { Translate } from '@singletons';
|
|
import { ModalOptions } from '@ionic/core';
|
|
import { CoreDomUtils } from '@services/utils/dom';
|
|
import { IonSelect } from '@ionic/angular';
|
|
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
|
|
/**
|
|
* Component that show a combo select button (combobox).
|
|
*
|
|
* @description
|
|
*
|
|
* Example using modal:
|
|
*
|
|
* <core-combobox interface="modal" (onChange)="selectedChanged($event)" [modalOptions]="modalOptions"
|
|
* icon="fas-folder" [label]="'core.course.section' | translate">
|
|
* <span slot="text">selection</span>
|
|
* </core-combobox>
|
|
*
|
|
* Example using popover:
|
|
*
|
|
* <core-combobox [label]="'core.show' | translate" [selection]="selectedFilter" (onChange)="selectedChanged()">
|
|
* <ion-select-option value="1">1</ion-select-option>
|
|
* </core-combobox>
|
|
*/
|
|
@Component({
|
|
selector: 'core-combobox',
|
|
templateUrl: 'core-combobox.html',
|
|
styleUrls: ['combobox.scss'],
|
|
providers: [
|
|
{
|
|
provide: NG_VALUE_ACCESSOR,
|
|
multi:true,
|
|
useExisting: CoreComboboxComponent,
|
|
},
|
|
],
|
|
})
|
|
export class CoreComboboxComponent implements ControlValueAccessor {
|
|
|
|
@ViewChild(IonSelect) select!: IonSelect;
|
|
|
|
@Input() interface: 'popover' | 'modal' = 'popover';
|
|
@Input() label = Translate.instant('core.show'); // Aria label.
|
|
@Input() disabled = false;
|
|
@Input() selection = '';
|
|
@Output() onChange = new EventEmitter<unknown>(); // Will emit an event the value changed.
|
|
|
|
// Additional options when interface modal is selected.
|
|
@Input() icon?: string; // Icon for modal interface.
|
|
@Input() modalOptions?: ModalOptions; // Will emit an event the value changed.
|
|
@Input() listboxId = '';
|
|
|
|
expanded = false;
|
|
|
|
protected touched = false;
|
|
protected formOnChange?: (value: unknown) => void;
|
|
protected formOnTouched?: () => void;
|
|
|
|
/**
|
|
* @inheritdoc
|
|
*/
|
|
writeValue(selection: string): void {
|
|
this.selection = selection;
|
|
}
|
|
|
|
/**
|
|
* @inheritdoc
|
|
*/
|
|
registerOnChange(onChange: (value: unknown) => void): void {
|
|
this.formOnChange = onChange;
|
|
}
|
|
|
|
/**
|
|
* @inheritdoc
|
|
*/
|
|
registerOnTouched(onTouched: () => void): void {
|
|
this.formOnTouched = onTouched;
|
|
}
|
|
|
|
/**
|
|
* @inheritdoc
|
|
*/
|
|
setDisabledState(disabled: boolean): void {
|
|
this.disabled = disabled;
|
|
}
|
|
|
|
/**
|
|
* Callback when the selected value changes.
|
|
*
|
|
* @param selection Selected value.
|
|
*/
|
|
onValueChanged(selection: unknown): void {
|
|
this.touch();
|
|
this.onChange.emit(selection);
|
|
this.formOnChange?.(selection);
|
|
}
|
|
|
|
/**
|
|
* Shows combobox modal.
|
|
*
|
|
* @param event Event.
|
|
* @returns Promise resolved when done.
|
|
*/
|
|
async openSelect(event?: UIEvent): Promise<void> {
|
|
this.touch();
|
|
|
|
if (this.interface == 'modal') {
|
|
if (this.expanded || !this.modalOptions) {
|
|
return;
|
|
}
|
|
this.expanded = true;
|
|
|
|
if (this.listboxId) {
|
|
this.modalOptions.id = this.listboxId;
|
|
}
|
|
|
|
const data = await CoreDomUtils.openModal(this.modalOptions);
|
|
this.expanded = false;
|
|
|
|
if (data) {
|
|
this.onValueChanged(data);
|
|
}
|
|
} else if (this.select) {
|
|
this.select.open(event);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Mark as touched.
|
|
*/
|
|
protected touch(): void {
|
|
if (this.touched) {
|
|
return;
|
|
}
|
|
|
|
this.touched = true;
|
|
this.formOnTouched?.();
|
|
}
|
|
|
|
}
|