diff --git a/BREAKING.md b/BREAKING.md index 3794dbdda4b..60eebb67804 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -15,10 +15,16 @@ This is a comprehensive list of the breaking changes introduced in the major ver ## Version 9.x - [Components](#version-9x-components) + - [Legacy Picker](#version-9x-legacy-picker) - [Router Outlet](#version-9x-router-outlet)

Components

+

Legacy Picker

+ +- `ion-picker-legacy` and `ion-picker-legacy-column` have been removed. The legacy picker component has been replaced with a inline picker component. + - Usages such as `ion-picker-legacy` or `IonPickerLegacy` should be changed to `ion-picker` and `IonPicker`, respectively. +

Router Outlet

`ion-router-outlet` now exposes a `swipeGesture` property that controls the swipe-to-go-back gesture per outlet. This property defaults to `true` in `"ios"` mode and `false` in `"md"` mode. diff --git a/core/api.txt b/core/api.txt index be1cde11f2e..a19f20c5818 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1281,61 +1281,6 @@ ion-picker-column-option,prop,color,"danger" | "dark" | "light" | "medium" | "pr ion-picker-column-option,prop,disabled,boolean,false,false,false ion-picker-column-option,prop,value,any,undefined,false,false -ion-picker-legacy,scoped -ion-picker-legacy,prop,animated,boolean,true,false,false -ion-picker-legacy,prop,backdropDismiss,boolean,true,false,false -ion-picker-legacy,prop,buttons,PickerButton[],[],false,false -ion-picker-legacy,prop,columns,PickerColumn[],[],false,false -ion-picker-legacy,prop,cssClass,string | string[] | undefined,undefined,false,false -ion-picker-legacy,prop,duration,number,0,false,false -ion-picker-legacy,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false -ion-picker-legacy,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false -ion-picker-legacy,prop,isOpen,boolean,false,false,false -ion-picker-legacy,prop,keyboardClose,boolean,true,false,false -ion-picker-legacy,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false -ion-picker-legacy,prop,mode,"ios" | "md",undefined,false,false -ion-picker-legacy,prop,showBackdrop,boolean,true,false,false -ion-picker-legacy,prop,trigger,string | undefined,undefined,false,false -ion-picker-legacy,method,dismiss,dismiss(data?: any, role?: string) => Promise -ion-picker-legacy,method,getColumn,getColumn(name: string) => Promise -ion-picker-legacy,method,onDidDismiss,onDidDismiss() => Promise> -ion-picker-legacy,method,onWillDismiss,onWillDismiss() => Promise> -ion-picker-legacy,method,present,present() => Promise -ion-picker-legacy,event,didDismiss,OverlayEventDetail,true -ion-picker-legacy,event,didPresent,void,true -ion-picker-legacy,event,ionPickerDidDismiss,OverlayEventDetail,true -ion-picker-legacy,event,ionPickerDidPresent,void,true -ion-picker-legacy,event,ionPickerWillDismiss,OverlayEventDetail,true -ion-picker-legacy,event,ionPickerWillPresent,void,true -ion-picker-legacy,event,willDismiss,OverlayEventDetail,true -ion-picker-legacy,event,willPresent,void,true -ion-picker-legacy,css-prop,--backdrop-opacity,ios -ion-picker-legacy,css-prop,--backdrop-opacity,md -ion-picker-legacy,css-prop,--background,ios -ion-picker-legacy,css-prop,--background,md -ion-picker-legacy,css-prop,--background-rgb,ios -ion-picker-legacy,css-prop,--background-rgb,md -ion-picker-legacy,css-prop,--border-color,ios -ion-picker-legacy,css-prop,--border-color,md -ion-picker-legacy,css-prop,--border-radius,ios -ion-picker-legacy,css-prop,--border-radius,md -ion-picker-legacy,css-prop,--border-style,ios -ion-picker-legacy,css-prop,--border-style,md -ion-picker-legacy,css-prop,--border-width,ios -ion-picker-legacy,css-prop,--border-width,md -ion-picker-legacy,css-prop,--height,ios -ion-picker-legacy,css-prop,--height,md -ion-picker-legacy,css-prop,--max-height,ios -ion-picker-legacy,css-prop,--max-height,md -ion-picker-legacy,css-prop,--max-width,ios -ion-picker-legacy,css-prop,--max-width,md -ion-picker-legacy,css-prop,--min-height,ios -ion-picker-legacy,css-prop,--min-height,md -ion-picker-legacy,css-prop,--min-width,ios -ion-picker-legacy,css-prop,--min-width,md -ion-picker-legacy,css-prop,--width,ios -ion-picker-legacy,css-prop,--width,md - ion-popover,shadow ion-popover,prop,alignment,"center" | "end" | "start" | undefined,undefined,false,false ion-popover,prop,animated,boolean,true,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 04b2b9fd8ea..6e15bcbec2f 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -25,7 +25,6 @@ import { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, S import { ViewController } from "./components/nav/view-controller"; import { PickerChangeEventDetail } from "./components/picker/picker-interfaces"; import { PickerColumnChangeEventDetail, PickerColumnValue } from "./components/picker-column/picker-column-interfaces"; -import { PickerButton, PickerColumn } from "./components/picker-legacy/picker-interface"; import { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface"; import { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface"; import { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface"; @@ -63,7 +62,6 @@ export { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, S export { ViewController } from "./components/nav/view-controller"; export { PickerChangeEventDetail } from "./components/picker/picker-interfaces"; export { PickerColumnChangeEventDetail, PickerColumnValue } from "./components/picker-column/picker-column-interfaces"; -export { PickerButton, PickerColumn } from "./components/picker-legacy/picker-interface"; export { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface"; export { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface"; export { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface"; @@ -2289,107 +2287,6 @@ export namespace Components { */ "value"?: any | null; } - interface IonPickerLegacy { - /** - * If `true`, the picker will animate. - * @default true - */ - "animated": boolean; - /** - * If `true`, the picker will be dismissed when the backdrop is clicked. - * @default true - */ - "backdropDismiss": boolean; - /** - * Array of buttons to be displayed at the top of the picker. - * @default [] - */ - "buttons": PickerButton[]; - /** - * Array of columns to be displayed in the picker. - * @default [] - */ - "columns": PickerColumn[]; - /** - * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. - */ - "cssClass"?: string | string[]; - "delegate"?: FrameworkDelegate; - /** - * Dismiss the picker overlay after it has been presented. - * @param data Any data to emit in the dismiss events. - * @param role The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. - */ - "dismiss": (data?: any, role?: string) => Promise; - /** - * Number of milliseconds to wait before dismissing the picker. - * @default 0 - */ - "duration": number; - /** - * Animation to use when the picker is presented. - */ - "enterAnimation"?: AnimationBuilder; - /** - * Get the column that matches the specified name. - * @param name The name of the column. - */ - "getColumn": (name: string) => Promise; - /** - * @default false - */ - "hasController": boolean; - /** - * Additional attributes to pass to the picker. - */ - "htmlAttributes"?: { [key: string]: any }; - /** - * If `true`, the picker will open. If `false`, the picker will close. Use this if you need finer grained control over presentation, otherwise just use the pickerController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the picker dismisses. You will need to do that in your code. - * @default false - */ - "isOpen": boolean; - /** - * If `true`, the keyboard will be automatically dismissed when the overlay is presented. - * @default true - */ - "keyboardClose": boolean; - /** - * Animation to use when the picker is dismissed. - */ - "leaveAnimation"?: AnimationBuilder; - /** - * The mode determines which platform styles to use. - */ - "mode"?: "ios" | "md"; - /** - * Returns a promise that resolves when the picker did dismiss. - */ - "onDidDismiss": () => Promise>; - /** - * Returns a promise that resolves when the picker will dismiss. - */ - "onWillDismiss": () => Promise>; - "overlayIndex": number; - /** - * Present the picker overlay after it has been created. - */ - "present": () => Promise; - /** - * If `true`, a backdrop will be displayed behind the picker. - * @default true - */ - "showBackdrop": boolean; - /** - * An ID corresponding to the trigger element that causes the picker to open when clicked. - */ - "trigger": string | undefined; - } - interface IonPickerLegacyColumn { - /** - * Picker column data - */ - "col": PickerColumn; - } interface IonPopover { /** * Describes how to align the popover content with the `reference` point. Defaults to `"center"` for `ios` mode, and `"start"` for `md` mode. @@ -3862,14 +3759,6 @@ export interface IonPickerColumnCustomEvent extends CustomEvent { detail: T; target: HTMLIonPickerColumnElement; } -export interface IonPickerLegacyCustomEvent extends CustomEvent { - detail: T; - target: HTMLIonPickerLegacyElement; -} -export interface IonPickerLegacyColumnCustomEvent extends CustomEvent { - detail: T; - target: HTMLIonPickerLegacyColumnElement; -} export interface IonPopoverCustomEvent extends CustomEvent { detail: T; target: HTMLIonPopoverElement; @@ -4627,47 +4516,6 @@ declare global { prototype: HTMLIonPickerColumnOptionElement; new (): HTMLIonPickerColumnOptionElement; }; - interface HTMLIonPickerLegacyElementEventMap { - "ionPickerDidPresent": void; - "ionPickerWillPresent": void; - "ionPickerWillDismiss": OverlayEventDetail; - "ionPickerDidDismiss": OverlayEventDetail; - "didPresent": void; - "willPresent": void; - "willDismiss": OverlayEventDetail; - "didDismiss": OverlayEventDetail; - } - interface HTMLIonPickerLegacyElement extends Components.IonPickerLegacy, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLIonPickerLegacyElement, ev: IonPickerLegacyCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLIonPickerLegacyElement, ev: IonPickerLegacyCustomEvent) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; - } - var HTMLIonPickerLegacyElement: { - prototype: HTMLIonPickerLegacyElement; - new (): HTMLIonPickerLegacyElement; - }; - interface HTMLIonPickerLegacyColumnElementEventMap { - "ionPickerColChange": PickerColumn; - } - interface HTMLIonPickerLegacyColumnElement extends Components.IonPickerLegacyColumn, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLIonPickerLegacyColumnElement, ev: IonPickerLegacyColumnCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLIonPickerLegacyColumnElement, ev: IonPickerLegacyColumnCustomEvent) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; - } - var HTMLIonPickerLegacyColumnElement: { - prototype: HTMLIonPickerLegacyColumnElement; - new (): HTMLIonPickerLegacyColumnElement; - }; interface HTMLIonPopoverElementEventMap { "ionPopoverDidPresent": void; "ionPopoverWillPresent": void; @@ -5265,8 +5113,6 @@ declare global { "ion-picker": HTMLIonPickerElement; "ion-picker-column": HTMLIonPickerColumnElement; "ion-picker-column-option": HTMLIonPickerColumnOptionElement; - "ion-picker-legacy": HTMLIonPickerLegacyElement; - "ion-picker-legacy-column": HTMLIonPickerLegacyColumnElement; "ion-popover": HTMLIonPopoverElement; "ion-progress-bar": HTMLIonProgressBarElement; "ion-radio": HTMLIonRadioElement; @@ -7529,120 +7375,6 @@ declare namespace LocalJSX { */ "value"?: any | null; } - interface IonPickerLegacy { - /** - * If `true`, the picker will animate. - * @default true - */ - "animated"?: boolean; - /** - * If `true`, the picker will be dismissed when the backdrop is clicked. - * @default true - */ - "backdropDismiss"?: boolean; - /** - * Array of buttons to be displayed at the top of the picker. - * @default [] - */ - "buttons"?: PickerButton[]; - /** - * Array of columns to be displayed in the picker. - * @default [] - */ - "columns"?: PickerColumn[]; - /** - * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. - */ - "cssClass"?: string | string[]; - "delegate"?: FrameworkDelegate; - /** - * Number of milliseconds to wait before dismissing the picker. - * @default 0 - */ - "duration"?: number; - /** - * Animation to use when the picker is presented. - */ - "enterAnimation"?: AnimationBuilder; - /** - * @default false - */ - "hasController"?: boolean; - /** - * Additional attributes to pass to the picker. - */ - "htmlAttributes"?: { [key: string]: any }; - /** - * If `true`, the picker will open. If `false`, the picker will close. Use this if you need finer grained control over presentation, otherwise just use the pickerController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the picker dismisses. You will need to do that in your code. - * @default false - */ - "isOpen"?: boolean; - /** - * If `true`, the keyboard will be automatically dismissed when the overlay is presented. - * @default true - */ - "keyboardClose"?: boolean; - /** - * Animation to use when the picker is dismissed. - */ - "leaveAnimation"?: AnimationBuilder; - /** - * The mode determines which platform styles to use. - */ - "mode"?: "ios" | "md"; - /** - * Emitted after the picker has dismissed. Shorthand for ionPickerDidDismiss. - */ - "onDidDismiss"?: (event: IonPickerLegacyCustomEvent) => void; - /** - * Emitted after the picker has presented. Shorthand for ionPickerWillDismiss. - */ - "onDidPresent"?: (event: IonPickerLegacyCustomEvent) => void; - /** - * Emitted after the picker has dismissed. - */ - "onIonPickerDidDismiss"?: (event: IonPickerLegacyCustomEvent) => void; - /** - * Emitted after the picker has presented. - */ - "onIonPickerDidPresent"?: (event: IonPickerLegacyCustomEvent) => void; - /** - * Emitted before the picker has dismissed. - */ - "onIonPickerWillDismiss"?: (event: IonPickerLegacyCustomEvent) => void; - /** - * Emitted before the picker has presented. - */ - "onIonPickerWillPresent"?: (event: IonPickerLegacyCustomEvent) => void; - /** - * Emitted before the picker has dismissed. Shorthand for ionPickerWillDismiss. - */ - "onWillDismiss"?: (event: IonPickerLegacyCustomEvent) => void; - /** - * Emitted before the picker has presented. Shorthand for ionPickerWillPresent. - */ - "onWillPresent"?: (event: IonPickerLegacyCustomEvent) => void; - "overlayIndex": number; - /** - * If `true`, a backdrop will be displayed behind the picker. - * @default true - */ - "showBackdrop"?: boolean; - /** - * An ID corresponding to the trigger element that causes the picker to open when clicked. - */ - "trigger"?: string | undefined; - } - interface IonPickerLegacyColumn { - /** - * Picker column data - */ - "col": PickerColumn; - /** - * Emitted when the selected value has changed - */ - "onIonPickerColChange"?: (event: IonPickerLegacyColumnCustomEvent) => void; - } interface IonPopover { /** * Describes how to align the popover content with the `reference` point. Defaults to `"center"` for `ios` mode, and `"start"` for `md` mode. @@ -9612,18 +9344,6 @@ declare namespace LocalJSX { "value": string; "color": Color; } - interface IonPickerLegacyAttributes { - "overlayIndex": number; - "hasController": boolean; - "keyboardClose": boolean; - "cssClass": string | string[]; - "duration": number; - "showBackdrop": boolean; - "backdropDismiss": boolean; - "animated": boolean; - "isOpen": boolean; - "trigger": string | undefined; - } interface IonPopoverAttributes { "hasController": boolean; "overlayIndex": number; @@ -9982,8 +9702,6 @@ declare namespace LocalJSX { "ion-picker": IonPicker; "ion-picker-column": Omit & { [K in keyof IonPickerColumn & keyof IonPickerColumnAttributes]?: IonPickerColumn[K] } & { [K in keyof IonPickerColumn & keyof IonPickerColumnAttributes as `attr:${K}`]?: IonPickerColumnAttributes[K] } & { [K in keyof IonPickerColumn & keyof IonPickerColumnAttributes as `prop:${K}`]?: IonPickerColumn[K] }; "ion-picker-column-option": Omit & { [K in keyof IonPickerColumnOption & keyof IonPickerColumnOptionAttributes]?: IonPickerColumnOption[K] } & { [K in keyof IonPickerColumnOption & keyof IonPickerColumnOptionAttributes as `attr:${K}`]?: IonPickerColumnOptionAttributes[K] } & { [K in keyof IonPickerColumnOption & keyof IonPickerColumnOptionAttributes as `prop:${K}`]?: IonPickerColumnOption[K] }; - "ion-picker-legacy": Omit & { [K in keyof IonPickerLegacy & keyof IonPickerLegacyAttributes]?: IonPickerLegacy[K] } & { [K in keyof IonPickerLegacy & keyof IonPickerLegacyAttributes as `attr:${K}`]?: IonPickerLegacyAttributes[K] } & { [K in keyof IonPickerLegacy & keyof IonPickerLegacyAttributes as `prop:${K}`]?: IonPickerLegacy[K] } & OneOf<"overlayIndex", IonPickerLegacy["overlayIndex"], IonPickerLegacyAttributes["overlayIndex"]>; - "ion-picker-legacy-column": IonPickerLegacyColumn; "ion-popover": Omit & { [K in keyof IonPopover & keyof IonPopoverAttributes]?: IonPopover[K] } & { [K in keyof IonPopover & keyof IonPopoverAttributes as `attr:${K}`]?: IonPopoverAttributes[K] } & { [K in keyof IonPopover & keyof IonPopoverAttributes as `prop:${K}`]?: IonPopover[K] } & OneOf<"overlayIndex", IonPopover["overlayIndex"], IonPopoverAttributes["overlayIndex"]>; "ion-progress-bar": Omit & { [K in keyof IonProgressBar & keyof IonProgressBarAttributes]?: IonProgressBar[K] } & { [K in keyof IonProgressBar & keyof IonProgressBarAttributes as `attr:${K}`]?: IonProgressBarAttributes[K] } & { [K in keyof IonProgressBar & keyof IonProgressBarAttributes as `prop:${K}`]?: IonProgressBar[K] }; "ion-radio": Omit & { [K in keyof IonRadio & keyof IonRadioAttributes]?: IonRadio[K] } & { [K in keyof IonRadio & keyof IonRadioAttributes as `attr:${K}`]?: IonRadioAttributes[K] } & { [K in keyof IonRadio & keyof IonRadioAttributes as `prop:${K}`]?: IonRadio[K] }; @@ -10085,8 +9803,6 @@ declare module "@stencil/core" { "ion-picker": LocalJSX.IntrinsicElements["ion-picker"] & JSXBase.HTMLAttributes; "ion-picker-column": LocalJSX.IntrinsicElements["ion-picker-column"] & JSXBase.HTMLAttributes; "ion-picker-column-option": LocalJSX.IntrinsicElements["ion-picker-column-option"] & JSXBase.HTMLAttributes; - "ion-picker-legacy": LocalJSX.IntrinsicElements["ion-picker-legacy"] & JSXBase.HTMLAttributes; - "ion-picker-legacy-column": LocalJSX.IntrinsicElements["ion-picker-legacy-column"] & JSXBase.HTMLAttributes; "ion-popover": LocalJSX.IntrinsicElements["ion-popover"] & JSXBase.HTMLAttributes; "ion-progress-bar": LocalJSX.IntrinsicElements["ion-progress-bar"] & JSXBase.HTMLAttributes; "ion-radio": LocalJSX.IntrinsicElements["ion-radio"] & JSXBase.HTMLAttributes; diff --git a/core/src/components/app/test/safe-area/app.e2e.ts b/core/src/components/app/test/safe-area/app.e2e.ts index 336cdffcc45..9741499a736 100644 --- a/core/src/components/app/test/safe-area/app.e2e.ts +++ b/core/src/components/app/test/safe-area/app.e2e.ts @@ -37,9 +37,6 @@ configs({ directions: ['ltr'] }).forEach(({ config, title, screenshot }) => { test('should not have visual regressions with menu', async ({ page }) => { await testOverlay(page, '#show-menu', 'ionDidOpen', 'menu'); }); - test('should not have visual regressions with picker', async ({ page }) => { - await testOverlay(page, '#show-picker', 'ionPickerDidPresent', 'picker'); - }); test('should not have visual regressions with toast', async ({ page }) => { await testOverlay(page, '#show-toast', 'ionToastDidPresent', 'toast'); }); diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Chrome-linux.png index 236e564c681..fd0723f0b10 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Firefox-linux.png index d6978bd6ab2..836fa89e6ee 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Safari-linux.png index 7b6912a77b6..adfac749f03 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png index 1faef728a96..de9f1f5938c 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png index 2160bf71c71..7c35e90f7f6 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Safari-linux.png index e18e09840ac..e6d505459d0 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Chrome-linux.png index 2925d01cc40..27cfb472784 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Firefox-linux.png index 625d61957f4..fb99cd5c8a8 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Safari-linux.png index 636bbd74326..75d7c9c8737 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Chrome-linux.png index 6bf467070f7..b9acad9f993 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Firefox-linux.png index 31175c53c52..14dd0e52a46 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Safari-linux.png index d1e17793401..0a28f3a24ed 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 23e78ac278d..00000000000 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 6796d9a484f..00000000000 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 2d747790320..00000000000 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 3185d3f27f4..00000000000 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index eaa50d6e5fb..00000000000 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index a291fe4c078..00000000000 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Chrome-linux.png index 67e9728bdc4..287ecf3e58d 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Firefox-linux.png index 6d49226ac1d..3547ba868e2 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Safari-linux.png index 3619f94220f..9a4043a80d6 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Chrome-linux.png index 52c2532ebcd..0f4d355207c 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png index e8afb2df67d..69d433da0cf 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Safari-linux.png index fd6120b1681..75b8379f4b7 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/index.html b/core/src/components/app/test/safe-area/index.html index 4ad7e6beed4..6c2974100fb 100644 --- a/core/src/components/app/test/safe-area/index.html +++ b/core/src/components/app/test/safe-area/index.html @@ -55,7 +55,6 @@ - @@ -115,26 +114,6 @@ await menu.open(); } - async function showPicker() { - const picker = Object.assign(document.createElement('ion-picker-legacy'), { - columns: [ - { - name: 'Picker', - selectedIndex: 2, - options: [ - { text: 'First' }, - { text: 'Second' }, - { text: 'Third' }, - { text: 'Fourth' }, - { text: 'Fifth' }, - ], - }, - ], - }); - document.body.appendChild(picker); - await picker.present(); - } - async function showToast() { const toast = Object.assign(document.createElement('ion-toast'), { message: 'Hello world!', diff --git a/core/src/components/picker-legacy-column/picker-column.ios.scss b/core/src/components/picker-legacy-column/picker-column.ios.scss deleted file mode 100644 index 16c9e511571..00000000000 --- a/core/src/components/picker-legacy-column/picker-column.ios.scss +++ /dev/null @@ -1,47 +0,0 @@ -@import "./picker-column"; -@import "../picker-legacy/picker.ios.vars"; - -// iOS Picker Column -// -------------------------------------------------- - -.picker-col { - @include padding($picker-ios-column-padding-top, $picker-ios-column-padding-end, $picker-ios-column-padding-bottom, $picker-ios-column-padding-start); - - transform-style: preserve-3d; -} - -.picker-prefix, -.picker-suffix, -.picker-opts { - top: $picker-ios-option-offset-y; - - transform-style: preserve-3d; - - color: inherit; - - font-size: $picker-ios-option-font-size; - - line-height: $picker-ios-option-height; - pointer-events: none; -} - -.picker-opt { - @include padding($picker-ios-option-padding-top, $picker-ios-option-padding-end, $picker-ios-option-padding-bottom, $picker-ios-option-padding-start); - @include margin(0); - @include transform-origin(center, center); - - height: 46px; - - transform-style: preserve-3d; - - transition-timing-function: ease-out; - - background: transparent; - color: inherit; - - font-size: $picker-ios-option-font-size; - - line-height: $picker-ios-option-height; - backface-visibility: hidden; - pointer-events: auto; -} diff --git a/core/src/components/picker-legacy-column/picker-column.md.scss b/core/src/components/picker-legacy-column/picker-column.md.scss deleted file mode 100644 index 841f30b4b8f..00000000000 --- a/core/src/components/picker-legacy-column/picker-column.md.scss +++ /dev/null @@ -1,51 +0,0 @@ -@import "./picker-column"; -@import "../picker-legacy/picker.md.vars"; - -// Material Design Picker Column -// -------------------------------------------------- - -.picker-col { - @include padding($picker-md-column-padding-top, $picker-md-column-padding-end, $picker-md-column-padding-bottom, $picker-md-column-padding-start); - - transform-style: preserve-3d; -} - -.picker-prefix, -.picker-suffix, -.picker-opts { - top: $picker-md-option-offset-y; - - transform-style: preserve-3d; - - color: inherit; - - font-size: $picker-md-option-font-size; - - line-height: $picker-md-option-height; - pointer-events: none; -} - - -.picker-opt { - @include margin(0); - @include padding($picker-md-option-padding-top, $picker-md-option-padding-end, $picker-md-option-padding-bottom, $picker-md-option-padding-start); - - height: 43px; - - transition-timing-function: ease-out; - - background: transparent; - color: inherit; - - font-size: $picker-md-option-font-size; - - line-height: $picker-md-option-height; - backface-visibility: hidden; - pointer-events: auto; -} - -.picker-prefix, -.picker-suffix, -.picker-opt.picker-opt-selected { - color: $picker-md-option-selected-color; -} diff --git a/core/src/components/picker-legacy-column/picker-column.scss b/core/src/components/picker-legacy-column/picker-column.scss deleted file mode 100644 index 9fe984c4e46..00000000000 --- a/core/src/components/picker-legacy-column/picker-column.scss +++ /dev/null @@ -1,89 +0,0 @@ -@import "../../themes/ionic.globals"; - -// Picker Column -// -------------------------------------------------- - -.picker-col { - display: flex; - position: relative; - - flex: 1; - justify-content: center; - - height: 100%; - box-sizing: content-box; - - contain: content; -} - -.picker-opts { - position: relative; - - flex: 1; - - max-width: 100%; -} - -// contain property is supported by Chrome -.picker-opt { - @include position(0, null, null, 0); - - display: block; - position: absolute; - - width: 100%; - - border: 0; - - text-align: center; - text-overflow: ellipsis; - - white-space: nowrap; - - contain: strict; - overflow: hidden; - will-change: transform; -} - -.picker-opt.picker-opt-disabled { - pointer-events: none; -} - -.picker-opt-disabled { - opacity: 0; -} - -.picker-opts-left { - justify-content: flex-start; -} - -.picker-opts-right { - justify-content: flex-end; -} - -.picker-opt { - &:active, - &:focus { - outline: none; - } -} - -.picker-prefix { - position: relative; - - flex: 1; - - text-align: end; - - white-space: nowrap; -} - -.picker-suffix { - position: relative; - - flex: 1; - - text-align: start; - - white-space: nowrap; -} diff --git a/core/src/components/picker-legacy-column/picker-column.tsx b/core/src/components/picker-legacy-column/picker-column.tsx deleted file mode 100644 index 93bb7544895..00000000000 --- a/core/src/components/picker-legacy-column/picker-column.tsx +++ /dev/null @@ -1,440 +0,0 @@ -import type { ComponentInterface, EventEmitter } from '@stencil/core'; -import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core'; -import { clamp } from '@utils/helpers'; -import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '@utils/native/haptic'; -import { getClassMap } from '@utils/theme'; - -import { getIonMode } from '../../global/ionic-global'; -import type { Gesture, GestureDetail } from '../../interface'; -import type { PickerColumn } from '../picker-legacy/picker-interface'; - -/** - * @internal - */ -@Component({ - tag: 'ion-picker-legacy-column', - styleUrls: { - ios: 'picker-column.ios.scss', - md: 'picker-column.md.scss', - }, -}) -export class PickerColumnCmp implements ComponentInterface { - private bounceFrom!: number; - private lastIndex?: number; - private minY!: number; - private maxY!: number; - private optHeight = 0; - private rotateFactor = 0; - private scaleFactor = 1; - private velocity = 0; - private y = 0; - private optsEl?: HTMLElement; - private gesture?: Gesture; - private rafId?: ReturnType; - private tmrId?: ReturnType; - private noAnimate = true; - // `colDidChange` is a flag that gets set when the column is changed - // dynamically. When this flag is set, the column will refresh - // after the component re-renders to incorporate the new column data. - // This is necessary because `this.refresh` queries for the option elements, - // so it needs to wait for the latest elements to be available in the DOM. - // Ex: column is created with 3 options. User updates the column data - // to have 5 options. The column will still think it only has 3 options. - private colDidChange = false; - - @Element() el!: HTMLElement; - - /** - * Emitted when the selected value has changed - * @internal - */ - @Event() ionPickerColChange!: EventEmitter; - - /** Picker column data */ - @Prop() col!: PickerColumn; - @Watch('col') - protected colChanged() { - this.colDidChange = true; - } - - async connectedCallback() { - let pickerRotateFactor = 0; - let pickerScaleFactor = 0.81; - - const mode = getIonMode(this); - - if (mode === 'ios') { - pickerRotateFactor = -0.46; - pickerScaleFactor = 1; - } - - this.rotateFactor = pickerRotateFactor; - this.scaleFactor = pickerScaleFactor; - - this.gesture = (await import('../../utils/gesture')).createGesture({ - el: this.el, - gestureName: 'picker-swipe', - gesturePriority: 100, - threshold: 0, - passive: false, - onStart: (ev) => this.onStart(ev), - onMove: (ev) => this.onMove(ev), - onEnd: (ev) => this.onEnd(ev), - }); - this.gesture.enable(); - // Options have not been initialized yet - // Animation must be disabled through the `noAnimate` flag - // Otherwise, the options will render - // at the top of the column and transition down - this.tmrId = setTimeout(() => { - this.noAnimate = false; - // After initialization, `refresh()` will be called - // At this point, animation will be enabled. The options will - // animate as they are being selected. - this.refresh(true); - }, 250); - } - - componentDidLoad() { - this.onDomChange(); - } - - componentDidUpdate() { - // Options may have changed since last update. - if (this.colDidChange) { - // Animation must be disabled through the `onDomChange` parameter. - // Otherwise, the recently added options will render - // at the top of the column and transition down - this.onDomChange(true, false); - this.colDidChange = false; - } - } - - disconnectedCallback() { - if (this.rafId !== undefined) cancelAnimationFrame(this.rafId); - if (this.tmrId) clearTimeout(this.tmrId); - if (this.gesture) { - this.gesture.destroy(); - this.gesture = undefined; - } - } - - private emitColChange() { - this.ionPickerColChange.emit(this.col); - } - - private setSelected(selectedIndex: number, duration: number) { - // if there is a selected index, then figure out it's y position - // if there isn't a selected index, then just use the top y position - const y = selectedIndex > -1 ? -(selectedIndex * this.optHeight) : 0; - - this.velocity = 0; - - // set what y position we're at - if (this.rafId !== undefined) cancelAnimationFrame(this.rafId); - this.update(y, duration, true); - - this.emitColChange(); - } - - private update(y: number, duration: number, saveY: boolean) { - if (!this.optsEl) { - return; - } - - // ensure we've got a good round number :) - let translateY = 0; - let translateZ = 0; - const { col, rotateFactor } = this; - const prevSelected = col.selectedIndex; - const selectedIndex = (col.selectedIndex = this.indexForY(-y)); - const durationStr = duration === 0 ? '' : duration + 'ms'; - const scaleStr = `scale(${this.scaleFactor})`; - - const children = this.optsEl.children; - for (let i = 0; i < children.length; i++) { - const button = children[i] as HTMLElement; - const opt = col.options[i]; - const optOffset = i * this.optHeight + y; - let transform = ''; - - if (rotateFactor !== 0) { - const rotateX = optOffset * rotateFactor; - if (Math.abs(rotateX) <= 90) { - translateY = 0; - translateZ = 90; - transform = `rotateX(${rotateX}deg) `; - } else { - translateY = -9999; - } - } else { - translateZ = 0; - translateY = optOffset; - } - - const selected = selectedIndex === i; - transform += `translate3d(0px,${translateY}px,${translateZ}px) `; - if (this.scaleFactor !== 1 && !selected) { - transform += scaleStr; - } - - // Update transition duration - if (this.noAnimate) { - opt.duration = 0; - button.style.transitionDuration = ''; - } else if (duration !== opt.duration) { - opt.duration = duration; - button.style.transitionDuration = durationStr; - } - - // Update transform - if (transform !== opt.transform) { - opt.transform = transform; - } - button.style.transform = transform; - - /** - * Ensure that the select column - * item has the selected class - */ - opt.selected = selected; - - if (selected) { - button.classList.add(PICKER_OPT_SELECTED); - } else { - button.classList.remove(PICKER_OPT_SELECTED); - } - } - this.col.prevSelected = prevSelected; - - if (saveY) { - this.y = y; - } - - if (this.lastIndex !== selectedIndex) { - // have not set a last index yet - hapticSelectionChanged(); - this.lastIndex = selectedIndex; - } - } - - private decelerate() { - if (this.velocity !== 0) { - // still decelerating - this.velocity *= DECELERATION_FRICTION; - - // do not let it go slower than a velocity of 1 - this.velocity = this.velocity > 0 ? Math.max(this.velocity, 1) : Math.min(this.velocity, -1); - - let y = this.y + this.velocity; - - if (y > this.minY) { - // whoops, it's trying to scroll up farther than the options we have! - y = this.minY; - this.velocity = 0; - } else if (y < this.maxY) { - // gahh, it's trying to scroll down farther than we can! - y = this.maxY; - this.velocity = 0; - } - - this.update(y, 0, true); - const notLockedIn = Math.round(y) % this.optHeight !== 0 || Math.abs(this.velocity) > 1; - if (notLockedIn) { - // isn't locked in yet, keep decelerating until it is - this.rafId = requestAnimationFrame(() => this.decelerate()); - } else { - this.velocity = 0; - this.emitColChange(); - hapticSelectionEnd(); - } - } else if (this.y % this.optHeight !== 0) { - // needs to still get locked into a position so options line up - const currentPos = Math.abs(this.y % this.optHeight); - - // create a velocity in the direction it needs to scroll - this.velocity = currentPos > this.optHeight / 2 ? 1 : -1; - - this.decelerate(); - } - } - - private indexForY(y: number) { - return Math.min(Math.max(Math.abs(Math.round(y / this.optHeight)), 0), this.col.options.length - 1); - } - - private onStart(detail: GestureDetail) { - // We have to prevent default in order to block scrolling under the picker - // but we DO NOT have to stop propagation, since we still want - // some "click" events to capture - if (detail.event.cancelable) { - detail.event.preventDefault(); - } - detail.event.stopPropagation(); - - hapticSelectionStart(); - - // reset everything - if (this.rafId !== undefined) cancelAnimationFrame(this.rafId); - const options = this.col.options; - let minY = options.length - 1; - let maxY = 0; - for (let i = 0; i < options.length; i++) { - if (!options[i].disabled) { - minY = Math.min(minY, i); - maxY = Math.max(maxY, i); - } - } - - this.minY = -(minY * this.optHeight); - this.maxY = -(maxY * this.optHeight); - } - - private onMove(detail: GestureDetail) { - if (detail.event.cancelable) { - detail.event.preventDefault(); - } - detail.event.stopPropagation(); - - // update the scroll position relative to pointer start position - let y = this.y + detail.deltaY; - - if (y > this.minY) { - // scrolling up higher than scroll area - y = Math.pow(y, 0.8); - this.bounceFrom = y; - } else if (y < this.maxY) { - // scrolling down below scroll area - y += Math.pow(this.maxY - y, 0.9); - this.bounceFrom = y; - } else { - this.bounceFrom = 0; - } - - this.update(y, 0, false); - } - - private onEnd(detail: GestureDetail) { - if (this.bounceFrom > 0) { - // bounce back up - this.update(this.minY, 100, true); - this.emitColChange(); - return; - } else if (this.bounceFrom < 0) { - // bounce back down - this.update(this.maxY, 100, true); - this.emitColChange(); - return; - } - - this.velocity = clamp(-MAX_PICKER_SPEED, detail.velocityY * 23, MAX_PICKER_SPEED); - if (this.velocity === 0 && detail.deltaY === 0) { - const opt = (detail.event.target as Element).closest('.picker-opt'); - if (opt?.hasAttribute('opt-index')) { - this.setSelected(parseInt(opt.getAttribute('opt-index')!, 10), TRANSITION_DURATION); - } - } else { - this.y += detail.deltaY; - - if (Math.abs(detail.velocityY) < 0.05) { - const isScrollingUp = detail.deltaY > 0; - const optHeightFraction = (Math.abs(this.y) % this.optHeight) / this.optHeight; - - if (isScrollingUp && optHeightFraction > 0.5) { - this.velocity = Math.abs(this.velocity) * -1; - } else if (!isScrollingUp && optHeightFraction <= 0.5) { - this.velocity = Math.abs(this.velocity); - } - } - - this.decelerate(); - } - } - - private refresh(forceRefresh?: boolean, animated?: boolean) { - let min = this.col.options.length - 1; - let max = 0; - const options = this.col.options; - for (let i = 0; i < options.length; i++) { - if (!options[i].disabled) { - min = Math.min(min, i); - max = Math.max(max, i); - } - } - - /** - * Only update selected value if column has a - * velocity of 0. If it does not, then the - * column is animating might land on - * a value different than the value at - * selectedIndex - */ - if (this.velocity !== 0) { - return; - } - - const selectedIndex = clamp(min, this.col.selectedIndex ?? 0, max); - if (this.col.prevSelected !== selectedIndex || forceRefresh) { - const y = selectedIndex * this.optHeight * -1; - const duration = animated ? TRANSITION_DURATION : 0; - this.velocity = 0; - this.update(y, duration, true); - } - } - - private onDomChange(forceRefresh?: boolean, animated?: boolean) { - const colEl = this.optsEl; - if (colEl) { - // DOM READ - // We perfom a DOM read over a rendered item, this needs to happen after the first render or after the column has changed - this.optHeight = colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0; - } - this.refresh(forceRefresh, animated); - } - - render() { - const col = this.col; - const mode = getIonMode(this); - return ( - - {col.prefix && ( -
- {col.prefix} -
- )} -
(this.optsEl = el)}> - {col.options.map((o, index) => ( - - ))} -
- {col.suffix && ( -
- {col.suffix} -
- )} - - ); - } -} - -const PICKER_OPT_SELECTED = 'picker-opt-selected'; -const DECELERATION_FRICTION = 0.97; -const MAX_PICKER_SPEED = 90; -const TRANSITION_DURATION = 150; diff --git a/core/src/components/picker-legacy-column/test/picker-column-aria.spec.tsx b/core/src/components/picker-legacy-column/test/picker-column-aria.spec.tsx deleted file mode 100644 index d6b95ab6738..00000000000 --- a/core/src/components/picker-legacy-column/test/picker-column-aria.spec.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { h } from '@stencil/core'; -import { newSpecPage } from '@stencil/core/testing'; - -import { PickerColumnCmp } from '../picker-column'; -/** - * Stencil has an issue where having multiple spec tests in the same file, - * will cause an exception to be thrown. This test is located in a separate file - * to avoid this issue: https://github.com/ionic-team/stencil/issues/4053 - */ -describe('picker-column', () => { - it('should add aria-label to the picker column option', async () => { - const col = { - options: [ - { - text: 'C#', - ariaLabel: 'C Sharp', - }, - { - text: 'Java', - }, - ], - name: 'programmingLanguages', - }; - - const page = await newSpecPage({ - components: [PickerColumnCmp], - template: () => , - }); - - const firstOption = page.body.querySelector('ion-picker-legacy-column .picker-opt:nth-child(1)')!; - const secondOption = page.body.querySelector('ion-picker-legacy-column .picker-opt:nth-child(2)')!; - - expect(firstOption.getAttribute('aria-label')).toBe('C Sharp'); - expect(secondOption.getAttribute('aria-label')).toBe(null); - }); -}); diff --git a/core/src/components/picker-legacy-column/test/picker-column-dynamic.spec.tsx b/core/src/components/picker-legacy-column/test/picker-column-dynamic.spec.tsx deleted file mode 100644 index 71c825d010d..00000000000 --- a/core/src/components/picker-legacy-column/test/picker-column-dynamic.spec.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { h } from '@stencil/core'; -import { newSpecPage } from '@stencil/core/testing'; - -import { PickerColumnCmp } from '../picker-column'; - -describe('picker-column: dynamic options', () => { - /** - * Issue: https://github.com/ionic-team/ionic-framework/issues/21763 - */ - it('should add an option', async () => { - const defaultOptions = [ - { text: 'Dog', value: 'dog' }, - { text: 'Cat', value: 'cat' }, - ]; - - const page = await newSpecPage({ - components: [PickerColumnCmp], - template: () => ( - - ), - }); - - const pickerCol = page.body.querySelector('ion-picker-legacy-column')!; - - pickerCol.col = { - options: [...defaultOptions, { text: 'Carrot', value: 'carrot' }], - name: 'vegetables', - }; - - await page.waitForChanges(); - - const pickerOpt = pickerCol.querySelector('.picker-opt:nth(2)')!; - expect(pickerOpt.getAttribute('style')).toContain('transform'); - }); -}); diff --git a/core/src/components/picker-legacy-column/test/picker-column.spec.tsx b/core/src/components/picker-legacy-column/test/picker-column.spec.tsx deleted file mode 100644 index 172a9ec9763..00000000000 --- a/core/src/components/picker-legacy-column/test/picker-column.spec.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { h } from '@stencil/core'; -import { newSpecPage } from '@stencil/core/testing'; - -import { PickerColumnCmp } from '../picker-column'; - -describe('picker-column', () => { - it('should add class to host of component', async () => { - const col = { cssClass: 'test-class', options: [], name: 'col' }; - - const page = await newSpecPage({ - components: [PickerColumnCmp], - template: () => , - }); - - const pickerCol = page.body.querySelector('ion-picker-legacy-column')!; - expect(pickerCol.classList.contains('test-class')).toBe(true); - }); -}); diff --git a/core/src/components/picker-legacy-column/test/standalone/index.html b/core/src/components/picker-legacy-column/test/standalone/index.html deleted file mode 100644 index f269eb055a5..00000000000 --- a/core/src/components/picker-legacy-column/test/standalone/index.html +++ /dev/null @@ -1,77 +0,0 @@ - - - - - Picker Column - Standalone - - - - - - - - - - - - - - - diff --git a/core/src/components/picker-legacy-column/test/standalone/picker-column.e2e.ts b/core/src/components/picker-legacy-column/test/standalone/picker-column.e2e.ts deleted file mode 100644 index f60dba03bd9..00000000000 --- a/core/src/components/picker-legacy-column/test/standalone/picker-column.e2e.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { expect } from '@playwright/test'; -import { configs, test } from '@utils/test/playwright'; - -configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { - test.describe(title('picker-column'), () => { - test.beforeEach(async ({ page }) => { - await page.goto(`/src/components/picker-legacy-column/test/standalone`, config); - }); - - test('should present picker without ion-app', async ({ page }) => { - const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent'); - - const picker = page.locator('ion-picker-legacy'); - - await page.click('#single-column-button'); - - await ionPickerDidPresent.next(); - - await expect(picker).toBeVisible(); - }); - - test('should have the correct selectedIndex and prevSelected', async ({ page }) => { - test.info().annotations.push({ - type: 'issue', - description: 'https://github.com/ionic-team/ionic-framework/issues/21764', - }); - - const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent'); - const ionPickerColChangeEvent = await page.spyOnEvent('ionPickerColChange'); - - const column = page.locator('ion-picker-legacy-column'); - const secondOption = column.locator('.picker-opt').nth(1); - - await page.click('#single-column-button'); - - await ionPickerDidPresent.next(); - - await secondOption.click(); - - await ionPickerColChangeEvent.next(); - - expect(ionPickerColChangeEvent.events[0].detail.prevSelected).toBe(0); - expect(ionPickerColChangeEvent.events[0].detail.selectedIndex).toBe(1); - }); - }); -}); diff --git a/core/src/components/picker-legacy-column/test/test.utils.ts b/core/src/components/picker-legacy-column/test/test.utils.ts deleted file mode 100644 index 658b32a32f7..00000000000 --- a/core/src/components/picker-legacy-column/test/test.utils.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { expect } from '@playwright/test'; -import type { E2EPage, ScreenshotFn } from '@utils/test/playwright'; - -/** - * Visual regression tests for picker-column. - * @param page - The page to run the tests on. - * @param screenshot - The screenshot function to generate unique screenshot names - * @param buttonSelector - The selector for the button that opens the picker. - * @param description - The description to amend to the screenshot names (typically 'single' or 'multiple'). - */ -export async function testPickerColumn( - page: E2EPage, - screenshot: ScreenshotFn, - buttonSelector: string, - description: string -) { - const ionPickerDidPresentSpy = await page.spyOnEvent('ionPickerDidPresent'); - - await page.click(buttonSelector); - await ionPickerDidPresentSpy.next(); - - await page.waitForChanges(); - - await expect(page).toHaveScreenshot(screenshot(`picker-${description}-column-initial`)); - - // TODO FW-3403 - /* - const columns = page.locator('.picker-opt-selected'); - const spy = await page.spyOnEvent('ionPickerColChange'); - - const screenshots = []; - - for (let i = 0; i < (await columns.count()); i++) { - const column = columns.nth(i); - - await dragElementBy(column, page, 0, -100); - await spy.next(); - - await page.waitForChanges(); - - screenshots.push({ - name: screenshot(`picker-${description}-column-diff-${i}`), - screenshot: await page.screenshot(), - }); - } - - for (const screenshot of screenshots) { - expect(screenshot.screenshot).toMatchSnapshot(screenshot.name); - } - */ -} diff --git a/core/src/components/picker-legacy/animations/ios.enter.ts b/core/src/components/picker-legacy/animations/ios.enter.ts deleted file mode 100644 index 113a6da400c..00000000000 --- a/core/src/components/picker-legacy/animations/ios.enter.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { createAnimation } from '@utils/animation/animation'; - -import type { Animation } from '../../../interface'; - -/** - * iOS Picker Enter Animation - */ -export const iosEnterAnimation = (baseEl: HTMLElement): Animation => { - const baseAnimation = createAnimation(); - const backdropAnimation = createAnimation(); - const wrapperAnimation = createAnimation(); - - backdropAnimation - .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') - .beforeStyles({ - 'pointer-events': 'none', - }) - .afterClearStyles(['pointer-events']); - - wrapperAnimation - .addElement(baseEl.querySelector('.picker-wrapper')!) - .fromTo('transform', 'translateY(100%)', 'translateY(0%)'); - - return baseAnimation - .addElement(baseEl) - .easing('cubic-bezier(.36,.66,.04,1)') - .duration(400) - .addAnimation([backdropAnimation, wrapperAnimation]); -}; diff --git a/core/src/components/picker-legacy/animations/ios.leave.ts b/core/src/components/picker-legacy/animations/ios.leave.ts deleted file mode 100644 index 60de8d1c17b..00000000000 --- a/core/src/components/picker-legacy/animations/ios.leave.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { createAnimation } from '@utils/animation/animation'; - -import type { Animation } from '../../../interface'; - -/** - * iOS Picker Leave Animation - */ -export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => { - const baseAnimation = createAnimation(); - const backdropAnimation = createAnimation(); - const wrapperAnimation = createAnimation(); - - backdropAnimation - .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 'var(--backdrop-opacity)', 0.01); - - wrapperAnimation - .addElement(baseEl.querySelector('.picker-wrapper')!) - .fromTo('transform', 'translateY(0%)', 'translateY(100%)'); - - return baseAnimation - .addElement(baseEl) - .easing('cubic-bezier(.36,.66,.04,1)') - .duration(400) - .addAnimation([backdropAnimation, wrapperAnimation]); -}; diff --git a/core/src/components/picker-legacy/picker-interface.ts b/core/src/components/picker-legacy/picker-interface.ts deleted file mode 100644 index 6a01a8d437a..00000000000 --- a/core/src/components/picker-legacy/picker-interface.ts +++ /dev/null @@ -1,56 +0,0 @@ -import type { AnimationBuilder, Mode } from '../../interface'; - -export interface PickerOptions { - columns: PickerColumn[]; - buttons?: PickerButton[]; - cssClass?: string | string[]; - showBackdrop?: boolean; - backdropDismiss?: boolean; - animated?: boolean; - - mode?: Mode; - keyboardClose?: boolean; - id?: string; - htmlAttributes?: { [key: string]: any }; - - enterAnimation?: AnimationBuilder; - leaveAnimation?: AnimationBuilder; -} - -export interface PickerButton { - text?: string; - role?: string; - cssClass?: string | string[]; - handler?: (value: any) => boolean | void; -} - -export interface PickerColumn { - name: string; - align?: string; - /** - * Changing this value allows the initial value of a picker column to be set. - */ - selectedIndex?: number; - prevSelected?: number; - prefix?: string; - suffix?: string; - options: PickerColumnOption[]; - cssClass?: string | string[]; - columnWidth?: string; - prefixWidth?: string; - suffixWidth?: string; - optionsWidth?: string; -} - -export interface PickerColumnOption { - text?: string; - value?: any; - disabled?: boolean; - duration?: number; - transform?: string; - selected?: boolean; - /** - * The optional text to assign as the aria-label on the picker column option. - */ - ariaLabel?: string; -} diff --git a/core/src/components/picker-legacy/picker.ios.scss b/core/src/components/picker-legacy/picker.ios.scss deleted file mode 100644 index 38eae1ee58f..00000000000 --- a/core/src/components/picker-legacy/picker.ios.scss +++ /dev/null @@ -1,97 +0,0 @@ -@import "./picker"; -@import "./picker.ios.vars"; - -// iOS Picker -// -------------------------------------------------- - -:host { - --background: #{$picker-ios-background-color}; - --border-width: #{1px 0 0}; - --border-color: #{$picker-ios-border-color}; - --height: #{$picker-ios-height}; - --backdrop-opacity: var(--ion-backdrop-opacity, 0.26); - - color: $picker-ios-option-text-color; -} - -.picker-toolbar { - display: flex; - - height: $picker-ios-toolbar-height; - - border-bottom: $hairlines-width solid var(--border-color); -} - -.picker-toolbar-button { - flex: 1; - - text-align: end; -} - -.picker-toolbar-button:last-child .picker-button { - font-weight: $picker-ios-button-strong-font-weight; -} - -.picker-toolbar-button:first-child { - font-weight: normal; - - text-align: start; -} - -.picker-button, -.picker-button.ion-activated { - @include margin(0); - @include padding($picker-ios-button-padding-top, $picker-ios-button-padding-end, $picker-ios-button-padding-bottom, $picker-ios-button-padding-start); - - height: $picker-ios-button-height; - - background: transparent; - color: $picker-ios-button-text-color; - - font-size: $picker-ios-button-font-size; -} - -.picker-columns { - height: $picker-ios-height - $picker-ios-toolbar-height - 1; - perspective: $picker-ios-column-perspective; -} - -.picker-above-highlight { - @include position(0, null, null, 0); - @include transform(translate3d(0, 0, 90px)); - - display: block; - position: absolute; - - width: 100%; - height: $picker-ios-option-offset-y + 4px; - - border-bottom: 1px solid var(--border-color); - - background: linear-gradient( - to bottom, - $picker-ios-top-background-color 20%, - $picker-ios-bottom-background-color 100%); - - z-index: 10; -} - -.picker-below-highlight { - @include position($picker-ios-option-offset-y + $picker-ios-option-height - 4, null, null, 0); - @include transform(translate3d(0, 0, 90px)); - - display: block; - position: absolute; - - width: 100%; - height: $picker-ios-option-offset-y + $picker-ios-option-height; - - border-top: 1px solid var(--border-color); - - background: linear-gradient( - to top, - $picker-ios-top-background-color 30%, - $picker-ios-bottom-background-color 100%); - - z-index: 11; -} diff --git a/core/src/components/picker-legacy/picker.ios.vars.scss b/core/src/components/picker-legacy/picker.ios.vars.scss deleted file mode 100644 index 3009a441fb9..00000000000 --- a/core/src/components/picker-legacy/picker.ios.vars.scss +++ /dev/null @@ -1,88 +0,0 @@ -@import "../../themes/ionic.globals.ios"; - -// iOS Picker -// -------------------------------------------------- - -/// @prop - Height of the picker wrapper -$picker-ios-height: 260px; - -/// @prop - Border color of the picker wrapper -$picker-ios-border-color: $item-ios-border-color; - -/// @prop - Background Color of the picker wrapper -$picker-ios-background-color: $background-color; - -/// @prop - Top Background Color of the picker wrapper gradient -$picker-ios-top-background-color: var(--background, $picker-ios-background-color); - -/// @prop - Bottom Background Color alpha of the picker wrapper gradient -$picker-ios-bottom-background-color-alpha: .8; - -/// @prop - Bottom Background Color of the picker wrapper gradient -$picker-ios-bottom-background-color: rgba(var(--background-rgb, $background-color-rgb), $picker-ios-bottom-background-color-alpha); - -/// @prop - Height of the picker toolbar -$picker-ios-toolbar-height: 44px; - -/// @prop - Height of the picker button -$picker-ios-button-height: $picker-ios-toolbar-height; - -/// @prop - Text color of the picker button -$picker-ios-button-text-color: ion-color(primary, base); - -/// @prop - Font size of the picker button -$picker-ios-button-font-size: 16px; - -/// @prop - Padding top of the picker button -$picker-ios-button-padding-top: 0; - -/// @prop - Padding end of the picker button -$picker-ios-button-padding-end: 1em; - -/// @prop - Padding bottom of the picker button -$picker-ios-button-padding-bottom: $picker-ios-button-padding-top; - -/// @prop - Padding start of the picker button -$picker-ios-button-padding-start: $picker-ios-button-padding-end; - -/// @prop - Font weight of the strong picker button -$picker-ios-button-strong-font-weight: 600; - -/// @prop - Padding top of the picker column -$picker-ios-column-padding-top: 0; - -/// @prop - Padding end of the picker column -$picker-ios-column-padding-end: 4px; - -/// @prop - Padding bottom of the picker column -$picker-ios-column-padding-bottom: $picker-ios-column-padding-top; - -/// @prop - Padding start of the picker column -$picker-ios-column-padding-start: $picker-ios-column-padding-end; - -/// @prop - Perspective of the picker column -$picker-ios-column-perspective: 1000px; - -/// @prop - Padding top of the picker option -$picker-ios-option-padding-top: 0; - -/// @prop - Padding end of the picker option -$picker-ios-option-padding-end: $picker-ios-option-padding-top; - -/// @prop - Padding bottom of the picker option -$picker-ios-option-padding-bottom: $picker-ios-option-padding-top; - -/// @prop - Padding start of the picker option -$picker-ios-option-padding-start: $picker-ios-option-padding-end; - -/// @prop - Text color of the picker option -$picker-ios-option-text-color: $item-ios-color; - -/// @prop - Font size of the picker option -$picker-ios-option-font-size: 20px; - -/// @prop - Height of the picker option -$picker-ios-option-height: 42px; - -/// @prop - Offset y of the picker option -$picker-ios-option-offset-y: (($picker-ios-height - $picker-ios-toolbar-height) * 0.5) - ($picker-ios-option-height * 0.5) - 10; diff --git a/core/src/components/picker-legacy/picker.md.scss b/core/src/components/picker-legacy/picker.md.scss deleted file mode 100644 index c656e0de7b0..00000000000 --- a/core/src/components/picker-legacy/picker.md.scss +++ /dev/null @@ -1,84 +0,0 @@ -@import "./picker"; -@import "./picker.md.vars"; - -// Material Design Picker -// -------------------------------------------------- - -:host { - --background: #{$picker-md-background-color}; - --border-width: #{$hairlines-width 0 0}; - --border-color: #{$picker-md-border-color}; - --height: #{$picker-md-height}; - --backdrop-opacity: var(--ion-backdrop-opacity, 0.26); - - color: $picker-md-option-text-color; -} - -.picker-toolbar { - display: flex; - - justify-content: flex-end; - - height: $picker-md-toolbar-height; -} - -.picker-button, -.picker-button.ion-activated { - @include margin(0); - @include padding(0, 1.1em); - - height: $picker-md-button-height; - - background: $picker-md-button-background-color; - color: $picker-md-button-text-color; - - font-size: $picker-md-button-font-size; - font-weight: 500; - - text-transform: uppercase; - - box-shadow: none; -} - -.picker-columns { - height: $picker-md-height - $picker-md-toolbar-height; - perspective: 1800px; -} - -.picker-above-highlight { - @include position(0, null, null, 0); - @include transform(translate3d(0, 0, 90px)); - - position: absolute; - - width: 100%; - height: $picker-md-option-offset-y + 4px; - - border-bottom: 1px solid $picker-md-border-color; - - background: linear-gradient( - to bottom, - $picker-md-top-background-color 20%, - $picker-md-bottom-background-color 100%); - - z-index: 10; -} - -.picker-below-highlight { - @include position($picker-md-option-offset-y + $picker-md-option-height - 4, null, null, 0); - @include transform(translate3d(0, 0, 90px)); - - position: absolute; - - width: 100%; - height: $picker-md-option-offset-y + $picker-md-option-height; - - border-top: 1px solid $picker-md-border-color; - - background: linear-gradient( - to top, - $picker-md-top-background-color 30%, - $picker-md-bottom-background-color 100%); - - z-index: 11; -} diff --git a/core/src/components/picker-legacy/picker.md.vars.scss b/core/src/components/picker-legacy/picker.md.vars.scss deleted file mode 100644 index 10d9b50da62..00000000000 --- a/core/src/components/picker-legacy/picker.md.vars.scss +++ /dev/null @@ -1,76 +0,0 @@ -@import "../../themes/ionic.globals.md"; - -// Material Design Picker -// -------------------------------------------------- - -/// @prop - Height of the picker wrapper -$picker-md-height: 260px; - -/// @prop - Border color of the picker wrapper -$picker-md-border-color: $item-md-border-color; - -/// @prop - Background Color of the picker wrapper -$picker-md-background-color: $background-color; - -/// @prop - Top Background Color of the picker wrapper gradient -$picker-md-top-background-color: $picker-md-background-color; - -/// @prop - Bottom Background Color alpha of the picker wrapper gradient -$picker-md-bottom-background-color-alpha: .8; - -/// @prop - Bottom Background Color of the picker wrapper gradient -$picker-md-bottom-background-color: rgba($background-color-rgb, $picker-md-bottom-background-color-alpha); - -/// @prop - Height of the picker toolbar -$picker-md-toolbar-height: 44px; - -/// @prop - Height of the picker button -$picker-md-button-height: $picker-md-toolbar-height; - -/// @prop - Text color of the picker button -$picker-md-button-text-color: ion-color(primary, base); - -/// @prop - Background of the picker button -$picker-md-button-background-color: transparent; - -/// @prop - Font size of the picker button -$picker-md-button-font-size: 14px; - -/// @prop - Padding top of the picker column -$picker-md-column-padding-top: 0; - -/// @prop - Padding end of the picker column -$picker-md-column-padding-end: 8px; - -/// @prop - Padding bottom of the picker column -$picker-md-column-padding-bottom: $picker-md-column-padding-top; - -/// @prop - Padding start of the picker column -$picker-md-column-padding-start: $picker-md-column-padding-end; - -/// @prop - Padding top of the picker option -$picker-md-option-padding-top: 0; - -/// @prop - Padding end of the picker option -$picker-md-option-padding-end: $picker-md-option-padding-top; - -/// @prop - Padding bottom of the picker option -$picker-md-option-padding-bottom: $picker-md-option-padding-top; - -/// @prop - Padding start of the picker option -$picker-md-option-padding-start: $picker-md-option-padding-end; - -/// @prop - Text color of the picker option -$picker-md-option-text-color: $item-md-color; - -/// @prop - Font size of the picker option -$picker-md-option-font-size: 22px; - -/// @prop - Height of the picker option -$picker-md-option-height: 42px; - -/// @prop - Offset y of the picker option -$picker-md-option-offset-y: (($picker-md-height - $picker-md-toolbar-height) * 0.5) - ($picker-md-option-height * 0.5) - 10; - -/// @prop - Text color of the selected picker option -$picker-md-option-selected-color: ion-color(primary, base); diff --git a/core/src/components/picker-legacy/picker.scss b/core/src/components/picker-legacy/picker.scss deleted file mode 100644 index 2d83319a121..00000000000 --- a/core/src/components/picker-legacy/picker.scss +++ /dev/null @@ -1,130 +0,0 @@ -@import "./picker.vars"; - -// Picker -// -------------------------------------------------- - -:host { - /** - * @prop --background: Background of the picker - * @prop --background-rgb: Background of the picker in rgb format - * - * @prop --border-radius: Border radius of the picker - * @prop --border-color: Border color of the picker - * @prop --border-width: Border width of the picker - * @prop --border-style: Border style of the picker - * - * @prop --min-width: Minimum width of the picker - * @prop --width: Width of the picker - * @prop --max-width: Maximum width of the picker - * - * @prop --min-height: Minimum height of the picker - * @prop --height: Height of the picker - * @prop --max-height: Maximum height of the picker - * - * @prop --backdrop-opacity: Opacity of the backdrop - */ - --border-radius: 0; - --border-style: solid; - --min-width: auto; - --width: #{$picker-width}; - --max-width: #{$picker-max-width}; - --min-height: auto; - --max-height: auto; - - @include font-smoothing(); - @include position(0, null, null, 0); - - display: block; - position: absolute; - - width: 100%; - height: 100%; - - outline: none; - - font-family: $font-family-base; - - contain: strict; - user-select: none; - z-index: $z-index-overlay; -} - -:host(.overlay-hidden) { - display: none; -} - -.picker-wrapper { - @include border-radius(var(--border-radius)); - @include position(null, 0, 0, 0); - @include margin(auto); - @include transform(translate3d(0, 100%, 0)); - - display: flex; - position: absolute; - - flex-direction: column; - - width: var(--width); - min-width: var(--min-width); - max-width: var(--max-width); - - height: var(--height); - min-height: var(--min-height); - max-height: var(--max-height); - - border-width: var(--border-width); - border-style: var(--border-style); - border-color: var(--border-color); - - background: var(--background); - - contain: strict; - overflow: hidden; - z-index: $z-index-overlay-wrapper; -} - -// Picker Toolbar and Buttons -// -------------------------------------------------- - -.picker-toolbar { - width: 100%; - - background: transparent; - - contain: strict; - z-index: 1; -} - -.picker-button { - border: 0; - - font-family: inherit; -} - -.picker-button { - &:active, - &:focus { - outline: none; - } -} - -// Picker Columns and Highlight -// -------------------------------------------------- - -.picker-columns { - display: flex; - position: relative; - - justify-content: center; - - margin-bottom: var(--ion-safe-area-bottom, 0); - - contain: strict; - overflow: hidden; -} - -.picker-above-highlight, -.picker-below-highlight { - display: none; - pointer-events: none; -} diff --git a/core/src/components/picker-legacy/picker.tsx b/core/src/components/picker-legacy/picker.tsx deleted file mode 100644 index fe67cf83fec..00000000000 --- a/core/src/components/picker-legacy/picker.tsx +++ /dev/null @@ -1,417 +0,0 @@ -import type { ComponentInterface, EventEmitter } from '@stencil/core'; -import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core'; -import { raf } from '@utils/helpers'; -import { createLockController } from '@utils/lock-controller'; -import { printIonWarning } from '@utils/logging'; -import { - createDelegateController, - createTriggerController, - BACKDROP, - dismiss, - eventMethod, - isCancel, - prepareOverlay, - present, - safeCall, - setOverlayId, -} from '@utils/overlays'; -import { getClassMap } from '@utils/theme'; - -import { getIonMode } from '../../global/ionic-global'; -import type { AnimationBuilder, CssClassMap, OverlayInterface, FrameworkDelegate } from '../../interface'; -import type { OverlayEventDetail } from '../../utils/overlays-interface'; - -import { iosEnterAnimation } from './animations/ios.enter'; -import { iosLeaveAnimation } from './animations/ios.leave'; -import type { PickerButton, PickerColumn } from './picker-interface'; - -// TODO(FW-2832): types - -/** - * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use. - */ -@Component({ - tag: 'ion-picker-legacy', - styleUrls: { - ios: 'picker.ios.scss', - md: 'picker.md.scss', - }, - scoped: true, -}) -export class Picker implements ComponentInterface, OverlayInterface { - private readonly delegateController = createDelegateController(this); - private readonly lockController = createLockController(); - private readonly triggerController = createTriggerController(); - - private durationTimeout?: ReturnType; - lastFocus?: HTMLElement; - - @Element() el!: HTMLIonPickerLegacyElement; - - @State() presented = false; - - /** @internal */ - @Prop() overlayIndex!: number; - - /** @internal */ - @Prop() delegate?: FrameworkDelegate; - - /** @internal */ - @Prop() hasController = false; - - /** - * If `true`, the keyboard will be automatically dismissed when the overlay is presented. - */ - @Prop() keyboardClose = true; - - /** - * Animation to use when the picker is presented. - */ - @Prop() enterAnimation?: AnimationBuilder; - - /** - * Animation to use when the picker is dismissed. - */ - @Prop() leaveAnimation?: AnimationBuilder; - - /** - * Array of buttons to be displayed at the top of the picker. - */ - @Prop() buttons: PickerButton[] = []; - - /** - * Array of columns to be displayed in the picker. - */ - @Prop() columns: PickerColumn[] = []; - - /** - * Additional classes to apply for custom CSS. If multiple classes are - * provided they should be separated by spaces. - */ - @Prop() cssClass?: string | string[]; - - /** - * Number of milliseconds to wait before dismissing the picker. - */ - @Prop() duration = 0; - - /** - * If `true`, a backdrop will be displayed behind the picker. - */ - @Prop() showBackdrop = true; - - /** - * If `true`, the picker will be dismissed when the backdrop is clicked. - */ - @Prop() backdropDismiss = true; - - /** - * If `true`, the picker will animate. - */ - @Prop() animated = true; - - /** - * Additional attributes to pass to the picker. - */ - @Prop() htmlAttributes?: { [key: string]: any }; - - /** - * If `true`, the picker will open. If `false`, the picker will close. - * Use this if you need finer grained control over presentation, otherwise - * just use the pickerController or the `trigger` property. - * Note: `isOpen` will not automatically be set back to `false` when - * the picker dismisses. You will need to do that in your code. - */ - @Prop() isOpen = false; - @Watch('isOpen') - onIsOpenChange(newValue: boolean, oldValue: boolean) { - if (newValue === true && oldValue === false) { - this.present(); - } else if (newValue === false && oldValue === true) { - this.dismiss(); - } - } - - /** - * An ID corresponding to the trigger element that - * causes the picker to open when clicked. - */ - @Prop() trigger: string | undefined; - @Watch('trigger') - triggerChanged() { - const { trigger, el, triggerController } = this; - if (trigger) { - triggerController.addClickListener(el, trigger); - } - } - - /** - * Emitted after the picker has presented. - */ - @Event({ eventName: 'ionPickerDidPresent' }) didPresent!: EventEmitter; - - /** - * Emitted before the picker has presented. - */ - @Event({ eventName: 'ionPickerWillPresent' }) willPresent!: EventEmitter; - - /** - * Emitted before the picker has dismissed. - */ - @Event({ eventName: 'ionPickerWillDismiss' }) willDismiss!: EventEmitter; - - /** - * Emitted after the picker has dismissed. - */ - @Event({ eventName: 'ionPickerDidDismiss' }) didDismiss!: EventEmitter; - - /** - * Emitted after the picker has presented. - * Shorthand for ionPickerWillDismiss. - */ - @Event({ eventName: 'didPresent' }) didPresentShorthand!: EventEmitter; - - /** - * Emitted before the picker has presented. - * Shorthand for ionPickerWillPresent. - */ - @Event({ eventName: 'willPresent' }) willPresentShorthand!: EventEmitter; - - /** - * Emitted before the picker has dismissed. - * Shorthand for ionPickerWillDismiss. - */ - @Event({ eventName: 'willDismiss' }) willDismissShorthand!: EventEmitter; - - /** - * Emitted after the picker has dismissed. - * Shorthand for ionPickerDidDismiss. - */ - @Event({ eventName: 'didDismiss' }) didDismissShorthand!: EventEmitter; - - connectedCallback() { - prepareOverlay(this.el); - this.triggerChanged(); - } - - disconnectedCallback() { - this.triggerController.removeClickListener(); - } - - componentWillLoad() { - if (!this.htmlAttributes?.id) { - setOverlayId(this.el); - } - } - - componentDidLoad() { - printIonWarning( - '[ion-picker-legacy] - ion-picker-legacy and ion-picker-legacy-column have been deprecated in favor of new versions of the ion-picker and ion-picker-column components. These new components display inline with your page content allowing for more presentation flexibility than before.', - this.el - ); - - /** - * If picker was rendered with isOpen="true" - * then we should open picker immediately. - */ - if (this.isOpen === true) { - raf(() => this.present()); - } - - /** - * When binding values in frameworks such as Angular - * it is possible for the value to be set after the Web Component - * initializes but before the value watcher is set up in Stencil. - * As a result, the watcher callback may not be fired. - * We work around this by manually calling the watcher - * callback when the component has loaded and the watcher - * is configured. - */ - this.triggerChanged(); - } - - /** - * Present the picker overlay after it has been created. - */ - @Method() - async present(): Promise { - const unlock = await this.lockController.lock(); - - await this.delegateController.attachViewToDom(); - - await present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined); - - if (this.duration > 0) { - this.durationTimeout = setTimeout(() => this.dismiss(), this.duration); - } - - unlock(); - } - - /** - * Dismiss the picker overlay after it has been presented. - * - * @param data Any data to emit in the dismiss events. - * @param role The role of the element that is dismissing the picker. - * This can be useful in a button handler for determining which button was - * clicked to dismiss the picker. - * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. - */ - @Method() - async dismiss(data?: any, role?: string): Promise { - const unlock = await this.lockController.lock(); - - if (this.durationTimeout) { - clearTimeout(this.durationTimeout); - } - const dismissed = await dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation); - - if (dismissed) { - this.delegateController.removeViewFromDom(); - } - - unlock(); - - return dismissed; - } - - /** - * Returns a promise that resolves when the picker did dismiss. - */ - @Method() - onDidDismiss(): Promise> { - return eventMethod(this.el, 'ionPickerDidDismiss'); - } - - /** - * Returns a promise that resolves when the picker will dismiss. - */ - @Method() - onWillDismiss(): Promise> { - return eventMethod(this.el, 'ionPickerWillDismiss'); - } - - /** - * Get the column that matches the specified name. - * - * @param name The name of the column. - */ - @Method() - getColumn(name: string): Promise { - return Promise.resolve(this.columns.find((column) => column.name === name)); - } - - private async buttonClick(button: PickerButton) { - const role = button.role; - if (isCancel(role)) { - return this.dismiss(undefined, role); - } - const shouldDismiss = await this.callButtonHandler(button); - if (shouldDismiss) { - return this.dismiss(this.getSelected(), button.role); - } - return Promise.resolve(); - } - - private async callButtonHandler(button: PickerButton | undefined) { - if (button) { - // a handler has been provided, execute it - // pass the handler the values from the inputs - const rtn = await safeCall(button.handler, this.getSelected()); - if (rtn === false) { - // if the return value of the handler is false then do not dismiss - return false; - } - } - return true; - } - - private getSelected() { - const selected: { [k: string]: any } = {}; - this.columns.forEach((col, index) => { - const selectedColumn = col.selectedIndex !== undefined ? col.options[col.selectedIndex] : undefined; - selected[col.name] = { - text: selectedColumn ? selectedColumn.text : undefined, - value: selectedColumn ? selectedColumn.value : undefined, - columnIndex: index, - }; - }); - return selected; - } - - private onBackdropTap = () => { - this.dismiss(undefined, BACKDROP); - }; - - private dispatchCancelHandler = (ev: CustomEvent) => { - const role = ev.detail.role; - if (isCancel(role)) { - const cancelButton = this.buttons.find((b) => b.role === 'cancel'); - this.callButtonHandler(cancelButton); - } - }; - - render() { - const { htmlAttributes } = this; - const mode = getIonMode(this); - return ( - - - - - - - - - - ); - } -} - -const buttonWrapperClass = (button: PickerButton): CssClassMap => { - return { - [`picker-toolbar-${button.role}`]: button.role !== undefined, - 'picker-toolbar-button': true, - }; -}; - -const buttonClass = (button: PickerButton): CssClassMap => { - return { - 'picker-button': true, - 'ion-activatable': true, - ...getClassMap(button.cssClass), - }; -}; diff --git a/core/src/components/picker-legacy/picker.vars.scss b/core/src/components/picker-legacy/picker.vars.scss deleted file mode 100644 index 24421b72b4b..00000000000 --- a/core/src/components/picker-legacy/picker.vars.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import "../../themes/ionic.globals"; - -// Picker -// -------------------------------------------------- - -/// @prop - Width of the picker -$picker-width: 100%; - -/// @prop - Max width of the picker -$picker-max-width: 500px; diff --git a/core/src/components/picker-legacy/test/basic/index.html b/core/src/components/picker-legacy/test/basic/index.html deleted file mode 100644 index 23cd22a2d03..00000000000 --- a/core/src/components/picker-legacy/test/basic/index.html +++ /dev/null @@ -1,133 +0,0 @@ - - - - - Picker - Basic - - - - - - - - - - - - - - - - - - - - - - diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts b/core/src/components/picker-legacy/test/basic/picker.e2e.ts deleted file mode 100644 index ff703eab52b..00000000000 --- a/core/src/components/picker-legacy/test/basic/picker.e2e.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { expect } from '@playwright/test'; -import { configs, test } from '@utils/test/playwright'; - -configs().forEach(({ title, screenshot, config }) => { - test.describe(title('picker: basic'), () => { - test('should not have visual regressions', async ({ page }) => { - await page.goto('/src/components/picker-legacy/test/basic', config); - const didPresent = await page.spyOnEvent('ionPickerDidPresent'); - const didDismiss = await page.spyOnEvent('ionPickerDidDismiss'); - - await page.click('#basic'); - await didPresent.next(); - await page.waitForChanges(); - - await expect(page).toHaveScreenshot(screenshot(`picker-basic`)); - - await page.click('.picker-opt:nth-child(2)'); - await page.click('ion-picker-legacy .save-btn'); - await didDismiss.next(); - - await page.click('#basic'); - await didPresent.next(); - await page.waitForChanges(); - - await expect(page).toHaveScreenshot(screenshot(`picker-value-selected`)); - }); - }); -}); diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index ec6ef1cbb6e..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 8e9b49013d1..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-ltr-Mobile-Safari-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 06f96209dc6..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 9dc92e74714..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index f57bda591fe..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-rtl-Mobile-Safari-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 85acc406b5c..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-md-ltr-Mobile-Chrome-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 207049157d6..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-md-ltr-Mobile-Firefox-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 03d7ab9ec7a..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-md-ltr-Mobile-Safari-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index ef0ac47bf67..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-md-rtl-Mobile-Chrome-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-md-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 8ed3f67838c..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-md-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-md-rtl-Mobile-Firefox-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-md-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 57cda235f83..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-md-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-md-rtl-Mobile-Safari-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-md-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 76335b34d6e..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-basic-md-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index d5d72e9e0d6..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index ec6e5db9573..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-ltr-Mobile-Safari-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 5a5be753f67..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index dd88dd7f927..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index fa4549993d9..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-rtl-Mobile-Safari-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 2bdefa8a69d..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-ltr-Mobile-Chrome-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index b3d03236cb3..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-ltr-Mobile-Firefox-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 2c559c25547..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-ltr-Mobile-Safari-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index d95ffaaf494..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-rtl-Mobile-Chrome-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 9b160bf14e8..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-rtl-Mobile-Firefox-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 676eec314d5..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-rtl-Mobile-Safari-linux.png b/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-rtl-Mobile-Safari-linux.png deleted file mode 100644 index cb9c7c6c3c9..00000000000 Binary files a/core/src/components/picker-legacy/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/picker-legacy/test/is-open/index.html b/core/src/components/picker-legacy/test/is-open/index.html deleted file mode 100644 index 7a830a882cc..00000000000 --- a/core/src/components/picker-legacy/test/is-open/index.html +++ /dev/null @@ -1,70 +0,0 @@ - - - - - Picker - isOpen - - - - - - - - - - - - Picker - isOpen - - - - - - - - - - - - - - diff --git a/core/src/components/picker-legacy/test/is-open/picker.e2e.ts b/core/src/components/picker-legacy/test/is-open/picker.e2e.ts deleted file mode 100644 index 455ddfe6932..00000000000 --- a/core/src/components/picker-legacy/test/is-open/picker.e2e.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { expect } from '@playwright/test'; -import { configs, test } from '@utils/test/playwright'; - -/** - * This behavior does not vary across modes/directions. - */ -configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { - test.describe(title('picker: isOpen'), () => { - test('should open and close the picker', async ({ page }) => { - await page.goto('/src/components/picker-legacy/test/is-open', config); - - const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent'); - const ionPickerDidDismiss = await page.spyOnEvent('ionPickerDidDismiss'); - const picker = page.locator('ion-picker-legacy'); - - await page.click('#default'); - - await ionPickerDidPresent.next(); - await expect(picker).toBeVisible(); - - await picker.evaluate((el: HTMLIonPickerLegacyElement) => (el.isOpen = false)); - - await ionPickerDidDismiss.next(); - await expect(picker).toBeHidden(); - }); - - test('should open if isOpen is true on load', async ({ page }) => { - await page.setContent('', config); - await expect(page.locator('ion-picker-legacy')).toBeVisible(); - }); - }); -}); diff --git a/core/src/components/picker-legacy/test/picker-id.spec.tsx b/core/src/components/picker-legacy/test/picker-id.spec.tsx deleted file mode 100644 index 6980cc347d5..00000000000 --- a/core/src/components/picker-legacy/test/picker-id.spec.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { newSpecPage } from '@stencil/core/testing'; - -import { Picker } from '../picker'; -import { h } from '@stencil/core'; - -describe('picker: id', () => { - it('picker should be assigned an incrementing id', async () => { - const page = await newSpecPage({ - components: [Picker], - html: ``, - }); - let picker: HTMLIonPickerLegacyElement; - - picker = page.body.querySelector('ion-picker-legacy')!; - - expect(picker).not.toBe(null); - expect(picker.getAttribute('id')).toBe('ion-overlay-1'); - - // Remove the picker from the DOM - picker.remove(); - await page.waitForChanges(); - - // Create a new picker to verify the id is incremented - picker = document.createElement('ion-picker-legacy'); - picker.isOpen = true; - page.body.appendChild(picker); - await page.waitForChanges(); - - picker = page.body.querySelector('ion-picker-legacy')!; - - expect(picker.getAttribute('id')).toBe('ion-overlay-2'); - - // Presenting the same picker again should reuse the existing id - - picker.isOpen = false; - await page.waitForChanges(); - picker.isOpen = true; - await page.waitForChanges(); - - picker = page.body.querySelector('ion-picker-legacy')!; - - expect(picker.getAttribute('id')).toBe('ion-overlay-2'); - }); - - it('should not overwrite the id set in htmlAttributes', async () => { - const id = 'custom-id'; - const page = await newSpecPage({ - components: [Picker], - template: () => , - }); - - const alert = page.body.querySelector('ion-picker-legacy')!; - expect(alert.id).toBe(id); - }); -}); diff --git a/core/src/components/picker-legacy/test/trigger/index.html b/core/src/components/picker-legacy/test/trigger/index.html deleted file mode 100644 index 83809fd57ad..00000000000 --- a/core/src/components/picker-legacy/test/trigger/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - Picker - Trigger - - - - - - - - - - - - Picker - Trigger - - - - - - - - - - - - - - - diff --git a/core/src/components/picker-legacy/test/trigger/picker.e2e.ts b/core/src/components/picker-legacy/test/trigger/picker.e2e.ts deleted file mode 100644 index a3f7ff51e1d..00000000000 --- a/core/src/components/picker-legacy/test/trigger/picker.e2e.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { expect } from '@playwright/test'; -import { configs, test } from '@utils/test/playwright'; - -/** - * This behavior does not vary across modes/directions. - */ -configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { - test.describe(title('picker: trigger'), () => { - test.beforeEach(async ({ page }) => { - await page.goto('/src/components/picker-legacy/test/trigger', config); - }); - - test('should open the picker', async ({ page }) => { - const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent'); - const picker = page.locator('#default-picker'); - - await page.click('#default'); - - await ionPickerDidPresent.next(); - await expect(picker).toBeVisible(); - }); - - test('should present a previously presented picker', async ({ page }) => { - const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent'); - const ionPickerDidDismiss = await page.spyOnEvent('ionPickerDidDismiss'); - const picker = page.locator('#timeout-picker'); - - await page.click('#timeout'); - - await ionPickerDidDismiss.next(); - - await page.click('#timeout'); - - await ionPickerDidPresent.next(); - await expect(picker).toBeVisible(); - }); - }); -}); diff --git a/core/src/index.ts b/core/src/index.ts index 6ebc176eb36..2837c6613a6 100644 --- a/core/src/index.ts +++ b/core/src/index.ts @@ -26,7 +26,6 @@ export { actionSheetController, modalController, loadingController, - pickerController, popoverController, toastController, } from './utils/overlays'; diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts index fc5dab8c574..389d8d48194 100644 --- a/core/src/interface.d.ts +++ b/core/src/interface.d.ts @@ -19,7 +19,6 @@ export { LoadingOptions } from './components/loading/loading-interface'; export { MenuCustomEvent, MenuI, MenuControllerI } from './components/menu/menu-interface'; export { ModalOptions, ModalCustomEvent, ModalDragEventDetail } from './components/modal/modal-interface'; export { NavDirection, NavCustomEvent } from './components/nav/nav-interface'; -export { PickerOptions, PickerColumnOption } from './components/picker-legacy/picker-interface'; export { PopoverOptions } from './components/popover/popover-interface'; export { RadioGroupCustomEvent } from './components/radio-group/radio-group-interface'; export { RangeCustomEvent, PinFormatter } from './components/range/range-interface'; diff --git a/core/src/utils/config.ts b/core/src/utils/config.ts index 4b679395efa..da9f2215a02 100644 --- a/core/src/utils/config.ts +++ b/core/src/utils/config.ts @@ -145,11 +145,6 @@ export interface IonicConfig { */ toastEnter?: AnimationBuilder; - /** - * Provides a custom enter animation for all `ion-picker-legacy`, overriding the default "animation". - */ - pickerEnter?: AnimationBuilder; - /** * Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation". */ @@ -180,11 +175,6 @@ export interface IonicConfig { */ toastLeave?: AnimationBuilder; - /** - * Provides a custom leave animation for all `ion-picker-legacy`, overriding the default "animation". - */ - pickerLeave?: AnimationBuilder; - /** * If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML. */ diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts index 59b341a7d52..492ff9b7e93 100644 --- a/core/src/utils/overlays.ts +++ b/core/src/utils/overlays.ts @@ -17,7 +17,6 @@ import type { LoadingOptions, ModalOptions, OverlayInterface, - PickerOptions, PopoverOptions, ToastOptions, } from '../interface'; @@ -72,12 +71,6 @@ export const actionSheetController = /*@__PURE__*/ createController('ion-loading'); export const modalController = /*@__PURE__*/ createController('ion-modal'); -/** - * @deprecated Use the inline ion-picker component instead. - */ -export const pickerController = /*@__PURE__*/ createController( - 'ion-picker-legacy' -); export const popoverController = /*@__PURE__*/ createController('ion-popover'); export const toastController = /*@__PURE__*/ createController('ion-toast'); @@ -184,10 +177,7 @@ const focusElementInOverlay = (hostToFocus: HTMLElement | null | undefined, over * Should NOT include: Toast */ const trapKeyboardFocus = (ev: Event, doc: Document) => { - const lastOverlay = getPresentedOverlay( - doc, - 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover' - ); + const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-popover'); const target = ev.target as HTMLElement | null; /** @@ -444,7 +434,7 @@ export const dismissOverlay = ( */ export const getOverlays = (doc: Document, selector?: string): HTMLIonOverlayElement[] => { if (selector === undefined) { - selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover,ion-toast'; + selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-popover,ion-toast'; } return (Array.from(doc.querySelectorAll(selector)) as HTMLIonOverlayElement[]).filter((c) => c.overlayIndex > 0); }; diff --git a/core/stencil.config.ts b/core/stencil.config.ts index 8a090b65bff..b0b982f06ff 100644 --- a/core/stencil.config.ts +++ b/core/stencil.config.ts @@ -26,9 +26,6 @@ const getAngularOutputTargets = () => { // tabs 'ion-tabs', - - // auxiliar - 'ion-picker-legacy-column', ] return [ angularOutputTarget({ @@ -86,7 +83,7 @@ export const config: Config = { { components: ['ion-card', 'ion-card-content', 'ion-card-header', 'ion-card-title', 'ion-card-subtitle'] }, { components: ['ion-checkbox'] }, { components: ['ion-chip'] }, - { components: ['ion-datetime', 'ion-picker-legacy', 'ion-picker-legacy-column'] }, + { components: ['ion-datetime'] }, { components: ['ion-fab', 'ion-fab-button', 'ion-fab-list'] }, { components: ['ion-grid', 'ion-row', 'ion-col'] }, { components: ['ion-infinite-scroll', 'ion-infinite-scroll-content'] }, @@ -153,7 +150,6 @@ export const config: Config = { 'ion-alert', 'ion-loading', 'ion-modal', - 'ion-picker-legacy', 'ion-popover', 'ion-toast', @@ -184,7 +180,6 @@ export const config: Config = { 'ion-alert', 'ion-loading', 'ion-modal', - 'ion-picker-legacy', 'ion-popover', 'ion-toast', diff --git a/packages/angular/src/directives/proxies-list.ts b/packages/angular/src/directives/proxies-list.ts index c6ea71c10c7..c158e9a5b47 100644 --- a/packages/angular/src/directives/proxies-list.ts +++ b/packages/angular/src/directives/proxies-list.ts @@ -56,7 +56,6 @@ export const DIRECTIVES = [ d.IonPicker, d.IonPickerColumn, d.IonPickerColumnOption, - d.IonPickerLegacy, d.IonProgressBar, d.IonRadio, d.IonRadioGroup, diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index 1c78b120d9d..7a5f1758478 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -1584,69 +1584,6 @@ export class IonPickerColumnOption { export declare interface IonPickerColumnOption extends Components.IonPickerColumnOption {} -@ProxyCmp({ - inputs: ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger'], - methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss', 'getColumn'] -}) -@Component({ - selector: 'ion-picker-legacy', - changeDetection: ChangeDetectionStrategy.OnPush, - template: '', - // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger'], -}) -export class IonPickerLegacy { - protected el: HTMLIonPickerLegacyElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - proxyOutputs(this, this.el, ['ionPickerDidPresent', 'ionPickerWillPresent', 'ionPickerWillDismiss', 'ionPickerDidDismiss', 'didPresent', 'willPresent', 'willDismiss', 'didDismiss']); - } -} - - -import type { OverlayEventDetail as IIonPickerLegacyOverlayEventDetail } from '@ionic/core'; - -export declare interface IonPickerLegacy extends Components.IonPickerLegacy { - /** - * Emitted after the picker has presented. - */ - ionPickerDidPresent: EventEmitter>; - /** - * Emitted before the picker has presented. - */ - ionPickerWillPresent: EventEmitter>; - /** - * Emitted before the picker has dismissed. - */ - ionPickerWillDismiss: EventEmitter>; - /** - * Emitted after the picker has dismissed. - */ - ionPickerDidDismiss: EventEmitter>; - /** - * Emitted after the picker has presented. -Shorthand for ionPickerWillDismiss. - */ - didPresent: EventEmitter>; - /** - * Emitted before the picker has presented. -Shorthand for ionPickerWillPresent. - */ - willPresent: EventEmitter>; - /** - * Emitted before the picker has dismissed. -Shorthand for ionPickerWillDismiss. - */ - willDismiss: EventEmitter>; - /** - * Emitted after the picker has dismissed. -Shorthand for ionPickerDidDismiss. - */ - didDismiss: EventEmitter>; -} - - @ProxyCmp({ inputs: ['buffer', 'color', 'mode', 'reversed', 'type', 'value'] }) diff --git a/packages/angular/src/index.ts b/packages/angular/src/index.ts index 86422fdd861..4f271c6640d 100644 --- a/packages/angular/src/index.ts +++ b/packages/angular/src/index.ts @@ -40,7 +40,6 @@ export { GestureController } from './providers/gesture-controller'; export { LoadingController } from './providers/loading-controller'; export { MenuController } from './providers/menu-controller'; export { ModalController } from './providers/modal-controller'; -export { PickerController } from './providers/picker-controller'; export { PopoverController } from './providers/popover-controller'; export { ToastController } from './providers/toast-controller'; @@ -101,10 +100,6 @@ export { MenuCustomEvent, ModalDragEventDetail, NavCustomEvent, - PickerOptions, - PickerButton, - PickerColumn, - PickerColumnOption, PlatformConfig, RadioGroupCustomEvent, RadioGroupChangeEventDetail, diff --git a/packages/angular/src/providers/picker-controller.ts b/packages/angular/src/providers/picker-controller.ts deleted file mode 100644 index 014710b931e..00000000000 --- a/packages/angular/src/providers/picker-controller.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Injectable } from '@angular/core'; -import { OverlayBaseController } from '@ionic/angular/common'; -import type { PickerOptions } from '@ionic/core'; -import { pickerController } from '@ionic/core'; - -/** - * @deprecated Use the inline ion-picker component instead. - */ -@Injectable({ - providedIn: 'root', -}) -export class PickerController extends OverlayBaseController { - constructor() { - super(pickerController); - } -} diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index eae6fdb8840..863ca4a5d0b 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -55,7 +55,6 @@ import { defineCustomElement as defineIonNote } from '@ionic/core/components/ion import { defineCustomElement as defineIonPicker } from '@ionic/core/components/ion-picker.js'; import { defineCustomElement as defineIonPickerColumn } from '@ionic/core/components/ion-picker-column.js'; import { defineCustomElement as defineIonPickerColumnOption } from '@ionic/core/components/ion-picker-column-option.js'; -import { defineCustomElement as defineIonPickerLegacy } from '@ionic/core/components/ion-picker-legacy.js'; import { defineCustomElement as defineIonProgressBar } from '@ionic/core/components/ion-progress-bar.js'; import { defineCustomElement as defineIonRadio } from '@ionic/core/components/ion-radio.js'; import { defineCustomElement as defineIonRefresher } from '@ionic/core/components/ion-refresher.js'; @@ -1523,71 +1522,6 @@ export class IonPickerColumnOption { export declare interface IonPickerColumnOption extends Components.IonPickerColumnOption {} -@ProxyCmp({ - defineCustomElementFn: defineIonPickerLegacy, - inputs: ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger'], - methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss', 'getColumn'] -}) -@Component({ - selector: 'ion-picker-legacy', - changeDetection: ChangeDetectionStrategy.OnPush, - template: '', - // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger'], - standalone: true -}) -export class IonPickerLegacy { - protected el: HTMLIonPickerLegacyElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - proxyOutputs(this, this.el, ['ionPickerDidPresent', 'ionPickerWillPresent', 'ionPickerWillDismiss', 'ionPickerDidDismiss', 'didPresent', 'willPresent', 'willDismiss', 'didDismiss']); - } -} - - -import type { OverlayEventDetail as IIonPickerLegacyOverlayEventDetail } from '@ionic/core/components'; - -export declare interface IonPickerLegacy extends Components.IonPickerLegacy { - /** - * Emitted after the picker has presented. - */ - ionPickerDidPresent: EventEmitter>; - /** - * Emitted before the picker has presented. - */ - ionPickerWillPresent: EventEmitter>; - /** - * Emitted before the picker has dismissed. - */ - ionPickerWillDismiss: EventEmitter>; - /** - * Emitted after the picker has dismissed. - */ - ionPickerDidDismiss: EventEmitter>; - /** - * Emitted after the picker has presented. -Shorthand for ionPickerWillDismiss. - */ - didPresent: EventEmitter>; - /** - * Emitted before the picker has presented. -Shorthand for ionPickerWillPresent. - */ - willPresent: EventEmitter>; - /** - * Emitted before the picker has dismissed. -Shorthand for ionPickerWillDismiss. - */ - willDismiss: EventEmitter>; - /** - * Emitted after the picker has dismissed. -Shorthand for ionPickerDidDismiss. - */ - didDismiss: EventEmitter>; -} - - @ProxyCmp({ defineCustomElementFn: defineIonProgressBar, inputs: ['buffer', 'color', 'mode', 'reversed', 'type', 'value'] diff --git a/packages/angular/standalone/src/index.ts b/packages/angular/standalone/src/index.ts index a4ac729cc7e..bd848f1552f 100644 --- a/packages/angular/standalone/src/index.ts +++ b/packages/angular/standalone/src/index.ts @@ -12,7 +12,6 @@ export { GestureController } from './providers/gesture-controller'; export { LoadingController } from './providers/loading-controller'; export { MenuController } from './providers/menu-controller'; export { ModalController } from './providers/modal-controller'; -export { PickerController } from './providers/picker-controller'; export { PopoverController } from './providers/popover-controller'; export { ToastController } from './providers/toast-controller'; export { @@ -99,10 +98,6 @@ export { MenuCustomEvent, ModalDragEventDetail, NavCustomEvent, - PickerOptions, - PickerButton, - PickerColumn, - PickerColumnOption, PlatformConfig, RadioGroupCustomEvent, RadioGroupChangeEventDetail, diff --git a/packages/angular/standalone/src/providers/picker-controller.ts b/packages/angular/standalone/src/providers/picker-controller.ts deleted file mode 100644 index 3278c35cd2e..00000000000 --- a/packages/angular/standalone/src/providers/picker-controller.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Injectable } from '@angular/core'; -import { OverlayBaseController } from '@ionic/angular/common'; -import type { PickerOptions } from '@ionic/core/components'; -import { pickerController } from '@ionic/core/components'; -import { defineCustomElement } from '@ionic/core/components/ion-picker-legacy.js'; - -/** - * @deprecated Use the inline ion-picker component instead. - */ -@Injectable({ - providedIn: 'root', -}) -export class PickerController extends OverlayBaseController { - constructor() { - super(pickerController); - defineCustomElement(); - } -} diff --git a/packages/angular/test/base/e2e/src/lazy/providers.spec.ts b/packages/angular/test/base/e2e/src/lazy/providers.spec.ts index 7f8dd7cec83..c5829a40c94 100644 --- a/packages/angular/test/base/e2e/src/lazy/providers.spec.ts +++ b/packages/angular/test/base/e2e/src/lazy/providers.spec.ts @@ -53,10 +53,4 @@ test.describe('Providers', () => { await expect(page.locator('ion-loading')).toBeVisible(); }); - - test('should open a picker', async ({ page }) => { - await page.locator('button#open-picker').click(); - - await expect(page.locator('ion-picker-legacy')).toBeVisible(); - }); }); diff --git a/packages/angular/test/base/e2e/src/standalone/overlay-controllers.spec.ts b/packages/angular/test/base/e2e/src/standalone/overlay-controllers.spec.ts index cd3996b8c59..89b511d4136 100644 --- a/packages/angular/test/base/e2e/src/standalone/overlay-controllers.spec.ts +++ b/packages/angular/test/base/e2e/src/standalone/overlay-controllers.spec.ts @@ -23,12 +23,6 @@ test.describe('Overlay Controllers', () => { await expect(page.locator('ion-modal app-dialog-content')).toBeVisible(); }); - test('should present a picker', async ({ page }) => { - await page.locator('button#open-picker').click(); - - await expect(page.locator('ion-picker-legacy .picker-button')).toBeVisible(); - }); - test('should present a popover', async ({ page }) => { await page.locator('button#open-popover').click(); diff --git a/packages/angular/test/base/src/app/lazy/overlays-inline/overlays-inline.component.html b/packages/angular/test/base/src/app/lazy/overlays-inline/overlays-inline.component.html index 408881980a3..68eef635c2f 100644 --- a/packages/angular/test/base/src/app/lazy/overlays-inline/overlays-inline.component.html +++ b/packages/angular/test/base/src/app/lazy/overlays-inline/overlays-inline.component.html @@ -3,7 +3,6 @@ Open Action Sheet Open Loading Open Toast - Open Picker - - diff --git a/packages/angular/test/base/src/app/lazy/providers/providers.component.html b/packages/angular/test/base/src/app/lazy/providers/providers.component.html index 0c1038369f5..bd65becbf39 100644 --- a/packages/angular/test/base/src/app/lazy/providers/providers.component.html +++ b/packages/angular/test/base/src/app/lazy/providers/providers.component.html @@ -48,5 +48,4 @@ - diff --git a/packages/angular/test/base/src/app/lazy/providers/providers.component.ts b/packages/angular/test/base/src/app/lazy/providers/providers.component.ts index f576419fc89..9ff1e480253 100644 --- a/packages/angular/test/base/src/app/lazy/providers/providers.component.ts +++ b/packages/angular/test/base/src/app/lazy/providers/providers.component.ts @@ -6,7 +6,6 @@ import { ActionSheetController, PopoverController, ToastController, - PickerController, MenuController, LoadingController, NavController, @@ -37,7 +36,6 @@ export class ProvidersComponent { private alertCtrl: AlertController, private loadingCtrl: LoadingController, private menuCtrl: MenuController, - private pickerCtrl: PickerController, modalCtrl: ModalController, platform: Platform, popoverCtrl: PopoverController, @@ -53,7 +51,6 @@ export class ProvidersComponent { alertCtrl && loadingCtrl && menuCtrl && - pickerCtrl && modalCtrl && platform && popoverCtrl && @@ -138,18 +135,4 @@ export class ProvidersComponent { await loading.present(); } - - async openPicker() { - const picker = await this.pickerCtrl.create({ - columns: [], - buttons: [ - { - text: 'Cancel', - role: 'cancel', - }, - ], - }); - - await picker.present(); - } } diff --git a/packages/angular/test/base/src/app/standalone/overlay-controllers/overlay-controllers.component.html b/packages/angular/test/base/src/app/standalone/overlay-controllers/overlay-controllers.component.html index e3d7adbf541..441b7eeebc2 100644 --- a/packages/angular/test/base/src/app/standalone/overlay-controllers/overlay-controllers.component.html +++ b/packages/angular/test/base/src/app/standalone/overlay-controllers/overlay-controllers.component.html @@ -2,6 +2,5 @@ - diff --git a/packages/angular/test/base/src/app/standalone/overlay-controllers/overlay-controllers.component.ts b/packages/angular/test/base/src/app/standalone/overlay-controllers/overlay-controllers.component.ts index 9b97dd2e45a..6253b88bcdc 100644 --- a/packages/angular/test/base/src/app/standalone/overlay-controllers/overlay-controllers.component.ts +++ b/packages/angular/test/base/src/app/standalone/overlay-controllers/overlay-controllers.component.ts @@ -3,7 +3,6 @@ import { AlertController, LoadingController, ModalController, - PickerController, PopoverController, } from '@ionic/angular/standalone'; @@ -17,7 +16,6 @@ export class OverlayControllersComponent { private alertCtrl: AlertController, private loadingCtrl: LoadingController, private modalCtrl: ModalController, - private pickerCtrl: PickerController, private popoverCtrl: PopoverController ) {} @@ -52,20 +50,6 @@ export class OverlayControllersComponent { await modal.present(); } - async openPicker() { - const picker = await this.pickerCtrl.create({ - columns: [], - buttons: [ - { - text: 'Cancel', - role: 'cancel', - }, - ], - }); - - await picker.present(); - } - async openPopover(ev: MouseEvent) { const popover = await this.popoverCtrl.create({ component: DialogComponent, diff --git a/packages/react/src/components/IonPickerLegacy.tsx b/packages/react/src/components/IonPickerLegacy.tsx deleted file mode 100644 index 7fcf657136f..00000000000 --- a/packages/react/src/components/IonPickerLegacy.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import type { JSX } from '@ionic/core/components'; -import { defineCustomElement } from '@ionic/core/components/ion-picker-legacy.js'; - -import { createInlineOverlayComponent } from './createInlineOverlayComponent'; - -export const IonPickerLegacy = /*@__PURE__*/ createInlineOverlayComponent< - JSX.IonPickerLegacy, - HTMLIonPickerLegacyElement ->('ion-picker-legacy', defineCustomElement); diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 12ce0320d76..1dab1c548cb 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -57,10 +57,6 @@ export { ModalDragEventDetail, ModalOptions, NavCustomEvent, - PickerOptions, - PickerButton, - PickerColumn, - PickerColumnOption, PopoverOptions, RadioGroupCustomEvent, RadioGroupChangeEventDetail, @@ -106,7 +102,6 @@ export * from './routing-proxies'; export { IonAlert } from './IonAlert'; export { IonLoading } from './IonLoading'; export * from './IonToast'; -export { IonPickerLegacy } from './IonPickerLegacy'; // createOverlayComponent export * from './IonActionSheet'; @@ -141,7 +136,6 @@ export { useIonAlert, UseIonAlertResult } from '../hooks/useIonAlert'; export { useIonToast, UseIonToastResult } from '../hooks/useIonToast'; export { useIonModal, UseIonModalResult } from '../hooks/useIonModal'; export { useIonPopover, UseIonPopoverResult } from '../hooks/useIonPopover'; -export { useIonPicker, UseIonPickerResult } from '../hooks/useIonPicker'; export { useIonLoading, UseIonLoadingResult } from '../hooks/useIonLoading'; export const setupIonicReact = (config: IonicConfig = {}) => { diff --git a/packages/react/src/components/utils/ionRenderToString.ts b/packages/react/src/components/utils/ionRenderToString.ts index 507350659be..785cc64b4c9 100644 --- a/packages/react/src/components/utils/ionRenderToString.ts +++ b/packages/react/src/components/utils/ionRenderToString.ts @@ -12,7 +12,6 @@ export async function ionRenderToString(html: string, userAgent: string, options 'ion-alert', 'ion-loading', 'ion-modal', - 'ion-picker-legacy', 'ion-popover', 'ion-toast', @@ -26,9 +25,6 @@ export async function ionRenderToString(html: string, userAgent: string, options // tabs 'ion-tabs', 'ion-tab', - - // auxiliary - 'ion-picker-legacy-column', ], userAgent, }, diff --git a/packages/react/src/hooks/__tests__/hooks.spec.tsx b/packages/react/src/hooks/__tests__/hooks.spec.tsx index e617e34af63..a03f7cd8ffb 100644 --- a/packages/react/src/hooks/__tests__/hooks.spec.tsx +++ b/packages/react/src/hooks/__tests__/hooks.spec.tsx @@ -23,8 +23,6 @@ import { useIonLoading } from '../useIonLoading'; import type { UseIonLoadingResult } from '../useIonLoading'; import { useIonModal } from '../useIonModal'; import type { UseIonModalResult } from '../useIonModal'; -import { useIonPicker } from '../useIonPicker'; -import type { UseIonPickerResult } from '../useIonPicker'; import { useIonPopover } from '../useIonPopover'; import type { UseIonPopoverResult } from '../useIonPopover'; import { useIonToast } from '../useIonToast'; @@ -103,19 +101,6 @@ describe('useIonModal', () => { }); }); -describe('useIonPicker', () => { - it('should be memorised', () => { - const { result, rerender } = renderHook(() => useIonPicker()); - - rerender(); - - const [[firstPresent, firstDismiss], [secondPresent, secondDismiss]] = - result.all as UseIonPickerResult[]; - expect(firstPresent).toBe(secondPresent); - expect(firstDismiss).toBe(secondDismiss); - }); -}); - describe('useIonPopover', () => { it('should be memorised', () => { const PopoverComponent = () =>
; diff --git a/packages/react/src/hooks/useIonPicker.tsx b/packages/react/src/hooks/useIonPicker.tsx deleted file mode 100644 index 6722b4d99b5..00000000000 --- a/packages/react/src/hooks/useIonPicker.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import type { PickerButton, PickerColumn, PickerOptions } from '@ionic/core/components'; -import { pickerController } from '@ionic/core/components'; -import { defineCustomElement } from '@ionic/core/components/ion-picker-legacy.js'; -import { useCallback } from 'react'; - -import type { HookOverlayOptions } from './HookOverlayOptions'; -import { useController } from './useController'; - -/** - * A hook for presenting/dismissing an IonPicker component - * @returns Returns the present and dismiss methods in an array - * @deprecated Use the inline ion-picker component instead. - */ -export function useIonPicker(): UseIonPickerResult { - const controller = useController( - 'IonPicker', - pickerController, - defineCustomElement - ); - - const present = useCallback( - (columnsOrOptions: PickerColumn[] | (PickerOptions & HookOverlayOptions), buttons?: PickerButton[]) => { - if (Array.isArray(columnsOrOptions)) { - return controller.present({ - columns: columnsOrOptions, - buttons: buttons ?? [{ text: 'Ok' }], - }); - } else { - return controller.present(columnsOrOptions); - } - }, - [controller.present] - ); - - return [present, controller.dismiss]; -} - -export type UseIonPickerResult = [ - { - /** - * Presents the picker - * @param columns Array of columns to be displayed in the picker. - * @param buttons Optional - Array of buttons to be displayed at the top of the picker. - */ - (columns: PickerColumn[], buttons?: PickerButton[]): Promise; - /** - * Presents the picker - * @param options The options to pass to the IonPicker - */ - (options: PickerOptions & HookOverlayOptions): Promise; - }, - /** - * Dismisses the picker - */ - () => Promise -]; diff --git a/packages/react/test/base/src/pages/overlay-components/OverlayComponents.tsx b/packages/react/test/base/src/pages/overlay-components/OverlayComponents.tsx index 75bf98bb734..b13a1ea898c 100644 --- a/packages/react/test/base/src/pages/overlay-components/OverlayComponents.tsx +++ b/packages/react/test/base/src/pages/overlay-components/OverlayComponents.tsx @@ -17,7 +17,6 @@ import ModalComponent from './ModalComponent'; import ModalFocusTrap from './ModalFocusTrap'; import ModalSheetChildRoute from './ModalSheetChildRoute'; import ModalTeleport from './ModalTeleport'; -import PickerComponent from './PickerComponent'; import PopoverComponent from './PopoverComponent'; import ToastComponent from './ToastComponent'; @@ -35,7 +34,6 @@ const OverlayHooks: React.FC = () => { - diff --git a/packages/react/test/base/src/pages/overlay-components/PickerComponent.tsx b/packages/react/test/base/src/pages/overlay-components/PickerComponent.tsx deleted file mode 100644 index 42fe4b295cb..00000000000 --- a/packages/react/test/base/src/pages/overlay-components/PickerComponent.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React, { useState } from 'react'; -import { IonButton, IonContent, IonPage, IonPickerLegacy } from '@ionic/react'; - -const PickerComponent: React.FC = () => { - const [show, setShow] = useState(false); - const [value, setValue] = useState(''); - return ( - - - { - setValue(`${selected.animal.value}, ${selected.vehicle.value}`); - }, - }, - ]} - columns={[ - { - name: 'animal', - options: [ - { text: 'Dog', value: 'dog' }, - { text: 'Cat', value: 'cat' }, - { text: 'Bird', value: 'bird' }, - ], - }, - { - name: 'vehicle', - options: [ - { text: 'Car', value: 'car' }, - { text: 'Truck', value: 'truck' }, - { text: 'Bike', value: 'bike' }, - ], - }, - ]} - onDidDismiss={() => setShow(false)} - /> - setShow(true)}> - Show Picker - - - { - setShow(true); - setTimeout(() => setShow(false), 250); - }} - > - Show Picker, hide after 250 ms - - {value &&
Selected Value: {value}
} - - - ); -}; - -export default PickerComponent; diff --git a/packages/react/test/base/src/pages/overlay-hooks/OverlayHooks.tsx b/packages/react/test/base/src/pages/overlay-hooks/OverlayHooks.tsx index 4cc9bf88ddd..0d1d07c7910 100644 --- a/packages/react/test/base/src/pages/overlay-hooks/OverlayHooks.tsx +++ b/packages/react/test/base/src/pages/overlay-hooks/OverlayHooks.tsx @@ -7,14 +7,12 @@ import { alarm, alertCircle, logoGoogle, - logoIonic, newspaper, star, } from 'ionicons/icons'; import AlertHook from './AlertHook'; import LoadingHook from './LoadingHook'; import ModalHook from './ModalHook'; -import PickerHook from './PickerHook'; import PopoverHook from './PopoverHook'; import ToastHook from './ToastHook'; @@ -29,7 +27,6 @@ const OverlayHooks: React.FC = () => { - @@ -50,10 +47,6 @@ const OverlayHooks: React.FC = () => { Modal - - - Picker - Popover diff --git a/packages/react/test/base/src/pages/overlay-hooks/PickerHook.tsx b/packages/react/test/base/src/pages/overlay-hooks/PickerHook.tsx deleted file mode 100644 index 864c500af6d..00000000000 --- a/packages/react/test/base/src/pages/overlay-hooks/PickerHook.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import React, { useState } from 'react'; -import { IonButton, IonContent, IonPage, useIonPicker } from '@ionic/react'; - -const PickerHook: React.FC = () => { - const [present, dismiss] = useIonPicker(); - const [value, setValue] = useState(''); - return ( - - - - present({ - buttons: [ - { - text: 'Confirm', - handler: (selected) => { - console.log(`${selected.animal.value} picked`); - setValue(selected.animal.value); - }, - }, - ], - columns: [ - { - name: 'animal', - options: [ - { text: 'Dog', value: 'dog' }, - { text: 'Cat', value: 'cat' }, - { text: 'Bird', value: 'bird' }, - ], - }, - ], - }) - } - > - Show Picker with options - - - present( - [ - { - name: 'animal', - options: [ - { text: 'Dog', value: 'dog' }, - { text: 'Cat', value: 'cat' }, - { text: 'Bird', value: 'bird' }, - ], - }, - { - name: 'vehicle', - options: [ - { text: 'Car', value: 'car' }, - { text: 'Truck', value: 'truck' }, - { text: 'Bike', value: 'bike' }, - ], - }, - ], - [ - { - text: 'Confirm', - handler: (selected) => { - setValue(`${selected.animal.value}, ${selected.vehicle.value}`); - }, - }, - ] - ) - } - > - Show Picker with params - - { - present([ - { - name: 'animal', - options: [ - { text: 'Dog', value: 'dog' }, - { text: 'Cat', value: 'cat' }, - { text: 'Bird', value: 'bird' }, - ], - }, - ]); - setTimeout(dismiss, 250); - }} - > - Show Picker, hide after 250 ms - - {value &&
Selected Value: {value}
} - - - ); -}; - -export default PickerHook; diff --git a/packages/react/test/base/tests/e2e/specs/overlay-components/IonPicker.cy.ts b/packages/react/test/base/tests/e2e/specs/overlay-components/IonPicker.cy.ts deleted file mode 100644 index aa5e8cc231c..00000000000 --- a/packages/react/test/base/tests/e2e/specs/overlay-components/IonPicker.cy.ts +++ /dev/null @@ -1,26 +0,0 @@ -describe('IonPicker', () => { - beforeEach(() => { - cy.visit('/overlay-components/picker'); - }); - - it('display picker', () => { - //show picker - cy.get('ion-button').contains('Show Picker').click(); - cy.get('ion-picker-legacy').contains('Bird').click(); - cy.get('ion-picker-legacy').contains('Bike').click(); - cy.get('ion-picker-legacy button').contains('Confirm').click(); - cy.get('ion-picker-legacy').should('not.be.visible'); - - //confirm value - cy.get('div').contains('Selected Value: bird, bike'); - }); - - it('display picker and call dismiss to close it', () => { - //show picker - cy.get('ion-button').contains('Show Picker, hide after 250 ms').click(); - cy.get('ion-picker-legacy').contains('Cat'); - - //verify picker is gone - cy.get('ion-picker-legacy').should('not.be.visible'); - }); -}); diff --git a/packages/react/test/base/tests/e2e/specs/overlay-hooks/useIonPicker.cy.ts b/packages/react/test/base/tests/e2e/specs/overlay-hooks/useIonPicker.cy.ts deleted file mode 100644 index b51b13523ad..00000000000 --- a/packages/react/test/base/tests/e2e/specs/overlay-hooks/useIonPicker.cy.ts +++ /dev/null @@ -1,37 +0,0 @@ -describe('useIonPicker', () => { - beforeEach(() => { - cy.visit('/overlay-hooks/picker'); - }); - - it('display picker using options', () => { - //show picker - cy.get('ion-button').contains('Show Picker with options').click(); - cy.get('ion-picker-legacy').contains('Cat').click(); - cy.get('ion-picker-legacy button').contains('Confirm').click(); - cy.get('ion-picker-legacy').should('not.exist'); - - //confirm value - cy.get('div').contains('Selected Value: cat'); - }); - - it('display picker using params', () => { - //show picker - cy.get('ion-button').contains('Show Picker with params').click(); - cy.get('ion-picker-legacy').contains('Bird').click(); - cy.get('ion-picker-legacy').contains('Bike').click(); - cy.get('ion-picker-legacy button').contains('Confirm').click(); - cy.get('ion-picker-legacy').should('not.exist'); - - //confirm value - cy.get('div').contains('Selected Value: bird, bike'); - }); - - it('display picker and call dismiss to close it', () => { - //show picker - cy.get('ion-button').contains('Show Picker, hide after 250 ms').click(); - cy.get('ion-picker-legacy').contains('Cat'); - - //verify picker is gone - cy.get('ion-picker-legacy').should('not.exist'); - }); -}); diff --git a/packages/vue/scripts/copy-overlays.js b/packages/vue/scripts/copy-overlays.js index b400cd38463..748b7558f6b 100644 --- a/packages/vue/scripts/copy-overlays.js +++ b/packages/vue/scripts/copy-overlays.js @@ -15,10 +15,6 @@ function generateOverlays() { tag: 'ion-loading', name: 'IonLoading' }, - { - tag: 'ion-picker-legacy', - name: 'IonPickerLegacy' - }, { tag: 'ion-toast', name: 'IonToast' diff --git a/packages/vue/src/components/Overlays.ts b/packages/vue/src/components/Overlays.ts index 25345043e6f..a68267babb5 100644 --- a/packages/vue/src/components/Overlays.ts +++ b/packages/vue/src/components/Overlays.ts @@ -10,7 +10,6 @@ import { defineCustomElement as defineIonActionSheetCustomElement } from '@ionic import { defineCustomElement as defineIonAlertCustomElement } from '@ionic/core/components/ion-alert.js' import { defineCustomElement as defineIonLoadingCustomElement } from '@ionic/core/components/ion-loading.js' import { defineCustomElement as defineIonModalCustomElement } from '@ionic/core/components/ion-modal.js' -import { defineCustomElement as defineIonPickerLegacyCustomElement } from '@ionic/core/components/ion-picker-legacy.js' import { defineCustomElement as defineIonPopoverCustomElement } from '@ionic/core/components/ion-popover.js' import { defineCustomElement as defineIonToastCustomElement } from '@ionic/core/components/ion-toast.js' @@ -24,8 +23,6 @@ export const IonLoading = /*@__PURE__*/ defineOverlayContainer(' export const IonModal = /*@__PURE__*/ defineOverlayContainer('ion-modal', defineIonModalCustomElement, ['animated', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'expandToScroll', 'focusTrap', 'handle', 'handleBehavior', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'trigger'], true); -export const IonPickerLegacy = /*@__PURE__*/ defineOverlayContainer('ion-picker-legacy', defineIonPickerLegacyCustomElement, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger']); - export const IonPopover = /*@__PURE__*/ defineOverlayContainer('ion-popover', defineIonPopoverCustomElement, ['alignment', 'animated', 'arrow', 'backdropDismiss', 'component', 'componentProps', 'dismissOnSelect', 'enterAnimation', 'event', 'focusTrap', 'htmlAttributes', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'reference', 'showBackdrop', 'side', 'size', 'translucent', 'trigger', 'triggerAction']); export const IonToast = /*@__PURE__*/ defineOverlayContainer('ion-toast', defineIonToastCustomElement, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'swipeGesture', 'translucent', 'trigger']); diff --git a/packages/vue/src/controllers.ts b/packages/vue/src/controllers.ts index a0de8a4e2cf..b7121e61100 100644 --- a/packages/vue/src/controllers.ts +++ b/packages/vue/src/controllers.ts @@ -4,14 +4,12 @@ import { alertController as alertCtrl, actionSheetController as actionSheetCtrl, loadingController as loadingCtrl, - pickerController as pickerCtrl, toastController as toastCtrl, } from "@ionic/core/components"; import { defineCustomElement as defineIonActionSheetCustomElement } from "@ionic/core/components/ion-action-sheet.js"; import { defineCustomElement as defineIonAlertCustomElement } from "@ionic/core/components/ion-alert.js"; import { defineCustomElement as defineIonLoadingCustomElement } from "@ionic/core/components/ion-loading.js"; import { defineCustomElement as defineIonModalCustomElement } from "@ionic/core/components/ion-modal.js"; -import { defineCustomElement as defineIonPickerCustomElement } from "@ionic/core/components/ion-picker-legacy.js"; import { defineCustomElement as defineIonPopoverCustomElement } from "@ionic/core/components/ion-popover.js"; import { defineCustomElement as defineIonToastCustomElement } from "@ionic/core/components/ion-toast.js"; @@ -72,13 +70,6 @@ const loadingController = /*@__PURE__*/ createController( loadingCtrl ); -/** - * @deprecated Use the inline ion-picker component instead. - */ -const pickerController = /*@__PURE__*/ createController( - defineIonPickerCustomElement, - pickerCtrl -); const toastController = /*@__PURE__*/ createController( defineIonToastCustomElement, toastCtrl @@ -90,6 +81,5 @@ export { alertController, actionSheetController, loadingController, - pickerController, toastController, }; diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts index bea59d65c38..fd19ff6a199 100644 --- a/packages/vue/src/index.ts +++ b/packages/vue/src/index.ts @@ -30,7 +30,6 @@ export { alertController, actionSheetController, loadingController, - pickerController, toastController, } from "./controllers"; @@ -94,10 +93,6 @@ export { ModalDragEventDetail, ModalOptions, NavCustomEvent, - PickerOptions, - PickerButton, - PickerColumn, - PickerColumnOption, Platforms, PlatformConfig, PopoverOptions,