javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: sync

Browse Source
This commit is contained in:
Liam DeBeasi
2023-11-15 12:06:22 -05:00
parent ce89057641 9fad566175
commit 2509d565b2
226 changed files with 28981 additions and 7846 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/angular/.prettierignore
View File

@ -3,4 +3,4 @@ scripts
test
proxies.ts
src/directives/proxies-list.ts
src/directives/angular-component-lib/utils.ts
**/*/angular-component-lib/utils.ts

30
packages/angular/CHANGELOG.md
View File

@ -3,6 +3,36 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [7.5.5](https://github.com/ionic-team/ionic-framework/compare/v7.5.4...v7.5.5) (2023-11-15)
**Note:** Version bump only for package @ionic/angular
## [7.5.4](https://github.com/ionic-team/ionic-framework/compare/v7.5.3...v7.5.4) (2023-11-08)
**Note:** Version bump only for package @ionic/angular
## [7.5.3](https://github.com/ionic-team/ionic-framework/compare/v7.5.2...v7.5.3) (2023-11-01)
### Bug Fixes
* **angular:** inputs on standalone form controls are reactive ([#28434](https://github.com/ionic-team/ionic-framework/issues/28434)) ([3b6e631](https://github.com/ionic-team/ionic-framework/commit/3b6e6318bf94125b3f8305b4d072a5945ceb3730)), closes [#28431](https://github.com/ionic-team/ionic-framework/issues/28431)
* **angular:** NavController works with nested outlets ([#28421](https://github.com/ionic-team/ionic-framework/issues/28421)) ([90acad1](https://github.com/ionic-team/ionic-framework/commit/90acad1837b117542830ec0083389a35c5b4ee76)), closes [#28417](https://github.com/ionic-team/ionic-framework/issues/28417)
* **angular:** run platform subscriptions inside zone ([#28404](https://github.com/ionic-team/ionic-framework/issues/28404)) ([a4b303e](https://github.com/ionic-team/ionic-framework/commit/a4b303e1338a35756a9cf7f67508d24d2f8537a2)), closes [#19539](https://github.com/ionic-team/ionic-framework/issues/19539)
* **angular:** standalone form components do not error when multiple are used ([#28423](https://github.com/ionic-team/ionic-framework/issues/28423)) ([89698b3](https://github.com/ionic-team/ionic-framework/commit/89698b338fb05cde427c98720c238d2365abdaa7)), closes [#28418](https://github.com/ionic-team/ionic-framework/issues/28418)
## [7.5.2](https://github.com/ionic-team/ionic-framework/compare/v7.5.1...v7.5.2) (2023-10-25)

8
packages/angular/common/src/index.ts
View File

@ -1,14 +1,7 @@
export { ActionSheetController } from './providers/action-sheet-controller';
export { AlertController } from './providers/alert-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 { AnimationController } from './providers/animation-controller';
export { GestureController } from './providers/gesture-controller';
export { DomController } from './providers/dom-controller';
export { NavController } from './providers/nav-controller';
@ -39,5 +32,6 @@ export * from './directives/control-value-accessors';
export { ProxyCmp } from './utils/proxy';
export { IonicRouteStrategy } from './utils/routing';
export { OverlayBaseController } from './utils/overlay';
export { raf } from './utils/util';

2
packages/angular/common/src/utils/overlay.ts
View File

@ -1,6 +1,6 @@
// TODO(FW-2827): types
interface ControllerShape<Opts, HTMLElm> {
export interface ControllerShape<Opts, HTMLElm> {
create(options: Opts): Promise<HTMLElm>;
dismiss(data?: any, role?: string, id?: string): Promise<boolean>;
getTop(): Promise<HTMLElm | undefined>;

34
packages/angular/package-lock.json generated
View File

@ -1,15 +1,15 @@
{
"name": "@ionic/angular",
"version": "7.5.2",
"version": "7.5.5",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/angular",
"version": "7.5.2",
"version": "7.5.5",
"license": "MIT",
"dependencies": {
"@ionic/core": "^7.5.2",
"@ionic/core": "^7.5.5",
"ionicons": "^7.0.0",
"jsonc-parser": "^3.0.0",
"tslib": "^2.3.0"
@ -1227,11 +1227,11 @@
"dev": true
},
"node_modules/@ionic/core": {
"version": "7.5.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.2.tgz",
"integrity": "sha512-0O8YgaE7CzrhDLGpnNq2Ia4bR+qFE1uHJHafoNWhoTXkydNnqSMZlxMCvtSetfv9bwLic93lcXYNoZ8I8zV3XA==",
"version": "7.5.5",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.5.tgz",
"integrity": "sha512-7Rn3OUz8QCob7yMuCLs5dVLpChscNCm+OqH8lqTzy3N/8VSKHLNPHIHTIa4DQm9HwjtpOB+XCTeIqbdWHkLgnA==",
"dependencies": {
"@stencil/core": "^4.6.0",
"@stencil/core": "^4.7.2",
"ionicons": "^7.2.1",
"tslib": "^2.1.0"
}
@ -1583,9 +1583,9 @@
}
},
"node_modules/@stencil/core": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.6.0.tgz",
"integrity": "sha512-5Y6/fP28aspPDRB+Tz5GuB1jRVGuUEk5/rnyE8ACGcuzEOG+zR0A/IHRJSU3XmCxUlVDKfKoO6St5W84oUCVMA==",
"version": "4.7.2",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.7.2.tgz",
"integrity": "sha512-sPPDYrXiTbfeUF5CCyfqysXK/yfTHC4xYR1+nHzGkS2vhRSBOLp0oPuB+xkJLKA+K2ZqDJUxpOnDxy1CLWwBXA==",
"bin": {
"stencil": "bin/stencil"
},
@ -8093,11 +8093,11 @@
"dev": true
},
"@ionic/core": {
"version": "7.5.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.2.tgz",
"integrity": "sha512-0O8YgaE7CzrhDLGpnNq2Ia4bR+qFE1uHJHafoNWhoTXkydNnqSMZlxMCvtSetfv9bwLic93lcXYNoZ8I8zV3XA==",
"version": "7.5.5",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.5.tgz",
"integrity": "sha512-7Rn3OUz8QCob7yMuCLs5dVLpChscNCm+OqH8lqTzy3N/8VSKHLNPHIHTIa4DQm9HwjtpOB+XCTeIqbdWHkLgnA==",
"requires": {
"@stencil/core": "^4.6.0",
"@stencil/core": "^4.7.2",
"ionicons": "^7.2.1",
"tslib": "^2.1.0"
}
@ -8327,9 +8327,9 @@
}
},
"@stencil/core": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.6.0.tgz",
"integrity": "sha512-5Y6/fP28aspPDRB+Tz5GuB1jRVGuUEk5/rnyE8ACGcuzEOG+zR0A/IHRJSU3XmCxUlVDKfKoO6St5W84oUCVMA=="
"version": "4.7.2",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.7.2.tgz",
"integrity": "sha512-sPPDYrXiTbfeUF5CCyfqysXK/yfTHC4xYR1+nHzGkS2vhRSBOLp0oPuB+xkJLKA+K2ZqDJUxpOnDxy1CLWwBXA=="
},
"@types/estree": {
"version": "0.0.39",

5
packages/angular/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@ionic/angular",
"version": "7.5.2",
"version": "7.5.5",
"description": "Angular specific wrappers for @ionic/core",
"keywords": [
"ionic",
@ -28,6 +28,7 @@
"build.core": "node scripts/build-core.js",
"build.link": "npm run build && node scripts/link-copy.js",
"build.ng": "ng-packagr -p ng-package.json -c tsconfig.json",
"build.watch": "npm run build.ng -- --watch",
"clean": "node scripts/clean.js",
"clean-generated": "node ./scripts/clean-generated.js",
"lint": "npm run eslint && npm run prettier -- --write --cache",
@ -47,7 +48,7 @@
}
},
"dependencies": {
"@ionic/core": "^7.5.2",
"@ionic/core": "^7.5.5",
"ionicons": "^7.0.0",
"jsonc-parser": "^3.0.0",
"tslib": "^2.3.0"

8
packages/angular/src/directives/angular-component-lib/utils.ts
View File

@ -12,6 +12,14 @@ export const proxyInputs = (Cmp: any, inputs: string[]) => {
set(val: any) {
this.z.runOutsideAngular(() => (this.el[item] = val));
},
/**
* In the event that proxyInputs is called
* multiple times re-defining these inputs
* will cause an error to be thrown. As a result
* we set configurable: true to indicate these
* properties can be changed.
*/
configurable: true,
});
});
};

12
packages/angular/src/index.ts
View File

@ -19,15 +19,9 @@ export * from './directives/validators';
// PROVIDERS
export {
ActionSheetController,
AlertController,
LoadingController,
ModalController,
PickerController,
PopoverController,
ToastController,
AnimationController,
GestureController,
DomController,
NavController,
Config,
@ -40,7 +34,13 @@ export {
ViewDidEnter,
ViewDidLeave,
} from '@ionic/angular/common';
export { AnimationController } from './providers/animation-controller';
export { ActionSheetController } from './providers/action-sheet-controller';
export { GestureController } from './providers/gesture-controller';
export { MenuController } from './providers/menu-controller';
export { ModalController } from './providers/modal-controller';
export { PopoverController } from './providers/popover-controller';
export { ToastController } from './providers/toast-controller';
// PACKAGE MODULE
export { IonicModule } from './ionic-module';

10
packages/angular/src/ionic-module.ts
View File

@ -1,12 +1,6 @@
import { CommonModule, DOCUMENT } from '@angular/common';
import { ModuleWithProviders, APP_INITIALIZER, NgModule, NgZone } from '@angular/core';
import {
ModalController,
PopoverController,
ConfigToken,
AngularDelegate,
provideComponentInputBinding,
} from '@ionic/angular/common';
import { ConfigToken, AngularDelegate, provideComponentInputBinding } from '@ionic/angular/common';
import { IonicConfig } from '@ionic/core';
import { appInitialize } from './app-initialize';
@ -28,6 +22,8 @@ import { IonModal } from './directives/overlays/modal';
import { IonPopover } from './directives/overlays/popover';
import { DIRECTIVES } from './directives/proxies-list';
import { IonMaxValidator, IonMinValidator } from './directives/validators';
import { ModalController } from './providers/modal-controller';
import { PopoverController } from './providers/popover-controller';
const DECLARATIONS = [
// generated proxies

13
packages/angular/src/providers/action-sheet-controller.ts Normal file
View File

@ -0,0 +1,13 @@
import { Injectable } from '@angular/core';
import { OverlayBaseController } from '@ionic/angular/common';
import type { ActionSheetOptions } from '@ionic/core';
import { actionSheetController } from '@ionic/core';
@Injectable({
providedIn: 'root',
})
export class ActionSheetController extends OverlayBaseController<ActionSheetOptions, HTMLIonActionSheetElement> {
constructor() {
super(actionSheetController);
}
}

33
packages/angular/src/providers/animation-controller.ts Normal file
View File

@ -0,0 +1,33 @@
import { Injectable } from '@angular/core';
import { createAnimation, getTimeGivenProgression } from '@ionic/core';
import type { Animation } from '@ionic/core';
@Injectable({
providedIn: 'root',
})
export class AnimationController {
/**
* Create a new animation
*/
create(animationId?: string): Animation {
return createAnimation(animationId);
}
/**
* EXPERIMENTAL
*
* Given a progression and a cubic bezier function,
* this utility returns the time value(s) at which the
* cubic bezier reaches the given time progression.
*
* If the cubic bezier never reaches the progression
* the result will be an empty array.
*
* This is most useful for switching between easing curves
* when doing a gesture animation (i.e. going from linear easing
* during a drag, to another easing when `progressEnd` is called)
*/
easingTime(p0: number[], p1: number[], p2: number[], p3: number[], progression: number): number[] {
return getTimeGivenProgression(p0, p1, p2, p3, progression);
}
}

25
packages/angular/src/providers/gesture-controller.ts Normal file
View File

@ -0,0 +1,25 @@
import { Injectable, NgZone } from '@angular/core';
import type { Gesture, GestureConfig } from '@ionic/core';
import { createGesture } from '@ionic/core';
@Injectable({
providedIn: 'root',
})
export class GestureController {
constructor(private zone: NgZone) {}
/**
* Create a new gesture
*/
create(opts: GestureConfig, runInsideAngularZone = false): Gesture {
if (runInsideAngularZone) {
Object.getOwnPropertyNames(opts).forEach((key) => {
if (typeof opts[key] === 'function') {
const fn = opts[key];
opts[key] = (...props: any[]) => this.zone.run(() => fn(...props));
}
});
}
return createGesture(opts);
}
}

22
packages/angular/src/providers/modal-controller.ts Normal file
View File

@ -0,0 +1,22 @@
import { Injector, Injectable, EnvironmentInjector, inject } from '@angular/core';
import { AngularDelegate, OverlayBaseController } from '@ionic/angular/common';
import type { ModalOptions } from '@ionic/core';
import { modalController } from '@ionic/core';
@Injectable()
export class ModalController extends OverlayBaseController<ModalOptions, HTMLIonModalElement> {
private angularDelegate = inject(AngularDelegate);
private injector = inject(Injector);
private environmentInjector = inject(EnvironmentInjector);
constructor() {
super(modalController);
}
create(opts: ModalOptions): Promise<HTMLIonModalElement> {
return super.create({
...opts,
delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'modal'),
});
}
}

21
packages/angular/src/providers/popover-controller.ts Normal file
View File

@ -0,0 +1,21 @@
import { Injector, inject, EnvironmentInjector } from '@angular/core';
import { AngularDelegate, OverlayBaseController } from '@ionic/angular/common';
import type { PopoverOptions } from '@ionic/core';
import { popoverController } from '@ionic/core';
export class PopoverController extends OverlayBaseController<PopoverOptions, HTMLIonPopoverElement> {
private angularDelegate = inject(AngularDelegate);
private injector = inject(Injector);
private environmentInjector = inject(EnvironmentInjector);
constructor() {
super(popoverController);
}
create(opts: PopoverOptions): Promise<HTMLIonPopoverElement> {
return super.create({
...opts,
delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'popover'),
});
}
}

13
packages/angular/src/providers/toast-controller.ts Normal file
View File

@ -0,0 +1,13 @@
import { Injectable } from '@angular/core';
import { OverlayBaseController } from '@ionic/angular/common';
import type { ToastOptions } from '@ionic/core';
import { toastController } from '@ionic/core';
@Injectable({
providedIn: 'root',
})
export class ToastController extends OverlayBaseController<ToastOptions, HTMLIonToastElement> {
constructor() {
super(toastController);
}
}

8
packages/angular/standalone/src/directives/angular-component-lib/utils.ts
View File

@ -12,6 +12,14 @@ export const proxyInputs = (Cmp: any, inputs: string[]) => {
set(val: any) {
this.z.runOutsideAngular(() => (this.el[item] = val));
},
/**
* In the event that proxyInputs is called
* multiple times re-defining these inputs
* will cause an error to be thrown. As a result
* we set configurable: true to indicate these
* properties can be changed.
*/
configurable: true,
});
});
};

54
packages/angular/standalone/src/directives/checkbox.ts
View File

@ -7,26 +7,14 @@ import {
HostListener,
Injector,
NgZone,
forwardRef,
} from '@angular/core';
import type { OnInit } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { ValueAccessor, setIonicClasses } from '@ionic/angular/common';
import type { CheckboxChangeEventDetail, Components } from '@ionic/core/components';
import { defineCustomElement } from '@ionic/core/components/ion-checkbox.js';
/**
* Value accessor components should not use ProxyCmp
* and should call defineCustomElement and proxyInputs
* manually instead. Using both the @ProxyCmp and @Component
* decorators and useExisting (where useExisting refers to the
* class) causes ng-packagr to output multiple component variables
* which breaks treeshaking.
* For example, the following would be generated:
* let IonCheckbox = IonCheckbox_1 = class IonCheckbox extends ValueAccessor {
* Instead, we want only want the class generated:
* class IonCheckbox extends ValueAccessor {
*/
import { proxyInputs, proxyOutputs } from './angular-component-lib/utils';
import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';
const CHECKBOX_INPUTS = [
'checked',
@ -41,40 +29,42 @@ const CHECKBOX_INPUTS = [
'value',
];
/**
* Pulling the provider into an object and using PURE works
* around an ng-packagr issue that causes
* components with multiple decorators and
* a provider to be re-assigned. This re-assignment
* is not supported by Webpack and causes treeshaking
* to not work on these kinds of components.
*/
const accessorProvider = {
provide: NG_VALUE_ACCESSOR,
useExisting: /*@__PURE__*/ forwardRef(() => IonCheckbox),
multi: true,
};
@ProxyCmp({
defineCustomElementFn: defineCustomElement,
inputs: CHECKBOX_INPUTS,
})
@Component({
selector: 'ion-checkbox',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: CHECKBOX_INPUTS,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: IonCheckbox,
multi: true,
},
],
providers: [accessorProvider],
standalone: true,
})
export class IonCheckbox extends ValueAccessor implements OnInit {
export class IonCheckbox extends ValueAccessor {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone, injector: Injector) {
super(injector, r);
defineCustomElement();
c.detach();
this.el = r.nativeElement;
proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']);
}
ngOnInit(): void {
/**
* Data-bound input properties are set
* by Angular after the constructor, so
* we need to run the proxy in ngOnInit.
*/
proxyInputs(IonCheckbox, CHECKBOX_INPUTS);
}
writeValue(value: boolean): void {
this.elementRef.nativeElement.checked = this.lastValue = value;
setIonicClasses(this.elementRef);

57
packages/angular/standalone/src/directives/datetime.ts
View File

@ -7,26 +7,14 @@ import {
HostListener,
Injector,
NgZone,
forwardRef,
} from '@angular/core';
import type { OnInit } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { ValueAccessor } from '@ionic/angular/common';
import type { DatetimeChangeEventDetail, Components } from '@ionic/core/components';
import { defineCustomElement } from '@ionic/core/components/ion-datetime.js';
/**
* Value accessor components should not use ProxyCmp
* and should call defineCustomElement and proxyInputs
* manually instead. Using both the @ProxyCmp and @Component
* decorators and useExisting (where useExisting refers to the
* class) causes ng-packagr to output multiple component variables
* which breaks treeshaking.
* For example, the following would be generated:
* let IonDatetime = IonDatetime_1 = class IonDatetime extends ValueAccessor {
* Instead, we want only want the class generated:
* class IonDatetime extends ValueAccessor {
*/
import { proxyInputs, proxyMethods, proxyOutputs } from './angular-component-lib/utils';
import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';
const DATETIME_INPUTS = [
'cancelText',
@ -61,43 +49,44 @@ const DATETIME_INPUTS = [
'yearValues',
];
const DATETIME_METHODS = ['confirm', 'reset', 'cancel'];
/**
* Pulling the provider into an object and using PURE works
* around an ng-packagr issue that causes
* components with multiple decorators and
* a provider to be re-assigned. This re-assignment
* is not supported by Webpack and causes treeshaking
* to not work on these kinds of components.
*/
const accessorProvider = {
provide: NG_VALUE_ACCESSOR,
useExisting: /*@__PURE__*/ forwardRef(() => IonDatetime),
multi: true,
};
@ProxyCmp({
defineCustomElementFn: defineCustomElement,
inputs: DATETIME_INPUTS,
methods: ['confirm', 'reset', 'cancel'],
})
@Component({
selector: 'ion-datetime',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: DATETIME_INPUTS,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: IonDatetime,
multi: true,
},
],
providers: [accessorProvider],
standalone: true,
})
export class IonDatetime extends ValueAccessor implements OnInit {
export class IonDatetime extends ValueAccessor {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone, injector: Injector) {
super(injector, r);
defineCustomElement();
c.detach();
this.el = r.nativeElement;
proxyOutputs(this, this.el, ['ionCancel', 'ionChange', 'ionFocus', 'ionBlur']);
}
ngOnInit(): void {
/**
* Data-bound input properties are set
* by Angular after the constructor, so
* we need to run the proxy in ngOnInit.
*/
proxyInputs(IonDatetime, DATETIME_INPUTS);
proxyMethods(IonDatetime, DATETIME_METHODS);
}
@HostListener('ionChange', ['$event.target'])
handleIonChange(el: HTMLIonDatetimeElement): void {
this.handleValueChange(el, el.value);

56
packages/angular/standalone/src/directives/input.ts
View File

@ -7,8 +7,8 @@ import {
HostListener,
Injector,
NgZone,
forwardRef,
} from '@angular/core';
import type { OnInit } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { ValueAccessor } from '@ionic/angular/common';
import type {
@ -18,19 +18,7 @@ import type {
} from '@ionic/core/components';
import { defineCustomElement } from '@ionic/core/components/ion-input.js';
/**
* Value accessor components should not use ProxyCmp
* and should call defineCustomElement and proxyInputs
* manually instead. Using both the @ProxyCmp and @Component
* decorators and useExisting (where useExisting refers to the
* class) causes ng-packagr to output multiple component variables
* which breaks treeshaking.
* For example, the following would be generated:
* let IonInput = IonInput_1 = class IonInput extends ValueAccessor {
* Instead, we want only want the class generated:
* class IonInput extends ValueAccessor {
*/
import { proxyInputs, proxyMethods, proxyOutputs } from './angular-component-lib/utils';
import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';
const INPUT_INPUTS = [
'accept',
@ -72,43 +60,43 @@ const INPUT_INPUTS = [
'value',
];
const INPUT_METHODS = ['setFocus', 'getInputElement'];
/**
* Pulling the provider into an object and using PURE works
* around an ng-packagr issue that causes
* components with multiple decorators and
* a provider to be re-assigned. This re-assignment
* is not supported by Webpack and causes treeshaking
* to not work on these kinds of components.
*/
const accessorProvider = {
provide: NG_VALUE_ACCESSOR,
useExisting: /*@__PURE__*/ forwardRef(() => IonInput),
multi: true,
};
@ProxyCmp({
defineCustomElementFn: defineCustomElement,
inputs: INPUT_INPUTS,
methods: ['setFocus', 'getInputElement'],
})
@Component({
selector: 'ion-input',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: INPUT_INPUTS,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: IonInput,
multi: true,
},
],
providers: [accessorProvider],
standalone: true,
})
export class IonInput extends ValueAccessor implements OnInit {
export class IonInput extends ValueAccessor {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone, injector: Injector) {
super(injector, r);
defineCustomElement();
c.detach();
this.el = r.nativeElement;
proxyOutputs(this, this.el, ['ionInput', 'ionChange', 'ionBlur', 'ionFocus']);
}
ngOnInit(): void {
/**
* Data-bound input properties are set
* by Angular after the constructor, so
* we need to run the proxy in ngOnInit.
*/
proxyInputs(IonInput, INPUT_INPUTS);
proxyMethods(IonInput, INPUT_METHODS);
}
@HostListener('ionInput', ['$event.target'])
handleIonInput(el: HTMLIonInputElement): void {
this.handleValueChange(el, el.value);

54
packages/angular/standalone/src/directives/radio-group.ts
View File

@ -7,63 +7,53 @@ import {
HostListener,
Injector,
NgZone,
forwardRef,
} from '@angular/core';
import type { OnInit } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { ValueAccessor } from '@ionic/angular/common';
import type { RadioGroupChangeEventDetail, Components } from '@ionic/core/components';
import { defineCustomElement } from '@ionic/core/components/ion-radio-group.js';
/**
* Value accessor components should not use ProxyCmp
* and should call defineCustomElement and proxyInputs
* manually instead. Using both the @ProxyCmp and @Component
* decorators and useExisting (where useExisting refers to the
* class) causes ng-packagr to output multiple component variables
* which breaks treeshaking.
* For example, the following would be generated:
* let IonRadioGroup = IonRadioGroup_1 = class IonRadioGroup extends ValueAccessor {
* Instead, we want only want the class generated:
* class IonRadioGroup extends ValueAccessor {
*/
import { proxyInputs, proxyOutputs } from './angular-component-lib/utils';
import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';
const RADIO_GROUP_INPUTS = ['allowEmptySelection', 'name', 'value'];
/**
* Pulling the provider into an object and using PURE works
* around an ng-packagr issue that causes
* components with multiple decorators and
* a provider to be re-assigned. This re-assignment
* is not supported by Webpack and causes treeshaking
* to not work on these kinds of components.
*/
const accessorProvider = {
provide: NG_VALUE_ACCESSOR,
useExisting: /*@__PURE__*/ forwardRef(() => IonRadioGroup),
multi: true,
};
@ProxyCmp({
defineCustomElementFn: defineCustomElement,
inputs: RADIO_GROUP_INPUTS,
})
@Component({
selector: 'ion-radio-group',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: RADIO_GROUP_INPUTS,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: IonRadioGroup,
multi: true,
},
],
providers: [accessorProvider],
standalone: true,
})
export class IonRadioGroup extends ValueAccessor implements OnInit {
export class IonRadioGroup extends ValueAccessor {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone, injector: Injector) {
super(injector, r);
defineCustomElement();
c.detach();
this.el = r.nativeElement;
proxyOutputs(this, this.el, ['ionChange']);
}
ngOnInit(): void {
/**
* Data-bound input properties are set
* by Angular after the constructor, so
* we need to run the proxy in ngOnInit.
*/
proxyInputs(IonRadioGroup, RADIO_GROUP_INPUTS);
}
@HostListener('ionChange', ['$event.target'])
handleIonChange(el: HTMLIonRadioGroupElement): void {
this.handleValueChange(el, el.value);

54
packages/angular/standalone/src/directives/range.ts
View File

@ -7,8 +7,8 @@ import {
HostListener,
Injector,
NgZone,
forwardRef,
} from '@angular/core';
import type { OnInit } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { ValueAccessor } from '@ionic/angular/common';
import type {
@ -19,19 +19,7 @@ import type {
} from '@ionic/core/components';
import { defineCustomElement } from '@ionic/core/components/ion-range.js';
/**
* Value accessor components should not use ProxyCmp
* and should call defineCustomElement and proxyInputs
* manually instead. Using both the @ProxyCmp and @Component
* decorators and useExisting (where useExisting refers to the
* class) causes ng-packagr to output multiple component variables
* which breaks treeshaking.
* For example, the following would be generated:
* let IonRange = IonRange_1 = class IonRange extends ValueAccessor {
* Instead, we want only want the class generated:
* class IonRange extends ValueAccessor {
*/
import { proxyInputs, proxyOutputs } from './angular-component-lib/utils';
import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';
const RANGE_INPUTS = [
'activeBarStart',
@ -54,40 +42,42 @@ const RANGE_INPUTS = [
'value',
];
/**
* Pulling the provider into an object and using PURE works
* around an ng-packagr issue that causes
* components with multiple decorators and
* a provider to be re-assigned. This re-assignment
* is not supported by Webpack and causes treeshaking
* to not work on these kinds of components.
*/
const accessorProvider = {
provide: NG_VALUE_ACCESSOR,
useExisting: /*@__PURE__*/ forwardRef(() => IonRange),
multi: true,
};
@ProxyCmp({
defineCustomElementFn: defineCustomElement,
inputs: RANGE_INPUTS,
})
@Component({
selector: 'ion-range',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: RANGE_INPUTS,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: IonRange,
multi: true,
},
],
providers: [accessorProvider],
standalone: true,
})
export class IonRange extends ValueAccessor implements OnInit {
export class IonRange extends ValueAccessor {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone, injector: Injector) {
super(injector, r);
defineCustomElement();
c.detach();
this.el = r.nativeElement;
proxyOutputs(this, this.el, ['ionChange', 'ionInput', 'ionFocus', 'ionBlur', 'ionKnobMoveStart', 'ionKnobMoveEnd']);
}
ngOnInit(): void {
/**
* Data-bound input properties are set
* by Angular after the constructor, so
* we need to run the proxy in ngOnInit.
*/
proxyInputs(IonRange, RANGE_INPUTS);
}
@HostListener('ionChange', ['$event.target'])
handleIonChange(el: HTMLIonRangeElement): void {
this.handleValueChange(el, el.value);

56
packages/angular/standalone/src/directives/searchbar.ts
View File

@ -7,26 +7,14 @@ import {
HostListener,
Injector,
NgZone,
forwardRef,
} from '@angular/core';
import type { OnInit } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { ValueAccessor } from '@ionic/angular/common';
import type { SearchbarInputEventDetail, SearchbarChangeEventDetail, Components } from '@ionic/core/components';
import { defineCustomElement } from '@ionic/core/components/ion-searchbar.js';
/**
* Value accessor components should not use ProxyCmp
* and should call defineCustomElement and proxyInputs
* manually instead. Using both the @ProxyCmp and @Component
* decorators and useExisting (where useExisting refers to the
* class) causes ng-packagr to output multiple component variables
* which breaks treeshaking.
* For example, the following would be generated:
* let IonSearchbar = IonSearchbar_1 = class IonSearchbar extends ValueAccessor {
* Instead, we want only want the class generated:
* class IonSearchbar extends ValueAccessor {
*/
import { proxyInputs, proxyMethods, proxyOutputs } from './angular-component-lib/utils';
import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';
const SEARCHBAR_INPUTS = [
'animated',
@ -51,43 +39,43 @@ const SEARCHBAR_INPUTS = [
'value',
];
const SEARCHBAR_METHODS = ['setFocus', 'getInputElement'];
/**
* Pulling the provider into an object and using PURE works
* around an ng-packagr issue that causes
* components with multiple decorators and
* a provider to be re-assigned. This re-assignment
* is not supported by Webpack and causes treeshaking
* to not work on these kinds of components.
*/
const accessorProvider = {
provide: NG_VALUE_ACCESSOR,
useExisting: /*@__PURE__*/ forwardRef(() => IonSearchbar),
multi: true,
};
@ProxyCmp({
defineCustomElementFn: defineCustomElement,
inputs: SEARCHBAR_INPUTS,
methods: ['setFocus', 'getInputElement'],
})
@Component({
selector: 'ion-searchbar',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: SEARCHBAR_INPUTS,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: IonSearchbar,
multi: true,
},
],
providers: [accessorProvider],
standalone: true,
})
export class IonSearchbar extends ValueAccessor implements OnInit {
export class IonSearchbar extends ValueAccessor {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone, injector: Injector) {
super(injector, r);
defineCustomElement();
c.detach();
this.el = r.nativeElement;
proxyOutputs(this, this.el, ['ionInput', 'ionChange', 'ionCancel', 'ionClear', 'ionBlur', 'ionFocus']);
}
ngOnInit(): void {
/**
* Data-bound input properties are set
* by Angular after the constructor, so
* we need to run the proxy in ngOnInit.
*/
proxyInputs(IonSearchbar, SEARCHBAR_INPUTS);
proxyMethods(IonSearchbar, SEARCHBAR_METHODS);
}
@HostListener('ionInput', ['$event.target'])
handleIonInput(el: HTMLIonSearchbarElement): void {
this.handleValueChange(el, el.value);

54
packages/angular/standalone/src/directives/segment.ts
View File

@ -7,63 +7,53 @@ import {
HostListener,
Injector,
NgZone,
forwardRef,
} from '@angular/core';
import type { OnInit } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { ValueAccessor } from '@ionic/angular/common';
import type { SegmentChangeEventDetail, Components } from '@ionic/core/components';
import { defineCustomElement } from '@ionic/core/components/ion-segment.js';
/**
* Value accessor components should not use ProxyCmp
* and should call defineCustomElement and proxyInputs
* manually instead. Using both the @ProxyCmp and @Component
* decorators and useExisting (where useExisting refers to the
* class) causes ng-packagr to output multiple component variables
* which breaks treeshaking.
* For example, the following would be generated:
* let IonSegment = IonSegment_1 = class IonSegment extends ValueAccessor {
* Instead, we want only want the class generated:
* class IonSegment extends ValueAccessor {
*/
import { proxyInputs, proxyOutputs } from './angular-component-lib/utils';
import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';
const SEGMENT_INPUTS = ['color', 'disabled', 'mode', 'scrollable', 'selectOnFocus', 'swipeGesture', 'value'];
/**
* Pulling the provider into an object and using PURE works
* around an ng-packagr issue that causes
* components with multiple decorators and
* a provider to be re-assigned. This re-assignment
* is not supported by Webpack and causes treeshaking
* to not work on these kinds of components.
*/
const accessorProvider = {
provide: NG_VALUE_ACCESSOR,
useExisting: /*@__PURE__*/ forwardRef(() => IonSegment),
multi: true,
};
@ProxyCmp({
defineCustomElementFn: defineCustomElement,
inputs: SEGMENT_INPUTS,
})
@Component({
selector: 'ion-segment',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: SEGMENT_INPUTS,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: IonSegment,
multi: true,
},
],
providers: [accessorProvider],
standalone: true,
})
export class IonSegment extends ValueAccessor implements OnInit {
export class IonSegment extends ValueAccessor {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone, injector: Injector) {
super(injector, r);
defineCustomElement();
c.detach();
this.el = r.nativeElement;
proxyOutputs(this, this.el, ['ionChange']);
}
ngOnInit(): void {
/**
* Data-bound input properties are set
* by Angular after the constructor, so
* we need to run the proxy in ngOnInit.
*/
proxyInputs(IonSegment, SEGMENT_INPUTS);
}
@HostListener('ionChange', ['$event.target'])
handleIonChange(el: HTMLIonSegmentElement): void {
this.handleValueChange(el, el.value);

56
packages/angular/standalone/src/directives/select.ts
View File

@ -7,26 +7,14 @@ import {
HostListener,
Injector,
NgZone,
forwardRef,
} from '@angular/core';
import type { OnInit } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { ValueAccessor } from '@ionic/angular/common';
import type { SelectChangeEventDetail, Components } from '@ionic/core/components';
import { defineCustomElement } from '@ionic/core/components/ion-select.js';
/**
* Value accessor components should not use ProxyCmp
* and should call defineCustomElement and proxyInputs
* manually instead. Using both the @ProxyCmp and @Component
* decorators and useExisting (where useExisting refers to the
* class) causes ng-packagr to output multiple component variables
* which breaks treeshaking.
* For example, the following would be generated:
* let IonSelect = IonSelect_1 = class IonSelect extends ValueAccessor {
* Instead, we want only want the class generated:
* class IonSelect extends ValueAccessor {
*/
import { proxyInputs, proxyMethods, proxyOutputs } from './angular-component-lib/utils';
import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';
const SELECT_INPUTS = [
'cancelText',
@ -52,43 +40,43 @@ const SELECT_INPUTS = [
'value',
];
const SELECT_METHODS = ['open'];
/**
* Pulling the provider into an object and using PURE works
* around an ng-packagr issue that causes
* components with multiple decorators and
* a provider to be re-assigned. This re-assignment
* is not supported by Webpack and causes treeshaking
* to not work on these kinds of components.
*/
const accessorProvider = {
provide: NG_VALUE_ACCESSOR,
useExisting: /*@__PURE__*/ forwardRef(() => IonSelect),
multi: true,
};
@ProxyCmp({
defineCustomElementFn: defineCustomElement,
inputs: SELECT_INPUTS,
methods: ['open'],
})
@Component({
selector: 'ion-select',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: SELECT_INPUTS,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: IonSelect,
multi: true,
},
],
providers: [accessorProvider],
standalone: true,
})
export class IonSelect extends ValueAccessor implements OnInit {
export class IonSelect extends ValueAccessor {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone, injector: Injector) {
super(injector, r);
defineCustomElement();
c.detach();
this.el = r.nativeElement;
proxyOutputs(this, this.el, ['ionChange', 'ionCancel', 'ionDismiss', 'ionFocus', 'ionBlur']);
}
ngOnInit(): void {
/**
* Data-bound input properties are set
* by Angular after the constructor, so
* we need to run the proxy in ngOnInit.
*/
proxyInputs(IonSelect, SELECT_INPUTS);
proxyMethods(IonSelect, SELECT_METHODS);
}
@HostListener('ionChange', ['$event.target'])
handleIonChange(el: HTMLIonSelectElement): void {
this.handleValueChange(el, el.value);

56
packages/angular/standalone/src/directives/textarea.ts
View File

@ -7,26 +7,14 @@ import {
HostListener,
Injector,
NgZone,
forwardRef,
} from '@angular/core';
import type { OnInit } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { ValueAccessor } from '@ionic/angular/common';
import type { TextareaChangeEventDetail, TextareaInputEventDetail, Components } from '@ionic/core/components';
import { defineCustomElement } from '@ionic/core/components/ion-textarea.js';
/**
* Value accessor components should not use ProxyCmp
* and should call defineCustomElement and proxyInputs
* manually instead. Using both the @ProxyCmp and @Component
* decorators and useExisting (where useExisting refers to the
* class) causes ng-packagr to output multiple component variables
* which breaks treeshaking.
* For example, the following would be generated:
* let IonTextarea = IonTextarea_1 = class IonTextarea extends ValueAccessor {
* Instead, we want only want the class generated:
* class IonTextarea extends ValueAccessor {
*/
import { proxyInputs, proxyMethods, proxyOutputs } from './angular-component-lib/utils';
import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';
const TEXTAREA_INPUTS = [
'autoGrow',
@ -61,43 +49,43 @@ const TEXTAREA_INPUTS = [
'wrap',
];
const TEXTAREA_METHODS = ['setFocus', 'getInputElement'];
/**
* Pulling the provider into an object and using PURE works
* around an ng-packagr issue that causes
* components with multiple decorators and
* a provider to be re-assigned. This re-assignment
* is not supported by Webpack and causes treeshaking
* to not work on these kinds of components.
*/
const accessorProvider = {
provide: NG_VALUE_ACCESSOR,
useExisting: /*@__PURE__*/ forwardRef(() => IonTextarea),
multi: true,
};
@ProxyCmp({
defineCustomElementFn: defineCustomElement,
inputs: TEXTAREA_INPUTS,
methods: ['setFocus', 'getInputElement'],
})
@Component({
selector: 'ion-textarea',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: TEXTAREA_INPUTS,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: IonTextarea,
multi: true,
},
],
providers: [accessorProvider],
standalone: true,
})
export class IonTextarea extends ValueAccessor implements OnInit {
export class IonTextarea extends ValueAccessor {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone, injector: Injector) {
super(injector, r);
defineCustomElement();
c.detach();
this.el = r.nativeElement;
proxyOutputs(this, this.el, ['ionChange', 'ionInput', 'ionBlur', 'ionFocus']);
}
ngOnInit(): void {
/**
* Data-bound input properties are set
* by Angular after the constructor, so
* we need to run the proxy in ngOnInit.
*/
proxyInputs(IonTextarea, TEXTAREA_INPUTS);
proxyMethods(IonTextarea, TEXTAREA_METHODS);
}
@HostListener('ionInput', ['$event.target'])
handleIonInput(el: HTMLIonTextareaElement): void {
this.handleValueChange(el, el.value);

54
packages/angular/standalone/src/directives/toggle.ts
View File

@ -7,26 +7,14 @@ import {
HostListener,
Injector,
NgZone,
forwardRef,
} from '@angular/core';
import type { OnInit } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { ValueAccessor, setIonicClasses } from '@ionic/angular/common';
import type { ToggleChangeEventDetail, Components } from '@ionic/core/components';
import { defineCustomElement } from '@ionic/core/components/ion-toggle.js';
/**
* Value accessor components should not use ProxyCmp
* and should call defineCustomElement and proxyInputs
* manually instead. Using both the @ProxyCmp and @Component
* decorators and useExisting (where useExisting refers to the
* class) causes ng-packagr to output multiple component variables
* which breaks treeshaking.
* For example, the following would be generated:
* let IonToggle = IonToggle_1 = class IonToggle extends ValueAccessor {
* Instead, we want only want the class generated:
* class IonToggle extends ValueAccessor {
*/
import { proxyInputs, proxyOutputs } from './angular-component-lib/utils';
import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';
const TOGGLE_INPUTS = [
'checked',
@ -41,40 +29,42 @@ const TOGGLE_INPUTS = [
'value',
];
/**
* Pulling the provider into an object and using PURE works
* around an ng-packagr issue that causes
* components with multiple decorators and
* a provider to be re-assigned. This re-assignment
* is not supported by Webpack and causes treeshaking
* to not work on these kinds of components.
*/
const accessorProvider = {
provide: NG_VALUE_ACCESSOR,
useExisting: /*@__PURE__*/ forwardRef(() => IonToggle),
multi: true,
};
@ProxyCmp({
defineCustomElementFn: defineCustomElement,
inputs: TOGGLE_INPUTS,
})
@Component({
selector: 'ion-toggle',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: TOGGLE_INPUTS,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: IonToggle,
multi: true,
},
],
providers: [accessorProvider],
standalone: true,
})
export class IonToggle extends ValueAccessor implements OnInit {
export class IonToggle extends ValueAccessor {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone, injector: Injector) {
super(injector, r);
defineCustomElement();
c.detach();
this.el = r.nativeElement;
proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']);
}
ngOnInit(): void {
/**
* Data-bound input properties are set
* by Angular after the constructor, so
* we need to run the proxy in ngOnInit.
*/
proxyInputs(IonToggle, TOGGLE_INPUTS);
}
writeValue(value: boolean): void {
this.elementRef.nativeElement.checked = this.lastValue = value;
setIonicClasses(this.elementRef);

12
packages/angular/standalone/src/index.ts
View File

@ -5,17 +5,17 @@ export { IonRouterOutlet } from './navigation/router-outlet';
export { IonRouterLink, IonRouterLinkWithHref } from './navigation/router-link-delegate';
export { IonTabs } from './navigation/tabs';
export { provideIonicAngular } from './providers/ionic-angular';
export { ActionSheetController } from './providers/action-sheet-controller';
export { AnimationController } from './providers/animation-controller';
export { GestureController } from './providers/gesture-controller';
export { MenuController } from './providers/menu-controller';
export { ModalController } from './providers/modal-controller';
export { PopoverController } from './providers/popover-controller';
export { ToastController } from './providers/toast-controller';
export {
ActionSheetController,
AlertController,
LoadingController,
ModalController,
PickerController,
PopoverController,
ToastController,
AnimationController,
GestureController,
DomController,
NavController,
Config,

3
packages/angular/common/src/providers/action-sheet-controller.ts → packages/angular/standalone/src/providers/action-sheet-controller.ts
View File

@ -1,9 +1,8 @@
import { Injectable } from '@angular/core';
import { OverlayBaseController } from '@ionic/angular/common';
import type { ActionSheetOptions } from '@ionic/core/components';
import { actionSheetController } from '@ionic/core/components';
import { OverlayBaseController } from '../utils/overlay';
@Injectable({
providedIn: 'root',
})

2
packages/angular/common/src/providers/animation-controller.ts → packages/angular/standalone/src/providers/animation-controller.ts
View File

@ -1,5 +1,5 @@
import { Injectable } from '@angular/core';
import type { Animation } from '@ionic/core/components';
import type { Animation } from '@ionic/core';
import { createAnimation, getTimeGivenProgression } from '@ionic/core/components';
@Injectable({

2
packages/angular/common/src/providers/gesture-controller.ts → packages/angular/standalone/src/providers/gesture-controller.ts
View File

@ -1,4 +1,4 @@
import { NgZone, Injectable } from '@angular/core';
import { Injectable, NgZone } from '@angular/core';
import type { Gesture, GestureConfig } from '@ionic/core/components';
import { createGesture } from '@ionic/core/components';

11
packages/angular/standalone/src/providers/ionic-angular.ts
View File

@ -1,16 +1,13 @@
import { DOCUMENT } from '@angular/common';
import { APP_INITIALIZER } from '@angular/core';
import type { Provider } from '@angular/core';
import {
AngularDelegate,
ConfigToken,
ModalController,
PopoverController,
provideComponentInputBinding,
} from '@ionic/angular/common';
import { AngularDelegate, ConfigToken, provideComponentInputBinding } from '@ionic/angular/common';
import { initialize } from '@ionic/core/components';
import type { IonicConfig } from '@ionic/core/components';
import { ModalController } from './modal-controller';
import { PopoverController } from './popover-controller';
export const provideIonicAngular = (config?: IonicConfig): Provider[] => {
/**
* TODO FW-4967

5
packages/angular/common/src/providers/modal-controller.ts → packages/angular/standalone/src/providers/modal-controller.ts
View File

@ -1,11 +1,8 @@
import { Injector, Injectable, EnvironmentInjector, inject } from '@angular/core';
import { AngularDelegate, OverlayBaseController } from '@ionic/angular/common';
import type { ModalOptions } from '@ionic/core/components';
import { modalController } from '@ionic/core/components';
import { OverlayBaseController } from '../utils/overlay';
import { AngularDelegate } from './angular-delegate';
@Injectable()
export class ModalController extends OverlayBaseController<ModalOptions, HTMLIonModalElement> {
private angularDelegate = inject(AngularDelegate);

8
packages/angular/common/src/providers/popover-controller.ts → packages/angular/standalone/src/providers/popover-controller.ts
View File

@ -1,12 +1,8 @@
import { Injector, Injectable, inject, EnvironmentInjector } from '@angular/core';
import { Injector, inject, EnvironmentInjector } from '@angular/core';
import { AngularDelegate, OverlayBaseController } from '@ionic/angular/common';
import type { PopoverOptions } from '@ionic/core/components';
import { popoverController } from '@ionic/core/components';
import { OverlayBaseController } from '../utils/overlay';
import { AngularDelegate } from './angular-delegate';
@Injectable()
export class PopoverController extends OverlayBaseController<PopoverOptions, HTMLIonPopoverElement> {
private angularDelegate = inject(AngularDelegate);
private injector = inject(Injector);

3
packages/angular/common/src/providers/toast-controller.ts → packages/angular/standalone/src/providers/toast-controller.ts
View File

@ -1,9 +1,8 @@
import { Injectable } from '@angular/core';
import { OverlayBaseController } from '@ionic/angular/common';
import type { ToastOptions } from '@ionic/core/components';
import { toastController } from '@ionic/core/components';
import { OverlayBaseController } from '../utils/overlay';
@Injectable({
providedIn: 'root',
})

156
packages/angular/test/apps/ng17/angular.json Normal file
View File

@ -0,0 +1,156 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"test-app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/test-app/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"buildOptimizer": true,
"assets": [
"src/favicon.ico",
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
"styles": ["src/styles.css"],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"progress": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
]
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"buildTarget": "test-app:build"
},
"configurations": {
"production": {
"buildTarget": "test-app:build:production"
},
"development": {
"buildTarget": "test-app:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "test-app:build"
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/test-app/server",
"main": "server.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"production": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"sourceMap": false,
"optimization": true
}
}
},
"serve-ssr": {
"builder": "@angular-devkit/build-angular:ssr-dev-server",
"options": {
"browserTarget": "test-app:build",
"serverTarget": "test-app:server"
},
"configurations": {
"production": {
"browserTarget": "test-app:build:production",
"serverTarget": "test-app:server:production"
}
}
},
"prerender": {
"builder": "@angular-devkit/build-angular:prerender",
"options": {
"browserTarget": "test-app:build:production",
"serverTarget": "test-app:server:production",
"routes": []
}
}
}
}
},
"cli": {
"schematicCollections": ["@angular-eslint/schematics"],
"cache": {
"enabled": false
}
}
}

0
packages/angular/test/apps/ng17/e2e/src/.gitkeep Normal file
View File

5
packages/angular/test/apps/ng17/e2e/src/lazy/angular-version.spec.ts Normal file
View File

@ -0,0 +1,5 @@
it("should be on Angular 17", () => {
cy.visit('/lazy');
cy.get('ion-title').contains('Angular 17');
});

8
packages/angular/test/apps/ng17/e2e/src/lazy/bind-component-inputs.spec.ts Normal file
View File

@ -0,0 +1,8 @@
it("binding route data to inputs should work", () => {
cy.visit('/lazy/version-test/bind-route/test?query=test');
cy.get('#route-params').contains('test');
cy.get('#query-params').contains('test');
cy.get('#data').contains('data:bindToComponentInputs');
cy.get('#resolve').contains('resolve:bindToComponentInputs');
});

20
packages/angular/test/apps/ng17/e2e/src/lazy/modal-nav-params.spec.ts Normal file
View File

@ -0,0 +1,20 @@
describe('Modal Nav Params', () => {
beforeEach(() => {
cy.visit('/lazy/version-test/modal-nav-params');
});
it('should assign the rootParams when presented in a modal multiple times', () => {
cy.contains('Open Modal').click();
cy.get('ion-modal').should('exist').should('be.visible');
cy.get('ion-modal').contains('OK');
cy.contains("Close").click();
cy.get('ion-modal').should('not.be.visible');
cy.contains('Open Modal').click();
cy.get('ion-modal').should('exist').should('be.visible');
cy.get('ion-modal').contains('OK').should('exist');
});
});

16223
packages/angular/test/apps/ng17/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

69
packages/angular/test/apps/ng17/package.json Normal file
View File

@ -0,0 +1,69 @@
{
"name": "ionic-angular-test-app",
"version": "0.0.0",
"private": true,
"scripts": {
"ng": "ng",
"start": "ng serve",
"sync:build": "sh scripts/build-ionic.sh",
"sync": "sh scripts/sync.sh",
"build": "ng build --configuration production --no-progress",
"lint": "ng lint",
"serve:ssr": "node dist/test-app/server/main.js",
"build:ssr": "ng build --prod && ng run test-app:server:production",
"dev:ssr": "ng run test-app:serve-ssr",
"prerender": "ng run test-app:prerender",
"cy.open": "cypress open",
"cy.run": "cypress run",
"test": "concurrently \"npm run start -- --configuration production\" \"wait-on http-get://localhost:4200 && npm run cy.run\" --kill-others --success first",
"test.watch": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy.open\" --kill-others --success first"
},
"dependencies": {
"@angular/animations": "^17.0.2",
"@angular/common": "^17.0.2",
"@angular/compiler": "^17.0.2",
"@angular/core": "^17.0.2",
"@angular/forms": "^17.0.2",
"@angular/platform-browser": "^17.0.2",
"@angular/platform-browser-dynamic": "^17.0.2",
"@angular/platform-server": "^17.0.2",
"@angular/router": "^17.0.2",
"@angular/ssr": "^17.0.0",
"@ionic/angular": "^7.0.0",
"@ionic/angular-server": "^7.0.0",
"core-js": "^3.33.2",
"express": "^4.15.2",
"ionicons": "^7.2.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"typescript-eslint-language-service": "^4.1.5",
"zone.js": "~0.14.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.0.0",
"@angular-eslint/builder": "^17.0.0",
"@angular-eslint/eslint-plugin": "^17.0.0",
"@angular-eslint/eslint-plugin-template": "^17.0.0",
"@angular-eslint/schematics": "^17.0.0",
"@angular-eslint/template-parser": "^17.0.0",
"@angular/cli": "^17.0.0",
"@angular/compiler-cli": "^17.0.2",
"@angular/language-service": "^17.0.2",
"@types/express": "^4.17.7",
"@types/ws": "8.5.3",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"concurrently": "^6.0.0",
"cypress": "^13.2.0",
"eslint": "^7.26.0",
"ts-loader": "^6.2.2",
"ts-node": "^8.3.0",
"typescript": "~5.2.2",
"wait-on": "^5.2.1",
"webpack": "^5.61.0",
"webpack-cli": "^4.9.2"
},
"engines": {
"node": ">= 18"
}
}

71
packages/angular/test/apps/ng17/server.ts Normal file
View File

@ -0,0 +1,71 @@
import 'zone.js/node';
import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';
import * as express from 'express';
import { existsSync } from 'node:fs';
import { join } from 'node:path';
import bootstrap from './src/main.server';
// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
const server = express();
const distFolder = join(process.cwd(), 'dist/test-app/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html'))
? join(distFolder, 'index.original.html')
: join(distFolder, 'index.html');
const commonEngine = new CommonEngine();
server.set('view engine', 'html');
server.set('views', distFolder);
// Example Express Rest API endpoints
// server.get('/api/**', (req, res) => { });
// Serve static files from /browser
server.get('*.*', express.static(distFolder, {
maxAge: '1y'
}));
// All regular routes use the Angular engine
server.get('*', (req, res, next) => {
const { protocol, originalUrl, baseUrl, headers } = req;
commonEngine
.render({
bootstrap,
documentFilePath: indexHtml,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: distFolder,
providers: [
{ provide: APP_BASE_HREF, useValue: baseUrl },],
})
.then((html) => res.send(html))
.catch((err) => next(err));
});
return server;
}
function run(): void {
const port = process.env['PORT'] || 4000;
// Start up the Node server
const server = app();
server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
run();
}
export default bootstrap;

10
packages/angular/test/apps/ng17/src/app/app-routing.module.ts Normal file
View File

@ -0,0 +1,10 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { routes } from './app.routes';
@NgModule({
imports: [RouterModule.forRoot(routes, { bindToComponentInputs: true })],
exports: [RouterModule]
})
export class AppRoutingModule { }

41
packages/angular/test/apps/ng17/src/app/lazy/version-test/bind-component-inputs/bind-component-inputs.component.ts Normal file
View File

@ -0,0 +1,41 @@
import { Component, Input, OnInit } from "@angular/core";
import { IonicModule } from '@ionic/angular';
@Component({
selector: 'app-bind-route',
template: `
<ion-header>
<ion-toolbar>
<ion-title>bindToComponentInputs</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<div>
<h3>Bind Route</h3>
<p id="route-params">Route params: id: {{id}}</p>
<p id="query-params">Query params: query: {{query}}</p>
<p id="data">Data: title: {{title}}</p>
<p id="resolve">Resolve: name: {{name}}</p>
</div>
</ion-content>
`,
standalone: true,
imports: [IonicModule]
})
export class BindComponentInputsComponent implements OnInit {
@Input() id?: string; // path parameter
@Input() query?: string; // query parameter
@Input() title?: string; // data property
@Input() name?: string; // resolve property
ngOnInit(): void {
console.log('BindComponentInputsComponent.ngOnInit', {
id: this.id,
query: this.query,
title: this.title,
name: this.name
});
}
}

45
packages/angular/test/apps/ng17/src/app/lazy/version-test/modal-nav-params/modal-nav-params.component.ts Normal file
View File

@ -0,0 +1,45 @@
import { Component } from "@angular/core";
import { IonicModule } from "@ionic/angular";
import { NavRootComponent } from "./nav-root.component";
@Component({
selector: 'app-modal-nav-params',
template: `
<ion-header>
<ion-toolbar>
<ion-title>Modal Nav Params</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-button id="open">Open Modal</ion-button>
<ion-modal #modal trigger="open">
<ng-template>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button (click)="modal.dismiss()">Close</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-nav [root]="root" [rootParams]="rootParams"></ion-nav>
</ion-content>
</ng-template>
</ion-modal>
</ion-content>
`,
standalone: true,
imports: [IonicModule, NavRootComponent]
})
export class ModalNavParamsComponent {
root = NavRootComponent;
rootParams = {
params: {
id: 123
}
};
}

38
packages/angular/test/apps/ng17/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts Normal file
View File

@ -0,0 +1,38 @@
import { JsonPipe } from "@angular/common";
import { Component } from "@angular/core";
import { IonicModule } from "@ionic/angular";
/**
* This is used to track if any occurences of
* the ion-nav root component being attached to
* the DOM result in the rootParams not being
* assigned to the component instance.
*
* https://github.com/ionic-team/ionic-framework/issues/27146
*/
let rootParamsException = false;
@Component({
selector: 'app-modal-content',
template: `
{{ hasException ? 'ERROR' : 'OK' }}
`,
standalone: true,
imports: [IonicModule, JsonPipe]
})
export class NavRootComponent {
params: any;
ngOnInit() {
if (this.params === undefined) {
rootParamsException = true;
}
}
get hasException() {
return rootParamsException;
}
}

25
packages/angular/test/apps/ng17/src/app/lazy/version-test/version-test-routing.module.ts Normal file
View File

@ -0,0 +1,25 @@
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
@NgModule({
imports: [
RouterModule.forChild([
{
path: 'modal-nav-params',
loadComponent: () => import('./modal-nav-params/modal-nav-params.component').then(m => m.ModalNavParamsComponent),
},
{
path: 'bind-route/:id',
data: {
title: 'data:bindToComponentInputs'
},
resolve: {
name: () => 'resolve:bindToComponentInputs'
},
loadComponent: () => import('./bind-component-inputs/bind-component-inputs.component').then(c => c.BindComponentInputsComponent)
}
])
],
exports: [RouterModule]
})
export class VersionTestRoutingModule { }

35
packages/angular/test/apps/ng17/tsconfig.json Normal file
View File

@ -0,0 +1,35 @@
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": false,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"emitDecoratorMetadata": true,
"typeRoots": ["node_modules/@types"],
"lib": ["ES2022", "dom"],
"plugins": [
{
"name": "typescript-eslint-language-service"
}
],
"useDefineForClassFields": false
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}

18
packages/angular/test/base/cypress/support/commands.js vendored
View File

@ -41,11 +41,21 @@ Cypress.Commands.add('ionSwipeToGoBack', (complete = false, selector = 'ion-rout
cy.wait(150);
});
/**
* getStack is a query because it has automatic
* retries built in which will let us account for
* async routing without having to use
* arbitrary cy.wait calls.
*/
Cypress.Commands.addQuery('getStack', (selector) => {
return () => {
const el = cy.$$(selector);
return Array.from(el.children()).map((el) => el.tagName.toLowerCase());
}
});
Cypress.Commands.add('testStack', (selector, expected) => {
cy.document().then((doc) => {
const children = Array.from(doc.querySelector(selector).children).map((el) => el.tagName.toLowerCase());
expect(children).to.deep.equal(expected);
});
cy.getStack(selector).should('deep.equal', expected);
});
Cypress.Commands.add('testLifeCycle', (selector, expected) => {

4
packages/angular/test/base/e2e/src/lazy/navigation.spec.ts
View File

@ -1,11 +1,9 @@
describe('Navigation', () => {
beforeEach(() => {
cy.visit('/lazy/navigation');
cy.visit('/lazy/navigation/page1?ionic:_testing=true');
})
it('should navigate correctly', () => {
cy.visit('/lazy/navigation/page1');
cy.wait(2000);
cy.testStack('ion-router-outlet', ['app-navigation-page2', 'app-navigation-page1']);
cy.get('app-navigation-page2').should('have.attr', 'aria-hidden').and('equal', 'true');

2
packages/angular/test/base/e2e/src/lazy/nested-outlet.spec.ts
View File

@ -1,6 +1,6 @@
describe('Nested Outlet', () => {
beforeEach(() => {
cy.visit('/lazy/nested-outlet/page');
cy.visit('/lazy/nested-outlet/page?ionic:_testing=true');
})
it('should navigate correctly', () => {

6
packages/angular/test/base/e2e/src/lazy/providers.spec.ts
View File

@ -33,5 +33,11 @@ describe('Providers', () => {
cy.get('#set-menu-count').click();
cy.get('#registered-menu-count').should('have.text', '1');
});
it('should open an action sheet', () => {
cy.get('button#open-action-sheet').click();
cy.get('ion-action-sheet').should('be.visible');
});
});

8
packages/angular/test/base/e2e/src/lazy/router-link.spec.ts
View File

@ -1,6 +1,6 @@
describe('Router Link', () => {
beforeEach(() => {
cy.visit('/lazy/router-link');
cy.visit('/lazy/router-link?ionic:_testing=true');
});
describe('router-link params and fragments', () => {
@ -9,7 +9,6 @@ describe('Router Link', () => {
const id = 'MyPageID==';
it('should go to a page with properly encoded values', () => {
cy.visit('/lazy/router-link?ionic:_testing=true');
cy.get('#queryParamsFragment').click();
const expectedPath = `${encodeURIComponent(id)}`;
@ -24,7 +23,6 @@ describe('Router Link', () => {
});
it('should return to a page with preserved query param and fragment', () => {
cy.visit('/lazy/router-link?ionic:_testing=true');
cy.get('#queryParamsFragment').click();
cy.get('#goToPage3').click();
@ -148,7 +146,6 @@ function testForward() {
}
function testRoot() {
cy.wait(200);
cy.testStack('ion-router-outlet', ['app-router-link-page']);
cy.testLifeCycle('app-router-link-page', {
ionViewWillEnter: 1,
@ -159,7 +156,6 @@ function testRoot() {
cy.get('app-router-link-page #canGoBack').should('have.text', 'false');
cy.go('back');
cy.wait(100);
cy.testStack('ion-router-outlet', ['app-router-link']);
cy.testLifeCycle('app-router-link', {
ionViewWillEnter: 1,
@ -170,7 +166,6 @@ function testRoot() {
}
function testBack() {
cy.wait(500);
cy.testStack('ion-router-outlet', ['app-router-link-page']);
cy.testLifeCycle('app-router-link-page', {
ionViewWillEnter: 1,
@ -181,7 +176,6 @@ function testBack() {
cy.get('app-router-link-page #canGoBack').should('have.text', 'false');
cy.go('back');
cy.wait(100);
cy.testStack('ion-router-outlet', ['app-router-link']);
cy.testLifeCycle('app-router-link', {
ionViewWillEnter: 1,

11
packages/angular/test/base/e2e/src/standalone/action-sheet-controller.spec.ts Normal file
View File

@ -0,0 +1,11 @@
describe('Action Sheet Controller', () => {
beforeEach(() => {
cy.visit('/standalone/action-sheet-controller');
})
it('should open an action sheet', () => {
cy.get('button#open-action-sheet').click();
cy.get('ion-action-sheet').should('be.visible');
});
})

49
packages/angular/test/base/e2e/src/standalone/value-accessors.spec.ts
View File

@ -14,18 +14,6 @@ describe('Value Accessors', () => {
cy.get('ion-checkbox').should('have.class', 'ion-dirty');
cy.get('ion-checkbox').should('have.class', 'ion-valid');
});
it('should proxy inputs on load', () => {
cy.get('ion-checkbox').should('have.prop', 'color', 'danger');
});
});
describe('Datetime', () => {
beforeEach(() => cy.visit('/standalone/value-accessors/datetime'));
it('should proxy inputs on load', () => {
cy.get('ion-datetime').should('have.prop', 'color', 'danger');
});
});
describe('Input', () => {
@ -60,10 +48,6 @@ describe('Value Accessors', () => {
cy.get('ion-input[formControlName="inputNumber"]').should('have.class', 'ion-valid');
});
it('should proxy inputs on load', () => {
cy.get('ion-input').first().should('have.prop', 'color', 'danger');
});
});
describe('Radio Group', () => {
@ -79,21 +63,8 @@ describe('Value Accessors', () => {
cy.get('ion-radio-group').should('have.class', 'ion-dirty');
cy.get('ion-radio-group').should('have.class', 'ion-valid');
});
it('should proxy inputs on load', () => {
cy.get('ion-radio').first().should('have.prop', 'color', 'danger');
});
});
describe('Range', () => {
beforeEach(() => cy.visit('/standalone/value-accessors/range'));
it('should proxy inputs on load', () => {
cy.get('ion-range').should('have.prop', 'color', 'danger');
});
});
describe('Searchbar', () => {
beforeEach(() => cy.visit('/standalone/value-accessors/searchbar'));
@ -109,10 +80,6 @@ describe('Value Accessors', () => {
cy.get('ion-searchbar').should('have.class', 'ion-dirty');
cy.get('ion-searchbar').should('have.class', 'ion-valid');
});
it('should proxy inputs on load', () => {
cy.get('ion-searchbar').should('have.prop', 'color', 'danger');
});
});
describe('Segment', () => {
@ -128,10 +95,6 @@ describe('Value Accessors', () => {
cy.get('ion-segment').should('have.class', 'ion-dirty');
cy.get('ion-segment').should('have.class', 'ion-valid');
});
it('should proxy inputs on load', () => {
cy.get('ion-segment').should('have.prop', 'color', 'danger');
});
});
describe('Select', () => {
@ -150,10 +113,6 @@ describe('Value Accessors', () => {
cy.get('ion-select').should('have.class', 'ion-dirty');
cy.get('ion-select').should('have.class', 'ion-valid');
});
it('should proxy inputs on load', () => {
cy.get('ion-select').should('have.prop', 'color', 'danger');
});
});
describe('Textarea', () => {
@ -171,10 +130,6 @@ describe('Value Accessors', () => {
cy.get('ion-textarea').should('have.class', 'ion-dirty');
cy.get('ion-textarea').should('have.class', 'ion-valid');
});
it('should proxy inputs on load', () => {
cy.get('ion-textarea').should('have.prop', 'color', 'danger');
});
});
describe('Toggle', () => {
@ -190,10 +145,6 @@ describe('Value Accessors', () => {
cy.get('ion-toggle').should('have.class', 'ion-dirty');
cy.get('ion-toggle').should('have.class', 'ion-valid');
});
it('should proxy inputs on load', () => {
cy.get('ion-toggle').should('have.prop', 'color', 'danger');
});
});
});

1
packages/angular/test/base/src/app/lazy/providers/providers.component.html
View File

@ -45,4 +45,5 @@
</p>
<button id="set-menu-count" (click)="setMenuCount()">Set Menu Count</button>
<button id="open-action-sheet" (click)="openActionSheet()">Open Action Sheet</button>
</ion-content>

10
packages/angular/test/base/src/app/lazy/providers/providers.component.ts
View File

@ -24,7 +24,7 @@ export class ProvidersComponent {
registeredMenuCount = 0;
constructor(
actionSheetCtrl: ActionSheetController,
private actionSheetCtrl: ActionSheetController,
alertCtrl: AlertController,
loadingCtrl: LoadingController,
private menuCtrl: MenuController,
@ -88,4 +88,12 @@ export class ProvidersComponent {
const menus = await this.menuCtrl.getMenus();
this.registeredMenuCount = menus.length;
}
async openActionSheet() {
const actionSheet = await this.actionSheetCtrl.create({
buttons: ['Button']
});
await actionSheet.present();
}
}

4
packages/angular/test/base/src/app/standalone/action-sheet-controller/action-sheet-controller.component.html Normal file
View File

@ -0,0 +1,4 @@
<ul id="content">
<button id="open-action-sheet" (click)="openActionSheet()">Open Action Sheets</button>
</ul>

21
packages/angular/test/base/src/app/standalone/action-sheet-controller/action-sheet-controller.component.ts Normal file
View File

@ -0,0 +1,21 @@
import { Component } from '@angular/core';
import { ActionSheetController } from '@ionic/angular/standalone';
@Component({
selector: 'app-action-sheet-controller',
templateUrl: './action-sheet-controller.component.html',
standalone: true
})
export class ActionSheetControllerComponent {
registeredMenuCount = 0;
constructor(private actionSheetCtrl: ActionSheetController) {}
async openActionSheet() {
const actionSheet = await this.actionSheetCtrl.create({
buttons: ['Button']
});
await actionSheet.present();
}
}

1
packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts
View File

@ -7,6 +7,7 @@ export const routes: Routes = [
component: AppComponent,
children: [
{ path: 'menu-controller', loadComponent: () => import('../menu-controller/menu-controller.component').then(c => c.MenuControllerComponent) },
{ path: 'action-sheet-controller', loadComponent: () => import('../action-sheet-controller/action-sheet-controller.component').then(c => c.ActionSheetControllerComponent) },
{ path: 'popover', loadComponent: () => import('../popover/popover.component').then(c => c.PopoverComponent) },
{ path: 'modal', loadComponent: () => import('../modal/modal.component').then(c => c.ModalComponent) },
{ path: 'router-outlet', loadComponent: () => import('../router-outlet/router-outlet.component').then(c => c.RouterOutletComponent) },

2
packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html
View File

@ -6,6 +6,6 @@
</p>
<app-value-accessor-test [formGroup]="form">
<ion-checkbox color="danger" formControlName="checkbox"></ion-checkbox>
<ion-checkbox formControlName="checkbox"></ion-checkbox>
</app-value-accessor-test>
</div>

2
packages/angular/test/base/src/app/standalone/value-accessors/datetime/datetime.component.html
View File

@ -6,6 +6,6 @@
</p>
<app-value-accessor-test [formGroup]="form">
<ion-datetime color="danger" formControlName="datetime"></ion-datetime>
<ion-datetime formControlName="datetime"></ion-datetime>
</app-value-accessor-test>
</div>

2
packages/angular/test/base/src/app/standalone/value-accessors/input/input.component.html
View File

@ -5,7 +5,7 @@
</p>
<app-value-accessor-test [formGroup]="form">
<ion-input color="danger" label="String" formControlName="inputString"></ion-input>
<ion-input label="String" formControlName="inputString"></ion-input>
<ion-input label="Number" type="number" formControlName="inputNumber"></ion-input>
</app-value-accessor-test>
</div>

2
packages/angular/test/base/src/app/standalone/value-accessors/radio-group/radio-group.component.html
View File

@ -7,7 +7,7 @@
<app-value-accessor-test [formGroup]="form">
<ion-radio-group formControlName="radioGroup">
<ion-radio color="danger" value="1">One</ion-radio>
<ion-radio value="1">One</ion-radio>
<ion-radio value="2">Two</ion-radio>
</ion-radio-group>
</app-value-accessor-test>

2
packages/angular/test/base/src/app/standalone/value-accessors/range/range.component.html
View File

@ -4,6 +4,6 @@
This test checks the form integrations with ion-range to make sure values are correctly assigned to the form group.
</p>
<app-value-accessor-test [formGroup]="form">
<ion-range color="danger" formControlName="range"></ion-range>
<ion-range formControlName="range"></ion-range>
</app-value-accessor-test>
</div>

2
packages/angular/test/base/src/app/standalone/value-accessors/searchbar/searchbar.component.html
View File

@ -5,6 +5,6 @@
group.
</p>
<app-value-accessor-test [formGroup]="form">
<ion-searchbar color="danger" label="String" formControlName="searchbar"></ion-searchbar>
<ion-searchbar label="String" formControlName="searchbar"></ion-searchbar>
</app-value-accessor-test>
</div>

2
packages/angular/test/base/src/app/standalone/value-accessors/segment/segment.component.html
View File

@ -6,7 +6,7 @@
</p>
<app-value-accessor-test [formGroup]="form">
<ion-segment color="danger" formControlName="segment">
<ion-segment formControlName="segment">
<ion-segment-button value="Paid">
<ion-label>Paid</ion-label>
</ion-segment-button>

2
packages/angular/test/base/src/app/standalone/value-accessors/textarea/textarea.component.html
View File

@ -6,6 +6,6 @@
</p>
<app-value-accessor-test [formGroup]="form">
<ion-textarea color="danger" label="String" formControlName="textarea"></ion-textarea>
<ion-textarea label="String" formControlName="textarea"></ion-textarea>
</app-value-accessor-test>
</div>

2
packages/angular/test/base/src/app/standalone/value-accessors/toggle/toggle.component.html
View File

@ -5,6 +5,6 @@
</p>
<app-value-accessor-test [formGroup]="form">
<ion-toggle color="danger" formControlName="toggle"></ion-toggle>
<ion-toggle formControlName="toggle"></ion-toggle>
</app-value-accessor-test>
</div>

2
packages/angular/test/base/src/polyfills.ts
View File

@ -48,7 +48,7 @@ import './zone-flags';
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
import 'zone.js'; // Included with Angular CLI.
/***************************************************************************************************