From b64adaa8680595afbac5b17f1c72a721afd18fe7 Mon Sep 17 00:00:00 2001 From: Stefan Dietz Date: Tue, 19 Mar 2024 18:33:32 +0100 Subject: [PATCH 1/2] Normalize change and input events across all input components Before some components emitted `change` on keyup and `input` did not exist. The KoliBri `change` and `input` events and callbacks now correctly reflect the native DOM behaviour. --- .../@deprecated/input/controller.ts | 22 ++++++-- .../components/input-checkbox/component.tsx | 1 - .../src/components/input-checkbox/readme.md | 2 +- .../src/components/input-color/readme.md | 2 +- .../src/components/input-date/component.tsx | 2 - .../src/components/input-date/readme.md | 2 +- .../src/components/input-email/component.tsx | 9 ++-- .../src/components/input-email/readme.md | 2 +- .../src/components/input-file/component.tsx | 15 +++--- .../src/components/input-file/readme.md | 2 +- .../src/components/input-number/component.tsx | 2 - .../src/components/input-number/readme.md | 2 +- .../components/input-password/component.tsx | 9 ++-- .../src/components/input-password/readme.md | 2 +- .../components/input-radio-group/readme.md | 36 ++++++------- .../src/components/input-radio/readme.md | 42 +++++++-------- .../src/components/input-range/component.tsx | 2 - .../src/components/input-range/readme.md | 50 +++++++++--------- .../src/components/input-text/component.tsx | 31 +++++------ .../src/components/input-text/readme.md | 2 +- .../src/components/select/component.tsx | 6 +-- .../src/components/select/readme.md | 52 +++++++++---------- .../src/components/textarea/component.tsx | 3 +- .../src/components/textarea/readme.md | 50 +++++++++--------- packages/components/src/types/input/types.ts | 6 ++- packages/components/src/utils/events.ts | 2 +- 26 files changed, 183 insertions(+), 173 deletions(-) diff --git a/packages/components/src/components/@deprecated/input/controller.ts b/packages/components/src/components/@deprecated/input/controller.ts index 0002483cf3..0ffe054c8c 100644 --- a/packages/components/src/components/@deprecated/input/controller.ts +++ b/packages/components/src/components/@deprecated/input/controller.ts @@ -151,9 +151,6 @@ export class InputController extends ControlledInputController implements Watche // Event handling tryToDispatchKoliBriEvent('change', this.host, value); - // Static form handling - this.setFormAssociatedValue(value); - // Callback if (typeof this.component._on?.onChange === 'function') { /** @@ -196,6 +193,24 @@ export class InputController extends ControlledInputController implements Watche } } + protected onInput(event: Event, shouldSetFormAssociatedValue = true): void { + const value = (event.target as HTMLInputElement).value; + + // Event handling + stopPropagation(event); + tryToDispatchKoliBriEvent('input', this.host); + + // Static form handling + if (shouldSetFormAssociatedValue) { + this.setFormAssociatedValue(value); + } + + // Callback + if (typeof this.component._on?.onInput === 'function') { + this.component._on.onInput(event); + } + } + public setValue(event: Event, value: string | number | boolean): void { this.setFormAssociatedValue(value as string); if (typeof this.component._on?.onChange === 'function') { @@ -220,5 +235,6 @@ export class InputController extends ControlledInputController implements Watche onChange: this.onChange.bind(this), onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), + onInput: this.onInput.bind(this), }; } diff --git a/packages/components/src/components/input-checkbox/component.tsx b/packages/components/src/components/input-checkbox/component.tsx index 6222235726..0af55028f7 100644 --- a/packages/components/src/components/input-checkbox/component.tsx +++ b/packages/components/src/components/input-checkbox/component.tsx @@ -50,7 +50,6 @@ export class KolInputCheckbox implements API { indeterminate: this.state._indeterminate, }} data-role={this.state._variant === 'button' ? 'button' : undefined} - onKeyPress={this.state._variant === 'button' ? this.onChange : undefined} _alert={this.state._alert} _disabled={this.state._disabled} _error={this.state._error} diff --git a/packages/components/src/components/input-checkbox/readme.md b/packages/components/src/components/input-checkbox/readme.md index ba965a4d6c..264bec9851 100644 --- a/packages/components/src/components/input-checkbox/readme.md +++ b/packages/components/src/components/input-checkbox/readme.md @@ -74,7 +74,7 @@ Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenread | `_indeterminate` | `_indeterminate` | Puts the checkbox in the indeterminate state, does not change the value of \_checked. | `boolean \| undefined` | `undefined` | | `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \| undefined` | `undefined` | | `_name` | `_name` | Defines the technical name of an input field. | `string \| undefined` | `undefined` | -| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` | +| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined` | `undefined` | | `_required` | `_required` | Makes the input element required. | `boolean \| undefined` | `false` | | `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \| undefined` | `undefined` | | `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'` | diff --git a/packages/components/src/components/input-color/readme.md b/packages/components/src/components/input-color/readme.md index 214f993d0a..2a288d61cb 100644 --- a/packages/components/src/components/input-color/readme.md +++ b/packages/components/src/components/input-color/readme.md @@ -62,7 +62,7 @@ Für eine vollständige Barrierefreiheit prüfen Sie die Verwendung einer vorgef | `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \| undefined` | `undefined` | | `_list` | `_list` | **[DEPRECATED]** Use \_suggestions instead.

Deprecated: Gibt die Liste der Vorschlagswörter an. | `W3CInputValue[] \| string \| undefined` | `undefined` | | `_name` | `_name` | Defines the technical name of an input field. | `string \| undefined` | `undefined` | -| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` | +| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined` | `undefined` | | `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (\_hide-label only). | `string \| undefined \| { _label: string; } & { _tabIndex?: number \| undefined; _value?: Stringified; _accessKey?: string \| undefined; _iconAlign?: AlignPropType \| undefined; _iconOnly?: boolean \| undefined; _icon?: IconsPropType \| undefined; _role?: AlternativeButtonLinkRolePropType \| undefined; _ariaControls?: string \| undefined; _ariaCurrent?: AriaCurrentPropType \| undefined; _ariaExpanded?: boolean \| undefined; _ariaLabel?: string \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType \| undefined; _type?: ButtonTypePropType \| undefined; _variant?: ButtonVariantPropType \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _name?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; }` | `undefined` | | `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \| string \| undefined` | `undefined` | | `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \| undefined` | `undefined` | diff --git a/packages/components/src/components/input-date/component.tsx b/packages/components/src/components/input-date/component.tsx index f428c3b71f..d7fdedaf28 100644 --- a/packages/components/src/components/input-date/component.tsx +++ b/packages/components/src/components/input-date/component.tsx @@ -46,8 +46,6 @@ export class KolInputDate implements ComponentApi { form: this.host, ref: this.ref, }); - } else { - this.controller.onFacade.onChange(event); } }; diff --git a/packages/components/src/components/input-date/readme.md b/packages/components/src/components/input-date/readme.md index cd51d079fd..b3a6dc9030 100644 --- a/packages/components/src/components/input-date/readme.md +++ b/packages/components/src/components/input-date/readme.md @@ -94,7 +94,7 @@ Das Eingabefeld für Zeitangaben gibt es in unterschiedlichen Ausprägungen (Dat | `_max` | `_max` | Defines the largest possible input value. | `Date \| `${number}-${number}-${number}T${number}:${number}:${number}`\|`${number}-${number}-${number}T${number}:${number}` \| `${number}-${number}-${number}`\|`${number}-${number}`\|`${number}-W${number}`\|`${number}:${number}:${number}` \| `${number}:${number}` \| undefined` | `undefined` | | `_min` | `_min` | Defines the smallest possible input value. | `Date \| `${number}-${number}-${number}T${number}:${number}:${number}`\|`${number}-${number}-${number}T${number}:${number}` \| `${number}-${number}-${number}`\|`${number}-${number}`\|`${number}-W${number}`\|`${number}:${number}:${number}` \| `${number}:${number}` \| undefined` | `undefined` | | `_name` | `_name` | Defines the technical name of an input field. | `string \| undefined` | `undefined` | -| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` | +| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined` | `undefined` | | `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \| undefined` | `false` | | `_required` | `_required` | Makes the input element required. | `boolean \| undefined` | `false` | | `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (\_hide-label only). | `string \| undefined \| { _label: string; } & { _tabIndex?: number \| undefined; _value?: Stringified; _accessKey?: string \| undefined; _iconAlign?: AlignPropType \| undefined; _iconOnly?: boolean \| undefined; _icon?: IconsPropType \| undefined; _role?: AlternativeButtonLinkRolePropType \| undefined; _ariaControls?: string \| undefined; _ariaCurrent?: AriaCurrentPropType \| undefined; _ariaExpanded?: boolean \| undefined; _ariaLabel?: string \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType \| undefined; _type?: ButtonTypePropType \| undefined; _variant?: ButtonVariantPropType \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _name?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; }` | `undefined` | diff --git a/packages/components/src/components/input-email/component.tsx b/packages/components/src/components/input-email/component.tsx index ceb234939b..fb41201209 100644 --- a/packages/components/src/components/input-email/component.tsx +++ b/packages/components/src/components/input-email/component.tsx @@ -40,17 +40,19 @@ export class KolInputEmail implements API { }; private readonly onKeyDown = (event: KeyboardEvent) => { - setState(this, '_currentLength', (event.target as HTMLInputElement).value.length); if (event.code === 'Enter' || event.code === 'NumpadEnter') { propagateSubmitEventToForm({ form: this.host, ref: this.ref, }); - } else { - this.controller.onFacade.onChange(event); } }; + private readonly onInput = (event: InputEvent) => { + setState(this, '_currentLength', (event.target as HTMLInputElement).value.length); + this.controller.onFacade.onInput(event); + }; + public render(): JSX.Element { const { ariaDescribedBy } = getRenderStates(this.state); const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0; @@ -114,6 +116,7 @@ export class KolInputEmail implements API { value={this.state._value as string} {...this.controller.onFacade} onKeyDown={this.onKeyDown} + onInput={this.onInput} /> diff --git a/packages/components/src/components/input-email/readme.md b/packages/components/src/components/input-email/readme.md index 107e2ccdf6..a86b68d07d 100644 --- a/packages/components/src/components/input-email/readme.md +++ b/packages/components/src/components/input-email/readme.md @@ -63,7 +63,7 @@ Um eine fehlgeschlagene Validierung anzuzeigen, setzen Sie das Attrbut **`_error | `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \| undefined` | `undefined` | | `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \| undefined` | `false` | | `_name` | `_name` | Defines the technical name of an input field. | `string \| undefined` | `undefined` | -| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` | +| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined` | `undefined` | | `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \| undefined` | `undefined` | | `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \| undefined` | `undefined` | | `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \| undefined` | `false` | diff --git a/packages/components/src/components/input-file/component.tsx b/packages/components/src/components/input-file/component.tsx index aab284f609..0a59f7d281 100644 --- a/packages/components/src/components/input-file/component.tsx +++ b/packages/components/src/components/input-file/component.tsx @@ -10,7 +10,6 @@ import { NamePropType } from '../../types/props/name'; import { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector'; import { TooltipAlignPropType } from '../../types/props/tooltip-align'; import { nonce } from '../../utils/dev.utils'; -import { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events'; import { propagateFocus, showExpertSlot } from '../../utils/reuse'; import { Props as ButtonProps } from '../button/types'; import { getRenderStates } from '../input/controller'; @@ -84,6 +83,7 @@ export class KolInputFile implements API { value={this.state._value as string} {...this.controller.onFacade} onChange={this.onChange} + onInput={this.onInput} /> @@ -336,17 +336,14 @@ export class KolInputFile implements API { if (this.ref instanceof HTMLInputElement && this.ref.type === 'file') { const value = this.ref.files; - // Event handling - stopPropagation(event); - tryToDispatchKoliBriEvent('change', this.host, value); + this.controller.onFacade.onChange(event); // Static form handling this.controller.setFormAssociatedValue(value); - - // Callback - if (typeof this.state._on?.onChange === 'function') { - this.state._on.onChange(event, value); - } } }; + + private onInput = (event: Event): void => { + this.controller.onFacade.onInput(event, false); + }; } diff --git a/packages/components/src/components/input-file/readme.md b/packages/components/src/components/input-file/readme.md index b10c181721..fd268c7769 100644 --- a/packages/components/src/components/input-file/readme.md +++ b/packages/components/src/components/input-file/readme.md @@ -57,7 +57,7 @@ Mögliche Werte und weitere Informationen erhalten Sie im [] \| string` | `undefined` | +| `_name` | `_name` | Defines the technical name of an input field. | `string \| undefined` | `undefined` | +| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined` | `undefined` | +| `_orientation` | `_orientation` | Defines whether the orientation of the component is horizontal or vertical. | `"horizontal" \| "vertical" \| undefined` | `'vertical'` | +| `_required` | `_required` | Macht das Eingabeelement zu einem Pflichtfeld. | `boolean \| undefined` | `false` | +| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \| undefined` | `undefined` | +| `_touched` | `_touched` | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde. | `boolean \| undefined` | `false` | +| `_value` | `_value` | Defines the value of the input. | `number \| string \| undefined` | `undefined` | ## Dependencies diff --git a/packages/components/src/components/input-radio/readme.md b/packages/components/src/components/input-radio/readme.md index 892dac2a44..d83756f871 100644 --- a/packages/components/src/components/input-radio/readme.md +++ b/packages/components/src/components/input-radio/readme.md @@ -76,27 +76,27 @@ Dem EventHandler werden zwei Parameter übergeben, das ursprüngliche Event und ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- | ------------ | -| `_accessKey` | `_access-key` | Defines which key combination can be used to trigger or focus the interactive element of the component. | `string \| undefined` | `undefined` | -| `_alert` | `_alert` | Defines whether the screen-readers should read out the notification. | `boolean \| undefined` | `true` | -| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \| undefined` | `false` | -| `_error` | `_error` | Defines the error message text. | `string \| undefined` | `undefined` | -| `_hideError` | `_hide-error` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \| undefined` | `false` | -| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \| undefined` | `false` | -| `_hint` | `_hint` | Defines the hint text. | `string \| undefined` | `''` | -| `_id` | `_id` | Defines the internal ID of the primary component element. | `string \| undefined` | `undefined` | -| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \| undefined` | `undefined` | -| `_list` | `_list` | **[DEPRECATED]** Use \_options.

Deprecated: Gibt die Liste der Optionen für das Eingabefeld an. | `Option[] \| string \| undefined` | `undefined` | -| `_name` | `_name` | Defines the technical name of an input field. | `string \| undefined` | `undefined` | -| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` | -| `_options` | `_options` | Options the user can choose from. | `Option[] \| string \| undefined` | `undefined` | -| `_orientation` | `_orientation` | Defines whether the orientation of the component is horizontal or vertical. | `"horizontal" \| "vertical" \| undefined` | `'vertical'` | -| `_required` | `_required` | Makes the input element required. | `boolean \| undefined` | `false` | -| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \| undefined` | `undefined` | -| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'` | -| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \| undefined` | `false` | -| `_value` | `_value` | Defines the value of the input. | `number \| string \| undefined` | `undefined` | +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | ------------ | +| `_accessKey` | `_access-key` | Defines which key combination can be used to trigger or focus the interactive element of the component. | `string \| undefined` | `undefined` | +| `_alert` | `_alert` | Defines whether the screen-readers should read out the notification. | `boolean \| undefined` | `true` | +| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \| undefined` | `false` | +| `_error` | `_error` | Defines the error message text. | `string \| undefined` | `undefined` | +| `_hideError` | `_hide-error` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \| undefined` | `false` | +| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \| undefined` | `false` | +| `_hint` | `_hint` | Defines the hint text. | `string \| undefined` | `''` | +| `_id` | `_id` | Defines the internal ID of the primary component element. | `string \| undefined` | `undefined` | +| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \| undefined` | `undefined` | +| `_list` | `_list` | **[DEPRECATED]** Use \_options.

Deprecated: Gibt die Liste der Optionen für das Eingabefeld an. | `Option[] \| string \| undefined` | `undefined` | +| `_name` | `_name` | Defines the technical name of an input field. | `string \| undefined` | `undefined` | +| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined` | `undefined` | +| `_options` | `_options` | Options the user can choose from. | `Option[] \| string \| undefined` | `undefined` | +| `_orientation` | `_orientation` | Defines whether the orientation of the component is horizontal or vertical. | `"horizontal" \| "vertical" \| undefined` | `'vertical'` | +| `_required` | `_required` | Makes the input element required. | `boolean \| undefined` | `false` | +| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \| undefined` | `undefined` | +| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'` | +| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \| undefined` | `false` | +| `_value` | `_value` | Defines the value of the input. | `number \| string \| undefined` | `undefined` | ## Slots diff --git a/packages/components/src/components/input-range/component.tsx b/packages/components/src/components/input-range/component.tsx index 84df05f7d5..e3d6ce1a61 100644 --- a/packages/components/src/components/input-range/component.tsx +++ b/packages/components/src/components/input-range/component.tsx @@ -65,8 +65,6 @@ export class KolInputRange implements API { form: this.host, ref: this.refInputRange, }); - } else { - this.onChange(event); } }; diff --git a/packages/components/src/components/input-range/readme.md b/packages/components/src/components/input-range/readme.md index 1585ca986f..4d1bcf7131 100644 --- a/packages/components/src/components/input-range/readme.md +++ b/packages/components/src/components/input-range/readme.md @@ -50,31 +50,31 @@ Der Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Ve ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | ----------- | -| `_accessKey` | `_access-key` | Defines which key combination can be used to trigger or focus the interactive element of the component. | `string \| undefined` | `undefined` | -| `_alert` | `_alert` | Defines whether the screen-readers should read out the notification. | `boolean \| undefined` | `true` | -| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `"off" \| "on" \| undefined` | `undefined` | -| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \| undefined` | `false` | -| `_error` | `_error` | Defines the error message text. | `string \| undefined` | `undefined` | -| `_hideError` | `_hide-error` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \| undefined` | `false` | -| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \| undefined` | `false` | -| `_hint` | `_hint` | Defines the hint text. | `string \| undefined` | `''` | -| `_icon` | `_icon` | **[DEPRECATED]** Use \_icons.

| `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }` | `undefined` | -| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }` | `undefined` | -| `_id` | `_id` | Defines the internal ID of the primary component element. | `string \| undefined` | `undefined` | -| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \| undefined` | `undefined` | -| `_list` | `_list` | **[DEPRECATED]** Use \_suggestions.

Deprecated: Gibt die Liste der Vorschlagswörter an. | `Option[] \| string \| undefined` | `undefined` | -| `_max` | `_max` | Defines the largest possible input value. | `number \| undefined` | `undefined` | -| `_min` | `_min` | Defines the smallest possible input value. | `number \| undefined` | `undefined` | -| `_name` | `_name` | Defines the technical name of an input field. | `string \| undefined` | `undefined` | -| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` | -| `_step` | `_step` | Defines the step size for value changes. | `number \| undefined` | `undefined` | -| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \| string \| undefined` | `undefined` | -| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \| undefined` | `undefined` | -| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'` | -| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \| undefined` | `false` | -| `_value` | `_value` | Defines the value of the input. | `number \| undefined` | `undefined` | +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | ----------- | +| `_accessKey` | `_access-key` | Defines which key combination can be used to trigger or focus the interactive element of the component. | `string \| undefined` | `undefined` | +| `_alert` | `_alert` | Defines whether the screen-readers should read out the notification. | `boolean \| undefined` | `true` | +| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `"off" \| "on" \| undefined` | `undefined` | +| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \| undefined` | `false` | +| `_error` | `_error` | Defines the error message text. | `string \| undefined` | `undefined` | +| `_hideError` | `_hide-error` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \| undefined` | `false` | +| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \| undefined` | `false` | +| `_hint` | `_hint` | Defines the hint text. | `string \| undefined` | `''` | +| `_icon` | `_icon` | **[DEPRECATED]** Use \_icons.

| `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }` | `undefined` | +| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }` | `undefined` | +| `_id` | `_id` | Defines the internal ID of the primary component element. | `string \| undefined` | `undefined` | +| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \| undefined` | `undefined` | +| `_list` | `_list` | **[DEPRECATED]** Use \_suggestions.

Deprecated: Gibt die Liste der Vorschlagswörter an. | `Option[] \| string \| undefined` | `undefined` | +| `_max` | `_max` | Defines the largest possible input value. | `number \| undefined` | `undefined` | +| `_min` | `_min` | Defines the smallest possible input value. | `number \| undefined` | `undefined` | +| `_name` | `_name` | Defines the technical name of an input field. | `string \| undefined` | `undefined` | +| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined` | `undefined` | +| `_step` | `_step` | Defines the step size for value changes. | `number \| undefined` | `undefined` | +| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \| string \| undefined` | `undefined` | +| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \| undefined` | `undefined` | +| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'` | +| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \| undefined` | `false` | +| `_value` | `_value` | Defines the value of the input. | `number \| undefined` | `undefined` | ## Slots diff --git a/packages/components/src/components/input-text/component.tsx b/packages/components/src/components/input-text/component.tsx index a439c93168..79caa3c2db 100644 --- a/packages/components/src/components/input-text/component.tsx +++ b/packages/components/src/components/input-text/component.tsx @@ -42,26 +42,26 @@ export class KolInputText implements API { private readonly catchRef = (ref?: HTMLInputElement) => { this.ref = ref; propagateFocus(this.host, this.ref); - this.disconnectedCallback(); - this.ref?.addEventListener('search', this.onChange); }; - private readonly onKeyDown = (event: KeyboardEvent) => { + private readonly onChange = (event: Event) => { + if (this.oldValue !== this.ref?.value) { + this.oldValue = this.ref?.value; + this.controller.onFacade.onChange(event); + } + }; + + private readonly onInput = (event: InputEvent) => { setState(this, '_currentLength', (event.target as HTMLInputElement).value.length); + this.controller.onFacade.onInput(event); + }; + + private readonly onKeyDown = (event: KeyboardEvent) => { if (event.code === 'Enter' || event.code === 'NumpadEnter') { propagateSubmitEventToForm({ form: this.host, ref: this.ref, }); - } else { - this.onChange(event); - } - }; - - private readonly onChange = (event: Event) => { - if (this.oldValue !== this.ref?.value) { - this.oldValue = this.ref?.value; - this.controller.onFacade.onChange(event); } }; @@ -128,7 +128,8 @@ export class KolInputText implements API { type={this.state._type} value={this.state._value as string} {...this.controller.onFacade} - // onInput={this.controller.onFacade.onChange} + onChange={this.onChange} + onInput={this.onInput} onKeyDown={this.onKeyDown} /> @@ -472,8 +473,4 @@ export class KolInputText implements API { this.state._hasValue = !!this.state._value; this.controller.addValueChangeListener((v) => (this.state._hasValue = !!v)); } - - public disconnectedCallback(): void { - this.ref?.removeEventListener('search', this.onChange); - } } diff --git a/packages/components/src/components/input-text/readme.md b/packages/components/src/components/input-text/readme.md index 2194b28d21..9770cbd862 100644 --- a/packages/components/src/components/input-text/readme.md +++ b/packages/components/src/components/input-text/readme.md @@ -73,7 +73,7 @@ Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe, | `_list` | `_list` | **[DEPRECATED]** Use \_suggestions.

Deprecated: Gibt die Liste der Vorschlagswörter an. | `string \| string[] \| undefined` | `undefined` | | `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \| undefined` | `undefined` | | `_name` | `_name` | Defines the technical name of an input field. | `string \| undefined` | `undefined` | -| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` | +| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined` | `undefined` | | `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \| undefined` | `undefined` | | `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \| undefined` | `undefined` | | `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \| undefined` | `false` | diff --git a/packages/components/src/components/select/component.tsx b/packages/components/src/components/select/component.tsx index b93856f412..8010410051 100644 --- a/packages/components/src/components/select/component.tsx +++ b/packages/components/src/components/select/component.tsx @@ -113,11 +113,7 @@ export class KolSelect implements API { style={{ height: this.state._height, }} - {...{ - onClick: this.controller.onFacade.onClick, - onBlur: this.controller.onFacade.onBlur, - onFocus: this.controller.onFacade.onFocus, - }} + {...this.controller.onFacade} onChange={this.onChange} > {this.state._options.map((option, index) => { diff --git a/packages/components/src/components/select/readme.md b/packages/components/src/components/select/readme.md index 83a1548e79..b4bd9ae646 100644 --- a/packages/components/src/components/select/readme.md +++ b/packages/components/src/components/select/readme.md @@ -89,32 +89,32 @@ import { xxx..., xxx..., FormatHandler, } from '@leanup/form'; ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | ----------- | -| `_accessKey` | `_access-key` | Defines which key combination can be used to trigger or focus the interactive element of the component. | `string \| undefined` | `undefined` | -| `_alert` | `_alert` | Defines whether the screen-readers should read out the notification. | `boolean \| undefined` | `true` | -| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \| undefined` | `false` | -| `_error` | `_error` | Defines the error message text. | `string \| undefined` | `undefined` | -| `_height` | `_height` | **[DEPRECATED]** Use \_rows instead.

Deprecated: Defines an individual height. | `string \| undefined` | `undefined` | -| `_hideError` | `_hide-error` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \| undefined` | `false` | -| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \| undefined` | `false` | -| `_hint` | `_hint` | Defines the hint text. | `string \| undefined` | `''` | -| `_icon` | `_icon` | **[DEPRECATED]** Use \_icons.

| `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }` | `undefined` | -| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }` | `undefined` | -| `_id` | `_id` | Defines the internal ID of the primary component element. | `string \| undefined` | `undefined` | -| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \| undefined` | `undefined` | -| `_list` | `_list` | **[DEPRECATED]** use \_options

Deprecated: Options the user can choose from, also supporting Optgroup. | `SelectOption[] \| string \| undefined` | `undefined` | -| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \| undefined` | `false` | -| `_name` | `_name` | Defines the technical name of an input field. | `string \| undefined` | `undefined` | -| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` | -| `_options` | `_options` | Options the user can choose from, also supporting Optgroup. | `(Option \| Optgroup)[] \| string \| undefined` | `undefined` | -| `_required` | `_required` | Makes the input element required. | `boolean \| undefined` | `false` | -| `_rows` | `_rows` | Defines how many rows of options should be visible at the same time. | `number \| undefined` | `undefined` | -| `_size` | `_size` | Wechselt das Eingabeelement in den Auswahlfeld modus und setzt die Höhe des Feldes. | `number \| undefined` | `undefined` | -| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \| undefined` | `undefined` | -| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'` | -| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \| undefined` | `false` | -| `_value` | `_value` | Defines the value of the input. | `W3CInputValue[] \| string \| undefined` | `undefined` | +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | ----------- | +| `_accessKey` | `_access-key` | Defines which key combination can be used to trigger or focus the interactive element of the component. | `string \| undefined` | `undefined` | +| `_alert` | `_alert` | Defines whether the screen-readers should read out the notification. | `boolean \| undefined` | `true` | +| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \| undefined` | `false` | +| `_error` | `_error` | Defines the error message text. | `string \| undefined` | `undefined` | +| `_height` | `_height` | **[DEPRECATED]** Use \_rows instead.

Deprecated: Defines an individual height. | `string \| undefined` | `undefined` | +| `_hideError` | `_hide-error` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \| undefined` | `false` | +| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \| undefined` | `false` | +| `_hint` | `_hint` | Defines the hint text. | `string \| undefined` | `''` | +| `_icon` | `_icon` | **[DEPRECATED]** Use \_icons.

| `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }` | `undefined` | +| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }` | `undefined` | +| `_id` | `_id` | Defines the internal ID of the primary component element. | `string \| undefined` | `undefined` | +| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \| undefined` | `undefined` | +| `_list` | `_list` | **[DEPRECATED]** use \_options

Deprecated: Options the user can choose from, also supporting Optgroup. | `SelectOption[] \| string \| undefined` | `undefined` | +| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \| undefined` | `false` | +| `_name` | `_name` | Defines the technical name of an input field. | `string \| undefined` | `undefined` | +| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined` | `undefined` | +| `_options` | `_options` | Options the user can choose from, also supporting Optgroup. | `(Option \| Optgroup)[] \| string \| undefined` | `undefined` | +| `_required` | `_required` | Makes the input element required. | `boolean \| undefined` | `false` | +| `_rows` | `_rows` | Defines how many rows of options should be visible at the same time. | `number \| undefined` | `undefined` | +| `_size` | `_size` | Wechselt das Eingabeelement in den Auswahlfeld modus und setzt die Höhe des Feldes. | `number \| undefined` | `undefined` | +| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \| undefined` | `undefined` | +| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'` | +| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \| undefined` | `false` | +| `_value` | `_value` | Defines the value of the input. | `W3CInputValue[] \| string \| undefined` | `undefined` | ## Slots diff --git a/packages/components/src/components/textarea/component.tsx b/packages/components/src/components/textarea/component.tsx index fd35c93033..8d1ca83fde 100644 --- a/packages/components/src/components/textarea/component.tsx +++ b/packages/components/src/components/textarea/component.tsx @@ -386,12 +386,13 @@ export class KolTextarea implements API { this.controller.addValueChangeListener((v) => (this.state._hasValue = !!v)); } - private readonly onInput = () => { + private readonly onInput = (event: InputEvent) => { if (this.ref instanceof HTMLTextAreaElement) { setState(this, '_currentLength', this.ref.value.length); if (this.state._adjustHeight) { this._rows = increaseTextareaHeight(this.ref); } + this.controller.onFacade.onInput(event); } }; } diff --git a/packages/components/src/components/textarea/readme.md b/packages/components/src/components/textarea/readme.md index ab48b51616..122e241153 100644 --- a/packages/components/src/components/textarea/readme.md +++ b/packages/components/src/components/textarea/readme.md @@ -52,31 +52,31 @@ Mit Hilfe des Attributs **`_rows`** kann die Höhe der Textarea in Zeilen bestim ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- | ------------ | -| `_accessKey` | `_access-key` | Defines which key combination can be used to trigger or focus the interactive element of the component. | `string \| undefined` | `undefined` | -| `_adjustHeight` | `_adjust-height` | Adjusts the height of the element to its content. | `boolean \| undefined` | `false` | -| `_alert` | `_alert` | Defines whether the screen-readers should read out the notification. | `boolean \| undefined` | `true` | -| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \| undefined` | `false` | -| `_error` | `_error` | Defines the error message text. | `string \| undefined` | `undefined` | -| `_hasCounter` | `_has-counter` | Shows the character count on the lower border of the input. | `boolean \| undefined` | `false` | -| `_hideError` | `_hide-error` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \| undefined` | `false` | -| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \| undefined` | `false` | -| `_hint` | `_hint` | Defines the hint text. | `string \| undefined` | `''` | -| `_id` | `_id` | Defines the internal ID of the primary component element. | `string \| undefined` | `undefined` | -| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \| undefined` | `undefined` | -| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \| undefined` | `undefined` | -| `_name` | `_name` | Defines the technical name of an input field. | `string \| undefined` | `undefined` | -| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` | -| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \| undefined` | `undefined` | -| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \| undefined` | `false` | -| `_required` | `_required` | Makes the input element required. | `boolean \| undefined` | `false` | -| `_resize` | `_resize` | Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize) | `"both" \| "horizontal" \| "none" \| "vertical" \| undefined` | `'vertical'` | -| `_rows` | `_rows` | Defines how many rows of text should be visible at the same time. | `number \| undefined` | `undefined` | -| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \| undefined` | `undefined` | -| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'` | -| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \| undefined` | `false` | -| `_value` | `_value` | Defines the value of the input. | `string \| undefined` | `undefined` | +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | ------------ | +| `_accessKey` | `_access-key` | Defines which key combination can be used to trigger or focus the interactive element of the component. | `string \| undefined` | `undefined` | +| `_adjustHeight` | `_adjust-height` | Adjusts the height of the element to its content. | `boolean \| undefined` | `false` | +| `_alert` | `_alert` | Defines whether the screen-readers should read out the notification. | `boolean \| undefined` | `true` | +| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \| undefined` | `false` | +| `_error` | `_error` | Defines the error message text. | `string \| undefined` | `undefined` | +| `_hasCounter` | `_has-counter` | Shows the character count on the lower border of the input. | `boolean \| undefined` | `false` | +| `_hideError` | `_hide-error` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \| undefined` | `false` | +| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \| undefined` | `false` | +| `_hint` | `_hint` | Defines the hint text. | `string \| undefined` | `''` | +| `_id` | `_id` | Defines the internal ID of the primary component element. | `string \| undefined` | `undefined` | +| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \| undefined` | `undefined` | +| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \| undefined` | `undefined` | +| `_name` | `_name` | Defines the technical name of an input field. | `string \| undefined` | `undefined` | +| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined` | `undefined` | +| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \| undefined` | `undefined` | +| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \| undefined` | `false` | +| `_required` | `_required` | Makes the input element required. | `boolean \| undefined` | `false` | +| `_resize` | `_resize` | Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize) | `"both" \| "horizontal" \| "none" \| "vertical" \| undefined` | `'vertical'` | +| `_rows` | `_rows` | Defines how many rows of text should be visible at the same time. | `number \| undefined` | `undefined` | +| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \| undefined` | `undefined` | +| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'` | +| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \| undefined` | `false` | +| `_value` | `_value` | Defines the value of the input. | `string \| undefined` | `undefined` | ## Slots diff --git a/packages/components/src/types/input/types.ts b/packages/components/src/types/input/types.ts index 1c0fffc875..e004792114 100644 --- a/packages/components/src/types/input/types.ts +++ b/packages/components/src/types/input/types.ts @@ -19,6 +19,10 @@ type InputTypeOnFocus = { [Events.onFocus]?: EventCallback; }; +type InputTypeOnInput = { + [Events.onInput]?: EventCallback; +}; + // https://html.spec.whatwg.org/multipage/form-elements.html#the-option-element export type Option = { disabled?: boolean; @@ -35,4 +39,4 @@ export type Optgroup = { export type SelectOption = Option | Optgroup; -export type InputTypeOnDefault = InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus; +export type InputTypeOnDefault = InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput; diff --git a/packages/components/src/utils/events.ts b/packages/components/src/utils/events.ts index bfd63c867a..299c376ded 100644 --- a/packages/components/src/utils/events.ts +++ b/packages/components/src/utils/events.ts @@ -1,5 +1,5 @@ // TODO: Should be synchronized with enums/events.ts -type KoliBriEventType = 'blur' | 'change' | 'click' | 'focus' | 'toggle'; +type KoliBriEventType = 'blur' | 'change' | 'click' | 'focus' | 'toggle' | 'input'; export function stopPropagation(event: Event): void { event.stopImmediatePropagation(); From ddf1a040d1f8d7675803d244c8d1be1a78dd46b3 Mon Sep 17 00:00:00 2001 From: Stefan Dietz Date: Fri, 22 Mar 2024 12:01:03 +0100 Subject: [PATCH 2/2] Order KoliBriEventType properties --- packages/components/src/utils/events.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/utils/events.ts b/packages/components/src/utils/events.ts index 299c376ded..853a707e83 100644 --- a/packages/components/src/utils/events.ts +++ b/packages/components/src/utils/events.ts @@ -1,5 +1,5 @@ // TODO: Should be synchronized with enums/events.ts -type KoliBriEventType = 'blur' | 'change' | 'click' | 'focus' | 'toggle' | 'input'; +type KoliBriEventType = 'blur' | 'change' | 'click' | 'focus' | 'input' | 'toggle'; export function stopPropagation(event: Event): void { event.stopImmediatePropagation();