Class PickerColumn

core/src/components/picker-column/picker-column.tsx:26–707

  shadow: true,
})
export class PickerColumn implements ComponentInterface {
  private scrollEl?: HTMLDivElement | null;
  private destroyScrollListener?: () => void;
  private isScrolling = false;
  private scrollEndCallback?: () => void;
  private isColumnVisible = false;
  private parentEl?: HTMLIonPickerElement | null;
  private canExitInputMode = true;
  private assistiveFocusable?: HTMLElement;
  private updateValueTextOnScroll = false;

  @State() ariaLabel: string | null = null;

  @Watch('aria-label')
  ariaLabelChanged(newValue: string) {
    this.ariaLabel = newValue;
  }

  @State() isActive = false;

  @Element() el!: HTMLIonPickerColumnElement;

  /**
   * If `true`, the user cannot interact with the picker.
   */
  @Prop() disabled = false;

  /**
   * The selected option in the picker.
   */
  @Prop({ mutable: true }) value?: string | number;

  /**
   * The color to use from your application's color palette.
   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
   * For more information on colors, see [theming](/docs/theming/basics).
   */
  @Prop({ reflect: true }) color?: Color = 'primary';

  /**
   * If `true`, tapping the picker will
   * reveal a number input keyboard that lets
   * the user type in values for each picker
   * column. This is useful when working
   * with time pickers.
   *
   * @internal
   */
  @Prop() numericInput = false;

  /**
   * Emitted when the value has changed.
   *
   * This event will not emit when programmatically setting the `value` property.
   */
  @Event() ionChange!: EventEmitter<PickerColumnChangeEventDetail>;

  @Watch('value')