1 import { Component, forwardRef, Input, OnInit } from '@angular/core'
2 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
3 import { SelectOptionsItem } from '../../../../types/select-options-item.model'
5 export type ItemSelectCheckboxValue = { id?: string, group?: string } | string
8 selector: 'my-select-checkbox',
9 styleUrls: [ './select-shared.component.scss', 'select-checkbox.component.scss' ],
10 templateUrl: './select-checkbox.component.html',
13 provide: NG_VALUE_ACCESSOR,
14 useExisting: forwardRef(() => SelectCheckboxComponent),
19 export class SelectCheckboxComponent implements OnInit, ControlValueAccessor {
20 @Input() availableItems: SelectOptionsItem[] = []
21 @Input() selectedItems: ItemSelectCheckboxValue[] = []
22 @Input() selectableGroup: boolean
23 @Input() selectableGroupAsModel: boolean
24 @Input() placeholder: string
29 if (!this.placeholder) this.placeholder = $localize`Add a new option`
32 propagateChange = (_: any) => { /* empty */ }
34 writeValue (items: ItemSelectCheckboxValue[]) {
35 if (Array.isArray(items)) {
36 this.selectedItems = items.map(i => {
37 if (typeof i === 'string' || typeof i === 'number') {
42 return { group: i.group }
45 return { id: i.id + '' }
48 this.selectedItems = items
52 registerOnChange (fn: (_: any) => void) {
53 this.propagateChange = fn
56 registerOnTouched () {
61 this.propagateChange(this.selectedItems)
64 setDisabledState (isDisabled: boolean) {
65 this.disabled = isDisabled
68 compareFn (item: SelectOptionsItem, selected: ItemSelectCheckboxValue) {
69 if (typeof selected === 'string' || typeof selected === 'number') {
70 return item.id === selected
73 if (this.selectableGroup && item.group && selected.group) {
74 return item.group === selected.group
77 if (selected.id && item.id) {
78 return item.id === selected.id