we_bstly-web/src/app/pages/register/username-dialog/username.dialog.ts

import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';



import { uniqueNamesGenerator, Config, adjectives, colors, animals } from 'unique-names-generator';

@Component({
    selector: 'app-username-dialog',
    templateUrl: './username.dialog.html',
    styleUrls: ['./username.dialog.scss']
})
export class UsernameDialog {

    dicts: any[] = [
        {
            name: 'adjectives',
            dict: adjectives,
            selected: true
        }, {
            name: 'colors',
            dict: colors,
            selected: true
        }, {
            name: 'animals',
            dict: animals,
            selected: true
        }

    ];

    username: String;

    constructor(public dialogRef: MatDialogRef<UsernameDialog>) {
    }

    onOkClick(): void {

        let dictsToUse = this.dicts.filter(dict => dict.selected);

        const config: Config = {
            dictionaries: dictsToUse.map(dict => dict.dict),
            separator: "",
            style: "capital",
            length: dictsToUse.length
        };

        this.username = uniqueNamesGenerator(config);
    }

    toggle(dict) {
        dict.selected = !dict.selected;
    }

    drop(event: CdkDragDrop<any[]>) {
        moveItemInArray(this.dicts, event.previousIndex, event.currentIndex);
    }

}