holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change textbox to be based on Shoelace instead of Lion

Browse Source
This commit is contained in:
nathan 2022-07-28 11:21:07 -06:00
parent 827a10376a
commit d4cbafc5a8
1 changed files with 15 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
api/js/etemplate/Et2Textarea/Et2Textarea.ts
View File

@ -9,17 +9,18 @@
*/ */
import {css, html} from "@lion/core"; import {css} from "@lion/core";
import {LionTextarea} from "@lion/textarea";
import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget"; import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
import {Et2Widget} from "../Et2Widget/Et2Widget"; import {SlTextarea} from "@shoelace-style/shoelace";
import shoelace from "../Styles/shoelace";
export class Et2Textarea extends Et2InputWidget(LionTextarea) export class Et2Textarea extends Et2InputWidget(SlTextarea)
{ {
static get styles() static get styles()
{ {
return [ return [
...shoelace,
...super.styles, ...super.styles,
css` css`
:host { :host {
@ -27,19 +28,6 @@ export class Et2Textarea extends Et2InputWidget(LionTextarea)
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
}
/* Get text area to fill its space */
.form-field__group-two {
height: 100%;
display: flex;
flex-direction: column;
}
.input-group {
height: 100%;
display: flex;
}
.input-group__container {
width: 100%;
} }
`, `,
]; ];
@ -72,13 +60,13 @@ export class Et2Textarea extends Et2InputWidget(LionTextarea)
connectedCallback() connectedCallback()
{ {
super.connectedCallback(); super.connectedCallback();
if(this._width && this._inputNode) if(this.__width && this._inputNode)
{ {
this._inputNode.style.width = this._width; this._inputNode.style.width = this.__width;
} }
if(this._height && this._inputNode) if(this.__height && this._inputNode)
{ {
this._inputNode.style.height = this._height; this._inputNode.style.height = this.__height;
} }
} }
@ -91,18 +79,18 @@ export class Et2Textarea extends Et2InputWidget(LionTextarea)
set width(value) set width(value)
{ {
let oldValue = this._width; let oldValue = this.__width;
this._width = value; this.__width = value;
this.requestUpdate("width", oldValue); this.requestUpdate("width", oldValue);
} }
set height(value) set height(value)
{ {
let oldValue = this._height; let oldValue = this.__height;
this._height = value; this.__height = value;
this.requestUpdate("height", oldValue); this.requestUpdate("height", oldValue);
} }
@ -113,16 +101,10 @@ export class Et2Textarea extends Et2InputWidget(LionTextarea)
this._inputNode.style.maxHeight = 'inherit'; this._inputNode.style.maxHeight = 'inherit';
} }
__initializeAutoresize() get _inputNode()
{ {
return; return this.shadowRoot?.querySelector("textarea");
}
__startAutoresize()
{
return;
} }
} }
// @ts-ignore TypeScript is not recognizing that Et2Textarea is a LitElement
customElements.define("et2-textarea", Et2Textarea); customElements.define("et2-textarea", Et2Textarea);