51 lines
1.5 KiB
JavaScript
51 lines
1.5 KiB
JavaScript
import { LionField } from '@lion/field';
|
|
|
|
/**
|
|
* LionSelectNative: wraps the native HTML element select
|
|
*
|
|
* <lion-select-native>
|
|
* <label slot="label">My Input</label>
|
|
* <select slot="input">
|
|
* <option value="top">top</option>
|
|
* <option value="bottom">bottom</option>
|
|
* </select>
|
|
* </lion-select-native>
|
|
*
|
|
* You can preselect an option by setting the property modelValue.
|
|
* Example:
|
|
* <lion-select-native modelValue="${'<value of option 2>'}">
|
|
*
|
|
* It extends LionField so it inherits required and disabled.
|
|
*
|
|
* The option element needs to be a direct child of the select element.
|
|
*
|
|
* You cannot use interactive elements inside the options. Avoid very long names to
|
|
* facilitate the understandability and perceivability for screen reader users. Sets of options
|
|
* where each option name starts with the same word or phrase can also significantly degrade
|
|
* usability for keyboard and screen reader users.
|
|
*
|
|
* @customElement lion-select
|
|
* @extends {LionField}
|
|
*/
|
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
export class LionSelect extends LionField {
|
|
connectedCallback() {
|
|
super.connectedCallback();
|
|
this.addEventListener('change', this._proxyChangeEvent);
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
super.disconnectedCallback();
|
|
this.removeEventListener('change', this._proxyChangeEvent);
|
|
}
|
|
|
|
_proxyChangeEvent() {
|
|
this._inputNode.dispatchEvent(
|
|
new CustomEvent('user-input-changed', {
|
|
bubbles: true,
|
|
composed: true,
|
|
}),
|
|
);
|
|
}
|
|
}
|