# Import Module
import { ContactsPanelModule } from '@mello-labs/contacts-panel';

# Add to imports
@NgModule({
  imports: [ CommonModule, ContactsPanelModule ],
})

# Add Selector in HTML
<lib-contacts-panel [contacts]="contacts"
                    [options]="contactOptions">
</lib-contacts-panel>

# Import typings
import { Contacts } from '@mello-labs/contacts-panel';

# Set options
public contactOptions: Contacts.Options = {
    showCount: true,
    showCopyToClipboard: true,
    defaultOpen: 'first',
    emailFormatter: (contact: Contacts.Contact) => {
      return contact.email + `?subject=${contact.name}&[email protected]&[email protected],[email protected]&body=Hello World`;
    },
};

# Example of how to supply outside scope to the email formatter. 
# In this case adds loan number to subject which does not exist in the contact model
public updateEmail(loanNumber: string) {
    // Create new instance of contactOptions with email formatter updated to include outside scope
    this.contactOptions = {
      ...this.contactOptions,
      emailFormatter: (contact: Contacts.Contact) => {
        return contact.email + `?subject=${loanNumber}&[email protected]&[email protected],[email protected]&body=Hello World`;
      },
    }
}

# Supply contacts. Example model below:
public contacts: Contacts.Group[] = [
    {
      label: 'Title Contacts',
      isOpen: true,
      contacts: [
        {
          name: 'John User',
          email: '[email protected]',
          title: 'Lead Awesomeizer',
          phone: [
            {
              label: 'Direct',
              number: '123 456 7890',
            },
            {
              label: 'Office',
              number: '123 456 7890',
            },
            {
              label: 'Cell',
              number: '123 456 7890',
            },
          ],
        },
        {
          name: 'Jane User',
          email: '[email protected]',
          title: 'Lead Awesomeizer',
          phone: [
            {
              label: 'Direct',
              number: '123 456 7890',
            },
          ],
        },
        {
          name: 'Joe User',
          email: '[email protected]',
          title: 'Lead Awesomeizer',
          phone: [
            {
              label: 'Direct',
              number: '123 456 7890',
            },
          ],
        },
      ],
    },
    {
      label: 'Borrower Contacts',
      isOpen: true,
      contacts: [
        {
          name: 'James User',
          email: '[email protected]',
          title: 'Lead Awesomeizer',
          phone: [
            {
              label: 'Direct',
              number: '123 456 7890',
            },
          ],
        },
        {
          name: 'Johnson User',
          email: '[email protected]',
          title: 'Lead Awesomeizer',
          phone: [
            {
              label: 'Direct',
              number: '123 456 7890',
            },
          ],
        },
      ],
    },
];