egroupware_official/api/js/etemplate/Et2Textbox/Et2Searchbox.ts
ralf ac0867ab77 implement et2-searchbox and using it in NM
reorganized preprocessor a bit to fix some not replaced size attributes
also pass on constructor args in all Et2Url widgets

There is still a JS error in new searchbox, causing admin searchbox to not render :(
2022-07-22 20:43:09 +02:00

81 lines
1.8 KiB
TypeScript

/**
* EGroupware eTemplate2 - Searchbox widget
*
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @package api
* @link https://www.egroupware.org
* @author Ralf Becker
*/
/* eslint-disable import/no-extraneous-dependencies */
import {Et2Textbox} from "./Et2Textbox";
/**
* @customElement et2-searchbox
*/
export class Et2Searchbox extends Et2Textbox
{
/** @type {any} */
static get properties()
{
return {
...super.properties,
/**
* Define whether the searchbox overlays while it's open (true) or stay as solid box in front of the search button (false). Default is false.
* @todo implement again
*/
overlay: Boolean,
/**
* Define whether the searchbox should be a fix input field or flexible search button. Default is true (fix).
* @todo implement again
*/
fix: Boolean,
};
}
constructor(...args : any[])
{
super(...args);
this.overlay = false;
this.fix = true;
this.clearable = true;
this.type = 'search';
this.enterkeyhint = 'search';
}
/**
* Overwritten to trigger a change/search
*
* @param event
*/
handleKeyDown(event: KeyboardEvent)
{
const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
// Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before
// submitting to allow users to cancel the keydown event if they need to
if (event.key === 'Enter' && !hasModifier)
{
event.preventDefault();
this._oldChange(event);
}
}
/**
* Overwritten to trigger a change/search
*
* @param event
*/
handleClearClick(event : MouseEvent)
{
event.preventDefault();
this.value = '';
this._oldChange(event);
}
}
// @ts-ignore TypeScript is not recognizing that this is a LitElement
customElements.define("et2-searchbox", Et2Searchbox);