import { Component } from '@angular/core';
import { MbscCardOptions, MbscListviewOptions } from '@mobiscroll/angular';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    settings: MbscCardOptions = {
        lang: ' '
        theme: 'ios',
        themeVariant: 'light'
    };

    checklistSettings: MbscListviewOptions = {
        lang: ' '
        theme: 'ios',
        themeVariant: 'light',
        stages: {
            left: [{
                key: 'stage1',
                icon: 'plus',
                color: '#31c6e7',
                text: 'Add',
                action: (event, inst) => {
                    this.todos.splice(event.index + 1, 0, {
                        todo: 'New Todo',
                        checked: false
                    });
                }
            }],
            right: [{
                key: 'stage2',
                color: '#009688',
                text: 'Remove',
                icon: 'remove',
                action: (event, inst) => {
                    this.todos.splice(event.index, 1);
                    return false;
                }
            }]
        }
    };

    todos = [{
        todo: 'Do the laundry',
        checked: false
    }, {
        todo: 'Check out new Mobiscroll features',
        checked: false
    }, {
        todo: 'Don\'t forget mom\'s birthday!',
        checked: true
    }, {
        todo: 'Update my app with the latest Mobiscroll',
        checked: false
    }, {
        todo: 'Buy new shoes',
        checked: false
    }, {
        todo: 'Need ketchup for pizza',
        checked: true
    }];

    actions = [{
        title: 'Edit profile',
        icon: 'line-user',
        children: [{
            title: 'Change password',
            icon: 'line-key'
        }, {
            title: 'Change personal information',
            icon: 'line-user'
        }]
    }, {
        title: 'Settings',
        icon: 'line-settings',
        children: [{
            title: 'Sound settings',
            icon: 'line-megaphone'
        }, {
            title: 'Notification settings',
            icon: 'line-params'
        }, {
            title: 'Change theme',
            icon: 'line-t-shirt'
        }]
    }, {
        title: 'Rate',
        icon: 'line-heart',
        children: [{
            title: 'Rate this application',
            icon: 'line-star'
        }]
    }, {
        title: 'Tell a friend',
        icon: 'line-bubble',
        children: [{
            title: 'Share it in Email',
            icon: 'line-mail'
        }, {
            title: 'Share it on Social Media',
            icon: 'line-world'
        }]
    }, {
        title: 'Term of service',
        icon: 'line-note',
        children: [{
            title: 'This application content is under WTFPL license.'
        }]
    }, {
        title: 'Contact us',
        icon: 'line-mail',
        children: [{
            title: 'Let us know if we can help',
            icon: 'line-mail'
        }]
    }, {
        title: 'About us',
        icon: 'line-world',
        children: [{
            title: 'We are the Mobiscroll team.'
        }]
    }];
}

.mbsc-lv-cont .cd-todo-item {
    padding: 0;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }