tabby/terminus-settings/src/components/multiHotkeyInput.ts

import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { HotkeyInputModalComponent } from './hotkeyInputModal'


@Component({
  selector: 'multi-hotkey-input',
  template: require('./multiHotkeyInput.pug'),
  styles: [require('./multiHotkeyInput.scss')],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MultiHotkeyInputComponent {
    constructor (
        private ngbModal: NgbModal,
    ) { }

    ngOnInit () {
        if (!this.model) {
            this.model = []
        }
        if (typeof this.model == 'string') {
            this.model = [this.model]
        }
        this.model = this.model.map(item => (typeof item == 'string') ? [item] : item)
    }

    editItem (item) {
        this.ngbModal.open(HotkeyInputModalComponent).result.then((value: string[]) => {
            this.model[this.model.findIndex(x => x === item)] = value
            this.model = this.model.slice()
            this.modelChange.emit(this.model)
        })
    }

    addItem () {
        this.ngbModal.open(HotkeyInputModalComponent).result.then((value: string[]) => {
            this.model = this.model.concat([value])
            this.modelChange.emit(this.model)
        })
    }

    removeItem (item) {
        this.model = this.model.filter(x => x !== item)
        this.modelChange.emit(this.model)
    }

    @Input() model: string[][]
    @Output() modelChange = new EventEmitter()
}