diff --git a/packages/js-example-app/src/index.js b/packages/js-example-app/src/index.js index 9ccbe9a23..83dea590a 100644 --- a/packages/js-example-app/src/index.js +++ b/packages/js-example-app/src/index.js @@ -53,7 +53,7 @@ blrButton.addEventListener('blrBlur', () => { addLog('blr-text-button blurred'); }); -blrCheckbox.addEventListener('blrChange', (e) => { +blrCheckbox.addEventListener('blrCheckedChange', (e) => { addLog('blr-checkbox changed: ' + e.detail.checkedState); }); @@ -65,7 +65,7 @@ blrCheckbox.addEventListener('blrBlur', () => { addLog('blr-checkbox blurred'); }); -blrSelect.addEventListener('blrChange', () => { +blrSelect.addEventListener('blrSelectedValueChange', () => { addLog('blr-select changed'); }); @@ -77,7 +77,7 @@ blrTextInput.addEventListener('blrBlur', () => { addLog('blr-text-input blurred'); }); -blrTextInput.addEventListener('blrChange', () => { +blrTextInput.addEventListener('blrTextValueChange', () => { addLog('blr-text-input changed'); }); @@ -94,5 +94,5 @@ blrTextArea.addEventListener('blrChange', () => { }); blrTextArea.addEventListener('blrSelect', () => { - addLog('blr-textarea selected',); + addLog('blr-textarea selected'); }); diff --git a/packages/ui-library/src/components/checkbox/index.ts b/packages/ui-library/src/components/checkbox/index.ts index 6361cfbba..2d7a7bbbe 100644 --- a/packages/ui-library/src/components/checkbox/index.ts +++ b/packages/ui-library/src/components/checkbox/index.ts @@ -13,7 +13,26 @@ import { checkboxLight, checkboxDark } from './index.css'; import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderFunction'; import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction'; import { BlrFormLabelInlineRenderFunction } from '../form-label/form-label-inline/renderFunction'; - +import { + BlrBlurEvent, + BlrFocusEvent, + BlrCheckedChangeEvent, + createBlrCheckedChangeEvent, + createBlrBlurEvent, + createBlrFocusEvent, +} from '../../globals/events'; + +export type BlrCheckboxEventHandlers = { + blrFocus?: (event: BlrFocusEvent) => void; + blrBlur?: (event: BlrBlurEvent) => void; + blrCheckedChange?: (event: BlrCheckedChangeEvent) => void; +}; + +/** + * @fires blrFocus Checkbox received focus + * @fires blrBlur Checkbox lost focus + * @fires blrCheckedChange Checkbox state changed (event.checkState) + */ export class BlrCheckbox extends LitElement { static styles = []; @@ -41,11 +60,6 @@ export class BlrCheckbox extends LitElement { @property() size?: FormSizesType = 'md'; - // these are not triggered directly but allows us to map it internally and bve typesafe - @property() blrFocus?: () => void; - @property() blrBlur?: () => void; - @property() blrChange?: () => void; - @property() theme: ThemeType = 'Light'; @state() protected currentCheckedState: boolean | undefined = this.checked; @@ -69,10 +83,9 @@ export class BlrCheckbox extends LitElement { this.currentIndeterminateState = false; this.dispatchEvent( - new CustomEvent('blrChange', { - bubbles: true, - composed: true, - detail: { originalEvent: event, checkedState: this.currentCheckedState }, + createBlrCheckedChangeEvent({ + originalEvent: event, + checkedState: this.currentCheckedState, }) ); } @@ -84,9 +97,7 @@ export class BlrCheckbox extends LitElement { if (!this.disabled && !this.readonly) { this.focused = true; - this.dispatchEvent( - new CustomEvent('blrFocus', { bubbles: true, composed: true, detail: { originalEvent: event } }) - ); + this.dispatchEvent(createBlrFocusEvent({ originalEvent: event })); } }; @@ -94,13 +105,7 @@ export class BlrCheckbox extends LitElement { if (!this.disabled && !this.readonly) { this.focused = false; - this.dispatchEvent( - new CustomEvent('blrBlur', { - bubbles: true, - composed: true, - detail: { originalEvent: event }, - }) - ); + this.dispatchEvent(createBlrBlurEvent({ originalEvent: event })); } }; @@ -313,4 +318,4 @@ if (!customElements.get(TAG_NAME)) { customElements.define(TAG_NAME, BlrCheckbox); } -export type BlrCheckboxType = Omit; +export type BlrCheckboxType = Omit & BlrCheckboxEventHandlers; diff --git a/packages/ui-library/src/components/icon-button/index.ts b/packages/ui-library/src/components/icon-button/index.ts index 2f41cdc54..2cb0747bb 100644 --- a/packages/ui-library/src/components/icon-button/index.ts +++ b/packages/ui-library/src/components/icon-button/index.ts @@ -13,7 +13,26 @@ import { determineLoaderVariant } from '../../utils/determine-loader-variant'; import { getComponentConfigToken } from '../../utils/get-component-config-token'; import { BlrIconRenderFunction } from '../icon/renderFunction'; import { BlrLoaderRenderFunction } from '../loader/renderFunction'; - +import { + BlrBlurEvent, + BlrClickEvent, + BlrFocusEvent, + createBlrBlurEvent, + createBlrClickEvent, + createBlrFocusEvent, +} from '../../globals/events'; + +export type BlrIconButtonEventHandlers = { + blrFocus?: (event: BlrFocusEvent) => void; + blrBlur?: (event: BlrBlurEvent) => void; + blrClick?: (event: BlrClickEvent) => void; +}; + +/** + * @fires blrFocus Button received focus + * @fires blrBlur Button lost focus + * @fires blrClick Button was clicked + */ export class BlrIconButton extends LitElement { static styles = [styleCustom]; @@ -27,36 +46,25 @@ export class BlrIconButton extends LitElement { @property() theme: ThemeType = 'Light'; - // these are not triggered directly but allows us to map it internally and bve typesafe - @property() blrFocus?: () => void; - @property() blrBlur?: () => void; - @property() blrClick?: () => void; - @state() protected focused = false; - protected handleFocus = (event: Event) => { + protected handleFocus = (event: FocusEvent) => { if (!this.disabled) { this.focused = true; - this.dispatchEvent( - new CustomEvent('blrFocus', { bubbles: true, composed: true, detail: { originalEvent: event } }) - ); + this.dispatchEvent(createBlrFocusEvent({ originalEvent: event })); } }; - protected handleBlur = (event: Event) => { + protected handleBlur = (event: FocusEvent) => { if (!this.disabled) { this.focused = false; - this.dispatchEvent( - new CustomEvent('blrBlur', { bubbles: true, composed: true, detail: { originalEvent: event } }) - ); + this.dispatchEvent(createBlrBlurEvent({ originalEvent: event })); } }; - protected handleClick = (event: Event) => { + protected handleClick = (event: MouseEvent | KeyboardEvent) => { if (!this.disabled) { - this.dispatchEvent( - new CustomEvent('blrClick', { bubbles: true, composed: true, detail: { originalEvent: event } }) - ); + this.dispatchEvent(createBlrClickEvent({ originalEvent: event })); } }; @@ -140,4 +148,4 @@ if (!customElements.get(TAG_NAME)) { customElements.define(TAG_NAME, BlrIconButton); } -export type BlrIconButtonType = Omit; +export type BlrIconButtonType = Omit & BlrIconButtonEventHandlers; diff --git a/packages/ui-library/src/components/icon/index.ts b/packages/ui-library/src/components/icon/index.ts index 1ad70d0ea..987fa69d7 100644 --- a/packages/ui-library/src/components/icon/index.ts +++ b/packages/ui-library/src/components/icon/index.ts @@ -9,7 +9,15 @@ import { until } from 'lit-html/directives/until.js'; import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js'; import { TAG_NAME } from './renderFunction'; import { ThemeType } from '../../foundation/_tokens-generated/index.themes'; +import { BlrClickEvent, createBlrClickEvent } from '../../globals/events'; +export type BlrIconEventHandlers = { + blrClick?: (event: BlrClickEvent) => void; +}; + +/** + * @fires blrClick Icon was clicked + */ export class BlrIcon extends LitElement { static styles = [styleCustom]; @@ -20,13 +28,8 @@ export class BlrIcon extends LitElement { @property() theme: ThemeType = 'Light'; @property() classMap?: DirectiveResult; - // these are not triggered directly but allows us to map it internally and bve typesafe - @property() blrClick?: () => void; - - protected handleClick = (event: Event) => { - this.dispatchEvent( - new CustomEvent('blrClick', { bubbles: true, composed: true, detail: { originalEvent: event } }) - ); + protected handleClick = (event: MouseEvent | KeyboardEvent) => { + this.dispatchEvent(createBlrClickEvent({ originalEvent: event })); }; protected render() { @@ -74,4 +77,4 @@ if (!customElements.get(TAG_NAME)) { customElements.define(TAG_NAME, BlrIcon); } -export type BlrIconType = Partial>; +export type BlrIconType = Partial> & BlrIconEventHandlers; diff --git a/packages/ui-library/src/components/select/index.ts b/packages/ui-library/src/components/select/index.ts index ee88e9a8d..df7af26ac 100644 --- a/packages/ui-library/src/components/select/index.ts +++ b/packages/ui-library/src/components/select/index.ts @@ -15,7 +15,15 @@ import { TAG_NAME } from './renderFunction'; import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderFunction'; import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction'; import { BlrFormLabelRenderFunction } from '../form-label/renderFunction'; +import { BlrSelectedValueChangeEvent, createBlrSelectedValueChangeEvent } from '../../globals/events'; +export type BlrSelectEventHandlers = { + blrSelectedValueChange?: (event: BlrSelectedValueChangeEvent) => void; +}; + +/** + * @fires blrSelectedValueChange Selected value changed + */ export class BlrSelect extends LitElement { static styles = [styleCustom]; @@ -41,8 +49,6 @@ export class BlrSelect extends LitElement { @property() theme: ThemeType = 'Light'; - @property() blrChange?: () => void; - @state() protected isFocused = false; protected _optionElements: Element[] | undefined; @@ -63,13 +69,7 @@ export class BlrSelect extends LitElement { } protected handleChange(event: Event) { - this.dispatchEvent( - new CustomEvent('blrChange', { - bubbles: true, - composed: true, - detail: { originalEvent: event }, - }) - ); + this.dispatchEvent(createBlrSelectedValueChangeEvent({ originalEvent: event })); } protected renderIcon(classes: DirectiveResult) { @@ -210,4 +210,4 @@ if (!customElements.get(TAG_NAME)) { customElements.define(TAG_NAME, BlrSelect); } -export type BlrSelectType = Omit; +export type BlrSelectType = Omit & BlrSelectEventHandlers; diff --git a/packages/ui-library/src/components/text-button/index.ts b/packages/ui-library/src/components/text-button/index.ts index 2910ac310..ee9ca74d9 100644 --- a/packages/ui-library/src/components/text-button/index.ts +++ b/packages/ui-library/src/components/text-button/index.ts @@ -19,7 +19,26 @@ import { getComponentConfigToken } from '../../utils/get-component-config-token' import { BlrIconRenderFunction } from '../icon/renderFunction'; import { BlrLoaderRenderFunction } from '../loader/renderFunction'; import { TAG_NAME } from './renderFunction'; - +import { + BlrBlurEvent, + BlrClickEvent, + BlrFocusEvent, + createBlrBlurEvent, + createBlrClickEvent, + createBlrFocusEvent, +} from '../../globals/events'; + +export type BlrTextButtonEventHandlers = { + blrFocus?: (event: BlrFocusEvent) => void; + blrBlur?: (event: BlrBlurEvent) => void; + blrClick?: (event: BlrClickEvent) => void; +}; + +/** + * @fires blrFocus Button received focus + * @fires blrBlur Button lost focus + * @fires blrClick Button was clicked + */ export class BlrTextButton extends LitElement { static styles = [styleCustom]; @@ -34,38 +53,27 @@ export class BlrTextButton extends LitElement { @property() size?: ActionSizesType = 'md'; @property() buttonDisplay?: ButtonDisplayType = 'inline-block'; - // these are not triggered directly but allows us to map it internally and bve typesafe - @property() blrFocus?: () => void; - @property() blrBlur?: () => void; - @property() blrClick?: () => void; - @property() theme: ThemeType = 'Light'; @state() protected focused = false; - protected handleFocus = (event: Event) => { + protected handleFocus = (event: FocusEvent) => { if (!this.disabled) { this.focused = true; - this.dispatchEvent( - new CustomEvent('blrFocus', { bubbles: true, composed: true, detail: { originalEvent: event } }) - ); + this.dispatchEvent(createBlrFocusEvent({ originalEvent: event })); } }; - protected handleBlur = (event: Event) => { + protected handleBlur = (event: FocusEvent) => { if (!this.disabled) { this.focused = false; - this.dispatchEvent( - new CustomEvent('blrBlur', { bubbles: true, composed: true, detail: { originalEvent: event } }) - ); + this.dispatchEvent(createBlrBlurEvent({ originalEvent: event })); } }; - protected handleClick = (event: Event) => { + protected handleClick = (event: MouseEvent | KeyboardEvent) => { if (!this.disabled) { - this.dispatchEvent( - new CustomEvent('blrClick', { bubbles: true, composed: true, detail: { originalEvent: event } }) - ); + this.dispatchEvent(createBlrClickEvent({ originalEvent: event })); } }; @@ -177,4 +185,4 @@ if (!customElements.get(TAG_NAME)) { customElements.define(TAG_NAME, BlrTextButton); } -export type BlrTextButtonType = Omit; +export type BlrTextButtonType = Omit & BlrTextButtonEventHandlers; diff --git a/packages/ui-library/src/components/text-input/index.stories.ts b/packages/ui-library/src/components/text-input/index.stories.ts index b1b6d117a..364e703cf 100644 --- a/packages/ui-library/src/components/text-input/index.stories.ts +++ b/packages/ui-library/src/components/text-input/index.stories.ts @@ -226,10 +226,10 @@ export default { }, }, // Events - blrChange: { - name: 'blrChange', + blrTextValueChange: { + name: 'blrTextValueChange', description: 'Fires when the value changes.', - action: 'blrChange', + action: 'blrTextValueChange', table: { category: 'Events', }, @@ -379,7 +379,7 @@ const argTypesToDisable = [ 'errorIcon', 'arialabel', 'name', - 'blrChange', + 'blrTextValueChange', 'blrSelect', 'blrFocus', 'blrBlur', diff --git a/packages/ui-library/src/components/text-input/index.ts b/packages/ui-library/src/components/text-input/index.ts index 194bda6c5..8d3459ea7 100644 --- a/packages/ui-library/src/components/text-input/index.ts +++ b/packages/ui-library/src/components/text-input/index.ts @@ -14,7 +14,30 @@ import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction'; import { BlrFormLabelRenderFunction } from '../form-label/renderFunction'; import { BlrIconRenderFunction } from '../icon/renderFunction'; import { TAG_NAME } from './renderFunction'; - +import { + BlrBlurEvent, + BlrFocusEvent, + BlrSelectEvent, + BlrTextValueChangeEvent, + createBlrBlurEvent, + createBlrFocusEvent, + createBlrSelectEvent, + createBlrTextValueChangeEvent, +} from '../../globals/events'; + +export type BlrTextInputEventHandlers = { + blrFocus?: (event: BlrFocusEvent) => void; + blrBlur?: (event: BlrBlurEvent) => void; + blrTextValueChange?: (event: BlrTextValueChangeEvent) => void; + blrSelect?: (event: BlrSelectEvent) => void; +}; + +/** + * @fires blrFocus TextInput received focus + * @fires blrBlur TextInput lost focus + * @fires blrTextValueChange TextInput value changed + * @fires blrSelect Text in TextInput got selected + */ export class BlrTextInput extends LitElement { static styles = [styleCustom]; @@ -43,12 +66,6 @@ export class BlrTextInput extends LitElement { @property() name!: string; @property() theme: ThemeType = 'Light'; - // these are not triggered directly but allows us to map it internally and bve typesafe - @property() blrFocus?: () => void; - @property() blrBlur?: () => void; - @property() blrChange?: () => void; - @property() blrSelect?: () => void; - @state() protected currentType: InputTypes = this.type; @state() protected isFocused = false; @@ -56,41 +73,29 @@ export class BlrTextInput extends LitElement { this.currentType = this.currentType === 'password' ? 'text' : 'password'; }; - protected handleFocus = () => { + protected handleFocus = (event: FocusEvent) => { if (!this.disabled) { this.isFocused = true; - this.dispatchEvent( - new CustomEvent('blrFocus', { bubbles: true, composed: true, detail: { originalEvent: event } }) - ); + this.dispatchEvent(createBlrFocusEvent({ originalEvent: event })); } }; - protected handleBlur = () => { + protected handleBlur = (event: FocusEvent) => { if (!this.disabled) { this.isFocused = false; - this.dispatchEvent( - new CustomEvent('blrBlur', { bubbles: true, composed: true, detail: { originalEvent: event } }) - ); + this.dispatchEvent(createBlrBlurEvent({ originalEvent: event })); } }; protected handleChange = (event: Event) => { if (!this.disabled) { - this.dispatchEvent( - new CustomEvent('blrChange', { bubbles: true, composed: true, detail: { originalEvent: event } }) - ); + this.dispatchEvent(createBlrTextValueChangeEvent({ originalEvent: event })); } }; protected handleSelect = (event: Event) => { if (!this.disabled) { - this.dispatchEvent( - new CustomEvent('blrSelect', { - bubbles: true, - composed: true, - detail: { originalEvent: event }, - }) - ); + this.dispatchEvent(createBlrSelectEvent({ originalEvent: event })); } }; @@ -244,4 +249,4 @@ if (!customElements.get(TAG_NAME)) { customElements.define(TAG_NAME, BlrTextInput); } -export type BlrTextInputType = Omit; +export type BlrTextInputType = Omit & BlrTextInputEventHandlers; diff --git a/packages/ui-library/src/components/textarea/index.ts b/packages/ui-library/src/components/textarea/index.ts index 68060e2d5..efe07d3c0 100644 --- a/packages/ui-library/src/components/textarea/index.ts +++ b/packages/ui-library/src/components/textarea/index.ts @@ -11,7 +11,30 @@ import { BlrCounterRenderFunction } from '../counter/renderFunction'; import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderFunction'; import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction'; import { BlrFormLabelRenderFunction } from '../form-label/renderFunction'; +import { + BlrBlurEvent, + BlrFocusEvent, + BlrSelectEvent, + BlrTextValueChangeEvent, + createBlrBlurEvent, + createBlrFocusEvent, + createBlrSelectEvent, + createBlrTextValueChangeEvent, +} from '../../globals/events'; +export type BlrTextareaEventHandlers = { + blrFocus?: (event: BlrFocusEvent) => void; + blrBlur?: (event: BlrBlurEvent) => void; + blrTextValueChange?: (event: BlrTextValueChangeEvent) => void; + blrSelect?: (event: BlrSelectEvent) => void; +}; + +/** + * @fires blrFocus Textarea received focus + * @fires blrBlur Textarea lost focus + * @fires blrTextValueChange Textarea value changed + * @fires blrSelect Text in Textarea got selected + */ export class BlrTextarea extends LitElement { static styles = [styleCustom]; @@ -46,12 +69,6 @@ export class BlrTextarea extends LitElement { @property() name?: string; @property() theme: ThemeType = 'Light'; - // these are not triggered directly but allows us to map it internally and bve typesafe - @property() blrFocus?: () => void; - @property() blrBlur?: () => void; - @property() blrChange?: () => void; - @property() blrSelect?: () => void; - @state() protected count = 0; @query('textarea') protected textareaElement: HTMLTextAreaElement | undefined; @@ -106,37 +123,25 @@ export class BlrTextarea extends LitElement { protected handleChange = (event: Event) => { if (!this.disabled) { - this.dispatchEvent( - new CustomEvent('blrChange', { bubbles: true, composed: true, detail: { originalEvent: event } }) - ); + this.dispatchEvent(createBlrTextValueChangeEvent({ originalEvent: event })); } }; - protected handleFocus = (event: Event) => { + protected handleFocus = (event: FocusEvent) => { if (!this.disabled) { - this.dispatchEvent( - new CustomEvent('blrFocus', { bubbles: true, composed: true, detail: { originalEvent: event } }) - ); + this.dispatchEvent(createBlrFocusEvent({ originalEvent: event })); } }; - protected handleBlur = (event: Event) => { + protected handleBlur = (event: FocusEvent) => { if (!this.disabled) { - this.dispatchEvent( - new CustomEvent('blrBlur', { bubbles: true, composed: true, detail: { originalEvent: event } }) - ); + this.dispatchEvent(createBlrBlurEvent({ originalEvent: event })); } }; protected handleSelect = (event: Event) => { if (!this.disabled) { - this.dispatchEvent( - new CustomEvent('blrSelect', { - bubbles: true, - composed: true, - detail: { originalEvent: event, value: this.textareaElement?.value }, - }) - ); + this.dispatchEvent(createBlrSelectEvent({ originalEvent: event })); } }; @@ -248,4 +253,4 @@ if (!customElements.get(TAG_NAME)) { customElements.define(TAG_NAME, BlrTextarea); } -export type BlrTextareaType = Omit; +export type BlrTextareaType = Omit & BlrTextareaEventHandlers; diff --git a/packages/ui-library/src/globals/events.ts b/packages/ui-library/src/globals/events.ts new file mode 100644 index 000000000..5de65d708 --- /dev/null +++ b/packages/ui-library/src/globals/events.ts @@ -0,0 +1,79 @@ +export type BlrFocusEventDetail = { + originalEvent: FocusEvent; +}; +export type BlrFocusEvent = CustomEvent; +export const BlrFocusEventName = 'blrFocus'; +export function createBlrFocusEvent(detail: BlrFocusEventDetail): BlrFocusEvent { + return new CustomEvent(BlrFocusEventName, { bubbles: true, composed: true, detail }); +} + +export type BlrBlurEventDetail = { + originalEvent: FocusEvent; +}; +export type BlrBlurEvent = CustomEvent; +export const BlrBlurEventName = 'blrBlur'; +export function createBlrBlurEvent(detail: BlrBlurEventDetail): BlrBlurEvent { + return new CustomEvent(BlrBlurEventName, { bubbles: true, composed: true, detail }); +} + +export type BlrClickEventDetail = { + originalEvent: MouseEvent | KeyboardEvent; +}; +export type BlrClickEvent = CustomEvent; +export const BlrClickEventName = 'blrClick'; +export function createBlrClickEvent(detail: BlrClickEventDetail): BlrClickEvent { + return new CustomEvent(BlrClickEventName, { bubbles: true, composed: true, detail }); +} + +export type BlrSelectEventDetail = { + originalEvent: Event; +}; +export type BlrSelectEvent = CustomEvent; +export const BlrSelectEventName = 'blrSelect'; +export function createBlrSelectEvent(detail: BlrSelectEventDetail): BlrSelectEvent { + return new CustomEvent(BlrSelectEventName, { bubbles: true, composed: true, detail }); +} + +/* per-input change events */ + +export type BlrCheckedChangeEventDetail = { + originalEvent: Event; + checkedState: boolean | undefined; +}; +export type BlrCheckedChangeEvent = CustomEvent; +export const BlrCheckedChangeEventName = 'blrCheckedChange'; +export function createBlrCheckedChangeEvent(detail: BlrCheckedChangeEventDetail): BlrCheckedChangeEvent { + return new CustomEvent(BlrCheckedChangeEventName, { bubbles: true, composed: true, detail }); +} + +export type BlrSelectedValueChangeEventDetail = { + originalEvent: Event; +}; +export type BlrSelectedValueChangeEvent = CustomEvent; +export const BlrSelectedValueChangeEventName = 'blrSelectedValueChange'; +export function createBlrSelectedValueChangeEvent( + detail: BlrSelectedValueChangeEventDetail +): BlrSelectedValueChangeEvent { + return new CustomEvent(BlrSelectedValueChangeEventName, { bubbles: true, composed: true, detail }); +} + +export type BlrTextValueChangeEventDetail = { + originalEvent: Event; +}; +export type BlrTextValueChangeEvent = CustomEvent; +export const BlrTextValueChangeEventName = 'blrTextValueChange'; +export function createBlrTextValueChangeEvent(detail: BlrTextValueChangeEventDetail): BlrTextValueChangeEvent { + return new CustomEvent(BlrTextValueChangeEventName, { bubbles: true, composed: true, detail }); +} + +declare global { + interface GlobalEventHandlersEventMap { + [BlrFocusEventName]: BlrFocusEvent; + [BlrBlurEventName]: BlrBlurEvent; + [BlrClickEventName]: BlrClickEvent; + [BlrCheckedChangeEventName]: BlrCheckedChangeEvent; + [BlrSelectedValueChangeEventName]: BlrSelectedValueChangeEvent; + [BlrTextValueChangeEventName]: BlrTextValueChangeEvent; + [BlrSelectEventName]: BlrSelectEvent; + } +}