ionic-team · liamdebeasi · Mar 27, 2024 · Mar 21, 2024 · Mar 21, 2024 · Mar 22, 2024
@@ -0,0 +1,46 @@
+---
+title: "ion-password-toggle"
+---
+import Props from '@ionic-internal/component-api/v8/input-password-toggle/props.md';
+import Events from '@ionic-internal/component-api/v8/input-password-toggle/events.md';
+import Methods from '@ionic-internal/component-api/v8/input-password-toggle/methods.md';
+import Parts from '@ionic-internal/component-api/v8/input-password-toggle/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/input-password-toggle/custom-props.md';
+import Slots from '@ionic-internal/component-api/v8/input-password-toggle/slots.md';
+
+<head>
+  <title>ion-input-password-toggle: Toggle the visibility of a password in Input</title>
+  <meta name="description" content="ion-input-password-toggle is a companion component to ion-input. It allows users to toggle the visibility of text in a password input." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+The InputPasswordToggle component is a companion component to [Input](./input). It allows users to toggle the visibility of text in a password input.
+
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v8/input-password-toggle/basic/index.md';
+
+<Basic />
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js
@@ -52,7 +52,9 @@ module.exports = function (context, options) {
 
       let npmTag = 'latest';
       if (currentVersion.banner === 'unreleased') {
-        npmTag = 'next';
+        // TODO NOW - Revert this to "next" prior to merge
+        // this was changed so the new component shows up in the docs
+        npmTag = '8.0.0-dev.11711035263.183d2423';
       } else if (currentVersion.path !== undefined) {
         npmTag = currentVersion.path.slice(1);
       }

@@ -352,7 +352,7 @@ module.exports = {
       type: 'category',
       label: 'Input',
       collapsed: false,
-      items: ['api/input', 'api/textarea'],
+      items: ['api/input', 'api/input-password-toggle', 'api/textarea'],
     },
     {
       type: 'category',

@@ -0,0 +1,5 @@
+```html
+<ion-input type="password" label="Password" value="NeverGonnaGiveYouUp">
+  <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+</ion-input>
+```
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Input</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <!-- TODO revert this to use "next" before merging -->
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/dist/ionic/ionic.esm.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/css/ionic.bundle.css"
+    />
+
+    <style>
+      ion-input.custom-input {
+        width: fit-content;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-input class="custom-input" type="password" label="Password" value="NeverGonnaGiveYouUp">
+            <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+          </ion-input>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="8"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v8/input-password-toggle/basic/demo.html"
+/>
@@ -0,0 +1,5 @@
+```html
+<ion-input type="password" label="Password" value="NeverGonnaGiveYouUp">
+  <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+</ion-input>
+```
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonInput, IonInputPasswordToggle } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonInput type="password" label="Password" value="NeverGonnaGiveYouUp">
+      <IonInputPasswordToggle slot="end"></IonInputPasswordToggle>
+    </IonInput>
+  );
+}
+export default Example;
+```
@@ -0,0 +1,11 @@
+```html
+<template>
+  <ion-input type="password" label="Password" value="NeverGonnaGiveYouUp">
+    <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+  </ion-input>
+</template>
+
+<script setup lang="ts">
+  import { IonInput, InputPasswordToggle } from '@ionic/vue';
+</script>
+```