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
27 if (!this.placeholder) this.placeholder = $localize`Add a new option`
30 propagateChange = (_: any) => { /* empty */ }
32 writeValue (items: ItemSelectCheckboxValue[]) {
33 if (Array.isArray(items)) {
34 this.selectedItems = items.map(i => {
35 if (typeof i === 'string' || typeof i === 'number') {
40 return { group: i.group }
43 return { id: i.id + '' }
46 this.selectedItems = items
50 registerOnChange (fn: (_: any) => void) {
51 this.propagateChange = fn
54 registerOnTouched () {
59 this.propagateChange(this.selectedItems)
62 compareFn (item: SelectOptionsItem, selected: ItemSelectCheckboxValue) {
63 if (typeof selected === 'string' || typeof selected === 'number') {
64 return item.id === selected
67 if (this.selectableGroup && item.group && selected.group) {
68 return item.group === selected.group
71 if (selected.id && item.id) {
72 return item.id === selected.id