@ionic/angular 8.6.3-dev.11753378718.15aa6551 → 8.6.3-dev.11754487906.199a3208

package/fesm2022/ionic-angular-common.mjs

@@ -10,48 +10,6 @@ import { __decorate } from 'tslib';
 import { filter, switchMap, distinctUntilChanged } from 'rxjs/operators';
 import { NgControl } from '@angular/forms';
 
-class DomController {
-    /**
-     * Schedules a task to run during the READ phase of the next frame.
-     * This task should only read the DOM, but never modify it.
-     */
-    read(cb) {
-        getQueue().read(cb);
-    }
-    /**
-     * Schedules a task to run during the WRITE phase of the next frame.
-     * This task should write the DOM, but never READ it.
-     */
-    write(cb) {
-        getQueue().write(cb);
-    }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DomController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DomController, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DomController, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-const getQueue = () => {
-    const win = typeof window !== 'undefined' ? window : null;
-    if (win != null) {
-        const Ionic = win.Ionic;
-        if (Ionic?.queue) {
-            return Ionic.queue;
-        }
-        return {
-            read: (cb) => win.requestAnimationFrame(cb),
-            write: (cb) => win.requestAnimationFrame(cb),
-        };
-    }
-    return {
-        read: (cb) => cb(),
-        write: (cb) => cb(),
-    };
-};
-
 class MenuController {
     menuController;
     constructor(menuController) {
@@ -166,6 +124,48 @@ class MenuController {
     }
 }
 
+class DomController {
+    /**
+     * Schedules a task to run during the READ phase of the next frame.
+     * This task should only read the DOM, but never modify it.
+     */
+    read(cb) {
+        getQueue().read(cb);
+    }
+    /**
+     * Schedules a task to run during the WRITE phase of the next frame.
+     * This task should write the DOM, but never READ it.
+     */
+    write(cb) {
+        getQueue().write(cb);
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DomController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DomController, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DomController, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+const getQueue = () => {
+    const win = typeof window !== 'undefined' ? window : null;
+    if (win != null) {
+        const Ionic = win.Ionic;
+        if (Ionic?.queue) {
+            return Ionic.queue;
+        }
+        return {
+            read: (cb) => win.requestAnimationFrame(cb),
+            write: (cb) => win.requestAnimationFrame(cb),
+        };
+    }
+    return {
+        read: (cb) => cb(),
+        write: (cb) => cb(),
+    };
+};
+
 class Platform {
     doc;
     _readyPromise;
@@ -728,8 +728,6 @@ class NavParams {
     }
 }
 
-// Token for injecting the modal element
-const IonModalToken = new InjectionToken('IonModalToken');
 // TODO(FW-2827): types
 class AngularDelegate {
     zone = inject(NgZone);
@@ -814,17 +812,8 @@ const attachView = (zone, environmentInjector, injector, applicationRef, elRefMa
      * The modern approach is to access the data directly
      * from the component's class instance.
      */
-    const providers = getProviders(params);
-    // If this is an ion-modal, provide the modal element as an injectable
-    // so components inside the modal can inject it directly
-    if (container.tagName.toLowerCase() === 'ion-modal') {
-        providers.push({
-            provide: IonModalToken,
-            useValue: container,
-        });
-    }
     const childInjector = Injector.create({
-        providers,
+        providers: getProviders(params),
         parent: injector,
     });
     const componentRef = createComponent(component, {
@@ -969,39 +958,31 @@ function ProxyCmp(opts) {
     return decorator;
 }
 
-const MODAL_INPUTS = [
+const POPOVER_INPUTS = [
+    'alignment',
     'animated',
+    'arrow',
     'keepContentsMounted',
-    'backdropBreakpoint',
     'backdropDismiss',
-    'breakpoints',
-    'canDismiss',
     'cssClass',
+    'dismissOnSelect',
     'enterAnimation',
-    'expandToScroll',
     'event',
     'focusTrap',
-    'handle',
-    'handleBehavior',
-    'initialBreakpoint',
     'isOpen',
     'keyboardClose',
     'leaveAnimation',
     'mode',
-    'presentingElement',
     'showBackdrop',
     'translucent',
     'trigger',
+    'triggerAction',
+    'reference',
+    'size',
+    'side',
 ];
-const MODAL_METHODS = [
-    'present',
-    'dismiss',
-    'onDidDismiss',
-    'onWillDismiss',
-    'setCurrentBreakpoint',
-    'getCurrentBreakpoint',
-];
-let IonModal = class IonModal {
+const POPOVER_METHODS = ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss'];
+let IonPopover = class IonPopover {
     z;
     // TODO(FW-2827): type
     template;
@@ -1019,24 +1000,23 @@ let IonModal = class IonModal {
             c.detectChanges();
         });
         proxyOutputs(this, this.el, [
-            'ionModalDidPresent',
-            'ionModalWillPresent',
-            'ionModalWillDismiss',
-            'ionModalDidDismiss',
-            'ionBreakpointDidChange',
+            'ionPopoverDidPresent',
+            'ionPopoverWillPresent',
+            'ionPopoverWillDismiss',
+            'ionPopoverDidDismiss',
             'didPresent',
             'willPresent',
             'willDismiss',
             'didDismiss',
         ]);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonModal, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: IonModal, selector: "ion-modal", inputs: { animated: "animated", keepContentsMounted: "keepContentsMounted", backdropBreakpoint: "backdropBreakpoint", backdropDismiss: "backdropDismiss", breakpoints: "breakpoints", canDismiss: "canDismiss", cssClass: "cssClass", enterAnimation: "enterAnimation", expandToScroll: "expandToScroll", event: "event", focusTrap: "focusTrap", handle: "handle", handleBehavior: "handleBehavior", initialBreakpoint: "initialBreakpoint", isOpen: "isOpen", keyboardClose: "keyboardClose", leaveAnimation: "leaveAnimation", mode: "mode", presentingElement: "presentingElement", showBackdrop: "showBackdrop", translucent: "translucent", trigger: "trigger" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonPopover, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: IonPopover, selector: "ion-popover", inputs: { alignment: "alignment", animated: "animated", arrow: "arrow", keepContentsMounted: "keepContentsMounted", backdropDismiss: "backdropDismiss", cssClass: "cssClass", dismissOnSelect: "dismissOnSelect", enterAnimation: "enterAnimation", event: "event", focusTrap: "focusTrap", isOpen: "isOpen", keyboardClose: "keyboardClose", leaveAnimation: "leaveAnimation", mode: "mode", showBackdrop: "showBackdrop", translucent: "translucent", trigger: "trigger", triggerAction: "triggerAction", reference: "reference", size: "size", side: "side" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 });
 };
-IonModal = __decorate([
+IonPopover = __decorate([
     ProxyCmp({
-        inputs: MODAL_INPUTS,
-        methods: MODAL_METHODS,
+        inputs: POPOVER_INPUTS,
+        methods: POPOVER_METHODS,
     })
     /**
      * @Component extends from @Directive
@@ -1044,44 +1024,52 @@ IonModal = __decorate([
      * do not need to re-define them for the
      * lazy loaded popover.
      */
-], IonModal);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonModal, decorators: [{
+], IonPopover);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonPopover, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'ion-modal',
+                    selector: 'ion-popover',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: MODAL_INPUTS,
+                    inputs: POPOVER_INPUTS,
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { template: [{
                 type: ContentChild,
                 args: [TemplateRef, { static: false }]
             }] } });
 
-const POPOVER_INPUTS = [
-    'alignment',
+const MODAL_INPUTS = [
     'animated',
-    'arrow',
     'keepContentsMounted',
+    'backdropBreakpoint',
     'backdropDismiss',
+    'breakpoints',
+    'canDismiss',
     'cssClass',
-    'dismissOnSelect',
     'enterAnimation',
+    'expandToScroll',
     'event',
     'focusTrap',
+    'handle',
+    'handleBehavior',
+    'initialBreakpoint',
     'isOpen',
     'keyboardClose',
     'leaveAnimation',
     'mode',
+    'presentingElement',
     'showBackdrop',
     'translucent',
     'trigger',
-    'triggerAction',
-    'reference',
-    'size',
-    'side',
 ];
-const POPOVER_METHODS = ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss'];
-let IonPopover = class IonPopover {
+const MODAL_METHODS = [
+    'present',
+    'dismiss',
+    'onDidDismiss',
+    'onWillDismiss',
+    'setCurrentBreakpoint',
+    'getCurrentBreakpoint',
+];
+let IonModal = class IonModal {
     z;
     // TODO(FW-2827): type
     template;
@@ -1099,23 +1087,24 @@ let IonPopover = class IonPopover {
             c.detectChanges();
         });
         proxyOutputs(this, this.el, [
-            'ionPopoverDidPresent',
-            'ionPopoverWillPresent',
-            'ionPopoverWillDismiss',
-            'ionPopoverDidDismiss',
+            'ionModalDidPresent',
+            'ionModalWillPresent',
+            'ionModalWillDismiss',
+            'ionModalDidDismiss',
+            'ionBreakpointDidChange',
             'didPresent',
             'willPresent',
             'willDismiss',
             'didDismiss',
         ]);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonPopover, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: IonPopover, selector: "ion-popover", inputs: { alignment: "alignment", animated: "animated", arrow: "arrow", keepContentsMounted: "keepContentsMounted", backdropDismiss: "backdropDismiss", cssClass: "cssClass", dismissOnSelect: "dismissOnSelect", enterAnimation: "enterAnimation", event: "event", focusTrap: "focusTrap", isOpen: "isOpen", keyboardClose: "keyboardClose", leaveAnimation: "leaveAnimation", mode: "mode", showBackdrop: "showBackdrop", translucent: "translucent", trigger: "trigger", triggerAction: "triggerAction", reference: "reference", size: "size", side: "side" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonModal, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: IonModal, selector: "ion-modal", inputs: { animated: "animated", keepContentsMounted: "keepContentsMounted", backdropBreakpoint: "backdropBreakpoint", backdropDismiss: "backdropDismiss", breakpoints: "breakpoints", canDismiss: "canDismiss", cssClass: "cssClass", enterAnimation: "enterAnimation", expandToScroll: "expandToScroll", event: "event", focusTrap: "focusTrap", handle: "handle", handleBehavior: "handleBehavior", initialBreakpoint: "initialBreakpoint", isOpen: "isOpen", keyboardClose: "keyboardClose", leaveAnimation: "leaveAnimation", mode: "mode", presentingElement: "presentingElement", showBackdrop: "showBackdrop", translucent: "translucent", trigger: "trigger" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 });
 };
-IonPopover = __decorate([
+IonModal = __decorate([
     ProxyCmp({
-        inputs: POPOVER_INPUTS,
-        methods: POPOVER_METHODS,
+        inputs: MODAL_INPUTS,
+        methods: MODAL_METHODS,
     })
     /**
      * @Component extends from @Directive
@@ -1123,13 +1112,13 @@ IonPopover = __decorate([
      * do not need to re-define them for the
      * lazy loaded popover.
      */
-], IonPopover);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonPopover, decorators: [{
+], IonModal);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonModal, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'ion-popover',
+                    selector: 'ion-modal',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: POPOVER_INPUTS,
+                    inputs: MODAL_INPUTS,
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { template: [{
                 type: ContentChild,
@@ -1955,259 +1944,58 @@ function componentInputBindingFactory(router) {
     return null;
 }
 
-const raf = (h) => {
-    if (typeof __zone_symbol__requestAnimationFrame === 'function') {
-        return __zone_symbol__requestAnimationFrame(h);
+const BACK_BUTTON_INPUTS = ['color', 'defaultHref', 'disabled', 'icon', 'mode', 'routerAnimation', 'text', 'type'];
+let IonBackButton = class IonBackButton {
+    routerOutlet;
+    navCtrl;
+    config;
+    r;
+    z;
+    el;
+    constructor(routerOutlet, navCtrl, config, r, z, c) {
+        this.routerOutlet = routerOutlet;
+        this.navCtrl = navCtrl;
+        this.config = config;
+        this.r = r;
+        this.z = z;
+        c.detach();
+        this.el = this.r.nativeElement;
     }
-    if (typeof requestAnimationFrame === 'function') {
-        return requestAnimationFrame(h);
+    /**
+     * @internal
+     */
+    onClick(ev) {
+        const defaultHref = this.defaultHref || this.config.get('backButtonDefaultHref');
+        if (this.routerOutlet?.canGoBack()) {
+            this.navCtrl.setDirection('back', undefined, undefined, this.routerAnimation);
+            this.routerOutlet.pop();
+            ev.preventDefault();
+        }
+        else if (defaultHref != null) {
+            this.navCtrl.navigateBack(defaultHref, { animation: this.routerAnimation });
+            ev.preventDefault();
+        }
     }
-    return setTimeout(h);
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonBackButton, deps: [{ token: IonRouterOutlet, optional: true }, { token: NavController }, { token: Config }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: IonBackButton, inputs: { color: "color", defaultHref: "defaultHref", disabled: "disabled", icon: "icon", mode: "mode", routerAnimation: "routerAnimation", text: "text", type: "type" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
 };
-
-// TODO(FW-2827): types
-class ValueAccessor {
-    injector;
-    elementRef;
-    onChange = () => {
-        /**/
-    };
-    onTouched = () => {
-        /**/
-    };
-    lastValue;
-    statusChanges;
-    constructor(injector, elementRef) {
-        this.injector = injector;
-        this.elementRef = elementRef;
-    }
-    writeValue(value) {
-        this.elementRef.nativeElement.value = this.lastValue = value;
-        setIonicClasses(this.elementRef);
-    }
-    /**
-     * Notifies the ControlValueAccessor of a change in the value of the control.
-     *
-     * This is called by each of the ValueAccessor directives when we want to update
-     * the status and validity of the form control. For example with text components this
-     * is called when the ionInput event is fired. For select components this is called
-     * when the ionChange event is fired.
-     *
-     * This also updates the Ionic form status classes on the element.
-     *
-     * @param el The component element.
-     * @param value The new value of the control.
-     */
-    handleValueChange(el, value) {
-        if (el === this.elementRef.nativeElement) {
-            if (value !== this.lastValue) {
-                this.lastValue = value;
-                this.onChange(value);
-            }
-            setIonicClasses(this.elementRef);
-        }
-    }
-    _handleBlurEvent(el) {
-        if (el === this.elementRef.nativeElement) {
-            this.onTouched();
-            setIonicClasses(this.elementRef);
-            // When ion-radio is blurred, el and this.elementRef.nativeElement are
-            // different so we need to check if the closest ion-radio-group is the same
-            // as this.elementRef.nativeElement and if so, we need to mark the radio group
-            // as touched
-        }
-        else if (el.closest('ion-radio-group') === this.elementRef.nativeElement) {
-            this.onTouched();
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.elementRef.nativeElement.disabled = isDisabled;
-    }
-    ngOnDestroy() {
-        if (this.statusChanges) {
-            this.statusChanges.unsubscribe();
-        }
-    }
-    ngAfterViewInit() {
-        let ngControl;
-        try {
-            ngControl = this.injector.get(NgControl);
-        }
-        catch {
-            /* No FormControl or ngModel binding */
-        }
-        if (!ngControl) {
-            return;
-        }
-        // Listen for changes in validity, disabled, or pending states
-        if (ngControl.statusChanges) {
-            this.statusChanges = ngControl.statusChanges.subscribe(() => setIonicClasses(this.elementRef));
-        }
-        /**
-         * TODO FW-2787: Remove this in favor of https://github.com/angular/angular/issues/10887
-         * whenever it is implemented.
-         */
-        const formControl = ngControl.control;
-        if (formControl) {
-            const methodsToPatch = ['markAsTouched', 'markAllAsTouched', 'markAsUntouched', 'markAsDirty', 'markAsPristine'];
-            methodsToPatch.forEach((method) => {
-                if (typeof formControl[method] !== 'undefined') {
-                    const oldFn = formControl[method].bind(formControl);
-                    formControl[method] = (...params) => {
-                        oldFn(...params);
-                        setIonicClasses(this.elementRef);
-                    };
-                }
-            });
-        }
-    }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValueAccessor, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ValueAccessor, host: { listeners: { "ionBlur": "_handleBlurEvent($event.target)" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValueAccessor, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { _handleBlurEvent: [{
-                type: HostListener,
-                args: ['ionBlur', ['$event.target']]
-            }] } });
-const setIonicClasses = (element) => {
-    raf(() => {
-        const input = element.nativeElement;
-        const hasValue = input.value != null && input.value.toString().length > 0;
-        const classes = getClasses(input);
-        setClasses(input, classes);
-        const item = input.closest('ion-item');
-        if (item) {
-            if (hasValue) {
-                setClasses(item, [...classes, 'item-has-value']);
-            }
-            else {
-                setClasses(item, classes);
-            }
-        }
-    });
-};
-const getClasses = (element) => {
-    const classList = element.classList;
-    const classes = [];
-    for (let i = 0; i < classList.length; i++) {
-        const item = classList.item(i);
-        if (item !== null && startsWith(item, 'ng-')) {
-            classes.push(`ion-${item.substring(3)}`);
-        }
-    }
-    return classes;
-};
-const setClasses = (element, classes) => {
-    const classList = element.classList;
-    classList.remove('ion-valid', 'ion-invalid', 'ion-touched', 'ion-untouched', 'ion-dirty', 'ion-pristine');
-    classList.add(...classes);
-};
-const startsWith = (input, search) => {
-    return input.substring(0, search.length) === search;
-};
-
-const BACK_BUTTON_INPUTS = ['color', 'defaultHref', 'disabled', 'icon', 'mode', 'routerAnimation', 'text', 'type'];
-let IonBackButton = class IonBackButton {
-    routerOutlet;
-    navCtrl;
-    config;
-    r;
-    z;
-    el;
-    constructor(routerOutlet, navCtrl, config, r, z, c) {
-        this.routerOutlet = routerOutlet;
-        this.navCtrl = navCtrl;
-        this.config = config;
-        this.r = r;
-        this.z = z;
-        c.detach();
-        this.el = this.r.nativeElement;
-    }
-    /**
-     * @internal
-     */
-    onClick(ev) {
-        const defaultHref = this.defaultHref || this.config.get('backButtonDefaultHref');
-        if (this.routerOutlet?.canGoBack()) {
-            this.navCtrl.setDirection('back', undefined, undefined, this.routerAnimation);
-            this.routerOutlet.pop();
-            ev.preventDefault();
-        }
-        else if (defaultHref != null) {
-            this.navCtrl.navigateBack(defaultHref, { animation: this.routerAnimation });
-            ev.preventDefault();
-        }
-    }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonBackButton, deps: [{ token: IonRouterOutlet, optional: true }, { token: NavController }, { token: Config }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: IonBackButton, inputs: { color: "color", defaultHref: "defaultHref", disabled: "disabled", icon: "icon", mode: "mode", routerAnimation: "routerAnimation", text: "text", type: "type" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
-};
-IonBackButton = __decorate([
-    ProxyCmp({
-        inputs: BACK_BUTTON_INPUTS,
-    })
-], IonBackButton);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonBackButton, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: BACK_BUTTON_INPUTS,
-                }]
-        }], ctorParameters: function () { return [{ type: IonRouterOutlet, decorators: [{
-                    type: Optional
-                }] }, { type: NavController }, { type: Config }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
-const NAV_INPUTS = ['animated', 'animation', 'root', 'rootParams', 'swipeGesture'];
-const NAV_METHODS = [
-    'push',
-    'insert',
-    'insertPages',
-    'pop',
-    'popTo',
-    'popToRoot',
-    'removeIndex',
-    'setRoot',
-    'setPages',
-    'getActive',
-    'getByIndex',
-    'canGoBack',
-    'getPrevious',
-];
-let IonNav = class IonNav {
-    z;
-    el;
-    constructor(ref, environmentInjector, injector, angularDelegate, z, c) {
-        this.z = z;
-        c.detach();
-        this.el = ref.nativeElement;
-        ref.nativeElement.delegate = angularDelegate.create(environmentInjector, injector);
-        proxyOutputs(this, this.el, ['ionNavDidChange', 'ionNavWillChange']);
-    }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonNav, deps: [{ token: i0.ElementRef }, { token: i0.EnvironmentInjector }, { token: i0.Injector }, { token: AngularDelegate }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: IonNav, inputs: { animated: "animated", animation: "animation", root: "root", rootParams: "rootParams", swipeGesture: "swipeGesture" }, ngImport: i0 });
-};
-IonNav = __decorate([
-    ProxyCmp({
-        inputs: NAV_INPUTS,
-        methods: NAV_METHODS,
-    })
-], IonNav);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonNav, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: NAV_INPUTS,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.EnvironmentInjector }, { type: i0.Injector }, { type: AngularDelegate }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });
+IonBackButton = __decorate([
+    ProxyCmp({
+        inputs: BACK_BUTTON_INPUTS,
+    })
+], IonBackButton);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonBackButton, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: BACK_BUTTON_INPUTS,
+                }]
+        }], ctorParameters: function () { return [{ type: IonRouterOutlet, decorators: [{
+                    type: Optional
+                }] }, { type: NavController }, { type: Config }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
 
 /**
  * Adds support for Ionic routing directions and animations to the base Angular router link directive.
@@ -2358,6 +2146,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['click']
             }] } });
 
+const NAV_INPUTS = ['animated', 'animation', 'root', 'rootParams', 'swipeGesture'];
+const NAV_METHODS = [
+    'push',
+    'insert',
+    'insertPages',
+    'pop',
+    'popTo',
+    'popToRoot',
+    'removeIndex',
+    'setRoot',
+    'setPages',
+    'getActive',
+    'getByIndex',
+    'canGoBack',
+    'getPrevious',
+];
+let IonNav = class IonNav {
+    z;
+    el;
+    constructor(ref, environmentInjector, injector, angularDelegate, z, c) {
+        this.z = z;
+        c.detach();
+        this.el = ref.nativeElement;
+        ref.nativeElement.delegate = angularDelegate.create(environmentInjector, injector);
+        proxyOutputs(this, this.el, ['ionNavDidChange', 'ionNavWillChange']);
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonNav, deps: [{ token: i0.ElementRef }, { token: i0.EnvironmentInjector }, { token: i0.Injector }, { token: AngularDelegate }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: IonNav, inputs: { animated: "animated", animation: "animation", root: "root", rootParams: "rootParams", swipeGesture: "swipeGesture" }, ngImport: i0 });
+};
+IonNav = __decorate([
+    ProxyCmp({
+        inputs: NAV_INPUTS,
+        methods: NAV_METHODS,
+    })
+], IonNav);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonNav, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: NAV_INPUTS,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.EnvironmentInjector }, { type: i0.Injector }, { type: AngularDelegate }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });
+
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
 class IonTabs {
     navCtrl;
@@ -2586,31 +2417,163 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['ionTabButtonClick', ['$event']]
             }] } });
 
+const raf = (h) => {
+    if (typeof __zone_symbol__requestAnimationFrame === 'function') {
+        return __zone_symbol__requestAnimationFrame(h);
+    }
+    if (typeof requestAnimationFrame === 'function') {
+        return requestAnimationFrame(h);
+    }
+    return setTimeout(h);
+};
+
 // TODO(FW-2827): types
-class OverlayBaseController {
-    ctrl;
-    constructor(ctrl) {
-        this.ctrl = ctrl;
+class ValueAccessor {
+    injector;
+    elementRef;
+    onChange = () => {
+        /**/
+    };
+    onTouched = () => {
+        /**/
+    };
+    lastValue;
+    statusChanges;
+    constructor(injector, elementRef) {
+        this.injector = injector;
+        this.elementRef = elementRef;
     }
-    /**
-     * Creates a new overlay
-     */
-    create(opts) {
-        return this.ctrl.create((opts || {}));
+    writeValue(value) {
+        this.elementRef.nativeElement.value = this.lastValue = value;
+        setIonicClasses(this.elementRef);
     }
     /**
-     * When `id` is not provided, it dismisses the top overlay.
+     * Notifies the ControlValueAccessor of a change in the value of the control.
+     *
+     * This is called by each of the ValueAccessor directives when we want to update
+     * the status and validity of the form control. For example with text components this
+     * is called when the ionInput event is fired. For select components this is called
+     * when the ionChange event is fired.
+     *
+     * This also updates the Ionic form status classes on the element.
+     *
+     * @param el The component element.
+     * @param value The new value of the control.
      */
-    dismiss(data, role, id) {
-        return this.ctrl.dismiss(data, role, id);
+    handleValueChange(el, value) {
+        if (el === this.elementRef.nativeElement) {
+            if (value !== this.lastValue) {
+                this.lastValue = value;
+                this.onChange(value);
+            }
+            setIonicClasses(this.elementRef);
+        }
     }
-    /**
-     * Returns the top overlay.
-     */
-    getTop() {
-        return this.ctrl.getTop();
+    _handleBlurEvent(el) {
+        if (el === this.elementRef.nativeElement) {
+            this.onTouched();
+            setIonicClasses(this.elementRef);
+            // When ion-radio is blurred, el and this.elementRef.nativeElement are
+            // different so we need to check if the closest ion-radio-group is the same
+            // as this.elementRef.nativeElement and if so, we need to mark the radio group
+            // as touched
+        }
+        else if (el.closest('ion-radio-group') === this.elementRef.nativeElement) {
+            this.onTouched();
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.elementRef.nativeElement.disabled = isDisabled;
+    }
+    ngOnDestroy() {
+        if (this.statusChanges) {
+            this.statusChanges.unsubscribe();
+        }
     }
+    ngAfterViewInit() {
+        let ngControl;
+        try {
+            ngControl = this.injector.get(NgControl);
+        }
+        catch {
+            /* No FormControl or ngModel binding */
+        }
+        if (!ngControl) {
+            return;
+        }
+        // Listen for changes in validity, disabled, or pending states
+        if (ngControl.statusChanges) {
+            this.statusChanges = ngControl.statusChanges.subscribe(() => setIonicClasses(this.elementRef));
+        }
+        /**
+         * TODO FW-2787: Remove this in favor of https://github.com/angular/angular/issues/10887
+         * whenever it is implemented.
+         */
+        const formControl = ngControl.control;
+        if (formControl) {
+            const methodsToPatch = ['markAsTouched', 'markAllAsTouched', 'markAsUntouched', 'markAsDirty', 'markAsPristine'];
+            methodsToPatch.forEach((method) => {
+                if (typeof formControl[method] !== 'undefined') {
+                    const oldFn = formControl[method].bind(formControl);
+                    formControl[method] = (...params) => {
+                        oldFn(...params);
+                        setIonicClasses(this.elementRef);
+                    };
+                }
+            });
+        }
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValueAccessor, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ValueAccessor, host: { listeners: { "ionBlur": "_handleBlurEvent($event.target)" } }, ngImport: i0 });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValueAccessor, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { _handleBlurEvent: [{
+                type: HostListener,
+                args: ['ionBlur', ['$event.target']]
+            }] } });
+const setIonicClasses = (element) => {
+    raf(() => {
+        const input = element.nativeElement;
+        const hasValue = input.value != null && input.value.toString().length > 0;
+        const classes = getClasses(input);
+        setClasses(input, classes);
+        const item = input.closest('ion-item');
+        if (item) {
+            if (hasValue) {
+                setClasses(item, [...classes, 'item-has-value']);
+            }
+            else {
+                setClasses(item, classes);
+            }
+        }
+    });
+};
+const getClasses = (element) => {
+    const classList = element.classList;
+    const classes = [];
+    for (let i = 0; i < classList.length; i++) {
+        const item = classList.item(i);
+        if (item !== null && startsWith(item, 'ng-')) {
+            classes.push(`ion-${item.substring(3)}`);
+        }
+    }
+    return classes;
+};
+const setClasses = (element, classes) => {
+    const classList = element.classList;
+    classList.remove('ion-valid', 'ion-invalid', 'ion-touched', 'ion-untouched', 'ion-dirty', 'ion-pristine');
+    classList.add(...classes);
+};
+const startsWith = (input, search) => {
+    return input.substring(0, search.length) === search;
+};
 
 /**
  * Provides a way to customize when activated routes get reused.
@@ -2667,9 +2630,35 @@ class IonicRouteStrategy {
     }
 }
 
+// TODO(FW-2827): types
+class OverlayBaseController {
+    ctrl;
+    constructor(ctrl) {
+        this.ctrl = ctrl;
+    }
+    /**
+     * Creates a new overlay
+     */
+    create(opts) {
+        return this.ctrl.create((opts || {}));
+    }
+    /**
+     * When `id` is not provided, it dismisses the top overlay.
+     */
+    dismiss(data, role, id) {
+        return this.ctrl.dismiss(data, role, id);
+    }
+    /**
+     * Returns the top overlay.
+     */
+    getTop() {
+        return this.ctrl.getTop();
+    }
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AngularDelegate, Config, ConfigToken, DomController, IonBackButton, IonModal, IonModalToken, IonNav, IonPopover, IonRouterOutlet, IonTabs, IonicRouteStrategy, MenuController, NavController, NavParams, OverlayBaseController, Platform, ProxyCmp, RouterLinkDelegateDirective, RouterLinkWithHrefDelegateDirective, ValueAccessor, bindLifecycleEvents, provideComponentInputBinding, raf, setIonicClasses };
+export { AngularDelegate, Config, ConfigToken, DomController, IonBackButton, IonModal, IonNav, IonPopover, IonRouterOutlet, IonTabs, IonicRouteStrategy, MenuController, NavController, NavParams, OverlayBaseController, Platform, ProxyCmp, RouterLinkDelegateDirective, RouterLinkWithHrefDelegateDirective, ValueAccessor, bindLifecycleEvents, provideComponentInputBinding, raf, setIonicClasses };
 //# sourceMappingURL=ionic-angular-common.mjs.map