diff --git a/BREAKING.md b/BREAKING.md index 259c8c98201..2858e6d446d 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -24,6 +24,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver - [Nav](#version-8x-nav) - [Picker](#version-8x-picker) - [Progress bar](#version-8x-progress-bar) + - [Select](#version-8x-select) - [Textarea](#version-8x-textarea)

Browser and Platform Support

@@ -176,6 +177,10 @@ For more information on the dynamic font, refer to the [Dynamic Font Scaling doc For more information on styling toast buttons, refer to the [Toast Theming documentation](https://ionicframework.com/docs/api/toast#theming). +

Select

+ +- The `legacy` property and support for the legacy syntax, which involved placing an `ion-select` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy select syntax, refer to the [Select documentation](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax). +

Textarea

- The `legacy` property and support for the legacy syntax, which involved placing an `ion-textarea` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy textarea syntax, refer to the [Textarea documentation](https://ionicframework.com/docs/api/textarea#migrating-from-legacy-textarea-syntax). diff --git a/core/api.txt b/core/api.txt index 8b601ae7809..1241a58e605 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1275,7 +1275,6 @@ ion-select,prop,interfaceOptions,any,{},false,false ion-select,prop,justify,"end" | "space-between" | "start",'space-between',false,false ion-select,prop,label,string | undefined,undefined,false,false ion-select,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start" | undefined,'start',false,false -ion-select,prop,legacy,boolean | undefined,undefined,false,false ion-select,prop,mode,"ios" | "md",undefined,false,false ion-select,prop,multiple,boolean,false,false,false ion-select,prop,name,string,this.inputId,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 4e4795c1e53..68efdd59e7a 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2739,10 +2739,6 @@ export namespace Components { * Where to place the label relative to the select. `"start"`: The label will appear to the left of the select in LTR and to the right in RTL. `"end"`: The label will appear to the right of the select in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select. `"stacked"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`. */ "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed'; - /** - * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup. - */ - "legacy"?: boolean; /** * The mode determines which platform styles to use. */ @@ -7498,10 +7494,6 @@ declare namespace LocalJSX { * Where to place the label relative to the select. `"start"`: The label will appear to the left of the select in LTR and to the right in RTL. `"end"`: The label will appear to the right of the select in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select. `"stacked"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`. */ "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed'; - /** - * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup. - */ - "legacy"?: boolean; /** * The mode determines which platform styles to use. */ diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss index 9b107457e9c..d27d8f6a9aa 100644 --- a/core/src/components/item/item.ios.scss +++ b/core/src/components/item/item.ios.scss @@ -213,18 +213,9 @@ --min-height: 68px; } -:host(.item-label-stacked) ::slotted(ion-select.legacy-select), -:host(.item-label-floating) ::slotted(ion-select.legacy-select) { - --padding-top: 8px; - --padding-bottom: 8px; - --padding-start: 0px; -} - - // iOS Fixed Labels // -------------------------------------------------- -:host(.item-label-fixed) ::slotted(ion-select.legacy-select), :host(.item-label-fixed) ::slotted(ion-datetime) { --padding-start: 0; } diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss index 50759280316..1444bb6ded8 100644 --- a/core/src/components/item/item.md.scss +++ b/core/src/components/item/item.md.scss @@ -319,7 +319,6 @@ // Material Design Fixed Labels // -------------------------------------------------- -:host(.item-label-fixed) ::slotted(ion-select.legacy-select), :host(.item-label-fixed) ::slotted(ion-datetime) { --padding-start: 8px; } @@ -365,13 +364,6 @@ --min-height: 55px; } -:host(.item-label-stacked) ::slotted(ion-select.legacy-select), -:host(.item-label-floating) ::slotted(ion-select.legacy-select) { - --padding-top: 8px; - --padding-bottom: 8px; - --padding-start: 0; -} - :host(.ion-focused:not(.ion-color)) ::slotted(.label-stacked), :host(.ion-focused:not(.ion-color)) ::slotted(.label-floating), :host(.item-has-focus:not(.ion-color)) ::slotted(.label-stacked), diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss index aa52b7b953e..311ea1c0208 100644 --- a/core/src/components/item/item.scss +++ b/core/src/components/item/item.scss @@ -535,29 +535,6 @@ button, a { display: block; } -// Item Select -// -------------------------------------------------- - -:host(:not(.item-label)) ::slotted(ion-select.legacy-select) { - --padding-start: 0; - - max-width: none; -} - -:host(.item-label-stacked) ::slotted(ion-select.legacy-select), -:host(.item-label-floating) ::slotted(ion-select.legacy-select) { - --padding-top: 8px; - --padding-bottom: 8px; - --padding-start: 0; - - align-self: stretch; - - width: 100%; - - max-width: 100%; -} - - // Item Datetime // -------------------------------------------------- @@ -580,8 +557,7 @@ button, a { :host(.item-multiple-inputs) ::slotted(ion-checkbox), :host(.item-multiple-inputs) ::slotted(ion-datetime), -:host(.item-multiple-inputs) ::slotted(ion-radio), -:host(.item-multiple-inputs) ::slotted(ion-select.legacy-select) { +:host(.item-multiple-inputs) ::slotted(ion-radio) { position: relative; } diff --git a/core/src/components/select/select.ios.scss b/core/src/components/select/select.ios.scss index 76c79ce72e0..2e24dc9b83c 100644 --- a/core/src/components/select/select.ios.scss +++ b/core/src/components/select/select.ios.scss @@ -4,14 +4,6 @@ // iOS Select // -------------------------------------------------- -// TODO FW-3194 - Remove this -:host(.legacy-select) { - --padding-top: #{$select-ios-padding-top}; - --padding-end: #{$select-ios-padding-end}; - --padding-bottom: #{$select-ios-padding-bottom}; - --padding-start: #{$select-ios-padding-start}; -} - .select-icon { width: $select-ios-icon-size; height: $select-ios-icon-size; diff --git a/core/src/components/select/select.ios.vars.scss b/core/src/components/select/select.ios.vars.scss index cb50b10d15e..57677a8438b 100644 --- a/core/src/components/select/select.ios.vars.scss +++ b/core/src/components/select/select.ios.vars.scss @@ -4,18 +4,6 @@ // iOS Select // -------------------------------------------------- -/// @prop - Padding top of the select -$select-ios-padding-top: $item-ios-padding-top !default; - -/// @prop - Padding end of the select -$select-ios-padding-end: ($item-ios-padding-end * 0.5) !default; - -/// @prop - Padding bottom of the select -$select-ios-padding-bottom: $item-ios-padding-bottom !default; - -/// @prop - Padding start of the select -$select-ios-padding-start: $item-ios-padding-start !default; - /// @prop - Size of the select icon $select-ios-icon-size: dynamic-font(18px) !default; diff --git a/core/src/components/select/select.md.scss b/core/src/components/select/select.md.scss index 005c54e7f7c..cac2cd3e939 100644 --- a/core/src/components/select/select.md.scss +++ b/core/src/components/select/select.md.scss @@ -11,14 +11,6 @@ --border-color: #{$item-md-border-color}; } -// TODO FW-3194 - Remove this -:host(.legacy-select) { - --padding-top: #{$select-md-padding-top}; - --padding-end: #{$select-md-padding-end}; - --padding-bottom: #{$select-md-padding-bottom}; - --padding-start: #{$select-md-padding-start}; -} - .select-icon { width: $select-md-icon-size; @@ -89,7 +81,7 @@ * when the select is activated. * This should only happen on MD. */ -:host(.select-expanded:not(.legacy-select):not(.has-expanded-icon)) .select-icon { +:host(.select-expanded:not(.has-expanded-icon)) .select-icon { @include transform(rotate(180deg)); } diff --git a/core/src/components/select/select.md.vars.scss b/core/src/components/select/select.md.vars.scss index db460f063fb..a6125e618d4 100644 --- a/core/src/components/select/select.md.vars.scss +++ b/core/src/components/select/select.md.vars.scss @@ -4,18 +4,6 @@ // Material Design Select // -------------------------------------------------- -/// @prop - Padding top of the select -$select-md-padding-top: $item-md-padding-top !default; - -/// @prop - Padding end of the select -$select-md-padding-end: 0 !default; - -/// @prop - Padding bottom of the select -$select-md-padding-bottom: $select-md-padding-top !default; - -/// @prop - Padding start of the select -$select-md-padding-start: $item-md-padding-start !default; - /// @prop - Size of the select icon $select-md-icon-size: dynamic-font(13px) !default; /// @prop - The amount of whitespace to display on either side of the floating label diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss index 965f0a43206..877c2ab92c2 100644 --- a/core/src/components/select/select.scss +++ b/core/src/components/select/select.scss @@ -48,6 +48,9 @@ display: block; position: relative; + width: 100%; + min-height: 44px; + font-family: $font-family-base; white-space: nowrap; @@ -56,12 +59,6 @@ z-index: $z-index-item-input; } -// TODO FW-3194 - Move this to host -:host(:not(.legacy-select)) { - width: 100%; - min-height: 44px; -} - /** * Since the label sits on top of the element, * the component needs to be taller otherwise the @@ -76,36 +73,16 @@ --highlight-color-focused: #{current-color(base)}; } -// TODO FW-3194 - Remove this -:host(.legacy-select) { - @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); - - display: flex; - - align-items: center; - - overflow: hidden; -} - // Select Used in ion-item // -------------------------------------------------- -// TODO FW-3194 - Remove the :not(.legacy-select) piece -// // The flex property is required here in order to allow // the select to shrink inside of an item otherwise it // always wraps to the next line even when it can shrink -:host(.in-item:not(.legacy-select)) { +:host(.in-item) { flex: 1 1 0; } -// TODO FW-3194 - Remove this -:host(.in-item.legacy-select) { - position: static; - - max-width: 45%; -} - :host(.select-disabled) { pointer-events: none; } @@ -114,15 +91,14 @@ border: 2px solid #5e9ed6; } -// TODO FW-3194 - Remove :not(.legacy-select) piece /** * Select can be slotted * in components such as item and * toolbar which is why we do not * limit the below behavior to just ion-item. */ -:host([slot="start"]:not(.legacy-select)), -:host([slot="end"]:not(.legacy-select)) { +:host([slot="start"]), +:host([slot="end"]) { width: auto; } @@ -132,17 +108,6 @@ opacity: var(--placeholder-opacity); } -// TODO FW-3194 - Remove this -:host(.legacy-select) label { - @include input-cover(); - - display: flex; - - align-items: center; - - opacity: 0; -} - button { @include visually-hidden(); } diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 9fe26349bb1..3a7a04f5f26 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -1,10 +1,9 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Component, Element, Event, Host, Method, Prop, State, Watch, h, forceUpdate } from '@stencil/core'; -import type { LegacyFormController, NotchController } from '@utils/forms'; -import { compareOptions, createLegacyFormController, createNotchController, isOptionSelected } from '@utils/forms'; -import { findItemLabel, focusElement, getAriaLabel, renderHiddenInput, inheritAttributes } from '@utils/helpers'; +import type { NotchController } from '@utils/forms'; +import { compareOptions, createNotchController, isOptionSelected } from '@utils/forms'; +import { focusElement, getAriaLabel, renderHiddenInput, inheritAttributes } from '@utils/helpers'; import type { Attributes } from '@utils/helpers'; -import { printIonWarning } from '@utils/logging'; import { actionSheetController, alertController, popoverController } from '@utils/overlays'; import type { OverlaySelect } from '@utils/overlays-interface'; import { isRTL } from '@utils/rtl'; @@ -55,16 +54,12 @@ export class Select implements ComponentInterface { private overlay?: OverlaySelect; private focusEl?: HTMLButtonElement; private mutationO?: MutationObserver; - private legacyFormController!: LegacyFormController; private inheritedAttributes: Attributes = {}; private nativeWrapperEl: HTMLElement | undefined; private notchSpacerEl: HTMLElement | undefined; private notchController?: NotchController; - // This flag ensures we log the deprecation warning at most once. - private hasLoggedDeprecationWarning = false; - @Element() el!: HTMLIonSelectElement; @State() isExpanded = false; @@ -152,17 +147,6 @@ export class Select implements ComponentInterface { */ @Prop() labelPlacement?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed' = 'start'; - /** - * Set the `legacy` property to `true` to forcibly use the legacy form control markup. - * Ionic will only opt components in to the modern form markup when they are - * using either the `aria-label` attribute or the `label` property. As a result, - * the `legacy` property should only be used as an escape hatch when you want to - * avoid this automatic opt-in behavior. - * Note that this property will be removed in an upcoming major release - * of Ionic, and all form components will be opted-in to using the modern form markup. - */ - @Prop() legacy?: boolean; - /** * If `true`, the select can accept multiple values. */ @@ -262,7 +246,6 @@ export class Select implements ComponentInterface { async connectedCallback() { const { el } = this; - this.legacyFormController = createLegacyFormController(el); this.notchController = createNotchController( el, () => this.notchSpacerEl, @@ -515,44 +498,27 @@ export class Select implements ComponentInterface { let event: Event | CustomEvent = ev; let size = 'auto'; - if (this.legacyFormController.hasLegacyControl()) { - const item = this.el.closest('ion-item'); - - // If the select is inside of an item containing a floating - // or stacked label then the popover should take up the - // full width of the item when it presents - if (item && (item.classList.contains('item-label-floating') || item.classList.contains('item-label-stacked'))) { - event = { - ...ev, - detail: { - ionShadowTarget: item, - }, - }; - size = 'cover'; - } - } else { - const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked'; + const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked'; + /** + * The popover should take up the full width + * when using a fill in MD mode or if the + * label is floating/stacked. + */ + if (hasFloatingOrStackedLabel || (mode === 'md' && fill !== undefined)) { + size = 'cover'; + /** - * The popover should take up the full width - * when using a fill in MD mode or if the - * label is floating/stacked. + * Otherwise the popover + * should be positioned relative + * to the native element. */ - if (hasFloatingOrStackedLabel || (mode === 'md' && fill !== undefined)) { - size = 'cover'; - - /** - * Otherwise the popover - * should be positioned relative - * to the native element. - */ - } else { - event = { - ...ev, - detail: { - ionShadowTarget: this.nativeWrapperEl, - }, - }; - } + } else { + event = { + ...ev, + detail: { + ionShadowTarget: this.nativeWrapperEl, + }, + }; } const popoverOpts: PopoverOptions = { @@ -618,23 +584,6 @@ export class Select implements ComponentInterface { } private async openAlert() { - /** - * TODO FW-3194 - * Remove legacyFormController logic. - * Remove label and labelText vars - * Pass `this.labelText` instead of `labelText` - * when setting the header. - */ - let label: HTMLElement | null; - let labelText: string | null | undefined; - - if (this.legacyFormController.hasLegacyControl()) { - label = this.getLabel(); - labelText = label ? label.textContent : null; - } else { - labelText = this.labelText; - } - const interfaceOptions = this.interfaceOptions; const inputType = this.multiple ? 'checkbox' : 'radio'; const mode = getIonMode(this); @@ -643,7 +592,7 @@ export class Select implements ComponentInterface { mode, ...interfaceOptions, - header: interfaceOptions.header ? interfaceOptions.header : labelText, + header: interfaceOptions.header ? interfaceOptions.header : this.labelText, inputs: this.createAlertInputs(this.childOpts, inputType, this.value), buttons: [ { @@ -692,11 +641,6 @@ export class Select implements ComponentInterface { return this.overlay.dismiss(); } - // TODO FW-3194 Remove this - private getLabel() { - return findItemLabel(this.el); - } - private hasValue(): boolean { return this.getText() !== ''; } @@ -745,21 +689,11 @@ export class Select implements ComponentInterface { private emitStyle() { const { disabled } = this; + const style: StyleEventDetail = { 'interactive-disabled': disabled, }; - if (this.legacyFormController.hasLegacyControl()) { - style['interactive'] = true; - style['select'] = true; - style['select-disabled'] = disabled; - style['has-placeholder'] = this.placeholder !== undefined; - style['has-value'] = this.hasValue(); - style['has-focus'] = this.isExpanded; - // TODO(FW-3194): remove this - style['legacy'] = !!this.legacy; - } - this.ionStyle.emit(style); } @@ -889,157 +823,6 @@ export class Select implements ComponentInterface { return this.renderLabel(); } - private renderSelect() { - const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = - this; - const mode = getIonMode(this); - const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked'; - const justifyEnabled = !hasFloatingOrStackedLabel; - const rtl = isRTL(el) ? 'rtl' : 'ltr'; - const inItem = hostContext('ion-item', this.el); - const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem; - - const hasValue = this.hasValue(); - const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null; - - renderHiddenInput(true, el, name, parseValue(value), disabled); - - /** - * If the label is stacked, it should always sit above the select. - * For floating labels, the label should move above the select if - * the select has a value, is open, or has anything in either - * the start or end slot. - * - * If there is content in the start slot, the label would overlap - * it if not forced to float. This is also applied to the end slot - * because with the default or solid fills, the select is not - * vertically centered in the container, but the label is. This - * causes the slots and label to appear vertically offset from each - * other when the label isn't floating above the input. This doesn't - * apply to the outline fill, but this was not accounted for to keep - * things consistent. - * - * TODO(FW-5592): Remove hasStartEndSlots condition - */ - const labelShouldFloat = - labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots)); - - return ( - - - - ); - } - - // TODO FW-3194 - Remove this - private renderLegacySelect() { - if (!this.hasLoggedDeprecationWarning) { - printIonWarning( - `ion-select now requires providing a label with either the "label" property or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the "label" property or the "aria-label" attribute. - -Example: ... -Example with aria-label: ... - -Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, - this.el - ); - - if (this.legacy) { - printIonWarning( - `ion-select is being used with the "legacy" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup. - Developers can dismiss this warning by removing their usage of the "legacy" property and using the new select syntax.`, - this.el - ); - } - this.hasLoggedDeprecationWarning = true; - } - - const { disabled, el, inputId, isExpanded, expandedIcon, name, placeholder, value } = this; - const mode = getIonMode(this); - const { labelText, labelId } = getAriaLabel(el, inputId); - - renderHiddenInput(true, el, name, parseValue(value), disabled); - - const displayValue = this.getText(); - - let selectText = displayValue; - if (selectText === '' && placeholder !== undefined) { - selectText = placeholder; - } - - // If there is a label then we need to concatenate it with the - // current value (or placeholder) and a comma so it separates - // nicely when the screen reader announces it, otherwise just - // announce the value / placeholder - const displayLabel = - labelText !== undefined ? (selectText !== '' ? `${selectText}, ${labelText}` : labelText) : selectText; - - return ( - - {this.renderSelectText()} - {this.renderSelectIcon()} - - {this.renderListbox()} - - ); - } - /** * Renders either the placeholder * or the selected values based on @@ -1138,9 +921,86 @@ Developers can use the "legacy" property to continue using the legacy form marku } render() { - const { legacyFormController } = this; + const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = + this; + const mode = getIonMode(this); + const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked'; + const justifyEnabled = !hasFloatingOrStackedLabel; + const rtl = isRTL(el) ? 'rtl' : 'ltr'; + const inItem = hostContext('ion-item', this.el); + const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem; + + const hasValue = this.hasValue(); + const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null; + + renderHiddenInput(true, el, name, parseValue(value), disabled); - return legacyFormController.hasLegacyControl() ? this.renderLegacySelect() : this.renderSelect(); + /** + * If the label is stacked, it should always sit above the select. + * For floating labels, the label should move above the select if + * the select has a value, is open, or has anything in either + * the start or end slot. + * + * If there is content in the start slot, the label would overlap + * it if not forced to float. This is also applied to the end slot + * because with the default or solid fills, the select is not + * vertically centered in the container, but the label is. This + * causes the slots and label to appear vertically offset from each + * other when the label isn't floating above the input. This doesn't + * apply to the outline fill, but this was not accounted for to keep + * things consistent. + * + * TODO(FW-5592): Remove hasStartEndSlots condition + */ + const labelShouldFloat = + labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots)); + + return ( + + + + ); } } diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index 169f7523c31..df360fc2cd1 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -1975,7 +1975,7 @@ export declare interface IonSegmentButton extends Components.IonSegmentButton {} @ProxyCmp({ - inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'expandedIcon', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'legacy', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'toggleIcon', 'value'], + inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'expandedIcon', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'toggleIcon', 'value'], methods: ['open'] }) @Component({ @@ -1983,7 +1983,7 @@ export declare interface IonSegmentButton extends Components.IonSegmentButton {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'expandedIcon', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'legacy', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'toggleIcon', 'value'], + inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'expandedIcon', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'toggleIcon', 'value'], }) export class IonSelect { protected el: HTMLElement; diff --git a/packages/angular/standalone/src/directives/select.ts b/packages/angular/standalone/src/directives/select.ts index fa194b6ad50..973990f5c82 100644 --- a/packages/angular/standalone/src/directives/select.ts +++ b/packages/angular/standalone/src/directives/select.ts @@ -28,7 +28,6 @@ const SELECT_INPUTS = [ 'justify', 'label', 'labelPlacement', - 'legacy', 'mode', 'multiple', 'name', diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 8be5e900f5d..ba6d8f163ba 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -758,7 +758,6 @@ export const IonSelect = /*@__PURE__*/ defineContainer