client/src/app/shared/shared-forms/select/select-checkbox.component.ts
import { CommonModule } from '@angular/common'
import { booleanAttribute, Component, EventEmitter, forwardRef, Input, numberAttribute, Output } from '@angular/core'
import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'
import { MultiSelectModule } from 'primeng/multiselect'
import { SelectOptionsItem } from '../../../../types/select-options-item.model'
@Component({
selector: 'my-select-checkbox',
templateUrl: './select-checkbox.component.html',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SelectCheckboxComponent),
multi: true
}
],
standalone: true,
imports: [ MultiSelectModule, FormsModule, CommonModule ]
})
export class SelectCheckboxComponent implements ControlValueAccessor {
@Input({ required: true }) inputId: string
@Input() availableItems: SelectOptionsItem[] = []
@Input() selectedItems: string[] = []
@Input() selectableGroup: boolean
@Input() selectableGroupAsModel: boolean
@Input() placeholder: string
@Input() selectionLimit: number
@Input() selectedItemsLabel: string
@Input({ transform: booleanAttribute }) virtualScroll = false
@Input({ transform: numberAttribute }) virtualScrollItemSize = 33
@Input({ transform: booleanAttribute }) showClear: boolean
@Output() panelHide = new EventEmitter()
disabled = false
propagateChange = (_: any) => { /* empty */ }
writeValue (items: string[]) {
this.selectedItems = items
}
registerOnChange (fn: (_: any) => void) {
this.propagateChange = fn
}
registerOnTouched () {
// Unused
}
onModelChange () {
this.propagateChange(this.selectedItems)
}
setDisabledState (isDisabled: boolean) {
this.disabled = isDisabled
}
}