2021-06-23 23:39:58 +02:00
|
|
|
/**
|
|
|
|
* EGroupware eTemplate2 - Button widget
|
|
|
|
*
|
|
|
|
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
|
|
|
|
* @package etemplate
|
|
|
|
* @subpackage api
|
|
|
|
* @link https://www.egroupware.org
|
|
|
|
* @author Nathan Gray
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
2021-08-25 19:32:15 +02:00
|
|
|
import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
|
2022-07-27 21:03:44 +02:00
|
|
|
import '../Et2Image/Et2Image';
|
2022-07-27 00:23:27 +02:00
|
|
|
import {SlButton} from "@shoelace-style/shoelace";
|
2023-01-04 23:03:43 +01:00
|
|
|
import {ButtonMixin} from "./ButtonMixin";
|
2023-09-13 19:55:33 +02:00
|
|
|
import {PropertyValues} from "lit";
|
2021-07-14 17:49:36 +02:00
|
|
|
|
2021-08-10 23:02:52 +02:00
|
|
|
|
2022-08-22 16:43:41 +02:00
|
|
|
export class Et2Button extends ButtonMixin(Et2InputWidget(SlButton))
|
|
|
|
{
|
2022-08-23 16:54:31 +02:00
|
|
|
static get properties()
|
|
|
|
{
|
|
|
|
return {
|
|
|
|
...super.properties,
|
2023-08-28 12:19:18 +02:00
|
|
|
label: {type: String, noAccessor: true}
|
2022-08-23 16:54:31 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-08-22 22:00:06 +02:00
|
|
|
protected firstUpdated(_changedProperties : PropertyValues)
|
|
|
|
{
|
|
|
|
super.firstUpdated(_changedProperties);
|
2021-08-13 23:26:18 +02:00
|
|
|
|
2022-08-22 22:00:06 +02:00
|
|
|
if(!this.label && this.__image)
|
|
|
|
{
|
|
|
|
/*
|
|
|
|
Label / no label should get special classes set, but they're missing without this extra requestUpdate()
|
|
|
|
This is a work-around for button--has-prefix & button--has-label not being set, something to do
|
|
|
|
with how we're setting them.
|
|
|
|
*/
|
|
|
|
this.updateComplete.then(() =>
|
|
|
|
{
|
|
|
|
this.requestUpdate();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
set label(new_label : string)
|
|
|
|
{
|
|
|
|
this.updateComplete.then(() =>
|
|
|
|
{
|
|
|
|
if(!this._labelNode)
|
|
|
|
{
|
|
|
|
const textNode = document.createTextNode(new_label);
|
|
|
|
this.appendChild(textNode);
|
2023-02-16 15:17:13 +01:00
|
|
|
// for some reason button doesn't get resized properly without a forced rendereing therefore the
|
|
|
|
// requestUpdate is used to trigger a refresh.
|
|
|
|
this.requestUpdate();
|
2022-08-22 22:00:06 +02:00
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
|
|
|
this._labelNode.textContent = new_label;
|
2023-02-16 15:17:13 +01:00
|
|
|
// for some reason button doesn't get resized properly without a forced rendereingtherefore the
|
|
|
|
// requestUpdate is used to trigger a refresh.
|
|
|
|
this.requestUpdate();
|
2022-08-22 22:00:06 +02:00
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
get label()
|
|
|
|
{
|
|
|
|
return this._labelNode?.textContent?.trim();
|
|
|
|
}
|
2021-06-23 23:39:58 +02:00
|
|
|
}
|
2021-08-10 23:02:52 +02:00
|
|
|
|
2022-05-13 16:54:02 +02:00
|
|
|
customElements.define("et2-button", Et2Button);
|