chore(): sync with main

angular/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.0.15](https://github.com/ionic-team/ionic/compare/v6.0.14...v6.0.15) (2022-04-06)
+
+
+### Bug Fixes
+
+* **angular:** item styling when control has value ([#24932](https://github.com/ionic-team/ionic/issues/24932)) ([eea25d0](https://github.com/ionic-team/ionic/commit/eea25d091d7eb319d6ec1de8b793881d3a10949b)), closes [#23809](https://github.com/ionic-team/ionic/issues/23809)
+* **angular:** routerLink allows opening in a new tab for link elements ([#25014](https://github.com/ionic-team/ionic/issues/25014)) ([b010f07](https://github.com/ionic-team/ionic/commit/b010f077fe51992dd9dd8ced69769a8eb91ac055)), closes [#24413](https://github.com/ionic-team/ionic/issues/24413)
+
+
+
+
+
 ## [6.0.14](https://github.com/ionic-team/ionic/compare/v6.0.13...v6.0.14) (2022-03-30)
 
 **Note:** Version bump only for package @ionic/angular

angular/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "6.0.14",
+  "version": "6.0.15",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "6.0.14",
+  "version": "6.0.15",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -44,7 +44,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "^6.0.14",
+    "@ionic/core": "^6.0.15",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.0.0"
   },

angular/src/directives/control-value-accessors/value-accessor.ts

@@ -110,13 +110,17 @@ export class ValueAccessor implements ControlValueAccessor, AfterViewInit, OnDes
 
 export const setIonicClasses = (element: ElementRef): void => {
   raf(() => {
-    const input = element.nativeElement as HTMLElement;
+    const input = element.nativeElement as HTMLInputElement;
+    const hasValue = input.value != null && input.value.toString().length > 0;
     const classes = getClasses(input);
     setClasses(input, classes);
-
     const item = input.closest('ion-item');
     if (item) {
-      setClasses(item, classes);
+      if (hasValue) {
+        setClasses(item, [...classes, 'item-has-value']);
+      } else {
+        setClasses(item, classes);
+      }
     }
   });
 };
@@ -127,7 +131,7 @@ const getClasses = (element: HTMLElement) => {
   for (let i = 0; i < classList.length; i++) {
     const item = classList.item(i);
     if (item !== null && startsWith(item, 'ng-')) {
-      classes.push(`ion-${item.substr(3)}`);
+      classes.push(`ion-${item.substring(3)}`);
     }
   }
   return classes;
@@ -135,13 +139,10 @@ const getClasses = (element: HTMLElement) => {
 
 const setClasses = (element: HTMLElement, classes: string[]) => {
   const classList = element.classList;
-  ['ion-valid', 'ion-invalid', 'ion-touched', 'ion-untouched', 'ion-dirty', 'ion-pristine'].forEach((c) =>
-    classList.remove(c)
-  );
-
-  classes.forEach((c) => classList.add(c));
+  classList.remove('ion-valid', 'ion-invalid', 'ion-touched', 'ion-untouched', 'ion-dirty', 'ion-pristine');
+  classList.add(...classes);
 };
 
 const startsWith = (input: string, search: string): boolean => {
-  return input.substr(0, search.length) === search;
+  return input.substring(0, search.length) === search;
 };

angular/src/directives/navigation/router-link-delegate.ts

@@ -12,7 +12,7 @@ import { NavController } from '../../providers/nav-controller';
  * animation so that the routing integration will transition correctly.
  */
 @Directive({
-  selector: '[routerLink]',
+  selector: ':not(a):not(area)[routerLink]',
 })
 export class RouterLinkDelegateDirective implements OnInit, OnChanges {
   @Input()
@@ -37,9 +37,56 @@ export class RouterLinkDelegateDirective implements OnInit, OnChanges {
     this.updateTargetUrlAndHref();
   }
 
-  @HostListener('click')
-  onClick(): void {
+  private updateTargetUrlAndHref() {
+    if (this.routerLink?.urlTree) {
+      const href = this.locationStrategy.prepareExternalUrl(this.router.serializeUrl(this.routerLink.urlTree));
+      this.elementRef.nativeElement.href = href;
+    }
+  }
+
+  /**
+   * @internal
+   */
+  @HostListener('click', ['$event'])
+  onClick(ev: UIEvent): void {
     this.navCtrl.setDirection(this.routerDirection, undefined, undefined, this.routerAnimation);
+
+    /**
+     * This prevents the browser from
+     * performing a page reload when pressing
+     * an Ionic component with routerLink.
+     * The page reload interferes with routing
+     * and causes ion-back-button to disappear
+     * since the local history is wiped on reload.
+     */
+    ev.preventDefault();
+  }
+}
+
+@Directive({
+  selector: 'a[routerLink],area[routerLink]',
+})
+export class RouterLinkWithHrefDelegateDirective implements OnInit, OnChanges {
+  @Input()
+  routerDirection: RouterDirection = 'forward';
+
+  @Input()
+  routerAnimation?: AnimationBuilder;
+
+  constructor(
+    private locationStrategy: LocationStrategy,
+    private navCtrl: NavController,
+    private elementRef: ElementRef,
+    private router: Router,
+    @Optional() private routerLink?: RouterLink
+  ) {}
+
+  ngOnInit(): void {
+    this.updateTargetUrlAndHref();
+  }
+
+  ngOnChanges(): void {
+    this.updateTargetUrlAndHref();
   }
 
   private updateTargetUrlAndHref() {
@@ -48,4 +95,12 @@ export class RouterLinkDelegateDirective implements OnInit, OnChanges {
       this.elementRef.nativeElement.href = href;
     }
   }
+
+  /**
+   * @internal
+   */
+  @HostListener('click')
+  onClick(): void {
+    this.navCtrl.setDirection(this.routerDirection, undefined, undefined, this.routerAnimation);
+  }
 }

angular/src/directives/proxies.ts

@@ -1791,7 +1791,7 @@ export declare interface IonSplitPane extends Components.IonSplitPane {
   /**
    * Expression to be called when the split-pane visibility has changed 
    */
-  ionSplitPaneVisible: EventEmitter<CustomEvent<{visible: boolean}>>;
+  ionSplitPaneVisible: EventEmitter<CustomEvent<{ visible: boolean }>>;
 
 }
 

angular/src/index.ts

@@ -8,7 +8,11 @@ export { IonTabs } from './directives/navigation/ion-tabs';
 export { IonBackButtonDelegateDirective as IonBackButtonDelegate } from './directives/navigation/ion-back-button';
 export { NavDelegate } from './directives/navigation/nav-delegate';
 export { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
-export { RouterLinkDelegateDirective as RouterLinkDelegate } from './directives/navigation/router-link-delegate';
+export {
+  RouterLinkDelegateDirective as RouterLinkDelegate,
+  RouterLinkWithHrefDelegateDirective as RouterLinkWithHrefDelegate,
+} from './directives/navigation/router-link-delegate';
+
 export { NavParams } from './directives/navigation/nav-params';
 export { IonVirtualScroll } from './directives/virtual-scroll/virtual-scroll';
 export { VirtualItem } from './directives/virtual-scroll/virtual-item';

angular/src/ionic-module.ts

@@ -12,7 +12,10 @@ import { IonBackButtonDelegateDirective } from './directives/navigation/ion-back
 import { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
 import { IonTabs } from './directives/navigation/ion-tabs';
 import { NavDelegate } from './directives/navigation/nav-delegate';
-import { RouterLinkDelegateDirective } from './directives/navigation/router-link-delegate';
+import {
+  RouterLinkDelegateDirective,
+  RouterLinkWithHrefDelegateDirective,
+} from './directives/navigation/router-link-delegate';
 import { IonModal } from './directives/overlays/modal';
 import { IonPopover } from './directives/overlays/popover';
 import {
@@ -195,6 +198,7 @@ const DECLARATIONS = [
   IonBackButtonDelegateDirective,
   NavDelegate,
   RouterLinkDelegateDirective,
+  RouterLinkWithHrefDelegateDirective,
 
   // virtual scroll
   VirtualFooter,

angular/test/test-app/e2e/src/modal.spec.ts

@@ -43,7 +43,6 @@ describe('Modals', () => {
 
 });
 
-
 describe('Modals: Inline', () => {
   beforeEach(() => {
     cy.visit('/modal-inline');
@@ -92,3 +91,29 @@ describe('Modals: Inline', () => {
   });
 
 });
+
+describe('when in a modal', () => {
+
+  beforeEach(() => {
+    cy.visit('/modals');
+    cy.get('#action-button').click();
+    cy.get('#close-modal').click();
+    cy.get('#action-button').click();
+  });
+
+  it('should render ion-item item-has-value class when control value is set', () => {
+    cy.get('[formControlName="select"]').invoke('attr', 'value', 0);
+    cy.get('#inputWithFloatingLabel').should('have.class', 'item-has-value');
+  });
+
+  it('should not render ion-item item-has-value class when control value is undefined', () => {
+    cy.get('[formControlName="select"]').invoke('attr', 'value', undefined);
+    cy.get('#inputWithFloatingLabel').should('not.have.class', 'item-has-value');
+  });
+
+  it('should not render ion-item item-has-value class when control value is null', () => {
+    cy.get('[formControlName="select"]').invoke('attr', 'value', null);
+    cy.get('#inputWithFloatingLabel').should('not.have.class', 'item-has-value');
+  });
+
+});

angular/test/test-app/src/app/modal-example/modal-example.component.html

@@ -22,4 +22,14 @@
     <ion-button (click)="push()" class="push-page">Push page</ion-button>
     <ion-button (click)="pop()" class="pop-page">Pop page</ion-button>
   </p>
+
+  <form [formGroup]="form">
+    <ion-item id="inputWithFloatingLabel">
+      <ion-label color="primary" position="floating">Floating Label</ion-label>
+      <ion-select multiple="false" formControlName="select">
+        <ion-select-option [value]="0">Option 0</ion-select-option>
+        <ion-select-option [value]="1">Option 1</ion-select-option>
+      </ion-select>
+    </ion-item>
+  </form>
 </ion-content>

angular/test/test-app/src/app/modal-example/modal-example.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input, NgZone, OnInit, Optional } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
 import { ModalController, NavParams, IonNav, ViewWillLeave, ViewDidEnter, ViewDidLeave } from '@ionic/angular';
 
 @Component({
@@ -9,6 +10,10 @@ export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnte
 
   @Input() value: string;
 
+  form = new FormGroup({
+    select: new FormControl([])
+  });
+
   valueFromParams: string;
   onInit = 0;
   willEnter = 0;