diff --git a/.github/workflows/actions/build-core/action.yml b/.github/workflows/actions/build-core/action.yml
index 4d711dd0c7..6b7647160b 100644
--- a/.github/workflows/actions/build-core/action.yml
+++ b/.github/workflows/actions/build-core/action.yml
@@ -4,6 +4,9 @@ runs:
using: 'composite'
steps:
- uses: actions/checkout@v2
+ with:
+ # Checkout the latest commit in this branch
+ ref: ${{ github.event.pull_request.head.sha }}
- uses: actions/setup-node@v1
with:
node-version: 15.x
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index e20d6c76d1..c1194c6998 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -9,6 +9,9 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
+ with:
+ # Checkout the latest commit in this branch
+ ref: ${{ github.event.pull_request.head.sha }}
- uses: ./.github/workflows/actions/build-core
test-core-clean-build:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d97cc5f979..5975af68bb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,21 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [6.0.15](https://github.com/ionic-team/ionic-framework/compare/v6.0.14...v6.0.15) (2022-04-06)
+
+
+### Bug Fixes
+
+* **angular:** item styling when control has value ([#24932](https://github.com/ionic-team/ionic-framework/issues/24932)) ([eea25d0](https://github.com/ionic-team/ionic-framework/commit/eea25d091d7eb319d6ec1de8b793881d3a10949b)), closes [#23809](https://github.com/ionic-team/ionic-framework/issues/23809)
+* **angular:** routerLink allows opening in a new tab for link elements ([#25014](https://github.com/ionic-team/ionic-framework/issues/25014)) ([b010f07](https://github.com/ionic-team/ionic-framework/commit/b010f077fe51992dd9dd8ced69769a8eb91ac055)), closes [#24413](https://github.com/ionic-team/ionic-framework/issues/24413)
+* **datetime:** warn when parsing an invalid date value ([#25049](https://github.com/ionic-team/ionic-framework/issues/25049)) ([982dc85](https://github.com/ionic-team/ionic-framework/commit/982dc853befe8ccf54163a0b145e563da06f5dc1))
+* **picker-column:** column renders correctly with selected value ([#24988](https://github.com/ionic-team/ionic-framework/issues/24988)) ([8318659](https://github.com/ionic-team/ionic-framework/commit/83186598ed6cf08b0f0421076c4afb3ab53e1e57)), closes [#17664](https://github.com/ionic-team/ionic-framework/issues/17664)
+* **popover:** allow arrow on desktop ([#25056](https://github.com/ionic-team/ionic-framework/issues/25056)) ([bcd00c7](https://github.com/ionic-team/ionic-framework/commit/bcd00c7a6ebb6a00193f04458976ff8b86395215))
+
+
+
+
+
## [6.0.14](https://github.com/ionic-team/ionic-framework/compare/v6.0.13...v6.0.14) (2022-03-30)
diff --git a/angular/CHANGELOG.md b/angular/CHANGELOG.md
index e1157487fe..71cee8f371 100644
--- a/angular/CHANGELOG.md
+++ b/angular/CHANGELOG.md
@@ -3,6 +3,18 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [6.0.15](https://github.com/ionic-team/ionic/compare/v6.0.14...v6.0.15) (2022-04-06)
+
+
+### Bug Fixes
+
+* **angular:** item styling when control has value ([#24932](https://github.com/ionic-team/ionic/issues/24932)) ([eea25d0](https://github.com/ionic-team/ionic/commit/eea25d091d7eb319d6ec1de8b793881d3a10949b)), closes [#23809](https://github.com/ionic-team/ionic/issues/23809)
+* **angular:** routerLink allows opening in a new tab for link elements ([#25014](https://github.com/ionic-team/ionic/issues/25014)) ([b010f07](https://github.com/ionic-team/ionic/commit/b010f077fe51992dd9dd8ced69769a8eb91ac055)), closes [#24413](https://github.com/ionic-team/ionic/issues/24413)
+
+
+
+
+
## [6.0.14](https://github.com/ionic-team/ionic/compare/v6.0.13...v6.0.14) (2022-03-30)
**Note:** Version bump only for package @ionic/angular
diff --git a/angular/package-lock.json b/angular/package-lock.json
index 8dec44faf2..30768cd1f1 100644
--- a/angular/package-lock.json
+++ b/angular/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/angular",
- "version": "6.0.14",
+ "version": "6.0.15",
"lockfileVersion": 2,
"requires": true,
"packages": {
diff --git a/angular/package.json b/angular/package.json
index 3e26d67fe4..e589be58b6 100644
--- a/angular/package.json
+++ b/angular/package.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/angular",
- "version": "6.0.14",
+ "version": "6.0.15",
"description": "Angular specific wrappers for @ionic/core",
"keywords": [
"ionic",
@@ -44,7 +44,7 @@
"validate": "npm i && npm run lint && npm run test && npm run build"
},
"dependencies": {
- "@ionic/core": "^6.0.14",
+ "@ionic/core": "^6.0.15",
"jsonc-parser": "^3.0.0",
"tslib": "^2.0.0"
},
diff --git a/angular/src/directives/control-value-accessors/value-accessor.ts b/angular/src/directives/control-value-accessors/value-accessor.ts
index daa4a72685..615d736828 100644
--- a/angular/src/directives/control-value-accessors/value-accessor.ts
+++ b/angular/src/directives/control-value-accessors/value-accessor.ts
@@ -110,13 +110,17 @@ export class ValueAccessor implements ControlValueAccessor, AfterViewInit, OnDes
export const setIonicClasses = (element: ElementRef): void => {
raf(() => {
- const input = element.nativeElement as HTMLElement;
+ const input = element.nativeElement as HTMLInputElement;
+ const hasValue = input.value != null && input.value.toString().length > 0;
const classes = getClasses(input);
setClasses(input, classes);
-
const item = input.closest('ion-item');
if (item) {
- setClasses(item, classes);
+ if (hasValue) {
+ setClasses(item, [...classes, 'item-has-value']);
+ } else {
+ setClasses(item, classes);
+ }
}
});
};
@@ -127,7 +131,7 @@ const getClasses = (element: HTMLElement) => {
for (let i = 0; i < classList.length; i++) {
const item = classList.item(i);
if (item !== null && startsWith(item, 'ng-')) {
- classes.push(`ion-${item.substr(3)}`);
+ classes.push(`ion-${item.substring(3)}`);
}
}
return classes;
@@ -135,13 +139,10 @@ const getClasses = (element: HTMLElement) => {
const setClasses = (element: HTMLElement, classes: string[]) => {
const classList = element.classList;
- ['ion-valid', 'ion-invalid', 'ion-touched', 'ion-untouched', 'ion-dirty', 'ion-pristine'].forEach((c) =>
- classList.remove(c)
- );
-
- classes.forEach((c) => classList.add(c));
+ classList.remove('ion-valid', 'ion-invalid', 'ion-touched', 'ion-untouched', 'ion-dirty', 'ion-pristine');
+ classList.add(...classes);
};
const startsWith = (input: string, search: string): boolean => {
- return input.substr(0, search.length) === search;
+ return input.substring(0, search.length) === search;
};
diff --git a/angular/src/directives/navigation/router-link-delegate.ts b/angular/src/directives/navigation/router-link-delegate.ts
index 31bcf9c8e3..40a2a395a8 100644
--- a/angular/src/directives/navigation/router-link-delegate.ts
+++ b/angular/src/directives/navigation/router-link-delegate.ts
@@ -12,7 +12,7 @@ import { NavController } from '../../providers/nav-controller';
* animation so that the routing integration will transition correctly.
*/
@Directive({
- selector: '[routerLink]',
+ selector: ':not(a):not(area)[routerLink]',
})
export class RouterLinkDelegateDirective implements OnInit, OnChanges {
@Input()
@@ -37,9 +37,56 @@ export class RouterLinkDelegateDirective implements OnInit, OnChanges {
this.updateTargetUrlAndHref();
}
- @HostListener('click')
- onClick(): void {
+ private updateTargetUrlAndHref() {
+ if (this.routerLink?.urlTree) {
+ const href = this.locationStrategy.prepareExternalUrl(this.router.serializeUrl(this.routerLink.urlTree));
+ this.elementRef.nativeElement.href = href;
+ }
+ }
+
+ /**
+ * @internal
+ */
+ @HostListener('click', ['$event'])
+ onClick(ev: UIEvent): void {
this.navCtrl.setDirection(this.routerDirection, undefined, undefined, this.routerAnimation);
+
+ /**
+ * This prevents the browser from
+ * performing a page reload when pressing
+ * an Ionic component with routerLink.
+ * The page reload interferes with routing
+ * and causes ion-back-button to disappear
+ * since the local history is wiped on reload.
+ */
+ ev.preventDefault();
+ }
+}
+
+@Directive({
+ selector: 'a[routerLink],area[routerLink]',
+})
+export class RouterLinkWithHrefDelegateDirective implements OnInit, OnChanges {
+ @Input()
+ routerDirection: RouterDirection = 'forward';
+
+ @Input()
+ routerAnimation?: AnimationBuilder;
+
+ constructor(
+ private locationStrategy: LocationStrategy,
+ private navCtrl: NavController,
+ private elementRef: ElementRef,
+ private router: Router,
+ @Optional() private routerLink?: RouterLink
+ ) {}
+
+ ngOnInit(): void {
+ this.updateTargetUrlAndHref();
+ }
+
+ ngOnChanges(): void {
+ this.updateTargetUrlAndHref();
}
private updateTargetUrlAndHref() {
@@ -48,4 +95,12 @@ export class RouterLinkDelegateDirective implements OnInit, OnChanges {
this.elementRef.nativeElement.href = href;
}
}
+
+ /**
+ * @internal
+ */
+ @HostListener('click')
+ onClick(): void {
+ this.navCtrl.setDirection(this.routerDirection, undefined, undefined, this.routerAnimation);
+ }
}
diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index 8b098ac0f4..4d13028008 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -1791,7 +1791,7 @@ export declare interface IonSplitPane extends Components.IonSplitPane {
/**
* Expression to be called when the split-pane visibility has changed
*/
- ionSplitPaneVisible: EventEmitter>;
+ ionSplitPaneVisible: EventEmitter>;
}
diff --git a/angular/src/index.ts b/angular/src/index.ts
index 12f9f34c9e..1ad3660a2e 100644
--- a/angular/src/index.ts
+++ b/angular/src/index.ts
@@ -8,7 +8,11 @@ export { IonTabs } from './directives/navigation/ion-tabs';
export { IonBackButtonDelegateDirective as IonBackButtonDelegate } from './directives/navigation/ion-back-button';
export { NavDelegate } from './directives/navigation/nav-delegate';
export { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
-export { RouterLinkDelegateDirective as RouterLinkDelegate } from './directives/navigation/router-link-delegate';
+export {
+ RouterLinkDelegateDirective as RouterLinkDelegate,
+ RouterLinkWithHrefDelegateDirective as RouterLinkWithHrefDelegate,
+} from './directives/navigation/router-link-delegate';
+
export { NavParams } from './directives/navigation/nav-params';
export { IonVirtualScroll } from './directives/virtual-scroll/virtual-scroll';
export { VirtualItem } from './directives/virtual-scroll/virtual-item';
diff --git a/angular/src/ionic-module.ts b/angular/src/ionic-module.ts
index 28986acd97..2e58b0ba1c 100644
--- a/angular/src/ionic-module.ts
+++ b/angular/src/ionic-module.ts
@@ -12,7 +12,10 @@ import { IonBackButtonDelegateDirective } from './directives/navigation/ion-back
import { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
import { IonTabs } from './directives/navigation/ion-tabs';
import { NavDelegate } from './directives/navigation/nav-delegate';
-import { RouterLinkDelegateDirective } from './directives/navigation/router-link-delegate';
+import {
+ RouterLinkDelegateDirective,
+ RouterLinkWithHrefDelegateDirective,
+} from './directives/navigation/router-link-delegate';
import { IonModal } from './directives/overlays/modal';
import { IonPopover } from './directives/overlays/popover';
import {
@@ -195,6 +198,7 @@ const DECLARATIONS = [
IonBackButtonDelegateDirective,
NavDelegate,
RouterLinkDelegateDirective,
+ RouterLinkWithHrefDelegateDirective,
// virtual scroll
VirtualFooter,
diff --git a/angular/test/test-app/e2e/src/modal.spec.ts b/angular/test/test-app/e2e/src/modal.spec.ts
index b91e110369..22d80bc04a 100644
--- a/angular/test/test-app/e2e/src/modal.spec.ts
+++ b/angular/test/test-app/e2e/src/modal.spec.ts
@@ -43,7 +43,6 @@ describe('Modals', () => {
});
-
describe('Modals: Inline', () => {
beforeEach(() => {
cy.visit('/modal-inline');
@@ -92,3 +91,29 @@ describe('Modals: Inline', () => {
});
});
+
+describe('when in a modal', () => {
+
+ beforeEach(() => {
+ cy.visit('/modals');
+ cy.get('#action-button').click();
+ cy.get('#close-modal').click();
+ cy.get('#action-button').click();
+ });
+
+ it('should render ion-item item-has-value class when control value is set', () => {
+ cy.get('[formControlName="select"]').invoke('attr', 'value', 0);
+ cy.get('#inputWithFloatingLabel').should('have.class', 'item-has-value');
+ });
+
+ it('should not render ion-item item-has-value class when control value is undefined', () => {
+ cy.get('[formControlName="select"]').invoke('attr', 'value', undefined);
+ cy.get('#inputWithFloatingLabel').should('not.have.class', 'item-has-value');
+ });
+
+ it('should not render ion-item item-has-value class when control value is null', () => {
+ cy.get('[formControlName="select"]').invoke('attr', 'value', null);
+ cy.get('#inputWithFloatingLabel').should('not.have.class', 'item-has-value');
+ });
+
+});
diff --git a/angular/test/test-app/src/app/modal-example/modal-example.component.html b/angular/test/test-app/src/app/modal-example/modal-example.component.html
index 6562262ede..513f7ad889 100644
--- a/angular/test/test-app/src/app/modal-example/modal-example.component.html
+++ b/angular/test/test-app/src/app/modal-example/modal-example.component.html
@@ -22,4 +22,14 @@
Push page
Pop page
+
+
diff --git a/angular/test/test-app/src/app/modal-example/modal-example.component.ts b/angular/test/test-app/src/app/modal-example/modal-example.component.ts
index 363e0db61e..a9640244c8 100644
--- a/angular/test/test-app/src/app/modal-example/modal-example.component.ts
+++ b/angular/test/test-app/src/app/modal-example/modal-example.component.ts
@@ -1,4 +1,5 @@
import { Component, Input, NgZone, OnInit, Optional } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
import { ModalController, NavParams, IonNav, ViewWillLeave, ViewDidEnter, ViewDidLeave } from '@ionic/angular';
@Component({
@@ -9,6 +10,10 @@ export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnte
@Input() value: string;
+ form = new FormGroup({
+ select: new FormControl([])
+ });
+
valueFromParams: string;
onInit = 0;
willEnter = 0;
diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md
index be945c9260..502c149c3a 100644
--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,19 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [6.0.15](https://github.com/ionic-team/ionic/compare/v6.0.14...v6.0.15) (2022-04-06)
+
+
+### Bug Fixes
+
+* **datetime:** warn when parsing an invalid date value ([#25049](https://github.com/ionic-team/ionic/issues/25049)) ([982dc85](https://github.com/ionic-team/ionic/commit/982dc853befe8ccf54163a0b145e563da06f5dc1))
+* **picker-column:** column renders correctly with selected value ([#24988](https://github.com/ionic-team/ionic/issues/24988)) ([8318659](https://github.com/ionic-team/ionic/commit/83186598ed6cf08b0f0421076c4afb3ab53e1e57)), closes [#17664](https://github.com/ionic-team/ionic/issues/17664)
+* **popover:** allow arrow on desktop ([#25056](https://github.com/ionic-team/ionic/issues/25056)) ([bcd00c7](https://github.com/ionic-team/ionic/commit/bcd00c7a6ebb6a00193f04458976ff8b86395215))
+
+
+
+
+
## [6.0.14](https://github.com/ionic-team/ionic/compare/v6.0.13...v6.0.14) (2022-03-30)
**Note:** Version bump only for package @ionic/core
diff --git a/core/api.txt b/core/api.txt
index 42482b3967..52477ca83f 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -27,7 +27,7 @@ ion-action-sheet,prop,buttons,(string | ActionSheetButton)[],[],false,false
ion-action-sheet,prop,cssClass,string | string[] | undefined,undefined,false,false
ion-action-sheet,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-action-sheet,prop,header,string | undefined,undefined,false,false
-ion-action-sheet,prop,htmlAttributes,ActionSheetAttributes | undefined,undefined,false,false
+ion-action-sheet,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
ion-action-sheet,prop,keyboardClose,boolean,true,false,false
ion-action-sheet,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-action-sheet,prop,mode,"ios" | "md",undefined,false,false
@@ -72,7 +72,7 @@ ion-alert,prop,buttons,(string | AlertButton)[],[],false,false
ion-alert,prop,cssClass,string | string[] | undefined,undefined,false,false
ion-alert,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-alert,prop,header,string | undefined,undefined,false,false
-ion-alert,prop,htmlAttributes,AlertAttributes | undefined,undefined,false,false
+ion-alert,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
ion-alert,prop,inputs,AlertInput[],[],false,false
ion-alert,prop,keyboardClose,boolean,true,false,false
ion-alert,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
@@ -683,7 +683,7 @@ ion-loading,prop,backdropDismiss,boolean,false,false,false
ion-loading,prop,cssClass,string | string[] | undefined,undefined,false,false
ion-loading,prop,duration,number,0,false,false
ion-loading,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
-ion-loading,prop,htmlAttributes,LoadingAttributes | undefined,undefined,false,false
+ion-loading,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
ion-loading,prop,keyboardClose,boolean,true,false,false
ion-loading,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-loading,prop,message,IonicSafeString | string | undefined,undefined,false,false
@@ -772,7 +772,7 @@ ion-modal,prop,breakpoints,number[] | undefined,undefined,false,false
ion-modal,prop,canDismiss,(() => Promise) | boolean | undefined,undefined,false,false
ion-modal,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-modal,prop,handle,boolean | undefined,undefined,false,false
-ion-modal,prop,htmlAttributes,ModalAttributes | undefined,undefined,false,false
+ion-modal,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
ion-modal,prop,initialBreakpoint,number | undefined,undefined,false,false
ion-modal,prop,isOpen,boolean,false,false,false
ion-modal,prop,keyboardClose,boolean,true,false,false
@@ -854,7 +854,7 @@ ion-picker,prop,columns,PickerColumn[],[],false,false
ion-picker,prop,cssClass,string | string[] | undefined,undefined,false,false
ion-picker,prop,duration,number,0,false,false
ion-picker,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
-ion-picker,prop,htmlAttributes,PickerAttributes | undefined,undefined,false,false
+ion-picker,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
ion-picker,prop,keyboardClose,boolean,true,false,false
ion-picker,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-picker,prop,mode,"ios" | "md",undefined,false,false
@@ -892,7 +892,7 @@ ion-popover,prop,componentProps,undefined | { [key: string]: any; },undefined,fa
ion-popover,prop,dismissOnSelect,boolean,false,false,false
ion-popover,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-popover,prop,event,any,undefined,false,false
-ion-popover,prop,htmlAttributes,PopoverAttributes | undefined,undefined,false,false
+ion-popover,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
ion-popover,prop,isOpen,boolean,false,false,false
ion-popover,prop,keyboardClose,boolean,true,false,false
ion-popover,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
@@ -1130,7 +1130,7 @@ ion-segment-button,prop,disabled,boolean,false,false,false
ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false,false
ion-segment-button,prop,mode,"ios" | "md",undefined,false,false
ion-segment-button,prop,type,"button" | "reset" | "submit",'button',false,false
-ion-segment-button,prop,value,string,'ion-sb-' + (ids++),false,false
+ion-segment-button,prop,value,string,'ion-sb-' + ids++,false,false
ion-segment-button,css-prop,--background
ion-segment-button,css-prop,--background-checked
ion-segment-button,css-prop,--background-focused
@@ -1370,7 +1370,7 @@ ion-toast,prop,cssClass,string | string[] | undefined,undefined,false,false
ion-toast,prop,duration,number,0,false,false
ion-toast,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-toast,prop,header,string | undefined,undefined,false,false
-ion-toast,prop,htmlAttributes,ToastAttributes | undefined,undefined,false,false
+ion-toast,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
ion-toast,prop,icon,string | undefined,undefined,false,false
ion-toast,prop,keyboardClose,boolean,false,false,false
ion-toast,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
diff --git a/core/package-lock.json b/core/package-lock.json
index 3a57a3a199..8040284519 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/core",
- "version": "6.0.14",
+ "version": "6.0.15",
"lockfileVersion": 2,
"requires": true,
"packages": {
diff --git a/core/package.json b/core/package.json
index fe11654474..cac7aae742 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/core",
- "version": "6.0.14",
+ "version": "6.0.15",
"description": "Base components for Ionic",
"keywords": [
"ionic",
diff --git a/core/src/components/action-sheet/action-sheet-interface.ts b/core/src/components/action-sheet/action-sheet-interface.ts
index 1e19094da6..55c72eb01c 100644
--- a/core/src/components/action-sheet/action-sheet-interface.ts
+++ b/core/src/components/action-sheet/action-sheet-interface.ts
@@ -1,5 +1,3 @@
-import type { JSXBase } from '@stencil/core/internal';
-
import type { AnimationBuilder, Mode } from '../../interface';
export interface ActionSheetOptions {
@@ -19,7 +17,10 @@ export interface ActionSheetOptions {
leaveAnimation?: AnimationBuilder;
}
-export type ActionSheetAttributes = JSXBase.HTMLAttributes;
+/**
+ * @deprecated - Use { [key: string]: any } directly instead.
+ */
+export type ActionSheetAttributes = { [key: string]: any };
export interface ActionSheetButton {
text?: string;
diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md
index 5118dee711..d0051e663d 100644
--- a/core/src/components/action-sheet/readme.md
+++ b/core/src/components/action-sheet/readme.md
@@ -65,19 +65,13 @@ interface ActionSheetOptions {
mode?: Mode;
keyboardClose?: boolean;
id?: string;
- htmlAttributes?: ActionSheetAttributes;
+ htmlAttributes?: { [key: string]: any };
enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;
}
```
-### ActionSheetAttributes
-
-```typescript
-interface ActionSheetAttributes extends JSXBase.HTMLAttributes {}
-```
-
@@ -569,7 +563,7 @@ export default defineComponent({
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `enterAnimation` | -- | Animation to use when the action sheet is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `header` | `header` | Title for the action sheet. | `string \| undefined` | `undefined` |
-| `htmlAttributes` | -- | Additional attributes to pass to the action sheet. | `ActionSheetAttributes \| undefined` | `undefined` |
+| `htmlAttributes` | -- | Additional attributes to pass to the action sheet. | `undefined \| { [key: string]: any; }` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the action sheet is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts
index fbcde7c7a4..9cc650179d 100644
--- a/core/src/components/alert/alert-interface.ts
+++ b/core/src/components/alert/alert-interface.ts
@@ -1,5 +1,3 @@
-import type { JSXBase } from '@stencil/core/internal';
-
import type { AnimationBuilder, Mode, TextFieldTypes } from '../../interface';
import type { IonicSafeString } from '../../utils/sanitization';
@@ -23,7 +21,10 @@ export interface AlertOptions {
leaveAnimation?: AnimationBuilder;
}
-export type AlertAttributes = JSXBase.HTMLAttributes;
+/**
+ * @deprecated - Use { [key: string]: any } directly instead.
+ */
+export type AlertAttributes = { [key: string]: any };
export interface AlertInput {
type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';
@@ -42,8 +43,15 @@ export interface AlertInput {
tabindex?: number;
}
-export type AlertTextareaAttributes = JSXBase.TextareaHTMLAttributes;
-export type AlertInputAttributes = JSXBase.InputHTMLAttributes;
+/**
+ * @deprecated - Use { [key: string]: any } directly instead.
+ */
+export type AlertTextareaAttributes = { [key: string]: any };
+
+/**
+ * @deprecated - Use { [key: string]: any } directly instead.
+ */
+export type AlertInputAttributes = { [key: string]: any };
export interface AlertButton {
text: string;
diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md
index c99b964ae7..151a1d39f8 100644
--- a/core/src/components/alert/readme.md
+++ b/core/src/components/alert/readme.md
@@ -71,16 +71,11 @@ interface AlertInput {
min?: string | number;
max?: string | number;
cssClass?: string | string[];
- attributes?: AlertInputAttributes | AlertTextareaAttributes;
+ attributes?: { [key: string]: any };
tabindex?: number;
}
```
-### AlertInputAttributes
-
-```typescript
-interface AlertInputAttributes extends JSXBase.InputHTMLAttributes {}
-```
### AlertOptions
@@ -95,7 +90,7 @@ interface AlertOptions {
backdropDismiss?: boolean;
translucent?: boolean;
animated?: boolean;
- htmlAttributes?: AlertAttributes;
+ htmlAttributes?: { [key: string]: any };
mode?: Mode;
keyboardClose?: boolean;
@@ -106,17 +101,6 @@ interface AlertOptions {
}
```
-### AlertAttributes
-```typescript
-interface AlertAttributes extends JSXBase.HTMLAttributes {}
-```
-
-### AlertTextareaAttributes
-```typescript
-interface AlertTextareaAttributes extends JSXBase.TextareaHTMLAttributes {}
-```
-
-
@@ -1784,7 +1768,7 @@ export default defineComponent({
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `enterAnimation` | -- | Animation to use when the alert is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `header` | `header` | The main title in the heading of the alert. | `string \| undefined` | `undefined` |
-| `htmlAttributes` | -- | Additional attributes to pass to the alert. | `AlertAttributes \| undefined` | `undefined` |
+| `htmlAttributes` | -- | Additional attributes to pass to the alert. | `undefined \| { [key: string]: any; }` | `undefined` |
| `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` | `[]` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 0c32666fbe..ebab2a6e15 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -1,6 +1,7 @@
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core';
import { printIonError } from '@utils/logging';
+import { printIonError, printIonWarning } from '@utils/logging';
import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from 'ionicons/icons';
import { getIonMode } from '../../global/ionic-global';
@@ -314,15 +315,20 @@ export class Datetime implements ComponentInterface {
* This allows us to update the current value's date/time display without
* refocusing or shifting the user's display (leaves the user in place).
*/
- const { month, day, year, hour, minute } = parseDate(this.value);
- this.activePartsClone = {
- ...this.activeParts,
- month,
- day,
- year,
- hour,
- minute,
- };
+ const valueDateParts = parseDate(this.value);
+ if (valueDateParts) {
+ const { month, day, year, hour, minute } = valueDateParts;
+ this.activePartsClone = {
+ ...this.activeParts,
+ month,
+ day,
+ year,
+ hour,
+ minute,
+ };
+ } else {
+ printIonWarning(`Unable to parse date string: ${this.value}. Please provide a valid ISO 8601 datetime string.`);
+ }
}
this.emitStyle();
diff --git a/core/src/components/item-sliding/readme.md b/core/src/components/item-sliding/readme.md
index aa23ff1f7c..9a92a0a187 100644
--- a/core/src/components/item-sliding/readme.md
+++ b/core/src/components/item-sliding/readme.md
@@ -873,7 +873,7 @@ export default defineComponent({
### `close() => Promise`
-Close the sliding item. Items can also be closed from the [List](../list).
+Close the sliding item. Items can also be closed from the [List](./list).
#### Returns
@@ -883,7 +883,7 @@ Type: `Promise`
### `closeOpened() => Promise`
-Close all of the sliding items in the list. Items can also be closed from the [List](../list).
+Close all of the sliding items in the list. Items can also be closed from the [List](./list).
#### Returns
diff --git a/core/src/components/loading/loading-interface.ts b/core/src/components/loading/loading-interface.ts
index c9a80c5ad7..ed76940e29 100644
--- a/core/src/components/loading/loading-interface.ts
+++ b/core/src/components/loading/loading-interface.ts
@@ -1,5 +1,3 @@
-import type { JSXBase } from '@stencil/core/internal';
-
import type { AnimationBuilder, Mode, SpinnerTypes } from '../../interface';
import type { IonicSafeString } from '../../utils/sanitization';
@@ -21,4 +19,7 @@ export interface LoadingOptions {
leaveAnimation?: AnimationBuilder;
}
-export type LoadingAttributes = JSXBase.HTMLAttributes;
+/**
+ * @deprecated - Use { [key: string]: any } directly instead.
+ */
+export type LoadingAttributes = { [key: string]: any };
diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md
index f72094383d..1d8af440fa 100644
--- a/core/src/components/loading/readme.md
+++ b/core/src/components/loading/readme.md
@@ -54,18 +54,13 @@ interface LoadingOptions {
mode?: Mode;
keyboardClose?: boolean;
id?: string;
- htmlAttributes?: LoadingAttributes;
+ htmlAttributes?: { [key: string]: any };
enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;
}
```
-### LoadingAttributes
-
-```typescript
-interface LoadingAttributes extends JSXBase.HTMLAttributes {}
-```
@@ -380,7 +375,7 @@ export default defineComponent({
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | `0` |
| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
-| `htmlAttributes` | -- | Additional attributes to pass to the loader. | `LoadingAttributes \| undefined` | `undefined` |
+| `htmlAttributes` | -- | Additional attributes to pass to the loader. | `undefined \| { [key: string]: any; }` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `message` | `message` | Optional text content to display in the loading indicator. | `IonicSafeString \| string \| undefined` | `undefined` |
diff --git a/core/src/components/modal/modal-interface.ts b/core/src/components/modal/modal-interface.ts
index ffe46d2768..7e693f1667 100644
--- a/core/src/components/modal/modal-interface.ts
+++ b/core/src/components/modal/modal-interface.ts
@@ -1,5 +1,3 @@
-import type { JSXBase } from '@stencil/core/internal';
-
import type { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode } from '../../interface';
export interface ModalOptions {
@@ -33,8 +31,6 @@ export interface ModalAnimationOptions {
backdropBreakpoint?: number;
}
-export type ModalAttributes = JSXBase.HTMLAttributes;
-
export interface ModalBreakpointChangeEventDetail {
breakpoint: number;
}
@@ -42,3 +38,8 @@ export interface ModalBreakpointChangeEventDetail {
export interface ModalCustomEvent extends CustomEvent {
target: HTMLIonModalElement;
}
+
+/**
+ * @deprecated - Use { [key: string]: any } directly instead.
+ */
+export type ModalAttributes = { [key: string]: any };
diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md
index 086b9a2b47..2d2536bd13 100644
--- a/core/src/components/modal/readme.md
+++ b/core/src/components/modal/readme.md
@@ -155,7 +155,7 @@ interface ModalOptions {
mode?: Mode;
keyboardClose?: boolean;
id?: string;
- htmlAttributes?: ModalAttributes;
+ htmlAttributes?: { [key: string]: any };
enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;
@@ -167,11 +167,6 @@ interface ModalOptions {
}
```
-### ModalAttributes
-
-```typescript
-interface ModalAttributes extends JSXBase.HTMLAttributes {}
-```
## Accessibility
@@ -1594,7 +1589,7 @@ export default {
| `canDismiss` | `can-dismiss` | Determines whether or not a modal can dismiss when calling the `dismiss` method. If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss. | `(() => Promise) \| boolean \| undefined` | `undefined` |
| `enterAnimation` | -- | Animation to use when the modal is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `handle` | `handle` | The horizontal line that displays at the top of a sheet modal. It is `true` by default when setting the `breakpoints` and `initialBreakpoint` properties. | `boolean \| undefined` | `undefined` |
-| `htmlAttributes` | -- | Additional attributes to pass to the modal. | `ModalAttributes \| undefined` | `undefined` |
+| `htmlAttributes` | -- | Additional attributes to pass to the modal. | `undefined \| { [key: string]: any; }` | `undefined` |
| `initialBreakpoint` | `initial-breakpoint` | A decimal value between 0 and 1 that indicates the initial point the modal will open at when creating a sheet modal. This value must also be listed in the `breakpoints` array. | `number \| undefined` | `undefined` |
| `isOpen` | `is-open` | If `true`, the modal will open. If `false`, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the modal dismisses. You will need to do that in your code. | `boolean` | `false` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
diff --git a/core/src/components/picker/picker-interface.ts b/core/src/components/picker/picker-interface.ts
index 58b9bcebd6..6fed197756 100644
--- a/core/src/components/picker/picker-interface.ts
+++ b/core/src/components/picker/picker-interface.ts
@@ -1,5 +1,3 @@
-import type { JSXBase } from '@stencil/core/internal';
-
import type { AnimationBuilder, Mode } from '../../interface';
export interface PickerOptions {
@@ -19,7 +17,10 @@ export interface PickerOptions {
leaveAnimation?: AnimationBuilder;
}
-export type PickerAttributes = JSXBase.HTMLAttributes;
+/**
+ * @deprecated - Use { [key: string]: any } directly instead.
+ */
+export type PickerAttributes = { [key: string]: any };
export interface PickerButton {
text?: string;
diff --git a/core/src/components/picker/readme.md b/core/src/components/picker/readme.md
index c661f46422..7fedbad88d 100644
--- a/core/src/components/picker/readme.md
+++ b/core/src/components/picker/readme.md
@@ -62,18 +62,13 @@ interface PickerOptions {
mode?: Mode;
keyboardClose?: boolean;
id?: string;
- htmlAttributes?: PickerAttributes;
+ htmlAttributes?: { [key: string]: any };
enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;
}
```
-### PickerAttributes
-
-```typescript
-interface PickerAttributes extends JSXBase.HTMLAttributes {}
-```
@@ -235,7 +230,7 @@ export default {
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `duration` | `duration` | Number of milliseconds to wait before dismissing the picker. | `number` | `0` |
| `enterAnimation` | -- | Animation to use when the picker is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
-| `htmlAttributes` | -- | Additional attributes to pass to the picker. | `PickerAttributes \| undefined` | `undefined` |
+| `htmlAttributes` | -- | Additional attributes to pass to the picker. | `undefined \| { [key: string]: any; }` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the picker is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
diff --git a/core/src/components/popover/popover-interface.ts b/core/src/components/popover/popover-interface.ts
index 8e5c42480e..a70691b9c7 100644
--- a/core/src/components/popover/popover-interface.ts
+++ b/core/src/components/popover/popover-interface.ts
@@ -1,5 +1,3 @@
-import type { JSXBase } from '@stencil/core/internal';
-
import type {
AnimationBuilder,
ComponentProps,
@@ -43,7 +41,10 @@ export interface PopoverOptions {
triggerAction?: string;
}
-export type PopoverAttributes = JSXBase.HTMLAttributes;
+/**
+ * @deprecated - Use { [key: string]: any } directly instead.
+ */
+export type PopoverAttributes = { [key: string]: any };
export type PopoverSize = 'cover' | 'auto';
diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md
index f1300471e0..6d84a66a32 100644
--- a/core/src/components/popover/readme.md
+++ b/core/src/components/popover/readme.md
@@ -98,7 +98,7 @@ interface PopoverOptions {
mode?: 'ios' | 'md';
keyboardClose?: boolean;
id?: string;
- htmlAttributes?: PopoverAttributes;
+ htmlAttributes?: { [key: string]: any };
enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;
@@ -112,11 +112,6 @@ interface PopoverOptions {
}
```
-### PopoverAttributes
-
-```typescript
-interface PopoverAttributes extends JSXBase.HTMLAttributes {}
-```
## Types
@@ -962,7 +957,7 @@ export default {
| `dismissOnSelect` | `dismiss-on-select` | If `true`, the popover will be automatically dismissed when the content has been clicked. | `boolean` | `false` |
| `enterAnimation` | -- | Animation to use when the popover is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `event` | `event` | The event to pass to the popover animation. | `any` | `undefined` |
-| `htmlAttributes` | -- | Additional attributes to pass to the popover. | `HTMLAttributes \| undefined` | `undefined` |
+| `htmlAttributes` | -- | Additional attributes to pass to the popover. | `undefined \| { [key: string]: any; }` | `undefined` |
| `isOpen` | `is-open` | If `true`, the popover will open. If `false`, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the popover dismisses. You will need to do that in your code. | `boolean` | `false` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
diff --git a/core/src/components/segment-button/readme.md b/core/src/components/segment-button/readme.md
index 921a9d8b2f..f2fb8f0c3d 100644
--- a/core/src/components/segment-button/readme.md
+++ b/core/src/components/segment-button/readme.md
@@ -798,13 +798,13 @@ export default defineComponent({
## Properties
-| Property | Attribute | Description | Type | Default |
-| ---------- | ---------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | --------------------- |
-| `disabled` | `disabled` | If `true`, the user cannot interact with the segment button. | `boolean` | `false` |
-| `layout` | `layout` | Set the layout of the text and icon in the segment. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `'icon-top'` |
-| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
-| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
-| `value` | `value` | The value of the segment button. | `string` | `'ion-sb-' + (ids++)` |
+| Property | Attribute | Description | Type | Default |
+| ---------- | ---------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | ------------------- |
+| `disabled` | `disabled` | If `true`, the user cannot interact with the segment button. | `boolean` | `false` |
+| `layout` | `layout` | Set the layout of the text and icon in the segment. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `'icon-top'` |
+| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
+| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
+| `value` | `value` | The value of the segment button. | `string` | `'ion-sb-' + ids++` |
## Shadow Parts
diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md
index 770a987154..8564446143 100644
--- a/core/src/components/select/readme.md
+++ b/core/src/components/select/readme.md
@@ -1367,20 +1367,20 @@ export default defineComponent({
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------------ | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | -------------- |
-| `cancelText` | `cancel-text` | The text to display on the cancel button. | `string` | `'Cancel'` |
-| `compareWith` | `compare-with` | A property name or function used to compare object values | `((currentValue: any, compareValue: any) => boolean) \| null \| string \| undefined` | `undefined` |
-| `disabled` | `disabled` | If `true`, the user cannot interact with the select. | `boolean` | `false` |
-| `interface` | `interface` | The interface the select should use: `action-sheet`, `popover` or `alert`. | `"action-sheet" \| "alert" \| "popover"` | `'alert'` |
-| `interfaceOptions` | `interface-options` | Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](../alert), the [ion-action-sheet docs](../action-sheet) and the [ion-popover docs](../popover) for the create options for each interface. Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface. | `any` | `{}` |
-| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
-| `multiple` | `multiple` | If `true`, the select can accept multiple values. | `boolean` | `false` |
-| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` |
-| `okText` | `ok-text` | The text to display on the ok button. | `string` | `'OK'` |
-| `placeholder` | `placeholder` | The text to display when the select is empty. | `string \| undefined` | `undefined` |
-| `selectedText` | `selected-text` | The text to display instead of the selected option's value. | `null \| string \| undefined` | `undefined` |
-| `value` | `value` | the value of the select. | `any` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ | -------------- |
+| `cancelText` | `cancel-text` | The text to display on the cancel button. | `string` | `'Cancel'` |
+| `compareWith` | `compare-with` | A property name or function used to compare object values | `((currentValue: any, compareValue: any) => boolean) \| null \| string \| undefined` | `undefined` |
+| `disabled` | `disabled` | If `true`, the user cannot interact with the select. | `boolean` | `false` |
+| `interface` | `interface` | The interface the select should use: `action-sheet`, `popover` or `alert`. | `"action-sheet" \| "alert" \| "popover"` | `'alert'` |
+| `interfaceOptions` | `interface-options` | Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet) and the [ion-popover docs](./popover) for the create options for each interface. Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface. | `any` | `{}` |
+| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
+| `multiple` | `multiple` | If `true`, the select can accept multiple values. | `boolean` | `false` |
+| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` |
+| `okText` | `ok-text` | The text to display on the ok button. | `string` | `'OK'` |
+| `placeholder` | `placeholder` | The text to display when the select is empty. | `string \| undefined` | `undefined` |
+| `selectedText` | `selected-text` | The text to display instead of the selected option's value. | `null \| string \| undefined` | `undefined` |
+| `value` | `value` | the value of the select. | `any` | `undefined` |
## Events
diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md
index ead2432bd7..1b336f1887 100644
--- a/core/src/components/toast/readme.md
+++ b/core/src/components/toast/readme.md
@@ -42,7 +42,7 @@ interface ToastOptions {
translucent?: boolean;
animated?: boolean;
icon?: string;
- htmlAttributes?: ToastAttributes;
+ htmlAttributes?: { [key: string]: any };
color?: Color;
mode?: Mode;
@@ -54,11 +54,6 @@ interface ToastOptions {
}
```
-### ToastAttributes
-```typescript
-interface ToastAttributes extends JSXBase.HTMLAttributes {}
-```
-
## Accessibility
### Focus Management
@@ -447,7 +442,7 @@ export default defineComponent({
| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` | `0` |
| `enterAnimation` | -- | Animation to use when the toast is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `header` | `header` | Header to be shown in the toast. | `string \| undefined` | `undefined` |
-| `htmlAttributes` | -- | Additional attributes to pass to the toast. | `ToastAttributes \| undefined` | `undefined` |
+| `htmlAttributes` | -- | Additional attributes to pass to the toast. | `undefined \| { [key: string]: any; }` | `undefined` |
| `icon` | `icon` | The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons | `string \| undefined` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `false` |
| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
diff --git a/core/src/components/toast/toast-interface.ts b/core/src/components/toast/toast-interface.ts
index 079bb2e568..64ce592051 100644
--- a/core/src/components/toast/toast-interface.ts
+++ b/core/src/components/toast/toast-interface.ts
@@ -1,5 +1,3 @@
-import type { JSXBase } from '@stencil/core/internal';
-
import type { AnimationBuilder, Color, Mode } from '../../interface';
import type { IonicSafeString } from '../../utils/sanitization';
@@ -24,7 +22,10 @@ export interface ToastOptions {
leaveAnimation?: AnimationBuilder;
}
-export type ToastAttributes = JSXBase.HTMLAttributes;
+/**
+ * @deprecated - Use { [key: string]: any } directly instead.
+ */
+export type ToastAttributes = { [key: string]: any };
export interface ToastButton {
text?: string;
diff --git a/core/src/utils/logging/index.ts b/core/src/utils/logging/index.ts
index 589d81b518..45c03cbdcf 100644
--- a/core/src/utils/logging/index.ts
+++ b/core/src/utils/logging/index.ts
@@ -18,9 +18,10 @@ export const printIonWarning = (message: string) => {
export const printIonError = (message: string, ...params: any) => {
return console.error(`[Ionic Error]: ${message}`, ...params);
};
+
/**
* Prints an error informing developers that an implementation requires an element to be used
- * within a specific select.ro
+ * within a specific selector.
*
* @param el The web component element this is requiring the element.
* @param targetSelectors The selector or selectors that were not found.
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 38c6f1670b..8371beca9c 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [6.0.15](https://github.com/ionic-team/ionic-docs/compare/v6.0.14...v6.0.15) (2022-04-06)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
## [6.0.14](https://github.com/ionic-team/ionic-docs/compare/v6.0.13...v6.0.14) (2022-03-30)
**Note:** Version bump only for package @ionic/docs
diff --git a/docs/package.json b/docs/package.json
index 8ca425ab0e..c99472e86f 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/docs",
- "version": "6.0.14",
+ "version": "6.0.15",
"description": "Pre-packaged API documentation for the Ionic docs.",
"main": "core.json",
"types": "core.d.ts",
diff --git a/lerna.json b/lerna.json
index 64a1b6b2be..61835b9711 100644
--- a/lerna.json
+++ b/lerna.json
@@ -5,5 +5,5 @@
"angular",
"packages/*"
],
- "version": "6.0.14"
+ "version": "6.0.15"
}
diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md
index 7d4a8aec90..2d7e4a144f 100644
--- a/packages/angular-server/CHANGELOG.md
+++ b/packages/angular-server/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [6.0.15](https://github.com/ionic-team/ionic/compare/v6.0.14...v6.0.15) (2022-04-06)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
## [6.0.14](https://github.com/ionic-team/ionic/compare/v6.0.13...v6.0.14) (2022-03-30)
**Note:** Version bump only for package @ionic/angular-server
diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json
index a0846be8e9..1e2c733062 100644
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/angular-server",
- "version": "6.0.14",
+ "version": "6.0.15",
"lockfileVersion": 2,
"requires": true,
"packages": {
diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json
index 4f00ed6b70..a56c677a63 100644
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/angular-server",
- "version": "6.0.14",
+ "version": "6.0.15",
"description": "Angular SSR Module for Ionic",
"keywords": [
"ionic",
@@ -56,7 +56,7 @@
"@angular/platform-browser": "^12.0.0",
"@angular/platform-browser-dynamic": "^12.2.10",
"@angular/platform-server": "^12.0.0",
- "@ionic/core": "^6.0.14",
+ "@ionic/core": "^6.0.15",
"@ionic/eslint-config": "^0.3.0",
"@ionic/prettier-config": "^2.0.0",
"@typescript-eslint/eslint-plugin": "^5.2.0",
diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md
index 100829c79d..1329cfece2 100644
--- a/packages/react-router/CHANGELOG.md
+++ b/packages/react-router/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [6.0.15](https://github.com/ionic-team/ionic/compare/v6.0.14...v6.0.15) (2022-04-06)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
## [6.0.14](https://github.com/ionic-team/ionic/compare/v6.0.13...v6.0.14) (2022-03-30)
**Note:** Version bump only for package @ionic/react-router
diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json
index c326678258..02452ef492 100644
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/react-router",
- "version": "6.0.14",
+ "version": "6.0.15",
"lockfileVersion": 2,
"requires": true,
"packages": {
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index 6e4bf43c2d..504213d7ac 100644
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/react-router",
- "version": "6.0.14",
+ "version": "6.0.15",
"description": "React Router wrapper for @ionic/react",
"keywords": [
"ionic",
@@ -37,7 +37,7 @@
"dist/"
],
"dependencies": {
- "@ionic/react": "^6.0.14",
+ "@ionic/react": "^6.0.15",
"tslib": "*"
},
"peerDependencies": {
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 7fb332f50a..bc83f8b77a 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [6.0.15](https://github.com/ionic-team/ionic/compare/v6.0.14...v6.0.15) (2022-04-06)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
## [6.0.14](https://github.com/ionic-team/ionic/compare/v6.0.13...v6.0.14) (2022-03-30)
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index dafc3cc155..935552b4cd 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/react",
- "version": "6.0.14",
+ "version": "6.0.15",
"lockfileVersion": 2,
"requires": true,
"packages": {
diff --git a/packages/react/package.json b/packages/react/package.json
index f112e155a9..634f9de459 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/react",
- "version": "6.0.14",
+ "version": "6.0.15",
"description": "React specific wrapper for @ionic/core",
"keywords": [
"ionic",
@@ -41,7 +41,7 @@
"css/"
],
"dependencies": {
- "@ionic/core": "^6.0.14",
+ "@ionic/core": "^6.0.15",
"ionicons": "^6.0.0",
"tslib": "*"
},
diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md
index 49f5af0f65..5b7322534f 100644
--- a/packages/vue-router/CHANGELOG.md
+++ b/packages/vue-router/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [6.0.15](https://github.com/ionic-team/ionic/compare/v6.0.14...v6.0.15) (2022-04-06)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
## [6.0.14](https://github.com/ionic-team/ionic/compare/v6.0.13...v6.0.14) (2022-03-30)
**Note:** Version bump only for package @ionic/vue-router
diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json
index fa62dc9452..7921883702 100644
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/vue-router",
- "version": "6.0.14",
+ "version": "6.0.15",
"lockfileVersion": 2,
"requires": true,
"packages": {
diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json
index 1a94b920e9..43f4f9d7fd 100644
--- a/packages/vue-router/package.json
+++ b/packages/vue-router/package.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/vue-router",
- "version": "6.0.14",
+ "version": "6.0.15",
"description": "Vue Router integration for @ionic/vue",
"scripts": {
"prepublishOnly": "npm run build",
@@ -44,7 +44,7 @@
},
"homepage": "https://github.com/ionic-team/ionic#readme",
"dependencies": {
- "@ionic/vue": "^6.0.14"
+ "@ionic/vue": "^6.0.15"
},
"devDependencies": {
"@types/jest": "^26.0.13",
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index 0e8abc0bd8..bbb9924e14 100644
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [6.0.15](https://github.com/ionic-team/ionic/compare/v6.0.14...v6.0.15) (2022-04-06)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
## [6.0.14](https://github.com/ionic-team/ionic/compare/v6.0.13...v6.0.14) (2022-03-30)
**Note:** Version bump only for package @ionic/vue
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index fbc6bcc43e..642113afd0 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/vue",
- "version": "6.0.14",
+ "version": "6.0.15",
"lockfileVersion": 2,
"requires": true,
"packages": {
diff --git a/packages/vue/package.json b/packages/vue/package.json
index bca68f4fe4..0ca0adefa7 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/vue",
- "version": "6.0.14",
+ "version": "6.0.15",
"description": "Vue specific wrapper for @ionic/core",
"scripts": {
"prepublishOnly": "npm run build",
@@ -60,7 +60,7 @@
"vue-router": "^4.0.0-rc.4"
},
"dependencies": {
- "@ionic/core": "^6.0.14",
+ "@ionic/core": "^6.0.15",
"ionicons": "^6.0.0"
},
"vetur": {