Skip to content

feat(core)- Added native change event to input components. #2355

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
1307-Dev wants to merge 11 commits into
base: main
Choose a base branch
from
Open

feat(core)- Added native change event to input components. #2355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a639837
Added event and testst
1307-Dev Jan 22, 2026
bb2a82d
Removed lint errors
1307-Dev Jan 22, 2026
d381a11
Fixed lint errors and added jsdocs wherever necessary
1307-Dev Jan 22, 2026
5e478da
Create few-penguins-do.md
nuke-ellington Jan 26, 2026
61e4b1b
Corrected formatting errors and requested changes
1307-Dev Jan 27, 2026
ec14f1b
Merge branch 'main' into ix-2551/change
1307-Dev Jan 27, 2026
54cb042
Merge branch 'ix-2551/change' of https://github.com/1307-Dev/ix into …
1307-Dev Jan 27, 2026
4fb89ce
Added fix for generated ts files
1307-Dev Jan 27, 2026
1b64e80
Merge branch 'main' into ix-2551/change
1307-Dev Jan 27, 2026
8438921
Added since tags and updated components
1307-Dev Jan 28, 2026
883c7e7
Changed tag syntax for documentation (since v4.40 to since 4.4.0)
1307-Dev Feb 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions .changeset/few-penguins-do.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
"@siemens/ix-angular": patch
"@siemens/ix": patch
"@siemens/ix-react": patch
"@siemens/ix-vue": patch
---

Add change event to **ix-input**, **ix-date-input** and **ix-time-input**.

Fixes #1811
35 changes: 30 additions & 5 deletions packages/angular/src/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -637,13 +637,14 @@ The event payload contains information about the selected date range.
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['ariaLabelCalendarButton', 'ariaLabelNextMonthButton', 'ariaLabelPreviousMonthButton', 'disabled', 'enableTopLayer', 'format', 'helperText', 'i18nErrorDateUnparsable', 'infoText', 'invalidText', 'label', 'locale', 'maxDate', 'minDate', 'name', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'showWeekNumbers', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText', 'weekStartIndex'],
outputs: ['valueChange', 'validityStateChange'],
outputs: ['valueChange', 'validityStateChange', 'ixChange'],
standalone: false
})
export class IxDateInput {
protected el: HTMLIxDateInputElement;
@Output() valueChange = new EventEmitter<CustomEvent<string | undefined>>();
@Output() validityStateChange = new EventEmitter<CustomEvent<IIxDateInputDateInputValidityState>>();
@Output() ixChange = new EventEmitter<CustomEvent<string | undefined>>();
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
Expand All @@ -662,6 +663,10 @@ export declare interface IxDateInput extends Components.IxDateInput {
* Validation state change event.
*/
validityStateChange: EventEmitter<CustomEvent<IIxDateInputDateInputValidityState>>;
/**
* Event emitted when the date input loses focus and the value has changed. @since 4.4.0
*/
ixChange: EventEmitter<CustomEvent<string | undefined>>;
}


Expand Down Expand Up @@ -1334,14 +1339,15 @@ export declare interface IxIconToggleButton extends Components.IxIconToggleButto
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'suppressSubmitOnEnter', 'textAlignment', 'type', 'validText', 'value', 'warningText'],
outputs: ['valueChange', 'validityStateChange', 'ixBlur'],
outputs: ['valueChange', 'validityStateChange', 'ixBlur', 'ixChange'],
standalone: false
})
export class IxInput {
protected el: HTMLIxInputElement;
@Output() valueChange = new EventEmitter<CustomEvent<string>>();
@Output() validityStateChange = new EventEmitter<CustomEvent<ValidityState>>();
@Output() ixBlur = new EventEmitter<CustomEvent<void>>();
@Output() ixChange = new EventEmitter<CustomEvent<string>>();
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
Expand All @@ -1362,6 +1368,10 @@ export declare interface IxInput extends Components.IxInput {
* Event emitted when the text field loses focus.
*/
ixBlur: EventEmitter<CustomEvent<void>>;
/**
* Event emitted when the text field loses focus and the value has changed. @since 4.4.0
*/
ixChange: EventEmitter<CustomEvent<string>>;
}


Expand Down Expand Up @@ -2011,14 +2021,15 @@ Can be prevented, in which case only the event is triggered, and the modal remai
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['allowEmptyValueChange', 'allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'max', 'min', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showStepperButtons', 'showTextAsTooltip', 'step', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText'],
outputs: ['valueChange', 'validityStateChange', 'ixBlur'],
outputs: ['valueChange', 'validityStateChange', 'ixBlur', 'ixChange'],
standalone: false
})
export class IxNumberInput {
protected el: HTMLIxNumberInputElement;
@Output() valueChange = new EventEmitter<CustomEvent<number>>();
@Output() validityStateChange = new EventEmitter<CustomEvent<ValidityState>>();
@Output() ixBlur = new EventEmitter<CustomEvent<void>>();
@Output() ixChange = new EventEmitter<CustomEvent<number>>();
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
Expand All @@ -2039,6 +2050,10 @@ export declare interface IxNumberInput extends Components.IxNumberInput {
* Event emitted when the input field loses focus
*/
ixBlur: EventEmitter<CustomEvent<void>>;
/**
* Event emitted when the input field loses focus and the value has changed @since 4.4.0
*/
ixChange: EventEmitter<CustomEvent<number>>;
}


Expand Down Expand Up @@ -2534,14 +2549,15 @@ export declare interface IxTabs extends Components.IxTabs {
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'placeholder', 'readonly', 'required', 'resizeBehavior', 'showTextAsTooltip', 'textareaCols', 'textareaHeight', 'textareaRows', 'textareaWidth', 'validText', 'value', 'warningText'],
outputs: ['valueChange', 'validityStateChange', 'ixBlur'],
outputs: ['valueChange', 'validityStateChange', 'ixBlur', 'ixChange'],
standalone: false
})
export class IxTextarea {
protected el: HTMLIxTextareaElement;
@Output() valueChange = new EventEmitter<CustomEvent<string>>();
@Output() validityStateChange = new EventEmitter<CustomEvent<ValidityState>>();
@Output() ixBlur = new EventEmitter<CustomEvent<void>>();
@Output() ixChange = new EventEmitter<CustomEvent<string>>();
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
Expand All @@ -2562,6 +2578,10 @@ export declare interface IxTextarea extends Components.IxTextarea {
* Event emitted when the textarea field loses focus.
*/
ixBlur: EventEmitter<CustomEvent<void>>;
/**
* Event emitted when the textarea field loses focus and the value has changed. @since 4.4.0
*/
ixChange: EventEmitter<CustomEvent<string>>;
}


Expand Down Expand Up @@ -2598,13 +2618,14 @@ export declare interface IxTile extends Components.IxTile {}
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['disabled', 'enableTopLayer', 'format', 'helperText', 'hideHeader', 'hourInterval', 'i18nErrorTimeUnparsable', 'i18nHourColumnHeader', 'i18nMillisecondColumnHeader', 'i18nMinuteColumnHeader', 'i18nSecondColumnHeader', 'i18nSelectTime', 'i18nTime', 'infoText', 'invalidText', 'label', 'millisecondInterval', 'minuteInterval', 'name', 'placeholder', 'readonly', 'required', 'secondInterval', 'showTextAsTooltip', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText'],
outputs: ['valueChange', 'validityStateChange'],
outputs: ['valueChange', 'validityStateChange', 'ixChange'],
standalone: false
})
export class IxTimeInput {
protected el: HTMLIxTimeInputElement;
@Output() valueChange = new EventEmitter<CustomEvent<string>>();
@Output() validityStateChange = new EventEmitter<CustomEvent<IIxTimeInputTimeInputValidityState>>();
@Output() ixChange = new EventEmitter<CustomEvent<string>>();
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
Expand All @@ -2623,6 +2644,10 @@ export declare interface IxTimeInput extends Components.IxTimeInput {
* Validation state change event.
*/
validityStateChange: EventEmitter<CustomEvent<IIxTimeInputTimeInputValidityState>>;
/**
* Event emitted when the time input loses focus and the value has changed. @since 4.4.0
*/
ixChange: EventEmitter<CustomEvent<string>>;
}


Expand Down
35 changes: 30 additions & 5 deletions packages/angular/standalone/src/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -738,12 +738,13 @@ The event payload contains information about the selected date range.
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['ariaLabelCalendarButton', 'ariaLabelNextMonthButton', 'ariaLabelPreviousMonthButton', 'disabled', 'enableTopLayer', 'format', 'helperText', 'i18nErrorDateUnparsable', 'infoText', 'invalidText', 'label', 'locale', 'maxDate', 'minDate', 'name', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'showWeekNumbers', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText', 'weekStartIndex'],
outputs: ['valueChange', 'validityStateChange'],
outputs: ['valueChange', 'validityStateChange', 'ixChange'],
})
export class IxDateInput {
protected el: HTMLIxDateInputElement;
@Output() valueChange = new EventEmitter<CustomEvent<string | undefined>>();
@Output() validityStateChange = new EventEmitter<CustomEvent<IIxDateInputDateInputValidityState>>();
@Output() ixChange = new EventEmitter<CustomEvent<string | undefined>>();
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
Expand All @@ -762,6 +763,10 @@ export declare interface IxDateInput extends Components.IxDateInput {
* Validation state change event.
*/
validityStateChange: EventEmitter<CustomEvent<IIxDateInputDateInputValidityState>>;
/**
* Event emitted when the date input loses focus and the value has changed. @since 4.4.0
*/
ixChange: EventEmitter<CustomEvent<string | undefined>>;
}


Expand Down Expand Up @@ -1435,13 +1440,14 @@ export declare interface IxIconToggleButton extends Components.IxIconToggleButto
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'suppressSubmitOnEnter', 'textAlignment', 'type', 'validText', 'value', 'warningText'],
outputs: ['valueChange', 'validityStateChange', 'ixBlur'],
outputs: ['valueChange', 'validityStateChange', 'ixBlur', 'ixChange'],
})
export class IxInput {
protected el: HTMLIxInputElement;
@Output() valueChange = new EventEmitter<CustomEvent<string>>();
@Output() validityStateChange = new EventEmitter<CustomEvent<ValidityState>>();
@Output() ixBlur = new EventEmitter<CustomEvent<void>>();
@Output() ixChange = new EventEmitter<CustomEvent<string>>();
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
Expand All @@ -1462,6 +1468,10 @@ export declare interface IxInput extends Components.IxInput {
* Event emitted when the text field loses focus.
*/
ixBlur: EventEmitter<CustomEvent<void>>;
/**
* Event emitted when the text field loses focus and the value has changed. @since 4.4.0
*/
ixChange: EventEmitter<CustomEvent<string>>;
}


Expand Down Expand Up @@ -2112,13 +2122,14 @@ Can be prevented, in which case only the event is triggered, and the modal remai
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['allowEmptyValueChange', 'allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'max', 'min', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showStepperButtons', 'showTextAsTooltip', 'step', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText'],
outputs: ['valueChange', 'validityStateChange', 'ixBlur'],
outputs: ['valueChange', 'validityStateChange', 'ixBlur', 'ixChange'],
})
export class IxNumberInput {
protected el: HTMLIxNumberInputElement;
@Output() valueChange = new EventEmitter<CustomEvent<number>>();
@Output() validityStateChange = new EventEmitter<CustomEvent<ValidityState>>();
@Output() ixBlur = new EventEmitter<CustomEvent<void>>();
@Output() ixChange = new EventEmitter<CustomEvent<number>>();
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
Expand All @@ -2139,6 +2150,10 @@ export declare interface IxNumberInput extends Components.IxNumberInput {
* Event emitted when the input field loses focus
*/
ixBlur: EventEmitter<CustomEvent<void>>;
/**
* Event emitted when the input field loses focus and the value has changed @since 4.4.0
*/
ixChange: EventEmitter<CustomEvent<number>>;
}


Expand Down Expand Up @@ -2635,13 +2650,14 @@ export declare interface IxTabs extends Components.IxTabs {
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'placeholder', 'readonly', 'required', 'resizeBehavior', 'showTextAsTooltip', 'textareaCols', 'textareaHeight', 'textareaRows', 'textareaWidth', 'validText', 'value', 'warningText'],
outputs: ['valueChange', 'validityStateChange', 'ixBlur'],
outputs: ['valueChange', 'validityStateChange', 'ixBlur', 'ixChange'],
})
export class IxTextarea {
protected el: HTMLIxTextareaElement;
@Output() valueChange = new EventEmitter<CustomEvent<string>>();
@Output() validityStateChange = new EventEmitter<CustomEvent<ValidityState>>();
@Output() ixBlur = new EventEmitter<CustomEvent<void>>();
@Output() ixChange = new EventEmitter<CustomEvent<string>>();
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
Expand All @@ -2662,6 +2678,10 @@ export declare interface IxTextarea extends Components.IxTextarea {
* Event emitted when the textarea field loses focus.
*/
ixBlur: EventEmitter<CustomEvent<void>>;
/**
* Event emitted when the textarea field loses focus and the value has changed. @since 4.4.0
*/
ixChange: EventEmitter<CustomEvent<string>>;
}


Expand Down Expand Up @@ -2699,12 +2719,13 @@ export declare interface IxTile extends Components.IxTile {}
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['disabled', 'enableTopLayer', 'format', 'helperText', 'hideHeader', 'hourInterval', 'i18nErrorTimeUnparsable', 'i18nHourColumnHeader', 'i18nMillisecondColumnHeader', 'i18nMinuteColumnHeader', 'i18nSecondColumnHeader', 'i18nSelectTime', 'i18nTime', 'infoText', 'invalidText', 'label', 'millisecondInterval', 'minuteInterval', 'name', 'placeholder', 'readonly', 'required', 'secondInterval', 'showTextAsTooltip', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText'],
outputs: ['valueChange', 'validityStateChange'],
outputs: ['valueChange', 'validityStateChange', 'ixChange'],
})
export class IxTimeInput {
protected el: HTMLIxTimeInputElement;
@Output() valueChange = new EventEmitter<CustomEvent<string>>();
@Output() validityStateChange = new EventEmitter<CustomEvent<IIxTimeInputTimeInputValidityState>>();
@Output() ixChange = new EventEmitter<CustomEvent<string>>();
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
Expand All @@ -2723,6 +2744,10 @@ export declare interface IxTimeInput extends Components.IxTimeInput {
* Validation state change event.
*/
validityStateChange: EventEmitter<CustomEvent<IIxTimeInputTimeInputValidityState>>;
/**
* Event emitted when the time input loses focus and the value has changed. @since 4.4.0
*/
ixChange: EventEmitter<CustomEvent<string>>;
}


Expand Down
30 changes: 30 additions & 0 deletions packages/core/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4749,6 +4749,7 @@ declare global {
"validityStateChange": DateInputValidityState;
"ixFocus": void;
"ixBlur": void;
"ixChange": string | undefined;
}
/**
* @form-ready
Expand Down Expand Up @@ -5074,6 +5075,7 @@ declare global {
"valueChange": string;
"validityStateChange": ValidityState;
"ixBlur": void;
"ixChange": string;
}
/**
* @form-ready
Expand Down Expand Up @@ -5386,6 +5388,7 @@ declare global {
"valueChange": number;
"validityStateChange": ValidityState;
"ixBlur": void;
"ixChange": number;
}
/**
* @form-ready
Expand Down Expand Up @@ -5636,6 +5639,7 @@ declare global {
"valueChange": string;
"validityStateChange": ValidityState;
"ixBlur": void;
"ixChange": string;
}
/**
* @form-ready
Expand Down Expand Up @@ -5665,6 +5669,7 @@ declare global {
"validityStateChange": TimeInputValidityState;
"ixFocus": void;
"ixBlur": void;
"ixChange": string;
}
/**
* @since 3.2.0
Expand Down Expand Up @@ -6987,6 +6992,11 @@ declare namespace LocalJSX {
*/
"name"?: string;
"onIxBlur"?: (event: IxDateInputCustomEvent<void>) => void;
/**
* Event emitted when the date input loses focus and the value has changed.
* @since 4.4.0
*/
"onIxChange"?: (event: IxDateInputCustomEvent<string | undefined>) => void;
"onIxFocus"?: (event: IxDateInputCustomEvent<void>) => void;
/**
* Validation state change event.
Expand Down Expand Up @@ -8005,6 +8015,11 @@ declare namespace LocalJSX {
* Event emitted when the text field loses focus.
*/
"onIxBlur"?: (event: IxInputCustomEvent<void>) => void;
/**
* Event emitted when the text field loses focus and the value has changed.
* @since 4.4.0
*/
"onIxChange"?: (event: IxInputCustomEvent<string>) => void;
/**
* Event emitted when the validity state of the text field changes.
*/
Expand Down Expand Up @@ -8695,6 +8710,11 @@ declare namespace LocalJSX {
* Event emitted when the input field loses focus
*/
"onIxBlur"?: (event: IxNumberInputCustomEvent<void>) => void;
/**
* Event emitted when the input field loses focus and the value has changed
* @since 4.4.0
*/
"onIxChange"?: (event: IxNumberInputCustomEvent<number>) => void;
/**
* Event emitted when the validity state of the input field changes
*/
Expand Down Expand Up @@ -9584,6 +9604,11 @@ declare namespace LocalJSX {
* Event emitted when the textarea field loses focus.
*/
"onIxBlur"?: (event: IxTextareaCustomEvent<void>) => void;
/**
* Event emitted when the textarea field loses focus and the value has changed.
* @since 4.4.0
*/
"onIxChange"?: (event: IxTextareaCustomEvent<string>) => void;
/**
* Event emitted when the validity state of the textarea field changes.
*/
Expand Down Expand Up @@ -9750,6 +9775,11 @@ declare namespace LocalJSX {
*/
"name"?: string;
"onIxBlur"?: (event: IxTimeInputCustomEvent<void>) => void;
/**
* Event emitted when the time input loses focus and the value has changed.
* @since 4.4.0
*/
"onIxChange"?: (event: IxTimeInputCustomEvent<string>) => void;
"onIxFocus"?: (event: IxTimeInputCustomEvent<void>) => void;
/**
* Validation state change event.
Expand Down
Loading
Loading