diff --git a/api/js/etemplate/Et2Checkbox/Et2CheckboxReadonly.ts b/api/js/etemplate/Et2Checkbox/Et2CheckboxReadonly.ts new file mode 100644 index 0000000000..0ced9955cc --- /dev/null +++ b/api/js/etemplate/Et2Checkbox/Et2CheckboxReadonly.ts @@ -0,0 +1,114 @@ +import {et2_IDetachedDOM} from "../et2_core_interfaces"; +import {et2_checkbox} from "../et2_widget_checkbox"; +import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget"; +import {classMap, css, html, LitElement} from "@lion/core"; +import shoelace from "../Styles/shoelace"; + +/** + * et2_checkbox_ro is the dummy readonly implementation of the checkbox + * @augments et2_checkbox + */ +export class Et2CheckboxReadonly extends Et2InputWidget(LitElement) implements et2_IDetachedDOM +{ + static get styles() + { + return [ + ...shoelace, + ...super.styles, + css` + :host { + margin: auto 0px; + vertical-align: -webkit-baseline-middle; + } + `, + ]; + } + + static get properties() + { + return { + ...super.properties, + + /** + * Checkbox is checked + */ + checked: {type: Boolean}, + + /** + * The checkbox's value attribute + */ + value: {type: String}, + + /* Value when checked */ + selectedValue: {type: String}, + + /** + * What should be displayed when readonly and selected + */ + roTrue: {type: String}, + /** + * What should be displayed when readonly and not selected + */ + roFalse: {type: String} + }; + } + + constructor() {super();} + + render() + { + const isChecked = this.checked || typeof this.selectedValue == "string" && this.value == this.selectedValue; + let check = ""; + + if(isChecked && this.roTrue) + { + check = this.roTrue; + } + else if(isChecked) + { + check = html` + `; + } + else if(!isChecked && this.roFalse) + { + check = this.roFalse; + } + + return html` + + `; + } + + getDetachedAttributes(_attrs : string[]) : void + { + _attrs.push("value", "class"); + } + + getDetachedNodes() : HTMLElement[] + { + return []; + } + + setDetachedAttributes(_nodes : HTMLElement[], _values : object, _data?) : void + { + for(let attr in _values) + { + this[attr] = _values[attr]; + } + } + +} + +customElements.define("et2-checkbox_ro", Et2CheckboxReadonly); \ No newline at end of file diff --git a/api/js/etemplate/etemplate2.ts b/api/js/etemplate/etemplate2.ts index a9410e211d..dc4b1b95d7 100644 --- a/api/js/etemplate/etemplate2.ts +++ b/api/js/etemplate/etemplate2.ts @@ -28,6 +28,7 @@ import './Layout/Et2Details/Et2Details'; import './Et2Avatar/Et2Avatar'; import './Et2Button/Et2Button'; import './Et2Checkbox/Et2Checkbox'; +import './Et2Checkbox/Et2CheckboxReadonly'; import './Et2Date/Et2Date'; import './Et2Date/Et2DateDuration'; import './Et2Date/Et2DateDurationReadonly';