feat(picker): add ability to use picker inline (#26336)

angular/src/directives/proxies-list.ts

@@ -53,6 +53,7 @@ export const DIRECTIVES = [
   d.IonNav,
   d.IonNavLink,
   d.IonNote,
+  d.IonPicker,
   d.IonProgressBar,
   d.IonRadio,
   d.IonRadioGroup,

angular/src/directives/proxies.ts

@@ -1418,6 +1418,67 @@ export class IonNote {
   }
 }
 
+import type { OverlayEventDetail as IPickerOverlayEventDetail } from '@ionic/core';
+export declare interface IonPicker extends Components.IonPicker {
+  /**
+   * Emitted after the picker has presented. 
+   */
+  ionPickerDidPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the picker has presented. 
+   */
+  ionPickerWillPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the picker has dismissed. 
+   */
+  ionPickerWillDismiss: EventEmitter<CustomEvent<IPickerOverlayEventDetail>>;
+  /**
+   * Emitted after the picker has dismissed. 
+   */
+  ionPickerDidDismiss: EventEmitter<CustomEvent<IPickerOverlayEventDetail>>;
+  /**
+   * Emitted after the picker has presented.
+Shorthand for ionPickerWillDismiss. 
+   */
+  didPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the picker has presented.
+Shorthand for ionPickerWillPresent. 
+   */
+  willPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the picker has dismissed.
+Shorthand for ionPickerWillDismiss. 
+   */
+  willDismiss: EventEmitter<CustomEvent<IPickerOverlayEventDetail>>;
+  /**
+   * Emitted after the picker has dismissed.
+Shorthand for ionPickerDidDismiss. 
+   */
+  didDismiss: EventEmitter<CustomEvent<IPickerOverlayEventDetail>>;
+
+}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger'],
+  methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss', 'getColumn']
+})
+@Component({
+  selector: 'ion-picker',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger']
+})
+export class IonPicker {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['ionPickerDidPresent', 'ionPickerWillPresent', 'ionPickerWillDismiss', 'ionPickerDidDismiss', 'didPresent', 'willPresent', 'willDismiss', 'didDismiss']);
+  }
+}
+
 
 export declare interface IonProgressBar extends Components.IonProgressBar {}
 

angular/test/base/src/app/overlays-inline/overlays-inline.component.html

@@ -3,6 +3,7 @@
   <ion-button id="open-action-sheet">Open Action Sheet</ion-button>
   <ion-button id="open-loading">Open Loading</ion-button>
   <ion-button id="open-toast">Open Toast</ion-button>
+  <ion-button id="open-picker">Open Picker</ion-button>
 
   <ion-alert
     trigger="open-alert"
@@ -30,4 +31,10 @@
     message="This is a toast message"
     [buttons]="['Button']"
   ></ion-toast>
+
+  <ion-picker
+    trigger="open-picker"
+    [columns]="pickerColumns"
+    [buttons]="pickerButtons"
+  ></ion-picker>
 </ion-content>

angular/test/base/src/app/overlays-inline/overlays-inline.component.ts

@@ -7,4 +7,25 @@ import { Component } from "@angular/core";
   selector: 'app-overlays-inline',
   templateUrl: 'overlays-inline.component.html'
 })
-export class OverlaysInlineComponent {}
+export class OverlaysInlineComponent {
+  public pickerButtons = [{ text: 'Ok' }, { text: 'Cancel', role: 'cancel' }];
+  public pickerColumns = [
+    {
+      name: 'Colors',
+      options: [
+        {
+          text: 'Red',
+          value: 'red',
+        },
+        {
+          text: 'Blue',
+          value: 'blue',
+        },
+        {
+          text: 'Green',
+          value: 'green',
+        },
+      ],
+    },
+  ];
+}