"use strict";

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

Object.defineProperty(exports, "__esModule", { value: true });
var loremIpsum = require("lorem-ipsum");
var React = require("react");
var react_dom_1 = require("react-dom");
var sprintf_js_1 = require("sprintf-js");
var util_toolbox_1 = require("util.toolbox");
var debug = require('debug')('app');
window.$ = window.jQuery = require('jquery');
//
// This is not how the components would typically be included within an
// electron app.  This is kind of a "hack" to allow the demo app and the
// library code to coexist.  Typically they would be imported using
// CommonJS import.
//

var _require = require('../dist/bundle'),
    Accordion = _require.Accordion,
    AccordionItem = _require.AccordionItem,
    Badge = _require.Badge,
    Button = _require.Button,
    ButtonBar = _require.ButtonBar,
    ButtonCircle = _require.ButtonCircle,
    ButtonDialog = _require.ButtonDialog,
    ButtonText = _require.ButtonText,
    ButtonToggle = _require.ButtonToggle,
    Container = _require.Container,
    DialogBox = _require.DialogBox,
    DialogBoxType = _require.DialogBoxType,
    Direction = _require.Direction,
    DynamicList = _require.DynamicList,
    Editor = _require.Editor,
    Icon = _require.Icon,
    Justify = _require.Justify,
    Label = _require.Label,
    List = _require.List,
    ListDivider = _require.ListDivider,
    ListHeader = _require.ListHeader,
    ListItem = _require.ListItem,
    Location = _require.Location,
    Pager = _require.Pager,
    Select = _require.Select,
    Sizing = _require.Sizing,
    SortOrder = _require.SortOrder,
    Switch = _require.Switch,
    SwitchType = _require.SwitchType,
    Tab = _require.Tab,
    TabContainer = _require.TabContainer,
    TagList = _require.TagList,
    TextField = _require.TextField,
    Title = _require.Title,
    TitleLayout = _require.TitleLayout,
    Toast = _require.Toast,
    ToastLevel = _require.ToastLevel,
    ToastType = _require.ToastType,
    Tooltip = _require.Tooltip,
    Triangle = _require.Triangle,
    Validator = _require.Validator;
// Build global testing data for List Item controls


var maxItems = 5;
var listItems = [];
var uuids = [];
for (var i = 0; i < maxItems; i++) {
	listItems.push("Accordion List Item " + i);
	uuids.push(util_toolbox_1.getUUID());
}
function createItems() {
	return listItems.map(function (item, idx) {
		return React.createElement(ListItem, { id: uuids[idx], key: uuids[idx], title: item, widget: util_toolbox_1.getUUID(true).substring(0, 5), leftButton: React.createElement(Button, null), rightButton: React.createElement(Button, { iconName: "paper-plane-o" }) });
	});
}
var items = createItems();
var randomText = loremIpsum({ units: 'sentences', count: 2, random: null });
var dynamicItems = {};
for (var _i = 1; _i <= 2000; _i++) {
	dynamicItems["item " + sprintf_js_1.sprintf('%04d', _i)] = "w" + _i;
}
// Build global test data for Select control
var selectOptions = [{ value: 'one', label: 'One' }, { value: 'two', label: 'Two' }, { value: 'three', label: 'Three' }, { value: 'four', label: 'Four' }, { value: 'five', label: 'Five' }];
var sizingOptions = [{ value: Sizing.xxsmall, label: 'xxsmall' }, { value: Sizing.xsmall, label: 'xsmall' }, { value: Sizing.small, label: 'small' }, { value: Sizing.normal, label: 'normal' }, { value: Sizing.large, label: 'large' }, { value: Sizing.xlarge, label: 'xlarge' }, { value: Sizing.xxlarge, label: 'xxlarge' }];

var App = function (_React$Component) {
	_inherits(App, _React$Component);

	function App(props) {
		_classCallCheck(this, App);

		var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this, props));

		_this.buildAccordion = function () {
			return React.createElement(
				Container,
				{ id: "accordionExample" },
				React.createElement(
					Accordion,
					null,
					React.createElement(
						AccordionItem,
						{ rightButton: React.createElement(Button, { iconName: "plus" }), leftButton: React.createElement(Button, { iconName: "bars" }), title: "Accordion #1 (click to expand)" },
						React.createElement(
							List,
							{ alternating: true },
							items
						)
					),
					React.createElement(
						AccordionItem,
						{ title: "Accordion #2" },
						"Accordion Items #2"
					),
					React.createElement(
						AccordionItem,
						{ title: "Accordion #3" },
						"Accordion Items #3"
					),
					React.createElement(
						AccordionItem,
						{ title: "Accordion #4 (disabled)", disabled: true },
						"Accordion Items #4 (disabled)"
					),
					React.createElement(
						AccordionItem,
						{ title: "Accordion #5 (no button)", showButton: false },
						"Accordion Items #5 (no button)"
					)
				)
			);
		};
		_this.buildBadges = function () {
			return React.createElement(
				Container,
				{ id: "badgeExample" },
				React.createElement(
					"div",
					{ id: "simple-buttons" },
					React.createElement(
						"div",
						{ className: "box" },
						React.createElement(
							"p",
							null,
							"top right (suppress)"
						),
						React.createElement(
							Badge,
							{ counter: _this.state.counter1, suppress: true },
							React.createElement(
								"div",
								{ className: "boxButtons" },
								React.createElement(Button, { onClick: function onClick() {
										_this.setState({
											counter1: _this.state.counter1 + 1
										});
									} })
							)
						)
					),
					React.createElement(
						"div",
						{ className: "box" },
						React.createElement(
							"p",
							null,
							"top left",
							React.createElement("br", null),
							"\xA0"
						),
						React.createElement(
							Badge,
							{ counter: _this.state.counter2, location: Location.topLeft, onClick: function onClick(counter) {
									console.log("Badge counter click: " + counter);
								} },
							React.createElement(
								"div",
								{ className: "boxButtons" },
								React.createElement(Button, { onClick: function onClick() {
										_this.setState({
											counter2: _this.state.counter2 + 1
										});
									} })
							)
						)
					),
					React.createElement(
						"div",
						{ className: "box" },
						React.createElement(
							"p",
							null,
							"bottom right"
						),
						React.createElement(
							Badge,
							{ counter: _this.state.counter3, location: Location.bottomRight, style: { color: 'green' } },
							React.createElement(
								"div",
								{ className: "boxButtons" },
								React.createElement(Button, { onClick: function onClick() {
										_this.setState({
											counter3: _this.state.counter3 + 1
										});
									} })
							)
						)
					),
					React.createElement(
						"div",
						{ className: "box" },
						React.createElement(
							"p",
							null,
							"bottom left"
						),
						React.createElement(
							Badge,
							{ counter: _this.state.counter4, location: Location.bottomLeft, style: { color: 'magenta' } },
							React.createElement(
								"div",
								{ className: "boxButtons" },
								React.createElement(Button, { onClick: function onClick() {
										_this.setState({
											counter4: _this.state.counter4 + 1
										});
									} })
							)
						)
					),
					React.createElement(
						"div",
						{ className: "box" },
						React.createElement(
							"p",
							null,
							"bottom (negative)"
						),
						React.createElement(
							Badge,
							{ counter: _this.state.counter5, location: Location.bottom, style: { color: 'blue' } },
							React.createElement(
								"div",
								{ className: "boxButtons" },
								React.createElement(Button, { onClick: function onClick() {
										_this.setState({
											counter5: _this.state.counter5 + 1
										});
									} })
							)
						)
					)
				)
			);
		};
		_this.buildButtons = function () {
			return React.createElement(
				Container,
				null,
				React.createElement(
					"table",
					{ id: "buttonTable" },
					React.createElement(
						"thead",
						null,
						React.createElement(
							"tr",
							null,
							React.createElement("th", null),
							React.createElement(
								"th",
								null,
								"xxsmall"
							),
							React.createElement(
								"th",
								null,
								"xsmall"
							),
							React.createElement(
								"th",
								null,
								"small"
							),
							React.createElement(
								"th",
								null,
								"normal",
								React.createElement("br", null),
								"medium"
							),
							React.createElement(
								"th",
								null,
								"large"
							),
							React.createElement(
								"th",
								null,
								"xlarge"
							),
							React.createElement(
								"th",
								null,
								"xxlarge"
							),
							React.createElement(
								"th",
								null,
								"disabled"
							),
							React.createElement(
								"th",
								null,
								"custom"
							)
						)
					),
					React.createElement(
						"tbody",
						null,
						React.createElement(
							"tr",
							{ className: "tblIcons" },
							React.createElement(
								"th",
								null,
								"Icon"
							),
							React.createElement(
								"td",
								null,
								React.createElement(Icon, { iconName: "handshake-o", sizing: Sizing.xxsmall })
							),
							React.createElement(
								"td",
								null,
								React.createElement(Icon, { iconName: "handshake-o", sizing: Sizing.xsmall })
							),
							React.createElement(
								"td",
								null,
								React.createElement(Icon, { iconName: "handshake-o", sizing: Sizing.small })
							),
							React.createElement(
								"td",
								null,
								React.createElement(Icon, { iconName: "handshake-o", sizing: Sizing.normal })
							),
							React.createElement(
								"td",
								null,
								React.createElement(Icon, { iconName: "handshake-o", sizing: Sizing.large })
							),
							React.createElement(
								"td",
								null,
								React.createElement(Icon, { iconName: "handshake-o", sizing: Sizing.xlarge })
							),
							React.createElement(
								"td",
								null,
								React.createElement(Icon, { iconName: "handshake-o", sizing: Sizing.xxlarge })
							),
							React.createElement(
								"td",
								null,
								React.createElement(Icon, { iconName: "handshake-o", sizing: Sizing.normal, disabled: true })
							),
							React.createElement(
								"td",
								null,
								React.createElement(Icon, { iconName: "handshake-o", sizing: Sizing.normal, style: { color: "red", backgroundColor: "blue" } })
							)
						),
						React.createElement(
							"tr",
							{ className: "tblIcons" },
							React.createElement(
								"th",
								null,
								"Icon Images"
							),
							React.createElement(
								"td",
								null,
								React.createElement(Icon, { imageFile: "./test-icon-image.png", sizing: Sizing.xxsmall })
							),
							React.createElement(
								"td",
								null,
								React.createElement(Icon, { imageFile: "./test-icon-image.png", sizing: Sizing.xsmall })
							),
							React.createElement(
								"td",
								null,
								React.createElement(Icon, { imageFile: "./test-icon-image.png", sizing: Sizing.small })
							),
							React.createElement(
								"td",
								null,
								React.createElement(Icon, { imageFile: "./test-icon-image.png", sizing: Sizing.normal })
							),
							React.createElement(
								"td",
								null,
								React.createElement(Icon, { imageFile: "./test-icon-image.png", sizing: Sizing.large })
							),
							React.createElement(
								"td",
								null,
								React.createElement(Icon, { imageFile: "./test-icon-image.png", sizing: Sizing.xlarge })
							),
							React.createElement(
								"td",
								null,
								React.createElement(Icon, { imageFile: "./test-icon-image.png", sizing: Sizing.xxlarge })
							),
							React.createElement(
								"td",
								null,
								React.createElement(Icon, { imageFile: "./test-icon-image.png", sizing: Sizing.normal, disabled: true })
							),
							React.createElement(
								"td",
								null,
								React.createElement(
									"span",
									{ style: { display: "table", margin: "0 auto" } },
									"N/A"
								)
							)
						),
						React.createElement(
							"tr",
							null,
							React.createElement(
								"th",
								null,
								"Button"
							),
							React.createElement(
								"td",
								null,
								React.createElement(Button, { iconName: "motorcycle", sizing: Sizing.xxsmall })
							),
							React.createElement(
								"td",
								null,
								React.createElement(Button, { iconName: "motorcycle", sizing: Sizing.xsmall })
							),
							React.createElement(
								"td",
								null,
								React.createElement(Button, { iconName: "motorcycle", sizing: Sizing.small })
							),
							React.createElement(
								"td",
								null,
								React.createElement(Button, { iconName: "motorcycle", sizing: Sizing.normal })
							),
							React.createElement(
								"td",
								null,
								React.createElement(Button, { iconName: "motorcycle", sizing: Sizing.large })
							),
							React.createElement(
								"td",
								null,
								React.createElement(Button, { iconName: "motorcycle", sizing: Sizing.xlarge })
							),
							React.createElement(
								"td",
								null,
								React.createElement(Button, { iconName: "motorcycle", sizing: Sizing.xxlarge })
							),
							React.createElement(
								"td",
								null,
								React.createElement(Button, { iconName: "motorcycle", sizing: Sizing.normal, disabled: true })
							),
							React.createElement(
								"td",
								null,
								React.createElement(Button, { iconName: "motorcycle", sizing: Sizing.normal, style: { color: "yellow", backgroundColor: "green" } })
							)
						),
						React.createElement(
							"tr",
							null,
							React.createElement(
								"th",
								null,
								"ButtonCircle"
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonCircle, { iconName: "times", sizing: Sizing.xxsmall })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonCircle, { iconName: "times", sizing: Sizing.xsmall })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonCircle, { iconName: "times", sizing: Sizing.small })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonCircle, { iconName: "times", sizing: Sizing.normal })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonCircle, { iconName: "times", sizing: Sizing.large })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonCircle, { iconName: "times", sizing: Sizing.xlarge })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonCircle, { iconName: "times", sizing: Sizing.xxlarge })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonCircle, { iconName: "times", sizing: Sizing.normal, disabled: true })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonCircle, { iconName: "times", sizing: Sizing.normal, style: { color: "green", backgroundColor: "orange" } })
							)
						),
						React.createElement(
							"tr",
							null,
							React.createElement(
								"th",
								null,
								"ButtonDialog"
							),
							React.createElement(
								"td",
								null,
								React.createElement(
									ButtonDialog,
									{ iconName: "bars", sizing: Sizing.xxsmall },
									"dialog"
								)
							),
							React.createElement(
								"td",
								null,
								React.createElement(
									ButtonDialog,
									{ iconName: "bars", sizing: Sizing.xsmall },
									"dialog"
								)
							),
							React.createElement(
								"td",
								null,
								React.createElement(
									ButtonDialog,
									{ iconName: "bars", sizing: Sizing.small },
									"dialog"
								)
							),
							React.createElement(
								"td",
								null,
								React.createElement(
									ButtonDialog,
									{ iconName: "bars", sizing: Sizing.normal },
									"dialog"
								)
							),
							React.createElement(
								"td",
								null,
								React.createElement(
									ButtonDialog,
									{ iconName: "bars", sizing: Sizing.large },
									"dialog"
								)
							),
							React.createElement(
								"td",
								null,
								React.createElement(
									ButtonDialog,
									{ iconName: "bars", sizing: Sizing.xlarge },
									"dialog"
								)
							),
							React.createElement(
								"td",
								null,
								React.createElement(
									ButtonDialog,
									{ iconName: "bars", sizing: Sizing.xxlarge },
									"dialog"
								)
							),
							React.createElement(
								"td",
								null,
								React.createElement(
									ButtonDialog,
									{ iconName: "bars", sizing: Sizing.normal, disabled: true },
									"dialog"
								)
							),
							React.createElement(
								"td",
								null,
								React.createElement(
									ButtonDialog,
									{ iconName: "bars", sizing: Sizing.normal, style: { color: "white", backgroundColor: "teal" } },
									"dialog"
								)
							)
						),
						React.createElement(
							"tr",
							null,
							React.createElement(
								"th",
								null,
								"ButtonToggle"
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonToggle, { iconNameOn: "star", iconNameOff: "star-o", fgColorOn: "#ffe11a", fgColorOff: "#004358", sizing: Sizing.xxsmall })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonToggle, { iconNameOn: "star", iconNameOff: "star-o", fgColorOn: "#ffe11a", fgColorOff: "#004358", sizing: Sizing.xsmall })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonToggle, { iconNameOn: "star", iconNameOff: "star-o", fgColorOn: "#ffe11a", fgColorOff: "#004358", sizing: Sizing.small })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonToggle, { iconNameOn: "star", iconNameOff: "star-o", fgColorOn: "#ffe11a", fgColorOff: "#004358", sizing: Sizing.normal })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonToggle, { iconNameOn: "star", iconNameOff: "star-o", fgColorOn: "#ffe11a", fgColorOff: "#004358", sizing: Sizing.large })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonToggle, { iconNameOn: "star", iconNameOff: "star-o", fgColorOn: "#ffe11a", fgColorOff: "#004358", sizing: Sizing.xlarge })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonToggle, { iconNameOn: "star", iconNameOff: "star-o", fgColorOn: "#ffe11a", fgColorOff: "#004358", sizing: Sizing.xxlarge })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonToggle, { iconNameOn: "star", iconNameOff: "star-o", fgColorOn: "#ffe11a", fgColorOff: "#004358", sizing: Sizing.normal, disabled: true })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonToggle, { iconNameOn: "star", iconNameOff: "star-o", fgColorOn: "red", fgColorOff: "black", bgColorOn: "black", bgColorOff: "red", sizing: Sizing.normal })
							)
						),
						React.createElement(
							"tr",
							null,
							React.createElement(
								"th",
								null,
								"ButtonText",
								React.createElement("br", null),
								"(Right)"
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", iconName: "paper-plane", sizing: Sizing.xxsmall })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", iconName: "paper-plane", sizing: Sizing.xsmall })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", iconName: "paper-plane", sizing: Sizing.small })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", iconName: "paper-plane", sizing: Sizing.normal })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", iconName: "paper-plane", sizing: Sizing.large })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", iconName: "paper-plane", sizing: Sizing.xlarge })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", iconName: "paper-plane", sizing: Sizing.xxlarge })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", iconName: "paper-plane", sizing: Sizing.normal, disabled: true })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", iconName: "paper-plane", sizing: Sizing.normal, style: { color: "white", backgroundColor: "blue" } })
							)
						),
						React.createElement(
							"tr",
							null,
							React.createElement(
								"th",
								null,
								"ButtonText",
								React.createElement("br", null),
								"(Left)"
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", justify: Justify.left, iconName: "paper-plane", sizing: Sizing.xxsmall })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", justify: Justify.left, iconName: "paper-plane", sizing: Sizing.xsmall })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", justify: Justify.left, iconName: "paper-plane", sizing: Sizing.small })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", justify: Justify.left, iconName: "paper-plane", sizing: Sizing.normal })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", justify: Justify.left, iconName: "paper-plane", sizing: Sizing.large })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", justify: Justify.left, iconName: "paper-plane", sizing: Sizing.xlarge })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", justify: Justify.left, iconName: "paper-plane", sizing: Sizing.xxlarge })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", justify: Justify.left, iconName: "paper-plane", sizing: Sizing.normal, disabled: true })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", justify: Justify.left, iconName: "paper-plane", sizing: Sizing.normal, style: { color: "white", backgroundColor: "red" } })
							)
						),
						React.createElement(
							"tr",
							null,
							React.createElement(
								"th",
								null,
								"ButtonText",
								React.createElement("br", null),
								"(Center)"
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", justify: Justify.center, sizing: Sizing.xxsmall })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", justify: Justify.center, sizing: Sizing.xsmall })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", justify: Justify.center, sizing: Sizing.small })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", justify: Justify.center, sizing: Sizing.normal })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", justify: Justify.center, sizing: Sizing.large })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", justify: Justify.center, sizing: Sizing.xlarge })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", justify: Justify.center, sizing: Sizing.xxlarge })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", justify: Justify.center, sizing: Sizing.normal, disabled: true })
							),
							React.createElement(
								"td",
								null,
								React.createElement(ButtonText, { text: "Text", justify: Justify.center, sizing: Sizing.normal, style: { color: "white", backgroundColor: "red" } })
							)
						)
					)
				)
			);
		};
		_this.buildButtonBar = function () {
			return React.createElement(
				Container,
				{ id: "buttonBarExample" },
				React.createElement(
					"h3",
					null,
					"Left Justify"
				),
				React.createElement(
					ButtonBar,
					{ justify: Justify.left },
					React.createElement(Button, { iconName: "car" }),
					React.createElement(Button, { iconName: "fighter-jet" }),
					React.createElement(Button, { iconName: "space-shuttle" })
				),
				React.createElement("br", null),
				React.createElement(
					"h3",
					null,
					"Center Justify"
				),
				React.createElement(
					ButtonBar,
					{ justify: Justify.center },
					React.createElement(Button, { iconName: "car" }),
					React.createElement(Button, { iconName: "fighter-jet" }),
					React.createElement(Button, { iconName: "space-shuttle" })
				),
				React.createElement("br", null),
				React.createElement(
					"h3",
					null,
					"Right Justify"
				),
				React.createElement(
					ButtonBar,
					{ justify: Justify.right },
					React.createElement(Button, { iconName: "car" }),
					React.createElement(Button, { iconName: "fighter-jet" }),
					React.createElement(Button, { iconName: "space-shuttle" })
				),
				React.createElement("br", null),
				React.createElement(
					"h3",
					null,
					"Small Center Justify"
				),
				React.createElement(
					ButtonBar,
					{ justify: Justify.center, sizing: Sizing.small },
					React.createElement(Button, { iconName: "car" }),
					React.createElement(Button, { iconName: "fighter-jet" }),
					React.createElement(Button, { iconName: "space-shuttle" })
				),
				React.createElement("br", null),
				React.createElement(
					"h3",
					null,
					"Large Center Justify"
				),
				React.createElement(
					ButtonBar,
					{ justify: Justify.center, sizing: Sizing.large, buttonSize: "32px" },
					React.createElement(Button, { iconName: "car" }),
					React.createElement(Button, { iconName: "fighter-jet" }),
					React.createElement(Button, { iconName: "space-shuttle" })
				),
				React.createElement("br", null),
				React.createElement(
					"h3",
					null,
					"Center Justify Disabled"
				),
				React.createElement(
					ButtonBar,
					{ justify: Justify.center, disabled: true },
					React.createElement(Button, { iconName: "car" }),
					React.createElement(Button, { iconName: "fighter-jet" }),
					React.createElement(Button, { iconName: "space-shuttle" })
				),
				React.createElement("br", null)
			);
		};
		_this.buildDialogBox = function () {
			return React.createElement(
				Container,
				{ id: "dialogBoxExample" },
				React.createElement(
					"div",
					{ id: "simple-buttons" },
					React.createElement(
						"div",
						{ className: "box" },
						React.createElement(ButtonText, { noicon: true, onClick: function onClick() {
								return _this.setState({ dialogError: true });
							}, style: {
								backgroundColor: "#d9534f"
							}, text: "Show Error Dialog" }),
						React.createElement(DialogBox, { dialogType: DialogBoxType.error, message: "This is a sample error dialog message\n" + randomText, onSelection: function onSelection(flag) {
								console.log("Dialog selection: " + flag);
								_this.setState({ dialogError: false });
							}, show: _this.state.dialogError })
					),
					React.createElement(
						"div",
						{ className: "box" },
						React.createElement(ButtonText, { noicon: true, onClick: function onClick() {
								return _this.setState({ dialogWarning: true });
							}, style: {
								backgroundColor: "#f0ad4e"
							}, text: "Show Warning Dialog" }),
						React.createElement(DialogBox, { dialogType: DialogBoxType.warning, message: "This is a sample warning dialog message\n" + randomText, onSelection: function onSelection(flag) {
								console.log("Dialog selection: " + flag);
								_this.setState({ dialogWarning: false });
							}, show: _this.state.dialogWarning })
					),
					React.createElement(
						"div",
						{ className: "box" },
						React.createElement(ButtonText, { noicon: true, onClick: function onClick() {
								return _this.setState({ dialogSuccess: true });
							}, style: {
								backgroundColor: "#5cb85c"
							}, text: "Show Success Dialog" }),
						React.createElement(DialogBox, { dialogType: DialogBoxType.success, message: "This is a sample success dialog message\n" + randomText, onSelection: function onSelection(flag) {
								console.log("Dialog selection: " + flag);
								_this.setState({ dialogSuccess: false });
							}, show: _this.state.dialogSuccess })
					),
					React.createElement(
						"div",
						{ className: "box" },
						React.createElement(ButtonText, { noicon: true, onClick: function onClick() {
								return _this.setState({ dialogInfo: true });
							}, style: {
								backgroundColor: "#5bc0de"
							}, text: "Show Info Dialog" }),
						React.createElement(DialogBox, { dialogType: DialogBoxType.info, message: "This is a sample info dialog message\n" + randomText, onSelection: function onSelection(flag) {
								console.log("Dialog selection: " + flag);
								_this.setState({ dialogInfo: false });
							}, show: _this.state.dialogInfo })
					),
					React.createElement(
						"div",
						{ className: "box" },
						React.createElement(ButtonText, { noicon: true, onClick: function onClick() {
								return _this.setState({ dialogCustom: true });
							}, style: {
								backgroundColor: "magenta"
							}, text: "Show Custom Dialog" }),
						React.createElement(DialogBox, { dialogType: DialogBoxType.custom, iconName: "car", message: "This is a sample custom dialog message\n" + randomText, onSelection: function onSelection(flag) {
								console.log("Dialog selection: " + flag);
								_this.setState({ dialogCustom: false });
							}, show: _this.state.dialogCustom, style: {
								color: 'magenta'
							} })
					)
				)
			);
		};
		_this.buildDynamicList = function () {
			return React.createElement(
				Container,
				{ id: "dynamicListExample" },
				React.createElement(DynamicList, { items: dynamicItems, layout: TitleLayout.dominant, onDelete: function onDelete(title) {
						console.log("Deleting item from list: " + title);
					}, onNew: function onNew(title) {
						console.log("Adding new item to list: " + title);
					}, onSelect: function onSelect(title) {
						console.log("Selected item: " + title);
					}, pageSizes: [10, 20, 30], title: "Dynamic List Test" })
			);
		};
		_this.buildEditor = function () {
			return React.createElement(
				Container,
				{ id: "editorExample" },
				React.createElement(Editor, null)
			);
		};
		_this.buildLabels = function () {
			return React.createElement(
				Container,
				{ id: "labelExample" },
				React.createElement(
					"div",
					{ id: "simple-labels" },
					React.createElement(
						"p",
						null,
						React.createElement(Label, { text: "Test Label #1 (double click to edit)" })
					),
					React.createElement(
						"p",
						null,
						React.createElement(Label, { disabled: true, text: "Test Label #2 (disabled)" })
					),
					React.createElement(
						"p",
						null,
						React.createElement(Label, { className: "demoLabel", text: "Test Label #3 Styled" })
					),
					React.createElement(
						"p",
						null,
						React.createElement(Label, { text: "Text Label #4 (no edit)", noedit: true })
					),
					React.createElement(
						"p",
						null,
						React.createElement(Label, { style: {
								color: 'white',
								backgroundColor: 'blue'
							}, text: "Text Label #5 (inline style)" })
					),
					React.createElement(Label, { text: "xxsmall", sizing: Sizing.xxsmall }),
					React.createElement("br", null),
					React.createElement(Label, { text: "xsmall", sizing: Sizing.xsmall }),
					React.createElement("br", null),
					React.createElement(Label, { text: "small", sizing: Sizing.small }),
					React.createElement("br", null),
					React.createElement(Label, { text: "normal", sizing: Sizing.normal }),
					React.createElement("br", null),
					React.createElement(Label, { text: "large", sizing: Sizing.large }),
					React.createElement("br", null),
					React.createElement(Label, { text: "xlarge", sizing: Sizing.xlarge }),
					React.createElement("br", null),
					React.createElement(Label, { text: "xxlarge", sizing: Sizing.xxlarge }),
					React.createElement("br", null)
				)
			);
		};
		_this.buildListItemWithHeader = function () {
			return React.createElement(
				Container,
				{ id: "listExample1" },
				React.createElement(
					"div",
					{ className: "selectBox" },
					React.createElement(Select, { name: "size-selection", value: _this.state.sizingOption, options: sizingOptions, onChange: function onChange(val) {
							if (val != null) {
								_this.setState({ sizingOption: val.value });
							}
						}, sizing: Sizing.small }),
					React.createElement("br", null),
					React.createElement("br", null)
				),
				React.createElement(
					List,
					{ alternating: true, sizing: _this.state.sizingOption },
					React.createElement(ListHeader, { leftButton: React.createElement(
							ButtonDialog,
							{ iconName: "bars" },
							React.createElement(
								"div",
								null,
								"header dialog"
							),
							React.createElement("br", null)
						), noedit: true, rightButton: React.createElement(Button, { iconName: "plus" }), title: "Demo List Header (" + _this.state.sizingOption + ")" }),
					React.createElement(ListItem, { id: "1", title: "List Item 1", widget: "12", leftButton: React.createElement(Button, { iconName: "podcast" }), rightButton: React.createElement(Button, { iconName: "paper-plane-o" }) }),
					React.createElement(ListItem, { id: "2", title: "List Item 2 (with icon)", widget: "13", leftButton: React.createElement(Icon, { iconName: "bolt" }), rightButton: React.createElement(Button, null) }),
					React.createElement(ListItem, { id: "3", title: "List Item 3 (with hidden icon)", widget: "14", leftButton: React.createElement(Icon, { iconName: "car" }), hiddenLeftButton: true }),
					React.createElement(ListDivider, null),
					React.createElement(ListItem, { id: "4", title: "List Item 4a (hide/show)", widget: "15", leftButton: React.createElement(Button, null), hiddenLeftButton: true, rightButton: React.createElement(ButtonCircle, { iconName: "times", style: {
								color: 'red',
								borderColor: 'red'
							} }), hiddenRightButton: true }),
					React.createElement(ListItem, { id: "5", title: "List Item 4b (hide/show)", widget: "15", hiddenLeftButton: true, leftButton: React.createElement(
							ButtonDialog,
							{ iconName: "wrench" },
							"Test Dialog Button"
						), hiddenRightButton: true, rightButton: React.createElement(Button, { iconName: "times", style: { color: 'red' } }) }),
					React.createElement(ListItem, { id: "6", title: "List Item 5" }),
					React.createElement(ListItem, { id: "7", title: "List Item 6 (Toggle)", widget: "15", rightButton: React.createElement(ButtonToggle, { iconNameOn: "star", iconNameOff: "star-o", fgColorOn: "#ffe11a", fgColorOff: "#004358" }) }),
					React.createElement(ListItem, { id: "7", title: "List Item 7 (disabled)", disabled: true }),
					React.createElement(ListItem, { id: "8", title: "List Item 8 (disabled w/ buttons)", disabled: true, rightButton: React.createElement(Button, null) }),
					React.createElement(ListItem, { id: "9", title: "List Item 9 (stacked)", widget: "stacked bottom widget", stacked: true, rightButton: React.createElement(Button, null) }),
					React.createElement(ListItem, { id: "10", noripple: true, title: "List Item 10 (noripple edit)" }),
					React.createElement(ListItem, { id: "11", noripple: true, noedit: true, title: "List Item 11 (noedit)" })
				)
			);
		};
		_this.buildListItemWithoutHeader = function () {
			return React.createElement(
				Container,
				{ id: "listExample2" },
				React.createElement(
					List,
					{ alternating: true },
					items
				)
			);
		};
		_this.buildPager = function () {
			return React.createElement(
				Container,
				{ id: "pagerExample" },
				React.createElement(
					"h3",
					null,
					"small"
				),
				React.createElement(
					"div",
					{ className: "pagerBox" },
					React.createElement(Pager, { initialPage: "1", totalItems: "299", sizing: Sizing.small, onSelect: function onSelect(page) {
							console.log("Clicked on page: " + page);
						} })
				),
				React.createElement(
					"h3",
					null,
					"normal"
				),
				React.createElement(
					"div",
					{ className: "pagerBox" },
					React.createElement(Pager, { initialPage: "1", totalItems: "299", sizing: Sizing.normal, onSelect: function onSelect(page) {
							console.log("Clicked on page: " + page);
						} })
				),
				React.createElement(
					"h3",
					null,
					"large"
				),
				React.createElement(
					"div",
					{ className: "pagerBox" },
					React.createElement(Pager, { initialPage: "1", totalItems: "299", sizing: Sizing.large, onSelect: function onSelect(page) {
							console.log("Clicked on page: " + page);
						}, useinputs: true })
				),
				React.createElement(
					"h3",
					null,
					"xlarge"
				),
				React.createElement(
					"div",
					{ className: "pagerBox" },
					React.createElement(Pager, { initialPage: "1", totalItems: "299", sizing: Sizing.xlarge, onSelect: function onSelect(page) {
							console.log("Clicked on page: " + page);
						} })
				),
				React.createElement(
					"h3",
					null,
					"normal, large range, with sort"
				),
				React.createElement(
					"div",
					{ className: "pagerBox" },
					React.createElement(Pager, { initialPage: "1", pagesToDisplay: "5", totalItems: "30000", pageSizes: [25, 50, 100, 500, 1000], onSelect: function onSelect(page) {
							console.log("Clicked on page: " + page);
						}, onSort: function onSort(sortOrder) {
							if (sortOrder === SortOrder.ascending) {
								console.log("Sorting pager in ascending");
							} else {
								console.log("Sorting pager in descending");
							}
						}, useinput: true })
				),
				React.createElement(
					"h3",
					null,
					"normal, disabled"
				),
				React.createElement(
					"div",
					{ className: "pagerBox" },
					React.createElement(Pager, { disabled: true, initialPage: "1", totalItems: "299", sizing: Sizing.normal, onSelect: function onSelect(page) {
							console.log("Clicked on page: " + page);
						} })
				)
			);
		};
		_this.buildSelect = function () {
			return React.createElement(
				Container,
				{ id: "selectExample" },
				React.createElement(
					"div",
					{ className: "selectBox" },
					React.createElement(Select, { name: "form-field-name", value: _this.state.selectOption, options: selectOptions, onChange: function onChange(val) {
							if (val != null) {
								console.log("Select click handler: " + JSON.stringify(val));
								_this.setState({ selectOption: val.value });
							}
						}, sizing: Sizing.small })
				),
				React.createElement(
					"div",
					{ className: "selectBox" },
					React.createElement(Select, { name: "form-field-name", value: _this.state.selectOption, options: selectOptions, onChange: function onChange(val) {
							if (val != null) {
								console.log("Select click handler: " + JSON.stringify(val));
								_this.setState({ selectOption: val.value });
							}
						}, sizing: Sizing.normal })
				)
			);
		};
		_this.buildSwitch = function () {
			return React.createElement(
				Container,
				{ id: "switchExample" },
				React.createElement(
					"h3",
					null,
					"xxsmall"
				),
				React.createElement(Switch, { sizing: Sizing.xxsmall }),
				React.createElement(Switch, { initialState: true, sizing: Sizing.xxsmall, switchType: SwitchType.inny }),
				React.createElement("br", null),
				React.createElement(
					"h3",
					null,
					"xsmall"
				),
				React.createElement(Switch, { sizing: Sizing.xsmall }),
				React.createElement(Switch, { initialState: true, sizing: Sizing.xsmall, switchType: SwitchType.inny }),
				React.createElement("br", null),
				React.createElement(
					"h3",
					null,
					"small"
				),
				React.createElement(Switch, { sizing: Sizing.small }),
				React.createElement(Switch, { initialState: true, sizing: Sizing.small, switchType: SwitchType.inny }),
				React.createElement("br", null),
				React.createElement(
					"h3",
					null,
					"normal"
				),
				React.createElement(Switch, { onClick: function onClick(toggle) {
						debug("Switch toggle (outy): " + (toggle ? 'on' : 'off'));
					}, switchType: SwitchType.outy }),
				React.createElement(Switch, { initialState: true, onClick: function onClick(toggle) {
						debug("Switch toggle (inny): " + (toggle ? 'on' : 'off'));
					}, switchType: SwitchType.inny }),
				React.createElement("br", null),
				React.createElement(
					"h3",
					null,
					"large"
				),
				React.createElement(Switch, { sizing: Sizing.large }),
				React.createElement(Switch, { initialState: true, sizing: Sizing.large, switchType: SwitchType.inny }),
				React.createElement("br", null),
				React.createElement(
					"h3",
					null,
					"xlarge"
				),
				React.createElement(Switch, { sizing: Sizing.xlarge }),
				React.createElement(Switch, { initialState: true, sizing: Sizing.xlarge, switchType: SwitchType.inny }),
				React.createElement("br", null),
				React.createElement(
					"h3",
					null,
					"xxlarge"
				),
				React.createElement(Switch, { sizing: Sizing.xxlarge }),
				React.createElement(Switch, { initialState: true, sizing: Sizing.xxlarge, switchType: SwitchType.inny }),
				React.createElement("br", null),
				React.createElement(
					"h3",
					null,
					"normal, disabled"
				),
				React.createElement(Switch, { disabled: true }),
				React.createElement(Switch, { initialState: true, disabled: true, switchType: SwitchType.inny }),
				React.createElement("br", null)
			);
		};
		_this.buildTabs = function () {
			var close = function close(tab) {
				debug("closing tab: " + tab.props['id']);
			};
			return React.createElement(
				Container,
				{ id: "tabControl" },
				React.createElement(
					"h3",
					null,
					"Top"
				),
				React.createElement(
					TabContainer,
					{ maxTabs: 5 },
					React.createElement(
						Tab,
						{ title: "tab #1", onClose: close },
						"#1",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					),
					React.createElement(
						Tab,
						{ title: "tab #2", onClose: close },
						"#2",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					),
					React.createElement(
						Tab,
						{ title: "tab #3", onClose: close },
						"#3",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					),
					React.createElement(
						Tab,
						{ title: "tab #4", onclose: close },
						"#4",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					),
					React.createElement(
						Tab,
						{ title: "tab #5", onclose: close },
						"#5",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					),
					React.createElement(
						Tab,
						{ title: "tab #6", onclose: close },
						"#6",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					)
				),
				React.createElement("br", null),
				React.createElement(
					"h3",
					null,
					"Left"
				),
				React.createElement(
					TabContainer,
					{ maxTabs: 3, location: Location.left },
					React.createElement(
						Tab,
						{ title: "tab #1" },
						"#1",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					),
					React.createElement(
						Tab,
						{ title: "tab #2" },
						"#2",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					),
					React.createElement(
						Tab,
						{ title: "tab #3" },
						"#3",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					),
					React.createElement(
						Tab,
						{ title: "tab #4" },
						"#4",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					)
				),
				React.createElement("br", null),
				React.createElement(
					"h3",
					null,
					"Bottom (no navigation)"
				),
				React.createElement(
					TabContainer,
					{ maxTabs: 3, location: Location.bottom, nonavigation: true },
					React.createElement(
						Tab,
						{ title: "tab #1" },
						"#1",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					),
					React.createElement(
						Tab,
						{ title: "tab #2" },
						"#2",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					),
					React.createElement(
						Tab,
						{ title: "tab #3" },
						"#3",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					),
					React.createElement(
						Tab,
						{ title: "tab #4" },
						"#4",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					)
				),
				React.createElement("br", null),
				React.createElement(
					"h3",
					null,
					"Right (no navigation, onSelect)"
				),
				React.createElement(
					TabContainer,
					{ maxTabs: 3, location: Location.right, nonavigation: true, onRemove: function onRemove(tab) {
							debug("removing %o (id=" + tab.props['id'] + ")", tab);
						}, onSelect: function onSelect(tab, previous) {
							debug("new: %o (id=" + tab.props['id'] + "), old: %o (id=" + previous.props['id'] + ")", tab, previous);
						} },
					React.createElement(
						"p",
						null,
						"Bad tab type to be ignored"
					),
					React.createElement(
						Tab,
						{ title: "tab #1" },
						"#1",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					),
					React.createElement(
						Tab,
						{ title: "tab #2" },
						"#2",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					),
					React.createElement(
						Tab,
						{ title: "tab #3" },
						"#3",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					),
					React.createElement(
						Tab,
						{ title: "tab #4" },
						"#4",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					)
				),
				React.createElement("br", null),
				React.createElement(
					"h3",
					null,
					"Disabled Tab within container"
				),
				React.createElement(
					TabContainer,
					{ location: Location.bottom },
					React.createElement(
						Tab,
						{ title: "tab #1", disabled: true },
						"#1",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					),
					React.createElement(
						Tab,
						{ title: "tab #2" },
						"#2",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					),
					React.createElement(
						Tab,
						{ title: "tab #3" },
						"#3",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					),
					React.createElement(
						Tab,
						{ title: "tab #4" },
						"#4",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					)
				),
				React.createElement("br", null),
				React.createElement(
					"h3",
					null,
					"Disabled Container"
				),
				React.createElement(
					TabContainer,
					{ disabled: true, location: Location.bottom },
					React.createElement(
						Tab,
						{ title: "tab #1" },
						"#1",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					),
					React.createElement(
						Tab,
						{ title: "tab #2" },
						"#2",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					),
					React.createElement(
						Tab,
						{ title: "tab #3" },
						"#3",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					),
					React.createElement(
						Tab,
						{ title: "tab #4" },
						"#4",
						React.createElement("br", null),
						React.createElement("br", null),
						randomText
					)
				),
				React.createElement("br", null)
			);
		};
		_this.buildTagList = function () {
			return React.createElement(
				Container,
				{ id: "tagListExample" },
				React.createElement(
					"h3",
					null,
					"Static"
				),
				React.createElement(TagList, { tags: ['one', 'two', 'three'] }),
				React.createElement("br", null),
				React.createElement("br", null),
				React.createElement(
					"h3",
					null,
					"Changeable (no sorting)"
				),
				React.createElement(TagList, { nosort: true, tags: ['one', 'two', 'three'], useinput: true }),
				React.createElement("br", null),
				React.createElement("br", null),
				React.createElement(
					"h3",
					null,
					"Changeable (sorted)"
				),
				React.createElement(TagList, { tags: ['one', 'two', 'three'], useinput: true }),
				React.createElement("br", null),
				React.createElement("br", null),
				React.createElement(
					"h3",
					null,
					"Disabled"
				),
				React.createElement(TagList, { disabled: true, tags: ['one', 'two', 'three'], useinput: true })
			);
		};
		_this.buildTextField = function () {
			return React.createElement(
				Container,
				{ id: "textfieldExample" },
				React.createElement(
					"h3",
					null,
					"Validation of Max (10) & Min (5) Length"
				),
				React.createElement(TextField, { placeholder: "validation", minLength: "5", maxLength: "10", usevalidation: true }),
				React.createElement(
					"h3",
					null,
					"Validation of Email"
				),
				React.createElement(TextField, { placeholder: "email validation", type: "email", usevalidation: true }),
				React.createElement(
					"h3",
					null,
					"Validation of URL"
				),
				React.createElement(TextField, { placeholder: "url validation", type: "url", usevalidation: true }),
				React.createElement(
					"h3",
					null,
					"Validation with custom alphanumeric"
				),
				React.createElement(TextField, { placeholder: "custom", usevalidation: true, validators: [new Validator(function (value) {
						return (/^[0-9a-zA-Z]+$/.test(value)
						);
					}, 'Not alphanumeric only', 'Contains only alphanumeric')] }),
				React.createElement(
					"h3",
					null,
					"Disabled TextField"
				),
				React.createElement(TextField, { type: "text", placeholder: "disabled", disabled: true }),
				React.createElement("br", null),
				React.createElement(
					"h3",
					null,
					"Sizing"
				),
				React.createElement(TextField, { type: "text", size: "10", sizing: Sizing.xxsmall, placeholder: "xxsmall" }),
				React.createElement("br", null),
				React.createElement("br", null),
				React.createElement(TextField, { type: "text", size: "10", sizing: Sizing.xsmall, placeholder: "xsmall" }),
				React.createElement("br", null),
				React.createElement("br", null),
				React.createElement(TextField, { type: "text", size: "10", sizing: Sizing.small, placeholder: "small" }),
				React.createElement("br", null),
				React.createElement("br", null),
				React.createElement(TextField, { type: "text", size: "10", sizing: Sizing.normal, placeholder: "normal" }),
				React.createElement("br", null),
				React.createElement("br", null),
				React.createElement(TextField, { type: "text", size: "10", sizing: Sizing.large, placeholder: "large" }),
				React.createElement("br", null),
				React.createElement("br", null),
				React.createElement(TextField, { type: "text", size: "10", sizing: Sizing.xlarge, placeholder: "xlarge" }),
				React.createElement("br", null),
				React.createElement("br", null),
				React.createElement(TextField, { type: "text", size: "10", sizing: Sizing.xxlarge, placeholder: "xxlarge" }),
				React.createElement("br", null)
			);
		};
		_this.buildTitle = function () {
			return React.createElement(
				Container,
				{ id: "titleExample" },
				React.createElement(
					"h3",
					null,
					"Layouts"
				),
				React.createElement(Title, { widget: "widget", layout: TitleLayout.quarter, title: "quarter" }),
				React.createElement("br", null),
				React.createElement(Title, { widget: "widget", layout: TitleLayout.third, title: "third" }),
				React.createElement("br", null),
				React.createElement(Title, { widget: "widget", layout: TitleLayout.even, title: "even" }),
				React.createElement("br", null),
				React.createElement(Title, { widget: "widget", layout: TitleLayout.threequarter, title: "three quarter" }),
				React.createElement("br", null),
				React.createElement(Title, { widget: "widget", layout: TitleLayout.stacked, title: "stacked" }),
				React.createElement("br", null),
				React.createElement(Title, { widget: "widget", layout: TitleLayout.dominant, title: "dominant" }),
				React.createElement("br", null),
				React.createElement(Title, { layout: TitleLayout.none, title: "title only" }),
				React.createElement("br", null),
				React.createElement(Title, { widget: "widget", title: "disabled", disabled: true }),
				React.createElement("br", null),
				React.createElement("br", null),
				React.createElement(
					"h3",
					null,
					"Sizes"
				),
				React.createElement(Title, { widget: "widget", layout: TitleLayout.even, sizing: Sizing.xxsmall, title: "xxsmall" }),
				React.createElement("br", null),
				React.createElement(Title, { widget: "widget", layout: TitleLayout.even, sizing: Sizing.xsmall, title: "xsmall" }),
				React.createElement("br", null),
				React.createElement(Title, { widget: "widget", layout: TitleLayout.even, sizing: Sizing.small, title: "small" }),
				React.createElement("br", null),
				React.createElement(Title, { widget: "widget", layout: TitleLayout.even, sizing: Sizing.normal, title: "normal" }),
				React.createElement("br", null),
				React.createElement(Title, { widget: "widget", layout: TitleLayout.even, sizing: Sizing.large, title: "large" }),
				React.createElement("br", null),
				React.createElement(Title, { widget: "widget", layout: TitleLayout.even, sizing: Sizing.xlarge, title: "xlarge" }),
				React.createElement("br", null),
				React.createElement(Title, { widget: "widget", layout: TitleLayout.even, sizing: Sizing.xxlarge, title: "xxlarge" }),
				React.createElement("br", null),
				React.createElement("br", null)
			);
		};
		_this.buildToast = function () {
			return React.createElement(
				Container,
				{ id: "toastExample" },
				React.createElement(
					"h3",
					null,
					"Info message with decay"
				),
				React.createElement(
					"div",
					{ className: "toastInfo" },
					React.createElement(
						"p",
						null,
						randomText
					),
					React.createElement(
						"div",
						{ className: "toastBox" },
						React.createElement(Button, { iconName: "power-off", onClick: function onClick() {
								return _this.setState({ toastVisible1: true });
							} }),
						React.createElement(
							"p",
							null,
							"Reset the Toast widget (show)"
						)
					),
					React.createElement(
						Toast,
						{ level: ToastLevel.info, show: _this.state.toastVisible1, onClose: function onClose() {
								return _this.setState({ toastVisible1: false });
							} },
						"This is a sample info message"
					)
				),
				React.createElement(
					"h3",
					null,
					"Warning message with decay"
				),
				React.createElement(
					"div",
					{ className: "toastInfo" },
					React.createElement(
						"p",
						null,
						randomText
					),
					React.createElement(
						"div",
						{ className: "toastBox" },
						React.createElement(Button, { iconName: "power-off", onClick: function onClick() {
								return _this.setState({ toastVisible2: true });
							} }),
						React.createElement(
							"p",
							null,
							"Reset the Toast widget (show)"
						)
					),
					React.createElement(
						Toast,
						{ level: ToastLevel.warning, show: _this.state.toastVisible2, onClose: function onClose() {
								return _this.setState({ toastVisible2: false });
							} },
						"This is a sample warning message"
					)
				),
				React.createElement(
					"h3",
					null,
					"Error message with decay"
				),
				React.createElement(
					"div",
					{ className: "toastInfo" },
					React.createElement(
						"p",
						null,
						randomText
					),
					React.createElement(
						"div",
						{ className: "toastBox" },
						React.createElement(Button, { iconName: "power-off", onClick: function onClick() {
								return _this.setState({ toastVisible3: true });
							} }),
						React.createElement(
							"p",
							null,
							"Reset the Toast widget (show)"
						)
					),
					React.createElement(
						Toast,
						{ level: ToastLevel.error, show: _this.state.toastVisible3, onClose: function onClose() {
								return _this.setState({ toastVisible3: false });
							} },
						"This is a sample error message"
					)
				),
				React.createElement(
					"h3",
					null,
					"Info message with persistence"
				),
				React.createElement(
					"div",
					{ className: "toastInfo" },
					React.createElement(
						"p",
						null,
						randomText
					),
					React.createElement(
						"div",
						{ className: "toastBox" },
						React.createElement(Button, { iconName: "power-off", onClick: function onClick() {
								return _this.setState({ toastVisible4: true });
							} }),
						React.createElement(
							"p",
							null,
							"Reset the Toast widget (show)"
						)
					),
					React.createElement(
						Toast,
						{ level: ToastLevel.info, type: ToastType.persistent, show: _this.state.toastVisible4, onClose: function onClose() {
								return _this.setState({ toastVisible4: false });
							} },
						"This is a sample info message"
					)
				),
				React.createElement(
					"h3",
					null,
					"Error message with persistence on the bottom"
				),
				React.createElement(
					"div",
					{ className: "toastInfo" },
					React.createElement(
						"p",
						null,
						randomText
					),
					React.createElement(
						"div",
						{ className: "toastBox" },
						React.createElement(Button, { iconName: "power-off", onClick: function onClick() {
								return _this.setState({ toastVisible5: true });
							} }),
						React.createElement(
							"p",
							null,
							"Reset the Toast widget (show)"
						)
					),
					React.createElement(
						Toast,
						{ bottom: true, level: ToastLevel.error, type: ToastType.persistent, show: _this.state.toastVisible5, onClose: function onClose() {
								return _this.setState({ toastVisible5: false });
							} },
						"This is a sample error message on the bottom"
					)
				),
				React.createElement(
					"h3",
					null,
					"Custom message with persistence"
				),
				React.createElement(
					"div",
					{ className: "toastInfo" },
					React.createElement(
						"p",
						null,
						randomText
					),
					React.createElement(
						"div",
						{ className: "toastBox" },
						React.createElement(Button, { iconName: "power-off", onClick: function onClick() {
								return _this.setState({ toastVisible6: true });
							} }),
						React.createElement(
							"p",
							null,
							"Reset the Toast widget (show)"
						)
					),
					React.createElement(
						Toast,
						{ level: ToastLevel.custom, onClose: function onClose() {
								return _this.setState({ toastVisible6: false });
							}, sizing: Sizing.small, style: {
								backgroundColor: '#7fbf3f',
								borderColor: '#3fbfbf',
								color: 'magenta'
							}, type: ToastType.persistent, show: _this.state.toastVisible6 },
						"This is a sample custom message"
					)
				)
			);
		};
		_this.buildTooltip = function () {
			return React.createElement(
				Container,
				{ id: "tooltipExample" },
				React.createElement(
					"h3",
					null,
					"Simple"
				),
				"Hover over each square to see the Tooltip.",
				React.createElement("br", null),
				React.createElement("br", null),
				React.createElement("br", null),
				React.createElement(
					"div",
					{ id: "tooltipContainer" },
					React.createElement(
						"div",
						{ className: "tooltipCell topLeft" },
						"topLeft",
						React.createElement(
							Tooltip,
							{ location: Location.topLeft },
							randomText
						)
					),
					React.createElement(
						"div",
						{ className: "tooltipCell top" },
						"top",
						React.createElement(
							Tooltip,
							{ location: Location.top },
							randomText
						)
					),
					React.createElement(
						"div",
						{ className: "tooltipCell topRight" },
						"topRight",
						React.createElement(
							Tooltip,
							{ location: Location.topRight },
							randomText
						)
					),
					React.createElement(
						"div",
						{ className: "tooltipCell middleLeft" },
						"middleLeft",
						React.createElement(
							Tooltip,
							{ location: Location.middleLeft },
							randomText
						)
					),
					React.createElement(
						"div",
						{ className: "tooltipCell middle inactive" },
						"N/A"
					),
					React.createElement(
						"div",
						{ className: "tooltipCell middleRight" },
						"middleRight",
						React.createElement(
							Tooltip,
							{ location: Location.middleRight },
							randomText
						)
					),
					React.createElement(
						"div",
						{ className: "tooltipCell bottomLeft" },
						"bottomLeft",
						React.createElement(
							Tooltip,
							{ location: Location.bottomLeft },
							randomText
						)
					),
					React.createElement(
						"div",
						{ className: "tooltipCell bottom" },
						"bottom",
						React.createElement(
							Tooltip,
							{ location: Location.bottom },
							randomText
						)
					),
					React.createElement(
						"div",
						{ className: "tooltipCell bottomRight" },
						"bottomRight",
						React.createElement(
							Tooltip,
							{ location: Location.bottomRight },
							randomText
						)
					)
				),
				React.createElement(
					"h3",
					null,
					"Custom style"
				),
				"Hover over the square to see the custom style colors on the tooltip",
				React.createElement(
					"div",
					{ id: "tooltipStyleExample" },
					React.createElement(
						Tooltip,
						{ location: Location.middleRight, style: {
								color: '#fd7400',
								backgroundColor: '#004358'
							} },
						randomText
					)
				)
			);
		};
		_this.buildTriangles = function () {
			return React.createElement(
				Container,
				{ id: "triangleExample" },
				React.createElement(
					"h3",
					null,
					"xxsmall"
				),
				React.createElement(Triangle, { sizing: Sizing.xxsmall, direction: Direction.up }),
				React.createElement(Triangle, { sizing: Sizing.xxsmall, direction: Direction.right }),
				React.createElement(Triangle, { sizing: Sizing.xxsmall, direction: Direction.down }),
				React.createElement(Triangle, { sizing: Sizing.xxsmall, direction: Direction.left }),
				React.createElement(
					"h3",
					null,
					"xsmall"
				),
				React.createElement(Triangle, { sizing: Sizing.xsmall, direction: Direction.up, style: { fill: 'red', stroke: 'red' } }),
				React.createElement(Triangle, { sizing: Sizing.xsmall, direction: Direction.right, style: { fill: 'red', stroke: 'red' } }),
				React.createElement(Triangle, { sizing: Sizing.xsmall, direction: Direction.down, style: { fill: 'red', stroke: 'red' } }),
				React.createElement(Triangle, { sizing: Sizing.xsmall, direction: Direction.left, style: { fill: 'red', stroke: 'red' } }),
				React.createElement(
					"h3",
					null,
					"small"
				),
				React.createElement(Triangle, { sizing: Sizing.small, direction: Direction.up, style: { fill: 'black', stroke: 'yellow' } }),
				React.createElement(Triangle, { sizing: Sizing.small, direction: Direction.right, style: { fill: 'black', stroke: 'yellow' } }),
				React.createElement(Triangle, { sizing: Sizing.small, direction: Direction.down, style: { fill: 'black', stroke: 'yellow' } }),
				React.createElement(Triangle, { sizing: Sizing.small, direction: Direction.left, style: { fill: 'black', stroke: 'yellow' } }),
				React.createElement(
					"h3",
					null,
					"normal"
				),
				React.createElement(Triangle, { sizing: Sizing.normal, direction: Direction.up, style: { fill: 'blue', stroke: 'green' } }),
				React.createElement(Triangle, { sizing: Sizing.normal, direction: Direction.right, style: { fill: 'blue', stroke: 'green' } }),
				React.createElement(Triangle, { sizing: Sizing.normal, direction: Direction.down, style: { fill: 'blue', stroke: 'green' } }),
				React.createElement(Triangle, { sizing: Sizing.normal, direction: Direction.left, style: { fill: 'blue', stroke: 'green' } }),
				React.createElement(
					"h3",
					null,
					"large"
				),
				React.createElement(Triangle, { sizing: Sizing.large, direction: Direction.up }),
				React.createElement(Triangle, { sizing: Sizing.large, direction: Direction.right }),
				React.createElement(Triangle, { sizing: Sizing.large, direction: Direction.down }),
				React.createElement(Triangle, { sizing: Sizing.large, direction: Direction.left }),
				React.createElement(
					"h3",
					null,
					"xlarge"
				),
				React.createElement(Triangle, { sizing: Sizing.xlarge, direction: Direction.up }),
				React.createElement(Triangle, { sizing: Sizing.xlarge, direction: Direction.right }),
				React.createElement(Triangle, { sizing: Sizing.xlarge, direction: Direction.down }),
				React.createElement(Triangle, { sizing: Sizing.xlarge, direction: Direction.left }),
				React.createElement(
					"h3",
					null,
					"xxlarge"
				),
				React.createElement(Triangle, { sizing: Sizing.xxlarge, direction: Direction.up }),
				React.createElement(Triangle, { sizing: Sizing.xxlarge, direction: Direction.right }),
				React.createElement(Triangle, { sizing: Sizing.xxlarge, direction: Direction.down }),
				React.createElement(Triangle, { sizing: Sizing.xxlarge, direction: Direction.left })
			);
		};
		_this.state = {
			counter1: 0,
			counter2: 1,
			counter3: 99,
			counter4: 1,
			counter5: -5,
			dialogError: false,
			dialogWarning: false,
			dialogSuccess: false,
			dialogInfo: false,
			dialogCustom: false,
			toastVisible1: true,
			toastVisible2: true,
			toastVisible3: true,
			toastVisible4: true,
			toastVisible5: true,
			toastVisible6: true,
			selectOption: selectOptions[0].value,
			sizingOption: sizingOptions[3].value
		};
		/* (window as any).state = this.state;*/
		return _this;
	}

	_createClass(App, [{
		key: "render",
		value: function render() {
			return React.createElement(
				"div",
				{ id: "app" },
				React.createElement(
					"h1",
					null,
					"Accordion"
				),
				this.buildAccordion(),
				React.createElement(
					"h1",
					null,
					"Badges"
				),
				"click on the buttons to increment the badges",
				this.buildBadges(),
				React.createElement(
					"h1",
					null,
					"Buttons & Icons"
				),
				this.buildButtons(),
				React.createElement(
					"h1",
					null,
					"ButtonBar"
				),
				this.buildButtonBar(),
				React.createElement(
					"h1",
					null,
					"Dialog Box"
				),
				this.buildDialogBox(),
				React.createElement(
					"h1",
					null,
					"Dynamic List"
				),
				this.buildDynamicList(),
				React.createElement(
					"h1",
					null,
					"Editor"
				),
				this.buildEditor(),
				React.createElement(
					"h1",
					null,
					"Labels"
				),
				this.buildLabels(),
				React.createElement(
					"h1",
					null,
					"List/ListItem (with header)"
				),
				this.buildListItemWithHeader(),
				React.createElement(
					"h1",
					null,
					"List/ListItem (without header)"
				),
				this.buildListItemWithoutHeader(),
				React.createElement(
					"h1",
					null,
					"Pager"
				),
				this.buildPager(),
				React.createElement(
					"h1",
					null,
					"Select"
				),
				this.buildSelect(),
				React.createElement(
					"h1",
					null,
					"Switch"
				),
				this.buildSwitch(),
				React.createElement(
					"h1",
					null,
					"Tabs"
				),
				this.buildTabs(),
				React.createElement(
					"h1",
					null,
					"TagList"
				),
				this.buildTagList(),
				React.createElement(
					"h1",
					null,
					"TextField"
				),
				this.buildTextField(),
				React.createElement(
					"h1",
					null,
					"Title"
				),
				this.buildTitle(),
				React.createElement(
					"h1",
					null,
					"Toast"
				),
				this.buildToast(),
				React.createElement(
					"h1",
					null,
					"Tooltip"
				),
				this.buildTooltip(),
				React.createElement(
					"h1",
					null,
					"Triangle"
				),
				this.buildTriangles()
			);
		}
	}]);

	return App;
}(React.Component);

react_dom_1.render(React.createElement(App, null), document.getElementById('root'));
