diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 62c84ed460..7caf6a672b 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -780,24 +780,24 @@ declare global { namespace JSXElements { export interface IonDatetimeAttributes extends HTMLAttributes { cancelText?: string; - dayNames?: any; - dayShortNames?: any; - dayValues?: any; + dayNames?: string[] | string; + dayShortNames?: string[] | string; + dayValues?: number[] | number | string; disabled?: boolean; displayFormat?: string; doneText?: string; - hourValues?: any; + hourValues?: number[] | number | string; max?: string; min?: string; - minuteValues?: any; - monthNames?: any; - monthShortNames?: any; - monthValues?: any; + minuteValues?: number[] | number | string; + monthNames?: string[] | string; + monthShortNames?: string[] | string; + monthValues?: number[] | number | string; pickerFormat?: string; pickerOptions?: PickerOptions; placeholder?: string; value?: string; - yearValues?: any; + yearValues?: number[] | number | string; } } } diff --git a/packages/core/src/components/datetime/datetime-util.ts b/packages/core/src/components/datetime/datetime-util.ts index c01bc82c1b..136c2a5e8c 100644 --- a/packages/core/src/components/datetime/datetime-util.ts +++ b/packages/core/src/components/datetime/datetime-util.ts @@ -394,7 +394,7 @@ export function convertDataToISO(data: DatetimeData): string { * Use to convert a string of comma separated strings or * an array of strings, and clean up any user input */ -export function convertToArrayOfStrings(input: any, type: string): string[] { +export function convertToArrayOfStrings(input: string | string[] | undefined | null, type: string): string[] { if (!input) { return null; } @@ -408,7 +408,7 @@ export function convertToArrayOfStrings(input: any, type: string): string[] { let values: string[]; if (isArray(input)) { // trim up each string value - values = input.map((val: string) => val.trim()); + values = input.map(val => val.toString().trim()); } if (!values || !values.length) { @@ -423,7 +423,7 @@ export function convertToArrayOfStrings(input: any, type: string): string[] { * Use to convert a string of comma separated numbers or * an array of numbers, and clean up any user input */ -export function convertToArrayOfNumbers(input: any, type: string): number[] { +export function convertToArrayOfNumbers(input: any[] | string | number, type: string): number[] { if (isString(input)) { // convert the string to an array of strings // auto remove any whitespace and [] characters @@ -436,6 +436,8 @@ export function convertToArrayOfNumbers(input: any, type: string): number[] { values = input .map((num: any) => parseInt(num, 10)) .filter(isFinite); + } else { + values = [input]; } if (!values || !values.length) { diff --git a/packages/core/src/components/datetime/datetime.tsx b/packages/core/src/components/datetime/datetime.tsx index 361473c2dc..d85bda4188 100644 --- a/packages/core/src/components/datetime/datetime.tsx +++ b/packages/core/src/components/datetime/datetime.tsx @@ -104,72 +104,72 @@ export class Datetime { /** * Values used to create the list of selectable years. By default * the year values range between the `min` and `max` datetime inputs. However, to - * control exactly which years to display, the `yearValues` input can take either an array + * control exactly which years to display, the `yearValues` input can take a number, an array * of numbers, or string of comma separated numbers. For example, to show upcoming and * recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. */ - @Prop() yearValues: any; + @Prop() yearValues: number[] | number | string; /** * Values used to create the list of selectable months. By default * the month values range from `1` to `12`. However, to control exactly which months to - * display, the `monthValues` input can take either an array of numbers, or string of + * display, the `monthValues` input can take a number, an array of numbers, or a string of * comma separated numbers. For example, if only summer months should be shown, then this * input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a * zero-based index, meaning January's value is `1`, and December's is `12`. */ - @Prop() monthValues: any; + @Prop() monthValues: number[] | number | string; /** * Values used to create the list of selectable days. By default * every day is shown for the given month. However, to control exactly which days of - * the month to display, the `dayValues` input can take either an array of numbers, or - * string of comma separated numbers. Note that even if the array days have an invalid + * the month to display, the `dayValues` input can take a number, an array of numbers, or + * a string of comma separated numbers. Note that even if the array days have an invalid * number for the selected month, like `31` in February, it will correctly not show * days which are not valid for the selected month. */ - @Prop() dayValues: any; + @Prop() dayValues: number[] | number | string; /** * Values used to create the list of selectable hours. By default * the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, - * to control exactly which hours to display, the `hourValues` input can take either an - * array of numbers, or string of comma separated numbers. + * to control exactly which hours to display, the `hourValues` input can take a number, an + * array of numbers, or a string of comma separated numbers. */ - @Prop() hourValues: any; + @Prop() hourValues: number[] | number | string; /** * Values used to create the list of selectable minutes. By default * the mintues range from `0` to `59`. However, to control exactly which minutes to display, - * the `minuteValues` input can take either an array of numbers, or string of comma separated - * numbers. For example, if the minute selections should only be every 15 minutes, then - * this input value would be `minuteValues="0,15,30,45"`. + * the `minuteValues` input can take a number, an array of numbers, or a string of comma + * separated numbers. For example, if the minute selections should only be every 15 minutes, + * then this input value would be `minuteValues="0,15,30,45"`. */ - @Prop() minuteValues: any; + @Prop() minuteValues: number[] | number | string; /** * Full names for each month name. This can be used to provide * locale month names. Defaults to English. */ - @Prop() monthNames: any; + @Prop() monthNames: string[] | string; /** * Short abbreviated names for each month name. This can be used to provide * locale month names. Defaults to English. */ - @Prop() monthShortNames: any; + @Prop() monthShortNames: string[] | string; /** * Full day of the week names. This can be used to provide * locale names for each day in the week. Defaults to English. */ - @Prop() dayNames: any; + @Prop() dayNames: string[] | string; /** * Short abbreviated day of the week names. This can be used to provide * locale names for each day in the week. Defaults to English. */ - @Prop() dayShortNames: any; + @Prop() dayShortNames: string[] | string; /** * Any additional options that the picker interface can accept. diff --git a/packages/core/src/components/datetime/readme.md b/packages/core/src/components/datetime/readme.md index 8b560ab743..b99249c6ac 100644 --- a/packages/core/src/components/datetime/readme.md +++ b/packages/core/src/components/datetime/readme.md @@ -224,7 +224,7 @@ The text to display on the picker's cancel button. Default: `Cancel`. #### dayNames -any + Full day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. @@ -232,7 +232,7 @@ locale names for each day in the week. Defaults to English. #### dayShortNames -any + Short abbreviated day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. @@ -240,12 +240,12 @@ locale names for each day in the week. Defaults to English. #### dayValues -any + Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of -the month to display, the `dayValues` input can take either an array of numbers, or -string of comma separated numbers. Note that even if the array days have an invalid +the month to display, the `dayValues` input can take a number, an array of numbers, or +a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month. @@ -277,12 +277,12 @@ The text to display on the picker's "Done" button. Default: `Done`. #### hourValues -any + Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, -to control exactly which hours to display, the `hourValues` input can take either an -array of numbers, or string of comma separated numbers. +to control exactly which hours to display, the `hourValues` input can take a number, an +array of numbers, or a string of comma separated numbers. #### max @@ -311,18 +311,18 @@ Defaults to the beginning of the year, 100 years ago from today. #### minuteValues -any + Values used to create the list of selectable minutes. By default the mintues range from `0` to `59`. However, to control exactly which minutes to display, -the `minuteValues` input can take either an array of numbers, or string of comma separated -numbers. For example, if the minute selections should only be every 15 minutes, then -this input value would be `minuteValues="0,15,30,45"`. +the `minuteValues` input can take a number, an array of numbers, or a string of comma +separated numbers. For example, if the minute selections should only be every 15 minutes, +then this input value would be `minuteValues="0,15,30,45"`. #### monthNames -any + Full names for each month name. This can be used to provide locale month names. Defaults to English. @@ -330,7 +330,7 @@ locale month names. Defaults to English. #### monthShortNames -any + Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English. @@ -338,11 +338,11 @@ locale month names. Defaults to English. #### monthValues -any + Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to -display, the `monthValues` input can take either an array of numbers, or string of +display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`. @@ -385,11 +385,11 @@ the value of the datetime. #### yearValues -any + Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to -control exactly which years to display, the `yearValues` input can take either an array +control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. @@ -405,7 +405,7 @@ The text to display on the picker's cancel button. Default: `Cancel`. #### day-names -any + Full day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. @@ -413,7 +413,7 @@ locale names for each day in the week. Defaults to English. #### day-short-names -any + Short abbreviated day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. @@ -421,12 +421,12 @@ locale names for each day in the week. Defaults to English. #### day-values -any + Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of -the month to display, the `dayValues` input can take either an array of numbers, or -string of comma separated numbers. Note that even if the array days have an invalid +the month to display, the `dayValues` input can take a number, an array of numbers, or +a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month. @@ -458,12 +458,12 @@ The text to display on the picker's "Done" button. Default: `Done`. #### hour-values -any + Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, -to control exactly which hours to display, the `hourValues` input can take either an -array of numbers, or string of comma separated numbers. +to control exactly which hours to display, the `hourValues` input can take a number, an +array of numbers, or a string of comma separated numbers. #### max @@ -492,18 +492,18 @@ Defaults to the beginning of the year, 100 years ago from today. #### minute-values -any + Values used to create the list of selectable minutes. By default the mintues range from `0` to `59`. However, to control exactly which minutes to display, -the `minuteValues` input can take either an array of numbers, or string of comma separated -numbers. For example, if the minute selections should only be every 15 minutes, then -this input value would be `minuteValues="0,15,30,45"`. +the `minuteValues` input can take a number, an array of numbers, or a string of comma +separated numbers. For example, if the minute selections should only be every 15 minutes, +then this input value would be `minuteValues="0,15,30,45"`. #### month-names -any + Full names for each month name. This can be used to provide locale month names. Defaults to English. @@ -511,7 +511,7 @@ locale month names. Defaults to English. #### month-short-names -any + Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English. @@ -519,11 +519,11 @@ locale month names. Defaults to English. #### month-values -any + Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to -display, the `monthValues` input can take either an array of numbers, or string of +display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`. @@ -566,11 +566,11 @@ the value of the datetime. #### year-values -any + Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to -control exactly which years to display, the `yearValues` input can take either an array +control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. diff --git a/packages/core/src/components/fab/fab.tsx b/packages/core/src/components/fab/fab.tsx index ed3956e700..bd48717fbd 100644 --- a/packages/core/src/components/fab/fab.tsx +++ b/packages/core/src/components/fab/fab.tsx @@ -23,7 +23,7 @@ export class Fab { } render() { - const fab: any = this.el.querySelector('ion-fab-button'); + const fab = this.el.querySelector('ion-fab-button'); fab.toggleActive = this.toggleActive; fab.activated = this.activated; diff --git a/packages/core/src/components/input/input-base.tsx b/packages/core/src/components/input/input-base.tsx index 797b10213f..46ca3c2355 100644 --- a/packages/core/src/components/input/input-base.tsx +++ b/packages/core/src/components/input/input-base.tsx @@ -26,10 +26,10 @@ export interface InputBaseComponent { value: string; // Shared Methods - inputBlurred: (ev: any) => void; - inputChanged: (ev: any) => void; - inputFocused: (ev: any) => void; - inputKeydown: (ev: any) => void; + inputBlurred: (ev: Event) => void; + inputChanged: (ev: Event) => void; + inputFocused: (ev: Event) => void; + inputKeydown: (ev: Event) => void; } export interface InputComponent extends InputBaseComponent { diff --git a/packages/core/src/components/input/input.tsx b/packages/core/src/components/input/input.tsx index e3eb5f8bcd..055a8f6b94 100644 --- a/packages/core/src/components/input/input.tsx +++ b/packages/core/src/components/input/input.tsx @@ -236,20 +236,20 @@ export class Input implements InputComponent { }); } - inputBlurred(ev: any) { + inputBlurred(ev: Event) { this.ionBlur.emit(ev); this.focusChange(this.hasFocus()); this.emitStyle(); } - inputChanged(ev: any) { - this.value = ev.target && ev.target.value; + inputChanged(ev: Event) { + this.value = ev.target && (ev.target as HTMLInputElement).value; this.ionInput.emit(ev); this.emitStyle(); } - inputFocused(ev: any) { + inputFocused(ev: Event) { this.ionFocus.emit(ev); this.focusChange(this.hasFocus()); @@ -263,15 +263,14 @@ export class Input implements InputComponent { } } - inputKeydown(ev: any) { + inputKeydown(ev: Event) { this.checkClearOnEdit(ev); } - /** * Check if we need to clear the text input if clearOnEdit is enabled */ - checkClearOnEdit(ev: any) { + checkClearOnEdit(ev: Event) { if (!this.clearOnEdit) { return; } @@ -286,7 +285,7 @@ export class Input implements InputComponent { this.didBlurAfterEdit = false; } - clearTextInput(ev: any) { + clearTextInput(ev: Event) { this.value = ''; this.ionInput.emit(ev); } @@ -313,6 +312,7 @@ export class Input implements InputComponent { autoCorrect={this.autocorrect} autoFocus={this.autofocus} checked={this.checked} + class={themedClasses} disabled={this.disabled} inputMode={this.inputmode} min={this.min} @@ -331,7 +331,6 @@ export class Input implements InputComponent { size={this.size} type={this.type} value={this.value} - class={themedClasses} onBlur={this.inputBlurred.bind(this)} onInput={this.inputChanged.bind(this)} onFocus={this.inputFocused.bind(this)} diff --git a/packages/core/src/components/item-option/item-option.tsx b/packages/core/src/components/item-option/item-option.tsx index de382e3fa7..c6d58118bf 100644 --- a/packages/core/src/components/item-option/item-option.tsx +++ b/packages/core/src/components/item-option/item-option.tsx @@ -39,8 +39,8 @@ export class ItemOption { // } } - clickedOptionButton(ev: any): boolean { - const el = ev.target.closest('ion-item-option'); + clickedOptionButton(ev: Event): boolean { + const el = (ev.target as HTMLElement).closest('ion-item-option'); return !!el; } diff --git a/packages/core/src/components/loading/loading.tsx b/packages/core/src/components/loading/loading.tsx index 1b74bbcb8b..9212fefeea 100644 --- a/packages/core/src/components/loading/loading.tsx +++ b/packages/core/src/components/loading/loading.tsx @@ -242,7 +242,7 @@ export class Loading { }); } - const loadingInner: any[] = []; + const loadingInner: JSX.Element[] = []; if (this.spinner !== 'hide') { loadingInner.push( diff --git a/packages/core/src/components/picker-column/picker-column.tsx b/packages/core/src/components/picker-column/picker-column.tsx index 6add85d825..539ce04ac1 100644 --- a/packages/core/src/components/picker-column/picker-column.tsx +++ b/packages/core/src/components/picker-column/picker-column.tsx @@ -416,7 +416,7 @@ export class PickerColumnCmp { }) .filter(clientInformation => clientInformation !== null); - const results: any[] = []; + const results: JSX.Element[] = []; if (col.prefix) { results.push( diff --git a/packages/core/src/components/range/range.tsx b/packages/core/src/components/range/range.tsx index 143252f9a4..c3e8c72fab 100644 --- a/packages/core/src/components/range/range.tsx +++ b/packages/core/src/components/range/range.tsx @@ -2,6 +2,12 @@ import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State, W import { BaseInputComponent, GestureDetail } from '../../index'; import { clamp, debounce } from '../../utils/helpers'; +interface Tick { + ratio: number | (() => number); + left: string; + active?: boolean; +} + @Component({ tag: 'ion-range', styleUrls: { @@ -28,7 +34,7 @@ export class Range implements BaseInputComponent { @State() valB = 0; @State() ratioA = 0; @State() ratioB = 0; - @State() ticks: any[] = []; + @State() ticks: Tick[] = []; @State() activeB: boolean; @State() rect: ClientRect; diff --git a/packages/core/src/components/tap-click/tap-click.tsx b/packages/core/src/components/tap-click/tap-click.tsx index 3883018d6c..5d91b21392 100644 --- a/packages/core/src/components/tap-click/tap-click.tsx +++ b/packages/core/src/components/tap-click/tap-click.tsx @@ -40,7 +40,7 @@ export class TapClick { } @Listen('document:click', {passive: false, capture: true}) - onBodyClick(ev: any) { + onBodyClick(ev: Event) { if (this.shouldCancel()) { ev.preventDefault(); ev.stopPropagation(); diff --git a/packages/core/src/components/textarea/textarea.tsx b/packages/core/src/components/textarea/textarea.tsx index ccb1d9f9c1..efdb650cca 100644 --- a/packages/core/src/components/textarea/textarea.tsx +++ b/packages/core/src/components/textarea/textarea.tsx @@ -179,39 +179,39 @@ export class Textarea implements TextareaComponent { }); } - clearTextInput(ev: any) { + clearTextInput(ev: Event) { this.value = ''; this.ionInput.emit(ev); } - inputBlurred(ev: any) { + inputBlurred(ev: Event) { this.ionBlur.emit(ev); this.focusChange(this.hasFocus()); this.emitStyle(); } - inputChanged(ev: any) { - this.value = ev.target && ev.target.value; + inputChanged(ev: Event) { + this.value = ev.target && (ev.target as HTMLInputElement).value; this.ionInput.emit(ev); this.emitStyle(); } - inputFocused(ev: any) { + inputFocused(ev: Event) { this.ionFocus.emit(ev); this.focusChange(this.hasFocus()); this.emitStyle(); } - inputKeydown(ev: any) { + inputKeydown(ev: Event) { this.checkClearOnEdit(ev); } /** * Check if we need to clear the text input if clearOnEdit is enabled */ - checkClearOnEdit(ev: any) { + checkClearOnEdit(ev: Event) { if (!this.clearOnEdit) { return; }