Merge branch 'main' of github.com:ionic-team/ionic-docs

# Conflicts:
#	docs/api/reorder.md
#	docs/reference/glossary.md

Author: rdlabo

.prettierignore

@@ -7,6 +7,7 @@ docs/api
 docs/native
 versioned_docs/version-v*/native
 docs/cli/commands
+docs/reference/glossary.md
 
 static/code/stackblitz
 

_templates/playground/new/angular.md.ejs.t

@@ -0,0 +1,6 @@
+---
+to: "<%= `static/usage/v${version}/${name}/${path}/angular/example_component_html.md` %>"
+---
+```html
+<<%= component %>></<%= component %>>
+```

_templates/playground/new/angular_example_component_html.md.ejs.t

@@ -1,17 +1,16 @@
 ---
-# this file only gets generated if `angular_ts` (from the command line prompt) is true
-to: "<%= angular_ts ? `static/usage/v${version}/${name}/${path}/angular/example_component_ts.md` : null %>"
+arbitrary: <% pascalComponent = h.changeCase.pascal(component) %>
+to: "<%= `static/usage/v${version}/${name}/${path}/angular/example_component_ts.md` %>"
 ---
 ```ts
 import { Component } from '@angular/core';
+import { <%= pascalComponent %> } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-<% if (css){ -%>
   styleUrls: ['./example.component.css'],
-<% } -%>
+  imports: [<%= pascalComponent %>],
 })
-export class ExampleComponent {
-}
+export class ExampleComponent {}
 ```

_templates/playground/new/angular_example_component_ts.md.ejs.t

@@ -62,11 +62,6 @@ module.exports = {
               name: 'css',
               message: 'Generate custom CSS files?',
             },
-            {
-              type: 'toggle',
-              name: 'angular_ts',
-              message: 'Generate an Angular TypeScript file?',
-            },
           ])
           .then((answers) => {
             answers.name = answers.name || answers.component.replace('ion-', '');

_templates/playground/new/index.js

@@ -12,17 +12,12 @@ import react_main_css from './react/main_css.md';
 import react from './react.md';
 <% } -%>
 import vue from './vue.md';
-<% if (css || angular_ts){ %>
+
 import angular_example_component_html from './angular/example_component_html.md';
-<% } else { -%>
-import angular from './angular.md';
-<% } -%>
-<% if (angular_ts){ -%>
-import angular_example_component_ts from './angular/example_component_ts.md';
-<% } -%>
 <% if (css){ -%>
 import angular_example_component_css from './angular/example_component_css.md';
 <% } -%>
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="<%= version %>"
@@ -39,21 +34,15 @@ import angular_example_component_css from './angular/example_component_css.md';
     react,
 <% } -%>
     vue,
-<% if (angular_ts || css){ -%>
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
-<% if (angular_ts){ -%>
-        'src/app/example.component.ts': angular_example_component_ts,
-<% } -%>
 <% if (css){ -%>
         'src/app/example.component.css': angular_example_component_css,
 <% } -%>
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
-<% } else { -%>
-    angular,
-<% } -%>
   }}
   src="usage/v<%= version %>/<%= name %>/<%= path %>/demo.html"
 />

_templates/playground/new/index.md.ejs.t

@@ -11,9 +11,10 @@ import './main.css';<% } %>
 
 function Example() {
   return (
-    <<%= pascalComponent %>></<%= pascalComponent %>>
+    <>
+      <<%= pascalComponent %>></<%= pascalComponent %>>
+    </>
   );
 }
 export default Example;
 ```
-

_templates/playground/new/react.md.ejs.t

@@ -21,6 +21,8 @@ Infinite Scrollコンポーネントは、ユーザーがページの下部ま
 
 ユーザが定義された距離に達したときに、`ionInfinite` イベントに割り当てられた関数が呼び出されます。この関数がすべてのタスクを完了したら、無限スクロールインスタンスに対して `complete()` メソッドを呼び出す必要があります。
 
+## Basic Usage
+
 import Basic from '@site/static/usage/v8/infinite-scroll/basic/index.md';
 
 <Basic />
@@ -118,4 +120,4 @@ interface InfiniteScrollCustomEvent extends CustomEvent {
 <CustomProps />
 
 ## Slots
-<Slots />
+<Slots />

docs/api/infinite-scroll.md

@@ -1,5 +1,5 @@
 ---
-title: "ion-password-toggle"
+title: "ion-input-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';

docs/api/input-password-toggle.md

@@ -16,7 +16,7 @@ import DocsCards from '@components/global/DocsCards';
 
 :::info Looking for the legacy Android guide?
 
-The Developing for Android guide has officially migrated to the [Capacitor documentation for Android](https://capacitorjs.com/docs/android). If you need to access the legacy documentation, you can find it under the [legacy developing for Android guide](/docs/v6/developing/android).
+The Developing for Android guide has officially migrated to the [Capacitor documentation for Android](https://capacitorjs.com/docs/android). If you need to access the legacy documentation, you can find it under the [legacy developing for Android guide](https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v6/developing/android).
 
 :::
 
@@ -30,7 +30,7 @@ The Developing for Android guide has officially migrated to the [Capacitor docum
   </DocsCard>
   <DocsCard
     header="Developing for Android with Cordova (Legacy)"
-    href="https://github.com/docs/v6/developing/android"
+    href="https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v6/developing/android"
     icon="/icons/native-cordova-bot.png"
   >
     <p>Learn the fundamentals you need to know to start building Android apps with Ionic Framework and Cordova.</p>

docs/developing/android.md

@@ -67,8 +67,8 @@ The `ionBackButton` event will not be emitted when running an app in a browser o
 <TabItem value="javascript">
 
 ```javascript
-document.addEventListener('ionBackButton', (ev) => {
-  ev.detail.register(10, () => {
+document.addEventListener('ionBackButton', (event) => {
+  event.detail.register(10, () => {
     console.log('Handler was called!');
   });
 });
@@ -108,8 +108,8 @@ constructor(private platform: Platform) {
 <TabItem value="react">
 
 ```tsx
-document.addEventListener('ionBackButton', (ev) => {
-  ev.detail.register(10, () => {
+document.addEventListener('ionBackButton', (event) => {
+  event.detail.register(10, () => {
     console.log('Handler was called!');
   });
 });
@@ -157,12 +157,12 @@ export default {
 <TabItem value="javascript">
 
 ```javascript
-document.addEventListener('ionBackButton', (ev) => {
-  ev.detail.register(5, () => {
+document.addEventListener('ionBackButton', (event) => {
+  event.detail.register(5, () => {
     console.log('Another handler was called!');
   });
 
-  ev.detail.register(10, (processNextHandler) => {
+  event.detail.register(10, (processNextHandler) => {
     console.log('Handler was called!');
 
     processNextHandler();
@@ -216,12 +216,12 @@ constructor(private platform: Platform) {
 <TabItem value="react">
 
 ```tsx
-document.addEventListener('ionBackButton', (ev) => {
-  ev.detail.register(5, () => {
+document.addEventListener('ionBackButton', (event) => {
+  event.detail.register(5, () => {
     console.log('Another handler was called!');
   });
 
-  ev.detail.register(10, (processNextHandler) => {
+  event.detail.register(10, (processNextHandler) => {
     console.log('Handler was called!');
 
     processNextHandler();
@@ -261,16 +261,16 @@ export default {
 内部的には、Ionic Framework はハードウェアのバックボタンハンドラを管理するためにプライオリティキューに似たものを使用します。優先順位の値が最大のハンドラが最初に呼び出されます。同じ優先順位のハンドラが複数存在する場合、このキューに追加された同じ優先順位の _last_ handler が、最初に呼び出されるハンドラになります。
 
 ```javascript
-document.addEventListener('ionBackButton', (ev) => {
+document.addEventListener('ionBackButton', (event) => {
   // Handler A
-  ev.detail.register(10, (processNextHandler) => {
+  event.detail.register(10, (processNextHandler) => {
     console.log('Handler A was called!');
 
     processNextHandler();
   });
 
   // Handler B
-  ev.detail.register(10, (processNextHandler) => {
+  event.detail.register(10, (processNextHandler) => {
     console.log('Handler B was called!');
 
     processNextHandler();
@@ -305,8 +305,8 @@ import { App } from '@capacitor/app';
 ...
 
 const routerEl = document.querySelector('ion-router');
-document.addEventListener('ionBackButton', (ev: BackButtonEvent) => {
-  ev.detail.register(-1, () => {
+document.addEventListener('ionBackButton', (event: BackButtonEvent) => {
+  event.detail.register(-1, () => {
     const path = window.location.pathname;
     if (path === routerEl.root) {
       App.exitApp();
@@ -368,8 +368,8 @@ import { App } from '@capacitor/app';
 ...
 
 const ionRouter = useIonRouter();
-document.addEventListener('ionBackButton', (ev) => {
-  ev.detail.register(-1, () => {
+document.addEventListener('ionBackButton', (event) => {
+  event.detail.register(-1, () => {
     if (!ionRouter.canGoBack()) {
       App.exitApp();
     }

docs/developing/hardware-back-button.md

@@ -17,7 +17,7 @@ import DocsCards from '@components/global/DocsCards';
 
 :::info Looking for the legacy iOS guide?
 
-The Developing for iOS guide has officially migrated to the [Capacitor documentation for iOS](https://capacitorjs.com/docs/ios). If you need to access the legacy documentation, you can find it under the [legacy developing for iOS guide](/docs/v6/developing/ios).
+The Developing for iOS guide has officially migrated to the [Capacitor documentation for iOS](https://capacitorjs.com/docs/ios). If you need to access the legacy documentation, you can find it under the [legacy developing for iOS guide](https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v6/developing/ios).
 
 :::
 
@@ -31,7 +31,7 @@ The Developing for iOS guide has officially migrated to the [Capacitor documenta
   </DocsCard>
   <DocsCard
     header="Developing for iOS with Cordova (Legacy)"
-    href="https://github.com/docs/v6/developing/ios"
+    href="https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v6/developing/ios"
     icon="/icons/native-cordova-bot.png"
   >
     <p>Learn the fundamentals you need to know to start building iOS apps with Ionic Framework and Cordova.</p>

docs/developing/ios.md

@@ -91,8 +91,8 @@ When running an app in Capacitor or Cordova, it is possible to hide the accessor
 <TabItem value="javascript">
 
 ```javascript
-window.addEventListener('ionKeyboardDidShow', ev => {
-  const { keyboardHeight } = ev;
+window.addEventListener('ionKeyboardDidShow', event => {
+  const { keyboardHeight } = event;
   // Do something with the keyboard height such as translating an input above the keyboard.
 });
 
@@ -109,8 +109,8 @@ import { Platform } from '@ionic/angular';
 ...
 
 constructor(private platform: Platform) {
-  this.platform.keyboardDidShow.subscribe(ev => {
-    const { keyboardHeight } = ev;
+  this.platform.keyboardDidShow.subscribe(event => {
+    const { keyboardHeight } = event;
     // Do something with the keyboard height such as translating an input above the keyboard.
   });
 
@@ -128,8 +128,8 @@ import { Platform } from '@ionic/angular/standalone';
 ...
 
 constructor(private platform: Platform) {
-  this.platform.keyboardDidShow.subscribe(ev => {
-    const { keyboardHeight } = ev;
+  this.platform.keyboardDidShow.subscribe(event => {
+    const { keyboardHeight } = event;
     // Do something with the keyboard height such as translating an input above the keyboard.
   });
 

docs/developing/keyboard.md

@@ -96,7 +96,6 @@ npm は最初に `package.lock.json` からパッケージのバージョンを
 選択できるコードエディターはたくさんあります。ここに私たちのお気に入りのいくつかがあります：
 
 - [Visual Studio Code](https://code.visualstudio.com): a popular and free text editor made by Microsoft
-- [Atom](https://atom.io): a hackable text editor made by GitHub
 - [WebStorm](https://www.jetbrains.com/webstorm/): a powerful non-free editor by JetBrains
 
 ## デバッガの利用