refactor(file-input): Changed custom events return type (#1744)

Both `igcChange` and `igcCancel` will now return the
file input `files` property (a FileList instance) as an event argument.

Author: rkaraivanov

CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Date Range Picker
 
 ### Changed
+- #### File input
+  - **Breaking change**: `igcChange` & `igcCancel` events detail now returns the underlying component `files` property.
 - #### Tooltip
   - **Behavioral change**: Tooltip default `placement` is 'bottom' now.
   - **Behavioral change**: Tooltip will not render an arrow indicator by default unless `with-arrow` is set.

src/components/file-input/file-input.spec.ts

@@ -158,7 +158,7 @@ describe('File Input component', () => {
       await elementUpdated(element);
 
       expect(eventSpy).calledWith('igcChange', {
-        detail: element.value,
+        detail: input.files,
       });
     });
 
@@ -169,7 +169,7 @@ describe('File Input component', () => {
       await elementUpdated(element);
 
       expect(eventSpy).calledOnceWith('igcCancel', {
-        detail: element.value,
+        detail: input.files,
       });
     });
 

src/components/file-input/file-input.ts

@@ -5,19 +5,30 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { themes } from '../../theming/theming-decorator.js';
 import IgcButtonComponent from '../button/button.js';
 import { registerComponent } from '../common/definitions/register.js';
+import type { AbstractConstructor } from '../common/mixins/constructor.js';
+import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import {
   type FormValueOf,
   createFormValueState,
   defaultFileListTransformer,
 } from '../common/mixins/forms/form-value.js';
 import { partMap } from '../common/part-map.js';
 import { isEmpty } from '../common/util.js';
-import { IgcInputBaseComponent } from '../input/input-base.js';
+import {
+  IgcInputBaseComponent,
+  type IgcInputComponentEventMap,
+} from '../input/input-base.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import { styles } from './themes/file-input.base.css.js';
 import { all } from './themes/themes.js';
 import { fileValidators } from './validators.js';
 
+export interface IgcFileInputComponentEventMap
+  extends Omit<IgcInputComponentEventMap, 'igcChange' | 'igcInput'> {
+  igcCancel: CustomEvent<FileList>;
+  igcChange: CustomEvent<FileList>;
+}
+
 /* blazorSuppress */
 /**
  * @element igc-file-input
@@ -45,9 +56,12 @@ import { fileValidators } from './validators.js';
  * @csspart helper-text - The helper text wrapper.
  */
 @themes(all)
-export default class IgcFileInputComponent extends IgcInputBaseComponent {
+export default class IgcFileInputComponent extends EventEmitterMixin<
+  IgcFileInputComponentEventMap,
+  AbstractConstructor<IgcInputBaseComponent>
+>(IgcInputBaseComponent) {
   public static readonly tagName = 'igc-file-input';
-  public static override styles = [...IgcInputBaseComponent.styles, styles];
+  public static styles = [...IgcInputBaseComponent.styles, styles];
 
   /* blazorSuppress */
   public static register(): void {
@@ -152,15 +166,15 @@ export default class IgcFileInputComponent extends IgcInputBaseComponent {
     this._validate();
 
     this.requestUpdate();
-    this.emitEvent('igcChange', { detail: this.value });
+    this.emitEvent('igcChange', { detail: this.files! });
   }
 
   private _handleCancel(): void {
     this._hasActivation = false;
     this._validate();
 
     this.emitEvent('igcCancel', {
-      detail: this.value,
+      detail: this.files!,
     });
   }
 

src/components/input/input-base.ts

@@ -19,8 +19,6 @@ export interface IgcInputComponentEventMap {
   igcInput: CustomEvent<string>;
   /* blazorSuppress */
   igcChange: CustomEvent<string>;
-  /* blazorSuppress */
-  igcCancel: CustomEvent<string>;
   // For analyzer meta only:
   /* skipWCPrefix */
   focus: FocusEvent;

src/index.ts

@@ -106,7 +106,7 @@ export type { IgcDropdownComponentEventMap } from './components/dropdown/dropdow
 export type { IgcExpansionPanelComponentEventMap } from './components/expansion-panel/expansion-panel.js';
 export type { IgcInputComponentEventMap } from './components/input/input-base.js';
 export type { IgcInputComponentEventMap as IgcMaskInputComponentEventMap } from './components/input/input-base.js';
-export type { IgcInputComponentEventMap as IgcFileInputComponentEventMap } from './components/input/input-base.js';
+export type { IgcFileInputComponentEventMap } from './components/file-input/file-input.js';
 export type { IgcRadioComponentEventMap } from './components/radio/radio.js';
 export type { IgcRatingComponentEventMap } from './components/rating/rating.js';
 export type { IgcSelectComponentEventMap } from './components/select/select.js';