{selectText}
@@ -1113,6 +1205,7 @@ export class Select implements ComponentInterface {
private get ariaLabel() {
const { placeholder, inheritedAttributes } = this;
+ // Get the plain text from the selected text
const displayValue = this.getText();
// The aria label should be preferred over visible text if both are specified
@@ -1332,30 +1425,250 @@ const parseValue = (value: any) => {
const generateText = (
opts: HTMLIonSelectOptionElement[],
value: any | any[],
- compareWith?: string | SelectCompareFn | null
+ compareWith?: string | SelectCompareFn | null,
+ useHTML = false
) => {
if (value === undefined) {
return '';
}
if (Array.isArray(value)) {
return value
- .map((v) => textForValue(opts, v, compareWith))
+ .map((v) => textForValue(opts, v, compareWith, useHTML))
.filter((opt) => opt !== null)
.join(', ');
} else {
- return textForValue(opts, value, compareWith) || '';
+ return textForValue(opts, value, compareWith, useHTML) || '';
}
};
+/**
+ * Returns the display text for a given value from the list of options.
+ * When `useHTML` is true, returns sanitized HTML for the select text.
+ * When `useHTML` is false, returns plain text for aria-label and other
+ * text-only contexts.
+ *
+ * @param opts - The list of ion-select-option elements.
+ * @param value - The value to find the matching option for.
+ * @param compareWith - Custom comparison function or property name.
+ * @param useHTML - If true, returns HTML string. If false, returns plain text.
+ */
const textForValue = (
opts: HTMLIonSelectOptionElement[],
value: any,
- compareWith?: string | SelectCompareFn | null
+ compareWith?: string | SelectCompareFn | null,
+ useHTML = false
): string | null => {
const selectOpt = opts.find((opt) => {
return compareOptions(value, getOptionValue(opt), compareWith);
});
- return selectOpt ? selectOpt.textContent : null;
+ const customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
+
+ if (!selectOpt) {
+ return null;
+ }
+
+ // Return sanitized HTML for the select text
+ if (customHTMLEnabled && useHTML) {
+ return getOptionContent(selectOpt, undefined, true) as string | null;
+ }
+
+ /**
+ * When custom HTML is enabled, extract only the default slot content.
+ * This ensures aria-label and other text-only contexts read only
+ * the relevant option text.
+ */
+ if (customHTMLEnabled) {
+ const content = getOptionContent(selectOpt);
+
+ if (typeof content === 'string') {
+ return content;
+ }
+
+ /**
+ * Elements were found in the default slot, extract and concatenate
+ * their text content while trimming whitespace.
+ */
+ if (content) {
+ const texts = Array.from(content.childNodes)
+ .map((n) => n.textContent?.trim())
+ .filter((t) => t);
+ return texts.join(' ') || null;
+ }
+
+ // Empty option
+ return null;
+ }
+
+ return getDefaultSlotPlainText(selectOpt);
+};
+
+/**
+ * Trims whitespace from all text nodes within a DOM tree.
+ * This prevents invisible layout shifts and unwanted gaps between
+ * elements when HTML content is injected via innerHTML or cloneNode,
+ * as browsers preserve whitespace (tabs, newlines, spaces) from
+ * the original source markup.
+ *
+ * @param node The root node to start trimming text nodes from.
+ */
+const trimTextNodes = (node: Node): void => {
+ node.childNodes.forEach((child) => {
+ if (child.nodeType === Node.TEXT_NODE) {
+ child.textContent = child.textContent?.trim() || '';
+ } else if (child.nodeType === Node.ELEMENT_NODE) {
+ trimTextNodes(child);
+ }
+ });
+};
+
+/**
+ * Extracts and clones content from an `ion-select-option` element
+ * for rendering within overlay interfaces or the select text when `customHTMLEnabled` is `true`.
+ *
+ * @param option - The `ion-select-option` element to extract content from.
+ * @param slotName - Optional slot name to extract. If omitted, extracts the default slot content.
+ * @param useHTML - If `true`, the returned string will include any custom HTML content. If `false`, the returned string will be plain text without any HTML.
+ * @returns When `useHTML` is `true`, a sanitized HTML string. When `false`, a
+ * div element containing cloned child nodes. Returns `null` if no matching
+ * content is found.
+ */
+const getOptionContent = (
+ option: HTMLIonSelectOptionElement,
+ slotName?: string,
+ useHTML: boolean = false
+): HTMLElement | string | null => {
+ let nodes: Node[];
+
+ if (slotName) {
+ // Named slot: get elements with matching slot attribute
+ nodes = Array.from(option.children).filter((el) => el.getAttribute('slot') === slotName);
+ } else {
+ // Default slot: get nodes without a slot attribute
+ const defaultSlot = getOptionDefaultSlot(option) || [];
+ nodes = defaultSlot.filter((node) => {
+ /**
+ * Exclude whitespace-only text nodes (newline noise between
+ * markup elements). Element nodes are always kept, even when
+ * their textContent is empty (e.g.
,
-
+
Apples
Oranges
Pears
@@ -37,7 +37,7 @@
-
+
Apples
Oranges
Pears
@@ -45,7 +45,7 @@
-
+
Apples
Oranges
Pears
@@ -53,7 +53,7 @@
-
+
Apples
Oranges
Pears
@@ -67,7 +67,12 @@
-
+
Apple
Apricot
Avocado
@@ -105,12 +110,7 @@
-
+
Apple
Apricot
Avocado
@@ -148,7 +148,7 @@
-
+
Apple
Apricot
Avocado
@@ -186,7 +186,7 @@
-
+
Apple
Apricot
Avocado
@@ -240,7 +240,7 @@
-
+
Bird
Cat
Dog
@@ -249,7 +249,7 @@
-
+
Bird
Cat
Dog
@@ -263,14 +263,12 @@
Custom Interface Options
-
+
Pepperoni
Bacon
@@ -280,8 +278,15 @@
-
-
+
+
Pepperoni
Bacon
Extra Cheese
@@ -290,13 +295,8 @@
-
-
+
+
Pepperoni
Bacon
Extra Cheese
@@ -305,8 +305,8 @@
-
-
+
+
Pepperoni
Bacon
Extra Cheese
@@ -318,30 +318,22 @@
diff --git a/core/src/components/select/test/disabled/select.e2e.ts b/core/src/components/select/test/disabled/select.e2e.ts
index 621ed048d3e..e567e2ff82e 100644
--- a/core/src/components/select/test/disabled/select.e2e.ts
+++ b/core/src/components/select/test/disabled/select.e2e.ts
@@ -1,8 +1,83 @@
import { expect } from '@playwright/test';
+import type { E2ELocator } from '@utils/test/playwright';
import { configs, test } from '@utils/test/playwright';
+const DISABLED_OPTION_INTERFACES = [
+ {
+ name: 'action-sheet',
+ overlayTag: 'ion-action-sheet',
+ didPresent: 'ionActionSheetDidPresent',
+ didDismiss: 'ionActionSheetDidDismiss',
+ // The option itself is the interactive button.
+ controlSuffix: '',
+ },
+ {
+ name: 'alert',
+ overlayTag: 'ion-alert',
+ didPresent: 'ionAlertDidPresent',
+ didDismiss: 'ionAlertDidDismiss',
+ // The option itself is the interactive radio button.
+ controlSuffix: '',
+ },
+ {
+ name: 'popover',
+ overlayTag: 'ion-popover',
+ didPresent: 'ionPopoverDidPresent',
+ didDismiss: 'ionPopoverDidDismiss',
+ // The interactive control is the nested ion-radio.
+ controlSuffix: ' ion-radio',
+ },
+ {
+ name: 'modal',
+ overlayTag: 'ion-modal',
+ didPresent: 'ionModalDidPresent',
+ didDismiss: 'ionModalDidDismiss',
+ // The interactive control is the nested ion-radio.
+ controlSuffix: ' ion-radio',
+ },
+] as const;
+
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
test.describe(title('select: disabled options'), () => {
+ for (const { name, overlayTag, didPresent, didDismiss, controlSuffix } of DISABLED_OPTION_INTERFACES) {
+ test(`${name}: clicking a disabled option should not change the value or dismiss the overlay`, async ({
+ page,
+ }) => {
+ await page.setContent(
+ `
+
+ Oranges
+
+ `,
+ config
+ );
+
+ const select = page.locator('ion-select') as E2ELocator;
+
+ const ionChange = await select.spyOnEvent('ionChange');
+ const ionDidPresent = await page.spyOnEvent(didPresent);
+ const ionDidDismiss = await page.spyOnEvent(didDismiss);
+
+ await select.click();
+
+ await ionDidPresent.next();
+
+ const overlay = page.locator(overlayTag);
+ const disabledOption = overlay.locator(`.select-interface-option${controlSuffix}`);
+
+ await disabledOption.click({ force: true });
+
+ await page.waitForChanges();
+
+ const value = await select.evaluate((el: HTMLIonSelectElement) => el.value);
+ expect(value).toBeUndefined();
+
+ expect(ionChange).toHaveReceivedEventTimes(0);
+ expect(ionDidDismiss).toHaveReceivedEventTimes(0);
+ await expect(overlay).toBeVisible();
+ });
+ }
+
test('should not focus a disabled option when no value is set', async ({ page, skip }) => {
// TODO (ROU-5437)
skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
diff --git a/core/src/components/select/test/rich-content-option/index.html b/core/src/components/select/test/rich-content-option/index.html
new file mode 100644
index 00000000000..78d3f3987c9
--- /dev/null
+++ b/core/src/components/select/test/rich-content-option/index.html
@@ -0,0 +1,696 @@
+
+
+
+ Select - Rich Content Option
+
+
+
+ Select - Rich Content Option
+
+
+
+
+
+
+ Single Value
+
+
+
+
+
+ NEW
+
+
+ Full Content
+
+
+
+
+ Slots
+ NEW
+
+
+
+
+ Start Slot
+
+
+ End Slot
+ NEW
+
+ Description
+
+ Inner Content
+ NEW
+
+
+
+
+ This is a span element
+ NEW
+
+
+
+
+ NEW
+
+
+
+
+ This is a very long option label that demonstrates how the start and end slots stay at their intrinsic
+ widths while the content area absorbs the remaining row width
+ NEW
+
+
+
+
+ SVGs
+
+
+
+
+
+
+
+
+
+
+
+
+ Thumbnails
+
+
+
+
+
+
+
+
+
+ NEW
+
+
+ Full Content
+
+
+
+
+ Slots
+ NEW
+
+
+
+
+ Start Slot
+
+
+ End Slot
+ NEW
+
+ Description
+
+ Inner Content
+ NEW
+
+
+
+
+ This is a span element
+ NEW
+
+
+
+
+ NEW
+
+
+
+
+ This is a very long option label that demonstrates how the start and end slots stay at their intrinsic
+ widths while the content area absorbs the remaining row width
+ NEW
+
+
+
+
+ SVGs
+
+
+
+
+
+
+
+
+
+
+
+
+ Thumbnails
+
+
+
+
+
+
+
+
+
+ NEW
+
+
+ Full Content
+
+
+
+
+ Slots
+ NEW
+
+
+
+
+ Start Slot
+
+
+ End Slot
+ NEW
+
+ Description
+
+ Inner Content
+ NEW
+
+
+
+
+ This is a span element
+ NEW
+
+
+
+
+ NEW
+
+
+
+
+ This is a very long option label that demonstrates how the start and end slots stay at their intrinsic
+ widths while the content area absorbs the remaining row width
+ NEW
+
+
+
+
+ SVGs
+
+
+
+
+
+
+
+
+
+
+
+
+ Thumbnails
+
+
+
+
+
+
+
+
+
+ NEW
+
+
+ Full Content
+
+
+
+
+ Slots
+ NEW
+
+
+
+
+ Start Slot
+
+
+ End Slot
+ NEW
+
+ Description
+
+ Inner Content
+ NEW
+
+
+
+
+ This is a span element
+ NEW
+
+
+
+
+ NEW
+
+
+
+
+ This is a very long option label that demonstrates how the start and end slots stay at their intrinsic
+ widths while the content area absorbs the remaining row width
+ NEW
+
+
+
+
+ SVGs
+
+
+
+
+
+
+
+
+
+
+
+
+ Thumbnails
+
+
+
+
+
+
+
+
+
+ Multiple Value
+
+
+
+
+
+ NEW
+
+
+ Full Content
+
+
+
+
+ Slots
+ NEW
+
+
+
+
+ Start Slot
+
+
+ End Slot
+ NEW
+
+ Description
+
+ Inner Content
+ NEW
+
+
+
+
+ This is a span element
+ NEW
+
+
+
+
+ NEW
+
+
+
+
+ This is a very long option label that demonstrates how the start and end slots stay at their intrinsic
+ widths while the content area absorbs the remaining row width
+ NEW
+
+
+
+
+ SVGs
+
+
+
+
+
+
+
+
+
+
+
+
+ Thumbnails
+
+
+
+
+
+
+
+
+
+ NEW
+
+
+ Full Content
+
+
+
+
+ Slots
+ NEW
+
+
+
+
+ Start Slot
+
+
+ End Slot
+ NEW
+
+ Description
+
+ Inner Content
+ NEW
+
+
+
+
+ This is a span element
+ NEW
+
+
+
+
+ NEW
+
+
+
+
+ This is a very long option label that demonstrates how the start and end slots stay at their intrinsic
+ widths while the content area absorbs the remaining row width
+ NEW
+
+
+
+
+ SVGs
+
+
+
+
+ SVG
+
+
+
+
+
+
+
+
+ Thumbnails
+
+
+
+
+
+
+
+
+
+ NEW
+
+
+ Full Content
+
+
+
+
+ Slots
+ NEW
+
+
+
+
+ Start Slot
+
+
+ End Slot
+ NEW
+
+ Description
+
+ Inner Content
+ NEW
+
+
+
+
+ This is a span element
+ NEW
+
+
+
+
+ NEW
+
+
+
+
+ This is a very long option label that demonstrates how the start and end slots stay at their intrinsic
+ widths while the content area absorbs the remaining row width
+ NEW
+
+
+
+
+ SVGs
+
+
+
+
+
+
+
+
+
+
+
+
+ Thumbnails
+
+
+
+
+
+
+
+
+
+
diff --git a/core/src/components/select/test/rich-content-option/select.e2e.ts b/core/src/components/select/test/rich-content-option/select.e2e.ts
new file mode 100644
index 00000000000..3acf2d806ac
--- /dev/null
+++ b/core/src/components/select/test/rich-content-option/select.e2e.ts
@@ -0,0 +1,484 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'], modes: ['md', 'ios'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('select: rich content options'), () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto('/src/components/select/test/rich-content-option', config);
+ });
+
+ test('should not have visual regressions for the action sheet interface', async ({ page }) => {
+ const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+
+ await page.locator('#action-sheet-select').click();
+ await ionActionSheetDidPresent.next();
+
+ // Move mouse to away from the alert so hover styles don't interfere with screenshots
+ await page.mouse.move(0, 0);
+
+ const firstOption = page.locator('ion-action-sheet .select-interface-option').first();
+
+ await expect(firstOption).toHaveScreenshot(screenshot(`select-rich-content-action-sheet`));
+ });
+
+ test('should not have visual regressions for the alert interface', async ({ page }) => {
+ const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+
+ await page.locator('#alert-select').click();
+ await ionAlertDidPresent.next();
+
+ // Move mouse to away from the alert so hover styles don't interfere with screenshots
+ await page.mouse.move(0, 0);
+
+ const firstOption = page.locator('ion-alert .select-interface-option').first();
+
+ await expect(firstOption).toHaveScreenshot(screenshot(`select-rich-content-alert`));
+ });
+
+ test('should not have visual regressions for the modal interface', async ({ page }) => {
+ const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+ await page.locator('#modal-select').click();
+ await ionModalDidPresent.next();
+
+ // Move mouse to away from the alert so hover styles don't interfere with screenshots
+ await page.mouse.move(0, 0);
+
+ const firstOption = page.locator('ion-modal .select-interface-option').first();
+
+ await expect(firstOption).toHaveScreenshot(screenshot(`select-rich-content-modal`));
+ });
+
+ test('should not have visual regressions for the popover interface', async ({ page }) => {
+ const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+
+ await page.locator('#popover-select').click();
+ await ionPopoverDidPresent.next();
+
+ // Move mouse to away from the alert so hover styles don't interfere with screenshots
+ await page.mouse.move(0, 0);
+
+ const firstOption = page.locator('ion-popover .select-interface-option').first();
+
+ await expect(firstOption).toHaveScreenshot(screenshot(`select-rich-content-popover`));
+ });
+ });
+});
+
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+ test.describe(title('select: rich content option functionality'), () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto('/src/components/select/test/rich-content-option', config);
+ });
+
+ test('it should render for action sheet interface', async ({ page }) => {
+ const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+ const ionActionSheetDidDismiss = await page.spyOnEvent('ionActionSheetDidDismiss');
+
+ const select = page.locator('#action-sheet-select');
+
+ await select.click();
+
+ await ionActionSheetDidPresent.next();
+
+ const actionSheet = page.locator('ion-action-sheet');
+ const firstOption = actionSheet.locator('.select-interface-option').first();
+ const avatar = firstOption.locator('ion-avatar');
+ const firstOptionText = 'Full Content';
+
+ await expect(firstOption).toContainText(firstOptionText);
+ await expect(avatar).toBeVisible();
+
+ // Click on the first option
+ await firstOption.click();
+
+ await ionActionSheetDidDismiss.next();
+
+ // Verify that the select text includes the option text
+ const selectText = await select.locator('.select-text').textContent();
+
+ expect(selectText).toContain(firstOptionText);
+
+ // Verify that the select text does not include the avatar and badge
+ const selectTextAvatar = select.locator('.select-text ion-avatar');
+ const selectTextBadge = select.locator('.select-text ion-badge');
+
+ await expect(selectTextAvatar).toHaveCount(0);
+ await expect(selectTextBadge).toHaveCount(0);
+ });
+
+ test('it should render for alert interface and single selection', async ({ page }) => {
+ const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+ const ionAlertDidDismiss = await page.spyOnEvent('ionAlertDidDismiss');
+
+ const select = page.locator('#alert-select');
+
+ await select.click();
+
+ await ionAlertDidPresent.next();
+
+ const alert = page.locator('ion-alert');
+ const firstOption = alert.locator('.select-interface-option').first();
+ const avatar = firstOption.locator('ion-avatar');
+ const firstOptionText = 'Full Content';
+
+ await expect(firstOption).toContainText(firstOptionText);
+ await expect(avatar).toBeVisible();
+
+ // Click on the first option
+ await firstOption.click();
+
+ // Confirm the selection
+ const confirmButton = alert.locator('.alert-button:not(.alert-button-role-cancel)');
+ await confirmButton.click();
+
+ await ionAlertDidDismiss.next();
+
+ // Verify that the select text includes the option text
+ const selectText = await select.locator('.select-text').textContent();
+
+ expect(selectText).toContain(firstOptionText);
+
+ // Verify that the select text does not include the avatar and badge
+ const selectTextAvatar = select.locator('.select-text ion-avatar');
+ const selectTextBadge = select.locator('.select-text ion-badge');
+
+ await expect(selectTextAvatar).toHaveCount(0);
+ await expect(selectTextBadge).toHaveCount(0);
+ });
+
+ test('it should render for alert interface and multiple selection', async ({ page }) => {
+ const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+ const ionAlertDidDismiss = await page.spyOnEvent('ionAlertDidDismiss');
+
+ const select = page.locator('#alert-select-multiple');
+
+ await select.click();
+
+ await ionAlertDidPresent.next();
+
+ const alert = page.locator('ion-alert');
+ const firstOption = alert.locator('.select-interface-option').first();
+ const avatar = firstOption.locator('ion-avatar');
+ const firstOptionText = 'Full Content';
+
+ await expect(firstOption).toContainText(firstOptionText);
+ await expect(avatar).toBeVisible();
+
+ // Click on the first option
+ await firstOption.click();
+
+ // Confirm the selection
+ const confirmButton = alert.locator('.alert-button:not(.alert-button-role-cancel)');
+ await confirmButton.click();
+
+ await ionAlertDidDismiss.next();
+
+ // Verify that the select text includes the option text
+ const selectText = await select.locator('.select-text').textContent();
+
+ expect(selectText).toContain(firstOptionText);
+
+ // Verify that the select text does not include the avatar and badge
+ const selectTextAvatar = select.locator('.select-text ion-avatar');
+ const selectTextBadge = select.locator('.select-text ion-badge');
+
+ await expect(selectTextAvatar).toHaveCount(0);
+ await expect(selectTextBadge).toHaveCount(0);
+ });
+
+ test('it should render for modal interface and single selection', async ({ page }) => {
+ const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+ const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+ const select = page.locator('#modal-select');
+
+ await select.click();
+
+ await ionModalDidPresent.next();
+
+ const modal = page.locator('ion-modal');
+ const firstOption = modal.locator('.select-interface-option').first();
+ const avatar = firstOption.locator('ion-avatar');
+ const firstOptionText = 'Full Content';
+
+ await expect(firstOption).toContainText(firstOptionText);
+ await expect(avatar).toBeVisible();
+
+ // Click on the first option
+ await firstOption.click();
+
+ await ionModalDidDismiss.next();
+
+ // Verify that the select text includes the option text
+ const selectText = await select.locator('.select-text').textContent();
+
+ expect(selectText).toContain(firstOptionText);
+
+ // Verify that the select text does not include the avatar and badge
+ const selectTextAvatar = select.locator('.select-text ion-avatar');
+ const selectTextBadge = select.locator('.select-text ion-badge');
+
+ await expect(selectTextAvatar).toHaveCount(0);
+ await expect(selectTextBadge).toHaveCount(0);
+ });
+
+ test('it should render for modal interface and multiple selection', async ({ page }) => {
+ const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+ const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+ const select = page.locator('#modal-select-multiple');
+
+ await select.click();
+
+ await ionModalDidPresent.next();
+
+ const modal = page.locator('ion-modal');
+ const firstOption = modal.locator('.select-interface-option').first();
+ const avatar = firstOption.locator('ion-avatar');
+ const firstOptionText = 'Full Content';
+
+ await expect(firstOption).toContainText(firstOptionText);
+ await expect(avatar).toBeVisible();
+
+ // Click on the first option
+ await firstOption.click();
+
+ // Confirm the selection
+ const cancelButton = modal.getByRole('button', { name: 'Cancel' });
+
+ await cancelButton.click();
+ await ionModalDidDismiss.next();
+
+ // Verify that the select text includes the option text
+ const selectText = await select.locator('.select-text').textContent();
+
+ expect(selectText).toContain(firstOptionText);
+
+ // Verify that the select text does not include the avatar and badge
+ const selectTextAvatar = select.locator('.select-text ion-avatar');
+ const selectTextBadge = select.locator('.select-text ion-badge');
+
+ await expect(selectTextAvatar).toHaveCount(0);
+ await expect(selectTextBadge).toHaveCount(0);
+ });
+
+ test('it should render for popover interface and single selection', async ({ page }) => {
+ const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+ const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
+
+ const select = page.locator('#popover-select');
+
+ await select.click();
+
+ await ionPopoverDidPresent.next();
+
+ const popover = page.locator('ion-popover');
+ const firstOption = popover.locator('.select-interface-option').first();
+ const avatar = firstOption.locator('ion-avatar');
+ const firstOptionText = 'Full Content';
+
+ await expect(firstOption).toContainText(firstOptionText);
+ await expect(avatar).toBeVisible();
+
+ // Click on the first option
+ await firstOption.click();
+
+ await ionPopoverDidDismiss.next();
+
+ // Verify that the select text includes the option text
+ const selectText = await select.locator('.select-text').textContent();
+
+ expect(selectText).toContain(firstOptionText);
+
+ // Verify that the select text does not include the avatar and badge
+ const selectTextAvatar = select.locator('.select-text ion-avatar');
+ const selectTextBadge = select.locator('.select-text ion-badge');
+
+ await expect(selectTextAvatar).toHaveCount(0);
+ await expect(selectTextBadge).toHaveCount(0);
+ });
+
+ test('it should render for popover interface and multiple selection', async ({ page }) => {
+ const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+ const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
+
+ const select = page.locator('#popover-select-multiple');
+
+ await select.click();
+
+ await ionPopoverDidPresent.next();
+
+ const popover = page.locator('ion-popover');
+ const firstOption = popover.locator('.select-interface-option').first();
+ const avatar = firstOption.locator('ion-avatar');
+ const firstOptionText = 'Full Content';
+
+ await expect(firstOption).toContainText(firstOptionText);
+ await expect(avatar).toBeVisible();
+
+ // Click on the first option
+ await firstOption.click();
+
+ // Confirm the selection
+ const backdrop = page.locator('ion-backdrop');
+ await backdrop.click({ position: { x: 10, y: 10 } });
+
+ await ionPopoverDidDismiss.next();
+
+ // Verify that the select text includes the option text
+ const selectText = await select.locator('.select-text').textContent();
+
+ expect(selectText).toContain(firstOptionText);
+
+ // Verify that the select text does not include the avatar and badge
+ const selectTextAvatar = select.locator('.select-text ion-avatar');
+ const selectTextBadge = select.locator('.select-text ion-badge');
+
+ await expect(selectTextAvatar).toHaveCount(0);
+ await expect(selectTextBadge).toHaveCount(0);
+ });
+
+ test('it should render the aria label as plain text', async ({ page }) => {
+ const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+ const ionAlertDidDismiss = await page.spyOnEvent('ionAlertDidDismiss');
+
+ const select = page.locator('#alert-select');
+
+ await select.click();
+
+ await ionAlertDidPresent.next();
+
+ // The "no-text" option only has a for its label content,
+ // so its aria label should be the span's plain text.
+ const alert = page.locator('ion-alert');
+ const spanOption = alert.locator('.alert-radio-button', { hasText: 'This is a span element' });
+
+ await spanOption.click();
+
+ const confirmButton = alert.locator('.alert-button:not(.alert-button-role-cancel)');
+ await confirmButton.click();
+
+ await ionAlertDidDismiss.next();
+
+ const nativeButton = select.locator('button');
+ const ariaLabel = await nativeButton.getAttribute('aria-label');
+
+ expect(ariaLabel).toContain('This is a span element');
+ });
+ });
+});
+
+/**
+ * This behavior does not vary across modes
+ */
+configs({ modes: ['md'] }).forEach(({ title, config }) => {
+ test.describe(title('select: rich content options'), () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto('/src/components/select/test/rich-content-option', config);
+ });
+
+ test('it should render slots in the correct places', async ({ page }) => {
+ const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+
+ const select = page.locator('#alert-select');
+
+ await select.click();
+
+ await ionAlertDidPresent.next();
+
+ const alert = page.locator('ion-alert');
+ const firstOption = alert.locator('.alert-radio-button').first();
+ const startContainer = firstOption.locator('.select-option-start');
+ const endContainer = firstOption.locator('.select-option-end');
+
+ const avatar = startContainer.locator('ion-avatar');
+ const badge = endContainer.locator('ion-badge');
+
+ await expect(avatar).toBeVisible();
+ await expect(badge).toBeVisible();
+
+ const isRTL = await page.evaluate(() => document.dir === 'rtl');
+ const optionBox = await firstOption.boundingBox();
+ const startBox = await startContainer.boundingBox();
+ const endBox = await endContainer.boundingBox();
+ const optionMidpointX = optionBox!.x + optionBox!.width / 2;
+
+ if (isRTL) {
+ // Verify the start container is rendered on the right,
+ // and the end container is rendered on the left
+ expect(startBox!.x).toBeGreaterThan(optionMidpointX);
+ expect(endBox!.x).toBeLessThan(optionMidpointX);
+ } else {
+ // Verify the start container is rendered on the left,
+ // and the end container is rendered on the right
+ expect(startBox!.x).toBeLessThan(optionMidpointX);
+ expect(endBox!.x).toBeGreaterThan(optionMidpointX);
+ }
+ });
+ });
+});
+
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+ test.describe(title('select: rich content options'), () => {
+ test('it should only render text nodes when `innerHTMLTemplatesEnabled` is disabled', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ NEW
+
+
+ Full Content
+ This is a span element
+
+
+ `,
+ config
+ );
+
+ const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+ const ionAlertDidDismiss = await page.spyOnEvent('ionAlertDidDismiss');
+
+ const select = page.locator('#alert-select');
+
+ await select.click();
+
+ await ionAlertDidPresent.next();
+
+ const alert = page.locator('ion-alert');
+ const firstOption = alert.locator('.alert-radio-button').first();
+ const startContainer = firstOption.locator('.select-option-start');
+ const endContainer = firstOption.locator('.select-option-end');
+ const span = firstOption.locator('.span-style');
+
+ await expect(startContainer).toHaveCount(0);
+ await expect(endContainer).toHaveCount(0);
+ await expect(span).toHaveCount(0);
+
+ // Click on the first option
+ await firstOption.click();
+
+ // Confirm the selection
+ const confirmButton = alert.locator('.alert-button:not(.alert-button-role-cancel)');
+ await confirmButton.click();
+
+ await ionAlertDidDismiss.next();
+
+ const selectText = select.locator('.select-text');
+ const selectTextSpan = selectText.locator('.span-style');
+
+ await expect(selectTextSpan).toHaveCount(0);
+ });
+ });
+});
diff --git a/core/src/components/select/test/select.spec.tsx b/core/src/components/select/test/select.spec.tsx
index f00c4c66884..ad7c0d3d050 100644
--- a/core/src/components/select/test/select.spec.tsx
+++ b/core/src/components/select/test/select.spec.tsx
@@ -1,6 +1,8 @@
import { h } from '@stencil/core';
import { newSpecPage } from '@stencil/core/testing';
+import { config } from '../../../global/config';
+import { SelectOption } from '../../select-option/select-option';
import { Select } from '../select';
describe('ion-select', () => {
@@ -157,3 +159,56 @@ describe('ion-select: required', () => {
expect(nativeButton.getAttribute('aria-required')).toBe('false');
});
});
+
+describe('ion-select: option content property reflection', () => {
+ beforeEach(() => {
+ // Cloning rich option content into the select text only happens when
+ // custom HTML rendering is enabled.
+ config.reset({ innerHTMLTemplatesEnabled: true });
+ });
+
+ afterEach(() => {
+ config.reset({});
+ });
+
+ it('should reflect ion-icon DOM properties onto attributes so they survive cloning into the select text', async () => {
+ const page = await newSpecPage({
+ components: [Select, SelectOption],
+ html: `)[prop];
+ if (typeof value === 'string' && value.length > 0 && !el.hasAttribute(prop)) {
+ el.setAttribute(prop, value);
+ }
+ }
+ }
+};
+
+/**
+ * Attribute names that are always safe to keep. Covers global HTML
+ * attributes, the Ionic component presentational props that cloned rich
+ * content (e.g. `ion-select-option` markup) relies on, and the inert SVG
+ * presentation attributes used by inline icons.
+ *
+ * `aria-*` and `data-*` are allowed separately by prefix (refer
+ * `allowedAttributePrefixes`) since they are inert and not worth
+ * enumerating. URL-bearing names (`href`, `src`) are allowed here, but
+ * their values are still scrubbed for script schemes in `sanitizeElement`.
+ *
+ * Notably absent: `style`, event handlers (`on*`), and the
+ * form/navigation-hijack attributes (`formaction`, `action`, `target`),
+ * which are therefore stripped.
+ */
+const allowedAttributes = [
+ // Global / structural
+ 'class',
+ 'id',
+ 'slot',
+ 'name',
+ 'title',
+ 'alt',
+ 'lang',
+ 'dir',
+ 'role',
+ 'type',
+ 'value',
+ 'disabled',
+ 'width',
+ 'height',
+ 'href',
+ 'src',
+ // Ionic component presentational props
+ 'color',
+ 'size',
+ 'shape',
+ 'fill',
+ 'expand',
+ 'mode',
+ 'theme',
+ 'icon',
+ 'label',
+ 'label-placement',
+ 'justify',
+ 'inset',
+ 'lines',
+ 'ios',
+ 'md',
+ // SVG presentation attributes (compared lowercased, e.g. `viewBox`)
+ 'xmlns',
+ 'viewbox',
+ 'preserveaspectratio',
+ 'stroke',
+ 'stroke-width',
+ 'stroke-linecap',
+ 'stroke-linejoin',
+ 'stroke-opacity',
+ 'stroke-dasharray',
+ 'fill-rule',
+ 'fill-opacity',
+ 'clip-rule',
+ 'd',
+ 'points',
+ 'cx',
+ 'cy',
+ 'r',
+ 'rx',
+ 'ry',
+ 'x',
+ 'y',
+ 'x1',
+ 'y1',
+ 'x2',
+ 'y2',
+ 'transform',
+ 'opacity',
+];
+
+/**
+ * Attribute-name prefixes that are always safe to keep. `aria-*` and
+ * `data-*` attributes cannot execute script or load resources, so they are
+ * allowed wholesale rather than enumerated by name.
+ */
+const allowedAttributePrefixes = ['aria-', 'data-'];
+
+/**
+ * Whether an attribute name (already lowercased) is safe to keep, by exact
+ * match or by an allowed prefix.
+ */
+const isAttributeAllowed = (lowerName: string): boolean => {
+ if (allowedAttributes.includes(lowerName)) {
+ return true;
+ }
+ return allowedAttributePrefixes.some((prefix) => lowerName.startsWith(prefix));
+};
+
+/**
+ * Matches ASCII control characters and whitespace (including the
+ * non-breaking space). Used to normalize attribute values before matching
+ * a URL scheme so entity-obfuscated payloads such as `java script:`
+ * (decoded by the parser to `java\tscript:`) can't smuggle a scheme past
+ * the check.
+ */
+// eslint-disable-next-line no-control-regex -- matching control characters is the point
+const controlCharactersAndWhitespace = /[\u0000-\u0020\u007f-\u00a0]/g;
+
+/**
+ * Attributes whose values are URLs. Their values are scheme-checked in
+ * `sanitizeElement` (e.g. `data:` filtering) beyond the script-scheme scrub
+ * applied to every attribute.
+ */
+const urlAttributes = ['href', 'src'];
+
+/**
+ * Matches a `data:` URI for a raster image type that cannot carry script.
+ * `image/svg+xml` is deliberately excluded (SVG can execute script), as are
+ * document types like `text/html` and `application/*`. The value is already
+ * lowercased and whitespace-stripped before this is tested.
+ */
+const safeDataImageUri = /^data:image\/(?:png|jpe?g|gif|webp|bmp|avif|x-icon|vnd\.microsoft\.icon)[;,]/;
+
+/**
+ * Tags removed entirely (with their subtree) before attribute sanitization.
+ * Exported so tests can assert the set without hardcoding it.
+ */
+export const blockedTags = ['script', 'style', 'iframe', 'meta', 'link', 'object', 'embed', 'base'];
+
+/**
+ * Properties on custom elements that frameworks (Vue, Angular) often
+ * set as DOM properties rather than attributes. `cloneNode` only copies
+ * attributes, so these values are lost when slotted content is cloned
+ * into an overlay. For each known custom element, we mirror the listed
+ * properties onto attributes so the cloned copy still has the data it
+ * needs to render.
+ *
+ * Keyed by uppercased tagName so the lookup matches `Element.tagName`.
+ */
+const elementPropsToReflect: Record = {
+ 'ION-ICON': ['icon', 'name', 'src', 'ios', 'md'],
+};
export class IonicSafeString {
constructor(public value: string) {}
diff --git a/core/src/utils/sanitization/test/sanitization.spec.ts b/core/src/utils/sanitization/test/sanitization.spec.ts
index 295dd306279..22379fe595e 100644
--- a/core/src/utils/sanitization/test/sanitization.spec.ts
+++ b/core/src/utils/sanitization/test/sanitization.spec.ts
@@ -1,4 +1,4 @@
-import { IonicSafeString, sanitizeDOMString } from '..';
+import { blockedTags, IonicSafeString, reflectPropertiesToAttributes, sanitizeDOMString, sanitizeDOMTree } from '..';
describe('sanitizeDOMString', () => {
it('disable sanitizer', () => {
@@ -64,6 +64,243 @@ describe('sanitizeDOMString', () => {
});
});
+describe('sanitizeDOMTree', () => {
+ beforeEach(() => {
+ enableSanitizer(true);
+ });
+
+ it('should strip a blocked ';
+
+ sanitizeDOMTree(root);
+
+ expect(root.querySelector('script')).toBeNull();
+ expect(root.querySelector('p')).not.toBeNull();
+ });
+
+ it('should strip every blocked tag type', () => {
+ const root = document.createElement('div');
+ root.innerHTML = blockedTags.map((tag) => `<${tag}>`).join('') + 'keep ';
+
+ sanitizeDOMTree(root);
+
+ for (const blocked of blockedTags) {
+ expect(root.querySelector(blocked)).toBeNull();
+ }
+ expect(root.querySelector('span')).not.toBeNull();
+ });
+
+ it('should strip blocked elements nested deep in the tree', () => {
+ const root = document.createElement('div');
+ root.innerHTML = '';
+
+ sanitizeDOMTree(root);
+
+ expect(root.querySelector('script')).toBeNull();
+ expect(root.querySelector('span')?.textContent).toBe('keep');
+ });
+
+ it('should remove on* event-handler attributes', () => {
+ const root = document.createElement('div');
+ root.innerHTML = 'click ';
+
+ sanitizeDOMTree(root);
+
+ const button = root.querySelector('button')!;
+ expect(button.hasAttribute('onclick')).toBe(false);
+ expect(button.hasAttribute('onmouseover')).toBe(false);
+ });
+
+ it('should strip javascript: URLs while keeping the element', () => {
+ const root = document.createElement('div');
+ root.innerHTML = 'link ';
+
+ sanitizeDOMTree(root);
+
+ const anchor = root.querySelector('a')!;
+ expect(anchor).not.toBeNull();
+ expect(anchor.hasAttribute('href')).toBe(false);
+ });
+
+ it('should preserve component attributes like size, color, and shape', () => {
+ const root = document.createElement('div');
+ root.innerHTML = 'button ';
+
+ sanitizeDOMTree(root);
+
+ const button = root.querySelector('ion-button')!;
+ expect(button.getAttribute('size')).toBe('small');
+ expect(button.getAttribute('color')).toBe('primary');
+ expect(button.getAttribute('shape')).toBe('round');
+ });
+
+ it('should strip the style attribute', () => {
+ const root = document.createElement('div');
+ root.innerHTML = 'text ';
+
+ sanitizeDOMTree(root);
+
+ expect(root.querySelector('span')!.hasAttribute('style')).toBe(false);
+ });
+
+ it('should strip form/navigation-hijack attributes', () => {
+ const root = document.createElement('div');
+ root.innerHTML = 'go ';
+
+ sanitizeDOMTree(root);
+
+ const button = root.querySelector('button')!;
+ expect(button.hasAttribute('formaction')).toBe(false);
+ expect(button.hasAttribute('action')).toBe(false);
+ expect(button.hasAttribute('target')).toBe(false);
+ });
+
+ it('should preserve inline SVG presentation attributes', () => {
+ const root = document.createElement('div');
+ root.innerHTML =
+ '' +
+ ' ';
+
+ sanitizeDOMTree(root);
+
+ const svg = root.querySelector('svg')!;
+ expect(svg.getAttribute('viewBox')).toBe('0 0 24 24');
+ expect(svg.getAttribute('width')).toBe('24');
+ const circle = root.querySelector('circle')!;
+ expect(circle.getAttribute('cx')).toBe('12');
+ expect(circle.getAttribute('r')).toBe('10');
+ expect(circle.getAttribute('fill')).toBe('red');
+ expect(circle.getAttribute('stroke-width')).toBe('2');
+ });
+
+ it('should preserve aria-* and data-* attributes', () => {
+ const root = document.createElement('div');
+ root.innerHTML = 'x link ';
+
+ sanitizeDOMTree(root);
+
+ expect(root.querySelector('a')!.hasAttribute('href')).toBe(false);
+ });
+
+ it('should strip vbscript: schemes', () => {
+ const root = document.createElement('div');
+ root.innerHTML = 'link ';
+
+ sanitizeDOMTree(root);
+
+ expect(root.querySelector('a')!.hasAttribute('href')).toBe(false);
+ });
+
+ it('should keep safe image data: URIs', () => {
+ const root = document.createElement('div');
+ const png = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNgAAAAAgAB';
+ root.innerHTML = `html ' +
+ 'click ';
+
+ sanitizeDOMTree(root);
+
+ expect(root.querySelector('script')).not.toBeNull();
+ expect(root.querySelector('button')!.hasAttribute('onclick')).toBe(true);
+ });
+});
+
+describe('reflectPropertiesToAttributes', () => {
+ it('should reflect a known DOM property onto its attribute', () => {
+ const icon = document.createElement('ion-icon');
+ (icon as any).name = 'star';
+
+ reflectPropertiesToAttributes(icon);
+
+ expect(icon.getAttribute('name')).toBe('star');
+ });
+
+ it('should reflect properties on a nested element', () => {
+ const root = document.createElement('div');
+ const icon = document.createElement('ion-icon');
+ (icon as any).icon = 'logo-ionic';
+ root.appendChild(icon);
+
+ reflectPropertiesToAttributes(root);
+
+ expect(icon.getAttribute('icon')).toBe('logo-ionic');
+ });
+
+ it('should not overwrite an attribute that is already present', () => {
+ const icon = document.createElement('ion-icon');
+ icon.setAttribute('name', 'existing');
+ (icon as any).name = 'from-property';
+
+ reflectPropertiesToAttributes(icon);
+
+ expect(icon.getAttribute('name')).toBe('existing');
+ });
+
+ it('should ignore empty-string and non-string property values', () => {
+ const icon = document.createElement('ion-icon');
+ (icon as any).name = '';
+ (icon as any).icon = 42;
+
+ reflectPropertiesToAttributes(icon);
+
+ expect(icon.hasAttribute('name')).toBe(false);
+ expect(icon.hasAttribute('icon')).toBe(false);
+ });
+
+ it('should leave elements without reflected properties untouched', () => {
+ const div = document.createElement('div');
+ (div as any).name = 'value';
+
+ reflectPropertiesToAttributes(div);
+
+ expect(div.hasAttribute('name')).toBe(false);
+ });
+});
+
const enableSanitizer = (enable = true) => {
(window as any).Ionic = {};
(window as any).Ionic.config = {};
diff --git a/core/src/utils/select-option-render.tsx b/core/src/utils/select-option-render.tsx
new file mode 100644
index 00000000000..e9fa1f59da6
--- /dev/null
+++ b/core/src/utils/select-option-render.tsx
@@ -0,0 +1,163 @@
+import type { VNode } from '@stencil/core';
+import { h } from '@stencil/core';
+import { sanitizeDOMTree } from '@utils/sanitization';
+
+import type { RichContentOption as RichContentOpt } from '../components/select/select-interface';
+
+interface RichContentOption extends RichContentOpt {
+ /** Unique identifier for stable virtual DOM keys across re-renders. */
+ id: string;
+ /** The main label for the option as a string or an HTMLElement. */
+ label?: string | HTMLElement;
+}
+
+/**
+ * Converts a DOM node into a Stencil VNode (or text string) so the
+ * resulting tree is rendered through the component's normal render
+ * path. Rendering through Stencil ensures that scoped CSS classes
+ * (e.g. `sc-ion-action-sheet-ionic`) are applied to every element.
+ *
+ * Highly recommended to pre-sanitize the source DOM (see
+ * `getOptionContent` in select.tsx). This function performs pure
+ * structural conversion — no security filtering.
+ *
+ * Preserves attributes only — properties set imperatively on the source
+ * element (e.g. `input.value` after a user types) won't carry through.
+ * In practice this isn't a concern: interactive controls shouldn't
+ * appear in select-option rich content since they'd nest inside the
+ * overlay's button/radio/checkbox wrapper, which is invalid HTML and
+ * an accessibility issue.
+ *
+ * @param node - The DOM node to convert. Text nodes become strings,
+ * element nodes become VNodes, and any other node types are skipped.
+ * @param keyPrefix - String prefix used to build a stable VNode key,
+ * so Stencil's diff can preserve elements across re-renders.
+ * @param index - Position of this node among its siblings. Combined
+ * with `keyPrefix` to form the final unique key.
+ * @returns The converted VNode, a text string, or `null` if the node
+ * type isn't supported.
+ *
+ * @internal Exported only so it can be unit tested; not part of the
+ * public API.
+ */
+export const cloneToVNode = (node: Node, keyPrefix: string, index: number): VNode | string | null => {
+ if (node.nodeType === Node.TEXT_NODE) {
+ return node.textContent ?? '';
+ }
+
+ if (node.nodeType !== Node.ELEMENT_NODE) {
+ return null;
+ }
+
+ const el = node as Element;
+ const tag = el.tagName.toLowerCase();
+ const key = `${keyPrefix}-${index}`;
+
+ const attrs: Record = { key };
+ for (let i = 0; i < el.attributes.length; i++) {
+ const attr = el.attributes.item(i)!;
+ attrs[attr.name] = attr.value;
+ }
+
+ const children = Array.from(el.childNodes)
+ .map((child, i) => cloneToVNode(child, key, i))
+ .filter((c): c is VNode | string => c !== null);
+
+ return h(tag as any, attrs, children as any);
+};
+
+/**
+ * Renders cloned DOM content as Stencil JSX. Walking the source DOM
+ * into VNodes (rather than injecting it via innerHTML) keeps the
+ * content inside Stencil's render path, so scoped CSS classes are
+ * applied automatically and component attributes like `size` or
+ * `color` survive intact.
+ *
+ * Span elements should be used when this content renders within buttons,
+ * depending on the select interface. Buttons can only have phrasing
+ * content to prevent accessibility issues.
+ *
+ * @param id - Unique identifier for generating stable virtual DOM keys.
+ * @param content - The HTMLElement container whose child nodes will be cloned.
+ * @param className - CSS class applied to the wrapper element.
+ * @param useSpan - Whether to use a span element instead of a div for the wrapper.
+ */
+const renderClonedContent = (id: string, content: HTMLElement, className: string, useSpan = false) => {
+ const Tag = useSpan ? 'span' : 'div';
+ const keyPrefix = `${className}-${id}`;
+
+ sanitizeDOMTree(content);
+
+ return (
+
+ {Array.from(content.childNodes).map((child, i) => cloneToVNode(child, keyPrefix, i))}
+
+ );
+};
+
+/**
+ * Renders the label content for a select option within an overlay
+ * interface based on the presence of rich content.
+ *
+ * Span elements should be used when this content renders within buttons,
+ * depending on the select interface. Buttons can only have phrasing
+ * content to prevent accessibility issues.
+ *
+ * @param option - The content option data containing label, slots,
+ * and description.
+ * @param className - The base CSS class for the label element.
+ * @param useSpan - Whether to use a span element instead of a div for the label.
+ */
+export const renderOptionLabel = (
+ option: RichContentOption,
+ className: string,
+ useSpan = false
+): HTMLElement | string | undefined => {
+ const { id, label, startContent, endContent, description } = option;
+ const hasRichContent = !!startContent || !!endContent || !!description;
+ const Tag = useSpan ? 'span' : 'div';
+
+ // Render simple string label if there is no rich content to display
+ if (!hasRichContent && (typeof label === 'string' || !label)) {
+ return (
+
+ {label}
+
+ );
+ }
+
+ // Render the main label
+ const labelEl =
+ typeof label === 'string' || !label ? (
+ // Label is a simple string or undefined
+ {label}
+ ) : (
+ // Label is an HTMLElement with potential rich content
+ renderClonedContent(id, label, `${className}-text`, useSpan)
+ );
+
+ // No rich content, render just the label
+ if (!hasRichContent) {
+ return (
+
+ {labelEl}
+
+ );
+ }
+
+ // Render label with rich content (start, end, description)
+ return (
+
+ {startContent && renderClonedContent(id, startContent, 'select-option-start', useSpan)}
+
+ {labelEl}
+ {description && (
+
+ {description}
+
+ )}
+
+ {endContent && renderClonedContent(id, endContent, 'select-option-end', useSpan)}
+
+ );
+};
diff --git a/core/src/utils/test/select-option-render.spec.tsx b/core/src/utils/test/select-option-render.spec.tsx
new file mode 100644
index 00000000000..d6b1cb8dc07
--- /dev/null
+++ b/core/src/utils/test/select-option-render.spec.tsx
@@ -0,0 +1,170 @@
+import type { VNode } from '@stencil/core';
+
+import { cloneToVNode, renderOptionLabel } from '../select-option-render';
+
+/**
+ * `cloneToVNode` returns Stencil's internal VNode object, whose fields are
+ * name-mangled (`$tag$`, `$attrs$`, etc.). Casting to this shape keeps the
+ * assertions readable without depending on the public `VNode` type, which
+ * does not expose those runtime fields.
+ */
+interface RuntimeVNode {
+ $tag$: string | null;
+ $text$: string | null;
+ $attrs$: Record | null;
+ $children$: RuntimeVNode[] | null;
+ $key$: string | null;
+}
+
+const asVNode = (value: VNode | string | null): RuntimeVNode => value as unknown as RuntimeVNode;
+
+describe('cloneToVNode', () => {
+ describe('text nodes', () => {
+ it('should return the text content of a text node as a string', () => {
+ const node = document.createTextNode('hello world');
+
+ expect(cloneToVNode(node, 'prefix', 0)).toBe('hello world');
+ });
+
+ it('should return an empty string when text content is empty', () => {
+ const node = document.createTextNode('');
+
+ expect(cloneToVNode(node, 'prefix', 0)).toBe('');
+ });
+ });
+
+ describe('unsupported nodes', () => {
+ it('should return null for a comment node', () => {
+ const node = document.createComment('a comment');
+
+ expect(cloneToVNode(node, 'prefix', 0)).toBeNull();
+ });
+ });
+
+ describe('element nodes', () => {
+ it('should convert an element to a VNode with the lowercased tag name', () => {
+ const el = document.createElement('SPAN');
+
+ const vnode = asVNode(cloneToVNode(el, 'prefix', 0));
+
+ expect(vnode.$tag$).toBe('span');
+ });
+
+ it('should build a stable key from the prefix and index', () => {
+ const el = document.createElement('div');
+
+ const vnode = asVNode(cloneToVNode(el, 'prefix', 3));
+
+ expect(vnode.$key$).toBe('prefix-3');
+ expect(vnode.$attrs$?.key).toBe('prefix-3');
+ });
+
+ it('should copy all attributes from the source element', () => {
+ const el = document.createElement('span');
+ el.setAttribute('class', 'foo bar');
+ el.setAttribute('data-value', '42');
+ el.setAttribute('aria-label', 'label');
+
+ const vnode = asVNode(cloneToVNode(el, 'prefix', 0));
+
+ expect(vnode.$attrs$).toEqual({
+ key: 'prefix-0',
+ class: 'foo bar',
+ 'data-value': '42',
+ 'aria-label': 'label',
+ });
+ });
+
+ it('should recursively convert child element nodes', () => {
+ const el = document.createElement('div');
+ el.appendChild(document.createElement('span'));
+ el.appendChild(document.createElement('img'));
+
+ const vnode = asVNode(cloneToVNode(el, 'prefix', 0));
+
+ expect(vnode.$children$).toHaveLength(2);
+ expect(vnode.$children$?.[0].$tag$).toBe('span');
+ expect(vnode.$children$?.[1].$tag$).toBe('img');
+ });
+
+ it('should derive child keys from the parent key', () => {
+ const el = document.createElement('div');
+ el.appendChild(document.createElement('span'));
+
+ const vnode = asVNode(cloneToVNode(el, 'prefix', 2));
+
+ // Parent key is `prefix-2`, so the first child key is `prefix-2-0`
+ expect(vnode.$children$?.[0].$key$).toBe('prefix-2-0');
+ });
+
+ it('should preserve text child content', () => {
+ const el = document.createElement('span');
+ el.appendChild(document.createTextNode('inner text'));
+
+ const vnode = asVNode(cloneToVNode(el, 'prefix', 0));
+
+ // `cloneToVNode` returns the text as a string, which `h` wraps into a
+ // text VNode (`$tag$` null, content on `$text$`).
+ expect(vnode.$children$).toHaveLength(1);
+ expect(vnode.$children$?.[0].$tag$).toBeNull();
+ expect(vnode.$children$?.[0].$text$).toBe('inner text');
+ });
+
+ it('should filter out unsupported child nodes', () => {
+ const el = document.createElement('div');
+ el.appendChild(document.createElement('span'));
+ el.appendChild(document.createComment('skip me'));
+ el.appendChild(document.createTextNode('keep me'));
+
+ const vnode = asVNode(cloneToVNode(el, 'prefix', 0));
+
+ // The comment node is dropped, leaving the span and the text
+ expect(vnode.$children$).toHaveLength(2);
+ expect(vnode.$children$?.[0].$tag$).toBe('span');
+ expect(vnode.$children$?.[1].$text$).toBe('keep me');
+ });
+
+ it('should convert a deeply nested structure', () => {
+ const el = document.createElement('div');
+ const child = document.createElement('span');
+ const grandchild = document.createElement('strong');
+ grandchild.appendChild(document.createTextNode('deep'));
+ child.appendChild(grandchild);
+ el.appendChild(child);
+
+ const vnode = asVNode(cloneToVNode(el, 'prefix', 0));
+
+ const span = vnode.$children$?.[0];
+ const strong = span?.$children$?.[0];
+ expect(span?.$tag$).toBe('span');
+ expect(strong?.$tag$).toBe('strong');
+ expect(strong?.$children$?.[0].$text$).toBe('deep');
+ });
+
+ it('should produce no children for an empty element', () => {
+ const el = document.createElement('div');
+
+ const vnode = asVNode(cloneToVNode(el, 'prefix', 0));
+
+ // `h` normalizes an empty children array to `null`
+ expect(vnode.$children$).toBeNull();
+ });
+ });
+});
+
+describe('renderOptionLabel', () => {
+ it('should sanitize an HTMLElement label that bypassed ion-select', () => {
+ // Mirrors a vanilla JS caller passing DOM straight to an overlay, which
+ // never runs through `getOptionContent`'s `sanitizeDOMTree`.
+ const label = document.createElement('span');
+ label.innerHTML = 'hi ';
+
+ const result = asVNode(renderOptionLabel({ id: '1', label }, 'select-option') as unknown as VNode);
+
+ const anchor = result.$children$?.[0].$children$?.[0];
+ expect(anchor?.$tag$).toBe('a');
+ expect(anchor?.$attrs$?.href).toBeUndefined();
+ expect(anchor?.$attrs$?.onclick).toBeUndefined();
+ expect(anchor?.$attrs$?.class).toBe('safe');
+ });
+});
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index 943c4de989f..66feafc701c 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -2365,14 +2365,14 @@ export declare interface IonSelectModal extends Components.IonSelectModal {}
@ProxyCmp({
- inputs: ['disabled', 'value']
+ inputs: ['description', 'disabled', 'justify', 'labelPlacement', 'mode', 'value']
})
@Component({
selector: 'ion-select-option',
changeDetection: ChangeDetectionStrategy.OnPush,
template: ';
-export const IonAccordion: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonAccordion: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-accordion',
elementClass: IonAccordionElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {} as IonAccordionEvents,
- defineCustomElement: defineIonAccordion,
- });
+ defineCustomElement: defineIonAccordion
+});
-export type IonAccordionGroupEvents = {
- onIonChange: EventName>;
-};
+export type IonAccordionGroupEvents = { onIonChange: EventName> };
-export const IonAccordionGroup: StencilReactComponent<
- IonAccordionGroupElement,
- IonAccordionGroupEvents,
- Components.IonAccordionGroup
-> = /*@__PURE__*/ createComponent({
- tagName: 'ion-accordion-group',
- elementClass: IonAccordionGroupElement,
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
- react: React,
- events: { onIonChange: 'ionChange' } as IonAccordionGroupEvents,
- defineCustomElement: defineIonAccordionGroup,
+export const IonAccordionGroup: StencilReactComponent = /*@__PURE__*/ createComponent({
+ tagName: 'ion-accordion-group',
+ elementClass: IonAccordionGroupElement,
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+ react: React,
+ events: { onIonChange: 'ionChange' } as IonAccordionGroupEvents,
+ defineCustomElement: defineIonAccordionGroup
});
export type IonAvatarEvents = NonNullable;
-export const IonAvatar: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonAvatar: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-avatar',
elementClass: IonAvatarElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {} as IonAvatarEvents,
- defineCustomElement: defineIonAvatar,
- });
+ defineCustomElement: defineIonAvatar
+});
export type IonBackdropEvents = { onIonBackdropTap: EventName> };
-export const IonBackdrop: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonBackdrop: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-backdrop',
elementClass: IonBackdropElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: { onIonBackdropTap: 'ionBackdropTap' } as IonBackdropEvents,
- defineCustomElement: defineIonBackdrop,
- });
+ defineCustomElement: defineIonBackdrop
+});
export type IonBadgeEvents = NonNullable;
-export const IonBadge: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonBadge: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-badge',
elementClass: IonBadgeElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {} as IonBadgeEvents,
- defineCustomElement: defineIonBadge,
- });
+ defineCustomElement: defineIonBadge
+});
-export type IonBreadcrumbsEvents = {
- onIonCollapsedClick: EventName>;
-};
+export type IonBreadcrumbsEvents = { onIonCollapsedClick: EventName> };
-export const IonBreadcrumbs: StencilReactComponent<
- IonBreadcrumbsElement,
- IonBreadcrumbsEvents,
- Components.IonBreadcrumbs
-> = /*@__PURE__*/ createComponent({
- tagName: 'ion-breadcrumbs',
- elementClass: IonBreadcrumbsElement,
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
- react: React,
- events: { onIonCollapsedClick: 'ionCollapsedClick' } as IonBreadcrumbsEvents,
- defineCustomElement: defineIonBreadcrumbs,
+export const IonBreadcrumbs: StencilReactComponent = /*@__PURE__*/ createComponent({
+ tagName: 'ion-breadcrumbs',
+ elementClass: IonBreadcrumbsElement,
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+ react: React,
+ events: { onIonCollapsedClick: 'ionCollapsedClick' } as IonBreadcrumbsEvents,
+ defineCustomElement: defineIonBreadcrumbs
});
export type IonButtonsEvents = NonNullable;
-export const IonButtons: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonButtons: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-buttons',
elementClass: IonButtonsElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {} as IonButtonsEvents,
- defineCustomElement: defineIonButtons,
- });
+ defineCustomElement: defineIonButtons
+});
export type IonCardContentEvents = NonNullable;
-export const IonCardContent: StencilReactComponent<
- IonCardContentElement,
- IonCardContentEvents,
- Components.IonCardContent
-> = /*@__PURE__*/ createComponent({
- tagName: 'ion-card-content',
- elementClass: IonCardContentElement,
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
- react: React,
- events: {} as IonCardContentEvents,
- defineCustomElement: defineIonCardContent,
+export const IonCardContent: StencilReactComponent = /*@__PURE__*/ createComponent({
+ tagName: 'ion-card-content',
+ elementClass: IonCardContentElement,
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+ react: React,
+ events: {} as IonCardContentEvents,
+ defineCustomElement: defineIonCardContent
});
export type IonCardHeaderEvents = NonNullable;
-export const IonCardHeader: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonCardHeader: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-card-header',
elementClass: IonCardHeaderElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {} as IonCardHeaderEvents,
- defineCustomElement: defineIonCardHeader,
- });
+ defineCustomElement: defineIonCardHeader
+});
export type IonCardSubtitleEvents = NonNullable;
-export const IonCardSubtitle: StencilReactComponent<
- IonCardSubtitleElement,
- IonCardSubtitleEvents,
- Components.IonCardSubtitle
-> = /*@__PURE__*/ createComponent({
- tagName: 'ion-card-subtitle',
- elementClass: IonCardSubtitleElement,
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
- react: React,
- events: {} as IonCardSubtitleEvents,
- defineCustomElement: defineIonCardSubtitle,
+export const IonCardSubtitle: StencilReactComponent = /*@__PURE__*/ createComponent({
+ tagName: 'ion-card-subtitle',
+ elementClass: IonCardSubtitleElement,
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+ react: React,
+ events: {} as IonCardSubtitleEvents,
+ defineCustomElement: defineIonCardSubtitle
});
export type IonCardTitleEvents = NonNullable;
-export const IonCardTitle: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonCardTitle: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-card-title',
elementClass: IonCardTitleElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {} as IonCardTitleEvents,
- defineCustomElement: defineIonCardTitle,
- });
+ defineCustomElement: defineIonCardTitle
+});
export type IonCheckboxEvents = {
- onIonChange: EventName>;
- onIonFocus: EventName>;
- onIonBlur: EventName>;
+ onIonChange: EventName>,
+ onIonFocus: EventName>,
+ onIonBlur: EventName>
};
-export const IonCheckbox: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonCheckbox: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-checkbox',
elementClass: IonCheckboxElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {
- onIonChange: 'ionChange',
- onIonFocus: 'ionFocus',
- onIonBlur: 'ionBlur',
+ onIonChange: 'ionChange',
+ onIonFocus: 'ionFocus',
+ onIonBlur: 'ionBlur'
} as IonCheckboxEvents,
- defineCustomElement: defineIonCheckbox,
- });
+ defineCustomElement: defineIonCheckbox
+});
export type IonChipEvents = NonNullable;
-export const IonChip: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonChip: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-chip',
elementClass: IonChipElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {} as IonChipEvents,
- defineCustomElement: defineIonChip,
- });
+ defineCustomElement: defineIonChip
+});
export type IonColEvents = NonNullable;
-export const IonCol: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonCol: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-col',
elementClass: IonColElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {} as IonColEvents,
- defineCustomElement: defineIonCol,
- });
+ defineCustomElement: defineIonCol
+});
export type IonContentEvents = {
- onIonScrollStart: EventName>;
- onIonScroll: EventName>;
- onIonScrollEnd: EventName>;
+ onIonScrollStart: EventName>,
+ onIonScroll: EventName>,
+ onIonScrollEnd: EventName>
};
-export const IonContent: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonContent: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-content',
elementClass: IonContentElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {
- onIonScrollStart: 'ionScrollStart',
- onIonScroll: 'ionScroll',
- onIonScrollEnd: 'ionScrollEnd',
+ onIonScrollStart: 'ionScrollStart',
+ onIonScroll: 'ionScroll',
+ onIonScrollEnd: 'ionScrollEnd'
} as IonContentEvents,
- defineCustomElement: defineIonContent,
- });
+ defineCustomElement: defineIonContent
+});
export type IonDatetimeEvents = {
- onIonCancel: EventName>;
- onIonChange: EventName>;
- onIonFocus: EventName>;
- onIonBlur: EventName>;
+ onIonCancel: EventName>,
+ onIonChange: EventName>,
+ onIonFocus: EventName>,
+ onIonBlur: EventName>
};
-export const IonDatetime: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonDatetime: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-datetime',
elementClass: IonDatetimeElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {
- onIonCancel: 'ionCancel',
- onIonChange: 'ionChange',
- onIonFocus: 'ionFocus',
- onIonBlur: 'ionBlur',
+ onIonCancel: 'ionCancel',
+ onIonChange: 'ionChange',
+ onIonFocus: 'ionFocus',
+ onIonBlur: 'ionBlur'
} as IonDatetimeEvents,
- defineCustomElement: defineIonDatetime,
- });
+ defineCustomElement: defineIonDatetime
+});
export type IonDatetimeButtonEvents = NonNullable;
-export const IonDatetimeButton: StencilReactComponent<
- IonDatetimeButtonElement,
- IonDatetimeButtonEvents,
- Components.IonDatetimeButton
-> = /*@__PURE__*/ createComponent({
- tagName: 'ion-datetime-button',
- elementClass: IonDatetimeButtonElement,
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
- react: React,
- events: {} as IonDatetimeButtonEvents,
- defineCustomElement: defineIonDatetimeButton,
+export const IonDatetimeButton: StencilReactComponent = /*@__PURE__*/ createComponent({
+ tagName: 'ion-datetime-button',
+ elementClass: IonDatetimeButtonElement,
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+ react: React,
+ events: {} as IonDatetimeButtonEvents,
+ defineCustomElement: defineIonDatetimeButton
});
export type IonFabEvents = NonNullable;
-export const IonFab: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonFab: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-fab',
elementClass: IonFabElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {} as IonFabEvents,
- defineCustomElement: defineIonFab,
- });
+ defineCustomElement: defineIonFab
+});
export type IonFabListEvents = NonNullable;
-export const IonFabList: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonFabList: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-fab-list',
elementClass: IonFabListElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {} as IonFabListEvents,
- defineCustomElement: defineIonFabList,
- });
+ defineCustomElement: defineIonFabList
+});
export type IonFooterEvents = NonNullable;
-export const IonFooter: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonFooter: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-footer',
elementClass: IonFooterElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {} as IonFooterEvents,
- defineCustomElement: defineIonFooter,
- });
+ defineCustomElement: defineIonFooter
+});
export type IonGridEvents = NonNullable;
-export const IonGrid: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonGrid: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-grid',
elementClass: IonGridElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {} as IonGridEvents,
- defineCustomElement: defineIonGrid,
- });
+ defineCustomElement: defineIonGrid
+});
export type IonHeaderEvents = NonNullable;
-export const IonHeader: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonHeader: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-header',
elementClass: IonHeaderElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {} as IonHeaderEvents,
- defineCustomElement: defineIonHeader,
- });
+ defineCustomElement: defineIonHeader
+});
export type IonImgEvents = {
- onIonImgWillLoad: EventName>;
- onIonImgDidLoad: EventName>;
- onIonError: EventName>;
+ onIonImgWillLoad: EventName>,
+ onIonImgDidLoad: EventName>,
+ onIonError: EventName>
};
-export const IonImg: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonImg: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-img',
elementClass: IonImgElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {
- onIonImgWillLoad: 'ionImgWillLoad',
- onIonImgDidLoad: 'ionImgDidLoad',
- onIonError: 'ionError',
+ onIonImgWillLoad: 'ionImgWillLoad',
+ onIonImgDidLoad: 'ionImgDidLoad',
+ onIonError: 'ionError'
} as IonImgEvents,
- defineCustomElement: defineIonImg,
- });
+ defineCustomElement: defineIonImg
+});
export type IonInfiniteScrollEvents = { onIonInfinite: EventName> };
-export const IonInfiniteScroll: StencilReactComponent<
- IonInfiniteScrollElement,
- IonInfiniteScrollEvents,
- Components.IonInfiniteScroll
-> = /*@__PURE__*/ createComponent({
- tagName: 'ion-infinite-scroll',
- elementClass: IonInfiniteScrollElement,
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
- react: React,
- events: { onIonInfinite: 'ionInfinite' } as IonInfiniteScrollEvents,
- defineCustomElement: defineIonInfiniteScroll,
+export const IonInfiniteScroll: StencilReactComponent = /*@__PURE__*/ createComponent({
+ tagName: 'ion-infinite-scroll',
+ elementClass: IonInfiniteScrollElement,
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+ react: React,
+ events: { onIonInfinite: 'ionInfinite' } as IonInfiniteScrollEvents,
+ defineCustomElement: defineIonInfiniteScroll
});
export type IonInfiniteScrollContentEvents = NonNullable;
-export const IonInfiniteScrollContent: StencilReactComponent<
- IonInfiniteScrollContentElement,
- IonInfiniteScrollContentEvents,
- Components.IonInfiniteScrollContent
-> = /*@__PURE__*/ createComponent<
- IonInfiniteScrollContentElement,
- IonInfiniteScrollContentEvents,
- Components.IonInfiniteScrollContent
->({
- tagName: 'ion-infinite-scroll-content',
- elementClass: IonInfiniteScrollContentElement,
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
- react: React,
- events: {} as IonInfiniteScrollContentEvents,
- defineCustomElement: defineIonInfiniteScrollContent,
+export const IonInfiniteScrollContent: StencilReactComponent = /*@__PURE__*/ createComponent({
+ tagName: 'ion-infinite-scroll-content',
+ elementClass: IonInfiniteScrollContentElement,
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+ react: React,
+ events: {} as IonInfiniteScrollContentEvents,
+ defineCustomElement: defineIonInfiniteScrollContent
});
export type IonInputEvents = {
- onIonInput: EventName>;
- onIonChange: EventName>;
- onIonBlur: EventName>;
- onIonFocus: EventName>;
+ onIonInput: EventName>,
+ onIonChange: EventName>,
+ onIonBlur: EventName>,
+ onIonFocus: EventName>
};
-export const IonInput: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonInput: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-input',
elementClass: IonInputElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {
- onIonInput: 'ionInput',
- onIonChange: 'ionChange',
- onIonBlur: 'ionBlur',
- onIonFocus: 'ionFocus',
+ onIonInput: 'ionInput',
+ onIonChange: 'ionChange',
+ onIonBlur: 'ionBlur',
+ onIonFocus: 'ionFocus'
} as IonInputEvents,
- defineCustomElement: defineIonInput,
- });
+ defineCustomElement: defineIonInput
+});
export type IonInputOtpEvents = {
- onIonInput: EventName>;
- onIonChange: EventName>;
- onIonComplete: EventName>;
- onIonBlur: EventName>;
- onIonFocus: EventName>;
+ onIonInput: EventName>,
+ onIonChange: EventName>,
+ onIonComplete: EventName>,
+ onIonBlur: EventName>,
+ onIonFocus: EventName>
};
-export const IonInputOtp: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonInputOtp: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-input-otp',
elementClass: IonInputOtpElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {
- onIonInput: 'ionInput',
- onIonChange: 'ionChange',
- onIonComplete: 'ionComplete',
- onIonBlur: 'ionBlur',
- onIonFocus: 'ionFocus',
+ onIonInput: 'ionInput',
+ onIonChange: 'ionChange',
+ onIonComplete: 'ionComplete',
+ onIonBlur: 'ionBlur',
+ onIonFocus: 'ionFocus'
} as IonInputOtpEvents,
- defineCustomElement: defineIonInputOtp,
- });
+ defineCustomElement: defineIonInputOtp
+});
export type IonInputPasswordToggleEvents = NonNullable;
-export const IonInputPasswordToggle: StencilReactComponent<
- IonInputPasswordToggleElement,
- IonInputPasswordToggleEvents,
- Components.IonInputPasswordToggle
-> = /*@__PURE__*/ createComponent<
- IonInputPasswordToggleElement,
- IonInputPasswordToggleEvents,
- Components.IonInputPasswordToggle
->({
- tagName: 'ion-input-password-toggle',
- elementClass: IonInputPasswordToggleElement,
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
- react: React,
- events: {} as IonInputPasswordToggleEvents,
- defineCustomElement: defineIonInputPasswordToggle,
+export const IonInputPasswordToggle: StencilReactComponent = /*@__PURE__*/ createComponent({
+ tagName: 'ion-input-password-toggle',
+ elementClass: IonInputPasswordToggleElement,
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+ react: React,
+ events: {} as IonInputPasswordToggleEvents,
+ defineCustomElement: defineIonInputPasswordToggle
});
export type IonItemDividerEvents = NonNullable;
-export const IonItemDivider: StencilReactComponent<
- IonItemDividerElement,
- IonItemDividerEvents,
- Components.IonItemDivider
-> = /*@__PURE__*/ createComponent({
- tagName: 'ion-item-divider',
- elementClass: IonItemDividerElement,
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
- react: React,
- events: {} as IonItemDividerEvents,
- defineCustomElement: defineIonItemDivider,
+export const IonItemDivider: StencilReactComponent = /*@__PURE__*/ createComponent({
+ tagName: 'ion-item-divider',
+ elementClass: IonItemDividerElement,
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+ react: React,
+ events: {} as IonItemDividerEvents,
+ defineCustomElement: defineIonItemDivider
});
export type IonItemGroupEvents = NonNullable;
-export const IonItemGroup: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonItemGroup: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-item-group',
elementClass: IonItemGroupElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {} as IonItemGroupEvents,
- defineCustomElement: defineIonItemGroup,
- });
+ defineCustomElement: defineIonItemGroup
+});
export type IonItemOptionsEvents = { onIonSwipe: EventName> };
-export const IonItemOptions: StencilReactComponent<
- IonItemOptionsElement,
- IonItemOptionsEvents,
- Components.IonItemOptions
-> = /*@__PURE__*/ createComponent({
- tagName: 'ion-item-options',
- elementClass: IonItemOptionsElement,
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
- react: React,
- events: { onIonSwipe: 'ionSwipe' } as IonItemOptionsEvents,
- defineCustomElement: defineIonItemOptions,
+export const IonItemOptions: StencilReactComponent = /*@__PURE__*/ createComponent({
+ tagName: 'ion-item-options',
+ elementClass: IonItemOptionsElement,
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+ react: React,
+ events: { onIonSwipe: 'ionSwipe' } as IonItemOptionsEvents,
+ defineCustomElement: defineIonItemOptions
});
export type IonItemSlidingEvents = { onIonDrag: EventName> };
-export const IonItemSliding: StencilReactComponent<
- IonItemSlidingElement,
- IonItemSlidingEvents,
- Components.IonItemSliding
-> = /*@__PURE__*/ createComponent({
- tagName: 'ion-item-sliding',
- elementClass: IonItemSlidingElement,
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
- react: React,
- events: { onIonDrag: 'ionDrag' } as IonItemSlidingEvents,
- defineCustomElement: defineIonItemSliding,
+export const IonItemSliding: StencilReactComponent = /*@__PURE__*/ createComponent({
+ tagName: 'ion-item-sliding',
+ elementClass: IonItemSlidingElement,
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+ react: React,
+ events: { onIonDrag: 'ionDrag' } as IonItemSlidingEvents,
+ defineCustomElement: defineIonItemSliding
});
export type IonLabelEvents = NonNullable;
-export const IonLabel: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonLabel: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-label',
elementClass: IonLabelElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {} as IonLabelEvents,
- defineCustomElement: defineIonLabel,
- });
+ defineCustomElement: defineIonLabel
+});
export type IonListEvents = NonNullable;
-export const IonList: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonList: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-list',
elementClass: IonListElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {} as IonListEvents,
- defineCustomElement: defineIonList,
- });
+ defineCustomElement: defineIonList
+});
export type IonListHeaderEvents = NonNullable;
-export const IonListHeader: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonListHeader: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-list-header',
elementClass: IonListHeaderElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {} as IonListHeaderEvents,
- defineCustomElement: defineIonListHeader,
- });
+ defineCustomElement: defineIonListHeader
+});
export type IonMenuEvents = {
- onIonWillOpen: EventName>;
- onIonWillClose: EventName>;
- onIonDidOpen: EventName>;
- onIonDidClose: EventName>;
+ onIonWillOpen: EventName>,
+ onIonWillClose: EventName>,
+ onIonDidOpen: EventName>,
+ onIonDidClose: EventName>
};
-export const IonMenu: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonMenu: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-menu',
elementClass: IonMenuElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {
- onIonWillOpen: 'ionWillOpen',
- onIonWillClose: 'ionWillClose',
- onIonDidOpen: 'ionDidOpen',
- onIonDidClose: 'ionDidClose',
+ onIonWillOpen: 'ionWillOpen',
+ onIonWillClose: 'ionWillClose',
+ onIonDidOpen: 'ionDidOpen',
+ onIonDidClose: 'ionDidClose'
} as IonMenuEvents,
- defineCustomElement: defineIonMenu,
- });
+ defineCustomElement: defineIonMenu
+});
export type IonMenuButtonEvents = NonNullable;
-export const IonMenuButton: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonMenuButton: StencilReactComponent = /*@__PURE__*/ createComponent({
tagName: 'ion-menu-button',
elementClass: IonMenuButtonElement,
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
react: React,
events: {} as IonMenuButtonEvents,
- defineCustomElement: defineIonMenuButton,
- });
+ defineCustomElement: defineIonMenuButton
+});
export type IonMenuToggleEvents = NonNullable;
-export const IonMenuToggle: StencilReactComponent =
- /*@__PURE__*/ createComponent({
+export const IonMenuToggle: StencilReactComponent = /*@__PURE__*/ createComponent