Button.js

/** @module deliteful/Button */
define([
	"dcl/dcl",
	"requirejs-dplugins/has",
	"delite/register",
	"delite/Widget",
	"requirejs-dplugins/has!bidi?./Button/bidi/Button",
	"delite/handlebars!./Button/Button.html",
	"delite/theme!./Button/themes/{{theme}}/Button.css"
], function (dcl, has, register, Widget, BidiButton, template) {

	/**
	 * A Non-templated form-aware button widget.
	 * A Button can display a label, an icon, or both. Icon is specified via the iconClass property that
	 * takes the name of the class to apply to the button node to display the icon.
	 * @example
	 * <style>
	 *   .iconForButton {
	 *     background-image: url('images/cut.png');
	 *     width: 16px;
	 *     height: 16px;
	 *   }
	 * </style>
	 * <button is="d-button" iconClass="iconForButton">Click Me</button>
	 * @class module:deliteful/Button
	 * @augments module:delite/Widget
	 */
	var Button = dcl(Widget, /** @lends module:deliteful/Button# */ {

		/**
		 * The text to display in the button.
		 * @member {string}
		 * @default ""
		 */
		label: "",

		/**
		 * The name of the CSS class to apply to DOMNode in button to make it display an icon.
		 * @member {string}
		 * @default ""
		 */
		iconClass: "",

		/**
		 * The name of the CSS class of this widget.
		 * @member {string}
		 * @default "d-button"
		 */
		baseClass: "d-button",

		template: template,

		preRender: function () {
			// Get label from innerHTML, and then clear it since we are to put the label in a <span>
			if (!this.label) {
				this.label = this.textContent.trim();
				this.innerHTML = "";
			}
		},

		computeProperties: function (props) {
			if ("title" in props || "label" in props) {
				this.title = this.title || this.label || "";
			}
		}
	});

	var ButtonElt = register("d-button", has("bidi") ? [HTMLButtonElement, Button, BidiButton] :
		[HTMLButtonElement, Button]);
	ButtonElt.Impl = Button;
	return ButtonElt;
});