mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-15 01:03:03 +08:00
6c500fd6b2
Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> When given a password input it is hard to know what users are typing as the contents of the input are obscured. As a result, it is a common pattern to have a button that lets users temporarily toggle the visibility of the password so they can correct any mistakes. Ionic currently has the infrastructure for developers to implement this on their own, but this use case is so common that the team thinks it is worth having this functionality built-in to Ionic. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Introduces the `ion-input-password-toggle` component. This component is a button that toggles the visibility of the text in the input it is slotted into. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> ⚠️ Give co-author credit to https://github.com/ionic-team/ionic-framework/pull/29141 on merge. Docs PR: https://github.com/ionic-team/ionic-docs/pull/3541 Note: We did not do the approach listed in the other PR due to https://github.com/ionic-team/ionic-framework/pull/29141#discussion_r1523631811. --------- Co-authored-by: OS-giulianasilva <OS-giulianasilva@users.noreply.github.com>
145 lines
18 KiB
TypeScript
145 lines
18 KiB
TypeScript
/* eslint-disable */
|
|
/* tslint:disable */
|
|
/* auto-generated react proxies */
|
|
import { createReactComponent } from './react-component-lib';
|
|
|
|
import type { JSX } from '@ionic/core/components';
|
|
|
|
import { defineCustomElement as defineIonAccordion } from '@ionic/core/components/ion-accordion.js';
|
|
import { defineCustomElement as defineIonAccordionGroup } from '@ionic/core/components/ion-accordion-group.js';
|
|
import { defineCustomElement as defineIonAvatar } from '@ionic/core/components/ion-avatar.js';
|
|
import { defineCustomElement as defineIonBackdrop } from '@ionic/core/components/ion-backdrop.js';
|
|
import { defineCustomElement as defineIonBadge } from '@ionic/core/components/ion-badge.js';
|
|
import { defineCustomElement as defineIonBreadcrumbs } from '@ionic/core/components/ion-breadcrumbs.js';
|
|
import { defineCustomElement as defineIonButtons } from '@ionic/core/components/ion-buttons.js';
|
|
import { defineCustomElement as defineIonCardContent } from '@ionic/core/components/ion-card-content.js';
|
|
import { defineCustomElement as defineIonCardHeader } from '@ionic/core/components/ion-card-header.js';
|
|
import { defineCustomElement as defineIonCardSubtitle } from '@ionic/core/components/ion-card-subtitle.js';
|
|
import { defineCustomElement as defineIonCardTitle } from '@ionic/core/components/ion-card-title.js';
|
|
import { defineCustomElement as defineIonCheckbox } from '@ionic/core/components/ion-checkbox.js';
|
|
import { defineCustomElement as defineIonChip } from '@ionic/core/components/ion-chip.js';
|
|
import { defineCustomElement as defineIonCol } from '@ionic/core/components/ion-col.js';
|
|
import { defineCustomElement as defineIonContent } from '@ionic/core/components/ion-content.js';
|
|
import { defineCustomElement as defineIonDatetime } from '@ionic/core/components/ion-datetime.js';
|
|
import { defineCustomElement as defineIonDatetimeButton } from '@ionic/core/components/ion-datetime-button.js';
|
|
import { defineCustomElement as defineIonFab } from '@ionic/core/components/ion-fab.js';
|
|
import { defineCustomElement as defineIonFabList } from '@ionic/core/components/ion-fab-list.js';
|
|
import { defineCustomElement as defineIonFooter } from '@ionic/core/components/ion-footer.js';
|
|
import { defineCustomElement as defineIonGrid } from '@ionic/core/components/ion-grid.js';
|
|
import { defineCustomElement as defineIonHeader } from '@ionic/core/components/ion-header.js';
|
|
import { defineCustomElement as defineIonImg } from '@ionic/core/components/ion-img.js';
|
|
import { defineCustomElement as defineIonInfiniteScroll } from '@ionic/core/components/ion-infinite-scroll.js';
|
|
import { defineCustomElement as defineIonInfiniteScrollContent } from '@ionic/core/components/ion-infinite-scroll-content.js';
|
|
import { defineCustomElement as defineIonInput } from '@ionic/core/components/ion-input.js';
|
|
import { defineCustomElement as defineIonInputPasswordToggle } from '@ionic/core/components/ion-input-password-toggle.js';
|
|
import { defineCustomElement as defineIonItemDivider } from '@ionic/core/components/ion-item-divider.js';
|
|
import { defineCustomElement as defineIonItemGroup } from '@ionic/core/components/ion-item-group.js';
|
|
import { defineCustomElement as defineIonItemOptions } from '@ionic/core/components/ion-item-options.js';
|
|
import { defineCustomElement as defineIonItemSliding } from '@ionic/core/components/ion-item-sliding.js';
|
|
import { defineCustomElement as defineIonLabel } from '@ionic/core/components/ion-label.js';
|
|
import { defineCustomElement as defineIonList } from '@ionic/core/components/ion-list.js';
|
|
import { defineCustomElement as defineIonListHeader } from '@ionic/core/components/ion-list-header.js';
|
|
import { defineCustomElement as defineIonMenu } from '@ionic/core/components/ion-menu.js';
|
|
import { defineCustomElement as defineIonMenuButton } from '@ionic/core/components/ion-menu-button.js';
|
|
import { defineCustomElement as defineIonMenuToggle } from '@ionic/core/components/ion-menu-toggle.js';
|
|
import { defineCustomElement as defineIonNav } from '@ionic/core/components/ion-nav.js';
|
|
import { defineCustomElement as defineIonNavLink } from '@ionic/core/components/ion-nav-link.js';
|
|
import { defineCustomElement as defineIonNote } from '@ionic/core/components/ion-note.js';
|
|
import { defineCustomElement as defineIonPicker } from '@ionic/core/components/ion-picker.js';
|
|
import { defineCustomElement as defineIonPickerColumn } from '@ionic/core/components/ion-picker-column.js';
|
|
import { defineCustomElement as defineIonPickerColumnOption } from '@ionic/core/components/ion-picker-column-option.js';
|
|
import { defineCustomElement as defineIonProgressBar } from '@ionic/core/components/ion-progress-bar.js';
|
|
import { defineCustomElement as defineIonRadio } from '@ionic/core/components/ion-radio.js';
|
|
import { defineCustomElement as defineIonRadioGroup } from '@ionic/core/components/ion-radio-group.js';
|
|
import { defineCustomElement as defineIonRange } from '@ionic/core/components/ion-range.js';
|
|
import { defineCustomElement as defineIonRefresher } from '@ionic/core/components/ion-refresher.js';
|
|
import { defineCustomElement as defineIonRefresherContent } from '@ionic/core/components/ion-refresher-content.js';
|
|
import { defineCustomElement as defineIonReorder } from '@ionic/core/components/ion-reorder.js';
|
|
import { defineCustomElement as defineIonReorderGroup } from '@ionic/core/components/ion-reorder-group.js';
|
|
import { defineCustomElement as defineIonRippleEffect } from '@ionic/core/components/ion-ripple-effect.js';
|
|
import { defineCustomElement as defineIonRow } from '@ionic/core/components/ion-row.js';
|
|
import { defineCustomElement as defineIonSearchbar } from '@ionic/core/components/ion-searchbar.js';
|
|
import { defineCustomElement as defineIonSegment } from '@ionic/core/components/ion-segment.js';
|
|
import { defineCustomElement as defineIonSegmentButton } from '@ionic/core/components/ion-segment-button.js';
|
|
import { defineCustomElement as defineIonSelect } from '@ionic/core/components/ion-select.js';
|
|
import { defineCustomElement as defineIonSelectOption } from '@ionic/core/components/ion-select-option.js';
|
|
import { defineCustomElement as defineIonSkeletonText } from '@ionic/core/components/ion-skeleton-text.js';
|
|
import { defineCustomElement as defineIonSpinner } from '@ionic/core/components/ion-spinner.js';
|
|
import { defineCustomElement as defineIonSplitPane } from '@ionic/core/components/ion-split-pane.js';
|
|
import { defineCustomElement as defineIonTab } from '@ionic/core/components/ion-tab.js';
|
|
import { defineCustomElement as defineIonText } from '@ionic/core/components/ion-text.js';
|
|
import { defineCustomElement as defineIonTextarea } from '@ionic/core/components/ion-textarea.js';
|
|
import { defineCustomElement as defineIonThumbnail } from '@ionic/core/components/ion-thumbnail.js';
|
|
import { defineCustomElement as defineIonTitle } from '@ionic/core/components/ion-title.js';
|
|
import { defineCustomElement as defineIonToggle } from '@ionic/core/components/ion-toggle.js';
|
|
import { defineCustomElement as defineIonToolbar } from '@ionic/core/components/ion-toolbar.js';
|
|
|
|
export const IonAccordion = /*@__PURE__*/createReactComponent<JSX.IonAccordion, HTMLIonAccordionElement>('ion-accordion', undefined, undefined, defineIonAccordion);
|
|
export const IonAccordionGroup = /*@__PURE__*/createReactComponent<JSX.IonAccordionGroup, HTMLIonAccordionGroupElement>('ion-accordion-group', undefined, undefined, defineIonAccordionGroup);
|
|
export const IonAvatar = /*@__PURE__*/createReactComponent<JSX.IonAvatar, HTMLIonAvatarElement>('ion-avatar', undefined, undefined, defineIonAvatar);
|
|
export const IonBackdrop = /*@__PURE__*/createReactComponent<JSX.IonBackdrop, HTMLIonBackdropElement>('ion-backdrop', undefined, undefined, defineIonBackdrop);
|
|
export const IonBadge = /*@__PURE__*/createReactComponent<JSX.IonBadge, HTMLIonBadgeElement>('ion-badge', undefined, undefined, defineIonBadge);
|
|
export const IonBreadcrumbs = /*@__PURE__*/createReactComponent<JSX.IonBreadcrumbs, HTMLIonBreadcrumbsElement>('ion-breadcrumbs', undefined, undefined, defineIonBreadcrumbs);
|
|
export const IonButtons = /*@__PURE__*/createReactComponent<JSX.IonButtons, HTMLIonButtonsElement>('ion-buttons', undefined, undefined, defineIonButtons);
|
|
export const IonCardContent = /*@__PURE__*/createReactComponent<JSX.IonCardContent, HTMLIonCardContentElement>('ion-card-content', undefined, undefined, defineIonCardContent);
|
|
export const IonCardHeader = /*@__PURE__*/createReactComponent<JSX.IonCardHeader, HTMLIonCardHeaderElement>('ion-card-header', undefined, undefined, defineIonCardHeader);
|
|
export const IonCardSubtitle = /*@__PURE__*/createReactComponent<JSX.IonCardSubtitle, HTMLIonCardSubtitleElement>('ion-card-subtitle', undefined, undefined, defineIonCardSubtitle);
|
|
export const IonCardTitle = /*@__PURE__*/createReactComponent<JSX.IonCardTitle, HTMLIonCardTitleElement>('ion-card-title', undefined, undefined, defineIonCardTitle);
|
|
export const IonCheckbox = /*@__PURE__*/createReactComponent<JSX.IonCheckbox, HTMLIonCheckboxElement>('ion-checkbox', undefined, undefined, defineIonCheckbox);
|
|
export const IonChip = /*@__PURE__*/createReactComponent<JSX.IonChip, HTMLIonChipElement>('ion-chip', undefined, undefined, defineIonChip);
|
|
export const IonCol = /*@__PURE__*/createReactComponent<JSX.IonCol, HTMLIonColElement>('ion-col', undefined, undefined, defineIonCol);
|
|
export const IonContent = /*@__PURE__*/createReactComponent<JSX.IonContent, HTMLIonContentElement>('ion-content', undefined, undefined, defineIonContent);
|
|
export const IonDatetime = /*@__PURE__*/createReactComponent<JSX.IonDatetime, HTMLIonDatetimeElement>('ion-datetime', undefined, undefined, defineIonDatetime);
|
|
export const IonDatetimeButton = /*@__PURE__*/createReactComponent<JSX.IonDatetimeButton, HTMLIonDatetimeButtonElement>('ion-datetime-button', undefined, undefined, defineIonDatetimeButton);
|
|
export const IonFab = /*@__PURE__*/createReactComponent<JSX.IonFab, HTMLIonFabElement>('ion-fab', undefined, undefined, defineIonFab);
|
|
export const IonFabList = /*@__PURE__*/createReactComponent<JSX.IonFabList, HTMLIonFabListElement>('ion-fab-list', undefined, undefined, defineIonFabList);
|
|
export const IonFooter = /*@__PURE__*/createReactComponent<JSX.IonFooter, HTMLIonFooterElement>('ion-footer', undefined, undefined, defineIonFooter);
|
|
export const IonGrid = /*@__PURE__*/createReactComponent<JSX.IonGrid, HTMLIonGridElement>('ion-grid', undefined, undefined, defineIonGrid);
|
|
export const IonHeader = /*@__PURE__*/createReactComponent<JSX.IonHeader, HTMLIonHeaderElement>('ion-header', undefined, undefined, defineIonHeader);
|
|
export const IonImg = /*@__PURE__*/createReactComponent<JSX.IonImg, HTMLIonImgElement>('ion-img', undefined, undefined, defineIonImg);
|
|
export const IonInfiniteScroll = /*@__PURE__*/createReactComponent<JSX.IonInfiniteScroll, HTMLIonInfiniteScrollElement>('ion-infinite-scroll', undefined, undefined, defineIonInfiniteScroll);
|
|
export const IonInfiniteScrollContent = /*@__PURE__*/createReactComponent<JSX.IonInfiniteScrollContent, HTMLIonInfiniteScrollContentElement>('ion-infinite-scroll-content', undefined, undefined, defineIonInfiniteScrollContent);
|
|
export const IonInput = /*@__PURE__*/createReactComponent<JSX.IonInput, HTMLIonInputElement>('ion-input', undefined, undefined, defineIonInput);
|
|
export const IonInputPasswordToggle = /*@__PURE__*/createReactComponent<JSX.IonInputPasswordToggle, HTMLIonInputPasswordToggleElement>('ion-input-password-toggle', undefined, undefined, defineIonInputPasswordToggle);
|
|
export const IonItemDivider = /*@__PURE__*/createReactComponent<JSX.IonItemDivider, HTMLIonItemDividerElement>('ion-item-divider', undefined, undefined, defineIonItemDivider);
|
|
export const IonItemGroup = /*@__PURE__*/createReactComponent<JSX.IonItemGroup, HTMLIonItemGroupElement>('ion-item-group', undefined, undefined, defineIonItemGroup);
|
|
export const IonItemOptions = /*@__PURE__*/createReactComponent<JSX.IonItemOptions, HTMLIonItemOptionsElement>('ion-item-options', undefined, undefined, defineIonItemOptions);
|
|
export const IonItemSliding = /*@__PURE__*/createReactComponent<JSX.IonItemSliding, HTMLIonItemSlidingElement>('ion-item-sliding', undefined, undefined, defineIonItemSliding);
|
|
export const IonLabel = /*@__PURE__*/createReactComponent<JSX.IonLabel, HTMLIonLabelElement>('ion-label', undefined, undefined, defineIonLabel);
|
|
export const IonList = /*@__PURE__*/createReactComponent<JSX.IonList, HTMLIonListElement>('ion-list', undefined, undefined, defineIonList);
|
|
export const IonListHeader = /*@__PURE__*/createReactComponent<JSX.IonListHeader, HTMLIonListHeaderElement>('ion-list-header', undefined, undefined, defineIonListHeader);
|
|
export const IonMenu = /*@__PURE__*/createReactComponent<JSX.IonMenu, HTMLIonMenuElement>('ion-menu', undefined, undefined, defineIonMenu);
|
|
export const IonMenuButton = /*@__PURE__*/createReactComponent<JSX.IonMenuButton, HTMLIonMenuButtonElement>('ion-menu-button', undefined, undefined, defineIonMenuButton);
|
|
export const IonMenuToggle = /*@__PURE__*/createReactComponent<JSX.IonMenuToggle, HTMLIonMenuToggleElement>('ion-menu-toggle', undefined, undefined, defineIonMenuToggle);
|
|
export const IonNav = /*@__PURE__*/createReactComponent<JSX.IonNav, HTMLIonNavElement>('ion-nav', undefined, undefined, defineIonNav);
|
|
export const IonNavLink = /*@__PURE__*/createReactComponent<JSX.IonNavLink, HTMLIonNavLinkElement>('ion-nav-link', undefined, undefined, defineIonNavLink);
|
|
export const IonNote = /*@__PURE__*/createReactComponent<JSX.IonNote, HTMLIonNoteElement>('ion-note', undefined, undefined, defineIonNote);
|
|
export const IonPicker = /*@__PURE__*/createReactComponent<JSX.IonPicker, HTMLIonPickerElement>('ion-picker', undefined, undefined, defineIonPicker);
|
|
export const IonPickerColumn = /*@__PURE__*/createReactComponent<JSX.IonPickerColumn, HTMLIonPickerColumnElement>('ion-picker-column', undefined, undefined, defineIonPickerColumn);
|
|
export const IonPickerColumnOption = /*@__PURE__*/createReactComponent<JSX.IonPickerColumnOption, HTMLIonPickerColumnOptionElement>('ion-picker-column-option', undefined, undefined, defineIonPickerColumnOption);
|
|
export const IonProgressBar = /*@__PURE__*/createReactComponent<JSX.IonProgressBar, HTMLIonProgressBarElement>('ion-progress-bar', undefined, undefined, defineIonProgressBar);
|
|
export const IonRadio = /*@__PURE__*/createReactComponent<JSX.IonRadio, HTMLIonRadioElement>('ion-radio', undefined, undefined, defineIonRadio);
|
|
export const IonRadioGroup = /*@__PURE__*/createReactComponent<JSX.IonRadioGroup, HTMLIonRadioGroupElement>('ion-radio-group', undefined, undefined, defineIonRadioGroup);
|
|
export const IonRange = /*@__PURE__*/createReactComponent<JSX.IonRange, HTMLIonRangeElement>('ion-range', undefined, undefined, defineIonRange);
|
|
export const IonRefresher = /*@__PURE__*/createReactComponent<JSX.IonRefresher, HTMLIonRefresherElement>('ion-refresher', undefined, undefined, defineIonRefresher);
|
|
export const IonRefresherContent = /*@__PURE__*/createReactComponent<JSX.IonRefresherContent, HTMLIonRefresherContentElement>('ion-refresher-content', undefined, undefined, defineIonRefresherContent);
|
|
export const IonReorder = /*@__PURE__*/createReactComponent<JSX.IonReorder, HTMLIonReorderElement>('ion-reorder', undefined, undefined, defineIonReorder);
|
|
export const IonReorderGroup = /*@__PURE__*/createReactComponent<JSX.IonReorderGroup, HTMLIonReorderGroupElement>('ion-reorder-group', undefined, undefined, defineIonReorderGroup);
|
|
export const IonRippleEffect = /*@__PURE__*/createReactComponent<JSX.IonRippleEffect, HTMLIonRippleEffectElement>('ion-ripple-effect', undefined, undefined, defineIonRippleEffect);
|
|
export const IonRow = /*@__PURE__*/createReactComponent<JSX.IonRow, HTMLIonRowElement>('ion-row', undefined, undefined, defineIonRow);
|
|
export const IonSearchbar = /*@__PURE__*/createReactComponent<JSX.IonSearchbar, HTMLIonSearchbarElement>('ion-searchbar', undefined, undefined, defineIonSearchbar);
|
|
export const IonSegment = /*@__PURE__*/createReactComponent<JSX.IonSegment, HTMLIonSegmentElement>('ion-segment', undefined, undefined, defineIonSegment);
|
|
export const IonSegmentButton = /*@__PURE__*/createReactComponent<JSX.IonSegmentButton, HTMLIonSegmentButtonElement>('ion-segment-button', undefined, undefined, defineIonSegmentButton);
|
|
export const IonSelect = /*@__PURE__*/createReactComponent<JSX.IonSelect, HTMLIonSelectElement>('ion-select', undefined, undefined, defineIonSelect);
|
|
export const IonSelectOption = /*@__PURE__*/createReactComponent<JSX.IonSelectOption, HTMLIonSelectOptionElement>('ion-select-option', undefined, undefined, defineIonSelectOption);
|
|
export const IonSkeletonText = /*@__PURE__*/createReactComponent<JSX.IonSkeletonText, HTMLIonSkeletonTextElement>('ion-skeleton-text', undefined, undefined, defineIonSkeletonText);
|
|
export const IonSpinner = /*@__PURE__*/createReactComponent<JSX.IonSpinner, HTMLIonSpinnerElement>('ion-spinner', undefined, undefined, defineIonSpinner);
|
|
export const IonSplitPane = /*@__PURE__*/createReactComponent<JSX.IonSplitPane, HTMLIonSplitPaneElement>('ion-split-pane', undefined, undefined, defineIonSplitPane);
|
|
export const IonTab = /*@__PURE__*/createReactComponent<JSX.IonTab, HTMLIonTabElement>('ion-tab', undefined, undefined, defineIonTab);
|
|
export const IonText = /*@__PURE__*/createReactComponent<JSX.IonText, HTMLIonTextElement>('ion-text', undefined, undefined, defineIonText);
|
|
export const IonTextarea = /*@__PURE__*/createReactComponent<JSX.IonTextarea, HTMLIonTextareaElement>('ion-textarea', undefined, undefined, defineIonTextarea);
|
|
export const IonThumbnail = /*@__PURE__*/createReactComponent<JSX.IonThumbnail, HTMLIonThumbnailElement>('ion-thumbnail', undefined, undefined, defineIonThumbnail);
|
|
export const IonTitle = /*@__PURE__*/createReactComponent<JSX.IonTitle, HTMLIonTitleElement>('ion-title', undefined, undefined, defineIonTitle);
|
|
export const IonToggle = /*@__PURE__*/createReactComponent<JSX.IonToggle, HTMLIonToggleElement>('ion-toggle', undefined, undefined, defineIonToggle);
|
|
export const IonToolbar = /*@__PURE__*/createReactComponent<JSX.IonToolbar, HTMLIonToolbarElement>('ion-toolbar', undefined, undefined, defineIonToolbar);
|