Skip to content

Commit 2cba460

Browse files
liamdebeasiliamdebeasi
authored
chore(): merge feature-6.2 into main
chore(): merge feature-6.2 into main
2 parents 57a21ad + 0390509 commit 2cba460

File tree

394 files changed

+5586
-610
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

394 files changed

+5586
-610
lines changed

‎angular/src/directives/overlays/modal.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export declare interface IonModal extends Components.IonModal {
5454
@ProxyCmp({
5555
inputs: [
5656
'animated',
57+
'keepContentsMounted',
5758
'backdropBreakpoint',
5859
'backdropDismiss',
5960
'breakpoints',
@@ -62,6 +63,7 @@ export declare interface IonModal extends Components.IonModal {
6263
'enterAnimation',
6364
'event',
6465
'handle',
66+
'handleBehavior',
6567
'initialBreakpoint',
6668
'isOpen',
6769
'keyboardClose',
@@ -78,9 +80,12 @@ export declare interface IonModal extends Components.IonModal {
7880
@Component({
7981
selector: 'ion-modal',
8082
changeDetection: ChangeDetectionStrategy.OnPush,
81-
template: `<div class="ion-page" *ngIf="isCmpOpen"><ng-container [ngTemplateOutlet]="template"></ng-container></div>`,
83+
template: `<div class="ion-page" *ngIf="isCmpOpen || keepContentsMounted">
84+
<ng-container [ngTemplateOutlet]="template"></ng-container>
85+
</div>`,
8286
inputs: [
8387
'animated',
88+
'keepContentsMounted',
8489
'backdropBreakpoint',
8590
'backdropDismiss',
8691
'breakpoints',
@@ -89,6 +94,7 @@ export declare interface IonModal extends Components.IonModal {
8994
'enterAnimation',
9095
'event',
9196
'handle',
97+
'handleBehavior',
9298
'initialBreakpoint',
9399
'isOpen',
94100
'keyboardClose',

‎angular/src/directives/overlays/popover.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ export declare interface IonPopover extends Components.IonPopover {
5151
'alignment',
5252
'animated',
5353
'arrow',
54+
'keepContentsMounted',
5455
'backdropDismiss',
5556
'cssClass',
5657
'dismissOnSelect',
@@ -73,11 +74,12 @@ export declare interface IonPopover extends Components.IonPopover {
7374
@Component({
7475
selector: 'ion-popover',
7576
changeDetection: ChangeDetectionStrategy.OnPush,
76-
template: `<ng-container [ngTemplateOutlet]="template" *ngIf="isCmpOpen"></ng-container>`,
77+
template: `<ng-container [ngTemplateOutlet]="template" *ngIf="isCmpOpen || keepContentsMounted"></ng-container>`,
7778
inputs: [
7879
'alignment',
7980
'animated',
8081
'arrow',
82+
'keepContentsMounted',
8183
'backdropDismiss',
8284
'cssClass',
8385
'dismissOnSelect',

‎angular/src/directives/proxies-list.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export const DIRECTIVES = [
2323
d.IonCol,
2424
d.IonContent,
2525
d.IonDatetime,
26+
d.IonDatetimeButton,
2627
d.IonFab,
2728
d.IonFabButton,
2829
d.IonFabList,

‎angular/src/directives/proxies.ts

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -524,14 +524,14 @@ export declare interface IonDatetime extends Components.IonDatetime {
524524

525525
@ProxyCmp({
526526
defineCustomElementFn: undefined,
527-
inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'name', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'value', 'yearValues'],
527+
inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'value', 'yearValues'],
528528
methods: ['confirm', 'reset', 'cancel']
529529
})
530530
@Component({
531531
selector: 'ion-datetime',
532532
changeDetection: ChangeDetectionStrategy.OnPush,
533533
template: '<ng-content></ng-content>',
534-
inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'name', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'value', 'yearValues']
534+
inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'value', 'yearValues']
535535
})
536536
export class IonDatetime {
537537
protected el: HTMLElement;
@@ -543,6 +543,27 @@ export class IonDatetime {
543543
}
544544

545545

546+
export declare interface IonDatetimeButton extends Components.IonDatetimeButton {}
547+
548+
@ProxyCmp({
549+
defineCustomElementFn: undefined,
550+
inputs: ['color', 'datetime', 'disabled', 'mode']
551+
})
552+
@Component({
553+
selector: 'ion-datetime-button',
554+
changeDetection: ChangeDetectionStrategy.OnPush,
555+
template: '<ng-content></ng-content>',
556+
inputs: ['color', 'datetime', 'disabled', 'mode']
557+
})
558+
export class IonDatetimeButton {
559+
protected el: HTMLElement;
560+
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
561+
c.detach();
562+
this.el = r.nativeElement;
563+
}
564+
}
565+
566+
546567
export declare interface IonFab extends Components.IonFab {}
547568

548569
@ProxyCmp({
@@ -1304,13 +1325,13 @@ mouse drag, touch gesture, or keyboard interaction.
13041325

13051326
@ProxyCmp({
13061327
defineCustomElementFn: undefined,
1307-
inputs: ['color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
1328+
inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
13081329
})
13091330
@Component({
13101331
selector: 'ion-range',
13111332
changeDetection: ChangeDetectionStrategy.OnPush,
13121333
template: '<ng-content></ng-content>',
1313-
inputs: ['color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
1334+
inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
13141335
})
13151336
export class IonRange {
13161337
protected el: HTMLElement;
@@ -1979,13 +2000,13 @@ export declare interface IonToggle extends Components.IonToggle {
19792000

19802001
@ProxyCmp({
19812002
defineCustomElementFn: undefined,
1982-
inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value']
2003+
inputs: ['checked', 'color', 'disabled', 'enableOnOffLabels', 'mode', 'name', 'value']
19832004
})
19842005
@Component({
19852006
selector: 'ion-toggle',
19862007
changeDetection: ChangeDetectionStrategy.OnPush,
19872008
template: '<ng-content></ng-content>',
1988-
inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value']
2009+
inputs: ['checked', 'color', 'disabled', 'enableOnOffLabels', 'mode', 'name', 'value']
19892010
})
19902011
export class IonToggle {
19912012
protected el: HTMLElement;

‎angular/test/test-app/e2e/src/keep-contents-mounted.spec.ts

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
describe('overlays - keepContentsMounted', () => {
2+
describe('modal', () => {
3+
it('should not mount component if false', () => {
4+
cy.visit('/modal-inline');
5+
6+
cy.get('ion-modal ion-content').should('not.exist');
7+
});
8+
9+
it('should mount component if true', () => {
10+
cy.visit('/keep-contents-mounted');
11+
12+
cy.get('ion-modal ion-content').should('exist');
13+
});
14+
15+
it('should keep component mounted after dismissing if true', () => {
16+
cy.visit('/keep-contents-mounted');
17+
18+
cy.get('#open-modal').click();
19+
20+
cy.get('ion-modal ion-content').should('exist');
21+
22+
cy.get('ion-modal ion-button').click();
23+
24+
cy.get('ion-modal')
25+
.should('not.be.visible')
26+
.should('have.class', 'overlay-hidden');
27+
28+
cy.get('ion-modal ion-content').should('exist');
29+
});
30+
})
31+
describe('popover', () => {
32+
it('should not mount component if false', () => {
33+
cy.visit('/popover-inline');
34+
35+
cy.get('ion-popover ion-content').should('not.exist');
36+
});
37+
38+
it('should mount component if true', () => {
39+
cy.visit('/keep-contents-mounted');
40+
41+
cy.get('ion-popover ion-content').should('exist');
42+
});
43+
44+
it('should keep component mounted after dismissing if true', () => {
45+
cy.visit('/keep-contents-mounted');
46+
47+
cy.get('#open-popover').click();
48+
49+
cy.get('ion-popover ion-content').should('exist');
50+
51+
cy.get('ion-popover ion-button').click();
52+
53+
cy.get('ion-popover')
54+
.should('not.be.visible')
55+
.should('have.class', 'overlay-hidden');
56+
57+
cy.get('ion-popover ion-content').should('exist');
58+
});
59+
});
60+
});

‎angular/test/test-app/e2e/src/popover.spec.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,17 @@ describe('Popovers: Inline', () => {
44
});
55

66
it('should initially have no items', () => {
7+
cy.get('ion-button').click();
8+
9+
cy.get('ion-popover').should('be.visible');
710
cy.get('ion-list ion-item').should('not.exist');
811
});
912

1013
it('should have items after 1500ms', () => {
14+
cy.get('ion-button').click();
15+
16+
cy.get('ion-popover').should('be.visible');
17+
1118
cy.wait(1500);
1219

1320
cy.get('ion-list ion-item:nth-child(1)').should('have.text', 'A');

‎angular/test/test-app/src/app/app-routing.module.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const routes: Routes = [
3131
{ path: 'modals', component: ModalComponent },
3232
{ path: 'modal-inline', loadChildren: () => import('./modal-inline').then(m => m.ModalInlineModule) },
3333
{ path: 'view-child', component: ViewChildComponent },
34+
{ path: 'keep-contents-mounted', loadChildren: () => import('./keep-contents-mounted').then(m => m.OverlayAutoMountModule) },
3435
{ path: 'popover-inline', loadChildren: () => import('./popover-inline').then(m => m.PopoverInlineModule) },
3536
{ path: 'providers', component: ProvidersComponent },
3637
{ path: 'router-link', component: RouterLinkComponent },

‎angular/test/test-app/src/app/keep-contents-mounted/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './keep-contents-mounted.component';
2+
export * from './keep-contents-mounted.module';

‎angular/test/test-app/src/app/keep-contents-mounted/keep-contents-mounted-routing.module.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { NgModule } from "@angular/core";
2+
import { RouterModule } from "@angular/router";
3+
import { OverlayKeepContentsMounted } from ".";
4+
5+
@NgModule({
6+
imports: [
7+
RouterModule.forChild([
8+
{
9+
path: '',
10+
component: OverlayKeepContentsMounted
11+
}
12+
])
13+
],
14+
exports: [RouterModule]
15+
})
16+
export class OverlayKeepContentsMountedRoutingModule { }

‎angular/test/test-app/src/app/keep-contents-mounted/keep-contents-mounted.component.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<ion-content>
2+
<ion-button id="open-modal" (click)="modal.present()">Open Modal</ion-button>
3+
<ion-button id="open-popover" (click)="popover.present()">Open Popover</ion-button>
4+
5+
<ion-modal [keepContentsMounted]="true" #modal>
6+
<ng-template>
7+
<ion-content>
8+
<ion-button (click)="modal.dismiss()">Dismiss</ion-button>
9+
Modal Content
10+
</ion-content>
11+
</ng-template>
12+
</ion-modal>
13+
14+
<ion-popover [keepContentsMounted]="true" #popover>
15+
<ng-template>
16+
<ion-content>
17+
<ion-button (click)="popover.dismiss()">Dismiss</ion-button>
18+
Popover Content
19+
</ion-content>
20+
</ng-template>
21+
</ion-popover>
22+
</ion-content>

‎angular/test/test-app/src/app/keep-contents-mounted/keep-contents-mounted.component.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Component } from "@angular/core";
2+
3+
/**
4+
* Validates that inline modals correctly mount
5+
* inner components when keepContentsMounted is
6+
* enabled.
7+
*/
8+
@Component({
9+
selector: 'app-keep-contents-mounted',
10+
templateUrl: 'keep-contents-mounted.component.html'
11+
})
12+
export class OverlayKeepContentsMounted {
13+
}

‎angular/test/test-app/src/app/keep-contents-mounted/keep-contents-mounted.module.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { CommonModule } from "@angular/common";
2+
import { NgModule } from "@angular/core";
3+
import { IonicModule } from "@ionic/angular";
4+
import { OverlayKeepContentsMountedRoutingModule } from "./keep-contents-mounted-routing.module";
5+
import { OverlayKeepContentsMounted } from "./keep-contents-mounted.component";
6+
7+
@NgModule({
8+
imports: [CommonModule, IonicModule, OverlayKeepContentsMountedRoutingModule],
9+
declarations: [OverlayKeepContentsMounted],
10+
exports: [OverlayKeepContentsMounted]
11+
})
12+
export class OverlayAutoMountModule { }

‎angular/test/test-app/src/app/popover-inline/popover-inline.component.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
<ion-popover [isOpen]="true">
1+
<ion-button (click)="openPopover(popover)">Open Popover</ion-button>
2+
3+
<ion-popover #popover>
24
<ng-template>
35
<ion-content>
46
<ion-list>

‎angular/test/test-app/src/app/popover-inline/popover-inline.component.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AfterViewInit, Component } from "@angular/core";
1+
import { Component } from "@angular/core";
22

33
/**
44
* Validates that inline popovers will correctly display
@@ -9,11 +9,13 @@ import { AfterViewInit, Component } from "@angular/core";
99
selector: 'app-popover-inline',
1010
templateUrl: 'popover-inline.component.html'
1111
})
12-
export class PopoverInlineComponent implements AfterViewInit {
12+
export class PopoverInlineComponent {
1313

1414
items: string[] = [];
1515

16-
ngAfterViewInit(): void {
16+
openPopover(popover: HTMLIonPopoverElement) {
17+
popover.present();
18+
1719
setTimeout(() => {
1820
this.items = ['A', 'B', 'C', 'D'];
1921
}, 1000);

0 commit comments

Comments
 (0)