extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2025-06-26 04:41:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Revert "Et2Textbox: Also accept RegExp as validator" as it breaks a lot and is probably not intended for 23.1

Browse Source 
This reverts commit 1cc0a9e33bbc0f7e4cb61613595d4c1808230f0d.
This commit is contained in:
ralf 2024-08-07 23:58:19 +02:00
parent 1cc0a9e33b
commit c6fecd93a0
1 changed files with 18 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

184
api/js/etemplate/Et2Textbox/Et2Textbox.ts
View File

@ -9,16 +9,12 @@
*/ */
import {css, html, nothing, PropertyValues} from "lit"; import {css, PropertyValues} from "lit";
import {customElement} from "lit/decorators/custom-element.js";
import {property} from "lit/decorators/property.js";
import {Regex} from "../Validators/Regex"; import {Regex} from "../Validators/Regex";
import {SlInput} from "@shoelace-style/shoelace";
import shoelace from "../Styles/shoelace"; import shoelace from "../Styles/shoelace";
import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget"; import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
import IMask, {InputMask} from "imask";
import {SlInput} from "@shoelace-style/shoelace";
@customElement("et2-textbox")
export class Et2Textbox extends Et2InputWidget(SlInput) export class Et2Textbox extends Et2InputWidget(SlInput)
{ {
@ -46,37 +42,19 @@ export class Et2Textbox extends Et2InputWidget(SlInput)
]; ];
} }
@property() static get properties()
value = ""; {
return {
/** ...super.properties,
* Placeholder text to show as a hint when the input is empty. /**
*/ * Perl regular expression eg. '/^[0-9][a-f]{4}$/i'
@property() *
placeholder; * Not to be confused with this.validators, which is a list of validators for this widget
*/
/** validator: String,
* Mask the input to enforce format. The mask is enforced as the user types, preventing invalid input. onkeypress: Function,
*/ }
@property() }
mask;
/**
* Disables the input. It is still visible.
* @type {boolean}
*/
@property({type: Boolean})
disabled = false;
@property({type: Function})
onkeypress;
private __validator : any;
private _mask : InputMask;
protected _value : string = "";
inputMode = "text";
static get translate() static get translate()
{ {
@ -95,20 +73,6 @@ export class Et2Textbox extends Et2InputWidget(SlInput)
super.connectedCallback(); super.connectedCallback();
} }
disconnectedCallback()
{
super.disconnectedCallback();
this.removeEventListener("focus", this.handleFocus);
}
firstUpdated()
{
if(this.maskOptions.mask)
{
this.updateMask();
}
}
/** @param changedProperties */ /** @param changedProperties */
updated(changedProperties : PropertyValues) updated(changedProperties : PropertyValues)
{ {
@ -119,13 +83,8 @@ export class Et2Textbox extends Et2InputWidget(SlInput)
this.validators = (this.validators || []).filter((validator) => !(validator instanceof Regex)) this.validators = (this.validators || []).filter((validator) => !(validator instanceof Regex))
this.validators.push(new Regex(this.validator)); this.validators.push(new Regex(this.validator));
} }
if(changedProperties.has('mask'))
{
this.updateMask();
}
} }
@property()
get validator() get validator()
{ {
return this.__validator; return this.__validator;
@ -153,114 +112,7 @@ export class Et2Textbox extends Et2InputWidget(SlInput)
this.requestUpdate("validator"); this.requestUpdate("validator");
} }
} }
/**
* Get the options for masking.
* Can be overridden by subclass for additional options.
*
* @see https://imask.js.org/guide.html#masked
*/
protected get maskOptions()
{
return {
mask: this.mask,
lazy: this.placeholder ? true : false,
autofix: true,
eager: "append",
overwrite: "shift"
}
}
protected updateMask()
{
const input = this.shadowRoot.querySelector("input")
if(!this._mask)
{
this._mask = IMask(input, this.maskOptions);
this.addEventListener("focus", this.handleFocus)
window.setTimeout(() =>
{
this._mask.updateControl();
}, 1);
}
else
{
this._mask.updateOptions(this.maskOptions);
}
if(this._mask)
{
this.updateMaskValue();
}
}
protected updateMaskValue()
{
this._mask.unmaskedValue = "" + this.value;
this._mask.updateValue();
this.updateComplete.then(() =>
{
this._mask.updateControl();
});
}
protected handleFocus(event)
{
if(this._mask)
{
// this._mask.updateValue();
}
}
protected _inputTemplate()
{
return html`
<sl-input
part="input"
placeholder=${this.placeholder || nothing}
inputmode="${this.inputMode}"
?disabled=${this.disabled}
?readonly=${this.readonly}
?required=${this.required}
.value=${this.value}
@input=${(e) =>
{
if(this.__mask)
{
this.__mask.updateCursor(this.__mask.cursorPos)
}
}}
>
<slot name="prefix" slot="prefix"></slot>
<slot name="suffix" slot="suffix"></slot>
</sl-input>
`;
}
/*
render()
{
const labelTemplate = this._labelTemplate();
const helpTemplate = this._helpTextTemplate();
return html`
<div
part="form-control"
class=${classMap({
'form-control': true,
'form-control--medium': true,
'form-control--has-label': labelTemplate !== nothing,
'form-control--has-help-text': helpTemplate !== nothing
})}
>
${labelTemplate}
<div part="form-control-input" class="form-control-input">
${this._inputTemplate()}
</div>
${helpTemplate}
</div>
`;
}
*/
} }
// @ts-ignore TypeScript is not recognizing that Et2Textbox is a LitElement
customElements.define("et2-textbox", Et2Textbox);