How to use the @dojo/framework/widget-core/mixins/Themed.ThemedMixin function in @dojo/framework

import * as css from '../styles/workerForm.m.css';

export interface WorkerFormData {
	firstName: string;
	lastName: string;
	email: string;
}

export interface WorkerFormProperties {
	formData: WorkerFormData;
	onFormInput: (data: Partial) => void;
	onFormSave: () => void;
}

@theme(css)
export default class WorkerForm extends ThemedMixin(WidgetBase) {

	private _onSubmit(event: Event) {
		event.preventDefault();
		this.properties.onFormSave();
	}

	protected onFirstNameInput(firstName: string) {
		this.properties.onFormInput({ firstName });
	}

	protected onLastNameInput(lastName: string) {
		this.properties.onFormInput({ lastName });
	}

	protected onEmailInput(email: string) {
		this.properties.onFormInput({ email });

export interface WorkerFormErrors {
	firstName?: boolean;
	lastName?: boolean;
	email?: boolean;
}

export interface WorkerFormProperties {
	formData: WorkerFormData;
	formErrors: WorkerFormErrors;
	onFormInput: (data: Partial) => void;
	onFormValidate: (data: Partial) => void;
	onFormSave: () => void;
}

@theme(css)
export default class WorkerForm extends ThemedMixin(WidgetBase) {

	private _onSubmit(event: Event) {
		event.preventDefault();
		this.properties.onFormSave();
	}

	protected onFirstNameInput(firstName: string) {
		this.properties.onFormInput({ firstName });
	}

	protected onLastNameInput(lastName: string) {
		this.properties.onFormInput({ lastName });
	}

	protected onEmailInput(email: string) {
		this.properties.onFormInput({ email });

import { Link } from '@dojo/framework/routing/Link';
import { Outlet } from '@dojo/framework/routing/Outlet';
import { MatchDetails } from '@dojo/framework/routing/interfaces';

import { WorkerFormData } from './WorkerForm';
import { WorkerProperties } from './Worker';
import Banner from './Banner';
import WorkerForm from './../widgets/WorkerForm';
import WorkerContainer from './../widgets/WorkerContainer';

import workerData from './../support/workerData';

import * as css from './../styles/app.m.css';

@theme(css)
export default class App extends ThemedMixin(WidgetBase) {
	private _newWorker: Partial = {};

	private _workerData: WorkerProperties[] = workerData;

	private _addWorker = () => {
		this._workerData = this._workerData.concat(this._newWorker);
		this._newWorker = {};
		this.invalidate();
	}

	private _onFormInput = (data: Partial) => {
		this._newWorker = {
			...this._newWorker,
			...data
		};
		this.invalidate();

for (let col = 1; col <= row - 1; col++) {
            const prevRow = data[row - 1];
            data[row][col] = prevRow[col] + prevRow[col - 1];
            data[row].push(1);
        }
    }
    return data;
}

@customElement({
    tag: 'pascal-triangle',
    attributes: [],
    properties: [],
    events: []
})
export default class PascalTriangle extends ThemedMixin(WidgetBase) {
    length = _length;
    list: any = generateData(this.length);

    protected render() {
        return v('div', [
            v('div', [
                v(
                    'button',
                    {
                        'data-value': '10',
                        onclick: this.handleLoad
                    },
                    ['Load 10']
                ),
                v(
                    'button',

export interface TodoItemProperties {
    text?: string;
    checked?: boolean;
    index?: number;
    onChecked: (data: any) => void;
    onRemoved: (data: any) => void;
}

@theme(css)
@customElement({
    tag: 'todo-item',
    events: ['onChecked', 'onRemoved'],
    attributes: ['text', 'checked', 'index'],
    properties: []
})
export default class TodoItem extends ThemedMixin(WidgetBase)<
    TodoItemProperties
> {
    protected render() {
        const { text, checked, onRemoved, onChecked } = this.properties;

        return [
            v(
                'li',
                {
                    classes: [
                        this.theme(css.item),
                        checked ? this.theme(css.completed) : ''
                    ]
                },
                [
                    v('input', {

import { WidgetBase } from '@dojo/framework/widget-core/WidgetBase';
import { v } from '@dojo/framework/widget-core/d';
import { theme, ThemedMixin } from '@dojo/framework/widget-core/mixins/Themed';
import * as css from '../styles/banner.m.css';

@theme(css)
export default class Banner extends ThemedMixin(WidgetBase) {
	protected render() {
		return v('h1', {
			title: 'I am a title!',
			classes: this.theme(css.root)
		}, [ 'Biz-E-Bodies' ]);
	}
}

import { WidgetBase } from '@dojo/framework/widget-core/WidgetBase';
import customElement from '@dojo/framework/widget-core/decorators/customElement';
import { v } from '@dojo/framework/widget-core/d';
import { ThemedMixin } from '@dojo/framework/widget-core/mixins/Themed';

@customElement({
    tag: 'triangle-item',
    events: [],
    attributes: ['text'],
    properties: []
})
export default class TriangleItem extends ThemedMixin(WidgetBase) {
    protected render() {
        const { text } = this.properties;
        return v('span', {}, [text]);
    }
}

import { WidgetBase } from '@dojo/framework/widget-core/WidgetBase';
import { w, v } from '@dojo/framework/widget-core/d';
import Worker, { WorkerProperties } from './Worker';
import { theme, ThemedMixin } from '@dojo/framework/widget-core/mixins/Themed';
import * as css from '../styles/workerContainer.m.css';

export interface WorkerContainerProperties {
	workerData?: WorkerProperties[];
}

@theme(css)
export default class WorkerContainer extends ThemedMixin(WidgetBase) {

	protected render() {
		const {
			workerData = []
		} = this.properties;

		const workers = workerData.map((worker, i) => w('worker', {
			key: `worker-${i}`,
			...worker
		}));

		return v('div', {
			classes: this.theme(css.container)
		}, workers);
	}
}

for (let col = 1; col <= row - 1; col++) {
            const prevRow = data[row - 1];
            data[row][col] = prevRow[col] + prevRow[col - 1];
            data[row].push(1);
        }
    }
    return data;
}

@customElement({
    tag: 'pascal-triangle',
    attributes: [],
    properties: [],
    events: []
})
export default class PascalTriangle extends ThemedMixin(WidgetBase) {
    length = _length;
    list: any = generateData(this.length);

    protected render() {
        return v('div', [
            v('div', [
                v(
                    'button',
                    {
                        'data-value': '10',
                        onclick: this.handleLoad
                    },
                    ['Load 10']
                ),
                v(
                    'button',

import { WidgetBase } from '@dojo/framework/widget-core/WidgetBase';
import { v } from '@dojo/framework/widget-core/d';
import { theme, ThemedMixin } from '@dojo/framework/widget-core/mixins/Themed';

import * as css from '../styles/workerBack.m.css';

export interface WorkerBackProperties {
	firstName?: string;
	lastName?: string;
	email?: string;
	timePerTask?: number;
	tasks?: string[];
}

@theme(css)
export default class WorkerBack extends ThemedMixin(WidgetBase) {

	protected render() {
		const {
			firstName = 'firstName',
			lastName = 'lastName',
			email = 'unavailable',
			timePerTask = 0,
			tasks = []
		} = this.properties;

		return [
			v('img', {
				classes: this.theme(css.imageSmall),
				src: 'https://dojo.io/tutorials/resources/worker.svg'
			}),
			v('div', {