1efc441126
This component inherits most of its starting functionality from the moz-input-text component, and so moz-input-search appears relatively barebones at the moment. Having the basic component in tree will allow us to add the necessary features to this component more easily. The overlapping functionality with moz-input-text is covered by the newly added test, test_moz_input_search. This test file is effectively a copy and paste of the test_moz_input_text file until the search specific features are added. Additionally, we added a new test helper function, testCommonInputEvents, that covers the common events that all input elements generate. This component is another example of extending existing reusable components which allows relatively quick standing up of new components. Differential Revision: https://phabricator.services.mozilla.com/D234109
45 lines
1.6 KiB
JavaScript
45 lines
1.6 KiB
JavaScript
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
import { html, ifDefined } from "../vendor/lit.all.mjs";
|
|
import MozInputText from "chrome://global/content/elements/moz-input-text.mjs";
|
|
|
|
/**
|
|
* A search input custom element.
|
|
*
|
|
* @tagname moz-input-search
|
|
*
|
|
* @property {string} label - The text of the label element
|
|
* @property {string} name - The name of the input control
|
|
* @property {string} value - The value of the input control
|
|
* @property {boolean} disabled - The disabled state of the input control
|
|
* @property {string} iconSrc - The src for an optional icon
|
|
* @property {string} description - The text for the description element that helps describe the input control
|
|
* @property {string} supportPage - Name of the SUMO support page to link to.
|
|
* @property {string} placeholder - Text to display when the input has no value.
|
|
*/
|
|
export default class MozInputSearch extends MozInputText {
|
|
inputStylesTemplate() {
|
|
return html`${super.inputStylesTemplate()}`;
|
|
}
|
|
|
|
inputTemplate() {
|
|
return html`
|
|
<input
|
|
id="input"
|
|
type="search"
|
|
name=${this.name}
|
|
value=${this.value}
|
|
?disabled=${this.disabled}
|
|
accesskey=${ifDefined(this.accessKey)}
|
|
placeholder=${ifDefined(this.placeholder)}
|
|
aria-describedby="description"
|
|
@input=${this.handleInput}
|
|
@change=${this.redispatchEvent}
|
|
/>
|
|
`;
|
|
}
|
|
}
|
|
customElements.define("moz-input-search", MozInputSearch);
|