diff --git a/api/etemplate.php b/api/etemplate.php index ef3f7ad0d1..e2621a5ce0 100644 --- a/api/etemplate.php +++ b/api/etemplate.php @@ -17,7 +17,7 @@ const ADD_ET2_PREFIX_REGEXP = '#<((/?)([vh]?box))(/?|\s[^>]*)>#m'; const ADD_ET2_PREFIX_LAST_GROUP = 4; // unconditional of legacy add et2- prefix to this widgets -const ADD_ET2_PREFIX_LEGACY_REGEXP = '#<(description|searchbox|textbox|label|avatar|lavatar|image|colorpicker|url(-email|-phone|-fax)?|vfs-mime|vfs-uid|vfs-gid|link|link-[a-z]+|favorites)\s([^>]+)/>#m'; +const ADD_ET2_PREFIX_LEGACY_REGEXP = '#<(description|searchbox|textbox|label|avatar|lavatar|image|colorpicker|checkbox|url(-email|-phone|-fax)?|vfs-mime|vfs-uid|vfs-gid|link|link-[a-z]+|favorites)\s([^>]+)/>#m'; const ADD_ET2_PREFIX_LEGACY_LAST_GROUP = 3; // switch evtl. set output-compression off, as we can't calculate a Content-Length header with transparent compression diff --git a/api/js/etemplate/Et2Checkbox/Et2Checkbox.ts b/api/js/etemplate/Et2Checkbox/Et2Checkbox.ts new file mode 100644 index 0000000000..98cd7e08d6 --- /dev/null +++ b/api/js/etemplate/Et2Checkbox/Et2Checkbox.ts @@ -0,0 +1,117 @@ +/** + * EGroupware eTemplate2 - Checkbox 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 + */ + + +import {css} from "@lion/core"; +import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget"; +import '../Et2Image/Et2Image'; +import {SlCheckbox} from "@shoelace-style/shoelace"; +import shoelace from "../Styles/shoelace"; + +export class Et2Checkbox extends Et2InputWidget(SlCheckbox) +{ + static get styles() + { + return [ + ...shoelace, + ...super.styles, + css` + :host([disabled]) { + display:initial; + } + `, + ]; + } + + static get properties() + { + return { + ...super.properties, + /* Different value when checked */ + selectedValue: {type: String}, + /* Different value when unchecked */ + unselectedValue: {type: String} + } + } + + constructor() + { + super(); + } + + connectedCallback() + { + super.connectedCallback(); + + } + + get label() + { + return this._labelNode?.textContent || ""; + } + + set label(label_text) + { + if(this._labelNode) + { + this._labelNode.textContent = label_text; + } + else + { + this.updateComplete.then(() => + { + this.label = label_text; + }) + } + } + + get value() + { + if(this.checked && this.selectedValue) + { + return this.selectedValue; + } + if(!this.checked && this.unselectedValue) + { + return this.unselectedValue; + } + return this.checked + ""; + } + + set value(new_value : string | boolean) + { + this.requestUpdate("checked"); + this.indeterminate = false; + if(typeof new_value === "boolean" || !this.selectedValue) + { + this.checked = new_value; + return; + } + if(this.selectedValue && new_value == this.selectedValue) + { + this.checked = true; + } + else if(this.unselectedValue && new_value == this.unselectedValue) + { + this.checked = false; + } + else + { + this.indeterminate = true; + } + } + + private get _labelNode() + { + return this.shadowRoot?.querySelector("slot:not([name])"); + } +} + +customElements.define("et2-checkbox", Et2Checkbox); \ No newline at end of file diff --git a/api/js/etemplate/etemplate2.ts b/api/js/etemplate/etemplate2.ts index 28ab805555..8150f53096 100644 --- a/api/js/etemplate/etemplate2.ts +++ b/api/js/etemplate/etemplate2.ts @@ -26,6 +26,7 @@ import {egwIsMobile} from "../egw_action/egw_action_common.js"; import './Layout/Et2Box/Et2Box'; import './Et2Avatar/Et2Avatar'; import './Et2Button/Et2Button'; +import './Et2Checkbox/Et2Checkbox'; import './Et2Date/Et2Date'; import './Et2Date/Et2DateDuration'; import './Et2Date/Et2DateDurationReadonly';