Fix some button stuff

- Submit / Cancel action was not being called correctly, so cancel buttons were not skipping change check
- Implement default image & class based on ID

api/js/etemplate/Et2Button/Et2Button.ts

@@ -20,6 +20,37 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
 	protected clicked : boolean = false;
 	private _image : string;
 
+	/**
+	 * images to be used as background-image, if none is explicitly applied and id matches given regular expression
+	 */
+	static readonly default_background_images : object = {
+		save: /save(&|\]|$)/,
+		apply: /apply(&|\]|$)/,
+		cancel: /cancel(&|\]|$)/,
+		delete: /delete(&|\]|$)/,
+		discard: /discard(&|\]|$)/,
+		edit: /edit(&|\[\]|$)/,
+		next: /(next|continue)(&|\]|$)/,
+		finish: /finish(&|\]|$)/,
+		back: /(back|previous)(&|\]|$)/,
+		copy: /copy(&|\]|$)/,
+		more: /more(&|\]|$)/,
+		check: /(yes|check)(&|\]|$)/,
+		cancelled: /no(&|\]|$)/,
+		ok: /ok(&|\]|$)/,
+		close: /close(&|\]|$)/,
+		add: /(add(&|\]|$)|create)/	// customfields use create*
+	};
+
+	/**
+	 * Classnames added automatically to buttons to set certain hover background colors
+	 */
+	static readonly default_classes : object = {
+		et2_button_cancel: /cancel(&|\]|$)/,		// yellow
+		et2_button_question: /(yes|no)(&|\]|$)/,	// yellow
+		et2_button_delete: /delete(&|\]|$)/			// red
+	};
+
 	static get styles()
 	{
 		return [
@@ -75,12 +106,6 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
 
 		// Do not add icon here, no children can be added in constructor
 
-		// Define a default click handler
-		// If a different one gets set via attribute, it will be used instead
-		this.onclick = (typeof this.onclick === "function") ? this.onclick : () =>
-		{
-			return this.getInstanceManager().submit();
-		};
 	}
 
 	connectedCallback()
@@ -126,11 +151,44 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
 			return false;
 		}
 
+		// Submit the form
+		if(this.getType() !== "buttononly")
+		{
+			return this.getInstanceManager().submit();
+		}
 		this.clicked = false;
 		this.getInstanceManager()?.skip_close_prompt(false);
 		return true;
 	}
 
+	/**
+	 * Handle changes that have to happen based on changes to properties
+	 *
+	 */
+	requestUpdate(name : PropertyKey, oldValue)
+	{
+		super.requestUpdate(name, oldValue);
+
+		// Default image & class are determined based on ID
+		if(name == "id" && this._widget_id)
+		{
+			// Check against current value to avoid triggering another update
+			if(!this.image)
+			{
+				let image = this._get_default_image(this._widget_id);
+				if(image != this._image)
+				{
+					this.image = this._get_default_image(this._widget_id);
+				}
+			}
+			let default_class = this._get_default_class(this._widget_id);
+			if(default_class && !this.classList.contains(default_class))
+			{
+				this.classList.add(this._get_default_class(this._widget_id));
+			}
+		}
+	}
+
 	render()
 	{
 		if(this.readonly)
@@ -147,6 +205,53 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
             </div> `;
 	}
 
+	/**
+	 * Get a default image for the button based on ID
+	 *
+	 * @param {string} check_id
+	 */
+	_get_default_image(check_id : string) : string
+	{
+		if(!check_id)
+		{
+			return "";
+		}
+
+		if(typeof this.image == 'undefined')
+		{
+			for(const image in Et2Button.default_background_images)
+			{
+				if(check_id.match(Et2Button.default_background_images[image]))
+				{
+					return image;
+				}
+			}
+		}
+		return "";
+	}
+
+	/**
+	 * Get a default class for the button based on ID
+	 *
+	 * @param check_id
+	 * @returns {string}
+	 */
+	_get_default_class(check_id)
+	{
+		if(!check_id)
+		{
+			return "";
+		}
+		for(var name in Et2Button.default_classes)
+		{
+			if(check_id.match(Et2Button.default_classes[name]))
+			{
+				return name;
+			}
+		}
+		return "";
+	}
+
 	get _iconNode() : HTMLImageElement
 	{
 		return <HTMLImageElement>(Array.from(this.children)).find(

api/js/etemplate/Et2Widget/Et2Widget.ts

@@ -220,8 +220,10 @@ const Et2WidgetMixin = (superClass) =>
 		 */
 		set id(value)
 		{
+			let oldValue = this._widget_id;
 			this._widget_id = value;
 			this.setAttribute("id", this._widget_id ? this.getInstanceManager().uniqueId + '_' + this._widget_id.replace(/\./g, '-') : "");
+			this.requestUpdate("id", oldValue);
 		}
 
 		/**