| 58 | shadow: true, |
| 59 | }) |
| 60 | export class Select implements ComponentInterface { |
| 61 | private inputId = `ion-sel-${selectIds++}`; |
| 62 | private helperTextId = `${this.inputId}-helper-text`; |
| 63 | private errorTextId = `${this.inputId}-error-text`; |
| 64 | private overlay?: OverlaySelect; |
| 65 | private focusEl?: HTMLButtonElement; |
| 66 | private mutationO?: MutationObserver; |
| 67 | private inheritedAttributes: Attributes = {}; |
| 68 | private nativeWrapperEl: HTMLElement | undefined; |
| 69 | private notchSpacerEl: HTMLElement | undefined; |
| 70 | private validationObserver?: MutationObserver; |
| 71 | |
| 72 | private notchController?: NotchController; |
| 73 | |
| 74 | @Element() el!: HTMLIonSelectElement; |
| 75 | |
| 76 | @State() isExpanded = false; |
| 77 | |
| 78 | /** |
| 79 | * The `hasFocus` state ensures the focus class is |
| 80 | * added regardless of how the element is focused. |
| 81 | * The `ion-focused` class only applies when focused |
| 82 | * via tabbing, not by clicking. |
| 83 | * The `has-focus` logic was added to ensure the class |
| 84 | * is applied in both cases. |
| 85 | */ |
| 86 | @State() hasFocus = false; |
| 87 | |
| 88 | /** |
| 89 | * Track validation state for proper aria-live announcements. |
| 90 | */ |
| 91 | @State() isInvalid = false; |
| 92 | |
| 93 | @State() private hintTextId?: string; |
| 94 | |
| 95 | /** |
| 96 | * The text to display on the cancel button. |
| 97 | */ |
| 98 | @Prop() cancelText = 'Cancel'; |
| 99 | |
| 100 | /** |
| 101 | * The color to use from your application's color palette. |
| 102 | * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. |
| 103 | * For more information on colors, see [theming](/docs/theming/basics). |
| 104 | * |
| 105 | * This property is only available when using the modern select syntax. |
| 106 | */ |
| 107 | @Prop({ reflect: true }) color?: Color; |
| 108 | |
| 109 | /** |
| 110 | * This property allows developers to specify a custom function or property |
| 111 | * name for comparing objects when determining the selected option in the |
| 112 | * ion-select. When not specified, the default behavior will use strict |
| 113 | * equality (===) for comparison. |
| 114 | */ |
| 115 | @Prop() compareWith?: string | SelectCompareFn | null; |
| 116 | |
| 117 | /** |