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

/** Size of the slider increment */
	step?: number;
	/** If the value provided by the slider are valid */
	valid?: boolean;
	/** The current value */
	value?: number;
	/** Orients the slider vertically, false by default. */
	vertical?: boolean;
	/** Length of the vertical slider (only used if vertical is true) */
	verticalHeight?: string;
	/** The id used for the form input element */
	widgetId?: string;
}

@theme(css)
export class Slider extends ThemedMixin(FocusMixin(WidgetBase)) {
	// id used to associate input with output
	private _widgetId = uuid();

	private _onInput(event: Event) {
		event.stopPropagation();
		const value = (event.target as HTMLInputElement).value;

		this.properties.onValue && this.properties.onValue(parseFloat(value));
	}

	protected getRootClasses(): (string | null)[] {
		const { disabled, valid, readOnly, vertical = false } = this.properties;
		const focus = this.meta(Focus).get('root');

		return [
			css.root,

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

import * as fixedCss from './styles/paginated-footer.m.css';
import * as css from '../theme/grid-paginated-footer.m.css';

export interface PaginatedFooterProperties {
	total?: number;
	page: number;
	pageSize: number;
	onPageChange: (page: number) => void;
}

@theme(css)
export default class PaginatedFooter extends ThemedMixin(WidgetBase) {
	private _renderPageControl(page: number) {
		const { onPageChange, page: currentPage } = this.properties;
		const active = page === currentPage;

		return v(
			'button',
			{
				key: active ? 'current' : `${page}`,
				disabled: active,
				onclick: () => {
					onPageChange(page);
				},
				'aria-current': active ? 'page' : undefined,
				'aria-label': active ? `Current Page, Page ${page}` : `Goto Page ${page}`,
				classes: [this.theme(css.pageNumber), active && this.theme(css.active)]
			},

import * as css from '../theme/icon.m.css';
import * as baseCss from '../common/styles/base.m.css';

export type IconType = keyof typeof css;

export interface IconProperties extends ThemedProperties {
	/** An optional, visually hidden label for the icon */
	altText?: string;
	/** Custom aria attributes */
	aria?: { [key: string]: string | null };
	/** Icon type, e.g. downIcon, searchIcon, etc. */
	type: IconType;
}

@theme(css)
export class Icon extends ThemedMixin(WidgetBase) {
	protected renderAltText(altText: string): DNode {
		return v('span', { classes: [baseCss.visuallyHidden] }, [altText]);
	}

	render(): DNode {
		const {
			aria = {
				hidden: 'true'
			},
			type,
			altText
		} = this.properties;

		return v('span', { classes: this.theme(css.root) }, [
			v('i', {
				...formatAriaProperties(aria),

/** Handles when a month should change (month is zero-based) */
	onRequestMonthChange?(month: number): void;
	/** Handles when a year should change */
	onRequestYearChange?(year: number): void;
	/** Formats the displayed current month and year */
	renderMonthLabel?(month: number, year: number): string;
	/** Currently displayed year */
	year: number;
	/** Number of years to display in a single page of the year popup */
	yearRange?: number;
}

const BASE_YEAR = 2000;

@theme(css)
export class DatePicker extends ThemedMixin(WidgetBase) {
	private _idBase = uuid();
	private _monthPopupOpen = false;
	private _yearPopupOpen = false;
	private _yearPage = 0;

	private _closeMonthPopup(event?: MouseEvent) {
		if (event) {
			event.stopPropagation();
		}
		const { onPopupChange } = this.properties;
		this._monthPopupOpen = false;
		this.meta(Focus).set('month-button');
		this.invalidate();
		onPopupChange && onPopupChange(this._getPopupState());
	}

/** If the label should be invisible (it will remain accessible to screen readers) */
	hidden?: boolean;
	/** If the label is read only */
	readOnly?: boolean;
	/** If the label is required */
	required?: boolean;
	/** If the label should use the secondary styling */
	secondary?: boolean;
	/** If the label is valid */
	valid?: boolean;
	/** ID of the underlying label element */
	widgetId?: string;
}

@theme(css)
export class Label extends ThemedMixin(WidgetBase) {
	protected getRootClasses(): (string | null)[] {
		const { disabled, focused, valid, readOnly, required, secondary } = this.properties;
		return [
			css.root,
			disabled ? css.disabled : null,
			focused ? css.focused : null,
			valid === true ? css.valid : null,
			valid === false ? css.invalid : null,
			readOnly ? css.readonly : null,
			required ? css.required : null,
			secondary ? css.secondary : null
		];
	}

	render(): DNode {
		const { aria = {}, forId, hidden, widgetId } = this.properties;

{ short: 'novShort', long: 'november' },
	{ short: 'decShort', long: 'december' }
];

const DEFAULT_WEEKDAYS: ShortLong[] = [
	{ short: 'sunShort', long: 'sunday' },
	{ short: 'monShort', long: 'monday' },
	{ short: 'tueShort', long: 'tuesday' },
	{ short: 'wedShort', long: 'wednesday' },
	{ short: 'thuShort', long: 'thursday' },
	{ short: 'friShort', long: 'friday' },
	{ short: 'satShort', long: 'saturday' }
];

@theme(css)
export class Calendar extends I18nMixin(ThemedMixin(WidgetBase)) {
	private _callDateFocus = false;
	private _defaultDate = new Date();
	private _focusedDay = 1;
	private _monthLabelId = uuid();
	private _popupOpen = false;

	private _getMonthLength(month: number, year: number) {
		const lastDate = new Date(year, month + 1, 0);
		return lastDate.getDate();
	}

	private _getMonths(commonMessages: typeof commonBundle.messages) {
		return DEFAULT_MONTHS.map((month) => ({
			short: commonMessages[month.short],
			long: commonMessages[month.long]
		}));