f2ef109b4b
This adds the initial documentation for the moz-input-search component. I used the moz-input-folder README as an example, so the content should look similar. I also removed the JSdoc for iconSrc for moz-input-search as I don't believe we want to customize the magnifying glass icon for this component. If it is something we want, we can file a follow up to restore this JSDoc and ensure the icon can be changed. Differential Revision: https://phabricator.services.mozilla.com/D247390
52 lines
1.8 KiB
JavaScript
52 lines
1.8 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} 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.
|
|
* @property {string} ariaLabel
|
|
* The aria-label text for cases where there is no visible label.
|
|
*/
|
|
export default class MozInputSearch extends MozInputText {
|
|
static properties = {
|
|
ariaLabel: { type: String, mapped: true },
|
|
};
|
|
|
|
inputStylesTemplate() {
|
|
return html`${super.inputStylesTemplate()}`;
|
|
}
|
|
|
|
inputTemplate() {
|
|
return html`
|
|
<input
|
|
id="input"
|
|
class="with-icon"
|
|
type="search"
|
|
name=${this.name}
|
|
value=${this.value}
|
|
?disabled=${this.disabled || this.parentDisabled}
|
|
accesskey=${ifDefined(this.accessKey)}
|
|
placeholder=${ifDefined(this.placeholder)}
|
|
aria-label=${ifDefined(this.ariaLabel ?? undefined)}
|
|
aria-describedby="description"
|
|
@input=${this.handleInput}
|
|
@change=${this.redispatchEvent}
|
|
/>
|
|
`;
|
|
}
|
|
}
|
|
customElements.define("moz-input-search", MozInputSearch);
|